@astryxdesign/theme-stone 0.7.4-canary.b25f95e → 0.7.4-canary.eccc6ee

package/README.md

@@ -23,14 +23,51 @@ function App() {
 
 ### Import paths
 
-| Path                         | Use case                                               |
-| ---------------------------- | ------------------------------------------------------ |
-| `@astryxdesign/theme-stone`           | Source build (StyleX compilation via `@astryxdesign/build`)     |
-| `@astryxdesign/theme-stone/built`     | Pre-built dist (Tailwind, plain CSS, or no build step) |
-| `@astryxdesign/theme-stone/theme.css` | Pre-built CSS file (import in your stylesheet)         |
+| Path                                  | Use case                                                    |
+| ------------------------------------- | ----------------------------------------------------------- |
+| `@astryxdesign/theme-stone`           | Source build (StyleX compilation via `@astryxdesign/build`) |
+| `@astryxdesign/theme-stone/built`     | Pre-built dist (Tailwind, plain CSS, or no build step)      |
+| `@astryxdesign/theme-stone/theme.css` | Pre-built CSS file (import in your stylesheet)              |
 
 If you're using `@astryxdesign/build` for StyleX source compilation, import from the bare path. Otherwise, use `/built`.
 
+## Approved palette
+
+Stone keeps its generation request in `palette.config.json`, the reviewed
+`astryx-oklch-v1` output in `src/stonePalettes.generated.ts`, and the detached
+generation receipt beside it. `stonePaletteRefs.generated.ts` provides the
+small runtime projection consumed by the maintained theme.
+
+The palette preserves Stone's exact configured neutral and pastel anchors while
+generating separate light and dark ramps. Green, Yellow, Teal, and Cyan use
+reviewed re-seeded midtones rather than preserving their released compatibility
+ramp values. The complete palette remains available for authoring and audits; the
+runtime theme imports only the selected stops in
+`stonePaletteRefs.generated.ts`.
+
+Use semantic theme tokens in components. Stone's theme source maps those roles
+to named palette stops; components never read raw palette values directly. The
+prebuilt theme and CSS contain resolved values. Changing the generated palette
+must include the regenerated receipt, selected-reference module, token diff,
+tests, and visual review. Keep `stoneTheme.ts` and the CLI template copy
+synchronized when changing a mapping.
+
+The bare package export preserves the original `stonePalettes.family[stop]`,
+`stonePalettes.family.hue`, and `stonePalettes.family.chroma` shape. The generated
+light and dark ramps are private authoring artifacts used by the maintained theme,
+tests, and review tooling rather than an expanded public palette API:
+
+```ts
+import {stonePalettes} from '@astryxdesign/theme-stone';
+
+const existingSharedRampValue = stonePalettes.orange[90];
+```
+
+The palette is an authoring and audit reference, not a component styling API,
+chart-color API, or accessibility guarantee. Components should read semantic
+tokens, charts should use the data-visualization color API, and every custom
+foreground/background pair still needs contextual contrast verification.
+
 ### CSS import
 
 Add the theme CSS to your stylesheet:

package/dist/source.d.ts

@@ -1,3 +1,3 @@
-export { stoneTheme, stonePalettes } from './stoneTheme';
+export { stonePalettes, stoneTheme } from './stoneTheme';
 export { stoneIconRegistry } from './icons';
 //# sourceMappingURL=source.d.ts.map

package/dist/source.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source.d.ts","sourceRoot":"","sources":["../src/source.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,aAAa,EAAC,MAAM,cAAc,CAAC;AACvD,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"source.d.ts","sourceRoot":"","sources":["../src/source.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AACvD,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC"}

package/dist/source.js

@@ -68,58 +68,88 @@ var stoneIconRegistry = {
   microphone: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Mic, { ...iconProps })
 };
 
