@sb1/ffe-core 30.0.3 → 30.0.4

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 (5) hide show
  1. package/css/colors-semantic.css +41 -40
  2. package/css/ffe.css +41 -40
  3. package/less/colors-semantic-storybook.less +9 -8
  4. package/less/colors-semantic.less +41 -40
  5. package/package.json +2 -2
package/css/colors-semantic.css CHANGED
@@ -31,15 +31,15 @@
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-subtle);
35
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-default);
36
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-strongest);
37
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
38
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
39
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
40
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
41
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
42
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
37
+ --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
38
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
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);
43
43
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
44
44
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
45
45
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
@@ -71,7 +71,7 @@
71
71
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
72
72
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
73
73
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
74
- --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
74
+ --ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
75
75
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
76
76
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
77
77
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
@@ -156,15 +156,15 @@
156
156
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
157
157
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
158
158
  --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-subtle);
160
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
161
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
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);
162
162
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
163
163
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
164
164
  --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-subtle);
166
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
167
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
168
168
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
169
169
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
170
170
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -263,7 +263,6 @@
263
263
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
264
264
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
265
265
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
266
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
267
266
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
268
267
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
269
268
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -271,7 +270,6 @@
271
270
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
272
271
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
273
272
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
274
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
275
273
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
276
274
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
277
275
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -329,6 +327,8 @@
329
327
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
330
328
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
331
329
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
330
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
331
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
332
332
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
333
333
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
334
334
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -358,6 +358,7 @@
358
358
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
359
359
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
360
360
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
361
362
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
362
363
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
363
364
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -387,7 +388,6 @@
387
388
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
388
389
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
389
390
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
390
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
391
391
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
392
392
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
393
393
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -395,7 +395,6 @@
395
395
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
396
396
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
397
397
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
398
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
399
398
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
400
399
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
401
400
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -453,6 +452,8 @@
453
452
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
454
453
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
455
454
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
455
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
456
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
456
457
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
457
458
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
458
459
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -482,6 +483,7 @@
482
483
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
483
484
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
484
485
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
485
487
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
486
488
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
487
489
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -524,15 +526,15 @@
524
526
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
525
527
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
526
528
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
527
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
528
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
529
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
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);
530
532
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
531
533
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
532
534
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
533
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
534
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
535
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
536
538
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
537
539
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
538
540
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -647,7 +649,6 @@
647
649
  --ffe-color-frost-100: #c3dfea;
648
650
  --ffe-color-frost-150: #b6d7e7;
649
651
  --ffe-color-frost-200: #a6cee2;
650
- --ffe-color-frost-250: #95c3db;
651
652
  --ffe-color-frost-300: #7eb5d2;
652
653
  --ffe-color-frost-350: #6ea6c9;
653
654
  --ffe-color-frost-400: #6096bd;
@@ -663,19 +664,19 @@
663
664
  --ffe-color-syrin-75: #dcdcef;
664
665
  --ffe-color-syrin-100: #d3d3ea;
665
666
  --ffe-color-syrin-150: #cacae3;
666
- --ffe-color-syrin-200: #c3c3da;
667
- --ffe-color-syrin-250: #b6b6cd;
668
- --ffe-color-syrin-300: #aaaac0;
669
- --ffe-color-syrin-350: #a2a2b9;
670
- --ffe-color-syrin-400: #9996ab;
671
- --ffe-color-syrin-450: #8c88a0;
672
- --ffe-color-syrin-500: #79748b;
673
- --ffe-color-syrin-550: #686477;
674
- --ffe-color-syrin-600: #5d5a6d;
675
- --ffe-color-syrin-650: #514e5f;
676
- --ffe-color-syrin-700: #474457;
677
- --ffe-color-syrin-750: #3d394c;
678
- --ffe-color-syrin-800: #332f41;
667
+ --ffe-color-syrin-200: #c1c1dc;
668
+ --ffe-color-syrin-250: #bcb8d5;
669
+ --ffe-color-syrin-300: #b4aecb;
670
+ --ffe-color-syrin-350: #a9a4c1;
671
+ --ffe-color-syrin-400: #a39db9;
672
+ --ffe-color-syrin-450: #948ba7;
673
+ --ffe-color-syrin-500: #817792;
674
+ --ffe-color-syrin-550: #6a627f;
675
+ --ffe-color-syrin-600: #5a5671;
676
+ --ffe-color-syrin-650: #4e4a64;
677
+ --ffe-color-syrin-700: #45415a;
678
+ --ffe-color-syrin-750: #3c374e;
679
+ --ffe-color-syrin-800: #312c44;
679
680
  --ffe-color-baer-50: #ffd5d1;
680
681
  --ffe-color-baer-100: #ffaea8;
681
682
  --ffe-color-baer-200: #ff7f7a;
package/css/ffe.css CHANGED
@@ -417,15 +417,15 @@ html,
417
417
  --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
