@helloimjolopez-pathway/pathway-tokens 9.0.1 → 10.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 (23) hide show
  1. package/README.md +1 -1
  2. package/components/sidenav/sidenav.jsx +1 -1
  3. package/dist/README.md +12 -12
  4. package/dist/brands/newco/index.css +9 -0
  5. package/dist/brands/newco/layout-contextual.css +42 -0
  6. package/dist/brands/newco/primitives.css +435 -0
  7. package/dist/brands/newco/themes/dark.css +212 -0
  8. package/dist/brands/newco/themes/light.css +212 -0
  9. package/dist/brands/newco/tokens.js +9836 -0
  10. package/dist/breakpoints.css +2 -2
  11. package/dist/contract.json +138 -31
  12. package/dist/index.css +14 -0
  13. package/dist/layout-contextual.css +25 -24
  14. package/dist/layout-responsive.css +17 -9
  15. package/dist/layout.css +44 -8
  16. package/dist/motion.css +8 -4
  17. package/dist/primitives.css +363 -168
  18. package/dist/themes/light.css +174 -107
  19. package/dist/themes/midnight.css +201 -134
  20. package/dist/tokens.js +9492 -5119
  21. package/dist/tokens.json +9011 -3443
  22. package/dist/type.css +2 -4
  23. package/package.json +12 -4
