@ornikar/kitt-universal 26.3.1-late-ocean.ea9938a3219bcd82e7bbea585f5b7083975351b2.0 → 27.0.1-canary.01819bc93ab006bfbaa4e1335cd8afa2380068a0.0

package/dist/linaria-themes.es.web.js

@@ -13,117 +13,81 @@ var createColorScale = function (colorScale) {
   return colorScale;
 };
 var colorScales = {
-  eggshell: createColorScale({
-    1: '#faf9f8',
-    2: '#f4f3ef',
-    3: '#F0EEE9',
-    4: '#dedad2',
-    5: '#d1cdc5',
-    6: '#bab8ae',
-    7: '#aeaba3',
-    8: '#9c9a92',
-    9: '#8e8c83',
-    10: '#74726a',
-    11: '#3e3d3a',
-    12: '#282826'
+  deepPurple: createColorScale({
+    5: '#936C93',
+    6: '#7A587A',
+    7: '#6E4D6E',
+    8: '#563B56',
+    9: '#452F45'
   }),
-  violine: createColorScale({
-    1: '#f8f7ff',
-    2: '#f2f0ff',
-    3: '#ebe8ff',
-    4: '#d5cfff',
-    5: '#bfb5ff',
-    6: '#a99cff',
-    7: '#9180ff',
-    8: '#7b66ff',
-    9: '#624af7',
-    10: '#5139e1',
-    11: '#3a26b5',
-    12: '#0a0428'
+  beige: createColorScale({
+    1: '#F7F4EE',
+    2: '#F1ECE4',
+    3: '#EAE3D6',
+    4: '#E5DCCA',
+    5: '#DDD0B8',
+    6: '#C1B59F'
   }),
-  lavender: createColorScale({
-    1: '#fdf7ff',
-    2: '#fcf2ff',
-    3: '#FAEBFF',
-    4: '#f8e3ff',
-    5: '#f4d6ff',
-    6: '#efc2ff',
-    7: '#d298ff',
-    8: '#b97aff',
-    9: '#ac5ff9',
-    10: '#9d4ced',
-    11: '#6b347e',
-    12: '#290a34'
+  lightning: createColorScale({
+    5: '#FFF500',
+    7: '#43390A'
+  }),
+  rainbow: createColorScale({
+    pink: '#E4A4F9',
+    brick: '#951D12',
+    orange: '#DB6E2E',
+    gold: '#9A7600',
+    sun: '#EFD346',
+    'green-pine': '#1C5D47',
+    'green-grass': '#4DA00A',
+    'green-apple': '#DEF985',
+    'blue-electric': '#2850C4',
+    'blue-sky': '#B2F0FD'
+  }),
+  grey: createColorScale({
+    0: '#ffffff',
+    1: '#ECECEC',
+    2: '#CDCED0',
+    3: '#A8A8A8',
+    5: '#838383',
+    7: '#505050',
+    9: '#101010'
   }),
   blue: createColorScale({
-    1: '#f7faff',
-    2: '#f0f5ff',
-    3: '#e8f0ff',
-    4: '#d4e0ff',
-    5: '#baceff',
-    6: '#a1bbff',
-    7: '#87a9ff',
-    8: '#6e96ff',
-    9: '#5383ff',
-    10: '#4170eb',
-    11: '#0e4381',
-    12: '#061c36'
+    1: '#E9F4FC',
+    2: '#BCDFF6',
+    6: '#1772AB'
   }),
-  raspberry: createColorScale({
-    1: '#fff7fa',
-    2: '#fff0f5',
-    3: '#ffe8ef',
-    4: '#f0c7d4',
-    5: '#f0afc4',
-    6: '#f097b3',
-    7: '#f07fa3',
-    8: '#d95d84',
-    9: '#cf2a60',
-    10: '#c12558',
-    11: '#61192e',
-    12: '#29040f'
+  green: createColorScale({
+    1: '#ECFEDD',
+    2: '#DBFAC1',
+    6: '#438D06'
   }),
-  coral: createColorScale({
-    1: '#fff7f7',
-    2: '#fff0f0',
-    3: '#ffe8e8',
-    4: '#ffcfcf',
-    5: '#ffb5b5',
-    6: '#ff9c9c',
-    7: '#f57d7d',
-    8: '#eb6565',
-    9: '#e55050',
-    10: '#da3d3d',
-    11: '#8a2b1e',
-    12: '#330c07'
+  yellow: createColorScale({
+    1: '#FDF8E7',
+    2: '#FAEBB8',
+    6: '#EFC11F'
   }),
-  sun: createColorScale({
-    1: '#fffdf7',
-    2: '#fffbf0',
-    3: '#fff6de',
-    4: '#ffefc4',
-    5: '#ffe8ab',
-    6: '#ffe191',
-    7: '#ffda78',
-    8: '#ffd35e',
-    9: '#fdc32d',
-    10: '#f3a40c',
-    11: '#9f5600',
-    12: '#341c00'
+  red: createColorScale({
+    1: '#FDE4E3',
+    2: '#FAB8B8',
+    6: '#F14847'
   }),
-  green: createColorScale({
-    1: '#f9fff9',
-    2: '#e9ffeb',
-    3: '#d3fbd7',
-    4: '#bffbc5',
-    5: '#96f4b0',
-    6: '#7fefac',
-    7: '#21e8a3',
-    8: '#08d48e',
-    9: '#00c381',
-    10: '#00ac72',
-    11: '#0e8159',
-    12: '#03291c'
+  'beige-alpha': createColorScale({
+    '25': '#C1B59F40',
+    '40': '#C1B59F66',
+    '50': '#C1B59F80'
+  }),
+  'grey-alpha': createColorScale({
+    '25': '#10101040',
+    '35': '#10101059',
+    '50': '#10101080'
+  }),
+  'white-alpha': createColorScale({
+    '10': '#FFFFFF1A',
+    '20': '#FFFFFF33',
+    '80': '#FFFFFFCC',
+    '90': '#FFFFFFE5'
   })
 };
 var transformColorScalesToTokens = function () {
@@ -139,89 +103,43 @@ var transformColorScalesToTokens = function () {
     });
   }));
 };
-var lateOceanColorPalette = _objectSpread(_objectSpread({}, transformColorScalesToTokens()), {}, {
-  /** @deprecated use violine.9 instead */
-  lateOcean: colorScales.violine[9],
-  /** @deprecated use violine.8 instead */
-  lateOceanLight1: colorScales.violine[8],
-  /** @deprecated use violine.6 instead */
-  lateOceanLight2: colorScales.violine[6],
-  /** @deprecated use lavender.6 instead */
-  lateOceanLight3: colorScales.lavender[6],
-  /** @deprecated use violine.12 instead */
-  lateOceanDark1: colorScales.violine[12],
-  /** @deprecated use lavender.5 instead */
-  warmEmbrace: colorScales.lavender[5],
-  /** @deprecated use lavender.3 instead */
-  warmEmbraceLight1: colorScales.lavender[3],
+var deepPurpleColorPalette = _objectSpread(_objectSpread({}, transformColorScalesToTokens()), {}, {
   white: '#FFFFFF',
   black: '#000000',
-  /** @deprecated use black instead */
-  black1000: '#000000',
-  /** @deprecated use eggshell.11 instead */
-  black800: colorScales.eggshell[11],
-  /** @deprecated use eggshell.10 instead */
-  black555: colorScales.eggshell[10],
-  /** @deprecated use eggshell.7 instead */
-  black400: colorScales.eggshell[7],
-  /** @deprecated use eggshell.4 instead */
-  black200: colorScales.eggshell[4],
-  /** @deprecated use eggshell.3 instead */
-  black100: colorScales.eggshell[3],
-  /** @deprecated use eggshell.2 instead */
-  black50: colorScales.eggshell[2],
-  /** @deprecated use eggshell.1 instead */
-  black25: colorScales.eggshell[1],
-  /** @deprecated use green.8 instead */
-  viride: colorScales.green[8],
-  /** @deprecated use coral.7 instead */
-  englishVermillon: colorScales.coral[7],
-  /** @deprecated use sun.8 instead */
-  goldCrayola: colorScales.sun[8],
-  /** @deprecated use blue.8 instead */
-  aero: colorScales.blue[8],
-  /** @deprecated use eggshell.1 instead */
-  seaShell: colorScales.eggshell[1],
-  transparent: 'transparent',
-  /** @deprecated use violine.4 instead */
-  moonPurple: colorScales.violine[4],
-  /** @deprecated use violine.2 instead */
-  moonPurpleLight1: colorScales.violine[2]
+  transparent: 'transparent'
 });
 
 var colors = {
-  primary: lateOceanColorPalette['violine.9'],
-  primaryLight: lateOceanColorPalette['violine.8'],
-  accent: lateOceanColorPalette['lavender.5'],
-  accentLight: lateOceanColorPalette['lavender.3'],
-  success: lateOceanColorPalette['green.8'],
-  correct: lateOceanColorPalette['green.8'],
-  danger: lateOceanColorPalette['coral.8'],
-  info: lateOceanColorPalette['blue.8'],
-  warning: lateOceanColorPalette['sun.8'],
-  separator: lateOceanColorPalette['eggshell.3'],
-  hover: lateOceanColorPalette['eggshell.3'],
-  white: lateOceanColorPalette.white,
-  black: lateOceanColorPalette.black,
-  blackDisabled: lateOceanColorPalette['eggshell.7'],
-  blackLight: lateOceanColorPalette['eggshell.10'],
-  blackAnthracite: lateOceanColorPalette['eggshell.11'],
-  uiBackground: lateOceanColorPalette['eggshell.1'],
-  uiBackgroundLight: lateOceanColorPalette.white,
-  transparent: lateOceanColorPalette.transparent,
-  disabled: lateOceanColorPalette['eggshell.2'],
+  primary: deepPurpleColorPalette['deepPurple.8'],
+  primaryLight: deepPurpleColorPalette['deepPurple.8'],
+  accent: deepPurpleColorPalette['beige.1'],
+  accentLight: deepPurpleColorPalette['beige.1'],
+  success: deepPurpleColorPalette['green.6'],
+  correct: deepPurpleColorPalette['green.6'],
+  danger: deepPurpleColorPalette['red.6'],
+  info: deepPurpleColorPalette['blue.6'],
+  warning: deepPurpleColorPalette['yellow.6'],
+  separator: deepPurpleColorPalette['beige.3'],
+  white: deepPurpleColorPalette['grey.0'],
+  black: deepPurpleColorPalette['grey.9'],
+  blackLight: deepPurpleColorPalette['grey.5'],
+  blackAnthracite: deepPurpleColorPalette['grey.7'],
+  uiBackground: deepPurpleColorPalette['beige.1'],
+  uiBackgroundLight: deepPurpleColorPalette['grey.0'],
+  transparent: deepPurpleColorPalette.transparent,
+  disabled: deepPurpleColorPalette['grey.1'],
   overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)'
+    dark: deepPurpleColorPalette['grey-alpha.50'],
+    light: deepPurpleColorPalette['white-alpha.80']
   }
 };
 
 var actionCard = {
-  borderRadius: 20,
+  borderRadius: 8,
   primary: {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -233,8 +151,8 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -246,8 +164,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -259,8 +177,8 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -272,8 +190,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -288,10 +206,10 @@ var actionCard = {
   'primary-border-soft': {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.4'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -300,11 +218,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -313,8 +231,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -326,11 +244,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -339,8 +257,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -355,10 +273,10 @@ var actionCard = {
   'primary-border-hard': {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.9'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -367,11 +285,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -380,8 +298,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -393,11 +311,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -406,8 +324,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -421,8 +339,8 @@ var actionCard = {
   },
   secondary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -434,8 +352,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -447,8 +365,8 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -460,8 +378,8 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -473,8 +391,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -488,11 +406,11 @@ var actionCard = {
   },
   highlight: {
     "default": {
-      backgroundColor: lateOceanColorPalette['violine.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -501,8 +419,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -514,11 +432,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -527,11 +445,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -540,8 +458,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -559,42 +477,28 @@ var defaultAvatarSize = 40;
 var defaultAvatarIconSize = 20;
 var largeAvatarSize = 120;
 var largeAvatarIconSize = 30;
-
-// export interface AvatarThemeBackgroundColorVariant {
-//   default: string;
-//   light: string;
-//   dark: string;
-//   disabled: string;
-// }
-
-// export interface AvatarThemeColorVariant {
-//   default: string;
-//   light: string;
-//   disabled: string;
-// }
-
 var avatar = {
-  borderRadius: 10,
+  borderRadius: 4,
   size: defaultAvatarSize,
   iconSize: defaultAvatarIconSize,
   "default": {
-    color: lateOceanColorPalette.white,
-    backgroundColor: colors.primary
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['deepPurple.8']
   },
   light: {
-    color: lateOceanColorPalette.black,
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['beige.6'],
+    backgroundColor: deepPurpleColorPalette['beige.1']
   },
   dark: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette['eggshell.12']
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['grey.9']
   },
   disabled: {
-    color: lateOceanColorPalette['eggshell.5'],
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['grey.3'],
+    backgroundColor: deepPurpleColorPalette['grey.1']
   },
   large: {
-    borderRadius: 30,
+    borderRadius: 8,
     size: largeAvatarSize,
     iconSize: largeAvatarIconSize
   }
@@ -607,7 +511,7 @@ var bottomSheet = {
     padding: spacing * 4
   },
   handle: {
-    backgroundColor: lateOceanColorPalette.black200
+    backgroundColor: deepPurpleColorPalette['beige.3']
   }
 };
 
@@ -675,9 +579,9 @@ var button = {
       pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette.white,
-      hoverColor: lateOceanColorPalette.white,
-      activeColor: lateOceanColorPalette.white
+      color: deepPurpleColorPalette.white,
+      hoverColor: deepPurpleColorPalette.white,
+      activeColor: deepPurpleColorPalette.white
     }
   },
   primary: {
@@ -690,11 +594,11 @@ var button = {
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255,255,255, 0.4)',
       color: colors.primary,
-      hoverColor: colors.hover,
-      activeColor: colors.hover
+      hoverColor: deepPurpleColorPalette['beige.2'],
+      activeColor: deepPurpleColorPalette['beige.2']
     }
   },
   dark: {
@@ -707,19 +611,19 @@ var button = {
   },
   danger: {
     "default": {
-      backgroundColor: lateOceanColorPalette['coral.3'],
-      pressedBackgroundColor: lateOceanColorPalette['coral.4'],
-      hoverBackgroundColor: lateOceanColorPalette['coral.4'],
-      focusBorderColor: lateOceanColorPalette['coral.4']
+      backgroundColor: deepPurpleColorPalette['red.1'],
+      pressedBackgroundColor: deepPurpleColorPalette['red.2'],
+      hoverBackgroundColor: deepPurpleColorPalette['red.2'],
+      focusBorderColor: deepPurpleColorPalette['red.2']
     },
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette['coral.9'],
-      hoverColor: lateOceanColorPalette['coral.9'],
-      activeColor: lateOceanColorPalette['coral.9']
+      color: deepPurpleColorPalette['red.6'],
+      hoverColor: deepPurpleColorPalette['red.6'],
+      activeColor: deepPurpleColorPalette['red.6']
     }
   },
   subtle: {
@@ -760,14 +664,14 @@ var button = {
       backgroundColor: colors.disabled,
       pressedBackgroundColor: colors.disabled,
       hoverBackgroundColor: colors.disabled,
-      focusBorderColor: lateOceanColorPalette.black100,
-      borderColor: lateOceanColorPalette.black100
+      focusBorderColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette['beige.2']
     }
   }
 };
 
 var buttonBadge = {
-  backgroundColor: lateOceanColorPalette['coral.10'],
+  backgroundColor: deepPurpleColorPalette['red.6'],
   dimensions: {
     withBadge: {
       width: 10,
@@ -796,7 +700,7 @@ var card = {
     borderColor: colors.separator
   },
   subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: colors.separator
   }
 };
@@ -856,17 +760,17 @@ var choices = {
       small: 24
     },
     backgroundColor: {
-      "default": lateOceanColorPalette.black50,
+      "default": deepPurpleColorPalette['beige.1'],
       disabled: colors.disabled,
       selected: colors.primary,
-      pressed: lateOceanColorPalette.lateOceanLight1,
-      hover: lateOceanColorPalette.black100,
-      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+      pressed: deepPurpleColorPalette['deepPurple.7'],
+      hover: deepPurpleColorPalette['beige.2'],
+      hoverWhenSelected: deepPurpleColorPalette['deepPurple.7']
     },
     disabled: {
       border: {
         width: 2,
-        color: lateOceanColorPalette.black100
+        color: deepPurpleColorPalette['beige.2']
       }
     },
     transition: {
@@ -931,19 +835,19 @@ var autocomplete = {
       backgroundColor: colors.white
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     focused: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     selected: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     highlighted: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette.black100
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   optionsContainer: {
@@ -1011,37 +915,37 @@ var datePicker = {
 
 var inputStatesStyle = {
   "default": {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   pending: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   },
   valid: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: lateOceanColorPalette['eggshell.1'],
-    borderColor: lateOceanColorPalette['eggshell.5'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette['beige.1'],
+    borderColor: deepPurpleColorPalette['beige.4'],
+    color: deepPurpleColorPalette.black
   },
   focus: {
-    borderColor: lateOceanColorPalette['violine.9'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['deepPurple.8'],
+    color: deepPurpleColorPalette.black
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette['eggshell.2'],
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette['eggshell.6']
+    backgroundColor: deepPurpleColorPalette['grey.1'],
+    borderColor: deepPurpleColorPalette['grey.1'],
+    color: deepPurpleColorPalette['grey.3']
   },
   invalid: {
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   }
 };
 var webAnimationDuration = '200ms';
@@ -1050,11 +954,11 @@ var webAnimationProperties = ['border-color', 'background-color'];
 var input = {
   minHeight: 40,
   color: {
-    selection: lateOceanColorPalette['violine.9'],
-    placeholder: lateOceanColorPalette['eggshell.9']
+    selection: deepPurpleColorPalette['deepPurple.8'],
+    placeholder: deepPurpleColorPalette['beige.6']
   },
   borderWidth: 1,
-  borderRadius: 8,
+  borderRadius: 4,
   icon: {
     size: 20
   },
@@ -1091,7 +995,7 @@ var inputTag = {
     labelColor: colors.uiBackgroundLight
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     labelColor: colors.black
   },
   borderRadius: 10,
@@ -1101,9 +1005,9 @@ var inputTag = {
 var radio = {
   size: 24,
   unchecked: {
-    borderWidth: 2,
+    borderWidth: 1,
     backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black200
+    borderColor: deepPurpleColorPalette['beige.3']
   },
   checked: {
     backgroundColor: colors.primary,
@@ -1120,8 +1024,9 @@ var radio = {
     borderColor: colors.primary
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator
+    backgroundColor: deepPurpleColorPalette['grey.3'],
+    borderColor: colors.transparent,
+    innerBackgroundColor: deepPurpleColorPalette['grey.1']
   },
   transition: {
     duration: '200ms',
@@ -1132,14 +1037,19 @@ var radio = {
 var radioButtonGroup = {
   item: {
     minHeight: 40,
-    borderWidth: 2,
-    borderRadius: 20,
+    borderWidth: 1,
+    borderRadius: 4,
+    font: {
+      color: {
+        disabled: deepPurpleColorPalette['grey.3']
+      }
+    },
     borderColor: {
       "default": colors.separator,
       hover: colors.primary,
       pressed: colors.primary,
       active: colors.primary,
-      disabled: colors.separator
+      disabled: colors.disabled
     },
     backgroundColor: {
       "default": colors.uiBackgroundLight,
@@ -1180,17 +1090,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1218,17 +1128,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.8'],
-          unchecked: lateOceanColorPalette['eggshell.7']
+          checked: deepPurpleColorPalette['deepPurple.7'],
+          unchecked: deepPurpleColorPalette['beige.4']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1256,17 +1166,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1281,7 +1191,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1294,17 +1204,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1319,7 +1229,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1334,17 +1244,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1372,17 +1282,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1410,17 +1320,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1435,7 +1345,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1448,17 +1358,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1473,7 +1383,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1490,17 +1400,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1528,17 +1438,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1566,17 +1476,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1591,7 +1501,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1604,17 +1514,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1629,7 +1539,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1644,17 +1554,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1682,17 +1592,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1720,17 +1630,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1745,7 +1655,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1758,17 +1668,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1783,7 +1693,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1845,50 +1755,50 @@ var highlight = {
   },
   primary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['lavender.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['lavender.5']
+      backgroundColor: deepPurpleColorPalette['beige.4']
     }
   },
   secondary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['violine.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['violine.4']
+      backgroundColor: deepPurpleColorPalette['beige.3']
     }
   },
   ghost: {
     "default": {
-      backgroundColor: lateOceanColorPalette.white
+      backgroundColor: deepPurpleColorPalette.white
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   dark: {
     "default": {
-      backgroundColor: lateOceanColorPalette['eggshell.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   success: {
     "default": {
-      backgroundColor: lateOceanColorPalette['green.3']
+      backgroundColor: deepPurpleColorPalette['green.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['green.5']
+      backgroundColor: deepPurpleColorPalette['green.2']
     }
   },
   warning: {
     "default": {
-      backgroundColor: lateOceanColorPalette['sun.3']
+      backgroundColor: deepPurpleColorPalette['yellow.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['sun.5']
+      backgroundColor: deepPurpleColorPalette['yellow.2']
     }
   },
   padding: {
@@ -1928,14 +1838,6 @@ var icon = {
     header4: createTypographyIconSizeConfig(18, 24),
     // also known as xxsmall
     header5: createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxl': createTypographyIconSizeConfig(56, 56),
-    'header-impact-xl': createTypographyIconSizeConfig(48, 48),
-    'header-impact-l': createTypographyIconSizeConfig(40, 40),
-    'header-impact-m': createTypographyIconSizeConfig(32, 32),
-    'header-impact-s': createTypographyIconSizeConfig(24, 24),
-    'header-impact-xs': createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxs': createTypographyIconSizeConfig(16, 16),
-    'header-impact-xxxs': createTypographyIconSizeConfig(14, 14),
     'body-large': createTypographyIconSizeConfig(18, 24),
     'body-medium': createTypographyIconSizeConfig(18, 18),
     body: createTypographyIconSizeConfig(16, 16),
@@ -1980,7 +1882,7 @@ var iconButton = {
     pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
   },
   primary: {
-    pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
+    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
   },
   'primary-plain': {
     pressedBackgroundColor: colors.primaryLight,
@@ -2055,155 +1957,198 @@ var pageLoader = {
   }
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
-/** @deprecated legacy typography type config is deprecated. */
-var createLegacyTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
-  var mediumAndWideFontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseAndSmallFontSize;
-  var lineHeightMultiplierMediumAndWide = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : lineHeightMultiplierBaseAndSmall;
-  return {
-    baseAndSmall: {
-      fontSize: baseAndSmallFontSize,
-      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-    },
-    mediumAndWide: {
-      fontSize: mediumAndWideFontSize,
-      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-    }
-  };
-};
-var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
-  var config = {
-    fontSize: fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
 var typography = {
   colors: {
     black: colors.black,
     'black-anthracite': colors.blackAnthracite,
-    'black-disabled': lateOceanColorPalette.black400,
-    'black-light': lateOceanColorPalette.black555,
+    'black-disabled': deepPurpleColorPalette['grey.3'],
+    'black-light': deepPurpleColorPalette['grey.5'],
     white: colors.white,
     'white-light': colors.white,
     primary: colors.primary,
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: lateOceanColorPalette['coral.9'],
+    danger: deepPurpleColorPalette['red.6'],
     warning: colors.warning
   },
   types: {
     headings: {
       fontFamily: {
         "native": {
-          regular: 'Moderat-Bold',
-          bold: 'Moderat-Bold'
+          regular: 'GTStandardRegular',
+          semibold: 'GTStandardSemibold',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+          regular: 'GTStandard',
+          semibold: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
       fontWeight: {
-        regular: 400,
+        regular: 500,
+        semibold: 600,
         bold: 700
       },
       fontStyle: 'normal',
       configs: {
-        /* legacy */
-        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
-        header2: createLegacyTypographyTypeConfig(1.15, 32, 48, 1.1),
-        header3: createLegacyTypographyTypeConfig(1.15, 24, 40, 1.1),
-        header4: createLegacyTypographyTypeConfig(1.15, 18, 24, 1.2),
-        header5: createLegacyTypographyTypeConfig(1.15, 18, 18),
-        /* latest */
-        'heading-xxl': createTypographyConfig(56, 1.1),
-        'heading-xl': createTypographyConfig(48, 1.1),
-        'heading-l': createTypographyConfig(40, 1.1),
-        'heading-m': createTypographyConfig(32, 1.15),
-        'heading-s': createTypographyConfig(24, 1.15),
-        'heading-xs': createTypographyConfig(18, 1.15),
-        'heading-xxs': createTypographyConfig(16, 1.15)
+        'heading-xxl': {
+          fontSize: 56,
+          lineHeight: 64,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-xl': {
+          fontSize: 48,
+          lineHeight: 56,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-l': {
+          fontSize: 40,
+          lineHeight: 48,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-m': {
+          fontSize: 28,
+          lineHeight: 32,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-s': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'heading-xs': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    'headings-impact': {
+    bodies: {
       fontFamily: {
         "native": {
-          regular: 'Transducer-Black',
-          bold: 'Transducer-Black'
+          regular: 'GTStandardRegular',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'TransducerBlack',
-          bold: 'TransducerBlack'
+          regular: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
-      fontWeight: 600,
-      fontStyle: 'normal',
+      fontWeight: {
+        regular: 500,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
       configs: {
-        /* legacy */
-        'header-impact-xxl': createLegacyTypographyTypeConfig(1.1, 56, 56),
-        'header-impact-xl': createLegacyTypographyTypeConfig(1.1, 48, 48),
-        'header-impact-l': createLegacyTypographyTypeConfig(1.1, 40, 40),
-        'header-impact-m': createLegacyTypographyTypeConfig(1.1, 32, 32),
-        'header-impact-s': createLegacyTypographyTypeConfig(1.1, 24, 24),
-        'header-impact-xs': createLegacyTypographyTypeConfig(1.1, 18, 18),
-        'header-impact-xxs': createLegacyTypographyTypeConfig(1.1, 16, 16),
-        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.1, 14, 14),
-        /* latest */
-        'heading-impact-xxl': createTypographyConfig(56, 1.1),
-        'heading-impact-xl': createTypographyConfig(48, 1.1),
-        'heading-impact-l': createTypographyConfig(40, 1.1),
-        'heading-impact-m': createTypographyConfig(32, 1.1),
-        'heading-impact-s': createTypographyConfig(24, 1.1),
-        'heading-impact-xs': createTypographyConfig(18, 1.1),
-        'heading-impact-xxs': createTypographyConfig(16, 1.1),
-        'heading-impact-xxxs': createTypographyConfig(14, 1.1)
+        'body-xl': {
+          fontSize: 24,
+          lineHeight: 32,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-l': {
+          fontSize: 18,
+          lineHeight: 26,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-m': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-s': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-xs': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    bodies: {
+    labels: {
       fontFamily: {
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+        "native": {
+          semibold: 'GTStandardSemibold'
         },
+        web: {
+          semibold: 'GTStandard'
+        }
+      },
+      fontWeight: {
+        semibold: 600
+      },
+      fontStyle: 'normal',
+      configs: {
+        'label-large': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['semibold']
+        },
+        'label-medium': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['semibold']
+        }
+      }
+    },
+    contentCaps: {
+      fontFamily: {
         "native": {
-          regular: 'Moderat-Regular',
-          bold: 'Moderat-Bold'
+          bold: 'GTStandardNarrowBold'
+        },
+        web: {
+          bold: 'GTStandardNarrow'
         }
       },
       fontWeight: {
-        regular: 400,
         bold: 700
       },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
+      fontStyle: 'normal',
       configs: {
-        /* legacy */
-        'body-large': createLegacyTypographyTypeConfig(1.3, 18, 24),
-        'body-medium': createLegacyTypographyTypeConfig(1.3, 18, 18),
-        body: createLegacyTypographyTypeConfig(1.3, 16, 16),
-        'body-small': createLegacyTypographyTypeConfig(1.15, 14, 14),
-        'body-xsmall': createLegacyTypographyTypeConfig(1.15, 12, 12),
-        /* latest */
-        'body-xl': createTypographyConfig(24, 1.3),
-        'body-l': createTypographyConfig(18, 1.3),
-        'body-m': createTypographyConfig(16, 1.3),
-        'body-s': createTypographyConfig(14, 1.15),
-        'body-xs': createTypographyConfig(12, 1.15)
+        'content-caps-xxxl': {
+          fontSize: 40,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xxl': {
+          fontSize: 32,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xl': {
+          fontSize: 24,
+          lineHeight: 28,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-l': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-m': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-s': {
+          fontSize: 14,
+          lineHeight: 16,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xs': {
+          fontSize: 12,
+          lineHeight: 14,
+          allowedFontWeights: ['bold']
+        }
       }
     }
-  },
-  link: {
-    /** @deprecated not used in kitt anymore, use Typography instead */
-    disabledColor: colors.blackDisabled
   }
 };
 
@@ -2212,7 +2157,7 @@ var picker = {
   ios: {
     "default": _objectSpread(_objectSpread({
       fontFamily: typography.types.bodies.fontFamily["native"].regular
-    }, typography.types.bodies.configs.body.baseAndSmall), {}, {
+    }, typography.types.bodies.configs['body-m']), {}, {
       fontSize: 16,
       color: typography.colors['black-light'],
       // Default height is hard coded in module because of iOS constraint (https://github.com/react-native-picker/picker/blob/abd5f9076baa3ef2277ea7e711fa5823683c110e/js/PickerIOS.ios.js#L156)
@@ -2245,19 +2190,19 @@ var picker = {
         backgroundColor: colors.transparent
       },
       hovered: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       focused: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       selected: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       highlighted: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       pressed: {
-        backgroundColor: lateOceanColorPalette.black100
+        backgroundColor: deepPurpleColorPalette['beige.2']
       }
     }
   },
@@ -2341,8 +2286,8 @@ var shadows = {
   }
 };
 
-var skeletonBackgroundColor = lateOceanColorPalette.black100;
-var skeletonFlareColor = lateOceanColorPalette.black200;
+var skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
+var skeletonFlareColor = deepPurpleColorPalette['beige.3'];
 var skeleton = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
@@ -2365,20 +2310,6 @@ var skeleton = {
 
 var tag = {
   borderRadius: 16,
-  variant: {
-    contrast: {
-      borderWidth: 0
-    },
-    fill: {
-      borderWidth: 0
-    },
-    outline: {
-      borderWidth: 1
-    },
-    subtle: {
-      borderWidth: 0
-    }
-  },
   icon: {
     small: 16,
     medium: 16,
@@ -2454,14 +2385,14 @@ var verticalSteps = {
   },
   done: {
     icon: {
-      backgroundColor: lateOceanColorPalette.moonPurple,
-      textColor: colors.primary
+      backgroundColor: colors.primary,
+      textColor: colors.white
     }
   },
   "default": {
     icon: {
       backgroundColor: colors.disabled,
-      textColor: colors.blackDisabled
+      textColor: deepPurpleColorPalette['grey.3']
     }
   }
 };
@@ -2492,12 +2423,12 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function getSpacing(multiplier) {
+  getSpacing: function (multiplier) {
     return spacing * multiplier;
   },
   colors: colors,
   palettes: {
-    lateOcean: lateOceanColorPalette
+    deepPurple: deepPurpleColorPalette
   },
   avatar: avatar,
   breakpoints: breakpoints,