@marianmeres/stuic 3.5.2 → 3.6.0

package/dist/themes/violet-rose-dusk.js

@@ -4,32 +4,22 @@ const light = {
             primary: {
                 DEFAULT: "var(--color-violet-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-violet-700)",
-                active: "var(--color-violet-800)",
             },
             accent: {
                 DEFAULT: "var(--color-rose-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-rose-600)",
-                active: "var(--color-rose-700)",
             },
             destructive: {
                 DEFAULT: "var(--color-red-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-red-700)",
-                active: "var(--color-red-800)",
             },
             warning: {
                 DEFAULT: "var(--color-amber-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-amber-600)",
-                active: "var(--color-amber-700)",
             },
             success: {
                 DEFAULT: "var(--color-emerald-600)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-emerald-700)",
-                active: "var(--color-emerald-800)",
             },
         },
         role: {
@@ -38,31 +28,23 @@ const light = {
                     DEFAULT: "var(--color-zinc-50)",
                     foreground: "var(--color-zinc-900)",
                 },
+                muted: {
+                    DEFAULT: "var(--color-zinc-100)",
+                    foreground: "var(--color-zinc-500)",
+                },
                 surface: {
                     DEFAULT: "var(--color-zinc-200)",
                     foreground: "var(--color-zinc-900)",
-                    hover: "var(--color-zinc-300)",
-                    active: "var(--color-zinc-400)",
                 },
                 "surface-1": {
                     DEFAULT: "var(--color-zinc-300)",
                     foreground: "var(--color-zinc-900)",
-                    hover: "var(--color-zinc-400)",
-                    active: "var(--color-zinc-500)",
-                },
-                muted: {
-                    DEFAULT: "var(--color-zinc-200)",
-                    foreground: "var(--color-zinc-500)",
-                    hover: "var(--color-zinc-300)",
-                    active: "var(--color-zinc-400)",
                 },
             },
             single: {
                 foreground: "var(--color-zinc-900)",
                 border: {
                     DEFAULT: "var(--color-zinc-300)",
-                    hover: "var(--color-zinc-400)",
-                    active: "var(--color-zinc-500)",
                 },
                 input: {
                     DEFAULT: "var(--color-white)",
@@ -79,32 +61,22 @@ const dark = {
             primary: {
                 DEFAULT: "var(--color-violet-400)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-violet-300)",
-                active: "var(--color-violet-200)",
             },
             accent: {
                 DEFAULT: "var(--color-rose-400)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-rose-300)",
-                active: "var(--color-rose-200)",
             },
             destructive: {
                 DEFAULT: "var(--color-red-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-red-400)",
-                active: "var(--color-red-300)",
             },
             warning: {
                 DEFAULT: "var(--color-amber-400)",
                 foreground: "var(--color-black)",
-                hover: "var(--color-amber-300)",
-                active: "var(--color-amber-200)",
             },
             success: {
                 DEFAULT: "var(--color-emerald-500)",
                 foreground: "var(--color-white)",
-                hover: "var(--color-emerald-400)",
-                active: "var(--color-emerald-300)",
             },
         },
         role: {
@@ -113,31 +85,23 @@ const dark = {
                     DEFAULT: "var(--color-zinc-950)",
                     foreground: "var(--color-zinc-50)",
                 },
-                surface: {
+                muted: {
                     DEFAULT: "var(--color-zinc-900)",
-                    foreground: "var(--color-zinc-100)",
-                    hover: "var(--color-zinc-800)",
-                    active: "var(--color-zinc-700)",
+                    foreground: "var(--color-zinc-500)",
                 },
-                "surface-1": {
+                surface: {
                     DEFAULT: "var(--color-zinc-800)",
-                    foreground: "var(--color-zinc-100)",
-                    hover: "var(--color-zinc-700)",
-                    active: "var(--color-zinc-600)",
+                    foreground: "var(--color-zinc-400)",
                 },
-                muted: {
-                    DEFAULT: "var(--color-zinc-800)",
-                    foreground: "var(--color-zinc-500)",
-                    hover: "var(--color-zinc-700)",
-                    active: "var(--color-zinc-600)",
+                "surface-1": {
+                    DEFAULT: "var(--color-zinc-700)",
+                    foreground: "var(--color-zinc-300)",
                 },
             },
             single: {
                 foreground: "var(--color-zinc-50)",
                 border: {
                     DEFAULT: "var(--color-zinc-700)",
-                    hover: "var(--color-zinc-600)",
-                    active: "var(--color-zinc-500)",
                 },
                 input: {
                     DEFAULT: "var(--color-zinc-900)",

package/dist/utils/design-tokens.d.ts

@@ -10,15 +10,13 @@ export type ColorPair = {
     foreground: string;
     hover?: string;
     active?: string;
-    foregroundHover?: string;
-    foregroundActive?: string;
 };
 /** Single color: either a plain string or an object with pseudo states */
 export type SingleColor = string | ColorValue;
 /** Known intent color keys */
 export type IntentColorKey = "primary" | "accent" | "destructive" | "warning" | "success";
 /** Known role color keys (paired) */
-export type RolePairedKey = "background" | "surface" | "muted";
+export type RolePairedKey = "background" | "muted" | "surface";
 /** Known role color keys (single value) */
 export type RoleSingleKey = "foreground" | "border" | "input" | "ring";
 /** Helper: require known keys, allow additional */

package/dist/utils/design-tokens.js

@@ -8,6 +8,48 @@
 function isSingleColorObject(value) {
     return typeof value === "object" && "DEFAULT" in value;
 }
+/** Tailwind shade scale (ordered light → dark) */
+const SHADE_SCALE = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+/**
+ * Derive hover/active shades from a Tailwind CSS variable.
+ * Light mode steps darker (+1, +2 in scale), dark mode steps lighter (-1, -2).
+ * Returns defaultValue for both if the value is not a parseable shade variable.
+ */
+function deriveShadeSteps(defaultValue, mode) {
+    const match = defaultValue.match(/^var\(--color-([a-z]+)-(\d+)\)$/);
+    if (!match)
+        return { hover: defaultValue, active: defaultValue };
+    const [, name, shadeStr] = match;
+    const shade = parseInt(shadeStr, 10);
+    const idx = SHADE_SCALE.indexOf(shade);
+    if (idx === -1)
+        return { hover: defaultValue, active: defaultValue };
+    const step = mode === "light" ? 1 : -1;
+    const hoverIdx = idx + step;
+    const activeIdx = idx + step * 2;
+    if (hoverIdx < 0 || hoverIdx >= SHADE_SCALE.length)
+        return { hover: defaultValue, active: defaultValue };
+    if (activeIdx < 0 || activeIdx >= SHADE_SCALE.length)
+        return { hover: defaultValue, active: defaultValue };
+    return {
+        hover: `var(--color-${name}-${SHADE_SCALE[hoverIdx]})`,
+        active: `var(--color-${name}-${SHADE_SCALE[activeIdx]})`,
+    };
+}
+/** Fill missing hover/active on a ColorPair using shade derivation */
+function fillPairStates(pair, mode) {
+    if (pair.hover !== undefined && pair.active !== undefined)
+        return pair;
+    const derived = deriveShadeSteps(pair.DEFAULT, mode);
+    return { ...pair, hover: pair.hover ?? derived.hover, active: pair.active ?? derived.active };
+}
+/** Fill missing hover/active on a ColorValue using shade derivation */
+function fillColorValueStates(color, mode) {
+    if (color.hover !== undefined && color.active !== undefined)
+        return color;
+    const derived = deriveShadeSteps(color.DEFAULT, mode);
+    return { ...color, hover: color.hover ?? derived.hover, active: color.active ?? derived.active };
+}
 /** Generate color tokens for a paired color (with foreground) */
 function generatePairedColorTokens(tokens, key, pair, prefix = "stuic-") {
     // Main color
@@ -16,10 +58,8 @@ function generatePairedColorTokens(tokens, key, pair, prefix = "stuic-") {
     tokens[`${prefix}color-${key}-active`] = pair.active ?? pair.DEFAULT;
     // Foreground
     tokens[`${prefix}color-${key}-foreground`] = pair.foreground;
-    tokens[`${prefix}color-${key}-foreground-hover`] =
-        pair.foregroundHover ?? pair.foreground;
-    tokens[`${prefix}color-${key}-foreground-active`] =
-        pair.foregroundActive ?? pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-hover`] = pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-active`] = pair.foreground;
 }
 /** Generate color tokens for a single color */
 function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
@@ -40,9 +80,9 @@ function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
 // ============================================================================
 export function generateCssTokens(schema, prefix = "stuic-", mode = "light") {
     const tokens = {};
-    // Intent colors
+    // Intent colors (auto-derive hover/active from shade steps)
     for (const [key, pair] of Object.entries(schema.colors.intent)) {
-        generatePairedColorTokens(tokens, key, pair, prefix);
+        generatePairedColorTokens(tokens, key, fillPairStates(pair, mode), prefix);
     }
     // Surface-intent tokens (auto-derived from intent colors)
     // These provide subtle tinted backgrounds for callouts, alerts, highlighted content, etc.
@@ -58,13 +98,19 @@ export function generateCssTokens(schema, prefix = "stuic-", mode = "light") {
         tokens[`${prefix}color-surface-${key}-border`] =
             `color-mix(in srgb, var(--${prefix}color-${key}) 30%, var(--stuic-color-background))`;
     }
-    // Role colors (paired)
+    // Role colors (paired) — auto-derive except "background" (no hover/active by design)
     for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
-        generatePairedColorTokens(tokens, key, pair, prefix);
+        const filled = key === "background" ? pair : fillPairStates(pair, mode);
+        generatePairedColorTokens(tokens, key, filled, prefix);
     }
-    // Role colors (single)
+    // Role colors (single) — auto-derive for object types (e.g. border)
     for (const [key, color] of Object.entries(schema.colors.role.single)) {
-        generateSingleColorTokens(tokens, key, color, prefix);
+        if (isSingleColorObject(color)) {
+            generateSingleColorTokens(tokens, key, fillColorValueStates(color, mode), prefix);
+        }
+        else {
+            generateSingleColorTokens(tokens, key, color, prefix);
+        }
     }
     return tokens;
 }
@@ -144,8 +190,7 @@ export function generateThemeCss(schema, prefix = "stuic-") {
     let css = toCssString(generateCssTokens(schema.light, prefix, "light"));
     if (schema.dark) {
         css +=
-            "\n" +
-                toCssString(generateCssTokens(schema.dark, prefix, "dark"), ":root.dark");
+            "\n" + toCssString(generateCssTokens(schema.dark, prefix, "dark"), ":root.dark");
     }
     return css;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",