@entur/tooltip 5.2.13-beta.8 → 5.2.13

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 (15) hide show
  1. package/dist/index.d.ts +108 -4
  2. package/dist/styles.css +843 -909
  3. package/dist/tooltip.cjs.js +308 -0
  4. package/dist/tooltip.cjs.js.map +1 -0
  5. package/dist/tooltip.esm.js +248 -278
  6. package/dist/tooltip.esm.js.map +1 -1
  7. package/package.json +26 -16
  8. package/dist/Popover.d.ts +0 -33
  9. package/dist/Tooltip.d.ts +0 -62
  10. package/dist/index.js +0 -8
  11. package/dist/tooltip.cjs.development.js +0 -347
  12. package/dist/tooltip.cjs.development.js.map +0 -1
  13. package/dist/tooltip.cjs.production.min.js +0 -2
  14. package/dist/tooltip.cjs.production.min.js.map +0 -1
  15. package/dist/utils.d.ts +0 -3
package/dist/styles.css CHANGED
@@ -2,94 +2,667 @@
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
- a.eds-button {
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- }
10
-
11
- a.eds-button .eds-icon {
12
- position: static;
13
- position: initial;
14
- }
15
-
16
- .eds-button {
17
- min-width: 9.5rem;
18
- width: -moz-max-content;
19
- width: max-content;
20
- min-height: 3rem;
21
- height: -moz-fit-content;
22
- height: fit-content;
23
- border-radius: 0.25rem;
24
- font-size: inherit;
25
- cursor: pointer;
26
- display: inline-block;
27
- -webkit-appearance: none;
28
- -moz-appearance: none;
29
- appearance: none;
30
- -webkit-text-decoration: none;
31
- -webkit-text-decoration: none;
32
- text-decoration: none;
33
- padding: 0 1rem;
34
- font-size: 1rem;
35
- line-height: 1.5rem;
36
- font-weight: 500;
37
- text-align: center;
38
- font-family: inherit;
39
- position: relative;
40
- vertical-align: top;
41
- background-color: var(--eds-button-background);
42
- border: 0.125rem solid var(--eds-button-border);
43
- color: var(--eds-button-text);
44
- }
45
-
46
- .eds-button:hover {
47
- background-color: var(--eds-button-background-hover);
48
- }
49
-
50
- .eds-button:active {
51
- background-color: var(--eds-button-background-active);
52
- border-color: var(--eds-button-border-active);
53
- color: var(--eds-button-text-active);
54
- }
55
-
56
- .eds-button:focus-visible {
57
- outline: 2px solid #181c56;
58
- outline-color: #181c56;
59
- outline-color: var(--basecolors-stroke-focus-standard);
60
- outline-offset: 0.125rem;
61
- }
62
-
63
- .eds-contrast .eds-button:focus-visible {
64
- outline-color: #aeb7e2;
65
- outline-color: var(--basecolors-stroke-focus-contrast);
66
- }
67
-
68
- .eds-button > .eds-button__loading-dots {
69
- width: 100%;
70
- }
71
-
72
- .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
73
- background: var(--eds-button-text);
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;
74
33
  }
75
34
 
76
- .eds-button .eds-icon {
77
- position: relative;
78
- top: 0.2em;
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;
79
60
  }
80
61
 
81
- .eds-button--leading-icon .eds-icon {
82
- margin-right: 0.75rem;
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;
83
131
  }
84
132
 
85
- .eds-button--trailing-icon .eds-icon {
86
- margin-left: 0.75rem;
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;
87
197
  }
88
198
 