418
418
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
419
419
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
420
- --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtle);
421
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-default);
422
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-strongest);
423
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
424
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
425
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
426
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
427
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
428
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
420
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
421
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
422
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
423
+ --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
424
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
425
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-strongest);
426
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtler);
427
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtle);
428
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-default);
429
429
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
430
430
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
431
431
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
@@ -457,7 +457,7 @@ html,
457
457
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
458
458
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
459
459
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
460
- --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
460
+ --ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
461
461
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
462
462
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
463
463
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
@@ -540,15 +540,15 @@ html,
540
540
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
541
541
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
542
542
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
543
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
544
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
545
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
543
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
544
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
545
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
546
546
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
547
547
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
548
548
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
549
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
550
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
551
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
549
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
550
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
551
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
552
552
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
553
553
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
554
554
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -645,7 +645,6 @@ html,
645
645
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
646
646
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
647
647
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
648
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
649
648
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
650
649
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
651
650
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -653,7 +652,6 @@ html,
653
652
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
654
653
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
655
654
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
656
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
657
655
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
658
656
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
659
657
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -711,6 +709,8 @@ html,
711
709
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
712
710
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
713
711
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
712
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
713
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
714
714
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
715
715
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
716
716
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -740,6 +740,7 @@ html,
740
740
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
741
741
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
742
742
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
743
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
743
744
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
744
745
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
745
746
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -767,7 +768,6 @@ html,
767
768
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
768
769
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
769
770
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
770
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
771
771
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
772
772
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
773
773
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -775,7 +775,6 @@ html,
775
775
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
776
776
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
777
777
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
778
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
779
778
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
780
779
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
781
780
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -833,6 +832,8 @@ html,
833
832
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
834
833
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
835
834
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
835
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
836
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
836
837
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
837
838
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
838
839
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -862,6 +863,7 @@ html,
862
863
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
863
864
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
864
865
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
866
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
865
867
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
866
868
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
867
869
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -903,15 +905,15 @@ html,
903
905
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
904
906
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
905
907
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
906
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
907
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
908
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
908
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
909
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
910
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
909
911
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
910
912
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
911
913
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
912
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
913
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
914
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
914
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
915
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
916
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
915
917
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
916
918
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
917
919
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -1026,7 +1028,6 @@ html,
1026
1028
  --ffe-color-frost-100: #c3dfea;
1027
1029
  --ffe-color-frost-150: #b6d7e7;
1028
1030
  --ffe-color-frost-200: #a6cee2;
1029
- --ffe-color-frost-250: #95c3db;
1030
1031
  --ffe-color-frost-300: #7eb5d2;
1031
1032
  --ffe-color-frost-350: #6ea6c9;
1032
1033
  --ffe-color-frost-400: #6096bd;
@@ -1042,19 +1043,19 @@ html,
1042
1043
  --ffe-color-syrin-75: #dcdcef;
1043
1044
  --ffe-color-syrin-100: #d3d3ea;
1044
1045
  --ffe-color-syrin-150: #cacae3;
1045
- --ffe-color-syrin-200: #c3c3da;
1046
- --ffe-color-syrin-250: #b6b6cd;
1047
- --ffe-color-syrin-300: #aaaac0;
1048
- --ffe-color-syrin-350: #a2a2b9;
1049
- --ffe-color-syrin-400: #9996ab;
1050
- --ffe-color-syrin-450: #8c88a0;
1051
- --ffe-color-syrin-500: #79748b;
1052
- --ffe-color-syrin-550: #686477;
1053
- --ffe-color-syrin-600: #5d5a6d;
1054
- --ffe-color-syrin-650: #514e5f;
1055
- --ffe-color-syrin-700: #474457;
1056
- --ffe-color-syrin-750: #3d394c;
1057
- --ffe-color-syrin-800: #332f41;
1046
+ --ffe-color-syrin-200: #c1c1dc;
1047
+ --ffe-color-syrin-250: #bcb8d5;
1048
+ --ffe-color-syrin-300: #b4aecb;
1049
+ --ffe-color-syrin-350: #a9a4c1;
1050
+ --ffe-color-syrin-400: #a39db9;
1051
+ --ffe-color-syrin-450: #948ba7;
1052
+ --ffe-color-syrin-500: #817792;
1053
+ --ffe-color-syrin-550: #6a627f;
1054
+ --ffe-color-syrin-600: #5a5671;
1055
+ --ffe-color-syrin-650: #4e4a64;
1056
+ --ffe-color-syrin-700: #45415a;
1057
+ --ffe-color-syrin-750: #3c374e;
1058
+ --ffe-color-syrin-800: #312c44;
1058
1059
  --ffe-color-baer-50: #ffd5d1;
1059
1060
  --ffe-color-baer-100: #ffaea8;
1060
1061
  --ffe-color-baer-200: #ff7f7a;
