@sb1/ffe-core 29.5.2 → 30.0.1

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 +220 -281
  2. package/css/colors.css +1 -0
  3. package/css/ffe.css +265 -370
  4. package/es/index.js +0 -1
  5. package/less/body.less +2 -13
  6. package/less/colors-semantic-storybook.less +71 -85
  7. package/less/colors-semantic.less +220 -281
  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 +123 -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,27 +386,30 @@ 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);
409
- --ffe-color-fill-primary-selected: var(--ffe-color-accent-brand-primary-strongest);
410
+ --ffe-color-fill-primary-selected: var(--ffe-color-accent-brand-primary-strong);
411
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
412
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
410
413
  --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtlest);
411
414
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtler);
412
415
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-subtle);
@@ -427,39 +430,39 @@ html,
427
430
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
428
431
  --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
429
432
  --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);
433
+ --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
434
+ --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
435
+ --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
436
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
437
+ --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
438
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
439
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
440
+ --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
441
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
442
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
443
+ --ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
444
+ --ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
445
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
446
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
447
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
431
448
  --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
432
449
  --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
433
450
  --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
434
451
  --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
435
452
  --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);
453
+ --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
437
454
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
438
455
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
439
456
  --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
440
457
  --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
441
458
  --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
442
459
  --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
443
- --ffe-color-border-interactive-focus: var(--ffe-color-gray-white);
460
+ --ffe-color-border-interactive-focus: var(--ffe-color-alpha-white-100);
444
461
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
445
462
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
446
463
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
447
464
  --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);
465
+ --ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
463
466
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
464
467
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
465
468
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
@@ -492,50 +495,16 @@ html,
492
495
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
493
496
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
494
497
  --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);
498
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
499
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
500
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
501
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
502
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
503
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
504
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
505
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-medium);
506
+ --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
507
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
539
508
  --ffe-color-component-logo-circle-dark-red: #af0000;
540
509
  --ffe-color-component-logo-circle-light-red: #e60000;
541
510
  }
@@ -546,21 +515,23 @@ html,
546
515
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
547
516
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
548
517
  --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);
518
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
519
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
520
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
521
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
522
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
523
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
555
524
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
556
525
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
557
526
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
558
527
  --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);
528
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
560
529
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
561
530
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
562
531
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
563
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
532
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
533
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
534
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
564
535
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
565
536
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
566
537
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
@@ -581,7 +552,21 @@ html,
581
552
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
582
553
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
583
554
  --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);
555
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
556
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
557
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
558
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
559
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
560
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
561
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
562
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
563
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
564
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
565
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
566
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
567
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
568
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
569
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
585
570
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
586
571
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
587
572
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -599,21 +584,7 @@ html,
599
584
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
600
585
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
601
586
  --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);
587
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
617
588
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
618
589
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
619
590
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -646,50 +617,16 @@ html,
646
617
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
647
618
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
648
619
  --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);
620
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
621
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
622
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
623
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
624
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
625
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
626
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
627
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
628
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
629
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
693
630
  --ffe-color-component-logo-circle-dark-red: #af0000;
694
631
  --ffe-color-component-logo-circle-light-red: #e60000;
695
632
  }
@@ -703,21 +640,22 @@ html,
703
640
  --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
704
641
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
705
642
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
706
- --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-25);
643
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
644
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
707
645
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
708
646
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
709
647
  --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
710
648
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
711
649
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
712
650
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
651
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
652
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
713
653
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
714
654
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
715
655
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
716
656
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
717
657
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
718
658
  --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
659
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
722
660
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
723
661
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
@@ -729,73 +667,90 @@ html,
729
667
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
730
668
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
731
669
  --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
670
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
736
671
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
737
672
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
738
- --ffe-color-default-neutral-sublest: var(--ffe-color-gray-white);
673
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
674
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
675
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
676
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
677
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
678
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
679
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
680
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
681
+ --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
739
682
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
740
683
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
741
- --ffe-color-default-neutral-default: var(--ffe-color-gray-300);
742
684
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
743
685
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
744
686
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
745
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-white);
687
+ --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
746
688
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
747
689
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
748
690
  --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
749
691
  --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);
692
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-vann-600);
693
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-500);
694
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-400);
695
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-vann-250);
696
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-150);
697
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-75);
698
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-25);
699
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
700
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
758
701
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
759
702
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
760
703
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
761
704
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
762
705
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
763
706
  --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);
