@entur/menu 4.2.38 → 4.2.39-beta.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 (2) hide show
  1. package/dist/styles.css +482 -482
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -441,348 +441,6 @@
441
441
  }
442
442
  /* DO NOT CHANGE!*/
443
443
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
444
- /* DO NOT CHANGE!*/
445
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
446
- /* DO NOT CHANGE!*/
447
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
448
- [data-color-mode=light],
449
- :root {
450
- --components-menu-breadcrumb-contrast-icon: #ffffff;
451
- --components-menu-breadcrumb-contrast-text: #ffffff;
452
- --components-menu-breadcrumb-standard-icon: #181c56;
453
- --components-menu-breadcrumb-standard-text: #181c56;
454
- --components-menu-navigationbar-contrast-background: #393d79;
455
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
456
- --components-menu-navigationbar-contrast-icon-selected: #ffffff;
457
- --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
458
- --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
459
- --components-menu-navigationbar-contrast-text-selected: #ffffff;
460
- --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
461
- --components-menu-navigationbar-standard-background: #ffffff;
462
- --components-menu-navigationbar-standard-divide: #e3e6e8;
463
- --components-menu-navigationbar-standard-icon-selected: #181c56;
464
- --components-menu-navigationbar-standard-icon-unselected: #626493;
465
- --components-menu-navigationbar-standard-stroke-selected: #ff5959;
466
- --components-menu-navigationbar-standard-text-selected: #181c56;
467
- --components-menu-navigationbar-standard-text-unselected: #626493;
468
- --components-menu-navigationlink-contrast-icon: #ffffff;
469
- --components-menu-navigationlink-contrast-text: #ffffff;
470
- --components-menu-navigationlink-standard-icon: #181c56;
471
- --components-menu-navigationlink-standard-text: #181c56;
472
- --components-menu-overflowmenu-border: #8284ab;
473
- --components-menu-overflowmenu-fill-default: #f2f5f7;
474
- --components-menu-overflowmenu-fill-hover: #d9dae8;
475
- --components-menu-overflowmenu-fill-selected: #181c56;
476
- --components-menu-overflowmenu-icon: #181c56;
477
- --components-menu-overflowmenu-icon-disabled: #6e6f73;
478
- --components-menu-overflowmenu-text: #181c56;
479
- --components-menu-overflowmenu-text-disabled: #6e6f73;
480
- --components-menu-overflowmenu-text-selected: #ffffff;
481
- --components-menu-pagination-contrast-active: #8794d4;
482
- --components-menu-pagination-contrast-border-selected: #ffffff;
483
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
484
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
485
- --components-menu-pagination-contrast-hover: #626493;
486
- --components-menu-pagination-contrast-icon: #ffffff;
487
- --components-menu-pagination-contrast-text-selected: #181c56;
488
- --components-menu-pagination-contrast-text-subdued: #d9dae8;
489
- --components-menu-pagination-contrast-text-unselected: #ffffff;
490
- --components-menu-pagination-standard-active: #aeb7e2;
491
- --components-menu-pagination-standard-border-selected: #181c56;
492
- --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
493
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
494
- --components-menu-pagination-standard-hover: #d9ddf2;
495
- --components-menu-pagination-standard-icon: #181c56;
496
- --components-menu-pagination-standard-text-selected: #181c56;
497
- --components-menu-pagination-standard-text-subdued: #626493;
498
- --components-menu-pagination-standard-text-unselected: #181c56;
499
- --components-menu-sidenavigation-contrast-avatar: #393d79;
500
- --components-menu-sidenavigation-contrast-background: #181c56;
501
- --components-menu-sidenavigation-contrast-divide: #8284ab;
502
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
503
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
504
- --components-menu-sidenavigation-contrast-fill-hover: #393d79;
505
- --components-menu-sidenavigation-contrast-icon: #ffffff;
506
- --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
507
- --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
508
- --components-menu-sidenavigation-contrast-label: #aeb7e2;
509
- --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
510
- --components-menu-sidenavigation-contrast-text: #ffffff;
511
- --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
512
- --components-menu-sidenavigation-standard-avatar: #ffffff;
513
- --components-menu-sidenavigation-standard-background: #f2f5f7;
514
- --components-menu-sidenavigation-standard-divide: #e3e6e8;
515
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
516
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
517
- --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
518
- --components-menu-sidenavigation-standard-icon: #181c56;
519
- --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
520
- --components-menu-sidenavigation-standard-icon-label: #626493;
521
- --components-menu-sidenavigation-standard-label: #626493;
522
- --components-menu-sidenavigation-standard-stroke-selected: #181c56;
523
- --components-menu-sidenavigation-standard-text: #181c56;
524
- --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
525
- --components-menu-stepper-contrast-background: #626493;
526
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
527
- --components-menu-stepper-contrast-text-completed: #ffffff;
528
- --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
529
- --components-menu-stepper-standard-background: #e3e6e8;
530
- --components-menu-stepper-standard-progressbar: #181c56;
531
- --components-menu-stepper-standard-text-completed: #181c56;
532
- --components-menu-stepper-standard-text-uncompleted: #6e6f73;
533
- --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
534
- --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
535
- --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
536
- --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
537
- --components-menu-tableofcontent-contrast-text-selected: #ffffff;
538
- --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
539
- --components-menu-tableofcontent-standard-icon-selected: #181c56;
540
- --components-menu-tableofcontent-standard-icon-unselected: #626493;
541
- --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
542
- --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
543
- --components-menu-tableofcontent-standard-text-selected: #181c56;
544
- --components-menu-tableofcontent-standard-text-unselected: #626493;
545
- }
546
-
547
- [data-color-mode=dark] {
548
- --components-menu-breadcrumb-contrast-icon: #e5e5e9;
549
- --components-menu-breadcrumb-contrast-text: #e5e5e9;
550
- --components-menu-breadcrumb-standard-icon: #e5e5e9;
551
- --components-menu-breadcrumb-standard-text: #e5e5e9;
552
- --components-menu-navigationbar-contrast-background: #393a49;
553
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
554
- --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
555
- --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
556
- --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
557
- --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
558
- --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
559
- --components-menu-navigationbar-standard-background: #393a49;
560
- --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
561
- --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
562
- --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
563
- --components-menu-navigationbar-standard-stroke-selected: #ff9494;
564
- --components-menu-navigationbar-standard-text-selected: #e5e5e9;
565
- --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
566
- --components-menu-navigationlink-contrast-icon: #e5e5e9;
567
- --components-menu-navigationlink-contrast-text: #e5e5e9;
568
- --components-menu-navigationlink-standard-icon: #e5e5e9;
569
- --components-menu-navigationlink-standard-text: #e5e5e9;
570
- --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
571
- --components-menu-overflowmenu-fill-default: #464755;
572
- --components-menu-overflowmenu-fill-hover: #626493;
573
- --components-menu-overflowmenu-fill-selected: #8794d4;
574
- --components-menu-overflowmenu-icon: #e5e5e9;
575
- --components-menu-overflowmenu-icon-disabled: #949699;
576
- --components-menu-overflowmenu-text: #e5e5e9;
577
- --components-menu-overflowmenu-text-disabled: #949699;
578
- --components-menu-overflowmenu-text-selected: #181c56;
579
- --components-menu-pagination-contrast-active: #8794d4;
580
- --components-menu-pagination-contrast-border-selected: #e5e5e9;
581
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
582
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
583
- --components-menu-pagination-contrast-hover: #626493;
584
- --components-menu-pagination-contrast-icon: #e5e5e9;
585
- --components-menu-pagination-contrast-text-selected: #08091c;
586
- --components-menu-pagination-contrast-text-subdued: #b3b4bd;
587
- --components-menu-pagination-contrast-text-unselected: #e5e5e9;
588
- --components-menu-pagination-standard-active: #8794d4;
589
- --components-menu-pagination-standard-border-selected: #e5e5e9;
590
- --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
591
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
592
- --components-menu-pagination-standard-hover: #626493;
593
- --components-menu-pagination-standard-icon: #e5e5e9;
594
- --components-menu-pagination-standard-text-selected: #08091c;
595
- --components-menu-pagination-standard-text-subdued: #b3b4bd;
596
- --components-menu-pagination-standard-text-unselected: #e5e5e9;
597
- --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
598
- --components-menu-sidenavigation-contrast-background: #212233;
599
- --components-menu-sidenavigation-contrast-divide: #81828f;
600
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
601
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
602
- --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
603
- --components-menu-sidenavigation-contrast-icon: #e5e5e9;
604
- --components-menu-sidenavigation-contrast-icon-disabled: #949699;
605
- --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
606
- --components-menu-sidenavigation-contrast-label: #b3b4bd;
607
- --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
608
- --components-menu-sidenavigation-contrast-text: #e5e5e9;
609
- --components-menu-sidenavigation-contrast-text-disabled: #949699;
610
- --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
611
- --components-menu-sidenavigation-standard-background: #212233;
612
- --components-menu-sidenavigation-standard-divide: #81828f;
613
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
614
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
615
- --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
616
- --components-menu-sidenavigation-standard-icon: #e5e5e9;
617
- --components-menu-sidenavigation-standard-icon-disabled: #949699;
618
- --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
619
- --components-menu-sidenavigation-standard-label: #b3b4bd;
620
- --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
621
- --components-menu-sidenavigation-standard-text: #e5e5e9;
622
- --components-menu-sidenavigation-standard-text-disabled: #949699;
623
- --components-menu-stepper-contrast-background: #626493;
624
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
625
- --components-menu-stepper-contrast-text-completed: #e5e5e9;
626
- --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
627
- --components-menu-stepper-standard-background: #626493;
628
- --components-menu-stepper-standard-progressbar: #aeb7e2;
629
- --components-menu-stepper-standard-text-completed: #e5e5e9;
630
- --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
631
- --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
632
- --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
633
- --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
634
- --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
635
- --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
636
- --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
637
- --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
638
- --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
639
- --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
640
- --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
641
- --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
642
- --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
643
- }
644
-
645
- /* DO NOT CHANGE!*/
646
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
647
- /* DO NOT CHANGE!*/
648
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
649
- [data-color-mode=light],
650
- :root {
651
- --basecolors-frame-contrast: #181c56;
652
- --basecolors-frame-contrastalt: #393d79;
653
- --basecolors-frame-default: #ffffff;
654
- --basecolors-frame-elevated: #ffffff;
655
- --basecolors-frame-elevatedalt: #f6f6f9;
656
- --basecolors-frame-subdued: #d9dae8;
657
- --basecolors-frame-tint: #f6f6f9;
658
- --basecolors-shape-accent: #181c56;
659
- --basecolors-shape-bicycle-contrast: #00db9b;
660
- --basecolors-shape-bicycle-default: #388f76;
661
- --basecolors-shape-bus-contrast: #ff6392;
662
- --basecolors-shape-bus-default: #c5044e;
663
- --basecolors-shape-cableway-contrast: #b482fb;
664
- --basecolors-shape-cableway-default: #78469a;
665
- --basecolors-shape-disabled: #6e6f73;
666
- --basecolors-shape-disabledalt: #b6b8ba;
667
- --basecolors-shape-ferry-contrast: #6fdfff;
668
- --basecolors-shape-ferry-default: #0c6693;
669
- --basecolors-shape-funicular-contrast: #b482fb;
670
- --basecolors-shape-funicular-default: #78469a;
671
- --basecolors-shape-helicopter-contrast: #fbafea;
672
- --basecolors-shape-helicopter-default: #800664;
673
- --basecolors-shape-highlight: #ff5959;
674
- --basecolors-shape-light: #ffffff;
675
- --basecolors-shape-mask: #ffffff;
676
- --basecolors-shape-maskalt: #ffffff;
677
- --basecolors-shape-metro-contrast: #f08901;
678
- --basecolors-shape-metro-default: #bf5826;
679
- --basecolors-shape-mobility-contrast: #00db9b;
680
- --basecolors-shape-mobility-default: #388f76;
681
- --basecolors-shape-plane-contrast: #fbafea;
682
- --basecolors-shape-plane-default: #800664;
683
- --basecolors-shape-subdued: #626493;
684
- --basecolors-shape-subduedalt: #d9dae8;
685
- --basecolors-shape-taxi-contrast: #ffe082;
686
- --basecolors-shape-taxi-default: #3d3e40;
687
- --basecolors-shape-train-contrast: #42a5f5;
688
- --basecolors-shape-train-default: #00367f;
689
- --basecolors-shape-tram-contrast: #b482fb;
690
- --basecolors-shape-tram-default: #78469a;
691
- --basecolors-shape-walk-contrast: #8284ab;
692
- --basecolors-shape-walk-default: #8d8e9c;
693
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
694
- --basecolors-shape-airportlinkbus-default: #800664;
695
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
696
- --basecolors-shape-airportlinkrail-default: #800664;
697
- --basecolors-stroke-contrast: #aeb7e2;
698
- --basecolors-stroke-default: #181c56;
699
- --basecolors-stroke-disabled: #949699;
700
- --basecolors-stroke-focus-contrast: #aeb7e2;
701
- --basecolors-stroke-focus-standard: #181c56;
702
- --basecolors-stroke-highlight: #ff5959;
703
- --basecolors-stroke-light: #ffffff;
704
- --basecolors-stroke-subdued: #8284ab;
705
- --basecolors-stroke-subduedalt: #e3e6e8;
706
- --basecolors-text-accent: #181c56;
707
- --basecolors-text-disabled: #6e6f73;
708
- --basecolors-text-disabledalt: #b6b8ba;
709
- --basecolors-text-highlight: #ff5959;
710
- --basecolors-text-light: #ffffff;
711
- --basecolors-text-subdued: #626493;
712
- --basecolors-text-subduedalt: #d9dae8;
713
- }
714
-
715
- [data-color-mode=dark] {
716
- --basecolors-frame-contrast: #212233;
717
- --basecolors-frame-contrastalt: #141527;
718
- --basecolors-frame-default: #08091c;
719
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
720
- --basecolors-frame-elevatedalt: #464755;
721
- --basecolors-frame-subdued: #2d2e3e;
722
- --basecolors-frame-tint: #141527;
723
- --basecolors-shape-accent: #e5e5e9;
724
- --basecolors-shape-bicycle-contrast: #4db295;
725
- --basecolors-shape-bicycle-default: #4db295;
726
- --basecolors-shape-bus-contrast: #ef7398;
727
- --basecolors-shape-bus-default: #ef7398;
728
- --basecolors-shape-cableway-contrast: #b898e5;
729
- --basecolors-shape-cableway-default: #b898e5;
730
- --basecolors-shape-disabled: #b6b8ba;
731
- --basecolors-shape-disabledalt: #b3b4bd;
732
- --basecolors-shape-ferry-contrast: #8ccfe2;
733
- --basecolors-shape-ferry-default: #8ccfe2;
734
- --basecolors-shape-funicular-contrast: #b898e5;
735
- --basecolors-shape-funicular-default: #b898e5;
736
- --basecolors-shape-helicopter-contrast: #f2b8e5;
737
- --basecolors-shape-helicopter-default: #f2b8e5;
738
- --basecolors-shape-highlight: #ff9494;
739
- --basecolors-shape-light: #e5e5e9;
740
- --basecolors-shape-mask: #2d2e3e;
741
- --basecolors-shape-maskalt: #393a49;
742
- --basecolors-shape-metro-contrast: #dd973c;
743
- --basecolors-shape-metro-default: #dd973c;
744
- --basecolors-shape-mobility-contrast: #4db295;
745
- --basecolors-shape-mobility-default: #4db295;
746
- --basecolors-shape-plane-contrast: #f2b8e5;
747
- --basecolors-shape-plane-default: #f2b8e5;
748
- --basecolors-shape-subdued: #b3b4bd;
749
- --basecolors-shape-subduedalt: #b3b4bd;
750
- --basecolors-shape-taxi-contrast: #ffe082;
751
- --basecolors-shape-taxi-default: #ffe082;
752
- --basecolors-shape-train-contrast: #60a2d7;
753
- --basecolors-shape-train-default: #60a2d7;
754
- --basecolors-shape-tram-contrast: #b898e5;
755
- --basecolors-shape-tram-default: #b898e5;
756
- --basecolors-shape-walk-contrast: #8d8e9c;
757
- --basecolors-shape-walk-default: #8d8e9c;
758
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
759
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
760
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
761
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
762
- --basecolors-stroke-contrast: #aeb7e2;
763
- --basecolors-stroke-default: #b3b4bd;
764
- --basecolors-stroke-disabled: #e3e6e8;
765
- --basecolors-stroke-focus-contrast: #aeb7e2;
766
- --basecolors-stroke-focus-standard: #aeb7e2;
767
- --basecolors-stroke-highlight: #ff9494;
768
- --basecolors-stroke-light: #b3b4bd;
769
- --basecolors-stroke-subdued: #81828f;
770
- --basecolors-stroke-subduedalt: #949699;
771
- --basecolors-text-accent: #e5e5e9;
772
- --basecolors-text-disabled: #b6b8ba;
773
- --basecolors-text-disabledalt: #b6b8ba;
774
- --basecolors-text-highlight: #ff9494;
775
- --basecolors-text-light: #e5e5e9;
776
- --basecolors-text-subdued: #b3b4bd;
777
- --basecolors-text-subduedalt: #b3b4bd;
778
- }
779
-
780
- :root {
781
- --eds-menu: 1;
782
- --reach-menu-button: 1;
783
- }
784
- /* DO NOT CHANGE!*/
785
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
786
444
  .eds-pagination {
787
445
  align-items: center;
788
446
  display: flex;
@@ -961,154 +619,496 @@
961
619
  text-align: center;
962
620
  width: 2rem;
963
621
  }
