@helloimjolopez-pathway/pathway-tokens 7.0.1 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +4 -4
  2. package/components/sidenav/sidenav.jsx +20 -9
  3. package/dist/README.md +8 -8
  4. package/dist/contract.json +22 -46
  5. package/dist/layout-contextual.css +10 -4
  6. package/dist/layout-responsive.css +16 -15
  7. package/dist/primitives.css +2 -1
  8. package/dist/themes/light.css +17 -42
  9. package/dist/themes/midnight.css +16 -41
  10. package/dist/tokens.js +426 -996
  11. package/dist/tokens.json +246 -436
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -3,11 +3,11 @@
3
3
  Design system for Ministry Brands Amplify. Tokens + components + specifications, all versioned in one place, with Storybook deployed from `main`.
4
4
 
5
5
  > **Looking for the tokens?** → **[TOKENS.md](TOKENS.md)** — where the CSS lives, which
6
- > of the 267 names you may use, and what to link in what order.
6
+ > of the 284 names you may use, and what to link in what order.
7
7
 
8
8
  ## Using the tokens
9
9
 
10
- **The colour contract is 169 names. Your full working vocabulary is 267.**
10
+ **The colour contract is 186 names. Your full working vocabulary is 284.**
11
11
 
12
12
  That is the number worth knowing, because adding up every declaration in the token
13
13
  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.
16
16
 
17
17
  | | Count | Name these? |
18
18
  |---|---|---|
19
- | Colour (`themes/light.css`, `themes/midnight.css` — same names) | **169** | Yes |
19
+ | Colour (`themes/light.css`, `themes/midnight.css` — same names) | **186** | Yes |
20
20
  | Type scale (`type.css`) | 41 | Yes |
21
21
  | Spacing, radii, borders (`layout.css`) | 40 | Yes |
22
22
  | Motion (`motion.css`) | 17 | Yes |
23
23
  | Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
24
24
  | Breakpoints (`breakpoints.css`) | 5 | Yes |
25
- | **Working vocabulary** | **267** | |
25
+ | **Working vocabulary** | **284** | |
26
26
  | Raw ramps (`primitives.css`) | 350 | **No** — but you must load it |
27
27
  | Component metrics (`layout-contextual.css`) | 26 | This repo's components |
28
28
 
package/components/sidenav/sidenav.jsx CHANGED
@@ -48,6 +48,11 @@ import ReactDOM from "react-dom";
48
48
  */
49
49
  const c = (name) => `var(--semantic-color-${name})`;
50
50
  const u = (name, fallback) => `var(--semantic-layout-units-${name}, ${fallback}px)`;
51
+ // Component metrics live in the CONTEXTUAL collection, not the semantic one, so
52
+ // they need their own prefix. SideNav's two widths moved there on 2026-09-16:
53
+ // they were numeric literals with a "no token in Figma" comment, which was true
54
+ // until the tokens were created.
55
+ const x = (name, fallback) => `var(--contextual-layout-units-${name}, ${fallback}px)`;
51
56
 
52
57
  // Negate a length that may be either a number or a var() reference. Used for the
53
58
  // scroll-region edge bleed, where `-value` on a string would give NaN.
@@ -64,7 +69,10 @@ export const T = {
64
69
  navTrail: c("fill-action-selection-trail"),
65
70
  infoSubtle: c("stroke-static-neutral-base"), // container right border
66
71
  },
67
- surface: { navLight: c("fill-surface-sheet") },
72
+ surface: {
73
+ navLight: c("fill-surface-sheet"), // the nav container itself: white
74
+ navElevated: c("fill-surface-elevated"), // PopoverMenu, per Figma's "Popover Menu"
75
+ },
68
76
  // Label, icon and chevron all resolve to the SAME token per state. A nav item
69
77
  // is one interactive surface, so its foreground must not split across two
70
78
  // ramps that can drift apart.
