@helloimjolopez-pathway/pathway-tokens 7.0.0 → 7.0.2

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 (17) hide show
  1. package/README.md +4 -4
  2. package/components/scrollbar/scrollbar.jsx +19 -4
  3. package/components/sidenav/sidenav.jsx +20 -9
  4. package/dist/README.md +96 -0
  5. package/dist/breakpoints.css +10 -3
  6. package/dist/contract.json +374 -0
  7. package/dist/layout-contextual.css +22 -7
  8. package/dist/layout-responsive.css +35 -20
  9. package/dist/layout.css +18 -6
  10. package/dist/motion.css +17 -3
  11. package/dist/primitives.css +24 -3
  12. package/dist/themes/light.css +44 -13
  13. package/dist/themes/midnight.css +46 -13
  14. package/dist/tokens.js +688 -112
  15. package/dist/tokens.json +319 -97
  16. package/dist/type.css +23 -6
  17. package/package.json +2 -2
package/dist/layout-contextual.css CHANGED
@@ -1,9 +1,18 @@
1
- /**
2
- * contextual-layout-units — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — COMPONENT INTERNALS
4
+ ==========================================================================
5
+
6
+ Per-component metrics (Button, Card, NavItem, Page, focus ring).
7
+
8
+ This repo's own components use these. Product code generally should not —
9
+ prefer layout.css, which is the general spacing contract. These exist so a
10
+ component's geometry can be tuned without moving the whole scale.
11
+
12
+ Declares 34 custom properties.
13
+ Generated — do not edit. Run `npm run build-tokens`.
14
+ ==========================================================================
15
+ */
7
16
  :root {
8
17
  --contextual-layout-units-button-border-width-hover: 1px;
9
18
  --contextual-layout-units-button-border-width-rest: 0.75px;
@@ -26,11 +35,17 @@
26
35
  --contextual-layout-units-card-padding-medium-vertical: 16px;
27
36
  --contextual-layout-units-card-padding-small-horizontal: 14px;
28
37
  --contextual-layout-units-card-padding-small-vertical: 14px;
29
- --contextual-layout-units-field-borderwidth: 1px;
38
+ --contextual-layout-units-field-borderwidth: 0.75px;
30
39
  --contextual-layout-units-focus-ring-offset: 2px;
31
40
  --contextual-layout-units-focus-ring-width: 2px;
32
41
  --contextual-layout-units-navitem-corner-radius-radius: 8px;
33
42
  --contextual-layout-units-navitem-padding-horizontal: 14px;
34
43
  --contextual-layout-units-navitem-padding-vertical: 12px;
35
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;
36
51
  }
package/dist/layout-responsive.css CHANGED
@@ -1,32 +1,47 @@
1
- /**
2
- * shell-layout — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
5
+
6
+ The only layout tokens that change by breakpoint. Name these freely.
7
+
8
+ Sheet padding and TopNav padding/height really do tighten on smaller
9
+ screens, so they keep a Desktop/Tablet/Mobile axis and are emitted with
10
+ media queries. Everything else in layout.css and layout-contextual.css is
11
+ single-valued: of 69 layout tokens only these varied, so the other 66 lost
12
+ the mode axis on 2026-09-14 rather than carry the same number three times.
13
+
14
+ A developer cannot derive these from a responsive grid. The grid governs
15
+ columns; it says nothing about the chrome's padding.
16
+
17
+ Declares 15 custom properties.
18
+ Generated — do not edit. Run `npm run build-tokens`.
19
+ ==========================================================================
20
+ */
7
21
  :root {
8
- --shell-layout-sheet-padding-bottom: 64px;
9
- --shell-layout-sheet-padding-horizontal: 36px;
10
- --shell-layout-sheet-padding-top: 16px;
11
- --shell-layout-topnav-height: 56px;
12
- --shell-layout-topnav-padding-horizontal: 16px;
13
- --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;
14
29
  }
15
30
 
