@entur/tooltip 5.2.13-beta.3 → 5.2.13-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -2,608 +2,44 @@
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
3
  /* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- /* DO NOT CHANGE!*/
6
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
- [data-color-mode=light],
8
- :root {
9
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
10
- --components-tooltip-popover-contrast-fill: #393d79;
11
- --components-tooltip-popover-contrast-icon: #ffffff;
12
- --components-tooltip-popover-contrast-text: #ffffff;
13
- --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
14
- --components-tooltip-popover-standard-fill: #f6f6f9;
15
- --components-tooltip-popover-standard-icon: #181c56;
16
- --components-tooltip-popover-standard-text: #181c56;
17
- --components-tooltip-tooltip-contrast-fill: #ffffff;
18
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
19
- --components-tooltip-tooltip-contrast-icon: #181c56;
20
- --components-tooltip-tooltip-contrast-icon-negative: #181c56;
21
- --components-tooltip-tooltip-contrast-text: #181c56;
22
- --components-tooltip-tooltip-contrast-text-negative: #181c56;
23
- --components-tooltip-tooltip-contrast-triangle: #ffffff;
24
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
25
- --components-tooltip-tooltip-standard-fill: #181c56;
26
- --components-tooltip-tooltip-standard-fill-negative: #ffcece;
27
- --components-tooltip-tooltip-standard-icon: #ffffff;
28
- --components-tooltip-tooltip-standard-icon-negative: #181c56;
29
- --components-tooltip-tooltip-standard-text: #ffffff;
30
- --components-tooltip-tooltip-standard-text-negative: #181c56;
31
- --components-tooltip-tooltip-standard-triangle: #181c56;
32
- --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
5
+ .eds-button-group .eds-button {
6
+ margin-right: 0.75rem;
7
+ margin-bottom: 0.75rem;
33
8
  }
34
9
 
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;
10
+ .eds-button-group .eds-button:only-child {
11
+ margin: 0;
60
12
  }
61
13
 
62
14
  /* DO NOT CHANGE!*/
63
15
  /* 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;
16
+ a.eds-button {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
131
20
  }
132
21
 
133
- [data-color-mode=dark] {
134
- --basecolors-frame-contrast: #212233;
135
- --basecolors-frame-contrastalt: #141527;
136
- --basecolors-frame-contrastalt-2: #08091c;
137
- --basecolors-frame-default: #08091c;
138
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
139
- --basecolors-frame-elevatedalt: #464755;
140
- --basecolors-frame-subdued: #2d2e3e;
141
- --basecolors-frame-tint: #141527;
142
- --basecolors-shape-accent: #e5e5e9;
143
- --basecolors-shape-bicycle-contrast: #4db295;
144
- --basecolors-shape-bicycle-default: #4db295;
145
- --basecolors-shape-bus-contrast: #ef7398;
146
- --basecolors-shape-bus-default: #ef7398;
147
- --basecolors-shape-cableway-contrast: #b898e5;
148
- --basecolors-shape-cableway-default: #b898e5;
149
- --basecolors-shape-disabled: #b6b8ba;
150
- --basecolors-shape-disabledalt: #b3b4bd;
151
- --basecolors-shape-ferry-contrast: #8ccfe2;
152
- --basecolors-shape-ferry-default: #8ccfe2;
153
- --basecolors-shape-funicular-contrast: #b898e5;
154
- --basecolors-shape-funicular-default: #b898e5;
155
- --basecolors-shape-helicopter-contrast: #f2b8e5;
156
- --basecolors-shape-helicopter-default: #f2b8e5;
157
- --basecolors-shape-highlight: #ff9494;
158
- --basecolors-shape-light: #e5e5e9;
159
- --basecolors-shape-mask: #2d2e3e;
160
- --basecolors-shape-maskalt: #393a49;
161
- --basecolors-shape-metro-contrast: #dd973c;
162
- --basecolors-shape-metro-default: #dd973c;
163
- --basecolors-shape-mobility-contrast: #4db295;
164
- --basecolors-shape-mobility-default: #4db295;
165
- --basecolors-shape-plane-contrast: #f2b8e5;
166
- --basecolors-shape-plane-default: #f2b8e5;
167
- --basecolors-shape-subdued: #b3b4bd;
168
- --basecolors-shape-subduedalt: #b3b4bd;
169
- --basecolors-shape-taxi-contrast: #ffe082;
170
- --basecolors-shape-taxi-default: #ffe082;
171
- --basecolors-shape-train-contrast: #60a2d7;
172
- --basecolors-shape-train-default: #60a2d7;
173
- --basecolors-shape-tram-contrast: #b898e5;
174
- --basecolors-shape-tram-default: #b898e5;
175
- --basecolors-shape-walk-contrast: #8d8e9c;
176
- --basecolors-shape-walk-default: #8d8e9c;
177
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
178
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
179
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
180
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
181
- --basecolors-stroke-contrast: #aeb7e2;
182
- --basecolors-stroke-default: #b3b4bd;
183
- --basecolors-stroke-disabled: #e3e6e8;
184
- --basecolors-stroke-focus-contrast: #aeb7e2;
185
- --basecolors-stroke-focus-standard: #aeb7e2;
186
- --basecolors-stroke-highlight: #ff9494;
187
- --basecolors-stroke-light: #b3b4bd;
188
- --basecolors-stroke-subdued: #81828f;
189
- --basecolors-stroke-subduedalt: #949699;
190
- --basecolors-text-accent: #e5e5e9;
191
- --basecolors-text-disabled: #b6b8ba;
192
- --basecolors-text-disabledalt: #b6b8ba;
193
- --basecolors-text-highlight: #ff9494;
194
- --basecolors-text-light: #e5e5e9;
195
- --basecolors-text-subdued: #b3b4bd;
196
- --basecolors-text-subduedalt: #b3b4bd;
197
- }
198
-
199
- :root {
200
- --eds-tooltip: 1;
201
- }/* 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;
22
+ a.eds-button .eds-icon {
23
+ position: static;
24
+ position: initial;
595
25
  }
596
26
 
597
27
  .eds-button {
598
28
  min-width: 9.5rem;
29
+ width: -moz-max-content;
599
30
  width: max-content;
600
31
  min-height: 3rem;
32
+ height: -moz-fit-content;
601
33
  height: fit-content;
602
34
  border-radius: 0.25rem;
603
35
  font-size: inherit;
604
36
  cursor: pointer;
605
37
  display: inline-block;
38
+ -webkit-appearance: none;
39
+ -moz-appearance: none;
606
40
  appearance: none;
41
+ -webkit-text-decoration: none;
42
+ -webkit-text-decoration: none;
607
43
  text-decoration: none;
608
44
  padding: 0 1rem;
609
45
  font-size: 1rem;
@@ -630,11 +66,13 @@ a.eds-button .eds-icon {
630
66
 
631
67
  .eds-button:focus-visible {
632
68
  outline: 2px solid #181c56;
69
+ outline-color: #181c56;
633
70
  outline-color: var(--basecolors-stroke-focus-standard);
634
71
  outline-offset: 0.125rem;
635
72
  }
636
73
 
637
74
  .eds-contrast .eds-button:focus-visible {
75
+ outline-color: #aeb7e2;
638
76
  outline-color: var(--basecolors-stroke-focus-contrast);
639
77
  }
640
78
 
@@ -810,34 +248,35 @@ a.eds-button .eds-icon {
810
248
  }
811
249
 
812
250
  .eds-button[disabled]:not(.eds-button--loading) {
251
+ background: #cfd2d4;
813
252
  background: var(--components-button-disabled-standard-fill);
253
+ color: #515254;
814
254
  color: var(--components-button-disabled-standard-text-disabled);
815
255
  border-color: transparent;
816
256
  cursor: not-allowed;
817
257
  }
818
258
 
819
259
  .eds-contrast .eds-button[disabled]:not(.eds-button--loading) {
260
+ background-color: rgba(207, 210, 212, 0.1490196078);
820
261
  background-color: var(--components-button-disabled-contrast-fill);
262
+ color: #b6b8ba;
821
263
  color: var(--components-button-disabled-contrast-text-disabled);
822
264
  border-color: transparent;
823
- } /* DO NOT CHANGE!*/
824
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
825
- .eds-button-group .eds-button {
826
- margin-right: 0.75rem;
827
- margin-bottom: 0.75rem;
828
265
  }
829
266
 
830
- .eds-button-group .eds-button:only-child {
831
- margin: 0;
832
- } /* DO NOT CHANGE!*/
267
+ /* DO NOT CHANGE!*/
833
268
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
834
269
  .eds-floating-button {
835
270
  align-items: center;
271
+ -webkit-appearance: none;
272
+ -moz-appearance: none;
836
273
  appearance: none;
274
+ background: #181c56;
837
275
  background: var(--components-button-floating-standard-default);
838
276
  border: 0;
839
277
  border-radius: 1.5rem;
840
278
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
279
+ color: #ffffff;
841
280
  color: var(--components-button-floating-standard-text);
842
281
  cursor: pointer;
843
282
  display: flex;
@@ -858,34 +297,42 @@ a.eds-button .eds-icon {
858
297
  }
859
298
 
860
299
  .eds-floating-button:hover {
300
+ background-color: #393d79;
861
301
  background-color: var(--components-button-floating-standard-hover);
862
302
  }
863
303
 
864
304
  .eds-floating-button:active {
305
+ background-color: #11143c;
865
306
  background-color: var(--components-button-floating-standard-active);
866
307
  }
867
308
 
868
309
  .eds-floating-button:focus-visible {
869
310
  outline: 2px solid #181c56;
311
+ outline-color: #181c56;
870
312
  outline-color: var(--basecolors-stroke-focus-standard);
871
313
  outline-offset: 0.125rem;
872
314
  }
873
315
 
874
316
  .eds-contrast .eds-floating-button:focus-visible {
317
+ outline-color: #aeb7e2;
875
318
  outline-color: var(--basecolors-stroke-focus-contrast);
876
319
  }
877
320
 
878
321
  .eds-contrast .eds-floating-button {
322
+ background: #ffffff;
879
323
  background: var(--components-button-floating-contrast-default);
324
+ color: #181c56;
880
325
  color: var(--components-button-floating-contrast-text);
881
326
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
882
327
  }
883
328
 
884
329
  .eds-contrast .eds-floating-button:hover {
330
+ background-color: #f6f6f9;
885
331
  background-color: var(--components-button-floating-contrast-hover);
886
332
  }
887
333
 
888
334
  .eds-contrast .eds-floating-button:active {
335
+ background-color: #d9dae8;
889
336
  background-color: var(--components-button-floating-contrast-active);
890
337
  }
891
338
 
@@ -912,10 +359,14 @@ a.eds-button .eds-icon {
912
359
 
913
360
  .eds-floating-button--extended > *:last-child {
914
361
  margin-right: 0;
915
- } /* DO NOT CHANGE!*/
362
+ }
363
+
364
+ /* DO NOT CHANGE!*/
916
365
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
917
366
  .eds-square-button {
918
367
  align-items: center;
368
+ -webkit-appearance: none;
369
+ -moz-appearance: none;
919
370
  appearance: none;
920
371
  background: transparent;
921
372
  border: 0;
@@ -927,6 +378,8 @@ a.eds-button .eds-icon {
927
378
  font-weight: 500;
928
379
  justify-content: center;
929
380
  padding: 0;
381
+ -webkit-text-decoration: none;
382
+ -webkit-text-decoration: none;
930
383
  text-decoration: none;
931
384
  }
932
385
 
@@ -936,11 +389,13 @@ a.eds-button .eds-icon {
936
389
 
937
390
  .eds-square-button:focus-visible .eds-square-button__button {
938
391
  outline: 2px solid #181c56;
392
+ outline-color: #181c56;
939
393
  outline-color: var(--basecolors-stroke-focus-standard);
940
394
  outline-offset: 0.125rem;
941
395
  }
942
396
 
943
397
  .eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
398
+ outline-color: #aeb7e2;
944
399
  outline-color: var(--basecolors-stroke-focus-contrast);
945
400
  }
946
401
 
@@ -950,14 +405,17 @@ a.eds-button .eds-icon {
950
405
 
951
406
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
952
407
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
408
+ border-color: #949699;
953
409
  border-color: var(--basecolors-stroke-disabled);
954
410
  border-style: dashed;
955
411
  background-color: transparent;
412
+ color: #6e6f73;
956
413
  color: var(--basecolors-text-disabled);
957
414
  }
958
415
 
959
416
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
960
417
  .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
418
+ color: #6e6f73;
961
419
  color: var(--basecolors-text-disabled);
962
420
  }
963
421
 
@@ -977,6 +435,8 @@ a.eds-button .eds-icon {
977
435
  line-height: 1.5rem;
978
436
  padding: 0;
979
437
  text-align: center;
438
+ -webkit-text-decoration: none;
439
+ -webkit-text-decoration: none;
980
440
  text-decoration: none;
981
441
  vertical-align: top;
982
442
  position: relative;
@@ -1105,12 +565,15 @@ a.eds-button .eds-icon {
1105
565
  height: 2rem;
1106
566
  width: 2rem;
1107
567
  border-width: 0.0625rem;
1108
- } /* DO NOT CHANGE!*/
568
+ }
569
+
570
+ /* DO NOT CHANGE!*/
1109
571
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1110
572
  .eds-icon-button {
1111
573
  border: 0.125rem solid transparent;
1112
574
  border-radius: 0.25rem;
1113
575
  background: none;
576
+ color: #181c56;
1114
577
  color: var(--components-button-iconbutton-standard-text);
1115
578
  cursor: pointer;
1116
579
  display: flex;
@@ -1121,10 +584,12 @@ a.eds-button .eds-icon {
1121
584
  }
1122
585
 
1123
586
  .eds-contrast .eds-icon-button {
587
+ color: #ffffff;
1124
588
  color: var(--components-button-iconbutton-contrast-text);
1125
589
  }
1126
590
 
1127
591
  .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
592
+ background-color: #ffffff;
1128
593
  background-color: var(--components-button-iconbutton-contrast-icon);
1129
594
  }
1130
595
 
@@ -1135,41 +600,434 @@ a.eds-button .eds-icon {
1135
600
  }
1136
601
 
1137
602
  .eds-icon-button:hover {
603
+ background-color: #d9ddf2;
1138
604
  background-color: var(--components-button-iconbutton-standard-hover);
1139
605
  }
1140
606
 
1141
607
  .eds-contrast .eds-icon-button:hover {
608
+ background-color: #626493;
1142
609
  background-color: var(--components-button-iconbutton-contrast-hover);
1143
610
  }
1144
611
 
1145
612
  .eds-icon-button:active {
613
+ background: #aeb7e2;
1146
614
  background: var(--components-button-iconbutton-standard-active);
615
+ color: #181c56;
1147
616
  color: var(--components-button-iconbutton-standard-text-active);
1148
617
  }
1149
618
 
1150
619
  .eds-contrast .eds-icon-button:active {
620
+ background: #8794d4;
1151
621
  background: var(--components-button-iconbutton-contrast-active);
622
+ color: #181c56;
1152
623
  color: var(--components-button-iconbutton-contrast-text-active);
1153
624
  }
1154
625
 
1155
- .eds-icon-button:focus-visible {
1156
- outline: 2px solid #181c56;
1157
- outline-color: var(--basecolors-stroke-focus-standard);
1158
- outline-offset: 0.125rem;
626
+ .eds-icon-button:focus-visible {
627
+ outline: 2px solid #181c56;
628
+ outline-color: #181c56;
629
+ outline-color: var(--basecolors-stroke-focus-standard);
630
+ outline-offset: 0.125rem;
631
+ }
632
+
633
+ .eds-contrast .eds-icon-button:focus-visible {
634
+ outline-color: #aeb7e2;
635
+ outline-color: var(--basecolors-stroke-focus-contrast);
636
+ }
637
+
638
+ .eds-icon-button--disabled {
639
+ opacity: 0.5;
640
+ pointer-events: none;
641
+ }
642
+
643
+ .eds-icon-button--disabled__wrapper {
644
+ cursor: not-allowed;
645
+ width: -moz-fit-content;
646
+ width: fit-content;
647
+ }
648
+
649
+ /* DO NOT CHANGE!*/
650
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
651
+ /* DO NOT CHANGE!*/
652
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
653
+ /* DO NOT CHANGE!*/
654
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
655
+ [data-color-mode=light],
656
+ :root {
657
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
658
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
659
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
660
+ --components-button-disabled-standard-fill: #cfd2d4;
661
+ --components-button-disabled-standard-icon-disabled: #515254;
662
+ --components-button-disabled-standard-text-disabled: #515254;
663
+ --components-button-floating-contrast-active: #d9dae8;
664
+ --components-button-floating-contrast-default: #ffffff;
665
+ --components-button-floating-contrast-hover: #f6f6f9;
666
+ --components-button-floating-contrast-icon: #181c56;
667
+ --components-button-floating-contrast-text: #181c56;
668
+ --components-button-floating-standard-active: #11143c;
669
+ --components-button-floating-standard-default: #181c56;
670
+ --components-button-floating-standard-hover: #393d79;
671
+ --components-button-floating-standard-icon: #ffffff;
672
+ --components-button-floating-standard-text: #ffffff;
673
+ --components-button-iconbutton-contrast-active: #8794d4;
674
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
675
+ --components-button-iconbutton-contrast-hover: #626493;
676
+ --components-button-iconbutton-contrast-icon: #ffffff;
677
+ --components-button-iconbutton-contrast-icon-active: #181c56;
678
+ --components-button-iconbutton-contrast-text: #ffffff;
679
+ --components-button-iconbutton-contrast-text-active: #181c56;
680
+ --components-button-iconbutton-standard-active: #aeb7e2;
681
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
682
+ --components-button-iconbutton-standard-hover: #d9ddf2;
683
+ --components-button-iconbutton-standard-icon: #181c56;
684
+ --components-button-iconbutton-standard-icon-active: #181c56;
685
+ --components-button-iconbutton-standard-text: #181c56;
686
+ --components-button-iconbutton-standard-text-active: #181c56;
687
+ --components-button-negative-contrast-active: #ff9494;
688
+ --components-button-negative-contrast-border: #ff9494;
689
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
690
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
691
+ --components-button-negative-contrast-icon: #ffffff;
692
+ --components-button-negative-contrast-icon-active: #181c56;
693
+ --components-button-negative-contrast-text: #ffffff;
694
+ --components-button-negative-contrast-text-active: #181c56;
695
+ --components-button-negative-standard-active: #d31b1b;
696
+ --components-button-negative-standard-border: #d31b1b;
697
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
698
+ --components-button-negative-standard-hover: #ffcece;
699
+ --components-button-negative-standard-icon: #d31b1b;
700
+ --components-button-negative-standard-icon-active: #ffffff;
701
+ --components-button-negative-standard-text: #d31b1b;
702
+ --components-button-negative-standard-text-active: #ffffff;
703
+ --components-button-primary-contrast-active: #8794d4;
704
+ --components-button-primary-contrast-default: #aeb7e2;
705
+ --components-button-primary-contrast-hover: #c7cdeb;
706
+ --components-button-primary-contrast-icon: #181c56;
707
+ --components-button-primary-contrast-text: #181c56;
708
+ --components-button-primary-standard-active: #11143c;
709
+ --components-button-primary-standard-default: #181c56;
710
+ --components-button-primary-standard-hover: #393d79;
711
+ --components-button-primary-standard-icon: #ffffff;
712
+ --components-button-primary-standard-text: #ffffff;
713
+ --components-button-secondary-contrast-active: #8794d4;
714
+ --components-button-secondary-contrast-border: #8284ab;
715
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
716
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
717
+ --components-button-secondary-contrast-hover: #626493;
718
+ --components-button-secondary-contrast-icon: #ffffff;
719
+ --components-button-secondary-contrast-icon-active: #181c56;
720
+ --components-button-secondary-contrast-text: #ffffff;
721
+ --components-button-secondary-contrast-text-active: #181c56;
722
+ --components-button-secondary-standard-active: #aeb7e2;
723
+ --components-button-secondary-standard-border: #8284ab;
724
+ --components-button-secondary-standard-border-active: #181c56;
725
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
726
+ --components-button-secondary-standard-hover: #d9ddf2;
727
+ --components-button-secondary-standard-icon: #181c56;
728
+ --components-button-secondary-standard-icon-active: #181c56;
729
+ --components-button-secondary-standard-text: #181c56;
730
+ --components-button-secondary-standard-text-active: #181c56;
731
+ --components-button-squaresecondary-contrast-active: #8794d4;
732
+ --components-button-squaresecondary-contrast-border: #8284ab;
733
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
734
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
735
+ --components-button-squaresecondary-contrast-hover: #d9ddf2;
736
+ --components-button-squaresecondary-contrast-icon-active: #181c56;
737
+ --components-button-squaresecondary-contrast-icon-default: #ffffff;
738
+ --components-button-squaresecondary-contrast-icon-hover: #181c56;
739
+ --components-button-squaresecondary-contrast-label: #ffffff;
740
+ --components-button-squaresecondary-standard-active: #aeb7e2;
741
+ --components-button-squaresecondary-standard-border: #8284ab;
742
+ --components-button-squaresecondary-standard-border-active: #181c56;
743
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
744
+ --components-button-squaresecondary-standard-hover: #d9ddf2;
745
+ --components-button-squaresecondary-standard-icon: #181c56;
746
+ --components-button-squaresecondary-standard-icon-active: #181c56;
747
+ --components-button-squaresecondary-standard-text: #181c56;
748
+ --components-button-squaresuccess-contrast-active: #37ab83;
749
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
750
+ --components-button-squaresuccess-contrast-default: #5ac39a;
751
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
752
+ --components-button-squaresuccess-contrast-icon: #181c56;
753
+ --components-button-squaresuccess-contrast-label: #ffffff;
754
+ --components-button-squaresuccess-standard-active: #37ab83;
755
+ --components-button-squaresuccess-standard-border: #181c56;
756
+ --components-button-squaresuccess-standard-default: #5ac39a;
757
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
758
+ --components-button-squaresuccess-standard-icon: #181c56;
759
+ --components-button-squaresuccess-standard-label: #181c56;
760
+ --components-button-success-contrast-active: #37ab83;
761
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
762
+ --components-button-success-contrast-default: #5ac39a;
763
+ --components-button-success-contrast-hover: #9cd9c2;
764
+ --components-button-success-contrast-icon: #181c56;
765
+ --components-button-success-contrast-text: #181c56;
766
+ --components-button-success-standard-active: #37ab83;
767
+ --components-button-success-standard-border: #181c56;
768
+ --components-button-success-standard-default: #5ac39a;
769
+ --components-button-success-standard-hover: #9cd9c2;
770
+ --components-button-success-standard-icon: #181c56;
771
+ --components-button-success-standard-text: #181c56;
772
+ }
773
+
774
+ [data-color-mode=dark] {
775
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
776
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
777
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
778
+ --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
779
+ --components-button-disabled-standard-icon-disabled: #b6b8ba;
780
+ --components-button-disabled-standard-text-disabled: #b6b8ba;
781
+ --components-button-floating-contrast-active: #8794d4;
782
+ --components-button-floating-contrast-default: #aeb7e2;
783
+ --components-button-floating-contrast-hover: #c7cdeb;
784
+ --components-button-floating-contrast-icon: #08091c;
785
+ --components-button-floating-contrast-text: #08091c;
786
+ --components-button-floating-standard-active: #8794d4;
787
+ --components-button-floating-standard-default: #aeb7e2;
788
+ --components-button-floating-standard-hover: #c7cdeb;
789
+ --components-button-floating-standard-icon: #08091c;
790
+ --components-button-floating-standard-text: #08091c;
791
+ --components-button-iconbutton-contrast-active: #8794d4;
792
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
793
+ --components-button-iconbutton-contrast-hover: #626493;
794
+ --components-button-iconbutton-contrast-icon: #e5e5e9;
795
+ --components-button-iconbutton-contrast-icon-active: #08091c;
796
+ --components-button-iconbutton-contrast-text: #e5e5e9;
797
+ --components-button-iconbutton-contrast-text-active: #08091c;
798
+ --components-button-iconbutton-standard-active: #8794d4;
799
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
800
+ --components-button-iconbutton-standard-hover: #626493;
801
+ --components-button-iconbutton-standard-icon: #e5e5e9;
802
+ --components-button-iconbutton-standard-icon-active: #08091c;
803
+ --components-button-iconbutton-standard-text: #e5e5e9;
804
+ --components-button-iconbutton-standard-text-active: #08091c;
805
+ --components-button-negative-contrast-active: #ff9494;
806
+ --components-button-negative-contrast-border: #ff9494;
807
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
808
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
809
+ --components-button-negative-contrast-icon: #e5e5e9;
810
+ --components-button-negative-contrast-icon-active: #08091c;
811
+ --components-button-negative-contrast-text: #e5e5e9;
812
+ --components-button-negative-contrast-text-active: #08091c;
813
+ --components-button-negative-standard-active: #ff9494;
814
+ --components-button-negative-standard-border: #ff9494;
815
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
816
+ --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
817
+ --components-button-negative-standard-icon: #e5e5e9;
818
+ --components-button-negative-standard-icon-active: #08091c;
819
+ --components-button-negative-standard-text: #e5e5e9;
820
+ --components-button-negative-standard-text-active: #08091c;
821
+ --components-button-primary-contrast-active: #8794d4;
822
+ --components-button-primary-contrast-default: #aeb7e2;
823
+ --components-button-primary-contrast-hover: #c7cdeb;
824
+ --components-button-primary-contrast-icon: #08091c;
825
+ --components-button-primary-contrast-text: #08091c;
826
+ --components-button-primary-standard-active: #8794d4;
827
+ --components-button-primary-standard-default: #aeb7e2;
828
+ --components-button-primary-standard-hover: #c7cdeb;
829
+ --components-button-primary-standard-icon: #08091c;
830
+ --components-button-primary-standard-text: #08091c;
831
+ --components-button-secondary-contrast-active: #8794d4;
832
+ --components-button-secondary-contrast-border: #8284ab;
833
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
834
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
835
+ --components-button-secondary-contrast-hover: #626493;
836
+ --components-button-secondary-contrast-icon: #e5e5e9;
837
+ --components-button-secondary-contrast-icon-active: #08091c;
838
+ --components-button-secondary-contrast-text: #e5e5e9;
839
+ --components-button-secondary-contrast-text-active: #08091c;
840
+ --components-button-secondary-standard-active: #8794d4;
841
+ --components-button-secondary-standard-border: #8284ab;
842
+ --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
843
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
844
+ --components-button-secondary-standard-hover: #626493;
845
+ --components-button-secondary-standard-icon: #e5e5e9;
846
+ --components-button-secondary-standard-icon-active: #08091c;
847
+ --components-button-secondary-standard-text: #e5e5e9;
848
+ --components-button-secondary-standard-text-active: #08091c;
849
+ --components-button-squaresecondary-contrast-active: #8794d4;
850
+ --components-button-squaresecondary-contrast-border: #8284ab;
851
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
852
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
853
+ --components-button-squaresecondary-contrast-hover: #626493;
854
+ --components-button-squaresecondary-contrast-icon-active: #08091c;
855
+ --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
856
+ --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
857
+ --components-button-squaresecondary-contrast-label: #e5e5e9;
858
+ --components-button-squaresecondary-standard-active: #8794d4;
859
+ --components-button-squaresecondary-standard-border: #8284ab;
860
+ --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
861
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
862
+ --components-button-squaresecondary-standard-hover: #626493;
863
+ --components-button-squaresecondary-standard-icon: #e5e5e9;
864
+ --components-button-squaresecondary-standard-icon-active: #08091c;
865
+ --components-button-squaresecondary-standard-text: #e5e5e9;
866
+ --components-button-squaresuccess-contrast-active: #5ac39a;
867
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
868
+ --components-button-squaresuccess-contrast-default: #5ac39a;
869
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
870
+ --components-button-squaresuccess-contrast-icon: #08091c;
871
+ --components-button-squaresuccess-contrast-label: #e5e5e9;
872
+ --components-button-squaresuccess-standard-active: #37ab83;
873
+ --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
874
+ --components-button-squaresuccess-standard-default: #5ac39a;
875
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
876
+ --components-button-squaresuccess-standard-icon: #08091c;
877
+ --components-button-squaresuccess-standard-label: #e5e5e9;
878
+ --components-button-success-contrast-active: #37ab83;
879
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
880
+ --components-button-success-contrast-default: #5ac39a;
881
+ --components-button-success-contrast-hover: #9cd9c2;
882
+ --components-button-success-contrast-icon: #08091c;
883
+ --components-button-success-contrast-text: #08091c;
884
+ --components-button-success-standard-active: #37ab83;
885
+ --components-button-success-standard-border: rgba(255, 255, 255, 0);
886
+ --components-button-success-standard-default: #5ac39a;
887
+ --components-button-success-standard-hover: #9cd9c2;
888
+ --components-button-success-standard-icon: #08091c;
889
+ --components-button-success-standard-text: #08091c;
1159
890
  }
1160
891
 
1161
- .eds-contrast .eds-icon-button:focus-visible {
1162
- outline-color: var(--basecolors-stroke-focus-contrast);
892
+ /* DO NOT CHANGE!*/
893
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
894
+ /* DO NOT CHANGE!*/
895
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
896
+ [data-color-mode=light],
897
+ :root {
898
+ --basecolors-frame-contrast: #181c56;
899
+ --basecolors-frame-contrastalt: #393d79;
900
+ --basecolors-frame-contrastalt-2: #292b6a;
901
+ --basecolors-frame-default: #ffffff;
902
+ --basecolors-frame-elevated: #ffffff;
903
+ --basecolors-frame-elevatedalt: #f6f6f9;
904
+ --basecolors-frame-subdued: #d9dae8;
905
+ --basecolors-frame-tint: #f6f6f9;
906
+ --basecolors-shape-accent: #181c56;
907
+ --basecolors-shape-bicycle-contrast: #00db9b;
908
+ --basecolors-shape-bicycle-default: #388f76;
909
+ --basecolors-shape-bus-contrast: #ff6392;
910
+ --basecolors-shape-bus-default: #c5044e;
911
+ --basecolors-shape-cableway-contrast: #b482fb;
912
+ --basecolors-shape-cableway-default: #78469a;
913
+ --basecolors-shape-disabled: #6e6f73;
914
+ --basecolors-shape-disabledalt: #b6b8ba;
915
+ --basecolors-shape-ferry-contrast: #6fdfff;
916
+ --basecolors-shape-ferry-default: #0c6693;
917
+ --basecolors-shape-funicular-contrast: #b482fb;
918
+ --basecolors-shape-funicular-default: #78469a;
919
+ --basecolors-shape-helicopter-contrast: #fbafea;
920
+ --basecolors-shape-helicopter-default: #800664;
921
+ --basecolors-shape-highlight: #ff5959;
922
+ --basecolors-shape-light: #ffffff;
923
+ --basecolors-shape-mask: #ffffff;
924
+ --basecolors-shape-maskalt: #ffffff;
925
+ --basecolors-shape-metro-contrast: #f08901;
926
+ --basecolors-shape-metro-default: #bf5826;
927
+ --basecolors-shape-mobility-contrast: #00db9b;
928
+ --basecolors-shape-mobility-default: #388f76;
929
+ --basecolors-shape-plane-contrast: #fbafea;
930
+ --basecolors-shape-plane-default: #800664;
931
+ --basecolors-shape-subdued: #626493;
932
+ --basecolors-shape-subduedalt: #d9dae8;
933
+ --basecolors-shape-taxi-contrast: #ffe082;
934
+ --basecolors-shape-taxi-default: #3d3e40;
935
+ --basecolors-shape-train-contrast: #42a5f5;
936
+ --basecolors-shape-train-default: #00367f;
937
+ --basecolors-shape-tram-contrast: #b482fb;
938
+ --basecolors-shape-tram-default: #78469a;
939
+ --basecolors-shape-walk-contrast: #8284ab;
940
+ --basecolors-shape-walk-default: #8d8e9c;
941
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
942
+ --basecolors-shape-airportlinkbus-default: #800664;
943
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
944
+ --basecolors-shape-airportlinkrail-default: #800664;
945
+ --basecolors-stroke-contrast: #aeb7e2;
946
+ --basecolors-stroke-default: #181c56;
947
+ --basecolors-stroke-disabled: #949699;
948
+ --basecolors-stroke-focus-contrast: #aeb7e2;
949
+ --basecolors-stroke-focus-standard: #181c56;
950
+ --basecolors-stroke-highlight: #ff5959;
951
+ --basecolors-stroke-light: #ffffff;
952
+ --basecolors-stroke-subdued: #8284ab;
953
+ --basecolors-stroke-subduedalt: #e3e6e8;
954
+ --basecolors-text-accent: #181c56;
955
+ --basecolors-text-disabled: #6e6f73;
956
+ --basecolors-text-disabledalt: #b6b8ba;
957
+ --basecolors-text-highlight: #ff5959;
958
+ --basecolors-text-light: #ffffff;
959
+ --basecolors-text-subdued: #626493;
960
+ --basecolors-text-subduedalt: #d9dae8;
1163
961
  }
1164
962
 
1165
- .eds-icon-button--disabled {
1166
- opacity: 0.5;
1167
- pointer-events: none;
963
+ [data-color-mode=dark] {
964
+ --basecolors-frame-contrast: #212233;
965
+ --basecolors-frame-contrastalt: #141527;
966
+ --basecolors-frame-contrastalt-2: #08091c;
967
+ --basecolors-frame-default: #08091c;
968
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
969
+ --basecolors-frame-elevatedalt: #464755;
970
+ --basecolors-frame-subdued: #2d2e3e;
971
+ --basecolors-frame-tint: #141527;
972
+ --basecolors-shape-accent: #e5e5e9;
973
+ --basecolors-shape-bicycle-contrast: #4db295;
974
+ --basecolors-shape-bicycle-default: #4db295;
975
+ --basecolors-shape-bus-contrast: #ef7398;
976
+ --basecolors-shape-bus-default: #ef7398;
977
+ --basecolors-shape-cableway-contrast: #b898e5;
978
+ --basecolors-shape-cableway-default: #b898e5;
979
+ --basecolors-shape-disabled: #b6b8ba;
980
+ --basecolors-shape-disabledalt: #b3b4bd;
981
+ --basecolors-shape-ferry-contrast: #8ccfe2;
982
+ --basecolors-shape-ferry-default: #8ccfe2;
983
+ --basecolors-shape-funicular-contrast: #b898e5;
984
+ --basecolors-shape-funicular-default: #b898e5;
985
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
986
+ --basecolors-shape-helicopter-default: #f2b8e5;
987
+ --basecolors-shape-highlight: #ff9494;
988
+ --basecolors-shape-light: #e5e5e9;
989
+ --basecolors-shape-mask: #2d2e3e;
990
+ --basecolors-shape-maskalt: #393a49;
991
+ --basecolors-shape-metro-contrast: #dd973c;
992
+ --basecolors-shape-metro-default: #dd973c;
993
+ --basecolors-shape-mobility-contrast: #4db295;
994
+ --basecolors-shape-mobility-default: #4db295;
995
+ --basecolors-shape-plane-contrast: #f2b8e5;
996
+ --basecolors-shape-plane-default: #f2b8e5;
997
+ --basecolors-shape-subdued: #b3b4bd;
998
+ --basecolors-shape-subduedalt: #b3b4bd;
999
+ --basecolors-shape-taxi-contrast: #ffe082;
1000
+ --basecolors-shape-taxi-default: #ffe082;
1001
+ --basecolors-shape-train-contrast: #60a2d7;
1002
+ --basecolors-shape-train-default: #60a2d7;
1003
+ --basecolors-shape-tram-contrast: #b898e5;
1004
+ --basecolors-shape-tram-default: #b898e5;
1005
+ --basecolors-shape-walk-contrast: #8d8e9c;
1006
+ --basecolors-shape-walk-default: #8d8e9c;
1007
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1008
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1009
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1010
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1011
+ --basecolors-stroke-contrast: #aeb7e2;
1012
+ --basecolors-stroke-default: #b3b4bd;
1013
+ --basecolors-stroke-disabled: #e3e6e8;
1014
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1015
+ --basecolors-stroke-focus-standard: #aeb7e2;
1016
+ --basecolors-stroke-highlight: #ff9494;
1017
+ --basecolors-stroke-light: #b3b4bd;
1018
+ --basecolors-stroke-subdued: #81828f;
1019
+ --basecolors-stroke-subduedalt: #949699;
1020
+ --basecolors-text-accent: #e5e5e9;
1021
+ --basecolors-text-disabled: #b6b8ba;
1022
+ --basecolors-text-disabledalt: #b6b8ba;
1023
+ --basecolors-text-highlight: #ff9494;
1024
+ --basecolors-text-light: #e5e5e9;
1025
+ --basecolors-text-subdued: #b3b4bd;
1026
+ --basecolors-text-subduedalt: #b3b4bd;
1168
1027
  }
1169
1028
 
1170
- .eds-icon-button--disabled__wrapper {
1171
- cursor: not-allowed;
1172
- width: fit-content;
1029
+ :root {
1030
+ --eds-button: 1;
1173
1031
  }
1174
1032
 
1175
1033
  .eds-tooltip-wrapper {
@@ -1237,30 +1095,37 @@ a.eds-button .eds-icon {
1237
1095
  color: inherit;
1238
1096
  }
1239
1097
  .eds-tooltip__close-button:hover {
1098
+ background-color: #626493;
1240
1099
  background-color: var(--components-button-iconbutton-contrast-hover);
1241
1100
  }
1242
1101
  .eds-tooltip__close-button:focus-visible {
1243
1102
  outline: 2px solid #181c56;
1103
+ outline-color: #aeb7e2;
1244
1104
  outline-color: var(--basecolors-stroke-focus-contrast);
1245
1105
  outline-offset: 0.125rem;
1246
1106
  }
1247
1107
  .eds-tooltip__close-button:active {
1108
+ background-color: #8794d4;
1248
1109
  background-color: var(--components-button-iconbutton-contrast-active);
1249
1110
  }
1250
1111
  .eds-contrast .eds-tooltip__close-button {
1251
1112
  color: inherit;
1252
1113
  }
1253
1114
  .eds-contrast .eds-tooltip__close-button:hover {
1115
+ background-color: #d9ddf2;
1254
1116
  background-color: var(--components-button-iconbutton-standard-hover);
1255
1117
  }
1256
1118
  .eds-contrast .eds-tooltip__close-button:focus-visible {
1257
1119
  outline: 2px solid #181c56;
1120
+ outline-color: #181c56;
1258
1121
  outline-color: var(--basecolors-stroke-focus-standard);
1259
1122
  outline-offset: 0.125rem;
1260
1123
  }
1261
1124
  .eds-contrast .eds-tooltip__close-button:active {
1125
+ background-color: #aeb7e2;
1262
1126
  background-color: var(--components-button-iconbutton-standard-active);
1263
- }/* DO NOT CHANGE!*/
1127
+ }
1128
+ /* DO NOT CHANGE!*/
1264
1129
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1265
1130
  .eds-popover {
1266
1131
  background: var(--components-tooltip-popover-standard-fill);
@@ -1281,4 +1146,205 @@ a.eds-button .eds-icon {
1281
1146
  }
1282
1147
  .eds-contrast .eds-popover:focus-visible {
1283
1148
  outline-color: var(--basecolors-stroke-focus-contrast);
1284
- }
1149
+ }
1150
+ /* DO NOT CHANGE!*/
1151
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1152
+ /* DO NOT CHANGE!*/
1153
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1154
+ /* DO NOT CHANGE!*/
1155
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1156
+ [data-color-mode=light],
1157
+ :root {
1158
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1159
+ --components-tooltip-popover-contrast-fill: #393d79;
1160
+ --components-tooltip-popover-contrast-icon: #ffffff;
1161
+ --components-tooltip-popover-contrast-text: #ffffff;
1162
+ --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
1163
+ --components-tooltip-popover-standard-fill: #f6f6f9;
1164
+ --components-tooltip-popover-standard-icon: #181c56;
1165
+ --components-tooltip-popover-standard-text: #181c56;
1166
+ --components-tooltip-tooltip-contrast-fill: #ffffff;
1167
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1168
+ --components-tooltip-tooltip-contrast-icon: #181c56;
1169
+ --components-tooltip-tooltip-contrast-icon-negative: #181c56;
1170
+ --components-tooltip-tooltip-contrast-text: #181c56;
1171
+ --components-tooltip-tooltip-contrast-text-negative: #181c56;
1172
+ --components-tooltip-tooltip-contrast-triangle: #ffffff;
1173
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1174
+ --components-tooltip-tooltip-standard-fill: #181c56;
1175
+ --components-tooltip-tooltip-standard-fill-negative: #ffcece;
1176
+ --components-tooltip-tooltip-standard-icon: #ffffff;
1177
+ --components-tooltip-tooltip-standard-icon-negative: #181c56;
1178
+ --components-tooltip-tooltip-standard-text: #ffffff;
1179
+ --components-tooltip-tooltip-standard-text-negative: #181c56;
1180
+ --components-tooltip-tooltip-standard-triangle: #181c56;
1181
+ --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
1182
+ }
1183
+
1184
+ [data-color-mode=dark] {
1185
+ --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
1186
+ --components-tooltip-popover-contrast-fill: #393a49;
1187
+ --components-tooltip-popover-contrast-icon: #e5e5e9;
1188
+ --components-tooltip-popover-contrast-text: #e5e5e9;
1189
+ --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
1190
+ --components-tooltip-popover-standard-fill: #393a49;
1191
+ --components-tooltip-popover-standard-icon: #e5e5e9;
1192
+ --components-tooltip-popover-standard-text: #e5e5e9;
1193
+ --components-tooltip-tooltip-contrast-fill: #393a49;
1194
+ --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
1195
+ --components-tooltip-tooltip-contrast-icon: #e5e5e9;
1196
+ --components-tooltip-tooltip-contrast-icon-negative: #08091c;
1197
+ --components-tooltip-tooltip-contrast-text: #e5e5e9;
1198
+ --components-tooltip-tooltip-contrast-text-negative: #08091c;
1199
+ --components-tooltip-tooltip-contrast-triangle: #393a49;
1200
+ --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
1201
+ --components-tooltip-tooltip-standard-fill: #393a49;
1202
+ --components-tooltip-tooltip-standard-fill-negative: #ff9494;
1203
+ --components-tooltip-tooltip-standard-icon: #e5e5e9;
1204
+ --components-tooltip-tooltip-standard-icon-negative: #08091c;
1205
+ --components-tooltip-tooltip-standard-text: #e5e5e9;
1206
+ --components-tooltip-tooltip-standard-text-negative: #08091c;
1207
+ --components-tooltip-tooltip-standard-triangle: #393a49;
1208
+ --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
1209
+ }
1210
+
1211
+ /* DO NOT CHANGE!*/
1212
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1213
+ /* DO NOT CHANGE!*/
1214
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1215
+ [data-color-mode=light],
1216
+ :root {
1217
+ --basecolors-frame-contrast: #181c56;
1218
+ --basecolors-frame-contrastalt: #393d79;
1219
+ --basecolors-frame-contrastalt-2: #292b6a;
1220
+ --basecolors-frame-default: #ffffff;
1221
+ --basecolors-frame-elevated: #ffffff;
1222
+ --basecolors-frame-elevatedalt: #f6f6f9;
1223
+ --basecolors-frame-subdued: #d9dae8;
1224
+ --basecolors-frame-tint: #f6f6f9;
1225
+ --basecolors-shape-accent: #181c56;
1226
+ --basecolors-shape-bicycle-contrast: #00db9b;
1227
+ --basecolors-shape-bicycle-default: #388f76;
1228
+ --basecolors-shape-bus-contrast: #ff6392;
1229
+ --basecolors-shape-bus-default: #c5044e;
1230
+ --basecolors-shape-cableway-contrast: #b482fb;
1231
+ --basecolors-shape-cableway-default: #78469a;
1232
+ --basecolors-shape-disabled: #6e6f73;
1233
+ --basecolors-shape-disabledalt: #b6b8ba;
1234
+ --basecolors-shape-ferry-contrast: #6fdfff;
1235
+ --basecolors-shape-ferry-default: #0c6693;
1236
+ --basecolors-shape-funicular-contrast: #b482fb;
1237
+ --basecolors-shape-funicular-default: #78469a;
1238
+ --basecolors-shape-helicopter-contrast: #fbafea;
1239
+ --basecolors-shape-helicopter-default: #800664;
1240
+ --basecolors-shape-highlight: #ff5959;
1241
+ --basecolors-shape-light: #ffffff;
1242
+ --basecolors-shape-mask: #ffffff;
1243
+ --basecolors-shape-maskalt: #ffffff;
1244
+ --basecolors-shape-metro-contrast: #f08901;
1245
+ --basecolors-shape-metro-default: #bf5826;
1246
+ --basecolors-shape-mobility-contrast: #00db9b;
1247
+ --basecolors-shape-mobility-default: #388f76;
1248
+ --basecolors-shape-plane-contrast: #fbafea;
1249
+ --basecolors-shape-plane-default: #800664;
1250
+ --basecolors-shape-subdued: #626493;
1251
+ --basecolors-shape-subduedalt: #d9dae8;
1252
+ --basecolors-shape-taxi-contrast: #ffe082;
1253
+ --basecolors-shape-taxi-default: #3d3e40;
1254
+ --basecolors-shape-train-contrast: #42a5f5;
1255
+ --basecolors-shape-train-default: #00367f;
1256
+ --basecolors-shape-tram-contrast: #b482fb;
1257
+ --basecolors-shape-tram-default: #78469a;
1258
+ --basecolors-shape-walk-contrast: #8284ab;
1259
+ --basecolors-shape-walk-default: #8d8e9c;
1260
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
1261
+ --basecolors-shape-airportlinkbus-default: #800664;
1262
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
1263
+ --basecolors-shape-airportlinkrail-default: #800664;
1264
+ --basecolors-stroke-contrast: #aeb7e2;
1265
+ --basecolors-stroke-default: #181c56;
1266
+ --basecolors-stroke-disabled: #949699;
1267
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1268
+ --basecolors-stroke-focus-standard: #181c56;
1269
+ --basecolors-stroke-highlight: #ff5959;
1270
+ --basecolors-stroke-light: #ffffff;
1271
+ --basecolors-stroke-subdued: #8284ab;
1272
+ --basecolors-stroke-subduedalt: #e3e6e8;
1273
+ --basecolors-text-accent: #181c56;
1274
+ --basecolors-text-disabled: #6e6f73;
1275
+ --basecolors-text-disabledalt: #b6b8ba;
1276
+ --basecolors-text-highlight: #ff5959;
1277
+ --basecolors-text-light: #ffffff;
1278
+ --basecolors-text-subdued: #626493;
1279
+ --basecolors-text-subduedalt: #d9dae8;
1280
+ }
1281
+
1282
+ [data-color-mode=dark] {
1283
+ --basecolors-frame-contrast: #212233;
1284
+ --basecolors-frame-contrastalt: #141527;
1285
+ --basecolors-frame-contrastalt-2: #08091c;
1286
+ --basecolors-frame-default: #08091c;
1287
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
1288
+ --basecolors-frame-elevatedalt: #464755;
1289
+ --basecolors-frame-subdued: #2d2e3e;
1290
+ --basecolors-frame-tint: #141527;
1291
+ --basecolors-shape-accent: #e5e5e9;
1292
+ --basecolors-shape-bicycle-contrast: #4db295;
1293
+ --basecolors-shape-bicycle-default: #4db295;
1294
+ --basecolors-shape-bus-contrast: #ef7398;
1295
+ --basecolors-shape-bus-default: #ef7398;
1296
+ --basecolors-shape-cableway-contrast: #b898e5;
1297
+ --basecolors-shape-cableway-default: #b898e5;
1298
+ --basecolors-shape-disabled: #b6b8ba;
1299
+ --basecolors-shape-disabledalt: #b3b4bd;
1300
+ --basecolors-shape-ferry-contrast: #8ccfe2;
1301
+ --basecolors-shape-ferry-default: #8ccfe2;
1302
+ --basecolors-shape-funicular-contrast: #b898e5;
1303
+ --basecolors-shape-funicular-default: #b898e5;
1304
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
1305
+ --basecolors-shape-helicopter-default: #f2b8e5;
1306
+ --basecolors-shape-highlight: #ff9494;
1307
+ --basecolors-shape-light: #e5e5e9;
1308
+ --basecolors-shape-mask: #2d2e3e;
1309
+ --basecolors-shape-maskalt: #393a49;
1310
+ --basecolors-shape-metro-contrast: #dd973c;
1311
+ --basecolors-shape-metro-default: #dd973c;
1312
+ --basecolors-shape-mobility-contrast: #4db295;
1313
+ --basecolors-shape-mobility-default: #4db295;
1314
+ --basecolors-shape-plane-contrast: #f2b8e5;
1315
+ --basecolors-shape-plane-default: #f2b8e5;
1316
+ --basecolors-shape-subdued: #b3b4bd;
1317
+ --basecolors-shape-subduedalt: #b3b4bd;
1318
+ --basecolors-shape-taxi-contrast: #ffe082;
1319
+ --basecolors-shape-taxi-default: #ffe082;
1320
+ --basecolors-shape-train-contrast: #60a2d7;
1321
+ --basecolors-shape-train-default: #60a2d7;
1322
+ --basecolors-shape-tram-contrast: #b898e5;
1323
+ --basecolors-shape-tram-default: #b898e5;
1324
+ --basecolors-shape-walk-contrast: #8d8e9c;
1325
+ --basecolors-shape-walk-default: #8d8e9c;
1326
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1327
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
1328
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1329
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
1330
+ --basecolors-stroke-contrast: #aeb7e2;
1331
+ --basecolors-stroke-default: #b3b4bd;
1332
+ --basecolors-stroke-disabled: #e3e6e8;
1333
+ --basecolors-stroke-focus-contrast: #aeb7e2;
1334
+ --basecolors-stroke-focus-standard: #aeb7e2;
1335
+ --basecolors-stroke-highlight: #ff9494;
1336
+ --basecolors-stroke-light: #b3b4bd;
1337
+ --basecolors-stroke-subdued: #81828f;
1338
+ --basecolors-stroke-subduedalt: #949699;
1339
+ --basecolors-text-accent: #e5e5e9;
1340
+ --basecolors-text-disabled: #b6b8ba;
1341
+ --basecolors-text-disabledalt: #b6b8ba;
1342
+ --basecolors-text-highlight: #ff9494;
1343
+ --basecolors-text-light: #e5e5e9;
1344
+ --basecolors-text-subdued: #b3b4bd;
1345
+ --basecolors-text-subduedalt: #b3b4bd;
1346
+ }
1347
+
1348
+ :root {
1349
+ --eds-tooltip: 1;
1350
+ }