@astryxdesign/theme-neutral 0.5.2-canary.e4f8e4e → 0.5.2-canary.ea1b9b5

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/neutralTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,YAAY,iDA2kBvB,CAAC"}
+{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAwFA,eAAO,MAAM,YAAY,iDAsfvB,CAAC"}

package/dist/neutralTheme.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=neutralTheme.test.d.ts.map

package/dist/neutralTheme.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutralTheme.test.d.ts","sourceRoot":"","sources":["../src/neutralTheme.test.ts"],"names":[],"mappings":""}

package/dist/source.js

@@ -68,7 +68,7 @@ var neutralIconRegistry = {
 
 // src/neutralTheme.ts
 var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
-  name: "xds-neutral",
+  name: "astryx-neutral",
   tokens: {
     keyword: ["#700084", "#efa8ff"],
     // purple T30/T80
@@ -101,8 +101,30 @@ var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
     background: ["#fafafa", "#0a0a0a"]
   }
 });
+var neutralLocalTokens = {
+  "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"],
+  "--astryx-theme-neutral-color-status-fill-success": ["#198100", "#64af4c"],
+  "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
+  "--astryx-theme-neutral-color-status-fill-error": ["#c9303a", "#ff705d"],
+  "--astryx-theme-neutral-color-on-tint-neutral": ["#fafafa4D", "#0a0a0a4D"],
+  "--astryx-theme-neutral-color-on-tint-overlay-hover": [
+    "#fafafa1A",
+    "#0a0a0a1A"
+  ],
+  "--astryx-theme-neutral-color-on-tint-overlay-pressed": [
+    "#fafafa33",
+    "#0a0a0a33"
+  ]
+};
+var statusFill = {
+  accent: "var(--astryx-theme-neutral-color-status-fill-accent)",
+  success: "var(--astryx-theme-neutral-color-status-fill-success)",
+  warning: "var(--astryx-theme-neutral-color-status-fill-warning)",
+  error: "var(--astryx-theme-neutral-color-status-fill-error)"
+};
 var neutralTheme = (0, import_theme.defineTheme)({
   name: "neutral",
+  localTokens: neutralLocalTokens,
   // Typography: Figtree across body, heading, and display sizes (display
   // size tokens inherit from heading.family). Monospace stays as the
   // platform default for code.
@@ -378,84 +400,33 @@ var neutralTheme = (0, import_theme.defineTheme)({
     "--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)"
+        backgroundColor: statusFill.accent,
+        color: "var(--color-on-accent)"
       },
       "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)"
+        backgroundColor: statusFill.success,
+        color: "var(--color-on-success)"
       },
       "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"
+        backgroundColor: statusFill.warning,
+        color: "var(--color-on-warning)"
       },
       "variant:error": {
-        // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
-        //        4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
-        //        large-text allowance. One tonal step down holds the hue
-        //        (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
-        // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
-        //        source #dc2626 (kept on H=27 alarm-red rather than coral).
-        //        Dark text on it is 6.60:1 and unchanged.
-        backgroundColor: "light-dark(#c9303a, #ff705d)",
-        color: "light-dark(#ffffff, #171717)"
+        backgroundColor: statusFill.error,
+        color: "var(--color-on-error)"
       },
-      // 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)"
@@ -497,63 +468,49 @@ var neutralTheme = (0, import_theme.defineTheme)({
         color: "var(--color-text-gray)"
       }
     },
-    // =========================================================================
-    // StatusDot — fill uses the SAME vivid stops as the filled semantic Badge
-    // (and ProgressBar), so a dot and its badge read as one status language.
-    //
-    // The default component maps each variant to a raw semantic token
-    // (--color-success / --color-error / --color-warning / --color-icon-
-    // secondary), which in light mode are the dark T30/T40 stops meant to
-    // sit as TEXT on a pastel surface — as a solid dot they read muddy
-    // (dark green / maroon / brown). Redirect them to the badge fills.
-    //
-    //   success → badge success bg  (green T45 / dark-ramp T60)
-    //   warning → badge warning bg  (yellow T85, same hex both modes)
-    //   error   → badge error bg    (red T58 / dark-ramp T60)
-    //   accent  → badge info bg     (blue T50 / dark-ramp T60) — the
-    //             StatusDot "accent" is the info/attention color, so it
-    //             pairs with the info badge rather than --color-accent
-    //             (near-black #262626, the darkest offender).
-    //
-    // `neutral` is intentionally NOT overridden: the neutral badge bg is a
-    // near-invisible light gray (--color-background-gray #e5e5e5 / 10% white
-    // wash), fine as a large pill but unreadable as an 8px dot. It keeps the
-    // component default's visible mid-gray (--color-icon-secondary), which is
-    // not among the "too dark" cases.
-    // =========================================================================
     statusdot: {
-      "variant:success": { backgroundColor: "light-dark(#198100, #64af4c)" },
-      "variant:warning": { backgroundColor: "#ffce2f" },
-      "variant:error": { backgroundColor: "light-dark(#c9303a, #ff705d)" },
-      "variant:accent": { backgroundColor: "light-dark(#0074e2, #6d9cfe)" }
+      "variant:success": { backgroundColor: statusFill.success },
+      "variant:warning": { backgroundColor: statusFill.warning },
+      "variant:error": { backgroundColor: statusFill.error },
+      "variant:accent": { backgroundColor: statusFill.accent }
+    },
+    "avatar-status-dot": {
+      "variant:success": { backgroundColor: statusFill.success },
+      "variant:error": { backgroundColor: statusFill.error }
+    },
+    // Give the Neutral segmented control a roomier inset without changing its
+    // outside height. The selected item stays flat against the tinted track.
+    "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 — 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 carries the tinted background for every
-    // status, info included. A theme override that sets a plain CSS property
-    // instead lands in @layer astryx-theme, which StyleX's @layer priority4
-    // outranks, so `backgroundColor` here would silently do nothing and the
-    // info banner would paint no background at all.
-    //
-    // Status overrides reference --color-text-{hue} so text/icon colors
-    // stay in sync with the palette anchors automatically.
     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)",
         "--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)",
@@ -565,27 +522,18 @@ var neutralTheme = (0, import_theme.defineTheme)({
         "--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)"
       }
     },
-    // =========================================================================
-    // 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.
-    // =========================================================================
+    "step-indicator": {
+      "status:accent": { "--color-accent": statusFill.accent },
+      "status:success": { "--color-success": statusFill.success },
+      "status:warning": { "--color-warning": statusFill.warning },
+      "status:error": { "--color-error": statusFill.error }
+    },
     switch: {
       base: {
         "--color-background-gray": "var(--color-border-emphasized)"
@@ -593,44 +541,26 @@ var neutralTheme = (0, import_theme.defineTheme)({
     },
     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"
+        "--color-accent": statusFill.accent
       },
       "variant:success": {
-        // Green T45 saturated stop (= variant:success badge bg)
-        "--color-success": "#198100"
+        "--color-success": statusFill.success
       },
       "variant:warning": {
-        // Yellow T85 saturated stop (= variant:warning badge bg)
-        "--color-warning": "#ffce2f"
+        "--color-warning": statusFill.warning
       },
       "variant:error": {
-        // Red T58 saturated stop (= variant:error badge bg)
-        "--color-error": "#c9303a"
+        "--color-error": statusFill.error
       }
     },
-    // =========================================================================
-    // 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)"