@edge-zuq/core 1.2.7

package/src/theme.ts

@@ -0,0 +1,240 @@
+export const theme = {
+  color: {
+    brand: {
+      violet: {
+        '50': '#e9eaee',
+        '100': '#bbbdcb',
+        '200': '#9b9db2',
+        '300': '#6d708e',
+        '400': '#515579',
+        '500': '#252a57',
+        '600': '#22264f',
+        '700': '#1a1e3e',
+        '800': '#141730',
+        '900': '#101225',
+      },
+      blue: {
+        '50': '#e6f7fb',
+        '100': '#b0e7f4',
+        '200': '#8adcee',
+        '300': '#54cce6',
+        '400': '#33c2e1',
+        '500': '#00b3da',
+        '600': '#00a3c6',
+        '700': '#007f9b',
+        '800': '#006278',
+        '900': '#004b5c',
+      },
+    },
+    neutral: {
+      light: {
+        'transparent': 'transparent',
+        '00': '#FFFFFF',
+        '05': '#fafcfd',
+        '10': '#f0f5f9',
+        '20': '#e8f0f6',
+        '30': '#dee9f2',
+        '40': '#d8e5ef',
+        '50': '#cedeeb',
+        '55': '#bbcad6',
+      },
+      mid: {
+        '60': '#929ea7',
+        '65': '#717a81',
+        '70': '#485158',
+      },
+      dark: {
+        '80': '#1a252e',
+        '90': '#121821',
+      },
+    },
+    feedback: {
+      'green': {
+        '50': '#e7f7f2',
+        '100': '#b3e7d6',
+        '200': '#8fdbc2',
+        '300': '#5ccaa7',
+        '400': '#3cc095',
+        '500': '#0bb07b',
+        '600': '#0aa070',
+        '700': '#087d57',
+        '800': '#066144',
+        '900': '#054a34',
+      },
+      'red': {
+        '50': '#feecec',
+        '100': '#fac3c3',
+        '200': '#f8a6a6',
+        '300': '#f57d7d',
+        '400': '#f36464',
+        '500': '#f03d3d',
+        '600': '#da3838',
+        '700': '#aa2b2b',
+        '800': '#842222',
+        '900': '#651a1a',
+      },
+      'yellow': {
+        '50': '#fff7e7',
+        '100': '#ffe6b4',
+        '200': '#ffd990',
+        '300': '#ffc85d',
+        '400': '#ffbd3d',
+        '500': '#ffad0d',
+        '600': '#e89d0c',
+        '700': '#b57b09',
+        '800': '#8c5f07',
+        '900': '#664905',
+      },
+      'orange': {
+        '50': '#fdf0e6',
+        '100': '#f9d1b0',
+        '200': '#f6ba8a',
+        '300': '#f29b54',
+        '400': '#f08833',
+        '500': '#ec6a00',
+        '600': '#d76000',
+        '700': '#a84b00',
+        '800': '#823a00',
+        '900': '#632d00',
+      },
+      'magenta': {
+        '50': '#ffe7f5',
+        '100': '#ffb6de',
+        '200': '#ff92cf',
+        '300': '#ff61b9',
+        '400': '#ff42ab',
+        '500': '#ff1396',
+        '600': '#e81189',
+        '700': '#b50d6b',
+        '800': '#8c0a53',
+        '900': '#6b083f',
+      },
+      'purple': {
+        '50': '#f5e8f6',
+        '100': '#e0b8e4',
+        '200': '#d196d7',
+        '300': '#bb66c5',
+        '400': '#ae48ba',
+        '500': '#9a1aa9',
+        '600': '#8c189a',
+        '700': '#6d1278',
+        '800': '#550e5d',
+        '900': '#410b47',
+      },
+      'turquoise': {
+        '50': '#e8f1f8',
+        '100': '#b7d2ea',
+        '200': '#94bce0',
+        '300': '#649ed2',
+        '400': '#458bc9',
+        '500': '#176ebc',
+        '600': '#1564ab',
+        '700': '#104e85',
+        '800': '#0d3d67',
+        '900': '#0a2e4f',
+      },
+      'navy-blue': {
+        '50': '#eaecef',
+        '100': '#bfc3cf',
+        '200': '#9fa6b7',
+        '300': '#747d96',
+        '400': '#596482',
+        '500': '#2f3d63',
+        '600': '#2b385a',
+        '700': '#212b46',
+        '800': '#1a2236',
+        '900': '#141a2a',
+      },
+      'gray': {
+        '50': '#fdfdfd',
+        '100': '#f8f9fa',
+        '200': '#f5f6f8',
+        '300': '#f1f2f4',
+        '400': '#eef0f2',
+        '500': '#eaecef',
+        '600': '#d5d7d9',
+        '700': '#a6a8aa',
+        '800': '#818283',
+        '900': '#626364',
+      },
+    },
+    action: {
+      'default': {
+        '500': '#252a57',
+      },
+      'default-2': {
+        '500': '#00b3da',
+      },
+    },
+  },
+  font: {
+    weight: {
+      'black': 'Inter-Black',
+      'condensed': 'Inter-Bold',
+      'condensedBold': 'Inter-ExtraBold',
+      'heavy': 'Inter-Bold',
+      'light': 'Inter-Light',
+      'medium': 'Inter-Medium',
+      'regular': 'Inter-Regular',
+      'semibold': 'Inter-SemiBold',
+      'thin': 'Inter-Thin',
+      'ultralight': 'Inter-Thin',
+      'bold': 'Inter-Bold',
+      'normal': 'Inter-Regular',
+      '100': 'Inter-Thin',
+      '200': 'Inter-ExtraLight',
+      '300': 'Inter-Light',
+      '400': 'Inter-Regular',
+      '500': 'Inter-Medium',
+      '600': 'Inter-SemiBold',
+      '700': 'Inter-Bold',
+      '800': 'Inter-ExtraBold',
+      '900': 'Inter-Black',
+    },
+  },
+  spacing: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+  },
+} as const;
+
+export type ThemeSpacing = keyof typeof theme.spacing;
+
+export type Theme = typeof theme.color;
+
+type AllThemeColorPaths<T = Theme> = {
+  [Category in keyof T]: {
+    [Color in keyof T[Category]]: {
+      [Shade in keyof T[Category][Color]]: `${Category & string}-${Color & string}-${Shade & string}`;
+    }[keyof T[Category][Color]];
+  }[keyof T[Category]];
+}[keyof T];
+
+type ExtractColorValue<T extends AllThemeColorPaths> =
+  T extends `${infer Category}-${infer Color}-${infer Shade}`
+    ? Category extends keyof Theme
+      ? Color extends keyof Theme[Category]
+        ? Shade extends keyof Theme[Category][Color]
+          ? Theme[Category][Color][Shade]
+          : never
+        : never
+      : never
+    : never;
+
+export const getThemeColor = <T extends AllThemeColorPaths>(
+  path: T | undefined
+): ExtractColorValue<T> | undefined => {
+  if (!path) return;
+  const [category, color, shade] = path.split('-') as [
+    keyof Theme,
+    string,
+    string,
+  ];
+  const colors = theme.color[category];
+  const variants = colors[color as keyof typeof colors];
+  const finalColor = variants[shade as keyof typeof variants];
+  return finalColor as ExtractColorValue<T>;
+};
+
+export type ThemeColor = AllThemeColorPaths;