@fakhrirafiki/theme-engine 0.4.3 → 0.4.4

package/dist/index.js

@@ -3870,7 +3870,15 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             'destructive', 'destructive-foreground', 'border', 'input', 'ring',
             'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
             'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
-            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
+            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring',
+            // Semantic accent colors for status and feedback
+            'accent-info', 'accent-info-foreground',
+            'accent-success', 'accent-success-foreground',
+            'accent-warning', 'accent-warning-foreground',
+            'accent-danger', 'accent-danger-foreground',
+            'accent-brand', 'accent-brand-foreground',
+            'accent-feature', 'accent-feature-foreground',
+            'accent-highlight', 'accent-highlight-foreground'
           ],
           typography: ['font-sans', 'font-serif', 'font-mono'],
           layout: ['radius'],
@@ -3878,6 +3886,106 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           spacing: ['letter-spacing', 'spacing']
         };
 
+        // Normalize hex/rgb/hsl() colors into "H S% L%" for hsl(var(--token)) usage.
+        function normalizeColorValueToHslTriplet(value) {
+          if (!value) return value;
+          const trimmed = String(value).trim();
+          if (!trimmed) return value;
+          if (trimmed.startsWith('var(')) return trimmed;
+
+          // Already a triplet: "210 40% 98%"
+          if (/^\\d+(?:\\.\\d+)?\\s+\\d+(?:\\.\\d+)?%\\s+\\d+(?:\\.\\d+)?%$/.test(trimmed)) {
+            return trimmed;
+          }
+
+          function clamp(n, min, max) {
+            return Math.min(max, Math.max(min, n));
+          }
+
+          function 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 diff = max - min;
+            let h = 0;
+            let s = 0;
+            const l = (max + min) / 2;
+
+            if (diff !== 0) {
+              s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+              switch (max) {
+                case r:
+                  h = (g - b) / diff + (g < b ? 6 : 0);
+                  break;
+                case g:
+                  h = (b - r) / diff + 2;
+                  break;
+                case b:
+                  h = (r - g) / diff + 4;
+                  break;
+              }
+              h /= 6;
+            }
+
+            return {
+              h: Math.round(h * 360),
+              s: Math.round(s * 100),
+              l: Math.round(l * 100),
+            };
+          }
+
+          function hexToRgb(hex) {
+            let clean = hex.replace('#', '').trim();
+            if (clean.length === 3) clean = clean.split('').map(function(c) { return c + c; }).join('');
+            if (clean.length === 8) clean = clean.substring(0, 6); // ignore alpha
+            if (clean.length !== 6) return null;
+
+            const r = parseInt(clean.substring(0, 2), 16);
+            const g = parseInt(clean.substring(2, 4), 16);
+            const b = parseInt(clean.substring(4, 6), 16);
+            if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+            return { r: r, g: g, b: b };
+          }
+
+          function toTriplet(hsl) {
+            return String(clamp(hsl.h, 0, 360)) + ' ' + String(clamp(hsl.s, 0, 100)) + '% ' + String(clamp(hsl.l, 0, 100)) + '%';
+          }
+
+          // hsl(...) or raw "H S% L%"
+          if (/^hsl\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/hsl\\(|\\)/gi, '').replace(/[,%]/g, ' ').trim();
+            const parts = cleaned.split(/\\s+/).filter(Boolean);
+            if (parts.length === 3) {
+              const h = parseFloat(parts[0]) || 0;
+              const s = parseFloat(parts[1]) || 0;
+              const l = parseFloat(parts[2]) || 0;
+              return toTriplet({ h: h, s: s, l: l });
+            }
+          }
+
+          // rgb(...)
+          if (/^rgb\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/rgb\\(|\\)/gi, '').trim();
+            const parts = cleaned.split(',').map(function(p) { return p.trim(); });
+            if (parts.length === 3) {
+              const r = clamp(parseFloat(parts[0]) || 0, 0, 255);
+              const g = clamp(parseFloat(parts[1]) || 0, 0, 255);
+              const b = clamp(parseFloat(parts[2]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          }
+
+          // hex
+          if (trimmed[0] === '#') {
+            const rgb = hexToRgb(trimmed);
+            if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
+          }
+
+          return value;
+        }
+
         // Function to apply all preset properties - with proper clearing and defaults
         function applyPresetProperties(colors) {
           if (!colors) return;
@@ -3909,6 +4017,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           
           // Apply all properties with defaults for missing ones
           let appliedCount = 0;
+          const colorProps = {};
+          CSS_CATEGORIES.colors.forEach(function(prop) { colorProps[prop] = true; });
+          colorProps['shadow-color'] = true;
+
           allProperties.forEach(function(prop) {
             let value = colors[prop];
             
@@ -3918,6 +4030,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             }
             
             if (value) {
+              if (colorProps[prop]) {
+                value = normalizeColorValueToHslTriplet(value);
+              }
+
               const cssVar = '--' + prop;
               // Apply directly like TweakCN does - no conversion, no !important
               root.style.setProperty(cssVar, value);
@@ -3979,6 +4095,138 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: scriptContent }, suppressHydrationWarning: true });
 }
 
