@sb1/ffe-core 31.0.1 → 31.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/css/colors-semantic.css +51 -47
  2. package/css/ffe.css +54 -56
  3. package/less/colors-semantic-chevron.less +1 -1
  4. package/less/colors-semantic-storybook.less +23 -22
  5. package/less/colors-semantic.less +51 -47
  6. package/less/typography.less +2 -9
  7. package/package.json +2 -2
package/css/colors-semantic.css CHANGED
@@ -4,7 +4,7 @@
4
4
  .ffe-accent-mode {
5
5
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
6
6
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
7
- --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
7
+ --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-subtlest);
8
8
  --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
9
9
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
10
10
  --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-subtlest);
@@ -114,14 +114,14 @@
114
114
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
115
115
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
116
116
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
117
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
118
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
119
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
120
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
121
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
122
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
123
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
124
- --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
117
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
118
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
119
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
120
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
121
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
122
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
123
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
124
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
125
125
  --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
126
126
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
127
127
  --ffe-color-component-logo-circle-dark-red: #af0000;
@@ -244,13 +244,13 @@
244
244
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
245
245
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
246
246
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
247
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
248
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
249
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
250
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
251
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
252
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
253
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
247
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
248
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
249
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
250
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
251
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
252
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
253
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
254
254
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
255
255
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
256
256
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -310,10 +310,9 @@
310
310
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
311
311
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
312
312
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
313
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
314
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
313
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
315
314
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
316
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
315
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
317
316
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
318
317
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
319
318
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
@@ -348,12 +347,14 @@
348
347
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
349
348
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
350
349
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
350
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-500);
351
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
351
352
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
352
353
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
353
354
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
354
355
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
355
356
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
356
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
357
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-400);
357
358
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
358
359
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
359
360
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
@@ -365,10 +366,10 @@
365
366
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
366
367
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
367
368
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
368
- --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
369
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-vann-600);
369
370
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
370
371
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
371
- --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
372
+ --ffe-color-accent-neutral-medium: var(--ffe-color-vann-150);
372
373
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
373
374
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
374
375
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
@@ -391,14 +392,14 @@
391
392
  // Semantic dark
