@eos-ui/tokens 0.0.0-stage → 0.1.1

package/dist/theme.js

@@ -0,0 +1,278 @@
+import { defaults, groups } from "./generated/defaults.js";
+import { contrast, fromOklch, luminance, parseHex, reachContrast, settleContrast, tint, toOklch, withLightness, } from "./color.js";
+/** Cascade order of the library. Later layers win, and each layer only builds on the ones before it. */
+export const LAYER_ORDER = "e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.account, e.page";
+const RADII = {
+    sharp: { sm: "0px", md: "2px", lg: "4px" },
+    default: { sm: "4px", md: "8px", lg: "16px" },
+    round: { sm: "8px", md: "14px", lg: "24px" },
+};
+const PAIRS = [
+    { fg: "ink", bg: "surface", min: 7, role: "Body text" },
+    { fg: "ink", bg: "surface-tint", min: 7, role: "Text on the tinted ground" },
+    { fg: "muted", bg: "surface", min: 4.5, role: "Secondary text" },
+    { fg: "on-primary", bg: "primary", min: 4.5, role: "Primary button label" },
+    { fg: "primary", bg: "surface", min: 4.5, role: "Links and small primary text" },
+    { fg: "on-secondary", bg: "secondary", min: 4.5, role: "Secondary button label" },
+    { fg: "on-danger", bg: "danger", min: 4.5, role: "Danger button label" },
+    { fg: "danger", bg: "surface", min: 4.5, role: "Error text" },
+    { fg: "danger", bg: "danger-soft", min: 4.5, role: "Danger notice text" },
+    { fg: "warning-strong", bg: "warning-soft", min: 4.5, role: "Warning notice text" },
+    { fg: "secondary", bg: "secondary-soft", min: 4.5, role: "Success notice text" },
+    { fg: "border", bg: "surface", min: 3, role: "Card outline (non-text)" },
+    { fg: "border-strong", bg: "surface", min: 3, role: "Control edge (non-text)" },
+    { fg: "ink", bg: "background", min: 7, role: "Text on the page" },
+    { fg: "muted", bg: "background", min: 4.5, role: "Secondary text on the page" },
+    { fg: "primary", bg: "background", min: 4.5, role: "Links on the page" },
+    { fg: "border", bg: "background", min: 3, role: "Outline on the page (non-text)" },
+];
+const DARK_BELOW = 0.179;
+const BLACK = "#000000";
+const WHITE = "#ffffff";
+const DARK_DANGER = "#d33b30";
+const DARK_WARNING = "#ffc857";
+const DARK_WELL = "inset 0 2px 0 0 rgba(0, 0, 0, 0.55)";
+const MOTION = {
+    default: {},
+    snappy: { "duration-tap": "50ms", "duration-move": "140ms" },
+    gentle: { "duration-tap": "140ms", "duration-move": "380ms", "easing-out": "cubic-bezier(0.4, 0, 0.2, 1)" },
+    none: { "duration-tap": "0ms", "duration-move": "0ms" },
+};
+const positive = (n) => typeof n === "number" && Number.isFinite(n) && n > 0 ? n : undefined;
+const px = (n) => `${Math.round(n * 100) / 100}px`;
+function scaleTokens(out, names, factor) {
+    const f = positive(factor);
+    if (f === undefined || f === 1)
+        return;
+    for (const name of names)
+        out[name] = px(Math.max(1, Math.round(parseFloat(defaults[name]) * f)));
+}
+function toneHue(soft, strong, tone) {
+    const hue = toOklch(defaults[soft]).h;
+    return tone ? hue + toOklch(tone).h - toOklch(defaults[strong]).h : hue;
+}
+function deriveStrokes(input, out) {
+    const hair = positive(input.strokes?.hair);
+    const focus = positive(input.strokes?.focus);
+    if (hair !== undefined) {
+        out["stroke-hair"] = px(hair);
+        out["stroke-card"] = px(hair);
+        out["stroke-edge"] = px(hair * 1.5);
+    }
+    if (focus !== undefined) {
+        out["stroke-focus"] = px(focus);
+        out["focus-gap"] = px(focus);
+        out["focus-gap-field"] = "-1px";
+    }
+}
+const SOFT = [
+    [1, 2, 0, 0.08],
+    [4, 8, -2, 0.1],
+    [12, 24, -6, 0.14],
+    [24, 48, -12, 0.18],
+];
+const LIFTED = [
+    [1, 2, 0, 0.1],
+    [6, 12, -3, 0.12],
+    [18, 36, -8, 0.18],
+    [32, 64, -16, 0.2],
+];
+const CARD = [
+    [1, 2, 0, 0.12],
+    [4, 8, -2, 0.08],
+];
+function shadowRgb(out, dark) {
+    const ground = toOklch(out["background"]);
+    const [r, g, b] = parseHex(fromOklch({ l: dark ? 0.07 : 0.2613, c: Math.min(ground.c, dark ? 0.03 : 0.0408), h: ground.h }));
+    return `${r}, ${g}, ${b}`;
+}
+function layers(set, dark, base) {
+    return set
+        .map(([y, blur, spread, alpha]) => `0 ${y}px ${blur}px ${spread}px rgba(${base}, ${Math.round(Math.min(0.9, dark ? alpha * 2.4 : alpha) * 100) / 100})`)
+        .join(", ");
+}
+function deriveElevation(style, out, dark) {
+    const ring = (w) => `0 0 0 ${w} ${out["border"]}`;
+    const hair = out["stroke-hair"];
+    const card = style === "bold" ? "2px" : hair;
+    out["stroke-card"] = card;
+    const base = shadowRgb(out, dark);
+    if (style === "lifted") {
+        out["edge"] = `${ring(card)}, ${layers(CARD, dark, base)}`;
+        out["float"] = `${ring(card)}, ${layers(LIFTED, dark, base)}`;
+    }
+    else if (style === "bold") {
+        out["edge"] = ring(card);
+        out["well"] = `inset 0 3px 0 0 ${dark ? "rgba(0, 0, 0, 0.55)" : "rgba(0, 0, 0, 0.14)"}`;
+        out["float"] = `${ring(card)}, 4px 4px 0 0 rgba(${base}, ${dark ? 0.75 : 0.32}), 0 14px 28px -10px rgba(${base}, ${dark ? 0.7 : 0.22})`;
+    }
+    else {
+        out["edge"] = ring(card);
+        out["float"] = `${ring(card)}, ${layers(SOFT, dark, base)}`;
+    }
+}
+function ensure(out, token, against, min) {
+    const value = out[token];
+    if (contrast(value, against) < min)
+        out[token] = reachContrast(value, against, min);
+}
+function deriveGround(input, out, dark) {
+    const surface = input.surface ?? out["surface"];
+    if (input.surface) {
+        out["surface"] = input.surface;
+        const hue = toOklch(input.brand ?? out["brand-blue"]).h;
+        const l = toOklch(input.surface).l;
+        out["surface-tint"] = fromOklch({ l: Math.min(1, Math.max(0, dark ? l + 0.06 : l - 0.045)), c: 0.025, h: hue });
+        for (const [token, hueSource] of [
+            ["secondary-soft", toOklch(input.accent ?? defaults["secondary-soft"]).h],
+            ["danger-soft", toneHue("danger-soft", "danger", input.danger)],
+            ["warning-soft", toneHue("warning-soft", "warning-strong", input.warning)],
+        ]) {
+            const base = toOklch(defaults[token]);
+            const chroma = dark ? 0.05 : token === "secondary-soft" && input.accent ? 0.04 : base.c;
+            const offset = token === "secondary-soft" && input.accent ? -0.04 : base.l - 1;
+            out[token] = withLightness(surface, dark ? l + 0.07 : l + offset, chroma, hueSource);
+        }
+    }
+    out["background"] = input.background ?? (input.surface ? surface : out["background"]);
+    const foreground = input.foreground ?? (input.surface ? (dark ? WHITE : defaults["ink"]) : undefined);
+    if (foreground) {
+        out["ink"] = foreground;
+        out["muted"] = settleContrast(foreground, surface, 7);
+        out["border"] = settleContrast(foreground, surface, 3.4);
+        out["border-strong"] = settleContrast(foreground, surface, 4.5);
+    }
+}
+function derive(input) {
+    const out = { ...defaults };
+    const dark = input.surface !== undefined && luminance(input.surface) < DARK_BELOW;
+    if (dark) {
+        for (const t of ["on-primary", "on-secondary", "on-danger"])
+            out[t] = BLACK;
+        out["warning-strong"] = input.warning ?? DARK_WARNING;
+        out["scrim"] = "rgb(0 0 0 / 0.7)";
+        out["well"] = DARK_WELL;
+    }
+    const dangerBase = input.danger ?? (dark ? DARK_DANGER : undefined);
+    if (dangerBase)
+        out["danger"] = reachContrast(dangerBase, out["on-danger"], 7);
+    if (input.brand)
+        out["brand-blue"] = input.brand;
+    if (input.brand || dark)
+        out["primary"] = reachContrast(out["brand-blue"], out["on-primary"], 7);
+    if (input.accent)
+        out["brand-green"] = input.accent;
+    if (input.accent || dark)
+        out["secondary"] = reachContrast(out["brand-green"], out["on-secondary"], 7);
+    if (input.brand && !input.surface)
+        out["surface-tint"] = tint(input.brand);
+    if (input.accent && !input.surface)
+        out["secondary-soft"] = tint(input.accent, 0.96, 0.04);
+    deriveGround(input, out, dark);
+    if (!input.surface) {
+        for (const [token, tone, strong] of [
+            ["danger-soft", input.danger, "danger"],
+            ["warning-soft", input.warning, "warning-strong"],
+        ]) {
+            const hue = toneHue(token, strong, tone);
+            const base = toOklch(defaults[token]);
+            if (tone && hue !== base.h)
+                out[token] = withLightness(defaults[token], base.l, base.c, hue);
+        }
+    }
+    if (input.warning && !dark)
+        out["warning-strong"] = reachContrast(input.warning, out["surface"], 7);
+    const surface = out["surface"];
+    if (input.surface) {
+        ensure(out, "primary", surface, 4.5);
+        ensure(out, "secondary", surface, 4.5);
+        ensure(out, "secondary", out["secondary-soft"], 4.5);
+    }
+    if (input.surface || input.danger) {
+        ensure(out, "danger", surface, 4.5);
+        ensure(out, "danger", out["danger-soft"], 4.5);
+    }
+    if (input.surface || input.warning) {
+        ensure(out, "warning-strong", surface, 4.5);
+        ensure(out, "warning-strong", out["warning-soft"], 4.5);
+    }
+    if (input.fonts?.sans)
+        out["font-sans"] = input.fonts.sans;
+    if (input.fonts?.mono)
+        out["font-mono"] = input.fonts.mono;
+    if (input.radius) {
+        const r = typeof input.radius === "string" ? RADII[input.radius] : { ...RADII.default, ...input.radius };
+        out["radius-sm"] = r.sm;
+        out["radius-md"] = r.md;
+        out["radius-lg"] = r.lg;
+    }
+    scaleTokens(out, groups.fontSize, input.textScale);
+    scaleTokens(out, groups.spacing, input.spaceScale);
+    deriveStrokes(input, out);
+    Object.assign(out, MOTION[input.motion ?? "default"]);
+    const height = positive(input.controlHeight);
+    if (height !== undefined) {
+        out["control-height"] = px(height);
+        out["chip-height"] = px(Math.max(2, Math.round(height / 4) * 2));
+    }
+    if (input.elevation || input.background || input.surface || input.foreground || positive(input.strokes?.hair) !== undefined) {
+        deriveElevation(input.elevation ?? "outline", out, dark);
+    }
+    Object.assign(out, input.tokens);
+    return out;
+}
+function resolve(tokens, name, seen = new Set()) {
+    const v = tokens[name] ?? "";
+    const m = /^var\(--([a-z-]+)\)$/.exec(v);
+    if (!m || seen.has(name))
+        return v;
+    seen.add(name);
+    return resolve(tokens, m[1], seen);
+}
+export function checkContrast(tokens) {
+    const issues = [];
+    for (const { fg, bg, min, role } of PAIRS) {
+        const a = resolve(tokens, fg);
+        const b = resolve(tokens, bg);
+        if (!a.startsWith("#") || !b.startsWith("#"))
+            continue;
+        const ratio = contrast(a, b);
+        if (ratio < min)
+            issues.push({ pair: [fg, bg], ratio: Math.round(ratio * 100) / 100, min, role });
+    }
+    return issues;
+}
+const WASHES = [
+    "--e-wash-hover: color-mix(in srgb, var(--e-ink) 8%, transparent);",
+    "--e-wash-press: color-mix(in srgb, var(--e-ink) 15%, transparent);",
+    "--e-wash-ring: color-mix(in srgb, var(--e-ink) 38%, transparent);",
+];
+export function defineTheme(input = {}) {
+    const name = input.name ?? "custom";
+    const tokens = derive(input);
+    const issues = checkContrast(tokens);
+    if (input.strict && issues.length) {
+        throw new Error("Theme fails contrast:\n" +
+            issues.map((i) => `  ${i.role}: ${i.pair.join(" on ")} is ${i.ratio}:1, needs ${i.min}:1`).join("\n"));
+    }
+    return {
+        name,
+        tokens,
+        issues,
+        css({ selector = ":root", layer = true, header = false } = {}) {
+            const decls = Object.entries(tokens)
+                .map(([k, v]) => `  --e-${k}: ${v};`)
+                .join("\n");
+            const derived = `${selector}, [data-e-theme] {\n${WASHES.map((w) => "  " + w).join("\n")}\n}`;
+            const rules = `${selector} {\n${decls}\n}\n${derived}\n`;
+            const body = layer ? `@layer e.tokens {\n${rules}}\n` : rules;
+            return (header ? `/* Generated from tokens.json. Theme: ${name}. */\n@layer ${LAYER_ORDER};\n` : "") + body;
+        },
+        apply(el = document.documentElement) {
+            for (const [k, v] of Object.entries(tokens))
+                el.style.setProperty(`--e-${k}`, v);
+            el.setAttribute("data-e-theme", name);
+        },
+    };
+}
+export { defaults, groups };

