@sb1/ffe-core 29.5.1 → 30.0.0

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 (19) hide show
  1. package/css/colors-semantic.css +211 -278
  2. package/css/colors.css +1 -0
  3. package/css/ffe.css +256 -367
  4. package/es/index.js +0 -1
  5. package/less/body.less +2 -13
  6. package/less/colors-semantic-storybook.less +68 -84
  7. package/less/colors-semantic.less +211 -278
  8. package/less/colors.less +1 -0
  9. package/less/theme.less +24 -29
  10. package/less/typography.less +26 -46
  11. package/lib/index.js +0 -1
  12. package/lib/semanticColors.js +121 -0
  13. package/package.json +3 -3
  14. package/types/index.d.ts +0 -1
  15. package/css/colors-deprecated.css +0 -39
  16. package/es/colors-deprecated.js +0 -36
  17. package/less/colors-deprecated.less +0 -59
  18. package/lib/colors-deprecated.js +0 -39
  19. package/types/colors-deprecated.d.ts +0 -36
package/css/ffe.css CHANGED
@@ -386,23 +386,24 @@ html,
386
386
  font: -apple-system-body;
387
387
  }
388
388
  }
389
+ /* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
389
390
  .ffe-accent-mode {
390
391
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
391
- --ffe-color-background-subtle: var(--ffe-color-accent-neutral-sublest);
392
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent);
392
393
  --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
393
394
  --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
394
395
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
395
- --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-default);
396
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtle);
397
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtler);
398
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
399
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
400
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
401
- --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
402
- --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
403
- --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
404
- --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
405
- --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
396
+ --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-subtlest);
397
+ --ffe-color-surface-secondary-hover: var(--ffe-color-accent-brand-secondary-subtler);
398
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-accent-brand-secondary-subtle);
399
+ --ffe-color-surface-tertiary-default: var(--ffe-color-accent-brand-tertiary-subtlest);
400
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-accent-brand-tertiary-subtler);
401
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
402
+ --ffe-color-surface-feedback-info: var(--ffe-color-accent-feedback-info-subtlest);
403
+ --ffe-color-surface-feedback-success: var(--ffe-color-accent-feedback-success-subtlest);
404
+ --ffe-color-surface-feedback-warning: var(--ffe-color-accent-feedback-warning-subtlest);
405
+ --ffe-color-surface-feedback-critical: var(--ffe-color-accent-feedback-critical-subtlest);
406
+ --ffe-color-surface-feedback-tip: var(--ffe-color-accent-feedback-tip-sublest);
406
407
  --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
407
408
  --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
408
409
  --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-stronger);
@@ -427,39 +428,39 @@ html,
427
428
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
428
429
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
429
430
  --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
430
- --ffe-color-fill-feedback-tip: var(--ffe-color-accent-brand-tertiary-stronger);
431
+ --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
432
+ --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
433
+ --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strongest);
434
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
435
+ --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
436
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
437
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
438
+ --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
439
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
440
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
441
+ --ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
442
+ --ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
443
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
444
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
445
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
431
446
  --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
432
447
  --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
433
448
  --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
434
449
  --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
435
450
  --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
436
- --ffe-color-border-primary-selected: var(--ffe-color-speciality-static-accent-medium);
451
+ --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
437
452
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
438
453
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
439
454
  --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
440
455
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
441
456
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
442
457
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
443
- --ffe-color-border-interactive-focus: var(--ffe-color-gray-white);
458
+ --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
444
459
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
445
460
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
446
461
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
447
462
  --ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
448
- --ffe-color-border-feedback-tip: var(--ffe-color-accent-brand-tertiary-strong);
449
- --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
450
- --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-stronger);
451
- --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
452
- --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
453
- --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
454
- --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
455
- --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
456
- --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
457
- --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
458
- --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
459
- --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
460
- --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
461
- --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
462
- --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
463
+ --ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
463
464
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
464
465
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
465
466
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
@@ -492,50 +493,16 @@ html,
492
493
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
493
494
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
494
495
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
495
- --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
496
- --ffe-color-component-chips-default-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
497
- --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
498
- --ffe-color-component-chips-default-foreground-default: var(--ffe-color-accent-neutral-strongest);
499
- --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-accent-neutral-strongest);
500
- --ffe-color-component-chips-default-border-default: var(--ffe-color-accent-brand-primary-strongest);
501
- --ffe-color-component-chips-default-border-hover: var(--ffe-color-accent-brand-primary-stronger);
502
- --ffe-color-component-chips-default-border-pressed: var(--ffe-color-accent-brand-primary-strong);
503
- --ffe-color-component-chips-selected-fill-default: var(--ffe-color-accent-brand-primary-strongest);
504
- --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
505
- --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-accent-brand-primary-strong);
506
- --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-accent-neutral-inverted);
507
- --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-accent-neutral-inverted);
508
- --ffe-color-component-chips-selected-border-default: var(--ffe-color-speciality-static-accent-subtler);
509
- --ffe-color-component-chips-selected-border-hover: var(--ffe-color-speciality-static-accent-medium);
510
- --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-speciality-static-accent-medium);
511
- --ffe-color-component-form-input-border-default: var(--ffe-color-accent-neutral-default);
512
- --ffe-color-component-form-input-border-hover: var(--ffe-color-accent-neutral-stronger);
513
- --ffe-color-component-form-input-border-pressed: var(--ffe-color-accent-neutral-stronger);
514
- --ffe-color-component-form-input-border-subtle: var(--ffe-color-accent-neutral-subtle);
515
- --ffe-color-component-form-input-border-emphasis: var(--ffe-color-accent-neutral-strongest);
516
- --ffe-color-component-form-input-border-selected: var(--ffe-color-accent-neutral-strongest);
517
- --ffe-color-component-form-input-fill-default: var(--ffe-color-accent-neutral-sublest);
518
- --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-accent-brand-primary-subtle);
519
- --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-accent-brand-primary-default);
520
- --ffe-color-component-form-input-fill-subtle: var(--ffe-color-accent-brand-primary-subtler);
521
- --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
522
- --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-accent-brand-primary-medium);
523
- --ffe-color-component-form-input-fill-selected: var(--ffe-color-accent-brand-primary-default);
524
- --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-accent-brand-primary-medium);
525
- --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strong);
526
- --ffe-color-component-form-input-fill-error: var(--ffe-color-accent-feedback-critical-strongest);
527
- --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-accent-neutral-strongest);
528
- --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-accent-neutral-stronger);
529
- --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-accent-neutral-strongest);
530
- --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
531
- --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
532
- --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
533
- --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
534
- --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
535
- --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
536
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
537
- --ffe-color-component-logo-name: var(--ffe-color-gray-white);
538
- --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
496
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
497
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
498
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
499
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
500
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
501
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
502
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
503
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
504
+ --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
505
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
539
506
  --ffe-color-component-logo-circle-dark-red: #af0000;
540
507
  --ffe-color-component-logo-circle-light-red: #e60000;
541
508
  }
@@ -546,17 +513,17 @@ html,
546
513
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
547
514
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
548
515
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
549
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
550
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
551
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
552
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
553
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
554
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
516
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
517
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
518
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
519
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
520
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
521
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
555
522
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
556
523
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
557
524
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
558
525
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
559
- --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
526
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
560
527
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
561
528
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
562
529
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
@@ -581,7 +548,21 @@ html,
581
548
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
582
549
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
583
550
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
584
- --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
551
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
552
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
553
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
554
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
555
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
556
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
557
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
558
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
559
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
560
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
561
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
562
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
563
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
564
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
565
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
585
566
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
586
567
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
587
568
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -599,21 +580,7 @@ html,
599
580
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
600
581
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
601
582
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
602
- --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
603
- --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
604
- --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
605
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
606
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
607
- --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
608
- --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
609
- --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
610
- --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
611
- --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
612
- --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
613
- --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
614
- --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
615
- --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
616
- --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
583
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
617
584
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
618
585
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
619
586
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -646,50 +613,16 @@ html,
646
613
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
647
614
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
648
615
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
649
- --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
650
- --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
651
- --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
652
- --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
653
- --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
654
- --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
655
- --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
656
- --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
657
- --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
658
- --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
659
- --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
660
- --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
661
- --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
662
- --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
663
- --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
664
- --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
665
- --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
666
- --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
667
- --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
668
- --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
669
- --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
670
- --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
671
- --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
672
- --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
673
- --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
674
- --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
675
- --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
676
- --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
677
- --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
678
- --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
679
- --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
680
- --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
681
- --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
682
- --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
683
- --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
684
- --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
685
- --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
686
- --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
687
- --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
688
- --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
689
- --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
690
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
691
- --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
692
- --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
616
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
617
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
618
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
619
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
620
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
621
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
622
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
623
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
624
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
625
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
693
626
  --ffe-color-component-logo-circle-dark-red: #af0000;
694
627
  --ffe-color-component-logo-circle-light-red: #e60000;
695
628
  }
@@ -703,21 +636,22 @@ html,
703
636
  --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
704
637
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
705
638
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
706
- --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-25);
639
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
640
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
707
641
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
708
642
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
709
643
  --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
710
644
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
711
645
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
712
646
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
647
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
648
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
713
649
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
714
650
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
715
651
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
716
652
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
717
653
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
718
654
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
719
- --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-300);
720
- --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-400);
721
655
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
722
656
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
723
657
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
@@ -729,73 +663,90 @@ html,
729
663
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
730
664
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
731
665
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
732
- --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
733
- --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
734
- --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
735
666
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
736
667
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
737
668
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
738
- --ffe-color-default-neutral-sublest: var(--ffe-color-gray-white);
669
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
670
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
671
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
672
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
673
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
674
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
675
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
676
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
677
+ --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
739
678
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
740
679
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
741
- --ffe-color-default-neutral-default: var(--ffe-color-gray-300);
742
680
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
743
681
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
744
682
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
745
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-white);
683
+ --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
746
684
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
747
685
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
748
686
  --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
749
687
  --ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
750
- --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-alpha-white-15);
751
- --ffe-color-accent-brand-primary-subtler: var(--ffe-color-alpha-white-20);
752
- --ffe-color-accent-brand-primary-subtle: var(--ffe-color-alpha-white-30);
753
- --ffe-color-accent-brand-primary-default: var(--ffe-color-alpha-white-50);
754
- --ffe-color-accent-brand-primary-medium: var(--ffe-color-alpha-white-60);
755
- --ffe-color-accent-brand-primary-strong: var(--ffe-color-alpha-white-70);
756
- --ffe-color-accent-brand-primary-stronger: var(--ffe-color-alpha-white-80);
757
- --ffe-color-accent-brand-primary-strongest: var(--ffe-color-alpha-white-90);
688
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-vann-600);
689
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-500);
690
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-400);
691
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-vann-250);
692
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-150);
693
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-75);
694
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-25);
695
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
696
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
758
697
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
759
698
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
760
699
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
761
700
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
762
701
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
763
702
  --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-25);
764
- --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-500);
765
- --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-400);
766
- --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
767
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
703
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-600);
704
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-500);
705
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-400);
706
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
707
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
708
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
768
709
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
710
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
769
711
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
712
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
713
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
770
714
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
771
715
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
772
716
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
773
717
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
718
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
719
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
774
720
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
775
721
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
722
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
776
723
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
777
724
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
725
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
726
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
727
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
728
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
729
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
778
730
  --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
779
731
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
780
732
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
781
733
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
782
- --ffe-color-accent-neutral-default: var(--ffe-color-vann-150);
783
734
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
784
735
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
785
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
736
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
786
737
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
787
- --ffe-color-speciality-background-default: var(--ffe-default-neutral-sublest);
788
- --ffe-color-speciality-background-subtle: var(--ffe-default-brand-subtle-subtler);
789
- --ffe-color-speciality-background-accent: var(--ffe-color-vann-600);
790
- --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-white);
738
+ --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
739
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
740
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
741
+ --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
742
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
791
743
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
792
744
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
793
745
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
794
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
746
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
795
747
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
796
748
  --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
797
- --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
798
- --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
749
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
799
750
  }
800
751
  @media (prefers-color-scheme: dark) {
801
752
  :where(.regard-color-scheme-preference) {
@@ -807,6 +758,7 @@ html,
807
758
  --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
808
759
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
809
760
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
761
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
810
762
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
811
763
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
812
764
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
@@ -814,14 +766,14 @@ html,
814
766
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
815
767
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
816
768
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
769
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
770
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
817
771
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
818
772
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
819
773
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
820
774
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
821
775
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
822
776
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
823
- --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-600);
824
- --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-500);
825
777
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
826
778
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
827
779
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
@@ -833,89 +785,106 @@ html,
833
785
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
834
786
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
835
787
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
836
- --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
837
- --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
838
- --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
839
788
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
840
789
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
841
790
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
791
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
792
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
793
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
794
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
795
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
796
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
797
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
798
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
842
799
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
843
800
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
844
801
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
845
- --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
846
802
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
847
803
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
848
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
804
+ --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
849
805
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
850
806
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
851
807
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
852
808
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
853
- --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
809
+ --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-100);
854
810
  --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
855
811
  --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
856
812
  --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
857
- --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
858
813
  --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
859
814
  --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
860
815
  --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
861
816
  --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
817
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
818
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
862
819
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
863
820
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
864
821
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
865
822
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
866
823
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
867
824
  --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
825
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
826
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-650);
827
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-550);
868
828
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
869
829
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
870
830
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
871
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
872
831
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
832
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
873
833
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
834
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
835
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
874
836
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
875
837
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
876
838
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
877
839
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
840
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
841
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
878
842
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
879
843
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
844
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
880
845
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
881
846
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
847
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
848
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
849
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
850
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
851
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
882
852
  --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
883
853
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
884
854
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
885
855
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
886
- --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
887
856
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
888
857
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
889
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
858
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
890
859
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
891
- --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
860
+ --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
861
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
892
862
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
893
- --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
863
+ --ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
894
864
  --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
895
865
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
896
866
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
897
867
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
898
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
868
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
899
869
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
900
870
  --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
901
- --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
902
- --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
871
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
903
872
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
904
873
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
905
874
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
906
875
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
907
876
  --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
908
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
909
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
910
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
911
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
912
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
913
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
877
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
878
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
879
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
880
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
881
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
882
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
914
883
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
915
884
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
916
885
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
917
886
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
918
- --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
887
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
919
888
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
920
889
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
921
890
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
@@ -940,7 +909,21 @@ html,
940
909
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
941
910
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
942
911
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
943
- --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
912
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
913
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
914
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
915
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
916
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
917
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
918
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
919
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
920
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
921
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
922
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
923
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
924
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
925
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
926
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
944
927
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
945
928
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
946
929
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -958,21 +941,7 @@ html,
958
941
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
959
942
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
960
943
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
961
- --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
962
- --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
963
- --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
964
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
965
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
966
- --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
967
- --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
968
- --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
969
- --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
970
- --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
971
- --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
972
- --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
973
- --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
974
- --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
975
- --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
944
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
976
945
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
977
946
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
978
947
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -1005,50 +974,16 @@ html,
1005
974
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1006
975
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1007
976
  --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1008
- --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
1009
- --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
1010
- --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
1011
- --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
1012
- --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
1013
- --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
1014
- --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
1015
- --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
1016
- --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
1017
- --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
1018
- --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
1019
- --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
1020
- --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
1021
- --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
1022
- --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
1023
- --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
1024
- --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
1025
- --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
1026
- --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
1027
- --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
1028
- --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
1029
- --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
1030
- --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
1031
- --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
1032
- --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
1033
- --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
1034
- --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
1035
- --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
1036
- --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
1037
- --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
1038
- --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
1039
- --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
1040
- --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
1041
- --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
1042
- --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
1043
- --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
1044
- --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
1045
- --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
1046
- --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
1047
- --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
1048
- --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
1049
- --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
1050
- --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
1051
- --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
977
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
978
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
979
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
980
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
981
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
982
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
983
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
984
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
985
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
986
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
1052
987
  --ffe-color-component-logo-circle-dark-red: #af0000;
1053
988
  --ffe-color-component-logo-circle-light-red: #e60000;
1054
989
  }
@@ -1060,14 +995,14 @@ html,
1060
995
  --ffe-color-vann-75: #cfe2f2;
1061
996
  --ffe-color-vann-150: #b6d1ec;
1062
997
  --ffe-color-vann-250: #8eb8e1;
1063
- --ffe-color-vann-300: #7dabd9;
1064
998
  --ffe-color-vann-350: #6ba1d6;
1065
999
  --ffe-color-vann-400: #5494d4;
1066
1000
  --ffe-color-vann-500: #2975c2;
1067
1001
  --ffe-color-vann-550: #1566b2;
1068
1002
  --ffe-color-vann-600: #005aa4;
1003
+ --ffe-color-vann-650: #084f91;
1069
1004
  --ffe-color-vann-700: #073f83;
1070
- --ffe-color-vann-800: #022d74;
1005
+ --ffe-color-vann-800: #002776;
1071
1006
  --ffe-color-vann-1000: #070d27;
1072
1007
  --ffe-color-natt-50: #dfe6f1;
1073
1008
  --ffe-color-natt-100: #c9d5e8;
@@ -1077,6 +1012,7 @@ html,
1077
1012
  --ffe-color-natt-500: #55709b;
1078
1013
  --ffe-color-natt-600: #3e5579;
1079
1014
  --ffe-color-natt-700: #2e405c;
1015
+ --ffe-color-natt-950: #101622;
1080
1016
  --ffe-color-frost-25: #e5f0f5;
1081
1017
  --ffe-color-frost-50: #dceaef;
1082
1018
  --ffe-color-frost-75: #cbe2eb;
@@ -1085,14 +1021,16 @@ html,
1085
1021
  --ffe-color-frost-200: #a6cee2;
1086
1022
  --ffe-color-frost-250: #95c3db;
1087
1023
  --ffe-color-frost-300: #7eb5d2;
1088
- --ffe-color-frost-350: #73a5c4;
1089
- --ffe-color-frost-400: #6795b6;
1090
- --ffe-color-frost-450: #5988ab;
1091
- --ffe-color-frost-500: #4a799c;
1092
- --ffe-color-frost-550: #406e91;
1093
- --ffe-color-frost-600: #386485;
1094
- --ffe-color-frost-700: #284e6c;
1095
- --ffe-color-frost-800: #193850;
1024
+ --ffe-color-frost-350: #6ea6c9;
1025
+ --ffe-color-frost-400: #6096bd;
1026
+ --ffe-color-frost-450: #5489b0;
1027
+ --ffe-color-frost-500: #457aa1;
1028
+ --ffe-color-frost-550: #3b6f96;
1029
+ --ffe-color-frost-600: #356488;
1030
+ --ffe-color-frost-700: #234f71;
1031
+ --ffe-color-frost-800: #163853;
1032
+ --ffe-color-sand-25: #fcf4ee;
1033
+ --ffe-color-syrin-25: #eaeaf6;
1096
1034
  --ffe-color-syrin-50: #e6e6f4;
1097
1035
  --ffe-color-syrin-75: #dcdcef;
1098
1036
  --ffe-color-syrin-100: #d3d3ea;
@@ -1105,11 +1043,16 @@ html,
1105
1043
  --ffe-color-syrin-450: #8c88a0;
1106
1044
  --ffe-color-syrin-500: #79748b;
1107
1045
  --ffe-color-syrin-550: #686477;
1046
+ --ffe-color-syrin-600: #5d5a6d;
1047
+ --ffe-color-syrin-650: #514e5f;
1108
1048
  --ffe-color-syrin-700: #474457;
1109
- --ffe-color-baer-50: #ffd7d1;
1049
+ --ffe-color-syrin-750: #3d394c;
1050
+ --ffe-color-syrin-800: #332f41;
1051
+ --ffe-color-baer-50: #ffd5d1;
1110
1052
  --ffe-color-baer-100: #ffaea8;
1111
1053
  --ffe-color-baer-200: #ff7f7a;
1112
1054
  --ffe-color-baer-300: #ff5e5c;
1055
+ --ffe-color-baer-400: #e44244;
1113
1056
  --ffe-color-baer-500: #c62a2f;
1114
1057
  --ffe-color-baer-700: #7c1214;
1115
1058
  --ffe-color-baer-800: #640e10;
@@ -1122,6 +1065,7 @@ html,
1122
1065
  --ffe-color-skog-550: #2a7e5b;
1123
1066
  --ffe-color-skog-600: #00754e;
1124
1067
  --ffe-color-skog-650: #0d6346;
1068
+ --ffe-color-skog-700: #09583b;
1125
1069
  --ffe-color-skog-750: #0a4d37;
1126
1070
  --ffe-color-skog-800: #0a4330;
1127
1071
  --ffe-color-sol-50: #ffe0b2;
@@ -1136,8 +1080,6 @@ html,
1136
1080
  --ffe-color-gray-150: #c2c2c2;
1137
1081
  --ffe-color-gray-200: #b8b8b8;
1138
1082
  --ffe-color-gray-250: #adadad;
1139
- --ffe-color-gray-300: #a4a4a4;
1140
- --ffe-color-gray-450: #858585;
1141
1083
  --ffe-color-gray-550: #707070;
1142
1084
  --ffe-color-gray-600: #666666;
1143
1085
  --ffe-color-gray-650: #5c5c5c;
@@ -1146,23 +1088,16 @@ html,
1146
1088
  --ffe-color-gray-850: #333333;
1147
1089
  --ffe-color-gray-900: #292929;
1148
1090
  --ffe-color-gray-950: #1f1f1f;
1149
- --ffe-color-gray-1000: #141414;
1150
- --ffe-color-gray-white: #ffffff;
1151
1091
  --ffe-color-alpha-white-0: #ffffff00;
1152
- --ffe-color-alpha-white-15: #ffffff26;
1153
- --ffe-color-alpha-white-20: #ffffff33;
1154
- --ffe-color-alpha-white-30: #ffffff4d;
1155
- --ffe-color-alpha-white-50: #ffffff80;
1156
- --ffe-color-alpha-white-60: #ffffff99;
1157
- --ffe-color-alpha-white-70: #ffffffb2;
1158
- --ffe-color-alpha-white-80: #ffffffcc;
1159
- --ffe-color-alpha-white-90: #ffffffe5;
1092
+ --ffe-color-alpha-white-100: #ffffff;
1093
+ --ffe-color-alpha-black-100: #020a0a;
1160
1094
  }
1161
1095
  /**
1162
1096
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
1163
1097
  */
