@helloimjolopez-pathway/pathway-tokens 6.0.0 → 7.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 (17) hide show
  1. package/README.md +69 -15
  2. package/components/scrollbar/scrollbar.jsx +19 -4
  3. package/components/sidenav/sidenav.jsx +85 -14
  4. package/dist/README.md +96 -0
  5. package/dist/breakpoints.css +11 -4
  6. package/dist/contract.json +356 -0
  7. package/dist/layout-contextual.css +30 -37
  8. package/dist/layout-responsive.css +46 -0
  9. package/dist/layout.css +19 -10
  10. package/dist/motion.css +17 -3
  11. package/dist/primitives.css +138 -116
  12. package/dist/themes/light.css +171 -314
  13. package/dist/themes/midnight.css +161 -302
  14. package/dist/tokens.js +4100 -9535
  15. package/dist/tokens.json +1737 -3723
  16. package/dist/type.css +23 -6
  17. package/package.json +13 -6
package/dist/themes/midnight.css CHANGED
@@ -1,332 +1,191 @@
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 169 custom properties.
18
+ Generated — do not edit. Run `npm run build-tokens`.
19
+ ==========================================================================
20
+ */
5
21
  [data-theme="midnight"], [data-theme="dark"] {
6
- --semantic-color-fill-action-primary-rest: var(--primitive-color-brand-250);
7
- --semantic-color-fill-action-primary-hover: var(--primitive-color-brand-200);
8
- --semantic-color-fill-action-primary-pressed: var(--primitive-color-brand-150);
9
- --semantic-color-fill-action-status-negative-rest: var(--primitive-color-red-200);
10
- --semantic-color-fill-action-status-negative-hover: var(--primitive-color-red-150);
11
- --semantic-color-fill-action-status-negative-pressed: var(--primitive-color-red-100);
12
- --semantic-color-fill-action-status-positive-dim-rest: var(--primitive-color-green-800);
13
- --semantic-color-fill-action-status-positive-dim-hover: var(--primitive-color-green-700);
14
- --semantic-color-fill-action-status-positive-dim-pressed: var(--primitive-color-green-600);
15
- --semantic-color-fill-action-status-negative-dim-rest: var(--primitive-color-red-800);
16
- --semantic-color-fill-action-status-negative-dim-hover: var(--primitive-color-red-700);
17
- --semantic-color-fill-action-status-negative-dim-pressed: var(--primitive-color-red-600);
18
- --semantic-color-fill-action-status-positive-rest: var(--primitive-color-green-350);
19
- --semantic-color-fill-action-status-positive-hover: var(--primitive-color-green-300);
20
- --semantic-color-fill-action-status-positive-pressed: var(--primitive-color-green-200);
21
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-brand-200);
22
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-brand-150);
23
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-brand-100);
24
- --semantic-color-fill-action-status-info-dim-rest: var(--primitive-color-brand-600);
25
- --semantic-color-fill-action-status-info-dim-hover: var(--primitive-color-brand-550);
26
- --semantic-color-fill-action-status-info-dim-pressed: var(--primitive-color-brand-500);
27
- --semantic-color-fill-action-status-warning-rest: var(--primitive-color-saffron-350);
28
- --semantic-color-fill-action-status-warning-hover: var(--primitive-color-saffron-300);
29
- --semantic-color-fill-action-status-warning-pressed: var(--primitive-color-saffron-200);
30
- --semantic-color-fill-action-status-warning-dim-rest: var(--primitive-color-saffron-700);
31
- --semantic-color-fill-action-status-warning-dim-hover: var(--primitive-color-saffron-500);
32
- --semantic-color-fill-action-status-warning-dim-pressed: var(--primitive-color-saffron-400);
33
- --semantic-color-fill-action-status-danger-rest: var(--primitive-color-orange-300);
34
- --semantic-color-fill-action-status-danger-hover: var(--primitive-color-orange-250);
35
- --semantic-color-fill-action-status-danger-pressed: var(--primitive-color-orange-200);
36
- --semantic-color-fill-action-status-danger-dim-rest: var(--primitive-color-orange-800);
37
- --semantic-color-fill-action-status-danger-dim-hover: var(--primitive-color-orange-700);
38
- --semantic-color-fill-action-status-danger-dim-pressed: var(--primitive-color-orange-600);
39
- --semantic-color-fill-action-primary-dim-rest: var(--primitive-color-brand-600);
40
- --semantic-color-fill-action-primary-dim-hover: var(--primitive-color-brand-75-8);
41
- --semantic-color-fill-action-primary-dim-pressed: var(--primitive-color-brand-600-50);
22
+ --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
23
+ --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
24
+ --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
25
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
26
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
27
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-200);
28
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-150);
29
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-600);
30
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-75-8);
31
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-600-50);
42
32
  --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-600);
