@usertour/helpers 0.0.54 → 0.0.56

package/dist/__tests__/condition.test.cjs

@@ -451,17 +451,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);

package/dist/__tests__/condition.test.js

@@ -2,10 +2,10 @@ import {
   evaluateRulesConditions,
   filterConditionsByType,
   isConditionsActived
-} from "../chunk-SIG4WTEF.js";
+} from "../chunk-X6R6AH7G.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-73OREOHT.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

package/dist/__tests__/content-helper.test.cjs

@@ -61,17 +61,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);

package/dist/__tests__/content-helper.test.js

@@ -14,12 +14,12 @@ import {
   isQuestionElement,
   isRestrictedType,
   processQuestionElements
-} from "../chunk-2TMOS3DN.js";
+} from "../chunk-RQ4UE7ZB.js";
 import "../chunk-7ODE2AIC.js";
-import "../chunk-SIG4WTEF.js";
+import "../chunk-X6R6AH7G.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-73OREOHT.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

package/dist/{chunk-3KG2HTZ3.js → chunk-73OREOHT.js}

@@ -31,17 +31,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);
@@ -73,7 +62,6 @@ export {
   absoluteUrl,
   uuidV4,
   hexToRgb,
-  isDark,
   evalCode,
   getRandomColor
 };

package/dist/chunk-FZFHBCB6.js