964
- .eds-contrast .eds-pagination__input-field {
965
- background-color: var(--components-menu-pagination-contrast-default);
966
- border-color: var(--components-menu-pagination-contrast-border-unselected);
967
- color: var(--components-menu-pagination-contrast-text-unselected);
622
+ .eds-contrast .eds-pagination__input-field {
623
+ background-color: var(--components-menu-pagination-contrast-default);
624
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
625
+ color: var(--components-menu-pagination-contrast-text-unselected);
626
+ }
627
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
628
+ -webkit-appearance: none;
629
+ appearance: none;
630
+ margin: 0;
631
+ }
632
+ .eds-pagination__input-field.focus-visible {
633
+ outline: 2px solid #181c56;
634
+ outline-color: var(--basecolors-stroke-focus-standard);
635
+ outline-offset: 0.125rem;
636
+ }
637
+ .eds-pagination__input-field:focus-visible {
638
+ outline: 2px solid #181c56;
639
+ outline-color: var(--basecolors-stroke-focus-standard);
640
+ outline-offset: 0.125rem;
641
+ }
642
+ .eds-contrast .eds-pagination__input-field.focus-visible {
643
+ outline-color: var(--basecolors-stroke-focus-contrast);
644
+ }
645
+ .eds-contrast .eds-pagination__input-field:focus-visible {
646
+ outline-color: var(--basecolors-stroke-focus-contrast);
647
+ }
648
+ /* DO NOT CHANGE!*/
649
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
650
+ .eds-stepper {
651
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
652
+ --line-color: var(--components-menu-stepper-standard-background);
653
+ --label-font-weight: 500;
654
+ --display-active-line: none;
655
+ display: flex;
656
+ flex-direction: row;
657
+ width: 100%;
658
+ list-style-type: none;
659
+ }
660
+ .eds-stepper__step {
661
+ display: flex;
662
+ flex-grow: 1;
663
+ flex-basis: 0;
664
+ flex-direction: column;
665
+ align-items: inherit;
666
+ -webkit-appearance: none;
667
+ -moz-appearance: none;
668
+ appearance: none;
669
+ background: none;
670
+ border: none;
671
+ font-family: inherit;
672
+ text-transform: none;
673
+ }
674
+ .eds-stepper__step__wrapper {
675
+ flex-grow: 1;
676
+ }
677
+ .eds-stepper__step.focus-visible .eds-stepper__step__label {
678
+ outline-offset: 0.125rem;
679
+ outline: 2px solid #181c56;
680
+ }
681
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
682
+ outline-offset: 0.125rem;
683
+ outline: 2px solid #181c56;
684
+ }
685
+ .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
686
+ outline: 2px solid #ffffff;
687
+ }
688
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
689
+ outline: 2px solid #ffffff;
690
+ }
691
+ .eds-contrast .eds-stepper__step {
692
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
693
+ --line-color: var(--components-menu-stepper-contrast-background);
694
+ }
695
+ .eds-stepper__step--interactive {
696
+ all: unset;
697
+ display: flex;
698
+ flex-direction: column;
699
+ width: 100%;
700
+ cursor: pointer;
701
+ }
702
+ .eds-stepper__step--active {
703
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
704
+ --label-font-weight: 600;
705
+ --display-active-line: block;
706
+ }
707
+ .eds-contrast .eds-stepper__step--active {
708
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
709
+ }
710
+ .eds-stepper__step--completed {
711
+ --text-color: var(--components-menu-stepper-standard-text-completed);
712
+ --line-color: var(--components-menu-stepper-standard-progressbar);
713
+ }
714
+ .eds-contrast .eds-stepper__step--completed {
715
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
716
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
717
+ }
718
+ .eds-stepper__step__label {
719
+ flex-grow: 1;
720
+ flex-direction: column;
721
+ align-self: center;
722
+ text-align: center;
723
+ font-size: 0.875rem;
724
+ margin: 0.5rem 0 0;
725
+ padding: 0 0.5rem;
726
+ width: -moz-fit-content;
727
+ width: fit-content;
728
+ border-radius: 0.0625rem;
729
+ color: var(--text-color);
730
+ font-weight: var(--label-font-weight);
731
+ }
732
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
733
+ background-color: var(--components-menu-stepper-standard-background);
734
+ color: var(--components-menu-stepper-standard-text-completed);
968
735
  }
