@sb1/ffe-core 30.0.4 → 30.0.6

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 (7) hide show
  1. package/css/colors-semantic.css +72 -47
  2. package/css/ffe.css +74 -49
  3. package/less/body.less +2 -2
  4. package/less/colors-semantic-storybook.less +24 -15
  5. package/less/colors-semantic.less +72 -47
  6. package/lib/semanticColors.js +6 -1
  7. package/package.json +2 -2
package/css/colors-semantic.css CHANGED
@@ -31,20 +31,25 @@
31
31
  --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
32
32
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
33
33
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
34
- --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
35
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
36
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
34
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtlest);
35
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtler);
36
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-subtle);
37
37
  --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
38
38
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
39
39
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-strongest);
40
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtler);
41
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtle);
42
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-default);
40
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtlest);
41
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtler);
42
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
43
43
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
44
- --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
45
- --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
44
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
45
+ --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
46
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-accent-feedback-success-subtler);
47
+ --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
48
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-accent-feedback-warning-subtler);
46
49
  --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
50
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-accent-feedback-critical-subtler);
47
51
  --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
52
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
48
53
  --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
49
54
  --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
50
55
  --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
@@ -59,11 +64,11 @@
59
64
  --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
60
65
  --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
61
66
  --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
62
- --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
63
- --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
64
- --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
65
- --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
66
- --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
67
+ --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-medium);
68
+ --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strong);
69
+ --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-strongest);
70
+ --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtler);
71
+ --ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
67
72
  --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
68
73
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
69
74
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
@@ -156,20 +161,25 @@
156
161
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
157
162
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
158
163
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
159
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
160
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
161
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
164
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
165
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
166
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
162
167
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
163
168
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
164
169
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
165
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
166
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
167
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
170
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
171
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
172
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
168
173
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
174
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
169
175
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
176
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
170
177
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
178
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
171
179
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
180
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
172
181
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
182
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
173
183
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
174
184
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
175
185
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -185,9 +195,9 @@
185
195
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
186
196
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
187
197
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
188
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
198
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
189
199
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
190
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
200
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
191
201
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
192
202
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
193
203
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -262,22 +272,22 @@
262
272
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
263
273
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
264
274
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
265
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
266
275
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
267
276
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
268
277
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
269
278
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
270
279
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
271
280
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
272
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
273
281
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
274
282
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
275
283
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
276
284
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
277
285
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
286
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
278
287
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
279
288
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
280
289
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
290
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
281
291
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
282
292
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
283
293
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -285,21 +295,24 @@
285
295
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
286
296
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
287
297
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
298
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-100);
288
299
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
289
300
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
290
301
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
302
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-100);
291
303
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
292
304
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
293
305
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
294
306
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
307
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
295
308
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
296
309
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
297
310
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
298
311
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
312
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
299
313
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
300
314
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
301
315
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
302
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
303
316
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
304
317
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
305
318
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
@@ -316,7 +329,6 @@
316
329
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
317
330
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
318
331
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
319
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
320
332
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
321
333
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
322
334
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
@@ -331,22 +343,25 @@
331
343
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
332
344
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
333
345
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
346
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
334
347
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
335
348
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
336
349
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
337
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
350
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
338
351
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
339
352
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
340
353
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
341
354
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
355
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
342
356
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
343
357
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
344
358
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
345
359
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
360
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-600);
346
361
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
347
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
348
362
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
349
363
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
364
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-550);
350
365
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
351
366
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
352
367
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
@@ -355,13 +370,12 @@
355
370
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
356
371
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
357
372
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
358
- --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
359
373
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
360
374
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
375
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
362
376
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
363
377
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
364
- --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
378
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
365
379
  --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
366
380
  --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