43
33
  --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-550);
44
34
  --semantic-color-fill-action-secondary-pressed: var(--primitive-color-warm-neutral-500);
45
- --semantic-color-fill-action-accent-amethyst-rest: var(--primitive-color-amethyst-300);
46
- --semantic-color-fill-action-accent-amethyst-hover: var(--primitive-color-amethyst-200);
47
- --semantic-color-fill-action-accent-amethyst-pressed: var(--primitive-color-amethyst-150);
48
- --semantic-color-fill-action-accent-amethyst-dim-rest: var(--primitive-color-amethyst-700);
49
- --semantic-color-fill-action-accent-amethyst-dim-hover: var(--primitive-color-amethyst-600);
50
- --semantic-color-fill-action-accent-amethyst-dim-pressed: var(--primitive-color-amethyst-500);
51
- --semantic-color-fill-action-accent-jade-rest: var(--primitive-color-jade-300);
52
- --semantic-color-fill-action-accent-jade-hover: var(--primitive-color-jade-250);
53
- --semantic-color-fill-action-accent-jade-pressed: var(--primitive-color-jade-200);
54
- --semantic-color-fill-action-accent-jade-dim-rest: var(--primitive-color-jade-800);
55
- --semantic-color-fill-action-accent-jade-dim-hover: var(--primitive-color-jade-700);
56
- --semantic-color-fill-action-accent-jade-dim-pressed: var(--primitive-color-jade-600);
57
- --semantic-color-fill-action-accent-mauve-rest: var(--primitive-color-mauve-200);
58
- --semantic-color-fill-action-accent-mauve-hover: var(--primitive-color-mauve-150);
59
- --semantic-color-fill-action-accent-mauve-pressed: var(--primitive-color-mauve-100);
60
- --semantic-color-fill-action-accent-mauve-dim-rest: var(--primitive-color-mauve-900);
61
- --semantic-color-fill-action-accent-mauve-dim-hover: var(--primitive-color-mauve-800);
62
- --semantic-color-fill-action-accent-mauve-dim-pressed: var(--primitive-color-mauve-700);
63
- --semantic-color-fill-action-accent-seabreeze-rest: var(--primitive-color-seabreeze-400);
64
- --semantic-color-fill-action-accent-seabreeze-hover: var(--primitive-color-seabreeze-350);
65
- --semantic-color-fill-action-accent-seabreeze-pressed: var(--primitive-color-seabreeze-300);
66
- --semantic-color-fill-action-accent-seabreeze-dim-rest: var(--primitive-color-seabreeze-800);
67
- --semantic-color-fill-action-accent-seabreeze-dim-hover: var(--primitive-color-seabreeze-700);
68
- --semantic-color-fill-action-accent-seabreeze-dim-pressed: var(--primitive-color-seabreeze-600);
69
- --semantic-color-fill-action-accent-lagoon-rest: var(--primitive-color-lagoon-400);
70
- --semantic-color-fill-action-accent-lagoon-hover: var(--primitive-color-lagoon-350);
71
- --semantic-color-fill-action-accent-lagoon-pressed: var(--primitive-color-lagoon-300);
72
- --semantic-color-fill-action-accent-lagoon-dim-rest: var(--primitive-color-lagoon-900);
73
- --semantic-color-fill-action-accent-lagoon-dim-hover: var(--primitive-color-lagoon-800);
74
- --semantic-color-fill-action-accent-lagoon-dim-pressed: var(--primitive-color-lagoon-700);
75
- --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
76
- --semantic-color-fill-action-mono-rest: var(--primitive-color-cool-neutral-0);
77
35
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
78
36
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
79
37
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
80
- --semantic-color-fill-static-neutral-medium: var(--primitive-color-warm-neutral-700);
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
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
45
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
46
+ --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);
53
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
54
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
55
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
56
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-800);
57
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-700);
58
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-600);
59
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-warm-neutral-900);
81
60
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-800);
82
- --semantic-color-fill-static-neutral-white: var(--primitive-color-warm-neutral-900);
83
- --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-700);
84
- --semantic-color-fill-static-brand-medium: var(--primitive-color-brand-550);
85
- --semantic-color-fill-static-brand-contrast: var(--primitive-color-brand-450);
61
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
62
+ --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);
64
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
65
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
66
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
86
67
  --semantic-color-fill-static-brand-bold: var(--primitive-color-brand-400);
