@marianmeres/stuic 2.66.0 → 3.0.0

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

@@ -0,0 +1,43 @@
+/** Base color value with optional pseudo states */
+type ColorValue = {
+    DEFAULT: string;
+    hover?: string;
+    active?: string;
+};
+/** Color pair enforcing the -foreground convention, with optional pseudo states */
+type ColorPair = {
+    DEFAULT: string;
+    foreground: string;
+    hover?: string;
+    active?: string;
+    foregroundHover?: string;
+    foregroundActive?: string;
+};
+/** Single color: either a plain string or an object with pseudo states */
+type SingleColor = string | ColorValue;
+/** Known intent color keys */
+export type IntentColorKey = "primary" | "accent" | "destructive" | "warning" | "success" | "info";
+/** Known role color keys (paired) */
+export type RolePairedKey = "background" | "surface" | "muted";
+/** Known role color keys (single value) */
+export type RoleSingleKey = "foreground" | "border" | "input" | "ring";
+/** Helper: require known keys, allow additional */
+export type WithRequired<TRequired extends string, TValue> = Record<TRequired, TValue> & Record<string, TValue>;
+/** Helper: partial known keys, allow additional */
+export type WithOptional<TKnown extends string, TValue> = Partial<Record<TKnown, TValue>> & Record<string, TValue>;
+export type TokenSchema = {
+    colors: {
+        intent: WithRequired<IntentColorKey, ColorPair>;
+        role: {
+            paired: WithRequired<RolePairedKey, ColorPair>;
+            single: WithRequired<RoleSingleKey, SingleColor>;
+        };
+    };
+};
+export type GeneratedTokens = Record<string, string>;
+export declare function generateCssTokens(schema: TokenSchema, prefix?: string): GeneratedTokens;
+/** Convert tokens object to CSS :root declaration */
+export declare function toCssString(tokens: GeneratedTokens, selector?: string): string;
+/** Create dark mode override tokens */
+export declare function createDarkOverride(baseTokens: GeneratedTokens, overrides: Partial<GeneratedTokens>): GeneratedTokens;
+export {};

package/dist/utils/design-tokens.js

@@ -0,0 +1,100 @@
+// ============================================================================
+// Types
+// ============================================================================
+// ============================================================================
+// Helpers
+// ============================================================================
+/** Check if a single color is an object with states or a plain string */
+function isSingleColorObject(value) {
+    return typeof value === "object" && "DEFAULT" in value;
+}
+/** Generate color tokens for a paired color (with foreground) */
+function generatePairedColorTokens(tokens, key, pair, prefix = "stuic-") {
+    // Main color
+    tokens[`${prefix}color-${key}`] = pair.DEFAULT;
+    tokens[`${prefix}color-${key}-hover`] = pair.hover ?? pair.DEFAULT;
+    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;
+}
+/** Generate color tokens for a single color */
+function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
+    if (isSingleColorObject(color)) {
+        tokens[`${prefix}color-${key}`] = color.DEFAULT;
+        tokens[`${prefix}color-${key}-hover`] = color.hover ?? color.DEFAULT;
+        tokens[`${prefix}color-${key}-active`] = color.active ?? color.DEFAULT;
+    }
+    else {
+        // Plain string: use same value for all states
+        tokens[`${prefix}color-${key}`] = color;
+        tokens[`${prefix}color-${key}-hover`] = color;
+        tokens[`${prefix}color-${key}-active`] = color;
+    }
+}
+// ============================================================================
+// Generator
+// ============================================================================
+export function generateCssTokens(schema, prefix = "stuic-") {
+    const tokens = {};
+    // Intent colors
+    for (const [key, pair] of Object.entries(schema.colors.intent)) {
+        generatePairedColorTokens(tokens, key, pair, prefix);
+    }
+    // Role colors (paired)
+    for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
+        generatePairedColorTokens(tokens, key, pair, prefix);
+    }
+    // Role colors (single)
+    for (const [key, color] of Object.entries(schema.colors.role.single)) {
+        generateSingleColorTokens(tokens, key, color, prefix);
+    }
+    return tokens;
+}
+// ============================================================================
+// CSS Output Helpers
+// ============================================================================
+/** Convert tokens object to CSS :root declaration */
+export function toCssString(tokens, selector = ":root") {
+    // Find max key length for padding
+    const maxLen = Math.max(...Object.keys(tokens).map((k) => `--${k}`.length));
+    // Helper to extract base color name from token key
+    const getBaseColor = (key) => {
+        // e.g., "stuic-color-primary-foreground-hover" → "primary"
+        const match = key.match(/^stuic-color-([^-]+)/);
+        return match ? match[1] : key;
+    };
+    // Group tokens by base color name (preserving order)
+    const groups = new Map();
+    for (const [key, value] of Object.entries(tokens)) {
+        const base = getBaseColor(key);
+        if (!groups.has(base)) {
+            groups.set(base, []);
+        }
+        groups.get(base).push([key, value]);
+    }
+    // Format a token with padding (include colon in key)
+    const formatVar = ([key, value]) => {
+        const cssKey = `--${key}:`;
+        return `\t${cssKey.padEnd(maxLen + 1)} ${value};`;
+    };
+    // Build output with empty lines between each color group
+    const parts = [];
+    for (const entries of groups.values()) {
+        parts.push(entries.map(formatVar).join("\n"));
+    }
+    return `${selector} {\n${parts.join("\n\n")}\n}\n`;
+}
+/** Create dark mode override tokens */
+export function createDarkOverride(baseTokens, overrides) {
+    const darkTokens = {};
+    for (const [key, value] of Object.entries(overrides)) {
+        if (key in baseTokens && value !== undefined) {
+            darkTokens[key] = value;
+        }
+    }
+    return darkTokens;
+}

