@marianmeres/design-tokens 1.0.0

package/dist/generate.js

@@ -0,0 +1,137 @@
+/** Check if a single color is an object with states or a plain string */
+function isSingleColorObject(value) {
+    return typeof value === "object" && "DEFAULT" in value;
+}
+/**
+ * Derive hover/active using color-mix (pure CSS, no Tailwind).
+ * Light mode: darken. Dark mode: lighten.
+ */
+function deriveColorMixStates(cssVarRef, mode) {
+    const mix = mode === "light" ? "black" : "white";
+    return {
+        hover: `color-mix(in oklch, ${cssVarRef}, ${mix} 10%)`,
+        active: `color-mix(in oklch, ${cssVarRef}, ${mix} 20%)`,
+    };
+}
+/** Fill missing hover/active on a ColorPair */
+function fillPairStates(pair, prefix, key, mode) {
+    if (pair.hover !== undefined && pair.active !== undefined) {
+        return pair;
+    }
+    const derived = deriveColorMixStates(`var(--${prefix}color-${key})`, mode);
+    return {
+        ...pair,
+        hover: pair.hover ?? derived.hover,
+        active: pair.active ?? derived.active,
+    };
+}
+/** Fill missing hover/active on a ColorValue */
+function fillColorValueStates(color, prefix, key, mode) {
+    if (color.hover !== undefined && color.active !== undefined) {
+        return color;
+    }
+    const derived = deriveColorMixStates(`var(--${prefix}color-${key})`, 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) {
+    tokens[`${prefix}color-${key}`] = pair.DEFAULT;
+    tokens[`${prefix}color-${key}-hover`] = pair.hover ?? pair.DEFAULT;
+    tokens[`${prefix}color-${key}-active`] = pair.active ?? pair.DEFAULT;
+    tokens[`${prefix}color-${key}-foreground`] = 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) {
+    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 {
+        tokens[`${prefix}color-${key}`] = color;
+        tokens[`${prefix}color-${key}-hover`] = color;
+        tokens[`${prefix}color-${key}-active`] = color;
+    }
+}
+/**
+ * Generate CSS token key-value pairs from a TokenSchema.
+ *
+ * @param schema - The token schema
+ * @param prefix - Required CSS variable prefix (e.g. "my-", "site-")
+ * @param mode - Light or dark mode (affects auto-derivation direction)
+ */
+export function generateCssTokens(schema, prefix, mode = "light") {
+    const tokens = {};
+    // Intent colors (auto-derive hover/active via color-mix)
+    for (const [key, pair] of Object.entries(schema.colors.intent)) {
+        generatePairedColorTokens(tokens, key, fillPairStates(pair, prefix, key, mode), prefix);
+    }
+    // Surface-intent tokens (auto-derived from intent colors using color-mix)
+    const contrastMix = mode === "light" ? "black" : "white";
+    for (const key of Object.keys(schema.colors.intent)) {
+        tokens[`${prefix}color-surface-${key}`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 15%, var(--${prefix}color-background))`;
+        tokens[`${prefix}color-surface-${key}-foreground`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}), ${contrastMix} 10%)`;
+        tokens[`${prefix}color-surface-${key}-border`] =
+            `color-mix(in srgb, var(--${prefix}color-${key}) 30%, var(--${prefix}color-background))`;
+    }
+    // Role colors (paired) — auto-derive except "background"
+    for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
+        const filled = key === "background"
+            ? pair
+            : fillPairStates(pair, prefix, key, mode);
+        generatePairedColorTokens(tokens, key, filled, prefix);
+    }
+    // Role colors (single)
+    for (const [key, color] of Object.entries(schema.colors.role.single)) {
+        if (isSingleColorObject(color)) {
+            generateSingleColorTokens(tokens, key, fillColorValueStates(color, prefix, key, mode), prefix);
+        }
+        else {
+            generateSingleColorTokens(tokens, key, color, prefix);
+        }
+    }
+    return tokens;
+}
+/** Convert tokens object to a CSS declaration block */
+export function toCssString(tokens, selector = ":root") {
+    const maxLen = Math.max(...Object.keys(tokens).map((k) => `--${k}`.length));
+    // Group tokens by base color name (preserving order)
+    // Extract base: "{prefix}color-{base}-..." → "{base}"
+    const getBaseColor = (key) => {
+        const match = key.match(/color-([a-z]+-?\d*)/);
+        return match ? match[1] : key;
+    };
+    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]);
+    }
+    const formatVar = ([key, value]) => {
+        const cssKey = `--${key}:`;
+        return `\t${cssKey.padEnd(maxLen + 1)} ${value};`;
+    };
+    const parts = [];
+    for (const entries of groups.values()) {
+        parts.push(entries.map(formatVar).join("\n"));
+    }
+    return `${selector} {\n${parts.join("\n\n")}\n}\n`;
+}
+/** Generate complete CSS for a theme (light + optional dark mode) */
+export function generateThemeCss(schema, prefix) {
+    let css = toCssString(generateCssTokens(schema.light, prefix, "light"));
+    if (schema.dark) {
+        css += "\n" +
+            toCssString(generateCssTokens(schema.dark, prefix, "dark"), ":root.dark");
+    }
+    return css;
+}

