@navikt/ds-tokens 7.2.0 → 7.3.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.
@@ -1,4 +1,8 @@
1
1
  :root, :host, .light, .light-theme {
2
+ --a-data-two-400A: #d0dc00;
3
+ --a-data-two-300A: #cadf0094;
4
+ --a-data-two-200A: #c4df0056;
5
+ --a-data-two-100A: #c3de002e;
2
6
  --a-data-two-1000: #2a2800;
3
7
  --a-data-two-900: #515400;
4
8
  --a-data-two-800: #5c6100;
@@ -9,6 +13,10 @@
9
13
  --a-data-two-300: #e0ec6b;
10
14
  --a-data-two-200: #ebf4a9;
11
15
  --a-data-two-100: #f4f9d1;
16
+ --a-data-one-400A: #2b006b30;
17
+ --a-data-one-300A: #2b00661e;
18
+ --a-data-one-200A: #2b006412;
19
+ --a-data-one-100A: #3300660a;
12
20
  --a-data-one-1000: #331a4d;
13
21
  --a-data-one-900: #5e467c;
14
22
  --a-data-one-800: #6a5289;
@@ -19,6 +27,10 @@
19
27
  --a-data-one-300: #e6e1ed;
20
28
  --a-data-one-200: #f0edf4;
21
29
  --a-data-one-100: #f7f5f9;
30
+ --a-brand-three-400A: #005a923f;
31
+ --a-brand-three-300A: #0060a028;
32
+ --a-brand-three-200A: #006eb71c;
33
+ --a-brand-three-100A: #0078d211;
22
34
  --a-brand-three-1000: #002942;
23
35
  --a-brand-three-900: #00557d;
24
36
  --a-brand-three-800: #156389;
@@ -29,6 +41,10 @@
29
41
  --a-brand-three-300: #d7e6f0;
30
42
  --a-brand-three-200: #e3eff7;
31
43
  --a-brand-three-100: #eef6fc;
44
+ --a-brand-two-400A: #e94c004e;
45
+ --a-brand-two-300A: #f0520032;
46
+ --a-brand-two-200A: #ef5b001f;
47
+ --a-brand-two-100A: #ff5a0011;
32
48
  --a-brand-two-1000: #3c1f15;
33
49
  --a-brand-two-900: #764332;
34
50
  --a-brand-two-800: #874e3b;
@@ -39,6 +55,10 @@
39
55
  --a-brand-two-300: #fcddcd;
40
56
  --a-brand-two-200: #fdebe0;
41
57
  --a-brand-two-100: #fff4ee;
58
+ --a-brand-one-400A: #a4003a35;
59
+ --a-brand-one-300A: #a5003c22;
60
+ --a-brand-one-200A: #aa003d15;
61
+ --a-brand-one-100A: #aa00400c;
42
62
  --a-brand-one-1000: #52002b;
43
63
  --a-brand-one-900: #98185d;
44
64
  --a-brand-one-800: #a33069;
@@ -49,6 +69,10 @@
49
69
  --a-brand-one-300: #f3dde5;
50
70
  --a-brand-one-200: #f8eaef;
51
71
  --a-brand-one-100: #fbf3f6;
72
+ --a-info-400A: #005a923f;
73
+ --a-info-300A: #0060a028;
74
+ --a-info-200A: #006eb71c;
75
+ --a-info-100A: #0078d211;
52
76
  --a-info-1000: #002942;
53
77
  --a-info-900: #00557d;
54
78
  --a-info-800: #156389;
@@ -59,16 +83,24 @@
59
83
  --a-info-300: #d7e6f0;
60
84
  --a-info-200: #e3eff7;
61
85
  --a-info-100: #eef6fc;
86
+ --a-danger-400A: #ff00583d;
87
+ --a-danger-300A: #ff005826;
88
+ --a-danger-200A: #ff005917;
89
+ --a-danger-100A: #ff00630d;
62
90
  --a-danger-1000: #560000;
63
- --a-danger-900: #a60000;
64
- --a-danger-800: #bd0015;
65
- --a-danger-700: #cc0023;
66
- --a-danger-600: #e81c3b;
67
- --a-danger-500: #fa4256;
91
+ --a-danger-900: #a60017;
92
+ --a-danger-800: #bc002a;
93
+ --a-danger-700: #cb0035;
94
+ --a-danger-600: #e22a49;
95
+ --a-danger-500: #ec526e;
68
96
  --a-danger-400: #ffc2d7;
69
- --a-danger-300: #ffdae6;
70
- --a-danger-200: #ffe9f0;
71
- --a-danger-100: #fff3f7;
97
+ --a-danger-300: #ffd9e6;
98
+ --a-danger-200: #ffe8f0;
99
+ --a-danger-100: #fff2f7;
100
+ --a-warning-400A: #ffa30090;
101
+ --a-warning-300A: #ffa2015a;
102
+ --a-warning-200A: #ffa40038;
103
+ --a-warning-100A: #ffa1001b;
72
104
  --a-warning-1000: #481700;
73
105
  --a-warning-900: #8c3500;
74
106
  --a-warning-800: #a03e00;
@@ -79,6 +111,10 @@
79
111
  --a-warning-300: #ffdea5;
80
112
  --a-warning-200: #ffebc7;
81
113
  --a-warning-100: #fff5e4;
114
+ --a-success-400A: #00a22457;
115
+ --a-success-300A: #01b2273b;
116
+ --a-success-200A: #00c9252a;
117
+ --a-success-100A: #00ee351d;
82
118
  --a-success-1000: #002e00;
83
119
  --a-success-900: #005e0f;
84
120
  --a-success-800: #006c1f;
@@ -89,6 +125,10 @@
89
125
  --a-success-300: #c4edcd;
90
126
  --a-success-200: #d5f6db;
91
127
  --a-success-100: #e2fde8;
128
+ --a-accent-400A: #0064f145;
129
+ --a-accent-300A: #0165f42b;
130
+ --a-accent-200A: #005fff1b;
131
+ --a-accent-100A: #006eff0e;
92
132
  --a-accent-1000: #002459;
93
133
  --a-accent-900: #004ea3;
94
134
  --a-accent-800: #005bb6;
@@ -99,6 +139,10 @@
99
139
  --a-accent-300: #d4e5fd;
100
140
  --a-accent-200: #e4eeff;
101
141
  --a-accent-100: #f1f7ff;
142
+ --a-neutral-400A: #00163030;
143
+ --a-neutral-300A: #0011331e;
144
+ --a-neutral-200A: #000e2913;
145
+ --a-neutral-100A: #001a330a;
102
146
  --a-neutral-000: white;
103
147
  --a-neutral-1000: #202733;
104
148
  --a-neutral-900: #49515e;
@@ -111,41 +155,55 @@
111
155
  --a-neutral-200: #ecedef;
112
156
  --a-neutral-100: #f5f6f7;
113
157
  --a-bg-overlay: #0214317d;
158
+ --a-bg-input: #ffffffd9;
159
+ --a-bg-default: #fff;
114
160
  --a-border-focus: var(--a-accent-700);
115
161
  --a-border-strong: var(--a-neutral-600);
162
+ --a-border-subtleA: var(--a-neutral-400A);
116
163
  --a-border-subtle: var(--a-neutral-400);
117
164
  --a-border-default: var(--a-neutral-500);
118
165
  --a-border-data-two-strong: var(--a-data-two-600);
166
+ --a-border-data-two-subtleA: var(--a-data-two-400A);
119
167
  --a-border-data-two-subtle: var(--a-data-two-400);
120
168
  --a-border-data-two: var(--a-data-two-500);
121
169
  --a-border-data-one-strong: var(--a-data-one-600);
170
+ --a-border-data-one-subtleA: var(--a-data-one-400A);
122
171
  --a-border-data-one-subtle: var(--a-data-one-400);
123
172
  --a-border-data-one: var(--a-data-one-500);
124
173
  --a-border-brand-three-strong: var(--a-brand-three-600);
174
+ --a-border-brand-three-subtleA: var(--a-brand-three-400A);
125
175
  --a-border-brand-three-subtle: var(--a-brand-three-400);
126
176
  --a-border-brand-three: var(--a-brand-three-500);
127
177
  --a-border-brand-two-strong: var(--a-brand-two-600);
178
+ --a-border-brand-two-subtleA: var(--a-brand-two-400A);
128
179
  --a-border-brand-two-subtle: var(--a-brand-two-400);
129
180
  --a-border-brand-two: var(--a-brand-two-500);
130
181
  --a-border-brand-one-strong: var(--a-brand-one-600);
182
+ --a-border-brand-one-subtleA: var(--a-brand-one-400A);
131
183
  --a-border-brand-one-subtle: var(--a-brand-one-400);
132
184
  --a-border-brand-one: var(--a-brand-one-500);
133
185
  --a-border-info-strong: var(--a-info-600);
186
+ --a-border-info-subtleA: var(--a-info-400A);
134
187
  --a-border-info-subtle: var(--a-info-400);
135
188
  --a-border-info: var(--a-info-500);
136
189
  --a-border-danger-strong: var(--a-danger-600);
190
+ --a-border-danger-subtleA: var(--a-danger-400A);
137
191
  --a-border-danger-subtle: var(--a-danger-400);
138
192
  --a-border-danger: var(--a-danger-500);
139
193
  --a-border-warning-strong: var(--a-warning-600);
194
+ --a-border-warning-subtleA: var(--a-warning-400A);
140
195
  --a-border-warning-subtle: var(--a-warning-400);
141
196
  --a-border-warning: var(--a-warning-500);
142
197
  --a-border-success-strong: var(--a-success-600);
198
+ --a-border-success-subtleA: var(--a-success-400A);
143
199
  --a-border-success-subtle: var(--a-success-400);
144
200
  --a-border-success: var(--a-success-500);
145
201
  --a-border-accent-strong: var(--a-accent-600);
202
+ --a-border-accent-subtleA: var(--a-accent-400A);
146
203
  --a-border-accent-subtle: var(--a-accent-400);
147
204
  --a-border-accent: var(--a-accent-500);
148
205
  --a-border-neutral-strong: var(--a-neutral-600);
206
+ --a-border-neutral-subtleA: var(--a-neutral-400A);
149
207
  --a-border-neutral-subtle: var(--a-neutral-400);
150
208
  --a-border-neutral: var(--a-neutral-500);
151
209
  --a-text-icon: var(--a-neutral-600);
@@ -197,17 +255,18 @@
197
255
  --a-text-neutral: var(--a-neutral-700);
198
256
  --a-bg-sunken: var(--a-neutral-200);
199
257
  --a-bg-raised: var(--a-neutral-000);
200
- --a-bg-input: var(--a-neutral-000);
201
- --a-bg-default: var(--a-neutral-000);
202
258
  --a-bg-data-two-raised-hover: var(--a-data-two-200);
203
259
  --a-bg-data-two-raised: var(--a-data-two-100);
204
260
  --a-bg-data-two-strong-pressed: var(--a-data-two-800);
205
261
  --a-bg-data-two-strong-hover: var(--a-data-two-700);
206
262
  --a-bg-data-two-strong: var(--a-data-two-600);
207
- --a-bg-data-two-moderate-selected: var(--a-data-two-700);
263
+ --a-bg-data-two-moderate-pressedA: var(--a-data-two-400A);
208
264
  --a-bg-data-two-moderate-pressed: var(--a-data-two-400);
265
+ --a-bg-data-two-moderate-hoverA: var(--a-data-two-300A);
209
266
  --a-bg-data-two-moderate-hover: var(--a-data-two-300);
267
+ --a-bg-data-two-moderateA: var(--a-data-two-200A);
210
268
  --a-bg-data-two-moderate: var(--a-data-two-200);
269
+ --a-bg-data-two-hoverA: var(--a-data-two-200A);
211
270
  --a-bg-data-two-hover: var(--a-data-two-200);
212
271
  --a-bg-data-two: var(--a-data-two-100);
213
272
  --a-bg-data-one-raised-hover: var(--a-data-one-200);
@@ -215,10 +274,13 @@
215
274
  --a-bg-data-one-strong-pressed: var(--a-data-one-800);
216
275
  --a-bg-data-one-strong-hover: var(--a-data-one-700);
217
276
  --a-bg-data-one-strong: var(--a-data-one-600);
218
- --a-bg-data-one-moderate-selected: var(--a-data-one-700);
277
+ --a-bg-data-one-moderate-pressedA: var(--a-data-one-400A);
219
278
  --a-bg-data-one-moderate-pressed: var(--a-data-one-400);
279
+ --a-bg-data-one-moderate-hoverA: var(--a-data-one-300A);
220
280
  --a-bg-data-one-moderate-hover: var(--a-data-one-300);
281
+ --a-bg-data-one-moderateA: var(--a-data-one-200A);
221
282
  --a-bg-data-one-moderate: var(--a-data-one-200);
283
+ --a-bg-data-one-hoverA: var(--a-data-one-200A);
222
284
  --a-bg-data-one-hover: var(--a-data-one-200);
223
285
  --a-bg-data-one: var(--a-data-one-100);
224
286
  --a-bg-brand-three-raised-hover: var(--a-brand-three-200);
@@ -226,10 +288,13 @@
226
288
  --a-bg-brand-three-strong-pressed: var(--a-brand-three-800);
227
289
  --a-bg-brand-three-strong-hover: var(--a-brand-three-700);
228
290
  --a-bg-brand-three-strong: var(--a-brand-three-600);
229
- --a-bg-brand-three-moderate-selected: var(--a-brand-three-700);
291
+ --a-bg-brand-three-moderate-pressedA: var(--a-brand-three-400A);
230
292
  --a-bg-brand-three-moderate-pressed: var(--a-brand-three-400);
293
+ --a-bg-brand-three-moderate-hoverA: var(--a-brand-three-300A);
231
294
  --a-bg-brand-three-moderate-hover: var(--a-brand-three-300);
295
+ --a-bg-brand-three-moderateA: var(--a-brand-three-200A);
232
296
  --a-bg-brand-three-moderate: var(--a-brand-three-200);
297
+ --a-bg-brand-three-hoverA: var(--a-brand-three-200A);
233
298
  --a-bg-brand-three-hover: var(--a-brand-three-200);
234
299
  --a-bg-brand-three: var(--a-brand-three-100);
235
300
  --a-bg-brand-two-raised-hover: var(--a-brand-two-200);
@@ -237,10 +302,13 @@
237
302
  --a-bg-brand-two-strong-pressed: var(--a-brand-two-800);
238
303
  --a-bg-brand-two-strong-hover: var(--a-brand-two-700);
239
304
  --a-bg-brand-two-strong: var(--a-brand-two-600);
240
- --a-bg-brand-two-moderate-selected: var(--a-brand-two-700);
305
+ --a-bg-brand-two-moderate-pressedA: var(--a-brand-two-400A);
241
306
  --a-bg-brand-two-moderate-pressed: var(--a-brand-two-400);
307
+ --a-bg-brand-two-moderate-hoverA: var(--a-brand-two-300A);
242
308
  --a-bg-brand-two-moderate-hover: var(--a-brand-two-300);
309
+ --a-bg-brand-two-moderateA: var(--a-brand-two-200A);
243
310
  --a-bg-brand-two-moderate: var(--a-brand-two-200);
311
+ --a-bg-brand-two-hoverA: var(--a-brand-two-200A);
244
312
  --a-bg-brand-two-hover: var(--a-brand-two-200);
245
313
  --a-bg-brand-two: var(--a-brand-two-100);
246
314
  --a-bg-brand-one-raised-hover: var(--a-brand-one-200);
@@ -248,10 +316,13 @@
248
316
  --a-bg-brand-one-strong-pressed: var(--a-brand-one-800);
249
317
  --a-bg-brand-one-strong-hover: var(--a-brand-one-700);
250
318
  --a-bg-brand-one-strong: var(--a-brand-one-600);
251
- --a-bg-brand-one-moderate-selected: var(--a-brand-one-700);
319
+ --a-bg-brand-one-moderate-pressedA: var(--a-brand-one-400A);
252
320
  --a-bg-brand-one-moderate-pressed: var(--a-brand-one-400);
321
+ --a-bg-brand-one-moderate-hoverA: var(--a-brand-one-300A);
253
322
  --a-bg-brand-one-moderate-hover: var(--a-brand-one-300);
323
+ --a-bg-brand-one-moderateA: var(--a-brand-one-200A);
254
324
  --a-bg-brand-one-moderate: var(--a-brand-one-200);
325
+ --a-bg-brand-one-hoverA: var(--a-brand-one-200A);
255
326
  --a-bg-brand-one-hover: var(--a-brand-one-200);
256
327
  --a-bg-brand-one: var(--a-brand-one-100);
257
328
  --a-bg-info-raised-hover: var(--a-info-200);
@@ -259,10 +330,13 @@
259
330
  --a-bg-info-strong-pressed: var(--a-info-800);
260
331
  --a-bg-info-strong-hover: var(--a-info-700);
261
332
  --a-bg-info-strong: var(--a-info-600);
262
- --a-bg-info-moderate-selected: var(--a-info-700);
333
+ --a-bg-info-moderate-pressedA: var(--a-info-400A);
263
334
  --a-bg-info-moderate-pressed: var(--a-info-400);
335
+ --a-bg-info-moderate-hoverA: var(--a-info-300A);
264
336
  --a-bg-info-moderate-hover: var(--a-info-300);
337
+ --a-bg-info-moderateA: var(--a-info-200A);
265
338
  --a-bg-info-moderate: var(--a-info-200);
339
+ --a-bg-info-hoverA: var(--a-info-200A);
266
340
  --a-bg-info-hover: var(--a-info-200);
267
341
  --a-bg-info: var(--a-info-100);
268
342
  --a-bg-danger-raised-hover: var(--a-danger-200);
@@ -270,10 +344,13 @@
270
344
  --a-bg-danger-strong-pressed: var(--a-danger-800);
271
345
  --a-bg-danger-strong-hover: var(--a-danger-700);
272
346
  --a-bg-danger-strong: var(--a-danger-600);
273
- --a-bg-danger-moderate-selected: var(--a-danger-700);
347
+ --a-bg-danger-moderate-pressedA: var(--a-danger-400A);
274
348
  --a-bg-danger-moderate-pressed: var(--a-danger-400);
349
+ --a-bg-danger-moderate-hoverA: var(--a-danger-300A);
275
350
  --a-bg-danger-moderate-hover: var(--a-danger-300);
351
+ --a-bg-danger-moderateA: var(--a-danger-200A);
276
352
  --a-bg-danger-moderate: var(--a-danger-200);
353
+ --a-bg-danger-hoverA: var(--a-danger-200A);
277
354
  --a-bg-danger-hover: var(--a-danger-200);
278
355
  --a-bg-danger: var(--a-danger-100);
279
356
  --a-bg-warning-raised-hover: var(--a-warning-200);
@@ -281,10 +358,13 @@
281
358
  --a-bg-warning-strong-pressed: var(--a-warning-800);
282
359
  --a-bg-warning-strong-hover: var(--a-warning-700);
283
360
  --a-bg-warning-strong: var(--a-warning-600);
284
- --a-bg-warning-moderate-selected: var(--a-warning-700);
361
+ --a-bg-warning-moderate-pressedA: var(--a-warning-400A);
285
362
  --a-bg-warning-moderate-pressed: var(--a-warning-400);
363
+ --a-bg-warning-moderate-hoverA: var(--a-warning-300A);
286
364
  --a-bg-warning-moderate-hover: var(--a-warning-300);
365
+ --a-bg-warning-moderateA: var(--a-warning-200A);
287
366
  --a-bg-warning-moderate: var(--a-warning-200);
367
+ --a-bg-warning-hoverA: var(--a-warning-200A);
288
368
  --a-bg-warning-hover: var(--a-warning-200);
289
369
  --a-bg-warning: var(--a-warning-100);
290
370
  --a-bg-success-raised-hover: var(--a-success-200);
@@ -292,10 +372,13 @@
292
372
  --a-bg-success-strong-pressed: var(--a-success-800);
293
373
  --a-bg-success-strong-hover: var(--a-success-700);
294
374
  --a-bg-success-strong: var(--a-success-600);
295
- --a-bg-success-moderate-selected: var(--a-success-700);
375
+ --a-bg-success-moderate-pressedA: var(--a-success-400A);
296
376
  --a-bg-success-moderate-pressed: var(--a-success-400);
377
+ --a-bg-success-moderate-hoverA: var(--a-success-300A);
297
378
  --a-bg-success-moderate-hover: var(--a-success-300);
379
+ --a-bg-success-moderateA: var(--a-success-200A);
298
380
  --a-bg-success-moderate: var(--a-success-200);
381
+ --a-bg-success-hoverA: var(--a-success-200A);
299
382
  --a-bg-success-hover: var(--a-success-200);
300
383
  --a-bg-success: var(--a-success-100);
301
384
  --a-bg-accent-raised-hover: var(--a-accent-200);
@@ -303,10 +386,13 @@
303
386
  --a-bg-accent-strong-pressed: var(--a-accent-800);
304
387
  --a-bg-accent-strong-hover: var(--a-accent-700);
305
388
  --a-bg-accent-strong: var(--a-accent-600);
306
- --a-bg-accent-moderate-selected: var(--a-accent-700);
389
+ --a-bg-accent-moderate-pressedA: var(--a-accent-400A);
307
390
  --a-bg-accent-moderate-pressed: var(--a-accent-400);
391
+ --a-bg-accent-moderate-hoverA: var(--a-accent-300A);
308
392
  --a-bg-accent-moderate-hover: var(--a-accent-300);
393
+ --a-bg-accent-moderateA: var(--a-accent-200A);
309
394
  --a-bg-accent-moderate: var(--a-accent-200);
395
+ --a-bg-accent-hoverA: var(--a-accent-200A);
310
396
  --a-bg-accent-hover: var(--a-accent-200);
311
397
  --a-bg-accent: var(--a-accent-100);
312
398
  --a-bg-neutral-raised-hover: var(--a-neutral-200);
@@ -314,15 +400,22 @@
314
400
  --a-bg-neutral-strong-pressed: var(--a-neutral-800);
315
401
  --a-bg-neutral-strong-hover: var(--a-neutral-700);
316
402
  --a-bg-neutral-strong: var(--a-neutral-600);
317
- --a-bg-neutral-moderate-selected: var(--a-neutral-700);
403
+ --a-bg-neutral-moderate-pressedA: var(--a-neutral-400A);
318
404
  --a-bg-neutral-moderate-pressed: var(--a-neutral-400);
405
+ --a-bg-neutral-moderate-hoverA: var(--a-neutral-300A);
319
406
  --a-bg-neutral-moderate-hover: var(--a-neutral-300);
407
+ --a-bg-neutral-moderateA: var(--a-neutral-200A);
320
408
  --a-bg-neutral-moderate: var(--a-neutral-200);
409
+ --a-bg-neutral-hoverA: var(--a-neutral-200A);
321
410
  --a-bg-neutral-hover: var(--a-neutral-200);
322
411
  --a-bg-neutral: var(--a-neutral-100);
323
412
  }