+// src/utils/colors.ts
+function parseHSL(hslString) {
+  try {
+    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
+    const parts = cleaned.split(/\s+/).filter(Boolean);
+    if (parts.length !== 3) return null;
+    const h = parseFloat(parts[0]) || 0;
+    const s = parseFloat(parts[1]) || 0;
+    const l = parseFloat(parts[2]) || 0;
+    return {
+      h: Math.max(0, Math.min(360, h)),
+      s: Math.max(0, Math.min(100, s)),
+      l: Math.max(0, Math.min(100, l))
+    };
+  } catch {
+    return null;
+  }
+}
+function parseHex(hexString) {
+  try {
+    let hex = hexString.replace("#", "");
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length !== 6) return null;
+    const r = parseInt(hex.substring(0, 2), 16);
+    const s = parseInt(hex.substring(2, 4), 16);
+    const l = parseInt(hex.substring(4, 6), 16);
+    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
+    return { r, g: s, b: l };
+  } catch {
+    return null;
+  }
+}
+function hslToRgb(hsl) {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+  if (s === 0) {
+    const gray = Math.round(l * 255);
+    return { r: gray, g: gray, b: gray };
+  }
+  const hue2rgb = (p2, q2, t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+    if (t < 1 / 2) return q2;
+    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+    return p2;
+  };
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
+  const g = Math.round(hue2rgb(p, q, h) * 255);
+  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
+  return { r, g, b };
+}
+function rgbToHsl(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (diff !== 0) {
+    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / diff + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function formatHSL(hsl, includeHslWrapper = true) {
+  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
+  return includeHslWrapper ? `hsl(${values})` : values;
+}
+function formatRGB(rgb) {
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+}
+function formatHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
+  let hsl = parseHSL(colorInput);
+  if (!hsl) {
+    const rgb = parseHex(colorInput);
+    if (rgb) {
+      hsl = rgbToHsl(rgb);
+    }
+  }
+  if (!hsl) {
+    return colorInput;
+  }
+  switch (outputFormat) {
+    case "hsl":
+      return formatHSL(hsl, includeFunctionWrapper);
+    case "rgb":
+      return formatRGB(hslToRgb(hsl));
+    case "hex":
+      return formatHex(hslToRgb(hsl));
+    default:
+      return colorInput;
+  }
+}
+function withAlpha(colorInput, alpha) {
+  const hsl = parseHSL(colorInput);
+  if (!hsl) return colorInput;
+  const rgb = hslToRgb(hsl);
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
+}
+
 // src/providers/UnifiedThemeProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var UnifiedThemeContext = (0, import_react2.createContext)(void 0);
@@ -4001,6 +4249,14 @@ function setStoredMode(mode, storageKey) {
   } catch {
   }
 }
