@helloimjolopez-pathway/pathway-tokens 7.0.2 → 8.0.1

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 (10) hide show
  1. package/README.md +1 -1
  2. package/components/sidenav/sidenav.jsx +11 -5
  3. package/dist/README.md +6 -6
  4. package/dist/contract.json +8 -51
  5. package/dist/layout-contextual.css +3 -4
  6. package/dist/themes/light.css +13 -56
  7. package/dist/themes/midnight.css +12 -55
  8. package/dist/tokens.js +186 -1363
  9. package/dist/tokens.json +89 -513
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -83,7 +83,7 @@ as too granular to adopt. Retired 2026-09-03 and not coming back.
83
83
 
84
84
  ```css
85
85
  .card {
86
- background: var(--semantic-color-fill-surface-sheet);
86
+ background: var(--semantic-color-fill-static-neutral-mono);
87
87
  color: var(--semantic-color-foreground-static-neutral-strong);
88
88
  border: var(--semantic-layout-units-borderwidth-base) solid
89
89
  var(--semantic-color-stroke-static-neutral-base);
package/components/sidenav/sidenav.jsx CHANGED
@@ -70,7 +70,7 @@ export const T = {
70
70
  infoSubtle: c("stroke-static-neutral-base"), // container right border
71
71
  },
72
72
  surface: {
73
- navLight: c("fill-surface-sheet"), // the nav container itself: white
73
+ navLight: c("fill-static-neutral-mono"), // the nav container itself: white
74
74
  navElevated: c("fill-surface-elevated"), // PopoverMenu, per Figma's "Popover Menu"
75
75
  },
76
76
  // Label, icon and chevron all resolve to the SAME token per state. A nav item
@@ -105,15 +105,21 @@ export const T = {
105
105
  * say so.
106
106
  */
107
107
  export const L = {
108
- navPadH: u("padding-base", 16),
109
- navColPadH: u("padding-medium", 12),
110
- navPadTop: u("padding-tight", 8),
108
+ // SideNav is chrome that does NOT change across breakpoints, so its own
109
+ // metrics live in Contextual: Layout & Units rather than Responsive: Layout.
110
+ // Values measured from SideNav.Container in Figma: expanded padding 16, the
111
+ // collapsed rail 12, vertical 8, item gap 6. These were on the generic
112
+ // semantic scale until 2026-09-17, which meant a change to Padding/Base
113
+ // would silently move the nav.
114
+ navPadH: x("sidenav-padding-horizontal-expanded", 16),
115
+ navColPadH: x("sidenav-padding-horizontal-collapsed", 12),
116
+ navPadTop: x("sidenav-padding-vertical", 8),
111
117
  // Read from SideNav.Container in Figma on 2026-09-16: every expanded variant
112
118
  // is 250 wide (Base, Stroked, Mobile.Base, Mobile.Stroked) and every
113
119
  // collapsed one is 72. Was 240, which no longer matched the component.
114
120
  navW: x("sidenav-width-expanded", 250),
115
121
  navWcol: x("sidenav-width-collapsed", 72),
116
- menuGap: u("gap-xtight", 6),
122
+ menuGap: x("sidenav-gap-vertical", 6),
117
123
  menuPadT: u("padding-tight", 8),
118
124
  menuPadB: u("padding-xxwide", 56),
119
125
  itemH: u("accessibility-touch-target-aa-height", 44),
package/dist/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Pathway design tokens
2
2
 
3
- **The colour contract is 186 names.** Your full working vocabulary is
4
- **296**. If you add up every declaration in this folder you get
5
- 869 — that number is not the contract, and the table below says why.
3
+ **The colour contract is 143 names.** Your full working vocabulary is
4
+ **253**. If you add up every declaration in this folder you get
5
+ 782 — that number is not the contract, and the table below says why.
6
6
 
7
7
  ## Link these, in this order
8
8
 
@@ -26,11 +26,11 @@ error**.
26
26
  | File | Names | Safe to name? | Must load? | What it is |
27
27
  |---|---|---|---|---|
28
28
  | `primitives.css` | 353 | **no** | yes | Raw colour ramps. Load it; do not name it. |
29
- | `themes/light.css` | 186 | yes | yes | Colour contract, Light Mode. |
30
- | `themes/midnight.css` | 186 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
29
+ | `themes/light.css` | 143 | yes | yes | Colour contract, Light Mode. |
30
+ | `themes/midnight.css` | 143 | 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` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
33
+ | `layout-contextual.css` | 33 | **no** | **no** | Per-component metrics. This repo's components use these. |
34
34
  | `motion.css` | 17 | yes | yes | Durations and easings. |
