@deepfuture/dui-components 1.3.0 → 1.4.0

package/toast/toast.js

@@ -0,0 +1,448 @@
+/**
+ * `<dui-toast>` — Styled toast item.
+ *
+ * NOTE: This is the only DUI component that overrides `render()`. The styled
+ * layer's contract is normally "extend with CSS only" — toasts are an
+ * exception because we ship built-in default icons keyed off `data-type`,
+ * which require a new shadow-DOM slot (`icon`) the primitive doesn't have.
+ * The override carefully preserves the primitive's full markup (root, title,
+ * description, default slot, action slot, close slot, ARIA wiring,
+ * `data-*` state attributes) so consumer-facing parts/slots stay stable.
+ */
+import { css, html } from "lit";
+import { DuiToastPrimitive } from "@deepfuture/dui-primitives/toast";
+import "../_install.js";
+import "../spinner/index.js";
+import { defaultIconFor } from "./default-icons.js";
+const styles = css `
+  /* ── Per-type color hook ──
+  *
+  * One CSS custom property the consumer can read/override; resolves per
+  * data-type. Default = neutral text-2 (used by default + loading types).
+  */
+  :host {
+    --toast-type-color: var(--text-2);
+  }
+  :host([type="success"]) {
+    --toast-type-color: var(--success);
+  }
+  :host([type="warning"]) {
+    --toast-type-color: var(--warning);
+  }
+  :host([type="info"]) {
+    --toast-type-color: var(--info);
+  }
+  :host([type="error"]) {
+    --toast-type-color: var(--destructive);
+  }
+  :host([type="loading"]) {
+    --toast-type-color: var(--text-2);
+  }
+
+  /* ── Default appearance: neutral surface, colored icon ──
+  *
+  * Sonner-default look. Surface stays --surface-2; only the icon (and the
+  * loading spinner) picks up the type color.
+  */
+  :host {
+    --toast-bg: var(--surface-2);
+    --toast-fg: var(--text-1);
+    --toast-border-color: var(--border);
+    --toast-border-width: var(--border-width-thin);
+    --toast-radius: var(--radius-md);
+    --toast-shadow: var(--shadow-lg);
+
+    --toast-padding-block: var(--space-3);
+    --toast-padding-inline: var(--space-3_5);
+    --toast-gap: var(--space-2_5);
+    --toast-text-gap: var(--space-1);
+    --toast-action-gap: var(--space-2);
+
+    --toast-title-size: var(--text-sm);
+    --toast-title-weight: var(--font-weight-semibold);
+    --toast-description-size: var(--text-xs);
+    --toast-description-color: var(--text-2);
+
+    --toast-icon-size: var(--space-4);
+    --toast-icon-color: var(--toast-type-color);
+
+    --toast-enter-duration: var(--duration-normal);
+    --toast-exit-duration: var(--duration-fast);
+    --toast-stack-transition: var(--ease-out-3);
+  }
+
+  /* ── Rich appearance: tinted surface + colored border ── */
+  :host([appearance="rich"][type="success"]) {
+    --toast-bg: var(--success-subtle);
+    --toast-border-color: var(--success);
+    --toast-fg: var(--success-text);
+  }
+  :host([appearance="rich"][type="warning"]) {
+    --toast-bg: var(--warning-subtle);
+    --toast-border-color: var(--warning);
+    --toast-fg: var(--warning-text);
+  }
+  :host([appearance="rich"][type="info"]) {
+    --toast-bg: var(--info-subtle);
+    --toast-border-color: var(--info);
+    --toast-fg: var(--info-text);
+  }
+  :host([appearance="rich"][type="error"]) {
+    --toast-bg: var(--destructive-subtle);
+    --toast-border-color: var(--destructive);
+    --toast-fg: var(--destructive-text);
+  }
+
+  /* ── Root: CSS Grid layout ──
+  *
+  *   "icon  title "     <- close is position: absolute, not in the grid
+  *   "icon  desc  "
+  *   "icon  action"
+  *
+  * Two columns: icon (auto-sized; collapses to 0 when no icon) + content
+  * (1fr). The icon column width is driven by the private --_icon-col
+  * variable so we can zero it AND zero the column-gap when the icon is
+  * absent (default type, no slotted icon).
+  */
+  [part="root"] {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_icon-col, var(--toast-icon-size)) 1fr;
+    column-gap: var(--_icon-gap, var(--toast-gap));
+    row-gap: var(--toast-text-gap);
+    align-items: start;
+
+    background: var(--toast-bg);
+    color: var(--toast-fg);
+    border: var(--toast-border-width) solid var(--toast-border-color);
+    border-radius: var(--toast-radius);
+    box-shadow: var(--toast-shadow);
+    padding: var(--toast-padding-block) var(--toast-padding-inline);
+    font-family: var(--font-sans);
+
+    /* Open/close opacity transition (the primitive owns the swipe transform). */
+    transition:
+      opacity var(--toast-enter-duration) var(--ease-out-3),
+      transform var(--toast-enter-duration) var(--ease-out-3);
+    }
+
+    /* ── Icon ── */
+    [part="icon"] {
+      grid-column: 1;
+      grid-row: 1 / 3;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--toast-icon-size);
+      height: var(--toast-icon-size);
+      color: var(--toast-icon-color);
+      /* Optical alignment to title baseline (title is text-sm semibold). */
+      margin-top: var(--space-px);
+      flex-shrink: 0;
+    }
+
+    [part="icon"] dui-spinner {
+      --spinner-size: var(--toast-icon-size);
+      --spinner-color: var(--toast-icon-color);
+    }
+
+    /* When no icon (default type, no slotted icon), collapse the icon
+      column to zero AND remove the column gap so the text column starts
+      flush against the left padding. */
+    :host(:not([type])) [part="root"],
+    :host([type="default"]) [part="root"],
+    :host([type=""]) [part="root"] {
+      --_icon-col: 0px;
+      --_icon-gap: 0;
+    }
+    :host(:not([type])) [part="icon"],
+    :host([type="default"]) [part="icon"],
+    :host([type=""]) [part="icon"] {
+      display: none;
+    }
+
+    /* ── Title ── */
+    [part="title"] {
+      grid-column: 2;
+      grid-row: 1;
+      font-size: var(--toast-title-size);
+      font-weight: var(--toast-title-weight);
+      line-height: var(--text-sm--line-height);
+      color: var(--toast-fg);
+      margin: 0;
+      text-wrap: pretty;
+      /* Reserve room for the absolute close button so long titles don't
+        flow underneath it. */
+      padding-inline-end: var(--_close-pad, 0);
+    }
+
+    /* ── Description ── */
+    [part="description"] {
+      grid-column: 2;
+      grid-row: 2;
+      font-size: var(--toast-description-size);
+      line-height: var(--text-xs--line-height);
+      color: var(--toast-description-color);
+      margin: 0;
+      text-wrap: pretty;
+      padding-inline-end: var(--_close-pad, 0);
+    }
+
+    /* ── Default slot (Tier-2 content) ──
+    *
+    * Default-slotted content sits where the description would and spans
+    * the text column. Title/description take precedence visually but both
+    * can coexist (rare).
+    */
+    [part="default-content"] {
+      grid-column: 2;
+      grid-row: 2;
+    }
+    [part="default-content"][data-empty] {
+      display: none;
+    }
+
+    /* ── Action slot ── */
+    [part="action-wrapper"] {
+      grid-column: 2;
+      grid-row: 3;
+      margin-top: var(--toast-action-gap);
+    }
+    [part="action-wrapper"][data-empty] {
+      display: none;
+    }
+
+    /* Style consumer-slotted bare <button>s in the action wrapper. */
+    ::slotted(dui-toast-action) {
+      /* dui-toast-action is display:contents; per-button styling is on its
+        part. Nothing to do here. */
+      }
+
+      /* ── Close slot ──
+      *
+      * Absolute-positioned in the top-right (top-left for left-anchored
+      * regions). Hidden until hover on devices that have hover, always
+      * visible on touch.
+      */
+      [part="close-wrapper"] {
+        position: absolute;
+        top: var(--space-2);
+        inset-inline-end: var(--space-2);
+        z-index: 1;
+      }
+      [part="close-wrapper"][data-empty] {
+        display: none;
+      }
+
+      /* When the close button is present, reserve title/description padding
+        so long content doesn't flow underneath the absolute close. */
+      [part="root"]:has([part="close-wrapper"]:not([data-empty])) {
+        --_close-pad: var(--space-6);
+      }
+
+      @media (hover: hover) {
+        [part="close-wrapper"] {
+          opacity: 0;
+          transition: opacity var(--duration-fast) var(--ease-out-3);
+        }
+        :host(:hover) [part="close-wrapper"],
+        :host(:focus-within) [part="close-wrapper"],
+        [part="root"]:hover [part="close-wrapper"],
+        [part="root"]:focus-within [part="close-wrapper"] {
+          opacity: 1;
+        }
+      }
+
+      /* ── Open / close animations ──
+      *
+      * Enter: slide in from the anchored edge. Direction is read from
+      * data-position (mirrored from region onto each toast by primitive).
+      * Exit: opacity to 0 + scale(0.96).
+      */
+      :host([data-position^="bottom-"]) [part="root"][data-starting-style] {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      :host([data-position^="top-"]) [part="root"][data-starting-style] {
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+      :host([data-position$="-right"]) [part="root"][data-starting-style] {
+        /* Right-anchored regions slide in from the right edge for the very
+          first toast — but with cascade stacking, vertical slide reads better
+          once a stack is established. Keep vertical. */
+        }
+
+        [part="root"][data-ending-style] {
+          opacity: 0;
+          transform: scale(0.96);
+          transition:
+            opacity var(--toast-exit-duration) var(--ease-out-3),
+            transform var(--toast-exit-duration) var(--ease-out-3);
+          }
+
+          /* Fade during swipe-end throw (primitive translates 3× via swipe vars). */
+          :host([data-swipe="end"]) [part="root"] {
+            opacity: 0;
+          }
+
+          /* ── Reduced motion: opacity-only ── */
+          @media (prefers-reduced-motion: reduce) {
+            [part="root"][data-starting-style],
+            [part="root"][data-ending-style] {
+              transform: none;
+            }
+          }
+        `;
+/**
+ * `<dui-toast>` — Styled toast item.
+ *
+ * Extends the primitive with:
+ * - Sonner-default look (neutral surface, colored icon, title + description)
+ * - Built-in default icons per `type` (success/info/warning/error/loading);
+ *   slot `icon` to override
+ * - `appearance="rich"` for tinted-surface mode
+ * - CSS Grid layout with full slot/part preservation
+ * - Hover-visible close button (always visible on touch)
+ *
+ * @slot title - Title text (auto-wires aria-labelledby).
+ * @slot description - Description text (auto-wires aria-describedby).
+ * @slot - Default custom content (Tier-2 escape hatch).
+ * @slot icon - Custom icon to replace the type-default. Empty = built-in.
+ * @slot action - Action button(s); typically a `<dui-toast-action>` wrapper.
+ * @slot close - Close affordance; typically a `<dui-toast-close>` wrapper.
+ *
+ * @csspart root - The toast container.
+ * @csspart icon - The icon container.
+ * @csspart title - The title wrapper.
+ * @csspart description - The description wrapper.
+ * @csspart action-wrapper - The action slot's grid cell.
+ * @csspart close-wrapper - The close slot's absolute-positioned container.
+ *
+ * @attr appearance - `"default" | "rich"`. Rich tints surface + border
+ *   by type color. Default keeps the surface neutral.
+ */
+export class DuiToast extends DuiToastPrimitive {
+    static styles = [...DuiToastPrimitive.styles, styles];
+    /**
+     * Override the primitive's render to inject an `icon` slot with built-in
+     * defaults. Preserves all other parts/slots/ARIA wiring exactly.
+     */
+    render() {
+        const role = this.priority === "assertive" ? "alert" : "status";
+        const ariaLive = this.priority;
+        // The primitive does ARIA wiring (aria-labelledby/aria-describedby)
+        // based on title/description slot assignment, but those flags live
+        // in the primitive's private state. We track our own copies via
+        // slotchange handlers below and use them here — same shape, just
+        // re-implemented in our subclass.
+        // Headless mode: same as primitive — only default slot.
+        if (this.headless) {
+            return html `
+                <div
+                  part="root"
+                  role="${role}"
+                  aria-live="${ariaLive}"
+                  aria-atomic="true"
+                  data-type="${this.type}"
+                >
+                  <slot></slot>
+                </div>
+              `;
+        }
+        const titleId = `dui-toast-title-${this.#instanceId}`;
+        const descId = `dui-toast-desc-${this.#instanceId}`;
+        return html `
+              <div
+                part="root"
+                role="${role}"
+                aria-live="${ariaLive}"
+                aria-atomic="true"
+                aria-labelledby="${this.#hasTitle ? titleId : ""}"
+                aria-describedby="${this.#hasDescription ? descId : ""}"
+                data-type="${this.type}"
+              >
+                <span part="icon">
+                  <slot name="icon">${defaultIconFor(this.type)}</slot>
+                </span>
+                <div part="title" id="${titleId}">
+                  <slot
+                    name="title"
+                    @slotchange="${this.#onTitleSlotChange}"
+                  ></slot>
+                </div>
+                <div part="description" id="${descId}">
+                  <slot
+                    name="description"
+                    @slotchange="${this.#onDescriptionSlotChange}"
+                  ></slot>
+                </div>
+                <div part="default-content" ?data-empty="${!this.#hasDefault}">
+                  <slot @slotchange="${this.#onDefaultSlotChange}"></slot>
+                </div>
+                <div part="action-wrapper" ?data-empty="${!this.#hasAction}">
+                  <slot name="action" @slotchange="${this
+            .#onActionSlotChange}"></slot>
+                </div>
+                <div part="close-wrapper" ?data-empty="${!this.#hasClose}">
+                  <slot name="close" @slotchange="${this
+            .#onCloseSlotChange}"></slot>
+                </div>
+              </div>
+            `;
+    }
+    // ---- Slot-assignment tracking ----
+    //
+    // ARIA wiring (title, description) plus visibility tracking for
+    // default / action / close wrappers. CSS can't gate visibility on
+    // "slot has assigned content" — `slot:empty` is always true for
+    // slots without fallback children regardless of whether anything
+    // is actually slotted.
+    #instanceId = crypto.randomUUID().slice(0, 8);
+    #hasTitle = false;
+    #hasDescription = false;
+    #hasDefault = false;
+    #hasAction = false;
+    #hasClose = false;
+    #slotHasContent(slot) {
+        return slot.assignedNodes({ flatten: true }).some((n) => n.nodeType === Node.ELEMENT_NODE ||
+            (n.nodeType === Node.TEXT_NODE &&
+                (n.textContent?.trim().length ?? 0) > 0));
+    }
+    #onTitleSlotChange = (e) => {
+        const next = this.#slotHasContent(e.target);
+        if (next !== this.#hasTitle) {
+            this.#hasTitle = next;
+            this.requestUpdate();
+        }
+    };
+    #onDescriptionSlotChange = (e) => {
+        const next = this.#slotHasContent(e.target);
+        if (next !== this.#hasDescription) {
+            this.#hasDescription = next;
+            this.requestUpdate();
+        }
+    };
+    #onDefaultSlotChange = (e) => {
+        const next = this.#slotHasContent(e.target);
+        if (next !== this.#hasDefault) {
+            this.#hasDefault = next;
+            this.requestUpdate();
+        }
+    };
+    #onActionSlotChange = (e) => {
+        const next = this.#slotHasContent(e.target);
+        if (next !== this.#hasAction) {
+            this.#hasAction = next;
+            this.requestUpdate();
+        }
+    };
+    #onCloseSlotChange = (e) => {
+        const next = this.#slotHasContent(e.target);
+        if (next !== this.#hasClose) {
+            this.#hasClose = next;
+            this.requestUpdate();
+        }
+    };
+}
+customElements.define(DuiToast.tagName, DuiToast);