707
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-600);
708
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-500);
709
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-400);
710
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
711
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
712
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
768
713
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
714
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
769
715
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
716
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
717
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
770
718
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
771
719
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
772
720
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
773
721
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
722
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
723
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
774
724
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
775
725
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
726
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
776
727
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
777
728
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
729
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
730
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
731
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
732
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
733
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
778
734
  --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
779
735
  --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
780
736
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
781
737
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
782
- --ffe-color-accent-neutral-default: var(--ffe-color-vann-150);
783
738
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
784
739
  --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
785
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
740
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
786
741
  --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);
742
+ --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
743
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
744
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
745
+ --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
746
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
791
747
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
792
748
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
793
749
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
794
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
750
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
795
751
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
796
752
  --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);
753
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
799
754
  }
800
755
  @media (prefers-color-scheme: dark) {
801
756
  :where(.regard-color-scheme-preference) {
@@ -807,6 +762,7 @@ html,
807
762
  --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
808
763
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
809
764
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
765
+ --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
810
766
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
811
767
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
812
768
  --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
@@ -814,14 +770,14 @@ html,
814
770
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
815
771
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
816
772
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
773
+ --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
774
+ --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
817
775
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
818
776
  --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
819
777
  --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
820
778
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
821
779
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
822
780
  --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
781
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
826
782
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
827
783
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
@@ -833,93 +789,112 @@ html,
833
789
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
834
790
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
835
791
  --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
792
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
840
793
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
841
794
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
795
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
796
+ --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
797
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
798
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
799
+ --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
800
+ --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
801
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
802
+ --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
842
803
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
843
804
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
844
805
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
845
- --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
846
806
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
847
807
  --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
848
- --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
808
+ --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
849
809
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
850
810
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
851
811
  --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
852
812
  --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
853
- --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
813
+ --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-100);
854
814
  --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
855
815
  --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
856
816
  --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
857
- --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
858
817
  --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
859
818
  --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
860
819
  --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
861
820
  --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
821
+ --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
822
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
862
823
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
863
824
  --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
864
825
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
865
826
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
866
827
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
867
828
  --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
829
+ --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
830
+ --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-650);
831
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-550);
868
832
  --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
869
833
  --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
870
834
  --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
871
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
872
835
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
836
+ --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
873
837
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
838
+ --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
839
+ --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
874
840
  --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
875
841
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
876
842
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
877
843
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
844
+ --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
845
+ --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
878
846
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
879
847
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
848
+ --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
880
849
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
881
850
  --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
851
+ --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
852
+ --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
853
+ --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
854
+ --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
855
+ --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
882
856
  --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
883
857
  --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
884
858
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
885
859
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
886
- --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
887
860
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
888
861
  --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
889
- --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
862
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
890
863
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
891
- --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
864
+ --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
865
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
892
866
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
893
- --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
867
+ --ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
894
868
  --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
895
869
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
896
870
  --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
897
871
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
898
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
872
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
899
873
  --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
900
874
  --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);
875
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
903
876
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
904
877
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
905
878
  --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
906
879
  --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
907
880
  --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);
881
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
882
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
883
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
884
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
885
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
886
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
914
887
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
915
888
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
916
889
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
917
890
  --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);
891
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
919
892
  --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
920
893
  --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
921
894
  --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
922
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
895
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
896
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
897
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
923
898
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
924
899
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
925
900
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
@@ -940,7 +915,21 @@ html,
940
915
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
941
916
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
942
917
  --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);
918
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
919
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
920
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
921
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
922
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
923
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
924
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
925
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
926
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
927
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
928
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
929
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
930
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
931
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
932
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
944
933
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
945
934
  --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
946
935
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
@@ -958,21 +947,7 @@ html,
958
947
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
959
948
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
960
949
  --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);
950
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
976
951
  --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
977
952
  --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
978
953
  --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
@@ -1005,50 +980,16 @@ html,
1005
980
  --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1006
981
  --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1007
982
  --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);
983
+ --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
984
+ --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
985
+ --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
986
+ --ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
987
+ --ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
988
+ --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
989
+ --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
990
+ --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
991
+ --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
992
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
1052
993
  --ffe-color-component-logo-circle-dark-red: #af0000;
1053
994
  --ffe-color-component-logo-circle-light-red: #e60000;
1054
995
  }