35
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. |
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.2",
4
- "generated": "2026-09-16",
3
+ "version": "8.0.1",
4
+ "generated": "2026-09-17",
5
5
  "counts": {
6
- "contract": 296,
7
- "infrastructure": 387,
8
- "declarationsAcrossAllFiles": 869
6
+ "contract": 253,
7
+ "infrastructure": 386,
8
+ "declarationsAcrossAllFiles": 782
9
9
  },
10
10
  "loadOrder": [
11
11
  "primitives.css",
@@ -27,13 +27,13 @@
27
27
  "themes/light.css": {
28
28
  "contract": true,
29
29
  "mustLoad": true,
30
- "count": 186,
30
+ "count": 143,
31
31
  "role": "Colour contract, Light Mode."
32
32
  },
33
33
  "themes/midnight.css": {
34
34
  "contract": true,
35
35
  "mustLoad": true,
36
- "count": 186,
36
+ "count": 143,
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": 34,
54
+ "count": 33,
55
55
  "role": "Per-component metrics. This repo's components use these."
56
56
  },
57
57
  "motion.css": {
@@ -116,18 +116,6 @@
116
116
  "--semantic-color-fill-action-selection-hover",
117
117
  "--semantic-color-fill-action-selection-selected",
118
118
  "--semantic-color-fill-action-selection-trail",
119
- "--semantic-color-fill-action-status-attention-strong-hover",
120
- "--semantic-color-fill-action-status-attention-strong-pressed",
121
- "--semantic-color-fill-action-status-attention-strong-rest",
122
- "--semantic-color-fill-action-status-attention-subtle-hover",
123
- "--semantic-color-fill-action-status-attention-subtle-pressed",
124
- "--semantic-color-fill-action-status-attention-subtle-rest",
125
- "--semantic-color-fill-action-status-info-strong-hover",
126
- "--semantic-color-fill-action-status-info-strong-pressed",
127
- "--semantic-color-fill-action-status-info-strong-rest",
128
- "--semantic-color-fill-action-status-info-subtle-hover",
129
- "--semantic-color-fill-action-status-info-subtle-pressed",
130
- "--semantic-color-fill-action-status-info-subtle-rest",
131
119
  "--semantic-color-fill-action-status-negative-strong-hover",
132
120
  "--semantic-color-fill-action-status-negative-strong-pressed",
133
121
  "--semantic-color-fill-action-status-negative-strong-rest",
@@ -140,12 +128,6 @@
140
128
  "--semantic-color-fill-action-status-positive-subtle-hover",
141
129
  "--semantic-color-fill-action-status-positive-subtle-pressed",
142
130
  "--semantic-color-fill-action-status-positive-subtle-rest",
143
- "--semantic-color-fill-action-status-severe-strong-hover",
144
- "--semantic-color-fill-action-status-severe-strong-pressed",
145
- "--semantic-color-fill-action-status-severe-strong-rest",
146
- "--semantic-color-fill-action-status-severe-subtle-hover",
147
- "--semantic-color-fill-action-status-severe-subtle-pressed",
148
- "--semantic-color-fill-action-status-severe-subtle-rest",
149
131
  "--semantic-color-fill-static-accent-jade-strong",
150
132
  "--semantic-color-fill-static-accent-jade-subtle",
151
133
  "--semantic-color-fill-static-accent-lagoon-strong",
@@ -178,7 +160,6 @@
178
160
  "--semantic-color-fill-static-severe-subtle",
179
161
  "--semantic-color-fill-surface-canvas",
180
162
  "--semantic-color-fill-surface-elevated",
181
- "--semantic-color-fill-surface-sheet",
182
163
  "--semantic-color-foreground-action-disabled",
183
164
  "--semantic-color-foreground-action-primary-on-strong",
184
165
  "--semantic-color-foreground-action-primary-on-subtle-hover",
@@ -187,17 +168,6 @@
187
168
  "--semantic-color-foreground-action-secondary-hover",
188
169
  "--semantic-color-foreground-action-secondary-pressed",
189
170
  "--semantic-color-foreground-action-secondary-rest",
190
- "--semantic-color-foreground-action-secondary-subtle-hover",
191
- "--semantic-color-foreground-action-secondary-subtle-pressed",
192
- "--semantic-color-foreground-action-secondary-subtle-rest",
193
- "--semantic-color-foreground-action-status-attention-on-strong",
194
- "--semantic-color-foreground-action-status-attention-on-subtle-hover",
195
- "--semantic-color-foreground-action-status-attention-on-subtle-pressed",
196
- "--semantic-color-foreground-action-status-attention-on-subtle-rest",
197
- "--semantic-color-foreground-action-status-info-on-strong",
198
- "--semantic-color-foreground-action-status-info-on-subtle-hover",
199
- "--semantic-color-foreground-action-status-info-on-subtle-pressed",
200
- "--semantic-color-foreground-action-status-info-on-subtle-rest",
201
171
  "--semantic-color-foreground-action-status-negative-on-strong",
202
172
  "--semantic-color-foreground-action-status-negative-on-subtle-hover",
203
173
  "--semantic-color-foreground-action-status-negative-on-subtle-pressed",
@@ -206,10 +176,6 @@
206
176
  "--semantic-color-foreground-action-status-positive-on-subtle-hover",
207
177
  "--semantic-color-foreground-action-status-positive-on-subtle-pressed",
208
178
  "--semantic-color-foreground-action-status-positive-on-subtle-rest",
209
- "--semantic-color-foreground-action-status-severe-on-strong",
210
- "--semantic-color-foreground-action-status-severe-on-subtle-hover",
211
- "--semantic-color-foreground-action-status-severe-on-subtle-pressed",
212
- "--semantic-color-foreground-action-status-severe-on-subtle-rest",
213
179
  "--semantic-color-foreground-static-accent-jade-on-strong",
214
180
  "--semantic-color-foreground-static-accent-jade-on-subtle",
215
181
  "--semantic-color-foreground-static-accent-lagoon-on-strong",
@@ -250,21 +216,12 @@
250
216
  "--semantic-color-stroke-action-secondary-hover",
251
217
  "--semantic-color-stroke-action-secondary-pressed",
252
218
  "--semantic-color-stroke-action-secondary-rest",
253
- "--semantic-color-stroke-action-status-attention-hover",
254
- "--semantic-color-stroke-action-status-attention-pressed",
255
- "--semantic-color-stroke-action-status-attention-rest",
256
- "--semantic-color-stroke-action-status-info-hover",
257
- "--semantic-color-stroke-action-status-info-pressed",
258
- "--semantic-color-stroke-action-status-info-rest",
259
219
  "--semantic-color-stroke-action-status-negative-hover",
260
220
  "--semantic-color-stroke-action-status-negative-pressed",
261
221
  "--semantic-color-stroke-action-status-negative-rest",
262
222
  "--semantic-color-stroke-action-status-positive-hover",
263
223
  "--semantic-color-stroke-action-status-positive-pressed",
264
224
  "--semantic-color-stroke-action-status-positive-rest",
265
- "--semantic-color-stroke-action-status-severe-hover",
266
- "--semantic-color-stroke-action-status-severe-pressed",
267
- "--semantic-color-stroke-action-status-severe-rest",
268
225
  "--semantic-color-stroke-focusring-base",
269
226
  "--semantic-color-stroke-static-accent-jade-strong",
270
227
  "--semantic-color-stroke-static-accent-jade-subtle",
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 34 custom properties.
12
+ Declares 33 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;
@@ -26,7 +26,6 @@
26
26
  --contextual-layout-units-button-padding-small-vertical: 6px;
27
27
  --contextual-layout-units-button-padding-xsmall-horizontal: 8px;
28
28
  --contextual-layout-units-button-padding-xsmall-vertical: 6px;
29
- --contextual-layout-units-button-radius: 8px;
30
29
  --contextual-layout-units-card-border-width-hover: 0.75px;
31
30
  --contextual-layout-units-card-border-width-rest: 0.5px;
32
31
  --contextual-layout-units-card-cornerradius: 12px;
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 186 custom properties.
15
+ Declares 143 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,30 +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-subtle-rest: var(--primitive-color-amethyst-25);
37
- --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-50);
38
- --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-75);
39
- --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-200);
40
- --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-300);
41
- --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-350);
42
- --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
43
- --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
44
- --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
45
35
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
46
36
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
47
37
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
48
- --semantic-color-fill-action-status-attention-subtle-rest: var(--primitive-color-saffron-25);
49
- --semantic-color-fill-action-status-attention-subtle-hover: var(--primitive-color-saffron-75);
50
- --semantic-color-fill-action-status-attention-subtle-pressed: var(--primitive-color-saffron-100);
51
- --semantic-color-fill-action-status-attention-strong-rest: var(--primitive-color-saffron-150);
52
- --semantic-color-fill-action-status-attention-strong-hover: var(--primitive-color-saffron-200);
53
- --semantic-color-fill-action-status-attention-strong-pressed: var(--primitive-color-saffron-300);
54
- --semantic-color-fill-action-status-severe-subtle-rest: var(--primitive-color-orange-50);
55
- --semantic-color-fill-action-status-severe-subtle-hover: var(--primitive-color-orange-75);
56
- --semantic-color-fill-action-status-severe-subtle-pressed: var(--primitive-color-orange-100);
57
- --semantic-color-fill-action-status-severe-strong-rest: var(--primitive-color-orange-250);
58
- --semantic-color-fill-action-status-severe-strong-hover: var(--primitive-color-orange-300);
59
- --semantic-color-fill-action-status-severe-strong-pressed: var(--primitive-color-orange-350);
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);
60
41
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-350);
61
42
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-400);
62
43
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-450);
@@ -93,37 +74,19 @@
93
74
  --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-200);
