feat(tokens): add gray colors for dark

Author: thetaPC

core/src/themes/base/dark.tokens.ts

@@ -1,4 +1,4 @@
-import { mix } from '../../utils/theme';
+import { mix, generateColorSteps } from '../../utils/theme';
 import type { DarkTheme } from '../themes.interfaces';
 
 const colors = {
@@ -160,6 +160,7 @@ export const darkTheme: DarkTheme = {
         tint: mix('#000', colors.dark, '12%'),
       },
     },
+    gray: generateColorSteps('#fff', '#000', true),
   },
 
   backgroundColor: '#000000',

core/src/themes/base/default.tokens.ts

@@ -1,4 +1,3 @@
-import { generateColorSteps } from '../../utils/theme';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
@@ -161,8 +160,4 @@ export const defaultTheme: DefaultTheme = {
     xl: '2',
     xxl: '2.4',
   },
-
-  color: {
-    gray: generateColorSteps('#fff', '#000'),
-  },
 };

core/src/themes/base/light.tokens.ts

@@ -1,4 +1,4 @@
-import { mix } from '../../utils/theme';
+import { mix, generateColorSteps } from '../../utils/theme';
 import type { LightTheme } from '../themes.interfaces';
 
 const colors = {
@@ -159,5 +159,6 @@ export const lightTheme: LightTheme = {
         tint: mix('#fff', colors.dark, '4%'),
       },
     },
+    gray: generateColorSteps('#fff', '#000'),
   },
 };

core/src/utils/theme.ts

@@ -485,17 +485,21 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string
  *
  * @param {string} lightColor - The lighter base color hex value.
  * @param {string} darkColor - The darker base color hex value.
+ * @param {boolean} isInverted - If true, generates the scale in reverse (dark to light).
  * @returns {NumberStringKeys} An object of color shades.
  *
  * @example
  * mix('#ffffff', '#000000', 5%) results in the color for key '50'
  * mix('#ffffff', '#000000', 95%) results in the color for key '950'
  */
-export const generateColorSteps = (lightColor: string, darkColor: string): NumberStringKeys => {
-  const colorSteps: NumberStringKeys = {};
+export const generateColorSteps = (lightColor: string, darkColor: string, isInverted = false): NumberStringKeys => {
+  const colorSteps: NumberStringKeys = {
+    0: isInverted ? darkColor : lightColor,
+    1000: isInverted ? lightColor : darkColor,
+  };
 
   for (let i = 50; i <= 950; i += 50) {
-    const weight = `${i / 10}%`;
+    const weight = isInverted ? `${100 - i / 10}%` : `${i / 10}%`;
 
     colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight);
   }