introduce tokens file + theme type

src/styles/colors/base.ts

@@ -0,0 +1,61 @@
+export enum ColorToken {
+  Black = '#000000',
+  White = '#FFFFFF',
+
+  LightGray0 = '#FAFAFA',
+  LightGray1 = '#F7F8FA',
+  LightGray2 = '#FAFAFD',
+  LightGray3 = '#F5F5F5',
+  LightGray4 = '#EDF0F2',
+  LightGray5 = '#EDEDED',
+  LightGray6 = '#E9ECEE',
+  LightGray7 = '#E6E6E6',
+  LightGray8 = '#DBDBDB',
+  LightGray9 = '#D5DADF',
+  LightGray10 = '#D1D9E0',
+
+  MediumGray0 = '#CACACE',
+  MediumGray1 = '#C2CBD3',
+
+  DarkGray0 = '#888891',
+  DarkGray1 = '#737373',
+  DarkGray2 = '#56565C',
+  DarkGray3 = '#4B4B4B',
+  DarkGray4 = '#494950',
+  DarkGray5 = '#3B3B3F',
+  DarkGray6 = '#303033',
+  DarkGray7 = '#313135',
+  DarkGray8 = '#292929',
+  DarkGray9 = '#23232F',
+  DarkGray10 = '#212124',
+  DarkGray11 = '#18181B',
+  DarkGray12 = '#181818',
+  DarkGray13 = '#0C0C0D',
+
+  GrayBlue0 = '#464659',
+  GrayBlue1 = '#38384D',
+  GrayBlue2 = '#303045',
+  GrayBlue3 = '#29293D',
+  GrayBlue4 = '#212131',
+  GrayBlue5 = '#181825',
+  GrayBlue6 = '#101018',
+  GrayBlue7 = '#08080C',
+
+  GrayPurple0 = '#DFDADF',
+  GrayPurple1 = '#C8C7D8',
+  GrayPurple2 = '#807E98',
+
+  Purple0 = '#7774FF',
+  Purple1 = '#6966FF',
+
+  Green0 = '#1AFFB9',
+  Green1 = '#3ED9A4',
+  Green2 = '#2CCC98',
+  Green3 = '#3EB68A',
+
+  Yellow0 = '#FFCC48',
+
+  Red0 = '#FF5C5C',
+  Red1 = '#E76565',
+  Red2 = '#E45555',
+}

src/styles/colors/colors.ts

@@ -0,0 +1,52 @@
+export type ThemeColors = LayerColors &
+  BorderColors &
+  TextColors &
+  AccentColors &
+  StatusColors &
+  DirectionalColors &
+  RiskColors;
+
+type LayerColors = {
+  layer0: string;
+  layer1: string;
+  layer2: string;
+  layer3: string;
+  layer4: string;
+  layer5: string;
+  layer6: string;
+  layer7: string;
+};
+
+type BorderColors = {
+  borderDefault: string;
+  borderDestructive: string;
+  borderButton: string;
+};
+
+type TextColors = {
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+};
+
+type AccentColors = {
+  accent: string;
+  favorite: string;
+};
+
+type StatusColors = {
+  success: string;
+  warning: string;
+  error: string;
+};
+
+type DirectionalColors = {
+  positive: string;
+  negative: string;
+};
+
+type RiskColors = {
+  riskLow: string;
+  riskMedium: string;
+  riskHigh: string;
+};

src/styles/themes.ts

@@ -0,0 +1,108 @@
+import { AppTheme } from '@/state/configs';
+import { ThemeColors } from '@/styles/colors/colors';
+import { ColorToken } from '@/styles/colors/base';
+
+const ClassicTheme: ThemeColors = {
+  layer0: ColorToken.GrayBlue7,
+  layer1: ColorToken.GrayBlue6,
+  layer2: ColorToken.GrayBlue5,
+  layer3: ColorToken.GrayBlue4,
+  layer4: ColorToken.GrayBlue3,
+  layer5: ColorToken.GrayBlue2,
+  layer6: ColorToken.GrayBlue1,
+  layer7: ColorToken.GrayBlue0,
+
+  borderDefault: ColorToken.GrayBlue2,
+  borderDestructive: ColorToken.Red2,
+  borderButton: ColorToken.White,
+
+  textPrimary: ColorToken.LightGray2,
+  textSecondary: ColorToken.GrayPurple1,
+  textTertiary: ColorToken.GrayPurple2,
+
+  accent: ColorToken.Purple1,
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green1,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red2,
+
+  positive: ColorToken.Green1,
+  negative: ColorToken.Red2,
+
+  riskLow: ColorToken.Green1,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red2,
+};
+
+const DarkTheme: ThemeColors = {
+  layer0: ColorToken.Black,
+  layer1: ColorToken.DarkGray11,
+  layer2: ColorToken.DarkGray13,
+  layer3: ColorToken.DarkGray10,
+  layer4: ColorToken.DarkGray6,
+  layer5: ColorToken.DarkGray5,
+  layer6: ColorToken.DarkGray4,
+  layer7: ColorToken.DarkGray2,
+
+  borderDefault: ColorToken.DarkGray4,
+  borderDestructive: ColorToken.Red0,
+  borderButton: ColorToken.White,
+
+  textPrimary: ColorToken.LightGray0,
+  textSecondary: ColorToken.MediumGray0,
+  textTertiary: ColorToken.DarkGray0,
+
+  accent: ColorToken.Purple0,
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green0,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red0,
+
+  positive: ColorToken.Green0,
+  negative: ColorToken.Red0,
+
+  riskLow: ColorToken.Green0,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red0,
+};
+
+const LightTheme: ThemeColors = {
+  layer0: ColorToken.White,
+  layer1: ColorToken.LightGray6,
+  layer2: ColorToken.White,
+  layer3: ColorToken.LightGray1,
+  layer4: ColorToken.White,
+  layer5: ColorToken.LightGray4,
+  layer6: ColorToken.LightGray9,
+  layer7: ColorToken.MediumGray1,
+
+  borderDefault: ColorToken.LightGray10,
+  borderDestructive: ColorToken.Red1,
+  borderButton: ColorToken.Black,
+
+  textPrimary: ColorToken.DarkGray12,
+  textSecondary: ColorToken.DarkGray3,
+  textTertiary: ColorToken.DarkGray1,
+
+  accent: ColorToken.Purple0,
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green2,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red1,
+
+  positive: ColorToken.Green2,
+  negative: ColorToken.Red1,
+
+  riskLow: ColorToken.Green2,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red1,
+};
+
+export const Themes = {
+  [AppTheme.Classic]: ClassicTheme,
+  [AppTheme.Dark]: DarkTheme,
+  [AppTheme.Light]: LightTheme,
+};