@astryxdesign/theme-neutral 0.0.0-bootstrap.0 → 0.0.15

package/dist/source.js

@@ -0,0 +1,602 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/source.ts
+var source_exports = {};
+__export(source_exports, {
+  neutralIconRegistry: () => neutralIconRegistry,
+  neutralTheme: () => neutralTheme
+});
+module.exports = __toCommonJS(source_exports);
+
+// src/neutralTheme.ts
+var import_theme = require("@astryxdesign/core/theme");
+
+// src/icons.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var iconProps = {
+  size: "1em",
+  "aria-hidden": true
+};
+var neutralIconRegistry = {
+  close: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { ...iconProps }),
+  chevronDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { ...iconProps }),
+  chevronLeft: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { ...iconProps }),
+  chevronRight: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { ...iconProps }),
+  check: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { ...iconProps }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle, { ...iconProps }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.XCircle, { ...iconProps }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AlertTriangle, { ...iconProps }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { ...iconProps }),
+  calendar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { ...iconProps }),
+  clock: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Clock, { ...iconProps }),
+  externalLink: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ExternalLink, { ...iconProps }),
+  menu: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Menu, { ...iconProps }),
+  moreHorizontal: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MoreHorizontal, { ...iconProps }),
+  search: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { ...iconProps }),
+  arrowUp: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { ...iconProps }),
+  arrowDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowDown, { ...iconProps }),
+  arrowsUpDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUpDown, { ...iconProps }),
+  funnel: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Filter, { ...iconProps }),
+  eyeSlash: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.EyeOff, { ...iconProps }),
+  viewColumns: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Columns, { ...iconProps }),
+  copy: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { ...iconProps }),
+  checkDouble: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCheck, { ...iconProps }),
+  wrench: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Wrench, { ...iconProps }),
+  stop: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Square, { ...iconProps }),
+  microphone: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Mic, { ...iconProps })
+};
+
+// src/neutralTheme.ts
+var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
+  name: "xds-neutral",
+  tokens: {
+    keyword: ["#700084", "#efa8ff"],
+    // purple T30/T80
+    string: ["#005600", "#a6d2a2"],
+    // green (sat T30 / pastel T80)
+    comment: ["#737373", "#a3a3a3"],
+    // neutral
+    number: ["#6e3500", "#ffb37f"],
+    // orange
+    function: ["#00458c", "#a0caff"],
+    // blue T30/T80 H=255
+    type: ["#700084", "#efa8ff"],
+    // purple
+    variable: ["#171717", "#e5e5e5"],
+    // near-black / near-white
+    operator: ["#737373", "#a3a3a3"],
+    // neutral
+    constant: ["#6e3500", "#ffb37f"],
+    // orange
+    tag: ["#89001a", "#ffaeaa"],
+    // red
+    attribute: ["#584400", "#eec12f"],
+    // yellow
+    property: ["#005348", "#83dac9"],
+    // teal
+    punctuation: ["#a3a3a3", "#525252"],
+    // neutral
+    background: ["#fafafa", "#0a0a0a"]
+  }
+});
+var neutralTheme = (0, import_theme.defineTheme)({
+  name: "neutral",
+  // Typography: Figtree across body, heading, and display sizes (display
+  // size tokens inherit from heading.family). Monospace stays as the
+  // platform default for code.
+  // Scale: base=14, ratio=1.2. Bold weights on h3/h4 for subsection hierarchy.
+  typography: {
+    scale: { base: 14, ratio: 1.2 },
+    body: {
+      family: "Figtree",
+      fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+    },
+    heading: {
+      family: "Figtree",
+      fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      weights: { 3: "bold", 4: "bold" }
+    },
+    code: {
+      family: "ui-monospace",
+      fallbacks: '"SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+    }
+  },
+  // Motion: snappier than default to match shadcn/Tailwind conventions.
+  // Produces: fast-min=95ms, fast=125ms, fast-max=165ms,
+  //           medium-min=225ms, medium=300ms, medium-max=400ms.
+  motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
+  syntax: neutralSyntax,
+  tokens: {
+    // =========================================================================
+    // Core — pure grayscale spine (Tailwind neutral)
+    // 50:#fafafa 100:#f5f5f5 200:#e5e5e5 300:#d4d4d4 400:#a3a3a3
+    // 500:#737373 600:#525252 700:#404040 800:#262626 900:#171717 950:#0a0a0a
+    // =========================================================================
+    // =========================================================================
+    // Backgrounds — Figma-style flat with a single lifted surface.
+    //
+    // Dark mode collapses card / popover / muted to body T10. Cards and
+    // popovers lift purely via shadow + inset highlight (see --shadow-*
+    // below) — they don't need a distinct tone.
+    //
+    // Surface is the exception: it's tonally LIGHTER than body (T15) so
+    // interactive components that sit on top of body have a clear,
+    // differentiated foreground. Real consumers of --color-background-surface
+    // are: switches, radios, checkboxes, multi-selectors, dialogs, app
+    // shells, sections — all things that need to lift above the canvas.
+    //
+    //   surface  T15 #262626  — interactive surfaces lifted above body
+    //   body     T10 #1b1b1b  — main canvas
+    //   card     T10 #1b1b1b  — same as body, lifts via --shadow-low
+    //   popover  T10 #1b1b1b  — same as body, lifts via --shadow-med
+    //   muted    T10 #1b1b1b  — same as body
+    //
+    // Light mode keeps the standard ladder (white surfaces float on tinted
+    // body; shadows do most of the lifting):
+    //   surface  T100 #ffffff
+    //   body     T95  #f1f1f1
+    //   card     T100 #ffffff
+    //   popover  T100 #ffffff
+    //   muted    T95  #f1f1f1
+    //
+    // All values use the OKLCH Neutral tonal palette (chroma=0).
+    // =========================================================================
+    "--color-background-surface": ["#ffffff", "#262626"],
+    "--color-background-body": ["#f1f1f1", "#1b1b1b"],
+    "--color-background-card": ["#ffffff", "#1b1b1b"],
+    "--color-background-popover": ["#ffffff", "#1b1b1b"],
+    "--color-background-muted": ["#f1f1f1", "#1b1b1b"],
+    // Accent + neutral surface tints (sit alongside backgrounds)
+    "--color-accent": ["#262626", "#ebebeb"],
+    "--color-accent-muted": ["#f1f1f1", "#262626"],
+    "--color-neutral": ["#0000000F", "#FFFFFF1A"],
+    // Overlays (modal scrims, hover/pressed tints)
+    "--color-overlay": ["#00000080", "#000000CC"],
+    "--color-overlay-hover": ["#0000000D", "#FFFFFF0D"],
+    "--color-overlay-pressed": ["#0000001A", "#FFFFFF1A"],
+    // Text
+    "--color-text-primary": ["#171717", "#fafafa"],
+    "--color-text-secondary": ["#737373", "#a3a3a3"],
+    "--color-text-disabled": ["#a3a3a3", "#525252"],
+    "--color-text-accent": ["#262626", "#ebebeb"],
+    "--color-on-dark": "#ffffff",
+    "--color-on-light": "#171717",
+    // Contrast: neutral accent is near-black (L) / near-white (D)
+    "--color-on-accent": ["#ffffff", "#171717"],
+    "--color-on-success": ["#ffffff", "#171717"],
+    "--color-on-error": ["#ffffff", "#171717"],
+    "--color-on-warning": "#171717",
+    // Icon
+    "--color-icon-accent": ["#262626", "#ebebeb"],
+    "--color-icon-primary": ["#171717", "#fafafa"],
+    "--color-icon-secondary": ["#737373", "#a3a3a3"],
+    "--color-icon-disabled": ["#a3a3a3", "#525252"],
+    // Status / Sentiment — dark mode follows the issue #2150 rubric:
+    //
+    //   Light mode: pastel T90 banner bg + dark T30/T40 text/icon. Locked
+    //               light values for cards/banners/inputs/destructive btn.
+    //   Dark mode : tinted-dark T20 bg + light pastel T80 text. INVERTED
+    //               from light. Avoids the §5 "pastel-in-both-modes"
+    //               anti-pattern (locked pastels glow against a dark body).
+    //
+    //   --color-X         = "saturated text/icon stop":
+    //                         light = T40 dark colored (sits on light pastel)
+    //                         dark  = T80 light pastel  (sits on dark tinted bg)
+    //                       Used by destructive button text, input border/icon
+    //                       (in light), banner-status-* text overrides.
+    //   --color-X-muted   = "muted bg stop":
+    //                         light = T90 light pastel
+    //                         dark  = hue-tinted alpha overlay (T70 stop @ 24%)
+    //                       Used by banner bg, status-input message bg,
+    //                       destructive button bg. Dark mode uses an alpha
+    //                       overlay rather than a solid T20 tinted bg so
+    //                       the surface composes onto whatever sits behind
+    //                       it (body, card, popover) rather than reading
+    //                       as a hard colored panel.
+    //
+    //   24% alpha = '3D' suffix. Hue values match --color-icon-{X} dark
+    //   slots (palette T70). Composited onto body #1b1b1b, the effective
+    //   bg luminance hits ~1.65-1.70:1 vs body — visible colored surface
+    //   without the heaviness of a solid T20 panel.
+    "--color-success": ["#007004", "#9fe59b"],
+    "--color-error": ["#a50c25", "#ffc6c1"],
+    "--color-warning": ["#745b00", "#fdcf4f"],
+    "--color-success-muted": ["#c5e5c0", "#84c9803D"],
+    "--color-error-muted": ["#facecb", "#ff9e973D"],
+    "--color-warning-muted": ["#f8da9d", "#deb4333D"],
+    // Border
+    "--color-border": ["#ebebeb", "#FFFFFF1A"],
+    "--color-border-emphasized": ["#d4d4d4", "#525252"],
+    // Effects
+    "--color-skeleton": ["#ebebeb", "#525252"],
+    "--color-shadow": ["#0000001A", "#0000004D"],
+    "--color-tint-hover": ["black", "white"],
+    // =========================================================================
+    // Categorical — light mode uses pastel surfaces + dark colored text;
+    //               dark mode INVERTS to a hue-tinted alpha overlay surface +
+    //               light pastel text (per #2150 rubric §3 — pick the tone
+    //               that satisfies required contrast against every surface
+    //               the token touches).
+    //
+    // Per-token tone choice (CIELab L*):
+    //   bg     light=T87-T90 pastel       dark=T70 hue @ 24% alpha overlay
+    //                                       (composites onto body to ~1.65:1
+    //                                        vs body — colored surface that
+    //                                        feels lighter than a solid T20
+    //                                        panel; same hue as --color-icon-X
+    //                                        dark slot, just at lower opacity)
+    //   border light=T80 pastel           dark=T60 mid-bright (>=5.8:1 vs body)
+    //   icon   light=T30 dark colored     dark=T70 light pastel
+    //   text   light=T30 dark colored     dark=T80 light pastel (>=7:1 on bg)
+    //
+    // Light pastels still use the per-hue chroma table (red/blue C=0.05,
+    // orange/green/purple/pink C=0.06, teal/cyan C=0.07, yellow H=85 C=0.10)
+    // for equal PERCEIVED saturation. Dark stops (T60/T70/T80) come from
+    // the dark-mode tonal palette (chroma×0.85, +5 tone lift tapering 80-95).
+    // =========================================================================
+    // Each row's dark slots are HCT-derived from the source hex listed in
+    // apps/sandbox/src/app/(fullscreen)/pages/neutral-palette/page.tsx via
+    // the canonical dark-ramp transform (chroma×0.85, +5 tone-lift taper)
+    // — same algorithm the Tonal Palettes preview renders. Border=T60,
+    // icon=T70, text=T80. Background uses the T70 hue at 24% alpha so the
+    // overlay surface composites onto body to ~1.65:1 luminance.
+    // Red  H=22 — source #eb183a
+    "--color-background-red": ["#facecb", "#ff9e973D"],
+    "--color-border-red": ["#e6bab8", "#ff6f6c"],
+    "--color-icon-red": ["#89001a", "#ff9e97"],
+    "--color-text-red": ["#89001a", "#ffc6c1"],
+    // Orange  H=55 — source #d57113
+    "--color-background-orange": ["#fad0b5", "#ffa2583D"],
+    "--color-border-orange": ["#e6bda2", "#e2883e"],
+    "--color-icon-orange": ["#6e3500", "#ffa258"],
+    "--color-text-orange": ["#6e3500", "#ffc9a2"],
+    // Yellow  H=90 — source #f8c723
+    // Light-mode butter-yellow pastel at H=85 C=0.085 L=0.90 — yellow
+    // sits at the green-cyan luminance peak so it feels louder than the
+    // other status hues at the same canonical L. Picker decision: pull
+    // L down one step (0.91→0.90) and C down to its identity floor
+    // (0.10→0.085, just above the bronze threshold) so it sits closer
+    // to red/blue's perceived brightness without losing yellow identity.
+    // Dark-mode comes from the canonical H=90 ramp for tonal-palette
+    // consistency.
+    "--color-background-yellow": ["#f8da9d", "#deb4333D"],
+    "--color-border-yellow": ["#e4c279", "#c0990e"],
+    "--color-icon-yellow": ["#584400", "#deb433"],
+    "--color-text-yellow": ["#584400", "#fdcf4f"],
+    // Green  H=144 — source #358a3a
+    "--color-background-green": ["#c5e5c0", "#84c9803D"],
+    "--color-border-green": ["#b2d1ac", "#69ad67"],
+    "--color-icon-green": ["#0c5700", "#84c980"],
+    "--color-text-green": ["#0c5700", "#9fe59b"],
+    // Teal  H=180 — source #0c7365
+    // Light pastel uses L=0.87 C=0.065 (a step darker + less chroma than
+    // the L=0.888 C=0.07 used by other hues) to compensate for the
+    // green-cyan luminance overshoot — at the same OKLCH L, teal/cyan read
+    // ~5% brighter than red/blue because the eye's luminance response
+    // peaks in this band. Dropping L+C brings perceived brightness in
+    // line with the rest of the palette without losing hue identity.
+    "--color-background-teal": ["#a5e3d6", "#7ec6b83D"],
+    "--color-border-teal": ["#94d6c8", "#63ab9d"],
+    "--color-icon-teal": ["#005348", "#7ec6b8"],
+    "--color-text-teal": ["#005348", "#99e2d3"],
+    // Cyan  H=215 — source #0c6f82
+    // Same L=0.87 C=0.065 pastel as teal (luminance overshoot compensation).
+    "--color-background-cyan": ["#a3e0ef", "#83c2d43D"],
+    "--color-border-cyan": ["#91d3e3", "#67a7b8"],
+    "--color-icon-cyan": ["#00505f", "#83c2d4"],
+    "--color-text-cyan": ["#00505f", "#9edef0"],
+    // Blue  H=255 — source #0074e2
+    //   T50 #0074e2 reserved for filled Info badge / progressbar / inset hover.
+    "--color-background-blue": ["#c4ddfb", "#9eb7ff3D"],
+    "--color-border-blue": ["#b1c9e7", "#6d9cfe"],
+    "--color-icon-blue": ["#00458c", "#9eb7ff"],
+    "--color-text-blue": ["#00458c", "#c7d3ff"],
+    // Purple  H=320 — source #980fb2
+    "--color-background-purple": ["#eccef3", "#f297ff3D"],
+    "--color-border-purple": ["#d8bbdf", "#dd74f0"],
+    "--color-icon-purple": ["#700084", "#f297ff"],
+    "--color-text-purple": ["#700084", "#fac1ff"],
+    // Pink  H=355 — source #b10e69
+    "--color-background-pink": ["#fccadc", "#ff99c33D"],
+    "--color-border-pink": ["#e7b7c8", "#f273aa"],
+    "--color-icon-pink": ["#83004b", "#ff99c3"],
+    "--color-text-pink": ["#83004b", "#ffc3da"],
+    // Gray (categorical neutral, chroma 0)
+    //   Light: #e5e5e5 (Neutral 200) so it's visibly distinct from the
+    //          lighter body / muted surface (both #f5f5f5).
+    //   Dark : var(--color-neutral) — semi-transparent white wash
+    //          (#FFFFFF1A, 10%). Matches the same treatment the gray
+    //          badge uses; clearly distinct from the body T10 #1b1b1b
+    //          while staying chroma-0 neutral. Solid T15 #1c1c1c was
+    //          indistinguishable from --color-background-muted.
+    "--color-background-gray": ["#e5e5e5", "var(--color-neutral)"],
+    "--color-border-gray": ["#d4d4d4", "#262626"],
+    "--color-icon-gray": ["#525252", "#a3a3a3"],
+    "--color-text-gray": ["#262626", "#e5e5e5"],
+    // =========================================================================
+    // Radius — slightly larger than default (kept as-is)
+    // =========================================================================
+    "--radius-none": "0.25rem",
+    "--radius-inner": "0.375rem",
+    "--radius-element": "0.625rem",
+    "--radius-container": "0.75rem",
+    "--radius-page": "1.75rem",
+    "--radius-full": "9999px",
+    // =========================================================================
+    // Shadows
+    //
+    // Light mode: matches origin/main exactly (5%/10% low+med, 10%/15% high).
+    // Subtle drops; light surfaces don't need rim highlights.
+    //
+    // Dark mode: deepened drops + an all-around 1px white inset that wraps
+    // every edge ("Figma-style bezel"). The inset mimics ambient light
+    // catching the surface's rim on every side, giving cards/popovers/modals
+    // a substantial "lit from above" feel that drop shadows alone can't
+    // achieve against a dark canvas.
+    //   low  :  drops 25%/40% + 8%  white all-around inset
+    //   med  :  drops 35%/50% + 12% white all-around inset
+    //   high :  drops 50%/70% + 15% white all-around inset
+    //
+    // The inset layer uses light-dark(transparent, ...) so light mode is
+    // unaffected — main's exact light values are preserved.
+    // =========================================================================
+    "--shadow-low": "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))",
+    "--shadow-med": "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%))",
+    "--shadow-high": "0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%))",
+    "--shadow-inset-hover": "inset 0px 0px 0px 2px #0074e24D",
+    "--shadow-inset-selected": "inset 0px 0px 0px 2px #0074e280",
+    "--shadow-inset-success": "inset 0px 0px 0px 2px #1981004D",
+    "--shadow-inset-warning": "inset 0px 0px 0px 2px #ffce2f4D",
+    "--shadow-inset-error": "inset 0px 0px 0px 2px #e33f4a4D"
+  },
+  components: {
+    // =========================================================================
+    // Button — primary gets white text, secondary gets a border, destructive
+    // uses the OKLCH red filled treatment.
+    // =========================================================================
+    button: {
+      "variant:destructive": {
+        backgroundColor: "var(--color-error-muted)",
+        // locked pastel red bg
+        color: "var(--color-error)"
+        // locked T30 red — matches banner/input error text
+      }
+    },
+    // =========================================================================
+    // Badge —
+    //   Semantic (info/success/warning/error): filled saturated T50 + contrasting
+    //     text (white, or dark on yellow). The filled-button rule from #2150
+    //     §3 — text contrast locks the bg tone, so this stays at T50 in
+    //     BOTH modes, unlike pastel surfaces which invert by mode.
+    //   Categorical (blue/green/red/orange/etc.): pastel-tinted hue surface +
+    //     colored text — light mode = soft T87-T90 + dark T30 text; dark mode
+    //     = T20 tinted + T80 light pastel text (sources: --color-background-X
+    //     and --color-text-X tokens).
+    //   Neutral: light gray bg + dark text (or inverted in dark mode).
+    // =========================================================================
+    badge: {
+      // Semantic — filled saturated bg + contrasting text.
+      //   Light: vivid T45-T55 from the OKLCH palette + white text
+      //          (~4.5-5:1 — Material/Linear/Vercel pop).
+      //   Dark : T60 stop from the dark-mode tonal palette (chroma×0.85,
+      //          +5 tone-lift taper from issue #2150 §4) + DARK text.
+      //          T60+white fails AA-large (~2.7:1); T60+dark hits 6.6-7:1
+      //          and tames the §4 vibration. Same dark-text-on-bright-bg
+      //          treatment that warning yellow uses in both modes.
+      "variant:info": {
+        // Light: T50 #0074e2 (palette saturated stop)
+        // Dark : T60 stop from dark-mode tonal palette of source #0074e2
+        backgroundColor: "light-dark(#0074e2, #6d9cfe)",
+        color: "light-dark(#ffffff, #171717)"
+      },
+      "variant:neutral": {
+        // Mirrors the gray categorical badge — same neutral chip treatment
+        // (Neutral 200 light / semi-transparent white wash dark) sourced
+        // from the gray hue tokens, so a single change at the token layer
+        // updates both variants.
+        backgroundColor: "var(--color-background-gray)",
+        color: "var(--color-text-gray)"
+      },
+      "variant:success": {
+        // Light: T45 #198100 (palette saturated stop)
+        // Dark : T60 stop from dark-mode tonal palette of source #198100
+        backgroundColor: "light-dark(#198100, #64af4c)",
+        color: "light-dark(#ffffff, #171717)"
+      },
+      "variant:warning": {
+        // Yellow stays at the same hex in both modes — chroma reduction
+        // is barely visible at T85, and dark text on yellow doesn't
+        // suffer from the §4 vibration concern.
+        backgroundColor: "#ffce2f",
+        color: "#171717"
+      },
+      "variant:error": {
+        // Light: T55 #e33f4a (palette saturated stop)
+        // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
+        //        source #dc2626 (kept on H=27 alarm-red rather than coral)
+        backgroundColor: "light-dark(#e33f4a, #ff705d)",
+        color: "light-dark(#ffffff, #171717)"
+      },
+      // Categorical — bg + text reference the per-hue tokens, so behavior
+      // tracks the categorical palette automatically:
+      //   Light: pastel T87-T90 bg + dark T30 colored text (low-key chip)
+      //   Dark : tinted T20 bg + light T80 colored text (per #2150 §5,
+      //          inverted from light to avoid the "pastel-in-both-modes"
+      //          anti-pattern that makes locked light pastels glow on a
+      //          dark body)
+      "variant:red": {
+        backgroundColor: "var(--color-background-red)",
+        color: "var(--color-text-red)"
+      },
+      "variant:orange": {
+        backgroundColor: "var(--color-background-orange)",
+        color: "var(--color-text-orange)"
+      },
+      "variant:yellow": {
+        backgroundColor: "var(--color-background-yellow)",
+        color: "var(--color-text-yellow)"
+      },
+      "variant:green": {
+        backgroundColor: "var(--color-background-green)",
+        color: "var(--color-text-green)"
+      },
+      "variant:teal": {
+        backgroundColor: "var(--color-background-teal)",
+        color: "var(--color-text-teal)"
+      },
+      "variant:cyan": {
+        backgroundColor: "var(--color-background-cyan)",
+        color: "var(--color-text-cyan)"
+      },
+      "variant:blue": {
+        backgroundColor: "var(--color-background-blue)",
+        color: "var(--color-text-blue)"
+      },
+      "variant:purple": {
+        backgroundColor: "var(--color-background-purple)",
+        color: "var(--color-text-purple)"
+      },
+      "variant:pink": {
+        backgroundColor: "var(--color-background-pink)",
+        color: "var(--color-text-pink)"
+      },
+      "variant:gray": {
+        backgroundColor: "var(--color-background-gray)",
+        color: "var(--color-text-gray)"
+      }
+    },
+    // =========================================================================
+    // Banner — sits on a hue-tinted surface with colored text/icon:
+    //   Light: pastel T90 bg (pulled from --color-{X}-muted / --color-background-blue)
+    //          + dark T30 colored text (--color-text-{hue}).
+    //   Dark : tinted T20 bg (same tokens, dark slot) + light T80 colored text.
+    //          Per #2150 §5 — large hue-tinted surfaces in dark mode invert
+    //          to a deep tinted bg + light text rather than locking the
+    //          light-mode pastel.
+    //
+    // The inner-header *-muted token is forced transparent so the outer
+    // tinted background shows through cleanly.
+    //
+    // Status overrides reference --color-text-{hue} so text/icon colors
+    // stay in sync with the palette anchors automatically.
+    banner: {
+      "status:info": {
+        backgroundColor: "var(--color-background-blue)",
+        "--color-accent-muted": "transparent",
+        "--color-text-primary": "var(--color-text-blue)",
+        "--color-text-secondary": "var(--color-text-blue)",
+        "--color-accent": "var(--color-text-blue)"
+      },
+      // success/warning/error banner bgs come from --color-{X}-muted, which
+      // already carries the correct light/dark tinted values. We only need
+      // to redirect the text/icon to the palette colored stop.
+      "status:success": {
+        "--color-text-primary": "var(--color-text-green)",
+        "--color-text-secondary": "var(--color-text-green)",
+        "--color-success": "var(--color-text-green)"
+      },
+      "status:warning": {
+        "--color-text-primary": "var(--color-text-yellow)",
+        "--color-text-secondary": "var(--color-text-yellow)",
+        "--color-warning": "var(--color-text-yellow)"
+      },
+      "status:error": {
+        "--color-text-primary": "var(--color-text-red)",
+        "--color-text-secondary": "var(--color-text-red)",
+        "--color-error": "var(--color-text-red)"
+      }
+    },
+    // =========================================================================
+    // TextInput — no per-status overrides needed. The global tokens
+    // --color-{success,error,warning} carry the correct values in both
+    // modes (light=T40 dark colored, dark=T80 light pastel) for both
+    // surfaces the input border/icon touches: the input surface
+    // (white/T15-dark) and the status message bubble (light pastel T90 /
+    // dark T20). Verified all six combinations clear AA non-text 3:1.
+    // =========================================================================
+    // =========================================================================
+    // Switch — off-state track uses the same lifted-neutral surface as the
+    // ProgressBar track (--color-border-emphasized). Aligns the two
+    // "channel-on-body" components so their off-states share one visual
+    // language: light T85 #d4d4d4 sits one step darker than the body T95
+    // bg, dark T35 #525252 sits one step lighter than the body T10. Each
+    // is a defined channel, not a wash that blends in.
+    // =========================================================================
+    switch: {
+      base: {
+        "--color-background-gray": "var(--color-border-emphasized)"
+      }
+    },
+    progressbar: {
+      base: {
+        // Track uses --color-background-muted; override it to
+        // --color-border-emphasized (Neutral T85 #d4d4d4 in light mode) so
+        // the track is clearly darker than the body bg (Neutral T95 #f1f1f1)
+        // and reads as a defined channel rather than blending in. Dark
+        // mode inherits T35 #525252 — same one-step-lighter behavior.
+        "--color-background-muted": "var(--color-border-emphasized)"
+      },
+      // Vivid stops match the filled semantic badge colors (info/success/
+      // warning/error variants in the badge override above). Same hex
+      // values; documented per role with palette provenance.
+      "variant:accent": {
+        // Blue T50 saturated stop (= variant:info badge bg)
+        "--color-accent": "#0074e2"
+      },
+      "variant:success": {
+        // Green T45 saturated stop (= variant:success badge bg)
+        "--color-success": "#198100"
+      },
+      "variant:warning": {
+        // Yellow T85 saturated stop (= variant:warning badge bg)
+        "--color-warning": "#ffce2f"
+      },
+      "variant:error": {
+        // Red T55 saturated stop (= variant:error badge bg)
+        "--color-error": "#e33f4a"
+      }
+    },
+    // =========================================================================
+    // Card — tighter padding via public card padding token
+    // =========================================================================
+    card: {
+      base: {
+        padding: "var(--spacing-3)"
+      }
+    },
+    // =========================================================================
+    // Section — tighter padding via public section padding token
+    // =========================================================================
+    section: {
+      base: {
+        padding: "var(--spacing-3)"
+      }
+    }
+    // Heading and text component overrides are auto-generated by typography.scale.
+    // h3/h4 bold weights come from typography.heading.weights above.
+  },
+  icons: neutralIconRegistry
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  neutralIconRegistry,
+  neutralTheme
+});