@marianmeres/stuic 3.0.1 → 3.0.3

package/dist/themes/slate-teal-ocean.js

@@ -0,0 +1,175 @@
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: "var(--color-slate-700)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-slate-800)",
+                active: "var(--color-slate-900)",
+            },
+            accent: {
+                DEFAULT: "var(--color-teal-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-teal-600)",
+                active: "var(--color-teal-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-teal-600)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-teal-700)",
+                active: "var(--color-teal-800)",
+            },
+            info: {
+                DEFAULT: "var(--color-cyan-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-cyan-600)",
+                active: "var(--color-cyan-700)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-slate-50)",
+                    foreground: "var(--color-slate-900)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-slate-100)",
+                    foreground: "var(--color-slate-900)",
+                    hover: "var(--color-slate-200)",
+                    active: "var(--color-slate-300)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-slate-200)",
+                    foreground: "var(--color-slate-900)",
+                    hover: "var(--color-slate-300)",
+                    active: "var(--color-slate-400)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-slate-300)",
+                    foreground: "var(--color-slate-900)",
+                    hover: "var(--color-slate-400)",
+                    active: "var(--color-slate-500)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-slate-200)",
+                    foreground: "var(--color-slate-500)",
+                    hover: "var(--color-slate-300)",
+                    active: "var(--color-slate-400)",
+                },
+            },
+            single: {
+                foreground: "var(--color-slate-900)",
+                border: {
+                    DEFAULT: "var(--color-slate-300)",
+                    hover: "var(--color-slate-400)",
+                    active: "var(--color-slate-500)",
+                },
+                input: {
+                    DEFAULT: "var(--color-white)",
+                    hover: "var(--color-slate-50)",
+                },
+                ring: "color-mix(in srgb, var(--color-teal-500) 20%, transparent)",
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: "var(--color-slate-400)",
+                foreground: "var(--color-slate-950)",
+                hover: "var(--color-slate-300)",
+                active: "var(--color-slate-200)",
+            },
+            accent: {
+                DEFAULT: "var(--color-teal-400)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-teal-300)",
+                active: "var(--color-teal-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-teal-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-teal-400)",
+                active: "var(--color-teal-300)",
+            },
+            info: {
+                DEFAULT: "var(--color-cyan-400)",
+                foreground: "var(--color-black)",
+                hover: "var(--color-cyan-300)",
+                active: "var(--color-cyan-200)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-slate-950)",
+                    foreground: "var(--color-slate-50)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-slate-900)",
+                    foreground: "var(--color-slate-100)",
+                    hover: "var(--color-slate-800)",
+                    active: "var(--color-slate-700)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-slate-800)",
+                    foreground: "var(--color-slate-100)",
+                    hover: "var(--color-slate-700)",
+                    active: "var(--color-slate-600)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-slate-700)",
+                    foreground: "var(--color-slate-100)",
+                    hover: "var(--color-slate-600)",
+                    active: "var(--color-slate-500)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-slate-800)",
+                    foreground: "var(--color-slate-500)",
+                    hover: "var(--color-slate-700)",
+                    active: "var(--color-slate-600)",
+                },
+            },
+            single: {
+                foreground: "var(--color-slate-50)",
+                border: {
+                    DEFAULT: "var(--color-slate-700)",
+                    hover: "var(--color-slate-600)",
+                    active: "var(--color-slate-500)",
+                },
+                input: {
+                    DEFAULT: "var(--color-slate-900)",
+                    hover: "var(--color-slate-800)",
+                },
+                ring: "color-mix(in srgb, var(--color-teal-400) 25%, transparent)",
+            },
+        },
+    },
+};
+export default { light, dark };

package/dist/themes/stone-orange-earth.d.ts

@@ -0,0 +1,6 @@
+import type { TokenSchema } from "../utils/design-tokens.js";
+declare const _default: {
+    light: TokenSchema;
+    dark: TokenSchema;
+};
+export default _default;

package/dist/themes/stone-orange-earth.js