@@ -0,0 +1,133 @@
+// src/color.ts
+import chroma from "chroma-js";
+function hexToHSLString(hexColor) {
+  try {
+    const color = chroma(hexColor);
+    const [h, s, l] = color.hsl();
+    const hDeg = Math.round(h || 0);
+    const sPct = Math.round(s * 100);
+    const lPct = Math.round(l * 100);
+    return `${hDeg} ${sPct}% ${lPct}%`;
+  } catch (error) {
+    console.warn(`Failed to convert ${hexColor} to HSL string:`, error);
+    return "0 0% 0%";
+  }
+}
+var hexToRGBStr = (hex) => {
+  try {
+    const color = chroma(hex);
+    const [r, g, b] = color.rgb();
+    return `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
+  } catch (error) {
+    console.warn(`Failed to convert ${hex} to RGB string:`, error);
+    return "0, 0, 0";
+  }
+};
+function hexToRgb(hex) {
+  if (!hex)
+    return [0, 0, 0];
+  if (hex.match(/^#[0-9a-f]{6}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 3), 16),
+      Number.parseInt(hex.substring(3, 5), 16),
+      Number.parseInt(hex.substring(5, 7), 16)
+    ];
+  }
+  if (hex.match(/^#[0-9a-f]{3}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 2).repeat(2), 16),
+      Number.parseInt(hex.substring(2, 3).repeat(2), 16),
+      Number.parseInt(hex.substring(3, 4).repeat(2), 16)
+    ];
+  }
+  return [0, 0, 0];
+}
+function rgbToHex([r, g, b]) {
+  const rHex = r.toString(16).padStart(2, "0");
+  const gHex = g.toString(16).padStart(2, "0");
+  const bHex = b.toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+}
+function rgbToHsl([r, g, b]) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  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 rNorm:
+        h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0);
+        break;
+      case gNorm:
+        h = (bNorm - rNorm) / d + 2;
+        break;
+      default:
+        h = (rNorm - gNorm) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l];
+}
+function getLabLuminance([r, g, b]) {
+  function linearize(channel) {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  }
+  const y = 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+  function yToLabL(yVal) {
+    return yVal <= 216 / 24389 ? yVal * (24389 / 27) : yVal ** (1 / 3) * 116 - 16;
+  }
+  return Math.round(yToLabL(y) * 10) / 1e3;
+}
+function invertColor([r, g, b]) {
+  return [Math.round(255 - r), Math.round(255 - g), Math.round(255 - b)];
+}
+function mixRgb(color1, color2, ratio) {
+  return [
+    Math.max(0, Math.min(255, Math.round(color1[0] + (color2[0] - color1[0]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[1] + (color2[1] - color1[1]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[2] + (color2[2] - color1[2]) * ratio)))
+  ];
+}
+function calculateMixRatio(foreground, background) {
+  const fgLuminance = getLabLuminance(foreground);
+  const bgLuminance = getLabLuminance(background);
+  const minRatio = 0.05;
+  const baseRatio = (1 - (bgLuminance - fgLuminance)) / 2 * (0.18 - minRatio) + minRatio;
+  const luminanceSimilarity = 1 - Math.abs(bgLuminance - fgLuminance);
+  const adjustment = ((1 - baseRatio) * luminanceSimilarity) ** 4;
+  const finalRatio = baseRatio + adjustment;
+  return Math.round(finalRatio * 1e3) / 1e3;
+}
+function generateStateColors(backgroundColor, foregroundColor) {
+  const bgRgb = hexToRgb(backgroundColor);
+  const fgRgb = hexToRgb(foregroundColor);
+  const bgHsl = rgbToHsl(bgRgb);
+  const hoverRatio = calculateMixRatio(fgRgb, bgRgb);
+  let activeRatio = hoverRatio * 2;
+  let activeMixColor = fgRgb;
+  const midToneThreshold = 0.2;
+  if (bgHsl[2] > midToneThreshold && bgHsl[2] < 1 - midToneThreshold) {
+    activeMixColor = invertColor(fgRgb);
+    activeRatio = calculateMixRatio(activeMixColor, bgRgb);
+  }
+  const hoverRgb = mixRgb(bgRgb, fgRgb, hoverRatio);
+  const activeRgb = mixRgb(bgRgb, activeMixColor, activeRatio);
+  return {
+    hover: rgbToHex(hoverRgb),
+    active: rgbToHex(activeRgb)
+  };
+}
+
+export {
+  hexToHSLString,
+  hexToRGBStr,
+  generateStateColors
+};

package/dist/{chunk-2TMOS3DN.js → chunk-RQ4UE7ZB.js}

@@ -1,10 +1,10 @@
 import {
   regenerateConditionIds
-} from "./chunk-SIG4WTEF.js";
+} from "./chunk-X6R6AH7G.js";
 import {
   cuid,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-73OREOHT.js";
 import {
   isArray,
   isEmptyString,

package/dist/{chunk-G73OLXRF.js → chunk-SR6B3UAJ.js}

@@ -1,7 +1,7 @@
 import {
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-XMAPBUWT.js";
+} from "./chunk-FZFHBCB6.js";
 import {
   isUndefined
 } from "./chunk-GFH3VWOC.js";

package/dist/{chunk-SIG4WTEF.js → chunk-X6R6AH7G.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-YYIGUZNZ.js";
 import {
   cuid
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-73OREOHT.js";
 import {
   evaluateAttributeCondition
 } from "./chunk-KYDXF7SU.js";

package/dist/color.cjs

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/color.ts
 var color_exports = {};
 __export(color_exports, {
-  generateAutoStateColors: () => generateAutoStateColors,
   generateStateColors: () => generateStateColors,
   hexToHSLString: () => hexToHSLString,
   hexToRGBStr: () => hexToRGBStr
@@ -60,54 +59,110 @@ var hexToRGBStr = (hex) => {
     return "0, 0, 0";
   }
 };
-function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activeRatio = 0.24) {
-  const isBaseLight = (0, import_chroma_js.default)(baseColor).luminance() > 0.8;
-  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = import_chroma_js.default.mix(baseColor, "#fff", hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#fff", activeRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
-  } else {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+function hexToRgb(hex) {
+  if (!hex)
+    return [0, 0, 0];
+  if (hex.match(/^#[0-9a-f]{6}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 3), 16),
+      Number.parseInt(hex.substring(3, 5), 16),
+      Number.parseInt(hex.substring(5, 7), 16)
+    ];
   }
-  return { hover, active };
+  if (hex.match(/^#[0-9a-f]{3}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 2).repeat(2), 16),
+      Number.parseInt(hex.substring(2, 3).repeat(2), 16),
+      Number.parseInt(hex.substring(3, 4).repeat(2), 16)
+    ];
+  }
+  return [0, 0, 0];
+}
+function rgbToHex([r, g, b]) {
+  const rHex = r.toString(16).padStart(2, "0");
+  const gHex = g.toString(16).padStart(2, "0");
+  const bHex = b.toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+}
+function rgbToHsl([r, g, b]) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  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 rNorm:
+        h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0);
+        break;
+      case gNorm:
+        h = (bNorm - rNorm) / d + 2;
+        break;
+      default:
+        h = (rNorm - gNorm) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l];
+}
+function getLabLuminance([r, g, b]) {
+  function linearize(channel) {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  }
+  const y = 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+  function yToLabL(yVal) {
+    return yVal <= 216 / 24389 ? yVal * (24389 / 27) : yVal ** (1 / 3) * 116 - 16;
+  }
+  return Math.round(yToLabL(y) * 10) / 1e3;
+}
+function invertColor([r, g, b]) {
+  return [Math.round(255 - r), Math.round(255 - g), Math.round(255 - b)];
+}
+function mixRgb(color1, color2, ratio) {
+  return [
+    Math.max(0, Math.min(255, Math.round(color1[0] + (color2[0] - color1[0]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[1] + (color2[1] - color1[1]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[2] + (color2[2] - color1[2]) * ratio)))
+  ];
+}
+function calculateMixRatio(foreground, background) {
+  const fgLuminance = getLabLuminance(foreground);
+  const bgLuminance = getLabLuminance(background);
+  const minRatio = 0.05;
+  const baseRatio = (1 - (bgLuminance - fgLuminance)) / 2 * (0.18 - minRatio) + minRatio;
+  const luminanceSimilarity = 1 - Math.abs(bgLuminance - fgLuminance);
+  const adjustment = ((1 - baseRatio) * luminanceSimilarity) ** 4;
+  const finalRatio = baseRatio + adjustment;
+  return Math.round(finalRatio * 1e3) / 1e3;
 }
-function generateStateColors(baseColor, brandColor, options = {}) {
-  const {
-    brandHoverRatio = 0.175,
-    brandActiveRatio = 0.14,
-    lightHoverRatio = 0.11,
-    lightActiveRatio = 0.225
-  } = options;
-  const baseLuminance = (0, import_chroma_js.default)(baseColor).luminance();
-  const isBaseLight = baseLuminance > 0.8;
-  const isBaseDark = baseLuminance < 0.2;
-  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
-  } else if (isBaseDark) {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+function generateStateColors(backgroundColor, foregroundColor) {
+  const bgRgb = hexToRgb(backgroundColor);
+  const fgRgb = hexToRgb(foregroundColor);
+  const bgHsl = rgbToHsl(bgRgb);
+  const hoverRatio = calculateMixRatio(fgRgb, bgRgb);
+  let activeRatio = hoverRatio * 2;
+  let activeMixColor = fgRgb;
+  const midToneThreshold = 0.2;
+  if (bgHsl[2] > midToneThreshold && bgHsl[2] < 1 - midToneThreshold) {
+    activeMixColor = invertColor(fgRgb);
+    activeRatio = calculateMixRatio(activeMixColor, bgRgb);
   }
-  return { hover, active };
+  const hoverRgb = mixRgb(bgRgb, fgRgb, hoverRatio);
+  const activeRgb = mixRgb(bgRgb, activeMixColor, activeRatio);
+  return {
+    hover: rgbToHex(hoverRgb),
+    active: rgbToHex(activeRgb)
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  generateAutoStateColors,
   generateStateColors,
   hexToHSLString,
   hexToRGBStr

package/dist/color.d.cts

@@ -11,60 +11,42 @@ declare function hexToHSLString(hexColor: string): string;
  */
 declare const hexToRGBStr: (hex: string) => string;
 /**
- * Automatically generate hover and active colors based on baseColor and brandColor.
- * If baseColor is similar to brandColor, hover is mixed with white (LAB), active is darkened.
- * If baseColor is light (e.g., white), hover/active are mixed with brandColor (LAB).
- * Otherwise, hover is mixed with brandColor (LAB), active is darkened.
- * @param baseColor - The base color (e.g., button or content background)
- * @param brandColor - The brand color
- * @param hoverRatio - Mix ratio for hover state (default 0.15)
- * @param activeDarken - Darken factor for active state (default 0.12)
- * @returns An object with hover and active color hex strings
- * @deprecated Use generateStateColors instead
- */
-declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
-    hover: string;
-    active: string;
-};
-/**
- * Configuration options for state color generation
- */
-interface StateColorOptions {
-    /** Mix ratio for hover state when base is brand color (default 0.175) */
-    brandHoverRatio?: number;
-    /** Mix ratio for active/click state when base is brand color (default 0.14) */
-    brandActiveRatio?: number;
-    /** Mix ratio for hover state when base is light color (default 0.11) */
-    lightHoverRatio?: number;
-    /** Mix ratio for active/click state when base is light color (default 0.225) */
-    lightActiveRatio?: number;
-}
-/**
- * Generate hover and active state colors based on base color and brand color.
+ * Generate hover and active state colors based on background and foreground colors.
  *
- * Logic:
- * - Brand color base: hover = tint (mix with white), active = shade (mix with black)
- * - Light color base (e.g., white): hover/active = mix with brand color
- * - Dark color base: hover = tint (mix with white), active = shade (mix with black)
+ * Algorithm:
+ * 1. Calculate dynamic mix ratio based on Lab luminance difference
+ * 2. Hover = background mixed with foreground at calculated ratio
+ * 3. Active = background mixed with foreground (or its inverse) at 2x ratio
+ * 4. For mid-tone backgrounds (lightness 0.2-0.8), active uses inverted foreground
+ *    to create more distinct visual feedback
  *
- * @param baseColor - The base background color
- * @param brandColor - The brand/primary color
- * @param options - Optional configuration for mix ratios
+ * @param backgroundColor - The base background color (hex)
+ * @param foregroundColor - The foreground/brand color to mix with (hex)
  * @returns Object containing hover and active color hex strings
  *
  * @example
- * // Brand color button
- * generateStateColors('#2563eb', '#2563eb');
- * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ * // Brand color button (green on green)
+ * generateStateColors('#65a30d', '#f8fafc');
+ * // Returns: { hover: '#86b643', active: '#5c940c' }
+ *
+ * @example
+ * // White background with blue brand
+ * generateStateColors('#ffffff', '#155eef');
+ * // Returns: { hover: '#e6eefd', active: '#ccdcfc' }
+ *
+ * @example
+ * // Pink background with green brand
+ * generateStateColors('#fecaca', '#65a30d');
+ * // Returns: { hover: '#cfbe90', active: '#a0b256' }
  *
  * @example
- * // White background content
- * generateStateColors('#ffffff', '#2563eb');
- * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ * // Green background with green brand (uses inverse for active)
+ * generateStateColors('#4ade80', '#65a30d');
+ * // Returns: { hover: '#55c753', active: '#61b8a1' }
  */
-declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
+declare function generateStateColors(backgroundColor: string, foregroundColor: string): {
     hover: string;
     active: string;
 };
 
-export { type StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr };
+export { generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.d.ts

@@ -11,60 +11,42 @@ declare function hexToHSLString(hexColor: string): string;
  */
 declare const hexToRGBStr: (hex: string) => string;
 /**
- * Automatically generate hover and active colors based on baseColor and brandColor.
- * If baseColor is similar to brandColor, hover is mixed with white (LAB), active is darkened.
- * If baseColor is light (e.g., white), hover/active are mixed with brandColor (LAB).
- * Otherwise, hover is mixed with brandColor (LAB), active is darkened.
- * @param baseColor - The base color (e.g., button or content background)
- * @param brandColor - The brand color
- * @param hoverRatio - Mix ratio for hover state (default 0.15)
- * @param activeDarken - Darken factor for active state (default 0.12)
- * @returns An object with hover and active color hex strings
- * @deprecated Use generateStateColors instead
- */
-declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
-    hover: string;
-    active: string;
-};
-/**
- * Configuration options for state color generation
- */
-interface StateColorOptions {
-    /** Mix ratio for hover state when base is brand color (default 0.175) */
-    brandHoverRatio?: number;
-    /** Mix ratio for active/click state when base is brand color (default 0.14) */
-    brandActiveRatio?: number;
-    /** Mix ratio for hover state when base is light color (default 0.11) */
-    lightHoverRatio?: number;
-    /** Mix ratio for active/click state when base is light color (default 0.225) */
-    lightActiveRatio?: number;
-}
-/**
- * Generate hover and active state colors based on base color and brand color.
+ * Generate hover and active state colors based on background and foreground colors.
  *
- * Logic:
- * - Brand color base: hover = tint (mix with white), active = shade (mix with black)
- * - Light color base (e.g., white): hover/active = mix with brand color
- * - Dark color base: hover = tint (mix with white), active = shade (mix with black)
+ * Algorithm:
+ * 1. Calculate dynamic mix ratio based on Lab luminance difference
+ * 2. Hover = background mixed with foreground at calculated ratio
+ * 3. Active = background mixed with foreground (or its inverse) at 2x ratio
+ * 4. For mid-tone backgrounds (lightness 0.2-0.8), active uses inverted foreground
+ *    to create more distinct visual feedback
  *
- * @param baseColor - The base background color
- * @param brandColor - The brand/primary color
- * @param options - Optional configuration for mix ratios
+ * @param backgroundColor - The base background color (hex)
+ * @param foregroundColor - The foreground/brand color to mix with (hex)
  * @returns Object containing hover and active color hex strings
  *
  * @example
- * // Brand color button
- * generateStateColors('#2563eb', '#2563eb');
- * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ * // Brand color button (green on green)
+ * generateStateColors('#65a30d', '#f8fafc');
+ * // Returns: { hover: '#86b643', active: '#5c940c' }
+ *
+ * @example
+ * // White background with blue brand
+ * generateStateColors('#ffffff', '#155eef');
+ * // Returns: { hover: '#e6eefd', active: '#ccdcfc' }
+ *
+ * @example
+ * // Pink background with green brand
+ * generateStateColors('#fecaca', '#65a30d');
+ * // Returns: { hover: '#cfbe90', active: '#a0b256' }
  *
  * @example
- * // White background content
- * generateStateColors('#ffffff', '#2563eb');
- * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ * // Green background with green brand (uses inverse for active)
+ * generateStateColors('#4ade80', '#65a30d');
+ * // Returns: { hover: '#55c753', active: '#61b8a1' }
  */
-declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
+declare function generateStateColors(backgroundColor: string, foregroundColor: string): {
     hover: string;
     active: string;
 };
 
-export { type StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr };
+export { generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.js

@@ -1,12 +1,10 @@
 import {
-  generateAutoStateColors,
   generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-XMAPBUWT.js";
+} from "./chunk-FZFHBCB6.js";
 import "./chunk-XEO3YXBM.js";
 export {
-  generateAutoStateColors,
   generateStateColors,
   hexToHSLString,
   hexToRGBStr

package/dist/conditions/condition.cjs

@@ -466,17 +466,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);

package/dist/conditions/condition.js

@@ -8,10 +8,10 @@ import {
   isConditionsActived,
   isEqual,
   regenerateConditionIds
-} from "../chunk-SIG4WTEF.js";
+} from "../chunk-X6R6AH7G.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-73OREOHT.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

package/dist/conditions/index.cjs

@@ -511,17 +511,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);

package/dist/conditions/index.js

@@ -9,13 +9,13 @@ import {
   isConditionsActived,
   isEqual,
   regenerateConditionIds
-} from "../chunk-SIG4WTEF.js";
+} from "../chunk-X6R6AH7G.js";
 import {
   evaluateUrlCondition,
   isMatchUrlPattern
 } from "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-73OREOHT.js";
 import {
   evaluateAttributeCondition
 } from "../chunk-KYDXF7SU.js";

package/dist/content-helper.cjs

@@ -82,17 +82,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);

package/dist/content-helper.js

@@ -14,12 +14,12 @@ import {
   isQuestionElement,
   isRestrictedType,
   processQuestionElements
-} from "./chunk-2TMOS3DN.js";
+} from "./chunk-RQ4UE7ZB.js";
 import "./chunk-7ODE2AIC.js";
-import "./chunk-SIG4WTEF.js";
+import "./chunk-X6R6AH7G.js";
 import "./chunk-YYIGUZNZ.js";
 import "./chunk-PAESAL23.js";
-import "./chunk-3KG2HTZ3.js";
+import "./chunk-73OREOHT.js";
 import "./chunk-KYDXF7SU.js";
 import "./chunk-JQWKLXW6.js";
 import "./chunk-GFH3VWOC.js";

package/dist/convert-settings.js

@@ -2,8 +2,8 @@ import {
   convertSettings,
   convertToCssVars,
   mergeThemeDefaultSettings
-} from "./chunk-G73OLXRF.js";
-import "./chunk-XMAPBUWT.js";
+} from "./chunk-SR6B3UAJ.js";
+import "./chunk-FZFHBCB6.js";
 import "./chunk-GFH3VWOC.js";
 import "./chunk-XEO3YXBM.js";
 export {

package/dist/helper.cjs

@@ -27,7 +27,6 @@ __export(helper_exports, {
   formatDate: () => formatDate,
   getRandomColor: () => getRandomColor,
   hexToRgb: () => hexToRgb,
-  isDark: () => isDark,
   uuidV4: () => uuidV4
 });
 module.exports = __toCommonJS(helper_exports);
@@ -63,17 +62,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);
@@ -106,6 +94,5 @@ var getRandomColor = () => {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
   uuidV4
 });

package/dist/helper.d.cts

@@ -10,8 +10,7 @@ declare function hexToRgb(hex: string): {
     g: number;
     b: number;
 } | null;
-declare const isDark: (hex: string) => boolean | null;
 declare const evalCode: (code: string) => any;
 declare const getRandomColor: () => string;
 
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 };
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, uuidV4 };

package/dist/helper.d.ts

@@ -10,8 +10,7 @@ declare function hexToRgb(hex: string): {
     g: number;
     b: number;
 } | null;
-declare const isDark: (hex: string) => boolean | null;
 declare const evalCode: (code: string) => any;
 declare const getRandomColor: () => string;
 
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 };
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, uuidV4 };

package/dist/helper.js

@@ -6,9 +6,8 @@ import {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-73OREOHT.js";
 import "./chunk-XEO3YXBM.js";
 export {
   absoluteUrl,
@@ -18,6 +17,5 @@ export {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
   uuidV4
 };

package/dist/index.cjs

@@ -73,7 +73,6 @@ __export(src_exports, {
   filterConditionsByType: () => filterConditionsByType,
   filterNullAttributes: () => filterNullAttributes,
   formatDate: () => formatDate,
-  generateAutoStateColors: () => generateAutoStateColors,
   generateStateColors: () => generateStateColors,
   generateUniqueCopyName: () => generateUniqueCopyName,
   getAttributeType: () => getAttributeType,
@@ -97,12 +96,11 @@ __export(src_exports, {
   hasMissingRequiredData: () => hasMissingRequiredData,
   hexToHSLString: () => hexToHSLString,
   hexToRGBStr: () => hexToRGBStr,
-  hexToRgb: () => hexToRgb,
+  hexToRgb: () => hexToRgb2,
   isArray: () => isArray,
   isBoolean: () => isBoolean,
   isClickableElement: () => isClickableElement,
   isConditionsActived: () => isConditionsActived,
-  isDark: () => isDark,
   isDate: () => isDate,
   isDocument: () => isDocument,
   isEmptyObject: () => isEmptyObject,
@@ -177,50 +175,107 @@ var hexToRGBStr = (hex) => {
     return "0, 0, 0";
   }
 };
-function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activeRatio = 0.24) {
-  const isBaseLight = (0, import_chroma_js.default)(baseColor).luminance() > 0.8;
-  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = import_chroma_js.default.mix(baseColor, "#fff", hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#fff", activeRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
-  } else {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+function hexToRgb(hex) {
+  if (!hex)
+    return [0, 0, 0];
+  if (hex.match(/^#[0-9a-f]{6}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 3), 16),
+      Number.parseInt(hex.substring(3, 5), 16),
+      Number.parseInt(hex.substring(5, 7), 16)
+    ];
+  }
+  if (hex.match(/^#[0-9a-f]{3}$/i)) {
+    return [
+      Number.parseInt(hex.substring(1, 2).repeat(2), 16),
+      Number.parseInt(hex.substring(2, 3).repeat(2), 16),
+      Number.parseInt(hex.substring(3, 4).repeat(2), 16)
+    ];
+  }
+  return [0, 0, 0];
+}
+function rgbToHex([r, g, b]) {
+  const rHex = r.toString(16).padStart(2, "0");
+  const gHex = g.toString(16).padStart(2, "0");
+  const bHex = b.toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+}
+function rgbToHsl([r, g, b]) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  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 rNorm:
+        h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0);
+        break;
+      case gNorm:
+        h = (bNorm - rNorm) / d + 2;
+        break;
+      default:
+        h = (rNorm - gNorm) / d + 4;
+        break;
+    }
+    h /= 6;
   }
-  return { hover, active };
+  return [h, s, l];
 }
-function generateStateColors(baseColor, brandColor, options = {}) {
-  const {
-    brandHoverRatio = 0.175,
-    brandActiveRatio = 0.14,
-    lightHoverRatio = 0.11,
-    lightActiveRatio = 0.225
-  } = options;
-  const baseLuminance = (0, import_chroma_js.default)(baseColor).luminance();
-  const isBaseLight = baseLuminance > 0.8;
-  const isBaseDark = baseLuminance < 0.2;
-  const isBaseBrand = import_chroma_js.default.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = import_chroma_js.default.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
-  } else if (isBaseDark) {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else {
-    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
+function getLabLuminance([r, g, b]) {
+  function linearize(channel) {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
   }
-  return { hover, active };
+  const y = 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+  function yToLabL(yVal) {
+    return yVal <= 216 / 24389 ? yVal * (24389 / 27) : yVal ** (1 / 3) * 116 - 16;
+  }
+  return Math.round(yToLabL(y) * 10) / 1e3;
+}
+function invertColor([r, g, b]) {
+  return [Math.round(255 - r), Math.round(255 - g), Math.round(255 - b)];
+}
+function mixRgb(color1, color2, ratio) {
+  return [
+    Math.max(0, Math.min(255, Math.round(color1[0] + (color2[0] - color1[0]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[1] + (color2[1] - color1[1]) * ratio))),
+    Math.max(0, Math.min(255, Math.round(color1[2] + (color2[2] - color1[2]) * ratio)))
+  ];
+}
+function calculateMixRatio(foreground, background) {
+  const fgLuminance = getLabLuminance(foreground);
+  const bgLuminance = getLabLuminance(background);
+  const minRatio = 0.05;
+  const baseRatio = (1 - (bgLuminance - fgLuminance)) / 2 * (0.18 - minRatio) + minRatio;
+  const luminanceSimilarity = 1 - Math.abs(bgLuminance - fgLuminance);
+  const adjustment = ((1 - baseRatio) * luminanceSimilarity) ** 4;
+  const finalRatio = baseRatio + adjustment;
+  return Math.round(finalRatio * 1e3) / 1e3;
+}
+function generateStateColors(backgroundColor, foregroundColor) {
+  const bgRgb = hexToRgb(backgroundColor);
+  const fgRgb = hexToRgb(foregroundColor);
+  const bgHsl = rgbToHsl(bgRgb);
+  const hoverRatio = calculateMixRatio(fgRgb, bgRgb);
+  let activeRatio = hoverRatio * 2;
+  let activeMixColor = fgRgb;
+  const midToneThreshold = 0.2;
+  if (bgHsl[2] > midToneThreshold && bgHsl[2] < 1 - midToneThreshold) {
+    activeMixColor = invertColor(fgRgb);
+    activeRatio = calculateMixRatio(activeMixColor, bgRgb);
+  }
+  const hoverRgb = mixRgb(bgRgb, fgRgb, hoverRatio);
+  const activeRgb = mixRgb(bgRgb, activeMixColor, activeRatio);
+  return {
+    hover: rgbToHex(hoverRgb),
+    active: rgbToHex(activeRgb)
+  };
 }
 
 // src/convert-settings.ts
@@ -1250,7 +1305,7 @@ function absoluteUrl(path) {
 var uuidV4 = () => {
   return (0, import_uuid.v4)();
 };
-function hexToRgb(hex) {
+function hexToRgb2(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
     r: Number.parseInt(result[1], 16),
@@ -1258,17 +1313,6 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) {
-    return null;
-  }
-  const { r, g, b } = rgb;
-  if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
-    return true;
-  }
-  return false;
-};
 var evalCode = (code) => {
   try {
     return eval(code);
@@ -1979,7 +2023,6 @@ var duplicateStep = (step) => {
   filterConditionsByType,
   filterNullAttributes,
   formatDate,
-  generateAutoStateColors,
   generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
@@ -2008,7 +2051,6 @@ var duplicateStep = (step) => {
   isBoolean,
   isClickableElement,
   isConditionsActived,
-  isDark,
   isDate,
   isDocument,
   isEmptyObject,

package/dist/index.d.cts

@@ -7,8 +7,8 @@ export { isUrl } from './is-url.cjs';
 export { AbortController, ArrayProto, XMLHttpRequest, assignableWindow, document, fetch, location, nativeForEach, nativeIndexOf, navigator, userAgent, window } from './globals.cjs';
 export { buildConfig, defaultContentConfig, extractLinkUrl, isPublishedAtLeastOneEnvironment, isPublishedInAllEnvironments, replaceUserAttr } from './content.cjs';
 export { deepClone, parseUrlParams, wait } from './utils.cjs';
-export { StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.cjs';
+export { generateStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, uuidV4 } from './helper.cjs';
 export { allConditionsHaveIds, assignConditionIds, conditionsIsSame, evaluateRule, evaluateRulesConditions, filterConditionsByType, isConditionsActived, regenerateConditionIds } from './conditions/condition.cjs';
 export { evaluateUrlCondition, isMatchUrlPattern } from './conditions/url.cjs';
 export { convertTimeConditionLegacyToV2, evaluateTimeCondition, isTimeConditionDataLegacy, isTimeConditionDataV2, normalizeTimeConditionData } from './conditions/time.cjs';

package/dist/index.d.ts

@@ -7,8 +7,8 @@ export { isUrl } from './is-url.js';
 export { AbortController, ArrayProto, XMLHttpRequest, assignableWindow, document, fetch, location, nativeForEach, nativeIndexOf, navigator, userAgent, window } from './globals.js';
 export { buildConfig, defaultContentConfig, extractLinkUrl, isPublishedAtLeastOneEnvironment, isPublishedInAllEnvironments, replaceUserAttr } from './content.js';
 export { deepClone, parseUrlParams, wait } from './utils.js';
-export { StateColorOptions, generateAutoStateColors, generateStateColors, hexToHSLString, hexToRGBStr } from './color.js';
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.js';
+export { generateStateColors, hexToHSLString, hexToRGBStr } from './color.js';
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, uuidV4 } from './helper.js';
 export { allConditionsHaveIds, assignConditionIds, conditionsIsSame, evaluateRule, evaluateRulesConditions, filterConditionsByType, isConditionsActived, regenerateConditionIds } from './conditions/condition.js';
 export { evaluateUrlCondition, isMatchUrlPattern } from './conditions/url.js';
 export { convertTimeConditionLegacyToV2, evaluateTimeCondition, isTimeConditionDataLegacy, isTimeConditionDataV2, normalizeTimeConditionData } from './conditions/time.js';

package/dist/index.js

@@ -38,7 +38,7 @@ import {
   isQuestionElement,
   isRestrictedType,
   processQuestionElements
-} from "./chunk-2TMOS3DN.js";
+} from "./chunk-RQ4UE7ZB.js";
 import "./chunk-7ODE2AIC.js";
 import {
   allConditionsHaveIds,
@@ -50,7 +50,7 @@ import {
   isConditionsActived,
   isEqual,
   regenerateConditionIds
-} from "./chunk-SIG4WTEF.js";
+} from "./chunk-X6R6AH7G.js";
 import {
   evaluateUrlCondition,
   isMatchUrlPattern
@@ -64,9 +64,8 @@ import {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-73OREOHT.js";
 import {
   evaluateAttributeCondition
 } from "./chunk-KYDXF7SU.js";
@@ -82,13 +81,12 @@ import {
   convertSettings,
   convertToCssVars,
   mergeThemeDefaultSettings
-} from "./chunk-G73OLXRF.js";
+} from "./chunk-SR6B3UAJ.js";
 import {
-  generateAutoStateColors,
   generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-XMAPBUWT.js";
+} from "./chunk-FZFHBCB6.js";
 import {
   getCodeError,
   getContentError,
@@ -186,7 +184,6 @@ export {
   filterConditionsByType,
   filterNullAttributes,
   formatDate,
-  generateAutoStateColors,
   generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
@@ -215,7 +212,6 @@ export {
   isBoolean,
   isClickableElement,
   isConditionsActived,
-  isDark,
   isDate,
   isDocument,
   isEmptyObject,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usertour/helpers",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "type": "module",
   "description": "Utility functions and helpers shared across the UserTour project",
   "homepage": "https://www.usertour.io",

package/dist/chunk-XMAPBUWT.js

@@ -1,77 +0,0 @@
-// src/color.ts
-import chroma from "chroma-js";
-function hexToHSLString(hexColor) {
-  try {
-    const color = chroma(hexColor);
-    const [h, s, l] = color.hsl();
-    const hDeg = Math.round(h || 0);
-    const sPct = Math.round(s * 100);
-    const lPct = Math.round(l * 100);
-    return `${hDeg} ${sPct}% ${lPct}%`;
-  } catch (error) {
-    console.warn(`Failed to convert ${hexColor} to HSL string:`, error);
-    return "0 0% 0%";
-  }
-}
-var hexToRGBStr = (hex) => {
-  try {
-    const color = chroma(hex);
-    const [r, g, b] = color.rgb();
-    return `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
-  } catch (error) {
-    console.warn(`Failed to convert ${hex} to RGB string:`, error);
-    return "0, 0, 0";
-  }
-};
-function generateAutoStateColors(baseColor, brandColor, hoverRatio = 0.12, activeRatio = 0.24) {
-  const isBaseLight = chroma(baseColor).luminance() > 0.8;
-  const isBaseBrand = chroma.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = chroma.mix(baseColor, "#fff", hoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, "#fff", activeRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = chroma.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, brandColor, activeRatio, "rgb").hex();
-  } else {
-    hover = chroma.mix(baseColor, brandColor, hoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, brandColor, activeRatio, "rgb").hex();
-  }
-  return { hover, active };
-}
-function generateStateColors(baseColor, brandColor, options = {}) {
-  const {
-    brandHoverRatio = 0.175,
-    brandActiveRatio = 0.14,
-    lightHoverRatio = 0.11,
-    lightActiveRatio = 0.225
-  } = options;
-  const baseLuminance = chroma(baseColor).luminance();
-  const isBaseLight = baseLuminance > 0.8;
-  const isBaseDark = baseLuminance < 0.2;
-  const isBaseBrand = chroma.distance(baseColor, brandColor) < 10;
-  let hover;
-  let active;
-  if (isBaseBrand) {
-    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else if (isBaseLight) {
-    hover = chroma.mix(baseColor, brandColor, lightHoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, brandColor, lightActiveRatio, "rgb").hex();
-  } else if (isBaseDark) {
-    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  } else {
-    hover = chroma.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
-    active = chroma.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
-  }
-  return { hover, active };
-}
-
-export {
-  hexToHSLString,
-  hexToRGBStr,
-  generateAutoStateColors,
-  generateStateColors
-};