1164
1098
  :root,
1165
1099
  :host {
1100
+ /* DEPRICATED, bruk colors-semantic i stedet for */
1166
1101
  /** Primærpalett */
1167
1102
  --ffe-farge-fjell: #002776;
1168
1103
  --ffe-farge-fjell-70: #4d689f;
@@ -1215,6 +1150,7 @@ html,
1215
1150
  --ffe-farge-varmgraa: #9b9797;
1216
1151
  --ffe-farge-lysvarmgraa: #d7d2cb;
1217
1152
  --ffe-farge-hvit: #fff;
1153
+ /* END depricated */
1218
1154
  /** Font sizes */
1219
1155
  --ffe-fontsize-body-text: 1rem;
1220
1156
  --ffe-fontsize-small-text: 0.875rem;
@@ -1257,14 +1193,14 @@ html,
1257
1193
  --ffe-spacing-5xl: 160px;
1258
1194
  /** Theme base colors */
1259
1195
  /* Links, buttons and similar */
1260
- --ffe-g-primary-color: var(--ffe-farge-vann);
1196
+ --ffe-g-primary-color: var(--ffe-color-fill-primary-default);
1261
1197
  /* Headings, labels, hover, etc */
1262
- --ffe-g-secondary-color: var(--ffe-farge-fjell);
1198
+ --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis);
1263
1199
  /* Error messages, invalid inputs, etc */
