@usertour/helpers 0.0.53 → 0.0.55

package/dist/__tests__/condition.test.cjs

@@ -451,13 +451,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;

package/dist/__tests__/condition.test.js

@@ -2,10 +2,10 @@ import {
   evaluateRulesConditions,
   filterConditionsByType,
   isConditionsActived
-} from "../chunk-SIG4WTEF.js";
+} from "../chunk-5BEUHZSY.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-7X2CUDBX.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

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

@@ -61,13 +61,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;

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

@@ -14,12 +14,12 @@ import {
   isQuestionElement,
   isRestrictedType,
   processQuestionElements
-} from "../chunk-2TMOS3DN.js";
+} from "../chunk-KARDMYE2.js";
 import "../chunk-7ODE2AIC.js";
-import "../chunk-SIG4WTEF.js";
+import "../chunk-5BEUHZSY.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-7X2CUDBX.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

package/dist/{chunk-SIG4WTEF.js → chunk-5BEUHZSY.js}

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

package/dist/{chunk-3KG2HTZ3.js → chunk-7X2CUDBX.js}

@@ -31,13 +31,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;
@@ -73,7 +73,7 @@ export {
   absoluteUrl,
   uuidV4,
   hexToRgb,
-  isDark,
+  isLight,
   evalCode,
   getRandomColor
 };

package/dist/chunk-BKX55CAI.js

@@ -0,0 +1,59 @@
+// 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 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,
+  generateStateColors
+};

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

@@ -1,10 +1,10 @@
 import {
   regenerateConditionIds
-} from "./chunk-SIG4WTEF.js";
+} from "./chunk-5BEUHZSY.js";
 import {
   cuid,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-7X2CUDBX.js";
 import {
   isArray,
   isEmptyString,

package/dist/{chunk-OBKNA55U.js → chunk-UMC3BUA7.js}

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

package/dist/color.cjs

@@ -30,7 +30,7 @@ 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
 });
@@ -59,26 +59,37 @@ 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;
+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, "#fff", hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#fff", activeRatio, "rgb").hex();
+    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, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+    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, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
   }
   return { hover, active };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
 });

package/dist/color.d.cts

@@ -11,19 +11,44 @@ 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
+ * Configuration options for state color generation
  */
-declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
+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.
+ *
+ * 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)
+ *
+ * @param baseColor - The base background color
+ * @param brandColor - The brand/primary color
+ * @param options - Optional configuration for mix ratios
+ * @returns Object containing hover and active color hex strings
+ *
+ * @example
+ * // Brand color button
+ * generateStateColors('#2563eb', '#2563eb');
+ * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ *
+ * @example
+ * // White background content
+ * generateStateColors('#ffffff', '#2563eb');
+ * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ */
+declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
     hover: string;
     active: string;
 };
 
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr };
+export { type StateColorOptions, generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.d.ts

@@ -11,19 +11,44 @@ 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
+ * Configuration options for state color generation
  */
-declare function generateAutoStateColors(baseColor: string, brandColor: string, hoverRatio?: number, activeRatio?: number): {
+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.
+ *
+ * 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)
+ *
+ * @param baseColor - The base background color
+ * @param brandColor - The brand/primary color
+ * @param options - Optional configuration for mix ratios
+ * @returns Object containing hover and active color hex strings
+ *
+ * @example
+ * // Brand color button
+ * generateStateColors('#2563eb', '#2563eb');
+ * // Returns: { hover: '#4b7eee', active: '#2055c9' }
+ *
+ * @example
+ * // White background content
+ * generateStateColors('#ffffff', '#2563eb');
+ * // Returns: { hover: '#e7eefd', active: '#cedcfb' }
+ */
+declare function generateStateColors(baseColor: string, brandColor: string, options?: StateColorOptions): {
     hover: string;
     active: string;
 };
 
-export { generateAutoStateColors, hexToHSLString, hexToRGBStr };
+export { type StateColorOptions, generateStateColors, hexToHSLString, hexToRGBStr };

package/dist/color.js

@@ -1,11 +1,11 @@
 import {
-  generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-VT24VOAZ.js";
+} from "./chunk-BKX55CAI.js";
 import "./chunk-XEO3YXBM.js";
 export {
-  generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
 };

package/dist/conditions/condition.cjs

@@ -466,13 +466,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;

package/dist/conditions/condition.js

@@ -8,10 +8,10 @@ import {
   isConditionsActived,
   isEqual,
   regenerateConditionIds
-} from "../chunk-SIG4WTEF.js";
+} from "../chunk-5BEUHZSY.js";
 import "../chunk-YYIGUZNZ.js";
 import "../chunk-PAESAL23.js";
