@entur/dropdown 5.3.1 → 5.3.3

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 +481 -78
  2. package/package.json +10 -10
package/dist/styles.css CHANGED
@@ -1,3 +1,28 @@
1
+ /* DO NOT CHANGE!*/
2
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-dropdown__searchable-selected-item {
4
+ display: block;
5
+ font-size: 1rem;
6
+ line-height: 1rem;
7
+ margin-right: -1rem;
8
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
9
+ font-family: inherit;
10
+ overflow-x: hidden;
11
+ text-overflow: ellipsis;
12
+ white-space: nowrap;
13
+ }
14
+ .eds-dropdown__searchable-selected-item__wrapper {
15
+ max-width: 65%;
16
+ }
17
+
18
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
19
+ -moz-transition: none;
20
+ transition: none;
21
+ }
22
+
23
+ .eds-form-control.eds-dropdown__input::placeholder {
24
+ transition: none;
25
+ }
1
26
  .eds-inline-spinner {
2
27
  align-items: center;
3
28
  display: flex;
@@ -71,31 +96,6 @@
71
96
  }
72
97
  /* DO NOT CHANGE!*/
73
98
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
74
- .eds-dropdown__searchable-selected-item {
75
- display: block;
76
- font-size: 1rem;
77
- line-height: 1rem;
78
- margin-right: -1rem;
79
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
80
- font-family: inherit;
81
- overflow-x: hidden;
82
- text-overflow: ellipsis;
83
- white-space: nowrap;
84
- }
85
- .eds-dropdown__searchable-selected-item__wrapper {
86
- max-width: 65%;
87
- }
88
-
89
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
90
- -moz-transition: none;
91
- transition: none;
92
- }
93
-
94
- .eds-form-control.eds-dropdown__input::placeholder {
95
- transition: none;
96
- }
97
- /* DO NOT CHANGE!*/
98
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
99
99
  .eds-dropdown-wrapper {
100
100
  position: relative;
101
101
  }
@@ -108,11 +108,11 @@
108
108
  }
109
109
 
110
110
  .eds-dropdown__input::-moz-placeholder {
111
- color: #656782;
111
+ color: var(--components-form-baseform-standard-text-label);
112
112
  }
113
113
 
114
114
  .eds-dropdown__input::placeholder {
115
- color: #656782;
115
+ color: var(--components-form-baseform-standard-text-label);
116
116
  }
117
117
 
118
118
  .eds-dropdown__selected-item {
@@ -277,7 +277,7 @@
277
277
  position: absolute;
278
278
  list-style: none;
279
279
  border-radius: 0.25rem;
280
- border: 0.125rem solid #7C7F9F;
280
+ border: 0.125rem solid var(--components-form-basemenu-border);
281
281
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
282
282
  padding: 0;
283
283
  margin: 0;
@@ -291,8 +291,8 @@
291
291
  outline: none;
292
292
  }
293
293
  .eds-dropdown__list__item {
294
- background-color: #f8f8f8;
295
- color: #181c56;
294
+ background-color: var(--components-form-basemenu-fill-default);
295
+ color: var(--components-form-basemenu-text);
296
296
  display: flex;
297
297
  align-items: center;
298
298
  justify-content: flex-start;
@@ -318,37 +318,36 @@
318
318
  pointer-events: none;
319
319
  }
320
320
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
321
- border-color: #181c56;
321
+ border-color: var(--components-form-checkbox-standard-border);
322
322
  }
323
323
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
324
324
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
325
- background-color: #181c56;
325
+ background-color: var(--components-form-checkbox-standard-fill-selected);
326
326
  }
327
327
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
328
328
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
329
- stroke: #ffffff;
329
+ stroke: var(--components-form-checkbox-standard-icon);
330
330
  }
331
331
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
332
332
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
333
- fill: #ffffff;
333
+ fill: var(--components-form-checkbox-standard-icon);
334
334
  }
335
335
  .eds-dropdown__list__item--highlighted {
336
- background-color: #d1d4e3;
336
+ background-color: var(--components-form-basemenu-fill-hover);
337
337
  }
338
338
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
339
339
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
340
340
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
341
341
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
342
- background-color: #54568c;
342
+ background-color: var(--components-form-checkbox-standard-fill-selected);
343
343
  border-color: transparent;
344
344
  }
345
345
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
346
346
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
347
- border-color: #54568c;
347
+ border-color: var(--components-form-checkbox-standard-border);
348
348
  }
349
349
  .eds-dropdown__list__item--selected {
350
- background-color: #54568c;
351
- color: #ffffff;
350
+ background-color: var(--components-form-basemenu-fill-hover);
352
351
  }
