@sb1/ffe-core 31.0.0 → 31.0.2

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 (14) hide show
  1. package/css/colors-semantic.css +51 -47
  2. package/css/colors.css +1 -1
  3. package/css/ffe.css +130 -50
  4. package/es/tsconfig.esm.tsbuildinfo +1 -1
  5. package/less/colors-semantic-chevron.less +1 -1
  6. package/less/colors-semantic-storybook.less +23 -22
  7. package/less/colors-semantic.less +51 -47
  8. package/less/colors.less +1 -1
  9. package/less/ffe.less +1 -0
  10. package/less/theme.less +6 -6
  11. package/less/waves.less +90 -0
  12. package/lib/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/package.json +2 -2
  14. package/types/tsconfig.types.tsbuildinfo +1 -1
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/colors.css CHANGED
@@ -1,4 +1,4 @@
1
- /* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
1
+ /* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
2
2
  :root,
3
3
  :host {
4
4
  --ffe-farge-fjell: #002776;
package/css/ffe.css CHANGED
@@ -386,11 +386,11 @@ html,
386
386
  font: -apple-system-body;
387
387
  }
388
388
  }
389
- /* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
389
+ /* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
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;
@@ -1133,7 +1137,7 @@ html,
1133
1137
  */
1134
1138
  :root,
1135
1139
  :host {
1136
- /* DEPRICATED, bruk colors-semantic i stedet for */
1140
+ /* DEPRECATED, bruk colors-semantic i stedet for */
1137
1141
  /** Primærpalett */
1138
1142
  --ffe-farge-fjell: #002776;
1139
1143
  --ffe-farge-fjell-70: #4d689f;
@@ -1186,7 +1190,7 @@ html,
1186
1190
  --ffe-farge-varmgraa: #9b9797;
1187
1191
  --ffe-farge-lysvarmgraa: #d7d2cb;
1188
1192
  --ffe-farge-hvit: #fff;
1189
- /* END depricated */
1193
+ /* END deprecated */
1190
1194
  /** Font sizes */
1191
1195
  --ffe-fontsize-body-text: 1rem;
1192
1196
  --ffe-fontsize-small-text: 0.875rem;
@@ -1645,3 +1649,79 @@ html,
1645
1649
  --ffe-g-border-width: 1px;
1646
1650
  --ffe-g-border-focus-box-shadow: 0 0 0 1px;
1647
1651
  }
1652
+ .ffe-wave {
1653
+ position: relative;
1654
+ width: 100%;
1655
+ }
1656
+ .ffe-wave__content {
1657
+ position: absolute;
1658
+ z-index: 1;
1659
+ width: 100%;
1660
+ }
1661
+ .ffe-wave__wave {
1662
+ -webkit-mask-repeat: repeat-x;
1663
+ mask-repeat: repeat-x;
1664
+ min-height: 60px;
1665
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
1666
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
1667
+ -webkit-mask-size: 480px;
1668
+ mask-size: 480px;
1669
+ }
1670
+ @media (min-width: 480px) {
1671
+ .ffe-wave__wave {
1672
+ min-height: 119px;
1673
+ -webkit-mask-position: 812px;
1674
+ mask-position: 812px;
1675
+ -webkit-mask-size: 950px;
1676
+ mask-size: 950px;
1677
+ }
1678
+ }
1679
+ @media (min-width: 1024px) {
1680
+ .ffe-wave__wave {
1681
+ min-height: 250px;
1682
+ -webkit-mask-position: 1931px;
1683
+ mask-position: 1931px;
1684
+ -webkit-mask-size: 2004px;
1685
+ mask-size: 2004px;
1686
+ }
1687
+ }
1688
+ .ffe-wave__wave--flip {
1689
+ rotate: 180deg;
1690
+ }
1691
+ .ffe-wave--bg-hvit {
1692
+ background-color: var(--ffe-farge-hvit);
1693
+ }
1694
+ .ffe-wave--bg-frost-30 {
1695
+ background-color: #d8e9f2;
1696
+ }
1697
+ .ffe-wave--bg-sand-30 {
1698
+ background-color: #fdf8f5;
1699
+ }
1700
+ .ffe-wave--bg-sand-70 {
1701
+ background-color: #faf0e7;
1702
+ }
1703
+ .ffe-wave--bg-syrin-30 {
1704
+ background-color: #f2f2f9;
1705
+ }
1706
+ .ffe-wave--bg-syrin-70 {
1707
+ background-color: #e0e0f0;
1708
+ }
1709
+ .ffe-wave--bg-vann {
1710
+ background-color: #005aa4;
1711
+ }
1712
+ .ffe-wave--bg-vann-30 {
1713
+ background-color: #b3cee4;
1714
+ }
1715
+ .ffe-wave--bg-fjell {
1716
+ background-color: #002776;
1717
+ }
1718
+ @media (prefers-color-scheme: dark) {
1719
+ .regard-color-scheme-preference .ffe-wave--dm-bg-svart {
1720
+ background-color: var(--ffe-farge-svart);
1721
+ }
1722
+ }
1723
+ @media (prefers-color-scheme: dark) {
1724
+ .regard-color-scheme-preference .ffe-wave--dm-bg-natt {
1725
+ background-color: #001032;
1726
+ }
1727
+ }
package/es/tsconfig.esm.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"root":["../gen-src/index.ts"],"version":"5.7.3"}
1
+ {"root":["../gen-src/index.ts"],"version":"5.8.2"}
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/colors.less CHANGED
@@ -2,7 +2,7 @@
2
2
  // ======== Ny visuell identitet ========