89
- .eds-button--size-small {
90
- min-width: 5.75rem;
91
- min-height: 2rem;
92
- font-size: 0.875rem;
199
+ :root {
200
+ --eds-tooltip: 1;
201
+ }/* DO NOT CHANGE!*/
202
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
203
+ /* DO NOT CHANGE!*/
204
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
205
+ /* DO NOT CHANGE!*/
206
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
207
+ /* DO NOT CHANGE!*/
208
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
209
+ [data-color-mode=light],
210
+ :root {
211
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
212
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
213
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
214
+ --components-button-disabled-standard-fill: #cfd2d4;
215
+ --components-button-disabled-standard-icon-disabled: #515254;
216
+ --components-button-disabled-standard-text-disabled: #515254;
217
+ --components-button-floating-contrast-active: #d9dae8;
218
+ --components-button-floating-contrast-default: #ffffff;
219
+ --components-button-floating-contrast-hover: #f6f6f9;
220
+ --components-button-floating-contrast-icon: #181c56;
221
+ --components-button-floating-contrast-text: #181c56;
222
+ --components-button-floating-standard-active: #11143c;
223
+ --components-button-floating-standard-default: #181c56;
224
+ --components-button-floating-standard-hover: #393d79;
225
+ --components-button-floating-standard-icon: #ffffff;
226
+ --components-button-floating-standard-text: #ffffff;
227
+ --components-button-iconbutton-contrast-active: #8794d4;
228
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
229
+ --components-button-iconbutton-contrast-hover: #626493;
230
+ --components-button-iconbutton-contrast-icon: #ffffff;
231
+ --components-button-iconbutton-contrast-icon-active: #181c56;
232
+ --components-button-iconbutton-contrast-text: #ffffff;
233
+ --components-button-iconbutton-contrast-text-active: #181c56;
234
+ --components-button-iconbutton-standard-active: #aeb7e2;
235
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
236
+ --components-button-iconbutton-standard-hover: #d9ddf2;
237
+ --components-button-iconbutton-standard-icon: #181c56;
238
+ --components-button-iconbutton-standard-icon-active: #181c56;
239
+ --components-button-iconbutton-standard-text: #181c56;
240
+ --components-button-iconbutton-standard-text-active: #181c56;
241
+ --components-button-negative-contrast-active: #ff9494;
242
+ --components-button-negative-contrast-border: #ff9494;
243
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
244
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
245
+ --components-button-negative-contrast-icon: #ffffff;
246
+ --components-button-negative-contrast-icon-active: #181c56;
247
+ --components-button-negative-contrast-text: #ffffff;
248
+ --components-button-negative-contrast-text-active: #181c56;
249
+ --components-button-negative-standard-active: #d31b1b;
250
+ --components-button-negative-standard-border: #d31b1b;
251
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
252
+ --components-button-negative-standard-hover: #ffcece;
253
+ --components-button-negative-standard-icon: #d31b1b;
254
+ --components-button-negative-standard-icon-active: #ffffff;
255
+ --components-button-negative-standard-text: #d31b1b;
256
+ --components-button-negative-standard-text-active: #ffffff;
257
+ --components-button-primary-contrast-active: #8794d4;
258
+ --components-button-primary-contrast-default: #aeb7e2;
259
+ --components-button-primary-contrast-hover: #c7cdeb;
260
+ --components-button-primary-contrast-icon: #181c56;
261
+ --components-button-primary-contrast-text: #181c56;
262
+ --components-button-primary-standard-active: #11143c;
263
+ --components-button-primary-standard-default: #181c56;
264
+ --components-button-primary-standard-hover: #393d79;
265
+ --components-button-primary-standard-icon: #ffffff;
266
+ --components-button-primary-standard-text: #ffffff;
267
+ --components-button-secondary-contrast-active: #8794d4;
268
+ --components-button-secondary-contrast-border: #8284ab;
269
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
270
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
271
+ --components-button-secondary-contrast-hover: #626493;
272
+ --components-button-secondary-contrast-icon: #ffffff;
273
+ --components-button-secondary-contrast-icon-active: #181c56;
274
+ --components-button-secondary-contrast-text: #ffffff;
275
+ --components-button-secondary-contrast-text-active: #181c56;
276
+ --components-button-secondary-standard-active: #aeb7e2;
277
+ --components-button-secondary-standard-border: #8284ab;
278
+ --components-button-secondary-standard-border-active: #181c56;
279
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
280
+ --components-button-secondary-standard-hover: #d9ddf2;
281
+ --components-button-secondary-standard-icon: #181c56;
282
+ --components-button-secondary-standard-icon-active: #181c56;
283
+ --components-button-secondary-standard-text: #181c56;
284
+ --components-button-secondary-standard-text-active: #181c56;
285
+ --components-button-squaresecondary-contrast-active: #8794d4;
286
+ --components-button-squaresecondary-contrast-border: #8284ab;
287
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
288
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
289
+ --components-button-squaresecondary-contrast-hover: #d9ddf2;
290
+ --components-button-squaresecondary-contrast-icon-active: #181c56;
291
+ --components-button-squaresecondary-contrast-icon-default: #ffffff;
292
+ --components-button-squaresecondary-contrast-icon-hover: #181c56;
293
+ --components-button-squaresecondary-contrast-label: #ffffff;
294
+ --components-button-squaresecondary-standard-active: #aeb7e2;
295
+ --components-button-squaresecondary-standard-border: #8284ab;
296
+ --components-button-squaresecondary-standard-border-active: #181c56;
297
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
298
+ --components-button-squaresecondary-standard-hover: #d9ddf2;
299
+ --components-button-squaresecondary-standard-icon: #181c56;
300
+ --components-button-squaresecondary-standard-icon-active: #181c56;
301
+ --components-button-squaresecondary-standard-text: #181c56;
302
+ --components-button-squaresuccess-contrast-active: #37ab83;
303
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
304
+ --components-button-squaresuccess-contrast-default: #5ac39a;
305
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
306
+ --components-button-squaresuccess-contrast-icon: #181c56;
307
+ --components-button-squaresuccess-contrast-label: #ffffff;
308
+ --components-button-squaresuccess-standard-active: #37ab83;
309
+ --components-button-squaresuccess-standard-border: #181c56;
310
+ --components-button-squaresuccess-standard-default: #5ac39a;
311
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
312
+ --components-button-squaresuccess-standard-icon: #181c56;
313
+ --components-button-squaresuccess-standard-label: #181c56;
314
+ --components-button-success-contrast-active: #37ab83;
315
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
316
+ --components-button-success-contrast-default: #5ac39a;
317
+ --components-button-success-contrast-hover: #9cd9c2;
318
+ --components-button-success-contrast-icon: #181c56;
319
+ --components-button-success-contrast-text: #181c56;
320
+ --components-button-success-standard-active: #37ab83;
321
+ --components-button-success-standard-border: #181c56;
322
+ --components-button-success-standard-default: #5ac39a;
323
+ --components-button-success-standard-hover: #9cd9c2;
324
+ --components-button-success-standard-icon: #181c56;
325
+ --components-button-success-standard-text: #181c56;
326
+ }
327
+
328
+ [data-color-mode=dark] {
329
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
330
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
331
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
332
+ --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
333
+ --components-button-disabled-standard-icon-disabled: #b6b8ba;
334
+ --components-button-disabled-standard-text-disabled: #b6b8ba;
335
+ --components-button-floating-contrast-active: #8794d4;
336
+ --components-button-floating-contrast-default: #aeb7e2;
337
+ --components-button-floating-contrast-hover: #c7cdeb;
338
+ --components-button-floating-contrast-icon: #08091c;
339
+ --components-button-floating-contrast-text: #08091c;
340
+ --components-button-floating-standard-active: #8794d4;
341
+ --components-button-floating-standard-default: #aeb7e2;
342
+ --components-button-floating-standard-hover: #c7cdeb;
343
+ --components-button-floating-standard-icon: #08091c;
344
+ --components-button-floating-standard-text: #08091c;
345
+ --components-button-iconbutton-contrast-active: #8794d4;
346
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
347
+ --components-button-iconbutton-contrast-hover: #626493;
348
+ --components-button-iconbutton-contrast-icon: #e5e5e9;
349
+ --components-button-iconbutton-contrast-icon-active: #08091c;
350
+ --components-button-iconbutton-contrast-text: #e5e5e9;
351
+ --components-button-iconbutton-contrast-text-active: #08091c;
352
+ --components-button-iconbutton-standard-active: #8794d4;
353
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
354
+ --components-button-iconbutton-standard-hover: #626493;
355
+ --components-button-iconbutton-standard-icon: #e5e5e9;
356
+ --components-button-iconbutton-standard-icon-active: #08091c;
357
+ --components-button-iconbutton-standard-text: #e5e5e9;
358
+ --components-button-iconbutton-standard-text-active: #08091c;
359
+ --components-button-negative-contrast-active: #ff9494;
360
+ --components-button-negative-contrast-border: #ff9494;
361
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
362
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
363
+ --components-button-negative-contrast-icon: #e5e5e9;
364
+ --components-button-negative-contrast-icon-active: #08091c;
365
+ --components-button-negative-contrast-text: #e5e5e9;
366
+ --components-button-negative-contrast-text-active: #08091c;
367
+ --components-button-negative-standard-active: #ff9494;
368
+ --components-button-negative-standard-border: #ff9494;
369
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
370
+ --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
371
+ --components-button-negative-standard-icon: #e5e5e9;
372
+ --components-button-negative-standard-icon-active: #08091c;
373
+ --components-button-negative-standard-text: #e5e5e9;
374
+ --components-button-negative-standard-text-active: #08091c;
375
+ --components-button-primary-contrast-active: #8794d4;
376
+ --components-button-primary-contrast-default: #aeb7e2;
377
+ --components-button-primary-contrast-hover: #c7cdeb;
378
+ --components-button-primary-contrast-icon: #08091c;
379
+ --components-button-primary-contrast-text: #08091c;
380
+ --components-button-primary-standard-active: #8794d4;
381
+ --components-button-primary-standard-default: #aeb7e2;
382
+ --components-button-primary-standard-hover: #c7cdeb;
383
+ --components-button-primary-standard-icon: #08091c;
384
+ --components-button-primary-standard-text: #08091c;
385
+ --components-button-secondary-contrast-active: #8794d4;
386
+ --components-button-secondary-contrast-border: #8284ab;
387
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
388
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
389
+ --components-button-secondary-contrast-hover: #626493;
390
+ --components-button-secondary-contrast-icon: #e5e5e9;
391
+ --components-button-secondary-contrast-icon-active: #08091c;
392
+ --components-button-secondary-contrast-text: #e5e5e9;
393
+ --components-button-secondary-contrast-text-active: #08091c;
394
+ --components-button-secondary-standard-active: #8794d4;
395
+ --components-button-secondary-standard-border: #8284ab;
396
+ --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
397
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
398
+ --components-button-secondary-standard-hover: #626493;
399
+ --components-button-secondary-standard-icon: #e5e5e9;
400
+ --components-button-secondary-standard-icon-active: #08091c;
401
+ --components-button-secondary-standard-text: #e5e5e9;
402
+ --components-button-secondary-standard-text-active: #08091c;
403
+ --components-button-squaresecondary-contrast-active: #8794d4;
404
+ --components-button-squaresecondary-contrast-border: #8284ab;
405
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
406
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
407
+ --components-button-squaresecondary-contrast-hover: #626493;
408
+ --components-button-squaresecondary-contrast-icon-active: #08091c;
409
+ --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
410
+ --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
411
+ --components-button-squaresecondary-contrast-label: #e5e5e9;
412
+ --components-button-squaresecondary-standard-active: #8794d4;
413
+ --components-button-squaresecondary-standard-border: #8284ab;
414
+ --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
415
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
416
+ --components-button-squaresecondary-standard-hover: #626493;
417
+ --components-button-squaresecondary-standard-icon: #e5e5e9;
418
+ --components-button-squaresecondary-standard-icon-active: #08091c;
419
+ --components-button-squaresecondary-standard-text: #e5e5e9;
420
+ --components-button-squaresuccess-contrast-active: #5ac39a;
421
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
422
+ --components-button-squaresuccess-contrast-default: #5ac39a;
423
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
424
+ --components-button-squaresuccess-contrast-icon: #08091c;
425
+ --components-button-squaresuccess-contrast-label: #e5e5e9;
426
+ --components-button-squaresuccess-standard-active: #37ab83;
427
+ --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
428
+ --components-button-squaresuccess-standard-default: #5ac39a;
429
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
430
+ --components-button-squaresuccess-standard-icon: #08091c;
431
+ --components-button-squaresuccess-standard-label: #e5e5e9;
432
+ --components-button-success-contrast-active: #37ab83;
433
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
434
+ --components-button-success-contrast-default: #5ac39a;
435
+ --components-button-success-contrast-hover: #9cd9c2;
436
+ --components-button-success-contrast-icon: #08091c;
437
+ --components-button-success-contrast-text: #08091c;
438
+ --components-button-success-standard-active: #37ab83;
439
+ --components-button-success-standard-border: rgba(255, 255, 255, 0);
440
+ --components-button-success-standard-default: #5ac39a;
441
+ --components-button-success-standard-hover: #9cd9c2;
442
+ --components-button-success-standard-icon: #08091c;
443
+ --components-button-success-standard-text: #08091c;
444
+ }
445
+
446
+ /* DO NOT CHANGE!*/
447
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
448
+ /* DO NOT CHANGE!*/
449
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
450
+ [data-color-mode=light],
451
+ :root {
452
+ --basecolors-frame-contrast: #181c56;
453
+ --basecolors-frame-contrastalt: #393d79;
454
+ --basecolors-frame-contrastalt-2: #292b6a;
455
+ --basecolors-frame-default: #ffffff;
456
+ --basecolors-frame-elevated: #ffffff;
457
+ --basecolors-frame-elevatedalt: #f6f6f9;
458
+ --basecolors-frame-subdued: #d9dae8;
459
+ --basecolors-frame-tint: #f6f6f9;
460
+ --basecolors-shape-accent: #181c56;
461
+ --basecolors-shape-bicycle-contrast: #00db9b;
462
+ --basecolors-shape-bicycle-default: #388f76;
463
+ --basecolors-shape-bus-contrast: #ff6392;
464
+ --basecolors-shape-bus-default: #c5044e;
465
+ --basecolors-shape-cableway-contrast: #b482fb;
466
+ --basecolors-shape-cableway-default: #78469a;
467
+ --basecolors-shape-disabled: #6e6f73;
468
+ --basecolors-shape-disabledalt: #b6b8ba;
469
+ --basecolors-shape-ferry-contrast: #6fdfff;
470
+ --basecolors-shape-ferry-default: #0c6693;
471
+ --basecolors-shape-funicular-contrast: #b482fb;
472
+ --basecolors-shape-funicular-default: #78469a;
473
+ --basecolors-shape-helicopter-contrast: #fbafea;
474
+ --basecolors-shape-helicopter-default: #800664;
475
+ --basecolors-shape-highlight: #ff5959;
476
+ --basecolors-shape-light: #ffffff;
477
+ --basecolors-shape-mask: #ffffff;
478
+ --basecolors-shape-maskalt: #ffffff;
479
+ --basecolors-shape-metro-contrast: #f08901;
480
+ --basecolors-shape-metro-default: #bf5826;
481
+ --basecolors-shape-mobility-contrast: #00db9b;
482
+ --basecolors-shape-mobility-default: #388f76;
483
+ --basecolors-shape-plane-contrast: #fbafea;
484
+ --basecolors-shape-plane-default: #800664;
485
+ --basecolors-shape-subdued: #626493;
486
+ --basecolors-shape-subduedalt: #d9dae8;
487
+ --basecolors-shape-taxi-contrast: #ffe082;
488
+ --basecolors-shape-taxi-default: #3d3e40;
489
+ --basecolors-shape-train-contrast: #42a5f5;
490
+ --basecolors-shape-train-default: #00367f;
491
+ --basecolors-shape-tram-contrast: #b482fb;
492
+ --basecolors-shape-tram-default: #78469a;
493
+ --basecolors-shape-walk-contrast: #8284ab;
494
+ --basecolors-shape-walk-default: #8d8e9c;
495
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
496
+ --basecolors-shape-airportlinkbus-default: #800664;
497
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
498
+ --basecolors-shape-airportlinkrail-default: #800664;
499
+ --basecolors-stroke-contrast: #aeb7e2;
500
+ --basecolors-stroke-default: #181c56;
501
+ --basecolors-stroke-disabled: #949699;
502
+ --basecolors-stroke-focus-contrast: #aeb7e2;
503
+ --basecolors-stroke-focus-standard: #181c56;
504
+ --basecolors-stroke-highlight: #ff5959;
505
+ --basecolors-stroke-light: #ffffff;
506
+ --basecolors-stroke-subdued: #8284ab;
507
+ --basecolors-stroke-subduedalt: #e3e6e8;
508
+ --basecolors-text-accent: #181c56;
509
+ --basecolors-text-disabled: #6e6f73;
510
+ --basecolors-text-disabledalt: #b6b8ba;
511
+ --basecolors-text-highlight: #ff5959;
512
+ --basecolors-text-light: #ffffff;
513
+ --basecolors-text-subdued: #626493;
514
+ --basecolors-text-subduedalt: #d9dae8;
515
+ }
516
+
517
+ [data-color-mode=dark] {
518
+ --basecolors-frame-contrast: #212233;
519
+ --basecolors-frame-contrastalt: #141527;
520
+ --basecolors-frame-contrastalt-2: #08091c;
521
+ --basecolors-frame-default: #08091c;
522
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
523
+ --basecolors-frame-elevatedalt: #464755;
524
+ --basecolors-frame-subdued: #2d2e3e;
525
+ --basecolors-frame-tint: #141527;
526
+ --basecolors-shape-accent: #e5e5e9;
527
+ --basecolors-shape-bicycle-contrast: #4db295;
528
+ --basecolors-shape-bicycle-default: #4db295;
529
+ --basecolors-shape-bus-contrast: #ef7398;
530
+ --basecolors-shape-bus-default: #ef7398;
531
+ --basecolors-shape-cableway-contrast: #b898e5;
532
+ --basecolors-shape-cableway-default: #b898e5;
533
+ --basecolors-shape-disabled: #b6b8ba;
534
+ --basecolors-shape-disabledalt: #b3b4bd;
535
+ --basecolors-shape-ferry-contrast: #8ccfe2;
536
+ --basecolors-shape-ferry-default: #8ccfe2;
537
+ --basecolors-shape-funicular-contrast: #b898e5;
538
+ --basecolors-shape-funicular-default: #b898e5;
539
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
540
+ --basecolors-shape-helicopter-default: #f2b8e5;
541
+ --basecolors-shape-highlight: #ff9494;
542
+ --basecolors-shape-light: #e5e5e9;
543
+ --basecolors-shape-mask: #2d2e3e;
544
+ --basecolors-shape-maskalt: #393a49;
545
+ --basecolors-shape-metro-contrast: #dd973c;
546
+ --basecolors-shape-metro-default: #dd973c;
547
+ --basecolors-shape-mobility-contrast: #4db295;
548
+ --basecolors-shape-mobility-default: #4db295;
549
+ --basecolors-shape-plane-contrast: #f2b8e5;
550
+ --basecolors-shape-plane-default: #f2b8e5;
551
+ --basecolors-shape-subdued: #b3b4bd;
552
+ --basecolors-shape-subduedalt: #b3b4bd;
553
+ --basecolors-shape-taxi-contrast: #ffe082;
554
+ --basecolors-shape-taxi-default: #ffe082;
555
+ --basecolors-shape-train-contrast: #60a2d7;
556
+ --basecolors-shape-train-default: #60a2d7;
557
+ --basecolors-shape-tram-contrast: #b898e5;
558
+ --basecolors-shape-tram-default: #b898e5;
559
+ --basecolors-shape-walk-contrast: #8d8e9c;
560
+ --basecolors-shape-walk-default: #8d8e9c;
561
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
562
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
563
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
564
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
565
+ --basecolors-stroke-contrast: #aeb7e2;
566
+ --basecolors-stroke-default: #b3b4bd;
567
+ --basecolors-stroke-disabled: #e3e6e8;
568
+ --basecolors-stroke-focus-contrast: #aeb7e2;
569
+ --basecolors-stroke-focus-standard: #aeb7e2;
570
+ --basecolors-stroke-highlight: #ff9494;
571
+ --basecolors-stroke-light: #b3b4bd;
572
+ --basecolors-stroke-subdued: #81828f;
573
+ --basecolors-stroke-subduedalt: #949699;
574
+ --basecolors-text-accent: #e5e5e9;
575
+ --basecolors-text-disabled: #b6b8ba;
576
+ --basecolors-text-disabledalt: #b6b8ba;
577
+ --basecolors-text-highlight: #ff9494;
578
+ --basecolors-text-light: #e5e5e9;
579
+ --basecolors-text-subdued: #b3b4bd;
580
+ --basecolors-text-subduedalt: #b3b4bd;
581
+ }
582
+
583
+ :root {
584
+ --eds-button: 1;
585
+ } /* DO NOT CHANGE!*/
586
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
587
+ a.eds-button {
588
+ display: flex;
589
+ align-items: center;
590
+ justify-content: center;
591
+ }
592
+
593
+ a.eds-button .eds-icon {
594
+ position: unset;
595
+ }
596
+
597
+ .eds-button {
598
+ min-width: 9.5rem;
599
+ width: max-content;
600
+ min-height: 3rem;
601
+ height: fit-content;
602
+ border-radius: 0.25rem;
603
+ font-size: inherit;
604
+ cursor: pointer;
605
+ display: inline-block;
606
+ appearance: none;
607
+ text-decoration: none;
608
+ padding: 0 1rem;
609
+ font-size: 1rem;
610
+ line-height: 1.5rem;
611
+ font-weight: 500;
612
+ text-align: center;
613
+ font-family: inherit;
614
+ position: relative;
615
+ vertical-align: top;
616
+ background-color: var(--eds-button-background);
617
+ border: 0.125rem solid var(--eds-button-border);
618
+ color: var(--eds-button-text);
619
+ }
620
+
621
+ .eds-button:hover {
622
+ background-color: var(--eds-button-background-hover);
623
+ }
624
+
625
+ .eds-button:active {
626
+ background-color: var(--eds-button-background-active);
627
+ border-color: var(--eds-button-border-active);
628
+ color: var(--eds-button-text-active);
629
+ }
630
+
631
+ .eds-button:focus-visible {
632
+ outline: 2px solid #181c56;
633
+ outline-color: var(--basecolors-stroke-focus-standard);
634
+ outline-offset: 0.125rem;
635
+ }
636
+
637
+ .eds-contrast .eds-button:focus-visible {
638
+ outline-color: var(--basecolors-stroke-focus-contrast);
639
+ }
640
+
641
+ .eds-button > .eds-button__loading-dots {
642
+ width: 100%;
643
+ }
644
+
645
+ .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
646
+ background: var(--eds-button-text);
647
+ }
648
+
649
+ .eds-button .eds-icon {
650
+ position: relative;
651
+ top: 0.2em;
652
+ }
653
+
654
+ .eds-button--leading-icon .eds-icon {
655
+ margin-right: 0.75rem;
656
+ }
657
+
658
+ .eds-button--trailing-icon .eds-icon {
659
+ margin-left: 0.75rem;
660
+ }
661
+
662
+ .eds-button--size-small {
663
+ min-width: 5.75rem;
664
+ min-height: 2rem;
665
+ font-size: 0.875rem;
93
666
  line-height: 1.375rem;
94
667
  }
