@entur/menu 4.2.36 → 4.2.37

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 +614 -614
  2. package/package.json +9 -9
package/dist/styles.css CHANGED
@@ -1,5 +1,59 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-breadcrumb {
4
+ list-style: none;
5
+ margin: 0;
6
+ padding: 0;
7
+ }
8
+
9
+ .eds-breadcrumb__item {
10
+ display: inline-block;
11
+ color: var(--components-menu-breadcrumb-standard-text);
12
+ }
13
+ .eds-contrast .eds-breadcrumb__item {
14
+ color: var(--components-menu-breadcrumb-contrast-text);
15
+ }
16
+
17
+ .eds-breadcrumb__separator {
18
+ margin: 0 0.25rem 0 0.25rem;
19
+ }
20
+
21
+ .eds-breadcrumb__link {
22
+ text-decoration: none;
23
+ color: var(--components-menu-breadcrumb-standard-text);
24
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
25
+ background-repeat: no-repeat;
26
+ background-size: 100% 0.125rem;
27
+ background-position: 0 100%;
28
+ }
29
+ .eds-contrast .eds-breadcrumb__link {
30
+ color: var(--components-menu-breadcrumb-contrast-text);
31
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
32
+ }
33
+ .eds-breadcrumb__link:hover {
34
+ animation: eds-breadcrumb-underline 0.3s ease-in;
35
+ }
36
+ .eds-breadcrumb__link:focus {
37
+ outline: 2px solid #181c56;
38
+ outline-color: var(--basecolors-stroke-focus-standard);
39
+ outline-offset: 0.125rem;
40
+ }
41
+ .eds-contrast .eds-breadcrumb__link:focus {
42
+ outline-color: var(--basecolors-stroke-focus-contrast);
43
+ }
44
+ @keyframes eds-breadcrumb-underline {
45
+ from {
46
+ background-size: 0% 0.125rem;
47
+ }
48
+ to {
49
+ background-size: 100% 0.125rem;
50
+ }
51
+ }
52
+ .eds-breadcrumb__link--current {
53
+ font-weight: 600;
54
+ }
55
+ /* DO NOT CHANGE!*/
56
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
57
  .eds-side-navigation,
4
58
  .eds-side-navigation-group {
5
59
  color: var(--components-menu-sidenavigation-standard-text);
@@ -253,138 +307,6 @@
253
307
  }
254
308
  /* DO NOT CHANGE!*/
255
309
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
256
- .eds-breadcrumb {
257
- list-style: none;
258
- margin: 0;
259
- padding: 0;
260
- }
261
-
262
- .eds-breadcrumb__item {
263
- display: inline-block;
264
- color: var(--components-menu-breadcrumb-standard-text);
265
- }
266
- .eds-contrast .eds-breadcrumb__item {
267
- color: var(--components-menu-breadcrumb-contrast-text);
268
- }
269
-
270
- .eds-breadcrumb__separator {
271
- margin: 0 0.25rem 0 0.25rem;
272
- }
273
-
274
- .eds-breadcrumb__link {
275
- text-decoration: none;
276
- color: var(--components-menu-breadcrumb-standard-text);
277
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
278
- background-repeat: no-repeat;
279
- background-size: 100% 0.125rem;
280
- background-position: 0 100%;
281
- }
282
- .eds-contrast .eds-breadcrumb__link {
283
- color: var(--components-menu-breadcrumb-contrast-text);
284
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
285
- }
286
- .eds-breadcrumb__link:hover {
287
- animation: eds-breadcrumb-underline 0.3s ease-in;
288
- }
289
- .eds-breadcrumb__link:focus {
290
- outline: 2px solid #181c56;
291
- outline-color: var(--basecolors-stroke-focus-standard);
292
- outline-offset: 0.125rem;
293
- }
294
- .eds-contrast .eds-breadcrumb__link:focus {
295
- outline-color: var(--basecolors-stroke-focus-contrast);
296
- }
297
- @keyframes eds-breadcrumb-underline {
298
- from {
299
- background-size: 0% 0.125rem;
300
- }
301
- to {
302
- background-size: 100% 0.125rem;
303
- }
304
- }
305
- .eds-breadcrumb__link--current {
306
- font-weight: 600;
307
- }
308
- /* DO NOT CHANGE!*/
309
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
310
- .eds-overflow-menu__item {
311
- -webkit-appearance: none;
312
- -moz-appearance: none;
313
- appearance: none;
314
- border: none;
315
- font-size: 1rem;
316
- font-family: inherit;
317
- color: var(--components-menu-overflowmenu-text);
318
- background: var(--components-menu-overflowmenu-fill-default);
319
- display: block;
320
- cursor: pointer;
321
- width: 100%;
322
- line-height: 1.375rem;
323
- text-align: left;
324
- padding: 0.75rem;
325
- opacity: 1;
326
- }
327
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
328
- background: var(--components-menu-overflowmenu-fill-default);
329
- color: var(--components-menu-overflowmenu-text-disabled);
330
- }
331
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
332
- background: var(--components-menu-overflowmenu-fill-default);
333
- color: var(--components-menu-overflowmenu-text-disabled);
334
- }
335
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
336
- cursor: not-allowed;
337
- background: var(--components-menu-overflowmenu-fill-default);
338
- color: var(--components-menu-overflowmenu-text-disabled);
339
- }
340
- .eds-overflow-menu__item .eds-icon {
341
- margin-right: 0.75rem;
342
- }
343
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
344
- background: var(--components-menu-overflowmenu-fill-hover);
345
- }
346
- .eds-overflow-menu__item:focus {
347
- outline: none;
348
- }
349
-
350
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
351
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
352
- overflow: hidden;
353
- border-radius: 0.25rem;
354
- border: 1px solid var(--components-menu-overflowmenu-border);
355
- }
356
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
357
- outline: none;
358
- }
359
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
360
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
361
- }
362
-
363
- .eds-overflow-menu__menu-list[data-reach-menu-list],
364
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
365
- animation: slide-in 0.2s ease-in-out;
366
- }
367
-
368
- @keyframes slide-in {
369
- 0% {
370
- opacity: 0;
371
- transform: translateY(0.5rem);
372
- }
373
- 100% {
374
- opacity: 1;
375
- transform: translateY(0);
376
- }
377
- }
378
- [data-reach-menu-popover] {
379
- position: absolute;
380
- z-index: 30;
381
- }
382
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
383
- position: relative;
384
- right: calc(100% - 2rem);
385
- }
386
- /* DO NOT CHANGE!*/
387
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
388
310
  .eds-top-navigation-item {
389
311
  --show-active-line: 0;
390
312
  display: inline-block;
@@ -441,348 +363,6 @@
441
363
  }