1264
- --ffe-g-error-color: var(--ffe-farge-baer);
1200
+ --ffe-g-error-color: var(--ffe-color-fill-feedback-critical);
1265
1201
  /** Theme borders */
1266
1202
  /* Form element borders */
1267
- --ffe-g-border-color: var(--ffe-farge-varmgraa);
1203
+ --ffe-g-border-color: var(--ffe-color-border-primary-default);
1268
1204
  --ffe-g-border-radius: 8px;
1269
1205
  --ffe-g-border-radius-lg: 16px;
1270
1206
  --ffe-g-border-width: 1px;
@@ -1282,17 +1218,17 @@ html,
1282
1218
  --ffe-g-font-italic: 'SpareBank1-italic', arial, sans-serif;
1283
1219
  /** Typography */
1284
1220
  /* Default body text color */
1285
- --ffe-g-text-color: var(--ffe-farge-svart);
1221
+ --ffe-g-text-color: var(--ffe-color-foreground-default);
1286
1222
  /* Lead paragraph */
1287
- --ffe-g-lead-color: var(--ffe-farge-fjell);
1223
+ --ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
1288
1224
  /* Headings */
1289
- --ffe-g-heading-color: var(--ffe-farge-fjell);
1225
+ --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
1290
1226
  /* Links */