@@ -100,8 +108,11 @@ export const L = {
100
108
  navPadH: u("padding-base", 16),
101
109
  navColPadH: u("padding-medium", 12),
102
110
  navPadTop: u("padding-tight", 8),
103
- navW: 240, // no token in Figma — expanded sidebar width
104
- navWcol: 72, // no token in Figma — collapsed rail width
111
+ // Read from SideNav.Container in Figma on 2026-09-16: every expanded variant
112
+ // is 250 wide (Base, Stroked, Mobile.Base, Mobile.Stroked) and every
113
+ // collapsed one is 72. Was 240, which no longer matched the component.
114
+ navW: x("sidenav-width-expanded", 250),
115
+ navWcol: x("sidenav-width-collapsed", 72),
105
116
  menuGap: u("gap-xtight", 6),
106
117
  menuPadT: u("padding-tight", 8),
107
118
  menuPadB: u("padding-xxwide", 56),
@@ -294,13 +305,13 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
294
305
  style={{ position: "fixed",
295
306
  left: anchorRect.right + 8,
296
307
  top: anchorRect.top + anchorRect.height / 2,
297
- zIndex: 1000, backgroundColor: "#fff",
298
- border: "0.5px solid #f6f6f6", borderRadius: 8,
308
+ zIndex: 1000, backgroundColor: T.surface.navLight,
309
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
299
310
  boxShadow: "2px 2px 8px 0px rgba(0,0,0,0.03)",
300
311
  padding: "6px 8px", whiteSpace: "nowrap", pointerEvents: "auto",
301
312
  animation: "popoverInCentered var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
302
313
  <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
303
- fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: "#202020" }}>
314
+ fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: T.text.secondary }}>
304
315
  {label}
305
316
  </span>
306
317
  </div>,
