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