94
75
  --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
95
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);
96
83
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-800-36);
97
84
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
98
85
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
99
86
  --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-800);
100
- --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-0);
101
87
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
102
88
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-600);
103
89
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-800);
104
- --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-400);
105
- --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-450);
106
- --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-500);
107
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-700);
108
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-800);
109
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-900);
110
- --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-900);
111
- --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
112
- --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
113
- --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
114
- --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-0);
115
- --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-700);
116
- --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-800);
117
- --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-900);
118
- --semantic-color-foreground-action-status-attention-on-strong: var(--primitive-color-cool-neutral-900);
119
- --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-700);
120
- --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-800);
121
- --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-900);
122
- --semantic-color-foreground-action-status-severe-on-strong: var(--primitive-color-cool-neutral-900);
123
- --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
124
- --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
125
- --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
126
- --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
127
90
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
128
91
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-400);
129
92
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
@@ -166,15 +129,6 @@
166
129
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-500);
167
130
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-600);
168
131
  --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-700);
169
- --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-150);
170
- --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-200);
171
- --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-300);
172
- --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-250);
173
- --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
174
- --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-400);
175
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-75);
176
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-100);
177
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-200);
178
132
  --semantic-color-stroke-focusring-base: var(--primitive-color-brand-200);
179
133
  --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-50);