@@ -0,0 +1,175 @@
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: "var(--color-stone-700)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-stone-800)",
+                active: "var(--color-stone-900)",
+            },
+            accent: {
+                DEFAULT: "var(--color-orange-600)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-orange-700)",
+                active: "var(--color-orange-800)",
+            },
+            destructive: {
+                DEFAULT: "var(--color-red-600)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-red-700)",
+                active: "var(--color-red-800)",
+            },
+            warning: {
+                DEFAULT: "var(--color-orange-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-orange-600)",
+                active: "var(--color-orange-700)",
+            },
+            success: {
+                DEFAULT: "var(--color-green-600)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-green-700)",
+                active: "var(--color-green-800)",
+            },
+            info: {
+                DEFAULT: "var(--color-sky-600)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-sky-700)",
+                active: "var(--color-sky-800)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-stone-100)",
+                    foreground: "var(--color-stone-900)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-stone-200)",
+                    foreground: "var(--color-stone-900)",
+                    hover: "var(--color-stone-300)",
+                    active: "var(--color-stone-400)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-stone-300)",
+                    foreground: "var(--color-stone-900)",
+                    hover: "var(--color-stone-400)",
+                    active: "var(--color-stone-500)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-stone-400)",
+                    foreground: "var(--color-stone-900)",
+                    hover: "var(--color-stone-500)",
+                    active: "var(--color-stone-600)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-stone-300)",
+                    foreground: "var(--color-stone-500)",
+                    hover: "var(--color-stone-400)",
+                    active: "var(--color-stone-500)",
+                },
+            },
+            single: {
+                foreground: "var(--color-stone-900)",
+                border: {
+                    DEFAULT: "var(--color-stone-400)",
+                    hover: "var(--color-stone-500)",
+                    active: "var(--color-stone-600)",
+                },
+                input: {
+                    DEFAULT: "var(--color-stone-50)",
+                    hover: "var(--color-stone-100)",
+                },
+                ring: "color-mix(in srgb, var(--color-stone-700) 20%, transparent)",
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: "var(--color-stone-400)",
+                foreground: "var(--color-stone-950)",
+                hover: "var(--color-stone-300)",
+                active: "var(--color-stone-200)",
+            },
+            accent: {
+                DEFAULT: "var(--color-orange-500)",
+                foreground: "var(--color-black)",
+                hover: "var(--color-orange-400)",
+                active: "var(--color-orange-300)",
+            },
+            destructive: {
+                DEFAULT: "var(--color-red-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-red-400)",
+                active: "var(--color-red-300)",
+            },
+            warning: {
+                DEFAULT: "var(--color-orange-400)",
+                foreground: "var(--color-black)",
+                hover: "var(--color-orange-300)",
+                active: "var(--color-orange-200)",
+            },
+            success: {
+                DEFAULT: "var(--color-green-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-green-400)",
+                active: "var(--color-green-300)",
+            },
+            info: {
+                DEFAULT: "var(--color-sky-400)",
+                foreground: "var(--color-black)",
+                hover: "var(--color-sky-300)",
+                active: "var(--color-sky-200)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-stone-950)",
+                    foreground: "var(--color-stone-100)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-stone-900)",
+                    foreground: "var(--color-stone-100)",
+                    hover: "var(--color-stone-800)",
+                    active: "var(--color-stone-700)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-stone-800)",
+                    foreground: "var(--color-stone-100)",
+                    hover: "var(--color-stone-700)",
+                    active: "var(--color-stone-600)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-stone-700)",
+                    foreground: "var(--color-stone-100)",
+                    hover: "var(--color-stone-600)",
+                    active: "var(--color-stone-500)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-stone-800)",
+                    foreground: "var(--color-stone-500)",
+                    hover: "var(--color-stone-700)",
+                    active: "var(--color-stone-600)",
+                },
+            },
+            single: {
+                foreground: "var(--color-stone-100)",
+                border: {
+                    DEFAULT: "var(--color-stone-700)",
+                    hover: "var(--color-stone-600)",
+                    active: "var(--color-stone-500)",
+                },
+                input: {
+                    DEFAULT: "var(--color-stone-900)",
+                    hover: "var(--color-stone-800)",
+                },
+                ring: "color-mix(in srgb, var(--color-stone-400) 25%, transparent)",
+            },
+        },
+    },
+};
+export default { light, dark };

package/dist/themes/violet-rose-dusk.d.ts

@@ -0,0 +1,6 @@
+import type { TokenSchema } from "../utils/design-tokens.js";
+declare const _default: {
+    light: TokenSchema;
+    dark: TokenSchema;
+};
+export default _default;

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

