@handamade/psi-tokens 0.19.0 → 0.21.0

package/dist/components.css

@@ -1,3 +1,26 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-app-shell-sidebar-width: 16rem;
+    --psi-app-shell-sidebar-bg: var(--psi-bg-primary);
+    --psi-app-shell-sidebar-fg: var(--psi-fg-primary);
+    --psi-app-shell-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-banner-bg-neutral: var(--psi-fill-neutral3);
+    --psi-banner-bg-success: var(--psi-fill-tint-success);
+    --psi-banner-bg-warning: var(--psi-fill-tint-warning);
+    --psi-banner-bg-danger: var(--psi-fill-tint-danger);
+    --psi-banner-fg: var(--psi-fg-primary);
+    --psi-banner-icon-fg-neutral: var(--psi-fg-secondary);
+    --psi-banner-icon-fg-success: var(--psi-fg-success);
+    --psi-banner-icon-fg-warning: var(--psi-fg-warning);
+    --psi-banner-icon-fg-danger: var(--psi-fg-danger);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-button-accent-bg: var(--psi-fill-accent);
@@ -123,6 +146,7 @@
     --psi-dialog-backdrop: var(--psi-scrim-heavy);
     --psi-dialog-fg: var(--psi-fg-primary);
     --psi-dialog-title-fg: var(--psi-fg-primary);
+    --psi-dialog-focus-ring: var(--psi-border-focus);
   }
 }
 
@@ -132,6 +156,7 @@
     --psi-field-message-fg: var(--psi-fg-tertiary);
     --psi-field-error-fg: var(--psi-fg-danger);
     --psi-field-marker-fg: var(--psi-fg-danger);
+    --psi-field-required-text-fg: var(--psi-fg-secondary);
     --psi-field-gap: var(--psi-space-6);
   }
 }
@@ -161,6 +186,25 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-inline-alert-bg-neutral: var(--psi-fill-neutral3);
+    --psi-inline-alert-bg-success: var(--psi-fill-tint-success);
+    --psi-inline-alert-bg-warning: var(--psi-fill-tint-warning);
+    --psi-inline-alert-bg-danger: var(--psi-fill-tint-danger);
+    --psi-inline-alert-fg: var(--psi-fg-primary);
+    --psi-inline-alert-icon-fg-neutral: var(--psi-fg-secondary);
+    --psi-inline-alert-icon-fg-success: var(--psi-fg-success);
+    --psi-inline-alert-icon-fg-warning: var(--psi-fg-warning);
+    --psi-inline-alert-icon-fg-danger: var(--psi-fg-danger);
+    --psi-inline-alert-border-neutral: var(--psi-border-neutral);
+    --psi-inline-alert-border-success: var(--psi-fg-success);
+    --psi-inline-alert-border-warning: var(--psi-fg-warning);
+    --psi-inline-alert-border-danger: var(--psi-fg-danger);
+    --psi-inline-alert-radius: var(--psi-radius-8);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-media-tint: none;
@@ -180,6 +224,7 @@
     --psi-menu-item-fg-danger: var(--psi-fg-danger);
     --psi-menu-item-fg-disabled: var(--psi-fg-quaternary);
     --psi-menu-separator-border: var(--psi-border-faint);
+    --psi-menu-focus-ring: var(--psi-border-focus);
   }
 }
 
@@ -192,6 +237,7 @@
     --psi-navbar-link-fg: var(--psi-fg-secondary);
     --psi-navbar-link-fg-hover: var(--psi-fg-primary);
     --psi-navbar-focus-ring: var(--psi-border-focus);
+    --psi-navbar-gutter: var(--psi-gutter);
   }
 }
 
@@ -238,6 +284,36 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-skeleton-bg: var(--psi-fill-neutral4);
+    --psi-skeleton-radius: var(--psi-radius-4);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-nav-tree-item-fg: var(--psi-fg-secondary);
+    --psi-nav-tree-item-fg-current: var(--psi-fg-primary);
+    --psi-nav-tree-item-bg-hover: var(--psi-fill-neutral3);
+    --psi-nav-tree-item-bg-current: var(--psi-fill-neutral4);
+    --psi-nav-tree-indicator: var(--psi-fill-accent);
+    --psi-nav-tree-group-fg: var(--psi-fg-secondary);
+    --psi-nav-tree-radius: var(--psi-control-radius);
+    --psi-nav-tree-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-skip-link-bg: var(--psi-surface-bg);
+    --psi-skip-link-fg: var(--psi-fg-primary);
+    --psi-skip-link-border: var(--psi-surface-border);
+    --psi-skip-link-radius: var(--psi-control-radius);
+    --psi-skip-link-focus-ring: var(--psi-border-focus);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-surface-bg: var(--psi-bg-secondary);

