@sb1/ffe-core 33.2.0 → 100.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 (45) hide show
  1. package/README.md +8 -8
  2. package/css/colors-semantic-tailwind-4.css +6 -0
  3. package/css/colors-semantic.css +136 -100
  4. package/css/ffe.css +138 -101
  5. package/less/colors-semantic-chevron.less +1 -1
  6. package/less/colors-semantic.less +136 -100
  7. package/less/dimensions.less +1 -0
  8. package/less/variables.less +0 -1
  9. package/lib/semanticColors.js +7 -1
  10. package/lib/semanticColorsTailwind.js +7 -1
  11. package/package.json +6 -4
  12. package/scripts/build-colors/build-colors.cjs +115 -0
  13. package/scripts/build-colors/json/json.cjs +12 -0
  14. package/scripts/build-colors/mobile/android.cjs +99 -0
  15. package/scripts/build-colors/mobile/android.test.js +98 -0
  16. package/scripts/build-colors/mobile/ios.cjs +205 -0
  17. package/scripts/build-colors/web/chevron.cjs +44 -0
  18. package/scripts/build-colors/web/color-names.cjs +24 -0
  19. package/scripts/build-colors/web/css.cjs +78 -0
  20. package/scripts/build-colors/web/js.cjs +44 -0
  21. package/scripts/build-colors/web/tailwind.cjs +36 -0
  22. package/scripts/build-colors/web/tailwind4.cjs +24 -0
  23. package/scripts/build-colors/web/web.cjs +18 -0
  24. package/scripts/build-custom-mq.cjs +45 -0
  25. package/scripts/build.cjs +38 -0
  26. package/scripts/figma-api/color.spec.tsx +126 -0
  27. package/scripts/figma-api/color.ts +52 -0
  28. package/scripts/figma-api/figma_api.ts +41 -0
  29. package/scripts/figma-api/sync_figma_to_tokens.ts +57 -0
  30. package/scripts/figma-api/token_export.spec.tsx +359 -0
  31. package/scripts/figma-api/token_export.ts +99 -0
  32. package/scripts/figma-api/token_import.spec.tsx +1097 -0
  33. package/scripts/figma-api/token_import.ts +430 -0
  34. package/scripts/figma-api/token_types.ts +55 -0
  35. package/scripts/figma-api/utils.ts +11 -0
  36. package/scripts/lib/extractCustomProps.cjs +24 -0
  37. package/scripts/lib/genTypeScript.cjs +7 -0
  38. package/scripts/lib/renderLessVarsToCSSProps.cjs +23 -0
  39. package/scripts/lib/writeToFile.cjs +9 -0
  40. package/scripts/utils.cjs +27 -0
  41. package/tokens/01 Primitive.value.json +4726 -0
  42. package/tokens/02 Semantic.Dark.json +3942 -0
  43. package/tokens/02 Semantic.Light.json +3942 -0
  44. package/tokens/03 Context.Accent.json +2273 -0
  45. package/tokens/03 Context.Default.json +2273 -0
package/css/ffe.css CHANGED
@@ -393,8 +393,8 @@ html,
393
393
  .regard-color-scheme-preference,