16
31
  @media (max-width: 1023px) {
17
32
  :root {
18
- --shell-layout-sheet-padding-bottom: 48px;
19
- --shell-layout-sheet-padding-horizontal: 24px;
20
- --shell-layout-sheet-padding-top: 14px;
21
- --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;
22
37
  }
23
38
  }
24
39
 
25
40
  @media (max-width: 767px) {
26
41
  :root {
27
- --shell-layout-sheet-padding-bottom: 36px;
28
- --shell-layout-sheet-padding-horizontal: 16px;
29
- --shell-layout-sheet-padding-top: 12px;
30
- --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;
31
46
  }
32
47
  }
package/dist/layout.css CHANGED
@@ -1,9 +1,21 @@
1
- /**
2
- * semantic-layout-units — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
5
+
6
+ Spacing, radii and border widths. Name these freely.
7
+
8
+ Values already carry their unit, so use them directly — do NOT wrap in
9
+ calc(... * 1px). That produces calc(4px * 1px), which is not a length, so
10
+ the browser silently drops the declaration.
11
+
12
+ Breakpoints are handled by media query inside this file rather than by
13
+ putting the breakpoint in the property name, so one name works responsively.
14
+
15
+ Declares 40 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
7
19
  :root {
8
20
  --semantic-layout-units-accessibility-touch-target-aa-height: 44px;
9
21
  --semantic-layout-units-accessibility-touch-target-aa-width: 44px;
package/dist/motion.css CHANGED
@@ -1,7 +1,21 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ Durations and easings. Name these freely.
7
+
8
+ These are NOT in the Figma Variables panel — the panel has zero motion
9
+ variables. Their source of truth is docs/design-system-spec.md §2, and
10
+ scripts/sync-motion-tokens.js generates this file from it.
11
+
12
+ Consequence worth knowing: anyone rebuilding tokens from a Figma export
13
+ alone gets no motion at all, and no warning. Consume the package.
14
+
15
+ Declares 17 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
5
19
  :root {
6
20
  --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
7
21
  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
package/dist/primitives.css CHANGED
@@ -1,7 +1,27 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — INFRASTRUCTURE
4
+ ==========================================================================
4
5
 
6
+ The raw colour ramps. NOT part of the token contract.
7
+
8
+ You must LOAD this file — every semantic token resolves through it, so
9
+ without it all colour resolves to nothing and the page renders unstyled
10
+ with no console error. But product code should not NAME these.
11
+
12
+ The reason is a consequence, not a rule: Primitive: Color has exactly ONE
13
+ mode, and themes/midnight.css declares zero primitives. So a primitive
14
+ holds one value forever. `var(--primitive-color-brand-400)` stays that
15
+ blue in Midnight Mode; `var(--semantic-color-fill-action-primary-strong-rest)`
16
+ flips. Reach for a primitive only when you specifically want a value that
17
+ does NOT respond to the theme.
18
+
19
+ Nothing blocks you. It is an escape hatch with a stated cost.
20
+
21
+ Declares 353 custom properties.
22
+ Generated — do not edit. Run `npm run build-tokens`.
23
+ ==========================================================================
24
+ */
5
25
  :root {
6
26
  --primitive-color-cool-neutral-0: #ffffff;
7
27
  --primitive-color-cool-neutral-10: #fafafa;
@@ -352,6 +372,7 @@
352
372
  --primitive-unit-unit-104: 104px;
353
373
  --primitive-unit-unit-112: 112px;
354
374
  --primitive-unit-unit-120: 120px;
375
+ --primitive-unit-unit-250: 250px;
355
376
  --primitive-unit-unit-0-point-5: 0.5px;
356
377
  --primitive-unit-unit-0-point-75: 0.75px;
357
378
  --primitive-unit-unit-1-point-5: 1.5px;
package/dist/themes/light.css CHANGED
@@ -1,7 +1,21 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ The colour contract, Light Mode. Name these freely.
7
+
8
+ Load primitives.css FIRST; every file below resolves through it.
9
+
10
+ themes/midnight.css declares the SAME names with inverted values, so a
11
+ component names a colour once and both modes resolve by selector. Never
12
+ put a mode in a property name — that form came from tokens.css, retired
13
+ 2026-09-03, and resolves to nothing.
14
+
15
+ Declares 186 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
5
19
  :root, [data-theme="light"] {
6
20
  --semantic-color-fill-surface-canvas: var(--primitive-color-cool-neutral-10);
7
21
  --semantic-color-fill-surface-sheet: var(--primitive-color-cool-neutral-0);
@@ -19,21 +33,30 @@
19
33
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-24);
20
34
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-24);
21
35
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-500-8);
22
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-25);
23
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-50);
24
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-75);
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);
25
42
  --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
