@sb1/ffe-core 31.1.1 → 32.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 (8) hide show
  1. package/css/colors-semantic.css +502 -358
  2. package/css/ffe.css +503 -358
  3. package/less/colors-semantic-storybook.less +197 -137
  4. package/less/colors-semantic.less +502 -358
  5. package/less/variables.less +1 -0
  6. package/lib/semanticColors.js +17 -8
  7. package/lib/semanticColorsTailwind.js +17 -8
  8. package/package.json +2 -3
package/css/ffe.css CHANGED
@@ -390,42 +390,51 @@ html,
390
390
  .ffe-accent-mode {
391
391
  --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
392
392
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
393
- --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-subtlest);
394
- --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
395
- --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-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);
393
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-accent-accent);
394
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
395
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
396
+ --ffe-color-surface-secondary-default: #005aa4;
397
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
398
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
399
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-accent-accent);
400
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
401
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
402
402
  --ffe-color-surface-feedback-info: var(--ffe-color-accent-feedback-info-subtlest);
403
403
  --ffe-color-surface-feedback-success: var(--ffe-color-accent-feedback-success-subtlest);
404
404
  --ffe-color-surface-feedback-warning: var(--ffe-color-accent-feedback-warning-subtlest);
405
405
  --ffe-color-surface-feedback-critical: var(--ffe-color-accent-feedback-critical-subtlest);
406
406
  --ffe-color-surface-feedback-tip: var(--ffe-color-accent-feedback-tip-sublest);
407
- --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
408
- --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
409
- --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-stronger);
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);
413
- --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtlest);
414
- --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtler);
415
- --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-subtle);
407
+ --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-strong);
408
+ --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-stronger);
409
+ --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-strongest);
410
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-accent-interactive-selected-default);
411
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-accent-interactive-selected-hover);
412
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-accent-interactive-selected-pressed);
413
+ --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtler);
414
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
415
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-default);
416
416
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
417
- --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
418
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
419
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
420
- --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtlest);
421
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtler);
422
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-subtle);
423
- --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
424
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
425
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-strongest);
426
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtlest);
427
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtler);
428
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
417
+ --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
418
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-strong);
419
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-stronger);
420
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
421
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
422
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
423
+ --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
424
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-strong);
425
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
426
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtle);
427
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-default);
428
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-medium);
429
+ --ffe-color-fill-neutral-default: var(--ffe-color-accent-neutral-alpha-strong);
430
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-accent-neutral-alpha-stronger);
431
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-accent-neutral-alpha-strongest);
432
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-accent-neutral-alpha-default);
433
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-accent-neutral-alpha-medium);
434
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-accent-neutral-alpha-strong);
435
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-accent-neutral-alpha-subtlest);
436
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-accent-neutral-alpha-subtler);
437
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-accent-neutral-alpha-subtle);
429
438
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
430
439
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
431
440
  --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
@@ -438,68 +447,68 @@ html,
438
447
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
439
448
  --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
440
449
  --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
441
- --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
450
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-stronger);
442
451
  --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
443
452
  --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
444
453
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
445
- --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
446
- --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
447
- --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
454
+ --ffe-color-foreground-interactive-link: var(--ffe-color-accent-interactive-default);
455
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-accent-interactive-hover);
456
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-accent-interactive-pressed);
457
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-accent-interactive-selected-default);
448
458
  --ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
449
459
  --ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
450
460
  --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
451
461
  --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
452
462
  --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
453
- --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-medium);
454
- --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strong);
455
- --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-strongest);
456
- --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtler);
463
+ --ffe-color-border-primary-default: var(--ffe-color-speciality-static-alpha-white-stronger);
464
+ --ffe-color-border-primary-default-hover: var(--ffe-color-speciality-static-alpha-white-strong);
465
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-speciality-static-alpha-white-medium);
466
+ --ffe-color-border-primary-subtle: var(--ffe-color-speciality-static-alpha-white-default);
467
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-speciality-static-alpha-white-medium);
468
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-speciality-static-alpha-white-strong);
457
469
  --ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