@@ -333,13 +344,13 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
333
344
  return ReactDOM.createPortal(
334
345
  <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
335
346
  style={{ position: "fixed", left: anchorRect.right + 8, top: anchorRect.top,
336
- zIndex: 1000, backgroundColor: "#fff",
337
- border: "0.5px solid #ededed", borderRadius: 8,
347
+ zIndex: 1000, backgroundColor: T.surface.navElevated,
348
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
338
349
  boxShadow: "2px 2px 8px 4px rgba(0,0,0,0.03)",
339
350
  padding: 6, minWidth: 200, pointerEvents: "auto",
340
351
  animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
341
352
  {/* Section label — Figma component 40006794-5977 */}
342
- <div style={{ borderBottom: "0.5px solid #ededed" }}>
353
+ <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
343
354
  <SectionLabel label={item.label} />
344
355
  </div>
345
356
  {item.children.map(child =>
package/dist/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Pathway design tokens
2
2
 
3
- **The colour contract is 169 names.** Your full working vocabulary is
4
- **278**. If you add up every declaration in this folder you get
5
- 827 — that number is not the contract, and the table below says why.
3
+ **The colour contract is 144 names.** Your full working vocabulary is
4
+ **254**. If you add up every declaration in this folder you get
5
+ 785 — that number is not the contract, and the table below says why.
6
6
 
7
7
  ## Link these, in this order
8
8
 
@@ -25,14 +25,14 @@ error**.
25
25
 
26
26
  | File | Names | Safe to name? | Must load? | What it is |
27
27
  |---|---|---|---|---|
28
- | `primitives.css` | 352 | **no** | yes | Raw colour ramps. Load it; do not name it. |
29
- | `themes/light.css` | 169 | yes | yes | Colour contract, Light Mode. |
30
- | `themes/midnight.css` | 169 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
28
+ | `primitives.css` | 353 | **no** | yes | Raw colour ramps. Load it; do not name it. |
29
+ | `themes/light.css` | 144 | yes | yes | Colour contract, Light Mode. |
30
+ | `themes/midnight.css` | 144 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
31
31
  | `type.css` | 41 | yes | yes | Type scale. Compose from these. |
32
32
  | `layout.css` | 40 | yes | yes | Spacing, radii, border widths. |
33
- | `layout-contextual.css` | 28 | **no** | **no** | Per-component metrics. This repo's components use these. |
33
+ | `layout-contextual.css` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
34
34
  | `motion.css` | 17 | yes | yes | Durations and easings. |
35
- | `layout-responsive.css` | 6 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
35
+ | `layout-responsive.css` | 7 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
36
36
  | `breakpoints.css` | 5 | yes | yes | Breakpoint values. |
37
37
 
38
38
  Each file repeats this in its own header.
package/dist/contract.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "$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.",
3
- "version": "7.0.1",
3
+ "version": "8.0.0",
4
4
  "generated": "2026-09-16",
5
5
  "counts": {
6
- "contract": 278,
7
- "infrastructure": 380,
8
- "declarationsAcrossAllFiles": 827
6
+ "contract": 254,
7
+ "infrastructure": 387,
8
+ "declarationsAcrossAllFiles": 785
9
9
  },
10
10
  "loadOrder": [
11
11
  "primitives.css",
@@ -21,19 +21,19 @@
21
21
  "primitives.css": {
22
22
  "contract": false,
23
23
  "mustLoad": true,
24
- "count": 352,
24
+ "count": 353,
25
25
  "role": "Raw colour ramps. Load it; do not name it."
26
26
  },
27
27
  "themes/light.css": {
28
28
  "contract": true,
29
29
  "mustLoad": true,
30
- "count": 169,
30
+ "count": 144,
31
31
  "role": "Colour contract, Light Mode."
32
32
  },
33
33
  "themes/midnight.css": {
34
34
  "contract": true,
35
35
  "mustLoad": true,
36
- "count": 169,
36
+ "count": 144,
37
37
  "role": "Colour contract, Midnight Mode. Same names as light."
38
38
  },
39
39
  "type.css": {
@@ -51,7 +51,7 @@
51
51
  "layout-contextual.css": {
52
52
  "contract": false,
53
53
  "mustLoad": false,
54
- "count": 28,
54
+ "count": 34,
55
55
  "role": "Per-component metrics. This repo's components use these."
56
56
  },
57
57
  "motion.css": {
@@ -63,7 +63,7 @@
63
63
  "layout-responsive.css": {
64
64
  "contract": true,
65
65
  "mustLoad": true,
66
- "count": 6,
66
+ "count": 7,
67
67
  "role": "Sheet and TopNav padding. The only layout tokens with media queries."
68
68
  },
69
69
  "breakpoints.css": {
@@ -96,6 +96,13 @@
96
96
  "--motion-easing-linear",
97
97
  "--motion-easing-spring",
98
98
  "--motion-easing-standard",
99
+ "--responsive-layout-sheet-cornerradius-top",
100
+ "--responsive-layout-sheet-padding-horizontal",
101
+ "--responsive-layout-sheet-padding-top",
102
+ "--responsive-layout-topnav-gap-horizontal",
103
+ "--responsive-layout-topnav-height",
104
+ "--responsive-layout-topnav-padding-horizontal",
105
+ "--responsive-layout-topnav-padding-vertical",
99
106
  "--semantic-color-fill-action-disabled",
100
107
  "--semantic-color-fill-action-primary-strong-hover",
101
108
  "--semantic-color-fill-action-primary-strong-pressed",
@@ -109,12 +116,6 @@
109
116
  "--semantic-color-fill-action-selection-hover",
110
117
  "--semantic-color-fill-action-selection-selected",
111
118
  "--semantic-color-fill-action-selection-trail",
112
- "--semantic-color-fill-action-status-attention-hover",
113
- "--semantic-color-fill-action-status-attention-pressed",
114
- "--semantic-color-fill-action-status-attention-rest",
115
- "--semantic-color-fill-action-status-info-hover",
116
- "--semantic-color-fill-action-status-info-pressed",
117
- "--semantic-color-fill-action-status-info-rest",
118
119
  "--semantic-color-fill-action-status-negative-strong-hover",
119
120
  "--semantic-color-fill-action-status-negative-strong-pressed",
120
121
  "--semantic-color-fill-action-status-negative-strong-rest",
@@ -127,9 +128,6 @@
127
128
  "--semantic-color-fill-action-status-positive-subtle-hover",
128
129
  "--semantic-color-fill-action-status-positive-subtle-pressed",
129
130
  "--semantic-color-fill-action-status-positive-subtle-rest",
130
- "--semantic-color-fill-action-status-severe-hover",
131
- "--semantic-color-fill-action-status-severe-pressed",
132
- "--semantic-color-fill-action-status-severe-rest",
133
131
  "--semantic-color-fill-static-accent-jade-strong",
134
132
  "--semantic-color-fill-static-accent-jade-subtle",
135
133
  "--semantic-color-fill-static-accent-lagoon-strong",
@@ -151,6 +149,7 @@
151
149
  "--semantic-color-fill-static-negative-strong",
152
150
  "--semantic-color-fill-static-negative-subtle",
153
151
  "--semantic-color-fill-static-neutral-base",
152
+ "--semantic-color-fill-static-neutral-bold",
154
153
  "--semantic-color-fill-static-neutral-faint",
155
154
  "--semantic-color-fill-static-neutral-mono",
156
155
  "--semantic-color-fill-static-neutral-strong",
@@ -163,30 +162,21 @@
163
162
  "--semantic-color-fill-surface-elevated",
164
163
  "--semantic-color-fill-surface-sheet",
165
164
  "--semantic-color-foreground-action-disabled",
165
+ "--semantic-color-foreground-action-primary-on-strong",
166
166
  "--semantic-color-foreground-action-primary-on-subtle-hover",
167
167
  "--semantic-color-foreground-action-primary-on-subtle-pressed",
168
168
  "--semantic-color-foreground-action-primary-on-subtle-rest",
169
169
  "--semantic-color-foreground-action-secondary-hover",
170
170
  "--semantic-color-foreground-action-secondary-pressed",
171
171
  "--semantic-color-foreground-action-secondary-rest",
172
- "--semantic-color-foreground-action-secondary-subtle-hover",
173
- "--semantic-color-foreground-action-secondary-subtle-pressed",
174
- "--semantic-color-foreground-action-secondary-subtle-rest",
175
- "--semantic-color-foreground-action-status-attention-on-subtle-hover",
176
- "--semantic-color-foreground-action-status-attention-on-subtle-pressed",
177
- "--semantic-color-foreground-action-status-attention-on-subtle-rest",
178
- "--semantic-color-foreground-action-status-info-on-subtle-hover",
179
- "--semantic-color-foreground-action-status-info-on-subtle-pressed",
180
- "--semantic-color-foreground-action-status-info-on-subtle-rest",
172
+ "--semantic-color-foreground-action-status-negative-on-strong",
181
173
  "--semantic-color-foreground-action-status-negative-on-subtle-hover",
182
174
  "--semantic-color-foreground-action-status-negative-on-subtle-pressed",
183
175
  "--semantic-color-foreground-action-status-negative-on-subtle-rest",
176
+ "--semantic-color-foreground-action-status-positive-on-strong",
184
177
  "--semantic-color-foreground-action-status-positive-on-subtle-hover",
185
178
  "--semantic-color-foreground-action-status-positive-on-subtle-pressed",
186
179
  "--semantic-color-foreground-action-status-positive-on-subtle-rest",
187
- "--semantic-color-foreground-action-status-severe-on-subtle-hover",
188
- "--semantic-color-foreground-action-status-severe-on-subtle-pressed",
189
- "--semantic-color-foreground-action-status-severe-on-subtle-rest",
190
180
  "--semantic-color-foreground-static-accent-jade-on-strong",
191
181
  "--semantic-color-foreground-static-accent-jade-on-subtle",
192
182
  "--semantic-color-foreground-static-accent-lagoon-on-strong",
@@ -227,21 +217,12 @@
227
217
  "--semantic-color-stroke-action-secondary-hover",
228
218
  "--semantic-color-stroke-action-secondary-pressed",
229
219
  "--semantic-color-stroke-action-secondary-rest",
230
- "--semantic-color-stroke-action-status-attention-hover",
231
- "--semantic-color-stroke-action-status-attention-pressed",
232
- "--semantic-color-stroke-action-status-attention-rest",
233
- "--semantic-color-stroke-action-status-info-hover",
234
- "--semantic-color-stroke-action-status-info-pressed",
235
- "--semantic-color-stroke-action-status-info-rest",
236
220
  "--semantic-color-stroke-action-status-negative-hover",
237
221
  "--semantic-color-stroke-action-status-negative-pressed",
238
222
  "--semantic-color-stroke-action-status-negative-rest",
239
223
  "--semantic-color-stroke-action-status-positive-hover",
240
224
  "--semantic-color-stroke-action-status-positive-pressed",
241
225
  "--semantic-color-stroke-action-status-positive-rest",
242
- "--semantic-color-stroke-action-status-severe-hover",
243
- "--semantic-color-stroke-action-status-severe-pressed",
244
- "--semantic-color-stroke-action-status-severe-rest",
245
226
  "--semantic-color-stroke-focusring-base",
246
227
  "--semantic-color-stroke-static-accent-jade-strong",
247
228
  "--semantic-color-stroke-static-accent-jade-subtle",
@@ -260,6 +241,7 @@
260
241
  "--semantic-color-stroke-static-neutral-base",
261
242
  "--semantic-color-stroke-static-neutral-bold",
262
243
  "--semantic-color-stroke-static-neutral-faint",
244
+ "--semantic-color-stroke-static-neutral-mono",
263
245
  "--semantic-color-stroke-static-neutral-strong",
264
246
  "--semantic-color-stroke-static-positive-strong",
265
247
  "--semantic-color-stroke-static-positive-subtle",
@@ -345,12 +327,6 @@
345
327
  "--semantic-type-weight-light",
346
328
  "--semantic-type-weight-medium",
347
329
  "--semantic-type-weight-regular",
348
- "--semantic-type-weight-semibold",
349
- "--shell-layout-sheet-padding-bottom",
350
- "--shell-layout-sheet-padding-horizontal",
351
- "--shell-layout-sheet-padding-top",
352
- "--shell-layout-topnav-height",
353
- "--shell-layout-topnav-padding-horizontal",
354
- "--shell-layout-topnav-padding-vertical"
330
+ "--semantic-type-weight-semibold"
355
331
  ]
356
332
  }
package/dist/layout-contextual.css CHANGED
@@ -9,13 +9,13 @@
9
9
  prefer layout.css, which is the general spacing contract. These exist so a
10
10
  component's geometry can be tuned without moving the whole scale.
11
11
 
12
- Declares 28 custom properties.
12
+ Declares 34 custom properties.
13
13
  Generated — do not edit. Run `npm run build-tokens`.
14
14
  ==========================================================================
15
15
  */
16
16
  :root {
17
- --contextual-layout-units-button-border-width-hover: 1px;
18
- --contextual-layout-units-button-border-width-rest: 0.75px;
17
+ --contextual-layout-units-button-border-width-rest: 1px;
18
+ --contextual-layout-units-button-border-width-selected: 1.5px;
19
19
  --contextual-layout-units-button-corner-radius-radius: 8px;
20
20
  --contextual-layout-units-button-gap-horizontal: 8px;
21
21
  --contextual-layout-units-button-padding-large-horizontal: 14px;
@@ -35,11 +35,17 @@
35
35
  --contextual-layout-units-card-padding-medium-vertical: 16px;
36
36
  --contextual-layout-units-card-padding-small-horizontal: 14px;
37
37
  --contextual-layout-units-card-padding-small-vertical: 14px;
38
- --contextual-layout-units-field-borderwidth: 1px;
38
+ --contextual-layout-units-field-borderwidth: 0.75px;
39
39
  --contextual-layout-units-focus-ring-offset: 2px;
40
40
  --contextual-layout-units-focus-ring-width: 2px;
41
41
  --contextual-layout-units-navitem-corner-radius-radius: 8px;
42
42
  --contextual-layout-units-navitem-padding-horizontal: 14px;
43
43
  --contextual-layout-units-navitem-padding-vertical: 12px;
44
44
  --contextual-layout-units-selector-borderwidth: 1px;
45
+ --contextual-layout-units-sidenav-gap-vertical: 6px;
46
+ --contextual-layout-units-sidenav-padding-horizontal-collapsed: 12px;
47
+ --contextual-layout-units-sidenav-padding-horizontal-expanded: 16px;
48
+ --contextual-layout-units-sidenav-padding-vertical: 8px;
49
+ --contextual-layout-units-sidenav-width-collapsed: 72px;
50
+ --contextual-layout-units-sidenav-width-expanded: 250px;
45
51
  }
package/dist/layout-responsive.css CHANGED
@@ -14,33 +14,34 @@
14
14
  A developer cannot derive these from a responsive grid. The grid governs
15
15
  columns; it says nothing about the chrome's padding.
16
16
 
17
- Declares 14 custom properties.
17
+ Declares 15 custom properties.
18
18
  Generated — do not edit. Run `npm run build-tokens`.
19
19
  ==========================================================================
20
20
  */
21
21
  :root {
22
- --shell-layout-sheet-padding-bottom: 64px;
23
- --shell-layout-sheet-padding-horizontal: 36px;
24
- --shell-layout-sheet-padding-top: 16px;
25
- --shell-layout-topnav-height: 56px;
26
- --shell-layout-topnav-padding-horizontal: 16px;
27
- --shell-layout-topnav-padding-vertical: 6px;
22
+ --responsive-layout-sheet-cornerradius-top: 16px;
23
+ --responsive-layout-sheet-padding-horizontal: 36px;
24
+ --responsive-layout-sheet-padding-top: 16px;
25
+ --responsive-layout-topnav-gap-horizontal: 8px;
26
+ --responsive-layout-topnav-height: 56px;
27
+ --responsive-layout-topnav-padding-horizontal: 16px;
28
+ --responsive-layout-topnav-padding-vertical: 6px;
28
29
  }
29
30
 
30
31
  @media (max-width: 1023px) {
31
32
  :root {
32
- --shell-layout-sheet-padding-bottom: 48px;
33
- --shell-layout-sheet-padding-horizontal: 24px;
34
- --shell-layout-sheet-padding-top: 14px;
35
- --shell-layout-topnav-padding-horizontal: 12px;
33
+ --responsive-layout-sheet-cornerradius-top: 12px;
34
+ --responsive-layout-sheet-padding-horizontal: 24px;
35
+ --responsive-layout-sheet-padding-top: 14px;
36
+ --responsive-layout-topnav-padding-horizontal: 12px;
36
37
  }
37
38
  }
38
39
 
39
40
  @media (max-width: 767px) {
40
41
  :root {
41
- --shell-layout-sheet-padding-bottom: 36px;
42
- --shell-layout-sheet-padding-horizontal: 16px;
43
- --shell-layout-sheet-padding-top: 12px;
44
- --shell-layout-topnav-padding-horizontal: 8px;
42
+ --responsive-layout-sheet-cornerradius-top: 8px;
43
+ --responsive-layout-sheet-padding-horizontal: 16px;
44
+ --responsive-layout-sheet-padding-top: 12px;
45
+ --responsive-layout-topnav-padding-horizontal: 8px;
45
46
  }
46
47
  }
package/dist/primitives.css CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  Nothing blocks you. It is an escape hatch with a stated cost.
20
20
 
21
- Declares 352 custom properties.
21
+ Declares 353 custom properties.
22
22
  Generated — do not edit. Run `npm run build-tokens`.
23
23
  ==========================================================================
24
24
  */
@@ -372,6 +372,7 @@
372
372
  --primitive-unit-unit-104: 104px;
373
373
  --primitive-unit-unit-112: 112px;
374
374
  --primitive-unit-unit-120: 120px;
375
+ --primitive-unit-unit-250: 250px;
375
376
  --primitive-unit-unit-0-point-5: 0.5px;
376
377
  --primitive-unit-unit-0-point-75: 0.75px;
377
378
  --primitive-unit-unit-1-point-5: 1.5px;
package/dist/themes/light.css CHANGED
@@ -12,13 +12,12 @@
12
12
  put a mode in a property name — that form came from tokens.css, retired
13
13
  2026-09-03, and resolves to nothing.
14
14
 
15
- Declares 169 custom properties.
15
+ Declares 144 custom properties.
16
16
  Generated — do not edit. Run `npm run build-tokens`.
17
17
  ==========================================================================
18
18
  */
19
19
  :root, [data-theme="light"] {
20
20
  --semantic-color-fill-surface-canvas: var(--primitive-color-cool-neutral-10);
21
- --semantic-color-fill-surface-sheet: var(--primitive-color-cool-neutral-0);
22
21
  --semantic-color-fill-surface-elevated: var(--primitive-color-warm-neutral-0);
23
22
  --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-36);
24
23
  --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-400);
@@ -33,21 +32,12 @@
33
32
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-24);
34
33
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-24);
35
34
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-500-8);
36
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-25);
37
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-50);
38
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-75);
39
- --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
40
- --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
41
- --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
42
35
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
43
36
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
44
37
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
45
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-25);
46
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-75);
47
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-100);
48
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-50);
49
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-75);
50
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-100);
38
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
39
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
40
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
51
41
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-350);
52
42
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-400);
53
43
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-450);
@@ -58,7 +48,8 @@
58
48
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-25);
59
49
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-50);
60
50
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-75);
61
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-150);
51
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-800);
52
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-150);
62
53
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-10);
63
54
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-25);
64
55
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-50);
@@ -83,6 +74,12 @@
83
74
  --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-200);