-import "../chunk-3KG2HTZ3.js";
+import "../chunk-7X2CUDBX.js";
 import "../chunk-KYDXF7SU.js";
 import "../chunk-JQWKLXW6.js";
 import "../chunk-GFH3VWOC.js";

package/dist/conditions/index.cjs

@@ -511,13 +511,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;

package/dist/conditions/index.js

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

package/dist/content-helper.cjs

@@ -82,13 +82,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;

package/dist/content-helper.js

@@ -14,12 +14,12 @@ import {
   isQuestionElement,
   isRestrictedType,
   processQuestionElements
-} from "./chunk-2TMOS3DN.js";
+} from "./chunk-KARDMYE2.js";
 import "./chunk-7ODE2AIC.js";
-import "./chunk-SIG4WTEF.js";
+import "./chunk-5BEUHZSY.js";
 import "./chunk-YYIGUZNZ.js";
 import "./chunk-PAESAL23.js";
-import "./chunk-3KG2HTZ3.js";
+import "./chunk-7X2CUDBX.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-OBKNA55U.js";
-import "./chunk-VT24VOAZ.js";
+} from "./chunk-UMC3BUA7.js";
+import "./chunk-BKX55CAI.js";
 import "./chunk-GFH3VWOC.js";
 import "./chunk-XEO3YXBM.js";
 export {

package/dist/helper.cjs

@@ -27,7 +27,7 @@ __export(helper_exports, {
   formatDate: () => formatDate,
   getRandomColor: () => getRandomColor,
   hexToRgb: () => hexToRgb,
-  isDark: () => isDark,
+  isLight: () => isLight,
   uuidV4: () => uuidV4
 });
 module.exports = __toCommonJS(helper_exports);
@@ -63,13 +63,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;
@@ -106,6 +106,6 @@ var getRandomColor = () => {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
+  isLight,
   uuidV4
 });

package/dist/helper.d.cts

@@ -10,8 +10,14 @@ declare function hexToRgb(hex: string): {
     g: number;
     b: number;
 } | null;
-declare const isDark: (hex: string) => boolean | null;
+/**
+ * Check if a color is light (needs dark text).
+ * Only very light colors (close to white) return true.
+ * @param hex - Hex color string
+ * @returns true if the color is very light (luminance > 250), false otherwise
+ */
+declare const isLight: (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, isLight, uuidV4 };

package/dist/helper.d.ts

@@ -10,8 +10,14 @@ declare function hexToRgb(hex: string): {
     g: number;
     b: number;
 } | null;
-declare const isDark: (hex: string) => boolean | null;
+/**
+ * Check if a color is light (needs dark text).
+ * Only very light colors (close to white) return true.
+ * @param hex - Hex color string
+ * @returns true if the color is very light (luminance > 250), false otherwise
+ */
+declare const isLight: (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, isLight, uuidV4 };

package/dist/helper.js