package/dist/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";
+export * from "./design-tokens.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";

package/dist/utils/index.js

@@ -3,6 +3,7 @@ export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";
+export * from "./design-tokens.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.66.0",
+  "version": "3.0.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -43,6 +43,7 @@
     "svelte": "^5.46.4",
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.1.18",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "vite": "^6.4.1",
@@ -71,6 +72,25 @@
     "svelte-check": "svelte-check",
     "svelte-package": "svelte-package",
     "rp": "pnpm run build && ./release.sh patch",
-    "rpm": "pnpm run build && ./release.sh minor"
+    "rpm": "pnpm run build && ./release.sh minor",
+    "build:theme": "tsx scripts/generate-theme.ts",
+    "build:theme:rainbow": "pnpm run build:theme --infile=src/lib/themes/rainbow.ts --outfile=src/lib/themes/rainbow.css",
+    "build:theme:neutral": "pnpm run build:theme --infile=src/lib/themes/neutral.ts --outfile=src/lib/themes/neutral.css",
+    "build:theme:gray": "pnpm run build:theme --infile=src/lib/themes/gray.ts --outfile=src/lib/themes/gray.css",
+    "build:theme:indigo-amber": "pnpm run build:theme --infile=src/lib/themes/indigo-amber.ts --outfile=src/lib/themes/indigo-amber.css",
+    "build:theme:teal-rose": "pnpm run build:theme --infile=src/lib/themes/teal-rose.ts --outfile=src/lib/themes/teal-rose.css",
+    "build:theme:violet-lime": "pnpm run build:theme --infile=src/lib/themes/violet-lime.ts --outfile=src/lib/themes/violet-lime.css",
+    "build:theme:blue-orange": "pnpm run build:theme --infile=src/lib/themes/blue-orange.ts --outfile=src/lib/themes/blue-orange.css",
+    "build:theme:emerald-pink": "pnpm run build:theme --infile=src/lib/themes/emerald-pink.ts --outfile=src/lib/themes/emerald-pink.css",
+    "build:theme:sky-amber": "pnpm run build:theme --infile=src/lib/themes/sky-amber.ts --outfile=src/lib/themes/sky-amber.css",
+    "build:theme:fuchsia-emerald": "pnpm run build:theme --infile=src/lib/themes/fuchsia-emerald.ts --outfile=src/lib/themes/fuchsia-emerald.css",
+    "build:theme:slate-cyan": "pnpm run build:theme --infile=src/lib/themes/slate-cyan.ts --outfile=src/lib/themes/slate-cyan.css",
+    "build:theme:purple-yellow": "pnpm run build:theme --infile=src/lib/themes/purple-yellow.ts --outfile=src/lib/themes/purple-yellow.css",
+    "build:theme:cyan-red": "pnpm run build:theme --infile=src/lib/themes/cyan-red.ts --outfile=src/lib/themes/cyan-red.css",
+    "build:theme:rose-teal": "pnpm run build:theme --infile=src/lib/themes/rose-teal.ts --outfile=src/lib/themes/rose-teal.css",
+    "build:theme:red-cyan": "pnpm run build:theme --infile=src/lib/themes/red-cyan.ts --outfile=src/lib/themes/red-cyan.css",
+    "build:theme:cyan-slate": "pnpm run build:theme --infile=src/lib/themes/cyan-slate.ts --outfile=src/lib/themes/cyan-slate.css",
+    "build:theme:pink-emerald": "pnpm run build:theme --infile=src/lib/themes/pink-emerald.ts --outfile=src/lib/themes/pink-emerald.css",
+    "build:theme:red-blue": "pnpm run build:theme --infile=src/lib/themes/red-blue.ts --outfile=src/lib/themes/red-blue.css"
   }
 }