@heartlandone/vega 2.75.0 → 2.76.0

package/dist/collection/polyfill/tinycolor/tinycolor-polyfill.js

@@ -0,0 +1,320 @@
+/**
+ * TinyColor Polyfill - A lightweight color manipulation utility.
+ *
+ * This is a drop-in replacement for tinycolor2, implementing only the methods
+ * used in the Vega theme overriding system.
+ *
+ * @see VD-5026 - [Zero Dependencies] remove tinycolor2 dependency
+ */
+/**
+ * TinyColor polyfill class for color manipulation.
+ * Implements the same interface as tinycolor2.Instance for the methods used in Vega.
+ */
+export class TinyColorPolyfill {
+  /**
+   * Create a new TinyColorPolyfill instance.
+   *
+   * @param {string | RgbaValue} color - The color to parse.
+   */
+  constructor(color) {
+    const rgba = TinyColorPolyfill.parseColor(color);
+    this._r = rgba.r;
+    this._g = rgba.g;
+    this._b = rgba.b;
+    this._a = rgba.a;
+  }
+  // ==================== Private Static Helper Methods ====================
+  /**
+   * Clamp a value between a minimum and maximum.
+   *
+   * @param {number} value - The value to clamp.
+   * @param {number} min - The minimum allowed value.
+   * @param {number} max - The maximum allowed value.
+   * @returns {number} The clamped value.
+   */
+  static clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+  /**
+   * Parse a color string or RGBA object into an RgbaValue.
+   *
+   * Supported formats:
+   * - Hex: #RGB, #RRGGBB, #RRGGBBAA
+   * - RGB: rgb(r, g, b)
+   * - RGBA: rgba(r, g, b, a)
+   * - Object: { r, g, b, a? }
+   *
+   * @param {string | RgbaValue} color - The color to parse.
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseColor(color) {
+    if (typeof color === 'object' && 'r' in color && 'g' in color && 'b' in color) {
+      return {
+        r: Math.round(TinyColorPolyfill.clamp(color.r, 0, 255)),
+        g: Math.round(TinyColorPolyfill.clamp(color.g, 0, 255)),
+        b: Math.round(TinyColorPolyfill.clamp(color.b, 0, 255)),
+        a: color.a !== undefined ? TinyColorPolyfill.clamp(color.a, 0, 1) : 1,
+      };
+    }
+    if (typeof color !== 'string') {
+      return { r: 0, g: 0, b: 0, a: 1 };
+    }
+    const trimmed = color.trim().toLowerCase();
+    // Hex format
+    if (trimmed.startsWith('#')) {
+      return TinyColorPolyfill.parseHex(trimmed);
+    }
+    // RGB/RGBA format
+    if (trimmed.startsWith('rgb')) {
+      return TinyColorPolyfill.parseRgbString(trimmed);
+    }
+    // Fallback to black for unsupported formats
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+  /* eslint-disable spellcheck/spell-checker */
+  /**
+   * Parse a hex color string into RGBA values.
+   *
+   * @param {string} hex - The hex color string (e.g., "#fff", "#ffffff", "#ffffffff").
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseHex(hex) {
+    /* eslint-enable spellcheck/spell-checker */
+    // Remove the # prefix
+    let hexValue = hex.slice(1);
+    // Expand shorthand format (#RGB -> #RRGGBB)
+    if (hexValue.length === 3) {
+      hexValue = hexValue
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    // Handle #RGBA shorthand
+    if (hexValue.length === 4) {
+      hexValue = hexValue
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    const r = parseInt(hexValue.slice(0, 2), 16);
+    const g = parseInt(hexValue.slice(2, 4), 16);
+    const b = parseInt(hexValue.slice(4, 6), 16);
+    let a = 1;
+    // Handle #RRGGBBAA format
+    if (hexValue.length === 8) {
+      a = parseInt(hexValue.slice(6, 8), 16) / 255;
+    }
+    return {
+      r: Number.isNaN(r) ? 0 : r,
+      g: Number.isNaN(g) ? 0 : g,
+      b: Number.isNaN(b) ? 0 : b,
+      a: Number.isNaN(a) ? 1 : a,
+    };
+  }
+  /**
+   * Parse an RGB or RGBA string into RGBA values.
+   *
+   * @param {string} rgbString - The RGB/RGBA string (e.g., "rgb(255, 128, 0)" or "rgba(255, 128, 0, 0.5)").
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseRgbString(rgbString) {
+    // Match rgb(r, g, b) or rgba(r, g, b, a) with comma-separated integer values.
+    // Note: Does NOT support percentage values (e.g., rgb(100%, 50%, 0%)) or
+    // modern CSS space-separated syntax (e.g., rgb(255 128 0 / 0.5)).
+    const match = rgbString.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+\.?\d*))?\s*\)/);
+    if (!match) {
+      return { r: 0, g: 0, b: 0, a: 1 };
+    }
+    return {
+      r: TinyColorPolyfill.clamp(parseInt(match[1], 10), 0, 255),
+      g: TinyColorPolyfill.clamp(parseInt(match[2], 10), 0, 255),
+      b: TinyColorPolyfill.clamp(parseInt(match[3], 10), 0, 255),
+      a: match[4] !== undefined ? TinyColorPolyfill.clamp(parseFloat(match[4]), 0, 1) : 1,
+    };
+  }
+  /**
+   * Convert RGB to HSL.
+   *
+   * @param {number} r - Red (0-255).
+   * @param {number} g - Green (0-255).
+   * @param {number} b - Blue (0-255).
+   * @returns {HslValue} The HSL values (h: 0-360, s: 0-1, l: 0-1).
+   */
+  static rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return { h: h * 360, s, l };
+  }
+  /**
+   * Convert HSL to RGB.
+   *
+   * @param {number} h - Hue (0-360).
+   * @param {number} s - Saturation (0-1).
+   * @param {number} l - Lightness (0-1).
+   * @returns {RgbValue} The RGB values (0-255).
+   */
+  static hslToRgb(h, s, l) {
+    h /= 360;
+    let r;
+    let g;
+    let b;
+    if (s === 0) {
+      r = g = b = l;
+    }
+    else {
+      /**
+       * Helper function to convert hue to RGB component.
+       *
+       * @param {number} p - First intermediate value.
+       * @param {number} q - Second intermediate value.
+       * @param {number} t - Hue offset value.
+       * @returns {number} RGB component value (0-1).
+       */
+      const hue2rgb = (p, q, t) => {
+        if (t < 0)
+          t += 1;
+        if (t > 1)
+          t -= 1;
+        if (t < 1 / 6)
+          return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+          return q;
+        if (t < 2 / 3)
+          return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+    };
+  }
+  /**
+   * Calculate the perceived brightness of a color using the YIQ formula.
+   * This matches tinycolor2's brightness calculation.
+   *
+   * @param {number} r - Red (0-255).
+   * @param {number} g - Green (0-255).
+   * @param {number} b - Blue (0-255).
+   * @returns {number} Brightness value (0-255).
+   */
+  static getBrightness(r, g, b) {
+    return (r * 299 + g * 587 + b * 114) / 1000;
+  }
+  // ==================== Public Instance Methods ====================
+  /**
+   * Check if the color is dark (brightness < 128).
+   *
+   * @returns {boolean} True if the color is considered dark.
+   */
+  isDark() {
+    return TinyColorPolyfill.getBrightness(this._r, this._g, this._b) < 128;
+  }
+  /**
+   * Check if the color is light (brightness >= 128).
+   *
+   * @returns {boolean} True if the color is considered light.
+   */
+  isLight() {
+    return !this.isDark();
+  }
+  /**
+   * Create a copy of this color.
+   *
+   * @returns {TinyColorPolyfill} A new TinyColorPolyfill instance with the same values.
+   */
+  clone() {
+    const cloned = new TinyColorPolyfill({
+      r: this._r,
+      g: this._g,
+      b: this._b,
+      a: this._a,
+    });
+    return cloned;
+  }
+  /**
+   * Lighten the color by a given amount.
+   * Note: tinycolor2 accepts negative values to darken.
+   *
+   * @param {number} amount - The amount to lighten (0-100). Negative values darken.
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  lighten(amount = 10) {
+    const hsl = TinyColorPolyfill.rgbToHsl(this._r, this._g, this._b);
+    hsl.l = TinyColorPolyfill.clamp(hsl.l + amount / 100, 0, 1);
+    const rgb = TinyColorPolyfill.hslToRgb(hsl.h, hsl.s, hsl.l);
+    this._r = rgb.r;
+    this._g = rgb.g;
+    this._b = rgb.b;
+    return this;
+  }
+  /**
+   * Darken the color by a given amount.
+   *
+   * @param {number} amount - The amount to darken (0-100).
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  darken(amount = 10) {
+    return this.lighten(-amount);
+  }
+  /**
+   * Set the alpha (opacity) of the color.
+   *
+   * @param {number} alpha - The alpha value (0-1).
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  setAlpha(alpha) {
+    this._a = TinyColorPolyfill.clamp(alpha, 0, 1);
+    return this;
+  }
+  /**
+   * Get the RGBA representation of the color.
+   *
+   * @returns {RgbaValue} The RGBA values.
+   */
+  toRgb() {
+    return {
+      r: this._r,
+      g: this._g,
+      b: this._b,
+      a: this._a,
+    };
+  }
+}
+/**
+ * Factory function to create a TinyColorPolyfill instance.
+ * This provides API compatibility with tinycolor2's default export.
+ *
+ * @param {string | RgbaValue} color - The color to parse.
+ * @returns {TinyColorPolyfill} A new TinyColorPolyfill instance.
+ */
+export function tinycolor(color) {
+  return new TinyColorPolyfill(color);
+}

package/dist/collection/polyfill/tinycolor/tinycolor-polyfill.test.js

@@ -0,0 +1,361 @@
+import { tinycolor } from './tinycolor-polyfill';
+describe('TinyColorPolyfill', () => {
+  describe('Color Parsing', () => {
+    describe('Hex colors', () => {
+      it('should parse 6-digit hex color', () => {
+        const color = tinycolor('#ff5500');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 85, b: 0, a: 1 });
+      });
+      it('should parse 3-digit shorthand hex color', () => {
+        const color = tinycolor('#f50');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 85, b: 0, a: 1 });
+      });
+      it('should parse 8-digit hex color with alpha', () => {
+        const color = tinycolor('#ff550080');
+        const rgb = color.toRgb();
+        expect(rgb.r).toBe(255);
+        expect(rgb.g).toBe(85);
+        expect(rgb.b).toBe(0);
+        expect(rgb.a).toBeCloseTo(0.502, 2);
+      });
+      it('should parse uppercase hex color', () => {
+        const color = tinycolor('#FF5500');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 85, b: 0, a: 1 });
+      });
+      // eslint-disable-next-line spellcheck/spell-checker
+      it('should handle hex with leading/trailing whitespace', () => {
+        const color = tinycolor('  #ff5500  ');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 85, b: 0, a: 1 });
+      });
+    });
+    describe('RGB/RGBA strings', () => {
+      it('should parse rgb() format', () => {
+        const color = tinycolor('rgb(255, 128, 64)');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 128, b: 64, a: 1 });
+      });
+      it('should parse rgba() format', () => {
+        const color = tinycolor('rgba(255, 128, 64, 0.5)');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 128, b: 64, a: 0.5 });
+      });
+      it('should handle rgb() with extra spaces', () => {
+        const color = tinycolor('rgb(  255 ,  128 ,  64  )');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 128, b: 64, a: 1 });
+      });
+    });
+    describe('RGBA objects', () => {
+      it('should parse RGBA object with alpha', () => {
+        const color = tinycolor({ r: 200, g: 100, b: 50, a: 0.8 });
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 200, g: 100, b: 50, a: 0.8 });
+      });
+      it('should default alpha to 1 when not provided', () => {
+        const color = tinycolor({ r: 200, g: 100, b: 50 });
+        const rgb = color.toRgb();
+        expect(rgb.a).toBe(1);
+      });
+      it('should clamp RGB values to 0-255', () => {
+        const color = tinycolor({ r: 300, g: -10, b: 128, a: 1 });
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 255, g: 0, b: 128, a: 1 });
+      });
+      it('should clamp alpha to 0-1', () => {
+        const color = tinycolor({ r: 128, g: 128, b: 128, a: 2 });
+        const rgb = color.toRgb();
+        expect(rgb.a).toBe(1);
+      });
+    });
+    describe('Hex with 4-digit shorthand (#RGBA)', () => {
+      it('should parse 4-digit hex color with alpha', () => {
+        // #f508 expands to #ff550088
+        const color = tinycolor('#f508');
+        const rgb = color.toRgb();
+        expect(rgb.r).toBe(255);
+        expect(rgb.g).toBe(85);
+        expect(rgb.b).toBe(0);
+        expect(rgb.a).toBeCloseTo(0.533, 2);
+      });
+    });
+    describe('Invalid inputs', () => {
+      it('should return black for unsupported format', () => {
+        // eslint-disable-next-line spellcheck/spell-checker
+        const color = tinycolor('hsl(120, 50%, 50%)');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+      });
+      it('should return black for invalid hex', () => {
+        // eslint-disable-next-line spellcheck/spell-checker
+        const color = tinycolor('#xyz');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+      });
+      it('should return black for non-string non-object input', () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const color = tinycolor(12345);
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+      });
+      it('should return black for malformed rgb string', () => {
+        // eslint-disable-next-line spellcheck/spell-checker
+        const color = tinycolor('rgb(abc)');
+        const rgb = color.toRgb();
+        expect(rgb).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+      });
+      it('should default alpha to 1 when hex alpha characters are invalid', () => {
+        // eslint-disable-next-line spellcheck/spell-checker
+        const color = tinycolor('#ff5500zz');
+        const rgb = color.toRgb();
+        expect(rgb.a).toBe(1);
+      });
+    });
+  });
+  describe('isDark() / isLight()', () => {
+    it('should identify black as dark', () => {
+      const color = tinycolor('#000000');
+      expect(color.isDark()).toBe(true);
+      expect(color.isLight()).toBe(false);
+    });
+    it('should identify white as light', () => {
+      const color = tinycolor('#ffffff');
+      expect(color.isDark()).toBe(false);
+      expect(color.isLight()).toBe(true);
+    });
+    it('should identify dark blue as dark', () => {
+      const color = tinycolor('#000080');
+      expect(color.isDark()).toBe(true);
+    });
+    it('should identify yellow as light', () => {
+      const color = tinycolor('#ffff00');
+      expect(color.isLight()).toBe(true);
+    });
+    it('should correctly identify mid-gray threshold', () => {
+      // Brightness at 128 threshold
+      // Using YIQ formula: (r * 299 + g * 587 + b * 114) / 1000
+      // For gray: (128 * 299 + 128 * 587 + 128 * 114) / 1000 = 128
+      const darkGray = tinycolor('#7f7f7f'); // brightness ~127
+      const lightGray = tinycolor('#808080'); // brightness = 128
+      expect(darkGray.isDark()).toBe(true);
+      expect(lightGray.isLight()).toBe(true);
+    });
+  });
+  describe('clone()', () => {
+    it('should create an independent copy', () => {
+      const original = tinycolor('#ff5500');
+      const cloned = original.clone();
+      // Modify the clone
+      cloned.lighten(20);
+      // Original should be unchanged
+      const originalRgb = original.toRgb();
+      expect(originalRgb).toEqual({ r: 255, g: 85, b: 0, a: 1 });
+    });
+    it('should preserve alpha when cloning', () => {
+      const original = tinycolor('#ff550080');
+      const cloned = original.clone();
+      const clonedRgb = cloned.toRgb();
+      expect(clonedRgb.a).toBeCloseTo(0.502, 2);
+    });
+  });
+  describe('lighten()', () => {
+    it('should lighten a color', () => {
+      const color = tinycolor('#336699');
+      const originalRgb = color.toRgb();
+      color.lighten(20);
+      const lightenedRgb = color.toRgb();
+      // The lightened color should have higher RGB values
+      expect(lightenedRgb.r).toBeGreaterThan(originalRgb.r);
+      expect(lightenedRgb.g).toBeGreaterThan(originalRgb.g);
+      expect(lightenedRgb.b).toBeGreaterThan(originalRgb.b);
+    });
+    it('should lighten using default amount when no argument is provided', () => {
+      const color1 = tinycolor('#336699');
+      const color2 = tinycolor('#336699');
+      color1.lighten();
+      color2.lighten(10);
+      expect(color1.toRgb()).toEqual(color2.toRgb());
+    });
+    it('should darken a color with negative amount', () => {
+      const color = tinycolor('#668899');
+      const originalRgb = color.toRgb();
+      color.lighten(-20);
+      const darkenedRgb = color.toRgb();
+      // The darkened color should have lower RGB values
+      expect(darkenedRgb.r).toBeLessThan(originalRgb.r);
+      expect(darkenedRgb.g).toBeLessThan(originalRgb.g);
+      expect(darkenedRgb.b).toBeLessThan(originalRgb.b);
+    });
+    it('should not exceed white when over-lightening', () => {
+      const color = tinycolor('#cccccc');
+      color.lighten(100);
+      const rgb = color.toRgb();
+      expect(rgb.r).toBeLessThanOrEqual(255);
+      expect(rgb.g).toBeLessThanOrEqual(255);
+      expect(rgb.b).toBeLessThanOrEqual(255);
+    });
+    it('should be chainable', () => {
+      const color = tinycolor('#336699');
+      const result = color.lighten(10);
+      expect(result).toBe(color);
+    });
+  });
+  describe('darken()', () => {
+    it('should darken a color', () => {
+      const color = tinycolor('#668899');
+      const originalRgb = color.toRgb();
+      color.darken(20);
+      const darkenedRgb = color.toRgb();
+      expect(darkenedRgb.r).toBeLessThan(originalRgb.r);
+      expect(darkenedRgb.g).toBeLessThan(originalRgb.g);
+      expect(darkenedRgb.b).toBeLessThan(originalRgb.b);
+    });
+    it('should darken using default amount when no argument is provided', () => {
+      const color1 = tinycolor('#668899');
+      const color2 = tinycolor('#668899');
+      color1.darken();
+      color2.darken(10);
+      expect(color1.toRgb()).toEqual(color2.toRgb());
+    });
+    it('should not go below black when over-darkening', () => {
+      const color = tinycolor('#333333');
+      color.darken(100);
+      const rgb = color.toRgb();
+      expect(rgb.r).toBeGreaterThanOrEqual(0);
+      expect(rgb.g).toBeGreaterThanOrEqual(0);
+      expect(rgb.b).toBeGreaterThanOrEqual(0);
+    });
+  });
+  describe('setAlpha()', () => {
+    it('should set the alpha value', () => {
+      const color = tinycolor('#ff5500');
+      color.setAlpha(0.5);
+      const rgb = color.toRgb();
+      expect(rgb.a).toBe(0.5);
+    });
+    it('should clamp alpha to 0-1 range', () => {
+      const color = tinycolor('#ff5500');
+      color.setAlpha(-0.5);
+      expect(color.toRgb().a).toBe(0);
+      color.setAlpha(1.5);
+      expect(color.toRgb().a).toBe(1);
+    });
+    it('should be chainable', () => {
+      const color = tinycolor('#ff5500');
+      const result = color.setAlpha(0.5);
+      expect(result).toBe(color);
+    });
+    it('should work with lighten in a chain', () => {
+      const color = tinycolor('#ff5500');
+      color.lighten(10).setAlpha(0.25);
+      const rgb = color.toRgb();
+      expect(rgb.a).toBe(0.25);
+    });
+  });
+  describe('toRgb()', () => {
+    it('should return RGBA object', () => {
+      const color = tinycolor('#ff5500');
+      const rgb = color.toRgb();
+      expect(rgb).toHaveProperty('r');
+      expect(rgb).toHaveProperty('g');
+      expect(rgb).toHaveProperty('b');
+      expect(rgb).toHaveProperty('a');
+    });
+    it('should return integer RGB values', () => {
+      const color = tinycolor('#ff5500');
+      color.lighten(15);
+      const rgb = color.toRgb();
+      expect(Number.isInteger(rgb.r)).toBe(true);
+      expect(Number.isInteger(rgb.g)).toBe(true);
+      expect(Number.isInteger(rgb.b)).toBe(true);
+    });
+  });
+  describe('Theme override use cases', () => {
+    /**
+     * These tests simulate the actual usage patterns from overridable-color-tokens.ts
+     */
+    describe('rgbToHsl branch coverage via lighten/darken', () => {
+      it('should handle color where green is the max component', () => {
+        // Green-dominant color: r=50, g=200, b=100 => max is green
+        const color = tinycolor({ r: 50, g: 200, b: 100, a: 1 });
+        const original = color.toRgb();
+        color.lighten(10);
+        const lightened = color.toRgb();
+        // Lightening should increase at least one channel
+        expect(lightened.r + lightened.g + lightened.b).toBeGreaterThan(original.r + original.g + original.b);
+      });
+      it('should handle color where red is max and green < blue', () => {
+        // Red-dominant with g < b: r=200, g=50, b=100 => max is red, g < b
+        const color = tinycolor({ r: 200, g: 50, b: 100, a: 1 });
+        const original = color.toRgb();
+        color.lighten(10);
+        const lightened = color.toRgb();
+        expect(lightened.r + lightened.g + lightened.b).toBeGreaterThan(original.r + original.g + original.b);
+      });
+      it('should handle pure gray (saturation = 0) in hslToRgb', () => {
+        // Pure gray: r=g=b, saturation is 0
+        const color = tinycolor('#808080');
+        color.lighten(10);
+        const rgb = color.toRgb();
+        // After lightening gray, all channels should still be equal (still gray)
+        expect(rgb.r).toBe(rgb.g);
+        expect(rgb.g).toBe(rgb.b);
+        // And should be lighter
+        expect(rgb.r).toBeGreaterThan(128);
+      });
+    });
+    it('should handle action color hover (dark color)', () => {
+      const actionColor = '#1a237e'; // Dark blue
+      const color = tinycolor(actionColor);
+      const cloned = color.clone();
+      if (color.isDark()) {
+        cloned.lighten(10);
+      }
+      else {
+        cloned.lighten(-10);
+      }
+      const rgb = cloned.toRgb();
+      // Should be lightened since the original is dark
+      expect(rgb.r).toBeGreaterThan(26);
+    });
+    it('should handle action color hover (light color)', () => {
+      const actionColor = '#e3f2fd'; // Light blue
+      const color = tinycolor(actionColor);
+      const cloned = color.clone();
+      if (color.isDark()) {
+        cloned.lighten(10);
+      }
+      else {
+        cloned.lighten(-10);
+      }
+      const rgb = cloned.toRgb();
+      // Should be darkened since the original is light
+      expect(rgb.r).toBeLessThan(227);
+    });
+    it('should handle secondary action with alpha', () => {
+      const actionColor = '#1976d2';
+      const color = tinycolor(actionColor);
+      const cloned = color.clone();
+      if (color.isDark()) {
+        cloned.lighten(10);
+      }
+      else {
+        cloned.lighten(-10);
+      }
+      cloned.setAlpha(0.15);
+      const rgb = cloned.toRgb();
+      expect(rgb.a).toBe(0.15);
+    });
+    it('should format value correctly for CSS variable', () => {
+      const actionColor = '#1976d2';
+      const color = tinycolor(actionColor);
+      const rgb = color.toRgb();
+      // This matches the formatValue function in the generated tokens
+      const cssValue = `${rgb.r} ${rgb.g} ${rgb.b} / ${rgb.a}`;
+      expect(cssValue).toMatch(/^\d+ \d+ \d+ \/ [\d.]+$/);
+    });
+  });
+});

package/dist/collection/types/ui.type.js

@@ -1,6 +1,18 @@
+/**
+ * Device type enumeration for responsive design breakpoints.
+ */
 export var DeviceType;
 (function (DeviceType) {
+  /**
+   * Tablet device type.
+   */
   DeviceType["TABLET"] = "tablet";
+  /**
+   * Mobile device type.
+   */
   DeviceType["MOBILE"] = "mobile";
+  /**
+   * Desktop device type.
+   */
   DeviceType["DESKTOP"] = "desktop";
 })(DeviceType || (DeviceType = {}));