@astryxdesign/theme-neutral 0.5.2 → 0.5.3

package/README.md

@@ -23,14 +23,42 @@ function App() {
 
 ### Import paths
 
-| Path                           | Use case                                               |
-| ------------------------------ | ------------------------------------------------------ |
-| `@astryxdesign/theme-neutral`           | Source build (StyleX compilation via `@astryxdesign/build`)     |
-| `@astryxdesign/theme-neutral/built`     | Pre-built dist (Tailwind, plain CSS, or no build step) |
-| `@astryxdesign/theme-neutral/theme.css` | Pre-built CSS file (import in your stylesheet)         |
+| Path                                    | Use case                                                    |
+| --------------------------------------- | ----------------------------------------------------------- |
+| `@astryxdesign/theme-neutral`           | Source build (StyleX compilation via `@astryxdesign/build`) |
+| `@astryxdesign/theme-neutral/built`     | Pre-built dist (Tailwind, plain CSS, or no build step)      |
+| `@astryxdesign/theme-neutral/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
+
+The repository keeps Neutral's generation request in `palette.config.json`, the
+exact `astryx-oklch-v1` output in `src/neutralPalettes.generated.ts`, and its
+generation receipt beside that file. `src/neutralPalettes.ts` provides the stable
+theme-local import. Neutral currently uses 21 numbered stops in each light and
+dark ramp, but that layout is a Neutral decision rather than a requirement for
+other themes.
+
+Neutral opts into a muted dark edge for chromatic families. Stops 5 through 25
+use 50% of their realized chroma, then recover smoothly to the standard dark
+recipe at stop 60. Yellow uses a gentler 65% edge multiplier. Light ramps,
+neutral ramps, and stops 60 through 100 remain unchanged.
+
+Neutral is the reference implementation for palette-aware theme templates.
+Templates may follow its ownership, review, and alignment workflow without
+copying its colors or stop layout.
+
+Use semantic theme tokens in components. Neutral's theme source maps those roles
+to named palette stops, while the prebuilt theme and CSS contain their resolved
+values. Changing the generated palette must include the regenerated receipt,
+token diff, tests, and visual review.
+
+The committed request and receipt preserve the generation inputs and provenance.
+CLI regeneration is not yet a supported release workflow; until that tooling
+ships, treat the generated module and receipt as reviewed artifacts rather than
+editing them by hand.
+
 ### CSS import
 
 Add the theme CSS to your stylesheet:
@@ -45,8 +73,8 @@ This theme uses system fonts; no external font loading is required.
 
 ## Related Packages
 
-| Package                                                                              | Description                            |
-| ------------------------------------------------------------------------------------ | -------------------------------------- |
-| [`@astryxdesign/core`](https://github.com/facebook/astryx/tree/main/packages/core)   | Core components and theme system       |
-| [`@astryxdesign/build`](https://github.com/facebook/astryx/tree/main/packages/build) | Build plugins for StyleX source builds |
+| Package                                                                              | Description                               |
+| ------------------------------------------------------------------------------------ | ----------------------------------------- |
+| [`@astryxdesign/core`](https://github.com/facebook/astryx/tree/main/packages/core)   | Core components and theme system          |
+| [`@astryxdesign/build`](https://github.com/facebook/astryx/tree/main/packages/build) | Build plugins for StyleX source builds    |
 | [`@astryxdesign/cli`](https://github.com/facebook/astryx/tree/main/packages/cli)     | CLI tooling including `astryx docs theme` |

package/dist/neutral.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/neutralTheme.ts
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.5.2
- * Core: @astryxdesign/core@0.5.2
+ * CLI: @astryxdesign/cli@0.5.3
+ * Core: @astryxdesign/core@0.5.3
  */
 
 /// <reference path="./neutral.variants.d.ts" />

package/dist/neutral.js

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/neutralTheme.ts
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.5.2
- * Core: @astryxdesign/core@0.5.2
+ * CLI: @astryxdesign/cli@0.5.3
+ * Core: @astryxdesign/core@0.5.3
  */
 
 import { neutralIconRegistry } from "./icons.mjs";
@@ -84,96 +84,96 @@ export const neutralTheme = {
     "--font-family-body": "Figtree, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
     "--font-family-heading": "Figtree, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
     "--font-family-code": "ui-monospace, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
-    "--color-syntax-keyword": "light-dark(#700084, #efa8ff)",
-    "--color-syntax-string": "light-dark(#005600, #a6d2a2)",
-    "--color-syntax-comment": "light-dark(#737373, #a3a3a3)",
-    "--color-syntax-number": "light-dark(#6e3500, #ffb37f)",
-    "--color-syntax-function": "light-dark(#00458c, #a0caff)",
-    "--color-syntax-type": "light-dark(#700084, #efa8ff)",
-    "--color-syntax-variable": "light-dark(#171717, #e5e5e5)",
-    "--color-syntax-operator": "light-dark(#737373, #a3a3a3)",
-    "--color-syntax-constant": "light-dark(#6e3500, #ffb37f)",
-    "--color-syntax-tag": "light-dark(#89001a, #ffaeaa)",
-    "--color-syntax-attribute": "light-dark(#584400, #eec12f)",
-    "--color-syntax-property": "light-dark(#005348, #83dac9)",
-    "--color-syntax-punctuation": "light-dark(#6e6e6e, #a0a0a0)",
-    "--color-syntax-background": "light-dark(#fafafa, #0a0a0a)",
+    "--color-syntax-keyword": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-string": "light-dark(#0b5615, #a4d6a3)",
+    "--color-syntax-comment": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-number": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-function": "light-dark(#00458c, #a1caff)",
+    "--color-syntax-type": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-variable": "light-dark(#111111, #e2e2e2)",
+    "--color-syntax-operator": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-constant": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-tag": "light-dark(#8a0011, #ffaea7)",
+    "--color-syntax-attribute": "light-dark(#584400, #eec448)",
+    "--color-syntax-property": "light-dark(#005348, #90d7c8)",
+    "--color-syntax-punctuation": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-background": "light-dark(#ffffff, #111111)",
     "--color-background-surface": "light-dark(#ffffff, #262626)",
     "--color-background-body": "light-dark(#f1f1f1, #1b1b1b)",
     "--color-background-card": "light-dark(#ffffff, #1b1b1b)",
     "--color-background-popover": "light-dark(#ffffff, #1b1b1b)",
     "--color-background-muted": "light-dark(#f1f1f1, #1b1b1b)",
-    "--color-accent": "light-dark(#262626, #ebebeb)",
+    "--color-accent": "light-dark(#262626, #f1f1f1)",
     "--color-accent-muted": "light-dark(#f1f1f1, #262626)",
-    "--color-neutral": "light-dark(#0000000F, #FFFFFF1A)",
+    "--color-neutral": "light-dark(#0000000F, #ffffff1A)",
     "--color-overlay": "light-dark(#00000080, #000000CC)",
-    "--color-overlay-hover": "light-dark(#0000000D, #FFFFFF0D)",
-    "--color-overlay-pressed": "light-dark(#0000001A, #FFFFFF1A)",
-    "--color-text-primary": "light-dark(#171717, #fafafa)",
-    "--color-text-secondary": "light-dark(#525252, #a3a3a3)",
-    "--color-text-disabled": "light-dark(#a3a3a3, #525252)",
-    "--color-text-accent": "light-dark(#262626, #ebebeb)",
+    "--color-overlay-hover": "light-dark(#0000000D, #ffffff0D)",
+    "--color-overlay-pressed": "light-dark(#0000001A, #ffffff1A)",
+    "--color-text-primary": "light-dark(#111111, #ffffff)",
+    "--color-text-secondary": "light-dark(#525252, #9e9e9e)",
+    "--color-text-disabled": "light-dark(#9e9e9e, #525252)",
+    "--color-text-accent": "light-dark(#262626, #f1f1f1)",
     "--color-on-dark": "#ffffff",
-    "--color-on-light": "#171717",
-    "--color-on-accent": "light-dark(#ffffff, #171717)",
-    "--color-on-success": "light-dark(#ffffff, #171717)",
-    "--color-on-error": "light-dark(#ffffff, #171717)",
-    "--color-on-warning": "#171717",
-    "--color-icon-accent": "light-dark(#262626, #ebebeb)",
-    "--color-icon-primary": "light-dark(#171717, #fafafa)",
-    "--color-icon-secondary": "light-dark(#737373, #a3a3a3)",
-    "--color-icon-disabled": "light-dark(#a3a3a3, #525252)",
-    "--color-success": "light-dark(#007004, #9fe59b)",
-    "--color-error": "light-dark(#a50c25, #ffc6c1)",
-    "--color-warning": "light-dark(#745b00, #fdcf4f)",
-    "--color-success-muted": "light-dark(#c5e5c0, #84c9803D)",
-    "--color-error-muted": "light-dark(#facecb, #ff9e973D)",
-    "--color-warning-muted": "light-dark(#f8da9d, #deb4333D)",
-    "--color-border": "light-dark(#00000014, #FFFFFF1A)",
+    "--color-on-light": "#111111",
+    "--color-on-accent": "light-dark(#ffffff, #111111)",
+    "--color-on-success": "light-dark(#ffffff, #111111)",
+    "--color-on-error": "light-dark(#ffffff, #111111)",
+    "--color-on-warning": "#111111",
+    "--color-icon-accent": "light-dark(#262626, #f1f1f1)",
+    "--color-icon-primary": "light-dark(#111111, #ffffff)",
+    "--color-icon-secondary": "light-dark(#777777, #9e9e9e)",
+    "--color-icon-disabled": "light-dark(#9e9e9e, #525252)",
+    "--color-success": "light-dark(#237028, #a4d6a3)",
+    "--color-error": "light-dark(#9e0015, #ffc4be)",
+    "--color-warning": "light-dark(#745b00, #f8d36a)",
+    "--color-success-muted": "light-dark(#bce0bb, #90ca903D)",
+    "--color-error-muted": "light-dark(#ffc4be, #ff98903D)",
+    "--color-warning-muted": "light-dark(#fae19e, #e2b6233D)",
+    "--color-border": "light-dark(#00000014, #ffffff1A)",
     "--color-border-emphasized": "light-dark(#d4d4d4, #525252)",
-    "--color-skeleton": "light-dark(#ebebeb, #525252)",
+    "--color-skeleton": "light-dark(#f1f1f1, #525252)",
     "--color-shadow": "light-dark(#0000001A, #0000004D)",
     "--color-tint-hover": "light-dark(black, white)",
-    "--color-background-red": "light-dark(#facecb, #ff9e973D)",
-    "--color-border-red": "light-dark(#e6bab8, #ff6f6c)",
-    "--color-icon-red": "light-dark(#89001a, #ff9e97)",
-    "--color-text-red": "light-dark(#89001a, #ffc6c1)",
-    "--color-background-orange": "light-dark(#fad0b5, #ffa2583D)",
-    "--color-border-orange": "light-dark(#e6bda2, #e2883e)",
-    "--color-icon-orange": "light-dark(#6e3500, #ffa258)",
-    "--color-text-orange": "light-dark(#6e3500, #ffc9a2)",
-    "--color-background-yellow": "light-dark(#f8da9d, #deb4333D)",
-    "--color-border-yellow": "light-dark(#e4c279, #c0990e)",
-    "--color-icon-yellow": "light-dark(#584400, #deb433)",
-    "--color-text-yellow": "light-dark(#584400, #fdcf4f)",
-    "--color-background-green": "light-dark(#c5e5c0, #84c9803D)",
-    "--color-border-green": "light-dark(#b2d1ac, #69ad67)",
-    "--color-icon-green": "light-dark(#0c5700, #84c980)",
-    "--color-text-green": "light-dark(#0c5700, #9fe59b)",
-    "--color-background-teal": "light-dark(#a5e3d6, #7ec6b83D)",
-    "--color-border-teal": "light-dark(#94d6c8, #63ab9d)",
-    "--color-icon-teal": "light-dark(#005348, #7ec6b8)",
-    "--color-text-teal": "light-dark(#005348, #99e2d3)",
-    "--color-background-cyan": "light-dark(#a3e0ef, #83c2d43D)",
-    "--color-border-cyan": "light-dark(#91d3e3, #67a7b8)",
-    "--color-icon-cyan": "light-dark(#00505f, #83c2d4)",
-    "--color-text-cyan": "light-dark(#00505f, #9edef0)",
-    "--color-background-blue": "light-dark(#c4ddfb, #9eb7ff3D)",
-    "--color-border-blue": "light-dark(#b1c9e7, #6d9cfe)",
-    "--color-icon-blue": "light-dark(#00458c, #9eb7ff)",
-    "--color-text-blue": "light-dark(#00458c, #c7d3ff)",
-    "--color-background-purple": "light-dark(#eccef3, #f297ff3D)",
-    "--color-border-purple": "light-dark(#d8bbdf, #dd74f0)",
-    "--color-icon-purple": "light-dark(#700084, #f297ff)",
-    "--color-text-purple": "light-dark(#700084, #fac1ff)",
-    "--color-background-pink": "light-dark(#fccadc, #ff99c33D)",
-    "--color-border-pink": "light-dark(#e7b7c8, #f273aa)",
-    "--color-icon-pink": "light-dark(#83004b, #ff99c3)",
-    "--color-text-pink": "light-dark(#83004b, #ffc3da)",
-    "--color-background-gray": "light-dark(#e5e5e5, var(--color-neutral))",
+    "--color-background-red": "light-dark(#ffc4be, #5b2b28)",
+    "--color-border-red": "light-dark(#ffaea7, #fa6762)",
+    "--color-icon-red": "light-dark(#8a0011, #ff9890)",
+    "--color-text-red": "light-dark(#8a0011, #ffaea7)",
+    "--color-background-orange": "light-dark(#ffc7a1, #503424)",
+    "--color-border-orange": "light-dark(#ffc7a1, #df843f)",
+    "--color-icon-orange": "light-dark(#733100, #ff9e55)",
+    "--color-text-orange": "light-dark(#733100, #ffb37e)",
+    "--color-background-yellow": "light-dark(#fae19e, #453a1c)",
+    "--color-border-yellow": "light-dark(#e3c36c, #c29900)",
+    "--color-icon-yellow": "light-dark(#584400, #e2b623)",
+    "--color-text-yellow": "light-dark(#584400, #eec448)",
+    "--color-background-green": "light-dark(#bce0bb, #2b422b)",
+    "--color-border-green": "light-dark(#aad4a9, #6ab26b)",
+    "--color-icon-green": "light-dark(#0b5615, #90ca90)",
+    "--color-text-green": "light-dark(#0b5615, #90ca90)",
+    "--color-background-teal": "light-dark(#a9e2d6, #28413c)",
+    "--color-border-teal": "light-dark(#90d7c8, #4fb1a0)",
+    "--color-icon-teal": "light-dark(#005348, #81c9bb)",
+    "--color-text-teal": "light-dark(#005348, #90d7c8)",
+    "--color-background-cyan": "light-dark(#9ae2f4, #274046)",
+    "--color-border-cyan": "light-dark(#85d5e9, #49adc4)",
+    "--color-icon-cyan": "light-dark(#00505f, #71c7dd)",
+    "--color-text-cyan": "light-dark(#00505f, #85d5e9)",
+    "--color-background-blue": "light-dark(#b9d7ff, #253c5a)",
+    "--color-border-blue": "light-dark(#a1caff, #5aa0f8)",
+    "--color-icon-blue": "light-dark(#00458c, #88bcff)",
+    "--color-text-blue": "light-dark(#00458c, #a1caff)",
+    "--color-background-purple": "light-dark(#f7d5ff, #4a2f51)",
+    "--color-border-purple": "light-dark(#f3bfff, #d885eb)",
+    "--color-icon-purple": "light-dark(#6b187c, #e496f6)",
+    "--color-text-purple": "light-dark(#6b187c, #eaacf8)",
+    "--color-background-pink": "light-dark(#ffc0d7, #572b3d)",
+    "--color-border-pink": "light-dark(#ffc0d7, #fc78b1)",
+    "--color-icon-pink": "light-dark(#83004b, #fd92bd)",
+    "--color-text-pink": "light-dark(#83004b, #ffa9ca)",
+    "--color-background-gray": "light-dark(#e2e2e2, #303030)",
     "--color-border-gray": "light-dark(#d4d4d4, #262626)",
-    "--color-icon-gray": "light-dark(#525252, #a3a3a3)",
-    "--color-text-gray": "light-dark(#262626, #e5e5e5)",
+    "--color-icon-gray": "light-dark(#525252, #9e9e9e)",
+    "--color-text-gray": "light-dark(#262626, #d4d4d4)",
     "--radius-none": "0px",
     "--radius-inner": "0.375rem",
     "--radius-element": "0.625rem",
@@ -185,10 +185,35 @@ export const neutralTheme = {
     "--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"
+    "--shadow-inset-success": "inset 0px 0px 0px 2px #2f7d334D",
+    "--shadow-inset-warning": "inset 0px 0px 0px 2px #f8d36a4D",
+    "--shadow-inset-error": "inset 0px 0px 0px 2px #de47454D"
   },
+  localTokens: {
+    "--astryx-theme-neutral-color-status-fill-accent": "light-dark(#0074e2, #6d9cfe)",
+    "--astryx-theme-neutral-color-status-fill-success": "light-dark(#198100, #64af4c)",
+    "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
+    "--astryx-theme-neutral-color-status-fill-error": "light-dark(#c9303a, #ff705d)",
+    "--astryx-theme-neutral-color-status-muted-accent": "light-dark(#b9d7ff, #88bcff3D)",
+    "--astryx-theme-neutral-color-on-tint-neutral": "light-dark(#fafafa4D, #0a0a0a4D)",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "light-dark(#fafafa1A, #0a0a0a1A)",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "light-dark(#fafafa33, #0a0a0a33)",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "light-dark(#ff7f770D, #ee736c0D)",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "light-dark(#ff7f771A, #ee736c1A)"
+  },
+  __localTokenOwners: {
+    "--astryx-theme-neutral-color-status-fill-accent": "neutral",
+    "--astryx-theme-neutral-color-status-fill-success": "neutral",
+    "--astryx-theme-neutral-color-status-fill-warning": "neutral",
+    "--astryx-theme-neutral-color-status-fill-error": "neutral",
+    "--astryx-theme-neutral-color-status-muted-accent": "neutral",
+    "--astryx-theme-neutral-color-on-tint-neutral": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "neutral"
+  },
+  __localTokenLineage: ["neutral"],
   components: {
     "heading": {
       "level:1": {
@@ -288,29 +313,31 @@ export const neutralTheme = {
     "button": {
       "variant:destructive": {
         "backgroundColor": "var(--color-error-muted)",
-        "color": "var(--color-error)"
+        "color": "var(--color-error)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
       }
     },
     "badge": {
       "variant:info": {
-        "backgroundColor": "light-dark(#0074e2, #6d9cfe)",
-        "color": "light-dark(#ffffff, #171717)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)",
+        "color": "var(--color-on-accent)"
       },
       "variant:neutral": {
         "backgroundColor": "var(--color-background-gray)",
         "color": "var(--color-text-gray)"
       },
       "variant:success": {
-        "backgroundColor": "light-dark(#198100, #64af4c)",
-        "color": "light-dark(#ffffff, #171717)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)",
+        "color": "var(--color-on-success)"
       },
       "variant:warning": {
-        "backgroundColor": "#ffce2f",
-        "color": "#171717"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)",
+        "color": "var(--color-on-warning)"
       },
       "variant:error": {
-        "backgroundColor": "light-dark(#c9303a, #ff705d)",
-        "color": "light-dark(#ffffff, #171717)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)",
+        "color": "var(--color-on-error)"
       },
       "variant:red": {
         "backgroundColor": "var(--color-background-red)",
@@ -355,21 +382,53 @@ export const neutralTheme = {
     },
     "statusdot": {
       "variant:success": {
-        "backgroundColor": "light-dark(#198100, #64af4c)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
       },
       "variant:warning": {
-        "backgroundColor": "#ffce2f"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)"
       },
       "variant:error": {
-        "backgroundColor": "light-dark(#c9303a, #ff705d)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
       },
       "variant:accent": {
-        "backgroundColor": "light-dark(#0074e2, #6d9cfe)"
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)"
+      }
+    },
+    "avatar-status-dot": {
+      "variant:success": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "variant:error": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
+      }
+    },
+    "segmented-control": {
+      "base": {
+        "padding": "var(--spacing-1)"
+      }
+    },
+    "segmented-control-item": {
+      "size:sm": {
+        "height": "calc(var(--size-element-sm) - 8px)"
+      },
+      "size:md": {
+        "height": "calc(var(--size-element-md) - 8px)"
+      },
+      "size:lg": {
+        "height": "calc(var(--size-element-lg) - 8px)"
+      },
+      "selected": {
+        "boxShadow": "none"
       }
     },
     "banner": {
+      "base": {
+        "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
+      },
       "status:info": {
-        "--color-accent-muted": "var(--color-background-blue)",
+        "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
         "--color-text-primary": "var(--color-text-blue)",
         "--color-text-secondary": "var(--color-text-blue)",
         "--color-accent": "var(--color-text-blue)"
@@ -390,6 +449,20 @@ export const neutralTheme = {
         "--color-error": "var(--color-text-red)"
       }
     },
+    "step-indicator": {
+      "status:accent": {
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
+      },
+      "status:success": {
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "status:warning": {
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
+      },
+      "status:error": {
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
+      }
+    },
     "switch": {
       "base": {
         "--color-background-gray": "var(--color-border-emphasized)"
@@ -400,16 +473,16 @@ export const neutralTheme = {
         "--color-background-muted": "var(--color-border-emphasized)"
       },
       "variant:accent": {
-        "--color-accent": "#0074e2"
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
       },
       "variant:success": {
-        "--color-success": "#198100"
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
       },
       "variant:warning": {
-        "--color-warning": "#ffce2f"
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
       },
       "variant:error": {
-        "--color-error": "#c9303a"
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
       }
     },
     "card": {

package/dist/neutral.variants.d.ts

@@ -2,15 +2,30 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/neutralTheme.ts
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.5.2
- * Core: @astryxdesign/core@0.5.2
+ * CLI: @astryxdesign/cli@0.5.3
+ * Core: @astryxdesign/core@0.5.3
  */
 
 // Generated by astryx theme build
 export {};
 
+declare module '@astryxdesign/core/Heading' {
+  interface HeadingTypeMap {
+    'display-1': true;
+    'display-2': true;
+    'display-3': true;
+  }
+}
+
 declare module '@astryxdesign/core/Badge' {
   interface BadgeVariantMap {
     'gray': true;
   }
 }
+
+declare module '@astryxdesign/core/Avatar' {
+  interface AvatarStatusDotVariantMap {
+    'success': true;
+    'error': true;
+  }
+}

package/dist/neutralPaletteRefs.generated.d.ts

@@ -0,0 +1,156 @@
+export declare const neutralPaletteRefs: {
+    readonly purple: {
+        readonly light: {
+            readonly 30: "#6b187c";
+            readonly 70: "#d885eb";
+            readonly 75: "#e496f6";
+            readonly 80: "#efa8ff";
+            readonly 85: "#f3bfff";
+            readonly 90: "#f7d5ff";
+        };
+        readonly dark: {
+            readonly 25: "#4a2f51";
+            readonly 80: "#eaacf8";
+        };
+    };
+    readonly green: {
+        readonly light: {
+            readonly 30: "#0b5615";
+            readonly 40: "#237028";
+            readonly 45: "#2f7d33";
+            readonly 65: "#6ab26b";
+            readonly 75: "#90ca90";
+            readonly 80: "#a4d6a3";
+        };
+        readonly dark: {
+            readonly 25: "#2b422b";
+            readonly 80: "#aad4a9";
+            readonly 85: "#bce0bb";
+        };
+    };
+    readonly neutral: {
+        readonly light: {
+            readonly 0: "#000000";
+            readonly 5: "#111111";
+            readonly 15: "#262626";
+            readonly 35: "#525252";
+            readonly 45: "#6a6a6a";
+            readonly 50: "#777777";
+            readonly 65: "#9e9e9e";
+            readonly 85: "#d4d4d4";
+            readonly 90: "#e2e2e2";
+            readonly 95: "#f1f1f1";
+            readonly 100: "#ffffff";
+        };
+        readonly dark: {
+            readonly 0: "#000000";
+            readonly 5: "#111111";
+            readonly 10: "#1b1b1b";
+            readonly 15: "#262626";
+            readonly 20: "#303030";
+            readonly 35: "#525252";
+            readonly 65: "#9e9e9e";
+            readonly 85: "#d4d4d4";
+            readonly 90: "#e2e2e2";
+            readonly 95: "#f1f1f1";
+            readonly 100: "#ffffff";
+        };
+    };
+    readonly orange: {
+        readonly light: {
+            readonly 30: "#733100";
+            readonly 75: "#ff9e55";
+            readonly 85: "#ffc7a1";
+        };
+        readonly dark: {
+            readonly 25: "#503424";
+            readonly 65: "#df843f";
+            readonly 80: "#ffb37e";
+        };
+    };
+    readonly blue: {
+        readonly light: {
+            readonly 30: "#00458c";
+            readonly 50: "#0074e2";
+            readonly 80: "#a1caff";
+            readonly 85: "#b9d7ff";
+        };
+        readonly dark: {
+            readonly 25: "#253c5a";
+            readonly 65: "#5aa0f8";
+            readonly 75: "#88bcff";
+            readonly 80: "#a1caff";
+        };
+    };
+    readonly red: {
+        readonly light: {
+            readonly 30: "#8a0011";
+            readonly 35: "#9e0015";
+            readonly 55: "#de4745";
+            readonly 65: "#fa6762";
+            readonly 70: "#ff7f77";
+            readonly 80: "#ffaea7";
+            readonly 85: "#ffc4be";
+        };
+        readonly dark: {
+            readonly 25: "#5b2b28";
+            readonly 65: "#ee736c";
+            readonly 75: "#ff9890";
+            readonly 80: "#ffaea7";
+            readonly 85: "#ffc4be";
+        };
+    };
+    readonly yellow: {
+        readonly light: {
+            readonly 30: "#584400";
+            readonly 40: "#745b00";
+            readonly 65: "#c29900";
+            readonly 75: "#e2b623";
+            readonly 80: "#eec448";
+            readonly 85: "#f8d36a";
+        };
+        readonly dark: {
+            readonly 25: "#453a1c";
+            readonly 80: "#e3c36c";
+            readonly 90: "#fae19e";
+        };
+    };
+    readonly teal: {
+        readonly light: {
+            readonly 30: "#005348";
+            readonly 80: "#90d7c8";
+            readonly 85: "#a9e2d6";
+        };
+        readonly dark: {
+            readonly 25: "#28413c";
+            readonly 65: "#4fb1a0";
+            readonly 75: "#81c9bb";
+        };
+    };
+    readonly cyan: {
+        readonly dark: {
+            readonly 25: "#274046";
+            readonly 65: "#49adc4";
+            readonly 75: "#71c7dd";
+            readonly 80: "#85d5e9";
+            readonly 85: "#9ae2f4";
+        };
+        readonly light: {
+            readonly 30: "#00505f";
+        };
+    };
+    readonly pink: {
+        readonly light: {
+            readonly 30: "#83004b";
+            readonly 70: "#fc78b1";
+            readonly 85: "#ffc0d7";
+        };
+        readonly dark: {
+            readonly 25: "#572b3d";
+            readonly 75: "#fd92bd";
+            readonly 80: "#ffa9ca";
+        };
+    };
+};
+export default neutralPaletteRefs;
+//# sourceMappingURL=neutralPaletteRefs.generated.d.ts.map

package/dist/neutralPaletteRefs.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutralPaletteRefs.generated.d.ts","sourceRoot":"","sources":["../src/neutralPaletteRefs.generated.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCrB,CAAC;AAEX,eAAe,kBAAkB,CAAC"}

package/dist/neutralPalettes.d.ts

@@ -0,0 +1,3 @@
+/** Neutral's reviewed palette, generated from ../palette.config.json. */
+export { palette as neutralPalettes, palette as default, } from './neutralPalettes.generated';
+//# sourceMappingURL=neutralPalettes.d.ts.map

package/dist/neutralPalettes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutralPalettes.d.ts","sourceRoot":"","sources":["../src/neutralPalettes.ts"],"names":[],"mappings":"AAEA,yEAAyE;AACzE,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,OAAO,IAAI,OAAO,GACnB,MAAM,6BAA6B,CAAC"}