1291
- --ffe-g-link-color: var(--ffe-farge-vann);
1292
- --ffe-g-link-color-hover: var(--ffe-farge-fjell);
1293
- --ffe-g-link-color-visited: var(--ffe-farge-lyng);
1294
- --ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
1295
- --ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
1227
+ --ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
1228
+ --ffe-g-link-color-hover: var(--ffe-color-foreground-interactive-link-hover);
1229
+ --ffe-g-link-color-visited: var(--ffe-color-foreground-interactive-link-pressed);
1230
+ --ffe-g-link-icon-color-hover: var(--ffe-color-foreground-interactive-link-hover);
1231
+ --ffe-g-link-icon-color-focus: var(--ffe-color-foreground-interactive-link-pressed);
1296
1232
  }
1297
1233
  @media (min-width: 480px) {
1298
1234
  :root,
@@ -1314,22 +1250,6 @@ html,
1314
1250
  --ffe-fontsize-h3: 1.75rem;
1315
1251
  }
1316
1252
  }
1317
- @media (prefers-color-scheme: dark) {
1318
- :root .regard-color-scheme-preference,
1319
- :host .regard-color-scheme-preference {
1320
- --ffe-g-primary-color: var(--ffe-farge-vann-70);
1321
- --ffe-g-secondary-color: var(--ffe-farge-vann-70);
1322
- --ffe-g-border-color: var(--ffe-farge-graa);
1323
- --ffe-g-text-color: var(--ffe-farge-lysgraa);
1324
- --ffe-g-lead-color: var(--ffe-farge-vann-70);
1325
- --ffe-g-heading-color: var(--ffe-farge-vann-70);
1326
- --ffe-g-link-color: var(--ffe-farge-vann-70);
1327
- --ffe-g-link-color-hover: var(--ffe-farge-vann-30);
1328
- --ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
1329
- --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
1330
- --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
1331
- }
1332
- }
1333
1253
  .ffe-h1 {
1334
1254
  line-height: 2.25rem;
1335
1255
  font-size: var(--ffe-fontsize-h1);
@@ -1356,7 +1276,7 @@ html,
1356
1276
  }