458
- --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
459
- --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
460
- --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
461
- --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
462
- --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
463
- --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
464
- --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
470
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
471
+ --ffe-color-border-secondary-hover: var(--ffe-color-accent-brand-secondary-strong);
472
+ --ffe-color-border-secondary-pressed: var(--ffe-color-accent-brand-secondary-stronger);
473
+ --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
474
+ --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-strong);
475
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
465
476
  --ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
477
+ --ffe-color-border-interactive-selected: var(--ffe-color-accent-brand-primary-stronger);
466
478
  --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
467
479
  --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
468
480
  --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
469
481
  --ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
470
482
  --ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
471
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
472
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
473
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
474
- --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-strong);
475
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-stronger);
476
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-strongest);
477
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-accent-neutral-inverted);
478
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-accent-neutral-inverted);
479
- --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-primary-medium);
480
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-default);
481
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-stronger);
482
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-accent-brand-primary-strong);
483
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
484
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-accent-brand-primary-strongest);
485
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-accent-neutral-inverted);
486
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-accent-neutral-inverted);
487
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-accent-brand-primary-strong);
488
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-accent-brand-primary-stronger);
489
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-accent-brand-primary-strongest);
490
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
491
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
492
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
493
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
494
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
495
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-speciality-background-accent);
496
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
497
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
498
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-fill-primary-invisible);
499
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
500
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
501
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
502
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
483
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
484
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
485
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
486
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
487
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
488
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
489
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
490
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
491
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-emphasis-strong);
492
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-accent-brand-emphasis-stronger);
493
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-accent-brand-emphasis-strongest);
494
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-accent-fill-default);
495
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-accent-fill-hover);
496
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-accent-fill-pressed);
497
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
498
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
499
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
500
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
501
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
502
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-accent-fill-default);
503
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-accent-fill-hover);
504
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-accent-fill-pressed);
505
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
506
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
507
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-accent-fill-default);
508
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-accent-fill-hover);
509
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-accent-fill-pressed);
510
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
511
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
503
512
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
504
513
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
505
514
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -508,8 +517,8 @@ html,
508
517
  --ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
509
518
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
510
519
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
511
- --ffe-color-component-logo-name: var(--ffe-color-alpha-white-100);
512
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
520
+ --ffe-color-component-logo-name: var(--ffe-color-alpha-white-1000);
521
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
513
522
  --ffe-color-component-logo-circle-dark-red: #af0000;
514
523
  --ffe-color-component-logo-circle-light-red: #e60000;
515
524
  }