package/tokens/tokens-raw.js

@@ -1,2 +1,2 @@
-const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n  /* -----------------------------------------------------------\n   * Spacing (Tailwind base-4 system)\n   * ----------------------------------------------------------- */\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0_5: 0.125rem; /* 2px */\n  --space-1: 0.25rem; /* 4px */\n  --space-1_5: 0.375rem; /* 6px */\n  --space-2: 0.5rem; /* 8px */\n  --space-2_5: 0.625rem; /* 10px */\n  --space-3: 0.75rem; /* 12px */\n  --space-3_5: 0.875rem; /* 14px */\n  --space-4: 1rem; /* 16px */\n  --space-4_5: 1.125rem; /* 18px */\n  --space-5: 1.25rem; /* 20px */\n  --space-6: 1.5rem; /* 24px */\n  --space-7: 1.75rem; /* 28px */\n  --space-8: 2rem; /* 32px */\n  --space-9: 2.25rem; /* 36px */\n  --space-10: 2.5rem; /* 40px */\n  --space-11: 2.75rem; /* 44px */\n  --space-12: 3rem; /* 48px */\n  --space-14: 3.5rem; /* 56px */\n  --space-16: 4rem; /* 64px */\n  --space-20: 5rem; /* 80px */\n  --space-24: 6rem; /* 96px */\n  --space-28: 7rem; /* 112px */\n  --space-32: 8rem; /* 128px */\n  --space-36: 9rem; /* 144px */\n  --space-40: 10rem; /* 160px */\n  --space-44: 11rem; /* 176px */\n  --space-48: 12rem; /* 192px */\n  --space-52: 13rem; /* 208px */\n  --space-56: 14rem; /* 224px */\n  --space-60: 15rem; /* 240px */\n  --space-64: 16rem; /* 256px */\n  --space-72: 18rem; /* 288px */\n  --space-80: 20rem; /* 320px */\n  --space-96: 24rem; /* 384px */\n\n  /* -----------------------------------------------------------\n   * Typography\n   * ----------------------------------------------------------- */\n  --font-sans:\n    'Inter', system-ui, -apple-system, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n    Consolas, \"Liberation Mono\", monospace;\n\n  /* -----------------------------------------------------------\n   * Type scale\n   * -----------------------------------------------------------\n   * Each size is paired with a line-height variable. The\n   * line-height is a unitless ratio; multiplied by the size,\n   * it yields the target leading (shown in comments).\n   * ----------------------------------------------------------- */\n\n  --text-2xs: 0.625rem;                              /* 10px */\n  --text-2xs--line-height: calc(0.75 / 0.625);       /* 12px */\n\n  --text-xs: 0.75rem;                                /* 12px */\n  --text-xs--line-height: calc(1 / 0.75);            /* 16px */\n\n  --text-sm: 0.875rem;                               /* 14px */\n  --text-sm--line-height: calc(1.25 / 0.875);        /* 20px */\n\n  --text-base: 1rem;                                 /* 16px */\n  --text-base--line-height: calc(1.5 / 1);           /* 24px */\n\n  --text-lg: 1.125rem;                               /* 18px */\n  --text-lg--line-height: calc(1.75 / 1.125);        /* 28px */\n\n  --text-xl: 1.25rem;                                /* 20px */\n  --text-xl--line-height: calc(1.75 / 1.25);         /* 28px */\n\n  --text-2xl: 1.5rem;                                /* 24px */\n  --text-2xl--line-height: calc(2 / 1.5);            /* 32px */\n\n  --text-3xl: 1.875rem;                              /* 30px */\n  --text-3xl--line-height: calc(2.25 / 1.875);       /* 36px */\n\n  --text-4xl: 2.25rem;                               /* 36px */\n  --text-4xl--line-height: calc(2.5 / 2.25);         /* 40px */\n\n  --text-5xl: 3rem;                                  /* 48px */\n  --text-5xl--line-height: 1;\n\n  --text-6xl: 3.75rem;                               /* 60px */\n  --text-6xl--line-height: 1;\n\n  --text-7xl: 4.5rem;                                /* 72px */\n  --text-7xl--line-height: 1;\n\n  --text-8xl: 6rem;                                  /* 96px */\n  --text-8xl--line-height: 1;\n\n  --text-9xl: 8rem;                                  /* 128px */\n  --text-9xl--line-height: 1;\n\n  --letter-spacing-tightest: -0.02em;\n  --letter-spacing-tighter: -0.015em;\n  --letter-spacing-tight: -0.01em;\n  --letter-spacing-normal: 0em;\n  --letter-spacing-wide: 0.006em;\n  --letter-spacing-wider: 0.012em;\n  --letter-spacing-widest: 0.018em;\n\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n\n  --line-height-none: 1;\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n\n  /* -----------------------------------------------------------\n   * Borders\n   * ----------------------------------------------------------- */\n  --radius-none: 0;\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n  --radius-full: 9999px;\n\n  --border-width-hairline: 0.5px;\n  --border-width-thin: 1px;\n  --border-width-medium: 2px;\n  --border-width-thick: 4px;\n\n  /* -----------------------------------------------------------\n   * Elevation\n   * ----------------------------------------------------------- */\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-none: 0 0 0 0 transparent;\n\n  --z-base: 0;\n  --z-dropdown: 700;\n  --z-sticky: 800;\n  --z-overlay: 900;\n  --z-modal: 1000;\n  --z-popover: 1100;\n  --z-toast: 1200;\n  --z-tooltip: 1300;\n\n  /* -----------------------------------------------------------\n   * Motion\n   * ----------------------------------------------------------- */\n  --duration-instant: 50ms;\n  --duration-fastest: 75ms;\n  --duration-faster: 100ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 400ms;\n  --duration-slower: 700ms;\n\n  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n  --ease-in-5: cubic-bezier(1, 0, 1, 1);\n  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n  --ease-out-5: cubic-bezier(0, 0, 0, 1);\n  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n  --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n  /* -----------------------------------------------------------\n   * Filters (presets for filter / backdrop-filter tokens)\n   * ----------------------------------------------------------- */\n  --filter-none: none;\n  --filter-blur-sm: blur(4px);\n  --filter-blur-md: blur(8px);\n  --filter-blur-lg: blur(16px);\n  --filter-blur-xl: blur(24px);\n  --filter-brightness-dim: brightness(0.8);\n  --filter-brightness-bright: brightness(1.15);\n  --filter-saturate-muted: saturate(0.5);\n  --filter-saturate-vivid: saturate(1.5);\n  --filter-grayscale: grayscale(1);\n\n  /* -----------------------------------------------------------\n   * Clip Paths (shape presets)\n   * ----------------------------------------------------------- */\n  --clip-none: none;\n  --clip-circle: circle(50%);\n  --clip-squircle: inset(0 round 30%);\n  --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n  --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n  --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n  --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n  /* -----------------------------------------------------------\n   * Component Sizing\n   * ----------------------------------------------------------- */\n  --component-height-xxs: 1.25rem; /* 20px */\n  --component-height-xs: 1.5rem; /* 24px */\n  --component-height-sm: 1.75rem; /* 28px */\n  --component-height-md: 2rem; /* 32px */\n  --component-height-lg: 2.25rem; /* 36px */\n  --component-height-xl: 2.5rem; /* 40px */\n\n  /* -----------------------------------------------------------\n   * Focus Ring\n   * ----------------------------------------------------------- */\n  --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n  --focus-ring-width: 3px;\n  --focus-ring-offset: 0px;\n  --focus-ring-duration: var(--duration-fast);\n  --focus-ring-easing: var(--ease-out-3);\n\n  /* -----------------------------------------------------------\n   * Colors: Brand (theme-independent)\n   * ----------------------------------------------------------- */\n  --brand: oklch(0.728 0.1304 73.28);\n  --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n *  1. Operations on a base — colors are relationships, not fixed values.\n *  2. Fewer primitives, more derivation — 4 primitives, everything\n *     else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.97 0 0);\n  --foreground:  oklch(0.15 0 0);\n  --accent:      oklch(0.55 0.25 260);\n  --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.15 0.015 260);\n  --foreground:  oklch(0.93 0 0);\n  --accent:      oklch(0.75 0.18 260);\n  --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n  /* Surfaces — lightness offsets from background.\n     Positive = elevated (brighter). Negative = sunken (darker). */\n  --sunken-2:    oklch(from var(--background) calc(l - 0.03) c h);\n  --sunken-1:    oklch(from var(--background) calc(l - 0.01) c h);\n  --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n  --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n  --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n  /* Borders — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --border:        oklch(from var(--foreground) l c h / 0.15);\n  --border-strong:  oklch(from var(--foreground) l c h / 0.25);\n\n  /* Text tiers — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --text-1: oklch(from var(--foreground) l c h / 0.90);\n  --text-2: oklch(from var(--foreground) l c h / 0.63);\n  --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n  /* Accent surfaces — for badges, pills, tinted cards */\n  --accent-subtle:      oklch(from var(--accent) l c h / 0.10);\n  --accent-text:        oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n  /* Destructive surfaces */\n  --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n  --destructive-text:   var(--destructive);\n\n  /* Utility — scrim overlay for modals/dialogs */\n  --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n  /* Meter / progress bar defaults */\n  --meter-track: var(--surface-1);\n  --meter-fill: var(--accent);\n\n  /* Chart palette (theme-independent) */\n  --chart-1: oklch(0.58 0.17 35);\n  --chart-2: oklch(0.55 0.13 185);\n  --chart-3: oklch(0.52 0.14 265);\n  --chart-4: oklch(0.62 0.15 85);\n  --chart-5: oklch(0.55 0.16 310);\n\n  /* -----------------------------------------------------------\n   * Prose (rich-text / markdown content)\n   * ----------------------------------------------------------- */\n  --prose-body: var(--text-1);\n  --prose-headings: var(--foreground);\n  --prose-lead: var(--text-2);\n  --prose-links: var(--accent);\n  --prose-links-hover: var(--accent-text);\n  --prose-bold: var(--foreground);\n  --prose-code: var(--foreground);\n  --prose-code-bg: var(--surface-1);\n  --prose-pre-bg: var(--surface-1);\n  --prose-pre-border: var(--border);\n  --prose-blockquote-border: var(--accent);\n  --prose-blockquote-text: var(--text-2);\n  --prose-hr: var(--border);\n  --prose-th-border: var(--border-strong);\n  --prose-td-border: var(--border);\n  --prose-caption: var(--text-3);\n  --prose-kbd-bg: var(--surface-2);\n  --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n  color: var(--text-1);\n  font-family: var(--font-sans);\n  line-height: var(--line-height-normal);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl);  line-height: var(--text-4xl--line-height);  }  /* 36 / 40 */\nh2 { font-size: var(--text-3xl);  line-height: var(--text-3xl--line-height);  }  /* 30 / 36 */\nh3 { font-size: var(--text-2xl);  line-height: var(--text-2xl--line-height);  }  /* 24 / 32 */\nh4 { font-size: var(--text-xl);   line-height: var(--text-xl--line-height);   }  /* 20 / 28 */\nh5 { font-size: var(--text-lg);   line-height: var(--text-lg--line-height);   }  /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); }  /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd,\nlabel, legend, caption, figcaption, th, td {\n  text-box: trim-both cap alphabetic;\n}\n";
+const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n  /* -----------------------------------------------------------\n   * Spacing (Tailwind base-4 system)\n   * ----------------------------------------------------------- */\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0_5: 0.125rem; /* 2px */\n  --space-1: 0.25rem; /* 4px */\n  --space-1_5: 0.375rem; /* 6px */\n  --space-2: 0.5rem; /* 8px */\n  --space-2_5: 0.625rem; /* 10px */\n  --space-3: 0.75rem; /* 12px */\n  --space-3_5: 0.875rem; /* 14px */\n  --space-4: 1rem; /* 16px */\n  --space-4_5: 1.125rem; /* 18px */\n  --space-5: 1.25rem; /* 20px */\n  --space-6: 1.5rem; /* 24px */\n  --space-7: 1.75rem; /* 28px */\n  --space-8: 2rem; /* 32px */\n  --space-9: 2.25rem; /* 36px */\n  --space-10: 2.5rem; /* 40px */\n  --space-11: 2.75rem; /* 44px */\n  --space-12: 3rem; /* 48px */\n  --space-14: 3.5rem; /* 56px */\n  --space-16: 4rem; /* 64px */\n  --space-20: 5rem; /* 80px */\n  --space-24: 6rem; /* 96px */\n  --space-28: 7rem; /* 112px */\n  --space-32: 8rem; /* 128px */\n  --space-36: 9rem; /* 144px */\n  --space-40: 10rem; /* 160px */\n  --space-44: 11rem; /* 176px */\n  --space-48: 12rem; /* 192px */\n  --space-52: 13rem; /* 208px */\n  --space-56: 14rem; /* 224px */\n  --space-60: 15rem; /* 240px */\n  --space-64: 16rem; /* 256px */\n  --space-72: 18rem; /* 288px */\n  --space-80: 20rem; /* 320px */\n  --space-96: 24rem; /* 384px */\n\n  /* -----------------------------------------------------------\n   * Typography\n   * ----------------------------------------------------------- */\n  --font-sans:\n    'Inter', system-ui, -apple-system, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n    Consolas, \"Liberation Mono\", monospace;\n\n  /* -----------------------------------------------------------\n   * Type scale\n   * -----------------------------------------------------------\n   * Each size is paired with a line-height variable. The\n   * line-height is a unitless ratio; multiplied by the size,\n   * it yields the target leading (shown in comments).\n   * ----------------------------------------------------------- */\n\n  --text-2xs: 0.625rem;                              /* 10px */\n  --text-2xs--line-height: calc(0.75 / 0.625);       /* 12px */\n\n  --text-xs: 0.75rem;                                /* 12px */\n  --text-xs--line-height: calc(1 / 0.75);            /* 16px */\n\n  --text-sm: 0.875rem;                               /* 14px */\n  --text-sm--line-height: calc(1.25 / 0.875);        /* 20px */\n\n  --text-base: 1rem;                                 /* 16px */\n  --text-base--line-height: calc(1.5 / 1);           /* 24px */\n\n  --text-lg: 1.125rem;                               /* 18px */\n  --text-lg--line-height: calc(1.75 / 1.125);        /* 28px */\n\n  --text-xl: 1.25rem;                                /* 20px */\n  --text-xl--line-height: calc(1.75 / 1.25);         /* 28px */\n\n  --text-2xl: 1.5rem;                                /* 24px */\n  --text-2xl--line-height: calc(2 / 1.5);            /* 32px */\n\n  --text-3xl: 1.875rem;                              /* 30px */\n  --text-3xl--line-height: calc(2.25 / 1.875);       /* 36px */\n\n  --text-4xl: 2.25rem;                               /* 36px */\n  --text-4xl--line-height: calc(2.5 / 2.25);         /* 40px */\n\n  --text-5xl: 3rem;                                  /* 48px */\n  --text-5xl--line-height: 1;\n\n  --text-6xl: 3.75rem;                               /* 60px */\n  --text-6xl--line-height: 1;\n\n  --text-7xl: 4.5rem;                                /* 72px */\n  --text-7xl--line-height: 1;\n\n  --text-8xl: 6rem;                                  /* 96px */\n  --text-8xl--line-height: 1;\n\n  --text-9xl: 8rem;                                  /* 128px */\n  --text-9xl--line-height: 1;\n\n  --letter-spacing-tightest: -0.02em;\n  --letter-spacing-tighter: -0.015em;\n  --letter-spacing-tight: -0.01em;\n  --letter-spacing-normal: 0em;\n  --letter-spacing-wide: 0.006em;\n  --letter-spacing-wider: 0.012em;\n  --letter-spacing-widest: 0.018em;\n\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n\n  --line-height-none: 1;\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n\n  /* -----------------------------------------------------------\n   * Borders\n   * ----------------------------------------------------------- */\n  --radius-none: 0;\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n  --radius-full: 9999px;\n\n  --border-width-hairline: 0.5px;\n  --border-width-thin: 1px;\n  --border-width-medium: 2px;\n  --border-width-thick: 4px;\n\n  /* -----------------------------------------------------------\n   * Elevation\n   * ----------------------------------------------------------- */\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-none: 0 0 0 0 transparent;\n\n  --z-base: 0;\n  --z-dropdown: 700;\n  --z-sticky: 800;\n  --z-overlay: 900;\n  --z-modal: 1000;\n  --z-popover: 1100;\n  --z-toast: 1200;\n  --z-tooltip: 1300;\n\n  /* -----------------------------------------------------------\n   * Motion\n   * ----------------------------------------------------------- */\n  --duration-instant: 50ms;\n  --duration-fastest: 75ms;\n  --duration-faster: 100ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 400ms;\n  --duration-slower: 700ms;\n\n  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n  --ease-in-5: cubic-bezier(1, 0, 1, 1);\n  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n  --ease-out-5: cubic-bezier(0, 0, 0, 1);\n  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n  --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n  /* -----------------------------------------------------------\n   * Filters (presets for filter / backdrop-filter tokens)\n   * ----------------------------------------------------------- */\n  --filter-none: none;\n  --filter-blur-sm: blur(4px);\n  --filter-blur-md: blur(8px);\n  --filter-blur-lg: blur(16px);\n  --filter-blur-xl: blur(24px);\n  --filter-brightness-dim: brightness(0.8);\n  --filter-brightness-bright: brightness(1.15);\n  --filter-saturate-muted: saturate(0.5);\n  --filter-saturate-vivid: saturate(1.5);\n  --filter-grayscale: grayscale(1);\n\n  /* -----------------------------------------------------------\n   * Clip Paths (shape presets)\n   * ----------------------------------------------------------- */\n  --clip-none: none;\n  --clip-circle: circle(50%);\n  --clip-squircle: inset(0 round 30%);\n  --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n  --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n  --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n  --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n  /* -----------------------------------------------------------\n   * Component Sizing\n   * ----------------------------------------------------------- */\n  --component-height-xxs: 1.25rem; /* 20px */\n  --component-height-xs: 1.5rem; /* 24px */\n  --component-height-sm: 1.75rem; /* 28px */\n  --component-height-md: 2rem; /* 32px */\n  --component-height-lg: 2.25rem; /* 36px */\n  --component-height-xl: 2.5rem; /* 40px */\n\n  /* -----------------------------------------------------------\n   * Focus Ring\n   * ----------------------------------------------------------- */\n  --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n  --focus-ring-width: 3px;\n  --focus-ring-offset: 0px;\n  --focus-ring-duration: var(--duration-fast);\n  --focus-ring-easing: var(--ease-out-3);\n\n  /* -----------------------------------------------------------\n   * Colors: Brand (theme-independent)\n   * ----------------------------------------------------------- */\n  --brand: oklch(0.728 0.1304 73.28);\n  --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n *  1. Operations on a base — colors are relationships, not fixed values.\n *  2. Fewer primitives, more derivation — 4 primitives, everything\n *     else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.97 0 0);\n  --foreground:  oklch(0.15 0 0);\n  --accent:      oklch(0.55 0.25 260);\n  --destructive: oklch(0.55 0.22 25);\n  --success:     oklch(0.55 0.18 145);\n  --warning:     oklch(0.65 0.18 70);\n  --info:        oklch(0.55 0.18 230);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.15 0.015 260);\n  --foreground:  oklch(0.93 0 0);\n  --accent:      oklch(0.75 0.18 260);\n  --destructive: oklch(0.70 0.18 25);\n  --success:     oklch(0.72 0.16 145);\n  --warning:     oklch(0.78 0.15 70);\n  --info:        oklch(0.72 0.15 230);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n  /* Surfaces — lightness offsets from background.\n     Positive = elevated (brighter). Negative = sunken (darker). */\n  --sunken-2:    oklch(from var(--background) calc(l - 0.03) c h);\n  --sunken-1:    oklch(from var(--background) calc(l - 0.01) c h);\n  --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n  --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n  --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n  /* Borders — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --border:        oklch(from var(--foreground) l c h / 0.15);\n  --border-strong:  oklch(from var(--foreground) l c h / 0.25);\n\n  /* Text tiers — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --text-1: oklch(from var(--foreground) l c h / 0.90);\n  --text-2: oklch(from var(--foreground) l c h / 0.63);\n  --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n  /* Accent surfaces — for badges, pills, tinted cards */\n  --accent-subtle:      oklch(from var(--accent) l c h / 0.10);\n  --accent-text:        oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n  /* Destructive surfaces */\n  --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n  --destructive-text:   var(--destructive);\n\n  /* Success surfaces */\n  --success-subtle: oklch(from var(--success) l c h / 0.10);\n  --success-text:   oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);\n\n  /* Warning surfaces */\n  --warning-subtle: oklch(from var(--warning) l c h / 0.10);\n  --warning-text:   oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);\n\n  /* Info surfaces */\n  --info-subtle: oklch(from var(--info) l c h / 0.10);\n  --info-text:   oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);\n\n  /* Utility — scrim overlay for modals/dialogs */\n  --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n  /* Meter / progress bar defaults */\n  --meter-track: var(--surface-1);\n  --meter-fill: var(--accent);\n\n  /* Chart palette (theme-independent) */\n  --chart-1: oklch(0.58 0.17 35);\n  --chart-2: oklch(0.55 0.13 185);\n  --chart-3: oklch(0.52 0.14 265);\n  --chart-4: oklch(0.62 0.15 85);\n  --chart-5: oklch(0.55 0.16 310);\n\n  /* -----------------------------------------------------------\n   * Prose (rich-text / markdown content)\n   * ----------------------------------------------------------- */\n  --prose-body: var(--text-1);\n  --prose-headings: var(--foreground);\n  --prose-lead: var(--text-2);\n  --prose-links: var(--accent);\n  --prose-links-hover: var(--accent-text);\n  --prose-bold: var(--foreground);\n  --prose-code: var(--foreground);\n  --prose-code-bg: var(--surface-1);\n  --prose-pre-bg: var(--surface-1);\n  --prose-pre-border: var(--border);\n  --prose-blockquote-border: var(--accent);\n  --prose-blockquote-text: var(--text-2);\n  --prose-hr: var(--border);\n  --prose-th-border: var(--border-strong);\n  --prose-td-border: var(--border);\n  --prose-caption: var(--text-3);\n  --prose-kbd-bg: var(--surface-2);\n  --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n  color: var(--text-1);\n  font-family: var(--font-sans);\n  line-height: var(--line-height-normal);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl);  line-height: var(--text-4xl--line-height);  }  /* 36 / 40 */\nh2 { font-size: var(--text-3xl);  line-height: var(--text-3xl--line-height);  }  /* 30 / 36 */\nh3 { font-size: var(--text-2xl);  line-height: var(--text-2xl--line-height);  }  /* 24 / 32 */\nh4 { font-size: var(--text-xl);   line-height: var(--text-xl--line-height);   }  /* 20 / 28 */\nh5 { font-size: var(--text-lg);   line-height: var(--text-lg--line-height);   }  /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); }  /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd,\nlabel, legend, caption, figcaption, th, td {\n  text-box: trim-both cap alphabetic;\n}\n";
 export { tokensCSS };