95
668
 
@@ -237,23 +810,17 @@ a.eds-button .eds-icon {
237
810
  }
238
811
 
239
812
  .eds-button[disabled]:not(.eds-button--loading) {
240
- background: #cfd2d4;
241
813
  background: var(--components-button-disabled-standard-fill);
242
- color: #515254;
243
814
  color: var(--components-button-disabled-standard-text-disabled);
244
815
  border-color: transparent;
245
816
  cursor: not-allowed;
246
817
  }
247
818
 
248
819
  .eds-contrast .eds-button[disabled]:not(.eds-button--loading) {
249
- background-color: rgba(207, 210, 212, 0.1490196078);
250
820
  background-color: var(--components-button-disabled-contrast-fill);
251
- color: #b6b8ba;
252
821
  color: var(--components-button-disabled-contrast-text-disabled);
253
822
  border-color: transparent;
254
- }
255
-
256
- /* DO NOT CHANGE!*/
823
+ } /* DO NOT CHANGE!*/
257
824
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
258
825
  .eds-button-group .eds-button {
259
826
  margin-right: 0.75rem;
@@ -262,21 +829,15 @@ a.eds-button .eds-icon {
262
829
 
263
830
  .eds-button-group .eds-button:only-child {
264
831
  margin: 0;
265
- }
266
-
267
- /* DO NOT CHANGE!*/
832
+ } /* DO NOT CHANGE!*/
268
833
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
269
834
  .eds-floating-button {
270
835
  align-items: center;
271
- -webkit-appearance: none;
272
- -moz-appearance: none;
273
836
  appearance: none;
274
- background: #181c56;
275
837
  background: var(--components-button-floating-standard-default);
276
838
  border: 0;
277
839
  border-radius: 1.5rem;
278
840
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
279
- color: #ffffff;
280
841
  color: var(--components-button-floating-standard-text);
281
842
  cursor: pointer;
282
843
  display: flex;
@@ -297,42 +858,34 @@ a.eds-button .eds-icon {
297
858
  }
298
859
 
299
860
  .eds-floating-button:hover {
300
- background-color: #393d79;
301
861
  background-color: var(--components-button-floating-standard-hover);
302
862
  }
303
863
 
304
864
  .eds-floating-button:active {
305
- background-color: #11143c;
306
865
  background-color: var(--components-button-floating-standard-active);
307
866
  }
308
867
 
309
868
  .eds-floating-button:focus-visible {
310
869
  outline: 2px solid #181c56;
311
- outline-color: #181c56;
312
870
  outline-color: var(--basecolors-stroke-focus-standard);
313
871
  outline-offset: 0.125rem;
314
872
  }
315
873
 
316
874
  .eds-contrast .eds-floating-button:focus-visible {
317
- outline-color: #aeb7e2;
318
875
  outline-color: var(--basecolors-stroke-focus-contrast);
319
876
  }
320
877
 
321
878
  .eds-contrast .eds-floating-button {
322
- background: #ffffff;
323
879
  background: var(--components-button-floating-contrast-default);
324
- color: #181c56;
325
880
  color: var(--components-button-floating-contrast-text);
326
881
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
327
882
  }
328
883
 
329
884
  .eds-contrast .eds-floating-button:hover {
330
- background-color: #f6f6f9;
331
885
  background-color: var(--components-button-floating-contrast-hover);
332
886
  }
333
887
 
334
888
  .eds-contrast .eds-floating-button:active {
335
- background-color: #d9dae8;
336
889
  background-color: var(--components-button-floating-contrast-active);
337
890
  }
338
891
 
@@ -354,610 +907,210 @@ a.eds-button .eds-icon {
354
907
  }
355
908
 
356
909
  .eds-floating-button--extended > *:first-child {
357
- margin-left: 0;
358
- }
359
-
360
- .eds-floating-button--extended > *:last-child {
361
- margin-right: 0;
362
- }
363
-
364
- /* DO NOT CHANGE!*/
365
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
366
- .eds-square-button {
367
- align-items: center;
368
- -webkit-appearance: none;
369
- -moz-appearance: none;
370
- appearance: none;
371
- background: transparent;
372
- border: 0;
373
- border-radius: 0.25rem;
374
- cursor: pointer;
375
- font-size: 1rem;
376
- display: inline-flex;
377
- font-family: inherit;
378
- font-weight: 500;
379
- justify-content: center;
380
- padding: 0;
381
- -webkit-text-decoration: none;
382
- -webkit-text-decoration: none;
383
- text-decoration: none;
384
- }
385
-
386
- .eds-square-button:focus-visible {
387
- outline: none;
388
- }
389
-
390
- .eds-square-button:focus-visible .eds-square-button__button {
391
- outline: 2px solid #181c56;
392
- outline-color: #181c56;
393
- outline-color: var(--basecolors-stroke-focus-standard);
394
- outline-offset: 0.125rem;
395
- }
396
-
397
- .eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
398
- outline-color: #aeb7e2;
399
- outline-color: var(--basecolors-stroke-focus-contrast);
400
- }
401
-
402
- .eds-square-button[disabled]:not(.eds-square-button--loading) {
403
- cursor: not-allowed;
404
- }
405
-
406
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
407
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
408
- border-color: #949699;
409
- border-color: var(--basecolors-stroke-disabled);
410
- border-style: dashed;
411
- background-color: transparent;
412
- color: #6e6f73;
413
- color: var(--basecolors-text-disabled);
414
- }
415
-
416
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
417
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
418
- color: #6e6f73;
419
- color: var(--basecolors-text-disabled);
420
- }
421
-
422
- .eds-square-button.eds-square-button--loading {
423
- opacity: 1;
424
- }
425
-
426
- .eds-square-button__button {
427
- align-items: center;
428
- background-color: var(--button-background);
429
- border: 0.125rem solid var(--border-color);
430
- border-radius: 0.25rem;
431
- color: var(--icon-color);
432
- display: inline-flex;
433
- height: 3rem;
434
- justify-content: center;
435
- line-height: 1.5rem;
436
- padding: 0;
437
- text-align: center;
438
- -webkit-text-decoration: none;
439
- -webkit-text-decoration: none;
440
- text-decoration: none;
441
- vertical-align: top;
442
- position: relative;
443
- width: 3rem;
444
- }
445
-
446
- .eds-square-button__label {
447
- color: var(--label-color);
448
- }
449
-
450
- .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
451
- margin-left: 1rem;
452
- }
453
-
454
- .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
455
- background: var(--icon-color);
456
- }
457
-
458
- .eds-square-button--secondary {
459
- --button-background: var(--components-button-squaresecondary-standard-default);
460
- --border-color: var(--components-button-squaresecondary-standard-border);
461
- --icon-color: var(--components-button-squaresecondary-standard-icon);
462
- --label-color: var(--components-button-squaresecondary-standard-text);
463
- }
464
-
465
- .eds-square-button--secondary:hover {
466
- --button-background: var(--components-button-squaresecondary-standard-hover);
467
- }
468
-
469
- .eds-square-button--secondary:active {
470
- --button-background: var(--components-button-squaresecondary-standard-active);
471
- --border-color: var(--components-button-squaresecondary-standard-border-active);
472
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
473
- }
474
-
475
- .eds-contrast .eds-square-button--secondary {
476
- --button-background: var(--components-button-squaresecondary-contrast-default);
477
- --border-color: var(--components-button-squaresecondary-contrast-border);
478
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
479
- --label-color: var(--components-button-squaresecondary-contrast-label);
480
- }
481
-
482
- .eds-contrast .eds-square-button--secondary:hover {
483
- --button-background: var(--components-button-squaresecondary-contrast-hover);
484
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
485
- }
486
-
487
- .eds-contrast .eds-square-button--secondary:active {
488
- --button-background: var(--components-button-squaresecondary-contrast-active);
489
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
490
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
491
- }
492
-
493
- .eds-square-button--success {
494
- --button-background: var(--components-button-squaresuccess-standard-default);
495
- --border-color: var(--components-button-squaresuccess-standard-border);
496
- --icon-color: var(--components-button-squaresuccess-standard-icon);
497
- --label-color: var(--components-button-squaresuccess-standard-label);
498
- }
499
-
500
- .eds-square-button--success:hover {
501
- --button-background: var(--components-button-squaresuccess-standard-hover);
502
- }
503
-
504
- .eds-square-button--success:active {
505
- --button-background: var(--components-button-squaresuccess-standard-active);
506
- }
507
-
508
- .eds-contrast .eds-square-button--success {
509
- --button-background: var(--components-button-squaresuccess-contrast-default);
510
- --border-color: var(--components-button-squaresuccess-contrast-border);
511
- --icon-color: var(--components-button-squaresuccess-contrast-icon);
512
- --label-color: var(--components-button-squaresuccess-contrast-label);
513
- }
514
-
515
- .eds-contrast .eds-square-button--success:hover {
516
- --button-background: var(--components-button-squaresuccess-contrast-hover);
517
- }
518
-
519
- .eds-contrast .eds-square-button--success:active {
520
- --button-background: var(--components-button-squaresuccess-contrast-active);
521
- }
522
-
523
- .eds-square-button--tertiary {
524
- --button-background: var(--components-button-squaresecondary-standard-default);
525
- --border-color: var(--components-button-squaresecondary-standard-border);
526
- --icon-color: var(--components-button-squaresecondary-standard-icon);
527
- --label-color: var(--components-button-squaresecondary-standard-text);
528
- font-size: 0.875rem;
529
- }
530
-
531
- .eds-square-button--tertiary:hover {
532
- --button-background: var(--components-button-squaresecondary-standard-hover);
533
- }
534
-
535
- .eds-square-button--tertiary:active {
536
- --button-background: var(--components-button-squaresecondary-standard-active);
537
- --border-color: var(--components-button-squaresecondary-standard-border-active);
538
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
539
- }
540
-
541
- .eds-contrast .eds-square-button--tertiary {
542
- --button-background: var(--components-button-squaresecondary-contrast-default);
543
- --border-color: var(--components-button-squaresecondary-contrast-border);
544
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
545
- --label-color: var(--components-button-squaresecondary-contrast-label);
546
- }
547
-
548
- .eds-contrast .eds-square-button--tertiary:hover {
549
- --button-background: var(--components-button-squaresecondary-contrast-hover);
550
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
551
- }
552
-
553
- .eds-contrast .eds-square-button--tertiary:active {
554
- --button-background: var(--components-button-squaresecondary-contrast-active);
555
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
556
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
557
- }
558
-
559
- .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
560
- .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
561
- margin-left: 0.75rem;
562
- }
563
-
564
- .eds-square-button--tertiary .eds-square-button__button {
565
- height: 2rem;
566
- width: 2rem;
567
- border-width: 0.0625rem;
910
+ margin-left: 0;
568
911
  }