+function normalizeColorValueToHslTriplet(value) {
+  const trimmed = value.trim();
+  const parsedHsl = parseHSL(trimmed);
+  if (parsedHsl) return formatHSL(parsedHsl, false);
+  const parsedRgb = parseHex(trimmed);
+  if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
+  return value;
+}
 function ThemeProvider({
   children,
   defaultMode = "system",
@@ -4176,6 +4432,9 @@ function ThemeProvider({
         value = defaultValues[prop];
       }
       if (value) {
+        if (CSS_PROPERTY_CATEGORIES.colors.includes(prop) || prop === "shadow-color") {
+          value = normalizeColorValueToHslTriplet(String(value));
+        }
         const cssVar = `--${prop}`;
         root.style.setProperty(cssVar, value);
         appliedCount++;
@@ -4461,140 +4720,6 @@ ThemeToggle.displayName = "ThemeToggle";
 // src/components/ThemePresetButtons.tsx
 var import_react4 = require("react");
 var import_clsx2 = require("clsx");
-
-// src/utils/colors.ts
-function parseHSL(hslString) {
-  try {
-    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
-    const parts = cleaned.split(/\s+/).filter(Boolean);
-    if (parts.length !== 3) return null;
-    const h = parseFloat(parts[0]) || 0;
-    const s = parseFloat(parts[1]) || 0;
-    const l = parseFloat(parts[2]) || 0;
-    return {
-      h: Math.max(0, Math.min(360, h)),
-      s: Math.max(0, Math.min(100, s)),
-      l: Math.max(0, Math.min(100, l))
-    };
-  } catch {
-    return null;
-  }
-}
-function parseHex(hexString) {
-  try {
-    let hex = hexString.replace("#", "");
-    if (hex.length === 3) {
-      hex = hex.split("").map((char) => char + char).join("");
-    }
-    if (hex.length !== 6) return null;
-    const r = parseInt(hex.substring(0, 2), 16);
-    const s = parseInt(hex.substring(2, 4), 16);
-    const l = parseInt(hex.substring(4, 6), 16);
-    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
-    return { r, g: s, b: l };
-  } catch {
-    return null;
-  }
-}
-function hslToRgb(hsl) {
-  const h = hsl.h / 360;
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-  if (s === 0) {
-    const gray = Math.round(l * 255);
-    return { r: gray, g: gray, b: gray };
-  }
-  const hue2rgb = (p2, q2, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-    if (t < 1 / 2) return q2;
-    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-    return p2;
-  };
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
-  const g = Math.round(hue2rgb(p, q, h) * 255);
-  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
-  return { r, g, b };
-}
-function rgbToHsl(rgb) {
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (diff !== 0) {
-    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / diff + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-    h /= 6;
-  }
-  return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  };
-}
-function formatHSL(hsl, includeHslWrapper = true) {
-  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
-  return includeHslWrapper ? `hsl(${values})` : values;
-}
-function formatRGB(rgb) {
-  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-}
-function formatHex(rgb) {
-  const toHex = (n) => {
-    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  };
-  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
-}
-function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
-  let hsl = parseHSL(colorInput);
-  if (!hsl) {
-    const rgb = parseHex(colorInput);
-    if (rgb) {
-      hsl = rgbToHsl(rgb);
-    }
-  }
-  if (!hsl) {
-    return colorInput;
-  }
-  switch (outputFormat) {
-    case "hsl":
-      return formatHSL(hsl, includeFunctionWrapper);
-    case "rgb":
-      return formatRGB(hslToRgb(hsl));
-    case "hex":
-      return formatHex(hslToRgb(hsl));
-    default:
-      return colorInput;
-  }
-}
-function withAlpha(colorInput, alpha) {
-  const hsl = parseHSL(colorInput);
-  if (!hsl) return colorInput;
-  const rgb = hslToRgb(hsl);
-  const clampedAlpha = Math.max(0, Math.min(1, alpha));
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
-}
-
-// src/components/ThemePresetButtons.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_ANIMATION = {
   enabled: true,
@@ -4617,6 +4742,17 @@ var DEFAULT_LAYOUT = {
   colorBoxCount: 3,
   enableMask: true
 };
+function getPresetButtonWidthPx(label, layout) {
+  const approxCharWidthPx = 7.25;
+  const maxWidthPx = 360;
+  const dotSizePx = 12;
+  const dotGapPx = 4;
+  const dotsWidthPx = layout.showColorBoxes ? layout.colorBoxCount * dotSizePx + Math.max(0, layout.colorBoxCount - 1) * dotGapPx : 0;
+  const contentPaddingPx = 28;
+  const estimatedTextWidthPx = Math.ceil(label.length * approxCharWidthPx);
+  const estimatedWidthPx = contentPaddingPx + dotsWidthPx + estimatedTextWidthPx;
+  return Math.min(maxWidthPx, Math.max(layout.buttonWidth, estimatedWidthPx));
+}
 var ColorBox = ({ color, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
@@ -4637,6 +4773,7 @@ var PresetButton = ({
 }) => {
   const colors = preset.colors[mode];
   const label = preset.name.replace(/-/g, " ");
+  const buttonWidth = Math.max(layout.buttonWidth, Number(preset.metadata?.buttonWidth ?? 0) || layout.buttonWidth);
   if (renderPreset) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -4648,7 +4785,7 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { width: buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       type: "button",
@@ -4680,7 +4817,7 @@ var AnimatedRow = ({
 }) => {
   if (presets.length === 0) return null;
   const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
-  const totalWidth = presets.length * (layout.buttonWidth + layout.buttonGap);
+  const totalWidth = presets.reduce((sum, preset) => sum + (Number(preset.metadata?.buttonWidth) || layout.buttonWidth), 0) + presets.length * layout.buttonGap;
   const effectiveScrollSpeed = Math.max(0.1, animation.scrollSpeed || 1);
   const animationDuration = presets.length * animation.duration / effectiveScrollSpeed;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4760,6 +4897,7 @@ var ThemePresetButtons = ({
               dark: preset.styles.dark
             },
             metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
               category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
               tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
               createdAt: preset.createdAt,
@@ -4778,6 +4916,7 @@ var ThemePresetButtons = ({
               dark: preset.styles.dark
             },
             metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
               category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
               tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
               createdAt: preset.createdAt,
@@ -4802,7 +4941,7 @@ var ThemePresetButtons = ({
     } finally {
       setLoading(false);
     }
-  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom]);
+  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom, layout]);
   (0, import_react4.useEffect)(() => {
     loadPresets();
   }, [loadPresets]);

package/dist/index.mjs

@@ -3827,7 +3827,15 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             'destructive', 'destructive-foreground', 'border', 'input', 'ring',
             'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
             'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
-            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
+            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring',
+            // Semantic accent colors for status and feedback
+            'accent-info', 'accent-info-foreground',
+            'accent-success', 'accent-success-foreground',
+            'accent-warning', 'accent-warning-foreground',
+            'accent-danger', 'accent-danger-foreground',
+            'accent-brand', 'accent-brand-foreground',
+            'accent-feature', 'accent-feature-foreground',
+            'accent-highlight', 'accent-highlight-foreground'
           ],
           typography: ['font-sans', 'font-serif', 'font-mono'],
           layout: ['radius'],
@@ -3835,6 +3843,106 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           spacing: ['letter-spacing', 'spacing']
         };
 
+        // Normalize hex/rgb/hsl() colors into "H S% L%" for hsl(var(--token)) usage.
+        function normalizeColorValueToHslTriplet(value) {
+          if (!value) return value;
+          const trimmed = String(value).trim();
+          if (!trimmed) return value;
+          if (trimmed.startsWith('var(')) return trimmed;
+
+          // Already a triplet: "210 40% 98%"
+          if (/^\\d+(?:\\.\\d+)?\\s+\\d+(?:\\.\\d+)?%\\s+\\d+(?:\\.\\d+)?%$/.test(trimmed)) {
+            return trimmed;
+          }
+
+          function clamp(n, min, max) {
+            return Math.min(max, Math.max(min, n));
+          }
+
+          function 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 diff = max - min;
+            let h = 0;
+            let s = 0;
+            const l = (max + min) / 2;
+
+            if (diff !== 0) {
+              s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+              switch (max) {
+                case r:
+                  h = (g - b) / diff + (g < b ? 6 : 0);
+                  break;
+                case g:
+                  h = (b - r) / diff + 2;
+                  break;
+                case b:
+                  h = (r - g) / diff + 4;
+                  break;
+              }
+              h /= 6;
+            }
+
+            return {
+              h: Math.round(h * 360),
+              s: Math.round(s * 100),
+              l: Math.round(l * 100),
+            };
+          }
+
+          function hexToRgb(hex) {
+            let clean = hex.replace('#', '').trim();
+            if (clean.length === 3) clean = clean.split('').map(function(c) { return c + c; }).join('');
+            if (clean.length === 8) clean = clean.substring(0, 6); // ignore alpha
+            if (clean.length !== 6) return null;
+
+            const r = parseInt(clean.substring(0, 2), 16);
+            const g = parseInt(clean.substring(2, 4), 16);
+            const b = parseInt(clean.substring(4, 6), 16);
+            if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+            return { r: r, g: g, b: b };
+          }
+
+          function toTriplet(hsl) {
+            return String(clamp(hsl.h, 0, 360)) + ' ' + String(clamp(hsl.s, 0, 100)) + '% ' + String(clamp(hsl.l, 0, 100)) + '%';
+          }
+
+          // hsl(...) or raw "H S% L%"
+          if (/^hsl\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/hsl\\(|\\)/gi, '').replace(/[,%]/g, ' ').trim();
+            const parts = cleaned.split(/\\s+/).filter(Boolean);
+            if (parts.length === 3) {
+              const h = parseFloat(parts[0]) || 0;
+              const s = parseFloat(parts[1]) || 0;
+              const l = parseFloat(parts[2]) || 0;
+              return toTriplet({ h: h, s: s, l: l });
+            }
+          }
+
+          // rgb(...)
+          if (/^rgb\\(/i.test(trimmed)) {
+            const cleaned = trimmed.replace(/rgb\\(|\\)/gi, '').trim();
+            const parts = cleaned.split(',').map(function(p) { return p.trim(); });
+            if (parts.length === 3) {
+              const r = clamp(parseFloat(parts[0]) || 0, 0, 255);
+              const g = clamp(parseFloat(parts[1]) || 0, 0, 255);
+              const b = clamp(parseFloat(parts[2]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          }
+
+          // hex
+          if (trimmed[0] === '#') {
+            const rgb = hexToRgb(trimmed);
+            if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
+          }
+
+          return value;
+        }
+
         // Function to apply all preset properties - with proper clearing and defaults
         function applyPresetProperties(colors) {
           if (!colors) return;
@@ -3866,6 +3974,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
           
           // Apply all properties with defaults for missing ones
           let appliedCount = 0;
+          const colorProps = {};
+          CSS_CATEGORIES.colors.forEach(function(prop) { colorProps[prop] = true; });
+          colorProps['shadow-color'] = true;
+
           allProperties.forEach(function(prop) {
             let value = colors[prop];
             
@@ -3875,6 +3987,10 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             }
             
             if (value) {
+              if (colorProps[prop]) {
+                value = normalizeColorValueToHslTriplet(value);
+              }
+
               const cssVar = '--' + prop;
               // Apply directly like TweakCN does - no conversion, no !important
               root.style.setProperty(cssVar, value);
@@ -3936,6 +4052,138 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
   return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: scriptContent }, suppressHydrationWarning: true });
 }
 
+// src/utils/colors.ts
+function parseHSL(hslString) {
+  try {
+    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
+    const parts = cleaned.split(/\s+/).filter(Boolean);
+    if (parts.length !== 3) return null;
+    const h = parseFloat(parts[0]) || 0;
+    const s = parseFloat(parts[1]) || 0;
+    const l = parseFloat(parts[2]) || 0;
+    return {
+      h: Math.max(0, Math.min(360, h)),
+      s: Math.max(0, Math.min(100, s)),
+      l: Math.max(0, Math.min(100, l))
+    };
+  } catch {
+    return null;
+  }
+}
+function parseHex(hexString) {
+  try {
+    let hex = hexString.replace("#", "");
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length !== 6) return null;
+    const r = parseInt(hex.substring(0, 2), 16);
+    const s = parseInt(hex.substring(2, 4), 16);
+    const l = parseInt(hex.substring(4, 6), 16);
+    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
+    return { r, g: s, b: l };
+  } catch {
+    return null;
+  }
+}
+function hslToRgb(hsl) {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+  if (s === 0) {
+    const gray = Math.round(l * 255);
+    return { r: gray, g: gray, b: gray };
+  }
+  const hue2rgb = (p2, q2, t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+    if (t < 1 / 2) return q2;
+    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+    return p2;
+  };
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
+  const g = Math.round(hue2rgb(p, q, h) * 255);
+  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
+  return { r, g, b };
+}
+function rgbToHsl(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (diff !== 0) {
+    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / diff + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function formatHSL(hsl, includeHslWrapper = true) {
+  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
+  return includeHslWrapper ? `hsl(${values})` : values;
+}
+function formatRGB(rgb) {
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+}
+function formatHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
+  let hsl = parseHSL(colorInput);
+  if (!hsl) {
+    const rgb = parseHex(colorInput);
+    if (rgb) {
+      hsl = rgbToHsl(rgb);
+    }
+  }
+  if (!hsl) {
+    return colorInput;
+  }
+  switch (outputFormat) {
+    case "hsl":
+      return formatHSL(hsl, includeFunctionWrapper);
+    case "rgb":
+      return formatRGB(hslToRgb(hsl));
+    case "hex":
+      return formatHex(hslToRgb(hsl));
+    default:
+      return colorInput;
+  }
+}
+function withAlpha(colorInput, alpha) {
+  const hsl = parseHSL(colorInput);
+  if (!hsl) return colorInput;
+  const rgb = hslToRgb(hsl);
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
+}
+
 // src/providers/UnifiedThemeProvider.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var UnifiedThemeContext = createContext(void 0);
@@ -3958,6 +4206,14 @@ function setStoredMode(mode, storageKey) {
   } catch {
   }
 }
+function normalizeColorValueToHslTriplet(value) {
+  const trimmed = value.trim();
+  const parsedHsl = parseHSL(trimmed);
+  if (parsedHsl) return formatHSL(parsedHsl, false);
+  const parsedRgb = parseHex(trimmed);
+  if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
+  return value;
+}
 function ThemeProvider({
   children,
   defaultMode = "system",
@@ -4133,6 +4389,9 @@ function ThemeProvider({
         value = defaultValues[prop];
       }
       if (value) {
+        if (CSS_PROPERTY_CATEGORIES.colors.includes(prop) || prop === "shadow-color") {
+          value = normalizeColorValueToHslTriplet(String(value));
+        }
         const cssVar = `--${prop}`;
         root.style.setProperty(cssVar, value);
         appliedCount++;
@@ -4418,140 +4677,6 @@ ThemeToggle.displayName = "ThemeToggle";
 // src/components/ThemePresetButtons.tsx
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { clsx as clsx2 } from "clsx";
-
-// src/utils/colors.ts
-function parseHSL(hslString) {
-  try {
-    const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
-    const parts = cleaned.split(/\s+/).filter(Boolean);
-    if (parts.length !== 3) return null;
-    const h = parseFloat(parts[0]) || 0;
-    const s = parseFloat(parts[1]) || 0;
-    const l = parseFloat(parts[2]) || 0;
-    return {
-      h: Math.max(0, Math.min(360, h)),
-      s: Math.max(0, Math.min(100, s)),
-      l: Math.max(0, Math.min(100, l))
-    };
-  } catch {
-    return null;
-  }
-}
-function parseHex(hexString) {
-  try {
-    let hex = hexString.replace("#", "");
-    if (hex.length === 3) {
-      hex = hex.split("").map((char) => char + char).join("");
-    }
-    if (hex.length !== 6) return null;
-    const r = parseInt(hex.substring(0, 2), 16);
-    const s = parseInt(hex.substring(2, 4), 16);
-    const l = parseInt(hex.substring(4, 6), 16);
-    if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
-    return { r, g: s, b: l };
-  } catch {
-    return null;
-  }
-}
-function hslToRgb(hsl) {
-  const h = hsl.h / 360;
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-  if (s === 0) {
-    const gray = Math.round(l * 255);
-    return { r: gray, g: gray, b: gray };
-  }
-  const hue2rgb = (p2, q2, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-    if (t < 1 / 2) return q2;
-    if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-    return p2;
-  };
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
-  const g = Math.round(hue2rgb(p, q, h) * 255);
-  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
-  return { r, g, b };
-}
-function rgbToHsl(rgb) {
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (diff !== 0) {
-    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / diff + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-    h /= 6;
-  }
-  return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100)
-  };
-}
-function formatHSL(hsl, includeHslWrapper = true) {
-  const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
-  return includeHslWrapper ? `hsl(${values})` : values;
-}
-function formatRGB(rgb) {
-  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-}
-function formatHex(rgb) {
-  const toHex = (n) => {
-    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  };
-  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
-}
-function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
-  let hsl = parseHSL(colorInput);
-  if (!hsl) {
-    const rgb = parseHex(colorInput);
-    if (rgb) {
-      hsl = rgbToHsl(rgb);
-    }
-  }
-  if (!hsl) {
-    return colorInput;
-  }
-  switch (outputFormat) {
-    case "hsl":
-      return formatHSL(hsl, includeFunctionWrapper);
-    case "rgb":
-      return formatRGB(hslToRgb(hsl));
-    case "hex":
-      return formatHex(hslToRgb(hsl));
-    default:
-      return colorInput;
-  }
-}
-function withAlpha(colorInput, alpha) {
-  const hsl = parseHSL(colorInput);
-  if (!hsl) return colorInput;
-  const rgb = hslToRgb(hsl);
-  const clampedAlpha = Math.max(0, Math.min(1, alpha));
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
-}
-
-// src/components/ThemePresetButtons.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_ANIMATION = {
   enabled: true,
@@ -4574,6 +4699,17 @@ var DEFAULT_LAYOUT = {
   colorBoxCount: 3,
   enableMask: true
 };
+function getPresetButtonWidthPx(label, layout) {
+  const approxCharWidthPx = 7.25;
+  const maxWidthPx = 360;
+  const dotSizePx = 12;
+  const dotGapPx = 4;
+  const dotsWidthPx = layout.showColorBoxes ? layout.colorBoxCount * dotSizePx + Math.max(0, layout.colorBoxCount - 1) * dotGapPx : 0;
+  const contentPaddingPx = 28;
+  const estimatedTextWidthPx = Math.ceil(label.length * approxCharWidthPx);
+  const estimatedWidthPx = contentPaddingPx + dotsWidthPx + estimatedTextWidthPx;
+  return Math.min(maxWidthPx, Math.max(layout.buttonWidth, estimatedWidthPx));
+}
 var ColorBox = ({ color, className }) => {
   return /* @__PURE__ */ jsx4(
     "div",
@@ -4594,6 +4730,7 @@ var PresetButton = ({
 }) => {
   const colors = preset.colors[mode];
   const label = preset.name.replace(/-/g, " ");
+  const buttonWidth = Math.max(layout.buttonWidth, Number(preset.metadata?.buttonWidth ?? 0) || layout.buttonWidth);
   if (renderPreset) {
     return /* @__PURE__ */ jsx4(
       "div",
@@ -4605,7 +4742,7 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", style: { width: buttonWidth }, children: /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -4637,7 +4774,7 @@ var AnimatedRow = ({
 }) => {
   if (presets.length === 0) return null;
   const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
-  const totalWidth = presets.length * (layout.buttonWidth + layout.buttonGap);
+  const totalWidth = presets.reduce((sum, preset) => sum + (Number(preset.metadata?.buttonWidth) || layout.buttonWidth), 0) + presets.length * layout.buttonGap;
   const effectiveScrollSpeed = Math.max(0.1, animation.scrollSpeed || 1);
   const animationDuration = presets.length * animation.duration / effectiveScrollSpeed;
   return /* @__PURE__ */ jsx4(
@@ -4717,6 +4854,7 @@ var ThemePresetButtons = ({
               dark: preset.styles.dark
             },
             metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
               category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
               tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
               createdAt: preset.createdAt,
@@ -4735,6 +4873,7 @@ var ThemePresetButtons = ({
               dark: preset.styles.dark
             },
             metadata: {
+              buttonWidth: getPresetButtonWidthPx(preset.label, layout),
               category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
               tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
               createdAt: preset.createdAt,
@@ -4759,7 +4898,7 @@ var ThemePresetButtons = ({
     } finally {
       setLoading(false);
     }
-  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom]);
+  }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom, layout]);
   useEffect2(() => {
     loadPresets();
   }, [loadPresets]);

package/dist/styles/components.css

@@ -95,10 +95,10 @@
 }
 
 .theme-preset-button__label {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  display: block;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 
   line-height: 1.1;
   font-size: 0.875rem;

package/dist/styles/tailwind.css

@@ -7,58 +7,58 @@
 
 @theme inline {
   /* Color mappings - Bridge between CSS variables and Tailwind classes */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
 
   /* Chart colors for data visualization */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
 
   /* Sidebar colors for dashboard layouts */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
 
   /* Semantic accent colors for status and feedback */
-  --color-accent-info: var(--accent-info);
-  --color-accent-info-foreground: var(--accent-info-foreground);
-  --color-accent-success: var(--accent-success);
-  --color-accent-success-foreground: var(--accent-success-foreground);
-  --color-accent-warning: var(--accent-warning);
-  --color-accent-warning-foreground: var(--accent-warning-foreground);
-  --color-accent-danger: var(--accent-danger);
-  --color-accent-danger-foreground: var(--accent-danger-foreground);
-  --color-accent-brand: var(--accent-brand);
-  --color-accent-brand-foreground: var(--accent-brand-foreground);
-  --color-accent-feature: var(--accent-feature);
-  --color-accent-feature-foreground: var(--accent-feature-foreground);
-  --color-accent-highlight: var(--accent-highlight);
-  --color-accent-highlight-foreground: var(--accent-highlight-foreground);
+  --color-accent-info: hsl(var(--accent-info));
+  --color-accent-info-foreground: hsl(var(--accent-info-foreground));
+  --color-accent-success: hsl(var(--accent-success));
+  --color-accent-success-foreground: hsl(var(--accent-success-foreground));
+  --color-accent-warning: hsl(var(--accent-warning));
+  --color-accent-warning-foreground: hsl(var(--accent-warning-foreground));
+  --color-accent-danger: hsl(var(--accent-danger));
+  --color-accent-danger-foreground: hsl(var(--accent-danger-foreground));
+  --color-accent-brand: hsl(var(--accent-brand));
+  --color-accent-brand-foreground: hsl(var(--accent-brand-foreground));
+  --color-accent-feature: hsl(var(--accent-feature));
+  --color-accent-feature-foreground: hsl(var(--accent-feature-foreground));
+  --color-accent-highlight: hsl(var(--accent-highlight));
+  --color-accent-highlight-foreground: hsl(var(--accent-highlight-foreground));
 
   /* Dynamic border radius system */
   --radius-sm: calc(var(--radius) - 4px);
@@ -83,7 +83,7 @@
   --size-spacing: var(--spacing);
 
   /* Shadow system integration */
-  --color-shadow: var(--shadow-color);
+  --color-shadow: hsl(var(--shadow-color));
   --shadow-opacity: var(--shadow-opacity);
   --shadow-blur: var(--shadow-blur);
   --shadow-spread: var(--shadow-spread);
@@ -118,4 +118,4 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",