392
393
  @media (prefers-color-scheme: dark) {
393
394
  :where(.regard-color-scheme-preference){
394
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
395
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
396
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
397
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
398
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
399
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
400
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
401
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
395
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
396
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
397
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
398
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
399
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
400
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
401
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
402
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
402
403
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
403
404
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
404
405
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
@@ -440,11 +441,10 @@
440
441
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
441
442
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
442
443
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
443
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
444
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
444
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
445
445
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
446
446
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
447
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
447
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
448
448
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
449
449
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
450
450
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
@@ -478,12 +478,14 @@
478
478
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
479
479
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
480
480
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
481
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
482
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
481
483
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
482
484
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
483
485
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
484
486
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
485
487
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
486
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
488
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
487
489
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
488
490
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
489
491
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
@@ -495,13 +497,13 @@
495
497
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
496
498
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
497
499
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
498
- --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
500
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
499
501
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
500
502
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
501
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
503
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
502
504
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
503
505
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
504
- --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
506
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
505
507
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
506
508
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
507
509
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
@@ -629,13 +631,13 @@
629
631
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
630
632
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
631
633
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
632
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
633
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
634
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
635
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
636
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
637
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
638
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
634
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
635
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
636
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
637
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
638
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
639
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
640
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
639
641
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
640
642
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
641
643
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -668,6 +670,7 @@
668
670
  --ffe-color-natt-500: #55709b;
669
671
  --ffe-color-natt-600: #3e5579;
670
672
  --ffe-color-natt-700: #2e405c;
673
+ --ffe-color-natt-800: #202c3f;
671
674
  --ffe-color-natt-950: #101622;
672
675
  --ffe-color-frost-25: #e5f0f5;
673
676
  --ffe-color-frost-50: #dceaef;
@@ -717,6 +720,7 @@
717
720
  --ffe-color-skog-200: #8fd1b1;
718
721
  --ffe-color-skog-300: #6abe97;
719
722
  --ffe-color-skog-400: #48a781;
723
+ --ffe-color-skog-450: #409674;
720
724
  --ffe-color-skog-500: #2e8b64;
721
725
  --ffe-color-skog-550: #2a7e5b;
722
726
  --ffe-color-skog-600: #00754e;
@@ -734,10 +738,9 @@
734
738
  --ffe-color-sol-700: #682c00;
735
739
  --ffe-color-sol-750: #582400;
736
740
  --ffe-color-gray-50: #e5e5e5;
737
- --ffe-color-gray-100: #cccccc;
738
- --ffe-color-gray-200: #b8b8b8;
739
741
  --ffe-color-gray-250: #adadad;
740
- --ffe-color-gray-550: #707070;
742
+ --ffe-color-gray-350: #999999;
743
+ --ffe-color-gray-400: #8f8f8f;
741
744
  --ffe-color-gray-600: #666666;
742
745
  --ffe-color-gray-650: #5c5c5c;
743
746
  --ffe-color-gray-700: #525252;
@@ -745,6 +748,7 @@
745
748
  --ffe-color-gray-850: #333333;
746
749
  --ffe-color-gray-900: #292929;
747
750
  --ffe-color-gray-950: #1f1f1f;
751
+ --ffe-color-gray-1000: #141414;
748
752
  --ffe-color-alpha-white-0: #ffffff00;
749
753
  --ffe-color-alpha-white-100: #ffffff;
750
754
  --ffe-color-alpha-black-100: #020a0a;
package/css/ffe.css CHANGED
@@ -390,7 +390,7 @@ html,
390
390
  .ffe-accent-mode {
391
391
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
392
392
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
393
- --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
393
+ --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-subtlest);
394
394
  --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
395
395
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
396
396
  --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-subtlest);
@@ -500,14 +500,14 @@ html,
500
500
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
501
501
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
502
502
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
503
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
504
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
505
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
506
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
507
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
508
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
509
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
510
- --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
503
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
504
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
505
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
506
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
507
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
508
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
509
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
510
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
511
511
  --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
512
512
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
513
513
  --ffe-color-component-logo-circle-dark-red: #af0000;
@@ -628,13 +628,13 @@ html,
628
628
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
629
629
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
630
630
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
631
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
632
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
633
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
634
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
635
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
636
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
637
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
631
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
632
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
633
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
634
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
635
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
636
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
637
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
638
638
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
639
639
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
640
640
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -692,10 +692,9 @@ html,
692
692
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
693
693
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
694
694
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
695
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
696
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
695
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
697
696
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
698
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
697
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
699
698
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
700
699
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
701
700
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
@@ -730,12 +729,14 @@ html,
730
729
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
731
730
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
732
731
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
732
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-500);
733
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
733
734
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
734
735
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
735
736
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
736
737
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
737
738
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
738
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
739
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-400);
739
740
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
740
741
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
741
742
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
@@ -747,10 +748,10 @@ html,
747
748
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
748
749
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
749
750
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
750
- --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
751
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-vann-600);
751
752
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
752
753
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
753
- --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
754
+ --ffe-color-accent-neutral-medium: var(--ffe-color-vann-150);
754
755
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
755
756
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
756
757
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
@@ -771,14 +772,14 @@ html,
771
772
  }
