@sb1/ffe-core 30.0.5 → 30.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/css/colors-semantic.css +72 -47
  2. package/css/ffe.css +72 -47
  3. package/less/colors-semantic-storybook.less +24 -15
  4. package/less/colors-semantic.less +72 -47
  5. package/lib/semanticColors.js +6 -1
  6. package/package.json +2 -2
package/css/ffe.css CHANGED
@@ -417,20 +417,25 @@ 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-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);
420
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtlest);
421
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtler);
422
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-subtle);
423
423
  --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
424
424
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
425
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);
426
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtlest);
427
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtler);
428
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
429
429
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
430
- --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
431
- --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
430
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
431
+ --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
432
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-accent-feedback-success-subtler);
433
+ --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
434
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-accent-feedback-warning-subtler);
432
435
  --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
436
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-accent-feedback-critical-subtler);
433
437
  --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
438
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
434
439
  --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
435
440
  --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
436
441
  --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
@@ -445,11 +450,11 @@ html,
445
450
  --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
446
451
  --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
447
452
  --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
448
- --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
449
- --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
450
- --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
451
- --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
452
- --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
453
+ --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-medium);
454
+ --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strong);
455
+ --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-strongest);
456
+ --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtler);
457
+ --ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
453
458
  --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
454
459
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
455
460
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
@@ -540,20 +545,25 @@ html,
540
545
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
541
546
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
542
547
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
543
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-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);
548
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
549
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
550
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
546
551
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
547
552
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
548
553
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
549
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-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);
554
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
555
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
556
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
552
557
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
558
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
553
559
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
560
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
554
561
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
562
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
555
563
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
564
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
556
565
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
566
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
557
567
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
558
568
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
559
569
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -569,9 +579,9 @@ html,
569
579
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
570
580
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
571
581
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
572
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
582
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
573
583
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
574
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
584
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
575
585
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
576
586
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
577
587
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -644,22 +654,22 @@ html,
644
654
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
645
655
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
646
656
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
647
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
648
657
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
649
658
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
650
659
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
651
660
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
652
661
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
653
662
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
654
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
655
663
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
656
664
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
657
665
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
658
666
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
659
667
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
668
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
660
669
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
661
670
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
662
671
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
672
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
663
673
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
664
674
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
665
675
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -667,21 +677,24 @@ html,
667
677
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
668
678
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
669
679
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
680
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-100);
670
681
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
671
682
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
672
683
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
684
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-100);
673
685
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
674
686
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
675
687
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
676
688
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
689
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
677
690
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
678
691
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
679
692
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
680
693
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
694
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
681
695
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
682
696
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
683
697
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
684
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
685
698
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
686
699
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
687
700
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
@@ -698,7 +711,6 @@ html,
698
711
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
699
712
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
700
713
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
701
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
702
714
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
703
715
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
704
716
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
@@ -713,22 +725,25 @@ html,
713
725
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
714
726
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
715
727
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
728
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
716
729
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
717
730
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
718
731
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
719
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
732
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
720
733
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
721
734
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
722
735
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
723
736
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
737
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
724
738
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
725
739
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
726
740
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
727
741
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
742
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-600);
728
743
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
729
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
730
744
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
731
745
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
746
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-550);
732
747
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
733
748
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
734
749
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
@@ -737,13 +752,12 @@ html,
737
752
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
738
753
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
739
754
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
740
- --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
741
755
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
742
756
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
743
757
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
744
758
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
745
759
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
746
- --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
760
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
747
761
  --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
748
762
  --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
749
763
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
@@ -767,22 +781,22 @@ html,
767
781
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
768
782
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
769
783
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
770
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
771
784
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
772
785
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
773
786
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
774
787
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
775
788
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
776
789
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
777
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
778
790
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
779
791
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
780
792
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
781
793
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
782
794
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
795
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
783
796
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
784
797
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
785
798
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
799
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
786
800
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
787
801
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
788
802
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -790,21 +804,24 @@ html,
790
804
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
791
805
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
792
806
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
807
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
793
808
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
794
809
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
795
810
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
811
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
796
812
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
797
813
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
798
814
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
799
815
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
816
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
800
817
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
801
818
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
802
819
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
803
820
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
821
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
804
822
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
805
823
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
806
824
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
807
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
808
825
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
809
826
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
810
827
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
@@ -821,7 +838,6 @@ html,
821
838
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
822
839
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
823
840
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
824
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
825
841
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
826
842
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
827
843
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
@@ -836,22 +852,25 @@ html,
836
852
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
837
853
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
838
854
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
855
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
839
856
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
840
857
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
841
858
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
842
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
859
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
843
860
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
844
861
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
845
862
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
846
863
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
864
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
847
865
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
848
866
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
849
867
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
850
868
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
869
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
851
870
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
852
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
853
871
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
854
872
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
873
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
855
874
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
856
875
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
857
876
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
@@ -860,7 +879,6 @@ html,
860
879
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
861
880
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
862
881
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
863
- --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
864
882
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
865
883
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
866
884
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
@@ -905,20 +923,25 @@ html,
905
923
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
906
924
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
907
925
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
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);
926
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
927
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
928
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
911
929
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
912
930
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
913
931
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
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);
932
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
933
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
934
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
917
935
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
936
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
918
937
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
938
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
919
939
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
940
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
920
941
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
942
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
921
943
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
944
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
922
945
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
923
946
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
924
947
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -934,9 +957,9 @@ html,
934
957
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
935
958
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
936
959
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
937
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
960
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
938
961
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
939
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
962
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
940
963
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
941
964
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
942
965
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -1037,7 +1060,7 @@ html,
1037
1060
  --ffe-color-frost-600: #356488;