353
352
  @media all and (min-width: 50rem) {
354
353
  .eds-dropdown__list {
@@ -374,16 +373,34 @@
374
373
  .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
375
374
  font-size: 0.6rem;
376
375
  }
376
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
377
+ outline-color: var(--basecolors-stroke-focus-standard);
378
+ }
379
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
380
+ border-color: var(--components-chip-standard-border);
381
+ background-color: var(--components-chip-standard-hover);
382
+ }
377
383
  .eds-contrast .eds-dropdown__selected-item-tag {
378
- background: #ebebf1;
379
- border: 0.0625rem solid #d1d4e3;
380
- color: #181c56;
384
+ background: var(--components-chip-standard-default);
385
+ border: 0.0625rem solid var(--components-chip-standard-border);
386
+ color: var(--components-chip-standard-text-unselected);
387
+ }
388
+ .eds-contrast .eds-dropdown__selected-item-tag:hover {
389
+ border-color: var(--components-chip-standard-border);
390
+ background-color: var(--components-chip-standard-hover);
391
+ }
392
+ .eds-contrast .eds-dropdown__selected-item-tag:active {
393
+ background-color: var(--components-chip-standard-active);
394
+ border-color: transparent;
381
395
  }
382
396
  .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
383
- color: #181c56;
397
+ color: var(--components-chip-standard-text-unselected);
384
398
  }
385
399
  .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
386
- background-color: #babbcf;
400
+ background-color: var(--components-chip-standard-hover);
401
+ }
402
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
403
+ outline-color: var(--basecolors-stroke-focus-standard);
387
404
  }
388
405
  .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
389
406
  padding-right: 0.5rem;
@@ -392,14 +409,28 @@
392
409
  display: none;
393
410
  }
394
411
  .eds-contrast .eds-dropdown__selected-item-tag--readonly {
395
- background-color: #8285a8;
412
+ background-color: var(--components-dropdown-dropdown-standard-fill-readonly);
396
413
  border-color: transparent;
397
- color: #ffffff;
414
+ color: var(--components-dropdown-dropdown-standard-text-readonly);
398
415
  }
399
416
  .eds-contrast .eds-dropdown__selected-item-tag--disabled {
400
- background-color: #54568c;
417
+ background-color: var(--components-dropdown-dropdown-standard-fill-disabled);
401
418
  border-color: transparent;
402
- color: #8285a8;
419
+ color: var(--components-dropdown-dropdown-standard-text-disabled);
420
+ }
421
+ .eds-dropdown .eds-icon-button {
422
+ color: var(--components-button-iconbutton-standard-text);
423
+ }
424
+ .eds-dropdown .eds-icon-button:hover {
425
+ background-color: var(--components-button-iconbutton-standard-hover);
426
+ }
427
+ .eds-dropdown .eds-icon-button:focus {
428
+ outline: 2px solid #181c56;
429
+ outline-color: var(--basecolors-stroke-focus-standard);
430
+ outline-offset: 0.125rem;
431
+ }
432
+ .eds-dropdown .eds-icon-button:active {
433
+ background-color: var(--components-button-iconbutton-standard-active);
403
434
  }
404
435
  .eds-dropdown__appendix {
405
436
  display: flex;
@@ -410,13 +441,10 @@
410
441
  margin-right: 0.25rem;
411
442
  }
412
443
  .eds-contrast .eds-dropdown__appendix__clear-button:hover {
413
- background-color: #d1d4e3;
414
- }
415
- .eds-contrast .eds-dropdown__appendix__clear-button:active {
416
- background: #babbcf;
444
+ background-color: var(--components-button-iconbutton-standard-hover);
417
445
  }
418
446
  .eds-contrast .eds-dropdown__appendix__clear-button:focus {
419
- outline: 2px solid #181c56;
447
+ outline-color: var(--basecolors-stroke-focus-standard);
420
448
  }
421
449
  .eds-dropdown__appendix__clear-button__tooltip {
422
450
  white-space: nowrap;
@@ -424,16 +452,10 @@
424
452
  .eds-dropdown__appendix__divider {
425
453
  content: "";
426
454
  display: block;
427
- background-color: #e9e9e9;
455
+ background-color: var(--components-dropdown-dropdown-standard-text-content);
428
456
  height: 1.5rem;
429
457
  width: 1px;
430
458
  }
431
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__appendix__divider {
432
- background-color: #8285a8;
433
- }
434
- .eds-contrast .eds-dropdown__appendix__divider {
435
- background-color: #d1d3d3;
436
- }
437
459
  .eds-dropdown__appendix__toggle-button {
438
460
  margin-right: -0.75rem;
439
461
  margin-left: 0.25rem;
@@ -452,14 +474,17 @@
452
474
  width: 1rem;
453
475
  margin-left: calc(0.5rem + 2px);
454
476
  }
455
- .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
456
- background-color: #d1d4e3;
477
+ .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
478
+ background-color: var(--components-loader-loader-standard-text);
457
479
  }