772
773
  @media (prefers-color-scheme: dark) {
773
774
  :where(.regard-color-scheme-preference) {
774
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
775
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
776
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
777
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
778
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
779
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
780
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
781
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
775
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
776
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
777
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
778
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
779
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
780
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
781
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
782
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
782
783
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
783
784
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
784
785
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
@@ -820,11 +821,10 @@ html,
820
821
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
821
822
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
822
823
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
823
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
824
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
824
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
825
825
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
826
826
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
827
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
827
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
828
828
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
829
829
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
830
830
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
@@ -858,12 +858,14 @@ html,
858
858
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
859
859
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
860
860
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
861
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
862
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
861
863
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
862
864
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
863
865
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
864
866
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
865
867
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
866
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
868
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
867
869
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
868
870
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
869
871
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
@@ -875,13 +877,13 @@ html,
875
877
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
876
878
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
877
879
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
878
- --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
880
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
879
881
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
880
882
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
881
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
883
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
882
884
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
883
885
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
884
- --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
886
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
885
887
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
886
888
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
887
889
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
@@ -1008,13 +1010,13 @@ html,
1008
1010
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1009
1011
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1010
1012
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1011
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
1012
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
1013
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
1014
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
1015
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
1016
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
1017
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
1013
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
1014
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
1015
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
1016
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
1017
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
1018
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
1019
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
1018
1020
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
1019
1021
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
1020
1022
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -1047,6 +1049,7 @@ html,
1047
1049
  --ffe-color-natt-500: #55709b;
1048
1050
  --ffe-color-natt-600: #3e5579;
1049
1051
  --ffe-color-natt-700: #2e405c;
1052
+ --ffe-color-natt-800: #202c3f;
1050
1053
  --ffe-color-natt-950: #101622;
1051
1054
  --ffe-color-frost-25: #e5f0f5;
1052
1055
  --ffe-color-frost-50: #dceaef;
@@ -1096,6 +1099,7 @@ html,
1096
1099
  --ffe-color-skog-200: #8fd1b1;
1097
1100
  --ffe-color-skog-300: #6abe97;
1098
1101
  --ffe-color-skog-400: #48a781;
1102
+ --ffe-color-skog-450: #409674;
1099
1103
  --ffe-color-skog-500: #2e8b64;
1100
1104
  --ffe-color-skog-550: #2a7e5b;
1101
1105
  --ffe-color-skog-600: #00754e;
@@ -1113,10 +1117,9 @@ html,
1113
1117
  --ffe-color-sol-700: #682c00;
1114
1118
  --ffe-color-sol-750: #582400;
1115
1119
  --ffe-color-gray-50: #e5e5e5;
1116
- --ffe-color-gray-100: #cccccc;
1117
- --ffe-color-gray-200: #b8b8b8;
1118
1120
  --ffe-color-gray-250: #adadad;
1119
- --ffe-color-gray-550: #707070;
1121
+ --ffe-color-gray-350: #999999;
1122
+ --ffe-color-gray-400: #8f8f8f;
1120
1123
  --ffe-color-gray-600: #666666;
1121
1124
  --ffe-color-gray-650: #5c5c5c;
1122
1125
  --ffe-color-gray-700: #525252;
@@ -1124,6 +1127,7 @@ html,
1124
1127
  --ffe-color-gray-850: #333333;
1125
1128
  --ffe-color-gray-900: #292929;
1126
1129
  --ffe-color-gray-950: #1f1f1f;
1130
+ --ffe-color-gray-1000: #141414;
1127
1131
  --ffe-color-alpha-white-0: #ffffff00;
1128
1132
  --ffe-color-alpha-white-100: #ffffff;
1129
1133
  --ffe-color-alpha-black-100: #020a0a;
@@ -1457,22 +1461,16 @@ html,
1457
1461
  text-decoration: none;
1458
1462
  }
1459
1463
  }
1460
- .ffe-link-text:visited {
1461
- border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
1462
- color: var(--ffe-color-foreground-interactive-link-pressed);
1463
- text-decoration: none;
1464
- }
1465
1464
  .ffe-link-text--no-underline {
1466
1465
  border-bottom: none;
1467
1466
  }
1468
1467
  .ffe-link-text:focus {
1469
- border-color: var(--ffe-color-foreground-interactive-link-pressed);
1470
1468
  color: var(--ffe-color-foreground-interactive-link-pressed);
1471
1469
  border-radius: 1px;
1472
- background-color: var(--ffe-color-foreground-interactive-link);
1473
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1474
- box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1470
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
1471
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
1475
1472
  outline: none;
1473
+ border-bottom-color: transparent;
1476
1474
  }