1357
1277
  .ffe-small-text,
1358
1278
  .ffe-micro-text {
1359
- color: var(--ffe-g-text-color);
1279
+ color: var(--ffe-color-foreground-default);
1360
1280
  font-family: var(--ffe-g-font);
1361
1281
  font-weight: normal;
1362
1282
  font-variant-numeric: tabular-nums;
@@ -1378,7 +1298,7 @@ html,
1378
1298
  .ffe-h4,
1379
1299
  .ffe-h5,
1380
1300
  .ffe-h6 {
1381
- color: var(--ffe-g-heading-color);
1301
+ color: var(--ffe-color-foreground-emphasis);
1382
1302
  font-weight: normal;
1383
1303
  margin-bottom: var(--ffe-spacing-xs);
1384
1304
  margin-top: 0;
@@ -1391,7 +1311,7 @@ html,
1391
1311
  .ffe-h4--error,
1392
1312
  .ffe-h5--error,
1393
1313
  .ffe-h6--error {
1394
- color: var(--ffe-g-error-color);
1314
+ color: var(--ffe-color-foreground-feedback-critical);
1395
1315
  }
1396
1316
  .ffe-h1--inline,
1397
1317
  .ffe-h2--inline,
@@ -1415,19 +1335,9 @@ html,
1415
1335
  .ffe-h4--with-border,
1416
1336
  .ffe-h5--with-border,
1417
1337
  .ffe-h6--with-border {
1418
- border-bottom: 1px solid var(--ffe-farge-lysgraa);
1338
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
1419
1339
  padding-bottom: var(--ffe-spacing-xs);
1420
1340
  }
1421
- @media (prefers-color-scheme: dark) {
1422
- .regard-color-scheme-preference .ffe-h1--with-border,
1423
- .regard-color-scheme-preference .ffe-h2--with-border,
1424
- .regard-color-scheme-preference .ffe-h3--with-border,
1425
- .regard-color-scheme-preference .ffe-h4--with-border,
1426
- .regard-color-scheme-preference .ffe-h5--with-border,
1427
- .regard-color-scheme-preference .ffe-h6--with-border {
1428
- border-color: var(--ffe-farge-graa);
1429
- }
1430
- }
1431
1341
  .ffe-h1--no-underline,
1432
1342
  .ffe-h2--no-underline,
1433
1343
  .ffe-h3--no-underline,
@@ -1456,7 +1366,7 @@ html,
1456
1366
  font-variant-numeric: tabular-nums;
1457
1367
  }
1458
1368
  .ffe-body-text {
1459
- color: var(--ffe-g-text-color);
1369
+ color: var(--ffe-color-foreground-default);
1460
1370
  font-family: var(--ffe-g-font);
1461
1371
  font-variant-numeric: tabular-nums;
1462
1372
  line-height: 1.5rem;
@@ -1468,7 +1378,7 @@ html,
1468
1378
  margin-bottom: 1em;
1469
1379
  margin-top: 0;
1470
1380
  line-height: 1.5rem;
1471
- color: var(--ffe-g-text-color);
1381
+ color: var(--ffe-color-foreground-default);
1472
1382
  text-wrap: pretty;
1473
1383
  }
1474
1384
  .ffe-body-paragraph--text-center {
@@ -1489,18 +1399,18 @@ html,
1489
1399
  text-wrap: pretty;
1490
1400
  }
1491
1401
  .ffe-lead-paragraph {
1492
- color: var(--ffe-g-lead-color);
1402
+ color: var(--ffe-color-foreground-emphasis);
1493
1403
  line-height: 1.5rem;
1494
1404
  font-size: var(--ffe-fontsize-lead-paragraph);
1495
1405
  }
1496
1406
  .ffe-sub-lead-paragraph {
1497
- color: var(--ffe-g-text-color);
1407
+ color: var(--ffe-color-foreground-default);
1498
1408
  line-height: 1.5rem;
1499
1409
  font-size: var(--ffe-fontsize-sub-lead-paragraph);
1500
1410
  }
1501
1411
  .ffe-link-text {
1502
- border-bottom: 1px solid var(--ffe-g-link-color);
1503
- color: var(--ffe-g-link-color);
1412
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
1413
+ color: var(--ffe-color-foreground-interactive-link);
1504
1414
  cursor: pointer;
1505
1415
  text-decoration: none;
1506
1416
  word-wrap: break-all;
@@ -1511,36 +1421,30 @@ html,
1511
1421
  }
1512
1422
  @media (hover: hover) and (pointer: fine) {
1513
1423
  .ffe-link-text:hover {
1514
- border-bottom-color: var(--ffe-g-link-color-hover);
1515
- color: var(--ffe-g-link-color-hover);
1424
+ border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
1425
+ color: var(--ffe-color-foreground-interactive-link-hover);
1516
1426
  text-decoration: none;
1517
1427
  }
1518
1428
  }
1519
1429
  .ffe-link-text:visited {
1520
- border-bottom-color: var(--ffe-g-link-color-visited);
1521
- color: var(--ffe-g-link-color-visited);
1430
+ border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
1431
+ color: var(--ffe-color-foreground-interactive-link-pressed);
1522
1432
  text-decoration: none;
1523
1433
  }
1524
1434
  .ffe-link-text--no-underline {
1525
1435
  border-bottom: none;
1526
1436
  }
1527
1437
  .ffe-link-text:focus {
1528
- border-color: var(--ffe-farge-hvit);
1529
- color: var(--ffe-farge-hvit);
1438
+ border-color: var(--ffe-color-foreground-interactive-link-pressed);
1439
+ color: var(--ffe-color-foreground-interactive-link-pressed);
1530
1440
  border-radius: 1px;
1531
- background-color: var(--ffe-g-link-color);
1532
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-link-color);
1533
- box-shadow: 0 0 0 2px var(--ffe-g-link-color);
1441
+ background-color: var(--ffe-color-foreground-interactive-link);
1442
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1443
+ box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1534
1444
  outline: none;
1535
1445
  }