569
912
 
570
- /* DO NOT CHANGE!*/
571
- /* 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!*/
913
+ .eds-floating-button--extended > *:last-child {
914
+ margin-right: 0;
915
+ } /* DO NOT CHANGE!*/
575
916
  /* 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;
629
- --components-button-primary-standard-active: #11143c;
630
- --components-button-primary-standard-default: #181c56;
631
- --components-button-primary-standard-hover: #393d79;
632
- --components-button-primary-standard-icon: #ffffff;
633
- --components-button-primary-standard-text: #ffffff;
634
- --components-button-secondary-contrast-active: #8794d4;
635
- --components-button-secondary-contrast-border: #8284ab;
636
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
637
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
638
- --components-button-secondary-contrast-hover: #626493;
639
- --components-button-secondary-contrast-icon: #ffffff;
640
- --components-button-secondary-contrast-icon-active: #181c56;
641
- --components-button-secondary-contrast-text: #ffffff;
642
- --components-button-secondary-contrast-text-active: #181c56;
643
- --components-button-secondary-standard-active: #aeb7e2;
644
- --components-button-secondary-standard-border: #8284ab;
645
- --components-button-secondary-standard-border-active: #181c56;
646
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
647
- --components-button-secondary-standard-hover: #d9ddf2;
648
- --components-button-secondary-standard-icon: #181c56;
649
- --components-button-secondary-standard-icon-active: #181c56;
650
- --components-button-secondary-standard-text: #181c56;
651
- --components-button-secondary-standard-text-active: #181c56;
652
- --components-button-squaresecondary-contrast-active: #8794d4;
653
- --components-button-squaresecondary-contrast-border: #8284ab;
654
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
655
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
656
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
657
- --components-button-squaresecondary-contrast-icon-active: #181c56;
658
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
659
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
660
- --components-button-squaresecondary-contrast-label: #ffffff;
661
- --components-button-squaresecondary-standard-active: #aeb7e2;
662
- --components-button-squaresecondary-standard-border: #8284ab;
663
- --components-button-squaresecondary-standard-border-active: #181c56;
664
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
665
- --components-button-squaresecondary-standard-hover: #d9ddf2;
666
- --components-button-squaresecondary-standard-icon: #181c56;
667
- --components-button-squaresecondary-standard-icon-active: #181c56;
668
- --components-button-squaresecondary-standard-text: #181c56;
669
- --components-button-squaresuccess-contrast-active: #37ab83;
670
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
671
- --components-button-squaresuccess-contrast-default: #5ac39a;
672
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
673
- --components-button-squaresuccess-contrast-icon: #181c56;
674
- --components-button-squaresuccess-contrast-label: #ffffff;
675
- --components-button-squaresuccess-standard-active: #37ab83;
676
- --components-button-squaresuccess-standard-border: #181c56;
677
- --components-button-squaresuccess-standard-default: #5ac39a;
678
- --components-button-squaresuccess-standard-hover: #9cd9c2;
679
- --components-button-squaresuccess-standard-icon: #181c56;
680
- --components-button-squaresuccess-standard-label: #181c56;
681
- --components-button-success-contrast-active: #37ab83;
682
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
683
- --components-button-success-contrast-default: #5ac39a;
684
- --components-button-success-contrast-hover: #9cd9c2;
685
- --components-button-success-contrast-icon: #181c56;
686
- --components-button-success-contrast-text: #181c56;
687
- --components-button-success-standard-active: #37ab83;
688
- --components-button-success-standard-border: #181c56;
689
- --components-button-success-standard-default: #5ac39a;
690
- --components-button-success-standard-hover: #9cd9c2;
691
- --components-button-success-standard-icon: #181c56;
692
- --components-button-success-standard-text: #181c56;
917
+ .eds-square-button {
918
+ align-items: center;
919
+ appearance: none;
920
+ background: transparent;
921
+ border: 0;
922
+ border-radius: 0.25rem;
923
+ cursor: pointer;
924
+ font-size: 1rem;
925
+ display: inline-flex;
926
+ font-family: inherit;
927
+ font-weight: 500;
928
+ justify-content: center;
929
+ padding: 0;
930
+ text-decoration: none;
693
931
  }
694
932
 
695
- [data-color-mode=dark] {
696
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
697
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
698
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
699
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
700
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
701
- --components-button-disabled-standard-text-disabled: #b6b8ba;
702
- --components-button-floating-contrast-active: #8794d4;
703
- --components-button-floating-contrast-default: #aeb7e2;
704
- --components-button-floating-contrast-hover: #c7cdeb;
705
- --components-button-floating-contrast-icon: #08091c;
706
- --components-button-floating-contrast-text: #08091c;
707
- --components-button-floating-standard-active: #8794d4;
708
- --components-button-floating-standard-default: #aeb7e2;
709
- --components-button-floating-standard-hover: #c7cdeb;
710
- --components-button-floating-standard-icon: #08091c;
711
- --components-button-floating-standard-text: #08091c;
712
- --components-button-iconbutton-contrast-active: #8794d4;
713
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
714
- --components-button-iconbutton-contrast-hover: #626493;
715
- --components-button-iconbutton-contrast-icon: #e5e5e9;
716
- --components-button-iconbutton-contrast-icon-active: #08091c;
717
- --components-button-iconbutton-contrast-text: #e5e5e9;
718
- --components-button-iconbutton-contrast-text-active: #08091c;
719
- --components-button-iconbutton-standard-active: #8794d4;
720
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
721
- --components-button-iconbutton-standard-hover: #626493;
722
- --components-button-iconbutton-standard-icon: #e5e5e9;
723
- --components-button-iconbutton-standard-icon-active: #08091c;
724
- --components-button-iconbutton-standard-text: #e5e5e9;
725
- --components-button-iconbutton-standard-text-active: #08091c;
726
- --components-button-negative-contrast-active: #ff9494;
727
- --components-button-negative-contrast-border: #ff9494;
728
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
729
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
730
- --components-button-negative-contrast-icon: #e5e5e9;
731
- --components-button-negative-contrast-icon-active: #08091c;
732
- --components-button-negative-contrast-text: #e5e5e9;
733
- --components-button-negative-contrast-text-active: #08091c;
734
- --components-button-negative-standard-active: #ff9494;
735
- --components-button-negative-standard-border: #ff9494;
736
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
737
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
738
- --components-button-negative-standard-icon: #e5e5e9;
739
- --components-button-negative-standard-icon-active: #08091c;
740
- --components-button-negative-standard-text: #e5e5e9;
741
- --components-button-negative-standard-text-active: #08091c;
742
- --components-button-primary-contrast-active: #8794d4;
743
- --components-button-primary-contrast-default: #aeb7e2;
744
- --components-button-primary-contrast-hover: #c7cdeb;
745
- --components-button-primary-contrast-icon: #08091c;
746
- --components-button-primary-contrast-text: #08091c;
747
- --components-button-primary-standard-active: #8794d4;
748
- --components-button-primary-standard-default: #aeb7e2;
749
- --components-button-primary-standard-hover: #c7cdeb;
750
- --components-button-primary-standard-icon: #08091c;
751
- --components-button-primary-standard-text: #08091c;
752
- --components-button-secondary-contrast-active: #8794d4;
753
- --components-button-secondary-contrast-border: #8284ab;
754
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
755
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
756
- --components-button-secondary-contrast-hover: #626493;
757
- --components-button-secondary-contrast-icon: #e5e5e9;
758
- --components-button-secondary-contrast-icon-active: #08091c;
759
- --components-button-secondary-contrast-text: #e5e5e9;
760
- --components-button-secondary-contrast-text-active: #08091c;
761
- --components-button-secondary-standard-active: #8794d4;
762
- --components-button-secondary-standard-border: #8284ab;
763
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
764
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
765
- --components-button-secondary-standard-hover: #626493;
766
- --components-button-secondary-standard-icon: #e5e5e9;
767
- --components-button-secondary-standard-icon-active: #08091c;
768
- --components-button-secondary-standard-text: #e5e5e9;
769
- --components-button-secondary-standard-text-active: #08091c;
770
- --components-button-squaresecondary-contrast-active: #8794d4;
771
- --components-button-squaresecondary-contrast-border: #8284ab;
772
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
773
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
774
- --components-button-squaresecondary-contrast-hover: #626493;
775
- --components-button-squaresecondary-contrast-icon-active: #08091c;
776
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
777
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
778
- --components-button-squaresecondary-contrast-label: #e5e5e9;
779
- --components-button-squaresecondary-standard-active: #8794d4;
780
- --components-button-squaresecondary-standard-border: #8284ab;
781
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
782
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
783
- --components-button-squaresecondary-standard-hover: #626493;
784
- --components-button-squaresecondary-standard-icon: #e5e5e9;
785
- --components-button-squaresecondary-standard-icon-active: #08091c;
786
- --components-button-squaresecondary-standard-text: #e5e5e9;
787
- --components-button-squaresuccess-contrast-active: #5ac39a;
788
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
789
- --components-button-squaresuccess-contrast-default: #5ac39a;
790
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
791
- --components-button-squaresuccess-contrast-icon: #08091c;
792
- --components-button-squaresuccess-contrast-label: #e5e5e9;
793
- --components-button-squaresuccess-standard-active: #37ab83;
794
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
795
- --components-button-squaresuccess-standard-default: #5ac39a;
796
- --components-button-squaresuccess-standard-hover: #9cd9c2;
797
- --components-button-squaresuccess-standard-icon: #08091c;
798
- --components-button-squaresuccess-standard-label: #e5e5e9;
799
- --components-button-success-contrast-active: #37ab83;
800
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
801
- --components-button-success-contrast-default: #5ac39a;
802
- --components-button-success-contrast-hover: #9cd9c2;
803
- --components-button-success-contrast-icon: #08091c;
804
- --components-button-success-contrast-text: #08091c;
805
- --components-button-success-standard-active: #37ab83;
806
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
807
- --components-button-success-standard-default: #5ac39a;
808
- --components-button-success-standard-hover: #9cd9c2;
809
- --components-button-success-standard-icon: #08091c;
810
- --components-button-success-standard-text: #08091c;
933
+ .eds-square-button:focus-visible {
934
+ outline: none;
811
935
  }
812
936
 
813
- /* DO NOT CHANGE!*/
814
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
815
- /* DO NOT CHANGE!*/
816
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
817
- [data-color-mode=light],
818
- :root {
819
- --basecolors-frame-contrast: #181c56;
820
- --basecolors-frame-contrastalt: #393d79;
821
- --basecolors-frame-contrastalt-2: #292b6a;
822
- --basecolors-frame-default: #ffffff;
823
- --basecolors-frame-elevated: #ffffff;
824
- --basecolors-frame-elevatedalt: #f6f6f9;
825
- --basecolors-frame-subdued: #d9dae8;
826
- --basecolors-frame-tint: #f6f6f9;
827
- --basecolors-shape-accent: #181c56;
828
- --basecolors-shape-bicycle-contrast: #00db9b;
829
- --basecolors-shape-bicycle-default: #388f76;
830
- --basecolors-shape-bus-contrast: #ff6392;
831
- --basecolors-shape-bus-default: #c5044e;
832
- --basecolors-shape-cableway-contrast: #b482fb;
833
- --basecolors-shape-cableway-default: #78469a;
834
- --basecolors-shape-disabled: #6e6f73;
835
- --basecolors-shape-disabledalt: #b6b8ba;
836
- --basecolors-shape-ferry-contrast: #6fdfff;
837
- --basecolors-shape-ferry-default: #0c6693;
838
- --basecolors-shape-funicular-contrast: #b482fb;
839
- --basecolors-shape-funicular-default: #78469a;
840
- --basecolors-shape-helicopter-contrast: #fbafea;
841
- --basecolors-shape-helicopter-default: #800664;
842
- --basecolors-shape-highlight: #ff5959;
843
- --basecolors-shape-light: #ffffff;
844
- --basecolors-shape-mask: #ffffff;
845
- --basecolors-shape-maskalt: #ffffff;
846
- --basecolors-shape-metro-contrast: #f08901;
847
- --basecolors-shape-metro-default: #bf5826;
848
- --basecolors-shape-mobility-contrast: #00db9b;
849
- --basecolors-shape-mobility-default: #388f76;
850
- --basecolors-shape-plane-contrast: #fbafea;
851
- --basecolors-shape-plane-default: #800664;
852
- --basecolors-shape-subdued: #626493;
853
- --basecolors-shape-subduedalt: #d9dae8;
854
- --basecolors-shape-taxi-contrast: #ffe082;
855
- --basecolors-shape-taxi-default: #3d3e40;
856
- --basecolors-shape-train-contrast: #42a5f5;
857
- --basecolors-shape-train-default: #00367f;
858
- --basecolors-shape-tram-contrast: #b482fb;
859
- --basecolors-shape-tram-default: #78469a;
860
- --basecolors-shape-walk-contrast: #8284ab;
861
- --basecolors-shape-walk-default: #8d8e9c;
862
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
863
- --basecolors-shape-airportlinkbus-default: #800664;
864
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
865
- --basecolors-shape-airportlinkrail-default: #800664;
866
- --basecolors-stroke-contrast: #aeb7e2;
867
- --basecolors-stroke-default: #181c56;
868
- --basecolors-stroke-disabled: #949699;
869
- --basecolors-stroke-focus-contrast: #aeb7e2;
870
- --basecolors-stroke-focus-standard: #181c56;
871
- --basecolors-stroke-highlight: #ff5959;
872
- --basecolors-stroke-light: #ffffff;
873
- --basecolors-stroke-subdued: #8284ab;
874
- --basecolors-stroke-subduedalt: #e3e6e8;
875
- --basecolors-text-accent: #181c56;
876
- --basecolors-text-disabled: #6e6f73;
877
- --basecolors-text-disabledalt: #b6b8ba;
878
- --basecolors-text-highlight: #ff5959;
879
- --basecolors-text-light: #ffffff;
880
- --basecolors-text-subdued: #626493;
881
- --basecolors-text-subduedalt: #d9dae8;
937
+ .eds-square-button:focus-visible .eds-square-button__button {
938
+ outline: 2px solid #181c56;
939
+ outline-color: var(--basecolors-stroke-focus-standard);
940
+ outline-offset: 0.125rem;
882
941
  }
883
942
 
884
- [data-color-mode=dark] {
885
- --basecolors-frame-contrast: #212233;
886
- --basecolors-frame-contrastalt: #141527;
887
- --basecolors-frame-contrastalt-2: #08091c;
888
- --basecolors-frame-default: #08091c;
889
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
890
- --basecolors-frame-elevatedalt: #464755;
891
- --basecolors-frame-subdued: #2d2e3e;
892
- --basecolors-frame-tint: #141527;
893
- --basecolors-shape-accent: #e5e5e9;
894
- --basecolors-shape-bicycle-contrast: #4db295;
895
- --basecolors-shape-bicycle-default: #4db295;
896
- --basecolors-shape-bus-contrast: #ef7398;
897
- --basecolors-shape-bus-default: #ef7398;
898
- --basecolors-shape-cableway-contrast: #b898e5;
899
- --basecolors-shape-cableway-default: #b898e5;
900
- --basecolors-shape-disabled: #b6b8ba;
901
- --basecolors-shape-disabledalt: #b3b4bd;
902
- --basecolors-shape-ferry-contrast: #8ccfe2;
903
- --basecolors-shape-ferry-default: #8ccfe2;
904
- --basecolors-shape-funicular-contrast: #b898e5;
905
- --basecolors-shape-funicular-default: #b898e5;
906
- --basecolors-shape-helicopter-contrast: #f2b8e5;
907
- --basecolors-shape-helicopter-default: #f2b8e5;
908
- --basecolors-shape-highlight: #ff9494;
909
- --basecolors-shape-light: #e5e5e9;
910
- --basecolors-shape-mask: #2d2e3e;
911
- --basecolors-shape-maskalt: #393a49;
912
- --basecolors-shape-metro-contrast: #dd973c;
913
- --basecolors-shape-metro-default: #dd973c;
914
- --basecolors-shape-mobility-contrast: #4db295;
915
- --basecolors-shape-mobility-default: #4db295;
916
- --basecolors-shape-plane-contrast: #f2b8e5;
917
- --basecolors-shape-plane-default: #f2b8e5;
918
- --basecolors-shape-subdued: #b3b4bd;
919
- --basecolors-shape-subduedalt: #b3b4bd;
920
- --basecolors-shape-taxi-contrast: #ffe082;
921
- --basecolors-shape-taxi-default: #ffe082;
922
- --basecolors-shape-train-contrast: #60a2d7;
923
- --basecolors-shape-train-default: #60a2d7;
924
- --basecolors-shape-tram-contrast: #b898e5;
925
- --basecolors-shape-tram-default: #b898e5;
926
- --basecolors-shape-walk-contrast: #8d8e9c;
927
- --basecolors-shape-walk-default: #8d8e9c;
928
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
929
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
930
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
931
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
932
- --basecolors-stroke-contrast: #aeb7e2;
933
- --basecolors-stroke-default: #b3b4bd;
934
- --basecolors-stroke-disabled: #e3e6e8;
935
- --basecolors-stroke-focus-contrast: #aeb7e2;
936
- --basecolors-stroke-focus-standard: #aeb7e2;
937
- --basecolors-stroke-highlight: #ff9494;
938
- --basecolors-stroke-light: #b3b4bd;
939
- --basecolors-stroke-subdued: #81828f;
940
- --basecolors-stroke-subduedalt: #949699;
941
- --basecolors-text-accent: #e5e5e9;
942
- --basecolors-text-disabled: #b6b8ba;
943
- --basecolors-text-disabledalt: #b6b8ba;
944
- --basecolors-text-highlight: #ff9494;
945
- --basecolors-text-light: #e5e5e9;
946
- --basecolors-text-subdued: #b3b4bd;
947
- --basecolors-text-subduedalt: #b3b4bd;
943
+ .eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
944
+ outline-color: var(--basecolors-stroke-focus-contrast);
945
+ }
946
+
947
+ .eds-square-button[disabled]:not(.eds-square-button--loading) {
948
+ cursor: not-allowed;
949
+ }
950
+
951
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
952
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
953
+ border-color: var(--basecolors-stroke-disabled);
954
+ border-style: dashed;
955
+ background-color: transparent;
956
+ color: var(--basecolors-text-disabled);
957
+ }
958
+
959
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
960
+ .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
961
+ color: var(--basecolors-text-disabled);
962
+ }
963
+
964
+ .eds-square-button.eds-square-button--loading {
965
+ opacity: 1;
966
+ }
967
+
968
+ .eds-square-button__button {
969
+ align-items: center;
970
+ background-color: var(--button-background);
971
+ border: 0.125rem solid var(--border-color);
972
+ border-radius: 0.25rem;
973
+ color: var(--icon-color);
974
+ display: inline-flex;
975
+ height: 3rem;
976
+ justify-content: center;
977
+ line-height: 1.5rem;
978
+ padding: 0;
979
+ text-align: center;
980
+ text-decoration: none;
981
+ vertical-align: top;
982
+ position: relative;
983
+ width: 3rem;
984
+ }
985
+
986
+ .eds-square-button__label {
987
+ color: var(--label-color);
988
+ }
989
+
990
+ .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
991
+ margin-left: 1rem;
992
+ }
993
+
994
+ .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
995
+ background: var(--icon-color);
996
+ }
997
+
998
+ .eds-square-button--secondary {
999
+ --button-background: var(--components-button-squaresecondary-standard-default);
1000
+ --border-color: var(--components-button-squaresecondary-standard-border);
1001
+ --icon-color: var(--components-button-squaresecondary-standard-icon);
1002
+ --label-color: var(--components-button-squaresecondary-standard-text);
1003
+ }
1004
+
1005
+ .eds-square-button--secondary:hover {
1006
+ --button-background: var(--components-button-squaresecondary-standard-hover);
1007
+ }
1008
+
1009
+ .eds-square-button--secondary:active {
1010
+ --button-background: var(--components-button-squaresecondary-standard-active);
1011
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
1012
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1013
+ }
1014
+
1015
+ .eds-contrast .eds-square-button--secondary {
1016
+ --button-background: var(--components-button-squaresecondary-contrast-default);
1017
+ --border-color: var(--components-button-squaresecondary-contrast-border);
1018
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
1019
+ --label-color: var(--components-button-squaresecondary-contrast-label);
1020
+ }
1021
+
1022
+ .eds-contrast .eds-square-button--secondary:hover {
1023
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
1024
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1025
+ }
1026
+
1027
+ .eds-contrast .eds-square-button--secondary:active {
1028
+ --button-background: var(--components-button-squaresecondary-contrast-active);
1029
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
1030
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1031
+ }
1032
+
1033
+ .eds-square-button--success {
1034
+ --button-background: var(--components-button-squaresuccess-standard-default);
1035
+ --border-color: var(--components-button-squaresuccess-standard-border);
1036
+ --icon-color: var(--components-button-squaresuccess-standard-icon);
1037
+ --label-color: var(--components-button-squaresuccess-standard-label);
1038
+ }
1039
+
1040
+ .eds-square-button--success:hover {
1041
+ --button-background: var(--components-button-squaresuccess-standard-hover);
1042
+ }
1043
+
1044
+ .eds-square-button--success:active {
1045
+ --button-background: var(--components-button-squaresuccess-standard-active);
1046
+ }
1047
+
1048
+ .eds-contrast .eds-square-button--success {
1049
+ --button-background: var(--components-button-squaresuccess-contrast-default);
1050
+ --border-color: var(--components-button-squaresuccess-contrast-border);
1051
+ --icon-color: var(--components-button-squaresuccess-contrast-icon);
1052
+ --label-color: var(--components-button-squaresuccess-contrast-label);
1053
+ }
1054
+
1055
+ .eds-contrast .eds-square-button--success:hover {
1056
+ --button-background: var(--components-button-squaresuccess-contrast-hover);
1057
+ }
1058
+
1059
+ .eds-contrast .eds-square-button--success:active {
1060
+ --button-background: var(--components-button-squaresuccess-contrast-active);
948
1061
  }