87
- --semantic-color-fill-static-brand-light: var(--primitive-color-brand-600);
88
- --semantic-color-fill-static-brand-black: var(--primitive-color-brand-25);
89
- --semantic-color-fill-static-status-negative-faint: var(--primitive-color-red-800);
90
- --semantic-color-fill-static-status-negative-subtle: var(--primitive-color-red-700);
91
- --semantic-color-fill-static-status-negative-medium: var(--primitive-color-red-600);
92
- --semantic-color-fill-static-status-negative-contrast: var(--primitive-color-red-400);
93
- --semantic-color-fill-static-status-negative-bold: var(--primitive-color-red-300);
94
- --semantic-color-fill-static-status-positive-faint: var(--primitive-color-green-800);
95
- --semantic-color-fill-static-status-positive-subtle: var(--primitive-color-green-700);
96
- --semantic-color-fill-static-status-positive-medium: var(--primitive-color-green-600);
97
- --semantic-color-fill-static-status-positive-contrast: var(--primitive-color-green-400);
98
- --semantic-color-fill-static-status-positive-bold: var(--primitive-color-green-300);
99
- --semantic-color-fill-static-status-warning-faint: var(--primitive-color-saffron-500);
100
- --semantic-color-fill-static-status-warning-subtle: var(--primitive-color-saffron-400);
101
- --semantic-color-fill-static-status-warning-contrast: var(--primitive-color-saffron-350);
102
- --semantic-color-fill-static-status-warning-bold: var(--primitive-color-saffron-300);
103
- --semantic-color-fill-static-status-danger-faint: var(--primitive-color-orange-800);
104
- --semantic-color-fill-static-status-danger-subtle: var(--primitive-color-orange-700);
105
- --semantic-color-fill-static-status-danger-medium: var(--primitive-color-orange-600);
106
- --semantic-color-fill-static-status-danger-contrast: var(--primitive-color-orange-400);
107
- --semantic-color-fill-static-status-danger-bold: var(--primitive-color-orange-300);
108
- --semantic-color-fill-static-accent-amethyst-faint: var(--primitive-color-amethyst-700);
109
- --semantic-color-fill-static-accent-amethyst-subtle: var(--primitive-color-amethyst-600);
110
- --semantic-color-fill-static-accent-amethyst-bold: var(--primitive-color-amethyst-200);
111
- --semantic-color-fill-static-accent-amethyst-medium: var(--primitive-color-amethyst-400);
112
- --semantic-color-fill-static-accent-amethyst-contrast: var(--primitive-color-amethyst-350);
113
- --semantic-color-fill-static-accent-jade-faint: var(--primitive-color-jade-800);
114
- --semantic-color-fill-static-accent-jade-medium: var(--primitive-color-jade-600);
115
- --semantic-color-fill-static-accent-jade-contrast: var(--primitive-color-jade-500);
116
- --semantic-color-fill-static-accent-jade-bold: var(--primitive-color-jade-400);
117
- --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-700);
118
- --semantic-color-fill-static-accent-seabreeze-faint: var(--primitive-color-seabreeze-800);
68
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-700);
69
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-800);
70
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-600);
71
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
72
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-700);
73
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-300);
74
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-600);
75
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-200);
76
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-600);
77
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
78
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-700);
79
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
80
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-600);
81
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-200);
119
82
  --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-700);