3
3
  //
4
4
 
5
- /* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
5
+ /* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
6
6
  // Primærpalett
7
7
  @ffe-farge-fjell: #002776;
8
8
  @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);
package/less/ffe.less CHANGED
@@ -18,3 +18,4 @@
18
18
  @import 'body';
19
19
  @import 'accessibility';
20
20
  @import 'variables';
21
+ @import 'waves';
package/less/theme.less CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
  :root,
7
7
  :host {
8
- /* DEPRICATED, bruk colors-semantic i stedet for */
8
+ /* DEPRECATED, bruk colors-semantic i stedet for */
9
9
 
10
10
  /** Primærpalett */
11
11
  --ffe-farge-fjell: @ffe-farge-fjell;
@@ -62,7 +62,7 @@
62
62
  --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
63
63
  --ffe-farge-hvit: @ffe-farge-hvit;
64
64
 
65
- /* END depricated */
65
+ /* END deprecated */
66
66
 
67
67
  /** Font sizes */
68
68
  --ffe-fontsize-body-text: 1rem;
@@ -129,16 +129,16 @@
129
129
  /** Theme base colors */
130
130
 
131
131
  /* Links, buttons and similar */
132
- --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
132
+ --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Deprecated
133
133
 
134
134
  /* Headings, labels, hover, etc */
135
- --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
135
+ --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Deprecated
136
136
 
137
137
  /* Error messages, invalid inputs, etc */
138
- --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
138
+ --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Deprecated
139
139
 
140
140
  /* Form element borders */
141
- --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
141
+ --ffe-g-border-color: var(--ffe-color-border-primary-default); //Deprecated
142
142
 
143
143
  /* Default font */
144
144
  --ffe-g-font: 'SpareBank1-regular', arial, sans-serif;
package/less/waves.less ADDED
@@ -0,0 +1,90 @@
1
+ //DEPRECATED: Use ffe-core/less/waves.less instead
2
+ @import (reference) 'breakpoints';
3
+ @import 'colors';
4
+
5
+ .ffe-wave {
6
+ position: relative;
7
+ width: 100%;
8
+
9
+ &__content {
10
+ position: absolute;
11
+ z-index: 1;
12
+ width: 100%;
13
+ }
14
+
15
+ &__wave {
16
+ mask-repeat: repeat-x;
17
+ min-height: 60px;
18
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
19
+ mask-size: 480px;
20
+
21
+ @media (min-width: @breakpoint-sm) {
22
+ min-height: 119px;
23
+ mask-position: 812px;
24
+ mask-size: 950px;
25
+ }
26
+
27
+ @media (min-width: @breakpoint-lg) {
28
+ min-height: 250px;
29
+ mask-position: 1931px;
30
+ mask-size: 2004px;
31
+ }
32
+
33
+ &--flip {
34
+ rotate: 180deg;
35
+ }
36
+ }
37
+
38
+ // Tilgjengelige farger
39
+ &--bg-hvit {
40
+ background-color: var(--ffe-farge-hvit);
41
+ }
42
+
43
+ &--bg-frost-30 {
44
+ background-color: @ffe-farge-frost-30;
45
+ }
46
+
47
+ &--bg-sand-30 {
48
+ background-color: @ffe-farge-sand-30;
49
+ }
50
+
51
+ &--bg-sand-70 {
52
+ background-color: @ffe-farge-sand-70;
53
+ }
54
+
55
+ &--bg-syrin-30 {
56
+ background-color: @ffe-farge-syrin-30;
57
+ }
58
+
59
+ &--bg-syrin-70 {
60
+ background-color: @ffe-farge-syrin-70;
61
+ }
62
+
63
+ &--bg-vann {
64
+ background-color: @ffe-farge-vann;
65
+ }
66
+
67
+ &--bg-vann-30 {
68
+ background-color: @ffe-farge-vann-30;
69
+ }
70
+
71
+ &--bg-fjell {
72
+ background-color: @ffe-farge-fjell;
73
+ }
74
+
75
+ &--dm-bg-svart {
76
+ .regard-color-scheme-preference & {
77
+ @media (prefers-color-scheme: dark) {
78
+ background-color: var(--ffe-farge-svart);
79
+ }
80
+ }
81
+ }
82
+
83
+ &--dm-bg-natt {
84
+ .regard-color-scheme-preference & {
85
+ @media (prefers-color-scheme: dark) {
86
+ background-color: @ffe-farge-natt;
87
+ }
88
+ }
89
+ }
90
+ }
package/lib/tsconfig.cjs.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"root":["../gen-src/index.ts"],"version":"5.7.3"}
1
+ {"root":["../gen-src/index.ts"],"version":"5.8.2"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "31.0.0",
3
+ "version": "31.0.2",
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": "e50b473f29109281adeb2f188a0f5391f4db1e9a"
38
+ "gitHead": "6178a69a187ee277628318f8ede898d1d6cd3462"
39
39
  }
package/types/tsconfig.types.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"root":["../gen-src/index.ts"],"version":"5.7.3"}
1
+ {"root":["../gen-src/index.ts"],"version":"5.8.2"}