refactor(theme): split parseHex out to a reusable function and adds tests

Author: brandyscarney

core/src/utils/test/theme.spec.ts

@@ -10,7 +10,9 @@ import {
   getClassList,
   getClassMap,
   getCustomTheme,
+  hexToRgb,
   injectCSS,
+  mix,
 } from '../theme';
 
 describe('getClassList()', () => {
@@ -649,3 +651,78 @@ describe('generateColorClasses', () => {
     expect(css).toBe('');
   });
 });
+
+describe('hexToRgb()', () => {
+  it('should convert 6-digit hex colors to RGB strings', () => {
+    expect(hexToRgb('#ffffff')).toBe('255, 255, 255');
+    expect(hexToRgb('#000000')).toBe('0, 0, 0');
+    expect(hexToRgb('#ff0000')).toBe('255, 0, 0');
+    expect(hexToRgb('#00ff00')).toBe('0, 255, 0');
+    expect(hexToRgb('#0000ff')).toBe('0, 0, 255');
+    expect(hexToRgb('#3880ff')).toBe('56, 128, 255');
+  });
+
+  it('should convert 3-digit hex colors to RGB strings', () => {
+    expect(hexToRgb('#fff')).toBe('255, 255, 255');
+    expect(hexToRgb('#000')).toBe('0, 0, 0');
+    expect(hexToRgb('#f00')).toBe('255, 0, 0');
+    expect(hexToRgb('#0f0')).toBe('0, 255, 0');
+    expect(hexToRgb('#00f')).toBe('0, 0, 255');
+    expect(hexToRgb('#abc')).toBe('170, 187, 204');
+  });
+
+  it('should handle hex colors without hash prefix', () => {
+    expect(hexToRgb('ffffff')).toBe('255, 255, 255');
+    expect(hexToRgb('fff')).toBe('255, 255, 255');
+    expect(hexToRgb('3880ff')).toBe('56, 128, 255');
+  });
+});
+
+describe('mix()', () => {
+  it('should mix two hex colors by weight percentage', () => {
+    // Mix white into black
+    expect(mix('#000000', '#ffffff', '0%')).toBe('#000000');
+    expect(mix('#000000', '#ffffff', '50%')).toBe('#808080');
+    expect(mix('#000000', '#ffffff', '100%')).toBe('#ffffff');
+  });
+
+  it('should mix colors with different percentages', () => {
+    // Mix red into blue
+    expect(mix('#0000ff', '#ff0000', '25%')).toBe('#4000bf');
+    expect(mix('#0000ff', '#ff0000', '75%')).toBe('#bf0040');
+  });
+
+  it('should handle 3-digit hex colors', () => {
+    expect(mix('#000', '#fff', '50%')).toBe('#808080');
+    expect(mix('#f00', '#0f0', '50%')).toBe('#808000');
+  });
+
+  it('should handle hex colors without hash prefix', () => {
+    expect(mix('000000', 'ffffff', '50%')).toBe('#808080');
+    expect(mix('f00', '0f0', '50%')).toBe('#808000');
+  });
+
+  it('should handle fractional percentages', () => {
+    expect(mix('#000000', '#ffffff', '12.5%')).toBe('#202020');
+    expect(mix('#ffffff', '#000000', '87.5%')).toBe('#202020');
+  });
+
+  it('should work with real-world color examples', () => {
+    // Mix primary Ionic blue with white
+    expect(mix('#3880ff', '#ffffff', '10%')).toBe('#4c8dff');
+
+    // Mix primary Ionic blue with black for shade
+    expect(mix('#3880ff', '#000000', '12%')).toBe('#3171e0');
+  });
+
+  it('should handle edge cases', () => {
+    // Same colors should return base color regardless of weight
+    expect(mix('#ff0000', '#ff0000', '50%')).toBe('#ff0000');
+
+    // Zero weight should return base color
+    expect(mix('#123456', '#abcdef', '0%')).toBe('#123456');
+
+    // 100% weight should return mix color
+    expect(mix('#123456', '#abcdef', '100%')).toBe('#abcdef');
+  });
+});