949
1062
 
950
- :root {
951
- --eds-button: 1;
1063
+ .eds-square-button--tertiary {
1064
+ --button-background: var(--components-button-squaresecondary-standard-default);
1065
+ --border-color: var(--components-button-squaresecondary-standard-border);
1066
+ --icon-color: var(--components-button-squaresecondary-standard-icon);
1067
+ --label-color: var(--components-button-squaresecondary-standard-text);
1068
+ font-size: 0.875rem;
952
1069
  }
953
1070
 
954
- /* DO NOT CHANGE!*/
1071
+ .eds-square-button--tertiary:hover {
1072
+ --button-background: var(--components-button-squaresecondary-standard-hover);
1073
+ }
1074
+
1075
+ .eds-square-button--tertiary:active {
1076
+ --button-background: var(--components-button-squaresecondary-standard-active);
1077
+ --border-color: var(--components-button-squaresecondary-standard-border-active);
1078
+ --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1079
+ }
1080
+
1081
+ .eds-contrast .eds-square-button--tertiary {
1082
+ --button-background: var(--components-button-squaresecondary-contrast-default);
1083
+ --border-color: var(--components-button-squaresecondary-contrast-border);
1084
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
1085
+ --label-color: var(--components-button-squaresecondary-contrast-label);
1086
+ }
1087
+
1088
+ .eds-contrast .eds-square-button--tertiary:hover {
1089
+ --button-background: var(--components-button-squaresecondary-contrast-hover);
1090
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1091
+ }
1092
+
1093
+ .eds-contrast .eds-square-button--tertiary:active {
1094
+ --button-background: var(--components-button-squaresecondary-contrast-active);
1095
+ --border-color: var(--components-button-squaresecondary-contrast-border-active);
1096
+ --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1097
+ }
1098
+
1099
+ .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
1100
+ .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
1101
+ margin-left: 0.75rem;
1102
+ }
1103
+
1104
+ .eds-square-button--tertiary .eds-square-button__button {
1105
+ height: 2rem;
1106
+ width: 2rem;
1107
+ border-width: 0.0625rem;
1108
+ } /* DO NOT CHANGE!*/
955
1109
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
956
1110
  .eds-icon-button {
957
1111
  border: 0.125rem solid transparent;
958
1112
  border-radius: 0.25rem;
959
1113
  background: none;
960
- color: #181c56;
961
1114
  color: var(--components-button-iconbutton-standard-text);
962
1115
  cursor: pointer;
963
1116
  display: flex;
@@ -968,12 +1121,10 @@ a.eds-button .eds-icon {
968
1121
  }
969
1122
 
970
1123
  .eds-contrast .eds-icon-button {
971
- color: #ffffff;
972
1124
  color: var(--components-button-iconbutton-contrast-text);
973
1125
  }
974
1126
 
975
1127
  .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
976
- background-color: #ffffff;
977
1128
  background-color: var(--components-button-iconbutton-contrast-icon);
978
1129
  }