@@ -6,9 +6,9 @@ import {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
+  isLight,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-7X2CUDBX.js";
 import "./chunk-XEO3YXBM.js";
 export {
   absoluteUrl,
@@ -18,6 +18,6 @@ export {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
+  isLight,
   uuidV4
 };

package/dist/index.cjs

@@ -73,7 +73,7 @@ __export(src_exports, {
   filterConditionsByType: () => filterConditionsByType,
   filterNullAttributes: () => filterNullAttributes,
   formatDate: () => formatDate,
-  generateAutoStateColors: () => generateAutoStateColors,
+  generateStateColors: () => generateStateColors,
   generateUniqueCopyName: () => generateUniqueCopyName,
   getAttributeType: () => getAttributeType,
   getAuthToken: () => getAuthToken,
@@ -101,7 +101,6 @@ __export(src_exports, {
   isBoolean: () => isBoolean,
   isClickableElement: () => isClickableElement,
   isConditionsActived: () => isConditionsActived,
-  isDark: () => isDark,
   isDate: () => isDate,
   isDocument: () => isDocument,
   isEmptyObject: () => isEmptyObject,
@@ -110,6 +109,7 @@ __export(src_exports, {
   isFile: () => isFile,
   isFormData: () => isFormData,
   isFunction: () => isFunction,
+  isLight: () => isLight,
   isMatchUrlPattern: () => isMatchUrlPattern,
   isMissingRequiredData: () => isMissingRequiredData,
   isNull: () => isNull,
@@ -176,20 +176,31 @@ 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;
+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, "#fff", hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, "#fff", activeRatio, "rgb").hex();
+    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, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+    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, brandColor, hoverRatio, "rgb").hex();
-    active = import_chroma_js.default.mix(baseColor, brandColor, activeRatio, "rgb").hex();
+    hover = import_chroma_js.default.mix(baseColor, "#ffffff", brandHoverRatio, "rgb").hex();
+    active = import_chroma_js.default.mix(baseColor, "#000000", brandActiveRatio, "rgb").hex();
   }
   return { hover, active };
 }
@@ -1229,13 +1240,13 @@ function hexToRgb(hex) {
     b: Number.parseInt(result[3], 16)
   } : null;
 }
-var isDark = (hex) => {
+var isLight = (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) {
+  if (r * 0.299 + g * 0.587 + b * 0.114 > 250) {
     return true;
   }
   return false;
@@ -1950,7 +1961,7 @@ var duplicateStep = (step) => {
   filterConditionsByType,
   filterNullAttributes,
   formatDate,
-  generateAutoStateColors,
+  generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
   getAuthToken,
@@ -1978,7 +1989,6 @@ var duplicateStep = (step) => {
   isBoolean,
   isClickableElement,
   isConditionsActived,
-  isDark,
   isDate,
   isDocument,
   isEmptyObject,
@@ -1987,6 +1997,7 @@ var duplicateStep = (step) => {
   isFile,
   isFormData,
   isFunction,
+  isLight,
   isMatchUrlPattern,
   isMissingRequiredData,
   isNull,

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 { generateAutoStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.cjs';
+export { StateColorOptions, generateStateColors, hexToHSLString, hexToRGBStr } from './color.cjs';
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isLight, 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 { generateAutoStateColors, hexToHSLString, hexToRGBStr } from './color.js';
-export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isDark, uuidV4 } from './helper.js';
+export { StateColorOptions, generateStateColors, hexToHSLString, hexToRGBStr } from './color.js';
+export { absoluteUrl, cn, cuid, evalCode, formatDate, getRandomColor, hexToRgb, isLight, 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-KARDMYE2.js";
 import "./chunk-7ODE2AIC.js";
 import {
   allConditionsHaveIds,
@@ -50,7 +50,7 @@ import {
   isConditionsActived,
   isEqual,
   regenerateConditionIds
-} from "./chunk-SIG4WTEF.js";
+} from "./chunk-5BEUHZSY.js";
 import {
   evaluateUrlCondition,
   isMatchUrlPattern
@@ -64,9 +64,9 @@ import {
   formatDate,
   getRandomColor,
   hexToRgb,
-  isDark,
+  isLight,
   uuidV4
-} from "./chunk-3KG2HTZ3.js";
+} from "./chunk-7X2CUDBX.js";
 import {
   evaluateAttributeCondition
 } from "./chunk-KYDXF7SU.js";
@@ -82,12 +82,12 @@ import {
   convertSettings,
   convertToCssVars,
   mergeThemeDefaultSettings
-} from "./chunk-OBKNA55U.js";
+} from "./chunk-UMC3BUA7.js";
 import {
-  generateAutoStateColors,
+  generateStateColors,
   hexToHSLString,
   hexToRGBStr
-} from "./chunk-VT24VOAZ.js";
+} from "./chunk-BKX55CAI.js";
 import {
   getCodeError,
   getContentError,
@@ -185,7 +185,7 @@ export {
   filterConditionsByType,
   filterNullAttributes,
   formatDate,
-  generateAutoStateColors,
+  generateStateColors,
   generateUniqueCopyName,
   getAttributeType,
   getAuthToken,
@@ -213,7 +213,6 @@ export {
   isBoolean,
   isClickableElement,
   isConditionsActived,
-  isDark,
   isDate,
   isDocument,
   isEmptyObject,
@@ -222,6 +221,7 @@ export {
   isFile,
   isFormData,
   isFunction,
+  isLight,
   isMatchUrlPattern,
   isMissingRequiredData,
   isNull,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usertour/helpers",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "type": "module",
   "description": "Utility functions and helpers shared across the UserTour project",
   "homepage": "https://www.usertour.io",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@paralleldrive/cuid2": "^2.2.2",
-    "@usertour/types": "^0.0.40",
+    "@usertour/types": "^0.0.42",
     "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",

package/dist/chunk-VT24VOAZ.js

@@ -1,48 +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 };
-}
-
-export {
-  hexToHSLString,
-  hexToRGBStr,
-  generateAutoStateColors
-};