@helloimjolopez-pathway/pathway-tokens 7.0.0 → 7.0.2

package/README.md

@@ -3,11 +3,11 @@
 Design system for Ministry Brands Amplify. Tokens + components + specifications, all versioned in one place, with Storybook deployed from `main`.
 
 > **Looking for the tokens?** → **[TOKENS.md](TOKENS.md)** — where the CSS lives, which
-> of the 267 names you may use, and what to link in what order.
+> of the 284 names you may use, and what to link in what order.
 
 ## Using the tokens
 
-**The colour contract is 169 names. Your full working vocabulary is 267.**
+**The colour contract is 186 names. Your full working vocabulary is 284.**
 
 That is the number worth knowing, because adding up every declaration in the token
 folder gives 966 and the retired `tokens.css` used to emit 2,338. Neither is the
@@ -16,13 +16,13 @@ one name set rather than each having their own.
 
 | | Count | Name these? |
 |---|---|---|
-| Colour (`themes/light.css`, `themes/midnight.css` — same names) | **169** | Yes |
+| Colour (`themes/light.css`, `themes/midnight.css` — same names) | **186** | Yes |
 | Type scale (`type.css`) | 41 | Yes |
 | Spacing, radii, borders (`layout.css`) | 40 | Yes |
 | Motion (`motion.css`) | 17 | Yes |
 | Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
 | Breakpoints (`breakpoints.css`) | 5 | Yes |
-| **Working vocabulary** | **267** | |
+| **Working vocabulary** | **284** | |
 | Raw ramps (`primitives.css`) | 350 | **No** — but you must load it |
 | Component metrics (`layout-contextual.css`) | 26 | This repo's components |
 

package/components/scrollbar/scrollbar.jsx

@@ -30,13 +30,28 @@ export const SCROLL = {
   thumbMin:    28,                                                // px — min thumb length (grab-target floor); JS layout math
   gutter:      "var(--semantic-layout-units-padding-xxxtight)",   // 2px — inset from the right edge
   grabZone:    16,                                                // px — invisible mouse grab strip (wider than the 6px thumb so it's catchable)
-  thumbRest:   "var(--semantic-color-scrim-faint)",    // black 16% — faint overlay (rest)
-  thumbHover:  "var(--semantic-color-scrim-light)",    // black 30% — hover/drag
+  // WHY THESE TWO RUNGS AND NOT THE FAINTER ONES (2026-09-16):
+  //
+  // Rest was Scrim/Faint (black 16%), which composites to 1.4:1 against both
+  // canvas and sheet. The AA floor for a non-text UI component is 3:1, so a 6px
+  // pill at 1.4:1 sat right at the threshold of perception: one person saw it
+  // and another, on a brighter display, reported the scrollbar as missing
+  // entirely. That was a real report, not a misconfiguration.
+  //
+  // Measured over #fafafa: Faint 16% = 1.4:1, Light 24% = 1.68:1,
+  // Subtle 50% = 3.4:1, Base 70% = 6.57:1. Subtle is the lightest rung that
+  // clears the floor, so rest takes it and hover takes Base, which keeps the
+  // hover step legible as a step.
+  thumbRest:   "var(--semantic-color-scrim-subtle)",   // black 50% — 3.4:1, the lightest rung clearing 3:1
+  thumbHover:  "var(--semantic-color-scrim-base)",     // black 70% — 6.57:1, hover/drag
   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)",
-  // Asymmetric fade, motion-token driven: snappy appear (200ms decelerate glide-in), graceful fade-out (380ms).
-  fadeIn:      "opacity var(--motion-duration-3) var(--motion-easing-decelerate), background var(--motion-duration-3) var(--motion-easing-standard)",
+  // Fade OUT gracefully, but appear INSTANTLY. Animating opacity on the way in
+  // multiplied the thumb's own alpha by the in-flight opacity, so during the
+  // 200ms glide-in it rendered as low as 1.18:1 — below the floor at the exact
+  // moment the user is looking for it. Only the fade-out is animated now.
+  fadeIn:      "background var(--motion-duration-3) var(--motion-easing-standard)",
   fadeOut:     "opacity var(--motion-duration-5) var(--motion-easing-standard)",
   idleHideMs:  500,                                               // hide the thumb this long after scrolling stops / mouse leaves the bar
 };