120
- --semantic-color-fill-static-accent-seabreeze-medium: var(--primitive-color-seabreeze-600);
121
- --semantic-color-fill-static-accent-seabreeze-contrast: var(--primitive-color-seabreeze-250);
122
- --semantic-color-fill-static-accent-seabreeze-bold: var(--primitive-color-seabreeze-200);
123
- --semantic-color-fill-static-accent-mauve-faint: var(--primitive-color-mauve-900);
83
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-200);
124
84
  --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-800);
125
- --semantic-color-fill-static-accent-mauve-medium: var(--primitive-color-mauve-500);
126
- --semantic-color-fill-static-accent-mauve-contrast: var(--primitive-color-mauve-300);
127
- --semantic-color-fill-static-accent-mauve-bold: var(--primitive-color-mauve-150);
128
- --semantic-color-fill-static-accent-lagoon-faint: var(--primitive-color-lagoon-900);
85
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-150);
129
86
  --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
130
- --semantic-color-fill-static-accent-lagoon-medium: var(--primitive-color-lagoon-700);
131
- --semantic-color-fill-static-accent-lagoon-contrast: var(--primitive-color-lagoon-500);
132
- --semantic-color-fill-static-accent-lagoon-bold: var(--primitive-color-lagoon-250);
133
- --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
134
- --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
135
- --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
136
- --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
137
- --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
138
- --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
139
- --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
87
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
88
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
89
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
90
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
91
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
140
92
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
141
93
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
142
94
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
143
- --semantic-color-foreground-action-primary-rest: var(--primitive-color-brand-50);
144
- --semantic-color-foreground-action-primary-hover: var(--primitive-color-brand-25);
145
- --semantic-color-foreground-action-primary-pressed: var(--primitive-color-brand-0);
146
- --semantic-color-foreground-action-status-negative-rest: var(--primitive-color-red-200);
147
- --semantic-color-foreground-action-status-negative-hover: var(--primitive-color-red-150);
148
- --semantic-color-foreground-action-status-negative-pressed: var(--primitive-color-red-100);
149
- --semantic-color-foreground-action-status-positive-rest: var(--primitive-color-green-300);
150
- --semantic-color-foreground-action-status-positive-hover: var(--primitive-color-green-200);
151
- --semantic-color-foreground-action-status-positive-pressed: var(--primitive-color-green-150);
152
- --semantic-color-foreground-action-status-info-rest: var(--primitive-color-brand-100);
153
- --semantic-color-foreground-action-status-info-hover: var(--primitive-color-brand-75);
154
- --semantic-color-foreground-action-status-info-pressed: var(--primitive-color-brand-50);
155
- --semantic-color-foreground-action-status-warning-rest: var(--primitive-color-saffron-300);
156
- --semantic-color-foreground-action-status-warning-hover: var(--primitive-color-saffron-200);
157
- --semantic-color-foreground-action-status-warning-pressed: var(--primitive-color-saffron-150);
158
- --semantic-color-foreground-action-status-danger-rest: var(--primitive-color-orange-250);
159
- --semantic-color-foreground-action-status-danger-hover: var(--primitive-color-orange-200);
160
- --semantic-color-foreground-action-status-danger-pressed: var(--primitive-color-orange-150);
161
- --semantic-color-foreground-action-mono-rest: var(--primitive-color-cool-neutral-0);
162
- --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
163
- --semantic-color-foreground-action-accent-amethyst-rest: var(--primitive-color-amethyst-200);
164
- --semantic-color-foreground-action-accent-amethyst-hover: var(--primitive-color-amethyst-150);
165
- --semantic-color-foreground-action-accent-amethyst-pressed: var(--primitive-color-amethyst-100);
166
- --semantic-color-foreground-action-accent-jade-rest: var(--primitive-color-jade-300);
167
- --semantic-color-foreground-action-accent-jade-hover: var(--primitive-color-jade-250);
168
- --semantic-color-foreground-action-accent-jade-pressed: var(--primitive-color-jade-200);
169
- --semantic-color-foreground-action-accent-mauve-rest: var(--primitive-color-mauve-200);
170
- --semantic-color-foreground-action-accent-mauve-hover: var(--primitive-color-mauve-150);
171
- --semantic-color-foreground-action-accent-mauve-pressed: var(--primitive-color-mauve-100);
172
- --semantic-color-foreground-action-accent-seabreeze-rest: var(--primitive-color-seabreeze-350);
173
- --semantic-color-foreground-action-accent-seabreeze-hover: var(--primitive-color-seabreeze-300);
174
- --semantic-color-foreground-action-accent-seabreeze-pressed: var(--primitive-color-seabreeze-250);
175
- --semantic-color-foreground-action-accent-lagoon-rest: var(--primitive-color-lagoon-400);
176
- --semantic-color-foreground-action-accent-lagoon-hover: var(--primitive-color-lagoon-350);
177
- --semantic-color-foreground-action-accent-lagoon-pressed: var(--primitive-color-lagoon-300);
178
- --semantic-color-foreground-static-status-negative-subtle: var(--primitive-color-red-250);
179
- --semantic-color-foreground-static-status-negative-faint: var(--primitive-color-red-300);
180
- --semantic-color-foreground-static-status-negative-medium: var(--primitive-color-red-200);
181
- --semantic-color-foreground-static-status-negative-contrast: var(--primitive-color-red-150);
182
- --semantic-color-foreground-static-status-negative-bold: var(--primitive-color-red-100);
183
- --semantic-color-foreground-static-status-positive-subtle: var(--primitive-color-green-300);
184
- --semantic-color-foreground-static-status-positive-faint: var(--primitive-color-green-350);
185
- --semantic-color-foreground-static-status-positive-medium: var(--primitive-color-green-200);
186
- --semantic-color-foreground-static-status-positive-contrast: var(--primitive-color-green-150);
187
- --semantic-color-foreground-static-status-positive-bold: var(--primitive-color-green-100);
188
- --semantic-color-foreground-static-status-warning-subtle: var(--primitive-color-saffron-300);
189
- --semantic-color-foreground-static-status-warning-faint: var(--primitive-color-saffron-350);
190
- --semantic-color-foreground-static-status-warning-medium: var(--primitive-color-saffron-200);
191
- --semantic-color-foreground-static-status-warning-contrast: var(--primitive-color-saffron-100);
192
- --semantic-color-foreground-static-status-warning-bold: var(--primitive-color-saffron-75);
193
- --semantic-color-foreground-static-status-danger-subtle: var(--primitive-color-orange-300);
194
- --semantic-color-foreground-static-status-danger-faint: var(--primitive-color-orange-350);
195
- --semantic-color-foreground-static-status-danger-medium: var(--primitive-color-orange-200);
196
- --semantic-color-foreground-static-status-danger-contrast: var(--primitive-color-orange-150);
197
- --semantic-color-foreground-static-status-danger-bold: var(--primitive-color-orange-75);
198
- --semantic-color-foreground-static-accent-amethyst-subtle: var(--primitive-color-amethyst-300);
199
- --semantic-color-foreground-static-accent-amethyst-faint: var(--primitive-color-amethyst-350);
200
- --semantic-color-foreground-static-accent-amethyst-medium: var(--primitive-color-amethyst-200);
201
- --semantic-color-foreground-static-accent-amethyst-contrast: var(--primitive-color-amethyst-150);
202
- --semantic-color-foreground-static-accent-amethyst-bold: var(--primitive-color-amethyst-100);
203
- --semantic-color-foreground-static-accent-jade-subtle: var(--primitive-color-jade-300);
204
- --semantic-color-foreground-static-accent-jade-faint: var(--primitive-color-jade-350);
205
- --semantic-color-foreground-static-accent-jade-medium: var(--primitive-color-jade-250);
206
- --semantic-color-foreground-static-accent-jade-bold: var(--primitive-color-jade-150);
207
- --semantic-color-foreground-static-accent-jade-contrast: var(--primitive-color-jade-200);
208
- --semantic-color-foreground-static-accent-seabreeze-faint: var(--primitive-color-seabreeze-400);
209
- --semantic-color-foreground-static-accent-seabreeze-medium: var(--primitive-color-seabreeze-250);
210
- --semantic-color-foreground-static-accent-seabreeze-contrast: var(--primitive-color-seabreeze-200);
211
- --semantic-color-foreground-static-accent-seabreeze-bold: var(--primitive-color-seabreeze-100);
212
- --semantic-color-foreground-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-300);
213
- --semantic-color-foreground-static-accent-lagoon-faint: var(--primitive-color-lagoon-500);
214
- --semantic-color-foreground-static-accent-lagoon-subtle: var(--primitive-color-lagoon-400);
215
- --semantic-color-foreground-static-accent-lagoon-medium: var(--primitive-color-lagoon-300);
216
- --semantic-color-foreground-static-accent-lagoon-contrast: var(--primitive-color-lagoon-250);
217
- --semantic-color-foreground-static-accent-lagoon-bold: var(--primitive-color-lagoon-150);
218
- --semantic-color-foreground-static-accent-mauve-faint: var(--primitive-color-mauve-300);
219
- --semantic-color-foreground-static-accent-mauve-subtle: var(--primitive-color-mauve-200);
220
- --semantic-color-foreground-static-accent-mauve-medium: var(--primitive-color-mauve-150);
221
- --semantic-color-foreground-static-accent-mauve-contrast: var(--primitive-color-mauve-100);
222
- --semantic-color-foreground-static-accent-mauve-bold: var(--primitive-color-mauve-75);
223
- --semantic-color-foreground-static-brand-faint: var(--primitive-color-brand-250);
224
- --semantic-color-foreground-static-brand-medium: var(--primitive-color-brand-100);
225
- --semantic-color-foreground-static-brand-bold: var(--primitive-color-brand-75);
226
- --semantic-color-foreground-static-brand-light: var(--primitive-color-brand-200);
227
- --semantic-color-foreground-static-brand-black: var(--primitive-color-brand-25);
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
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
228
114
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
229
115
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
230
- --semantic-color-foreground-static-neutral-medium: var(--primitive-color-cool-neutral-75);
231
- --semantic-color-foreground-static-neutral-contrast: var(--primitive-color-cool-neutral-25);
116
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-75);
232
117
  --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-0);