394
394
  .regard-color-scheme-preference .ffe-default-mode {
395
395
  --ffe-color-background-default: #020a0a;
396
- --ffe-color-background-subtle: #1f1f1f;
397
- --ffe-color-surface-primary-default: #292929;
396
+ --ffe-color-background-subtle: #121212;
397
+ --ffe-color-surface-primary-default: #262626;
398
398
  --ffe-color-surface-primary-default-hover: #333333;
399
399
  --ffe-color-surface-primary-default-pressed: #3d3d3d;
400
400
  --ffe-color-surface-secondary-default: #0c2232;
@@ -403,9 +403,9 @@ html,
403
403
  --ffe-color-surface-tertiary-default: #1d192f;
404
404
  --ffe-color-surface-tertiary-default-hover: #27223a;
405
405
  --ffe-color-surface-tertiary-default-pressed: #312c44;
406
- --ffe-color-surface-neutral-default: #3d3d3d;
407
- --ffe-color-surface-neutral-default-hover: #474747;
408
- --ffe-color-surface-neutral-default-pressed: #525252;
406
+ --ffe-color-surface-neutral-default: #333333;
407
+ --ffe-color-surface-neutral-default-hover: #3d3d3d;
408
+ --ffe-color-surface-neutral-default-pressed: #474747;
409
409
  --ffe-color-surface-feedback-info: #163853;
410
410
  --ffe-color-surface-feedback-success: #0a4330;
411
411
  --ffe-color-surface-feedback-warning: #491c00;
@@ -443,15 +443,15 @@ html,
443
443
  --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
444
444
  --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
445
445
  --ffe-color-fill-feedback-info: #7eb5d2;
446
- --ffe-color-fill-feedback-info-subtle: #234f71;
446
+ --ffe-color-fill-feedback-info-subtle: #163853;
447
447
  --ffe-color-fill-feedback-success: #6abe97;
448
- --ffe-color-fill-feedback-success-subtle: #09583b;
448
+ --ffe-color-fill-feedback-success-subtle: #0a4330;
449
449
  --ffe-color-fill-feedback-warning: #ea910b;
450
- --ffe-color-fill-feedback-warning-subtle: #682c00;
450
+ --ffe-color-fill-feedback-warning-subtle: #491c00;
451
451
  --ffe-color-fill-feedback-critical: #ff5e5c;
452
- --ffe-color-fill-feedback-critical-subtle: #7c1214;
452
+ --ffe-color-fill-feedback-critical-subtle: #640e10;
453
453
  --ffe-color-fill-feedback-tip: #c1c1dc;
454
- --ffe-color-fill-feedback-tip-subtle: #45415a;
454
+ --ffe-color-fill-feedback-tip-subtle: #312c44;
455
455
  --ffe-color-foreground-default: #ffffff;
456
456
  --ffe-color-foreground-subtle: #c2c2c2;
457
457
  --ffe-color-foreground-emphasis: #d7e7f4;
@@ -460,6 +460,7 @@ html,
460
460
  --ffe-color-foreground-interactive-link-hover: #b6d1ec;
461
461
  --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
462
462
  --ffe-color-foreground-interactive-link-active: #f7fafd;
463
+ --ffe-color-foreground-interactive-disabled: #8f8f8f;
463
464
  --ffe-color-foreground-feedback-info: #c3dfea;
464
465
  --ffe-color-foreground-feedback-success: #b2e6cd;
465
466
  --ffe-color-foreground-feedback-warning: #ffc675;
@@ -468,27 +469,32 @@ html,
468
469
  --ffe-color-component-form-input-foreground-default: #ffffff;
469
470
  --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
470
471
  --ffe-color-component-form-input-foreground-placeholder: #adadad;
471
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
472
+ --ffe-color-component-form-input-foreground-disabled: #adadad;
472
473
  --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
473
474
  --ffe-color-component-form-input-foreground-error: #ffaea8;
474
475
  --ffe-color-component-form-input-border-active: #d7e7f4;
475
- --ffe-color-component-form-input-fill-default: #292929;
476
+ --ffe-color-component-form-input-fill-default: #262626;
476
477
  --ffe-color-component-form-input-fill-default-hover: #333333;
477
478
  --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
478
479
  --ffe-color-component-form-input-fill-disabled: #5c5c5c;
479
- --ffe-color-component-form-input-fill-read-only: #474747;
480
+ --ffe-color-component-form-input-fill-read-only: #262626;
480
481
  --ffe-color-component-form-input-fill-error: #640e10;
481
482
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
483
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
482
484
  --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
483
485
  --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
484
486
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
485
487
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
486
488
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
487
489
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
490
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #00754e;
491
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #0a4330;
488
492
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
489
- --ffe-color-component-button-action-border-default: #48a781;
490
- --ffe-color-component-button-action-border-hover: #6abe97;
491
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
493
+ --ffe-color-component-form-toggleswitch-fill-disabled: #5c5c5c;
494
+ --ffe-color-component-form-toggleswitch-fill-read-only: #262626;
495
+ --ffe-color-component-button-action-border-default: #00754e;
496
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
497
+ --ffe-color-component-button-action-border-pressed: #409674;
492
498
  --ffe-color-component-button-action-fill-default: #00754e;
493
499
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
494
500
  --ffe-color-component-button-action-fill-pressed: #409674;
@@ -519,9 +525,9 @@ html,
519
525
  --ffe-color-component-logo-number1: #ffffff;
520
526
  --ffe-color-component-logo-circle-dark-red: #af0000;
521
527
  --ffe-color-component-logo-circle-light-red: #e60000;
522
- --ffe-color-border-primary-default: #ffffff26;
523
- --ffe-color-border-primary-default-hover: #ffffff33;
524
- --ffe-color-border-primary-default-pressed: #ffffff40;
528
+ --ffe-color-border-primary-default: #ffffff33;
529
+ --ffe-color-border-primary-default-hover: #ffffff40;
530
+ --ffe-color-border-primary-default-pressed: #ffffff4d;
525
531
  --ffe-color-border-primary-subtle: #ffffff13;
526
532
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
527
533
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
@@ -539,8 +545,8 @@ html,
539
545
  .ffe-dark,
540
546
  .ffe-dark .ffe-default-mode {
541
547
  --ffe-color-background-default: #020a0a;
542
- --ffe-color-background-subtle: #1f1f1f;
543
- --ffe-color-surface-primary-default: #292929;
548
+ --ffe-color-background-subtle: #121212;
549
+ --ffe-color-surface-primary-default: #262626;
544
550
  --ffe-color-surface-primary-default-hover: #333333;
545
551
  --ffe-color-surface-primary-default-pressed: #3d3d3d;
546
552
  --ffe-color-surface-secondary-default: #0c2232;
@@ -549,9 +555,9 @@ html,
549
555
  --ffe-color-surface-tertiary-default: #1d192f;
550
556
  --ffe-color-surface-tertiary-default-hover: #27223a;
551
557
  --ffe-color-surface-tertiary-default-pressed: #312c44;
552
- --ffe-color-surface-neutral-default: #3d3d3d;
553
- --ffe-color-surface-neutral-default-hover: #474747;
554
- --ffe-color-surface-neutral-default-pressed: #525252;
558
+ --ffe-color-surface-neutral-default: #333333;
559
+ --ffe-color-surface-neutral-default-hover: #3d3d3d;
560
+ --ffe-color-surface-neutral-default-pressed: #474747;
555
561
  --ffe-color-surface-feedback-info: #163853;
556
562
  --ffe-color-surface-feedback-success: #0a4330;
557
563
  --ffe-color-surface-feedback-warning: #491c00;
@@ -589,15 +595,15 @@ html,
589
595
  --ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
590
596
  --ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
591
597
  --ffe-color-fill-feedback-info: #7eb5d2;
592
- --ffe-color-fill-feedback-info-subtle: #234f71;
598
+ --ffe-color-fill-feedback-info-subtle: #163853;
593
599
  --ffe-color-fill-feedback-success: #6abe97;
594
- --ffe-color-fill-feedback-success-subtle: #09583b;
600
+ --ffe-color-fill-feedback-success-subtle: #0a4330;
595
601
  --ffe-color-fill-feedback-warning: #ea910b;
596
- --ffe-color-fill-feedback-warning-subtle: #682c00;
602
+ --ffe-color-fill-feedback-warning-subtle: #491c00;
597
603
  --ffe-color-fill-feedback-critical: #ff5e5c;
598
- --ffe-color-fill-feedback-critical-subtle: #7c1214;
604
+ --ffe-color-fill-feedback-critical-subtle: #640e10;
599
605
  --ffe-color-fill-feedback-tip: #c1c1dc;
600
- --ffe-color-fill-feedback-tip-subtle: #45415a;
606
+ --ffe-color-fill-feedback-tip-subtle: #312c44;
601
607
  --ffe-color-foreground-default: #ffffff;
602
608
  --ffe-color-foreground-subtle: #c2c2c2;
603
609
  --ffe-color-foreground-emphasis: #d7e7f4;
@@ -606,6 +612,7 @@ html,
606
612
  --ffe-color-foreground-interactive-link-hover: #b6d1ec;
607
613
  --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
608
614
  --ffe-color-foreground-interactive-link-active: #f7fafd;
615
+ --ffe-color-foreground-interactive-disabled: #8f8f8f;
609
616
  --ffe-color-foreground-feedback-info: #c3dfea;
610
617
  --ffe-color-foreground-feedback-success: #b2e6cd;
611
618
  --ffe-color-foreground-feedback-warning: #ffc675;
@@ -614,27 +621,32 @@ html,
614
621
  --ffe-color-component-form-input-foreground-default: #ffffff;
615
622
  --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
616
623
  --ffe-color-component-form-input-foreground-placeholder: #adadad;
617
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
624
+ --ffe-color-component-form-input-foreground-disabled: #adadad;
618
625
  --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
619
626
  --ffe-color-component-form-input-foreground-error: #ffaea8;
620
627
  --ffe-color-component-form-input-border-active: #d7e7f4;
621
- --ffe-color-component-form-input-fill-default: #292929;
628
+ --ffe-color-component-form-input-fill-default: #262626;
622
629
  --ffe-color-component-form-input-fill-default-hover: #333333;
623
630
  --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
624
631
  --ffe-color-component-form-input-fill-disabled: #5c5c5c;
625
- --ffe-color-component-form-input-fill-read-only: #474747;
632
+ --ffe-color-component-form-input-fill-read-only: #262626;
626
633
  --ffe-color-component-form-input-fill-error: #640e10;
627
634
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
635
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
628
636
  --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
629
637
  --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
630
638
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
631
639
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
632
640
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
633
641
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
642
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #00754e;
643
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #0a4330;
634
644
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
635
- --ffe-color-component-button-action-border-default: #48a781;
636
- --ffe-color-component-button-action-border-hover: #6abe97;
637
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
645
+ --ffe-color-component-form-toggleswitch-fill-disabled: #5c5c5c;
646
+ --ffe-color-component-form-toggleswitch-fill-read-only: #262626;
647
+ --ffe-color-component-button-action-border-default: #00754e;
648
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
649
+ --ffe-color-component-button-action-border-pressed: #409674;
638
650
  --ffe-color-component-button-action-fill-default: #00754e;
639
651
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
640
652
  --ffe-color-component-button-action-fill-pressed: #409674;
@@ -665,9 +677,9 @@ html,
665
677
  --ffe-color-component-logo-number1: #ffffff;
666
678
  --ffe-color-component-logo-circle-dark-red: #af0000;
667
679
  --ffe-color-component-logo-circle-light-red: #e60000;
668
- --ffe-color-border-primary-default: #ffffff26;
669
- --ffe-color-border-primary-default-hover: #ffffff33;
670
- --ffe-color-border-primary-default-pressed: #ffffff40;
680
+ --ffe-color-border-primary-default: #ffffff33;
681
+ --ffe-color-border-primary-default-hover: #ffffff40;
682
+ --ffe-color-border-primary-default-pressed: #ffffff4d;
671
683
  --ffe-color-border-primary-subtle: #ffffff13;
672
684
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
673
685
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
@@ -683,9 +695,9 @@ html,
683
695
  /* dark mode accent context */
684
696
  @media (prefers-color-scheme: dark) {
685
697
  .regard-color-scheme-preference .ffe-accent-mode {
686
- --ffe-color-background-default: #141414;
687
- --ffe-color-background-subtle: #1f1f1f;
688
- --ffe-color-surface-primary-default: #292929;
698
+ --ffe-color-background-default: #1a1a1a;
699
+ --ffe-color-background-subtle: #121212;
700
+ --ffe-color-surface-primary-default: #262626;
689
701
  --ffe-color-surface-primary-default-hover: #333333;
690
702
  --ffe-color-surface-primary-default-pressed: #3d3d3d;
691
703
  --ffe-color-surface-secondary-default: #0c2232;
@@ -694,9 +706,9 @@ html,
694
706
  --ffe-color-surface-tertiary-default: #1d192f;
695
707
  --ffe-color-surface-tertiary-default-hover: #27223a;
696
708
  --ffe-color-surface-tertiary-default-pressed: #312c44;
697
- --ffe-color-surface-neutral-default: #3d3d3d;
698
- --ffe-color-surface-neutral-default-hover: #474747;
699
- --ffe-color-surface-neutral-default-pressed: #525252;
709
+ --ffe-color-surface-neutral-default: #333333;
710
+ --ffe-color-surface-neutral-default-hover: #3d3d3d;
711
+ --ffe-color-surface-neutral-default-pressed: #474747;
700
712
  --ffe-color-surface-feedback-info: #163853;
701
713
  --ffe-color-surface-feedback-success: #0a4330;
702
714
  --ffe-color-surface-feedback-warning: #491c00;
@@ -751,6 +763,7 @@ html,
751
763
  --ffe-color-foreground-interactive-link-hover: #b6d1ec;
752
764
  --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
753
765
  --ffe-color-foreground-interactive-link-active: #f7fafd;
766
+ --ffe-color-foreground-interactive-disabled: #8f8f8f;
754
767
  --ffe-color-foreground-feedback-info: #c3dfea;
755
768
  --ffe-color-foreground-feedback-success: #b2e6cd;
756
769
  --ffe-color-foreground-feedback-warning: #ffc675;
@@ -759,27 +772,32 @@ html,
759
772
  --ffe-color-component-form-input-foreground-default: #ffffff;
760
773
  --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
761
774
  --ffe-color-component-form-input-foreground-placeholder: #adadad;
762
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
775
+ --ffe-color-component-form-input-foreground-disabled: #adadad;
763
776
  --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
764
777
  --ffe-color-component-form-input-foreground-error: #ffaea8;
765
778
  --ffe-color-component-form-input-border-active: #d7e7f4;
766
- --ffe-color-component-form-input-fill-default: #292929;
779
+ --ffe-color-component-form-input-fill-default: #262626;
767
780
  --ffe-color-component-form-input-fill-default-hover: #333333;
768
781
  --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
769
782
  --ffe-color-component-form-input-fill-disabled: #5c5c5c;
770
- --ffe-color-component-form-input-fill-read-only: #474747;
783
+ --ffe-color-component-form-input-fill-read-only: #262626;
771
784
  --ffe-color-component-form-input-fill-error: #640e10;
772
785
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
786
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
773
787
  --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
774
788
  --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
775
789
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
776
790
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
777
791
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
778
792
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
793
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #00754e;
794
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #0a4330;
779
795
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
780
- --ffe-color-component-button-action-border-default: #48a781;
781
- --ffe-color-component-button-action-border-hover: #6abe97;
782
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
796
+ --ffe-color-component-form-toggleswitch-fill-disabled: #5c5c5c;
797
+ --ffe-color-component-form-toggleswitch-fill-read-only: #262626;
798
+ --ffe-color-component-button-action-border-default: #00754e;
799
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
800
+ --ffe-color-component-button-action-border-pressed: #409674;
783
801
  --ffe-color-component-button-action-fill-default: #00754e;
784
802
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
785
803
  --ffe-color-component-button-action-fill-pressed: #409674;
@@ -810,9 +828,9 @@ html,
810
828
  --ffe-color-component-logo-number1: #ffffff;
811
829
  --ffe-color-component-logo-circle-dark-red: #af0000;
812
830
  --ffe-color-component-logo-circle-light-red: #e60000;
813
- --ffe-color-border-primary-default: #ffffff26;
814
- --ffe-color-border-primary-default-hover: #ffffff33;
815
- --ffe-color-border-primary-default-pressed: #ffffff40;
831
+ --ffe-color-border-primary-default: #ffffff33;
832
+ --ffe-color-border-primary-default-hover: #ffffff40;
833
+ --ffe-color-border-primary-default-pressed: #ffffff4d;
816
834
  --ffe-color-border-primary-subtle: #ffffff13;
817
835
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
818
836
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
@@ -827,10 +845,11 @@ html,
827
845
  }
828
846
  }
829
847
  /* dark mode accent når en overstyrer os/nettleser light/dark preferanser*/
830
- .ffe-dark .ffe-accent-mode {
831
- --ffe-color-background-default: #141414;
832
- --ffe-color-background-subtle: #1f1f1f;
833
- --ffe-color-surface-primary-default: #292929;
848
+ .ffe-dark .ffe-accent-mode,
849
+ .ffe-dark.ffe-accent-mode {
850
+ --ffe-color-background-default: #1a1a1a;
851
+ --ffe-color-background-subtle: #121212;
852
+ --ffe-color-surface-primary-default: #262626;
834
853
  --ffe-color-surface-primary-default-hover: #333333;
835
854
  --ffe-color-surface-primary-default-pressed: #3d3d3d;
836
855
  --ffe-color-surface-secondary-default: #0c2232;
@@ -839,9 +858,9 @@ html,
839
858
  --ffe-color-surface-tertiary-default: #1d192f;
840
859
  --ffe-color-surface-tertiary-default-hover: #27223a;
841
860
  --ffe-color-surface-tertiary-default-pressed: #312c44;
842
- --ffe-color-surface-neutral-default: #3d3d3d;
843
- --ffe-color-surface-neutral-default-hover: #474747;
844
- --ffe-color-surface-neutral-default-pressed: #525252;
861
+ --ffe-color-surface-neutral-default: #333333;
862
+ --ffe-color-surface-neutral-default-hover: #3d3d3d;
863
+ --ffe-color-surface-neutral-default-pressed: #474747;
845
864
  --ffe-color-surface-feedback-info: #163853;
846
865
  --ffe-color-surface-feedback-success: #0a4330;
847
866
  --ffe-color-surface-feedback-warning: #491c00;
@@ -896,6 +915,7 @@ html,
896
915
  --ffe-color-foreground-interactive-link-hover: #b6d1ec;
897
916
  --ffe-color-foreground-interactive-link-pressed: #9ec2e5;
898
917
  --ffe-color-foreground-interactive-link-active: #f7fafd;
918
+ --ffe-color-foreground-interactive-disabled: #8f8f8f;
899
919
  --ffe-color-foreground-feedback-info: #c3dfea;
900
920
  --ffe-color-foreground-feedback-success: #b2e6cd;
901
921
  --ffe-color-foreground-feedback-warning: #ffc675;
@@ -904,27 +924,32 @@ html,
904
924
  --ffe-color-component-form-input-foreground-default: #ffffff;
905
925
  --ffe-color-component-form-input-foreground-subtle: #c2c2c2;
906
926
  --ffe-color-component-form-input-foreground-placeholder: #adadad;
907
- --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
927
+ --ffe-color-component-form-input-foreground-disabled: #adadad;
908
928
  --ffe-color-component-form-input-foreground-read-only: #c2c2c2;
909
929
  --ffe-color-component-form-input-foreground-error: #ffaea8;
910
930
  --ffe-color-component-form-input-border-active: #d7e7f4;
911
- --ffe-color-component-form-input-fill-default: #292929;
931
+ --ffe-color-component-form-input-fill-default: #262626;
912
932
  --ffe-color-component-form-input-fill-default-hover: #333333;
913
933
  --ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
914
934
  --ffe-color-component-form-input-fill-disabled: #5c5c5c;
915
- --ffe-color-component-form-input-fill-read-only: #474747;
935
+ --ffe-color-component-form-input-fill-read-only: #262626;
916
936
  --ffe-color-component-form-input-fill-error: #640e10;
917
937
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
938
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
918
939
  --ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
919
940
  --ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
920
941
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
921
942
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
922
943
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
923
944
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
945
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #00754e;
946
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #0a4330;
924
947
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
925
- --ffe-color-component-button-action-border-default: #48a781;
926
- --ffe-color-component-button-action-border-hover: #6abe97;
927
- --ffe-color-component-button-action-border-pressed: #8fd1b1;
948
+ --ffe-color-component-form-toggleswitch-fill-disabled: #5c5c5c;
949
+ --ffe-color-component-form-toggleswitch-fill-read-only: #262626;
950
+ --ffe-color-component-button-action-border-default: #00754e;
951
+ --ffe-color-component-button-action-border-hover: #2a7e5b;
952
+ --ffe-color-component-button-action-border-pressed: #409674;
928
953
  --ffe-color-component-button-action-fill-default: #00754e;
929
954
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
930
955
  --ffe-color-component-button-action-fill-pressed: #409674;
@@ -955,9 +980,9 @@ html,
955
980
  --ffe-color-component-logo-number1: #ffffff;
956
981
  --ffe-color-component-logo-circle-dark-red: #af0000;
957
982
  --ffe-color-component-logo-circle-light-red: #e60000;
958
- --ffe-color-border-primary-default: #ffffff26;
959
- --ffe-color-border-primary-default-hover: #ffffff33;
960
- --ffe-color-border-primary-default-pressed: #ffffff40;
983
+ --ffe-color-border-primary-default: #ffffff33;
984
+ --ffe-color-border-primary-default-hover: #ffffff40;
985
+ --ffe-color-border-primary-default-pressed: #ffffff4d;
961
986
  --ffe-color-border-primary-subtle: #ffffff13;
962
987
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
963
988
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
@@ -975,7 +1000,8 @@ html,
975
1000
  :host,
976
1001
  .ffe-default-mode,
977
1002
  .ffe-light,
978
- .ffe-light .ffe-default-mode {
1003
+ .ffe-light .ffe-default-mode,
1004
+ .ffe-light.ffe-default-mode {
979
1005
  --ffe-color-background-default: #ffffff;
980
1006
  --ffe-color-background-subtle: #fdf8f5;
981
1007
  --ffe-color-surface-primary-default: #ffffff;
@@ -1027,16 +1053,16 @@ html,
1027
1053
  --ffe-color-fill-neutral-extra-subtle-hover: #020a0a0d;
1028
1054
  --ffe-color-fill-neutral-extra-subtle-pressed: #020a0a13;
1029
1055
  --ffe-color-fill-feedback-info: #457aa1;
1030
- --ffe-color-fill-feedback-info-subtle: #cbe2eb;
1056
+ --ffe-color-fill-feedback-info-subtle: #e5f0f5;
1031
1057
  --ffe-color-fill-feedback-success: #2a7e5b;
1032
- --ffe-color-fill-feedback-success-subtle: #bbedd5;
1058
+ --ffe-color-fill-feedback-success-subtle: #dff6eb;
1033
1059
  --ffe-color-fill-feedback-warning: #a95704;
1034
- --ffe-color-fill-feedback-warning-subtle: #ffd394;
1060
+ --ffe-color-fill-feedback-warning-subtle: #fdeed3;
1035
1061
  --ffe-color-fill-feedback-critical: #c62a2f;
1036
- --ffe-color-fill-feedback-critical-subtle: #ffbeb8;
1062
+ --ffe-color-fill-feedback-critical-subtle: #ffe3e0;
1037
1063
  --ffe-color-fill-feedback-tip: #5a5671;
1038
- --ffe-color-fill-feedback-tip-subtle: #dcdcef;
1039
- --ffe-color-foreground-default: #1f1f1f;
1064
+ --ffe-color-fill-feedback-tip-subtle: #eaeaf6;
1065
+ --ffe-color-foreground-default: #1a1a1a;
1040
1066
  --ffe-color-foreground-subtle: #525252;
1041
1067
  --ffe-color-foreground-emphasis: #08235e;
1042
1068
  --ffe-color-foreground-inverse: #ffffff;
@@ -1044,15 +1070,16 @@ html,
1044
1070
  --ffe-color-foreground-interactive-link-hover: #073f83;
1045
1071
  --ffe-color-foreground-interactive-link-pressed: #082868;
1046
1072
  --ffe-color-foreground-interactive-link-active: #005aa4;
1073
+ --ffe-color-foreground-interactive-disabled: #a4a4a4;
1047
1074
  --ffe-color-foreground-feedback-info: #234f71;
1048
1075
  --ffe-color-foreground-feedback-success: #0a4d37;
1049
1076
  --ffe-color-foreground-feedback-warning: #682c00;
1050
1077
  --ffe-color-foreground-feedback-critical: #7c1214;
1051
1078
  --ffe-color-foreground-feedback-tip: #45415a;
1052
- --ffe-color-component-form-input-foreground-default: #1f1f1f;
1079
+ --ffe-color-component-form-input-foreground-default: #1a1a1a;
1053
1080
  --ffe-color-component-form-input-foreground-subtle: #525252;
1054
1081
  --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
1055
- --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
1082
+ --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
1056
1083
  --ffe-color-component-form-input-foreground-read-only: #525252;
1057
1084
  --ffe-color-component-form-input-foreground-error: #7c1214;
1058
1085
  --ffe-color-component-form-input-border-active: #08235e;
@@ -1060,19 +1087,24 @@ html,
1060
1087
  --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
1061
1088
  --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
1062
1089
  --ffe-color-component-form-input-fill-disabled: #d6d6d6;
1063
- --ffe-color-component-form-input-fill-read-only: #e5e5e5;
1090
+ --ffe-color-component-form-input-fill-read-only: #f0f0f0;
1064
1091
  --ffe-color-component-form-input-fill-error: #ffe3e0;
1065
1092
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
1093
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
1066
1094
  --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
1067
1095
  --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
1068
1096
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
1069
1097
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
1070
1098
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
1071
1099
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
1100
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #9edbbe;
1101
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #dff6eb;
1072
1102
  --ffe-color-component-form-toggleswitch-fill-critical: #e44244;
1073
- --ffe-color-component-button-action-border-default: #48a781;
1074
- --ffe-color-component-button-action-border-hover: #2a7e5b;
1075
- --ffe-color-component-button-action-border-pressed: #0d6346;
1103
+ --ffe-color-component-form-toggleswitch-fill-disabled: #d6d6d6;
1104
+ --ffe-color-component-form-toggleswitch-fill-read-only: #f0f0f0;
1105
+ --ffe-color-component-button-action-border-default: #2a7e5b;
1106
+ --ffe-color-component-button-action-border-hover: #0d6346;
1107
+ --ffe-color-component-button-action-border-pressed: #0a4d37;
1076
1108
  --ffe-color-component-button-action-fill-default: #2a7e5b;
1077
1109
  --ffe-color-component-button-action-fill-hover: #0d6346;
1078
1110
  --ffe-color-component-button-action-fill-pressed: #0a4d37;
@@ -1103,9 +1135,9 @@ html,
1103
1135
  --ffe-color-component-logo-number1: #ffffff;
1104
1136
  --ffe-color-component-logo-circle-dark-red: #af0000;
1105
1137
  --ffe-color-component-logo-circle-light-red: #e60000;
1106
- --ffe-color-border-primary-default: #020a0a26;
1107
- --ffe-color-border-primary-default-hover: #020a0a33;
1108
- --ffe-color-border-primary-default-pressed: #020a0a40;
1138
+ --ffe-color-border-primary-default: #020a0a33;
1139
+ --ffe-color-border-primary-default-hover: #020a0a40;
1140
+ --ffe-color-border-primary-default-pressed: #020a0a4d;
1109
1141
  --ffe-color-border-primary-subtle: #020a0a13;
1110
1142
  --ffe-color-border-primary-subtle-hover: #020a0a1a;
1111
1143
  --ffe-color-border-primary-subtle-pressed: #020a0a26;
@@ -1122,7 +1154,7 @@ html,
1122
1154
  .ffe-light .ffe-accent-mode,
1123
1155
  .ffe-accent-mode {
1124
1156
  --ffe-color-background-default: #084f91;
1125
- --ffe-color-background-subtle: #073f83;
1157
+ --ffe-color-background-subtle: #04347c;
1126
1158
  --ffe-color-surface-primary-default: #005aa4;
1127
1159
  --ffe-color-surface-primary-default-hover: #1566b2;
1128
1160
  --ffe-color-surface-primary-default-pressed: #2975c2;
@@ -1132,9 +1164,9 @@ html,
1132
1164
  --ffe-color-surface-tertiary-default: #45415a;
1133
1165
  --ffe-color-surface-tertiary-default-hover: #3c374e;
1134
1166
  --ffe-color-surface-tertiary-default-pressed: #312c44;
1135
- --ffe-color-surface-neutral-default: #04347c;
1136
- --ffe-color-surface-neutral-default-hover: #073f83;
1137
- --ffe-color-surface-neutral-default-pressed: #084f91;
1167
+ --ffe-color-surface-neutral-default: #073f83;
1168
+ --ffe-color-surface-neutral-default-hover: #084f91;
1169
+ --ffe-color-surface-neutral-default-pressed: #005aa4;
1138
1170
  --ffe-color-surface-feedback-info: #234f71;
1139
1171
  --ffe-color-surface-feedback-success: #09583b;
1140
1172
  --ffe-color-surface-feedback-warning: #682c00;
@@ -1146,9 +1178,9 @@ html,
1146
1178
  --ffe-color-fill-primary-selected-default: #ffffff;
1147
1179
  --ffe-color-fill-primary-selected-hover: #d7e7f4;
1148
1180
  --ffe-color-fill-primary-selected-pressed: #c3d9ef;
1149
- --ffe-color-fill-primary-subtle: #ffffff1a;
1150
- --ffe-color-fill-primary-subtle-hover: #ffffff26;
1151
- --ffe-color-fill-primary-subtle-pressed: #ffffff33;
1181
+ --ffe-color-fill-primary-subtle: #ffffff26;
1182
+ --ffe-color-fill-primary-subtle-hover: #ffffff33;
1183
+ --ffe-color-fill-primary-subtle-pressed: #ffffff40;
1152
1184
  --ffe-color-fill-primary-invisible: #ffffff00;
1153
1185
  --ffe-color-fill-secondary-default: #457aa1;
1154
1186
  --ffe-color-fill-secondary-default-hover: #a6cee2;
@@ -1189,15 +1221,16 @@ html,
1189
1221
  --ffe-color-foreground-interactive-link-hover: #e7f1f9;
1190
1222
  --ffe-color-foreground-interactive-link-pressed: #d7e7f4;
1191
1223
  --ffe-color-foreground-interactive-link-active: #ffffff;
1224
+ --ffe-color-foreground-interactive-disabled: #ffffff66;
1192
1225
  --ffe-color-foreground-feedback-info: #dceaef;
1193
1226
  --ffe-color-foreground-feedback-success: #cbf0df;
1194
1227
  --ffe-color-foreground-feedback-warning: #ffe0b2;
1195
1228
  --ffe-color-foreground-feedback-critical: #ffd5d1;
1196
1229
  --ffe-color-foreground-feedback-tip: #e6e6f4;
1197
- --ffe-color-component-form-input-foreground-default: #1f1f1f;
1230
+ --ffe-color-component-form-input-foreground-default: #1a1a1a;
1198
1231
  --ffe-color-component-form-input-foreground-subtle: #525252;
1199
1232
  --ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
1200
- --ffe-color-component-form-input-foreground-disabled: #a4a4a4;
1233
+ --ffe-color-component-form-input-foreground-disabled: #8f8f8f;
1201
1234
  --ffe-color-component-form-input-foreground-read-only: #525252;
1202
1235
  --ffe-color-component-form-input-foreground-error: #7c1214;
1203
1236
  --ffe-color-component-form-input-border-active: #7dabd9;
@@ -1205,19 +1238,24 @@ html,
1205
1238
  --ffe-color-component-form-input-fill-default-hover: #e7f1f9;
1206
1239
  --ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
1207
1240
  --ffe-color-component-form-input-fill-disabled: #d6d6d6;
1208
- --ffe-color-component-form-input-fill-read-only: #e5e5e5;
1241
+ --ffe-color-component-form-input-fill-read-only: #f0f0f0;
1209
1242
  --ffe-color-component-form-input-fill-error: #ffe3e0;
1210
1243
  --ffe-color-component-form-toggleswitch-handle-default: #ffffff;
1244
+ --ffe-color-component-form-toggleswitch-handle-disabled: #a4a4a4;
1211
1245
  --ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
1212
1246
  --ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
1213
1247
  --ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
1214
1248
  --ffe-color-component-form-toggleswitch-fill-selected: #48a781;
1215
1249
  --ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
1216
1250
  --ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
1251
+ --ffe-color-component-form-toggleswitch-fill-selected-disabled: #9edbbe;
1252
+ --ffe-color-component-form-toggleswitch-fill-selected-read-only: #dff6eb;
1217
1253
  --ffe-color-component-form-toggleswitch-fill-critical: #ff5e5c;
1218
- --ffe-color-component-button-action-border-default: #48a781;
1254
+ --ffe-color-component-form-toggleswitch-fill-disabled: #d6d6d6;
1255
+ --ffe-color-component-form-toggleswitch-fill-read-only: #f0f0f0;
1256
+ --ffe-color-component-button-action-border-default: #00754e;
1219
1257
  --ffe-color-component-button-action-border-hover: #2a7e5b;
1220
- --ffe-color-component-button-action-border-pressed: #0d6346;
1258
+ --ffe-color-component-button-action-border-pressed: #409674;
1221
1259
  --ffe-color-component-button-action-fill-default: #00754e;
1222
1260
  --ffe-color-component-button-action-fill-hover: #2a7e5b;
1223
1261
  --ffe-color-component-button-action-fill-pressed: #409674;
@@ -1248,9 +1286,9 @@ html,
1248
1286
  --ffe-color-component-logo-number1: #ffffff;
1249
1287
  --ffe-color-component-logo-circle-dark-red: #af0000;
1250
1288
  --ffe-color-component-logo-circle-light-red: #e60000;
1251
- --ffe-color-border-primary-default: #ffffff26;
1252
- --ffe-color-border-primary-default-hover: #ffffff33;
1253
- --ffe-color-border-primary-default-pressed: #ffffff40;
1289
+ --ffe-color-border-primary-default: #ffffff33;
1290
+ --ffe-color-border-primary-default-hover: #ffffff40;
1291
+ --ffe-color-border-primary-default-pressed: #ffffff4d;
1254
1292
  --ffe-color-border-primary-subtle: #ffffff13;
1255
1293
  --ffe-color-border-primary-subtle-hover: #ffffff1a;
1256
1294
  --ffe-color-border-primary-subtle-pressed: #ffffff26;
@@ -1772,7 +1810,6 @@ html,
1772
1810
  }
1773
1811
  :root,
1774
1812
  :host {
1775
- /* Form element borders */
1776
1813
  --ffe-g-border-radius-sm: 4px;
1777
1814
  --ffe-g-border-radius: 8px;
1778
1815
  --ffe-g-border-radius-lg: 16px;
package/less/colors-semantic-chevron.less CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
  // Chevron colors to make it work with semantic colors
7
- @ffe-color-chevron-light-default: 1f1f1f;
7
+ @ffe-color-chevron-light-default: 1a1a1a;
8
8
  @ffe-color-chevron-dark-default: ffffff;
9
9
  @ffe-color-chevron-light-accent: ffffff;
10
10
  @ffe-color-chevron-dark-accent: ffffff;