@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/currencies.ts

@@ -0,0 +1,70 @@
+// `@eifi1/ui-kit/currencies` — the currencies the kit's pickers offer, as plain data
+// (0.35, keksdose's 0.34 report).
+//
+// This module imports NOTHING: no React, no stylesheet, no other kit module. That is the
+// entry's whole promise, because an app's BUILD reads it in Node — keksdose's Vite plugin
+// builds its flag-icons subset from these country codes while Vite loads its config. Until
+// 0.35 that plugin parsed the `country` literals out of dist/components/currency-select.js;
+// 0.34 moved the list into the picker's option list and 91 of its test files failed at
+// load. A file inside dist/ is not something the kit promises; an entry is.
+// packaging-contract.test.ts pins the purity, scripts/verify-package.mjs the load in Node.
+//
+// CurrencySelect, AmountInput's currency chip and NumberInput's code detection read this
+// same array (components/currency-option-list re-exports it, and currency-select as it
+// always has), so the list the pickers show and the flags an app ships cannot drift.
+
+export interface CurrencyOption {
+  code: string;
+  name: string;
+  symbol: string;
+  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
+  country: string;
+}
+
+export const CURRENCIES: CurrencyOption[] = [
+  { code: "EUR", name: "Euro", symbol: "€", country: "eu" },
+  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
+  { code: "GBP", name: "British Pound", symbol: "£", country: "gb" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥", country: "jp" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł", country: "pl" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč", country: "cz" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "лв", country: "bg" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺", country: "tr" },
+  { code: "RUB", name: "Russian Ruble", symbol: "₽", country: "ru" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥", country: "cn" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹", country: "in" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
+  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
+  { code: "ILS", name: "Israeli Shekel", symbol: "₪", country: "il" },
+  { code: "AED", name: "UAE Dirham", symbol: "د.إ", country: "ae" },
+];
+
+/**
+ * Each currency code → the flag the kit paints for it: the lowercase ISO 3166-1 alpha-2
+ * code flag-icons names it by (`fi-ch`, `flags/4x3/ch.svg`). `CHF` → `"ch"`, `EUR` →
+ * `"eu"` (flag-icons has the EU's flag under that code).
+ *
+ * Derived from {@link CURRENCIES}, so a currency the pickers gain is a flag here too. An
+ * app that ships only the flags it renders builds its subset from these values:
+ *
+ * ```ts
+ * // vite.config.ts — plain Node, no DOM
+ * import { CURRENCY_COUNTRIES } from "@eifi1/ui-kit/currencies";
+ * const flags = new Set(Object.values(CURRENCY_COUNTRIES));
+ * ```
+ */
+export const CURRENCY_COUNTRIES: Record<string, string> = Object.fromEntries(
+  CURRENCIES.map((c) => [c.code, c.country]),
+);

package/src/data-table.ts

@@ -14,6 +14,10 @@ export { DataTable, DEFAULT_DATA_TABLE_SORT_LABELS } from "./components/data-tab
 export type {
   DataTableSortLabels,
   DataTableColumn,
+  // The barrel had these two and this entry did not (refactor audit 2026-10, MOD-5):
+  // the types of a column's `cellProps` and `headProps`.
+  DataTableCellProps,
+  DataTableHeadProps,
   DataTableProps,
   ServerPagination,
   FilterState,

package/src/demo/demo-banner.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { ChevronDown, ChevronUp, Timer } from "lucide-react";
 
 import { cn } from "../lib/cn";
+import { readSessionStored, writeSessionStored } from "../lib/safe-storage";
 import { AlertBanner } from "../components/alert-banner";
-import { Button, IconButton } from "../components/ui";
+import { Button } from "../components/button";
+import { IconButton } from "../components/icon-button";
 import { useAccessAction } from "../landing/access";
 import type { AccessChoice } from "../landing/access";
 import { useLandingLabels } from "../landing/landing-labels";
@@ -14,31 +16,11 @@ import type { DemoCountdown, DemoExpiry } from "./demo-countdown";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
 import type { DemoModel } from "./demo-session";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /** The default `sessionStorage` key of the collapsed state. */
 const COLLAPSE_KEY = "kit.demoBanner.collapsed";
 
-/** `sessionStorage`, guarded like `lib/safe-storage`'s `localStorage`: blocked storage
- *  reads as "not set" and writes nothing. */
-function readSession(key: string): string | null {
-  if (typeof window === "undefined") return null;
-  try {
-    return window.sessionStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-
-function writeSession(key: string, value: string | null): void {
-  if (typeof window === "undefined") return;
-  try {
-    if (value === null) window.sessionStorage.removeItem(key);
-    else window.sessionStorage.setItem(key, value);
-  } catch {
-    // storage blocked: the banner just opens again next time
-  }
-}
-
 /** "Demo · 23 h 12 min left", "Demo · 50 min left", the end, or plain "Demo". */
 function timeText(countdown: DemoCountdown, labels: DemoLabels): string {
   if (countdown.minutesLeft === null) return labels.badge;
@@ -48,7 +30,12 @@ function timeText(countdown: DemoCountdown, labels: DemoLabels): string {
     : labels.hoursLeft(countdown.hours, countdown.minutes);
 }
 
-export interface DemoBannerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2). They
+ * go on to the {@link AlertBanner} strip, so the ref is the strip's own `<div>` — never a
+ * link or a button: the banner takes no `href` or `onClick` of its own.
+ */
+export interface DemoBannerProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** The demo's end: `expires_at` from the `TokenResponse`, or `demo_expires_at` from
    *  `/auth/me` (§5.3). */
   expiresAt: DemoExpiry | null | undefined;
@@ -66,7 +53,7 @@ export interface DemoBannerProps extends Omit<ComponentPropsWithoutRef<"div">, "
   collapseKey?: string;
   /** The clock, for tests and previews. Default `Date.now`. Keep it stable. */
   now?: () => number;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -106,12 +93,14 @@ export function DemoBanner({
   const landing = useLandingLabels(landingLabels);
   const accessLink = useAccessAction(access, landingLabels);
   const countdown = useDemoCountdown(expiresAt, { now, onEnded });
-  const [collapsed, setCollapsed] = useState(() => readSession(collapseKey) === "1");
+  // `sessionStorage`, guarded (lib/safe-storage): blocked storage reads as "not set",
+  // and the banner just opens again next time.
+  const [collapsed, setCollapsed] = useState(() => readSessionStored(collapseKey) === "1");
 
   const toggle = () => {
     const next = !collapsed;
     setCollapsed(next);
-    writeSession(collapseKey, next ? "1" : null);
+    writeSessionStored(collapseKey, next ? "1" : null);
   };
 
   return (

package/src/demo/demo-ended.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { Hourglass } from "lucide-react";
 
 import { cn } from "../lib/cn";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useNoIndex } from "../hooks/use-noindex";
 import type { AuthHeadingLevel } from "../auth/status-parts";
 import { useAccessAction } from "../landing/access";
@@ -12,8 +12,9 @@ import type { LandingLabels } from "../landing/landing-labels";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
 import type { DemoModel } from "./demo-session";
+import type { LabelOverride } from "../i18n/kit-labels";
 
-export interface DemoEndedProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+export interface DemoEndedProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
   /** Which line the page says about the data (§2.3). */
   model: DemoModel;
   /** "Request access". */
@@ -29,7 +30,7 @@ export interface DemoEndedProps extends Omit<ComponentPropsWithoutRef<"div">, "c
   noIndex?: boolean;
   /** Default `h2`, under `AuthLayout`'s `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -67,9 +68,9 @@ export function DemoEnded({
   useNoIndex(noIndex);
   return (
     <div {...rest} className={cn("flex flex-col items-center gap-2 py-4 text-center", className)}>
-      <Hourglass aria-hidden className="size-10 text-[var(--text-placeholder)]" />
-      <Heading className="mt-2 text-xl font-semibold text-[var(--text-primary)]">{labels.endedTitle}</Heading>
-      <p className="max-w-prose text-sm text-[var(--text-secondary)]">
+      <Hourglass aria-hidden className="size-10 text-placeholder" />
+      <Heading className="mt-2 text-xl font-semibold text-primary">{labels.endedTitle}</Heading>
+      <p className="max-w-prose text-sm text-secondary">
         {model === "sandbox" ? labels.endedSandbox : labels.endedReadOnly}
       </p>
       {children}

package/src/demo/demo-labels.ts

@@ -1,4 +1,4 @@
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 
 /**
  * The demo's words (docs/landing-demo-harmonization.md §5) — the `demo` namespace of
@@ -73,6 +73,6 @@ export const DEFAULT_DEMO_LABELS: DemoLabels = {
 
 /** The `demo` namespace, resolved: English, then the provider, then `labels`. The app
  *  reads `writeLocked` from here for its `WriteLockProvider`. */
-export function useDemoLabels(labels?: Partial<DemoLabels>): DemoLabels {
+export function useDemoLabels(labels?: LabelOverride<DemoLabels>): DemoLabels {
   return useKitLabels("demo", DEFAULT_DEMO_LABELS, labels);
 }

package/src/demo/demo-start.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cn } from "../lib/cn";
 import { AlertBanner } from "../components/alert-banner";
-import { Button, Spinner } from "../components/ui";
+import { Button } from "../components/button";
+import { Spinner } from "../components/spinner";
 import { useNoIndex } from "../hooks/use-noindex";
 import { authErrorCode, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
 import { useOncePerKey } from "../auth/status-parts";
@@ -12,6 +13,7 @@ import type { AccessChoice } from "../landing/access";
 import type { LandingLabels } from "../landing/landing-labels";
 import { useDemoLabels } from "./demo-labels";
 import type { DemoLabels } from "./demo-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /** Why a start was refused, in the page's terms (§5.2). */
 type Refusal =
@@ -53,7 +55,7 @@ function messageOf(refusal: Refusal, labels: DemoLabels): string {
 /** The one start a mount makes. */
 const ONCE = "demo";
 
-export interface DemoStartProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface DemoStartProps<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /**
    * Create the demo: the app's `POST /auth/demo-session {locale}`. Resolve with what it
    * answered (the `TokenResponse`, `refresh_token: null`, `expires_at`); reject with the
@@ -70,7 +72,7 @@ export interface DemoStartProps<T> extends Omit<ComponentPropsWithoutRef<"div">,
   /** `false` adds no `noindex` — for a preview. Default `true`: `/demo` is never indexed
    *  (§4.3). */
   noIndex?: boolean;
-  labels?: Partial<DemoLabels>;
+  labels?: LabelOverride<DemoLabels>;
   /** The access words (`landing` namespace) for this instance. */
   landingLabels?: Partial<LandingLabels>;
 }
@@ -125,7 +127,7 @@ export function DemoStart<T>({
           progress line is announced (a region inserted with its text often is not). */}
       <div role="status" aria-live="polite" className="w-full">
         {refusal === null ? (
-          <p className="flex items-center justify-center gap-2 text-sm text-[var(--text-secondary)]">
+          <p className="flex items-center justify-center gap-2 text-sm text-secondary">
             <Spinner label={null} className="size-5" />
             {labels.starting}
           </p>

package/src/eslint/index.ts

@@ -0,0 +1,161 @@
+// `@eifi1/ui-kit/eslint` — the kit's role-utility rule for an app's own markup (round 0.35
+// R5, Kurvenschmiede's Q6).
+//
+// The kit holds its markup to "write `text-muted`, not `text-[var(--text-muted)]`" with
+// `npm run check:tokens`, at zero since 0.34. The apps are asked to follow the same rule
+// (README "How to write a colour"), but nothing in their builds objected when a
+// `[var(--role)]` class came back. This is that check as an ESLint plugin, so an app's
+// `eslint.config.js` turns it on with one line:
+//
+//   import uiKit from "@eifi1/ui-kit/eslint";
+//   export default [..., uiKit.configs.recommended];
+//
+// It reads every string literal and template-literal quasi — a JSX `className`, a `cn()` or
+// `clsx()` argument, a class constant — and reports a `[var(--x)]` class where the property
+// has a role utility for that token, naming it. One utility is an autofix that keeps the
+// variants and the opacity: `hover:text-[var(--text-muted)]/70` → `hover:text-muted/70`.
+//
+// Plain Node, like the rest of an ESLint config: no React, no stylesheet, and no import of
+// `eslint` itself, which is the app's (packaging-contract.test.ts refuses an undeclared
+// package in src/), so the few types it needs are written out below.
+import { findRoleClasses } from "./role-utilities";
+import { ROLE_UTILITIES } from "./role-utilities.generated";
+
+interface Position {
+  line: number;
+  column: number;
+}
+
+/** The part of an ESTree string node the rule reads. */
+interface StringNode {
+  type: string;
+  value?: unknown;
+  range?: [number, number];
+  loc?: { start: Position; end: Position } | null;
+}
+
+interface Fix {
+  range: [number, number];
+  text: string;
+}
+
+/**
+ * The part of ESLint's rule context the rule uses — `sourceCode.text` and `report`, which
+ * every ESLint since flat config has — so that ESLint's own RuleContext, and @eslint/core's
+ * that `defineConfig` checks a plugin against, are assignable to it. The source is only an
+ * `object` here because a language's source may be binary, with no `text` at all.
+ */
+interface RoleUtilitiesContext {
+  sourceCode: object;
+  report(descriptor: {
+    loc: { start: Position; end: Position };
+    messageId: string;
+    data: Record<string, string>;
+    fix: ((fixer: { replaceTextRange(range: [number, number], text: string): Fix }) => Fix) | null;
+  }): void;
+}
+
+interface RoleUtilitiesRule {
+  meta: {
+    type: "suggestion";
+    docs: { description: string; url: string };
+    fixable: "code";
+    schema: [];
+    messages: { useRoleUtility: string };
+  };
+  create(context: RoleUtilitiesContext): {
+    Literal(node: StringNode): void;
+    TemplateElement(node: StringNode): void;
+  };
+}
+
+const roleUtilities: RoleUtilitiesRule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Write a colour role's utility (text-muted) rather than its [var(--…)] class",
+      url: "https://github.com/Eifi1/ui-kit#lint-the-role-utilities-in-an-app",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      useRoleUtility:
+        "Write the role utility `{{utilities}}`, not `{{found}}`: variants and an opacity work on it the same (tokens.css, @theme inline).",
+    },
+  },
+  create(context) {
+    const source = context.sourceCode as { text?: unknown };
+    const text = typeof source.text === "string" ? source.text : "";
+    const check = (node: StringNode) => {
+      if (!node.range || !node.loc) return;
+      const [start] = node.range;
+      const { line, column } = node.loc.start;
+      // An offset in the node's source text — quotes included, so it is an offset in the
+      // file — as a position. A template literal may span lines.
+      const at = (offset: number): Position => {
+        const lines = text.slice(start, start + offset).split("\n");
+        const last = lines.length - 1;
+        return { line: line + last, column: last ? lines[last].length : column + offset };
+      };
+      for (const hit of findRoleClasses(text.slice(start, node.range[1]), ROLE_UTILITIES)) {
+        const end = hit.index + hit.found.length;
+        const range: [number, number] = [start + hit.index, start + end];
+        const [only] = hit.utilities;
+        context.report({
+          loc: { start: at(hit.index), end: at(end) },
+          messageId: "useRoleUtility",
+          data: { found: hit.found, utilities: hit.utilities.join("` or `") },
+          // Several names for one token are a choice, not a fix.
+          fix: hit.utilities.length === 1 ? (fixer) => fixer.replaceTextRange(range, only) : null,
+        });
+      }
+    };
+    return {
+      Literal(node) {
+        if (typeof node.value === "string") check(node);
+      },
+      TemplateElement: check,
+    };
+  },
+};
+
+// The kit's version, baked in by tsup's `define` (tsup.config.ts). ESLint's cache keys a
+// file's result on each plugin's name@version, so without it an app's `eslint --cache`
+// would keep a file's old verdict after a kit release that gave a role a utility. Unset
+// when the source runs (the tests), where nothing is cached.
+declare const __UI_KIT_VERSION__: string | undefined;
+const VERSION = typeof __UI_KIT_VERSION__ === "string" ? __UI_KIT_VERSION__ : "0.0.0-source";
+
+/** Spelled out, self-reference included, so a typed config (`defineConfig`, `tseslint.config`) takes it. */
+interface UiKitEslintPlugin {
+  meta: { name: string; version: string; namespace: string };
+  rules: { "role-utilities": RoleUtilitiesRule };
+  configs: {
+    /** The rule as an error, on every file the app's other config objects lint but its tests. */
+    recommended: {
+      name: string;
+      ignores: string[];
+      plugins: { "@eifi1/ui-kit": UiKitEslintPlugin };
+      rules: { "@eifi1/ui-kit/role-utilities": "error" };
+    };
+  };
+}
+
+const recommended: UiKitEslintPlugin["configs"]["recommended"] = {
+  name: "@eifi1/ui-kit/recommended",
+  // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it
+  // is gone (keksdose's cleared-status-toggle.test.tsx does, three times).
+  ignores: ["**/__tests__/**", "**/*.test.*", "**/*.spec.*"],
+  plugins: {} as UiKitEslintPlugin["configs"]["recommended"]["plugins"],
+  rules: { "@eifi1/ui-kit/role-utilities": "error" },
+};
+
+/** The flat-config plugin: add `configs.recommended`, or register it under `@eifi1/ui-kit`. */
+const plugin: UiKitEslintPlugin = {
+  meta: { name: "@eifi1/ui-kit", version: VERSION, namespace: "@eifi1/ui-kit" },
+  rules: { "role-utilities": roleUtilities },
+  configs: { recommended },
+};
+recommended.plugins["@eifi1/ui-kit"] = plugin;
+
+export default plugin;

package/src/eslint/role-utilities.generated.ts

@@ -0,0 +1,146 @@
+// GENERATED by scripts/gen-role-utilities.mjs from tokens.css's `@theme inline` block — do
+// not edit. `npm run check:tokens` fails while it is stale; re-run the script.
+//
+// Per property, each token that has a role utility → the utility's name after the
+// property's prefix (`border`: `--border` → `subtle`, i.e. `border-subtle`). Read by
+// `@eifi1/ui-kit/eslint` and scripts/check-token-discipline.mjs (round 0.35 R5).
+import type { RoleUtilityTable } from "./role-utilities";
+
+export const ROLE_UTILITIES: RoleUtilityTable = {
+  "text": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--text-placeholder": ["placeholder"],
+    "--text-inverse": ["inverse"],
+    "--brand": ["brand"],
+    "--brand-muted": ["brand-muted"],
+    "--danger": ["danger"],
+    "--warning": ["warning"],
+    "--success": ["success"],
+    "--info": ["info"],
+    "--money-income": ["money-income"],
+    "--money-expense": ["money-expense"],
+    "--money-net": ["money-net"],
+    "--money-neutral": ["money-neutral"],
+    "--hue-blue": ["hue-blue"],
+    "--hue-indigo": ["hue-indigo"],
+    "--hue-purple": ["hue-purple"],
+    "--hue-teal": ["hue-teal"],
+    "--hue-orange": ["hue-orange"],
+    "--brand-contrast": ["brand-contrast"],
+    "--danger-contrast": ["danger-contrast"],
+    "--warning-contrast": ["warning-contrast"],
+    "--success-contrast": ["success-contrast"],
+    "--info-contrast": ["info-contrast"],
+    "--neutral-contrast": ["neutral-contrast"],
+    "--money-income-contrast": ["money-income-contrast"],
+    "--money-expense-contrast": ["money-expense-contrast"],
+    "--money-net-contrast": ["money-net-contrast"],
+    "--money-neutral-contrast": ["money-neutral-contrast"],
+    "--hue-blue-contrast": ["hue-blue-contrast"],
+    "--hue-indigo-contrast": ["hue-indigo-contrast"],
+    "--hue-purple-contrast": ["hue-purple-contrast"],
+    "--hue-teal-contrast": ["hue-teal-contrast"],
+    "--hue-orange-contrast": ["hue-orange-contrast"],
+    "--media-ink": ["media-ink"],
+  },
+  "bg": {
+    "--bg-page": ["page"],
+    "--bg-surface": ["surface"],
+    "--bg-surface-2": ["surface-2"],
+    "--bg-hover": ["hover"],
+    "--bg-active": ["active"],
+    "--bg-inverse": ["inverse"],
+    "--brand": ["brand"],
+    "--brand-hover": ["brand-hover"],
+    "--brand-bg": ["brand-soft"],
+    "--brand-bg-hover": ["brand-soft-hover"],
+    "--danger": ["danger"],
+    "--danger-hover": ["danger-hover"],
+    "--warning": ["warning"],
+    "--success": ["success"],
+    "--info": ["info"],
+    "--neutral": ["neutral"],
+    "--money-income": ["money-income"],
+    "--money-expense": ["money-expense"],
+    "--money-net": ["money-net"],
+    "--money-neutral": ["money-neutral"],
+    "--danger-bg": ["danger-soft"],
+    "--warning-bg": ["warning-soft"],
+    "--success-bg": ["success-soft"],
+    "--info-bg": ["info-soft"],
+    "--hue-blue": ["hue-blue"],
+    "--hue-indigo": ["hue-indigo"],
+    "--hue-purple": ["hue-purple"],
+    "--hue-teal": ["hue-teal"],
+    "--hue-orange": ["hue-orange"],
+    "--hue-blue-bg": ["hue-blue-soft"],
+    "--hue-indigo-bg": ["hue-indigo-soft"],
+    "--hue-purple-bg": ["hue-purple-soft"],
+    "--hue-teal-bg": ["hue-teal-soft"],
+    "--hue-orange-bg": ["hue-orange-soft"],
+    "--media-scrim": ["media-scrim"],
+    "--media-scrim-hover": ["media-scrim-hover"],
+  },
+  "border": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--danger-border": ["danger"],
+    "--warning-border": ["warning"],
+    "--success-border": ["success"],
+    "--info-border": ["info"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+    "--hue-blue-border": ["hue-blue"],
+    "--hue-indigo-border": ["hue-indigo"],
+    "--hue-purple-border": ["hue-purple"],
+    "--hue-teal-border": ["hue-teal"],
+    "--hue-orange-border": ["hue-orange"],
+    "--media-ink": ["media-ink"],
+  },
+  "ring": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--brand-contrast": ["brand-contrast"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+    "--media-ink": ["media-ink"],
+  },
+  "ring-offset": {
+    "--bg-page": ["page"],
+    "--bg-surface": ["surface"],
+    "--media-scrim-hover": ["media-scrim-hover"],
+  },
+  "outline": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+  },
+  "fill": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--bg-surface": ["surface"],
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+  },
+  "stroke": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--bg-surface": ["surface"],
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+  },
+  "ring-width": {
+    "--focus-ring-width": ["focus"],
+  },
+  "outline-width": {
+    "--focus-ring-width": ["focus"],
+  },
+};