package/dist/brands/newco/themes/dark.css ADDED
@@ -0,0 +1,212 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-brand="newco"][data-theme="dark"], [data-brand="newco"][data-theme="midnight"] {
6
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-350-8);
7
+ --semantic-color-fill-action-ghost-hover: var(--primitive-color-midnight-350-8);
8
+ --semantic-color-fill-action-ghost-pressed: var(--primitive-color-midnight-900-36);
9
+ --semantic-color-fill-action-ghost-rest: var(--primitive-color-midnight-350-4);
10
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-200);
11
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-300);
12
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
13
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-400-24);
14
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-400-50);
15
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-400-8);
16
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-midnight-600);
17
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-midnight-500);
18
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-midnight-700);
19
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-midnight-350-16);
20
+ --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-250);
21
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-400-24);
22
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-midnight-350-24);
23
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-600);
24
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-700);
25
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-500);
26
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-350-24);
27
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-350-36);
28
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-350-16);
29
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
30
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
31
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
32
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-300-24);
33
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-300-36);
34
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-300-16);
35
+ --semantic-color-fill-action-status-neutral-strong-hover: var(--primitive-color-warm-neutral-600);
36
+ --semantic-color-fill-action-status-neutral-strong-pressed: var(--primitive-color-warm-neutral-700);
37
+ --semantic-color-fill-action-status-neutral-strong-rest: var(--primitive-color-warm-neutral-500);
38
+ --semantic-color-fill-action-status-neutral-subtle-hover: var(--primitive-color-warm-neutral-500-24);
39
+ --semantic-color-fill-action-status-neutral-subtle-pressed: var(--primitive-color-warm-neutral-500-36);
40
+ --semantic-color-fill-action-status-neutral-subtle-rest: var(--primitive-color-warm-neutral-500-16);
41
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
42
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-350);
43
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-250);
44
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-350-24);
45
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-350-36);
46
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-350-16);
47
+ --semantic-color-fill-shadow-dropshadow: var(--primitive-color-midnight-975-70);
48
+ --semantic-color-fill-static-accent-citrine-strong: var(--primitive-color-citrine-150);
49
+ --semantic-color-fill-static-accent-citrine-subtle: var(--primitive-color-citrine-350-16);
50
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-150);
51
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-300-16);
52
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-150);
53
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-300-16);
54
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-500);
55
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-350-16);
56
+ --semantic-color-fill-static-accent-rose-strong: var(--primitive-color-rose-500);
57
+ --semantic-color-fill-static-accent-rose-subtle: var(--primitive-color-rose-350-16);
58
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-150);
59
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-300-16);
60
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-150);
61
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-150-16);
62
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-600);
63
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-800);
64
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-200);
65
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-200);
66
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-700);
67
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-500);
68
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-350-16);
69
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
70
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-300-16);
71
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-cool-neutral-600);
72
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-cool-neutral-800);
73
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
74
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-cool-neutral-400);
75
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-cool-neutral-700);
76
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-250);
77
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-350-16);
78
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
79
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-350-16);
80
+ --semantic-color-fill-surface-canvas: var(--primitive-color-midnight-925);
81
+ --semantic-color-fill-surface-chrome: var(--primitive-color-brand-700);
82
+ --semantic-color-fill-surface-elevated: var(--primitive-color-midnight-900);
83
+ --semantic-color-fill-surface-overlay: var(--primitive-color-midnight-975);
84
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-brand-400);
85
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-brand-450);
86
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-brand-500);
87
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-brand-550);
88
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-brand-600);
89
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-brand-650);
90
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-midnight-100);
91
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-brand-100);
92
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-brand-125);
93
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-brand-150);
94
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-brand-175);
95
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-brand-200);
96
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-brand-250);
97
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-brand-300);
98
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-brand-350);
99
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-brand-650);
100
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-midnight-100);
101
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
102
+ --semantic-color-foreground-action-ghost-hover: var(--primitive-color-midnight-25);
103
+ --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-midnight-0);
104
+ --semantic-color-foreground-action-ghost-rest: var(--primitive-color-midnight-50);
105
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-warm-neutral-900);
106
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
107
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
108
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
109
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-midnight-100);
110
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-midnight-50);
111
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-midnight-150);
112
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
113
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-150);
114
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-100);
115
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-200);
116
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
117
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
118
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
119
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
120
+ --semantic-color-foreground-action-status-neutral-on-strong: var(--primitive-color-cool-neutral-0);
121
+ --semantic-color-foreground-action-status-neutral-on-subtle-hover: var(--primitive-color-midnight-100);
122
+ --semantic-color-foreground-action-status-neutral-on-subtle-pressed: var(--primitive-color-midnight-50);
123
+ --semantic-color-foreground-action-status-neutral-on-subtle-rest: var(--primitive-color-midnight-150);
124
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-green-800);
125
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-100);
126
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-75);
127
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-150);
128
+ --semantic-color-foreground-static-accent-citrine-on-strong: var(--primitive-color-citrine-800);
129
+ --semantic-color-foreground-static-accent-citrine-on-subtle: var(--primitive-color-citrine-150);
130
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-jade-800);
131
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-150);
132
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-lagoon-800);
133
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-150);
134
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-0);
135
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-250);
136
+ --semantic-color-foreground-static-accent-rose-on-strong: var(--primitive-color-cool-neutral-0);
137
+ --semantic-color-foreground-static-accent-rose-on-subtle: var(--primitive-color-rose-150);
138
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-cool-neutral-900);
139
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-150);
140
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-cool-neutral-900);
141
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-150);
142
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-900);
143
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-150);
144
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-cool-neutral-0);
145
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-150);
146
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-cool-neutral-0);
147
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-200);
148
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-midnight-50);
149
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-25);
150
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-midnight-300);
151
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-midnight-900);
152
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-0);
153
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-midnight-150);
154
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-green-800);
155
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-150);
156
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-orange-800);
157
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-150);
158
+ --semantic-color-scrim-base: var(--primitive-color-midnight-900-36);
159
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-0-16);
160
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-0-24);
161
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-0-50);
162
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-350-24);
163
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-0-36);
164
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-0-36);
165
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-0-36);
166
+ --semantic-color-stroke-action-ghost-hover: var(--primitive-color-cool-neutral-0-50);
167
+ --semantic-color-stroke-action-ghost-pressed: var(--primitive-color-cool-neutral-0-70);
168
+ --semantic-color-stroke-action-ghost-rest: var(--primitive-color-cool-neutral-0-36);
169
+ --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-250);
170
+ --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-200);
171
+ --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-300);
172
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-250);
173
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-200);
174
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-300);
175
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-midnight-300);
176
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-midnight-200);
177
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-midnight-400);
178
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-150);
179
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-100);
180
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-200);
181
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-150);
182
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-100);
183
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-200);
184
+ --semantic-color-stroke-action-status-neutral-hover: var(--primitive-color-midnight-300);
185
+ --semantic-color-stroke-action-status-neutral-pressed: var(--primitive-color-midnight-200);
186
+ --semantic-color-stroke-action-status-neutral-rest: var(--primitive-color-midnight-400);
187
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-100);
188
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-75);
189
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-150);
190
+ --semantic-color-stroke-focusring-base: var(--primitive-color-brand-150);
191
+ --semantic-color-stroke-static-accent-citrine: var(--primitive-color-citrine-350);
192
+ --semantic-color-stroke-static-accent-jade: var(--primitive-color-jade-400);
193
+ --semantic-color-stroke-static-accent-lagoon: var(--primitive-color-lagoon-400);
194
+ --semantic-color-stroke-static-accent-mauve: var(--primitive-color-mauve-350);
195
+ --semantic-color-stroke-static-accent-rose: var(--primitive-color-rose-350);
196
+ --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
197
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-150);
198
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-300);
199
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-150);
200
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-300);
201
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-300);
202
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
203
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-midnight-700);
204
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-midnight-500);
205
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-midnight-800);
206
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
207
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-midnight-400);
208
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-150);
209
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-400);
210
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-150);
211
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-300);
212
+ }
package/dist/brands/newco/themes/light.css ADDED
@@ -0,0 +1,212 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-brand="newco"], [data-brand="newco"][data-theme="light"] {
6
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-350-4);
7
+ --semantic-color-fill-action-ghost-hover: var(--primitive-color-brand-400-24);
8
+ --semantic-color-fill-action-ghost-pressed: var(--primitive-color-brand-400-50);
9
+ --semantic-color-fill-action-ghost-rest: var(--primitive-color-brand-400-8);
10
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-500);
11
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-600);
12
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-400);
13
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-75);
14
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-100);
15
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-50);
16
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-75);
17
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-warm-neutral-100);
18
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-50);
19
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-350-8);
20
+ --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-400);
21
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-50);
22
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-350-16);
23
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-600);
24
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-700);
25
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-500);
26
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-75);
27
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-100);
28
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-50);
29
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
30
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
31
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
32
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-75);
33
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-100);
34
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-50);
35
+ --semantic-color-fill-action-status-neutral-strong-hover: var(--primitive-color-warm-neutral-600);
36
+ --semantic-color-fill-action-status-neutral-strong-pressed: var(--primitive-color-warm-neutral-700);
37
+ --semantic-color-fill-action-status-neutral-strong-rest: var(--primitive-color-warm-neutral-500);
38
+ --semantic-color-fill-action-status-neutral-subtle-hover: var(--primitive-color-warm-neutral-75);
39
+ --semantic-color-fill-action-status-neutral-subtle-pressed: var(--primitive-color-warm-neutral-100);
40
+ --semantic-color-fill-action-status-neutral-subtle-rest: var(--primitive-color-warm-neutral-50);
41
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
42
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
43
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
44
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
45
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
46
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
47
+ --semantic-color-fill-shadow-dropshadow: var(--primitive-color-brand-600-8);
48
+ --semantic-color-fill-static-accent-citrine-strong: var(--primitive-color-citrine-150);
49
+ --semantic-color-fill-static-accent-citrine-subtle: var(--primitive-color-citrine-50);
50
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-600);
51
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-50);
52
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-600);
53
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
54
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-500);
55
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-50);
56
+ --semantic-color-fill-static-accent-rose-strong: var(--primitive-color-rose-500);
57
+ --semantic-color-fill-static-accent-rose-subtle: var(--primitive-color-rose-50);
58
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-600);
59
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-50);
60
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-150);
61
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-50);
62
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
63
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
64
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-600);
65
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-600);
66
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
67
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-500);
68
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-50);
69
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
70
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-50);
71
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-cool-neutral-25);
72
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-cool-neutral-5);
73
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
74
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-cool-neutral-150);
75
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-cool-neutral-10);
76
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-500);
77
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-25);
78
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
79
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-50);
80
+ --semantic-color-fill-surface-canvas: var(--primitive-color-brand-0);
81
+ --semantic-color-fill-surface-chrome: var(--primitive-color-brand-600);
82
+ --semantic-color-fill-surface-elevated: var(--primitive-color-cool-neutral-0);
83
+ --semantic-color-fill-surface-overlay: var(--primitive-color-cool-neutral-0);
84
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-brand-200);
85
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-brand-175);
86
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-brand-150);
87
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-brand-125);
88
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-brand-100);
89
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-midnight-100);
90
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-brand-650);
91
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-brand-600);
92
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-brand-550);
93
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-brand-500);
94
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-brand-450);
95
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-brand-400);
96
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-brand-350);
97
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-brand-300);
98
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-brand-250);
99
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-midnight-100);
100
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-brand-650);
101
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-800-50);
102
+ --semantic-color-foreground-action-ghost-hover: var(--primitive-color-brand-25);
103
+ --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-brand-0);
104
+ --semantic-color-foreground-action-ghost-rest: var(--primitive-color-brand-50);
105
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-warm-neutral-0);
106
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
107
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-700);
108
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
109
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-800);
110
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-900);
111
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-700);
112
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
113
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-700);
114
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-800);
115
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-600);
116
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
117
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-600);
118
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-700);
119
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-500);
120
+ --semantic-color-foreground-action-status-neutral-on-strong: var(--primitive-color-cool-neutral-0);
121
+ --semantic-color-foreground-action-status-neutral-on-subtle-hover: var(--primitive-color-cool-neutral-800);
122
+ --semantic-color-foreground-action-status-neutral-on-subtle-pressed: var(--primitive-color-cool-neutral-900);
123
+ --semantic-color-foreground-action-status-neutral-on-subtle-rest: var(--primitive-color-cool-neutral-700);
124
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-0);
125
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-700);
126
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-800);
127
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-600);
128
+ --semantic-color-foreground-static-accent-citrine-on-strong: var(--primitive-color-citrine-800);
129
+ --semantic-color-foreground-static-accent-citrine-on-subtle: var(--primitive-color-citrine-700);
130
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-cool-neutral-0);
131
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-700);
132
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-0);
133
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-700);
134
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-0);
135
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-500);
136
+ --semantic-color-foreground-static-accent-rose-on-strong: var(--primitive-color-cool-neutral-0);
137
+ --semantic-color-foreground-static-accent-rose-on-subtle: var(--primitive-color-rose-700);
138
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-cool-neutral-0);
139
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-600);
140
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-cool-neutral-900);
141
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-700);
142
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-cool-neutral-0);
143
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-600);
144
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-cool-neutral-0);
145
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-600);
146
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-cool-neutral-0);
147
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-500);
148
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-700);
149
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-800);
150
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-500);
151
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
152
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-900);
153
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-600);
154
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-cool-neutral-0);
155
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-600);
156
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-orange-800);
157
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-600);
158
+ --semantic-color-scrim-base: var(--primitive-color-midnight-900-36);
159
+ --semantic-color-scrim-faint: var(--primitive-color-midnight-900-8);
160
+ --semantic-color-scrim-light: var(--primitive-color-midnight-900-16);
161
+ --semantic-color-scrim-subtle: var(--primitive-color-midnight-900-24);
162
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-350-16);
163
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-warm-neutral-500);
164
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-warm-neutral-600);
165
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-warm-neutral-400);
166
+ --semantic-color-stroke-action-ghost-hover: var(--primitive-color-brand-250);
167
+ --semantic-color-stroke-action-ghost-pressed: var(--primitive-color-brand-125);
168
+ --semantic-color-stroke-action-ghost-rest: var(--primitive-color-brand-400);
169
+ --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-500);
170
+ --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-600);
171
+ --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-400);
172
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-500);
173
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-600);
174
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-400);
175
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-500);
176
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-600);
177
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-400);
178
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
179
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-700);
180
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-500);
181
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-600);
182
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-700);
183
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-500);
184
+ --semantic-color-stroke-action-status-neutral-hover: var(--primitive-color-warm-neutral-500);
185
+ --semantic-color-stroke-action-status-neutral-pressed: var(--primitive-color-warm-neutral-600);
186
+ --semantic-color-stroke-action-status-neutral-rest: var(--primitive-color-warm-neutral-400);
187
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-700);
188
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-800);
189
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-600);
190
+ --semantic-color-stroke-focusring-base: var(--primitive-color-brand-350);
191
+ --semantic-color-stroke-static-accent-citrine: var(--primitive-color-citrine-350);
192
+ --semantic-color-stroke-static-accent-jade: var(--primitive-color-jade-350);
193
+ --semantic-color-stroke-static-accent-lagoon: var(--primitive-color-lagoon-350);
194
+ --semantic-color-stroke-static-accent-mauve: var(--primitive-color-mauve-350);
195
+ --semantic-color-stroke-static-accent-rose: var(--primitive-color-rose-350);
196
+ --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
197
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
198
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-150);
199
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
200
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-150);
201
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-500);
202
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-300);
203
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-150);
204
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-300);
205
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-75);
206
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
207
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-500);
208
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-400);
209
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-150);
210
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-350);
211
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-150);
212
+ }