442
364
  /* DO NOT CHANGE!*/
443
365
  /* 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
366
  .eds-pagination {
787
367
  align-items: center;
788
368
  display: flex;
@@ -961,154 +541,574 @@
961
541
  text-align: center;
962
542
  width: 2rem;
963
543
  }
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);
544
+ .eds-contrast .eds-pagination__input-field {
545
+ background-color: var(--components-menu-pagination-contrast-default);
546
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
547
+ color: var(--components-menu-pagination-contrast-text-unselected);
548
+ }
549
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
550
+ -webkit-appearance: none;
551
+ appearance: none;
552
+ margin: 0;
553
+ }
554
+ .eds-pagination__input-field.focus-visible {
555
+ outline: 2px solid #181c56;
556
+ outline-color: var(--basecolors-stroke-focus-standard);
557
+ outline-offset: 0.125rem;
558
+ }
559
+ .eds-pagination__input-field:focus-visible {
560
+ outline: 2px solid #181c56;
561
+ outline-color: var(--basecolors-stroke-focus-standard);
562
+ outline-offset: 0.125rem;
563
+ }
564
+ .eds-contrast .eds-pagination__input-field.focus-visible {
565
+ outline-color: var(--basecolors-stroke-focus-contrast);
566
+ }
567
+ .eds-contrast .eds-pagination__input-field:focus-visible {
568
+ outline-color: var(--basecolors-stroke-focus-contrast);
569
+ }
570
+ /* DO NOT CHANGE!*/
571
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
572
+ .eds-overflow-menu__item {
573
+ -webkit-appearance: none;
574
+ -moz-appearance: none;
575
+ appearance: none;
576
+ border: none;
577
+ font-size: 1rem;
578
+ font-family: inherit;
579
+ color: var(--components-menu-overflowmenu-text);
580
+ background: var(--components-menu-overflowmenu-fill-default);
581
+ display: block;
582
+ cursor: pointer;
583
+ width: 100%;
584
+ line-height: 1.375rem;
585
+ text-align: left;
586
+ padding: 0.75rem;
587
+ opacity: 1;
588
+ }
589
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
590
+ background: var(--components-menu-overflowmenu-fill-default);
591
+ color: var(--components-menu-overflowmenu-text-disabled);
592
+ }
593
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
594
+ background: var(--components-menu-overflowmenu-fill-default);
595
+ color: var(--components-menu-overflowmenu-text-disabled);
596
+ }
597
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
598
+ cursor: not-allowed;
599
+ background: var(--components-menu-overflowmenu-fill-default);
600
+ color: var(--components-menu-overflowmenu-text-disabled);
601
+ }
602
+ .eds-overflow-menu__item .eds-icon {
603
+ margin-right: 0.75rem;
604
+ }
605
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
606
+ background: var(--components-menu-overflowmenu-fill-hover);
607
+ }
608
+ .eds-overflow-menu__item:focus {
609
+ outline: none;
610
+ }
611
+
612
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
613
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
614
+ overflow: hidden;
615
+ border-radius: 0.25rem;
616
+ border: 1px solid var(--components-menu-overflowmenu-border);
617
+ }
618
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
619
+ outline: none;
620
+ }
621
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
622
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
623
+ }
624
+
625
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
626
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
627
+ animation: slide-in 0.2s ease-in-out;
628
+ }
629
+
630
+ @keyframes slide-in {
631
+ 0% {
632
+ opacity: 0;
633
+ transform: translateY(0.5rem);
634
+ }
635
+ 100% {
636
+ opacity: 1;
637
+ transform: translateY(0);
638
+ }
639
+ }
640
+ [data-reach-menu-popover] {
641
+ position: absolute;
642
+ z-index: 30;
643
+ }
644
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
645
+ position: relative;
646
+ right: calc(100% - 2rem);
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.36",
3
+ "version": "4.2.37",
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.87",
31
- "@entur/button": "^3.2.28",
32
- "@entur/expand": "^3.5.17",
33
- "@entur/icons": "^7.0.0",
34
- "@entur/layout": "^2.3.12",
35
- "@entur/tokens": "^3.15.2",
36
- "@entur/typography": "^1.8.41",
30
+ "@entur/a11y": "^0.2.88",
31
+ "@entur/button": "^3.2.29",
32
+ "@entur/expand": "^3.5.18",
33
+ "@entur/icons": "^7.1.0",
34
+ "@entur/layout": "^2.3.13",
35
+ "@entur/tokens": "^3.16.0",
36
+ "@entur/typography": "^1.8.42",
37
37
  "@entur/utils": "^0.11.1",
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": "cff2157007648ca73944d215e9f3f03160c96f13"
42
+ "gitHead": "0003528fef45ca9117e13c3282804da3f0cdea2f"
43
43
  }