@sb1/ffe-core 29.2.0 → 29.4.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 +782 -0
  2. package/css/ffe.css +775 -1
  3. package/es/tsconfig.esm.tsbuildinfo +1 -1
  4. package/less/colors-semantic-storybook.less +256 -0
  5. package/less/colors-semantic.less +782 -0
  6. package/less/ffe.less +1 -0
  7. package/less/theme.less +3 -1
  8. package/lib/tsconfig.cjs.tsbuildinfo +1 -1
  9. package/package.json +4 -3
  10. package/types/tsconfig.types.tsbuildinfo +1 -1
package/css/ffe.css CHANGED
@@ -386,6 +386,778 @@ html,
386
386
  font: -apple-system-body;
387
387
  }
388
388
  }
389
+ .accent {
390
+ --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
391
+ --ffe-color-background-subtle: var(--ffe-color-accent-neutral-sublest);
392
+ --ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
393
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
394
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
395
+ --ffe-color-surface-secondary-default: var(--ffe-color-accent-brand-secondary-default);
396
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-subtle);
397
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-subtler);
398
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
399
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
400
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
401
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
402
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
403
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
404
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
405
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
406
+ --ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-medium);
407
+ --ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-strong);
408
+ --ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-stronger);
409
+ --ffe-color-fill-primary-selected: var(--ffe-color-accent-brand-primary-strongest);
410
+ --ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtlest);
411
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtler);
412
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-subtle);
413
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
414
+ --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
415
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
416
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
417
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtle);
418
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-default);
419
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-strongest);
420
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
421
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
422
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
423
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
424
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
425
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
426
+ --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
427
+ --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
428
+ --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
429
+ --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
430
+ --ffe-color-fill-feedback-tip: var(--ffe-color-accent-brand-tertiary-stronger);
431
+ --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
432
+ --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
433
+ --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
434
+ --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
435
+ --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
436
+ --ffe-color-border-primary-selected: var(--ffe-color-speciality-static-accent-medium);
437
+ --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
438
+ --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
439
+ --ffe-color-border-secondary-pressed: var(--ffe-color-natt-600);
440
+ --ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-default);
441
+ --ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-medium);
442
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-strong);
443
+ --ffe-color-border-interactive-focus: var(--ffe-color-gray-white);
444
+ --ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
445
+ --ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
446
+ --ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
447
+ --ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
448
+ --ffe-color-border-feedback-tip: var(--ffe-color-accent-brand-tertiary-strong);
449
+ --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
450
+ --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-stronger);
451
+ --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
452
+ --ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
453
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
454
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
455
+ --ffe-color-foreground-interactive-link: var(--ffe-color-speciality-static-accent-subtler);
456
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-speciality-static-accent-subtle);
457
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-speciality-static-accent-default);
458
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
459
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
460
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
461
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
462
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
463
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-subtle);
464
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-default);
465
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-medium);
466
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-strong);
467
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-stronger);
468
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-strongest);
469
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-accent-neutral-inverted);
470
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-accent-neutral-inverted);
471
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-primary-medium);
472
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-default);
473
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-stronger);
474
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-accent-brand-primary-strong);
475
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
476
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-accent-brand-primary-strongest);
477
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-accent-neutral-inverted);
478
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-accent-neutral-inverted);
479
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-accent-brand-primary-strong);
480
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-accent-brand-primary-stronger);
481
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-accent-brand-primary-strongest);
482
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
483
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
484
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
485
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
486
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
487
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-speciality-background-accent);
488
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
489
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
490
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-fill-primary-invisible);
491
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
492
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
493
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
494
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
495
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
496
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-accent-brand-primary-subtlest);
497
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-accent-brand-primary-subtler);
498
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-accent-neutral-strongest);
499
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-accent-neutral-strongest);
500
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-accent-brand-primary-strongest);
501
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-accent-brand-primary-stronger);
502
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-accent-brand-primary-strong);
503
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-accent-brand-primary-strongest);
504
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-accent-brand-primary-stronger);
505
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-accent-brand-primary-strong);
506
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-accent-neutral-inverted);
507
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-accent-neutral-inverted);
508
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-speciality-static-accent-subtler);
509
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-speciality-static-accent-medium);
510
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-speciality-static-accent-medium);
511
+ --ffe-color-component-form-input-border-default: var(--ffe-color-accent-neutral-default);
512
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-accent-neutral-stronger);
513
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-accent-neutral-stronger);
514
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-accent-neutral-subtle);
515
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-accent-neutral-strongest);
516
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-accent-neutral-strongest);
517
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-accent-neutral-sublest);
518
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-accent-brand-primary-subtle);
519
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-accent-brand-primary-default);
520
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-accent-brand-primary-subtler);
521
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
522
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-accent-brand-primary-medium);
523
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-accent-brand-primary-default);
524
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-accent-brand-primary-medium);
525
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strong);
526
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-accent-feedback-critical-strongest);
527
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-accent-neutral-strongest);
528
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-accent-neutral-stronger);
529
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-accent-neutral-strongest);
530
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-accent-neutral-sublest);
531
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-accent-neutral-subtle);
532
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-accent-neutral-medium);
533
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-accent-neutral-strong);
534
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-accent-brand-primary-strong);
535
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-accent-brand-primary-stronger);
536
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-brand-primary-strongest);
537
+ --ffe-color-component-logo-name: var(--ffe-color-gray-white);
538
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
539
+ --ffe-color-component-logo-circle-dark-red: #af0000;
540
+ --ffe-color-component-logo-circle-light-red: #e60000;
541
+ }
542
+ :root,
543
+ :host {
544
+ --ffe-color-background-default: var(--ffe-color-speciality-background-default);
545
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
546
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
547
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
548
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
549
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
550
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
551
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
552
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
553
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
554
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
555
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
556
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
557
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
558
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
559
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
560
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
561
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
562
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
563
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
564
+ --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
565
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
566
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
567
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
568
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
569
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
570
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
571
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
572
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
573
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
574
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
575
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
576
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
577
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
578
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
579
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
580
+ --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
581
+ --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
582
+ --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
583
+ --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
584
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
585
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
586
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
587
+ --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
588
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
589
+ --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
590
+ --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
591
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
592
+ --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
593
+ --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
594
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
595
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
596
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
597
+ --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
598
+ --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
599
+ --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
600
+ --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
601
+ --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
602
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
603
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
604
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
605
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
606
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
607
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
608
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
609
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
610
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
611
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
612
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
613
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
614
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
615
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
616
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
617
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
618
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
619
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
620
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
621
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
622
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
623
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
624
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
625
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
626
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
627
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
628
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
629
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
630
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
631
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
632
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
633
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
634
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
635
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
636
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
637
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
638
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
639
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
640
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
641
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
642
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
643
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
644
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
645
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
646
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
647
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
648
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
649
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
650
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
651
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
652
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
653
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
654
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
655
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
656
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
657
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
658
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
659
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
660
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
661
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
662
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
663
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
664
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
665
+ --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
666
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
667
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
668
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
669
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
670
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
671
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
672
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
673
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
674
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
675
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
676
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
677
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
678
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
679
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
680
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
681
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
682
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
683
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
684
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
685
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
686
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
687
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
688
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
689
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
690
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
691
+ --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
692
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
693
+ --ffe-color-component-logo-circle-dark-red: #af0000;
694
+ --ffe-color-component-logo-circle-light-red: #e60000;
695
+ }
696
+ :root,
697
+ :host {
698
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-50);
699
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-150);
700
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-250);
701
+ --ffe-color-default-brand-primary-default: var(--ffe-color-vann-350);
702
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-vann-500);
703
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
704
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
705
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
706
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-25);
707
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
708
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
709
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
710
+ --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
711
+ --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
712
+ --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
713
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
714
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
715
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
716
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
717
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
718
+ --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
719
+ --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-300);
720
+ --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-400);
721
+ --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
722
+ --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
723
+ --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
724
+ --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
725
+ --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
726
+ --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
727
+ --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
728
+ --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
729
+ --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
730
+ --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
731
+ --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
732
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
733
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
734
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
735
+ --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
736
+ --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
737
+ --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
738
+ --ffe-color-default-neutral-sublest: var(--ffe-color-gray-white);
739
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
740
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
741
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-300);
742
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
743
+ --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
744
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
745
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-white);
746
+ --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
747
+ --ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
748
+ --ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
749
+ --ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
750
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-alpha-white-15);
751
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-alpha-white-20);
752
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-alpha-white-30);
753
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-alpha-white-50);
754
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-alpha-white-60);
755
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-alpha-white-70);
756
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-alpha-white-80);
757
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-alpha-white-90);
758
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
759
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
760
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
761
+ --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
762
+ --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
763
+ --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-25);
764
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-500);
765
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-400);
766
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
767
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
768
+ --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
769
+ --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
770
+ --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
771
+ --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
772
+ --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
773
+ --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
774
+ --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
775
+ --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
776
+ --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
777
+ --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
778
+ --ffe-color-accent-neutral-sublest: var(--ffe-color-vann-600);
779
+ --ffe-color-accent-neutral-subtler: var(--ffe-color-vann-550);
780
+ --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
781
+ --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
782
+ --ffe-color-accent-neutral-default: var(--ffe-color-vann-150);
783
+ --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
784
+ --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
785
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
786
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
787
+ --ffe-color-speciality-background-default: var(--ffe-default-neutral-sublest);
788
+ --ffe-color-speciality-background-subtle: var(--ffe-default-brand-subtle-subtler);
789
+ --ffe-color-speciality-background-accent: var(--ffe-color-vann-600);
790
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-white);
791
+ --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
792
+ --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
793
+ --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
794
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
795
+ --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
796
+ --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
797
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
798
+ --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
799
+ }
800
+ @media (prefers-color-scheme: dark) {
801
+ :where(.regard-color-scheme-preference) {
802
+ --ffe-color-default-brand-primary-subtlest: var(--ffe-color-natt-700);
803
+ --ffe-color-default-brand-primary-subtler: var(--ffe-color-natt-600);
804
+ --ffe-color-default-brand-primary-subtle: var(--ffe-color-natt-500);
805
+ --ffe-color-default-brand-primary-default: var(--ffe-color-natt-400);
806
+ --ffe-color-default-brand-primary-medium: var(--ffe-color-natt-300);
807
+ --ffe-color-default-brand-primary-strong: var(--ffe-color-natt-200);
808
+ --ffe-color-default-brand-primary-stronger: var(--ffe-color-natt-100);
809
+ --ffe-color-default-brand-primary-strongest: var(--ffe-color-natt-50);
810
+ --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
811
+ --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
812
+ --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
813
+ --ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-400);
814
+ --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
815
+ --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
816
+ --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
817
+ --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
818
+ --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
819
+ --ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-350);
820
+ --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
821
+ --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
822
+ --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
823
+ --ffe-color-default-brand-emphasis-default: var(--ffe-color-vann-600);
824
+ --ffe-color-default-brand-emphasis-medium: var(--ffe-color-vann-500);
825
+ --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
826
+ --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
827
+ --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
828
+ --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
829
+ --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
830
+ --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
831
+ --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
832
+ --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
833
+ --ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
834
+ --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
835
+ --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
836
+ --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
837
+ --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
838
+ --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
839
+ --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
840
+ --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
841
+ --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
842
+ --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
843
+ --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
844
+ --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
845
+ --ffe-color-default-neutral-default: var(--ffe-color-gray-450);
846
+ --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
847
+ --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
848
+ --ffe-color-default-neutral-strongest: var(--ffe-color-gray-white);
849
+ --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
850
+ --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
851
+ --ffe-color-default-interactive-hover: var(--ffe-color-natt-100);
852
+ --ffe-color-default-interactive-pressed: var(--ffe-color-natt-50);
853
+ --ffe-color-default-interactive-focus: var(--ffe-color-gray-white);
854
+ --ffe-color-accent-brand-primary-subtlest: var(--ffe-color-natt-700);
855
+ --ffe-color-accent-brand-primary-subtler: var(--ffe-color-natt-600);
856
+ --ffe-color-accent-brand-primary-subtle: var(--ffe-color-natt-500);
857
+ --ffe-color-accent-brand-primary-default: var(--ffe-color-natt-400);
858
+ --ffe-color-accent-brand-primary-medium: var(--ffe-color-natt-300);
859
+ --ffe-color-accent-brand-primary-strong: var(--ffe-color-natt-200);
860
+ --ffe-color-accent-brand-primary-stronger: var(--ffe-color-natt-100);
861
+ --ffe-color-accent-brand-primary-strongest: var(--ffe-color-natt-50);
862
+ --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
863
+ --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
864
+ --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
865
+ --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
866
+ --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
867
+ --ffe-color-accent-brand-secondary-strongest: var(--ffe-color-frost-100);
868
+ --ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-450);
869
+ --ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-350);
870
+ --ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-250);
871
+ --ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-150);
872
+ --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
873
+ --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
874
+ --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
875
+ --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
876
+ --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
877
+ --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
878
+ --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
879
+ --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
880
+ --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
881
+ --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
882
+ --ffe-color-accent-neutral-sublest: var(--ffe-color-gray-850);
883
+ --ffe-color-accent-neutral-subtler: var(--ffe-color-gray-750);
884
+ --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
885
+ --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
886
+ --ffe-color-accent-neutral-default: var(--ffe-color-gray-450);
887
+ --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
888
+ --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
889
+ --ffe-color-accent-neutral-strongest: var(--ffe-color-gray-white);
890
+ --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
891
+ --ffe-color-speciality-background-default: var(--ffe-color-gray-1000);
892
+ --ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
893
+ --ffe-color-speciality-background-accent: var(--ffe-color-gray-900);
894
+ --ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
895
+ --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
896
+ --ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
897
+ --ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
898
+ --ffe-color-speciality-static-neutral-white: var(--ffe-color-gray-white);
899
+ --ffe-color-speciality-static-accent-subtle: var(--ffe-color-vann-150);
900
+ --ffe-color-speciality-static-accent-subtler: var(--ffe-color-vann-75);
901
+ --ffe-color-speciality-static-accent-default: var(--ffe-color-gray-white);
902
+ --ffe-color-speciality-static-accent-medium: var(--ffe-color-vann-500);
903
+ --ffe-color-background-default: var(--ffe-color-speciality-background-default);
904
+ --ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
905
+ --ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-default);
906
+ --ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
907
+ --ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
908
+ --ffe-color-surface-secondary-default: var(--ffe-color-default-brand-secondary-subtle);
909
+ --ffe-color-surface-secondary-hover: var(--ffe-color-default-brand-secondary-default);
910
+ --ffe-color-surface-secondary-pressed: var(--ffe-color-default-brand-secondary-medium);
911
+ --ffe-color-surface-tertiary-default: var(--ffe-color-default-brand-tertiary-subtle);
912
+ --ffe-color-surface-tertiary-hover: var(--ffe-color-default-brand-tertiary-default);
913
+ --ffe-color-surface-tertiary-pressed: var(--ffe-color-default-brand-tertiary-medium);
914
+ --ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
915
+ --ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
916
+ --ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
917
+ --ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
918
+ --ffe-color-surface-feedback-tip: var(--ffe-color-default-brand-tertiary-subtle);
919
+ --ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-medium);
920
+ --ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-strong);
921
+ --ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-stronger);
922
+ --ffe-color-fill-primary-selected: var(--ffe-color-default-brand-primary-strongest);
923
+ --ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
924
+ --ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
925
+ --ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
926
+ --ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
927
+ --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
928
+ --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
929
+ --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
930
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtle);
931
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-default);
932
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-medium);
933
+ --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
934
+ --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
935
+ --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
936
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
937
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
938
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
939
+ --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
940
+ --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
941
+ --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
942
+ --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
943
+ --ffe-color-fill-feedback-tip: var(--ffe-color-default-brand-tertiary-stronger);
944
+ --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
945
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
946
+ --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
947
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
948
+ --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
949
+ --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
950
+ --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
951
+ --ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
952
+ --ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
953
+ --ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
954
+ --ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-stronger);
955
+ --ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-strongest);
956
+ --ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
957
+ --ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
958
+ --ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
959
+ --ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
960
+ --ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
961
+ --ffe-color-border-feedback-tip: var(--ffe-color-default-brand-tertiary-strong);
962
+ --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
963
+ --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
964
+ --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
965
+ --ffe-color-foreground-inverse: var(--ffe-color-default-neutral-sublest);
966
+ --ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
967
+ --ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
968
+ --ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
969
+ --ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
970
+ --ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
971
+ --ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
972
+ --ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
973
+ --ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
974
+ --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
975
+ --ffe-color-foreground-feedback-tip: var(--ffe-color-default-brand-tertiary-strongest);
976
+ --ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-strong);
977
+ --ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-stronger);
978
+ --ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-strongest);
979
+ --ffe-color-component-button-action-fill-default: var(--ffe-color-default-feedback-success-strong);
980
+ --ffe-color-component-button-action-fill-hover: var(--ffe-color-default-feedback-success-stronger);
981
+ --ffe-color-component-button-action-fill-pressed: var(--ffe-color-default-feedback-success-strongest);
982
+ --ffe-color-component-button-action-foreground-default: var(--ffe-color-default-neutral-inverted);
983
+ --ffe-color-component-button-action-foreground-hover: var(--ffe-color-default-neutral-sublest);
984
+ --ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-primary-strong);
985
+ --ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-primary-stronger);
986
+ --ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
987
+ --ffe-color-component-button-primary-fill-default: var(--ffe-color-default-brand-primary-strong);
988
+ --ffe-color-component-button-primary-fill-hover: var(--ffe-color-default-brand-primary-stronger);
989
+ --ffe-color-component-button-primary-fill-pressed: var(--ffe-color-default-brand-primary-strongest);
990
+ --ffe-color-component-button-primary-foreground-default: var(--ffe-color-default-neutral-inverted);
991
+ --ffe-color-component-button-primary-foreground-hover: var(--ffe-color-default-neutral-sublest);
992
+ --ffe-color-component-button-secondary-border-default: var(--ffe-color-default-brand-primary-strong);
993
+ --ffe-color-component-button-secondary-border-hover: var(--ffe-color-default-brand-primary-stronger);
994
+ --ffe-color-component-button-secondary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
995
+ --ffe-color-component-button-secondary-fill-default: var(--ffe-color-fill-primary-invisible);
996
+ --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
997
+ --ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
998
+ --ffe-color-component-button-secondary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
999
+ --ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1000
+ --ffe-color-component-button-tertiary-border-default: var(--ffe-color-default-brand-primary-default);
1001
+ --ffe-color-component-button-tertiary-border-hover: var(--ffe-color-default-brand-primary-stronger);
1002
+ --ffe-color-component-button-tertiary-border-pressed: var(--ffe-color-default-brand-primary-strongest);
1003
+ --ffe-color-component-button-tertiary-fill-default: var(--ffe-color-background-default);
1004
+ --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-default-brand-primary-subtlest);
1005
+ --ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-default-brand-primary-subtler);
1006
+ --ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-default-brand-emphasis-strongest);
1007
+ --ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-default-brand-emphasis-strongest);
1008
+ --ffe-color-component-chips-default-fill-default: var(--ffe-color-fill-primary-invisible);
1009
+ --ffe-color-component-chips-default-fill-hover: var(--ffe-color-default-brand-primary-subtler);
1010
+ --ffe-color-component-chips-default-fill-pressed: var(--ffe-color-default-brand-primary-subtle);
1011
+ --ffe-color-component-chips-default-foreground-default: var(--ffe-color-default-neutral-strongest);
1012
+ --ffe-color-component-chips-default-foreground-hover: var(--ffe-color-default-neutral-strongest);
1013
+ --ffe-color-component-chips-default-border-default: var(--ffe-color-default-brand-primary-strongest);
1014
+ --ffe-color-component-chips-default-border-hover: var(--ffe-color-default-brand-primary-stronger);
1015
+ --ffe-color-component-chips-default-border-pressed: var(--ffe-color-default-brand-primary-strong);
1016
+ --ffe-color-component-chips-selected-fill-default: var(--ffe-color-default-brand-primary-strongest);
1017
+ --ffe-color-component-chips-selected-fill-hover: var(--ffe-color-default-brand-primary-stronger);
1018
+ --ffe-color-component-chips-selected-fill-pressed: var(--ffe-color-default-brand-primary-strong);
1019
+ --ffe-color-component-chips-selected-foreground-default: var(--ffe-color-default-neutral-inverted);
1020
+ --ffe-color-component-chips-selected-foreground-hover: var(--ffe-color-default-neutral-inverted);
1021
+ --ffe-color-component-chips-selected-border-default: var(--ffe-color-default-brand-primary-strong);
1022
+ --ffe-color-component-chips-selected-border-hover: var(--ffe-color-default-brand-primary-stronger);
1023
+ --ffe-color-component-chips-selected-border-pressed: var(--ffe-color-default-brand-primary-strongest);
1024
+ --ffe-color-component-form-input-border-default: var(--ffe-color-default-neutral-default);
1025
+ --ffe-color-component-form-input-border-hover: var(--ffe-color-default-neutral-strong);
1026
+ --ffe-color-component-form-input-border-pressed: var(--ffe-color-default-neutral-strong);
1027
+ --ffe-color-component-form-input-border-subtle: var(--ffe-color-default-neutral-subtle);
1028
+ --ffe-color-component-form-input-border-emphasis: var(--ffe-color-default-brand-emphasis-default);
1029
+ --ffe-color-component-form-input-border-selected: var(--ffe-color-default-brand-primary-default);
1030
+ --ffe-color-component-form-input-fill-default: var(--ffe-color-speciality-background-surface-default);
1031
+ --ffe-color-component-form-input-fill-default-hover: var(--ffe-color-speciality-background-surface-default-hover);
1032
+ --ffe-color-component-form-input-fill-default-pressed: var(--ffe-color-speciality-background-surface-default-pressed);
1033
+ --ffe-color-component-form-input-fill-subtle: var(--ffe-color-default-brand-primary-subtle);
1034
+ --ffe-color-component-form-input-fill-subtle-hover: var(--ffe-color-default-brand-emphasis-medium);
1035
+ --ffe-color-component-form-input-fill-subtle-pressed: var(--ffe-color-default-brand-primary-default);
1036
+ --ffe-color-component-form-input-fill-selected: var(--ffe-color-default-brand-primary-default);
1037
+ --ffe-color-component-form-input-fill-selected-hover: var(--ffe-color-default-brand-primary-strong);
1038
+ --ffe-color-component-form-input-fill-selected-pressed: var(--ffe-color-default-brand-primary-stronger);
1039
+ --ffe-color-component-form-input-fill-error: var(--ffe-color-default-feedback-critical-subtlest);
1040
+ --ffe-color-component-form-input-foreground-on-fill-default: var(--ffe-color-default-neutral-strongest);
1041
+ --ffe-color-component-form-input-foreground-on-fill-subtle: var(--ffe-color-default-neutral-strong);
1042
+ --ffe-color-component-form-input-foreground-on-fill-selected: var(--ffe-color-default-neutral-sublest);
1043
+ --ffe-color-component-form-toggleswitch-handle-default: var(--ffe-color-default-neutral-sublest);
1044
+ --ffe-color-component-form-toggleswitch-fill-default: var(--ffe-color-default-neutral-subtle);
1045
+ --ffe-color-component-form-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-medium);
1046
+ --ffe-color-component-form-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-strong);
1047
+ --ffe-color-component-form-toggleswitch-fill-selected: var(--ffe-color-default-brand-primary-strong);
1048
+ --ffe-color-component-form-toggleswitch-fill-selected-hover: var(--ffe-color-default-brand-primary-stronger);
1049
+ --ffe-color-component-form-toggleswitch-fill-selected-pressed: var(--ffe-color-default-brand-primary-strongest);
1050
+ --ffe-color-component-logo-name: var(--ffe-color-default-brand-emphasis-strongest);
1051
+ --ffe-color-component-logo-number1: var(--ffe-color-gray-white);
1052
+ --ffe-color-component-logo-circle-dark-red: #af0000;
1053
+ --ffe-color-component-logo-circle-light-red: #e60000;
1054
+ }
1055
+ }
1056
+ :root,
1057
+ :host {
1058
+ --ffe-color-vann-25: #e7f1f9;
1059
+ --ffe-color-vann-50: #d7e7f4;
1060
+ --ffe-color-vann-75: #cfe2f2;
1061
+ --ffe-color-vann-150: #b6d1ec;
1062
+ --ffe-color-vann-250: #8eb8e1;
1063
+ --ffe-color-vann-300: #7dabd9;
1064
+ --ffe-color-vann-350: #6ba1d6;
1065
+ --ffe-color-vann-400: #5494d4;
1066
+ --ffe-color-vann-500: #2975c2;
1067
+ --ffe-color-vann-550: #1566b2;
1068
+ --ffe-color-vann-600: #005aa4;
1069
+ --ffe-color-vann-700: #073f83;
1070
+ --ffe-color-vann-800: #022d74;
1071
+ --ffe-color-vann-1000: #070d27;
1072
+ --ffe-color-natt-50: #dfe6f1;
1073
+ --ffe-color-natt-100: #c9d5e8;
1074
+ --ffe-color-natt-200: #acbfdc;
1075
+ --ffe-color-natt-300: #90a9d0;
1076
+ --ffe-color-natt-400: #748db4;
1077
+ --ffe-color-natt-500: #55709b;
1078
+ --ffe-color-natt-600: #3e5579;
1079
+ --ffe-color-natt-700: #2e405c;
1080
+ --ffe-color-frost-25: #e5f0f5;
1081
+ --ffe-color-frost-50: #dceaef;
1082
+ --ffe-color-frost-75: #cbe2eb;
1083
+ --ffe-color-frost-100: #c3dfea;
1084
+ --ffe-color-frost-150: #b6d7e7;
1085
+ --ffe-color-frost-200: #a6cee2;
1086
+ --ffe-color-frost-250: #95c3db;
1087
+ --ffe-color-frost-300: #7eb5d2;
1088
+ --ffe-color-frost-350: #73a5c4;
1089
+ --ffe-color-frost-400: #6795b6;
1090
+ --ffe-color-frost-450: #5988ab;
1091
+ --ffe-color-frost-500: #4a799c;
1092
+ --ffe-color-frost-550: #406e91;
1093
+ --ffe-color-frost-600: #386485;
1094
+ --ffe-color-frost-700: #284e6c;
1095
+ --ffe-color-frost-800: #193850;
1096
+ --ffe-color-syrin-50: #e6e6f4;
1097
+ --ffe-color-syrin-75: #dcdcef;
1098
+ --ffe-color-syrin-100: #d3d3ea;
1099
+ --ffe-color-syrin-150: #cacae3;
1100
+ --ffe-color-syrin-200: #c3c3da;
1101
+ --ffe-color-syrin-250: #b6b6cd;
1102
+ --ffe-color-syrin-300: #aaaac0;
1103
+ --ffe-color-syrin-350: #a2a2b9;
1104
+ --ffe-color-syrin-400: #9996ab;
1105
+ --ffe-color-syrin-450: #8c88a0;
1106
+ --ffe-color-syrin-500: #79748b;
1107
+ --ffe-color-syrin-550: #686477;
1108
+ --ffe-color-syrin-700: #474457;
1109
+ --ffe-color-baer-50: #ffd7d1;
1110
+ --ffe-color-baer-100: #ffaea8;
1111
+ --ffe-color-baer-200: #ff7f7a;
1112
+ --ffe-color-baer-300: #ff5e5c;
1113
+ --ffe-color-baer-500: #c62a2f;
1114
+ --ffe-color-baer-700: #7c1214;
1115
+ --ffe-color-baer-800: #640e10;
1116
+ --ffe-color-skog-50: #cbf0df;
1117
+ --ffe-color-skog-100: #b2e6cd;
1118
+ --ffe-color-skog-200: #8fd1b1;
1119
+ --ffe-color-skog-300: #6abe97;
1120
+ --ffe-color-skog-400: #48a781;
1121
+ --ffe-color-skog-500: #2e8b64;
1122
+ --ffe-color-skog-550: #2a7e5b;
1123
+ --ffe-color-skog-600: #00754e;
1124
+ --ffe-color-skog-650: #0d6346;
1125
+ --ffe-color-skog-750: #0a4d37;
1126
+ --ffe-color-skog-800: #0a4330;
1127
+ --ffe-color-sol-50: #ffe0b2;
1128
+ --ffe-color-sol-100: #ffc675;
1129
+ --ffe-color-sol-150: #ffb64d;
1130
+ --ffe-color-sol-200: #f6ac3c;
1131
+ --ffe-color-sol-250: #f49f1f;
1132
+ --ffe-color-sol-500: #a95704;
1133
+ --ffe-color-sol-700: #682c00;
1134
+ --ffe-color-sol-750: #582400;
1135
+ --ffe-color-gray-100: #cccccc;
1136
+ --ffe-color-gray-150: #c2c2c2;
1137
+ --ffe-color-gray-200: #b8b8b8;
1138
+ --ffe-color-gray-250: #adadad;
1139
+ --ffe-color-gray-300: #a4a4a4;
1140
+ --ffe-color-gray-450: #858585;
1141
+ --ffe-color-gray-550: #707070;
1142
+ --ffe-color-gray-600: #666666;
1143
+ --ffe-color-gray-650: #5c5c5c;
1144
+ --ffe-color-gray-700: #525252;
1145
+ --ffe-color-gray-750: #474747;
1146
+ --ffe-color-gray-850: #333333;
1147
+ --ffe-color-gray-900: #292929;
1148
+ --ffe-color-gray-950: #1f1f1f;
1149
+ --ffe-color-gray-1000: #141414;
1150
+ --ffe-color-gray-white: #ffffff;
1151
+ --ffe-color-alpha-white-0: #ffffff00;
1152
+ --ffe-color-alpha-white-15: #ffffff26;
1153
+ --ffe-color-alpha-white-20: #ffffff33;
1154
+ --ffe-color-alpha-white-30: #ffffff4d;
1155
+ --ffe-color-alpha-white-50: #ffffff80;
1156
+ --ffe-color-alpha-white-60: #ffffff99;
1157
+ --ffe-color-alpha-white-70: #ffffffb2;
1158
+ --ffe-color-alpha-white-80: #ffffffcc;
1159
+ --ffe-color-alpha-white-90: #ffffffe5;
1160
+ }
389
1161
  /**
390
1162
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
391
1163
  */
@@ -493,7 +1265,9 @@ html,
493
1265
  /** Theme borders */
494
1266
  /* Form element borders */
495
1267
  --ffe-g-border-color: var(--ffe-farge-varmgraa);
496
- --ffe-g-border-radius: 4px;
1268
+ --ffe-g-border-radius: 8px;
1269
+ --ffe-g-border-width: 1px;
1270
+ --ffe-g-border-width-focus: 2px;
497
1271
  /** Fonts */
498
1272
  /* Default font */
499
1273
  --ffe-g-font: 'SpareBank1-regular', arial, sans-serif;