1038
1061
  --ffe-color-frost-700: #234f71;
1039
1062
  --ffe-color-frost-800: #163853;
1040
- --ffe-color-sand-25: #fcf4ee;
1063
+ --ffe-color-sand-0: #fdf8f5;
1041
1064
  --ffe-color-syrin-25: #eaeaf6;
1042
1065
  --ffe-color-syrin-50: #e6e6f4;
1043
1066
  --ffe-color-syrin-75: #dcdcef;
@@ -1062,6 +1085,7 @@ html,
1062
1085
  --ffe-color-baer-300: #ff5e5c;
1063
1086
  --ffe-color-baer-400: #e44244;
1064
1087
  --ffe-color-baer-500: #c62a2f;
1088
+ --ffe-color-baer-600: #a01c1f;
1065
1089
  --ffe-color-baer-700: #7c1214;
1066
1090
  --ffe-color-baer-800: #640e10;
1067
1091
  --ffe-color-skog-50: #cbf0df;
@@ -1078,14 +1102,15 @@ html,
1078
1102
  --ffe-color-skog-800: #0a4330;
1079
1103
  --ffe-color-sol-50: #ffe0b2;
1080
1104
  --ffe-color-sol-100: #ffc675;
1081
- --ffe-color-sol-150: #ffb64d;
1082
1105
  --ffe-color-sol-200: #f6ac3c;
1083
1106
  --ffe-color-sol-250: #f49f1f;
1084
1107
  --ffe-color-sol-500: #a95704;
1108
+ --ffe-color-sol-600: #853f00;
1109
+ --ffe-color-sol-650: #753500;
1085
1110
  --ffe-color-sol-700: #682c00;
1086
1111
  --ffe-color-sol-750: #582400;
1112
+ --ffe-color-gray-50: #e5e5e5;
1087
1113
  --ffe-color-gray-100: #cccccc;
1088
- --ffe-color-gray-150: #c2c2c2;
1089
1114
  --ffe-color-gray-200: #b8b8b8;
1090
1115
  --ffe-color-gray-250: #adadad;
1091
1116
  --ffe-color-gray-550: #707070;
package/less/colors-semantic-storybook.less CHANGED
@@ -11,22 +11,22 @@
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);
14
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
15
14
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
16
15
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
17
16
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
18
17
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
19
18
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
20
19
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
21
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
22
20
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
23
21
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
24
22
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
25
23
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
26
24
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
25
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
27
26
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
28
27
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
29
28
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
29
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
30
30
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
31
31
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
32
32
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -34,21 +34,24 @@
34
34
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
35
35
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
36
36
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
37
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
37
38
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
38
39
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
39
40
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
41
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
40
42
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
41
43
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
42
44
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
43
45
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
46
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
44
47
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
45
48
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
46
49
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
47
50
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
51
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
48
52
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
49
53
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
50
54
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
51
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
52
55
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
53
56
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
54
57
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
@@ -65,7 +68,6 @@
65
68
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
66
69
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
67
70
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
68
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
69
71
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
70
72
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
71
73
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
@@ -80,22 +82,25 @@
80
82
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
81
83
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
82
84
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
85
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
83
86
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
84
87
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
85
88
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
86
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
89
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
87
90
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
88
91
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
89
92
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
90
93
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
94
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
91
95
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
92
96
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
93
97
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
94
98
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
99
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
95
100
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
96
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
97
101
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
98
102
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
103
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
99
104
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
100
105
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
101
106
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
@@ -104,7 +109,6 @@
104
109
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
105
110
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
106
111
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
107
- --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
108
112
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
109
113
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
110
114
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
@@ -150,20 +154,25 @@
150
154
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
151
155
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
152
156
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
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);
157
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
158
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
159
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
156
160
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
157
161
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
158
162
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
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);
163
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
164
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
165
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
162
166
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
167
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
163
168
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
169
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
164
170
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
171
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
165
172
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
173
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
166
174
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
175
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
167
176
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
168
177
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
169
178
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -179,9 +188,9 @@
179
188
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
180
189
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
181
190
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
182
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
191
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
183
192
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
184
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
193
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
185
194
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
186
195
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
187
196
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);