Repository: kiwicom/mobile
Pull request #1021 (2018-08-24 12:14:37)

Replace rest of colors with defaultTokens


Patch:
diff --git a/app/MMB/package.json b/app/MMB/package.json
index 8700caa5..1d44f1f3 100644
--- a/app/MMB/package.json
+++ b/app/MMB/package.json
@@ -10,6 +10,7 @@
     "@kiwicom/mobile-pdf": "^0",
     "@kiwicom/mobile-relay": "^0",
     "@kiwicom/mobile-shared": "^0",
+    "@kiwicom/mobile-orbit": "^0",
     "lodash": "^4.17.10",
     "react-native-dash": "^0.0.8",
     "react-native-share": "^1.0.27"
diff --git a/app/MMB/src/components/header/StatusBarIcon.js b/app/MMB/src/components/header/StatusBarIcon.js
index bd24036c..6cb38d1b 100644
--- a/app/MMB/src/components/header/StatusBarIcon.js
+++ b/app/MMB/src/components/header/StatusBarIcon.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { StyleSheet, Color, Text } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -49,7 +49,7 @@ function Status({ data }: {| data: StatusBarIcon |}) {
     case 'REFUNDED':
       return (
         <StatusIcon
-          color={Color.black} // TODO: Consult designer
+          color={defaultTokens.paletteInkDark}
           title={<Translation id="mmb.status.refunded" />}
         />
       );
diff --git a/app/MMB/src/scenes/appleWallet/AppleWalletScene.js b/app/MMB/src/scenes/appleWallet/AppleWalletScene.js
index 7a0231ec..1108dbde 100644
--- a/app/MMB/src/scenes/appleWallet/AppleWalletScene.js
+++ b/app/MMB/src/scenes/appleWallet/AppleWalletScene.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import HeaderImage from './HeaderImage';
@@ -45,6 +45,6 @@ const styles = StyleSheet.create({
   },
   borderBottom: {
     borderBottomWidth: 1,
-    borderBottomColor: Color.backgroundGray, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
   },
 });