458
- .eds-contrast .eds-dropdown__appendix__toggle-button:active {
459
- background: #babbcf;
480
+ .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
481
+ background-color: var(--components-loader-loader-standard-text);
482
+ }
483
+ .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
484
+ background-color: var(--components-button-iconbutton-standard-hover);
460
485
  }
461
486
  .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
462
- outline: 2px solid #181c56;
487
+ outline-color: var(--basecolors-stroke-focus-standard);
463
488
  }
464
489
  /* DO NOT CHANGE!*/
465
490
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -488,16 +513,6 @@
488
513
  line-height: 1rem;
489
514
  padding: 1.25rem 1rem 0.25rem;
490
515
  }
491
- .eds-dropdown__selected-item__placeholder {
492
- color: #54568c;
493
- height: 1rem;
494
- }
495
- .eds-contrast .eds-dropdown__selected-item__placeholder {
496
- color: #656782;
497
- }
498
- .eds-contrast .eds-dropdown__selected-item__placeholder--readonly {
499
- color: #aeb7e2;
500
- }
501
516
  .eds-dropdown__selected-item.focus-visible {
502
517
  outline: none;
503
518
  }
@@ -544,6 +559,10 @@
544
559
  .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
545
560
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
546
561
  }
562
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip__close-button svg {
563
+ width: 1rem;
564
+ height: 1rem;
565
+ }
547
566
  .eds-dropdown--multiselect .eds-input-group__label {
548
567
  top: 0;
549
568
  }
@@ -577,12 +596,396 @@
577
596
  pointer-events: none;
578
597
  }
579
598
  .eds-dropdown--native option {
580
- color: #181c56;
581
- background-color: #ffffff;
599
+ color: var(--components-form-basemenu-text);
600
+ background-color: var(--components-form-basemenu-fill-default);
582
601
  }
583
602
  .eds-contrast .eds-dropdown--native option {
584
- color: #181c56;
603
+ color: var(--components-form-basemenu-text);
585
604
  }