1477
1475
  .ffe-link-icon {
1478
1476
  fill: var(--ffe-color-foreground-interactive-link);
package/less/colors-semantic-chevron.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Chevron colors to make it work with semantic colors
3
- @ffe-color-chevron-light-default: 292929;
3
+ @ffe-color-chevron-light-default: 1f1f1f;
4
4
  @ffe-color-chevron-dark-default: ffffff;
5
5
  @ffe-color-chevron-light-accent: ffffff;
6
6
  @ffe-color-chevron-dark-accent: ffffff;
package/less/colors-semantic-storybook.less CHANGED
@@ -1,13 +1,13 @@
1
1
  // Semantic dark class
2
2
  .dark-mode {
3
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
4
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
5
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
6
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
7
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
8
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
9
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
10
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
3
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
4
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
5
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
6
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
7
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
8
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
9
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
10
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
11
11
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
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);
@@ -49,11 +49,10 @@
49
49
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
50
50
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
51
51
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
52
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
53
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
52
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
54
53
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
55
54
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
56
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
55
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
57
56
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
58
57
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
59
58
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
@@ -87,12 +86,14 @@
87
86
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
88
87
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
89
88
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
89
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
90
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
90
91
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
91
92
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
92
93
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
93
94
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
94
95
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
95
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
96
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
96
97
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
97
98
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
98
99
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
@@ -104,13 +105,13 @@
104
105
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
105
106
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
106
107
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
107
- --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
108
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
108
109
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
109
110
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
110
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
111
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
111
112
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
112
113
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
113
- --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
114
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
114
115
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
115
116
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
116
117
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
@@ -238,13 +239,13 @@
238
239
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
239
240
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
240
241
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
241
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
242
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
243
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
244
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
245
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
246
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
247
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
242
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
243
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
244
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
245
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
246
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
247
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
248
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
248
249
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
249
250
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
250
251
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
package/less/colors-semantic.less CHANGED
@@ -4,7 +4,7 @@
4
4
  .ffe-accent-mode {
5
5
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
6
6
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
7
- --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
7
+ --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-subtlest);
8
8
  --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
9
9
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
10
10
  --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-subtlest);
@@ -114,14 +114,14 @@
114
114
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
115
115
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
116
116
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
117
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
118
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
119
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
120
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
121
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
122
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
123
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
124
- --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
117
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
118
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
119
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
120
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
121
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
122
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
123
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
124
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
125
125
  --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
126
126
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
127
127
  --ffe-color-component-logo-circle-dark-red: #af0000;
@@ -244,13 +244,13 @@
244
244
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
245
245
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
246
246
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
247
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
248
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
249
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
250
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
251
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
252
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
253
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
247
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
248
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
249
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
250
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
251
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
252
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
253
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
254
254
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
255
255
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
256
256
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -310,10 +310,9 @@
310
310
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
311
311
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
312
312
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
313
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
314
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
313
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
315
314
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
316
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
315
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
317
316
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
318
317
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
319
318
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
@@ -348,12 +347,14 @@
348
347
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
349
348
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
350
349
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
350
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-500);
351
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
351
352
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
352
353
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
353
354
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
354
355
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
355
356
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
356
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
357
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-400);
357
358
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
358
359
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
359
360
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
@@ -365,10 +366,10 @@
365
366
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
366
367
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
367
368
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
368
- --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
369
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-vann-600);
369
370
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
370
371
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
371
- --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
372
+ --ffe-color-accent-neutral-medium: var(--ffe-color-vann-150);
372
373
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
373
374
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
374
375
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
@@ -391,14 +392,14 @@
391
392
  // Semantic dark
