@astryxdesign/theme-neutral 0.5.2-canary.edc0cfc → 0.5.2-canary.f613dcb

package/README.md

@@ -23,14 +23,37 @@ 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 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 runtime theme does not import
+the complete authoring palette. Mapping semantic tokens to reviewed stops is a
+separate change, so palette generation and token adoption can be reviewed
+independently.
+
+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 +68,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.js

@@ -189,6 +189,25 @@ export const neutralTheme = {
     "--shadow-inset-warning": "inset 0px 0px 0px 2px #ffce2f4D",
     "--shadow-inset-error": "inset 0px 0px 0px 2px #e33f4a4D"
   },
+  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-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)"
+  },
+  __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-on-tint-neutral": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "neutral"
+  },
+  __localTokenLineage: ["neutral"],
   components: {
     "heading": {
       "level:1": {
@@ -293,24 +312,24 @@ export const neutralTheme = {
     },
     "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,19 +374,51 @@ 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-text-primary": "var(--color-text-blue)",
@@ -385,11 +436,26 @@ export const neutralTheme = {
         "--color-warning": "var(--color-text-yellow)"
       },
       "status:error": {
+        "--color-error-muted": "var(--color-background-red)",
         "--color-text-primary": "var(--color-text-red)",
         "--color-text-secondary": "var(--color-text-red)",
         "--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 +466,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

@@ -14,3 +14,10 @@ declare module '@astryxdesign/core/Badge' {
     'gray': true;
   }
 }
+
+declare module '@astryxdesign/core/Avatar' {
+  interface AvatarStatusDotVariantMap {
+    'success': true;
+    'error': true;
+  }
+}

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"}