979
1130
 
@@ -984,38 +1135,30 @@ a.eds-button .eds-icon {
984
1135
  }
985
1136
 
986
1137
  .eds-icon-button:hover {
987
- background-color: #d9ddf2;
988
1138
  background-color: var(--components-button-iconbutton-standard-hover);
989
1139
  }
990
1140
 
991
1141
  .eds-contrast .eds-icon-button:hover {
992
- background-color: #626493;
993
1142
  background-color: var(--components-button-iconbutton-contrast-hover);
994
1143
  }
995
1144
 
996
1145
  .eds-icon-button:active {
997
- background: #aeb7e2;
998
1146
  background: var(--components-button-iconbutton-standard-active);
999
- color: #181c56;
1000
1147
  color: var(--components-button-iconbutton-standard-text-active);
1001
1148
  }
1002
1149
 
1003
1150
  .eds-contrast .eds-icon-button:active {
1004
- background: #8794d4;
1005
1151
  background: var(--components-button-iconbutton-contrast-active);
1006
- color: #181c56;
1007
1152
  color: var(--components-button-iconbutton-contrast-text-active);
1008
1153
  }
1009
1154
 
1010
1155
  .eds-icon-button:focus-visible {
1011
1156
  outline: 2px solid #181c56;
1012
- outline-color: #181c56;
1013
1157
  outline-color: var(--basecolors-stroke-focus-standard);
1014
1158
  outline-offset: 0.125rem;
1015
1159
  }