package/components/sidenav/sidenav.jsx

@@ -48,6 +48,11 @@ import ReactDOM from "react-dom";
  */
 const c = (name) => `var(--semantic-color-${name})`;
 const u = (name, fallback) => `var(--semantic-layout-units-${name}, ${fallback}px)`;
+// Component metrics live in the CONTEXTUAL collection, not the semantic one, so
+// they need their own prefix. SideNav's two widths moved there on 2026-09-16:
+// they were numeric literals with a "no token in Figma" comment, which was true
+// until the tokens were created.
+const x = (name, fallback) => `var(--contextual-layout-units-${name}, ${fallback}px)`;
 
 // Negate a length that may be either a number or a var() reference. Used for the
 // scroll-region edge bleed, where `-value` on a string would give NaN.
@@ -64,7 +69,10 @@ export const T = {
     navTrail:   c("fill-action-selection-trail"),
     infoSubtle: c("stroke-static-neutral-base"),   // container right border
   },
-  surface: { navLight: c("fill-surface-sheet") },
+  surface: {
+    navLight:    c("fill-surface-sheet"),      // 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
   // is one interactive surface, so its foreground must not split across two
   // ramps that can drift apart.
@@ -100,8 +108,11 @@ export const L = {
   navPadH:     u("padding-base", 16),
   navColPadH:  u("padding-medium", 12),
   navPadTop:   u("padding-tight", 8),
-  navW:        240,  // no token in Figma — expanded sidebar width
-  navWcol:     72,   // no token in Figma — collapsed rail width
+  // 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),
   menuPadT:    u("padding-tight", 8),
   menuPadB:    u("padding-xxwide", 56),
@@ -294,13 +305,13 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
       style={{ position: "fixed",
         left: anchorRect.right + 8,
         top: anchorRect.top + anchorRect.height / 2,
-        zIndex: 1000, backgroundColor: "#fff",
-        border: "0.5px solid #f6f6f6", borderRadius: 8,
+        zIndex: 1000, backgroundColor: T.surface.navLight,
+        border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
         boxShadow: "2px 2px 8px 0px rgba(0,0,0,0.03)",
         padding: "6px 8px", whiteSpace: "nowrap", pointerEvents: "auto",
         animation: "popoverInCentered var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
       <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
-        fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: "#202020" }}>
+        fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: T.text.secondary }}>
         {label}
       </span>
     </div>,
