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