@@ -518,42 +527,51 @@ html,
518
527
  .ffe-default-mode {
519
528
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
520
529
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
521
- --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
522
- --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
523
- --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
524
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
525
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
526
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
527
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
528
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
529
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
530
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
531
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
532
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
533
+ --ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
534
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
535
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
536
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
537
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
538
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
530
539
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
531
540
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
532
541
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
533
542
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
534
543
  --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
535
- --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
536
- --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
537
- --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
538
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
539
- --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
540
- --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
544
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
545
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
546
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
547
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
548
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
549
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
541
550
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
542
551
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
543
552
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
544
553
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
545
- --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
546
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
547
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
548
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
549
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
550
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
551
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
552
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
553
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
554
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
555
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
556
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
554
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
555
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
556
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
557
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
558
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
559
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
560
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
561
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
562
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
563
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
564
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
565
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
566
+ --ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
567
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
568
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
569
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
570
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
571
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
572
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
573
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
574
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
557
575
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
558
576
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
559
577
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
@@ -566,68 +584,68 @@ html,
566
584
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
567
585
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
568
586
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
569
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
570
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
587
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
588
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
571
589
  --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
572
590
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
573
591
  --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
574
592
  --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
575
593
  --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
594
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
576
595
  --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
577
596
  --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
578
597
  --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
579
598
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
580
599
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
581
- --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
582
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
583
- --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
600
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
601
+ --ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
602
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
584
603
  --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
604
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
605
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
585
606
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
586
- --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
587
- --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
607
+ --ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
588
608
  --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
589
609
  --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
590
- --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
591
- --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
592
- --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
610
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
611
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
612
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
593
613
  --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
614
+ --ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
594
615
  --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
595
616
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
596
617
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
597
618
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
598
619
  --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
599
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
600
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
601
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
602
- --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
603
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
604
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
605
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
606
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
607
- --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
608
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
609
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
610
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
611
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
612
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
613
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
614
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
615
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
616
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
617
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
618
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
619
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
620
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
621
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
622
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
623
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
624
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
625
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
626
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
627
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
628
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
629
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
630
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
620
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
621
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
622
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
623
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
624
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
625
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
626
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
627
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
628
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
629
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
630
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
631
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
632
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
633
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
634
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
635
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
636
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
637
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
638
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
639
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
640
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
641
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
642
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
643
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
644
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
645
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
646
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
647
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
648
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
631
649
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
632
650
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
633
651
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -637,7 +655,7 @@ html,
637
655
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
638
656
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
639
657
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
640
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
658
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
641
659
  --ffe-color-component-logo-circle-dark-red: #af0000;
642
660
  --ffe-color-component-logo-circle-light-red: #e60000;
643
661
  }
@@ -646,23 +664,22 @@ html,
646
664
  --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-50);
647
665
  --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-150);
648
666
  --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-250);
649
- --ffe-color-default-brand-primary-default: var(--ffe-color-vann-350);
650
- --ffe-color-default-brand-primary-medium: var(--ffe-color-vann-500);
651
667
  --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
652
668
  --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
653
669
  --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
654
- --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
655
670
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
656
671
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
672
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
673
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
657
674
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
658
675
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
659
- --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
660
- --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
661
- --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
662
676
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
677
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
678
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-250);
663
679
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
664
680
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
665
- --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
681
+ --ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-550);
682
+ --ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-650);
666
683
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
667
684
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
668
685
  --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
@@ -670,8 +687,6 @@ html,
670
687
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
671
688
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
672
689
  --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
673
- --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
674
- --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
675
690
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
676
691
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
677
692
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
@@ -688,40 +703,50 @@ html,
688
703
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
689
704
  --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
690
705
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
691
- --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
692
706
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
693
- --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
707
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
708
+ --ffe-color-default-neutral-subtlest: var(--ffe-color-gray-25);
694
709
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
695
- --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
696
- --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
710
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
711
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-150);
712
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-300);
713
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-400);
697
714
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
698
- --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
715
+ --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-1000);
716
+ --ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-black-25);
717
+ --ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-black-50);
718
+ --ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-black-75);
719
+ --ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-black-100);
720
+ --ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-black-200);
721
+ --ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-black-300);
722
+ --ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-black-400);
723
+ --ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-black-500);
699
724
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
700
725
  --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
701
726
  --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
702
727
  --ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
703
- --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-vann-600);
704
- --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-500);
705
- --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-400);
706
- --ffe-color-accent-brand-primary-medium: var(--ffe-color-vann-250);
707
- --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-150);
708
- --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-75);
709
- --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-25);
710
- --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
711
- --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
712
- --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
713
- --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
728
+ --ffe-color-default-interactive-selected-default: var(--ffe-color-vann-600);
729
+ --ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-700);
730
+ --ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-800);
731
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-600);
732
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-500);
733
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-vann-400);
734
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-200);
735
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-100);
736
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-50);
737
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-650);
738
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
739
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-550);
740
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
714
741
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
715
742
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
716
- --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-25);
717
- --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-600);
718
- --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-500);
719
- --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-400);
720
- --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-300);
721
- --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-200);
722
- --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-100);
743
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-650);
744
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-600);
745
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
746
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-150);
723
747
  --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
724
- --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
748
+ --ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-100);
749
+ --ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-75);
725
750
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
726
751
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
727
752
  --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