+// src/stonePaletteRefs.generated.ts
+var stonePaletteRefs = {
+  green: {
+    light: { 30: "#354f31", 55: "#609757", 85: "#bfdfbb", 90: "#d2eccf" },
+    dark: { 25: "#2f412c", 35: "#3e5d38", 70: "#90ba8a", 80: "#b3d0af", 90: "#d5e9d2" }
+  },
+  yellow: {
+    light: { 30: "#524818", 40: "#736419", 55: "#a08c36", 85: "#e7d3a4", 90: "#f4e1b7" },
+    dark: { 25: "#433b1b", 35: "#615620", 70: "#c2af6e", 80: "#d9c794", 90: "#f1e1b9" }
+  },
+  red: {
+    light: { 30: "#603c37", 40: "#745752", 60: "#a98984", 85: "#f0cac4", 90: "#fbdad4" },
+    dark: { 25: "#50332e", 35: "#684a45", 70: "#c6a29c", 80: "#e0bdb8", 90: "#f7dbd7" }
+  },
+  purple: {
+    light: { 30: "#4c405b", 40: "#635a70", 85: "#d9cfea", 90: "#e7def5" },
+    dark: { 25: "#3f374c", 35: "#574e64", 70: "#b0a5c0", 90: "#e6def3" }
+  },
+  teal: {
+    light: { 30: "#2c4f44", 40: "#40675c", 85: "#c3dbd2", 90: "#d4e8e1" },
+    dark: { 25: "#274239", 35: "#3a5b50", 70: "#94b3a9", 90: "#d6e7e1" }
+  },
+  neutral: {
+    light: { 0: "#000000", 15: "#25252a", 30: "#46464e", 40: "#5f5f64", 55: "#848489", 85: "#d4d3dd", 90: "#e2e2e8", 95: "#f0f0f7", 100: "#ffffff" },
+    dark: { 0: "#000000", 5: "#101018", 10: "#1b1b21", 15: "#25252a", 20: "#302f36", 25: "#3a3a42", 35: "#525159", 40: "#5e5e64", 65: "#9d9ea5", 70: "#ababb3", 90: "#e2e2e8", 95: "#f0f0f9", 100: "#ffffff" }
+  },
+  orange: {
+    dark: { 25: "#4e3522", 35: "#684c34", 70: "#c9a382", 90: "#ffdcbb" },
+    light: { 30: "#5e3f27", 85: "#f2cdaa", 90: "#ffdcbb" }
+  },
+  blue: {
+    light: { 30: "#344861", 40: "#516074", 85: "#c2d6f1", 90: "#d3e4fc" },
+    dark: { 25: "#2c3c52", 35: "#445469", 70: "#9aadc7", 90: "#d5e4f8" }
+  },
+  cyan: {
+    light: { 30: "#264d57", 85: "#badbe4", 90: "#cbe9f0" },
+    dark: { 25: "#234048", 35: "#345761", 90: "#cfe8ee" }
+  },
+  pink: {
+    light: { 30: "#5a3c4f", 85: "#e9cadc", 90: "#f5d9ea" },
+    dark: { 25: "#4b3242", 35: "#624a59", 90: "#f2dbe8" }
+  }
+};
+
 // src/stoneTheme.ts