233
- --semantic-color-foreground-static-neutral-xlight: var(--primitive-color-cool-neutral-0-16);
234
- --semantic-color-foreground-static-neutral-white: var(--primitive-color-cool-neutral-0);
235
- --semantic-color-foreground-static-neutral-light: var(--primitive-color-cool-neutral-125);
118
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-25);
119
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-600);
120
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-100);
121
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-50);
122
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
123
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-100);
124
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-saffron-700);
125
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-0);
126
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-cool-neutral-700);
127
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-75);
128
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-red-0);
129
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-50);
130
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-cool-neutral-800);
131
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-25);
132
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-jade-800);
133
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-50);
134
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-seabreeze-900);
135
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-100);
136
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-700);
137
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-75);
138
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-700);
139
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-100-16);
140
+ --semantic-color-stroke-action-primary-rest: var(--primitive-color-brand-100);
141
+ --semantic-color-stroke-action-primary-hover: var(--primitive-color-brand-75);
142
+ --semantic-color-stroke-action-primary-pressed: var(--primitive-color-brand-50);
143
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-500);
144
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-450);
145
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-400);
146
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
147
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-250);
148
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-200);
236
149
  --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-250);
237
150
  --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-200);
238
151
  --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-150);
239
152
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-400);
240
153
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-350);
241
154
  --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-300);
