refactor(theme): break master and themed palletes

packages/theme/src/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {useColorScheme} from 'react-native'
 
-import {Palette, SupportedThemes, Theme, ThemeStorage} from './types'
+import {ThemedPalette, SupportedThemes, Theme, ThemeStorage} from './types'
 import {defaultLightTheme} from './themes/default-light'
 import {defaultDarkTheme} from './themes/default-dark'
 import {detectTheme} from './helpers/detect-theme'
@@ -46,7 +46,7 @@ export const useThemeColor = () => useTheme().color
 
 type ThemeContext = {
   name: SupportedThemes
-  color: Palette
+  color: ThemedPalette
   selectThemeName: (name: SupportedThemes) => void
   isLight: boolean
   isDark: boolean

packages/theme/src/base-palettes/dark-palette.ts

@@ -1,63 +1,65 @@
-import {Palette} from '../types'
+import {tokens} from '../tokens/tokens'
+import {MasterPalette} from '../types'
+
+const {opacity} = tokens
+
+export const darkPalette: MasterPalette = {
+  primary_c900: '#E4E8F7',
+  primary_c800: '#C4CFF5',
+  primary_c700: '#A0B3F2',
+  primary_c600: '#7892E8',
+  primary_c500: '#4B6DDE',
+  primary_c400: '#2E4BB0',
+  primary_c300: '#304489',
+  primary_c200: '#142049',
+  primary_c100: '#171B28',
+
+  secondary_c900: '#E4F7F3',
+  secondary_c800: '#C6F7ED',
+  secondary_c700: '#93F5E1',
+  secondary_c600: '#66F2D6',
+  secondary_c500: '#16E3BA',
+  secondary_c400: '#08C29D',
+  secondary_c300: '#0B997D',
+  secondary_c200: '#12705D',
+  secondary_c100: '#17453C',
+
+  gray_cmax: '#FFFFFF',
+  gray_c900: '#E1E6F5',
+  gray_c800: '#BCC5E0',
+  gray_c700: '#9BA4C2',
+  gray_c600: '#7C85A3',
+  gray_c500: '#656C85',
+  gray_c400: '#4B5266',
+  gray_c300: '#3E4457',
+  gray_c200: '#262A38',
+  gray_c100: '#1F232E',
+  gray_c50: '#15171F',
+  gray_cmin: '#0B0B0F',
 
-export const darkPalette: Palette = {
   black_static: '#000000',
   white_static: '#FFFFFF',
-  gray_max: '#FFFFFF',
-  gray_900: '#E1E6F5',
-  gray_800: '#BCC5E0',
-  gray_700: '#9BA4C2',
-  gray_600: '#7C85A3',
-  gray_500: '#656C85',
-  gray_400: '#4B5266',
-  gray_300: '#3E4457',
-  gray_200: '#262A38',
-  gray_100: '#1F232E',
-  gray_50: '#15171F',
-  gray_min: '#0B0B0F',
-  primary_900: '#E4E8F7',
-  primary_800: '#C4CFF5',
-  primary_700: '#A0B3F2',
-  primary_600: '#7892E8',
-  primary_500: '#4B6DDE',
-  primary_400: '#3154CB',
-  primary_300: '#223987',
-  primary_200: '#142049',
-  primary_100: '#111935',
-  secondary_900: '#E4F7F3',
-  secondary_800: '#C6F7ED',
-  secondary_700: '#93F5E1',
-  secondary_600: '#66F2D6',
-  secondary_500: '#16E3BA',
-  secondary_400: '#08C29D',
-  secondary_300: '#0B997D',
-  secondary_200: '#12705D',
-  secondary_100: '#17453C',
-  magenta_700: '#FF6B92',
-  magenta_600: '#FD3468',
-  magenta_500: '#FF1351',
-  magenta_300: '#572835',
-  magenta_100: '#2F171D',
-  cyan_500: '#59B1F4',
-  cyan_100: '#F2F9FF',
-  yellow_500: '#ECBA09',
-  yellow_100: '#31290E',
-  gradients_blue_green: ['#122770', '#026264'],
-  gradients_green: ['#93F5E1', '#C6F7F7'],
-  gradients_blue: ['#244ABF', '#4B6DDE'],
-  gradients_light: ['#C6F7ED', '#E4E8F7'],
-  gradients_green_blue: [
-    '#17D1AA',
-    '#1ACBAF',
-    '#21B8BC',
-    '#2E9BD3',
-    '#3F71F1',
-    '#475FFF',
+
+  sys_magenta_c700: '#FF6B92',
+  sys_magenta_c600: '#FD3468',
+  sys_magenta_c500: '#FF7196',
+  sys_magenta_c300: '#572835',
+  sys_magenta_c100: '#2F171D',
+
+  sys_cyan_c500: '#59B1F4',
+  sys_cyan_c100: '#112333',
+
+  sys_yellow_c500: '#ECBA09',
+  sys_yellow_c100: '#31290E',
+
+  sys_orange_c500: '#FAB357',
+  sys_orange_c100: '#291802',
+
+  bg_gradient_1: [
+    `#1AE3BB${opacity._26}`,
+    `#4B6DDE${opacity._10}`,
+    `#4B6DDE${opacity._16}`,
   ],
-  bottom_sheet_background: '#15171F',
-  bottom_sheet_opacity: 'rgba(0, 0, 0, .5)',
-  overlay_extension: {hex: '#15171F', opacity: 0.72},
-  overlay_mobile: {hex: '#15171F', opacity: 0.64},
-  sidebar_overlay: {hex: '#ffffff', opacity: 0.24},
-  sidebar_item: {hex: '#ffffff', opacity: 0.48},
+  bg_gradient_2: [`#0B997D${opacity._8}`, `#08C29D${opacity._48}`],
+  bg_gradient_3: ['#2E4BB0', '#2B3E7D'],
 }

packages/theme/src/base-palettes/light-palette.ts

@@ -1,63 +1,58 @@
-import {Palette} from '../types'
+import {MasterPalette} from '../types'
+
+export const lightPalette: MasterPalette = {
+  primary_c900: '#121F4D',
+  primary_c800: '#122770',
+  primary_c700: '#1737A3',
+  primary_c600: '#3154CB',
+  primary_c500: '#4B6DDE',
+  primary_c400: '#7892E8',
+  primary_c300: '#A0B3F2',
+  primary_c200: '#C4CFF5',
+  primary_c100: '#E4E8F7',
+
+  secondary_c900: '#17453C',
+  secondary_c800: '#12705D',
+  secondary_c700: '#0B997D',
+  secondary_c600: '#08C29D',
+  secondary_c500: '#16E3BA',
+  secondary_c400: '#66F2D6',
+  secondary_c300: '#93F5E1',
+  secondary_c200: '#C6F7ED',
+  secondary_c100: '#E4F7F3',
+
+  gray_cmax: '#000000',
+  gray_c900: '#242838',
+  gray_c800: '#383E54',
+  gray_c700: '#4A5065',
+  gray_c600: '#6B7384',
+  gray_c500: '#8A92A3',
+  gray_c400: '#A7AFC0',
+  gray_c300: '#C4CAD7',
+  gray_c200: '#DCE0E9',
+  gray_c100: '#EAEDF2',
+  gray_c50: '#F0F3F5',
+  gray_cmin: '#FFFFFF',
 
-export const lightPalette: Palette = {
   black_static: '#000000',
   white_static: '#FFFFFF',
-  gray_max: '#000000',
-  gray_900: '#242838',
-  gray_800: '#383E54',
-  gray_700: '#4A5065',
-  gray_600: '#6B7384',
-  gray_500: '#8A92A3',
-  gray_400: '#A7AFC0',
-  gray_300: '#C4CAD7',
-  gray_200: '#DCE0E9',
-  gray_100: '#EAEDF2',
-  gray_50: '#F0F3F5',
-  gray_min: '#FFFFFF',
-  primary_900: '#121F4D',
-  primary_800: '#122770',
-  primary_700: '#1737A3',
-  primary_600: '#3154CB',
-  primary_500: '#4B6DDE',
-  primary_400: '#7892E8',
-  primary_300: '#A0B3F2',
-  primary_200: '#C4CFF5',
-  primary_100: '#E4E8F7',
-  secondary_900: '#17453C',
-  secondary_800: '#12705D',
-  secondary_700: '#0B997D',
-  secondary_600: '#08C29D',
-  secondary_500: '#16E3BA',
-  secondary_400: '#66F2D6',
-  secondary_300: '#93F5E1',
-  secondary_200: '#C6F7ED',
-  secondary_100: '#E4F7F3',
-  magenta_700: '#CF053A',
-  magenta_600: '#E80742',
-  magenta_500: '#FF1351',
-  magenta_300: '#FBCBD7',
-  magenta_100: '#FFF1F5',
-  cyan_500: '#59B1F4',
-  cyan_100: '#F2F9FF',
-  yellow_500: '#ED8600',
-  yellow_100: '#FDF7E2',
-  gradients_blue_green: ['#E4E8F7', '#C6F7F7'],
-  gradients_green: ['#93F5E1', '#C6F7F7'],
-  gradients_blue: ['#244ABF', '#4B6DDE'],
-  gradients_light: ['#C6F7ED', '#E4E8F7'],
-  gradients_green_blue: [
-    '#17D1AA',
-    '#1ACBAF',
-    '#21B8BC',
-    '#2E9BD3',
-    '#3F71F1',
-    '#475FFF',
-  ],
-  bottom_sheet_background: '#ffffff',
-  bottom_sheet_opacity: 'rgba(0, 0, 0, .5)',
-  overlay_extension: {hex: '#121f4d', opacity: 0.7},
-  overlay_mobile: {hex: '#000000', opacity: 0.4},
-  sidebar_overlay: {hex: '#000000', opacity: 0.16},
-  sidebar_item: {hex: '#ffffff', opacity: 0.48},
+
+  sys_magenta_c700: '#CF053A',
+  sys_magenta_c600: '#E80742',
+  sys_magenta_c500: '#FF1351',
+  sys_magenta_c300: '#FBCBD7',
+  sys_magenta_c100: '#FFF1F5',
+
+  sys_cyan_c500: '#59B1F4',
+  sys_cyan_c100: '#E8F4FF',
+
+  sys_yellow_c500: '#ECBA09',
+  sys_yellow_c100: '#FDF7E2',
+
+  sys_orange_c500: '#ED8600',
+  sys_orange_c100: '#FFF2E2',
+
+  bg_gradient_1: ['#C6F7ED', '#E4E8F7'],
+  bg_gradient_2: ['#93F5E1', '#C6F7ED'],
+  bg_gradient_3: ['#244ABF', '#4760FF'],
 }