26
43
  --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
27
44
  --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
28
45
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
29
46
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
30
47
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
31
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-25);
32
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-75);
33
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-100);
34
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-50);
35
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-75);
36
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-100);
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);
37
60
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-350);
38
61
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-400);
39
62
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-450);
@@ -44,7 +67,8 @@
44
67
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-25);
45
68
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-50);
46
69
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-75);
47
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-150);
70
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-800);
71
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-150);
48
72
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-10);
49
73
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-25);
50
74
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-50);
@@ -73,6 +97,7 @@
73
97
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
74
98
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
75
99
  --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);
76
101
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
77
102
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-600);
78
103
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-800);
@@ -82,18 +107,23 @@
82
107
  --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-700);
83
108
  --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-800);
84
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);
85
111
  --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
86
112
  --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
87
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);
88
115
  --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-700);
89
116
  --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-800);
90
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);
91
119
  --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-700);
92
120
  --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-800);
93
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);
94
123
  --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
95
124
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
96
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);
97
127
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
98
128
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-400);
99
129
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
@@ -150,6 +180,7 @@
150
180
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-100);
151
181
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-200);
152
182
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-350);
183
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
153
184
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-200);
154
185
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-500);
155
186
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-100);
package/dist/themes/midnight.css CHANGED
@@ -1,7 +1,23 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ The colour contract, Midnight Mode. Identical names to themes/light.css.
7
+
8
+ Pathway's dark mode is called Midnight Mode. Both selectors are emitted:
9
+ [data-theme="midnight"] is the Pathway name, [data-theme="dark"] is what
10
+ every framework and prefers-color-scheme uses, so a consumer does not have
11
+ to learn our vocabulary to switch themes.
12
+
13
+ On the graded ladder the VALUES invert while the NAMES hold: Faint is
14
+ still the lightest-touch step even though here it is a dark near-ground.
15
+ White, XLight and Black are inversion anchors and keep their value.
16
+
17
+ Declares 186 custom properties.
18
+ Generated — do not edit. Run `npm run build-tokens`.
19
+ ==========================================================================
20
+ */
5
21
  [data-theme="midnight"], [data-theme="dark"] {
6
22
  --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
7
23
  --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
@@ -19,21 +35,30 @@
19
35
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
20
36
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
21
37
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
22
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-700);
23
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-600);
24
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-500);
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);
25
44
  --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
26
45
  --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
27
46
  --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
28
47
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
29
48
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
30
49
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-600);
31
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-700);
32
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-500);
33
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-400);
34
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-800);
35
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-700);
36
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-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);
37
62
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
38
63
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
39
64
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
@@ -44,7 +69,8 @@
44
69
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-800);
45
70
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
46
71
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-600);
47
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-500);
72
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-100);
73
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-500);
48
74
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
49
75
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
50
76
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
@@ -73,6 +99,7 @@
73
99
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
74
100
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
75
101
  --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
102
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-900);
76
103
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
77
104
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
78
105
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
@@ -82,18 +109,23 @@
82
109
  --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
83
110
  --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
84
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);
85
113
  --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
86
114
  --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
87
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);
88
117
  --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
89
118
  --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
90
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);
91
121
  --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
92
122
  --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
93
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);
94
125
  --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
95
126
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
96
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);
97
129
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
98
130
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
99
131
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
@@ -150,6 +182,7 @@
150
182
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
151
183
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
152
184
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
185
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
153
186
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
154
187
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
155
188
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);