package/dist/contrast-matrix.js

@@ -108,6 +108,14 @@ export const wcagAAPairs = [
     // the fgAccent/fillTintAccent pair above: a selected row keeps ordinary
     // body text, it does not recolor it to the accent.
     { fg: "fgPrimary", bg: "fillTintAccent", minRatio: 4.5 },
+    // Body text on the status tints (D86): Banner and InlineAlert set their
+    // title and body in fgPrimary on fill-tint-{success,warning,danger}. The
+    // tints are 12–15% of the status foreground over the canvas, so every
+    // shipped theme clears this by a wide margin; it is gated because a
+    // consumer theme built with psi-theme (D81) is held to the same matrix.
+    { fg: "fgPrimary", bg: "fillTintSuccess", minRatio: 4.5 },
+    { fg: "fgPrimary", bg: "fillTintWarning", minRatio: 4.5 },
+    { fg: "fgPrimary", bg: "fillTintDanger", minRatio: 4.5 },
     // Toast's status icon on the elevated surface (D64/D65). The three pairs
     // above gate these foregrounds on bgPrimary; --psi-surface-bg — what Toast,
     // Menu and Dialog all alias — resolves to bgSecondary, which was ungated for

package/dist/dsl/validator.d.ts

@@ -0,0 +1,12 @@
+import type { SlotMap, ThemeDef } from "./types.js";
+export declare class ValidationError extends Error {
+    readonly path: string[];
+    constructor(message: string, path?: string[]);
+}
+export declare function validate(theme: ThemeDef, slots: SlotMap, existingNames?: string[]): void;
+/** D46: the same token name must carry identical scopes in every theme —
+ * scopes are a property of the token's meaning, not of a theme. */
+export declare function validateScopeConsistency(themes: Record<string, ThemeDef>): void;
+/** D46 follow-up (HAN-21): reject semantic token kebab names that a
+ * scale-family lookup would shadow before the semantic lookup runs. */
+export declare function validateNoScalePrefixShadow(kebabNames: readonly string[]): void;

package/dist/dsl/validator.js

@@ -0,0 +1,97 @@
+import { isKnownScopeEntry } from "../scopes.js";
+// ── Validation error ───────────────────────────────────────────────
+export class ValidationError extends Error {
+    path;
+    constructor(message, path = []) {
+        super(message);
+        this.name = "ValidationError";
+        this.path = path;
+    }
+}
+// ── Cycle detection ────────────────────────────────────────────────
+function detectCycles(theme) {
+    const visited = new Set();
+    const inStack = new Set();
+    function dfs(name, chain) {
+        if (inStack.has(name)) {
+            const cycleStart = chain.indexOf(name);
+            const cycle = chain.slice(cycleStart).concat(name);
+            throw new ValidationError(`Circular reference detected: ${cycle.join(" → ")}`, cycle);
+        }
+        if (visited.has(name))
+            return;
+        inStack.add(name);
+        chain.push(name);
+        const token = theme[name];
+        if (token?.from.type === "ref") {
+            dfs(token.from.name, chain);
+        }
+        chain.pop();
+        inStack.delete(name);
+        visited.add(name);
+    }
+    for (const name of Object.keys(theme)) {
+        dfs(name, []);
+    }
+}
+// ── Main validator ─────────────────────────────────────────────────
+export function validate(theme, slots, existingNames = []) {
+    const slotNames = new Set(Object.keys(slots));
+    const tokenNames = new Set(Object.keys(theme));
+    // Check for duplicate names against existingNames
+    for (const name of tokenNames) {
+        if (existingNames.includes(name)) {
+            throw new ValidationError(`Duplicate token name: "${name}" already exists`, [name]);
+        }
+    }
+    // Validate each token's source
+    for (const [name, token] of Object.entries(theme)) {
+        const { from } = token;
+        if (from.type === "slot") {
+            if (!slotNames.has(from.name)) {
+                throw new ValidationError(`Unknown slot "${from.name}" in token "${name}"`, [name]);
+            }
+        }
+        else if (from.type === "ref") {
+            if (!tokenNames.has(from.name)) {
+                throw new ValidationError(`Unknown ref "${from.name}" in token "${name}"`, [name]);
+            }
+        }
+        for (const entry of token.scopes ?? []) {
+            if (!isKnownScopeEntry(entry)) {
+                throw new ValidationError(`Unknown scope entry "${entry}" in token "${name}" — not a known CSS property or declared group`, [name]);
+            }
+        }
+    }
+    // Detect cycles in ref chains
+    detectCycles(theme);
+}
+/** D46: the same token name must carry identical scopes in every theme —
+ * scopes are a property of the token's meaning, not of a theme. */
+export function validateScopeConsistency(themes) {
+    const seen = new Map();
+    for (const [themeName, theme] of Object.entries(themes)) {
+        for (const [name, def] of Object.entries(theme)) {
+            const key = JSON.stringify(def.scopes ?? null);
+            const prior = seen.get(name);
+            if (prior === undefined) {
+                seen.set(name, { theme: themeName, scopes: key });
+            }
+            else if (prior.scopes !== key) {
+                throw new ValidationError(`Scope drift for token "${name}": ${prior.theme} declares ${prior.scopes}, ${themeName} declares ${key}`, [name]);
+            }
+        }
+    }
+}
+// Both gates resolve --psi-* names scale-first, so a semantic token whose
+// kebab name starts with a scale-family prefix would be silently shadowed.
+const SCALE_FAMILY_PREFIX = /^(space|size|radius|text|font|duration|ease|z|focus-ring)-/;
+/** D46 follow-up (HAN-21): reject semantic token kebab names that a
+ * scale-family lookup would shadow before the semantic lookup runs. */
+export function validateNoScalePrefixShadow(kebabNames) {
+    for (const name of kebabNames) {
+        if (SCALE_FAMILY_PREFIX.test(name)) {
+            throw new ValidationError(`Semantic token "${name}" starts with a scale-family prefix — it would be shadowed by the scale lookup in the build and stylelint gates`, [name]);
+        }
+    }
+}

package/dist/dtcg/acme.json

@@ -155,7 +155,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -167,7 +168,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -607,6 +609,20 @@
         "$type": "dimension",
         "$value": "1.5rem"
       }