@@ -729,10 +754,9 @@ html,
729
754
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
730
755
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
731
756
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
732
- --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-500);
757
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
733
758
  --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
734
759
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
735
- --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
736
760
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
737
761
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
738
762
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
@@ -748,50 +772,94 @@ html,
748
772
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
749
773
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
750
774
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
751
- --ffe-color-accent-neutral-subtlest: var(--ffe-color-vann-600);
752
- --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
753
- --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
754
- --ffe-color-accent-neutral-medium: var(--ffe-color-vann-150);
755
- --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
756
- --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
775
+ --ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
776
+ --ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
777
+ --ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
778
+ --ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
779
+ --ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
780
+ --ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
781
+ --ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
782
+ --ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
783
+ --ffe-color-accent-neutral-strong: var(--ffe-color-alpha-white-500);
784
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
757
785
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
758
- --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
786
+ --ffe-color-accent-interactive-default: var(--ffe-color-vann-0);
787
+ --ffe-color-accent-interactive-hover: var(--ffe-color-vann-25);
788
+ --ffe-color-accent-interactive-pressed: var(--ffe-color-vann-50);
789
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
790
+ --ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
791
+ --ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
792
+ --ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
759
793
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
760
- --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
761
- --ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
794
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-1000);
795
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
762
796
  --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
763
- --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-850);
764
- --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
765
- --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
766
- --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
797
+ --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-700);
767
798
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
768
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
769
- --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
770
- --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
771
- --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
799
+ --ffe-color-speciality-background-surface-primary-default: var(--ffe-color-alpha-white-1000);
800
+ --ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-25);
801
+ --ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-50);
802
+ --ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-frost-25);
803
+ --ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-frost-50);
804
+ --ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-frost-75);
805
+ --ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-syrin-25);
806
+ --ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-syrin-50);
807
+ --ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-syrin-75);
808
+ --ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-vann-600);
809
+ --ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-vann-500);
810
+ --ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-vann-400);
811
+ --ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-600);
812
+ --ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-700);
813
+ --ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-800);
814
+ --ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-25);
815
+ --ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-75);
816
+ --ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-100);
817
+ --ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-vann-850);
818
+ --ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-600);
819
+ --ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
820
+ --ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-water-100);
821
+ --ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-water-200);
822
+ --ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-700);
823
+ --ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-alpha-white-1000);
824
+ --ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
825
+ --ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
826
+ --ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
827
+ --ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
828
+ --ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
829
+ --ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-water-100);
830
+ --ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-water-200);
831
+ --ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-700);
832
+ --ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
833
+ --ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
834
+ --ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
835
+ --ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
836
+ --ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
837
+ --ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
838
+ --ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
839
+ --ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
840
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
772
841
  }
773
842
  @media (prefers-color-scheme: dark) {
774
843
  :where(.regard-color-scheme-preference) {
775
- --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-800);
776
- --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-700);
777
- --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-600);
778
- --ffe-color-default-brand-primary-default: var(--ffe-color-natt-500);
779
- --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-400);
780
- --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-300);
781
- --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-200);
782
- --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-100);
783
- --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
784
- --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
785
- --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
844
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-800);
845
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-700);
846
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-600);
847
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-300);
848
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-200);
849
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-100);
850
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-800);
851
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-700);
852
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-600);
853
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-500);
786
854
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
787
855
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
788
- --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
789
- --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
790
- --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
791
- --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
792
- --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
793
- --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
794
- --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
856
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-750);
857
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-650);
858
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-550);
859
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-300);
860
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-200);
861
+ --ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-300);
862
+ --ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-150);
795
863
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
796
864
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
797
865
  --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
@@ -799,8 +867,6 @@ html,
799
867
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
800
868
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
801
869
  --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
802
- --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
803
- --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
804
870
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
805
871
  --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
806
872
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
@@ -817,40 +883,50 @@ html,
817
883
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
818
884
  --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
819
885
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
820
- --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
821
886
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
822
- --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
887
+ --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
888
+ --ffe-color-default-neutral-subtlest: var(--ffe-color-gray-900);
823
889
  --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