@@ -333,13 +344,13 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
   return ReactDOM.createPortal(
     <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
       style={{ position: "fixed", left: anchorRect.right + 8, top: anchorRect.top,
-        zIndex: 1000, backgroundColor: "#fff",
-        border: "0.5px solid #ededed", borderRadius: 8,
+        zIndex: 1000, backgroundColor: T.surface.navElevated,
+        border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
         boxShadow: "2px 2px 8px 4px rgba(0,0,0,0.03)",
         padding: 6, minWidth: 200, pointerEvents: "auto",
         animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
       {/* Section label — Figma component 40006794-5977 */}
-      <div style={{ borderBottom: "0.5px solid #ededed" }}>
+      <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
         <SectionLabel label={item.label} />
       </div>
       {item.children.map(child =>

package/dist/README.md

@@ -0,0 +1,96 @@
+# Pathway design tokens
+
+**The colour contract is 186 names.** Your full working vocabulary is
+**296**. If you add up every declaration in this folder you get
+869 — that number is not the contract, and the table below says why.
+
+## Link these, in this order
+
+```html
+<link rel="stylesheet" href="primitives.css">
+<link rel="stylesheet" href="themes/light.css">
+<link rel="stylesheet" href="themes/midnight.css">
+<link rel="stylesheet" href="type.css">
+<link rel="stylesheet" href="layout.css">
+<link rel="stylesheet" href="motion.css">
+<link rel="stylesheet" href="layout-responsive.css">
+<link rel="stylesheet" href="breakpoints.css">
+```
+
+`primitives.css` must come first. Every semantic token resolves through it, so if it is
+missing all colour resolves to nothing and the page renders unstyled **with no console
+error**.
+
+## The files
+
+| 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` | 186 | yes | yes | Colour contract, Light Mode. |
+| `themes/midnight.css` | 186 | 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. |
+| `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. |
+
+Each file repeats this in its own header.
+
+## Can I use a primitive?
+
+Yes. Nothing stops you and nothing should. But `Primitive: Color` has exactly **one
+mode** and `themes/midnight.css` declares **zero** primitives, so a primitive holds one
+value forever:
+
+```css
+color: var(--primitive-color-brand-400);               /* stays this blue in Midnight */
+color: var(--semantic-color-fill-action-primary-strong-rest);  /* flips with the theme */
+```
+
+Use one when you specifically want a value that does not respond to the theme.
+
+## Theming
+
+One name, two values, resolved by selector. Set `data-theme="midnight"` on `<html>`
+to flip the page, or on any element to flip just that subtree — it composes both ways,
+so a light island can sit inside a dark island.
+
+Never put a mode in a property name. `--semantic-color-light-mode-*` came from
+`tokens.css`, retired 2026-09-03, and resolves to nothing.
+
+## Type
+
+No composite styles and no `.pw-type-*` classes. Name five properties:
+
+```css
+font-family:    var(--semantic-type-family-brand);
+font-size:      var(--semantic-type-font-size-m);
+font-weight:    var(--semantic-type-weight-semibold);
+line-height:    var(--semantic-type-line-height-m-single);
+letter-spacing: var(--semantic-type-letter-spacing-compact);
+```
+
+## Layout units carry their unit
+
+```css
+border-radius: var(--semantic-layout-units-cornerradius-small);             /* correct */
+border-radius: calc(var(--semantic-layout-units-cornerradius-small) * 1px);  /* WRONG */
+```
+
+The second is `calc(4px * 1px)`, which is not a length, so the browser drops it silently.
+
+## Machine-readable
+
+`contract.json` lists every consumable name plus the per-file counts, so you can lint
+against it if you want the boundary enforced.
+
+## Motion is not in Figma
+
+The Variables panel has zero motion variables; `motion.css` is generated from
+`docs/design-system-spec.md` §2. Anyone rebuilding tokens from a Figma export gets no
+motion at all and no warning — consume the package instead.
+
+---
+
+Repo: https://github.com/helloimjolopez-collab/pathway-ds

package/dist/breakpoints.css

@@ -1,7 +1,14 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
+/*
+ ==========================================================================
+ PATHWAY DESIGN TOKENS — CONTRACT
+ ==========================================================================
 
+ The breakpoint values. Name these freely.
+
+ Declares 5 custom properties.
+ Generated — do not edit. Run `npm run build-tokens`.
+ ==========================================================================
+*/
 :root {
   --breakpoints-desktop-1920px: 1920px;
   --breakpoints-desktop-1440px: 1440px;

package/dist/contract.json

@@ -0,0 +1,374 @@
+{
+  "$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": "7.0.2",
+  "generated": "2026-09-16",
+  "counts": {
+    "contract": 296,
+    "infrastructure": 387,
+    "declarationsAcrossAllFiles": 869
+  },
+  "loadOrder": [
+    "primitives.css",
+    "themes/light.css",
+    "themes/midnight.css",
+    "type.css",
+    "layout.css",
+    "motion.css",
+    "layout-responsive.css",
+    "breakpoints.css"
+  ],
+  "files": {
+    "primitives.css": {
+      "contract": false,
+      "mustLoad": true,
+      "count": 353,
+      "role": "Raw colour ramps. Load it; do not name it."
+    },
+    "themes/light.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 186,
+      "role": "Colour contract, Light Mode."
+    },
+    "themes/midnight.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 186,
+      "role": "Colour contract, Midnight Mode. Same names as light."
+    },
+    "type.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 41,
+      "role": "Type scale. Compose from these."
+    },
+    "layout.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 40,
+      "role": "Spacing, radii, border widths."
+    },
+    "layout-contextual.css": {
+      "contract": false,
+      "mustLoad": false,
+      "count": 34,
+      "role": "Per-component metrics. This repo's components use these."
+    },
+    "motion.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 17,
+      "role": "Durations and easings."
+    },
+    "layout-responsive.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 7,
+      "role": "Sheet and TopNav padding. The only layout tokens with media queries."
+    },
+    "breakpoints.css": {
+      "contract": true,
+      "mustLoad": true,
+      "count": 5,
+      "role": "Breakpoint values."
+    }
+  },
+  "contract": [
+    "--breakpoints-desktop-1440px",
+    "--breakpoints-desktop-1920px",
+    "--breakpoints-mobile-393px",
+    "--breakpoints-tablet-1024px",
+    "--breakpoints-tablet-768px",
+    "--motion-duration-1",
+    "--motion-duration-2",
+    "--motion-duration-3",
+    "--motion-duration-4",
+    "--motion-duration-5",
+    "--motion-duration-6",
+    "--motion-duration-7",
+    "--motion-duration-8",
+    "--motion-duration-loop",
+    "--motion-duration-loop-fast",
+    "--motion-easing-accelerate",
+    "--motion-easing-accordion",
+    "--motion-easing-decelerate",
+    "--motion-easing-emphasized",
+    "--motion-easing-linear",
+    "--motion-easing-spring",
+    "--motion-easing-standard",
+    "--responsive-layout-sheet-cornerradius-top",
+    "--responsive-layout-sheet-padding-horizontal",
+    "--responsive-layout-sheet-padding-top",
+    "--responsive-layout-topnav-gap-horizontal",
+    "--responsive-layout-topnav-height",
+    "--responsive-layout-topnav-padding-horizontal",
+    "--responsive-layout-topnav-padding-vertical",
+    "--semantic-color-fill-action-disabled",
+    "--semantic-color-fill-action-primary-strong-hover",
+    "--semantic-color-fill-action-primary-strong-pressed",
+    "--semantic-color-fill-action-primary-strong-rest",
+    "--semantic-color-fill-action-primary-subtle-hover",
+    "--semantic-color-fill-action-primary-subtle-pressed",
+    "--semantic-color-fill-action-primary-subtle-rest",
+    "--semantic-color-fill-action-secondary-hover",
+    "--semantic-color-fill-action-secondary-pressed",
+    "--semantic-color-fill-action-secondary-rest",
+    "--semantic-color-fill-action-selection-hover",
+    "--semantic-color-fill-action-selection-selected",
+    "--semantic-color-fill-action-selection-trail",
+    "--semantic-color-fill-action-status-attention-strong-hover",
+    "--semantic-color-fill-action-status-attention-strong-pressed",
+    "--semantic-color-fill-action-status-attention-strong-rest",
+    "--semantic-color-fill-action-status-attention-subtle-hover",
+    "--semantic-color-fill-action-status-attention-subtle-pressed",
+    "--semantic-color-fill-action-status-attention-subtle-rest",
+    "--semantic-color-fill-action-status-info-strong-hover",
+    "--semantic-color-fill-action-status-info-strong-pressed",
+    "--semantic-color-fill-action-status-info-strong-rest",
+    "--semantic-color-fill-action-status-info-subtle-hover",
+    "--semantic-color-fill-action-status-info-subtle-pressed",
+    "--semantic-color-fill-action-status-info-subtle-rest",
+    "--semantic-color-fill-action-status-negative-strong-hover",
+    "--semantic-color-fill-action-status-negative-strong-pressed",
+    "--semantic-color-fill-action-status-negative-strong-rest",
+    "--semantic-color-fill-action-status-negative-subtle-hover",
+    "--semantic-color-fill-action-status-negative-subtle-pressed",
+    "--semantic-color-fill-action-status-negative-subtle-rest",
+    "--semantic-color-fill-action-status-positive-strong-hover",
+    "--semantic-color-fill-action-status-positive-strong-pressed",
+    "--semantic-color-fill-action-status-positive-strong-rest",
+    "--semantic-color-fill-action-status-positive-subtle-hover",
+    "--semantic-color-fill-action-status-positive-subtle-pressed",
+    "--semantic-color-fill-action-status-positive-subtle-rest",
+    "--semantic-color-fill-action-status-severe-strong-hover",
+    "--semantic-color-fill-action-status-severe-strong-pressed",
+    "--semantic-color-fill-action-status-severe-strong-rest",
+    "--semantic-color-fill-action-status-severe-subtle-hover",
+    "--semantic-color-fill-action-status-severe-subtle-pressed",
+    "--semantic-color-fill-action-status-severe-subtle-rest",
+    "--semantic-color-fill-static-accent-jade-strong",
+    "--semantic-color-fill-static-accent-jade-subtle",
+    "--semantic-color-fill-static-accent-lagoon-strong",
+    "--semantic-color-fill-static-accent-lagoon-subtle",
+    "--semantic-color-fill-static-accent-mauve-strong",
+    "--semantic-color-fill-static-accent-mauve-subtle",
+    "--semantic-color-fill-static-accent-seabreeze-strong",
+    "--semantic-color-fill-static-accent-seabreeze-subtle",
+    "--semantic-color-fill-static-attention-strong",
+    "--semantic-color-fill-static-attention-subtle",
+    "--semantic-color-fill-static-brand-base",
+    "--semantic-color-fill-static-brand-bold",
+    "--semantic-color-fill-static-brand-faint",
+    "--semantic-color-fill-static-brand-strong",
+    "--semantic-color-fill-static-brand-strongest",
+    "--semantic-color-fill-static-brand-subtle",
+    "--semantic-color-fill-static-info-strong",
+    "--semantic-color-fill-static-info-subtle",
+    "--semantic-color-fill-static-negative-strong",
+    "--semantic-color-fill-static-negative-subtle",
+    "--semantic-color-fill-static-neutral-base",
+    "--semantic-color-fill-static-neutral-bold",
+    "--semantic-color-fill-static-neutral-faint",
+    "--semantic-color-fill-static-neutral-mono",
+    "--semantic-color-fill-static-neutral-strong",
+    "--semantic-color-fill-static-neutral-subtle",
+    "--semantic-color-fill-static-positive-strong",
+    "--semantic-color-fill-static-positive-subtle",
+    "--semantic-color-fill-static-severe-strong",
+    "--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",
+    "--semantic-color-foreground-action-primary-on-subtle-pressed",
+    "--semantic-color-foreground-action-primary-on-subtle-rest",
+    "--semantic-color-foreground-action-secondary-hover",
+    "--semantic-color-foreground-action-secondary-pressed",
+    "--semantic-color-foreground-action-secondary-rest",
+    "--semantic-color-foreground-action-secondary-subtle-hover",
+    "--semantic-color-foreground-action-secondary-subtle-pressed",
+    "--semantic-color-foreground-action-secondary-subtle-rest",
+    "--semantic-color-foreground-action-status-attention-on-strong",
+    "--semantic-color-foreground-action-status-attention-on-subtle-hover",
+    "--semantic-color-foreground-action-status-attention-on-subtle-pressed",
+    "--semantic-color-foreground-action-status-attention-on-subtle-rest",
+    "--semantic-color-foreground-action-status-info-on-strong",
+    "--semantic-color-foreground-action-status-info-on-subtle-hover",
+    "--semantic-color-foreground-action-status-info-on-subtle-pressed",
+    "--semantic-color-foreground-action-status-info-on-subtle-rest",
+    "--semantic-color-foreground-action-status-negative-on-strong",
+    "--semantic-color-foreground-action-status-negative-on-subtle-hover",
+    "--semantic-color-foreground-action-status-negative-on-subtle-pressed",
+    "--semantic-color-foreground-action-status-negative-on-subtle-rest",
+    "--semantic-color-foreground-action-status-positive-on-strong",
+    "--semantic-color-foreground-action-status-positive-on-subtle-hover",
+    "--semantic-color-foreground-action-status-positive-on-subtle-pressed",
+    "--semantic-color-foreground-action-status-positive-on-subtle-rest",
+    "--semantic-color-foreground-action-status-severe-on-strong",
+    "--semantic-color-foreground-action-status-severe-on-subtle-hover",
+    "--semantic-color-foreground-action-status-severe-on-subtle-pressed",
+    "--semantic-color-foreground-action-status-severe-on-subtle-rest",
+    "--semantic-color-foreground-static-accent-jade-on-strong",
+    "--semantic-color-foreground-static-accent-jade-on-subtle",
+    "--semantic-color-foreground-static-accent-lagoon-on-strong",
+    "--semantic-color-foreground-static-accent-lagoon-on-subtle",
+    "--semantic-color-foreground-static-accent-mauve-on-strong",
+    "--semantic-color-foreground-static-accent-mauve-on-subtle",
+    "--semantic-color-foreground-static-accent-seabreeze-on-strong",
+    "--semantic-color-foreground-static-accent-seabreeze-on-subtle",
+    "--semantic-color-foreground-static-attention-on-strong",
+    "--semantic-color-foreground-static-attention-on-subtle",
+    "--semantic-color-foreground-static-brand-on-strong",
+    "--semantic-color-foreground-static-brand-on-subtle",
+    "--semantic-color-foreground-static-info-on-strong",
+    "--semantic-color-foreground-static-info-on-subtle",
+    "--semantic-color-foreground-static-negative-on-strong",
+    "--semantic-color-foreground-static-negative-on-subtle",
+    "--semantic-color-foreground-static-neutral-base",
+    "--semantic-color-foreground-static-neutral-bold",
+    "--semantic-color-foreground-static-neutral-faint",
+    "--semantic-color-foreground-static-neutral-mono",
+    "--semantic-color-foreground-static-neutral-strong",
+    "--semantic-color-foreground-static-neutral-subtle",
+    "--semantic-color-foreground-static-positive-on-strong",
+    "--semantic-color-foreground-static-positive-on-subtle",
+    "--semantic-color-foreground-static-severe-on-strong",
+    "--semantic-color-foreground-static-severe-on-subtle",
+    "--semantic-color-scrim-base",
+    "--semantic-color-scrim-faint",
+    "--semantic-color-scrim-light",
+    "--semantic-color-scrim-subtle",
+    "--semantic-color-stroke-action-disabled",
+    "--semantic-color-stroke-action-field-hover",
+    "--semantic-color-stroke-action-field-pressed",
+    "--semantic-color-stroke-action-field-rest",
+    "--semantic-color-stroke-action-primary-hover",
+    "--semantic-color-stroke-action-primary-pressed",
+    "--semantic-color-stroke-action-primary-rest",
+    "--semantic-color-stroke-action-secondary-hover",
+    "--semantic-color-stroke-action-secondary-pressed",
+    "--semantic-color-stroke-action-secondary-rest",
+    "--semantic-color-stroke-action-status-attention-hover",
+    "--semantic-color-stroke-action-status-attention-pressed",
+    "--semantic-color-stroke-action-status-attention-rest",
+    "--semantic-color-stroke-action-status-info-hover",
+    "--semantic-color-stroke-action-status-info-pressed",
+    "--semantic-color-stroke-action-status-info-rest",
+    "--semantic-color-stroke-action-status-negative-hover",
+    "--semantic-color-stroke-action-status-negative-pressed",
+    "--semantic-color-stroke-action-status-negative-rest",
+    "--semantic-color-stroke-action-status-positive-hover",
+    "--semantic-color-stroke-action-status-positive-pressed",
+    "--semantic-color-stroke-action-status-positive-rest",
+    "--semantic-color-stroke-action-status-severe-hover",
+    "--semantic-color-stroke-action-status-severe-pressed",
+    "--semantic-color-stroke-action-status-severe-rest",
+    "--semantic-color-stroke-focusring-base",
+    "--semantic-color-stroke-static-accent-jade-strong",
+    "--semantic-color-stroke-static-accent-jade-subtle",
+    "--semantic-color-stroke-static-accent-lagoon-strong",
+    "--semantic-color-stroke-static-accent-lagoon-subtle",
+    "--semantic-color-stroke-static-accent-mauve-strong",
+    "--semantic-color-stroke-static-accent-mauve-subtle",
+    "--semantic-color-stroke-static-accent-seabreeze-strong",
+    "--semantic-color-stroke-static-accent-seabreeze-subtle",
+    "--semantic-color-stroke-static-attention-strong",
+    "--semantic-color-stroke-static-attention-subtle",
+    "--semantic-color-stroke-static-info-strong",
+    "--semantic-color-stroke-static-info-subtle",
+    "--semantic-color-stroke-static-negative-strong",
+    "--semantic-color-stroke-static-negative-subtle",
+    "--semantic-color-stroke-static-neutral-base",
+    "--semantic-color-stroke-static-neutral-bold",
+    "--semantic-color-stroke-static-neutral-faint",
+    "--semantic-color-stroke-static-neutral-mono",
+    "--semantic-color-stroke-static-neutral-strong",
+    "--semantic-color-stroke-static-positive-strong",
+    "--semantic-color-stroke-static-positive-subtle",
+    "--semantic-color-stroke-static-severe-strong",
+    "--semantic-color-stroke-static-severe-subtle",
+    "--semantic-layout-units-accessibility-touch-target-aa-height",
+    "--semantic-layout-units-accessibility-touch-target-aa-width",
+    "--semantic-layout-units-accessibility-touch-target-aaa-height",
+    "--semantic-layout-units-accessibility-touch-target-aaa-width",
+    "--semantic-layout-units-accessibility-touch-target-desktop-only-height",
+    "--semantic-layout-units-accessibility-touch-target-desktop-only-width",
+    "--semantic-layout-units-borderwidth-base",
+    "--semantic-layout-units-borderwidth-medium",
+    "--semantic-layout-units-borderwidth-thick",
+    "--semantic-layout-units-borderwidth-thin",
+    "--semantic-layout-units-borderwidth-xthick",
+    "--semantic-layout-units-borderwidth-xthin",
+    "--semantic-layout-units-borderwidth-xxthick",
+    "--semantic-layout-units-cornerradius-base",
+    "--semantic-layout-units-cornerradius-full",
+    "--semantic-layout-units-cornerradius-large",
+    "--semantic-layout-units-cornerradius-medium",
+    "--semantic-layout-units-cornerradius-small",
+    "--semantic-layout-units-cornerradius-xlarge",
+    "--semantic-layout-units-cornerradius-xsmall",
+    "--semantic-layout-units-gap-base",
+    "--semantic-layout-units-gap-medium",
+    "--semantic-layout-units-gap-relaxed",
+    "--semantic-layout-units-gap-tight",
+    "--semantic-layout-units-gap-wide",
+    "--semantic-layout-units-gap-xtight",
+    "--semantic-layout-units-gap-xxtight",
+    "--semantic-layout-units-gap-xxxtight",
+    "--semantic-layout-units-padding-base",
+    "--semantic-layout-units-padding-collosal",
+    "--semantic-layout-units-padding-ginormous",
+    "--semantic-layout-units-padding-medium",
+    "--semantic-layout-units-padding-relaxed",
+    "--semantic-layout-units-padding-tight",
+    "--semantic-layout-units-padding-wide",
+    "--semantic-layout-units-padding-xtight",
+    "--semantic-layout-units-padding-xwide",
+    "--semantic-layout-units-padding-xxtight",
+    "--semantic-layout-units-padding-xxwide",
+    "--semantic-layout-units-padding-xxxtight",
+    "--semantic-type-family-brand",
+    "--semantic-type-font-size-4xl",
+    "--semantic-type-font-size-5xl",
+    "--semantic-type-font-size-6xl",
+    "--semantic-type-font-size-l",
+    "--semantic-type-font-size-m",
+    "--semantic-type-font-size-r",
+    "--semantic-type-font-size-s",
+    "--semantic-type-font-size-xl",
+    "--semantic-type-font-size-xs",
+    "--semantic-type-font-size-xxl",
+    "--semantic-type-font-size-xxs",
+    "--semantic-type-font-size-xxxl",
+    "--semantic-type-font-size-xxxs",
+    "--semantic-type-letter-spacing-compact",
+    "--semantic-type-letter-spacing-extraspacious",
+    "--semantic-type-letter-spacing-spacious",
+    "--semantic-type-letter-spacing-wide",
+    "--semantic-type-line-height-4xl-single",
+    "--semantic-type-line-height-5xl-single",
+    "--semantic-type-line-height-6xl-single",
+    "--semantic-type-line-height-l-single",
+    "--semantic-type-line-height-m-relaxed",
+    "--semantic-type-line-height-m-single",
+    "--semantic-type-line-height-r-single",
+    "--semantic-type-line-height-s-single",
+    "--semantic-type-line-height-s-tight",
+    "--semantic-type-line-height-xl-single",
+    "--semantic-type-line-height-xs-single",
+    "--semantic-type-line-height-xs-tight",
+    "--semantic-type-line-height-xxl-single",
+    "--semantic-type-line-height-xxs-single",
+    "--semantic-type-line-height-xxs-tight",
+    "--semantic-type-line-height-xxxl-single",
+    "--semantic-type-line-height-xxxs-single",
+    "--semantic-type-line-height-xxxs-tight",
+    "--semantic-type-weight-bold",
+    "--semantic-type-weight-light",
+    "--semantic-type-weight-medium",
+    "--semantic-type-weight-regular",
+    "--semantic-type-weight-semibold"
+  ]
+}