package/tokens/tokens.css

@@ -296,6 +296,9 @@
   --foreground:  oklch(0.15 0 0);
   --accent:      oklch(0.55 0.25 260);
   --destructive: oklch(0.55 0.22 25);
+  --success:     oklch(0.55 0.18 145);
+  --warning:     oklch(0.65 0.18 70);
+  --info:        oklch(0.55 0.18 230);
 }
 
 /* -----------------------------------------------------------------
@@ -307,6 +310,9 @@
   --foreground:  oklch(0.93 0 0);
   --accent:      oklch(0.75 0.18 260);
   --destructive: oklch(0.70 0.18 25);
+  --success:     oklch(0.72 0.16 145);
+  --warning:     oklch(0.78 0.15 70);
+  --info:        oklch(0.72 0.15 230);
 }
 
 /* -----------------------------------------------------------------
@@ -341,6 +347,18 @@
   --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);
   --destructive-text:   var(--destructive);
 
+  /* Success surfaces */
+  --success-subtle: oklch(from var(--success) l c h / 0.10);
+  --success-text:   oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);
+
+  /* Warning surfaces */
+  --warning-subtle: oklch(from var(--warning) l c h / 0.10);
+  --warning-text:   oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);
+
+  /* Info surfaces */
+  --info-subtle: oklch(from var(--info) l c h / 0.10);
+  --info-text:   oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);
+
   /* Utility — scrim overlay for modals/dialogs */
   --scrim: oklch(from var(--foreground) l c h / 0.35);