package/dist/mod.d.ts

@@ -0,0 +1,13 @@
+/**
+ * CSS custom property generator for design token systems.
+ *
+ * Takes a structured color token schema and produces CSS variables for
+ * light and dark modes, with automatic hover/active state derivation
+ * using `color-mix()`.
+ *
+ * @module
+ */
+export { generateCssTokens, generateThemeCss, toCssString } from "./generate.js";
+export type { ColorPair, ColorValue, GeneratedTokens, IntentColorKey, RolePairedKey, RoleSingleKey, SingleColor, ThemeSchema, TokenSchema, WithOptional, WithRequired, } from "./types.js";
+export { hexToRgb, hexToRgbTriplet } from "./utils.js";
+export { colors } from "./colors.js";

package/dist/mod.js

@@ -0,0 +1,12 @@
+/**
+ * CSS custom property generator for design token systems.
+ *
+ * Takes a structured color token schema and produces CSS variables for
+ * light and dark modes, with automatic hover/active state derivation
+ * using `color-mix()`.
+ *
+ * @module
+ */
+export { generateCssTokens, generateThemeCss, toCssString } from "./generate.js";
+export { hexToRgb, hexToRgbTriplet } from "./utils.js";
+export { colors } from "./colors.js";

package/dist/reboot-bridge.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Bootstrap Reboot CSS variable bridge.
+ *
+ * Maps design tokens to the `--bs-*` variables that Bootstrap Reboot's
+ * CSS rules consume, enabling drop-in theming of Reboot-styled pages.
+ *
+ * @module
+ */
+import type { GeneratedTokens, ThemeSchema } from "./types.js";
+/**
+ * Generate Bootstrap Reboot bridge CSS variables from design tokens.
+ *
+ * Maps design tokens to the --bs-* variables that Reboot's CSS rules actually use.
+ * For RGB triplet variables (--bs-*-rgb), hex values are parsed automatically.
+ * Non-hex values are passed through for hex fields but cannot produce RGB triplets.
+ *
+ * @param tokens - Generated token key-value pairs (from generateCssTokens)
+ * @param prefix - The same prefix used in generateCssTokens
+ */
+export declare function generateRebootBridge(tokens: GeneratedTokens, prefix: string): GeneratedTokens;
+/**
+ * Generate complete themed CSS including both design tokens AND reboot bridge.
+ *
+ * @param schema - Theme schema with light (required) and dark (optional) modes
+ * @param prefix - Required CSS variable prefix
+ */
+export declare function generateThemedCss(schema: ThemeSchema, prefix: string): string;

package/dist/reboot-bridge.js