1536
- @media (prefers-color-scheme: dark) {
1537
- .regard-color-scheme-preference .ffe-link-text:focus {
1538
- border-color: var(--ffe-farge-svart) !important;
1539
- color: var(--ffe-farge-svart) !important;
1540
- }
1541
- }
1542
1446
  .ffe-link-icon {
1543
- fill: var(--ffe-g-link-color);
1447
+ fill: var(--ffe-color-foreground-interactive-link);
1544
1448
  display: -webkit-inline-box;
1545
1449
  display: -ms-inline-flexbox;
1546
1450
  display: inline-flex;
@@ -1551,27 +1455,23 @@ html,
1551
1455
  }
1552
1456
  @media (hover: hover) and (pointer: fine) {
1553
1457
  .ffe-link-icon:hover {
1554
- fill: var(--ffe-g-link-icon-color-hover);
1458
+ fill: var(--ffe-color-foreground-interactive-link-hover);
1555
1459
  }
1556
1460
  }
1557
1461
  .ffe-link-icon:focus {
1558
- -webkit-box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
1559
- box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
1462
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
1463
+ box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
1560
1464
  }
1561
1465
  .ffe-divider-line {
1562
1466
  border: none;
1563
- border-bottom: solid 1px var(--ffe-farge-lysgraa);
1467
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
1564
1468
  padding-top: 1px;
1565
1469
  padding-bottom: 1px;
1566
1470
  width: 100%;
1567
1471
  }