605
+ @import "~@entur/tokens/dist/primitive.css";
606
+ @import "~@entur/tokens/dist/semantic.css";
607
+ /* DO NOT CHANGE!*/
608
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
609
+ :root {
610
+ --fill-background-contrast-dark: var(--ebony-90);
611
+ --fill-background-contrast-light: var(--lavender-90);
612
+ --fill-background-contrast-lightalt: var(--blue-90);
613
+ --fill-background-contrast-lightalt-2: var(--blue-100);
614
+ --fill-background-overlay-solid: var(--ebony-80);
615
+ --fill-background-overlay-solidalt: var(--ebony-75);
616
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
617
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
618
+ --fill-background-standard-colorless: var(--white-alpha-0);
619
+ --fill-background-standard-dark: var(--ebony-100);
620
+ --fill-background-standard-light: var(--white-alpha-100);
621
+ --fill-background-subdued-dark: var(--ebony-85);
622
+ --fill-background-subdued-light: var(--blue-30);
623
+ --fill-background-tint-dark: var(--ebony-95);
624
+ --fill-background-tint-light: var(--blue-10);
625
+ --fill-background-tint-neutral: var(--grey-10);
626
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
627
+ --fill-boolean-false-contrast: var(--blue-50);
628
+ --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
629
+ --fill-boolean-false-light: var(--grey-60);
630
+ --fill-boolean-true-contrast: var(--mint-40);
631
+ --fill-boolean-true-dark: var(--mint-40);
632
+ --fill-boolean-true-light: var(--mint-60);
633
+ --fill-disabled-light: var(--grey-40);
634
+ --fill-disabled-transparent: var(--transparent-neutral-alpha15);
635
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
636
+ --fill-information-contrast: var(--sky-30);
637
+ --fill-information-deep: var(--sky-50);
638
+ --fill-information-muted: var(--sky-10);
639
+ --fill-information-tint: var(--sky-20);
640
+ --fill-negative-contrast: var(--coral-40);
641
+ --fill-negative-dark: var(--coral-90);
642
+ --fill-negative-deep: var(--coral-60);
643
+ --fill-negative-muted: var(--coral-20);
644
+ --fill-negative-tint: var(--coral-30);
645
+ --fill-negative-transparent: var(--transparent-coral-alpha20);
646
+ --fill-primary-active-contrast: var(--lavender-50);
647
+ --fill-primary-active-light: var(--lavender-100);
648
+ --fill-primary-default-contrast: var(--lavender-40);
649
+ --fill-primary-default-light: var(--lavender-90);
650
+ --fill-primary-hover-contrast: var(--lavender-30);
651
+ --fill-primary-hover-light: var(--blue-90);
652
+ --fill-secondary-active-contrast: var(--lavender-50);
653
+ --fill-secondary-active-light: var(--lavender-40);
654
+ --fill-secondary-default-colorless: var(--white-alpha-0);
655
+ --fill-secondary-hover-contrast: var(--blue-70);
656
+ --fill-secondary-hover-light: var(--lavender-20);
657
+ --fill-selected-default-contrast: var(--blue-90);
658
+ --fill-selected-default-dark: var(--ebony-10);
659
+ --fill-selected-default-darkalt: var(--ebony-50);
660
+ --fill-selected-default-light: var(--blue-10);
661
+ --fill-selected-default-neutral: var(--grey-30);
662
+ --fill-selected-hover-contrast: var(--blue-80);
663
+ --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
664
+ --fill-selected-hover-light: var(--blue-20);
665
+ --fill-selected-hover-neutral: var(--grey-20);
666
+ --fill-success-contrast: var(--mint-40);
667
+ --fill-success-deep: var(--mint-60);
668
+ --fill-success-muted: var(--mint-20);
669
+ --fill-success-subdued: var(--mint-50);
670
+ --fill-success-tint: var(--mint-30);
671
+ --fill-warning-contrast: var(--canary-40);
672
+ --fill-warning-deep: var(--canary-60);
673
+ --fill-warning-muted: var(--canary-20);
674
+ --fill-warning-tint: var(--canary-30);
675
+ --shape-accent: var(--lavender-90);
676
+ --shape-contrast: var(--lavender-40);
677
+ --shape-dark: var(--ebony-100);
678
+ --shape-darkalt: var(--ebony-30);
679
+ --shape-disabled: var(--grey-80);
680
+ --shape-highlight: var(--coral-40);
681
+ --shape-highlightalt: var(--coral-30);
682
+ --shape-inactive: var(--blue-40);
683
+ --shape-information: var(--sky-50);
684
+ --shape-informationalt: var(--sky-30);
685
+ --shape-light: var(--white-alpha-100);
686
+ --shape-lightalt: var(--ebony-10);
687
+ --shape-negative: var(--coral-60);
688
+ --shape-negativealt: var(--coral-30);
689
+ --shape-neutral: var(--grey-70);
690
+ --shape-neutralalt: var(--grey-50);
691
+ --shape-neutralalt2: var(--grey-60);
692
+ --shape-subdued: var(--blue-70);
693
+ --shape-subduedalt: var(--blue-30);
694
+ --shape-success: var(--mint-60);
695
+ --shape-successalt: var(--mint-40);
696
+ --shape-warning: var(--canary-60);
697
+ --shape-warningalt: var(--canary-40);
698
+ --stroke-accent: var(--lavender-90);
699
+ --stroke-colorless: var(--white-alpha-0);
700
+ --stroke-contrast: var(--lavender-40);
701
+ --stroke-contrastalt: var(--blue-80);
702
+ --stroke-dark: var(--ebony-30);
703
+ --stroke-darkalt: var(--ebony-50);
704
+ --stroke-darkalt-2: var(--ebony-100);
705
+ --stroke-highlight: var(--coral-40);
706
+ --stroke-highlightalt: var(--coral-30);
707
+ --stroke-information: var(--sky-50);
708
+ --stroke-light: var(--white-alpha-100);
709
+ --stroke-lightalt: var(--ebony-10);
710
+ --stroke-negative: var(--coral-60);
711
+ --stroke-negativealt: var(--coral-30);
712
+ --stroke-neutral: var(--grey-30);
713
+ --stroke-neutralalt: var(--grey-60);
714
+ --stroke-subdued: var(--blue-60);
715
+ --stroke-success: var(--mint-60);
716
+ --stroke-successalt: var(--mint-40);
717
+ --stroke-transparent: var(--transparent-blue-alpha40);
718
+ --stroke-transparentalt: var(--transparent-lavender-alpha70);
719
+ --stroke-warning: var(--canary-70);
720
+ --text-accent: var(--lavender-90);
721
+ --text-dark: var(--ebony-100);
722
+ --text-darkalt: var(--ebony-30);
723
+ --text-disabled: var(--grey-80);
724
+ --text-highlight: var(--lavender-40);
725
+ --text-highlightalt: var(--peach-40);
726
+ --text-light: var(--white-alpha-100);
727
+ --text-lightalt: var(--ebony-10);
728
+ --text-negative: var(--coral-60);
729
+ --text-negativealt: var(--coral-30);
730
+ --text-neutral: var(--grey-70);
731
+ --text-neutralalt: var(--grey-50);
732
+ --text-neutralalt2: var(--grey-60);
733
+ --text-subdued: var(--blue-70);
734
+ --text-subduedalt: var(--blue-30);
735
+ --text-success: var(--mint-60);
736
+ --text-successalt: var(--mint-40);
737
+ }
738
+
739
+ /* DO NOT CHANGE!*/
740
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
741
+ [data-color-mode=light],
742
+ :root {
743
+ --components-dropdown-dropdown-contrast-border-active: var(--stroke-accent);
744
+ --components-dropdown-dropdown-contrast-border-default: var(--stroke-subdued);
745
+ --components-dropdown-dropdown-contrast-border-hover: var(--stroke-contrast);
746
+ --components-dropdown-dropdown-contrast-border-negative: var(--stroke-negativealt);
747
+ --components-dropdown-dropdown-contrast-border-success: var(--stroke-successalt);
748
+ --components-dropdown-dropdown-contrast-fill-default: var(--fill-background-standard-light);
749
+ --components-dropdown-dropdown-contrast-fill-disabled: var(--fill-disabled-transparent);
750
+ --components-dropdown-dropdown-contrast-fill-readonly: var(--fill-background-standard-colorless);
751
+ --components-dropdown-dropdown-contrast-icon: var(--shape-accent);
752
+ --components-dropdown-dropdown-contrast-icon-disabled: var(--shape-neutral);
753
+ --components-dropdown-dropdown-contrast-text-content: var(--text-accent);
754
+ --components-dropdown-dropdown-contrast-text-description: var(--text-light);
755
+ --components-dropdown-dropdown-contrast-text-label: var(--text-subdued);
756
+ --components-dropdown-dropdown-contrast-text-disabled: var(--text-neutral);
757
+ --components-dropdown-dropdown-standard-border-active: var(--stroke-accent);
758
+ --components-dropdown-dropdown-standard-border-default: var(--stroke-subdued);
759
+ --components-dropdown-dropdown-standard-border-hover: var(--stroke-accent);
760
+ --components-dropdown-dropdown-standard-border-negative: var(--stroke-negative);
761
+ --components-dropdown-dropdown-standard-border-success: var(--stroke-success);
762
+ --components-dropdown-dropdown-standard-fill-default: var(--fill-background-standard-light);
763
+ --components-dropdown-dropdown-standard-fill-disabled: var(--fill-disabled-light);
764
+ --components-dropdown-dropdown-standard-fill-readonly: var(--fill-background-standard-colorless);
765
+ --components-dropdown-dropdown-standard-icon: var(--shape-accent);
766
+ --components-dropdown-dropdown-standard-icon-disabled: var(--shape-neutral);
767
+ --components-dropdown-dropdown-standard-text-content: var(--text-accent);
768
+ --components-dropdown-dropdown-standard-text-description: var(--text-accent);
769
+ --components-dropdown-dropdown-standard-text-label: var(--text-subdued);
770
+ --components-dropdown-dropdown-standard-text-disabled: var(--text-neutral);
771
+ --components-dropdown-multiselect-contrast-border-danger: var(--stroke-negativealt);
772
+ --components-dropdown-multiselect-contrast-border-default: var(--stroke-subdued);
773
+ --components-dropdown-multiselect-contrast-border-interactive: var(--stroke-contrast);
774
+ --components-dropdown-multiselect-contrast-border-success: var(--stroke-successalt);
775
+ --components-dropdown-multiselect-contrast-fill-default: var(--fill-background-standard-light);
776
+ --components-dropdown-multiselect-contrast-fill-disabled: var(--fill-disabled-transparent);
777
+ --components-dropdown-multiselect-contrast-fill-readonly: var(--fill-background-standard-colorless);
778
+ --components-dropdown-multiselect-contrast-icon: var(--shape-accent);
779
+ --components-dropdown-multiselect-contrast-icon-disabled: var(--shape-neutral);
780
+ --components-dropdown-multiselect-contrast-text-content: var(--text-accent);
781
+ --components-dropdown-multiselect-contrast-text-description: var(--text-light);
782
+ --components-dropdown-multiselect-contrast-text-label: var(--text-subdued);
783
+ --components-dropdown-multiselect-contrast-text-disabled: var(--text-neutral);
784
+ --components-dropdown-multiselect-standard-border-default: var(--stroke-subdued);
785
+ --components-dropdown-multiselect-standard-border-interactive: var(--stroke-accent);
786
+ --components-dropdown-multiselect-standard-border-negative: var(--stroke-negative);
787
+ --components-dropdown-multiselect-standard-border-success: var(--stroke-success);
788
+ --components-dropdown-multiselect-standard-fill-default: var(--fill-background-standard-light);
789
+ --components-dropdown-multiselect-standard-fill-disabled: var(--fill-disabled-light);
790
+ --components-dropdown-multiselect-standard-fill-readonly: var(--fill-background-standard-colorless);
791
+ --components-dropdown-multiselect-standard-icon: var(--shape-accent);
792
+ --components-dropdown-multiselect-standard-icon-disabled: var(--shape-neutral);
793
+ --components-dropdown-multiselect-standard-text-content: var(--text-accent);
794
+ --components-dropdown-multiselect-standard-text-description: var(--text-accent);
795
+ --components-dropdown-multiselect-standard-text-label: var(--text-subdued);
796
+ --components-dropdown-multiselect-standard-text-disabled: var(--text-neutral);
797
+ }
798
+
799
+ [data-color-mode=dark] {
800
+ --components-dropdown-dropdown-contrast-border-active: var(--stroke-contrast);
801
+ --components-dropdown-dropdown-contrast-border-default: var(--stroke-subdued);
802
+ --components-dropdown-dropdown-contrast-border-hover: var(--stroke-contrast);
803
+ --components-dropdown-dropdown-contrast-border-negative: var(--stroke-negativealt);
804
+ --components-dropdown-dropdown-contrast-border-success: var(--stroke-successalt);
805
+ --components-dropdown-dropdown-contrast-fill-default: var(--fill-background-standard-colorless);
806
+ --components-dropdown-dropdown-contrast-fill-disabled: var(--fill-disabled-transparent);
807
+ --components-dropdown-dropdown-contrast-fill-readonly: var(--fill-background-standard-colorless);
808
+ --components-dropdown-dropdown-contrast-icon: var(--shape-lightalt);
809
+ --components-dropdown-dropdown-contrast-icon-disabled: var(--shape-neutral);
810
+ --components-dropdown-dropdown-contrast-text-content: var(--text-lightalt);
811
+ --components-dropdown-dropdown-contrast-text-description: var(--text-lightalt);
812
+ --components-dropdown-dropdown-contrast-text-label: var(--text-darkalt);
813
+ --components-dropdown-dropdown-contrast-text-disabled: var(--text-neutral);
814
+ --components-dropdown-dropdown-standard-border-active: var(--stroke-contrast);
815
+ --components-dropdown-dropdown-standard-border-default: var(--stroke-subdued);
816
+ --components-dropdown-dropdown-standard-border-hover: var(--stroke-contrast);
817
+ --components-dropdown-dropdown-standard-border-negative: var(--stroke-highlightalt);
818
+ --components-dropdown-dropdown-standard-border-success: var(--stroke-successalt);
819
+ --components-dropdown-dropdown-standard-fill-default: var(--fill-background-standard-colorless);
820
+ --components-dropdown-dropdown-standard-fill-disabled: var(--fill-disabled-transparent);
821
+ --components-dropdown-dropdown-standard-fill-readonly: var(--fill-background-standard-colorless);
822
+ --components-dropdown-dropdown-standard-icon: var(--shape-lightalt);
823
+ --components-dropdown-dropdown-standard-icon-disabled: var(--shape-neutral);
824
+ --components-dropdown-dropdown-standard-text-content: var(--text-lightalt);
825
+ --components-dropdown-dropdown-standard-text-description: var(--text-lightalt);
826
+ --components-dropdown-dropdown-standard-text-label: var(--text-darkalt);
827
+ --components-dropdown-dropdown-standard-text-disabled: var(--text-neutral);
828
+ --components-dropdown-multiselect-contrast-border-danger: var(--stroke-negativealt);
829
+ --components-dropdown-multiselect-contrast-border-default: var(--stroke-subdued);
830
+ --components-dropdown-multiselect-contrast-border-interactive: var(--stroke-contrast);
831
+ --components-dropdown-multiselect-contrast-border-success: var(--stroke-successalt);
832
+ --components-dropdown-multiselect-contrast-fill-default: var(--fill-background-standard-colorless);
833
+ --components-dropdown-multiselect-contrast-fill-disabled: var(--fill-disabled-transparent);
834
+ --components-dropdown-multiselect-contrast-fill-readonly: var(--fill-background-standard-colorless);
835
+ --components-dropdown-multiselect-contrast-icon: var(--shape-lightalt);
836
+ --components-dropdown-multiselect-contrast-icon-disabled: var(--shape-neutral);
837
+ --components-dropdown-multiselect-contrast-text-content: var(--text-lightalt);
838
+ --components-dropdown-multiselect-contrast-text-description: var(--text-lightalt);
839
+ --components-dropdown-multiselect-contrast-text-label: var(--text-darkalt);
840
+ --components-dropdown-multiselect-contrast-text-disabled: var(--text-neutral);
841
+ --components-dropdown-multiselect-standard-border-default: var(--stroke-subdued);
842
+ --components-dropdown-multiselect-standard-border-interactive: var(--stroke-contrast);
843
+ --components-dropdown-multiselect-standard-border-negative: var(--stroke-negativealt);
844
+ --components-dropdown-multiselect-standard-border-success: var(--stroke-successalt);
845
+ --components-dropdown-multiselect-standard-fill-default: var(--fill-background-standard-colorless);
846
+ --components-dropdown-multiselect-standard-fill-disabled: var(--fill-disabled-transparent);
847
+ --components-dropdown-multiselect-standard-fill-readonly: var(--fill-background-standard-colorless);
848
+ --components-dropdown-multiselect-standard-icon: var(--shape-lightalt);
849
+ --components-dropdown-multiselect-standard-icon-disabled: var(--shape-neutral);
850
+ --components-dropdown-multiselect-standard-text-content: var(--text-lightalt);
851
+ --components-dropdown-multiselect-standard-text-description: var(--text-lightalt);
852
+ --components-dropdown-multiselect-standard-text-label: var(--text-darkalt);
853
+ --components-dropdown-multiselect-standard-text-disabled: var(--text-neutral);
854
+ }
855
+
856
+ /* DO NOT CHANGE!*/
857
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
858
+ [data-color-mode=light],
859
+ :root {
860
+ --basecolors-frame-contrast: var(--fill-background-contrast-light);
861
+ --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
862
+ --basecolors-frame-default: var(--fill-background-standard-light);
863
+ --basecolors-frame-elevated: var(--fill-background-standard-light);
864
+ --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
865
+ --basecolors-frame-subdued: var(--fill-background-subdued-light);
866
+ --basecolors-frame-tint: var(--fill-background-tint-light);
867
+ --basecolors-shape-accent: var(--shape-accent);
868
+ --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
869
+ --basecolors-shape-bicycle-default: var(--standard-bicycle);
870
+ --basecolors-shape-bus-contrast: var(--contrast-bus);
871
+ --basecolors-shape-bus-default: var(--standard-bus);
872
+ --basecolors-shape-cableway-contrast: var(--contrast-cableway);
873
+ --basecolors-shape-cableway-default: var(--standard-cableway);
874
+ --basecolors-shape-disabled: var(--shape-neutral);
875
+ --basecolors-shape-disabledalt: var(--shape-neutralalt);
876
+ --basecolors-shape-ferry-contrast: var(--contrast-ferry);
877
+ --basecolors-shape-ferry-default: var(--standard-ferry);
878
+ --basecolors-shape-funicular-contrast: var(--contrast-funicular);
879
+ --basecolors-shape-funicular-default: var(--standard-funicular);
880
+ --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
881
+ --basecolors-shape-helicopter-default: var(--standard-helicopter);
882
+ --basecolors-shape-highlight: var(--stroke-highlight);
883
+ --basecolors-shape-light: var(--shape-light);
884
+ --basecolors-shape-mask: var(--shape-light);
885
+ --basecolors-shape-maskalt: var(--shape-light);
886
+ --basecolors-shape-metro-contrast: var(--contrast-metro);
887
+ --basecolors-shape-metro-default: var(--standard-metro);
888
+ --basecolors-shape-mobility-contrast: var(--contrast-mobility);
889
+ --basecolors-shape-mobility-default: var(--standard-mobility);
890
+ --basecolors-shape-plane-contrast: var(--contrast-plane);
891
+ --basecolors-shape-plane-default: var(--standard-plane);
892
+ --basecolors-shape-subdued: var(--shape-subdued);
893
+ --basecolors-shape-subduedalt: var(--shape-subduedalt);
894
+ --basecolors-shape-taxi-contrast: var(--contrast-taxi);
895
+ --basecolors-shape-taxi-default: var(--standard-taxi);
896
+ --basecolors-shape-train-contrast: var(--contrast-train);
897
+ --basecolors-shape-train-default: var(--standard-train);
898
+ --basecolors-shape-tram-contrast: var(--contrast-tram);
899
+ --basecolors-shape-tram-default: var(--standard-tram);
900
+ --basecolors-shape-walk-contrast: var(--contrast-walk);
901
+ --basecolors-shape-walk-default: var(--standard-walk);
902
+ --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
903
+ --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
904
+ --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
905
+ --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
906
+ --basecolors-stroke-contrast: var(--stroke-contrast);
907
+ --basecolors-stroke-default: var(--stroke-accent);
908
+ --basecolors-stroke-disabled: var(--stroke-neutralalt);
909
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
910
+ --basecolors-stroke-focus-standard: var(--stroke-accent);
911
+ --basecolors-stroke-highlight: var(--stroke-highlight);
912
+ --basecolors-stroke-light: var(--stroke-light);
913
+ --basecolors-stroke-subdued: var(--stroke-subdued);
914
+ --basecolors-stroke-subduedalt: var(--stroke-neutral);
915
+ --basecolors-text-accent: var(--text-accent);
916
+ --basecolors-text-disabled: var(--text-neutral);
917
+ --basecolors-text-disabledalt: var(--text-neutralalt);
918
+ --basecolors-text-highlight: var(--stroke-highlight);
919
+ --basecolors-text-light: var(--text-light);
920
+ --basecolors-text-subdued: var(--text-subdued);
921
+ --basecolors-text-subduedalt: var(--text-subduedalt);
922
+ }
923
+
924
+ [data-color-mode=dark] {
925
+ --basecolors-frame-contrast: var(--fill-background-contrast-dark);
926
+ --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
927
+ --basecolors-frame-default: var(--fill-background-standard-dark);
928
+ --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
929
+ --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
930
+ --basecolors-frame-subdued: var(--fill-background-subdued-dark);
931
+ --basecolors-frame-tint: var(--fill-background-tint-dark);
932
+ --basecolors-shape-accent: var(--shape-lightalt);
933
+ --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
934
+ --basecolors-shape-bicycle-default: var(--dark-bicycle);
935
+ --basecolors-shape-bus-contrast: var(--dark-bus);
936
+ --basecolors-shape-bus-default: var(--dark-bus);
937
+ --basecolors-shape-cableway-contrast: var(--dark-cableway);
938
+ --basecolors-shape-cableway-default: var(--dark-cableway);
939
+ --basecolors-shape-disabled: var(--shape-neutralalt);
940
+ --basecolors-shape-disabledalt: var(--shape-darkalt);
941
+ --basecolors-shape-ferry-contrast: var(--dark-ferry);
942
+ --basecolors-shape-ferry-default: var(--dark-ferry);
943
+ --basecolors-shape-funicular-contrast: var(--dark-funicular);
944
+ --basecolors-shape-funicular-default: var(--dark-funicular);
945
+ --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
946
+ --basecolors-shape-helicopter-default: var(--dark-helicopter);
947
+ --basecolors-shape-highlight: var(--stroke-highlightalt);
948
+ --basecolors-shape-light: var(--shape-lightalt);
949
+ --basecolors-shape-mask: var(--fill-background-subdued-dark);
950
+ --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
951
+ --basecolors-shape-metro-contrast: var(--dark-metro);
952
+ --basecolors-shape-metro-default: var(--dark-metro);
953
+ --basecolors-shape-mobility-contrast: var(--dark-mobility);
954
+ --basecolors-shape-mobility-default: var(--dark-mobility);
955
+ --basecolors-shape-plane-contrast: var(--dark-plane);
956
+ --basecolors-shape-plane-default: var(--dark-plane);
957
+ --basecolors-shape-subdued: var(--shape-darkalt);
958
+ --basecolors-shape-subduedalt: var(--shape-darkalt);
959
+ --basecolors-shape-taxi-contrast: var(--dark-taxi);
960
+ --basecolors-shape-taxi-default: var(--dark-taxi);
961
+ --basecolors-shape-train-contrast: var(--dark-train);
962
+ --basecolors-shape-train-default: var(--dark-train);
963
+ --basecolors-shape-tram-contrast: var(--dark-tram);
964
+ --basecolors-shape-tram-default: var(--dark-tram);
965
+ --basecolors-shape-walk-contrast: var(--dark-walk);
966
+ --basecolors-shape-walk-default: var(--dark-walk);
967
+ --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
968
+ --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
969
+ --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
970
+ --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
971
+ --basecolors-stroke-contrast: var(--stroke-contrast);
972
+ --basecolors-stroke-default: var(--stroke-dark);
973
+ --basecolors-stroke-disabled: var(--stroke-neutral);
974
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
975
+ --basecolors-stroke-focus-standard: var(--stroke-contrast);
976
+ --basecolors-stroke-highlight: var(--stroke-highlightalt);
977
+ --basecolors-stroke-light: var(--stroke-dark);
978
+ --basecolors-stroke-subdued: var(--stroke-darkalt);
979
+ --basecolors-stroke-subduedalt: var(--stroke-darkalt);
980
+ --basecolors-text-accent: var(--text-lightalt);
981
+ --basecolors-text-disabled: var(--text-neutralalt);
982
+ --basecolors-text-disabledalt: var(--text-neutralalt);
983
+ --basecolors-text-highlight: var(--stroke-highlightalt);
984
+ --basecolors-text-light: var(--text-lightalt);
985
+ --basecolors-text-subdued: var(--text-darkalt);
986
+ --basecolors-text-subduedalt: var(--text-darkalt);
987
+ }
988
+
586
989
  :root {
587
990
  --eds-dropdown: 1;
588
991
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.3.1",
3
+ "version": "5.3.3",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.76",
31
- "@entur/button": "^3.2.11",
32
- "@entur/chip": "^0.6.67",
33
- "@entur/form": "^7.0.39",
34
- "@entur/icons": "^6.15.1",
35
- "@entur/loader": "^0.4.55",
36
- "@entur/tokens": "^3.13.0",
37
- "@entur/tooltip": "^2.6.48",
30
+ "@entur/a11y": "^0.2.77",
31
+ "@entur/button": "^3.2.13",
32
+ "@entur/chip": "^0.6.69",
33
+ "@entur/form": "^7.0.41",
34
+ "@entur/icons": "^6.15.2",
35
+ "@entur/loader": "^0.4.57",
36
+ "@entur/tokens": "^3.13.1",
37
+ "@entur/tooltip": "^2.6.50",
38
38
  "@entur/utils": "^0.10.0",
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^8.3.3"
41
41
  },
42
- "gitHead": "450b88a0baca11352d329ffa3fcd6c003ec1d338"
42
+ "gitHead": "c36e1121738a702fe5ed92cd3f26636d7a4ef026"
43
43
  }