@sb1/ffe-core 30.0.2 → 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 +43 -41
  2. package/css/ffe.css +43 -41
  3. package/less/colors-semantic-storybook.less +9 -8
  4. package/less/colors-semantic.less +43 -41
  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);
@@ -125,7 +125,8 @@
125
125
 
126
126
  // Context
127
127
  :root,
128
- :host {
128
+ :host,
129
+ .ffe-default-mode {
129
130
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
130
131
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
131
132
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
@@ -155,15 +156,15 @@
155
156
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
156
157
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
157
158
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
158
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
159
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
160
- --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);
161
162
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
162
163
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
163
164
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
164
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
165
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
166
- --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);
167
168
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
168
169
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
169
170
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -262,7 +263,6 @@
262
263
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
263
264
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
264
265
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
265
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
266
266
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
267
267
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
268
268
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -270,7 +270,6 @@
270
270
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
271
271
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
272
272
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
273
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
274
273
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
275
274
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
276
275
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -328,6 +327,8 @@
328
327
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
329
328
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
330
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);
331
332
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
332
333
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
333
334
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -357,6 +358,7 @@
357
358
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
358
359
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
359
360
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
360
362
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
361
363
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
362
364
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -386,7 +388,6 @@
386
388
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
387
389
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
388
390
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
389
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
390
391
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
391
392
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
392
393
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -394,7 +395,6 @@
394
395
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
395
396
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
396
397
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
397
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
398
398
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
399
399
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
400
400
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -452,6 +452,8 @@
452
452
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
453
453
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
454
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);
455
457
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
456
458
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
457
459
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -481,6 +483,7 @@
481
483
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
482
484
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
483
485
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
484
487
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
485
488
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
486
489
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -523,15 +526,15 @@
523
526
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
524
527
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
525
528
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
526
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
527
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
528
- --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);
529
532
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
530
533
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
531
534
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
532
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
533
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
534
- --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);
535
538
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
536
539
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
537
540
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -646,7 +649,6 @@
646
649
  --ffe-color-frost-100: #c3dfea;
647
650
  --ffe-color-frost-150: #b6d7e7;
648
651
  --ffe-color-frost-200: #a6cee2;
649
- --ffe-color-frost-250: #95c3db;
650
652
  --ffe-color-frost-300: #7eb5d2;
651
653
  --ffe-color-frost-350: #6ea6c9;
652
654
  --ffe-color-frost-400: #6096bd;
@@ -662,19 +664,19 @@
662
664
  --ffe-color-syrin-75: #dcdcef;
663
665
  --ffe-color-syrin-100: #d3d3ea;
664
666
  --ffe-color-syrin-150: #cacae3;
665
- --ffe-color-syrin-200: #c3c3da;
666
- --ffe-color-syrin-250: #b6b6cd;
667
- --ffe-color-syrin-300: #aaaac0;
668
- --ffe-color-syrin-350: #a2a2b9;
669
- --ffe-color-syrin-400: #9996ab;
670
- --ffe-color-syrin-450: #8c88a0;
671
- --ffe-color-syrin-500: #79748b;
672
- --ffe-color-syrin-550: #686477;
673
- --ffe-color-syrin-600: #5d5a6d;
674
- --ffe-color-syrin-650: #514e5f;
675
- --ffe-color-syrin-700: #474457;
676
- --ffe-color-syrin-750: #3d394c;
677
- --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;
678
680
  --ffe-color-baer-50: #ffd5d1;
679
681
  --ffe-color-baer-100: #ffaea8;
680
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);
@@ -509,7 +509,8 @@ html,
509
509
  --ffe-color-component-logo-circle-light-red: #e60000;
510
510
  }
511
511
  :root,
512
- :host {
512
+ :host,
513
+ .ffe-default-mode {
513
514
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
514
515
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
515
516
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
@@ -539,15 +540,15 @@ html,
539
540
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
540
541
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
541
542
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
542
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
543
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
544
- --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);
545
546
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
546
547
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
547
548
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
548
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
549
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
550
- --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);
551
552
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
552
553
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
553
554
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -644,7 +645,6 @@ html,
644
645
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
645
646
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
646
647
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
647
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
648
648
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
649
649
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
650
650
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -652,7 +652,6 @@ html,
652
652
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
653
653
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
654
654
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
655
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
656
655
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
657
656
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
658
657
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -710,6 +709,8 @@ html,
710
709
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
711
710
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
712
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);
713
714
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
714
715
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
715
716
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -739,6 +740,7 @@ html,
739
740
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
740
741
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
741
742
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
743
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
742
744
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
743
745
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
744
746
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -766,7 +768,6 @@ html,
766
768
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
767
769
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
768
770
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
769
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
770
771
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
771
772
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
772
773
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -774,7 +775,6 @@ html,
774
775
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
775
776
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
776
777
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
777
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
778
778
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
779
779
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
780
780
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -832,6 +832,8 @@ html,
832
832
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
833
833
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
834
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);
835
837
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
836
838
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
837
839
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -861,6 +863,7 @@ html,
861
863
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
862
864
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
863
865
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
866
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
864
867
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
865
868
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
866
869
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -902,15 +905,15 @@ html,
902
905
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
903
906
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
904
907
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
905
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
906
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
907
- --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);
908
911
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
909
912
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
910
913
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
911
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
912
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
913
- --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);
914
917
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
915
918
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
916
919
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -1025,7 +1028,6 @@ html,
1025
1028
  --ffe-color-frost-100: #c3dfea;