180
134
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-100);
@@ -203,4 +157,7 @@
203
157
  --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
204
158
  --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
205
159
  --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
160
+ --semantic-color-foreground-action-status-positive-on-strong: var(--semantic-color-fill-static-neutral-mono);
161
+ --semantic-color-foreground-action-status-negative-on-strong: var(--semantic-color-fill-static-neutral-mono);
162
+ --semantic-color-foreground-action-primary-on-strong: var(--semantic-color-fill-static-neutral-mono);
206
163
  }
package/dist/themes/midnight.css CHANGED
@@ -14,13 +14,12 @@
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 186 custom properties.
17
+ Declares 143 custom properties.
18
18
  Generated — do not edit. Run `npm run build-tokens`.
19
19
  ==========================================================================
20
20
  */
21
21
  [data-theme="midnight"], [data-theme="dark"] {
22
22
  --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
23
- --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
24
23
  --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
25
24
  --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
26
25
  --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
@@ -35,30 +34,12 @@
35
34
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
36
35
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
37
36
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
38
- --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-700);
39
- --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-600);
40
- --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-500);
41
- --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-200);
42
- --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-300);
43
- --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-350);
44
- --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
45
- --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
46
- --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
47
37
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
48
38
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
49
39
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-600);
50
- --semantic-color-fill-action-status-attention-subtle-rest: var(--primitive-color-saffron-700);
51
- --semantic-color-fill-action-status-attention-subtle-hover: var(--primitive-color-saffron-500);
52
- --semantic-color-fill-action-status-attention-subtle-pressed: var(--primitive-color-saffron-400);
53
- --semantic-color-fill-action-status-attention-strong-rest: var(--primitive-color-saffron-200);
54
- --semantic-color-fill-action-status-attention-strong-hover: var(--primitive-color-saffron-300);
55
- --semantic-color-fill-action-status-attention-strong-pressed: var(--primitive-color-saffron-350);
56
- --semantic-color-fill-action-status-severe-subtle-rest: var(--primitive-color-orange-800);
57
- --semantic-color-fill-action-status-severe-subtle-hover: var(--primitive-color-orange-700);
58
- --semantic-color-fill-action-status-severe-subtle-pressed: var(--primitive-color-orange-600);
59
- --semantic-color-fill-action-status-severe-strong-rest: var(--primitive-color-orange-200);
60
- --semantic-color-fill-action-status-severe-strong-hover: var(--primitive-color-orange-250);
61
- --semantic-color-fill-action-status-severe-strong-pressed: var(--primitive-color-orange-300);
40
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
41
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
42
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
62
43
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
63
44
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
64
45
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
@@ -95,6 +76,14 @@
95
76
  --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-150);
96
77
  --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
97
78
  --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
79
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-900);
80
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
81
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
82
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
83
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
84
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
85
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
86
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-900);
98
87
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
99
88
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
100
89
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
@@ -103,29 +92,6 @@
103
92
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
104
93
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
105
94
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
106
- --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-100);
107
- --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-75);
108
- --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-50);
109
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
110
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
111
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
112
- --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-900);
113
- --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
114
- --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
115
- --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
116
- --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-900);
117
- --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
118
- --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
119
- --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-150);
120
- --semantic-color-foreground-action-status-attention-on-strong: var(--primitive-color-cool-neutral-900);
121
- --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
122
- --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
123
- --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-150);
124
- --semantic-color-foreground-action-status-severe-on-strong: var(--primitive-color-cool-neutral-900);
125
- --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
126
- --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
127
- --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
128
- --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-900);
129
95
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
130
96
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
131
97
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
@@ -168,15 +134,6 @@
168
134
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-400);
169
135
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-350);
170
136
  --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-300);
171
- --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-350);
172
- --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-300);
173
- --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-200);
174
- --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-350);
175
- --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
176
- --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-250);
177
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-700);
178
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
179
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-500);
180
137
  --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
181
138
  --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-800);
182
139
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);