367
381
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
@@ -387,22 +401,22 @@
387
401
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
388
402
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
389
403
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
390
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
391
404
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
392
405
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
393
406
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
394
407
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
395
408
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
396
409
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
397
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
398
410
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
399
411
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
400
412
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
401
413
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
402
414
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
415
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
403
416
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
404
417
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
405
418
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
419
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
406
420
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
407
421
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
408
422
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -410,21 +424,24 @@
410
424
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
411
425
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
412
426
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
427
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
413
428
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
414
429
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
415
430
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
431
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
416
432
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
417
433
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
418
434
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
419
435
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
436
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
420
437
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
421
438
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
422
439
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
423
440
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
441
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
424
442
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
425
443
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
426
444
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
427
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
428
445
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
429
446
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
430
447
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
@@ -441,7 +458,6 @@
441
458
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
442
459
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
443
460
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
444
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
445
461
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
446
462
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
447
463
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
@@ -456,22 +472,25 @@
456
472
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
457
473
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
458
474
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
475
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
459
476
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
460
477
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
461
478
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
462
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
479
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
463
480
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
464
481
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
465
482
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
466
483
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
484
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
467
485
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
468
486
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
469
487
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
470
488
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
489
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
471
490
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
472
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
473
491
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
474
492
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
493
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
475
494
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
476
495
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
477
496
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
@@ -480,7 +499,6 @@
480
499
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
481
500
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
482
501
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
483
- --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
484
502
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
485
503
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
504
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
@@ -526,20 +544,25 @@
526
544
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
527
545
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
528
546
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
529
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
530
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
531
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
547
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
548
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
549
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
532
550
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
533
551
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
534
552
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
535
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
536
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
537
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
553
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
554
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
555
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
538
556
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
557
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
539
558
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
559
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
540
560
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
561
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
541
562
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
563
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
542
564
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
565
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
543
566
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
544
567
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
545
568
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -555,9 +578,9 @@
555
578
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
556
579
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
557
580
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
558
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
581
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
559
582
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
560
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
583
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
561
584
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
562
585
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
563
586
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -658,7 +681,7 @@
658
681
  --ffe-color-frost-600: #356488;
659
682
  --ffe-color-frost-700: #234f71;
660
683
  --ffe-color-frost-800: #163853;
661
- --ffe-color-sand-25: #fcf4ee;
684
+ --ffe-color-sand-0: #fdf8f5;
662
685
  --ffe-color-syrin-25: #eaeaf6;
663
686
  --ffe-color-syrin-50: #e6e6f4;
664
687
  --ffe-color-syrin-75: #dcdcef;
@@ -683,6 +706,7 @@
683
706
  --ffe-color-baer-300: #ff5e5c;
684
707
  --ffe-color-baer-400: #e44244;
685
708
  --ffe-color-baer-500: #c62a2f;
709
+ --ffe-color-baer-600: #a01c1f;
686
710
  --ffe-color-baer-700: #7c1214;
687
711
  --ffe-color-baer-800: #640e10;
688
712
  --ffe-color-skog-50: #cbf0df;
@@ -699,14 +723,15 @@
699
723
  --ffe-color-skog-800: #0a4330;
700
724
  --ffe-color-sol-50: #ffe0b2;
701
725
  --ffe-color-sol-100: #ffc675;
702
- --ffe-color-sol-150: #ffb64d;
703
726
  --ffe-color-sol-200: #f6ac3c;
704
727
  --ffe-color-sol-250: #f49f1f;
705
728
  --ffe-color-sol-500: #a95704;
729
+ --ffe-color-sol-600: #853f00;
730
+ --ffe-color-sol-650: #753500;
706
731
  --ffe-color-sol-700: #682c00;
707
732
  --ffe-color-sol-750: #582400;
733
+ --ffe-color-gray-50: #e5e5e5;
708
734
  --ffe-color-gray-100: #cccccc;
709
- --ffe-color-gray-150: #c2c2c2;
710
735
  --ffe-color-gray-200: #b8b8b8;
711
736
  --ffe-color-gray-250: #adadad;
712
737
  --ffe-color-gray-550: #707070;