@@ -1060,14 +1001,14 @@ html,
1060
1001
  --ffe-color-vann-75: #cfe2f2;
1061
1002
  --ffe-color-vann-150: #b6d1ec;
1062
1003
  --ffe-color-vann-250: #8eb8e1;
1063
- --ffe-color-vann-300: #7dabd9;
1064
1004
  --ffe-color-vann-350: #6ba1d6;
1065
1005
  --ffe-color-vann-400: #5494d4;
1066
1006
  --ffe-color-vann-500: #2975c2;
1067
1007
  --ffe-color-vann-550: #1566b2;
1068
1008
  --ffe-color-vann-600: #005aa4;
1009
+ --ffe-color-vann-650: #084f91;
1069
1010
  --ffe-color-vann-700: #073f83;
1070
- --ffe-color-vann-800: #022d74;
1011
+ --ffe-color-vann-800: #002776;
1071
1012
  --ffe-color-vann-1000: #070d27;
1072
1013
  --ffe-color-natt-50: #dfe6f1;
1073
1014
  --ffe-color-natt-100: #c9d5e8;
@@ -1077,6 +1018,7 @@ html,
1077
1018
  --ffe-color-natt-500: #55709b;
1078
1019
  --ffe-color-natt-600: #3e5579;
1079
1020
  --ffe-color-natt-700: #2e405c;
1021
+ --ffe-color-natt-950: #101622;
1080
1022
  --ffe-color-frost-25: #e5f0f5;
1081
1023
  --ffe-color-frost-50: #dceaef;
1082
1024
  --ffe-color-frost-75: #cbe2eb;
@@ -1085,14 +1027,16 @@ html,
1085
1027
  --ffe-color-frost-200: #a6cee2;
1086
1028
  --ffe-color-frost-250: #95c3db;
1087
1029
  --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;
1030
+ --ffe-color-frost-350: #6ea6c9;
1031
+ --ffe-color-frost-400: #6096bd;
1032
+ --ffe-color-frost-450: #5489b0;
1033
+ --ffe-color-frost-500: #457aa1;
1034
+ --ffe-color-frost-550: #3b6f96;
1035
+ --ffe-color-frost-600: #356488;
1036
+ --ffe-color-frost-700: #234f71;
1037
+ --ffe-color-frost-800: #163853;
1038
+ --ffe-color-sand-25: #fcf4ee;
1039
+ --ffe-color-syrin-25: #eaeaf6;
1096
1040
  --ffe-color-syrin-50: #e6e6f4;
1097
1041
  --ffe-color-syrin-75: #dcdcef;
1098
1042
  --ffe-color-syrin-100: #d3d3ea;
@@ -1105,11 +1049,16 @@ html,
1105
1049
  --ffe-color-syrin-450: #8c88a0;
1106
1050
  --ffe-color-syrin-500: #79748b;
1107
1051
  --ffe-color-syrin-550: #686477;
1052
+ --ffe-color-syrin-600: #5d5a6d;
1053
+ --ffe-color-syrin-650: #514e5f;
1108
1054
  --ffe-color-syrin-700: #474457;
1109
- --ffe-color-baer-50: #ffd7d1;
1055
+ --ffe-color-syrin-750: #3d394c;
1056
+ --ffe-color-syrin-800: #332f41;
1057
+ --ffe-color-baer-50: #ffd5d1;
1110
1058
  --ffe-color-baer-100: #ffaea8;
1111
1059
  --ffe-color-baer-200: #ff7f7a;
1112
1060
  --ffe-color-baer-300: #ff5e5c;
1061
+ --ffe-color-baer-400: #e44244;
1113
1062
  --ffe-color-baer-500: #c62a2f;
1114
1063
  --ffe-color-baer-700: #7c1214;
1115
1064
  --ffe-color-baer-800: #640e10;
@@ -1122,6 +1071,7 @@ html,
1122
1071
  --ffe-color-skog-550: #2a7e5b;
1123
1072
  --ffe-color-skog-600: #00754e;
1124
1073
  --ffe-color-skog-650: #0d6346;
1074
+ --ffe-color-skog-700: #09583b;
1125
1075
  --ffe-color-skog-750: #0a4d37;
1126
1076
  --ffe-color-skog-800: #0a4330;
1127
1077
  --ffe-color-sol-50: #ffe0b2;
@@ -1136,8 +1086,6 @@ html,
1136
1086
  --ffe-color-gray-150: #c2c2c2;
