@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.
@@ -3,6 +3,10 @@
3
3
  */
4
4
 
5
5
  .dark, .dark-theme {
6
+ --a-data-two-400A: #fbf50029;
7
+ --a-data-two-300A: #fce9001d;
8
+ --a-data-two-200A: #f6cf0016;
9
+ --a-data-two-100A: #fcbf000f;
6
10
  --a-data-two-1000: #c5d14c;
7
11
  --a-data-two-900: #a9b325;
8
12
  --a-data-two-800: #99a200;
@@ -13,6 +17,10 @@
13
17
  --a-data-two-300: #292d00;
14
18
  --a-data-two-200: #222500;
15
19
  --a-data-two-100: #1c1f00;
20
+ --a-data-one-400A: #fdb3ee2f;
21
+ --a-data-one-300A: #ff99e423;
22
+ --a-data-one-200A: #fa7dd31b;
23
+ --a-data-one-100A: #f64fb616;
16
24
  --a-data-one-1000: #cdc5d9;
17
25
  --a-data-one-900: #b2a7c3;
18
26
  --a-data-one-800: #a495b7;
@@ -23,6 +31,10 @@
23
31
  --a-data-one-300: #2f273a;
24
32
  --a-data-one-200: #272032;
25
33
  --a-data-one-100: #221a2c;
34
+ --a-brand-three-400A: #aaefff29;
35
+ --a-brand-three-300A: #abf7f71a;
36
+ --a-brand-three-200A: #a4f6e211;
37
+ --a-brand-three-100A: #8efbd20a;
26
38
  --a-brand-three-1000: #b7cbd7;
27
39
  --a-brand-three-900: #93afc0;
28
40
  --a-brand-three-800: #7f9fb3;
@@ -33,6 +45,10 @@
33
45
  --a-brand-three-300: #1e2c35;
34
46
  --a-brand-three-200: #18242c;
35
47
  --a-brand-three-100: #131e26;
48
+ --a-brand-two-400A: #fc83403f;
49
+ --a-brand-two-300A: #fe621032;
50
+ --a-brand-two-200A: #fb45002a;
51
+ --a-brand-two-100A: #fe1d0021;
36
52
  --a-brand-two-1000: #e3c2b1;
37
53
  --a-brand-two-900: #d1a08c;
38
54
  --a-brand-two-800: #c78e79;
@@ -43,6 +59,10 @@
43
59
  --a-brand-two-300: #3d241c;
44
60
  --a-brand-two-200: #351d15;
45
61
  --a-brand-two-100: #2d160e;
62
+ --a-brand-one-400A: #fe648144;
63
+ --a-brand-one-300A: #fb486438;
64
+ --a-brand-one-200A: #fd264b2f;
65
+ --a-brand-one-100A: #fa022627;
46
66
  --a-brand-one-1000: #e1c0cc;
47
67
  --a-brand-one-900: #cf9eb1;
48
68
  --a-brand-one-800: #c58aa2;
@@ -53,6 +73,10 @@
53
73
  --a-brand-one-300: #42202e;
54
74
  --a-brand-one-200: #3a1827;
55
75
  --a-brand-one-100: #321220;
76
+ --a-info-400A: #aaefff29;
77
+ --a-info-300A: #abf7f71a;
78
+ --a-info-200A: #a4f6e211;
79
+ --a-info-100A: #8efbd20a;
56
80
  --a-info-1000: #b7cbd7;
57
81
  --a-info-900: #93afc0;
58
82
  --a-info-800: #7f9fb3;
@@ -63,6 +87,10 @@
63
87
  --a-info-300: #1e2c35;
64
88
  --a-info-200: #18242c;
65
89
  --a-info-100: #131e26;
90
+ --a-danger-400A: #ff362556;
91
+ --a-danger-300A: #ff150348;
92
+ --a-danger-200A: #fc00003f;
93
+ --a-danger-100A: #ff000036;
66
94
  --a-danger-1000: #f6b7cd;
67
95
  --a-danger-900: #f28ea2;
68
96
  --a-danger-800: #ee7685;
@@ -73,6 +101,10 @@
73
101
  --a-danger-300: #521517;
74
102
  --a-danger-200: #490b10;
75
103
  --a-danger-100: #410409;
104
+ --a-warning-400A: #fd60084b;
105
+ --a-warning-300A: #fc3f003d;
106
+ --a-warning-200A: #fe1f0033;
107
+ --a-warning-100A: #fc00002c;
76
108
  --a-warning-1000: #f5bf6d;
77
109
  --a-warning-900: #ed974b;
78
110
  --a-warning-800: #e78040;
@@ -83,6 +115,10 @@
83
115
  --a-warning-300: #471f0c;
84
116
  --a-warning-200: #3e1704;
85
117
  --a-warning-100: #371100;
118
+ --a-success-400A: #48fd3c2c;
119
+ --a-success-300A: #00fc001f;
120
+ --a-success-200A: #00fd0016;
121
+ --a-success-100A: #00f50010;
86
122
  --a-success-1000: #a4d4ad;
87
123
  --a-success-900: #78ba87;
88
124
  --a-success-800: #5eab72;
@@ -93,6 +129,10 @@
93
129
  --a-success-300: #0b3118;
94
130
  --a-success-200: #032911;
95
131
  --a-success-100: #00230b;
132
+ --a-accent-400A: #70b3fe37;
133
+ --a-accent-300A: #5dacfe27;
134
+ --a-accent-200A: #50a3f91b;
135
+ --a-accent-100A: #2e95ff10;
96
136
  --a-accent-1000: #b0caf1;
97
137
  --a-accent-900: #84aee6;
98
138
  --a-accent-800: #6d9ddd;
@@ -103,6 +143,10 @@
103
143
  --a-accent-300: #1a2c41;
104
144
  --a-accent-200: #152436;
105
145
  --a-accent-100: #101d2d;
146
+ --a-neutral-400A: #e0edfe27;
147
+ --a-neutral-300A: #d7defa1c;
148
+ --a-neutral-200A: #cad1f613;
149
+ --a-neutral-100A: #c8cff00b;
106
150
  --a-neutral-000: black;
107
151
  --a-neutral-1000: #c4c9d0;
108
152
  --a-neutral-900: #a5acb6;
@@ -116,42 +160,55 @@
116
160
  --a-neutral-100: #161d28;
117
161
  --a-bg-overlay: rgba(2, 20, 49, 0.49);
118
162
  --a-bg-sunken: #07090d;
163
+ --a-bg-input: rgba(14, 21, 31, 0.5);
119
164
  --a-bg-default: #0e151f;
120
165
  --a-border-focus: var(--a-accent-700);
121
166
  --a-border-strong: var(--a-neutral-600);
167
+ --a-border-subtleA: var(--a-neutral-400A);
122
168
  --a-border-subtle: var(--a-neutral-400);
123
169
  --a-border-default: var(--a-neutral-500);
124
170
  --a-border-data-two-strong: var(--a-data-two-600);
171
+ --a-border-data-two-subtleA: var(--a-data-two-400A);
125
172
  --a-border-data-two-subtle: var(--a-data-two-400);
126
173
  --a-border-data-two: var(--a-data-two-500);
127
174
  --a-border-data-one-strong: var(--a-data-one-600);
175
+ --a-border-data-one-subtleA: var(--a-data-one-400A);
128
176
  --a-border-data-one-subtle: var(--a-data-one-400);
129
177
  --a-border-data-one: var(--a-data-one-500);
130
178
  --a-border-brand-three-strong: var(--a-brand-three-600);
179
+ --a-border-brand-three-subtleA: var(--a-brand-three-400A);
131
180
  --a-border-brand-three-subtle: var(--a-brand-three-400);
132
181
  --a-border-brand-three: var(--a-brand-three-500);
133
182
  --a-border-brand-two-strong: var(--a-brand-two-600);
183
+ --a-border-brand-two-subtleA: var(--a-brand-two-400A);
134
184
  --a-border-brand-two-subtle: var(--a-brand-two-400);
135
185
  --a-border-brand-two: var(--a-brand-two-500);
136
186
  --a-border-brand-one-strong: var(--a-brand-one-600);
187
+ --a-border-brand-one-subtleA: var(--a-brand-one-400A);
137
188
  --a-border-brand-one-subtle: var(--a-brand-one-400);
138
189
  --a-border-brand-one: var(--a-brand-one-500);
139
190
  --a-border-info-strong: var(--a-info-600);
191
+ --a-border-info-subtleA: var(--a-info-400A);
140
192
  --a-border-info-subtle: var(--a-info-400);
141
193
  --a-border-info: var(--a-info-500);
142
194
  --a-border-danger-strong: var(--a-danger-600);
195
+ --a-border-danger-subtleA: var(--a-danger-400A);
143
196
  --a-border-danger-subtle: var(--a-danger-400);
144
197
  --a-border-danger: var(--a-danger-500);
145
198
  --a-border-warning-strong: var(--a-warning-600);
199
+ --a-border-warning-subtleA: var(--a-warning-400A);
146
200
  --a-border-warning-subtle: var(--a-warning-400);
147
201
  --a-border-warning: var(--a-warning-500);
148
202
  --a-border-success-strong: var(--a-success-600);
203
+ --a-border-success-subtleA: var(--a-success-400A);
149
204
  --a-border-success-subtle: var(--a-success-400);
150
205
  --a-border-success: var(--a-success-500);
151
206
  --a-border-accent-strong: var(--a-accent-600);
207
+ --a-border-accent-subtleA: var(--a-accent-400A);
152
208
  --a-border-accent-subtle: var(--a-accent-400);
153
209
  --a-border-accent: var(--a-accent-500);
154
210
  --a-border-neutral-strong: var(--a-neutral-600);
211
+ --a-border-neutral-subtleA: var(--a-neutral-400A);
155
212
  --a-border-neutral-subtle: var(--a-neutral-400);
156
213
  --a-border-neutral: var(--a-neutral-500);
157
214
  --a-text-icon: var(--a-neutral-600);
@@ -202,126 +259,158 @@
202
259
  --a-text-neutral-strong: var(--a-neutral-900);
203
260
  --a-text-neutral: var(--a-neutral-700);
204
261
  --a-bg-raised: var(--a-neutral-200);
205
- --a-bg-input: var(--a-neutral-000);
206
- --a-bg-data-two-raised-hover: var(--a-data-two-200);
207
- --a-bg-data-two-raised: var(--a-data-two-100);
262
+ --a-bg-data-two-raised-hover: var(--a-data-two-300);
263
+ --a-bg-data-two-raised: var(--a-data-two-200);
208
264
  --a-bg-data-two-strong-pressed: var(--a-data-two-800);
209
265
  --a-bg-data-two-strong-hover: var(--a-data-two-700);
210
266
  --a-bg-data-two-strong: var(--a-data-two-600);
211
- --a-bg-data-two-moderate-selected: var(--a-data-two-700);
267
+ --a-bg-data-two-moderate-pressedA: var(--a-data-two-400A);
212
268
  --a-bg-data-two-moderate-pressed: var(--a-data-two-400);
269
+ --a-bg-data-two-moderate-hoverA: var(--a-data-two-300A);
213
270
  --a-bg-data-two-moderate-hover: var(--a-data-two-300);
271
+ --a-bg-data-two-moderateA: var(--a-data-two-200A);
214
272
  --a-bg-data-two-moderate: var(--a-data-two-200);
273
+ --a-bg-data-two-hoverA: var(--a-data-two-200A);
215
274
  --a-bg-data-two-hover: var(--a-data-two-200);
216
275
  --a-bg-data-two: var(--a-data-two-100);
217
- --a-bg-data-one-raised-hover: var(--a-data-one-200);
218
- --a-bg-data-one-raised: var(--a-data-one-100);
276
+ --a-bg-data-one-raised-hover: var(--a-data-one-300);
277
+ --a-bg-data-one-raised: var(--a-data-one-200);
219
278
  --a-bg-data-one-strong-pressed: var(--a-data-one-800);
220
279
  --a-bg-data-one-strong-hover: var(--a-data-one-700);
221
280
  --a-bg-data-one-strong: var(--a-data-one-600);
222
- --a-bg-data-one-moderate-selected: var(--a-data-one-700);
281
+ --a-bg-data-one-moderate-pressedA: var(--a-data-one-400A);
223
282
  --a-bg-data-one-moderate-pressed: var(--a-data-one-400);
283
+ --a-bg-data-one-moderate-hoverA: var(--a-data-one-300A);
224
284
  --a-bg-data-one-moderate-hover: var(--a-data-one-300);
285
+ --a-bg-data-one-moderateA: var(--a-data-one-200A);
225
286
  --a-bg-data-one-moderate: var(--a-data-one-200);
287
+ --a-bg-data-one-hoverA: var(--a-data-one-200A);
226
288
  --a-bg-data-one-hover: var(--a-data-one-200);
227
289
  --a-bg-data-one: var(--a-data-one-100);
228
- --a-bg-brand-three-raised-hover: var(--a-brand-three-200);
229
- --a-bg-brand-three-raised: var(--a-brand-three-100);
290
+ --a-bg-brand-three-raised-hover: var(--a-brand-three-300);
291
+ --a-bg-brand-three-raised: var(--a-brand-three-200);
230
292
  --a-bg-brand-three-strong-pressed: var(--a-brand-three-800);
231
293
  --a-bg-brand-three-strong-hover: var(--a-brand-three-700);
232
294
  --a-bg-brand-three-strong: var(--a-brand-three-600);
233
- --a-bg-brand-three-moderate-selected: var(--a-brand-three-700);
295
+ --a-bg-brand-three-moderate-pressedA: var(--a-brand-three-400A);
234
296
  --a-bg-brand-three-moderate-pressed: var(--a-brand-three-400);
297
+ --a-bg-brand-three-moderate-hoverA: var(--a-brand-three-300A);
235
298
  --a-bg-brand-three-moderate-hover: var(--a-brand-three-300);
299
+ --a-bg-brand-three-moderateA: var(--a-brand-three-200A);
236
300
  --a-bg-brand-three-moderate: var(--a-brand-three-200);
301
+ --a-bg-brand-three-hoverA: var(--a-brand-three-200A);
237
302
  --a-bg-brand-three-hover: var(--a-brand-three-200);
238
303
  --a-bg-brand-three: var(--a-brand-three-100);
239
- --a-bg-brand-two-raised-hover: var(--a-brand-two-200);
240
- --a-bg-brand-two-raised: var(--a-brand-two-100);
304
+ --a-bg-brand-two-raised-hover: var(--a-brand-two-300);
305
+ --a-bg-brand-two-raised: var(--a-brand-two-200);
241
306
  --a-bg-brand-two-strong-pressed: var(--a-brand-two-800);
242
307
  --a-bg-brand-two-strong-hover: var(--a-brand-two-700);
243
308
  --a-bg-brand-two-strong: var(--a-brand-two-600);
244
- --a-bg-brand-two-moderate-selected: var(--a-brand-two-700);
309
+ --a-bg-brand-two-moderate-pressedA: var(--a-brand-two-400A);
245
310
  --a-bg-brand-two-moderate-pressed: var(--a-brand-two-400);
311
+ --a-bg-brand-two-moderate-hoverA: var(--a-brand-two-300A);
246
312
  --a-bg-brand-two-moderate-hover: var(--a-brand-two-300);
313
+ --a-bg-brand-two-moderateA: var(--a-brand-two-200A);
247
314
  --a-bg-brand-two-moderate: var(--a-brand-two-200);
315
+ --a-bg-brand-two-hoverA: var(--a-brand-two-200A);
248
316
  --a-bg-brand-two-hover: var(--a-brand-two-200);
249
317
  --a-bg-brand-two: var(--a-brand-two-100);
250
- --a-bg-brand-one-raised-hover: var(--a-brand-one-200);
251
- --a-bg-brand-one-raised: var(--a-brand-one-100);
318
+ --a-bg-brand-one-raised-hover: var(--a-brand-one-300);
319
+ --a-bg-brand-one-raised: var(--a-brand-one-200);
252
320
  --a-bg-brand-one-strong-pressed: var(--a-brand-one-800);
253
321
  --a-bg-brand-one-strong-hover: var(--a-brand-one-700);
254
322
  --a-bg-brand-one-strong: var(--a-brand-one-600);
255
- --a-bg-brand-one-moderate-selected: var(--a-brand-one-700);
323
+ --a-bg-brand-one-moderate-pressedA: var(--a-brand-one-400A);
256
324
  --a-bg-brand-one-moderate-pressed: var(--a-brand-one-400);
325
+ --a-bg-brand-one-moderate-hoverA: var(--a-brand-one-300A);
257
326
  --a-bg-brand-one-moderate-hover: var(--a-brand-one-300);
327
+ --a-bg-brand-one-moderateA: var(--a-brand-one-200A);
258
328
  --a-bg-brand-one-moderate: var(--a-brand-one-200);
329
+ --a-bg-brand-one-hoverA: var(--a-brand-one-200A);
259
330
  --a-bg-brand-one-hover: var(--a-brand-one-200);
260
331
  --a-bg-brand-one: var(--a-brand-one-100);
261
- --a-bg-info-raised-hover: var(--a-info-200);
262
- --a-bg-info-raised: var(--a-info-100);
332
+ --a-bg-info-raised-hover: var(--a-info-300);
333
+ --a-bg-info-raised: var(--a-info-200);
263
334
  --a-bg-info-strong-pressed: var(--a-info-800);
264
335
  --a-bg-info-strong-hover: var(--a-info-700);
265
336
  --a-bg-info-strong: var(--a-info-600);
266
- --a-bg-info-moderate-selected: var(--a-info-700);
337
+ --a-bg-info-moderate-pressedA: var(--a-info-400A);
267
338
  --a-bg-info-moderate-pressed: var(--a-info-400);
339
+ --a-bg-info-moderate-hoverA: var(--a-info-300A);
268
340
  --a-bg-info-moderate-hover: var(--a-info-300);
341
+ --a-bg-info-moderateA: var(--a-info-200A);
269
342
  --a-bg-info-moderate: var(--a-info-200);
343
+ --a-bg-info-hoverA: var(--a-info-200A);
270
344
  --a-bg-info-hover: var(--a-info-200);
271
345
  --a-bg-info: var(--a-info-100);
272
- --a-bg-danger-raised-hover: var(--a-danger-200);
273
- --a-bg-danger-raised: var(--a-danger-100);
346
+ --a-bg-danger-raised-hover: var(--a-danger-300);
347
+ --a-bg-danger-raised: var(--a-danger-200);
274
348
  --a-bg-danger-strong-pressed: var(--a-danger-800);
275
349
  --a-bg-danger-strong-hover: var(--a-danger-700);
276
350
  --a-bg-danger-strong: var(--a-danger-600);
277
- --a-bg-danger-moderate-selected: var(--a-danger-700);
351
+ --a-bg-danger-moderate-pressedA: var(--a-danger-400A);
278
352
  --a-bg-danger-moderate-pressed: var(--a-danger-400);
353
+ --a-bg-danger-moderate-hoverA: var(--a-danger-300A);
279
354
  --a-bg-danger-moderate-hover: var(--a-danger-300);
355
+ --a-bg-danger-moderateA: var(--a-danger-200A);
280
356
  --a-bg-danger-moderate: var(--a-danger-200);
357
+ --a-bg-danger-hoverA: var(--a-danger-200A);
281
358
  --a-bg-danger-hover: var(--a-danger-200);
282
359
  --a-bg-danger: var(--a-danger-100);
283
- --a-bg-warning-raised-hover: var(--a-warning-200);
284
- --a-bg-warning-raised: var(--a-warning-100);
360
+ --a-bg-warning-raised-hover: var(--a-warning-300);
361
+ --a-bg-warning-raised: var(--a-warning-200);
285
362
  --a-bg-warning-strong-pressed: var(--a-warning-800);
286
363
  --a-bg-warning-strong-hover: var(--a-warning-700);
287
364
  --a-bg-warning-strong: var(--a-warning-600);
288
- --a-bg-warning-moderate-selected: var(--a-warning-700);
365
+ --a-bg-warning-moderate-pressedA: var(--a-warning-400A);
289
366
  --a-bg-warning-moderate-pressed: var(--a-warning-400);
367
+ --a-bg-warning-moderate-hoverA: var(--a-warning-300A);
290
368
  --a-bg-warning-moderate-hover: var(--a-warning-300);
369
+ --a-bg-warning-moderateA: var(--a-warning-200A);
291
370
  --a-bg-warning-moderate: var(--a-warning-200);
371
+ --a-bg-warning-hoverA: var(--a-warning-200A);
292
372
  --a-bg-warning-hover: var(--a-warning-200);
293
373
  --a-bg-warning: var(--a-warning-100);
294
- --a-bg-success-raised-hover: var(--a-success-200);
295
- --a-bg-success-raised: var(--a-success-100);
374
+ --a-bg-success-raised-hover: var(--a-success-300);
375
+ --a-bg-success-raised: var(--a-success-200);
296
376
  --a-bg-success-strong-pressed: var(--a-success-800);
297
377
  --a-bg-success-strong-hover: var(--a-success-700);
298
378
  --a-bg-success-strong: var(--a-success-600);
299
- --a-bg-success-moderate-selected: var(--a-success-700);
379
+ --a-bg-success-moderate-pressedA: var(--a-success-400A);
300
380
  --a-bg-success-moderate-pressed: var(--a-success-400);
381
+ --a-bg-success-moderate-hoverA: var(--a-success-300A);
301
382
  --a-bg-success-moderate-hover: var(--a-success-300);
383
+ --a-bg-success-moderateA: var(--a-success-200A);
302
384
  --a-bg-success-moderate: var(--a-success-200);
385
+ --a-bg-success-hoverA: var(--a-success-200A);
303
386
  --a-bg-success-hover: var(--a-success-200);
304
387
  --a-bg-success: var(--a-success-100);
305
- --a-bg-accent-raised-hover: var(--a-accent-200);
306
- --a-bg-accent-raised: var(--a-accent-100);
388
+ --a-bg-accent-raised-hover: var(--a-accent-300);
389
+ --a-bg-accent-raised: var(--a-accent-200);
307
390
  --a-bg-accent-strong-pressed: var(--a-accent-800);
308
391
  --a-bg-accent-strong-hover: var(--a-accent-700);
309
392
  --a-bg-accent-strong: var(--a-accent-600);
310
- --a-bg-accent-moderate-selected: var(--a-accent-700);
393
+ --a-bg-accent-moderate-pressedA: var(--a-accent-400A);
311
394
  --a-bg-accent-moderate-pressed: var(--a-accent-400);
395
+ --a-bg-accent-moderate-hoverA: var(--a-accent-300A);
312
396
  --a-bg-accent-moderate-hover: var(--a-accent-300);
397
+ --a-bg-accent-moderateA: var(--a-accent-200A);
313
398
  --a-bg-accent-moderate: var(--a-accent-200);
399
+ --a-bg-accent-hoverA: var(--a-accent-200A);
314
400
  --a-bg-accent-hover: var(--a-accent-200);
315
401
  --a-bg-accent: var(--a-accent-100);
316
- --a-bg-neutral-raised-hover: var(--a-neutral-200);
317
- --a-bg-neutral-raised: var(--a-neutral-100);
402
+ --a-bg-neutral-raised-hover: var(--a-neutral-300);
403
+ --a-bg-neutral-raised: var(--a-neutral-200);
318
404
  --a-bg-neutral-strong-pressed: var(--a-neutral-800);
319
405
  --a-bg-neutral-strong-hover: var(--a-neutral-700);
320
406
  --a-bg-neutral-strong: var(--a-neutral-600);
321
- --a-bg-neutral-moderate-selected: var(--a-neutral-700);
407
+ --a-bg-neutral-moderate-pressedA: var(--a-neutral-400A);
322
408
  --a-bg-neutral-moderate-pressed: var(--a-neutral-400);
409
+ --a-bg-neutral-moderate-hoverA: var(--a-neutral-300A);
323
410
  --a-bg-neutral-moderate-hover: var(--a-neutral-300);
411
+ --a-bg-neutral-moderateA: var(--a-neutral-200A);
324
412
  --a-bg-neutral-moderate: var(--a-neutral-200);
413
+ --a-bg-neutral-hoverA: var(--a-neutral-200A);
325
414
  --a-bg-neutral-hover: var(--a-neutral-200);
326
415
  --a-bg-neutral: var(--a-neutral-100);
327
416
  }