969
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
970
- -webkit-appearance: none;
971
- appearance: none;
972
- margin: 0;
736
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
737
+ background-color: var(--components-menu-stepper-contrast-background);
738
+ color: var(--components-menu-stepper-contrast-text-completed);
973
739
  }
974
- .eds-pagination__input-field.focus-visible {
975
- outline: 2px solid #181c56;
976
- outline-color: var(--basecolors-stroke-focus-standard);
977
- outline-offset: 0.125rem;
740
+ .eds-stepper__step__line {
741
+ height: 0.5rem;
742
+ background: var(--line-color);
743
+ position: relative;
978
744
  }
979
- .eds-pagination__input-field:focus-visible {
980
- outline: 2px solid #181c56;
981
- outline-color: var(--basecolors-stroke-focus-standard);
982
- outline-offset: 0.125rem;
745
+ .eds-stepper__step__line:before {
746
+ display: var(--display-active-line);
747
+ content: "";
748
+ position: absolute;
749
+ right: calc(50% - 0.2rem);
750
+ bottom: 0.0625rem;
751
+ border-radius: 0.0625rem;
752
+ background: var(--components-menu-stepper-standard-progressbar);
753
+ width: calc(0.5rem - 0.125rem - 0.01rem);
754
+ height: calc(0.5rem - 0.125rem - 0.01rem);
755
+ transform: rotate(45deg);
983
756
  }
984
- .eds-contrast .eds-pagination__input-field.focus-visible {
985
- outline-color: var(--basecolors-stroke-focus-contrast);
757
+ .eds-contrast .eds-stepper__step__line:before {
758
+ background: var(--components-menu-stepper-contrast-progressbar);
986
759
  }
987
- .eds-contrast .eds-pagination__input-field:focus-visible {
988
- outline-color: var(--basecolors-stroke-focus-contrast);
760
+ .eds-stepper__step__line:after {
761
+ display: var(--display-active-line);
762
+ content: "";
763
+ position: absolute;
764
+ left: 0;
765
+ bottom: 0;
766
+ width: 50%;
767
+ height: 0.5rem;
768
+ background: var(--components-menu-stepper-standard-progressbar);
769
+ }
770
+ .eds-contrast .eds-stepper__step__line:after {
771
+ background: var(--components-menu-stepper-contrast-progressbar);
772
+ }
773
+ /* DO NOT CHANGE!*/
774
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
775
+ /* DO NOT CHANGE!*/
776
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
777
+ /* DO NOT CHANGE!*/
778
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
779
+ [data-color-mode=light],
780
+ :root {
781
+ --components-menu-breadcrumb-contrast-icon: #ffffff;
782
+ --components-menu-breadcrumb-contrast-text: #ffffff;
783
+ --components-menu-breadcrumb-standard-icon: #181c56;
784
+ --components-menu-breadcrumb-standard-text: #181c56;
785
+ --components-menu-navigationbar-contrast-background: #393d79;
786
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
787
+ --components-menu-navigationbar-contrast-icon-selected: #ffffff;
788
+ --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
789
+ --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
790
+ --components-menu-navigationbar-contrast-text-selected: #ffffff;
791
+ --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
792
+ --components-menu-navigationbar-standard-background: #ffffff;
793
+ --components-menu-navigationbar-standard-divide: #e3e6e8;
794
+ --components-menu-navigationbar-standard-icon-selected: #181c56;
795
+ --components-menu-navigationbar-standard-icon-unselected: #626493;
796
+ --components-menu-navigationbar-standard-stroke-selected: #ff5959;
797
+ --components-menu-navigationbar-standard-text-selected: #181c56;
798
+ --components-menu-navigationbar-standard-text-unselected: #626493;
799
+ --components-menu-navigationlink-contrast-icon: #ffffff;
800
+ --components-menu-navigationlink-contrast-text: #ffffff;
801
+ --components-menu-navigationlink-standard-icon: #181c56;
802
+ --components-menu-navigationlink-standard-text: #181c56;
803
+ --components-menu-overflowmenu-border: #8284ab;
804
+ --components-menu-overflowmenu-fill-default: #f2f5f7;
805
+ --components-menu-overflowmenu-fill-hover: #d9dae8;
806
+ --components-menu-overflowmenu-fill-selected: #181c56;
807
+ --components-menu-overflowmenu-icon: #181c56;
808
+ --components-menu-overflowmenu-icon-disabled: #6e6f73;
809
+ --components-menu-overflowmenu-text: #181c56;
810
+ --components-menu-overflowmenu-text-disabled: #6e6f73;
811
+ --components-menu-overflowmenu-text-selected: #ffffff;
812
+ --components-menu-pagination-contrast-active: #8794d4;
813
+ --components-menu-pagination-contrast-border-selected: #ffffff;
814
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
815
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
816
+ --components-menu-pagination-contrast-hover: #626493;
817
+ --components-menu-pagination-contrast-icon: #ffffff;
818
+ --components-menu-pagination-contrast-text-selected: #181c56;
819
+ --components-menu-pagination-contrast-text-subdued: #d9dae8;
820
+ --components-menu-pagination-contrast-text-unselected: #ffffff;
821
+ --components-menu-pagination-standard-active: #aeb7e2;
822
+ --components-menu-pagination-standard-border-selected: #181c56;
823
+ --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
824
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
825
+ --components-menu-pagination-standard-hover: #d9ddf2;
826
+ --components-menu-pagination-standard-icon: #181c56;
827
+ --components-menu-pagination-standard-text-selected: #181c56;
828
+ --components-menu-pagination-standard-text-subdued: #626493;
829
+ --components-menu-pagination-standard-text-unselected: #181c56;
830
+ --components-menu-sidenavigation-contrast-avatar: #393d79;
831
+ --components-menu-sidenavigation-contrast-background: #181c56;
832
+ --components-menu-sidenavigation-contrast-divide: #8284ab;
833
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
834
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
835
+ --components-menu-sidenavigation-contrast-fill-hover: #393d79;
836
+ --components-menu-sidenavigation-contrast-icon: #ffffff;
837
+ --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
838
+ --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
839
+ --components-menu-sidenavigation-contrast-label: #aeb7e2;
840
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
841
+ --components-menu-sidenavigation-contrast-text: #ffffff;
842
+ --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
843
+ --components-menu-sidenavigation-standard-avatar: #ffffff;
844
+ --components-menu-sidenavigation-standard-background: #f2f5f7;
845
+ --components-menu-sidenavigation-standard-divide: #e3e6e8;
846
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
847
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
848
+ --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
849
+ --components-menu-sidenavigation-standard-icon: #181c56;
850
+ --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
851
+ --components-menu-sidenavigation-standard-icon-label: #626493;
852
+ --components-menu-sidenavigation-standard-label: #626493;
853
+ --components-menu-sidenavigation-standard-stroke-selected: #181c56;
854
+ --components-menu-sidenavigation-standard-text: #181c56;
855
+ --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
856
+ --components-menu-stepper-contrast-background: #626493;
857
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
858
+ --components-menu-stepper-contrast-text-completed: #ffffff;
859
+ --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
860
+ --components-menu-stepper-standard-background: #e3e6e8;
861
+ --components-menu-stepper-standard-progressbar: #181c56;
862
+ --components-menu-stepper-standard-text-completed: #181c56;
863
+ --components-menu-stepper-standard-text-uncompleted: #6e6f73;
864
+ --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
865
+ --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
866
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
867
+ --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
868
+ --components-menu-tableofcontent-contrast-text-selected: #ffffff;
869
+ --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
870
+ --components-menu-tableofcontent-standard-icon-selected: #181c56;
871
+ --components-menu-tableofcontent-standard-icon-unselected: #626493;
872
+ --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
873
+ --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
874
+ --components-menu-tableofcontent-standard-text-selected: #181c56;
875
+ --components-menu-tableofcontent-standard-text-unselected: #626493;
876
+ }
877
+
878
+ [data-color-mode=dark] {
879
+ --components-menu-breadcrumb-contrast-icon: #e5e5e9;
880
+ --components-menu-breadcrumb-contrast-text: #e5e5e9;
881
+ --components-menu-breadcrumb-standard-icon: #e5e5e9;
882
+ --components-menu-breadcrumb-standard-text: #e5e5e9;
883
+ --components-menu-navigationbar-contrast-background: #393a49;
884
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
885
+ --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
886
+ --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
887
+ --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
888
+ --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
889
+ --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
890
+ --components-menu-navigationbar-standard-background: #393a49;
891
+ --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
892
+ --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
893
+ --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
894
+ --components-menu-navigationbar-standard-stroke-selected: #ff9494;
895
+ --components-menu-navigationbar-standard-text-selected: #e5e5e9;
896
+ --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
897
+ --components-menu-navigationlink-contrast-icon: #e5e5e9;
898
+ --components-menu-navigationlink-contrast-text: #e5e5e9;
899
+ --components-menu-navigationlink-standard-icon: #e5e5e9;
900
+ --components-menu-navigationlink-standard-text: #e5e5e9;
901
+ --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
902
+ --components-menu-overflowmenu-fill-default: #464755;
903
+ --components-menu-overflowmenu-fill-hover: #626493;
904
+ --components-menu-overflowmenu-fill-selected: #8794d4;
905
+ --components-menu-overflowmenu-icon: #e5e5e9;
906
+ --components-menu-overflowmenu-icon-disabled: #949699;
907
+ --components-menu-overflowmenu-text: #e5e5e9;
908
+ --components-menu-overflowmenu-text-disabled: #949699;
909
+ --components-menu-overflowmenu-text-selected: #181c56;
910
+ --components-menu-pagination-contrast-active: #8794d4;
911
+ --components-menu-pagination-contrast-border-selected: #e5e5e9;
912
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
913
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
914
+ --components-menu-pagination-contrast-hover: #626493;
915
+ --components-menu-pagination-contrast-icon: #e5e5e9;
916
+ --components-menu-pagination-contrast-text-selected: #08091c;
917
+ --components-menu-pagination-contrast-text-subdued: #b3b4bd;
918
+ --components-menu-pagination-contrast-text-unselected: #e5e5e9;
919
+ --components-menu-pagination-standard-active: #8794d4;
920
+ --components-menu-pagination-standard-border-selected: #e5e5e9;
921
+ --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
922
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
923
+ --components-menu-pagination-standard-hover: #626493;
924
+ --components-menu-pagination-standard-icon: #e5e5e9;
925
+ --components-menu-pagination-standard-text-selected: #08091c;
926
+ --components-menu-pagination-standard-text-subdued: #b3b4bd;
927
+ --components-menu-pagination-standard-text-unselected: #e5e5e9;
928
+ --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
929
+ --components-menu-sidenavigation-contrast-background: #212233;
930
+ --components-menu-sidenavigation-contrast-divide: #81828f;
931
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
932
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
933
+ --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
934
+ --components-menu-sidenavigation-contrast-icon: #e5e5e9;
935
+ --components-menu-sidenavigation-contrast-icon-disabled: #949699;
936
+ --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
937
+ --components-menu-sidenavigation-contrast-label: #b3b4bd;
938
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
939
+ --components-menu-sidenavigation-contrast-text: #e5e5e9;
940
+ --components-menu-sidenavigation-contrast-text-disabled: #949699;
941
+ --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
942
+ --components-menu-sidenavigation-standard-background: #212233;
943
+ --components-menu-sidenavigation-standard-divide: #81828f;
944
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
945
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
946
+ --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
947
+ --components-menu-sidenavigation-standard-icon: #e5e5e9;
948
+ --components-menu-sidenavigation-standard-icon-disabled: #949699;
949
+ --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
950
+ --components-menu-sidenavigation-standard-label: #b3b4bd;
951
+ --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
952
+ --components-menu-sidenavigation-standard-text: #e5e5e9;
953
+ --components-menu-sidenavigation-standard-text-disabled: #949699;
954
+ --components-menu-stepper-contrast-background: #626493;
955
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
956
+ --components-menu-stepper-contrast-text-completed: #e5e5e9;
957
+ --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
958
+ --components-menu-stepper-standard-background: #626493;
959
+ --components-menu-stepper-standard-progressbar: #aeb7e2;
960
+ --components-menu-stepper-standard-text-completed: #e5e5e9;
961
+ --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
962
+ --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
963
+ --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
964
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
965
+ --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
966
+ --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
967
+ --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
968
+ --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
969
+ --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
970
+ --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
971
+ --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
972
+ --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
973
+ --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
989
974
  }
975
+
990
976
  /* DO NOT CHANGE!*/
991
977
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
992
- .eds-stepper {
993
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
994
- --line-color: var(--components-menu-stepper-standard-background);
995
- --label-font-weight: 500;
996
- --display-active-line: none;
997
- display: flex;
998
- flex-direction: row;
999
- width: 100%;
1000
- list-style-type: none;
1001
- }
1002
- .eds-stepper__step {
1003
- display: flex;
1004
- flex-grow: 1;
1005
- flex-basis: 0;
1006
- flex-direction: column;
1007
- align-items: inherit;
1008
- -webkit-appearance: none;
1009
- -moz-appearance: none;
1010
- appearance: none;
1011
- background: none;
1012
- border: none;
1013
- font-family: inherit;
1014
- text-transform: none;
1015
- }
1016
- .eds-stepper__step__wrapper {
1017
- flex-grow: 1;
1018
- }
1019
- .eds-stepper__step.focus-visible .eds-stepper__step__label {
1020
- outline-offset: 0.125rem;
1021
- outline: 2px solid #181c56;
1022
- }
1023
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
1024
- outline-offset: 0.125rem;
1025
- outline: 2px solid #181c56;
1026
- }
1027
- .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
1028
- outline: 2px solid #ffffff;
1029
- }
1030
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
1031
- outline: 2px solid #ffffff;
1032
- }
1033
- .eds-contrast .eds-stepper__step {
1034
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1035
- --line-color: var(--components-menu-stepper-contrast-background);
1036
- }
1037
- .eds-stepper__step--interactive {
1038
- all: unset;
1039
- display: flex;
1040
- flex-direction: column;
1041
- width: 100%;
1042
- cursor: pointer;
1043
- }
1044
- .eds-stepper__step--active {
1045
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
1046
- --label-font-weight: 600;
1047
- --display-active-line: block;
1048
- }
1049
- .eds-contrast .eds-stepper__step--active {
1050
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1051
- }
1052
- .eds-stepper__step--completed {
1053
- --text-color: var(--components-menu-stepper-standard-text-completed);
1054
- --line-color: var(--components-menu-stepper-standard-progressbar);
1055
- }
1056
- .eds-contrast .eds-stepper__step--completed {
1057
- --text-color: var(--components-menu-stepper-contrast-text-completed);
1058
- --line-color: var(--components-menu-stepper-contrast-progressbar);
1059
- }
1060
- .eds-stepper__step__label {
1061
- flex-grow: 1;
1062
- flex-direction: column;
1063
- align-self: center;
1064
- text-align: center;
1065
- font-size: 0.875rem;
1066
- margin: 0.5rem 0 0;
1067
- padding: 0 0.5rem;
1068
- width: -moz-fit-content;
1069
- width: fit-content;
1070
- border-radius: 0.0625rem;
1071
- color: var(--text-color);
1072
- font-weight: var(--label-font-weight);
1073
- }
1074
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1075
- background-color: var(--components-menu-stepper-standard-background);
1076
- color: var(--components-menu-stepper-standard-text-completed);
1077
- }
1078
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1079
- background-color: var(--components-menu-stepper-contrast-background);
1080
- color: var(--components-menu-stepper-contrast-text-completed);
1081
- }
1082
- .eds-stepper__step__line {
1083
- height: 0.5rem;
1084
- background: var(--line-color);
1085
- position: relative;
1086
- }
1087
- .eds-stepper__step__line:before {
1088
- display: var(--display-active-line);
1089
- content: "";
1090
- position: absolute;
1091
- right: calc(50% - 0.2rem);
1092
- bottom: 0.0625rem;
1093
- border-radius: 0.0625rem;
1094
- background: var(--components-menu-stepper-standard-progressbar);
1095
- width: calc(0.5rem - 0.125rem - 0.01rem);
1096
- height: calc(0.5rem - 0.125rem - 0.01rem);
1097
- transform: rotate(45deg);
1098
- }
1099
- .eds-contrast .eds-stepper__step__line:before {
1100
- background: var(--components-menu-stepper-contrast-progressbar);
978
+ /* DO NOT CHANGE!*/
979
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
980
+ [data-color-mode=light],
981
+ :root {
982
+ --basecolors-frame-contrast: #181c56;
983
+ --basecolors-frame-contrastalt: #393d79;
984
+ --basecolors-frame-default: #ffffff;
985
+ --basecolors-frame-elevated: #ffffff;
986
+ --basecolors-frame-elevatedalt: #f6f6f9;
987
+ --basecolors-frame-subdued: #d9dae8;
988
+ --basecolors-frame-tint: #f6f6f9;
989
+ --basecolors-shape-accent: #181c56;
990
+ --basecolors-shape-bicycle-contrast: #00db9b;
991
+ --basecolors-shape-bicycle-default: #388f76;
992
+ --basecolors-shape-bus-contrast: #ff6392;
993
+ --basecolors-shape-bus-default: #c5044e;
994
+ --basecolors-shape-cableway-contrast: #b482fb;
995
+ --basecolors-shape-cableway-default: #78469a;
996
+ --basecolors-shape-disabled: #6e6f73;
997
+ --basecolors-shape-disabledalt: #b6b8ba;
998
+ --basecolors-shape-ferry-contrast: #6fdfff;
999
+ --basecolors-shape-ferry-default: #0c6693;
1000
+ --basecolors-shape-funicular-contrast: #b482fb;
1001
+ --basecolors-shape-funicular-default: #78469a;
1002
+ --basecolors-shape-helicopter-contrast: #fbafea;
1003
+ --basecolors-shape-helicopter-default: #800664;
1004
+ --basecolors-shape-highlight: #ff5959;
1005
+ --basecolors-shape-light: #ffffff;
1006
+ --basecolors-shape-mask: #ffffff;
1007
+ --basecolors-shape-maskalt: #ffffff;
1008
+ --basecolors-shape-metro-contrast: #f08901;
1009
+ --basecolors-shape-metro-default: #bf5826;
1010
+ --basecolors-shape-mobility-contrast: #00db9b;
1011
+ --basecolors-shape-mobility-default: #388f76;
1012
+ --basecolors-shape-plane-contrast: #fbafea;
1013
+ --basecolors-shape-plane-default: #800664;
1014
+ --basecolors-shape-subdued: #626493;
1015
+ --basecolors-shape-subduedalt: #d9dae8;
1016
+ --basecolors-shape-taxi-contrast: #ffe082;
1017
+ --basecolors-shape-taxi-default: #3d3e40;
1018
+ --basecolors-shape-train-contrast: #42a5f5;
1019
+ --basecolors-shape-train-default: #00367f;
1020
+ --basecolors-shape-tram-contrast: #b482fb;
1021
+ --basecolors-shape-tram-default: #78469a;
1022
+ --basecolors-shape-walk-contrast: #8284ab;
1023
+ --basecolors-shape-walk-default: #8d8e9c;
1024
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
1025
+ --basecolors-shape-airportlinkbus-default: #800664;
1026
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
1027
+ --basecolors-shape-airportlinkrail-default: #800664;
1028
+ --basecolors-stroke-contrast: #aeb7e2;
1029
+ --basecolors-stroke-default: #181c56;
1030
+ --basecolors-stroke-disabled: #949699;
1031
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1032
+ --basecolors-stroke-focus-standard: #181c56;
1033
+ --basecolors-stroke-highlight: #ff5959;
1034
+ --basecolors-stroke-light: #ffffff;
1035
+ --basecolors-stroke-subdued: #8284ab;
1036
+ --basecolors-stroke-subduedalt: #e3e6e8;
1037
+ --basecolors-text-accent: #181c56;
1038
+ --basecolors-text-disabled: #6e6f73;
1039
+ --basecolors-text-disabledalt: #b6b8ba;
1040
+ --basecolors-text-highlight: #ff5959;
1041
+ --basecolors-text-light: #ffffff;
1042
+ --basecolors-text-subdued: #626493;
1043
+ --basecolors-text-subduedalt: #d9dae8;
1101
1044
  }
1102
- .eds-stepper__step__line:after {
1103
- display: var(--display-active-line);
1104
- content: "";
1105
- position: absolute;
1106
- left: 0;
1107
- bottom: 0;
1108
- width: 50%;
1109
- height: 0.5rem;
1110
- background: var(--components-menu-stepper-standard-progressbar);
1045
+
1046
+ [data-color-mode=dark] {
1047
+ --basecolors-frame-contrast: #212233;
1048
+ --basecolors-frame-contrastalt: #141527;
1049
+ --basecolors-frame-default: #08091c;
1050
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1051
+ --basecolors-frame-elevatedalt: #464755;
1052
+ --basecolors-frame-subdued: #2d2e3e;
1053
+ --basecolors-frame-tint: #141527;
1054
+ --basecolors-shape-accent: #e5e5e9;
1055
+ --basecolors-shape-bicycle-contrast: #4db295;
1056
+ --basecolors-shape-bicycle-default: #4db295;
1057
+ --basecolors-shape-bus-contrast: #ef7398;
1058
+ --basecolors-shape-bus-default: #ef7398;
1059
+ --basecolors-shape-cableway-contrast: #b898e5;
1060
+ --basecolors-shape-cableway-default: #b898e5;
1061
+ --basecolors-shape-disabled: #b6b8ba;
1062
+ --basecolors-shape-disabledalt: #b3b4bd;
1063
+ --basecolors-shape-ferry-contrast: #8ccfe2;
1064
+ --basecolors-shape-ferry-default: #8ccfe2;
1065
+ --basecolors-shape-funicular-contrast: #b898e5;
1066
+ --basecolors-shape-funicular-default: #b898e5;
1067
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
1068
+ --basecolors-shape-helicopter-default: #f2b8e5;
1069
+ --basecolors-shape-highlight: #ff9494;
1070
+ --basecolors-shape-light: #e5e5e9;
1071
+ --basecolors-shape-mask: #2d2e3e;
1072
+ --basecolors-shape-maskalt: #393a49;
1073
+ --basecolors-shape-metro-contrast: #dd973c;
1074
+ --basecolors-shape-metro-default: #dd973c;
1075
+ --basecolors-shape-mobility-contrast: #4db295;
1076
+ --basecolors-shape-mobility-default: #4db295;
1077
+ --basecolors-shape-plane-contrast: #f2b8e5;
1078
+ --basecolors-shape-plane-default: #f2b8e5;
1079
+ --basecolors-shape-subdued: #b3b4bd;
1080
+ --basecolors-shape-subduedalt: #b3b4bd;
1081
+ --basecolors-shape-taxi-contrast: #ffe082;
1082
+ --basecolors-shape-taxi-default: #ffe082;
1083
+ --basecolors-shape-train-contrast: #60a2d7;
1084
+ --basecolors-shape-train-default: #60a2d7;
1085
+ --basecolors-shape-tram-contrast: #b898e5;
1086
+ --basecolors-shape-tram-default: #b898e5;
1087
+ --basecolors-shape-walk-contrast: #8d8e9c;
1088
+ --basecolors-shape-walk-default: #8d8e9c;
1089
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1090
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1091
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1092
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1093
+ --basecolors-stroke-contrast: #aeb7e2;
1094
+ --basecolors-stroke-default: #b3b4bd;
1095
+ --basecolors-stroke-disabled: #e3e6e8;
1096
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1097
+ --basecolors-stroke-focus-standard: #aeb7e2;
1098
+ --basecolors-stroke-highlight: #ff9494;
1099
+ --basecolors-stroke-light: #b3b4bd;
1100
+ --basecolors-stroke-subdued: #81828f;
1101
+ --basecolors-stroke-subduedalt: #949699;
1102
+ --basecolors-text-accent: #e5e5e9;
1103
+ --basecolors-text-disabled: #b6b8ba;
1104
+ --basecolors-text-disabledalt: #b6b8ba;
1105
+ --basecolors-text-highlight: #ff9494;
1106
+ --basecolors-text-light: #e5e5e9;
1107
+ --basecolors-text-subdued: #b3b4bd;
1108
+ --basecolors-text-subduedalt: #b3b4bd;
1111
1109
  }
1112
- .eds-contrast .eds-stepper__step__line:after {
1113
- background: var(--components-menu-stepper-contrast-progressbar);
1110
+
1111
+ :root {
1112
+ --eds-menu: 1;
1113
+ --reach-menu-button: 1;
1114
1114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.2.38",
3
+ "version": "4.2.39-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.89",
31
- "@entur/button": "^3.2.30",
32
- "@entur/expand": "^3.5.19",
30
+ "@entur/a11y": "^0.2.90-beta.0",
31
+ "@entur/button": "^3.2.31-beta.0",
32
+ "@entur/expand": "^3.5.20-beta.0",
33
33
  "@entur/icons": "^7.2.0",
34
- "@entur/layout": "^2.3.14",
34
+ "@entur/layout": "^2.3.15-beta.0",
35
35
  "@entur/tokens": "^3.17.0",
36
- "@entur/typography": "^1.8.43",
37
- "@entur/utils": "^0.11.1",
36
+ "@entur/typography": "^1.8.44-beta.0",
37
+ "@entur/utils": "^0.11.2-beta.0",
38
38
  "@reach/menu-button": "^0.16.1",
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "20838cf27b3f76a9ce3259fe808d60132ab0a653"
42
+ "gitHead": "bf6f8921dac8b869172f77ab6da76401e40bbc9b"
43
43
  }