392
393
  @media (prefers-color-scheme: dark) {
393
394
  :where(.regard-color-scheme-preference){
394
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
395
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
396
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
397
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
398
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
399
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
400
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
401
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
395
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
396
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
397
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
398
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
399
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
400
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
401
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
402
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
402
403
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
403
404
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
404
405
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
@@ -440,11 +441,10 @@
440
441
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
441
442
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
442
443
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
443
- --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
444
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
444
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
445
445
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
446
446
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
447
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
447
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
448
448
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
449
449
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
450
450
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
@@ -478,12 +478,14 @@
478
478
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
479
479
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
480
480
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
481
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
482
+ --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
481
483
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
482
484
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
483
485
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
484
486
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
485
487
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
486
- --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
488
+ --ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
487
489
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
488
490
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
489
491
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
@@ -495,13 +497,13 @@
495
497
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
496
498
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
497
499
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
498
- --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
500
+ --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
499
501
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
500
502
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
501
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
503
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
502
504
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
503
505
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
504
- --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
506
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
505
507
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
506
508
  --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
507
509
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
@@ -629,13 +631,13 @@
629
631
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
630
632
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
631
633
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
632
- --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
633
- --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
634
- --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
635
- --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
636
- --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
637
- --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
638
- --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
634
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
635
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
636
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
637
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
638
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
639
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
640
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
639
641
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
640
642
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
641
643
  --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
@@ -668,6 +670,7 @@
668
670
  --ffe-color-natt-500: #55709b;
669
671
  --ffe-color-natt-600: #3e5579;
670
672
  --ffe-color-natt-700: #2e405c;
673
+ --ffe-color-natt-800: #202c3f;
671
674
  --ffe-color-natt-950: #101622;
672
675
  --ffe-color-frost-25: #e5f0f5;
673
676
  --ffe-color-frost-50: #dceaef;
@@ -717,6 +720,7 @@
717
720
  --ffe-color-skog-200: #8fd1b1;
718
721
  --ffe-color-skog-300: #6abe97;
719
722
  --ffe-color-skog-400: #48a781;
723
+ --ffe-color-skog-450: #409674;
720
724
  --ffe-color-skog-500: #2e8b64;
721
725
  --ffe-color-skog-550: #2a7e5b;
722
726
  --ffe-color-skog-600: #00754e;
@@ -734,10 +738,9 @@
734
738
  --ffe-color-sol-700: #682c00;
735
739
  --ffe-color-sol-750: #582400;
736
740
  --ffe-color-gray-50: #e5e5e5;
737
- --ffe-color-gray-100: #cccccc;
738
- --ffe-color-gray-200: #b8b8b8;
739
741
  --ffe-color-gray-250: #adadad;
740
- --ffe-color-gray-550: #707070;
742
+ --ffe-color-gray-350: #999999;
743
+ --ffe-color-gray-400: #8f8f8f;
741
744
  --ffe-color-gray-600: #666666;
742
745
  --ffe-color-gray-650: #5c5c5c;
743
746
  --ffe-color-gray-700: #525252;
@@ -745,6 +748,7 @@
745
748
  --ffe-color-gray-850: #333333;
746
749
  --ffe-color-gray-900: #292929;
747
750
  --ffe-color-gray-950: #1f1f1f;
751
+ --ffe-color-gray-1000: #141414;
748
752
  --ffe-color-alpha-white-0: #ffffff00;
749
753
  --ffe-color-alpha-white-100: #ffffff;
750
754
  --ffe-color-alpha-black-100: #020a0a;
package/less/typography.less CHANGED
@@ -172,23 +172,16 @@
172
172
  }
173
173
  }
174
174
 
175
- &:visited {
176
- border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
177
- color: var(--ffe-color-foreground-interactive-link-pressed);
178
- text-decoration: none;
179
- }
180
-
181
175
  &--no-underline {
182
176
  border-bottom: none;
183
177
  }
184
178
 
185
179
  &:focus {
186
- border-color: var(--ffe-color-foreground-interactive-link-pressed);
187
180
  color: var(--ffe-color-foreground-interactive-link-pressed);
188
181
  border-radius: 1px;
189
- background-color: var(--ffe-color-foreground-interactive-link);
190
- box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
182
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
191
183
  outline: none;
184
+ border-bottom-color: transparent;
192
185
  }
193
186
  }
194
187
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "31.0.1",
3
+ "version": "31.0.3",
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": "e9e1f82136970a49ad5597ff0ebcbadaaef85b3c"
38
+ "gitHead": "91a4853d0ff0b12af2b2dfbfc6ebeb7b2653a922"
39
39
  }