1026
1029
  --ffe-color-frost-150: #b6d7e7;
1027
1030
  --ffe-color-frost-200: #a6cee2;
1028
- --ffe-color-frost-250: #95c3db;
1029
1031
  --ffe-color-frost-300: #7eb5d2;
1030
1032
  --ffe-color-frost-350: #6ea6c9;
1031
1033
  --ffe-color-frost-400: #6096bd;
@@ -1041,19 +1043,19 @@ html,
1041
1043
  --ffe-color-syrin-75: #dcdcef;
1042
1044
  --ffe-color-syrin-100: #d3d3ea;
1043
1045
  --ffe-color-syrin-150: #cacae3;
1044
- --ffe-color-syrin-200: #c3c3da;
1045
- --ffe-color-syrin-250: #b6b6cd;
1046
- --ffe-color-syrin-300: #aaaac0;
1047
- --ffe-color-syrin-350: #a2a2b9;
1048
- --ffe-color-syrin-400: #9996ab;
1049
- --ffe-color-syrin-450: #8c88a0;
1050
- --ffe-color-syrin-500: #79748b;
1051
- --ffe-color-syrin-550: #686477;
1052
- --ffe-color-syrin-600: #5d5a6d;
1053
- --ffe-color-syrin-650: #514e5f;
1054
- --ffe-color-syrin-700: #474457;
1055
- --ffe-color-syrin-750: #3d394c;
1056
- --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;
1057
1059
  --ffe-color-baer-50: #ffd5d1;
1058
1060
  --ffe-color-baer-100: #ffaea8;
1059
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);
@@ -125,7 +125,8 @@
125
125
 
126
126
  // Context
127
127
  :root,
128
- :host {
128
+ :host,
129
+ .ffe-default-mode {
129
130
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
130
131
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
131
132
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
@@ -155,15 +156,15 @@
155
156
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
156
157
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
157
158
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
158
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
159
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
160
- --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);
161
162
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
162
163
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
163
164
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
164
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
165
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
166
- --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);
167
168
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
168
169
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
169
170
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -262,7 +263,6 @@
262
263
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
263
264
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
264
265
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
265
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
266
266
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
267
267
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
268
268
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
@@ -270,7 +270,6 @@
270
270
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
271
271
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
272
272
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
273
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
274
273
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
275
274
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
276
275
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
@@ -328,6 +327,8 @@
328
327
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
329
328
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
330
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);
331
332
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
332
333
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
333
334
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
@@ -357,6 +358,7 @@
357
358
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
358
359
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
359
360
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
360
362
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
361
363
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
362
364
  --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
@@ -386,7 +388,6 @@
386
388
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
387
389
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
388
390
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
389
- --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
390
391
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
391
392
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
392
393
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
@@ -394,7 +395,6 @@
394
395
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
395
396
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
396
397
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
397
- --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
398
398
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
399
399
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
400
400
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
@@ -452,6 +452,8 @@
452
452
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
453
453
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
454
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);
455
457
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
456
458
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
457
459
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
@@ -481,6 +483,7 @@
481
483
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
482
484
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
483
485
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
484
487
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
485
488
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
486
489
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
@@ -523,15 +526,15 @@
523
526
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
524
527
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
525
528
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
526
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
527
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
528
- --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);
529
532
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
530
533
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
531
534
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
532
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
533
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
534
- --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);
535
538
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
536
539
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
537
540
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
@@ -646,7 +649,6 @@
646
649
  --ffe-color-frost-100: #c3dfea;
647
650
  --ffe-color-frost-150: #b6d7e7;
648
651
  --ffe-color-frost-200: #a6cee2;
649
- --ffe-color-frost-250: #95c3db;
650
652
  --ffe-color-frost-300: #7eb5d2;
651
653
  --ffe-color-frost-350: #6ea6c9;
652
654
  --ffe-color-frost-400: #6096bd;
@@ -662,19 +664,19 @@
662
664
  --ffe-color-syrin-75: #dcdcef;
663
665
  --ffe-color-syrin-100: #d3d3ea;
664
666
  --ffe-color-syrin-150: #cacae3;
665
- --ffe-color-syrin-200: #c3c3da;
666
- --ffe-color-syrin-250: #b6b6cd;
667
- --ffe-color-syrin-300: #aaaac0;
668
- --ffe-color-syrin-350: #a2a2b9;
669
- --ffe-color-syrin-400: #9996ab;
670
- --ffe-color-syrin-450: #8c88a0;
671
- --ffe-color-syrin-500: #79748b;
672
- --ffe-color-syrin-550: #686477;
673
- --ffe-color-syrin-600: #5d5a6d;
674
- --ffe-color-syrin-650: #514e5f;
675
- --ffe-color-syrin-700: #474457;
676
- --ffe-color-syrin-750: #3d394c;
677
- --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;
678
680
  --ffe-color-baer-50: #ffd5d1;
679
681
  --ffe-color-baer-100: #ffaea8;
680
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.2",
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": "587574e9a65e127ec4027c02b5c996ab45b2b664"
38
+ "gitHead": "8714469d8eb24408ce996d3d50fb3f41022d69bc"
39
39
  }