890
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
891
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-500);
824
892
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
825
893
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
826
- --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
827
- --ffe-color-default-neutral-inverted: var(--ffe-color-gray-950);
828
- --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
829
- --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
830
- --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
831
- --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-100);
832
- --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
833
- --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
834
- --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
835
- --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
836
- --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
837
- --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
838
- --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
839
- --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
840
- --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
841
- --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
842
- --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
894
+ --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-1000);
895
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-1000);
896
+ --ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
897
+ --ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
898
+ --ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
899
+ --ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-white-100);
900
+ --ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
901
+ --ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
902
+ --ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
903
+ --ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
904
+ --ffe-color-default-interactive-default: var(--ffe-color-vann-400);
905
+ --ffe-color-default-interactive-hover: var(--ffe-color-vann-300);
906
+ --ffe-color-default-interactive-pressed: var(--ffe-color-vann-200);
907
+ --ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-1000);
908
+ --ffe-color-default-interactive-selected-default: var(--ffe-color-alpha-white-1000);
909
+ --ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-50);
910
+ --ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-100);
911
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-700);
912
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-600);
913
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-vann-500);
914
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-300);
915
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-200);
916
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-100);
917
+ --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-800);
918
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-700);
919
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-600);
920
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
843
921
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
844
922
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
845
- --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
846
- --ffe-color-accent-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
847
- --ffe-color-accent-brand-tertiary-subtler: var(--ffe-color-syrin-650);
848
- --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-550);
849
- --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
850
- --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
851
- --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
852
- --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-100);
853
- --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
923
+ --ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-750);
924
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-650);
925
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
926
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
927
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
928
+ --ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-300);
929
+ --ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-150);
854
930
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
855
931
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
856
932
  --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
@@ -858,10 +934,9 @@ html,
858
934
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
859
935
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
860
936
  --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
861
- --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-600);
937
+ --ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
862
938
  --ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
863
939
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
864
- --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
865
940
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
866
941
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
867
942
  --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
@@ -877,65 +952,119 @@ html,
877
952
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
878
953
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
879
954
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
880
- --ffe-color-accent-neutral-subtlest: var(--ffe-color-gray-900);
881
- --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
882
- --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
883
- --ffe-color-accent-neutral-medium: var(--ffe-color-gray-350);
955
+ --ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
956
+ --ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
957
+ --ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
958
+ --ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
959
+ --ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
960
+ --ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
961
+ --ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
962
+ --ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
884
963
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
885
- --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
964
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
886
965
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
887
- --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
888
- --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-100);
889
- --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
966
+ --ffe-color-accent-interactive-default: var(--ffe-color-vann-300);
967
+ --ffe-color-accent-interactive-hover: var(--ffe-color-vann-400);
968
+ --ffe-color-accent-interactive-pressed: var(--ffe-color-vann-500);
969
+ --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
970
+ --ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
971
+ --ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
972
+ --ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
973
+ --ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-1000);
974
+ --ffe-color-speciality-background-default: var(--ffe-color-alpha-black-1000);
890
975
  --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
891
- --ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
892
- --ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
893
- --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
894
- --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
895
- --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
976
+ --ffe-color-speciality-background-accent: var(--ffe-color-gray-1000);
977
+ --ffe-color-speciality-background-accent-subtle: var(--ffe-color-gray-950);
896
978
  --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