diff --git a/app/MMB/src/scenes/appleWallet/WalletContent.js b/app/MMB/src/scenes/appleWallet/WalletContent.js
index 7cb9539a..3bcda5b3 100644
--- a/app/MMB/src/scenes/appleWallet/WalletContent.js
+++ b/app/MMB/src/scenes/appleWallet/WalletContent.js
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { View } from 'react-native';
 import {
   StyleSheet,
-  Color,
   Text,
   AppleWalletButton,
   PassBook,
@@ -68,7 +67,7 @@ const styles = StyleSheet.create({
   },
   borderBottom: {
     borderBottomWidth: 1,
-    borderBottomColor: Color.backgroundGray, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
   },
   dateContainer: {
     paddingTop: 18,
diff --git a/app/MMB/src/scenes/list/cityImage/ImageBadges.js b/app/MMB/src/scenes/list/cityImage/ImageBadges.js
index 73199c64..26ec6c1c 100644
--- a/app/MMB/src/scenes/list/cityImage/ImageBadges.js
+++ b/app/MMB/src/scenes/list/cityImage/ImageBadges.js
@@ -36,7 +36,7 @@ export default createFragmentContainer(
 
 const styles = StyleSheet.create({
   bookingIdBadge: {
-    backgroundColor: Color.grey.transparent.outerSpace.$60, // TODO: Consult designer
+    backgroundColor: Color.grey.transparent.outerSpace.$60,
   },
   badgeText: {
     fontSize: 10,
diff --git a/app/MMB/src/scenes/list/cityImage/StatusBadge.js b/app/MMB/src/scenes/list/cityImage/StatusBadge.js
index 0b203014..ac8f022f 100644
--- a/app/MMB/src/scenes/list/cityImage/StatusBadge.js
+++ b/app/MMB/src/scenes/list/cityImage/StatusBadge.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { AdaptableBadge, StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { AdaptableBadge, StyleSheet } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import idx from 'idx';
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     backgroundColor: defaultTokens.paletteGreenNormal,
   },
   blackBadge: {
-    backgroundColor: Color.black, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteInkDark,
   },
   redBadge: {
     backgroundColor: defaultTokens.paletteRedNormal,
diff --git a/app/MMB/src/scenes/passenger/PassengerMenuItem.js b/app/MMB/src/scenes/passenger/PassengerMenuItem.js
index c7197207..e8e8448e 100644
--- a/app/MMB/src/scenes/passenger/PassengerMenuItem.js
+++ b/app/MMB/src/scenes/passenger/PassengerMenuItem.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Color, StyleSheet, Text, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text, TextIcon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -45,7 +45,7 @@ const styleSheet = StyleSheet.create({
     fontSize: 12,
   },
   icon: {
-    color: Color.black, // TODO: Consult designer
+    color: defaultTokens.colorIconAttention,
     fontSize: 16,
     paddingTop: 2,
     marginEnd: 5,
diff --git a/app/MMB/src/scenes/passenger/baggage/CabinBags.js b/app/MMB/src/scenes/passenger/baggage/CabinBags.js
index 53e4ad64..43781805 100644
--- a/app/MMB/src/scenes/passenger/baggage/CabinBags.js
+++ b/app/MMB/src/scenes/passenger/baggage/CabinBags.js
@@ -4,8 +4,9 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Color, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
 import idx from 'idx';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import type { CabinBags as Bags } from './__generated__/CabinBags.graphql';
 import BagInfo from './BagInfo';
@@ -47,7 +48,7 @@ export default createFragmentContainer(
 
 const styles = StyleSheet.create({
   icon: {
-    color: Color.black, // TODO: Consult designer
+    color: defaultTokens.paletteInkDark,
     fontSize: 14,
   },
 });
diff --git a/app/MMB/src/scenes/passenger/baggage/CheckedBaggage.js b/app/MMB/src/scenes/passenger/baggage/CheckedBaggage.js
index 113a4735..531a963b 100644
--- a/app/MMB/src/scenes/passenger/baggage/CheckedBaggage.js
+++ b/app/MMB/src/scenes/passenger/baggage/CheckedBaggage.js
@@ -4,8 +4,9 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Color, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
 import idx from 'idx';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import BagInfo from './BagInfo';
 import BaggageMenuItem from './BaggageMenuItem';
@@ -49,7 +50,7 @@ export default createFragmentContainer(
 
 const styles = StyleSheet.create({
   icon: {
-    color: Color.black, // TODO: Consult designer
+    color: defaultTokens.paletteInkDark,
     fontSize: 14,
   },
 });
diff --git a/app/MMB/src/scenes/passenger/visa/VisaRequired.js b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
index 5eea9b02..3757f918 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaRequired.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Alert from '../../../components/alert/Alert';
 
@@ -31,7 +32,7 @@ export default function VisaRequired(props: Props) {
 const styles = StyleSheet.create({
   country: {
     fontSize: 12,
-    color: Color.red.monza, // TODO: Consult designer
+    color: defaultTokens.paletteRedNormal,
     fontWeight: '600',
   },
 });
diff --git a/app/MMB/src/scenes/passenger/visa/VisaWarning.js b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
index 1750f70b..5fb27381 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaWarning.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Alert from '../../../components/alert/Alert';
 
@@ -31,7 +32,7 @@ export default function VisaWarning(props: Props) {
 const styles = StyleSheet.create({
   country: {
     fontSize: 12,
-    color: Color.orange.gamboge, // TODO: Consult designer
+    color: defaultTokens.paletteOrangeNormal,
     fontWeight: '600',
   },
 });
diff --git a/app/MMB/src/scenes/tickets/ETicket.js b/app/MMB/src/scenes/tickets/ETicket.js
index 52c76c9c..0018ccfc 100644
--- a/app/MMB/src/scenes/tickets/ETicket.js
+++ b/app/MMB/src/scenes/tickets/ETicket.js
@@ -7,7 +7,6 @@ import {
   SimpleCard,
   StyleSheet,
   Text,
-  Color,
   Button,
 } from '@kiwicom/mobile-shared';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
@@ -104,7 +103,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   disabled: {
-    backgroundColor: Color.disabled, // TODO: Consult desinger
+    backgroundColor: defaultTokens.paletteInkLighter,
   },
   buttonText: {
     color: defaultTokens.paletteWhite,
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/DownloadButton.js b/app/MMB/src/scenes/tickets/boardingPasses/DownloadButton.js
index 53c32beb..a7b78755 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/DownloadButton.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/DownloadButton.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Button, StyleSheet, Color, Text } from '@kiwicom/mobile-shared';
+import { Button, StyleSheet, Text } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import {
   type NavigationType,
@@ -66,6 +66,6 @@ const styles = StyleSheet.create({
     color: defaultTokens.paletteWhite,
   },
   disabled: {
-    backgroundColor: Color.disabled, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteInkLighter,
   },
 });
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWallet.js b/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWallet.js
index cb1cb8a1..d7fe0177 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWallet.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWallet.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Text, StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { Text, StyleSheet } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -69,6 +69,6 @@ const styles = StyleSheet.create({
   },
   passengerContainer: {
     borderTopWidth: 1,
-    borderTopColor: Color.backgroundGray, // TODO: Consult designer
+    borderTopColor: defaultTokens.paletteCloudLight,
   },
 });
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWalletPassenger.js b/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWalletPassenger.js
index bea51644..1b573a28 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWalletPassenger.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/appleWallet/AppleWalletPassenger.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Icon, StyleSheet, Color, Touchable } from '@kiwicom/mobile-shared';
+import { Icon, StyleSheet, Touchable } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import {
   type NavigationType,
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     borderBottomWidth: 1,
-    borderBottomColor: Color.backgroundGray, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
     paddingVertical: 20,
   },
 });
diff --git a/app/MMB/src/scenes/timeline/DaySeparator.js b/app/MMB/src/scenes/timeline/DaySeparator.js
index 7717b025..f5a320b7 100644
--- a/app/MMB/src/scenes/timeline/DaySeparator.js
+++ b/app/MMB/src/scenes/timeline/DaySeparator.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text } from '@kiwicom/mobile-shared';
 import {
   Translation,
   DateFormatter,
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   container: {
     paddingTop: 10,
     paddingBottom: 10,
-    backgroundColor: Color.backgroundGray, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
   date: {
     color: defaultTokens.paletteInkLight,
diff --git a/app/MMB/src/scenes/timeline/TimelineRow.js b/app/MMB/src/scenes/timeline/TimelineRow.js
index 66024507..7c92ef7e 100644
--- a/app/MMB/src/scenes/timeline/TimelineRow.js
+++ b/app/MMB/src/scenes/timeline/TimelineRow.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, Color, type StylePropType } from '@kiwicom/mobile-shared';
+import { StyleSheet, type StylePropType } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import IsPastEventContext from '../../context/TimelineEventContext';
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
     flex: 14,
   },
   isPastEvent: {
-    backgroundColor: Color.grey.$50, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
 });
 
diff --git a/app/MMB/src/scenes/travelDocument/form/TravelDocumentForm.js b/app/MMB/src/scenes/travelDocument/form/TravelDocumentForm.js
index 89a55202..b71e53de 100644
--- a/app/MMB/src/scenes/travelDocument/form/TravelDocumentForm.js
+++ b/app/MMB/src/scenes/travelDocument/form/TravelDocumentForm.js
@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, TextIcon, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
 import { graphql, PublicApiRenderer } from '@kiwicom/mobile-relay';
 import last from 'lodash/last';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import TitleTranslation from '../../../components/TitleTranslation';
 import IdInput from './IdInput';
@@ -102,7 +103,7 @@ export default class TravelDocumentForm extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   icon: {
-    color: Color.black, // TODO: Consult designer
+    color: defaultTokens.colorIconAttention,
     fontSize: 16,
     paddingTop: 2,
     marginEnd: 5,
diff --git a/app/MMB/src/scenes/travelDocument/form/expiryPicker/ExpiryDatePicker.js b/app/MMB/src/scenes/travelDocument/form/expiryPicker/ExpiryDatePicker.js
index 1df388ab..a51f7800 100644
--- a/app/MMB/src/scenes/travelDocument/form/expiryPicker/ExpiryDatePicker.js
+++ b/app/MMB/src/scenes/travelDocument/form/expiryPicker/ExpiryDatePicker.js
@@ -2,13 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import {
-  Text,
-  StyleSheet,
-  Color,
-  DatePicker,
-  Switch,
-} from '@kiwicom/mobile-shared';
+import { Text, StyleSheet, DatePicker, Switch } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import max from 'lodash/max';
@@ -33,9 +27,7 @@ export const ExpiryDatePicker = (props: PropsWithContext) => {
   );
   return (
     <React.Fragment>
-      <Text
-        style={[styles.label, props.noExpiry ? styles.noExpiry : styles.expiry]}
-      >
+      <Text style={[styles.label, styles.expiry]}>
         <Translation id="mmb.missing_informaiton.travel_document_modal_screen.passport_or_id_expiry" />
       </Text>
       <View style={styles.row}>
@@ -98,9 +90,6 @@ export default createFragmentContainer(
 );
 
 const styles = StyleSheet.create({
-  noExpiry: {
-    color: Color.labelDisabled, // TODO: Consult designer
-  },
   expiry: {
     color: defaultTokens.colorTextSecondary,
   },
diff --git a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
index 85f10309..5accf5f8 100644
--- a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
+++ b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneData.js
@@ -2,10 +2,13 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Color, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 const styles = StyleSheet.create({
-  icon: { color: Color.black }, // TODO: Consult designer
+  icon: {
+    color: defaultTokens.colorIconAttention,
+  },
 });
 
 export default [
diff --git a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneRow.js b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneRow.js
index 76da0200..b7234db5 100644
--- a/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneRow.js
+++ b/app/MMB/src/scenes/tripServices/insurance/moreInfoScene/MoreInfoSceneRow.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Color, TextIcon, Text } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon, Text } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type RowTitle = React.Element<typeof Translation>;
@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
     paddingVertical: 15,
   },
   wrapperBackground: {
-    backgroundColor: Color.backgroundGray, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
   cellWrapper: {
     flex: 1,
diff --git a/app/hotels/package.json b/app/hotels/package.json
index 5be4d43f..64e5e7fe 100644
--- a/app/hotels/package.json
+++ b/app/hotels/package.json
@@ -8,6 +8,7 @@
     "@kiwicom/mobile-localization": "^0",
     "@kiwicom/mobile-relay": "^0",
     "@kiwicom/mobile-shared": "^0",
+    "@kiwicom/mobile-orbit": "^0",
     "geolib": "^2.0.24",
     "idx": "^2.4.0",
     "querystring": "^0.2.0",
diff --git a/app/hotels/src/allHotels/HotelReviewScore.js b/app/hotels/src/allHotels/HotelReviewScore.js
index 860766cc..f7b2a0f4 100644
--- a/app/hotels/src/allHotels/HotelReviewScore.js
+++ b/app/hotels/src/allHotels/HotelReviewScore.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import idx from 'idx';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { AdaptableBadge, StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { AdaptableBadge, StyleSheet } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -53,13 +53,13 @@ export class HotelReviewScore extends React.Component<Props> {
    */
   calculateColor = (score: number): ?string => {
     if (score >= 0 === score < 3) {
-      return Color.red.monza; // TODO: Consult with designer and replace with design token
+      return defaultTokens.paletteRedNormal;
     }
     if (score >= 3 === score <= 7) {
       return defaultTokens.paletteOrangeNormal;
     }
     if (score > 7 === score <= 10) {
-      return Color.green.lapalma; // TODO: Consult with designer and replace with design token
+      return defaultTokens.paletteGreenNormal;
     }
   };
 
diff --git a/app/hotels/src/allHotels/searchForm/guests/ChildrenAgesControl.js b/app/hotels/src/allHotels/searchForm/guests/ChildrenAgesControl.js
index 1668d769..3f8d2ac9 100644
--- a/app/hotels/src/allHotels/searchForm/guests/ChildrenAgesControl.js
+++ b/app/hotels/src/allHotels/searchForm/guests/ChildrenAgesControl.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     paddingStart: 15,
   },
   ageControlContainer: {
-    borderBottomColor: Color.backgroundGray, // TODO: Consult with desinger, not in design token
+    borderBottomColor: defaultTokens.paletteCloudLight,
     borderBottomWidth: 1,
   },
   ageControl: {
diff --git a/app/hotels/src/allHotels/searchForm/guests/GuestsNumberControls.js b/app/hotels/src/allHotels/searchForm/guests/GuestsNumberControls.js
index 1209652a..59f25d5a 100644
--- a/app/hotels/src/allHotels/searchForm/guests/GuestsNumberControls.js
+++ b/app/hotels/src/allHotels/searchForm/guests/GuestsNumberControls.js
@@ -2,8 +2,9 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, Color, NumberControl } from '@kiwicom/mobile-shared';
+import { StyleSheet, NumberControl } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type Props = {|
   +adultsCount: number,
@@ -53,7 +54,7 @@ const styles = StyleSheet.create({
   },
   separator: {
     paddingStart: 15,
-    borderBottomColor: Color.backgroundGray, // TODO: Consult with designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
     borderBottomWidth: 1,
   },
   numberPicker: {
diff --git a/app/hotels/src/filter/FilterButton.js b/app/hotels/src/filter/FilterButton.js
index 9597840f..d0ea29db 100644
--- a/app/hotels/src/filter/FilterButton.js
+++ b/app/hotels/src/filter/FilterButton.js
@@ -6,13 +6,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import {
-  Button,
-  ButtonTitle,
-  Color,
-  Icon,
-  StyleSheet,
-} from '@kiwicom/mobile-shared';
+import { Button, ButtonTitle, Icon, StyleSheet } from '@kiwicom/mobile-shared';
 import type { TranslationType } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -27,7 +21,9 @@ const FilterButton = (props: PropsWithContext) => {
   let icon = props.icon;
   const { title, isActive, onPress, isNew } = props;
   const styleSheet = isNew ? newStyles : styles;
-  const iconColor = isNew ? defaultTokens.colorIconPrimary : Color.brandDark; // Color.brandDark is not on design tokens, this code will disappear once native starts to use `NewKiwiHotels`
+  const iconColor = isNew
+    ? defaultTokens.colorIconPrimary
+    : defaultTokens.paletteProductDark;
   const iconColorActive = isNew
     ? defaultTokens.paletteCloudNormal
     : defaultTokens.paletteWhite;
@@ -77,7 +73,7 @@ const styles = StyleSheet.create({
     backgroundColor: defaultTokens.paletteProductNormal,
   },
   buttonGroup: {
-    backgroundColor: Color.blue.jaggedIce, // Leave this for now
+    backgroundColor: defaultTokens.paletteProductLight,
     marginEnd: 5,
     ios: {
       height: 36,
@@ -88,7 +84,7 @@ const styles = StyleSheet.create({
     color: defaultTokens.paletteWhite,
   },
   buttonText: {
-    color: Color.brandDark, // Leave this for now
+    color: defaultTokens.paletteProductDark,
   },
   icon: {
     paddingEnd: 5,
diff --git a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
index f2af8954..06f3381a 100644
--- a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
+++ b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
@@ -4,13 +4,13 @@ import * as React from 'react';
 import { View } from 'react-native';
 import {
   ButtonPopup,
-  Color,
   Checkbox,
   Icon,
   StyleSheet,
   Text,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type Props = {|
   +facilities: string[],
@@ -158,12 +158,12 @@ export default class HotelFacilitiesPopup extends React.Component<
 
 const styles = StyleSheet.create({
   title: {
-    color: Color.grey.$800, // TODO: Consult designer
+    color: defaultTokens.paletteInkNormal,
     paddingBottom: 5,
   },
   delimiter: {
     borderBottomWidth: 0.5,
-    borderBottomColor: Color.grey.$300, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudNormal,
   },
   checkbox: {
     flexDirection: 'row',
diff --git a/app/hotels/src/filter/stars/StarsPopup.js b/app/hotels/src/filter/stars/StarsPopup.js
index c40bbbe5..d5dce8dc 100644
--- a/app/hotels/src/filter/stars/StarsPopup.js
+++ b/app/hotels/src/filter/stars/StarsPopup.js
@@ -4,7 +4,6 @@ import * as React from 'react';
 import {
   StyleSheet,
   ButtonPopup,
-  Color,
   Checkbox,
   Text,
 } from '@kiwicom/mobile-shared';
@@ -98,7 +97,7 @@ const styles = StyleSheet.create({
   },
   delimiter: {
     borderBottomWidth: 0.5,
-    borderBottomColor: Color.backgroundGray, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
   },
   unrated: {
     marginStart: 3,
diff --git a/app/hotels/src/gallery/PhotosStripe.js b/app/hotels/src/gallery/PhotosStripe.js
index 620efc23..77da2113 100644
--- a/app/hotels/src/gallery/PhotosStripe.js
+++ b/app/hotels/src/gallery/PhotosStripe.js
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
   },
   slide: {
     flex: 1,
-    backgroundColor: Color.black, // TODO: Consult desinger
+    backgroundColor: Color.black,
   },
   networkImage: {
     flex: 1,
diff --git a/app/hotels/src/gallery/PhotosStripeHeader.js b/app/hotels/src/gallery/PhotosStripeHeader.js
index 85c3c2f8..26684a9a 100644
--- a/app/hotels/src/gallery/PhotosStripeHeader.js
+++ b/app/hotels/src/gallery/PhotosStripeHeader.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Text, StyleSheet, Touchable, Color } from '@kiwicom/mobile-shared';
+import { Text, StyleSheet, Touchable } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -66,12 +66,12 @@ const styles = StyleSheet.create({
       width: 1,
       height: 1,
     },
-    textShadowColor: Color.black, // TODO: Consult designer
+    textShadowColor: defaultTokens.paletteInkDark,
     textShadowRadius: 2,
   },
   subTitle: {
     textAlign: 'center',
-    color: 'grey', // TODO: Consult designer
+    color: defaultTokens.paletteCloudLight,
     fontSize: 12,
   },
   voidRight: {
diff --git a/app/hotels/src/map/BottomSheetHandle.js b/app/hotels/src/map/BottomSheetHandle.js
index ef166aa4..98e72f75 100644
--- a/app/hotels/src/map/BottomSheetHandle.js
+++ b/app/hotels/src/map/BottomSheetHandle.js
@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { StyleSheet } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 export default function Handle() {
   return <View style={styles.handle} />;
@@ -11,7 +12,7 @@ export default function Handle() {
 const styles = StyleSheet.create({
   handle: {
     borderBottomWidth: 2,
-    borderBottomColor: Color.grey.athensGrey, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudLight,
     borderRadius: 130,
     alignSelf: 'center',
     width: 100,
diff --git a/app/hotels/src/map/allHotels/PriceMarker.js b/app/hotels/src/map/allHotels/PriceMarker.js
index 3e7c2d1d..9541647a 100644
--- a/app/hotels/src/map/allHotels/PriceMarker.js
+++ b/app/hotels/src/map/allHotels/PriceMarker.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { Color, Price, StyleSheet } from '@kiwicom/mobile-shared';
+import { Price, StyleSheet } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import type { PriceMarker as PriceMarkerData } from './__generated__/PriceMarker.graphql';
@@ -60,11 +60,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
     backgroundColor: defaultTokens.paletteWhite,
     borderRadius: 3,
-    borderColor: Color.grey.$200, // TODO: Consult designer
+    borderColor: defaultTokens.paletteCloudNormal,
     borderWidth: 1,
   },
   price: {
-    color: Color.black, // TODO: Consult designer
+    color: defaultTokens.paletteInkDark,
     fontSize: 14,
     fontWeight: 'bold',
   },
@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     borderColor: 'transparent',
     borderWidth: 8,
-    borderTopColor: Color.grey.$200, // TODO: Consult designer
+    borderTopColor: defaultTokens.paletteCloudNormal,
     borderRadius: 3,
     alignSelf: 'center',
   },
diff --git a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
index 9509a1a8..0534bcc2 100644
--- a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
+++ b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderRadius: 2,
-    backgroundColor: Color.grey.transparent.outerSpace.$60, // TODO: Consult designer
+    backgroundColor: Color.grey.transparent.outerSpace.$60,
     paddingVertical: 5,
     paddingHorizontal: 8,
   },
diff --git a/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js b/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
index ecb76a59..3a16719d 100644
--- a/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
+++ b/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
@@ -3,7 +3,8 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { AdaptableLayout, StyleSheet, Color } from '@kiwicom/mobile-shared';
+import { AdaptableLayout, StyleSheet } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Location from './location/Location';
 import Description from './description/Description';
@@ -58,7 +59,7 @@ export class HotelInformation extends React.Component<Props> {
 const styles = StyleSheet.create({
   locationContainer: {
     borderBottomWidth: 1,
-    borderBottomColor: Color.grey.$200, // TODO: Consult designer
+    borderBottomColor: defaultTokens.paletteCloudNormal,
     marginBottom: 15,
   },
 });
diff --git a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
index 1df330c2..15f855fc 100644
--- a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
+++ b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
@@ -5,7 +5,6 @@ import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import {
   StyleSheet,
-  Color,
   AdaptableBadge,
   Text,
   Touchable,
@@ -102,7 +101,7 @@ const styles = StyleSheet.create({
     marginTop: 15,
     paddingTop: 15,
     borderTopWidth: 1,
-    borderTopColor: Color.grey.$200, // TODO: Consult designer
+    borderTopColor: defaultTokens.paletteCloudNormal,
     flexWrap: 'wrap',
     alignItems: 'flex-start',
     flexDirection: 'row',
@@ -112,7 +111,7 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   adaptableBadge: {
-    backgroundColor: Color.grey.porcelain, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
     marginEnd: 5,
     marginBottom: 5,
   },
diff --git a/app/hotels/src/singleHotel/roomList/RoomBadges.js b/app/hotels/src/singleHotel/roomList/RoomBadges.js
index d279992d..fcbb1a20 100644
--- a/app/hotels/src/singleHotel/roomList/RoomBadges.js
+++ b/app/hotels/src/singleHotel/roomList/RoomBadges.js
@@ -10,6 +10,7 @@ import {
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import type { RoomBadges_availableRoom as RoomBadgesTypes } from './__generated__/RoomBadges_availableRoom.graphql';
 
@@ -74,15 +75,15 @@ export default (createFragmentContainer(
 
 const styles = StyleSheet.create({
   badgeContainer: {
-    backgroundColor: Color.green.transparent.lapalma.$15, // TODO: Consult designer
+    backgroundColor: Color.green.transparent.lapalma.$15,
     marginTop: 5,
   },
   badgeText: {
-    color: Color.green.lapalma, // TODO: Consult designer
+    color: defaultTokens.colorTextBadgeSuccess,
     fontSize: 10,
   },
   iconStyle: {
-    color: Color.green.lapalma, // TODO: Consult designer
+    color: defaultTokens.colorIconSuccess,
     fontSize: 10,
     ios: {
       alignSelf: 'flex-end',
diff --git a/app/hotels/src/singleHotel/roomList/RoomDescription.js b/app/hotels/src/singleHotel/roomList/RoomDescription.js
index 0821f4e2..ad26e935 100644
--- a/app/hotels/src/singleHotel/roomList/RoomDescription.js
+++ b/app/hotels/src/singleHotel/roomList/RoomDescription.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { Text, StyleSheet, Color, ReadMore } from '@kiwicom/mobile-shared';
+import { Text, StyleSheet, ReadMore } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
@@ -59,7 +59,7 @@ export default (createFragmentContainer(
 const styles = StyleSheet.create({
   delimiter: {
     height: 1,
-    backgroundColor: Color.backgroundGray, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
     marginVertical: 6,
   },
   description: {
diff --git a/app/hotels/src/singleHotel/roomPicker/RoomPicker.js b/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
index f1a01b92..aaa10742 100644
--- a/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
+++ b/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
@@ -8,7 +8,6 @@ import {
   StyleSheet,
   Touchable,
   ButtonTitle,
-  Color,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
@@ -114,13 +113,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   container: {
-    backgroundColor: Color.blue.jaggedIce, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteProductLight,
     height: 44,
     paddingHorizontal: 10,
     paddingVertical: 14,
   },
   text: {
-    color: Color.brandDark, // TODO: Consult designer
+    color: defaultTokens.paletteProductDark,
     fontSize: 14,
   },
   button: {
diff --git a/packages/navigation/index.js b/packages/navigation/index.js
index 794d4723..9b1a65ef 100644
--- a/packages/navigation/index.js
+++ b/packages/navigation/index.js
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Platform, StatusBar } from 'react-native';
 import ReactNavigation from 'react-navigation';
 import {
-  Color,
   Device,
   StyleSheet,
   Dimensions,
@@ -87,7 +86,7 @@ export const StackNavigatorOptions = {
   initialRouteName: 'Home',
   navigationOptions: createNavigationOptions(),
   cardStyle: {
-    backgroundColor: Color.backgroundGray, // TODO: Consult with designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
 };
 
diff --git a/packages/navigation/src/MenuItemIcon.js b/packages/navigation/src/MenuItemIcon.js
index d6982f54..bc031513 100644
--- a/packages/navigation/src/MenuItemIcon.js
+++ b/packages/navigation/src/MenuItemIcon.js
@@ -1,13 +1,13 @@
-// @flow
+// @flow strict
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Color, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type Props = {|
-  invertColors: boolean,
-  iconComponent: React.Element<typeof TextIcon>,
+  +invertColors: boolean,
+  +iconComponent: React.Element<typeof TextIcon>,
 |};
 
 export default function MenuItemIcon(props: Props) {
@@ -35,7 +35,7 @@ const styleSheet = StyleSheet.create({
     },
     ios: {
       fontSize: 14,
-      color: Color.grey.$600, // TODO: Consult designer
+      color: defaultTokens.colorIconSecondary,
     },
   },
   iconInverted: {
diff --git a/packages/navigation/src/Separators.js b/packages/navigation/src/Separators.js
index 23526814..57b77de7 100644
--- a/packages/navigation/src/Separators.js
+++ b/packages/navigation/src/Separators.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Color, StyleSheet } from '@kiwicom/mobile-shared';
+import { StyleSheet } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type SeparatorFullWidthType = {|
@@ -58,7 +58,7 @@ const styleSheet = StyleSheet.create({
   separator: {
     flex: 1,
     height: 1,
-    backgroundColor: Color.backgroundGray, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
   row: {
     flexDirection: 'row',
diff --git a/packages/orbit/package.json b/packages/orbit/package.json
index 73480cb1..60d3e58f 100644
--- a/packages/orbit/package.json
+++ b/packages/orbit/package.json
@@ -4,6 +4,6 @@
   "main": "index.js",
   "private": true,
   "dependencies": {
-    "@kiwicom/orbit-design-tokens": "^0.1.3"
+    "@kiwicom/orbit-design-tokens": "^0.1.4"
   }
 }
diff --git a/packages/shared/src/AdaptableBadge.js b/packages/shared/src/AdaptableBadge.js
index 3bb4b882..57f35535 100644
--- a/packages/shared/src/AdaptableBadge.js
+++ b/packages/shared/src/AdaptableBadge.js
@@ -7,7 +7,6 @@ import type { StylePropType } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Text from './Text';
-import Color from './Color';
 import StyleSheet from './PlatformStyleSheet';
 
 type Props = {|
@@ -46,7 +45,7 @@ const style = StyleSheet.create({
     borderRadius: 2,
     paddingVertical: 2,
     paddingHorizontal: 5,
-    backgroundColor: Color.grey.$500, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteInkLight,
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
diff --git a/packages/shared/src/Color.js b/packages/shared/src/Color.js
index b3dd23f8..400dc867 100644
--- a/packages/shared/src/Color.js
+++ b/packages/shared/src/Color.js
@@ -1,56 +1,55 @@
 // @flow strict
 
+/**
+ * This file should be used carefully, basically colors should be used from defaultTokens from mobile-orbit packages.
+ * The colors here are for special cases only, and should be commented why they are here
+ */
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+
+export const hexToRgba = (hex: string, opacity: number): string => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const replacedHex = hex.replace(shorthandRegex, (m, r, g, b) => {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(replacedHex);
+  return result
+    ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+        result[3],
+        16,
+      )}, ${opacity})`
+    : 'rgba(0,0,0,0)';
+};
+
 const ColorPalette = {
-  black: '#000000',
+  black: '#000000', // We need a black backround for our image modal, It should be entirely black
 
   transparent: {
     black: {
-      $30: 'rgba(0, 0, 0, 0.3)',
-      $32: 'rgba(0, 0, 0, .32)',
+      $30: 'rgba(0, 0, 0, 0.3)', // opacity works differently on RN, we need to keep this
+      $32: 'rgba(0, 0, 0, .32)', // opacity works differently on RN, we need to keep this
     },
   },
 
-  // FIXME: remove (or modify)
   grey: {
-    $50: '#fafafa',
-    $200: '#eeeeee',
-    $300: '#e0e0e0',
-    $400: '#bdbdbd',
-    $500: '#9e9e9e',
-    $600: '#757575',
-    $800: '#424242',
-    athensGrey: '#edeff2',
-    porcelain: '#eceff1',
-    geyser: '#cad2dc',
     transparent: {
       outerSpace: {
-        $60: 'rgba(48, 54, 61, 0.6)',
+        $60: hexToRgba(defaultTokens.paletteInkDark, 0.6), // opacity works differently on RN, we need to keep this
       },
     },
   },
 
   green: {
-    lapalma: '#31a11e',
     transparent: {
       lapalma: {
-        $15: 'rgba(49, 161, 30, 0.15)',
+        $15: hexToRgba(defaultTokens.paletteGreenNormal, 0.15), // opacity works differently on RN, we need to keep this
       },
     },
   },
-
-  orange: {
-    gamboge: '#eb9d08',
-  },
-
-  blue: {
-    jaggedIce: '#c4e7e4',
-  },
-
-  red: {
-    monza: '#d0021b',
-  },
 };
 
+// Collection of colors, in multicity trips, this is the only logical place to store them
 const tripColorCodes = [
   '#00a991',
   '#fbad18',
@@ -66,12 +65,6 @@ const tripColorCodes = [
 ];
 
 export default {
-  brandDark: '#007362',
-
-  backgroundGray: '#f4f6f8',
-  disabled: '#b8c1cc',
-  disabledInput: '#fafbfc',
-  labelDisabled: '#dfe4ea',
   ...ColorPalette,
   tripColorCodes,
 };
diff --git a/packages/shared/src/Touchable.js b/packages/shared/src/Touchable.js
index 31dfd761..14105d21 100644
--- a/packages/shared/src/Touchable.js
+++ b/packages/shared/src/Touchable.js
@@ -38,7 +38,7 @@ type Props = {|
 export default class Touchable extends React.Component<Props> {
   static defaultProps = {
     borderlessRipple: false,
-    rippleColor: Color.transparent.black.$32, // TODO: Consult designer
+    rippleColor: Color.transparent.black.$32,
     disabled: false,
   };
 
diff --git a/packages/shared/src/buttons/TextButton.js b/packages/shared/src/buttons/TextButton.js
index 1c6727d7..a784b143 100644
--- a/packages/shared/src/buttons/TextButton.js
+++ b/packages/shared/src/buttons/TextButton.js
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { type TranslationType } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import Color from '../Color';
 import StyleSheet from '../PlatformStyleSheet';
 import ButtonTitle from './ButtonTitle';
 import Button from './Button';
@@ -45,7 +44,7 @@ const styleSheet = StyleSheet.create({
     color: defaultTokens.paletteWhite,
   },
   buttonDisabled: {
-    backgroundColor: Color.grey.$300, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudNormal,
   },
   buttonTextDisabled: {
     color: defaultTokens.paletteInkDark,
diff --git a/packages/shared/src/forms/Slider.js b/packages/shared/src/forms/Slider.js
index 12620b06..2636b8bb 100644
--- a/packages/shared/src/forms/Slider.js
+++ b/packages/shared/src/forms/Slider.js
@@ -6,7 +6,6 @@ import type { OnLayout } from '@kiwicom/mobile-shared';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import Color from '../Color';
 import StyleSheet from '../PlatformStyleSheet';
 
 type Props = {|
@@ -104,7 +103,7 @@ const styles = StyleSheet.create({
     backgroundColor: defaultTokens.paletteProductNormal,
   },
   unselected: {
-    backgroundColor: Color.grey.$400, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteInkLight,
   },
   track: {
     borderRadius: 5,
@@ -116,8 +115,8 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     backgroundColor: defaultTokens.paletteWhite,
     borderWidth: 1,
-    borderColor: Color.grey.$400, // TODO: Consult designer
-    shadowColor: Color.black, // TODO: Consult designer
+    borderColor: defaultTokens.paletteInkLight,
+    shadowColor: defaultTokens.paletteInkDark,
     shadowOffset: {
       width: 0,
       height: 3,
diff --git a/packages/shared/src/forms/datePicker/DatePickerButton.js b/packages/shared/src/forms/datePicker/DatePickerButton.js
index 57e4c8a1..cff07c74 100644
--- a/packages/shared/src/forms/datePicker/DatePickerButton.js
+++ b/packages/shared/src/forms/datePicker/DatePickerButton.js
@@ -12,7 +12,6 @@ import { defaultTokens } from '@kiwicom/mobile-orbit';
 import Touchable from '../../Touchable';
 import StyleSheet from '../../PlatformStyleSheet';
 import Text from '../../Text';
-import Color from '../../Color';
 
 type Props = {|
   +onPress: () => void,
@@ -75,6 +74,6 @@ const styles = StyleSheet.create({
     marginStart: 5,
   },
   disabled: {
-    backgroundColor: Color.disabledInput, // TODO: Consult designer
+    backgroundColor: defaultTokens.paletteCloudLight,
   },
 });
diff --git a/packages/shared/src/view/LayoutDoubleColumn.js b/packages/shared/src/view/LayoutDoubleColumn.js
index 172b1cb9..fdc72715 100644
--- a/packages/shared/src/view/LayoutDoubleColumn.js
+++ b/packages/shared/src/view/LayoutDoubleColumn.js
@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import Color from '../Color';
 import AdaptableLayout from './AdaptableLayout';
 import StyleSheet from '../PlatformStyleSheet';
 import Layout from './Layout';
@@ -93,7 +93,7 @@ const styleSheet = StyleSheet.create({
     width: 520,
     maxWidth: '50%',
     borderEndWidth: 1,
-    borderEndColor: Color.grey.geyser, // TODO: Consult designer
+    borderEndColor: defaultTokens.paletteInkLighter,
   },
   container: {
     flex: 1,
diff --git a/yarn.lock b/yarn.lock
index bdcc9b4e..0a99cb9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -527,9 +527,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@kiwicom/orbit-design-tokens@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@kiwicom/orbit-design-tokens/-/orbit-design-tokens-0.1.3.tgz#42c5ceccdd061508203edf6aa25784f31a65c96b"
+"@kiwicom/orbit-design-tokens@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@kiwicom/orbit-design-tokens/-/orbit-design-tokens-0.1.4.tgz#18eb47bd62a78a8109406f91b7d2f0eb000d63fa"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"


Test patch:
diff --git a/app/MMB/src/scenes/passenger/visa/__tests__/__snapshots__/VisaRequired.test.js.snap b/app/MMB/src/scenes/passenger/visa/__tests__/__snapshots__/VisaRequired.test.js.snap
index aa44180a..f4c7bf86 100644
--- a/app/MMB/src/scenes/passenger/visa/__tests__/__snapshots__/VisaRequired.test.js.snap
+++ b/app/MMB/src/scenes/passenger/visa/__tests__/__snapshots__/VisaRequired.test.js.snap
@@ -14,7 +14,7 @@ exports[`VisaRequired renders with one country in the array 1`] = `
   <Text
     style={
       Object {
-        "color": "#d0021b",
+        "color": "#d21c1c",
         "fontSize": 12,
         "fontWeight": "600",
       }
@@ -39,7 +39,7 @@ exports[`VisaRequired renders with several countries in the array 1`] = `
   <Text
     style={
       Object {
-        "color": "#d0021b",
+        "color": "#d21c1c",
         "fontSize": 12,
         "fontWeight": "600",
       }
@@ -52,7 +52,7 @@ exports[`VisaRequired renders with several countries in the array 1`] = `
   <Text
     style={
       Object {
-        "color": "#d0021b",
+        "color": "#d21c1c",
         "fontSize": 12,
         "fontWeight": "600",
       }
@@ -65,7 +65,7 @@ exports[`VisaRequired renders with several countries in the array 1`] = `
   <Text
     style={
       Object {
-        "color": "#d0021b",
+        "color": "#d21c1c",
         "fontSize": 12,
         "fontWeight": "600",
       }
diff --git a/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js b/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
index 17909a5d..4442433d 100644
--- a/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
+++ b/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
@@ -1,6 +1,5 @@
 // @flow
 
-import { Color } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import { HotelReviewScore } from '../HotelReviewScore';
@@ -23,9 +22,9 @@ describe('formatScore', () => {
 
 describe('calculateColor', () => {
   it('returns correct score color', () => {
-    const RED = Color.red.monza;
+    const RED = defaultTokens.paletteRedNormal;
     const ORANGE = defaultTokens.paletteOrangeNormal;
-    const GREEN = Color.green.lapalma;
+    const GREEN = defaultTokens.paletteGreenNormal;
 
     expect(HRS.calculateColor(-1)).toBeUndefined();
     expect(HRS.calculateColor(0)).toBe(RED);
diff --git a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
index 82aec6c0..c3bf1f87 100644
--- a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
+++ b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
@@ -30,7 +30,7 @@ exports[`StarsPopup should render popup 1`] = `
     stars={5}
     style={
       Object {
-        "borderBottomColor": "#f4f6f8",
+        "borderBottomColor": "#f5f7f9",
         "borderBottomWidth": 0.5,
       }
     }
@@ -41,7 +41,7 @@ exports[`StarsPopup should render popup 1`] = `
     stars={4}
     style={
       Object {
-        "borderBottomColor": "#f4f6f8",
+        "borderBottomColor": "#f5f7f9",
         "borderBottomWidth": 0.5,
       }
     }
@@ -52,7 +52,7 @@ exports[`StarsPopup should render popup 1`] = `
     stars={3}
     style={
       Object {
-        "borderBottomColor": "#f4f6f8",
+        "borderBottomColor": "#f5f7f9",
         "borderBottomWidth": 0.5,
       }
     }
@@ -63,7 +63,7 @@ exports[`StarsPopup should render popup 1`] = `
     stars={2}
     style={
       Object {
-        "borderBottomColor": "#f4f6f8",
+        "borderBottomColor": "#f5f7f9",
         "borderBottomWidth": 0.5,
       }
     }
@@ -74,7 +74,7 @@ exports[`StarsPopup should render popup 1`] = `
     stars={1}
     style={
       Object {
-        "borderBottomColor": "#f4f6f8",
+        "borderBottomColor": "#f5f7f9",
         "borderBottomWidth": 0.5,
       }
     }
diff --git a/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap b/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
index 8fe95d43..8bb80fd9 100644
--- a/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
+++ b/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
@@ -49,7 +49,7 @@ exports[`renders header with title 1`] = `
           "color": "#fff",
           "fontWeight": "bold",
           "textAlign": "center",
-          "textShadowColor": "#000000",
+          "textShadowColor": "#171b1e",
           "textShadowOffset": Object {
             "height": 1,
             "width": 1,
@@ -65,7 +65,7 @@ exports[`renders header with title 1`] = `
     <Text
       style={
         Object {
-          "color": "grey",
+          "color": "#f5f7f9",
           "fontSize": 12,
           "textAlign": "center",
         }
@@ -141,7 +141,7 @@ exports[`renders header with very long title 1`] = `
           "color": "#fff",
           "fontWeight": "bold",
           "textAlign": "center",
-          "textShadowColor": "#000000",
+          "textShadowColor": "#171b1e",
           "textShadowOffset": Object {
             "height": 1,
             "width": 1,
@@ -157,7 +157,7 @@ exports[`renders header with very long title 1`] = `
     <Text
       style={
         Object {
-          "color": "grey",
+          "color": "#f5f7f9",
           "fontSize": 12,
           "textAlign": "center",
         }
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
index 4da8eb6b..1f1df2a8 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
@@ -9,7 +9,7 @@ Array [
         style={
           Object {
             "alignSelf": "flex-end",
-            "color": "#31a11e",
+            "color": "#46B655",
             "fontSize": 10,
             "marginEnd": 5,
           }
@@ -18,13 +18,13 @@ Array [
     }
     style={
       Object {
-        "backgroundColor": "rgba(49, 161, 30, 0.15)",
+        "backgroundColor": "rgba(70, 182, 85, 0.15)",
         "marginTop": 5,
       }
     }
     textStyle={
       Object {
-        "color": "#31a11e",
+        "color": "#46B655",
         "fontSize": 10,
       }
     }
@@ -41,7 +41,7 @@ Array [
         style={
           Object {
             "alignSelf": "flex-end",
-            "color": "#31a11e",
+            "color": "#46B655",
             "fontSize": 10,
             "marginEnd": 5,
           }
@@ -50,13 +50,13 @@ Array [
     }
     style={
       Object {
-        "backgroundColor": "rgba(49, 161, 30, 0.15)",
+        "backgroundColor": "rgba(70, 182, 85, 0.15)",
         "marginTop": 5,
       }
     }
     textStyle={
       Object {
-        "color": "#31a11e",
+        "color": "#46B655",
         "fontSize": 10,
       }
     }
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap
index c70b1fe3..978adf4f 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap
@@ -5,7 +5,7 @@ exports[`RoomDescription renders 1`] = `
   <Component
     style={
       Object {
-        "backgroundColor": "#f4f6f8",
+        "backgroundColor": "#f5f7f9",
         "height": 1,
         "marginVertical": 6,
       }
diff --git a/app/hotels/src/singleHotel/roomPicker/__tests__/__snapshots__/RoomPicker.test.js.snap b/app/hotels/src/singleHotel/roomPicker/__tests__/__snapshots__/RoomPicker.test.js.snap
index c3b676f6..ba70bc57 100644
--- a/app/hotels/src/singleHotel/roomPicker/__tests__/__snapshots__/RoomPicker.test.js.snap
+++ b/app/hotels/src/singleHotel/roomPicker/__tests__/__snapshots__/RoomPicker.test.js.snap
@@ -9,7 +9,7 @@ exports[`renders as expected 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#c4e7e4",
+        "backgroundColor": "#9ae5da",
         "height": 44,
         "paddingHorizontal": 10,
         "paddingVertical": 14,
@@ -36,7 +36,7 @@ exports[`renders as expected 1`] = `
     <ButtonTitle
       style={
         Object {
-          "color": "#007362",
+          "color": "#005448",
           "fontSize": 14,
         }
       }
@@ -59,7 +59,7 @@ exports[`renders as expected 1`] = `
       currency="CZK"
       style={
         Object {
-          "color": "#007362",
+          "color": "#005448",
           "fontSize": 14,
         }
       }
@@ -84,7 +84,7 @@ exports[`renders as expected 2`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#c4e7e4",
+          "backgroundColor": "#9ae5da",
           "height": 44,
           "paddingHorizontal": 10,
           "paddingVertical": 14,
@@ -103,7 +103,7 @@ exports[`renders as expected 2`] = `
       style={
         Array [
           Object {
-            "color": "#007362",
+            "color": "#005448",
             "fontSize": 14,
           },
           Object {
@@ -121,7 +121,7 @@ exports[`renders as expected 2`] = `
       currency="CZK"
       style={
         Object {
-          "color": "#007362",
+          "color": "#005448",
           "fontSize": 14,
         }
       }
@@ -150,7 +150,7 @@ exports[`renders as expected 3`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#c4e7e4",
+          "backgroundColor": "#9ae5da",
           "height": 44,
           "paddingHorizontal": 10,
           "paddingVertical": 14,
@@ -169,7 +169,7 @@ exports[`renders as expected 3`] = `
       style={
         Array [
           Object {
-            "color": "#007362",
+            "color": "#005448",
             "fontSize": 14,
           },
           Object {
@@ -187,7 +187,7 @@ exports[`renders as expected 3`] = `
       currency="CZK"
       style={
         Object {
-          "color": "#007362",
+          "color": "#005448",
           "fontSize": 14,
         }
       }
diff --git a/packages/shared/src/__tests__/Color.test.js b/packages/shared/src/__tests__/Color.test.js
new file mode 100644
index 00000000..8a5df5f0
--- /dev/null
+++ b/packages/shared/src/__tests__/Color.test.js
@@ -0,0 +1,10 @@
+// @flow strict
+
+import { hexToRgba } from '../Color';
+
+it('converts correctly', () => {
+  expect(hexToRgba('#30363d', 0.5)).toEqual('rgba(48, 54, 61, 0.5)');
+  expect(hexToRgba('#c80164', 0.2)).toEqual('rgba(200, 1, 100, 0.2)');
+  expect(hexToRgba('#20d535', 0.9)).toEqual('rgba(32, 213, 53, 0.9)');
+  expect(hexToRgba('#fff', 0.15)).toEqual('rgba(255, 255, 255, 0.15)');
+});
diff --git a/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap b/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
index 68bd6501..484d66d7 100644
--- a/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
+++ b/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
@@ -6,7 +6,7 @@ exports[`renders text 1`] = `
     Array [
       Object {
         "alignSelf": "flex-start",
-        "backgroundColor": "#9e9e9e",
+        "backgroundColor": "#7f91a8",
         "borderRadius": 2,
         "flexDirection": "row",
         "flexWrap": "wrap",
@@ -40,7 +40,7 @@ exports[`renders text with color 1`] = `
     Array [
       Object {
         "alignSelf": "flex-start",
-        "backgroundColor": "#9e9e9e",
+        "backgroundColor": "#7f91a8",
         "borderRadius": 2,
         "flexDirection": "row",
         "flexWrap": "wrap",
@@ -76,7 +76,7 @@ exports[`renders very long texts 1`] = `
     Array [
       Object {
         "alignSelf": "flex-start",
-        "backgroundColor": "#9e9e9e",
+        "backgroundColor": "#7f91a8",
         "borderRadius": 2,
         "flexDirection": "row",
         "flexWrap": "wrap",
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
index 70c76bd4..6d98fbca 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
@@ -29,12 +29,12 @@ exports[`Slider renders 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -52,12 +52,12 @@ exports[`Slider renders 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -91,7 +91,7 @@ exports[`Slider renders 1`] = `
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#bdbdbd",
+        "backgroundColor": "#7f91a8",
       }
     }
     values={
@@ -133,12 +133,12 @@ exports[`Slider renders correctly with all values equal 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -156,12 +156,12 @@ exports[`Slider renders correctly with all values equal 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -195,7 +195,7 @@ exports[`Slider renders correctly with all values equal 1`] = `
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#bdbdbd",
+        "backgroundColor": "#7f91a8",
       }
     }
     values={
@@ -237,12 +237,12 @@ exports[`Slider renders with endValue undefined 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -260,12 +260,12 @@ exports[`Slider renders with endValue undefined 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#bdbdbd",
+        "borderColor": "#7f91a8",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000000",
+        "shadowColor": "#171b1e",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -299,7 +299,7 @@ exports[`Slider renders with endValue undefined 1`] = `
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#bdbdbd",
+        "backgroundColor": "#7f91a8",
       }
     }
     values={