@entur/tooltip 5.2.2 → 5.2.4

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 (3) hide show
  1. package/README.md +2 -2
  2. package/dist/styles.css +339 -335
  3. package/package.json +7 -7
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  This package contains the tooltip component.
4
4
 
5
- > 💡 Looking for the [documentation](https://design.entur.no/komponenter/feedback/tooltip)?
5
+ > 💡 Looking for the [documentation](https://linje.entur.no/komponenter/feedback/tooltip)?
6
6
 
7
7
  ## Installation
8
8
 
@@ -14,4 +14,4 @@ yarn add @entur/tooltip
14
14
 
15
15
  ## Usage
16
16
 
17
- Please refer to the [documentation](https://design.entur.no/komponenter/feedback/tooltip) for usage information.
17
+ Please refer to the [documentation](https://linje.entur.no/komponenter/feedback/tooltip) for usage information.
package/dist/styles.css CHANGED
@@ -2,6 +2,207 @@
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
3
  /* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ /* DO NOT CHANGE!*/
6
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
+ [data-color-mode=light],
8
+ :root {
9
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
10
+ --components-tooltip-popover-contrast-fill: #393d79;
11
+ --components-tooltip-popover-contrast-icon: #ffffff;
12
+ --components-tooltip-popover-contrast-text: #ffffff;
13
+ --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
14
+ --components-tooltip-popover-standard-fill: #f6f6f9;
15
+ --components-tooltip-popover-standard-icon: #181c56;
16
+ --components-tooltip-popover-standard-text: #181c56;
17
+ --components-tooltip-tooltip-contrast-fill: #ffffff;
18
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
19
+ --components-tooltip-tooltip-contrast-icon: #181c56;
20
+ --components-tooltip-tooltip-contrast-icon-negative: #181c56;
21
+ --components-tooltip-tooltip-contrast-text: #181c56;
22
+ --components-tooltip-tooltip-contrast-text-negative: #181c56;
23
+ --components-tooltip-tooltip-contrast-triangle: #ffffff;
24
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
25
+ --components-tooltip-tooltip-standard-fill: #181c56;
26
+ --components-tooltip-tooltip-standard-fill-negative: #ffcece;
27
+ --components-tooltip-tooltip-standard-icon: #ffffff;
28
+ --components-tooltip-tooltip-standard-icon-negative: #181c56;
29
+ --components-tooltip-tooltip-standard-text: #ffffff;
30
+ --components-tooltip-tooltip-standard-text-negative: #181c56;
31
+ --components-tooltip-tooltip-standard-triangle: #181c56;
32
+ --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
33
+ }
34
+
35
+ [data-color-mode=dark] {
36
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
37
+ --components-tooltip-popover-contrast-fill: #393a49;
38
+ --components-tooltip-popover-contrast-icon: #e5e5e9;
39
+ --components-tooltip-popover-contrast-text: #e5e5e9;
40
+ --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
41
+ --components-tooltip-popover-standard-fill: #393a49;
42
+ --components-tooltip-popover-standard-icon: #e5e5e9;
43
+ --components-tooltip-popover-standard-text: #e5e5e9;
44
+ --components-tooltip-tooltip-contrast-fill: #393a49;
45
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
46
+ --components-tooltip-tooltip-contrast-icon: #e5e5e9;
47
+ --components-tooltip-tooltip-contrast-icon-negative: #08091c;
48
+ --components-tooltip-tooltip-contrast-text: #e5e5e9;
49
+ --components-tooltip-tooltip-contrast-text-negative: #08091c;
50
+ --components-tooltip-tooltip-contrast-triangle: #393a49;
51
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
52
+ --components-tooltip-tooltip-standard-fill: #393a49;
53
+ --components-tooltip-tooltip-standard-fill-negative: #ff9494;
54
+ --components-tooltip-tooltip-standard-icon: #e5e5e9;
55
+ --components-tooltip-tooltip-standard-icon-negative: #08091c;
56
+ --components-tooltip-tooltip-standard-text: #e5e5e9;
57
+ --components-tooltip-tooltip-standard-text-negative: #08091c;
58
+ --components-tooltip-tooltip-standard-triangle: #393a49;
59
+ --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
60
+ }
61
+
62
+ /* DO NOT CHANGE!*/
63
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
64
+ /* DO NOT CHANGE!*/
65
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
66
+ [data-color-mode=light],
67
+ :root {
68
+ --basecolors-frame-contrast: #181c56;
69
+ --basecolors-frame-contrastalt: #393d79;
70
+ --basecolors-frame-contrastalt-2: #292b6a;
71
+ --basecolors-frame-default: #ffffff;
72
+ --basecolors-frame-elevated: #ffffff;
73
+ --basecolors-frame-elevatedalt: #f6f6f9;
74
+ --basecolors-frame-subdued: #d9dae8;
75
+ --basecolors-frame-tint: #f6f6f9;
76
+ --basecolors-shape-accent: #181c56;
77
+ --basecolors-shape-bicycle-contrast: #00db9b;
78
+ --basecolors-shape-bicycle-default: #388f76;
79
+ --basecolors-shape-bus-contrast: #ff6392;
80
+ --basecolors-shape-bus-default: #c5044e;
81
+ --basecolors-shape-cableway-contrast: #b482fb;
82
+ --basecolors-shape-cableway-default: #78469a;
83
+ --basecolors-shape-disabled: #6e6f73;
84
+ --basecolors-shape-disabledalt: #b6b8ba;
85
+ --basecolors-shape-ferry-contrast: #6fdfff;
86
+ --basecolors-shape-ferry-default: #0c6693;
87
+ --basecolors-shape-funicular-contrast: #b482fb;
88
+ --basecolors-shape-funicular-default: #78469a;
89
+ --basecolors-shape-helicopter-contrast: #fbafea;
90
+ --basecolors-shape-helicopter-default: #800664;
91
+ --basecolors-shape-highlight: #ff5959;
92
+ --basecolors-shape-light: #ffffff;
93
+ --basecolors-shape-mask: #ffffff;
94
+ --basecolors-shape-maskalt: #ffffff;
95
+ --basecolors-shape-metro-contrast: #f08901;
96
+ --basecolors-shape-metro-default: #bf5826;
97
+ --basecolors-shape-mobility-contrast: #00db9b;
98
+ --basecolors-shape-mobility-default: #388f76;
99
+ --basecolors-shape-plane-contrast: #fbafea;
100
+ --basecolors-shape-plane-default: #800664;
101
+ --basecolors-shape-subdued: #626493;
102
+ --basecolors-shape-subduedalt: #d9dae8;
103
+ --basecolors-shape-taxi-contrast: #ffe082;
104
+ --basecolors-shape-taxi-default: #3d3e40;
105
+ --basecolors-shape-train-contrast: #42a5f5;
106
+ --basecolors-shape-train-default: #00367f;
107
+ --basecolors-shape-tram-contrast: #b482fb;
108
+ --basecolors-shape-tram-default: #78469a;
109
+ --basecolors-shape-walk-contrast: #8284ab;
110
+ --basecolors-shape-walk-default: #8d8e9c;
111
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
112
+ --basecolors-shape-airportlinkbus-default: #800664;
113
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
114
+ --basecolors-shape-airportlinkrail-default: #800664;
115
+ --basecolors-stroke-contrast: #aeb7e2;
116
+ --basecolors-stroke-default: #181c56;
117
+ --basecolors-stroke-disabled: #949699;
118
+ --basecolors-stroke-focus-contrast: #aeb7e2;
119
+ --basecolors-stroke-focus-standard: #181c56;
120
+ --basecolors-stroke-highlight: #ff5959;
121
+ --basecolors-stroke-light: #ffffff;
122
+ --basecolors-stroke-subdued: #8284ab;
123
+ --basecolors-stroke-subduedalt: #e3e6e8;
124
+ --basecolors-text-accent: #181c56;
125
+ --basecolors-text-disabled: #6e6f73;
126
+ --basecolors-text-disabledalt: #b6b8ba;
127
+ --basecolors-text-highlight: #ff5959;
128
+ --basecolors-text-light: #ffffff;
129
+ --basecolors-text-subdued: #626493;
130
+ --basecolors-text-subduedalt: #d9dae8;
131
+ }
132
+
133
+ [data-color-mode=dark] {
134
+ --basecolors-frame-contrast: #212233;
135
+ --basecolors-frame-contrastalt: #141527;
136
+ --basecolors-frame-contrastalt-2: #08091c;
137
+ --basecolors-frame-default: #08091c;
138
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
139
+ --basecolors-frame-elevatedalt: #464755;
140
+ --basecolors-frame-subdued: #2d2e3e;
141
+ --basecolors-frame-tint: #141527;
142
+ --basecolors-shape-accent: #e5e5e9;
143
+ --basecolors-shape-bicycle-contrast: #4db295;
144
+ --basecolors-shape-bicycle-default: #4db295;
145
+ --basecolors-shape-bus-contrast: #ef7398;
146
+ --basecolors-shape-bus-default: #ef7398;
147
+ --basecolors-shape-cableway-contrast: #b898e5;
148
+ --basecolors-shape-cableway-default: #b898e5;
149
+ --basecolors-shape-disabled: #b6b8ba;
150
+ --basecolors-shape-disabledalt: #b3b4bd;
151
+ --basecolors-shape-ferry-contrast: #8ccfe2;
152
+ --basecolors-shape-ferry-default: #8ccfe2;
153
+ --basecolors-shape-funicular-contrast: #b898e5;
154
+ --basecolors-shape-funicular-default: #b898e5;
155
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
156
+ --basecolors-shape-helicopter-default: #f2b8e5;
157
+ --basecolors-shape-highlight: #ff9494;
158
+ --basecolors-shape-light: #e5e5e9;
159
+ --basecolors-shape-mask: #2d2e3e;
160
+ --basecolors-shape-maskalt: #393a49;
161
+ --basecolors-shape-metro-contrast: #dd973c;
162
+ --basecolors-shape-metro-default: #dd973c;
163
+ --basecolors-shape-mobility-contrast: #4db295;
164
+ --basecolors-shape-mobility-default: #4db295;
165
+ --basecolors-shape-plane-contrast: #f2b8e5;
166
+ --basecolors-shape-plane-default: #f2b8e5;
167
+ --basecolors-shape-subdued: #b3b4bd;
168
+ --basecolors-shape-subduedalt: #b3b4bd;
169
+ --basecolors-shape-taxi-contrast: #ffe082;
170
+ --basecolors-shape-taxi-default: #ffe082;
171
+ --basecolors-shape-train-contrast: #60a2d7;
172
+ --basecolors-shape-train-default: #60a2d7;
173
+ --basecolors-shape-tram-contrast: #b898e5;
174
+ --basecolors-shape-tram-default: #b898e5;
175
+ --basecolors-shape-walk-contrast: #8d8e9c;
176
+ --basecolors-shape-walk-default: #8d8e9c;
177
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
178
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
179
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
180
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
181
+ --basecolors-stroke-contrast: #aeb7e2;
182
+ --basecolors-stroke-default: #b3b4bd;
183
+ --basecolors-stroke-disabled: #e3e6e8;
184
+ --basecolors-stroke-focus-contrast: #aeb7e2;
185
+ --basecolors-stroke-focus-standard: #aeb7e2;
186
+ --basecolors-stroke-highlight: #ff9494;
187
+ --basecolors-stroke-light: #b3b4bd;
188
+ --basecolors-stroke-subdued: #81828f;
189
+ --basecolors-stroke-subduedalt: #949699;
190
+ --basecolors-text-accent: #e5e5e9;
191
+ --basecolors-text-disabled: #b6b8ba;
192
+ --basecolors-text-disabledalt: #b6b8ba;
193
+ --basecolors-text-highlight: #ff9494;
194
+ --basecolors-text-light: #e5e5e9;
195
+ --basecolors-text-subdued: #b3b4bd;
196
+ --basecolors-text-subduedalt: #b3b4bd;
197
+ }
198
+
199
+ :root {
200
+ --eds-tooltip: 1;
201
+ }
202
+ /* DO NOT CHANGE!*/
203
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
204
+ /* DO NOT CHANGE!*/
205
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
206
  a.eds-button {
6
207
  display: flex;
7
208
  align-items: center;
@@ -569,63 +770,142 @@ a.eds-button .eds-icon {
569
770
 
570
771
  /* DO NOT CHANGE!*/
571
772
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
572
- /* DO NOT CHANGE!*/
573
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
574
- /* DO NOT CHANGE!*/
575
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
576
- [data-color-mode=light],
577
- :root {
578
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
579
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
580
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
581
- --components-button-disabled-standard-fill: #cfd2d4;
582
- --components-button-disabled-standard-icon-disabled: #515254;
583
- --components-button-disabled-standard-text-disabled: #515254;
584
- --components-button-floating-contrast-active: #d9dae8;
585
- --components-button-floating-contrast-default: #ffffff;
586
- --components-button-floating-contrast-hover: #f6f6f9;
587
- --components-button-floating-contrast-icon: #181c56;
588
- --components-button-floating-contrast-text: #181c56;
589
- --components-button-floating-standard-active: #11143c;
590
- --components-button-floating-standard-default: #181c56;
591
- --components-button-floating-standard-hover: #393d79;
592
- --components-button-floating-standard-icon: #ffffff;
593
- --components-button-floating-standard-text: #ffffff;
594
- --components-button-iconbutton-contrast-active: #8794d4;
595
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
596
- --components-button-iconbutton-contrast-hover: #626493;
597
- --components-button-iconbutton-contrast-icon: #ffffff;
598
- --components-button-iconbutton-contrast-icon-active: #181c56;
599
- --components-button-iconbutton-contrast-text: #ffffff;
600
- --components-button-iconbutton-contrast-text-active: #181c56;
601
- --components-button-iconbutton-standard-active: #aeb7e2;
602
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
603
- --components-button-iconbutton-standard-hover: #d9ddf2;
604
- --components-button-iconbutton-standard-icon: #181c56;
605
- --components-button-iconbutton-standard-icon-active: #181c56;
606
- --components-button-iconbutton-standard-text: #181c56;
607
- --components-button-iconbutton-standard-text-active: #181c56;
608
- --components-button-negative-contrast-active: #ff9494;
609
- --components-button-negative-contrast-border: #ff9494;
610
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
611
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
612
- --components-button-negative-contrast-icon: #ffffff;
613
- --components-button-negative-contrast-icon-active: #181c56;
614
- --components-button-negative-contrast-text: #ffffff;
615
- --components-button-negative-contrast-text-active: #181c56;
616
- --components-button-negative-standard-active: #d31b1b;
617
- --components-button-negative-standard-border: #d31b1b;
618
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
619
- --components-button-negative-standard-hover: #ffcece;
620
- --components-button-negative-standard-icon: #d31b1b;
621
- --components-button-negative-standard-icon-active: #ffffff;
622
- --components-button-negative-standard-text: #d31b1b;
623
- --components-button-negative-standard-text-active: #ffffff;
624
- --components-button-primary-contrast-active: #8794d4;
625
- --components-button-primary-contrast-default: #aeb7e2;
626
- --components-button-primary-contrast-hover: #c7cdeb;
627
- --components-button-primary-contrast-icon: #181c56;
628
- --components-button-primary-contrast-text: #181c56;
773
+ .eds-icon-button {
774
+ border: 0.125rem solid transparent;
775
+ border-radius: 0.25rem;
776
+ background: none;
777
+ color: #181c56;
778
+ color: var(--components-button-iconbutton-standard-text);
779
+ cursor: pointer;
780
+ display: flex;
781
+ justify-content: center;
782
+ align-items: center;
783
+ font-size: 1rem;
784
+ padding: 0.5rem;
785
+ }
786
+
787
+ .eds-contrast .eds-icon-button {
788
+ color: #ffffff;
789
+ color: var(--components-button-iconbutton-contrast-text);
790
+ }
791
+
792
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
793
+ background-color: #ffffff;
794
+ background-color: var(--components-button-iconbutton-contrast-icon);
795
+ }
796
+
797
+ .eds-icon-button--size-small {
798
+ height: 1.5rem;
799
+ width: 1.5rem;
800
+ padding: 0;
801
+ }
802
+
803
+ .eds-icon-button:hover {
804
+ background-color: #d9ddf2;
805
+ background-color: var(--components-button-iconbutton-standard-hover);
806
+ }
807
+
808
+ .eds-contrast .eds-icon-button:hover {
809
+ background-color: #626493;
810
+ background-color: var(--components-button-iconbutton-contrast-hover);
811
+ }
812
+
813
+ .eds-icon-button:active {
814
+ background: #aeb7e2;
815
+ background: var(--components-button-iconbutton-standard-active);
816
+ color: #181c56;
817
+ color: var(--components-button-iconbutton-standard-text-active);
818
+ }
819
+
820
+ .eds-contrast .eds-icon-button:active {
821
+ background: #8794d4;
822
+ background: var(--components-button-iconbutton-contrast-active);
823
+ color: #181c56;
824
+ color: var(--components-button-iconbutton-contrast-text-active);
825
+ }
826
+
827
+ .eds-icon-button:focus-visible {
828
+ outline: 2px solid #181c56;
829
+ outline-color: #181c56;
830
+ outline-color: var(--basecolors-stroke-focus-standard);
831
+ outline-offset: 0.125rem;
832
+ }
833
+
834
+ .eds-contrast .eds-icon-button:focus-visible {
835
+ outline-color: #aeb7e2;
836
+ outline-color: var(--basecolors-stroke-focus-contrast);
837
+ }
838
+
839
+ .eds-icon-button--disabled {
840
+ opacity: 0.5;
841
+ pointer-events: none;
842
+ }
843
+
844
+ .eds-icon-button--disabled__wrapper {
845
+ cursor: not-allowed;
846
+ width: -moz-fit-content;
847
+ width: fit-content;
848
+ }
849
+
850
+ /* DO NOT CHANGE!*/
851
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
852
+ /* DO NOT CHANGE!*/
853
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
854
+ /* DO NOT CHANGE!*/
855
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
856
+ [data-color-mode=light],
857
+ :root {
858
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
859
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
860
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
861
+ --components-button-disabled-standard-fill: #cfd2d4;
862
+ --components-button-disabled-standard-icon-disabled: #515254;
863
+ --components-button-disabled-standard-text-disabled: #515254;
864
+ --components-button-floating-contrast-active: #d9dae8;
865
+ --components-button-floating-contrast-default: #ffffff;
866
+ --components-button-floating-contrast-hover: #f6f6f9;
867
+ --components-button-floating-contrast-icon: #181c56;
868
+ --components-button-floating-contrast-text: #181c56;
869
+ --components-button-floating-standard-active: #11143c;
870
+ --components-button-floating-standard-default: #181c56;
871
+ --components-button-floating-standard-hover: #393d79;
872
+ --components-button-floating-standard-icon: #ffffff;
873
+ --components-button-floating-standard-text: #ffffff;
874
+ --components-button-iconbutton-contrast-active: #8794d4;
875
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
876
+ --components-button-iconbutton-contrast-hover: #626493;
877
+ --components-button-iconbutton-contrast-icon: #ffffff;
878
+ --components-button-iconbutton-contrast-icon-active: #181c56;
879
+ --components-button-iconbutton-contrast-text: #ffffff;
880
+ --components-button-iconbutton-contrast-text-active: #181c56;
881
+ --components-button-iconbutton-standard-active: #aeb7e2;
882
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
883
+ --components-button-iconbutton-standard-hover: #d9ddf2;
884
+ --components-button-iconbutton-standard-icon: #181c56;
885
+ --components-button-iconbutton-standard-icon-active: #181c56;
886
+ --components-button-iconbutton-standard-text: #181c56;
887
+ --components-button-iconbutton-standard-text-active: #181c56;
888
+ --components-button-negative-contrast-active: #ff9494;
889
+ --components-button-negative-contrast-border: #ff9494;
890
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
891
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
892
+ --components-button-negative-contrast-icon: #ffffff;
893
+ --components-button-negative-contrast-icon-active: #181c56;
894
+ --components-button-negative-contrast-text: #ffffff;
895
+ --components-button-negative-contrast-text-active: #181c56;
896
+ --components-button-negative-standard-active: #d31b1b;
897
+ --components-button-negative-standard-border: #d31b1b;
898
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
899
+ --components-button-negative-standard-hover: #ffcece;
900
+ --components-button-negative-standard-icon: #d31b1b;
901
+ --components-button-negative-standard-icon-active: #ffffff;
902
+ --components-button-negative-standard-text: #d31b1b;
903
+ --components-button-negative-standard-text-active: #ffffff;
904
+ --components-button-primary-contrast-active: #8794d4;
905
+ --components-button-primary-contrast-default: #aeb7e2;
906
+ --components-button-primary-contrast-hover: #c7cdeb;
907
+ --components-button-primary-contrast-icon: #181c56;
908
+ --components-button-primary-contrast-text: #181c56;
629
909
  --components-button-primary-standard-active: #11143c;
630
910
  --components-button-primary-standard-default: #181c56;
631
911
  --components-button-primary-standard-hover: #393d79;
@@ -818,6 +1098,7 @@ a.eds-button .eds-icon {
818
1098
  :root {
819
1099
  --basecolors-frame-contrast: #181c56;
820
1100
  --basecolors-frame-contrastalt: #393d79;
1101
+ --basecolors-frame-contrastalt-2: #292b6a;
821
1102
  --basecolors-frame-default: #ffffff;
822
1103
  --basecolors-frame-elevated: #ffffff;
823
1104
  --basecolors-frame-elevatedalt: #f6f6f9;
@@ -883,6 +1164,7 @@ a.eds-button .eds-icon {
883
1164
  [data-color-mode=dark] {
884
1165
  --basecolors-frame-contrast: #212233;
885
1166
  --basecolors-frame-contrastalt: #141527;
1167
+ --basecolors-frame-contrastalt-2: #08091c;
886
1168
  --basecolors-frame-default: #08091c;
887
1169
  --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
888
1170
  --basecolors-frame-elevatedalt: #464755;
@@ -949,85 +1231,6 @@ a.eds-button .eds-icon {
949
1231
  --eds-button: 1;
950
1232
  }
951
1233
 
952
- /* DO NOT CHANGE!*/
953
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
954
- .eds-icon-button {
955
- border: 0.125rem solid transparent;
956
- border-radius: 0.25rem;
957
- background: none;
958
- color: #181c56;
959
- color: var(--components-button-iconbutton-standard-text);
960
- cursor: pointer;
961
- display: flex;
962
- justify-content: center;
963
- align-items: center;
964
- font-size: 1rem;
965
- padding: 0.5rem;
966
- }
967
-
968
- .eds-contrast .eds-icon-button {
969
- color: #ffffff;
970
- color: var(--components-button-iconbutton-contrast-text);
971
- }
972
-
973
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
974
- background-color: #ffffff;
975
- background-color: var(--components-button-iconbutton-contrast-icon);
976
- }
977
-
978
- .eds-icon-button--size-small {
979
- height: 1.5rem;
980
- width: 1.5rem;
981
- padding: 0;
982
- }
983
-
984
- .eds-icon-button:hover {
985
- background-color: #d9ddf2;
986
- background-color: var(--components-button-iconbutton-standard-hover);
987
- }
988
-
989
- .eds-contrast .eds-icon-button:hover {
990
- background-color: #626493;
991
- background-color: var(--components-button-iconbutton-contrast-hover);
992
- }
993
-
994
- .eds-icon-button:active {
995
- background: #aeb7e2;
996
- background: var(--components-button-iconbutton-standard-active);
997
- color: #181c56;
998
- color: var(--components-button-iconbutton-standard-text-active);
999
- }
1000
-
1001
- .eds-contrast .eds-icon-button:active {
1002
- background: #8794d4;
1003
- background: var(--components-button-iconbutton-contrast-active);
1004
- color: #181c56;
1005
- color: var(--components-button-iconbutton-contrast-text-active);
1006
- }
1007
-
1008
- .eds-icon-button:focus-visible {
1009
- outline: 2px solid #181c56;
1010
- outline-color: #181c56;
1011
- outline-color: var(--basecolors-stroke-focus-standard);
1012
- outline-offset: 0.125rem;
1013
- }
1014
-
1015
- .eds-contrast .eds-icon-button:focus-visible {
1016
- outline-color: #aeb7e2;
1017
- outline-color: var(--basecolors-stroke-focus-contrast);
1018
- }
1019
-
1020
- .eds-icon-button--disabled {
1021
- opacity: 0.5;
1022
- pointer-events: none;
1023
- }
1024
-
1025
- .eds-icon-button--disabled__wrapper {
1026
- cursor: not-allowed;
1027
- width: -moz-fit-content;
1028
- width: fit-content;
1029
- }
1030
-
1031
1234
  .eds-tooltip-wrapper {
1032
1235
  display: inline-block;
1033
1236
  position: relative;
@@ -1125,205 +1328,6 @@ a.eds-button .eds-icon {
1125
1328
  }
1126
1329
  /* DO NOT CHANGE!*/
1127
1330
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1128
- /* DO NOT CHANGE!*/
1129
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1130
- /* DO NOT CHANGE!*/
1131
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1132
- [data-color-mode=light],
1133
- :root {
1134
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1135
- --components-tooltip-popover-contrast-fill: #393d79;
1136
- --components-tooltip-popover-contrast-icon: #ffffff;
1137
- --components-tooltip-popover-contrast-text: #ffffff;
1138
- --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
1139
- --components-tooltip-popover-standard-fill: #f6f6f9;
1140
- --components-tooltip-popover-standard-icon: #181c56;
1141
- --components-tooltip-popover-standard-text: #181c56;
1142
- --components-tooltip-tooltip-contrast-fill: #ffffff;
1143
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1144
- --components-tooltip-tooltip-contrast-icon: #181c56;
1145
- --components-tooltip-tooltip-contrast-icon-negative: #181c56;
1146
- --components-tooltip-tooltip-contrast-text: #181c56;
1147
- --components-tooltip-tooltip-contrast-text-negative: #181c56;
1148
- --components-tooltip-tooltip-contrast-triangle: #ffffff;
1149
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1150
- --components-tooltip-tooltip-standard-fill: #181c56;
1151
- --components-tooltip-tooltip-standard-fill-negative: #ffcece;
1152
- --components-tooltip-tooltip-standard-icon: #ffffff;
1153
- --components-tooltip-tooltip-standard-icon-negative: #181c56;
1154
- --components-tooltip-tooltip-standard-text: #ffffff;
1155
- --components-tooltip-tooltip-standard-text-negative: #181c56;
1156
- --components-tooltip-tooltip-standard-triangle: #181c56;
1157
- --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
1158
- }
1159
-
1160
- [data-color-mode=dark] {
1161
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1162
- --components-tooltip-popover-contrast-fill: #393a49;
1163
- --components-tooltip-popover-contrast-icon: #e5e5e9;
1164
- --components-tooltip-popover-contrast-text: #e5e5e9;
1165
- --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
1166
- --components-tooltip-popover-standard-fill: #393a49;
1167
- --components-tooltip-popover-standard-icon: #e5e5e9;
1168
- --components-tooltip-popover-standard-text: #e5e5e9;
1169
- --components-tooltip-tooltip-contrast-fill: #393a49;
1170
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1171
- --components-tooltip-tooltip-contrast-icon: #e5e5e9;
1172
- --components-tooltip-tooltip-contrast-icon-negative: #08091c;
1173
- --components-tooltip-tooltip-contrast-text: #e5e5e9;
1174
- --components-tooltip-tooltip-contrast-text-negative: #08091c;
1175
- --components-tooltip-tooltip-contrast-triangle: #393a49;
1176
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1177
- --components-tooltip-tooltip-standard-fill: #393a49;
1178
- --components-tooltip-tooltip-standard-fill-negative: #ff9494;
1179
- --components-tooltip-tooltip-standard-icon: #e5e5e9;
1180
- --components-tooltip-tooltip-standard-icon-negative: #08091c;
1181
- --components-tooltip-tooltip-standard-text: #e5e5e9;
1182
- --components-tooltip-tooltip-standard-text-negative: #08091c;
1183
- --components-tooltip-tooltip-standard-triangle: #393a49;
1184
- --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
1185
- }
1186
-
1187
- /* DO NOT CHANGE!*/
1188
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1189
- /* DO NOT CHANGE!*/
1190
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1191
- [data-color-mode=light],
1192
- :root {
1193
- --basecolors-frame-contrast: #181c56;
1194
- --basecolors-frame-contrastalt: #393d79;
1195
- --basecolors-frame-default: #ffffff;
1196
- --basecolors-frame-elevated: #ffffff;
1197
- --basecolors-frame-elevatedalt: #f6f6f9;
1198
- --basecolors-frame-subdued: #d9dae8;
1199
- --basecolors-frame-tint: #f6f6f9;
1200
- --basecolors-shape-accent: #181c56;
1201
- --basecolors-shape-bicycle-contrast: #00db9b;
1202
- --basecolors-shape-bicycle-default: #388f76;
1203
- --basecolors-shape-bus-contrast: #ff6392;
1204
- --basecolors-shape-bus-default: #c5044e;
1205
- --basecolors-shape-cableway-contrast: #b482fb;
1206
- --basecolors-shape-cableway-default: #78469a;
1207
- --basecolors-shape-disabled: #6e6f73;
1208
- --basecolors-shape-disabledalt: #b6b8ba;
1209
- --basecolors-shape-ferry-contrast: #6fdfff;
1210
- --basecolors-shape-ferry-default: #0c6693;
1211
- --basecolors-shape-funicular-contrast: #b482fb;
1212
- --basecolors-shape-funicular-default: #78469a;
1213
- --basecolors-shape-helicopter-contrast: #fbafea;
1214
- --basecolors-shape-helicopter-default: #800664;
1215
- --basecolors-shape-highlight: #ff5959;
1216
- --basecolors-shape-light: #ffffff;
1217
- --basecolors-shape-mask: #ffffff;
1218
- --basecolors-shape-maskalt: #ffffff;
1219
- --basecolors-shape-metro-contrast: #f08901;
1220
- --basecolors-shape-metro-default: #bf5826;
1221
- --basecolors-shape-mobility-contrast: #00db9b;
1222
- --basecolors-shape-mobility-default: #388f76;
1223
- --basecolors-shape-plane-contrast: #fbafea;
1224
- --basecolors-shape-plane-default: #800664;
1225
- --basecolors-shape-subdued: #626493;
1226
- --basecolors-shape-subduedalt: #d9dae8;
1227
- --basecolors-shape-taxi-contrast: #ffe082;
1228
- --basecolors-shape-taxi-default: #3d3e40;
1229
- --basecolors-shape-train-contrast: #42a5f5;
1230
- --basecolors-shape-train-default: #00367f;
1231
- --basecolors-shape-tram-contrast: #b482fb;
1232
- --basecolors-shape-tram-default: #78469a;
1233
- --basecolors-shape-walk-contrast: #8284ab;
1234
- --basecolors-shape-walk-default: #8d8e9c;
1235
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
1236
- --basecolors-shape-airportlinkbus-default: #800664;
1237
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
1238
- --basecolors-shape-airportlinkrail-default: #800664;
1239
- --basecolors-stroke-contrast: #aeb7e2;
1240
- --basecolors-stroke-default: #181c56;
1241
- --basecolors-stroke-disabled: #949699;
1242
- --basecolors-stroke-focus-contrast: #aeb7e2;
1243
- --basecolors-stroke-focus-standard: #181c56;
1244
- --basecolors-stroke-highlight: #ff5959;
1245
- --basecolors-stroke-light: #ffffff;
1246
- --basecolors-stroke-subdued: #8284ab;
1247
- --basecolors-stroke-subduedalt: #e3e6e8;
1248
- --basecolors-text-accent: #181c56;
1249
- --basecolors-text-disabled: #6e6f73;
1250
- --basecolors-text-disabledalt: #b6b8ba;
1251
- --basecolors-text-highlight: #ff5959;
1252
- --basecolors-text-light: #ffffff;
1253
- --basecolors-text-subdued: #626493;
1254
- --basecolors-text-subduedalt: #d9dae8;
1255
- }
1256
-
1257
- [data-color-mode=dark] {
1258
- --basecolors-frame-contrast: #212233;
1259
- --basecolors-frame-contrastalt: #141527;
1260
- --basecolors-frame-default: #08091c;
1261
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1262
- --basecolors-frame-elevatedalt: #464755;
1263
- --basecolors-frame-subdued: #2d2e3e;
1264
- --basecolors-frame-tint: #141527;
1265
- --basecolors-shape-accent: #e5e5e9;
1266
- --basecolors-shape-bicycle-contrast: #4db295;
1267
- --basecolors-shape-bicycle-default: #4db295;
1268
- --basecolors-shape-bus-contrast: #ef7398;
1269
- --basecolors-shape-bus-default: #ef7398;
1270
- --basecolors-shape-cableway-contrast: #b898e5;
1271
- --basecolors-shape-cableway-default: #b898e5;
1272
- --basecolors-shape-disabled: #b6b8ba;
1273
- --basecolors-shape-disabledalt: #b3b4bd;
1274
- --basecolors-shape-ferry-contrast: #8ccfe2;
1275
- --basecolors-shape-ferry-default: #8ccfe2;
1276
- --basecolors-shape-funicular-contrast: #b898e5;
1277
- --basecolors-shape-funicular-default: #b898e5;
1278
- --basecolors-shape-helicopter-contrast: #f2b8e5;
1279
- --basecolors-shape-helicopter-default: #f2b8e5;
1280
- --basecolors-shape-highlight: #ff9494;
1281
- --basecolors-shape-light: #e5e5e9;
1282
- --basecolors-shape-mask: #2d2e3e;
1283
- --basecolors-shape-maskalt: #393a49;
1284
- --basecolors-shape-metro-contrast: #dd973c;
1285
- --basecolors-shape-metro-default: #dd973c;
1286
- --basecolors-shape-mobility-contrast: #4db295;
1287
- --basecolors-shape-mobility-default: #4db295;
1288
- --basecolors-shape-plane-contrast: #f2b8e5;
1289
- --basecolors-shape-plane-default: #f2b8e5;
1290
- --basecolors-shape-subdued: #b3b4bd;
1291
- --basecolors-shape-subduedalt: #b3b4bd;
1292
- --basecolors-shape-taxi-contrast: #ffe082;
1293
- --basecolors-shape-taxi-default: #ffe082;
1294
- --basecolors-shape-train-contrast: #60a2d7;
1295
- --basecolors-shape-train-default: #60a2d7;
1296
- --basecolors-shape-tram-contrast: #b898e5;
1297
- --basecolors-shape-tram-default: #b898e5;
1298
- --basecolors-shape-walk-contrast: #8d8e9c;
1299
- --basecolors-shape-walk-default: #8d8e9c;
1300
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1301
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
1302
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1303
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
1304
- --basecolors-stroke-contrast: #aeb7e2;
1305
- --basecolors-stroke-default: #b3b4bd;
1306
- --basecolors-stroke-disabled: #e3e6e8;
1307
- --basecolors-stroke-focus-contrast: #aeb7e2;
1308
- --basecolors-stroke-focus-standard: #aeb7e2;
1309
- --basecolors-stroke-highlight: #ff9494;
1310
- --basecolors-stroke-light: #b3b4bd;
1311
- --basecolors-stroke-subdued: #81828f;
1312
- --basecolors-stroke-subduedalt: #949699;
1313
- --basecolors-text-accent: #e5e5e9;
1314
- --basecolors-text-disabled: #b6b8ba;
1315
- --basecolors-text-disabledalt: #b6b8ba;
1316
- --basecolors-text-highlight: #ff9494;
1317
- --basecolors-text-light: #e5e5e9;
1318
- --basecolors-text-subdued: #b3b4bd;
1319
- --basecolors-text-subduedalt: #b3b4bd;
1320
- }
1321
-
1322
- :root {
1323
- --eds-tooltip: 1;
1324
- }
1325
- /* DO NOT CHANGE!*/
1326
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1327
1331
  .eds-popover {
1328
1332
  background: var(--components-tooltip-popover-standard-fill);
1329
1333
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/tooltip",
3
- "version": "5.2.2",
3
+ "version": "5.2.4",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/tooltip.esm.js",
@@ -27,11 +27,11 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.2",
31
- "@entur/icons": "^7.7.0",
32
- "@entur/layout": "^2.4.2",
33
- "@entur/tokens": "^3.17.6",
34
- "@entur/utils": "^0.12.2",
30
+ "@entur/button": "^3.3.4",
31
+ "@entur/icons": "^7.8.0",
32
+ "@entur/layout": "^3.1.0",
33
+ "@entur/tokens": "^3.19.0",
34
+ "@entur/utils": "^0.12.3",
35
35
  "@floating-ui/react": "^0.26.24",
36
36
  "@floating-ui/react-dom": "^2.1.0",
37
37
  "classnames": "^2.3.1"
@@ -39,5 +39,5 @@
39
39
  "devDependencies": {
40
40
  "dts-cli": "2.0.5"
41
41
  },
42
- "gitHead": "7c03f458e9c34f5e0fd4f2d23c8eb6a6e47fb669"
42
+ "gitHead": "bfd8f62e4735cc13d55e50bc8747535d72aaf679"
43
43
  }