242
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-brand-200);
243
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-brand-150);
244
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-brand-100);
245
- --semantic-color-stroke-action-status-warning-rest: var(--primitive-color-saffron-350);
246
- --semantic-color-stroke-action-status-warning-hover: var(--primitive-color-saffron-300);
247
- --semantic-color-stroke-action-status-warning-pressed: var(--primitive-color-saffron-200);
248
- --semantic-color-stroke-action-status-danger-rest: var(--primitive-color-orange-350);
249
- --semantic-color-stroke-action-status-danger-hover: var(--primitive-color-orange-300);
250
- --semantic-color-stroke-action-status-danger-pressed: var(--primitive-color-orange-250);
251
- --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
252
- --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-250);
253
- --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-200);
254
- --semantic-color-stroke-action-primary-rest: var(--primitive-color-brand-100);
255
- --semantic-color-stroke-action-primary-hover: var(--primitive-color-brand-75);
256
- --semantic-color-stroke-action-primary-pressed: var(--primitive-color-brand-50);
257
- --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-100-16);
258
- --semantic-color-stroke-action-accent-amethyst-rest: var(--primitive-color-amethyst-350);
259
- --semantic-color-stroke-action-accent-amethyst-hover: var(--primitive-color-amethyst-300);
260
- --semantic-color-stroke-action-accent-amethyst-pressed: var(--primitive-color-amethyst-200);
261
- --semantic-color-stroke-action-accent-jade-rest: var(--primitive-color-jade-350);
262
- --semantic-color-stroke-action-accent-jade-hover: var(--primitive-color-jade-300);
263
- --semantic-color-stroke-action-accent-jade-pressed: var(--primitive-color-jade-250);
264
- --semantic-color-stroke-action-accent-mauve-rest: var(--primitive-color-mauve-300);
265
- --semantic-color-stroke-action-accent-mauve-hover: var(--primitive-color-mauve-200);
266
- --semantic-color-stroke-action-accent-mauve-pressed: var(--primitive-color-mauve-150);
267
- --semantic-color-stroke-action-accent-seabreeze-rest: var(--primitive-color-seabreeze-400);
268
- --semantic-color-stroke-action-accent-seabreeze-hover: var(--primitive-color-seabreeze-350);
269
- --semantic-color-stroke-action-accent-seabreeze-pressed: var(--primitive-color-seabreeze-300);
270
- --semantic-color-stroke-action-accent-lagoon-rest: var(--primitive-color-lagoon-500);
271
- --semantic-color-stroke-action-accent-lagoon-hover: var(--primitive-color-lagoon-400);
272
- --semantic-color-stroke-action-accent-lagoon-pressed: var(--primitive-color-lagoon-350);
273
- --semantic-color-stroke-action-mono-rest: var(--primitive-color-cool-neutral-0);
274
- --semantic-color-stroke-action-secondary-rest: var(--primitive-color-cool-neutral-500);
275
- --semantic-color-stroke-action-secondary-hover: var(--primitive-color-cool-neutral-450);
276
- --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-cool-neutral-400);
277
- --semantic-color-stroke-static-neutral-faint: var(--primitive-color-cool-neutral-800);
278
- --semantic-color-stroke-static-neutral-subtle: var(--primitive-color-cool-neutral-700);
279
- --semantic-color-stroke-static-neutral-contrast: var(--primitive-color-cool-neutral-450);
280
- --semantic-color-stroke-static-neutral-bold: var(--primitive-color-cool-neutral-200);
281
- --semantic-color-stroke-static-brand-faint: var(--primitive-color-brand-800);
282
- --semantic-color-stroke-static-brand-subtle: var(--primitive-color-brand-700);
283
- --semantic-color-stroke-static-brand-contrast: var(--primitive-color-brand-500);
284
- --semantic-color-stroke-static-brand-bold: var(--primitive-color-brand-400);
285
- --semantic-color-stroke-static-brand-light: var(--primitive-color-brand-550);
286
- --semantic-color-stroke-static-brand-black: var(--primitive-color-brand-0);
287
- --semantic-color-stroke-static-status-negative-faint: var(--primitive-color-red-600);
288
- --semantic-color-stroke-static-status-negative-subtle: var(--primitive-color-red-500);
289
- --semantic-color-stroke-static-status-negative-medium: var(--primitive-color-red-400);
290
- --semantic-color-stroke-static-status-negative-contrast: var(--primitive-color-red-250);
291
- --semantic-color-stroke-static-status-negative-bold: var(--primitive-color-red-200);
292
- --semantic-color-stroke-static-status-positive-faint: var(--primitive-color-green-900);
293
- --semantic-color-stroke-static-status-positive-subtle: var(--primitive-color-green-800);
294
- --semantic-color-stroke-static-status-positive-medium: var(--primitive-color-green-700);
295
- --semantic-color-stroke-static-status-positive-contrast: var(--primitive-color-green-600);
296
- --semantic-color-stroke-static-status-positive-bold: var(--primitive-color-green-500);
297
- --semantic-color-stroke-static-status-warning-faint: var(--primitive-color-saffron-900);
298
- --semantic-color-stroke-static-status-warning-medium: var(--primitive-color-saffron-800);
299
- --semantic-color-stroke-static-status-warning-contrast: var(--primitive-color-saffron-700);
300
- --semantic-color-stroke-static-status-warning-bold: var(--primitive-color-saffron-500);
301
- --semantic-color-stroke-static-status-danger-faint: var(--primitive-color-orange-900);
302
- --semantic-color-stroke-static-status-danger-subtle: var(--primitive-color-orange-800);
303
- --semantic-color-stroke-static-status-danger-medium: var(--primitive-color-orange-600);
304
- --semantic-color-stroke-static-status-danger-contrast: var(--primitive-color-orange-500);
305
- --semantic-color-stroke-static-status-danger-bold: var(--primitive-color-orange-350);
306
- --semantic-color-stroke-static-accent-amethyst-faint: var(--primitive-color-amethyst-800);
307
- --semantic-color-stroke-static-accent-amethyst-subtle: var(--primitive-color-amethyst-700);
308
- --semantic-color-stroke-static-accent-amethyst-medium: var(--primitive-color-amethyst-600);
309
- --semantic-color-stroke-static-accent-amethyst-contrast: var(--primitive-color-amethyst-400);
310
- --semantic-color-stroke-static-accent-amethyst-bold: var(--primitive-color-amethyst-350);
311
- --semantic-color-stroke-static-accent-jade-faint: var(--primitive-color-jade-900);
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
+ --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
165
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-800);
166
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
167
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
168
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
169
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
170
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
171
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);
172
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-500);
173
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-700);
174
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
175
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-700);
176
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-350);
177
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
178
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-200);
312
179
  --semantic-color-stroke-static-accent-jade-subtle: var(--primitive-color-jade-800);