@@ -0,0 +1,89 @@
+/**
+ * Bootstrap Reboot CSS variable bridge.
+ *
+ * Maps design tokens to the `--bs-*` variables that Bootstrap Reboot's
+ * CSS rules consume, enabling drop-in theming of Reboot-styled pages.
+ *
+ * @module
+ */
+import { generateCssTokens, toCssString } from "./generate.js";
+import { hexToRgbTriplet } from "./utils.js";
+/**
+ * Generate Bootstrap Reboot bridge CSS variables from design tokens.
+ *
+ * Maps design tokens to the --bs-* variables that Reboot's CSS rules actually use.
+ * For RGB triplet variables (--bs-*-rgb), hex values are parsed automatically.
+ * Non-hex values are passed through for hex fields but cannot produce RGB triplets.
+ *
+ * @param tokens - Generated token key-value pairs (from generateCssTokens)
+ * @param prefix - The same prefix used in generateCssTokens
+ */
+export function generateRebootBridge(tokens, prefix) {
+    const bridge = {};
+    const get = (key) => tokens[`${prefix}color-${key}`];
+    // Helper: set a --bs-* var and optionally its -rgb triplet companion
+    const set = (bsKey, value) => {
+        if (value === undefined)
+            return;
+        bridge[`bs-${bsKey}`] = value;
+    };
+    const setWithRgb = (bsKey, value) => {
+        if (value === undefined)
+            return;
+        bridge[`bs-${bsKey}`] = value;
+        const triplet = hexToRgbTriplet(value);
+        if (triplet)
+            bridge[`bs-${bsKey}-rgb`] = triplet;
+    };
+    // Body
+    setWithRgb("body-bg", get("background"));
+    setWithRgb("body-color", get("background-foreground"));
+    // Links
+    setWithRgb("link-color", get("primary"));
+    set("link-decoration", undefined); // leave as reboot default
+    // Link hover — use primary-hover token value
+    const primaryHover = tokens[`${prefix}color-primary-hover`];
+    if (primaryHover) {
+        setWithRgb("link-hover-color", primaryHover);
+    }
+    // Border
+    set("border-color", get("border"));
+    // Heading
+    set("heading-color", get("background-foreground"));
+    // Code
+    const accent = get("accent");
+    if (accent)
+        set("code-color", accent);
+    // Semantic colors
+    set("primary", get("primary"));
+    set("danger", get("destructive"));
+    set("warning", get("warning"));
+    set("success", get("success"));
+    // Secondary (muted)
+    set("secondary-color", get("muted-foreground"));
+    set("secondary-bg", get("muted"));
+    // Highlight
+    set("highlight-color", get("background-foreground"));
+    set("highlight-bg", get("warning"));
+    return bridge;
+}
+/**
+ * Generate complete themed CSS including both design tokens AND reboot bridge.
+ *
+ * @param schema - Theme schema with light (required) and dark (optional) modes
+ * @param prefix - Required CSS variable prefix
+ */
+export function generateThemedCss(schema, prefix) {
+    // Light mode
+    const lightTokens = generateCssTokens(schema.light, prefix, "light");
+    const lightBridge = generateRebootBridge(lightTokens, prefix);
+    let css = toCssString({ ...lightTokens, ...lightBridge });
+    // Dark mode
+    if (schema.dark) {
+        const darkTokens = generateCssTokens(schema.dark, prefix, "dark");
+        const darkBridge = generateRebootBridge(darkTokens, prefix);
+        css += "\n" +
+            toCssString({ ...darkTokens, ...darkBridge }, ":root.dark");
+    }
+    return css;
+}

package/dist/themes/blue-orange.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;