324
413
 
325
414
  .dark, .dark-theme {
415
+ --a-data-two-400A: #fbf50029;
416
+ --a-data-two-300A: #fce9001d;
417
+ --a-data-two-200A: #f6cf0016;
418
+ --a-data-two-100A: #fcbf000f;
326
419
  --a-data-two-1000: #c5d14c;
327
420
  --a-data-two-900: #a9b325;
328
421
  --a-data-two-800: #99a200;
@@ -333,6 +426,10 @@
333
426
  --a-data-two-300: #292d00;
334
427
  --a-data-two-200: #222500;
335
428
  --a-data-two-100: #1c1f00;
429
+ --a-data-one-400A: #fdb3ee2f;
430
+ --a-data-one-300A: #ff99e423;
431
+ --a-data-one-200A: #fa7dd31b;
432
+ --a-data-one-100A: #f64fb616;
336
433
  --a-data-one-1000: #cdc5d9;
337
434
  --a-data-one-900: #b2a7c3;
338
435
  --a-data-one-800: #a495b7;
@@ -343,6 +440,10 @@
343
440
  --a-data-one-300: #2f273a;
344
441
  --a-data-one-200: #272032;
345
442
  --a-data-one-100: #221a2c;
443
+ --a-brand-three-400A: #aaefff29;
444
+ --a-brand-three-300A: #abf7f71a;
445
+ --a-brand-three-200A: #a4f6e211;
446
+ --a-brand-three-100A: #8efbd20a;
346
447
  --a-brand-three-1000: #b7cbd7;
347
448
  --a-brand-three-900: #93afc0;
348
449
  --a-brand-three-800: #7f9fb3;
@@ -353,6 +454,10 @@
353
454
  --a-brand-three-300: #1e2c35;
354
455
  --a-brand-three-200: #18242c;
355
456
  --a-brand-three-100: #131e26;
457
+ --a-brand-two-400A: #fc83403f;
458
+ --a-brand-two-300A: #fe621032;
459
+ --a-brand-two-200A: #fb45002a;
460
+ --a-brand-two-100A: #fe1d0021;
356
461
  --a-brand-two-1000: #e3c2b1;
357
462
  --a-brand-two-900: #d1a08c;
358
463
  --a-brand-two-800: #c78e79;
@@ -363,6 +468,10 @@
363
468
  --a-brand-two-300: #3d241c;
364
469
  --a-brand-two-200: #351d15;
365
470
  --a-brand-two-100: #2d160e;
471
+ --a-brand-one-400A: #fe648144;
472
+ --a-brand-one-300A: #fb486438;
473
+ --a-brand-one-200A: #fd264b2f;
474
+ --a-brand-one-100A: #fa022627;
366
475
  --a-brand-one-1000: #e1c0cc;
367
476
  --a-brand-one-900: #cf9eb1;
368
477
  --a-brand-one-800: #c58aa2;
@@ -373,6 +482,10 @@
373
482
  --a-brand-one-300: #42202e;
374
483
  --a-brand-one-200: #3a1827;
375
484
  --a-brand-one-100: #321220;
485
+ --a-info-400A: #aaefff29;
486
+ --a-info-300A: #abf7f71a;
487
+ --a-info-200A: #a4f6e211;
488
+ --a-info-100A: #8efbd20a;
376
489
  --a-info-1000: #b7cbd7;
377
490
  --a-info-900: #93afc0;
378
491
  --a-info-800: #7f9fb3;
@@ -383,6 +496,10 @@
383
496
  --a-info-300: #1e2c35;
384
497
  --a-info-200: #18242c;
385
498
  --a-info-100: #131e26;
499
+ --a-danger-400A: #ff362556;
500
+ --a-danger-300A: #ff150348;
501
+ --a-danger-200A: #fc00003f;
502
+ --a-danger-100A: #ff000036;
386
503
  --a-danger-1000: #f6b7cd;
387
504
  --a-danger-900: #f28ea2;
388
505
  --a-danger-800: #ee7685;
@@ -393,6 +510,10 @@
393
510
  --a-danger-300: #521517;
394
511
  --a-danger-200: #490b10;
395
512
  --a-danger-100: #410409;
513
+ --a-warning-400A: #fd60084b;
514
+ --a-warning-300A: #fc3f003d;
515
+ --a-warning-200A: #fe1f0033;
516
+ --a-warning-100A: #fc00002c;
396
517
  --a-warning-1000: #f5bf6d;
397
518
  --a-warning-900: #ed974b;
398
519
  --a-warning-800: #e78040;
@@ -403,6 +524,10 @@
403
524
  --a-warning-300: #471f0c;
404
525
  --a-warning-200: #3e1704;
405
526
  --a-warning-100: #371100;
527
+ --a-success-400A: #48fd3c2c;
528
+ --a-success-300A: #00fc001f;
529
+ --a-success-200A: #00fd0016;
530
+ --a-success-100A: #00f50010;
406
531
  --a-success-1000: #a4d4ad;
407
532
  --a-success-900: #78ba87;
408
533
  --a-success-800: #5eab72;
@@ -413,6 +538,10 @@
413
538
  --a-success-300: #0b3118;
414
539
  --a-success-200: #032911;
415
540
  --a-success-100: #00230b;
541
+ --a-accent-400A: #70b3fe37;
542
+ --a-accent-300A: #5dacfe27;
543
+ --a-accent-200A: #50a3f91b;
544
+ --a-accent-100A: #2e95ff10;
416
545
  --a-accent-1000: #b0caf1;
417
546
  --a-accent-900: #84aee6;
418
547
  --a-accent-800: #6d9ddd;
@@ -423,6 +552,10 @@
423
552
  --a-accent-300: #1a2c41;
424
553
  --a-accent-200: #152436;
425
554
  --a-accent-100: #101d2d;
555
+ --a-neutral-400A: #e0edfe27;
556
+ --a-neutral-300A: #d7defa1c;
557
+ --a-neutral-200A: #cad1f613;
558
+ --a-neutral-100A: #c8cff00b;
426
559
  --a-neutral-000: black;
427
560
  --a-neutral-1000: #c4c9d0;
428
561
  --a-neutral-900: #a5acb6;
@@ -436,42 +569,55 @@
436
569
  --a-neutral-100: #161d28;
437
570
  --a-bg-overlay: #0214317d;
438
571
  --a-bg-sunken: #07090d;
572
+ --a-bg-input: #0e151f80;
439
573
  --a-bg-default: #0e151f;
440
574
  --a-border-focus: var(--a-accent-700);
441
575
  --a-border-strong: var(--a-neutral-600);
576
+ --a-border-subtleA: var(--a-neutral-400A);
442
577
  --a-border-subtle: var(--a-neutral-400);
443
578
  --a-border-default: var(--a-neutral-500);
444
579
  --a-border-data-two-strong: var(--a-data-two-600);
580
+ --a-border-data-two-subtleA: var(--a-data-two-400A);
445
581
  --a-border-data-two-subtle: var(--a-data-two-400);
446
582
  --a-border-data-two: var(--a-data-two-500);
447
583
  --a-border-data-one-strong: var(--a-data-one-600);
584
+ --a-border-data-one-subtleA: var(--a-data-one-400A);
448
585
  --a-border-data-one-subtle: var(--a-data-one-400);
449
586
  --a-border-data-one: var(--a-data-one-500);
450
587
  --a-border-brand-three-strong: var(--a-brand-three-600);
588
+ --a-border-brand-three-subtleA: var(--a-brand-three-400A);
451
589
  --a-border-brand-three-subtle: var(--a-brand-three-400);
452
590
  --a-border-brand-three: var(--a-brand-three-500);
453
591
  --a-border-brand-two-strong: var(--a-brand-two-600);
592
+ --a-border-brand-two-subtleA: var(--a-brand-two-400A);
454
593
  --a-border-brand-two-subtle: var(--a-brand-two-400);
455
594
  --a-border-brand-two: var(--a-brand-two-500);
456
595
  --a-border-brand-one-strong: var(--a-brand-one-600);
596
+ --a-border-brand-one-subtleA: var(--a-brand-one-400A);
457
597
  --a-border-brand-one-subtle: var(--a-brand-one-400);
458
598
  --a-border-brand-one: var(--a-brand-one-500);
459
599
  --a-border-info-strong: var(--a-info-600);
600
+ --a-border-info-subtleA: var(--a-info-400A);
460
601
  --a-border-info-subtle: var(--a-info-400);
461
602
  --a-border-info: var(--a-info-500);
462
603
  --a-border-danger-strong: var(--a-danger-600);
604
+ --a-border-danger-subtleA: var(--a-danger-400A);
463
605
  --a-border-danger-subtle: var(--a-danger-400);
464
606
  --a-border-danger: var(--a-danger-500);
465
607
  --a-border-warning-strong: var(--a-warning-600);
608
+ --a-border-warning-subtleA: var(--a-warning-400A);
466
609
  --a-border-warning-subtle: var(--a-warning-400);
467
610
  --a-border-warning: var(--a-warning-500);
468
611
  --a-border-success-strong: var(--a-success-600);
612
+ --a-border-success-subtleA: var(--a-success-400A);
469
613
  --a-border-success-subtle: var(--a-success-400);
470
614
  --a-border-success: var(--a-success-500);
471
615
  --a-border-accent-strong: var(--a-accent-600);
616
+ --a-border-accent-subtleA: var(--a-accent-400A);
472
617
  --a-border-accent-subtle: var(--a-accent-400);
473
618
  --a-border-accent: var(--a-accent-500);
474
619
  --a-border-neutral-strong: var(--a-neutral-600);
620
+ --a-border-neutral-subtleA: var(--a-neutral-400A);
475
621
  --a-border-neutral-subtle: var(--a-neutral-400);
476
622
  --a-border-neutral: var(--a-neutral-500);
477
623
  --a-text-icon: var(--a-neutral-600);
@@ -522,131 +668,196 @@
522
668
  --a-text-neutral-strong: var(--a-neutral-900);
523
669
  --a-text-neutral: var(--a-neutral-700);
524
670
  --a-bg-raised: var(--a-neutral-200);
525
- --a-bg-input: var(--a-neutral-000);
526
- --a-bg-data-two-raised-hover: var(--a-data-two-200);
527
- --a-bg-data-two-raised: var(--a-data-two-100);
671
+ --a-bg-data-two-raised-hover: var(--a-data-two-300);
672
+ --a-bg-data-two-raised: var(--a-data-two-200);
528
673
  --a-bg-data-two-strong-pressed: var(--a-data-two-800);
529
674
  --a-bg-data-two-strong-hover: var(--a-data-two-700);
530
675
  --a-bg-data-two-strong: var(--a-data-two-600);
531
- --a-bg-data-two-moderate-selected: var(--a-data-two-700);
676
+ --a-bg-data-two-moderate-pressedA: var(--a-data-two-400A);
532
677
  --a-bg-data-two-moderate-pressed: var(--a-data-two-400);
678
+ --a-bg-data-two-moderate-hoverA: var(--a-data-two-300A);
533
679
  --a-bg-data-two-moderate-hover: var(--a-data-two-300);
680
+ --a-bg-data-two-moderateA: var(--a-data-two-200A);
534
681
  --a-bg-data-two-moderate: var(--a-data-two-200);
682
+ --a-bg-data-two-hoverA: var(--a-data-two-200A);
535
683
  --a-bg-data-two-hover: var(--a-data-two-200);
536
684
  --a-bg-data-two: var(--a-data-two-100);
537
- --a-bg-data-one-raised-hover: var(--a-data-one-200);
538
- --a-bg-data-one-raised: var(--a-data-one-100);
685
+ --a-bg-data-one-raised-hover: var(--a-data-one-300);
686
+ --a-bg-data-one-raised: var(--a-data-one-200);
539
687
  --a-bg-data-one-strong-pressed: var(--a-data-one-800);
540
688
  --a-bg-data-one-strong-hover: var(--a-data-one-700);
541
689
  --a-bg-data-one-strong: var(--a-data-one-600);
542
- --a-bg-data-one-moderate-selected: var(--a-data-one-700);
690
+ --a-bg-data-one-moderate-pressedA: var(--a-data-one-400A);
543
691
  --a-bg-data-one-moderate-pressed: var(--a-data-one-400);
692
+ --a-bg-data-one-moderate-hoverA: var(--a-data-one-300A);
544
693
  --a-bg-data-one-moderate-hover: var(--a-data-one-300);
694
+ --a-bg-data-one-moderateA: var(--a-data-one-200A);
545
695
  --a-bg-data-one-moderate: var(--a-data-one-200);
696
+ --a-bg-data-one-hoverA: var(--a-data-one-200A);
546
697
  --a-bg-data-one-hover: var(--a-data-one-200);
547
698
  --a-bg-data-one: var(--a-data-one-100);
548
- --a-bg-brand-three-raised-hover: var(--a-brand-three-200);
549
- --a-bg-brand-three-raised: var(--a-brand-three-100);
699
+ --a-bg-brand-three-raised-hover: var(--a-brand-three-300);
700
+ --a-bg-brand-three-raised: var(--a-brand-three-200);
550
701
  --a-bg-brand-three-strong-pressed: var(--a-brand-three-800);
551
702
  --a-bg-brand-three-strong-hover: var(--a-brand-three-700);
552
703
  --a-bg-brand-three-strong: var(--a-brand-three-600);
553
- --a-bg-brand-three-moderate-selected: var(--a-brand-three-700);
704
+ --a-bg-brand-three-moderate-pressedA: var(--a-brand-three-400A);
554
705
  --a-bg-brand-three-moderate-pressed: var(--a-brand-three-400);
706
+ --a-bg-brand-three-moderate-hoverA: var(--a-brand-three-300A);
555
707
  --a-bg-brand-three-moderate-hover: var(--a-brand-three-300);
708
+ --a-bg-brand-three-moderateA: var(--a-brand-three-200A);
556
709
  --a-bg-brand-three-moderate: var(--a-brand-three-200);
710
+ --a-bg-brand-three-hoverA: var(--a-brand-three-200A);
557
711
  --a-bg-brand-three-hover: var(--a-brand-three-200);
558
712
  --a-bg-brand-three: var(--a-brand-three-100);
559
- --a-bg-brand-two-raised-hover: var(--a-brand-two-200);
560
- --a-bg-brand-two-raised: var(--a-brand-two-100);
713
+ --a-bg-brand-two-raised-hover: var(--a-brand-two-300);
714
+ --a-bg-brand-two-raised: var(--a-brand-two-200);
561
715
  --a-bg-brand-two-strong-pressed: var(--a-brand-two-800);
562
716
  --a-bg-brand-two-strong-hover: var(--a-brand-two-700);
563
717
  --a-bg-brand-two-strong: var(--a-brand-two-600);
564
- --a-bg-brand-two-moderate-selected: var(--a-brand-two-700);
718
+ --a-bg-brand-two-moderate-pressedA: var(--a-brand-two-400A);
565
719
  --a-bg-brand-two-moderate-pressed: var(--a-brand-two-400);
720
+ --a-bg-brand-two-moderate-hoverA: var(--a-brand-two-300A);
566
721
  --a-bg-brand-two-moderate-hover: var(--a-brand-two-300);
722
+ --a-bg-brand-two-moderateA: var(--a-brand-two-200A);
567
723
  --a-bg-brand-two-moderate: var(--a-brand-two-200);
724
+ --a-bg-brand-two-hoverA: var(--a-brand-two-200A);
568
725
  --a-bg-brand-two-hover: var(--a-brand-two-200);
569
726
  --a-bg-brand-two: var(--a-brand-two-100);
570
- --a-bg-brand-one-raised-hover: var(--a-brand-one-200);
571
- --a-bg-brand-one-raised: var(--a-brand-one-100);
727
+ --a-bg-brand-one-raised-hover: var(--a-brand-one-300);
728
+ --a-bg-brand-one-raised: var(--a-brand-one-200);
572
729
  --a-bg-brand-one-strong-pressed: var(--a-brand-one-800);
573
730
  --a-bg-brand-one-strong-hover: var(--a-brand-one-700);
574
731
  --a-bg-brand-one-strong: var(--a-brand-one-600);
575
- --a-bg-brand-one-moderate-selected: var(--a-brand-one-700);
732
+ --a-bg-brand-one-moderate-pressedA: var(--a-brand-one-400A);
576
733
  --a-bg-brand-one-moderate-pressed: var(--a-brand-one-400);
734
+ --a-bg-brand-one-moderate-hoverA: var(--a-brand-one-300A);
577
735
  --a-bg-brand-one-moderate-hover: var(--a-brand-one-300);
736
+ --a-bg-brand-one-moderateA: var(--a-brand-one-200A);
578
737
  --a-bg-brand-one-moderate: var(--a-brand-one-200);
738
+ --a-bg-brand-one-hoverA: var(--a-brand-one-200A);
579
739
  --a-bg-brand-one-hover: var(--a-brand-one-200);
580
740
  --a-bg-brand-one: var(--a-brand-one-100);
581
- --a-bg-info-raised-hover: var(--a-info-200);
582
- --a-bg-info-raised: var(--a-info-100);
741
+ --a-bg-info-raised-hover: var(--a-info-300);
742
+ --a-bg-info-raised: var(--a-info-200);
583
743
  --a-bg-info-strong-pressed: var(--a-info-800);
584
744
  --a-bg-info-strong-hover: var(--a-info-700);
585
745
  --a-bg-info-strong: var(--a-info-600);
586
- --a-bg-info-moderate-selected: var(--a-info-700);
746
+ --a-bg-info-moderate-pressedA: var(--a-info-400A);
587
747
  --a-bg-info-moderate-pressed: var(--a-info-400);
748
+ --a-bg-info-moderate-hoverA: var(--a-info-300A);
588
749
  --a-bg-info-moderate-hover: var(--a-info-300);
750
+ --a-bg-info-moderateA: var(--a-info-200A);
589
751
  --a-bg-info-moderate: var(--a-info-200);
752
+ --a-bg-info-hoverA: var(--a-info-200A);
590
753
  --a-bg-info-hover: var(--a-info-200);
591
754
  --a-bg-info: var(--a-info-100);
592
- --a-bg-danger-raised-hover: var(--a-danger-200);
593
- --a-bg-danger-raised: var(--a-danger-100);
755
+ --a-bg-danger-raised-hover: var(--a-danger-300);
756
+ --a-bg-danger-raised: var(--a-danger-200);
594
757
  --a-bg-danger-strong-pressed: var(--a-danger-800);
595
758
  --a-bg-danger-strong-hover: var(--a-danger-700);
596
759
  --a-bg-danger-strong: var(--a-danger-600);
597
- --a-bg-danger-moderate-selected: var(--a-danger-700);
760
+ --a-bg-danger-moderate-pressedA: var(--a-danger-400A);
598
761
  --a-bg-danger-moderate-pressed: var(--a-danger-400);
762
+ --a-bg-danger-moderate-hoverA: var(--a-danger-300A);
599
763
  --a-bg-danger-moderate-hover: var(--a-danger-300);
764
+ --a-bg-danger-moderateA: var(--a-danger-200A);
600
765
  --a-bg-danger-moderate: var(--a-danger-200);
766
+ --a-bg-danger-hoverA: var(--a-danger-200A);
601
767
  --a-bg-danger-hover: var(--a-danger-200);
602
768
  --a-bg-danger: var(--a-danger-100);
603
- --a-bg-warning-raised-hover: var(--a-warning-200);
604
- --a-bg-warning-raised: var(--a-warning-100);
769
+ --a-bg-warning-raised-hover: var(--a-warning-300);
770
+ --a-bg-warning-raised: var(--a-warning-200);
605
771
  --a-bg-warning-strong-pressed: var(--a-warning-800);
606
772
  --a-bg-warning-strong-hover: var(--a-warning-700);
607
773
  --a-bg-warning-strong: var(--a-warning-600);
608
- --a-bg-warning-moderate-selected: var(--a-warning-700);
774
+ --a-bg-warning-moderate-pressedA: var(--a-warning-400A);
609
775
  --a-bg-warning-moderate-pressed: var(--a-warning-400);
776
+ --a-bg-warning-moderate-hoverA: var(--a-warning-300A);
610
777
  --a-bg-warning-moderate-hover: var(--a-warning-300);
778
+ --a-bg-warning-moderateA: var(--a-warning-200A);
611
779
  --a-bg-warning-moderate: var(--a-warning-200);
780
+ --a-bg-warning-hoverA: var(--a-warning-200A);
612
781
  --a-bg-warning-hover: var(--a-warning-200);
613
782
  --a-bg-warning: var(--a-warning-100);
614
- --a-bg-success-raised-hover: var(--a-success-200);
615
- --a-bg-success-raised: var(--a-success-100);
783
+ --a-bg-success-raised-hover: var(--a-success-300);
784
+ --a-bg-success-raised: var(--a-success-200);
616
785
  --a-bg-success-strong-pressed: var(--a-success-800);
617
786
  --a-bg-success-strong-hover: var(--a-success-700);
618
787
  --a-bg-success-strong: var(--a-success-600);
619
- --a-bg-success-moderate-selected: var(--a-success-700);
788
+ --a-bg-success-moderate-pressedA: var(--a-success-400A);
620
789
  --a-bg-success-moderate-pressed: var(--a-success-400);
790
+ --a-bg-success-moderate-hoverA: var(--a-success-300A);
621
791
  --a-bg-success-moderate-hover: var(--a-success-300);
792
+ --a-bg-success-moderateA: var(--a-success-200A);
622
793
  --a-bg-success-moderate: var(--a-success-200);
794
+ --a-bg-success-hoverA: var(--a-success-200A);
623
795
  --a-bg-success-hover: var(--a-success-200);
624
796
  --a-bg-success: var(--a-success-100);
625
- --a-bg-accent-raised-hover: var(--a-accent-200);
626
- --a-bg-accent-raised: var(--a-accent-100);
797
+ --a-bg-accent-raised-hover: var(--a-accent-300);
798
+ --a-bg-accent-raised: var(--a-accent-200);
627
799
  --a-bg-accent-strong-pressed: var(--a-accent-800);
628
800
  --a-bg-accent-strong-hover: var(--a-accent-700);
629
801
  --a-bg-accent-strong: var(--a-accent-600);
630
- --a-bg-accent-moderate-selected: var(--a-accent-700);
802
+ --a-bg-accent-moderate-pressedA: var(--a-accent-400A);
631
803
  --a-bg-accent-moderate-pressed: var(--a-accent-400);
804
+ --a-bg-accent-moderate-hoverA: var(--a-accent-300A);
632
805
  --a-bg-accent-moderate-hover: var(--a-accent-300);
806
+ --a-bg-accent-moderateA: var(--a-accent-200A);
633
807
  --a-bg-accent-moderate: var(--a-accent-200);
808
+ --a-bg-accent-hoverA: var(--a-accent-200A);
634
809
  --a-bg-accent-hover: var(--a-accent-200);
635
810
  --a-bg-accent: var(--a-accent-100);
636
- --a-bg-neutral-raised-hover: var(--a-neutral-200);
637
- --a-bg-neutral-raised: var(--a-neutral-100);
811
+ --a-bg-neutral-raised-hover: var(--a-neutral-300);
812
+ --a-bg-neutral-raised: var(--a-neutral-200);
638
813
  --a-bg-neutral-strong-pressed: var(--a-neutral-800);
639
814
  --a-bg-neutral-strong-hover: var(--a-neutral-700);
640
815
  --a-bg-neutral-strong: var(--a-neutral-600);
641
- --a-bg-neutral-moderate-selected: var(--a-neutral-700);
816
+ --a-bg-neutral-moderate-pressedA: var(--a-neutral-400A);
642
817
  --a-bg-neutral-moderate-pressed: var(--a-neutral-400);
818
+ --a-bg-neutral-moderate-hoverA: var(--a-neutral-300A);
643
819
  --a-bg-neutral-moderate-hover: var(--a-neutral-300);
820
+ --a-bg-neutral-moderateA: var(--a-neutral-200A);
644
821
  --a-bg-neutral-moderate: var(--a-neutral-200);
822
+ --a-bg-neutral-hoverA: var(--a-neutral-200A);
645
823
  --a-bg-neutral-hover: var(--a-neutral-200);
646
824
  --a-bg-neutral: var(--a-neutral-100);
647
825
  }
