@helloimjolopez-pathway/pathway-tokens 8.0.0 → 9.0.0

package/README.md

@@ -83,7 +83,7 @@ as too granular to adopt. Retired 2026-09-03 and not coming back.
 
 ```css
 .card {
-  background: var(--semantic-color-fill-surface-sheet);
+  background: var(--semantic-color-fill-static-neutral-mono);
   color:      var(--semantic-color-foreground-static-neutral-strong);
   border:     var(--semantic-layout-units-borderwidth-base) solid
               var(--semantic-color-stroke-static-neutral-base);

package/components/sidenav/sidenav.jsx

@@ -70,7 +70,7 @@ export const T = {
     infoSubtle: c("stroke-static-neutral-base"),   // container right border
   },
   surface: {
-    navLight:    c("fill-surface-sheet"),      // the nav container itself: white
+    navLight:    c("fill-static-neutral-mono"),  // the nav container itself: white
     navElevated: c("fill-surface-elevated"),   // PopoverMenu, per Figma's "Popover Menu"
   },
   // Label, icon and chevron all resolve to the SAME token per state. A nav item
@@ -105,15 +105,21 @@ export const T = {
  * say so.
  */
 export const L = {
-  navPadH:     u("padding-base", 16),
-  navColPadH:  u("padding-medium", 12),
-  navPadTop:   u("padding-tight", 8),
+  // SideNav is chrome that does NOT change across breakpoints, so its own
+  // metrics live in Contextual: Layout & Units rather than Responsive: Layout.
+  // Values measured from SideNav.Container in Figma: expanded padding 16, the
+  // collapsed rail 12, vertical 8, item gap 6. These were on the generic
+  // semantic scale until 2026-09-17, which meant a change to Padding/Base
+  // would silently move the nav.
+  navPadH:     x("sidenav-padding-horizontal-expanded", 16),
+  navColPadH:  x("sidenav-padding-horizontal-collapsed", 12),
+  navPadTop:   x("sidenav-padding-vertical", 8),
   // Read from SideNav.Container in Figma on 2026-09-16: every expanded variant
   // is 250 wide (Base, Stroked, Mobile.Base, Mobile.Stroked) and every
   // collapsed one is 72. Was 240, which no longer matched the component.
   navW:        x("sidenav-width-expanded", 250),
   navWcol:     x("sidenav-width-collapsed", 72),
-  menuGap:     u("gap-xtight", 6),
+  menuGap:     x("sidenav-gap-vertical", 6),
   menuPadT:    u("padding-tight", 8),
   menuPadB:    u("padding-xxwide", 56),
   itemH:       u("accessibility-touch-target-aa-height", 44),

package/dist/README.md

@@ -1,8 +1,8 @@
 # Pathway design tokens
 
-**The colour contract is 144 names.** Your full working vocabulary is
-**254**. If you add up every declaration in this folder you get
-785 — that number is not the contract, and the table below says why.
+**The colour contract is 143 names.** Your full working vocabulary is
+**253**. If you add up every declaration in this folder you get
+782 — that number is not the contract, and the table below says why.
 
 ## Link these, in this order
 
@@ -26,11 +26,11 @@ error**.
 | File | Names | Safe to name? | Must load? | What it is |
 |---|---|---|---|---|
 | `primitives.css` | 353 | **no** | yes | Raw colour ramps. Load it; do not name it. |
-| `themes/light.css` | 144 | yes | yes | Colour contract, Light Mode. |
-| `themes/midnight.css` | 144 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
+| `themes/light.css` | 143 | yes | yes | Colour contract, Light Mode. |
+| `themes/midnight.css` | 143 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
 | `type.css` | 41 | yes | yes | Type scale. Compose from these. |
 | `layout.css` | 40 | yes | yes | Spacing, radii, border widths. |
-| `layout-contextual.css` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
+| `layout-contextual.css` | 33 | **no** | **no** | Per-component metrics. This repo's components use these. |
 | `motion.css` | 17 | yes | yes | Durations and easings. |
 | `layout-responsive.css` | 7 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
 | `breakpoints.css` | 5 | yes | yes | Breakpoint values. |

package/dist/contract.json

@@ -1,11 +1,11 @@
 {
   "$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js — do not hand-edit. Lint against `contract` if you want the boundary enforced; nothing here blocks a primitive.",
-  "version": "8.0.0",
-  "generated": "2026-09-16",
+  "version": "9.0.0",
+  "generated": "2026-09-17",
   "counts": {
-    "contract": 254,
-    "infrastructure": 387,
-    "declarationsAcrossAllFiles": 785
+    "contract": 253,
+    "infrastructure": 386,
+    "declarationsAcrossAllFiles": 782
   },
   "loadOrder": [
     "primitives.css",
@@ -27,13 +27,13 @@
     "themes/light.css": {
       "contract": true,
       "mustLoad": true,
-      "count": 144,
+      "count": 143,
       "role": "Colour contract, Light Mode."
     },
     "themes/midnight.css": {
       "contract": true,
       "mustLoad": true,
-      "count": 144,
+      "count": 143,
       "role": "Colour contract, Midnight Mode. Same names as light."
     },
     "type.css": {
@@ -51,7 +51,7 @@
     "layout-contextual.css": {
       "contract": false,
       "mustLoad": false,
-      "count": 34,
+      "count": 33,
       "role": "Per-component metrics. This repo's components use these."
     },
     "motion.css": {
@@ -160,7 +160,6 @@
     "--semantic-color-fill-static-severe-subtle",
     "--semantic-color-fill-surface-canvas",
     "--semantic-color-fill-surface-elevated",
-    "--semantic-color-fill-surface-sheet",
     "--semantic-color-foreground-action-disabled",
     "--semantic-color-foreground-action-primary-on-strong",
     "--semantic-color-foreground-action-primary-on-subtle-hover",

package/dist/layout-contextual.css

@@ -9,7 +9,7 @@
  prefer layout.css, which is the general spacing contract. These exist so a
  component's geometry can be tuned without moving the whole scale.
 
- Declares 34 custom properties.
+ Declares 33 custom properties.
  Generated — do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
@@ -26,7 +26,6 @@
   --contextual-layout-units-button-padding-small-vertical: 6px;
   --contextual-layout-units-button-padding-xsmall-horizontal: 8px;
   --contextual-layout-units-button-padding-xsmall-vertical: 6px;
-  --contextual-layout-units-button-radius: 8px;
   --contextual-layout-units-card-border-width-hover: 0.75px;
   --contextual-layout-units-card-border-width-rest: 0.5px;
   --contextual-layout-units-card-cornerradius: 12px;

package/dist/themes/light.css

@@ -12,7 +12,7 @@
  put a mode in a property name — that form came from tokens.css, retired
  2026-09-03, and resolves to nothing.
 
- Declares 144 custom properties.
+ Declares 143 custom properties.
  Generated — do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
@@ -157,7 +157,6 @@
   --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
   --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
   --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
-  --semantic-color-fill-surface-sheet: var(--semantic-color-fill-static-neutral-mono);
   --semantic-color-foreground-action-status-positive-on-strong: var(--semantic-color-fill-static-neutral-mono);
   --semantic-color-foreground-action-status-negative-on-strong: var(--semantic-color-fill-static-neutral-mono);
   --semantic-color-foreground-action-primary-on-strong: var(--semantic-color-fill-static-neutral-mono);

package/dist/themes/midnight.css

@@ -14,13 +14,12 @@
  still the lightest-touch step even though here it is a dark near-ground.
  White, XLight and Black are inversion anchors and keep their value.
 
- Declares 144 custom properties.
+ Declares 143 custom properties.
  Generated — do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
 [data-theme="midnight"], [data-theme="dark"] {
   --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
-  --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
   --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
   --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
   --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);

package/dist/tokens.js

@@ -2179,17 +2179,6 @@ const tokens = {
       "canvas"
     ]
   },
-  "semantic-color-light-mode-fill-surface-sheet": {
-    "value": "#fefefd",
-    "type": "color",
-    "path": [
-      "semantic-color",
-      "light-mode",
-      "fill",
-      "surface",
-      "sheet"
-    ]
-  },
   "semantic-color-light-mode-fill-surface-elevated": {
     "value": "#fefefd",
     "type": "color",
@@ -3969,17 +3958,6 @@ const tokens = {
       "canvas"
     ]
   },
-  "semantic-color-midnight-mode-fill-surface-sheet": {
-    "value": "#0a1223",
-    "type": "color",
-    "path": [
-      "semantic-color",
-      "midnight-mode",
-      "fill",
-      "surface",
-      "sheet"
-    ]
-  },
   "semantic-color-midnight-mode-fill-surface-elevated": {
     "value": "#152343",
     "type": "color",
@@ -7755,15 +7733,6 @@ const tokens = {
       "selected"
     ]
   },
-  "contextual-layout-units-button-radius": {
-    "value": 8,
-    "type": "number",
-    "path": [
-      "contextual-layout-units",
-      "button",
-      "radius"
-    ]
-  },
   "contextual-layout-units-button-corner-radius-radius": {
     "value": 8,
     "type": "number",

package/dist/tokens.json

@@ -997,10 +997,6 @@
             "$type": "color",
             "$value": "{primitive-color.cool-neutral.10}"
           },
-          "sheet": {
-            "$type": "color",
-            "$value": "{semantic-color.light-mode.fill.static.neutral.mono}"
-          },
           "elevated": {
             "$type": "color",
             "$value": "{primitive-color.warm-neutral.0}"
@@ -1721,10 +1717,6 @@
             "$type": "color",
             "$value": "{primitive-color.brand.900}"
           },
-          "sheet": {
-            "$type": "color",
-            "$value": "{primitive-color.brand.800}"
-          },
           "elevated": {
             "$type": "color",
             "$value": "{primitive-color.brand.700}"
@@ -3415,10 +3407,6 @@
           "$value": "{semantic-layout-units.borderwidth.medium}"
         }
       },
-      "radius": {
-        "$type": "number",
-        "$value": "{primitive-unit.unit.8}"
-      },
       "corner-radius": {
         "radius": {
           "$type": "number",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
   "license": "UNLICENSED",
   "type": "module",