+var { blue, cyan, green, neutral, orange, pink, purple, red, teal, yellow } = stonePaletteRefs;
+var lightDark = (light, dark) => `light-dark(${light}, ${dark})`;
+var withAlpha = (color, alpha) => `${color}${alpha}`;
 var INPUT_STATUS_VARS = {
   "status:success": {
-    "--color-success": "light-dark(#7f977e, #99b298)"
-    // Green T60 / T70
+    "--color-success": lightDark(green.light[55], green.dark[70])
   },
   "status:warning": {
-    "--color-warning": "light-dark(#9f8f68, #bbaa81)"
-    // Yellow T60 / T70
+    "--color-warning": lightDark(yellow.light[55], yellow.dark[70])
   },
   "status:error": {
-    "--color-error": "light-dark(#a58b86, #c0a5a1)"
-    // Red T60 / T70
+    "--color-error": lightDark(red.light[60], red.dark[70])
   }
 };
 var stoneSyntax = (0, import_theme.defineSyntaxTheme)({
   name: "astryx-stone",
   tokens: {
-    keyword: ["#645a72", "#b2a7c1"],
-    // Purple T40 / T70
-    string: ["#4e6357", "#9bb19a"],
-    // Teal T40 / Green T70
-    comment: ["#5e5e5e", "#ababb0"],
-    // Stone Neutral T40 / T70
-    number: ["#755752", "#bea792"],
-    // Red T40 / Orange T70
-    function: ["#506072", "#99adc6"],
-    // Blue T40 / T70
-    type: ["#645a72", "#b2a7c1"],
-    // Purple T40 / T70
-    variable: ["#5e5e5e", "#ababb0"],
-    // Stone Neutral T40 / T70
-    operator: ["#5e5e5e", "#ababb0"],
-    // Stone Neutral T40 / T70
-    constant: ["#755752", "#bea792"],
-    // Red T40 / Orange T70
-    tag: ["#775751", "#c7a39d"],
-    // Red T40 / T70
-    attribute: ["#79693f", "#b6aa90"],
-    // Yellow T45 / T70
-    property: ["#4e6357", "#94b2a0"],
-    // Teal T40 / T70
-    punctuation: ["#5e5e5e", "#ababb0"],
-    // Stone Neutral T40 / T70
-    background: ["#f3f3f5", "#171719"],
-    // Diff rows: the muted green/red at 25% in light and 20% in dark keep
-    // every token at or above 4.5:1 on the tint; the markers are the tinted
-    // text tokens (8.1:1 light, 8.8:1 dark on their tints).
-    added: ["#d0e9ce40", "#b4cdb233"],
-    removed: ["#f9dcd740", "#dcc0bc33"],
-    "added-marker": ["#374c36", "#d0e9ce"],
-    "removed-marker": ["#58413e", "#f9dcd7"]
+    keyword: [purple.light[40], purple.dark[70]],
+    string: [teal.light[40], green.dark[70]],
+    comment: [neutral.light[40], neutral.dark[70]],
+    number: [red.light[40], orange.dark[70]],
+    function: [blue.light[40], blue.dark[70]],
+    type: [purple.light[40], purple.dark[70]],
+    variable: [neutral.light[40], neutral.dark[70]],
+    operator: [neutral.light[40], neutral.dark[70]],
+    constant: [red.light[40], orange.dark[70]],
+    tag: [red.light[40], red.dark[70]],
+    attribute: [yellow.light[40], yellow.dark[70]],
+    property: [teal.light[40], teal.dark[70]],
+    punctuation: [neutral.light[40], neutral.dark[70]],
+    background: [neutral.light[95], neutral.dark[5]],
+    // Translucent diff rows retain each token's contrast while the opaque
+    // markers carry the same Green and Red families as their row tint.
+    added: [withAlpha(green.light[90], "40"), withAlpha(green.dark[80], "33")],
+    removed: [withAlpha(red.light[90], "40"), withAlpha(red.dark[80], "33")],
+    "added-marker": [green.light[30], green.dark[90]],
+    "removed-marker": [red.light[30], red.dark[90]]
   }
 });
 var SECONDARY_BUTTON = {
@@ -179,184 +209,132 @@ var stoneTheme = (0, import_theme.defineTheme)({
   motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
   syntax: stoneSyntax,
   tokens: {
-    // =========================================================================
-    // Colors — warm stone palette
-    // Core: #28282A, #84848B, #D8D8DB, #f3f3f5, #FFFFFF
-    // =========================================================================
-    // Core semantic — all neutrals H=291
-    // Stone 900 T=16 C=1.4, Stone 500 T=55 C=4, Stone 300 T=86 C=1.6, Stone 100 T=96 C=1
-    "--color-accent": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    "--color-accent-muted": ["#25252a14", "#f3f3f520"],
-    // light: Stone Neutral T15 · 8% / dark: T96 · 12.5%
-    "--color-neutral": ["#25252a0f", "#f3f3f51a"],
-    // light: Stone Neutral T15 · 6% / dark: T96 · 10%
-    "--color-background-surface": ["#ffffff", "#1b1b1f"],
-    // dark: Stone Neutral T10
-    "--color-background-body": ["#f3f3f5", "#111015"],
-    // dark: Stone Neutral T5
-    "--color-overlay": ["#25252a80", "#28282acc"],
-    // light: Stone Neutral T15 · 50% / dark: 80%
-    "--color-overlay-hover": ["#25252a0d", "#f3f3f50d"],
-    // light: Stone Neutral T15 · 5% / dark: T96 · 5%
-    "--color-overlay-pressed": ["#25252a1a", "#f3f3f51a"],
-    // light: Stone Neutral T15 · 10% / dark: T96 · 10%
-    "--color-background-muted": ["#e2e2e8", "#3b3b3f"],
-    // light: Stone Neutral T90
-    // Text — H=291
-    "--color-text-primary": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    // T40/T70 keeps normal secondary text above AA on every stone surface,
-    // including the muted and tinted fills that components pair it with.
-    "--color-text-secondary": ["#5e5e63", "#ababb0"],
-    // Stone Neutral T40 / T70
-    "--color-text-disabled": ["#d7d7da", "#5e5e61"],
-    // T86 C=1.6 / T40 C=2
-    "--color-text-accent": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    "--color-on-dark": "#FFFFFF",
-    "--color-on-light": ["#25252a", "#28282a"],
-    // light: Stone Neutral T15
-    "--color-on-accent": ["#ffffff", "#25252a"],
-    // dark: Stone Neutral T15
-    // Text on top of matching status surface (badge fill, banner content).
-    "--color-on-success": ["#374c36", "#d0e9ce"],
-    // Green T30 / T90
-    "--color-on-error": ["#58413e", "#f9dcd7"],
-    // Red T30 / T90
-    "--color-on-warning": ["#524622", "#f4e1b7"],
-    // Yellow T30 / T90
-    // Icon — H=291
-    "--color-icon-accent": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    "--color-icon-primary": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    "--color-icon-secondary": ["#83838a", "#9d9da3"],
-    // T55 C=4 / T65 C=3
-    "--color-icon-disabled": ["#d7d7da", "#5e5e61"],
-    // T86 C=1.6 / T40 C=2
-    // Surface variants — H=291
-    "--color-background-card": ["#FFFFFF", "#242325"],
-    // T14
-    "--color-background-popover": ["#ffffff", "#25252a"],
-    // dark: Stone Neutral T15
-    "--color-background-inverted": ["#25252a", "#f3f3f5"],
-    // light: Stone Neutral T15
-    // Status / Sentiment — T50 from palette for icons/borders (visible color)
-    "--color-success": ["#374c36", "#b4cdb2"],
-    // Green T30 / T80
-    "--color-success-muted": ["#d0e9ce", "#b4cdb2"],
-    // Green T90 / T80
-    "--color-error": ["#58413e", "#dcc0bc"],
-    // Red T30 / T80
-    "--color-error-muted": ["#f9dcd7", "#dcc0bc"],
-    // Red T90 / T80
-    "--color-warning": ["#524622", "#d7c59c"],
-    // Yellow T30 / T80
-    "--color-warning-muted": ["#f4e1b7", "#d7c59c"],
-    // Yellow T90 / T80
-    // Border — H=291
-    "--color-border": ["#e2e2e8", "#f3f3f51a"],
-    // light: Stone Neutral T90 / dark: T96 · 10%
-    "--color-border-emphasized": ["#83838a", "#5e5e61"],
-    // T55 C=4 / T40 C=2
-    // Effects — H=291
-    "--color-skeleton": ["#d4d4da", "#5e5e64"],
-    // T85 / T40 from H=291 C=3
-    "--color-shadow": ["#25252a1a", "#0000004d"],
-    // light: Stone Neutral T15 · 10% / dark: 30%
-    "--color-tint-hover": ["black", "white"],
+    // Core neutrals
+    "--color-accent": [neutral.light[15], neutral.dark[95]],
+    "--color-accent-muted": [
+      withAlpha(neutral.light[15], "14"),
+      withAlpha(neutral.dark[95], "20")
+    ],
+    "--color-neutral": [
+      withAlpha(neutral.light[15], "0f"),
+      withAlpha(neutral.dark[95], "1a")
+    ],
+    "--color-background-surface": [neutral.light[100], neutral.dark[10]],
+    "--color-background-body": [neutral.light[95], neutral.dark[5]],
+    "--color-overlay": [
+      withAlpha(neutral.light[15], "80"),
+      withAlpha(neutral.dark[15], "cc")
+    ],
+    "--color-overlay-hover": [
+      withAlpha(neutral.light[15], "0d"),
+      withAlpha(neutral.dark[95], "0d")
+    ],
+    "--color-overlay-pressed": [
+      withAlpha(neutral.light[15], "1a"),
+      withAlpha(neutral.dark[95], "1a")
+    ],
+    "--color-background-muted": [neutral.light[90], neutral.dark[25]],
+    // Text
+    "--color-text-primary": [neutral.light[15], neutral.dark[95]],
+    // These stops keep normal secondary text readable on Stone's body,
+    // muted, and categorical surfaces.
+    "--color-text-secondary": [neutral.light[40], neutral.dark[70]],
+    "--color-text-disabled": [neutral.light[85], neutral.dark[40]],
+    "--color-text-accent": [neutral.light[15], neutral.dark[95]],
+    "--color-on-dark": neutral.light[100],
+    "--color-on-light": [neutral.light[15], neutral.dark[15]],
+    "--color-on-accent": [neutral.light[100], neutral.dark[15]],
+    "--color-on-success": [green.light[30], green.dark[90]],
+    "--color-on-error": [red.light[30], red.dark[90]],
+    "--color-on-warning": [yellow.light[30], yellow.dark[90]],
+    // Icon
+    "--color-icon-accent": [neutral.light[15], neutral.dark[95]],
+    "--color-icon-primary": [neutral.light[15], neutral.dark[95]],
+    "--color-icon-secondary": [neutral.light[55], neutral.dark[65]],
+    "--color-icon-disabled": [neutral.light[85], neutral.dark[40]],
+    // Surface variants
+    "--color-background-card": [neutral.light[100], neutral.dark[15]],
+    "--color-background-popover": [neutral.light[100], neutral.dark[20]],
+    "--color-background-inverted": [neutral.light[15], neutral.dark[95]],
+    // Status / sentiment
+    "--color-success": [green.light[30], green.dark[80]],
+    "--color-success-muted": [green.light[90], green.dark[80]],
+    "--color-error": [red.light[30], red.dark[80]],
+    "--color-error-muted": [red.light[90], red.dark[80]],
+    "--color-warning": [yellow.light[30], yellow.dark[80]],
+    "--color-warning-muted": [yellow.light[90], yellow.dark[80]],
+    // Border
+    "--color-border": [neutral.light[90], withAlpha(neutral.dark[95], "1a")],
+    "--color-border-emphasized": [neutral.light[55], neutral.dark[40]],
+    // Effects
+    "--color-skeleton": [neutral.light[85], neutral.dark[40]],
+    "--color-shadow": [
+      withAlpha(neutral.light[15], "1a"),
+      withAlpha(neutral.dark[0], "4d")
+    ],
+    "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
     // Typography override
     "--text-supporting-size": "12px",
-    // Categorical hues
-    //   Light: T90 solid bg + T30 text (pastel surface, dark text)
-    //   Dark:  T35 solid bg + T90 text — snaps to canonical palette stops
-    //          per theming-infra.mdc §7. T90 dark text is the SAME hex as
-    //          the light-mode bg pastel — clean palette symmetry, ~6–9:1
-    //          contrast on the T35 surface across all hues (passes AA Body).
-    // Borders: light T85 / dark T25 — one step inward from surface in both
-    //          modes, matching the light-mode T90/T85 spacing.
-    // Categorical — Blue H=265 C=10
-    "--color-background-blue": ["#d7e4f5", "#485362"],
-    // light T90 / dark T35
-    "--color-border-blue": ["#c9d6e7", "#313c4a"],
-    // light T85 / dark T25
-    "--color-icon-blue": ["#3c4856", "#d7e4f5"],
-    // light T30 / dark T90
-    "--color-text-blue": ["#3c4856", "#d7e4f5"],
-    // Categorical — Cyan H=190 C=10
-    "--color-background-cyan": ["#cce8e5", "#3e5755"],
-    "--color-border-cyan": ["#bedad7", "#28403e"],
-    "--color-icon-cyan": ["#334b49", "#cce8e5"],
-    "--color-text-cyan": ["#334b49", "#cce8e5"],
-    // Categorical — Gray (pure neutral, C=0). Same T35/T25/T90 pattern from
-    // the neutral H=291 C=3 ramp.
-    "--color-background-gray": ["#e2e2e8", "#525257"],
-    // light: Stone Neutral T90
-    "--color-border-gray": ["#d4d4da", "#3b3b3f"],
-    // light: Stone Neutral T85
-    "--color-icon-gray": ["#46464b", "#e2e2e8"],
-    // light: Stone Neutral T30
-    "--color-text-gray": ["#46464b", "#e2e2e8"],
-    // light: Stone Neutral T30
-    // Categorical — Green H=142 C=17
-    "--color-background-green": ["#d0e9ce", "#425841"],
-    "--color-border-green": ["#c2dbc0", "#2b402b"],
-    "--color-icon-green": ["#374c36", "#d0e9ce"],
-    "--color-text-green": ["#374c36", "#d0e9ce"],
-    // Categorical — Orange H=70 C=22
-    "--color-background-orange": ["#ffdcbb", "#684d32"],
-    "--color-border-orange": ["#f1ceae", "#4f361c"],
-    "--color-icon-orange": ["#5b4227", "#ffdcbb"],
-    "--color-text-orange": ["#5b4227", "#ffdcbb"],
-    // Categorical — Pink H=340 C=9
-    "--color-background-pink": ["#f0dde8", "#5e4e57"],
-    "--color-border-pink": ["#e2cfda", "#463740"],
-    "--color-icon-pink": ["#52424c", "#f0dde8"],
-    "--color-text-pink": ["#52424c", "#f0dde8"],
-    // Categorical — Purple H=307 C=11
-    "--color-background-purple": ["#e8dff3", "#564f60"],
-    "--color-border-purple": ["#d9d1e5", "#3f3949"],
-    "--color-icon-purple": ["#4b4454", "#e8dff3"],
-    "--color-text-purple": ["#4b4454", "#e8dff3"],
-    // Categorical — Red H=33 C=11
-    "--color-background-red": ["#f9dcd7", "#644d49"],
-    "--color-border-red": ["#ebcec9", "#4c3633"],
-    "--color-icon-red": ["#58413e", "#f9dcd7"],
-    "--color-text-red": ["#58413e", "#f9dcd7"],
-    // Categorical — Teal H=158 C=9
-    "--color-background-teal": ["#d4e7dc", "#46564d"],
-    "--color-border-teal": ["#c6d9ce", "#303f36"],
-    "--color-icon-teal": ["#3b4a41", "#d4e7dc"],
-    "--color-text-teal": ["#3b4a41", "#d4e7dc"],
-    // Categorical — Yellow H=90 C=23
-    "--color-background-yellow": ["#f4e1b7", "#5e512d"],
-    "--color-border-yellow": ["#e5d3a9", "#463a18"],
-    "--color-icon-yellow": ["#524622", "#f4e1b7"],
-    "--color-text-yellow": ["#524622", "#f4e1b7"],
-    // =========================================================================
-    // Radius — clean and subtle
-    //   --radius-none and --radius-full are always fixed and must never be
-    //   scaled by a theme (see defineTheme's radius config docs) — 0 and
-    //   9999px respectively, matching @astryxdesign/core's own defaults.
-    // =========================================================================
+    // Categorical
+    // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.
+    // Dark mode pairs stop 35 surfaces with stop 90 foregrounds; borders move
+    // one step inward in both modes.
+    "--color-background-blue": [blue.light[90], blue.dark[35]],
+    "--color-border-blue": [blue.light[85], blue.dark[25]],
+    "--color-icon-blue": [blue.light[30], blue.dark[90]],
+    "--color-text-blue": [blue.light[30], blue.dark[90]],
+    "--color-background-cyan": [cyan.light[90], cyan.dark[35]],
+    "--color-border-cyan": [cyan.light[85], cyan.dark[25]],
+    "--color-icon-cyan": [cyan.light[30], cyan.dark[90]],
+    "--color-text-cyan": [cyan.light[30], cyan.dark[90]],
+    "--color-background-gray": [neutral.light[90], neutral.dark[35]],
+    "--color-border-gray": [neutral.light[85], neutral.dark[25]],
+    "--color-icon-gray": [neutral.light[30], neutral.dark[90]],
+    "--color-text-gray": [neutral.light[30], neutral.dark[90]],
+    "--color-background-green": [green.light[90], green.dark[35]],
+    "--color-border-green": [green.light[85], green.dark[25]],
+    "--color-icon-green": [green.light[30], green.dark[90]],
+    "--color-text-green": [green.light[30], green.dark[90]],
+    "--color-background-orange": [orange.light[90], orange.dark[35]],
+    "--color-border-orange": [orange.light[85], orange.dark[25]],
+    "--color-icon-orange": [orange.light[30], orange.dark[90]],
+    "--color-text-orange": [orange.light[30], orange.dark[90]],
+    "--color-background-pink": [pink.light[90], pink.dark[35]],
+    "--color-border-pink": [pink.light[85], pink.dark[25]],
+    "--color-icon-pink": [pink.light[30], pink.dark[90]],
+    "--color-text-pink": [pink.light[30], pink.dark[90]],
+    "--color-background-purple": [purple.light[90], purple.dark[35]],
+    "--color-border-purple": [purple.light[85], purple.dark[25]],
+    "--color-icon-purple": [purple.light[30], purple.dark[90]],
+    "--color-text-purple": [purple.light[30], purple.dark[90]],
+    "--color-background-red": [red.light[90], red.dark[35]],
+    "--color-border-red": [red.light[85], red.dark[25]],
+    "--color-icon-red": [red.light[30], red.dark[90]],
+    "--color-text-red": [red.light[30], red.dark[90]],
+    "--color-background-teal": [teal.light[90], teal.dark[35]],
+    "--color-border-teal": [teal.light[85], teal.dark[25]],
+    "--color-icon-teal": [teal.light[30], teal.dark[90]],
+    "--color-text-teal": [teal.light[30], teal.dark[90]],
+    "--color-background-yellow": [yellow.light[90], yellow.dark[35]],
+    "--color-border-yellow": [yellow.light[85], yellow.dark[25]],
+    "--color-icon-yellow": [yellow.light[30], yellow.dark[90]],
+    "--color-text-yellow": [yellow.light[30], yellow.dark[90]],
+    // Radius
     "--radius-none": "0px",
     "--radius-inner": "0.25rem",
     "--radius-element": "0.5rem",
     "--radius-container": "0.75rem",
     "--radius-page": "1.5rem",
     "--radius-full": "9999px",
-    // =========================================================================
     // Shadows
-    // =========================================================================
-    "--shadow-low": "0 2px 4px #28282A0D, 0 4px 8px #28282A1A",
-    "--shadow-med": "0 2px 4px #28282A0D, 0 4px 12px #28282A1A",
-    "--shadow-high": "0 4px 6px #28282A1A, 0 12px 24px #28282A26",
-    "--shadow-inset-hover": "inset 0px 0px 0px 2px #28282A30",
-    "--shadow-inset-selected": "inset 0px 0px 0px 2px #28282A50",
-    "--shadow-inset-success": "inset 0px 0px 0px 2px #83838a30",
-    "--shadow-inset-warning": "inset 0px 0px 0px 2px #83838a30",
-    "--shadow-inset-error": "inset 0px 0px 0px 2px #83838a30"
+    "--shadow-low": `0 2px 4px ${withAlpha(neutral.light[15], "0d")}, 0 4px 8px ${withAlpha(neutral.light[15], "1a")}`,
+    "--shadow-med": `0 2px 4px ${withAlpha(neutral.light[15], "0d")}, 0 4px 12px ${withAlpha(neutral.light[15], "1a")}`,
+    "--shadow-high": `0 4px 6px ${withAlpha(neutral.light[15], "1a")}, 0 12px 24px ${withAlpha(neutral.light[15], "26")}`,
+    "--shadow-inset-hover": `inset 0 0 0 2px ${withAlpha(neutral.light[15], "30")}`,
+    "--shadow-inset-selected": `inset 0 0 0 2px ${withAlpha(neutral.light[15], "50")}`,
+    "--shadow-inset-success": `inset 0 0 0 2px ${withAlpha(neutral.light[55], "30")}`,
+    "--shadow-inset-warning": `inset 0 0 0 2px ${withAlpha(neutral.light[55], "30")}`,
+    "--shadow-inset-error": `inset 0 0 0 2px ${withAlpha(neutral.light[55], "30")}`
   },
   components: {
     button: {
@@ -369,7 +347,8 @@ var stoneTheme = (0, import_theme.defineTheme)({
         color: "var(--color-text-red)"
       }
     },
-    // Semantic variants point at categorical hue tokens — single source of truth.
+    // Badges, banners, and field status messages share the categorical
+    // surfaces and foregrounds so each semantic state has one visual source.
     badge: {
       "variant:info": {
         backgroundColor: "var(--color-background-blue)",
@@ -392,10 +371,8 @@ var stoneTheme = (0, import_theme.defineTheme)({
         color: "var(--color-text-red)"
       }
     },
-    // StyleX paints the banner surface from @layer priority4 (above
-    // @layer astryx-theme), so a direct backgroundColor override loses the
-    // cascade. Redefine the muted token instead so StyleX's var() resolves
-    // to the categorical bg in our scope.
+    // Banner surface declarations live above the theme layer, so redirect the
+    // semantic variables here instead of attempting a losing direct fill.
     banner: {
       "status:info": {
         "--color-accent-muted": "var(--color-background-blue)",
@@ -422,45 +399,35 @@ var stoneTheme = (0, import_theme.defineTheme)({
         "--color-error": "var(--color-text-red)"
       }
     },
-    // Fill: light = T90 (same hex as banner/badge surface — fill reads as
-    // the same color family as the matching status surface). Dark = T70.
-    // Hexes from the preview Tonal Palettes ramp. accent (default) +
-    // indeterminate both route to blue for the in-progress / loading look.
+    // Progress fills use the same family as their matching status surface;
+    // the darker stop in dark mode keeps the channel visible on dark tracks.
     "progress-bar-fill": {
       "variant:accent": {
-        backgroundColor: "light-dark(#d7e4f5, #a0acbc)"
-        // Blue T90 / T70
+        backgroundColor: lightDark(blue.light[90], blue.dark[70])
       },
       "variant:success": {
-        backgroundColor: "light-dark(#d0e9ce, #9ab298)"
-        // Green T90 / T70
+        backgroundColor: lightDark(green.light[90], green.dark[70])
       },
       "variant:warning": {
-        backgroundColor: "light-dark(#f4e1b7, #bbaa82)"
-        // Yellow T90 / T70
+        backgroundColor: lightDark(yellow.light[90], yellow.dark[70])
       },
       "variant:error": {
-        backgroundColor: "light-dark(#f9dcd7, #c0a5a0)"
-        // Red T90 / T70
+        backgroundColor: lightDark(red.light[90], red.dark[70])
       }
     },
-    // Track default --color-background-muted reads near-body in stone;
-    // redirect to --color-skeleton so the channel stays visible.
+    // The default muted track is too close to Stone's body surface.
     "progress-bar-track": {
       base: {
         backgroundColor: "var(--color-skeleton)"
       }
     },
-    // Switch off-state track reads --color-background-gray by default.
-    // Redefine it inside the switch scope to --color-skeleton, matching
-    // the ProgressBar track. The on-state reads --color-accent (unaffected);
-    // disabled-off also picks up --color-skeleton for consistency.
+    // Match the Switch off-state track to the visible ProgressBar track.
     switch: {
       base: {
         "--color-background-gray": "var(--color-skeleton)"
       }
     },
-    // FieldStatus surface matches badge — see badge override above.
+    // FieldStatus surfaces match the corresponding badge and banner family.
     "field-status": {
       "type:success": {
         backgroundColor: "var(--color-background-green)"
@@ -472,8 +439,7 @@ var stoneTheme = (0, import_theme.defineTheme)({
         backgroundColor: "var(--color-background-red)"
       }
     },
-    // Input status borders + icons across all 9 input components share the
-    // same softer T60/T70 redirection. See INPUT_STATUS_VARS above.
+    // Every input status border and icon uses INPUT_STATUS_VARS above.
     "text-input": INPUT_STATUS_VARS,
     "text-area": INPUT_STATUS_VARS,
     "number-input": INPUT_STATUS_VARS,