1568
- @media (prefers-color-scheme: dark) {
1569
- .regard-color-scheme-preference .ffe-divider-line {
1570
- border-color: var(--ffe-farge-graa);
1571
- }
1572
- }
1573
1472
  .ffe-strong-text {
1574
1473
  font-family: var(--ffe-g-font-strong);
1474
+ color: var(--ffe-color-foreground-default);
1575
1475
  font-variant-numeric: tabular-nums;
1576
1476
  font-weight: normal;
1577
1477
  }
@@ -1580,18 +1480,15 @@ html,
1580
1480
  font-variant-numeric: tabular-nums;
1581
1481
  font-weight: normal;
1582
1482
  font-style: normal;
1483
+ color: var(--ffe-color-foreground-default);
1583
1484
  }
1584
1485
  .ffe-pre-text {
1585
- background-color: var(--ffe-farge-sand-70);
1486
+ background-color: var(--ffe-color-background-subtle);
1487
+ color: var(--ffe-color-foreground-default);
1586
1488
  font-family: consolas, menlo, monaco, monospace;
1587
1489
  margin: 0;
1588
1490
  text-align: left;
1589
1491
  }
1590
- @media (prefers-color-scheme: dark) {
1591
- .regard-color-scheme-preference .ffe-pre-text {
1592
- background-color: var(--ffe-farge-koksgraa);
1593
- }
1594
- }
1595
1492
  .ffe-inline-separator {
1596
1493
  margin: 0 4px;
1597
1494
  }
@@ -1678,19 +1575,11 @@ html,
1678
1575
  overflow-wrap: anywhere;
1679
1576
  }
1680
1577
  .ffe-body {
1681
- --color: var(--ffe-g-text-color);
1682
- --background-color: var(--ffe-farge-hvit);
1683
- background-color: var(--background-color);
1684
- color: var(--color);
1578
+ background-color: var(--ffe-color-foreground-default);
1579
+ color: var(--ffe-color-background-default);
1685
1580
  font-family: var(--ffe-g-font);
1686
1581
  font-variant-numeric: tabular-nums;
1687
1582
  }
1688
- @media (prefers-color-scheme: dark) {
1689
- .ffe-body.regard-color-scheme-preference {
1690
- --color: var(--ffe-farge-lysgraa);
1691
- --background-color: var(--ffe-farge-svart);
1692
- }
1693
- }
1694
1583
  .ffe-body strong {
1695
1584
  font-family: var(--ffe-g-font-strong);
1696
1585
  font-weight: normal;