package/dist/tokens.css

@@ -0,0 +1,75 @@
+/* Generated from tokens.json. Theme: light. */
+@layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.account, e.page;
+@layer e.tokens {
+:root {
+  --e-brand-blue: #2c95b4;
+  --e-brand-green: #72c451;
+  --e-primary: #17586d;
+  --e-on-primary: #ffffff;
+  --e-secondary: #2b5c1b;
+  --e-on-secondary: #ffffff;
+  --e-secondary-soft: #e8f5e1;
+  --e-danger: #962019;
+  --e-on-danger: #ffffff;
+  --e-danger-soft: #fbe9e7;
+  --e-warning-strong: #714a00;
+  --e-warning-soft: #fdf3dc;
+  --e-background: #ffffff;
+  --e-surface: #ffffff;
+  --e-surface-tint: #eaf4f8;
+  --e-ink: #000000;
+  --e-scrim: rgb(11 40 52 / 0.55);
+  --e-muted: #515151;
+  --e-border: #7f8f96;
+  --e-border-strong: #767676;
+  --e-focus-ring: var(--e-ink);
+  --e-focus-field: var(--e-primary);
+  --e-space-1: 4px;
+  --e-space-2: 8px;
+  --e-space-3: 12px;
+  --e-space-4: 16px;
+  --e-space-6: 24px;
+  --e-space-8: 32px;
+  --e-radius-sm: 4px;
+  --e-radius-md: 8px;
+  --e-radius-lg: 16px;
+  --e-radius-pill: 999px;
+  --e-edge: 0 0 0 1px #7f8f96;
+  --e-well: inset 0 2px 0 0 rgba(0, 0, 0, 0.1);
+  --e-float: 0 0 0 1px #7f8f96, 0 1px 2px 0px rgba(36, 36, 36, 0.08), 0 4px 8px -2px rgba(36, 36, 36, 0.1), 0 12px 24px -6px rgba(36, 36, 36, 0.14), 0 24px 48px -12px rgba(36, 36, 36, 0.18);
+  --e-text-xs: 12px;
+  --e-text-sm: 14px;
+  --e-text-md: 16px;
+  --e-text-lg: 18px;
+  --e-text-xl: 20px;
+  --e-text-2xl: 24px;
+  --e-text-3xl: 30px;
+  --e-text-4xl: 36px;
+  --e-control-height: 48px;
+  --e-chip-height: 24px;
+  --e-measure: 62ch;
+  --e-stroke-hair: 1px;
+  --e-stroke-card: 1px;
+  --e-stroke-edge: 1.5px;
+  --e-stroke-focus: 2px;
+  --e-focus-gap: 2px;
+  --e-focus-gap-field: -1px;
+  --e-depth: 2px;
+  --e-duration-tap: 80ms;
+  --e-duration-move: 220ms;
+  --e-easing-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --e-z-raised: 1;
+  --e-z-sticky: 5;
+  --e-z-tooltip: 55;
+  --e-z-modal: 40;
+  --e-z-popover: 45;
+  --e-z-toast: 50;
+  --e-font-sans: "Jost", Futura, "Century Gothic", "Avenir Next", system-ui, sans-serif;
+  --e-font-mono: "Spline Sans Mono", ui-monospace, Menlo, Consolas, monospace;
+}
+:root, [data-e-theme] {
+  --e-wash-hover: color-mix(in srgb, var(--e-ink) 8%, transparent);
+  --e-wash-press: color-mix(in srgb, var(--e-ink) 15%, transparent);
+  --e-wash-ring: color-mix(in srgb, var(--e-ink) 38%, transparent);
+}
+}

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@eos-ui/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Eos design tokens: CSS custom properties, typed values and a theme generator with contrast checks.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/tokens.json"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./src/tokens.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dame-G/eos.git",
+    "directory": "packages/tokens"
+  },
+  "devDependencies": {
+    "vitest": "^5.0.5"
+  },
+  "homepage": "https://eos.dame.gg",
+  "bugs": {
+    "url": "https://github.com/Dame-G/eos/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "components",
+    "accessible",
+    "a11y",
+    "design-tokens",
+    "theming"
+  ],
+  "scripts": {
+    "generate": "node scripts/generate.mjs",
+    "build": "node scripts/build.mjs",
+    "typecheck": "node scripts/generate.mjs && tsc -p tsconfig.json --noEmit",
+    "test": "node scripts/generate.mjs && vitest run"
+  }
 }