84
75
  --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
85
76
  --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-350);
77
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
78
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
79
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
80
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
81
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
82
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
86
83
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-800-36);
87
84
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
88
85
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
@@ -90,24 +87,6 @@
90
87
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
91
88
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-600);
92
89
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-800);
93
- --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-400);
94
- --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-450);
95
- --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-500);
96
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-700);
97
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-800);
98
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-900);
99
- --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
100
- --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
101
- --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
102
- --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-700);
103
- --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-800);
104
- --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-900);
105
- --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-700);
106
- --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-800);
107
- --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-900);
108
- --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
109
- --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
110
- --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
111
90
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
112
91
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-400);
113
92
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
@@ -150,20 +129,12 @@
150
129
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-500);
151
130
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-600);
152
131
  --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-700);
153
- --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-150);
154
- --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-200);
155
- --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-300);
156
- --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-250);
157
- --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
158
- --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-400);
159
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-75);
160
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-100);
161
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-200);
162
132
  --semantic-color-stroke-focusring-base: var(--primitive-color-brand-200);
163
133
  --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-50);
164
134
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-100);
165
135
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-200);
166
136
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-350);
137
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
167
138
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-200);
168
139
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-500);
169
140
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-100);
@@ -186,4 +157,8 @@
186
157
  --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