core/src/utils/theme.ts

@@ -401,62 +401,58 @@ export const applyComponentTheme = (element: HTMLElement): void => {
 };
 
 /**
- * Converts a hex color to RGB comma-separated values
- * @param hex Hex color (e.g., '#ffffff' or '#fff')
- * @returns RGB string (e.g., '255, 255, 255')
+ * Parses a hex color string and returns RGB values as an array.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB values as `[r, g, b]` array
  */
-export const hexToRgb = (hex: string): string => {
+const parseHex = (hex: string): [number, number, number] => {
   const cleanHex = hex.replace('#', '');
 
-  let r: number, g: number, b: number;
-
+  // Short hex format like 'fff' → expand to 'ffffff'
   if (cleanHex.length === 3) {
-    // Short hex format like 'fff' → expand to 'ffffff'
-    r = parseInt(cleanHex[0] + cleanHex[0], 16);
-    g = parseInt(cleanHex[1] + cleanHex[1], 16);
-    b = parseInt(cleanHex[2] + cleanHex[2], 16);
-  } else {
+    return [
+      parseInt(cleanHex[0] + cleanHex[0], 16),
+      parseInt(cleanHex[1] + cleanHex[1], 16),
+      parseInt(cleanHex[2] + cleanHex[2], 16),
+    ];
     // Full hex format like 'ffffff'
-    r = parseInt(cleanHex.substr(0, 2), 16);
-    g = parseInt(cleanHex.substr(2, 2), 16);
-    b = parseInt(cleanHex.substr(4, 2), 16);
+  } else {
+    return [
+      parseInt(cleanHex.substring(0, 2), 16),
+      parseInt(cleanHex.substring(2, 4), 16),
+      parseInt(cleanHex.substring(4, 6), 16),
+    ];
   }
+};
 
+/**
+ * Converts a hex color to a string of RGB comma-separated values.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB string (e.g. `'255, 255, 255'`)
+ */
+export const hexToRgb = (hex: string): string => {
+  const [r, g, b] = parseHex(hex);
   return `${r}, ${g}, ${b}`;
 };
 
 /**
- * Mixes two hex colors by a given weight percentage
- * @param baseColor Base color (e.g., '#0054e9')
- * @param mixColor Color to mix in (e.g., '#000000' or '#fff')
- * @param weight Weight percentage as string - how much of mixColor to mix into baseColor (e.g., '12%')
- * @returns Mixed hex color
+ * Mixes two hex colors by a given weight percentage and returns
+ * it as a hex color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ * @param weight Weight percentage as string - how much of mixColor to mix into baseColor (e.g. `'12%'`)
+ *
+ * @returns Mixed hex color (e.g. `'#004acd'`)
  */
 export const mix = (baseColor: string, mixColor: string, weight: string): string => {
   // Parse weight percentage
   const w = parseFloat(weight.replace('%', '')) / 100;
 
-  // Parse hex colors
-  const parseHex = (hex: string): [number, number, number] => {
-    const cleanHex = hex.replace('#', '');
-
-    // Short hex format like 'fff' → expand to 'ffffff'
-    if (cleanHex.length === 3) {
-      return [
-        parseInt(cleanHex[0] + cleanHex[0], 16),
-        parseInt(cleanHex[1] + cleanHex[1], 16),
-        parseInt(cleanHex[2] + cleanHex[2], 16),
-      ];
-      // Full hex format like 'ffffff'
-    } else {
-      return [
-        parseInt(cleanHex.substr(0, 2), 16),
-        parseInt(cleanHex.substr(2, 2), 16),
-        parseInt(cleanHex.substr(4, 2), 16),
-      ];
-    }
-  };
-
   // Parse both colors
   const [baseR, baseG, baseB] = parseHex(baseColor);
   const [mixR, mixG, mixB] = parseHex(mixColor);