package/less/colors-semantic-storybook.less CHANGED
@@ -12,7 +12,6 @@
12
12
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
13
13
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
14
14
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
15
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
16
15
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
17
16
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
18
17
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -20,7 +19,6 @@
20
19
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
21
20
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
22
21
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
23
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
24
22
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
25
23
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
26
24
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -78,6 +76,8 @@
78
76
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
79
77
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
80
78
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
79
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
80
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
81
81
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
82
82
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
83
83
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -107,6 +107,7 @@
107
107
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
108
108
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
109
109
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
110
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
110
111
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
111
112
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
112
113
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -149,15 +150,15 @@
149
150
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
150
151
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
151
152
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
152
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
153
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
154
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
153
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
154
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
155
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
155
156
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
156
157
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
157
158
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
158
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
159
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
160
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
159
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
160
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
161
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
161
162
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
162
163
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
163
164
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
package/less/colors-semantic.less CHANGED
@@ -31,15 +31,15 @@
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-subtle);
35
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-default);
36
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-strongest);
37
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
38
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
39
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
40
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
41
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
42
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
37
+ --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
38
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
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);
43
43
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
44
44
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
45
45
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
@@ -71,7 +71,7 @@
71
71
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
72
72
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
73
73
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
74
- --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
74
+ --ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
75
75
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
76
76
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
77
77
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
@@ -156,15 +156,15 @@
156
156
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
157
157
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
158
158
  --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-subtle);
160
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
161
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
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);
162
162
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
163
163
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
164
164
  --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-subtle);
166
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
167
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
168
168
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
169
169
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
170
170
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -263,7 +263,6 @@
263
263
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
264
264
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
265
265
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
266
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
267
266
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
268
267
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
269
268
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -271,7 +270,6 @@
271
270
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
272
271
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
273
272
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
274
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
275
273
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
276
274
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
277
275
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -329,6 +327,8 @@
329
327
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
330
328
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
331
329
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
330
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
331
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
332
332
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
333
333
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
334
334
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -358,6 +358,7 @@
358
358
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
359
359
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
360
360
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
361
362
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
362
363
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
363
364
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -387,7 +388,6 @@
387
388
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
388
389
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
389
390
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
390
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
391
391
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
392
392
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
393
393
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -395,7 +395,6 @@
395
395
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
396
396
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
397
397
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
398
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
399
398
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
400
399
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
401
400
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -453,6 +452,8 @@
453
452
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
454
453
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
455
454
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
455
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
456
+ --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
456
457
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
457
458
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
458
459
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -482,6 +483,7 @@
482
483
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
483
484
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
484
485
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
485
487
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
486
488
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
487
489
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -524,15 +526,15 @@
524
526
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
525
527
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
526
528
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
527
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
528
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
529
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
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);
530
532
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
531
533
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
532
534
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
533
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
534
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
535
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
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);
536
538
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
537
539
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
538
540
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -647,7 +649,6 @@
647
649
  --ffe-color-frost-100: #c3dfea;
648
650
  --ffe-color-frost-150: #b6d7e7;
649
651
  --ffe-color-frost-200: #a6cee2;
650
- --ffe-color-frost-250: #95c3db;
651
652
  --ffe-color-frost-300: #7eb5d2;
652
653
  --ffe-color-frost-350: #6ea6c9;
653
654
  --ffe-color-frost-400: #6096bd;
@@ -663,19 +664,19 @@
663
664
  --ffe-color-syrin-75: #dcdcef;
664
665
  --ffe-color-syrin-100: #d3d3ea;
665
666
  --ffe-color-syrin-150: #cacae3;
666
- --ffe-color-syrin-200: #c3c3da;
667
- --ffe-color-syrin-250: #b6b6cd;
668
- --ffe-color-syrin-300: #aaaac0;
669
- --ffe-color-syrin-350: #a2a2b9;
670
- --ffe-color-syrin-400: #9996ab;
671
- --ffe-color-syrin-450: #8c88a0;
672
- --ffe-color-syrin-500: #79748b;
673
- --ffe-color-syrin-550: #686477;
674
- --ffe-color-syrin-600: #5d5a6d;
675
- --ffe-color-syrin-650: #514e5f;
676
- --ffe-color-syrin-700: #474457;
677
- --ffe-color-syrin-750: #3d394c;
678
- --ffe-color-syrin-800: #332f41;
667
+ --ffe-color-syrin-200: #c1c1dc;
668
+ --ffe-color-syrin-250: #bcb8d5;
669
+ --ffe-color-syrin-300: #b4aecb;
670
+ --ffe-color-syrin-350: #a9a4c1;
671
+ --ffe-color-syrin-400: #a39db9;
672
+ --ffe-color-syrin-450: #948ba7;
673
+ --ffe-color-syrin-500: #817792;
674
+ --ffe-color-syrin-550: #6a627f;
675
+ --ffe-color-syrin-600: #5a5671;
676
+ --ffe-color-syrin-650: #4e4a64;
677
+ --ffe-color-syrin-700: #45415a;
678
+ --ffe-color-syrin-750: #3c374e;
679
+ --ffe-color-syrin-800: #312c44;
679
680
  --ffe-color-baer-50: #ffd5d1;
680
681
  --ffe-color-baer-100: #ffaea8;
681
682
  --ffe-color-baer-200: #ff7f7a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "30.0.3",
3
+ "version": "30.0.4",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "4a54334bb9eb816b42aeb4f4059dbfa8fa51eb00"
38
+ "gitHead": "8714469d8eb24408ce996d3d50fb3f41022d69bc"
39
39
  }