1016
1160
 
1017
1161
  .eds-contrast .eds-icon-button:focus-visible {
1018
- outline-color: #aeb7e2;
1019
1162
  outline-color: var(--basecolors-stroke-focus-contrast);
1020
1163
  }
1021
1164
 
@@ -1026,7 +1169,6 @@ a.eds-button .eds-icon {
1026
1169
 
1027
1170
  .eds-icon-button--disabled__wrapper {
1028
1171
  cursor: not-allowed;
1029
- width: -moz-fit-content;
1030
1172
  width: fit-content;
1031
1173
  }
1032
1174
 
@@ -1095,238 +1237,30 @@ a.eds-button .eds-icon {
1095
1237
  color: inherit;
1096
1238
  }
1097
1239
  .eds-tooltip__close-button:hover {
1098
- background-color: #626493;
1099
1240
  background-color: var(--components-button-iconbutton-contrast-hover);
1100
1241
  }
1101
1242
  .eds-tooltip__close-button:focus-visible {
1102
1243
  outline: 2px solid #181c56;
1103
- outline-color: #aeb7e2;
1104
1244
  outline-color: var(--basecolors-stroke-focus-contrast);
1105
1245
  outline-offset: 0.125rem;
1106
1246
  }
1107
1247
  .eds-tooltip__close-button:active {
1108
- background-color: #8794d4;
1109
1248
  background-color: var(--components-button-iconbutton-contrast-active);
1110
1249
  }
1111
1250
  .eds-contrast .eds-tooltip__close-button {
1112
1251
  color: inherit;
1113
1252
  }
1114
1253
  .eds-contrast .eds-tooltip__close-button:hover {
1115
- background-color: #d9ddf2;
1116
1254
  background-color: var(--components-button-iconbutton-standard-hover);
1117
1255
  }
1118
1256
  .eds-contrast .eds-tooltip__close-button:focus-visible {
1119
1257
  outline: 2px solid #181c56;
1120
- outline-color: #181c56;
1121
1258
  outline-color: var(--basecolors-stroke-focus-standard);
1122
1259
  outline-offset: 0.125rem;
1123
1260
  }
1124
1261
  .eds-contrast .eds-tooltip__close-button:active {
1125
- background-color: #aeb7e2;
1126
1262
  background-color: var(--components-button-iconbutton-standard-active);
1127
- }
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
- /* DO NOT CHANGE!*/
1133
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1134
- [data-color-mode=light],
1135
- :root {
1136
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1137
- --components-tooltip-popover-contrast-fill: #393d79;
1138
- --components-tooltip-popover-contrast-icon: #ffffff;
1139
- --components-tooltip-popover-contrast-text: #ffffff;
1140
- --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
1141
- --components-tooltip-popover-standard-fill: #f6f6f9;
1142
- --components-tooltip-popover-standard-icon: #181c56;
1143
- --components-tooltip-popover-standard-text: #181c56;
1144
- --components-tooltip-tooltip-contrast-fill: #ffffff;
1145
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1146
- --components-tooltip-tooltip-contrast-icon: #181c56;
1147
- --components-tooltip-tooltip-contrast-icon-negative: #181c56;
1148
- --components-tooltip-tooltip-contrast-text: #181c56;
1149
- --components-tooltip-tooltip-contrast-text-negative: #181c56;
1150
- --components-tooltip-tooltip-contrast-triangle: #ffffff;
1151
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1152
- --components-tooltip-tooltip-standard-fill: #181c56;
1153
- --components-tooltip-tooltip-standard-fill-negative: #ffcece;
1154
- --components-tooltip-tooltip-standard-icon: #ffffff;
1155
- --components-tooltip-tooltip-standard-icon-negative: #181c56;
1156
- --components-tooltip-tooltip-standard-text: #ffffff;
1157
- --components-tooltip-tooltip-standard-text-negative: #181c56;
1158
- --components-tooltip-tooltip-standard-triangle: #181c56;
1159
- --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
1160
- }
1161
-
1162
- [data-color-mode=dark] {
1163
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1164
- --components-tooltip-popover-contrast-fill: #393a49;
1165
- --components-tooltip-popover-contrast-icon: #e5e5e9;
1166
- --components-tooltip-popover-contrast-text: #e5e5e9;
1167
- --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
1168
- --components-tooltip-popover-standard-fill: #393a49;
1169
- --components-tooltip-popover-standard-icon: #e5e5e9;
1170
- --components-tooltip-popover-standard-text: #e5e5e9;
1171
- --components-tooltip-tooltip-contrast-fill: #393a49;
1172
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1173
- --components-tooltip-tooltip-contrast-icon: #e5e5e9;
1174
- --components-tooltip-tooltip-contrast-icon-negative: #08091c;
1175
- --components-tooltip-tooltip-contrast-text: #e5e5e9;
1176
- --components-tooltip-tooltip-contrast-text-negative: #08091c;
1177
- --components-tooltip-tooltip-contrast-triangle: #393a49;
1178
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1179
- --components-tooltip-tooltip-standard-fill: #393a49;
1180
- --components-tooltip-tooltip-standard-fill-negative: #ff9494;
1181
- --components-tooltip-tooltip-standard-icon: #e5e5e9;
1182
- --components-tooltip-tooltip-standard-icon-negative: #08091c;
1183
- --components-tooltip-tooltip-standard-text: #e5e5e9;
1184
- --components-tooltip-tooltip-standard-text-negative: #08091c;
1185
- --components-tooltip-tooltip-standard-triangle: #393a49;
1186
- --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
1187
- }
1188
-
1189
- /* DO NOT CHANGE!*/
1190
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1191
- /* DO NOT CHANGE!*/
1192
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1193
- [data-color-mode=light],
1194
- :root {
1195
- --basecolors-frame-contrast: #181c56;
1196
- --basecolors-frame-contrastalt: #393d79;
1197
- --basecolors-frame-contrastalt-2: #292b6a;
1198
- --basecolors-frame-default: #ffffff;
1199
- --basecolors-frame-elevated: #ffffff;
1200
- --basecolors-frame-elevatedalt: #f6f6f9;
1201
- --basecolors-frame-subdued: #d9dae8;
1202
- --basecolors-frame-tint: #f6f6f9;
1203
- --basecolors-shape-accent: #181c56;
1204
- --basecolors-shape-bicycle-contrast: #00db9b;
1205
- --basecolors-shape-bicycle-default: #388f76;
1206
- --basecolors-shape-bus-contrast: #ff6392;
1207
- --basecolors-shape-bus-default: #c5044e;
1208
- --basecolors-shape-cableway-contrast: #b482fb;
1209
- --basecolors-shape-cableway-default: #78469a;
1210
- --basecolors-shape-disabled: #6e6f73;
1211
- --basecolors-shape-disabledalt: #b6b8ba;
1212
- --basecolors-shape-ferry-contrast: #6fdfff;
1213
- --basecolors-shape-ferry-default: #0c6693;
1214
- --basecolors-shape-funicular-contrast: #b482fb;
1215
- --basecolors-shape-funicular-default: #78469a;
1216
- --basecolors-shape-helicopter-contrast: #fbafea;
1217
- --basecolors-shape-helicopter-default: #800664;
1218
- --basecolors-shape-highlight: #ff5959;
1219
- --basecolors-shape-light: #ffffff;
1220
- --basecolors-shape-mask: #ffffff;
1221
- --basecolors-shape-maskalt: #ffffff;
1222
- --basecolors-shape-metro-contrast: #f08901;
1223
- --basecolors-shape-metro-default: #bf5826;
1224
- --basecolors-shape-mobility-contrast: #00db9b;
1225
- --basecolors-shape-mobility-default: #388f76;
1226
- --basecolors-shape-plane-contrast: #fbafea;
1227
- --basecolors-shape-plane-default: #800664;
1228
- --basecolors-shape-subdued: #626493;
1229
- --basecolors-shape-subduedalt: #d9dae8;
1230
- --basecolors-shape-taxi-contrast: #ffe082;
1231
- --basecolors-shape-taxi-default: #3d3e40;
1232
- --basecolors-shape-train-contrast: #42a5f5;
1233
- --basecolors-shape-train-default: #00367f;
1234
- --basecolors-shape-tram-contrast: #b482fb;
1235
- --basecolors-shape-tram-default: #78469a;
1236
- --basecolors-shape-walk-contrast: #8284ab;
1237
- --basecolors-shape-walk-default: #8d8e9c;
1238
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
1239
- --basecolors-shape-airportlinkbus-default: #800664;
1240
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
1241
- --basecolors-shape-airportlinkrail-default: #800664;
1242
- --basecolors-stroke-contrast: #aeb7e2;
1243
- --basecolors-stroke-default: #181c56;
1244
- --basecolors-stroke-disabled: #949699;
1245
- --basecolors-stroke-focus-contrast: #aeb7e2;
1246
- --basecolors-stroke-focus-standard: #181c56;
1247
- --basecolors-stroke-highlight: #ff5959;
1248
- --basecolors-stroke-light: #ffffff;
1249
- --basecolors-stroke-subdued: #8284ab;
1250
- --basecolors-stroke-subduedalt: #e3e6e8;
1251
- --basecolors-text-accent: #181c56;
1252
- --basecolors-text-disabled: #6e6f73;
1253
- --basecolors-text-disabledalt: #b6b8ba;
1254
- --basecolors-text-highlight: #ff5959;
1255
- --basecolors-text-light: #ffffff;
1256
- --basecolors-text-subdued: #626493;
1257
- --basecolors-text-subduedalt: #d9dae8;
1258
- }
1259
-
1260
- [data-color-mode=dark] {
1261
- --basecolors-frame-contrast: #212233;
1262
- --basecolors-frame-contrastalt: #141527;
1263
- --basecolors-frame-contrastalt-2: #08091c;
1264
- --basecolors-frame-default: #08091c;
1265
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1266
- --basecolors-frame-elevatedalt: #464755;
1267
- --basecolors-frame-subdued: #2d2e3e;
1268
- --basecolors-frame-tint: #141527;
1269
- --basecolors-shape-accent: #e5e5e9;
1270
- --basecolors-shape-bicycle-contrast: #4db295;
1271
- --basecolors-shape-bicycle-default: #4db295;
1272
- --basecolors-shape-bus-contrast: #ef7398;
1273
- --basecolors-shape-bus-default: #ef7398;
1274
- --basecolors-shape-cableway-contrast: #b898e5;
1275
- --basecolors-shape-cableway-default: #b898e5;
1276
- --basecolors-shape-disabled: #b6b8ba;
1277
- --basecolors-shape-disabledalt: #b3b4bd;
1278
- --basecolors-shape-ferry-contrast: #8ccfe2;
1279
- --basecolors-shape-ferry-default: #8ccfe2;
1280
- --basecolors-shape-funicular-contrast: #b898e5;
1281
- --basecolors-shape-funicular-default: #b898e5;
1282
- --basecolors-shape-helicopter-contrast: #f2b8e5;
1283
- --basecolors-shape-helicopter-default: #f2b8e5;
1284
- --basecolors-shape-highlight: #ff9494;
1285
- --basecolors-shape-light: #e5e5e9;
1286
- --basecolors-shape-mask: #2d2e3e;
1287
- --basecolors-shape-maskalt: #393a49;
1288
- --basecolors-shape-metro-contrast: #dd973c;
1289
- --basecolors-shape-metro-default: #dd973c;
1290
- --basecolors-shape-mobility-contrast: #4db295;
1291
- --basecolors-shape-mobility-default: #4db295;
1292
- --basecolors-shape-plane-contrast: #f2b8e5;
1293
- --basecolors-shape-plane-default: #f2b8e5;
1294
- --basecolors-shape-subdued: #b3b4bd;
1295
- --basecolors-shape-subduedalt: #b3b4bd;
1296
- --basecolors-shape-taxi-contrast: #ffe082;
1297
- --basecolors-shape-taxi-default: #ffe082;
1298
- --basecolors-shape-train-contrast: #60a2d7;
1299
- --basecolors-shape-train-default: #60a2d7;
1300
- --basecolors-shape-tram-contrast: #b898e5;
1301
- --basecolors-shape-tram-default: #b898e5;
1302
- --basecolors-shape-walk-contrast: #8d8e9c;
1303
- --basecolors-shape-walk-default: #8d8e9c;
1304
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1305
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
1306
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1307
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
1308
- --basecolors-stroke-contrast: #aeb7e2;
1309
- --basecolors-stroke-default: #b3b4bd;
1310
- --basecolors-stroke-disabled: #e3e6e8;
1311
- --basecolors-stroke-focus-contrast: #aeb7e2;
1312
- --basecolors-stroke-focus-standard: #aeb7e2;
1313
- --basecolors-stroke-highlight: #ff9494;
1314
- --basecolors-stroke-light: #b3b4bd;
1315
- --basecolors-stroke-subdued: #81828f;
1316
- --basecolors-stroke-subduedalt: #949699;
1317
- --basecolors-text-accent: #e5e5e9;
1318
- --basecolors-text-disabled: #b6b8ba;
1319
- --basecolors-text-disabledalt: #b6b8ba;
1320
- --basecolors-text-highlight: #ff9494;
1321
- --basecolors-text-light: #e5e5e9;
1322
- --basecolors-text-subdued: #b3b4bd;
1323
- --basecolors-text-subduedalt: #b3b4bd;
1324
- }
1325
-
1326
- :root {
1327
- --eds-tooltip: 1;
1328
- }
1329
- /* DO NOT CHANGE!*/
1263
+ }/* DO NOT CHANGE!*/
1330
1264
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1331
1265
  .eds-popover {
1332
1266
  background: var(--components-tooltip-popover-standard-fill);
@@ -1347,4 +1281,4 @@ a.eds-button .eds-icon {
1347
1281
  }
1348
1282
  .eds-contrast .eds-popover:focus-visible {
1349
1283
  outline-color: var(--basecolors-stroke-focus-contrast);
1350
- }
1284
+ }