feat(tokens): add gray colors

Author: thetaPC

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

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

core/src/themes/native/native.theme.default.scss

@@ -113,7 +113,7 @@ $text-color-step-100: var(
 $text-color-step-150: var(
   --ion-color-step-850,
   var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
-);
+); // 262626 gray-850
 $text-color-step-200: var(
   --ion-color-step-800,
   var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))

core/src/themes/themes.interfaces.ts

@@ -1,3 +1,4 @@
+import type { PredefinedColors } from '../interface';
 import type { IonicConfig } from '../utils/config';
 
 // Platform-specific theme
@@ -218,24 +219,7 @@ export type BaseTheme = {
   };
 
   // COLOR TOKENS
-  color?: {
-    [key: string]: {
-      bold: {
-        base: string;
-        contrast: string;
-        foreground: string;
-        shade: string;
-        tint: string;
-      };
-      subtle: {
-        base: string;
-        contrast: string;
-        foreground: string;
-        shade: string;
-        tint: string;
-      };
-    };
-  };
+  color?: Colors;
 
   // PLATFORM SPECIFIC OVERRIDES
   ios?: PlatformTheme;
@@ -261,3 +245,34 @@ export type DefaultTheme = BaseTheme & {
 
   config?: IonicConfig;
 };
+
+// Semantic color value structure
+type SemanticColorValue = {
+  base: string;
+  contrast: string;
+  foreground: string;
+  shade: string;
+  tint: string;
+};
+
+// Semantic color hue value structure
+type SemanticHue = {
+  bold?: SemanticColorValue;
+  subtle?: SemanticColorValue;
+};
+
+// Number string keys structure
+export type NumberStringKeys = {
+  // Enforce keys are strings of numbers (like 50, '50', etc.)
+  [K in number as `${K}`]?: string;
+};
+
+// Primitive color keys
+type PrimitiveColors = 'gray';
+
+// Colors interface
+type Colors = {
+  [K in PredefinedColors]?: SemanticHue;
+} & {
+  [K in PrimitiveColors]?: NumberStringKeys;
+};

core/src/utils/theme.ts

@@ -1,6 +1,7 @@
 import { printIonWarning } from '@utils/logging';
 
 import type { Color, CssClassMap } from '../interface';
+import type { NumberStringKeys } from '../themes/themes.interfaces';
 
 import { deepMerge } from './helpers';
 
@@ -471,3 +472,33 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string
   const toHex = (n: number) => n.toString(16).padStart(2, '0');
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };
+
+/**
+ * Generates a color scale object by mixing a light and dark color.
+ *
+ * This function creates ten distinct shade levels (50, 100, 150, ..., 950)
+ * by mixing the light color into the dark color using mix percentages
+ * that increment in steps of 5%.
+ *
+ * The final output is an object where keys are the shade levels (50-950)
+ * and values are the resulting mixed hex codes.
+ *
+ * @param {string} lightColor - The lighter base color hex value.
+ * @param {string} darkColor - The darker base color hex value.
+ * @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 = {};
+
+  for (let i = 50; i <= 950; i += 50) {
+    const weight = `${i / 10}%`;
+
+    colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight);
+  }
+
+  return colorSteps;
+};