@entur/button 3.3.13-beta.3 → 3.3.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.
Files changed (25) hide show
  1. package/dist/Button.d.ts +42 -0
  2. package/dist/ButtonGroup.d.ts +14 -0
  3. package/dist/FloatingButton.d.ts +18 -0
  4. package/dist/IconButton.d.ts +32 -0
  5. package/dist/NegativeButton.d.ts +29 -0
  6. package/dist/PrimaryButton.d.ts +29 -0
  7. package/dist/SecondaryButton.d.ts +29 -0
  8. package/dist/SecondarySquareButton.d.ts +21 -0
  9. package/dist/SquareButton.d.ts +26 -0
  10. package/dist/SuccessButton.d.ts +29 -0
  11. package/dist/SuccessSquareButton.d.ts +21 -0
  12. package/dist/TertiaryButton.d.ts +30 -0
  13. package/dist/TertiarySquareButton.d.ts +23 -0
  14. package/dist/button.cjs.development.js +309 -0
  15. package/dist/button.cjs.development.js.map +1 -0
  16. package/dist/button.cjs.production.min.js +2 -0
  17. package/dist/button.cjs.production.min.js.map +1 -0
  18. package/dist/button.esm.js +269 -245
  19. package/dist/button.esm.js.map +1 -1
  20. package/dist/index.d.ts +13 -383
  21. package/dist/index.js +8 -0
  22. package/dist/styles.css +466 -448
  23. package/package.json +13 -23
  24. package/dist/button.cjs.js +0 -268
  25. package/dist/button.cjs.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1,386 +1,13 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- /* DO NOT CHANGE!*/
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-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
10
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
11
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
12
- --components-button-disabled-standard-fill: #cfd2d4;
13
- --components-button-disabled-standard-icon-disabled: #515254;
14
- --components-button-disabled-standard-text-disabled: #515254;
15
- --components-button-floating-contrast-active: #d9dae8;
16
- --components-button-floating-contrast-default: #ffffff;
17
- --components-button-floating-contrast-hover: #f6f6f9;
18
- --components-button-floating-contrast-icon: #181c56;
19
- --components-button-floating-contrast-text: #181c56;
20
- --components-button-floating-standard-active: #11143c;
21
- --components-button-floating-standard-default: #181c56;
22
- --components-button-floating-standard-hover: #393d79;
23
- --components-button-floating-standard-icon: #ffffff;
24
- --components-button-floating-standard-text: #ffffff;
25
- --components-button-iconbutton-contrast-active: #8794d4;
26
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
27
- --components-button-iconbutton-contrast-hover: #626493;
28
- --components-button-iconbutton-contrast-icon: #ffffff;
29
- --components-button-iconbutton-contrast-icon-active: #181c56;
30
- --components-button-iconbutton-contrast-text: #ffffff;
31
- --components-button-iconbutton-contrast-text-active: #181c56;
32
- --components-button-iconbutton-standard-active: #aeb7e2;
33
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
34
- --components-button-iconbutton-standard-hover: #d9ddf2;
35
- --components-button-iconbutton-standard-icon: #181c56;
36
- --components-button-iconbutton-standard-icon-active: #181c56;
37
- --components-button-iconbutton-standard-text: #181c56;
38
- --components-button-iconbutton-standard-text-active: #181c56;
39
- --components-button-negative-contrast-active: #ff9494;
40
- --components-button-negative-contrast-border: #ff9494;
41
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
42
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
43
- --components-button-negative-contrast-icon: #ffffff;
44
- --components-button-negative-contrast-icon-active: #181c56;
45
- --components-button-negative-contrast-text: #ffffff;
46
- --components-button-negative-contrast-text-active: #181c56;
47
- --components-button-negative-standard-active: #d31b1b;
48
- --components-button-negative-standard-border: #d31b1b;
49
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
50
- --components-button-negative-standard-hover: #ffcece;
51
- --components-button-negative-standard-icon: #d31b1b;
52
- --components-button-negative-standard-icon-active: #ffffff;
53
- --components-button-negative-standard-text: #d31b1b;
54
- --components-button-negative-standard-text-active: #ffffff;
55
- --components-button-primary-contrast-active: #8794d4;
56
- --components-button-primary-contrast-default: #aeb7e2;
57
- --components-button-primary-contrast-hover: #c7cdeb;
58
- --components-button-primary-contrast-icon: #181c56;
59
- --components-button-primary-contrast-text: #181c56;
60
- --components-button-primary-standard-active: #11143c;
61
- --components-button-primary-standard-default: #181c56;
62
- --components-button-primary-standard-hover: #393d79;
63
- --components-button-primary-standard-icon: #ffffff;
64
- --components-button-primary-standard-text: #ffffff;
65
- --components-button-secondary-contrast-active: #8794d4;
66
- --components-button-secondary-contrast-border: #8284ab;
67
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
68
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
69
- --components-button-secondary-contrast-hover: #626493;
70
- --components-button-secondary-contrast-icon: #ffffff;
71
- --components-button-secondary-contrast-icon-active: #181c56;
72
- --components-button-secondary-contrast-text: #ffffff;
73
- --components-button-secondary-contrast-text-active: #181c56;
74
- --components-button-secondary-standard-active: #aeb7e2;
75
- --components-button-secondary-standard-border: #8284ab;
76
- --components-button-secondary-standard-border-active: #181c56;
77
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
78
- --components-button-secondary-standard-hover: #d9ddf2;
79
- --components-button-secondary-standard-icon: #181c56;
80
- --components-button-secondary-standard-icon-active: #181c56;
81
- --components-button-secondary-standard-text: #181c56;
82
- --components-button-secondary-standard-text-active: #181c56;
83
- --components-button-squaresecondary-contrast-active: #8794d4;
84
- --components-button-squaresecondary-contrast-border: #8284ab;
85
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
86
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
87
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
88
- --components-button-squaresecondary-contrast-icon-active: #181c56;
89
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
90
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
91
- --components-button-squaresecondary-contrast-label: #ffffff;
92
- --components-button-squaresecondary-standard-active: #aeb7e2;
93
- --components-button-squaresecondary-standard-border: #8284ab;
94
- --components-button-squaresecondary-standard-border-active: #181c56;
95
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
96
- --components-button-squaresecondary-standard-hover: #d9ddf2;
97
- --components-button-squaresecondary-standard-icon: #181c56;
98
- --components-button-squaresecondary-standard-icon-active: #181c56;
99
- --components-button-squaresecondary-standard-text: #181c56;
100
- --components-button-squaresuccess-contrast-active: #37ab83;
101
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
102
- --components-button-squaresuccess-contrast-default: #5ac39a;
103
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
104
- --components-button-squaresuccess-contrast-icon: #181c56;
105
- --components-button-squaresuccess-contrast-label: #ffffff;
106
- --components-button-squaresuccess-standard-active: #37ab83;
107
- --components-button-squaresuccess-standard-border: #181c56;
108
- --components-button-squaresuccess-standard-default: #5ac39a;
109
- --components-button-squaresuccess-standard-hover: #9cd9c2;
110
- --components-button-squaresuccess-standard-icon: #181c56;
111
- --components-button-squaresuccess-standard-label: #181c56;
112
- --components-button-success-contrast-active: #37ab83;
113
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
114
- --components-button-success-contrast-default: #5ac39a;
115
- --components-button-success-contrast-hover: #9cd9c2;
116
- --components-button-success-contrast-icon: #181c56;
117
- --components-button-success-contrast-text: #181c56;
118
- --components-button-success-standard-active: #37ab83;
119
- --components-button-success-standard-border: #181c56;
120
- --components-button-success-standard-default: #5ac39a;
121
- --components-button-success-standard-hover: #9cd9c2;
122
- --components-button-success-standard-icon: #181c56;
123
- --components-button-success-standard-text: #181c56;
124
- }
125
-
126
- [data-color-mode=dark] {
127
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
128
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
129
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
130
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
131
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
132
- --components-button-disabled-standard-text-disabled: #b6b8ba;
133
- --components-button-floating-contrast-active: #8794d4;
134
- --components-button-floating-contrast-default: #aeb7e2;
135
- --components-button-floating-contrast-hover: #c7cdeb;
136
- --components-button-floating-contrast-icon: #08091c;
137
- --components-button-floating-contrast-text: #08091c;
138
- --components-button-floating-standard-active: #8794d4;
139
- --components-button-floating-standard-default: #aeb7e2;
140
- --components-button-floating-standard-hover: #c7cdeb;
141
- --components-button-floating-standard-icon: #08091c;
142
- --components-button-floating-standard-text: #08091c;
143
- --components-button-iconbutton-contrast-active: #8794d4;
144
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
145
- --components-button-iconbutton-contrast-hover: #626493;
146
- --components-button-iconbutton-contrast-icon: #e5e5e9;
147
- --components-button-iconbutton-contrast-icon-active: #08091c;
148
- --components-button-iconbutton-contrast-text: #e5e5e9;
149
- --components-button-iconbutton-contrast-text-active: #08091c;
150
- --components-button-iconbutton-standard-active: #8794d4;
151
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
152
- --components-button-iconbutton-standard-hover: #626493;
153
- --components-button-iconbutton-standard-icon: #e5e5e9;
154
- --components-button-iconbutton-standard-icon-active: #08091c;
155
- --components-button-iconbutton-standard-text: #e5e5e9;
156
- --components-button-iconbutton-standard-text-active: #08091c;
157
- --components-button-negative-contrast-active: #ff9494;
158
- --components-button-negative-contrast-border: #ff9494;
159
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
160
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
161
- --components-button-negative-contrast-icon: #e5e5e9;
162
- --components-button-negative-contrast-icon-active: #08091c;
163
- --components-button-negative-contrast-text: #e5e5e9;
164
- --components-button-negative-contrast-text-active: #08091c;
165
- --components-button-negative-standard-active: #ff9494;
166
- --components-button-negative-standard-border: #ff9494;
167
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
168
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
169
- --components-button-negative-standard-icon: #e5e5e9;
170
- --components-button-negative-standard-icon-active: #08091c;
171
- --components-button-negative-standard-text: #e5e5e9;
172
- --components-button-negative-standard-text-active: #08091c;
173
- --components-button-primary-contrast-active: #8794d4;
174
- --components-button-primary-contrast-default: #aeb7e2;
175
- --components-button-primary-contrast-hover: #c7cdeb;
176
- --components-button-primary-contrast-icon: #08091c;
177
- --components-button-primary-contrast-text: #08091c;
178
- --components-button-primary-standard-active: #8794d4;
179
- --components-button-primary-standard-default: #aeb7e2;
180
- --components-button-primary-standard-hover: #c7cdeb;
181
- --components-button-primary-standard-icon: #08091c;
182
- --components-button-primary-standard-text: #08091c;
183
- --components-button-secondary-contrast-active: #8794d4;
184
- --components-button-secondary-contrast-border: #8284ab;
185
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
186
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
187
- --components-button-secondary-contrast-hover: #626493;
188
- --components-button-secondary-contrast-icon: #e5e5e9;
189
- --components-button-secondary-contrast-icon-active: #08091c;
190
- --components-button-secondary-contrast-text: #e5e5e9;
191
- --components-button-secondary-contrast-text-active: #08091c;
192
- --components-button-secondary-standard-active: #8794d4;
193
- --components-button-secondary-standard-border: #8284ab;
194
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
195
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
196
- --components-button-secondary-standard-hover: #626493;
197
- --components-button-secondary-standard-icon: #e5e5e9;
198
- --components-button-secondary-standard-icon-active: #08091c;
199
- --components-button-secondary-standard-text: #e5e5e9;
200
- --components-button-secondary-standard-text-active: #08091c;
201
- --components-button-squaresecondary-contrast-active: #8794d4;
202
- --components-button-squaresecondary-contrast-border: #8284ab;
203
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
204
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
205
- --components-button-squaresecondary-contrast-hover: #626493;
206
- --components-button-squaresecondary-contrast-icon-active: #08091c;
207
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
208
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
209
- --components-button-squaresecondary-contrast-label: #e5e5e9;
210
- --components-button-squaresecondary-standard-active: #8794d4;
211
- --components-button-squaresecondary-standard-border: #8284ab;
212
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
213
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
214
- --components-button-squaresecondary-standard-hover: #626493;
215
- --components-button-squaresecondary-standard-icon: #e5e5e9;
216
- --components-button-squaresecondary-standard-icon-active: #08091c;
217
- --components-button-squaresecondary-standard-text: #e5e5e9;
218
- --components-button-squaresuccess-contrast-active: #5ac39a;
219
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
220
- --components-button-squaresuccess-contrast-default: #5ac39a;
221
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
222
- --components-button-squaresuccess-contrast-icon: #08091c;
223
- --components-button-squaresuccess-contrast-label: #e5e5e9;
224
- --components-button-squaresuccess-standard-active: #37ab83;
225
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
226
- --components-button-squaresuccess-standard-default: #5ac39a;
227
- --components-button-squaresuccess-standard-hover: #9cd9c2;
228
- --components-button-squaresuccess-standard-icon: #08091c;
229
- --components-button-squaresuccess-standard-label: #e5e5e9;
230
- --components-button-success-contrast-active: #37ab83;
231
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
232
- --components-button-success-contrast-default: #5ac39a;
233
- --components-button-success-contrast-hover: #9cd9c2;
234
- --components-button-success-contrast-icon: #08091c;
235
- --components-button-success-contrast-text: #08091c;
236
- --components-button-success-standard-active: #37ab83;
237
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
238
- --components-button-success-standard-default: #5ac39a;
239
- --components-button-success-standard-hover: #9cd9c2;
240
- --components-button-success-standard-icon: #08091c;
241
- --components-button-success-standard-text: #08091c;
242
- }
243
-
244
- /* DO NOT CHANGE!*/
245
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
246
- /* DO NOT CHANGE!*/
247
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
- [data-color-mode=light],
249
- :root {
250
- --basecolors-frame-contrast: #181c56;
251
- --basecolors-frame-contrastalt: #393d79;
252
- --basecolors-frame-contrastalt-2: #292b6a;
253
- --basecolors-frame-default: #ffffff;
254
- --basecolors-frame-elevated: #ffffff;
255
- --basecolors-frame-elevatedalt: #f6f6f9;
256
- --basecolors-frame-subdued: #d9dae8;
257
- --basecolors-frame-tint: #f6f6f9;
258
- --basecolors-shape-accent: #181c56;
259
- --basecolors-shape-bicycle-contrast: #00db9b;
260
- --basecolors-shape-bicycle-default: #388f76;
261
- --basecolors-shape-bus-contrast: #ff6392;
262
- --basecolors-shape-bus-default: #c5044e;
263
- --basecolors-shape-cableway-contrast: #b482fb;
264
- --basecolors-shape-cableway-default: #78469a;
265
- --basecolors-shape-disabled: #6e6f73;
266
- --basecolors-shape-disabledalt: #b6b8ba;
267
- --basecolors-shape-ferry-contrast: #6fdfff;
268
- --basecolors-shape-ferry-default: #0c6693;
269
- --basecolors-shape-funicular-contrast: #b482fb;
270
- --basecolors-shape-funicular-default: #78469a;
271
- --basecolors-shape-helicopter-contrast: #fbafea;
272
- --basecolors-shape-helicopter-default: #800664;
273
- --basecolors-shape-highlight: #ff5959;
274
- --basecolors-shape-light: #ffffff;
275
- --basecolors-shape-mask: #ffffff;
276
- --basecolors-shape-maskalt: #ffffff;
277
- --basecolors-shape-metro-contrast: #f08901;
278
- --basecolors-shape-metro-default: #bf5826;
279
- --basecolors-shape-mobility-contrast: #00db9b;
280
- --basecolors-shape-mobility-default: #388f76;
281
- --basecolors-shape-plane-contrast: #fbafea;
282
- --basecolors-shape-plane-default: #800664;
283
- --basecolors-shape-subdued: #626493;
284
- --basecolors-shape-subduedalt: #d9dae8;
285
- --basecolors-shape-taxi-contrast: #ffe082;
286
- --basecolors-shape-taxi-default: #3d3e40;
287
- --basecolors-shape-train-contrast: #42a5f5;
288
- --basecolors-shape-train-default: #00367f;
289
- --basecolors-shape-tram-contrast: #b482fb;
290
- --basecolors-shape-tram-default: #78469a;
291
- --basecolors-shape-walk-contrast: #8284ab;
292
- --basecolors-shape-walk-default: #8d8e9c;
293
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
294
- --basecolors-shape-airportlinkbus-default: #800664;
295
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
296
- --basecolors-shape-airportlinkrail-default: #800664;
297
- --basecolors-stroke-contrast: #aeb7e2;
298
- --basecolors-stroke-default: #181c56;
299
- --basecolors-stroke-disabled: #949699;
300
- --basecolors-stroke-focus-contrast: #aeb7e2;
301
- --basecolors-stroke-focus-standard: #181c56;
302
- --basecolors-stroke-highlight: #ff5959;
303
- --basecolors-stroke-light: #ffffff;
304
- --basecolors-stroke-subdued: #8284ab;
305
- --basecolors-stroke-subduedalt: #e3e6e8;
306
- --basecolors-text-accent: #181c56;
307
- --basecolors-text-disabled: #6e6f73;
308
- --basecolors-text-disabledalt: #b6b8ba;
309
- --basecolors-text-highlight: #ff5959;
310
- --basecolors-text-light: #ffffff;
311
- --basecolors-text-subdued: #626493;
312
- --basecolors-text-subduedalt: #d9dae8;
313
- }
314
-
315
- [data-color-mode=dark] {
316
- --basecolors-frame-contrast: #212233;
317
- --basecolors-frame-contrastalt: #141527;
318
- --basecolors-frame-contrastalt-2: #08091c;
319
- --basecolors-frame-default: #08091c;
320
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
321
- --basecolors-frame-elevatedalt: #464755;
322
- --basecolors-frame-subdued: #2d2e3e;
323
- --basecolors-frame-tint: #141527;
324
- --basecolors-shape-accent: #e5e5e9;
325
- --basecolors-shape-bicycle-contrast: #4db295;
326
- --basecolors-shape-bicycle-default: #4db295;
327
- --basecolors-shape-bus-contrast: #ef7398;
328
- --basecolors-shape-bus-default: #ef7398;
329
- --basecolors-shape-cableway-contrast: #b898e5;
330
- --basecolors-shape-cableway-default: #b898e5;
331
- --basecolors-shape-disabled: #b6b8ba;
332
- --basecolors-shape-disabledalt: #b3b4bd;
333
- --basecolors-shape-ferry-contrast: #8ccfe2;
334
- --basecolors-shape-ferry-default: #8ccfe2;
335
- --basecolors-shape-funicular-contrast: #b898e5;
336
- --basecolors-shape-funicular-default: #b898e5;
337
- --basecolors-shape-helicopter-contrast: #f2b8e5;
338
- --basecolors-shape-helicopter-default: #f2b8e5;
339
- --basecolors-shape-highlight: #ff9494;
340
- --basecolors-shape-light: #e5e5e9;
341
- --basecolors-shape-mask: #2d2e3e;
342
- --basecolors-shape-maskalt: #393a49;
343
- --basecolors-shape-metro-contrast: #dd973c;
344
- --basecolors-shape-metro-default: #dd973c;
345
- --basecolors-shape-mobility-contrast: #4db295;
346
- --basecolors-shape-mobility-default: #4db295;
347
- --basecolors-shape-plane-contrast: #f2b8e5;
348
- --basecolors-shape-plane-default: #f2b8e5;
349
- --basecolors-shape-subdued: #b3b4bd;
350
- --basecolors-shape-subduedalt: #b3b4bd;
351
- --basecolors-shape-taxi-contrast: #ffe082;
352
- --basecolors-shape-taxi-default: #ffe082;
353
- --basecolors-shape-train-contrast: #60a2d7;
354
- --basecolors-shape-train-default: #60a2d7;
355
- --basecolors-shape-tram-contrast: #b898e5;
356
- --basecolors-shape-tram-default: #b898e5;
357
- --basecolors-shape-walk-contrast: #8d8e9c;
358
- --basecolors-shape-walk-default: #8d8e9c;
359
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
360
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
361
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
362
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
363
- --basecolors-stroke-contrast: #aeb7e2;
364
- --basecolors-stroke-default: #b3b4bd;
365
- --basecolors-stroke-disabled: #e3e6e8;
366
- --basecolors-stroke-focus-contrast: #aeb7e2;
367
- --basecolors-stroke-focus-standard: #aeb7e2;
368
- --basecolors-stroke-highlight: #ff9494;
369
- --basecolors-stroke-light: #b3b4bd;
370
- --basecolors-stroke-subdued: #81828f;
371
- --basecolors-stroke-subduedalt: #949699;
372
- --basecolors-text-accent: #e5e5e9;
373
- --basecolors-text-disabled: #b6b8ba;
374
- --basecolors-text-disabledalt: #b6b8ba;
375
- --basecolors-text-highlight: #ff9494;
376
- --basecolors-text-light: #e5e5e9;
377
- --basecolors-text-subdued: #b3b4bd;
378
- --basecolors-text-subduedalt: #b3b4bd;
3
+ .eds-button-group .eds-button {
4
+ margin-right: 0.75rem;
5
+ margin-bottom: 0.75rem;
379
6
  }
380
-
381
- :root {
382
- --eds-button: 1;
383
- }/* DO NOT CHANGE!*/
7
+ .eds-button-group .eds-button:only-child {
8
+ margin: 0;
9
+ }
10
+ /* DO NOT CHANGE!*/
384
11
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
385
12
  a.eds-button {
386
13
  display: flex;
@@ -388,19 +15,25 @@ a.eds-button {
388
15
  justify-content: center;
389
16
  }
390
17
  a.eds-button .eds-icon {
391
- position: unset;
18
+ position: static;
19
+ position: initial;
392
20
  }
393
21
 
394
22
  .eds-button {
395
23
  min-width: 9.5rem;
24
+ width: -moz-max-content;
396
25
  width: max-content;
397
26
  min-height: 3rem;
27
+ height: -moz-fit-content;
398
28
  height: fit-content;
399
29
  border-radius: 0.25rem;
400
30
  font-size: inherit;
401
31
  cursor: pointer;
402
32
  display: inline-block;
403
- appearance: none;
33
+ -webkit-appearance: none;
34
+ -moz-appearance: none;
35
+ appearance: none;
36
+ -webkit-text-decoration: none;
404
37
  text-decoration: none;
405
38
  padding: 0 1rem;
406
39
  font-size: 1rem;
@@ -584,19 +217,14 @@ a.eds-button .eds-icon {
584
217
  background-color: var(--components-button-disabled-contrast-fill);
585
218
  color: var(--components-button-disabled-contrast-text-disabled);
586
219
  border-color: transparent;
587
- }/* DO NOT CHANGE!*/
588
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
589
- .eds-button-group .eds-button {
590
- margin-right: 0.75rem;
591
- margin-bottom: 0.75rem;
592
220
  }
593
- .eds-button-group .eds-button:only-child {
594
- margin: 0;
595
- }/* DO NOT CHANGE!*/
221
+ /* DO NOT CHANGE!*/
596
222
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
597
223
  .eds-floating-button {
598
224
  align-items: center;
599
- appearance: none;
225
+ -webkit-appearance: none;
226
+ -moz-appearance: none;
227
+ appearance: none;
600
228
  background: var(--components-button-floating-standard-default);
601
229
  border: 0;
602
230
  border-radius: 1.5rem;
@@ -663,11 +291,14 @@ a.eds-button .eds-icon {
663
291
  }
664
292
  .eds-floating-button--extended > *:last-child {
665
293
  margin-right: 0;
666
- }/* DO NOT CHANGE!*/
294
+ }
295
+ /* DO NOT CHANGE!*/
667
296
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
668
297
  .eds-square-button {
669
298
  align-items: center;
670
- appearance: none;
299
+ -webkit-appearance: none;
300
+ -moz-appearance: none;
301
+ appearance: none;
671
302
  background: transparent;
672
303
  border: 0;
673
304
  border-radius: 0.25rem;
@@ -678,6 +309,7 @@ a.eds-button .eds-icon {
678
309
  font-weight: 500;
679
310
  justify-content: center;
680
311
  padding: 0;
312
+ -webkit-text-decoration: none;
681
313
  text-decoration: none;
682
314
  }
683
315
  .eds-square-button:focus-visible {
@@ -720,6 +352,7 @@ a.eds-button .eds-icon {
720
352
  line-height: 1.5rem;
721
353
  padding: 0;
722
354
  text-align: center;
355
+ -webkit-text-decoration: none;
723
356
  text-decoration: none;
724
357
  vertical-align: top;
725
358
  position: relative;
@@ -821,62 +454,447 @@ a.eds-button .eds-icon {
821
454
  .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
822
455
  margin-left: 0.75rem;
823
456
  }
824
- .eds-square-button--tertiary .eds-square-button__button {
825
- height: 2rem;
826
- width: 2rem;
827
- border-width: 0.0625rem;
828
- }/* DO NOT CHANGE!*/
457
+ .eds-square-button--tertiary .eds-square-button__button {
458
+ height: 2rem;
459
+ width: 2rem;
460
+ border-width: 0.0625rem;
461
+ }
462
+ /* DO NOT CHANGE!*/
463
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
+ .eds-icon-button {
465
+ border: 0.125rem solid transparent;
466
+ border-radius: 0.25rem;
467
+ background: none;
468
+ color: var(--components-button-iconbutton-standard-text);
469
+ cursor: pointer;
470
+ display: flex;
471
+ justify-content: center;
472
+ align-items: center;
473
+ font-size: 1rem;
474
+ padding: 0.5rem;
475
+ }
476
+ .eds-contrast .eds-icon-button {
477
+ color: var(--components-button-iconbutton-contrast-text);
478
+ }
479
+ .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
480
+ background-color: var(--components-button-iconbutton-contrast-icon);
481
+ }
482
+ .eds-icon-button--size-small {
483
+ height: 1.5rem;
484
+ width: 1.5rem;
485
+ padding: 0;
486
+ }
487
+ .eds-icon-button:hover {
488
+ background-color: var(--components-button-iconbutton-standard-hover);
489
+ }
490
+ .eds-contrast .eds-icon-button:hover {
491
+ background-color: var(--components-button-iconbutton-contrast-hover);
492
+ }
493
+ .eds-icon-button:active {
494
+ background: var(--components-button-iconbutton-standard-active);
495
+ color: var(--components-button-iconbutton-standard-text-active);
496
+ }
497
+ .eds-contrast .eds-icon-button:active {
498
+ background: var(--components-button-iconbutton-contrast-active);
499
+ color: var(--components-button-iconbutton-contrast-text-active);
500
+ }
501
+ .eds-icon-button:focus-visible {
502
+ outline: 2px solid #181c56;
503
+ outline-color: var(--basecolors-stroke-focus-standard);
504
+ outline-offset: 0.125rem;
505
+ }
506
+ .eds-contrast .eds-icon-button:focus-visible {
507
+ outline-color: var(--basecolors-stroke-focus-contrast);
508
+ }
509
+ .eds-icon-button--disabled {
510
+ opacity: 0.5;
511
+ pointer-events: none;
512
+ }
513
+ .eds-icon-button--disabled__wrapper {
514
+ cursor: not-allowed;
515
+ width: -moz-fit-content;
516
+ width: fit-content;
517
+ }
518
+ /* DO NOT CHANGE!*/
519
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
520
+ /* DO NOT CHANGE!*/
521
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
522
+ /* DO NOT CHANGE!*/
523
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
524
+ [data-color-mode=light],
525
+ :root {
526
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
527
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
528
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
529
+ --components-button-disabled-standard-fill: #cfd2d4;
530
+ --components-button-disabled-standard-icon-disabled: #515254;
531
+ --components-button-disabled-standard-text-disabled: #515254;
532
+ --components-button-floating-contrast-active: #d9dae8;
533
+ --components-button-floating-contrast-default: #ffffff;
534
+ --components-button-floating-contrast-hover: #f6f6f9;
535
+ --components-button-floating-contrast-icon: #181c56;
536
+ --components-button-floating-contrast-text: #181c56;
537
+ --components-button-floating-standard-active: #11143c;
538
+ --components-button-floating-standard-default: #181c56;
539
+ --components-button-floating-standard-hover: #393d79;
540
+ --components-button-floating-standard-icon: #ffffff;
541
+ --components-button-floating-standard-text: #ffffff;
542
+ --components-button-iconbutton-contrast-active: #8794d4;
543
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
544
+ --components-button-iconbutton-contrast-hover: #626493;
545
+ --components-button-iconbutton-contrast-icon: #ffffff;
546
+ --components-button-iconbutton-contrast-icon-active: #181c56;
547
+ --components-button-iconbutton-contrast-text: #ffffff;
548
+ --components-button-iconbutton-contrast-text-active: #181c56;
549
+ --components-button-iconbutton-standard-active: #aeb7e2;
550
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
551
+ --components-button-iconbutton-standard-hover: #d9ddf2;
552
+ --components-button-iconbutton-standard-icon: #181c56;
553
+ --components-button-iconbutton-standard-icon-active: #181c56;
554
+ --components-button-iconbutton-standard-text: #181c56;
555
+ --components-button-iconbutton-standard-text-active: #181c56;
556
+ --components-button-negative-contrast-active: #ff9494;
557
+ --components-button-negative-contrast-border: #ff9494;
558
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
559
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
560
+ --components-button-negative-contrast-icon: #ffffff;
561
+ --components-button-negative-contrast-icon-active: #181c56;
562
+ --components-button-negative-contrast-text: #ffffff;
563
+ --components-button-negative-contrast-text-active: #181c56;
564
+ --components-button-negative-standard-active: #d31b1b;
565
+ --components-button-negative-standard-border: #d31b1b;
566
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
567
+ --components-button-negative-standard-hover: #ffcece;
568
+ --components-button-negative-standard-icon: #d31b1b;
569
+ --components-button-negative-standard-icon-active: #ffffff;
570
+ --components-button-negative-standard-text: #d31b1b;
571
+ --components-button-negative-standard-text-active: #ffffff;
572
+ --components-button-primary-contrast-active: #8794d4;
573
+ --components-button-primary-contrast-default: #aeb7e2;
574
+ --components-button-primary-contrast-hover: #c7cdeb;
575
+ --components-button-primary-contrast-icon: #181c56;
576
+ --components-button-primary-contrast-text: #181c56;
577
+ --components-button-primary-standard-active: #11143c;
578
+ --components-button-primary-standard-default: #181c56;
579
+ --components-button-primary-standard-hover: #393d79;
580
+ --components-button-primary-standard-icon: #ffffff;
581
+ --components-button-primary-standard-text: #ffffff;
582
+ --components-button-secondary-contrast-active: #8794d4;
583
+ --components-button-secondary-contrast-border: #8284ab;
584
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
585
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
586
+ --components-button-secondary-contrast-hover: #626493;
587
+ --components-button-secondary-contrast-icon: #ffffff;
588
+ --components-button-secondary-contrast-icon-active: #181c56;
589
+ --components-button-secondary-contrast-text: #ffffff;
590
+ --components-button-secondary-contrast-text-active: #181c56;
591
+ --components-button-secondary-standard-active: #aeb7e2;
592
+ --components-button-secondary-standard-border: #8284ab;
593
+ --components-button-secondary-standard-border-active: #181c56;
594
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
595
+ --components-button-secondary-standard-hover: #d9ddf2;
596
+ --components-button-secondary-standard-icon: #181c56;
597
+ --components-button-secondary-standard-icon-active: #181c56;
598
+ --components-button-secondary-standard-text: #181c56;
599
+ --components-button-secondary-standard-text-active: #181c56;
600
+ --components-button-squaresecondary-contrast-active: #8794d4;
601
+ --components-button-squaresecondary-contrast-border: #8284ab;
602
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
603
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
604
+ --components-button-squaresecondary-contrast-hover: #d9ddf2;
605
+ --components-button-squaresecondary-contrast-icon-active: #181c56;
606
+ --components-button-squaresecondary-contrast-icon-default: #ffffff;
607
+ --components-button-squaresecondary-contrast-icon-hover: #181c56;
608
+ --components-button-squaresecondary-contrast-label: #ffffff;
609
+ --components-button-squaresecondary-standard-active: #aeb7e2;
610
+ --components-button-squaresecondary-standard-border: #8284ab;
611
+ --components-button-squaresecondary-standard-border-active: #181c56;
612
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
613
+ --components-button-squaresecondary-standard-hover: #d9ddf2;
614
+ --components-button-squaresecondary-standard-icon: #181c56;
615
+ --components-button-squaresecondary-standard-icon-active: #181c56;
616
+ --components-button-squaresecondary-standard-text: #181c56;
617
+ --components-button-squaresuccess-contrast-active: #37ab83;
618
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
619
+ --components-button-squaresuccess-contrast-default: #5ac39a;
620
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
621
+ --components-button-squaresuccess-contrast-icon: #181c56;
622
+ --components-button-squaresuccess-contrast-label: #ffffff;
623
+ --components-button-squaresuccess-standard-active: #37ab83;
624
+ --components-button-squaresuccess-standard-border: #181c56;
625
+ --components-button-squaresuccess-standard-default: #5ac39a;
626
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
627
+ --components-button-squaresuccess-standard-icon: #181c56;
628
+ --components-button-squaresuccess-standard-label: #181c56;
629
+ --components-button-success-contrast-active: #37ab83;
630
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
631
+ --components-button-success-contrast-default: #5ac39a;
632
+ --components-button-success-contrast-hover: #9cd9c2;
633
+ --components-button-success-contrast-icon: #181c56;
634
+ --components-button-success-contrast-text: #181c56;
635
+ --components-button-success-standard-active: #37ab83;
636
+ --components-button-success-standard-border: #181c56;
637
+ --components-button-success-standard-default: #5ac39a;
638
+ --components-button-success-standard-hover: #9cd9c2;
639
+ --components-button-success-standard-icon: #181c56;
640
+ --components-button-success-standard-text: #181c56;
641
+ }
642
+
643
+ [data-color-mode=dark] {
644
+ --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
645
+ --components-button-disabled-contrast-icon-disabled: #b6b8ba;
646
+ --components-button-disabled-contrast-text-disabled: #b6b8ba;
647
+ --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
648
+ --components-button-disabled-standard-icon-disabled: #b6b8ba;
649
+ --components-button-disabled-standard-text-disabled: #b6b8ba;
650
+ --components-button-floating-contrast-active: #8794d4;
651
+ --components-button-floating-contrast-default: #aeb7e2;
652
+ --components-button-floating-contrast-hover: #c7cdeb;
653
+ --components-button-floating-contrast-icon: #08091c;
654
+ --components-button-floating-contrast-text: #08091c;
655
+ --components-button-floating-standard-active: #8794d4;
656
+ --components-button-floating-standard-default: #aeb7e2;
657
+ --components-button-floating-standard-hover: #c7cdeb;
658
+ --components-button-floating-standard-icon: #08091c;
659
+ --components-button-floating-standard-text: #08091c;
660
+ --components-button-iconbutton-contrast-active: #8794d4;
661
+ --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
662
+ --components-button-iconbutton-contrast-hover: #626493;
663
+ --components-button-iconbutton-contrast-icon: #e5e5e9;
664
+ --components-button-iconbutton-contrast-icon-active: #08091c;
665
+ --components-button-iconbutton-contrast-text: #e5e5e9;
666
+ --components-button-iconbutton-contrast-text-active: #08091c;
667
+ --components-button-iconbutton-standard-active: #8794d4;
668
+ --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
669
+ --components-button-iconbutton-standard-hover: #626493;
670
+ --components-button-iconbutton-standard-icon: #e5e5e9;
671
+ --components-button-iconbutton-standard-icon-active: #08091c;
672
+ --components-button-iconbutton-standard-text: #e5e5e9;
673
+ --components-button-iconbutton-standard-text-active: #08091c;
674
+ --components-button-negative-contrast-active: #ff9494;
675
+ --components-button-negative-contrast-border: #ff9494;
676
+ --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
677
+ --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
678
+ --components-button-negative-contrast-icon: #e5e5e9;
679
+ --components-button-negative-contrast-icon-active: #08091c;
680
+ --components-button-negative-contrast-text: #e5e5e9;
681
+ --components-button-negative-contrast-text-active: #08091c;
682
+ --components-button-negative-standard-active: #ff9494;
683
+ --components-button-negative-standard-border: #ff9494;
684
+ --components-button-negative-standard-default: rgba(255, 255, 255, 0);
685
+ --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
686
+ --components-button-negative-standard-icon: #e5e5e9;
687
+ --components-button-negative-standard-icon-active: #08091c;
688
+ --components-button-negative-standard-text: #e5e5e9;
689
+ --components-button-negative-standard-text-active: #08091c;
690
+ --components-button-primary-contrast-active: #8794d4;
691
+ --components-button-primary-contrast-default: #aeb7e2;
692
+ --components-button-primary-contrast-hover: #c7cdeb;
693
+ --components-button-primary-contrast-icon: #08091c;
694
+ --components-button-primary-contrast-text: #08091c;
695
+ --components-button-primary-standard-active: #8794d4;
696
+ --components-button-primary-standard-default: #aeb7e2;
697
+ --components-button-primary-standard-hover: #c7cdeb;
698
+ --components-button-primary-standard-icon: #08091c;
699
+ --components-button-primary-standard-text: #08091c;
700
+ --components-button-secondary-contrast-active: #8794d4;
701
+ --components-button-secondary-contrast-border: #8284ab;
702
+ --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
703
+ --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
704
+ --components-button-secondary-contrast-hover: #626493;
705
+ --components-button-secondary-contrast-icon: #e5e5e9;
706
+ --components-button-secondary-contrast-icon-active: #08091c;
707
+ --components-button-secondary-contrast-text: #e5e5e9;
708
+ --components-button-secondary-contrast-text-active: #08091c;
709
+ --components-button-secondary-standard-active: #8794d4;
710
+ --components-button-secondary-standard-border: #8284ab;
711
+ --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
712
+ --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
713
+ --components-button-secondary-standard-hover: #626493;
714
+ --components-button-secondary-standard-icon: #e5e5e9;
715
+ --components-button-secondary-standard-icon-active: #08091c;
716
+ --components-button-secondary-standard-text: #e5e5e9;
717
+ --components-button-secondary-standard-text-active: #08091c;
718
+ --components-button-squaresecondary-contrast-active: #8794d4;
719
+ --components-button-squaresecondary-contrast-border: #8284ab;
720
+ --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
721
+ --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
722
+ --components-button-squaresecondary-contrast-hover: #626493;
723
+ --components-button-squaresecondary-contrast-icon-active: #08091c;
724
+ --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
725
+ --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
726
+ --components-button-squaresecondary-contrast-label: #e5e5e9;
727
+ --components-button-squaresecondary-standard-active: #8794d4;
728
+ --components-button-squaresecondary-standard-border: #8284ab;
729
+ --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
730
+ --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
731
+ --components-button-squaresecondary-standard-hover: #626493;
732
+ --components-button-squaresecondary-standard-icon: #e5e5e9;
733
+ --components-button-squaresecondary-standard-icon-active: #08091c;
734
+ --components-button-squaresecondary-standard-text: #e5e5e9;
735
+ --components-button-squaresuccess-contrast-active: #5ac39a;
736
+ --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
737
+ --components-button-squaresuccess-contrast-default: #5ac39a;
738
+ --components-button-squaresuccess-contrast-hover: #9cd9c2;
739
+ --components-button-squaresuccess-contrast-icon: #08091c;
740
+ --components-button-squaresuccess-contrast-label: #e5e5e9;
741
+ --components-button-squaresuccess-standard-active: #37ab83;
742
+ --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
743
+ --components-button-squaresuccess-standard-default: #5ac39a;
744
+ --components-button-squaresuccess-standard-hover: #9cd9c2;
745
+ --components-button-squaresuccess-standard-icon: #08091c;
746
+ --components-button-squaresuccess-standard-label: #e5e5e9;
747
+ --components-button-success-contrast-active: #37ab83;
748
+ --components-button-success-contrast-border: rgba(255, 255, 255, 0);
749
+ --components-button-success-contrast-default: #5ac39a;
750
+ --components-button-success-contrast-hover: #9cd9c2;
751
+ --components-button-success-contrast-icon: #08091c;
752
+ --components-button-success-contrast-text: #08091c;
753
+ --components-button-success-standard-active: #37ab83;
754
+ --components-button-success-standard-border: rgba(255, 255, 255, 0);
755
+ --components-button-success-standard-default: #5ac39a;
756
+ --components-button-success-standard-hover: #9cd9c2;
757
+ --components-button-success-standard-icon: #08091c;
758
+ --components-button-success-standard-text: #08091c;
759
+ }
760
+
761
+ /* DO NOT CHANGE!*/
829
762
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
830
- .eds-icon-button {
831
- border: 0.125rem solid transparent;
832
- border-radius: 0.25rem;
833
- background: none;
834
- color: var(--components-button-iconbutton-standard-text);
835
- cursor: pointer;
836
- display: flex;
837
- justify-content: center;
838
- align-items: center;
839
- font-size: 1rem;
840
- padding: 0.5rem;
841
- }
842
- .eds-contrast .eds-icon-button {
843
- color: var(--components-button-iconbutton-contrast-text);
844
- }
845
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
846
- background-color: var(--components-button-iconbutton-contrast-icon);
847
- }
848
- .eds-icon-button--size-small {
849
- height: 1.5rem;
850
- width: 1.5rem;
851
- padding: 0;
852
- }
853
- .eds-icon-button:hover {
854
- background-color: var(--components-button-iconbutton-standard-hover);
855
- }
856
- .eds-contrast .eds-icon-button:hover {
857
- background-color: var(--components-button-iconbutton-contrast-hover);
858
- }
859
- .eds-icon-button:active {
860
- background: var(--components-button-iconbutton-standard-active);
861
- color: var(--components-button-iconbutton-standard-text-active);
862
- }
863
- .eds-contrast .eds-icon-button:active {
864
- background: var(--components-button-iconbutton-contrast-active);
865
- color: var(--components-button-iconbutton-contrast-text-active);
866
- }
867
- .eds-icon-button:focus-visible {
868
- outline: 2px solid #181c56;
869
- outline-color: var(--basecolors-stroke-focus-standard);
870
- outline-offset: 0.125rem;
763
+ /* DO NOT CHANGE!*/
764
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
765
+ [data-color-mode=light],
766
+ :root {
767
+ --basecolors-frame-contrast: #181c56;
768
+ --basecolors-frame-contrastalt: #393d79;
769
+ --basecolors-frame-contrastalt-2: #292b6a;
770
+ --basecolors-frame-default: #ffffff;
771
+ --basecolors-frame-elevated: #ffffff;
772
+ --basecolors-frame-elevatedalt: #f6f6f9;
773
+ --basecolors-frame-subdued: #d9dae8;
774
+ --basecolors-frame-tint: #f6f6f9;
775
+ --basecolors-shape-accent: #181c56;
776
+ --basecolors-shape-bicycle-contrast: #00db9b;
777
+ --basecolors-shape-bicycle-default: #388f76;
778
+ --basecolors-shape-bus-contrast: #ff6392;
779
+ --basecolors-shape-bus-default: #c5044e;
780
+ --basecolors-shape-cableway-contrast: #b482fb;
781
+ --basecolors-shape-cableway-default: #78469a;
782
+ --basecolors-shape-disabled: #6e6f73;
783
+ --basecolors-shape-disabledalt: #b6b8ba;
784
+ --basecolors-shape-ferry-contrast: #6fdfff;
785
+ --basecolors-shape-ferry-default: #0c6693;
786
+ --basecolors-shape-funicular-contrast: #b482fb;
787
+ --basecolors-shape-funicular-default: #78469a;
788
+ --basecolors-shape-helicopter-contrast: #fbafea;
789
+ --basecolors-shape-helicopter-default: #800664;
790
+ --basecolors-shape-highlight: #ff5959;
791
+ --basecolors-shape-light: #ffffff;
792
+ --basecolors-shape-mask: #ffffff;
793
+ --basecolors-shape-maskalt: #ffffff;
794
+ --basecolors-shape-metro-contrast: #f08901;
795
+ --basecolors-shape-metro-default: #bf5826;
796
+ --basecolors-shape-mobility-contrast: #00db9b;
797
+ --basecolors-shape-mobility-default: #388f76;
798
+ --basecolors-shape-plane-contrast: #fbafea;
799
+ --basecolors-shape-plane-default: #800664;
800
+ --basecolors-shape-subdued: #626493;
801
+ --basecolors-shape-subduedalt: #d9dae8;
802
+ --basecolors-shape-taxi-contrast: #ffe082;
803
+ --basecolors-shape-taxi-default: #3d3e40;
804
+ --basecolors-shape-train-contrast: #42a5f5;
805
+ --basecolors-shape-train-default: #00367f;
806
+ --basecolors-shape-tram-contrast: #b482fb;
807
+ --basecolors-shape-tram-default: #78469a;
808
+ --basecolors-shape-walk-contrast: #8284ab;
809
+ --basecolors-shape-walk-default: #8d8e9c;
810
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
811
+ --basecolors-shape-airportlinkbus-default: #800664;
812
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
813
+ --basecolors-shape-airportlinkrail-default: #800664;
814
+ --basecolors-stroke-contrast: #aeb7e2;
815
+ --basecolors-stroke-default: #181c56;
816
+ --basecolors-stroke-disabled: #949699;
817
+ --basecolors-stroke-focus-contrast: #aeb7e2;
818
+ --basecolors-stroke-focus-standard: #181c56;
819
+ --basecolors-stroke-highlight: #ff5959;
820
+ --basecolors-stroke-light: #ffffff;
821
+ --basecolors-stroke-subdued: #8284ab;
822
+ --basecolors-stroke-subduedalt: #e3e6e8;
823
+ --basecolors-text-accent: #181c56;
824
+ --basecolors-text-disabled: #6e6f73;
825
+ --basecolors-text-disabledalt: #b6b8ba;
826
+ --basecolors-text-highlight: #ff5959;
827
+ --basecolors-text-light: #ffffff;
828
+ --basecolors-text-subdued: #626493;
829
+ --basecolors-text-subduedalt: #d9dae8;
871
830
  }
872
- .eds-contrast .eds-icon-button:focus-visible {
873
- outline-color: var(--basecolors-stroke-focus-contrast);
831
+
832
+ [data-color-mode=dark] {
833
+ --basecolors-frame-contrast: #212233;
834
+ --basecolors-frame-contrastalt: #141527;
835
+ --basecolors-frame-contrastalt-2: #08091c;
836
+ --basecolors-frame-default: #08091c;
837
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
838
+ --basecolors-frame-elevatedalt: #464755;
839
+ --basecolors-frame-subdued: #2d2e3e;
840
+ --basecolors-frame-tint: #141527;
841
+ --basecolors-shape-accent: #e5e5e9;
842
+ --basecolors-shape-bicycle-contrast: #4db295;
843
+ --basecolors-shape-bicycle-default: #4db295;
844
+ --basecolors-shape-bus-contrast: #ef7398;
845
+ --basecolors-shape-bus-default: #ef7398;
846
+ --basecolors-shape-cableway-contrast: #b898e5;
847
+ --basecolors-shape-cableway-default: #b898e5;
848
+ --basecolors-shape-disabled: #b6b8ba;
849
+ --basecolors-shape-disabledalt: #b3b4bd;
850
+ --basecolors-shape-ferry-contrast: #8ccfe2;
851
+ --basecolors-shape-ferry-default: #8ccfe2;
852
+ --basecolors-shape-funicular-contrast: #b898e5;
853
+ --basecolors-shape-funicular-default: #b898e5;
854
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
855
+ --basecolors-shape-helicopter-default: #f2b8e5;
856
+ --basecolors-shape-highlight: #ff9494;
857
+ --basecolors-shape-light: #e5e5e9;
858
+ --basecolors-shape-mask: #2d2e3e;
859
+ --basecolors-shape-maskalt: #393a49;
860
+ --basecolors-shape-metro-contrast: #dd973c;
861
+ --basecolors-shape-metro-default: #dd973c;
862
+ --basecolors-shape-mobility-contrast: #4db295;
863
+ --basecolors-shape-mobility-default: #4db295;
864
+ --basecolors-shape-plane-contrast: #f2b8e5;
865
+ --basecolors-shape-plane-default: #f2b8e5;
866
+ --basecolors-shape-subdued: #b3b4bd;
867
+ --basecolors-shape-subduedalt: #b3b4bd;
868
+ --basecolors-shape-taxi-contrast: #ffe082;
869
+ --basecolors-shape-taxi-default: #ffe082;
870
+ --basecolors-shape-train-contrast: #60a2d7;
871
+ --basecolors-shape-train-default: #60a2d7;
872
+ --basecolors-shape-tram-contrast: #b898e5;
873
+ --basecolors-shape-tram-default: #b898e5;
874
+ --basecolors-shape-walk-contrast: #8d8e9c;
875
+ --basecolors-shape-walk-default: #8d8e9c;
876
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
877
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
878
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
879
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
880
+ --basecolors-stroke-contrast: #aeb7e2;
881
+ --basecolors-stroke-default: #b3b4bd;
882
+ --basecolors-stroke-disabled: #e3e6e8;
883
+ --basecolors-stroke-focus-contrast: #aeb7e2;
884
+ --basecolors-stroke-focus-standard: #aeb7e2;
885
+ --basecolors-stroke-highlight: #ff9494;
886
+ --basecolors-stroke-light: #b3b4bd;
887
+ --basecolors-stroke-subdued: #81828f;
888
+ --basecolors-stroke-subduedalt: #949699;
889
+ --basecolors-text-accent: #e5e5e9;
890
+ --basecolors-text-disabled: #b6b8ba;
891
+ --basecolors-text-disabledalt: #b6b8ba;
892
+ --basecolors-text-highlight: #ff9494;
893
+ --basecolors-text-light: #e5e5e9;
894
+ --basecolors-text-subdued: #b3b4bd;
895
+ --basecolors-text-subduedalt: #b3b4bd;
874
896
  }
875
- .eds-icon-button--disabled {
876
- opacity: 0.5;
877
- pointer-events: none;
897
+
898
+ :root {
899
+ --eds-button: 1;
878
900
  }
879
- .eds-icon-button--disabled__wrapper {
880
- cursor: not-allowed;
881
- width: fit-content;
882
- }