+    },
+    "focusRing": {
+      "width": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offsetInset": {
+        "$type": "dimension",
+        "$value": "-2px"
+      }
     }
   },
   "typography": {

package/dist/dtcg/dark.json

@@ -155,7 +155,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -167,7 +168,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -607,6 +609,20 @@
         "$type": "dimension",
         "$value": "1.5rem"
       }
+    },
+    "focusRing": {
+      "width": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offsetInset": {
+        "$type": "dimension",
+        "$value": "-2px"
+      }
     }
   },
   "typography": {

package/dist/dtcg/ember.json

@@ -155,7 +155,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -167,7 +168,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -607,6 +609,20 @@
         "$type": "dimension",
         "$value": "1.5rem"
       }
+    },
+    "focusRing": {
+      "width": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offsetInset": {
+        "$type": "dimension",
+        "$value": "-2px"
+      }
     }
   },
   "typography": {

package/dist/dtcg/light.json

@@ -155,7 +155,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -167,7 +168,8 @@
         "$extensions": {
           "psi": {
             "scopes": [
-              "text"
+              "text",
+              "border"
             ]
           }
         }
@@ -607,6 +609,20 @@
         "$type": "dimension",
         "$value": "1.5rem"
       }
+    },
+    "focusRing": {
+      "width": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "offsetInset": {
+        "$type": "dimension",
+        "$value": "-2px"
+      }
     }
   },
   "typography": {

package/dist/emit/css.d.ts

@@ -0,0 +1,30 @@
+import type { ChannelOp, Palette, SlotMap, ThemeDef, TokenDef } from "../dsl/types.js";
+import type { BrandFonts } from "../themes/customers/index.js";
+export declare function camelToKebab(str: string): string;
+export declare function tokenVar(name: string): string;
+export declare function paletteVar(name: string): string;
+/**
+ * Convert a ChannelOp to its CSS representation within oklch(from ...).
+ * - set  → literal value
+ * - delta → calc(channel +/- value)
+ * - cap  → min(channel, value)
+ */
+export declare function opToCSS(channel: string, op: ChannelOp): string;
+/**
+ * Assemble the full oklch(from var(...) ...) expression for a token.
+ *
+ * Slot-sourced token with ops:
+ *   oklch(from var(--psi-palette-sapphire) 0.65 min(c, 0.23) h)
+ *
+ * Ref-sourced token with alpha:
+ *   oklch(from var(--psi-fg-primary) l c h / 0.7)
+ *
+ * No-op (just a slot reference, no ops, no alpha):
+ *   var(--psi-palette-platinum)
+ */
+export declare function tokenToLiveCSS(def: TokenDef, slots: SlotMap): string;
+export declare function emitBaseCSS(palette: Palette): string;
+export declare function emitThemeCSS(themeName: string, theme: ThemeDef, palette: Palette, slots: SlotMap, opts?: {
+    fonts?: BrandFonts;
+    componentOverrides?: Record<string, string>;
+}): string;

package/dist/emit/css.js

@@ -0,0 +1,120 @@
+// ── Helpers ────────────────────────────────────────────────────────
+export function camelToKebab(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+export function tokenVar(name) {
+    return `--psi-${camelToKebab(name)}`;
+}
+export function paletteVar(name) {
+    return `--psi-palette-${name}`;
+}
+/**
+ * Convert a ChannelOp to its CSS representation within oklch(from ...).
+ * - set  → literal value
+ * - delta → calc(channel +/- value)
+ * - cap  → min(channel, value)
+ */
+export function opToCSS(channel, op) {
+    switch (op.op) {
+        case "set":
+            return `${op.value}`;
+        case "delta": {
+            const sign = op.value >= 0 ? "+" : "-";
+            const abs = Math.abs(op.value);
+            return `calc(${channel} ${sign} ${abs})`;
+        }
+        case "cap":
+            return `min(${channel}, ${op.value})`;
+    }
+}
+/**
+ * Assemble the full oklch(from var(...) ...) expression for a token.
+ *
+ * Slot-sourced token with ops:
+ *   oklch(from var(--psi-palette-sapphire) 0.65 min(c, 0.23) h)
+ *
+ * Ref-sourced token with alpha:
+ *   oklch(from var(--psi-fg-primary) l c h / 0.7)
+ *
+ * No-op (just a slot reference, no ops, no alpha):
+ *   var(--psi-palette-platinum)
+ */
+export function tokenToLiveCSS(def, slots) {
+    const hasOps = def.l || def.c || def.h;
+    const hasAlpha = def.alpha !== undefined;
+    // Determine the source CSS var
+    let sourceVar;
+    if (def.from.type === "slot") {
+        const paletteName = slots[def.from.name];
+        sourceVar = `var(${paletteVar(paletteName)})`;
+    }
+    else {
+        sourceVar = `var(${tokenVar(def.from.name)})`;
+    }
+    // If no operations and no alpha, just reference the var directly
+    if (!hasOps && !hasAlpha) {
+        return sourceVar;
+    }
+    // Build oklch(from ...) expression
+    const lPart = def.l ? opToCSS("l", def.l) : "l";
+    const cPart = def.c ? opToCSS("c", def.c) : "c";
+    const hPart = def.h ? opToCSS("h", def.h) : "h";
+    let expr = `oklch(from ${sourceVar} ${lPart} ${cPart} ${hPart}`;
+    if (hasAlpha) {
+        expr += ` / ${def.alpha}`;
+    }
+    expr += `)`;
+    return expr;
+}
+// ── Base CSS (palette) ────────────────────────────────────────────
+export function emitBaseCSS(palette) {
+    const lines = [];
+    lines.push("@layer psi.base, psi.theme, psi.components, psi.utilities;");
+    lines.push("");
+    lines.push("@layer psi.base {");
+    lines.push("  :root {");
+    for (const [name, entry] of Object.entries(palette)) {
+        lines.push(`    ${paletteVar(name)}: oklch(${entry.l} ${entry.c} ${entry.h});`);
+    }
+    lines.push("  }");
+    lines.push("}");
+    return lines.join("\n") + "\n";
+}
+// ── Theme CSS (semantic tokens) ───────────────────────────────────
+export function emitThemeCSS(themeName, theme, palette, slots, opts) {
+    const lines = [];
+    // Determine selector
+    const selector = themeName === "light"
+        ? `:root, [data-psi-theme="light"]`
+        : `[data-psi-theme="${themeName}"]`;
+    lines.push("@layer psi.theme {");
+    lines.push(`  ${selector} {`);
+    // Scope this theme's own palette vars inside its selector block so a
+    // customer brand's colors ship only with that theme, and two customers
+    // that happen to reuse an anchor name can't collide in a shared :root.
+    for (const [name, entry] of Object.entries(palette)) {
+        lines.push(`    ${paletteVar(name)}: oklch(${entry.l} ${entry.c} ${entry.h});`);
+    }
+    for (const [name, def] of Object.entries(theme)) {
+        const cssVar = tokenVar(name);
+        const value = tokenToLiveCSS(def, slots);
+        lines.push(`    ${cssVar}: ${value};`);
+    }
+    if (opts?.fonts) {
+        for (const [role, stack] of Object.entries(opts.fonts)) {
+            lines.push(`    --psi-font-${role}: ${stack};`);
+        }
+    }
+    lines.push("  }");
+    lines.push("}");
+    if (opts?.componentOverrides && Object.keys(opts.componentOverrides).length > 0) {
+        lines.push("@layer psi.components {");
+        lines.push(`  [data-psi-theme="${themeName}"] {`);
+        for (const [name, value] of Object.entries(opts.componentOverrides)) {
+            lines.push(`    --psi-${name}: ${value};`);
+        }
+        lines.push("  }");
+        lines.push("}");
+    }
+    return lines.join("\n") + "\n";
+}

package/dist/gamut.d.ts

@@ -0,0 +1,4 @@
+import type { Palette, SlotMap, ThemeDef } from "./dsl/types.js";
+import type { ResolvedTheme } from "./dsl/resolver.js";
+/** Warn when sRGB clamping moved a resolved value by ΔE2000 > 2 (D19). */
+export declare function gamutWarnings(resolved: ResolvedTheme, theme: ThemeDef, palette: Palette, slots: SlotMap): string[];

package/dist/gamut.js

@@ -0,0 +1,44 @@
+import { differenceCiede2000 } from "culori";
+const dE = differenceCiede2000();
+function applyOp(base, op) {
+    if (!op)
+        return base;
+    if (op.op === "set")
+        return op.value;
+    if (op.op === "delta")
+        return base + op.value;
+    return Math.min(base, op.value); // cap
+}
+/** Warn when sRGB clamping moved a resolved value by ΔE2000 > 2 (D19). */
+export function gamutWarnings(resolved, theme, palette, slots) {
+    const warnings = [];
+    const raw = new Map();
+    // Recomputes pre-clamp OKLCH values by replaying token operations WITHOUT sRGB clamping.
+    // Unlike the resolver (which clamps at each step), this intentionally propagates unclamped values
+    // through ref chains so the warning reflects cumulative drift from authored intent. Do not "fix" this
+    // to match the resolver's clamping behavior — the unclamped result is required to diagnose palette issues.
+    function rawOf(name) {
+        const hit = raw.get(name);
+        if (hit)
+            return hit;
+        const def = theme[name];
+        const base = def.from.type === "slot"
+            ? palette[slots[def.from.name]]
+            : rawOf(def.from.name);
+        const val = {
+            l: applyOp(base.l, def.l),
+            c: applyOp(base.c, def.c),
+            h: applyOp(base.h, def.h),
+        };
+        raw.set(name, val);
+        return val;
+    }
+    for (const name of Object.keys(theme)) {
+        const pre = { mode: "oklch", ...rawOf(name) };
+        const post = { mode: "oklch", ...resolved[name].oklch };
+        const d = dE(pre, post);
+        if (d > 2)
+            warnings.push(`${name}: clamped ΔE ${d.toFixed(1)} (${JSON.stringify(rawOf(name))} → hex ${resolved[name].hex}) — adjust the palette anchor`);
+    }
+    return warnings;
+}

package/dist/guidance.json

@@ -54,14 +54,14 @@
     "Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.",
     "--psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).",
     "Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.",
-    "Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field).",
+    "Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"end\" of Fields (D87).",
     "Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group."
   ],
   "states": {
     "hover": "L - 0.04",
     "active": "L - 0.08",
     "disabled": "element opacity 0.4 (keeps hue)",
-    "focus": "2px ring var(--psi-{component}-focus-ring)"
+    "focus": "outline: var(--psi-focus-ring-width) solid var(--psi-{component}-focus-ring) on :focus-visible, at --psi-focus-ring-offset (outside) or --psi-focus-ring-offset-inset (inside) — D82"
   },
   "typographyDefaults": {
     "body": "16-24-regular",

package/dist/resolved/acme.json

@@ -157,7 +157,8 @@
       "hex": "#007048",
       "formula": "slot(success) → L set(0.48), C cap(0.1086)",
       "scopes": [
-        "text"
+        "text",
+        "border"
       ]
     },
     "fgWarning": {
@@ -170,7 +171,8 @@
       "hex": "#775800",
       "formula": "slot(warning) → L set(0.48), C cap(0.0984)",
       "scopes": [
-        "text"
+        "text",
+        "border"
       ]
     },
     "fgDanger": {
@@ -574,6 +576,11 @@
         "tooltip": 1100
       }
     },
+    "focusRing": {
+      "width": 2,
+      "offset": 2,
+      "offsetInset": -2
+    },
     "scopes": {
       "space": [
         "gap"