648
826
 
649
827
  :root, :host {
828
+ --a-font-weight-regular: 400;
829
+ --a-font-weight-bold: 600;
830
+ --a-font-size-small: .875rem;
831
+ --a-font-size-medium: 1rem;
832
+ --a-font-size-large: 1.125rem;
833
+ --a-font-size-xlarge: 1.25rem;
834
+ --a-font-size-heading-xsmall: 1.125rem;
835
+ --a-font-size-heading-small: 1.25rem;
836
+ --a-font-size-heading-medium: 1.5rem;
837
+ --a-font-size-heading-large: 1.75rem;
838
+ --a-font-size-heading-xlarge: 2rem;
839
+ --a-font-size-heading-2xlarge: 2.5rem;
840
+ --a-font-line-height-medium: 1.25rem;
841
+ --a-font-line-height-large: 1.5rem;
842
+ --a-font-line-height-xlarge: 1.75rem;
843
+ --a-font-line-height-heading-xsmall: 1.5rem;
844
+ --a-font-line-height-heading-small: 1.75rem;
845
+ --a-font-line-height-heading-medium: 2rem;
846
+ --a-font-line-height-heading-large: 2.25rem;
847
+ --a-font-line-height-heading-xlarge: 2.5rem;
848
+ --a-font-line-height-heading-2xlarge: 3.25rem;
849
+ --a-font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
850
+ --a-breakpoint-2xl-down: 1439px;
851
+ --a-breakpoint-2xl: 1440px;
852
+ --a-breakpoint-xl-down: 1279px;
853
+ --a-breakpoint-xl: 1280px;
854
+ --a-breakpoint-lg-down: 1023px;
855
+ --a-breakpoint-lg: 1024px;
856
+ --a-breakpoint-md-down: 767px;
857
+ --a-breakpoint-md: 768px;
858
+ --a-breakpoint-sm-down: 479px;
859
+ --a-breakpoint-sm: 480px;
860
+ --a-breakpoint-xs: 0;
650
861
  --a-border-radius-full: 9999px;
651
862
  --a-border-radius-xlarge: 12px;
652
863
  --a-border-radius-large: 8px;