313
- --semantic-color-stroke-static-accent-jade-medium: var(--primitive-color-jade-700);
314
- --semantic-color-stroke-static-accent-jade-contrast: var(--primitive-color-jade-600);
315
- --semantic-color-stroke-static-accent-jade-bold: var(--primitive-color-jade-500);
316
- --semantic-color-stroke-static-accent-mauve-faint: var(--primitive-color-mauve-900);
180
+ --semantic-color-stroke-static-accent-jade-strong: var(--primitive-color-jade-400);
317
181
  --semantic-color-stroke-static-accent-mauve-subtle: var(--primitive-color-mauve-800);
318
- --semantic-color-stroke-static-accent-mauve-medium: var(--primitive-color-mauve-500);
319
- --semantic-color-stroke-static-accent-mauve-contrast: var(--primitive-color-mauve-300);
320
- --semantic-color-stroke-static-accent-mauve-bold: var(--primitive-color-mauve-150);
321
- --semantic-color-stroke-static-accent-seabreeze-faint: var(--primitive-color-seabreeze-900);
182
+ --semantic-color-stroke-static-accent-mauve-strong: var(--primitive-color-mauve-150);
322
183
  --semantic-color-stroke-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-800);
323
- --semantic-color-stroke-static-accent-seabreeze-medium: var(--primitive-color-seabreeze-700);
324
- --semantic-color-stroke-static-accent-seabreeze-contrast: var(--primitive-color-seabreeze-400);
325
- --semantic-color-stroke-static-accent-seabreeze-bold: var(--primitive-color-seabreeze-250);
326
- --semantic-color-stroke-static-accent-lagoon-faint: var(--primitive-color-lagoon-900);
184
+ --semantic-color-stroke-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-250);
327
185
  --semantic-color-stroke-static-accent-lagoon-subtle: var(--primitive-color-lagoon-800);
328
- --semantic-color-stroke-static-accent-lagoon-medium: var(--primitive-color-lagoon-700);
329
- --semantic-color-stroke-static-accent-lagoon-contrast: var(--primitive-color-lagoon-500);
330
- --semantic-color-stroke-static-accent-lagoon-bold: var(--primitive-color-lagoon-250);
331
- --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
186
+ --semantic-color-stroke-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
187
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
188
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
189
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
190
+ --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
332
191
  }