897
- --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-100);
898
- --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
899
- --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
900
- --ffe-color-speciality-static-accent-default: var(--ffe-color-alpha-white-100);
979
+ --ffe-color-speciality-background-surface-primary-default: var(--ffe-color-gray-900);
980
+ --ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-800);
981
+ --ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-700);
982
+ --ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-gray-900);
983
+ --ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-gray-800);
984
+ --ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-gray-700);
985
+ --ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-gray-900);
986
+ --ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-gray-800);
987
+ --ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-gray-700);
988
+ --ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-gray-900);
989
+ --ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-gray-800);
990
+ --ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-gray-700);
991
+ --ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-550);
992
+ --ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-500);
993
+ --ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-400);
994
+ --ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-550);
995
+ --ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-500);
996
+ --ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-400);
997
+ --ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
998
+ --ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-300);
999
+ --ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
1000
+ --ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-white-100);
1001
+ --ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-white-200);
1002
+ --ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-100);
1003
+ --ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-vann-300);
1004
+ --ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
1005
+ --ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
1006
+ --ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
1007
+ --ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-vann-100);
1008
+ --ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
1009
+ --ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-white-100);
1010
+ --ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-white-200);
1011
+ --ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-100);
1012
+ --ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
1013
+ --ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
1014
+ --ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
1015
+ --ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-vann-100);
1016
+ --ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
1017
+ --ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
1018
+ --ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
1019
+ --ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
1020
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
901
1021
  --ffe-color-background-default: var(--ffe-color-speciality-background-default);
902
1022
  --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
903
- --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
904
- --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
905
- --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
906
- --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtlest);
907
- --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtler);
908
- --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtle);
909
- --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtlest);
910
- --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-subtler);
911
- --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-subtle);
1023
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
1024
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
1025
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
1026
+ --ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
1027
+ --ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
1028
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
1029
+ --ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
1030
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
1031
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
912
1032
  --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
913
1033
  --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
914
1034
  --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
915
1035
  --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
916
1036
  --ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
917
- --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
918
- --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
919
- --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
920
- --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strong);
921
- --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-brand-primary-stronger);
922
- --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
1037
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
1038
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
1039
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
1040
+ --ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
1041
+ --ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
1042
+ --ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
923
1043
  --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
924
1044
  --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
925
1045
  --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
926
1046
  --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
927
- --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
928
- --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
929
- --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
930
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
931
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
932
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
933
- --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
934
- --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
935
- --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
936
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
937
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
938
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
1047
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
1048
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
1049
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
1050
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
1051
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
1052
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
1053
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
1054
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
1055
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
1056
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
1057
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
1058
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
1059
+ --ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
1060
+ --ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
1061
+ --ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
1062
+ --ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
1063
+ --ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
1064
+ --ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
1065
+ --ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
1066
+ --ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
1067
+ --ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
939
1068
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
940
1069
  --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
941
1070
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
@@ -948,68 +1077,68 @@ html,
948
1077
  --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
949
1078
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
950
1079
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
951
- --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
952
- --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
1080
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
1081
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
953
1082
  --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
954
1083
  --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
955
1084
  --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
956
1085
  --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
957
1086
  --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
1087
+ --ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
958
1088
  --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
959
1089
  --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
960
1090
  --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
961
1091
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
962
1092
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
963
- --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
964
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
965
- --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
1093
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
1094
+ --ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
1095
+ --ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
966
1096
  --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
1097
+ --ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
1098
+ --ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
967
1099
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
968
- --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
969
- --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
1100
+ --ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
970
1101
  --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
971
1102
  --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
972
- --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
973
- --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
974
- --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
1103
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
1104
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
1105
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
975
1106
  --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
1107
+ --ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
976
1108
  --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
977
1109
  --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
978
1110
  --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
979
1111
  --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
980
1112
  --ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
981
- --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
982
- --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
983
- --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
984
- --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
985
- --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
986
- --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
987
- --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
988
- --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
989
- --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
990
- --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
991
- --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
992
- --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
993
- --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
994
- --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
995
- --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
996
- --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
997
- --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
998
- --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
999
- --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
1000
- --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
1001
- --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
1002
- --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1003
- --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1004
- --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1005
- --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
1006
- --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
1007
- --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
1008
- --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
1009
- --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
1010
- --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1011
- --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1012
- --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1113
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
1114
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
1115
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
1116
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
1117
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
1118
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
1119
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
1120
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
1121
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
1122
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
1123
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
1124
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
1125
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
1126
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
1127
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
1128
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
1129
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
1130
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
1131
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
1132
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
1133
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
1134
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
1135
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
1136
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
1137
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
1138
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
1139
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
1140
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
1141
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
1013
1142
  --ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
