@helloimjolopez-pathway/pathway-tokens 6.0.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +69 -15
  2. package/components/sidenav/sidenav.jsx +85 -14
  3. package/dist/breakpoints.css +1 -1
  4. package/dist/layout-contextual.css +15 -31
  5. package/dist/layout-responsive.css +32 -0
  6. package/dist/layout.css +1 -4
  7. package/dist/primitives.css +115 -113
  8. package/dist/themes/light.css +154 -311
  9. package/dist/themes/midnight.css +142 -299
  10. package/dist/tokens.js +4100 -9535
  11. package/dist/tokens.json +1737 -3723
  12. package/package.json +13 -6
package/dist/themes/midnight.css CHANGED
@@ -3,330 +3,173 @@
3
3
  */
4
4
 
5
5
  [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);
6
+ --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
7
+ --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
8
+ --semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
9
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
10
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
11
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-200);
12
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-150);
13
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-600);
14
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-75-8);
15
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-600-50);
42
16
  --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-600);
43
17
  --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-550);
44
18
  --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
19
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
78
20
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
79
21
  --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);
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);
25
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
26
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
27
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
28
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
29
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
30
+ --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);
37
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
38
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
39
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
40
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-800);
41
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-700);
42
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-600);
43
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-warm-neutral-900);
81
44
  --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);
45
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
46
+ --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);
48
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
49
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
50
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
86
51
  --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);
52
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-700);
53
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-800);
54
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-600);
55
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
56
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-700);
57
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-300);
58
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-600);
59
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-200);
60
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-600);
61
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
62
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-700);
63
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
64
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-600);
65
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-200);
119
66
  --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);
67
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-200);
124
68
  --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);
69
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-150);
129
70
  --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);
71
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
72
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
73
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
74
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
75
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
140
76
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
141
77
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
142
78
  --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);
79
+ --semantic-color-foreground-action-secondary-subtle-rest: var(--primitive-color-cool-neutral-100);
80
+ --semantic-color-foreground-action-secondary-subtle-hover: var(--primitive-color-cool-neutral-75);
81
+ --semantic-color-foreground-action-secondary-subtle-pressed: var(--primitive-color-cool-neutral-50);
82
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
83
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
84
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
85
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
86
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
87
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
88
+ --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
89
+ --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
90
+ --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-150);
91
+ --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
92
+ --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
93
+ --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-150);
94
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
95
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
96
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
97
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
228
98
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
229
99
  --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);
100
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-75);
232
101
  --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);
102
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-25);
103
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-600);
104
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-100);
105
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-50);
106
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
107
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-100);
108
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-saffron-700);
109
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-0);
110
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-cool-neutral-700);
111
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-75);
112
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-red-0);
113
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-50);
114
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-cool-neutral-800);
115
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-25);
116
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-jade-800);
117
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-50);
118
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-seabreeze-900);
119
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-100);
120
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-700);
121
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-75);
122
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-700);
123
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-100-16);
124
+ --semantic-color-stroke-action-primary-rest: var(--primitive-color-brand-100);
125
+ --semantic-color-stroke-action-primary-hover: var(--primitive-color-brand-75);
126
+ --semantic-color-stroke-action-primary-pressed: var(--primitive-color-brand-50);
127
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-500);
128
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-450);
129
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-400);
130
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
131
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-250);
132
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-200);
236
133
  --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-250);
237
134
  --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-200);
238
135
  --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-150);
239
136
  --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-400);
240
137
  --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-350);
241
138
  --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);
139
+ --semantic-color-stroke-action-status-attention-rest: var(--primitive-color-saffron-350);
140
+ --semantic-color-stroke-action-status-attention-hover: var(--primitive-color-saffron-300);
141
+ --semantic-color-stroke-action-status-attention-pressed: var(--primitive-color-saffron-200);
142
+ --semantic-color-stroke-action-status-severe-rest: var(--primitive-color-orange-350);
143
+ --semantic-color-stroke-action-status-severe-hover: var(--primitive-color-orange-300);
144
+ --semantic-color-stroke-action-status-severe-pressed: var(--primitive-color-orange-250);
145
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-700);
146
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
147
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-500);
148
+ --semantic-color-stroke-focusring-base: var(--primitive-color-cool-neutral-0-24);
149
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-800);
150
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
151
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
152
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
153
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
154
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
155
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);
156
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-500);
157
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-700);
158
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
159
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-700);
160
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-350);
161
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
162
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-200);
312
163
  --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);
164
+ --semantic-color-stroke-static-accent-jade-strong: var(--primitive-color-jade-400);
317
165
  --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);
166
+ --semantic-color-stroke-static-accent-mauve-strong: var(--primitive-color-mauve-150);
322
167
  --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);
168
+ --semantic-color-stroke-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-250);
327
169
  --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);
170
+ --semantic-color-stroke-static-accent-lagoon-strong: var(--primitive-color-lagoon-250);
171
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
172
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
173
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
174
+ --semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
332
175
  }