187
158
  --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
188
159
  --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
160
+ --semantic-color-fill-surface-sheet: var(--semantic-color-fill-static-neutral-mono);
161
+ --semantic-color-foreground-action-status-positive-on-strong: var(--semantic-color-fill-static-neutral-mono);
162
+ --semantic-color-foreground-action-status-negative-on-strong: var(--semantic-color-fill-static-neutral-mono);
163
+ --semantic-color-foreground-action-primary-on-strong: var(--semantic-color-fill-static-neutral-mono);
189
164
  }
package/dist/themes/midnight.css CHANGED
@@ -14,7 +14,7 @@
14
14
  still the lightest-touch step even though here it is a dark near-ground.
15
15
  White, XLight and Black are inversion anchors and keep their value.
16
16
 
17
- Declares 169 custom properties.
17
+ Declares 144 custom properties.
18
18
  Generated — do not edit. Run `npm run build-tokens`.
19
19
  ==========================================================================
20
20
  */
@@ -35,21 +35,12 @@
35
35
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
36
36
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
37
37
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
38
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-700);
39
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-600);
40
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-500);
41
- --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
42
- --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
43
- --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
44
38
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
45
39
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
46
40
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-600);
47
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-700);
48
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-500);
49
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-400);
50
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-800);
51
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-700);
52
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-600);
41
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
42
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
43
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
53
44
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
54
45
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
55
46
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
@@ -60,7 +51,8 @@
60
51
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-800);
61
52
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
62
53
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-600);
63
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-500);
54
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-100);
55
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-500);
64
56
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
65
57
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
66
58
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
@@ -85,31 +77,22 @@
85
77
  --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-150);
86
78
  --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
87
79
  --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
80
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-900);
81
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
82
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
83
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
84
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
85
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
86
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
87
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-900);
88
88
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
89
89
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
90
90
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
91
91
  --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
92
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-900);
92
93
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
93
94
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
94
95
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
95
- --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-100);
96
- --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-75);
97
- --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-50);
98
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
99
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
100
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
101
- --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
102
- --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
103
- --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
104
- --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
105
- --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
106
- --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-150);
107
- --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
108
- --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
109
- --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-150);
110
- --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
111
- --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
112
- --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
113
96
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
114
97
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
115
98
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
@@ -152,20 +135,12 @@
152
135
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-400);
153
136
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-350);
154
137
  --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-300);
155
- --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-350);
156
- --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-300);
157
- --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-200);
158
- --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-350);
159
- --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
160
- --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-250);
161
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-700);
162
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
163
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-500);
164
138
  --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
165
139
  --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-800);
166
140
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
167
141
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
168
142
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
143
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
169
144
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
170
145
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
171
146
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);