@@ -0,0 +1,175 @@
+const light = {
+    colors: {
+        intent: {
+            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)",
+            },
+            info: {
+                DEFAULT: "var(--color-sky-500)",
+                foreground: "var(--color-white)",
+                hover: "var(--color-sky-600)",
+                active: "var(--color-sky-700)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-zinc-50)",
+                    foreground: "var(--color-zinc-900)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-zinc-100)",
+                    foreground: "var(--color-zinc-900)",
+                    hover: "var(--color-zinc-200)",
+                    active: "var(--color-zinc-300)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-zinc-200)",
+                    foreground: "var(--color-zinc-900)",
+                    hover: "var(--color-zinc-300)",
+                    active: "var(--color-zinc-400)",
+                },
+                "surface-2": {
+                    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)",
+                    hover: "var(--color-zinc-50)",
+                },
+                ring: "color-mix(in srgb, var(--color-violet-500) 20%, transparent)",
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            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)",
+            },
+            info: {
+                DEFAULT: "var(--color-sky-400)",
+                foreground: "var(--color-black)",
+                hover: "var(--color-sky-300)",
+                active: "var(--color-sky-200)",
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: "var(--color-zinc-950)",
+                    foreground: "var(--color-zinc-50)",
+                },
+                surface: {
+                    DEFAULT: "var(--color-zinc-900)",
+                    foreground: "var(--color-zinc-100)",
+                    hover: "var(--color-zinc-800)",
+                    active: "var(--color-zinc-700)",
+                },
+                "surface-1": {
+                    DEFAULT: "var(--color-zinc-800)",
+                    foreground: "var(--color-zinc-100)",
+                    hover: "var(--color-zinc-700)",
+                    active: "var(--color-zinc-600)",
+                },
+                "surface-2": {
+                    DEFAULT: "var(--color-zinc-700)",
+                    foreground: "var(--color-zinc-100)",
+                    hover: "var(--color-zinc-600)",
+                    active: "var(--color-zinc-500)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-zinc-800)",
+                    foreground: "var(--color-zinc-500)",
+                    hover: "var(--color-zinc-700)",
+                    active: "var(--color-zinc-600)",
+                },
+            },
+            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)",
+                    hover: "var(--color-zinc-800)",
+                },
+                ring: "color-mix(in srgb, var(--color-violet-400) 25%, transparent)",
+            },
+        },
+    },
+};
+export default { light, dark };

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

@@ -35,7 +35,7 @@ export type TokenSchema = {
     };
 };
 export type GeneratedTokens = Record<string, string>;
-export declare function generateCssTokens(schema: TokenSchema, prefix?: string): GeneratedTokens;
+export declare function generateCssTokens(schema: TokenSchema, prefix?: string, mode?: "light" | "dark"): GeneratedTokens;
 /** Convert tokens object to CSS :root declaration */
 export declare function toCssString(tokens: GeneratedTokens, selector?: string): string;
 /** Create dark mode override tokens */

package/dist/utils/design-tokens.js

@@ -38,12 +38,26 @@ function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
 // ============================================================================
 // Generator
 // ============================================================================
-export function generateCssTokens(schema, prefix = "stuic-") {
+export function generateCssTokens(schema, prefix = "stuic-", mode = "light") {
     const tokens = {};
     // Intent colors
     for (const [key, pair] of Object.entries(schema.colors.intent)) {
         generatePairedColorTokens(tokens, key, pair, prefix);
     }
+    // Surface-intent tokens (auto-derived from intent colors)
+    // These provide subtle tinted backgrounds for callouts, alerts, highlighted content, etc.
+    const contrastMix = mode === "light" ? "black" : "white";
+    for (const key of Object.keys(schema.colors.intent)) {
+        // Background: 15% tint
+        tokens[`${prefix}color-surface-${key}`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 15%, var(--stuic-color-background))`;
+        // Foreground: darken in light mode, lighten in dark mode for contrast
+        tokens[`${prefix}color-surface-${key}-foreground`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}), ${contrastMix} 10%)`;
+        // Border: 30% tint
+        tokens[`${prefix}color-surface-${key}-border`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 30%, var(--stuic-color-background))`;
+    }
     // Role colors (paired)
     for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
         generatePairedColorTokens(tokens, key, pair, prefix);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -74,6 +74,6 @@
     "rp": "pnpm run build && ./release.sh patch",
     "rpm": "pnpm run build && ./release.sh minor",
     "build:theme": "tsx scripts/generate-theme.ts",
-    "build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes"
+    "build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes/css"
   }
 }

package/dist/base.css

@@ -1,17 +0,0 @@
-/* Base styles for STUIC components */
-@layer base {
-	button:not(:disabled),
-	[role="button"]:not(:disabled) {
-		cursor: pointer;
-	}
-
-	button:disabled,
-	[role="button"]:disabled,
-	input:disabled {
-		cursor: not-allowed !important;
-	}
-}
-
-.scrollbar-thin {
-	scrollbar-width: thin;
-}