1014
1143
  --ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
1015
1144
  --ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
@@ -1019,19 +1148,22 @@ html,
1019
1148
  --ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
1020
1149
  --ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
1021
1150
  --ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
1022
- --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-100);
1151
+ --ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
1023
1152
  --ffe-color-component-logo-circle-dark-red: #af0000;
1024
1153
  --ffe-color-component-logo-circle-light-red: #e60000;
1025
1154
  }
1026
1155
  }
1027
1156
  :root,
1028
1157
  :host {
1158
+ --ffe-color-vann-0: #f7fafd;
1029
1159
  --ffe-color-vann-25: #e7f1f9;
1030
1160
  --ffe-color-vann-50: #d7e7f4;
1031
1161
  --ffe-color-vann-75: #cfe2f2;
1162
+ --ffe-color-vann-100: #c3d9ef;
1032
1163
  --ffe-color-vann-150: #b6d1ec;
1164
+ --ffe-color-vann-200: #9ec2e5;
1033
1165
  --ffe-color-vann-250: #8eb8e1;
1034
- --ffe-color-vann-350: #6ba1d6;
1166
+ --ffe-color-vann-300: #7dabd9;
1035
1167
  --ffe-color-vann-400: #5494d4;
1036
1168
  --ffe-color-vann-500: #2975c2;
1037
1169
  --ffe-color-vann-550: #1566b2;
@@ -1041,32 +1173,23 @@ html,
1041
1173
  --ffe-color-vann-800: #002776;
1042
1174
  --ffe-color-vann-850: #08235e;
1043
1175
  --ffe-color-vann-1000: #070d27;
1044
- --ffe-color-natt-50: #dfe6f1;
1045
- --ffe-color-natt-100: #c9d5e8;
1046
- --ffe-color-natt-200: #acbfdc;
1047
- --ffe-color-natt-300: #90a9d0;
1048
- --ffe-color-natt-400: #748db4;
1049
- --ffe-color-natt-500: #55709b;
1050
- --ffe-color-natt-600: #3e5579;
1051
- --ffe-color-natt-700: #2e405c;
1052
- --ffe-color-natt-800: #202c3f;
1053
- --ffe-color-natt-950: #101622;
1054
1176
  --ffe-color-frost-25: #e5f0f5;
1055
1177
  --ffe-color-frost-50: #dceaef;
1056
1178
  --ffe-color-frost-75: #cbe2eb;
1057
1179
  --ffe-color-frost-100: #c3dfea;
1058
1180
  --ffe-color-frost-150: #b6d7e7;
1059
1181
  --ffe-color-frost-200: #a6cee2;
1182
+ --ffe-color-frost-250: #95c3db;
1060
1183
  --ffe-color-frost-300: #7eb5d2;
1061
1184
  --ffe-color-frost-350: #6ea6c9;
1062
- --ffe-color-frost-400: #6096bd;
1063
1185
  --ffe-color-frost-450: #5489b0;
1064
1186
  --ffe-color-frost-500: #457aa1;
1065
1187
  --ffe-color-frost-550: #3b6f96;
1066
1188
  --ffe-color-frost-600: #356488;
1189
+ --ffe-color-frost-650: #2b5a7c;
1067
1190
  --ffe-color-frost-700: #234f71;
1068
1191
  --ffe-color-frost-800: #163853;
1069
- --ffe-color-sand-0: #fdf8f5;
1192
+ --ffe-color-sand-25: #fcf4ee;
1070
1193
  --ffe-color-syrin-25: #eaeaf6;
1071
1194
  --ffe-color-syrin-50: #e6e6f4;
1072
1195
  --ffe-color-syrin-75: #dcdcef;
@@ -1075,8 +1198,6 @@ html,
1075
1198
  --ffe-color-syrin-200: #c1c1dc;
1076
1199
  --ffe-color-syrin-250: #bcb8d5;
1077
1200
  --ffe-color-syrin-300: #b4aecb;
1078
- --ffe-color-syrin-350: #a9a4c1;
1079
- --ffe-color-syrin-400: #a39db9;
1080
1201
  --ffe-color-syrin-450: #948ba7;
1081
1202
  --ffe-color-syrin-500: #817792;
1082
1203
  --ffe-color-syrin-550: #6a627f;
@@ -1116,21 +1237,44 @@ html,
1116
1237
  --ffe-color-sol-650: #753500;
1117
1238
  --ffe-color-sol-700: #682c00;
1118
1239
  --ffe-color-sol-750: #582400;
1240
+ --ffe-color-gray-25: #f0f0f0;
1119
1241
  --ffe-color-gray-50: #e5e5e5;
1242
+ --ffe-color-gray-100: #d6d6d6;
1243
+ --ffe-color-gray-150: #c2c2c2;
1120
1244
  --ffe-color-gray-250: #adadad;
1121
- --ffe-color-gray-350: #999999;
1245
+ --ffe-color-gray-300: #a4a4a4;
1122
1246
  --ffe-color-gray-400: #8f8f8f;
1123
- --ffe-color-gray-600: #666666;
1247
+ --ffe-color-gray-500: #7a7a7a;
1124
1248
  --ffe-color-gray-650: #5c5c5c;
1125
1249
  --ffe-color-gray-700: #525252;
1126
1250
  --ffe-color-gray-750: #474747;
1127
- --ffe-color-gray-850: #333333;
1251
+ --ffe-color-gray-800: #3d3d3d;
1128
1252
  --ffe-color-gray-900: #292929;
1129
1253
  --ffe-color-gray-950: #1f1f1f;
1130
1254
  --ffe-color-gray-1000: #141414;
1131
1255
  --ffe-color-alpha-white-0: #ffffff00;
1132
- --ffe-color-alpha-white-100: #ffffff;
1133
- --ffe-color-alpha-black-100: #020a0a;
1256
+ --ffe-color-alpha-white-25: #ffffff06;
1257
+ --ffe-color-alpha-white-50: #ffffff0d;
1258
+ --ffe-color-alpha-white-75: #ffffff13;
1259
+ --ffe-color-alpha-white-100: #ffffff1a;
1260
+ --ffe-color-alpha-white-200: #ffffff33;
1261
+ --ffe-color-alpha-white-300: #ffffff4d;
1262
+ --ffe-color-alpha-white-400: #ffffff66;
1263
+ --ffe-color-alpha-white-500: #ffffff80;
1264
+ --ffe-color-alpha-white-600: #ffffff99;
1265
+ --ffe-color-alpha-white-700: #ffffffb2;
1266
+ --ffe-color-alpha-white-1000: #ffffff;
1267
+ --ffe-color-alpha-black-25: #020a0a06;
1268
+ --ffe-color-alpha-black-50: #020a0a0d;
1269
+ --ffe-color-alpha-black-75: #020a0a13;
1270
+ --ffe-color-alpha-black-100: #020a0a1a;
1271
+ --ffe-color-alpha-black-200: #020a0a33;
1272
+ --ffe-color-alpha-black-300: #020a0a4d;
1273
+ --ffe-color-alpha-black-400: #020a0a66;
1274
+ --ffe-color-alpha-black-500: #020a0a80;
1275
+ --ffe-color-alpha-black-1000: #020a0a;
1276
+ --ffe-color-alpha-water-100: #005aa41a;
1277
+ --ffe-color-alpha-water-200: #005aa433;
1134
1278
  }
1135
1279
  /**
1136
1280
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
@@ -1638,6 +1782,7 @@ html,
1638
1782
  :root,
1639
1783
  :host {
1640
1784
  /* Form element borders */
1785
+ --ffe-g-border-radius-sm: 4px;
1641
1786
  --ffe-g-border-radius: 8px;
1642
1787
  --ffe-g-border-radius-lg: 16px;
1643
1788
  --ffe-g-border-width: 1px;