1137
1087
  --ffe-color-gray-200: #b8b8b8;
1138
1088
  --ffe-color-gray-250: #adadad;
1139
- --ffe-color-gray-300: #a4a4a4;
1140
- --ffe-color-gray-450: #858585;
1141
1089
  --ffe-color-gray-550: #707070;
1142
1090
  --ffe-color-gray-600: #666666;
1143
1091
  --ffe-color-gray-650: #5c5c5c;
@@ -1146,23 +1094,16 @@ html,
1146
1094
  --ffe-color-gray-850: #333333;
1147
1095
  --ffe-color-gray-900: #292929;
1148
1096
  --ffe-color-gray-950: #1f1f1f;
1149
- --ffe-color-gray-1000: #141414;
1150
- --ffe-color-gray-white: #ffffff;
1151
1097
  --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;
1098
+ --ffe-color-alpha-white-100: #ffffff;
1099
+ --ffe-color-alpha-black-100: #020a0a;
1160
1100
  }
1161
1101
  /**
1162
1102
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
1163
1103
  */
1164
1104
  :root,
1165
1105
  :host {
1106
+ /* DEPRICATED, bruk colors-semantic i stedet for */
1166
1107
  /** Primærpalett */
1167
1108
  --ffe-farge-fjell: #002776;
1168
1109
  --ffe-farge-fjell-70: #4d689f;
@@ -1215,6 +1156,7 @@ html,
1215
1156
  --ffe-farge-varmgraa: #9b9797;
1216
1157
  --ffe-farge-lysvarmgraa: #d7d2cb;
1217
1158
  --ffe-farge-hvit: #fff;
1159
+ /* END depricated */
1218
1160
  /** Font sizes */
1219
1161
  --ffe-fontsize-body-text: 1rem;
1220
1162
  --ffe-fontsize-small-text: 0.875rem;
@@ -1257,14 +1199,14 @@ html,
1257
1199
  --ffe-spacing-5xl: 160px;
1258
1200
  /** Theme base colors */
1259
1201
  /* Links, buttons and similar */
1260
- --ffe-g-primary-color: var(--ffe-farge-vann);
1202
+ --ffe-g-primary-color: var(--ffe-color-fill-primary-default);
1261
1203
  /* Headings, labels, hover, etc */
1262
- --ffe-g-secondary-color: var(--ffe-farge-fjell);
1204
+ --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis);
1263
1205
  /* Error messages, invalid inputs, etc */
1264
- --ffe-g-error-color: var(--ffe-farge-baer);
1206
+ --ffe-g-error-color: var(--ffe-color-fill-feedback-critical);
1265
1207
  /** Theme borders */
1266
1208
  /* Form element borders */
1267
- --ffe-g-border-color: var(--ffe-farge-varmgraa);
1209
+ --ffe-g-border-color: var(--ffe-color-border-primary-default);
1268
1210
  --ffe-g-border-radius: 8px;
1269
1211
  --ffe-g-border-radius-lg: 16px;
1270
1212
  --ffe-g-border-width: 1px;
@@ -1282,17 +1224,17 @@ html,
1282
1224
  --ffe-g-font-italic: 'SpareBank1-italic', arial, sans-serif;
1283
1225
  /** Typography */
1284
1226
  /* Default body text color */
1285
- --ffe-g-text-color: var(--ffe-farge-svart);
1227
+ --ffe-g-text-color: var(--ffe-color-foreground-default);
1286
1228
  /* Lead paragraph */
1287
- --ffe-g-lead-color: var(--ffe-farge-fjell);
1229
+ --ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
1288
1230
  /* Headings */