package/dist/themes/blue-orange.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.blue[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.orange[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.orange[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.white,
+                    foreground: colors.stone[900],
+                },
+                muted: {
+                    DEFAULT: colors.stone[100],
+                    foreground: colors.stone[500],
+                },
+                surface: {
+                    DEFAULT: colors.stone[200],
+                    foreground: colors.stone[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[300],
+                    foreground: colors.stone[900],
+                },
+            },
+            single: {
+                foreground: colors.stone[900],
+                border: {
+                    DEFAULT: colors.stone[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.stone[50],
+                },
+                ring: `color-mix(in srgb, ${colors.blue[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.blue[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.orange[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.orange[400],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[500],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.stone[900],
+                    foreground: colors.stone[50],
+                },
+                muted: {
+                    DEFAULT: colors.stone[800],
+                    foreground: colors.stone[400],
+                },
+                surface: {
+                    DEFAULT: colors.stone[700],
+                    foreground: colors.stone[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[600],
+                    foreground: colors.stone[200],
+                },
+            },
+            single: {
+                foreground: colors.stone[50],
+                border: {
+                    DEFAULT: colors.stone[700],
+                },
+                input: {
+                    DEFAULT: colors.stone[900],
+                    hover: colors.stone[800],
+                },
+                ring: `color-mix(in srgb, ${colors.blue[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/cyan-red.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;

package/dist/themes/cyan-red.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.red[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.orange[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.white,
+                    foreground: colors.stone[900],
+                },
+                muted: {
+                    DEFAULT: colors.stone[100],
+                    foreground: colors.stone[500],
+                },
+                surface: {
+                    DEFAULT: colors.stone[200],
+                    foreground: colors.stone[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[300],
+                    foreground: colors.stone[900],
+                },
+            },
+            single: {
+                foreground: colors.stone[900],
+                border: {
+                    DEFAULT: colors.stone[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.stone[50],
+                },
+                ring: `color-mix(in srgb, ${colors.cyan[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.red[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.red[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.orange[400],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[500],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.stone[900],
+                    foreground: colors.stone[50],
+                },
+                muted: {
+                    DEFAULT: colors.stone[800],
+                    foreground: colors.stone[400],
+                },
+                surface: {
+                    DEFAULT: colors.stone[700],
+                    foreground: colors.stone[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.stone[600],
+                    foreground: colors.stone[200],
+                },
+            },
+            single: {
+                foreground: colors.stone[50],
+                border: {
+                    DEFAULT: colors.stone[700],
+                },
+                input: {
+                    DEFAULT: colors.stone[900],
+                    hover: colors.stone[800],
+                },
+                ring: `color-mix(in srgb, ${colors.cyan[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/cyan-slate.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;

package/dist/themes/cyan-slate.js

@@ -0,0 +1,117 @@
+import { colors } from "../colors.js";
+const light = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[600],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.slate[500],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[600],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[500],
+                foreground: colors.white,
+            },
+            success: {
+                DEFAULT: colors.teal[600],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.white,
+                    foreground: colors.neutral[900],
+                },
+                muted: {
+                    DEFAULT: colors.neutral[100],
+                    foreground: colors.neutral[500],
+                },
+                surface: {
+                    DEFAULT: colors.neutral[200],
+                    foreground: colors.neutral[900],
+                },
+                "surface-1": {
+                    DEFAULT: colors.neutral[300],
+                    foreground: colors.neutral[900],
+                },
+            },
+            single: {
+                foreground: colors.neutral[900],
+                border: {
+                    DEFAULT: colors.neutral[300],
+                },
+                input: {
+                    DEFAULT: colors.white,
+                    hover: colors.neutral[50],
+                },
+                ring: `color-mix(in srgb, ${colors.cyan[600]} 20%, transparent)`,
+            },
+        },
+    },
+};
+const dark = {
+    colors: {
+        intent: {
+            primary: {
+                DEFAULT: colors.cyan[500],
+                foreground: colors.white,
+            },
+            accent: {
+                DEFAULT: colors.slate[400],
+                foreground: colors.white,
+            },
+            destructive: {
+                DEFAULT: colors.rose[500],
+                foreground: colors.white,
+            },
+            warning: {
+                DEFAULT: colors.amber[400],
+                foreground: colors.black,
+            },
+            success: {
+                DEFAULT: colors.teal[500],
+                foreground: colors.white,
+            },
+        },
+        role: {
+            paired: {
+                background: {
+                    DEFAULT: colors.neutral[900],
+                    foreground: colors.neutral[50],
+                },
+                muted: {
+                    DEFAULT: colors.neutral[800],
+                    foreground: colors.neutral[400],
+                },
+                surface: {
+                    DEFAULT: colors.neutral[700],
+                    foreground: colors.neutral[300],
+                },
+                "surface-1": {
+                    DEFAULT: colors.neutral[600],
+                    foreground: colors.neutral[200],
+                },
+            },
+            single: {
+                foreground: colors.neutral[50],
+                border: {
+                    DEFAULT: colors.neutral[700],
+                },
+                input: {
+                    DEFAULT: colors.neutral[900],
+                    hover: colors.neutral[800],
+                },
+                ring: `color-mix(in srgb, ${colors.cyan[400]} 25%, transparent)`,
+            },
+        },
+    },
+};
+const theme = { light, dark };
+export default theme;

package/dist/themes/dds.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeSchema } from "../types.js";
+declare const theme: ThemeSchema;
+export default theme;