@helloimjolopez-pathway/pathway-tokens 11.0.0 → 11.1.0

package/components/scrollbar/scrollbar.jsx

@@ -43,8 +43,19 @@ export const SCROLL = {
   // an overlay scrollbar is a redundant affordance (the content scrolls with or
   // without it, and the OS bar remains). So contrast is bought back with SIZE
   // and PRESENCE rather than with darkness: see thumbWidth and the grab strip.
-  thumbRest:   "var(--semantic-color-scrim-faint)",    // black 16% — faint overlay (rest)
-  thumbHover:  "var(--semantic-color-scrim-light)",    // black 24% — hover/drag
+  // Scrim/Faint and Scrim/Light resolve to Cool Neutral 800, so the thumb was
+  // drawing a COOL grey over warm surfaces and reading as a cold bar against
+  // them. Reported 2026-10-02. The comment below has always said "light warm
+  // overlay" — the value simply did not match it.
+  //
+  // Scrim is also the wrong family: it is the modal backdrop, where a cool
+  // near-black is right. The thumb is an overlay on a surface, and under the
+  // alpha rule surfaces and fills are WARM. So the thumb now resolves through
+  // its own themed custom properties, set in the injected sheet below off the
+  // warm neutral alpha primitives. No new design token: a component-local
+  // property, the same mechanism the Widget uses for its column spans.
+  thumbRest:   "var(--pw-scrollbar-thumb-rest)",    // warm neutral 16%
+  thumbHover:  "var(--pw-scrollbar-thumb-hover)",   // warm neutral 24%
   thumbBlur:   "blur(8px) saturate(180%)",
   // Hairline glass edge: semantic white at 35% via color-mix.
   thumbEdge:   "inset 0 0 0 0.5px color-mix(in srgb, var(--semantic-color-fill-static-neutral-faint) 35%, transparent)",
@@ -72,6 +83,16 @@ if (typeof document !== "undefined" && !document.getElementById("pds-scrollable-
   const s = document.createElement("style");
   s.id = "pds-scrollable-base";
   s.textContent =
+    // Warm neutral, and it has to INVERT: 500 is the dark warm grey for a light
+    // surface, 100 the light warm grey for a dark one. An inline style cannot
+    // branch on [data-theme], which is why these live here rather than in the
+    // SCROLL map above.
+    ":root,[data-theme=\"light\"]{" +
+      "--pw-scrollbar-thumb-rest:var(--primitive-color-warm-neutral-500-16);" +
+      "--pw-scrollbar-thumb-hover:var(--primitive-color-warm-neutral-500-24)}" +
+    "[data-theme=\"midnight\"],[data-theme=\"dark\"]{" +
+      "--pw-scrollbar-thumb-rest:var(--primitive-color-warm-neutral-100-16);" +
+      "--pw-scrollbar-thumb-hover:var(--primitive-color-warm-neutral-100-24)}" +
     ".pds-scrollable__view{scrollbar-width:none;-ms-overflow-style:none}" +
     ".pds-scrollable__view::-webkit-scrollbar{width:0;height:0;display:none}" +
     "@media (hover: none){.pds-scrollable__grab{pointer-events:none!important}}";

package/components/sidenav/sidenav.jsx

@@ -139,6 +139,10 @@ export const L = {
   iconWrap:    24,   // no token in Figma — leading icon wrapper
   iconInner:   16,   // Material Symbols Rounded frame size, per design-system-spec §7.2
   rowPadH:     u("padding-tight"),
+  // Collapsed rail: container.rowStart's padding-right in Figma. It is what
+  // keeps the centred icon a hair left of the square's true centre, the same as
+  // the design.
+  railIconInset: u("padding-xxtight"),
   textPad:     u("padding-xtight"),
   childIndent: 24,   // no token in Figma — level-1 left indent
   stripeW:     4,    // no token in Figma — indicator stripe width
@@ -234,6 +238,13 @@ export function SideNavItem({
           width: isSidebarCollapsed ? L.itemH : "100%",
           marginLeft: isSidebarCollapsed ? "auto" : undefined,
           marginRight: isSidebarCollapsed ? "auto" : undefined,
+          // Figma's container.rowStart is 40 wide inside the 44 square with
+          // padding-right 6 and primary=CENTER, so the icon centres in the 34
+          // that is left after the 4px indicator column. See the icon wrap below.
+          paddingRight: isSidebarCollapsed ? L.railIconInset : undefined,
+          // border-box or the 6px padding is ADDED to the 44, which made the rail
+          // item 50 wide and no longer a square.
+          boxSizing: "border-box",
           borderRadius: T.radius, backgroundColor: fillBg,
           cursor: isDisabled ? "not-allowed" : "pointer",
           overflow: "hidden", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)", userSelect: "none" }}>
@@ -244,13 +255,29 @@ export function SideNavItem({
         {!isChild && item.icon && (
           <div style={{ width: L.iconWrap, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
-            marginLeft: L.rowPadH, color: iconColor }}>
+            // COLLAPSED CENTRES, EXPANDED INDENTS. The fixed 12px left margin
+            // applied in both states, so on the rail the 24px icon sat at
+            // x 16..40 of the 44 square: 6px right of centre, in every state.
+            // Reported 2026-10-02. Auto margins hand the free space back to
+            // both sides, which with the 6px right padding above reproduces
+            // Figma's x=9 exactly.
+            marginLeft:  isSidebarCollapsed ? "auto" : L.rowPadH,
+            marginRight: isSidebarCollapsed ? "auto" : undefined,
+            color: iconColor }}>
             {typeof item.icon === "function"
               ? item.icon({ size: L.iconInner, color: iconColor })
               : typeof item.icon === "string"
               ? <span className="material-symbols-rounded" aria-hidden="true"
                   style={{ fontSize: L.iconInner, lineHeight: 1, color: iconColor,
-                    fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20" }}>
+                    // display:block so the glyph is laid out as a box rather than
+                    // on a text baseline — an inline glyph in a flex-centred
+                    // parent is centred by its line box, not by its own art, so
+                    // it rode high inside the 24px wrap.
+                    display: "block",
+                    // opsz MUST match fontSize. It said 20 against a 16px size,
+                    // so the glyph was drawn on a 20px grid and scaled down into
+                    // a 16px box, which shifts the art off centre.
+                    fontVariationSettings: `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' ${L.iconInner}` }}>
                   {item.icon}
                 </span>
               : React.cloneElement(item.icon, { style: { color: iconColor } })}
@@ -258,9 +285,19 @@ export function SideNavItem({
         )}
 
         {/* Label */}
-        <div style={{ flex: 1, minWidth: 0,
-          paddingLeft: isChild ? 32 : L.textPad,
-          paddingRight: (!isChild && hasChildren) ? 0 : L.rowPadH,
+        <div style={{
+          // Collapsed, the label must take NO part in the flex distribution.
+          // With flex:1 it still claimed the free space even though max-width
+          // clamped it to zero, so the icon's auto margins had nothing left to
+          // centre with and the icon stayed hard left.
+          flex: isSidebarCollapsed ? "0 0 0px" : 1,
+          minWidth: 0,
+          // Collapsed, the padding has to go too. max-width clamps the CONTENT
+          // box, so the label still occupied 8px of padding on the rail and ate
+          // most of the free space the icon's auto margins needed: the icon
+          // landed at x=5 instead of Figma's x=9.
+          paddingLeft:  isSidebarCollapsed ? 0 : (isChild ? 32 : L.textPad),
+          paddingRight: isSidebarCollapsed ? 0 : ((!isChild && hasChildren) ? 0 : L.rowPadH),
           maxWidth: isSidebarCollapsed ? 0 : 200,
           opacity: isSidebarCollapsed ? 0 : 1,
           overflow: "hidden",
@@ -276,7 +313,7 @@ export function SideNavItem({
 
         {/* Chevron — groupers only */}
         {!isChild && hasChildren && (
-          <div style={{ width: 40, height: L.iconWrap, display: "flex",
+          <div style={{ width: isSidebarCollapsed ? 0 : 40, height: L.iconWrap, display: "flex",
             alignItems: "center", justifyContent: "center", flexShrink: 0,
             maxWidth: isSidebarCollapsed ? 0 : 40,
             opacity: isSidebarCollapsed ? 0 : 1,

package/dist/README.md

@@ -2,7 +2,7 @@
 
 **The colour contract is 210 names.** Your full working vocabulary is
 **360**. If you add up every declaration in this folder you get
-1152. That number is not the contract, and the table below says why.
+1155. That number is not the contract, and the table below says why.
 
 ## Link these, in this order
 
@@ -30,7 +30,7 @@ error**.
 | `themes/midnight.css` | 210 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
 | `type.css` | 39 | yes | yes | Type scale. Compose from these. |
 | `layout.css` | 76 | yes | yes | Spacing, radii, border widths. |
-| `layout-contextual.css` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
+| `layout-contextual.css` | 37 | **no** | **no** | Per-component metrics. This repo's components use these. |
 | `motion.css` | 21 | yes | yes | Durations and easings. |
 | `layout-responsive.css` | 9 | 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": "11.0.0",
+  "version": "11.1.0",
   "generated": "2026-10-02",
   "counts": {
     "contract": 360,
-    "infrastructure": 582,
-    "declarationsAcrossAllFiles": 1152
+    "infrastructure": 585,
+    "declarationsAcrossAllFiles": 1155
   },
   "loadOrder": [
     "primitives.css",
@@ -51,7 +51,7 @@
     "layout-contextual.css": {
       "contract": false,
       "mustLoad": false,
-      "count": 34,
+      "count": 37,
       "role": "Per-component metrics. This repo's components use these."
     },
     "motion.css": {

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 37 custom properties.
  Generated — do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
@@ -48,4 +48,7 @@
   --contextual-layout-units-sidenav-width-collapsed: 84px;
   --contextual-layout-units-sidenav-width-expanded: 256px;
   --contextual-layout-units-topnav-height: 60px;
+  --contextual-layout-units-widget-minwidth-detail: 515px;
+  --contextual-layout-units-widget-minwidth-explore: 1050px;
+  --contextual-layout-units-widget-minwidth-glance: 275px;
 }

package/dist/tokens.js

@@ -413,6 +413,39 @@ const tokens = {
       "height"
     ]
   },
+  "contextual-layout-units-widget-minwidth-glance": {
+    "value": 275,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "amplify",
+      "widget",
+      "minwidth",
+      "glance"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-detail": {
+    "value": 515,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "amplify",
+      "widget",
+      "minwidth",
+      "detail"
+    ]
+  },
+  "contextual-layout-units-widget-minwidth-explore": {
+    "value": 1050,
+    "type": "number",
+    "path": [
+      "contextual-layout-units",
+      "amplify",
+      "widget",
+      "minwidth",
+      "explore"
+    ]
+  },
   "elevation-light-lift": {
     "value": "0 10px 28px -6px rgba(24,27,43,0.08)",
     "type": "string",

package/dist/tokens.json

@@ -202,6 +202,22 @@
           "$type": "number",
           "$value": "{primitive-unit.unit.60}"
         }
+      },
+      "widget": {
+        "minwidth": {
+          "glance": {
+            "$type": "number",
+            "$value": 275
+          },
+          "detail": {
+            "$type": "number",
+            "$value": 515
+          },
+          "explore": {
+            "$type": "number",
+            "$value": 1050
+          }
+        }
       }
     },
     "newco": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
   "license": "UNLICENSED",
   "type": "module",
@@ -63,7 +63,7 @@
     "fix-tokens-preview": "node scripts/fix-tokens.js --dry-run",
     "build-tokens": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js",
     "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon",
-    "storybook": "node style-dictionary.config.js && storybook dev -p 6006",
+    "storybook": "node style-dictionary.config.js && PATHWAY_BRAND_AXIS=1 storybook dev -p 6006",
     "build-storybook": "storybook build",
     "check-demo-tokens": "node scripts/check-demo-tokens.js",
     "assemble-export": "node scripts/assemble-figma-export.js",
@@ -84,7 +84,8 @@
     "check-doc-hex": "node scripts/fix-stale-doc-hex.js --check",
     "check-token-object-refs": "node scripts/check-token-object-refs.js",
     "check-motion-coverage": "node scripts/check-motion-coverage.js",
-    "sync-demo-module-icon": "node scripts/sync-demo-module-icon.js"
+    "sync-demo-module-icon": "node scripts/sync-demo-module-icon.js",
+    "build-storybook:brands": "PATHWAY_BRAND_AXIS=1 storybook build"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.29.2",