1289
- --ffe-g-heading-color: var(--ffe-farge-fjell);
1231
+ --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
1290
1232
  /* 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);
1233
+ --ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
1234
+ --ffe-g-link-color-hover: var(--ffe-color-foreground-interactive-link-hover);
1235
+ --ffe-g-link-color-visited: var(--ffe-color-foreground-interactive-link-pressed);
1236
+ --ffe-g-link-icon-color-hover: var(--ffe-color-foreground-interactive-link-hover);
1237
+ --ffe-g-link-icon-color-focus: var(--ffe-color-foreground-interactive-link-pressed);
1296
1238
  }
1297
1239
  @media (min-width: 480px) {
1298
1240
  :root,
@@ -1314,22 +1256,6 @@ html,
1314
1256
  --ffe-fontsize-h3: 1.75rem;
1315
1257
  }
1316
1258
  }
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
1259
  .ffe-h1 {
1334
1260
  line-height: 2.25rem;
1335
1261
  font-size: var(--ffe-fontsize-h1);
@@ -1356,7 +1282,7 @@ html,
1356
1282
  }
1357
1283
  .ffe-small-text,
1358
1284
  .ffe-micro-text {
1359
- color: var(--ffe-g-text-color);
1285
+ color: var(--ffe-color-foreground-default);
1360
1286
  font-family: var(--ffe-g-font);
1361
1287
  font-weight: normal;
1362
1288
  font-variant-numeric: tabular-nums;
@@ -1378,7 +1304,7 @@ html,
1378
1304
  .ffe-h4,
1379
1305
  .ffe-h5,
1380
1306
  .ffe-h6 {
1381
- color: var(--ffe-g-heading-color);
1307
+ color: var(--ffe-color-foreground-emphasis);
1382
1308
  font-weight: normal;
1383
1309
  margin-bottom: var(--ffe-spacing-xs);
1384
1310
  margin-top: 0;
@@ -1391,7 +1317,7 @@ html,
1391
1317
  .ffe-h4--error,
1392
1318
  .ffe-h5--error,
1393
1319
  .ffe-h6--error {
1394
- color: var(--ffe-g-error-color);
1320
+ color: var(--ffe-color-foreground-feedback-critical);
1395
1321
  }
1396
1322
  .ffe-h1--inline,
1397
1323
  .ffe-h2--inline,
@@ -1415,19 +1341,9 @@ html,
1415
1341
  .ffe-h4--with-border,
1416
1342
  .ffe-h5--with-border,
1417
1343
  .ffe-h6--with-border {
1418
- border-bottom: 1px solid var(--ffe-farge-lysgraa);
1344
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
1419
1345
  padding-bottom: var(--ffe-spacing-xs);
1420
1346
  }
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
1347
  .ffe-h1--no-underline,
1432
1348
  .ffe-h2--no-underline,
1433
1349
  .ffe-h3--no-underline,
@@ -1456,7 +1372,7 @@ html,
1456
1372
  font-variant-numeric: tabular-nums;
1457
1373
  }
1458
1374
  .ffe-body-text {
1459
- color: var(--ffe-g-text-color);
1375
+ color: var(--ffe-color-foreground-default);
1460
1376
  font-family: var(--ffe-g-font);
1461
1377
  font-variant-numeric: tabular-nums;
1462
1378
  line-height: 1.5rem;
@@ -1468,7 +1384,7 @@ html,
1468
1384
  margin-bottom: 1em;
1469
1385
  margin-top: 0;
1470
1386
  line-height: 1.5rem;
1471
- color: var(--ffe-g-text-color);
1387
+ color: var(--ffe-color-foreground-default);
1472
1388
  text-wrap: pretty;
1473
1389
  }
1474
1390
  .ffe-body-paragraph--text-center {
@@ -1489,18 +1405,18 @@ html,
1489
1405
  text-wrap: pretty;
1490
1406
  }
1491
1407
  .ffe-lead-paragraph {
1492
- color: var(--ffe-g-lead-color);
1408
+ color: var(--ffe-color-foreground-emphasis);
1493
1409
  line-height: 1.5rem;
1494
1410
  font-size: var(--ffe-fontsize-lead-paragraph);
1495
1411
  }
1496
1412
  .ffe-sub-lead-paragraph {
1497
- color: var(--ffe-g-text-color);
1413
+ color: var(--ffe-color-foreground-default);
1498
1414
  line-height: 1.5rem;
1499
1415
  font-size: var(--ffe-fontsize-sub-lead-paragraph);
1500
1416
  }
1501
1417
  .ffe-link-text {
1502
- border-bottom: 1px solid var(--ffe-g-link-color);
1503
- color: var(--ffe-g-link-color);
1418
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
1419
+ color: var(--ffe-color-foreground-interactive-link);
1504
1420
  cursor: pointer;
1505
1421
  text-decoration: none;
1506
1422
  word-wrap: break-all;
@@ -1511,36 +1427,30 @@ html,
1511
1427
  }
1512
1428
  @media (hover: hover) and (pointer: fine) {
1513
1429
  .ffe-link-text:hover {
1514
- border-bottom-color: var(--ffe-g-link-color-hover);
1515
- color: var(--ffe-g-link-color-hover);
1430
+ border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
1431
+ color: var(--ffe-color-foreground-interactive-link-hover);
1516
1432
  text-decoration: none;
1517
1433
  }
1518
1434
  }
1519
1435
  .ffe-link-text:visited {
1520
- border-bottom-color: var(--ffe-g-link-color-visited);
1521
- color: var(--ffe-g-link-color-visited);
1436
+ border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
1437
+ color: var(--ffe-color-foreground-interactive-link-pressed);
1522
1438
  text-decoration: none;
1523
1439
  }
1524
1440
  .ffe-link-text--no-underline {
1525
1441
  border-bottom: none;
1526
1442
  }
1527
1443
  .ffe-link-text:focus {
1528
- border-color: var(--ffe-farge-hvit);
1529
- color: var(--ffe-farge-hvit);
1444
+ border-color: var(--ffe-color-foreground-interactive-link-pressed);
1445
+ color: var(--ffe-color-foreground-interactive-link-pressed);
1530
1446
  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);
1447
+ background-color: var(--ffe-color-foreground-interactive-link);
1448
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1449
+ box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
1534
1450
  outline: none;
1535
1451
  }
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
1452
  .ffe-link-icon {
1543
- fill: var(--ffe-g-link-color);
1453
+ fill: var(--ffe-color-foreground-interactive-link);
1544
1454
  display: -webkit-inline-box;
1545
1455
  display: -ms-inline-flexbox;
1546
1456
  display: inline-flex;
@@ -1551,27 +1461,23 @@ html,
1551
1461
  }
1552
1462
  @media (hover: hover) and (pointer: fine) {
1553
1463
  .ffe-link-icon:hover {
1554
- fill: var(--ffe-g-link-icon-color-hover);
1464
+ fill: var(--ffe-color-foreground-interactive-link-hover);
1555
1465
  }
1556
1466
  }
1557
1467
  .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);
1468
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
1469
+ box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
1560
1470
  }
1561
1471
  .ffe-divider-line {
1562
1472
  border: none;
1563
- border-bottom: solid 1px var(--ffe-farge-lysgraa);
1473
+ border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
1564
1474
  padding-top: 1px;
1565
1475
  padding-bottom: 1px;
1566
1476
  width: 100%;
1567
1477
  }
1568
- @media (prefers-color-scheme: dark) {
1569
- .regard-color-scheme-preference .ffe-divider-line {
1570
- border-color: var(--ffe-farge-graa);
1571
- }
1572
- }
1573
1478
  .ffe-strong-text {
1574
1479
  font-family: var(--ffe-g-font-strong);
1480
+ color: var(--ffe-color-foreground-default);
1575
1481
  font-variant-numeric: tabular-nums;
1576
1482
  font-weight: normal;
1577
1483
  }
@@ -1580,18 +1486,15 @@ html,
1580
1486
  font-variant-numeric: tabular-nums;
1581
1487
  font-weight: normal;
1582
1488
  font-style: normal;
1489
+ color: var(--ffe-color-foreground-default);
1583
1490
  }
1584
1491
  .ffe-pre-text {
1585
- background-color: var(--ffe-farge-sand-70);
1492
+ background-color: var(--ffe-color-background-subtle);
1493
+ color: var(--ffe-color-foreground-default);
1586
1494
  font-family: consolas, menlo, monaco, monospace;
1587
1495
  margin: 0;
1588
1496
  text-align: left;
1589
1497
  }
1590
- @media (prefers-color-scheme: dark) {
1591
- .regard-color-scheme-preference .ffe-pre-text {
1592
- background-color: var(--ffe-farge-koksgraa);
1593
- }
1594
- }
1595
1498
  .ffe-inline-separator {
1596
1499
  margin: 0 4px;
1597
1500
  }
@@ -1678,19 +1581,11 @@ html,
1678
1581
  overflow-wrap: anywhere;
1679
1582
  }
1680
1583
  .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);
1584
+ background-color: var(--ffe-color-foreground-default);
1585
+ color: var(--ffe-color-background-default);
1685
1586
  font-family: var(--ffe-g-font);
1686
1587
  font-variant-numeric: tabular-nums;
1687
1588
  }
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
1589
  .ffe-body strong {
1695
1590
  font-family: var(--ffe-g-font-strong);
1696
1591
  font-weight: normal;