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