@entur/layout 3.1.7 → 3.1.9-beta.0

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
@@ -1,4 +1,321 @@
1
1
  /* DO NOT CHANGE!*/
2
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. *//* DO NOT CHANGE!*/
3
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
4
+ /* DO NOT CHANGE!*/
5
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
+ /* DO NOT CHANGE!*/
7
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
+ [data-color-mode=light],
9
+ :root {
10
+ --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
11
+ --components-layout-badge-information-contrast-bullet: #64b3e7;
12
+ --components-layout-badge-information-contrast-fill: #64b3e7;
13
+ --components-layout-badge-information-contrast-text: #181c56;
14
+ --components-layout-badge-information-contrast-text-bullet: #ffffff;
15
+ --components-layout-badge-information-standard-border: #067eb2;
16
+ --components-layout-badge-information-standard-bullet: #067eb2;
17
+ --components-layout-badge-information-standard-fill: #e1eff8;
18
+ --components-layout-badge-information-standard-text: #181c56;
19
+ --components-layout-badge-information-standard-text-bullet: #181c56;
20
+ --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
21
+ --components-layout-badge-negative-contrast-bullet: #ff5959;
22
+ --components-layout-badge-negative-contrast-fill: #ff9494;
23
+ --components-layout-badge-negative-contrast-text: #181c56;
24
+ --components-layout-badge-negative-contrast-text-bullet: #ffffff;
25
+ --components-layout-badge-negative-standard-border: #d31b1b;
26
+ --components-layout-badge-negative-standard-bullet: #d31b1b;
27
+ --components-layout-badge-negative-standard-fill: #ffcece;
28
+ --components-layout-badge-negative-standard-text: #181c56;
29
+ --components-layout-badge-negative-standard-text-bullet: #181c56;
30
+ --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
31
+ --components-layout-badge-neutral-contrast-bullet: #c7cdeb;
32
+ --components-layout-badge-neutral-contrast-fill: #54568c;
33
+ --components-layout-badge-neutral-contrast-text: #ffffff;
34
+ --components-layout-badge-neutral-contrast-text-bullet: #ffffff;
35
+ --components-layout-badge-neutral-standard-border: #949699;
36
+ --components-layout-badge-neutral-standard-bullet: #81828f;
37
+ --components-layout-badge-neutral-standard-fill: #f6f6f9;
38
+ --components-layout-badge-neutral-standard-text: #181c56;
39
+ --components-layout-badge-neutral-standard-text-bullet: #181c56;
40
+ --components-layout-badge-primary-contrast-bullet: #aeb7e2;
41
+ --components-layout-badge-primary-contrast-fill: #aeb7e2;
42
+ --components-layout-badge-primary-contrast-text: #181c56;
43
+ --components-layout-badge-primary-contrast-text-bullet: #ffffff;
44
+ --components-layout-badge-primary-standard-bullet: #181c56;
45
+ --components-layout-badge-primary-standard-fill: #181c56;
46
+ --components-layout-badge-primary-standard-text: #ffffff;
47
+ --components-layout-badge-primary-standard-text-bullet: #181c56;
48
+ --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
49
+ --components-layout-badge-success-contrast-bullet: #5ac39a;
50
+ --components-layout-badge-success-contrast-fill: #5ac39a;
51
+ --components-layout-badge-success-contrast-text: #181c56;
52
+ --components-layout-badge-success-contrast-text-bullet: #ffffff;
53
+ --components-layout-badge-success-standard-border: #1a8e60;
54
+ --components-layout-badge-success-standard-bullet: #1a8e60;
55
+ --components-layout-badge-success-standard-fill: #d0f1e3;
56
+ --components-layout-badge-success-standard-text: #181c56;
57
+ --components-layout-badge-success-standard-text-bullet: #181c56;
58
+ --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
59
+ --components-layout-badge-warning-contrast-bullet: #ffe082;
60
+ --components-layout-badge-warning-contrast-fill: #ffe082;
61
+ --components-layout-badge-warning-contrast-text: #181c56;
62
+ --components-layout-badge-warning-contrast-text-bullet: #ffffff;
63
+ --components-layout-badge-warning-standard-border: #e9b10c;
64
+ --components-layout-badge-warning-standard-bullet: #ffca28;
65
+ --components-layout-badge-warning-standard-fill: #fff4cd;
66
+ --components-layout-badge-warning-standard-text: #181c56;
67
+ --components-layout-badge-warning-standard-text-bullet: #181c56;
68
+ --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
69
+ --components-layout-card-contrast-border-active: #aeb7e2;
70
+ --components-layout-card-contrast-divide: #ff5959;
71
+ --components-layout-card-contrast-fill-default-solid: #393d79;
72
+ --components-layout-card-contrast-fill-default-transparent: #393d79;
73
+ --components-layout-card-contrast-fill-hoveractive: #54568c;
74
+ --components-layout-card-contrast-icon: #ffffff;
75
+ --components-layout-card-contrast-shadowlayer1: rgba(255, 255, 255, 0);
76
+ --components-layout-card-contrast-shadowlayer2: rgba(255, 255, 255, 0);
77
+ --components-layout-card-contrast-shadowlayer3: rgba(255, 255, 255, 0);
78
+ --components-layout-card-contrast-subjecttext: #d9dae8;
79
+ --components-layout-card-contrast-text: #ffffff;
80
+ --components-layout-card-standard-border-default: #e3e6e8;
81
+ --components-layout-card-standard-border-active: #181c56;
82
+ --components-layout-card-standard-divide: #ff5959;
83
+ --components-layout-card-standard-fill-default-solid: #ffffff;
84
+ --components-layout-card-standard-fill-default-transparent: #ffffff;
85
+ --components-layout-card-standard-fill-hoveractive: #f6f6f9;
86
+ --components-layout-card-standard-icon: #181c56;
87
+ --components-layout-card-standard-shadowlayer1: rgba(204, 205, 212, 0.3019607843);
88
+ --components-layout-card-standard-shadowlayer2: rgba(229, 229, 233, 0.3490196078);
89
+ --components-layout-card-standard-shadowlayer3: rgba(229, 229, 233, 0.1490196078);
90
+ --components-layout-card-standard-subjecttext: #626493;
91
+ --components-layout-card-standard-text: #181c56;
92
+ }
93
+
94
+ [data-color-mode=dark] {
95
+ --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
96
+ --components-layout-badge-information-contrast-bullet: #acd7f1;
97
+ --components-layout-badge-information-contrast-fill: #acd7f1;
98
+ --components-layout-badge-information-contrast-text: #08091c;
99
+ --components-layout-badge-information-contrast-text-bullet: #e5e5e9;
100
+ --components-layout-badge-information-standard-border: rgba(255, 255, 255, 0);
101
+ --components-layout-badge-information-standard-bullet: #acd7f1;
102
+ --components-layout-badge-information-standard-fill: #acd7f1;
103
+ --components-layout-badge-information-standard-text: #08091c;
104
+ --components-layout-badge-information-standard-text-bullet: #e5e5e9;
105
+ --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
106
+ --components-layout-badge-negative-contrast-bullet: #ff9494;
107
+ --components-layout-badge-negative-contrast-fill: #ffcece;
108
+ --components-layout-badge-negative-contrast-text: #08091c;
109
+ --components-layout-badge-negative-contrast-text-bullet: #e5e5e9;
110
+ --components-layout-badge-negative-standard-border: rgba(255, 255, 255, 0);
111
+ --components-layout-badge-negative-standard-bullet: #ff9494;
112
+ --components-layout-badge-negative-standard-fill: #ffcece;
113
+ --components-layout-badge-negative-standard-text: #08091c;
114
+ --components-layout-badge-negative-standard-text-bullet: #e5e5e9;
115
+ --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
116
+ --components-layout-badge-neutral-contrast-bullet: #e5e5e9;
117
+ --components-layout-badge-neutral-contrast-fill: rgba(229, 229, 233, 0.3490196078);
118
+ --components-layout-badge-neutral-contrast-text: #e5e5e9;
119
+ --components-layout-badge-neutral-contrast-text-bullet: #e5e5e9;
120
+ --components-layout-badge-neutral-standard-border: rgba(255, 255, 255, 0);
121
+ --components-layout-badge-neutral-standard-bullet: #e5e5e9;
122
+ --components-layout-badge-neutral-standard-fill: rgba(229, 229, 233, 0.3490196078);
123
+ --components-layout-badge-neutral-standard-text: #e5e5e9;
124
+ --components-layout-badge-neutral-standard-text-bullet: #e5e5e9;
125
+ --components-layout-badge-primary-contrast-bullet: #aeb7e2;
126
+ --components-layout-badge-primary-contrast-fill: #aeb7e2;
127
+ --components-layout-badge-primary-contrast-text: #08091c;
128
+ --components-layout-badge-primary-contrast-text-bullet: #e5e5e9;
129
+ --components-layout-badge-primary-standard-bullet: #aeb7e2;
130
+ --components-layout-badge-primary-standard-fill: #aeb7e2;
131
+ --components-layout-badge-primary-standard-text: #08091c;
132
+ --components-layout-badge-primary-standard-text-bullet: #e5e5e9;
133
+ --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
134
+ --components-layout-badge-success-contrast-bullet: #9cd9c2;
135
+ --components-layout-badge-success-contrast-fill: #9cd9c2;
136
+ --components-layout-badge-success-contrast-text: #08091c;
137
+ --components-layout-badge-success-contrast-text-bullet: #e5e5e9;
138
+ --components-layout-badge-success-standard-border: rgba(255, 255, 255, 0);
139
+ --components-layout-badge-success-standard-bullet: #9cd9c2;
140
+ --components-layout-badge-success-standard-fill: #9cd9c2;
141
+ --components-layout-badge-success-standard-text: #08091c;
142
+ --components-layout-badge-success-standard-text-bullet: #e5e5e9;
143
+ --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
144
+ --components-layout-badge-warning-contrast-bullet: #ffeeb3;
145
+ --components-layout-badge-warning-contrast-fill: #ffeeb3;
146
+ --components-layout-badge-warning-contrast-text: #08091c;
147
+ --components-layout-badge-warning-contrast-text-bullet: #e5e5e9;
148
+ --components-layout-badge-warning-standard-border: rgba(255, 255, 255, 0);
149
+ --components-layout-badge-warning-standard-bullet: #ffeeb3;
150
+ --components-layout-badge-warning-standard-fill: #ffeeb3;
151
+ --components-layout-badge-warning-standard-text: #08091c;
152
+ --components-layout-badge-warning-standard-text-bullet: #e5e5e9;
153
+ --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
154
+ --components-layout-card-contrast-border-active: #b3b4bd;
155
+ --components-layout-card-contrast-divide: #ff5959;
156
+ --components-layout-card-contrast-fill-default-solid: #393a49;
157
+ --components-layout-card-contrast-fill-default-transparent: rgba(229, 229, 233, 0.1490196078);
158
+ --components-layout-card-contrast-fill-hoveractive: #464755;
159
+ --components-layout-card-contrast-icon: #e5e5e9;
160
+ --components-layout-card-contrast-shadowlayer1: rgba(255, 255, 255, 0);
161
+ --components-layout-card-contrast-shadowlayer2: rgba(255, 255, 255, 0);
162
+ --components-layout-card-contrast-shadowlayer3: rgba(255, 255, 255, 0);
163
+ --components-layout-card-contrast-subjecttext: #b3b4bd;
164
+ --components-layout-card-contrast-text: #e5e5e9;
165
+ --components-layout-card-standard-border-default: rgba(255, 255, 255, 0);
166
+ --components-layout-card-standard-border-active: #b3b4bd;
167
+ --components-layout-card-standard-divide: #ff5959;
168
+ --components-layout-card-standard-fill-default-solid: #393a49;
169
+ --components-layout-card-standard-fill-default-transparent: rgba(229, 229, 233, 0.1490196078);
170
+ --components-layout-card-standard-fill-hoveractive: #464755;
171
+ --components-layout-card-standard-icon: #e5e5e9;
172
+ --components-layout-card-standard-shadowlayer1: rgba(255, 255, 255, 0);
173
+ --components-layout-card-standard-shadowlayer2: rgba(255, 255, 255, 0);
174
+ --components-layout-card-standard-shadowlayer3: rgba(255, 255, 255, 0);
175
+ --components-layout-card-standard-subjecttext: #b3b4bd;
176
+ --components-layout-card-standard-text: #e5e5e9;
177
+ }
178
+
179
+ /* DO NOT CHANGE!*/
180
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
181
+ /* DO NOT CHANGE!*/
182
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
183
+ [data-color-mode=light],
184
+ :root {
185
+ --basecolors-frame-contrast: #181c56;
186
+ --basecolors-frame-contrastalt: #393d79;
187
+ --basecolors-frame-contrastalt-2: #292b6a;
188
+ --basecolors-frame-default: #ffffff;
189
+ --basecolors-frame-elevated: #ffffff;
190
+ --basecolors-frame-elevatedalt: #f6f6f9;
191
+ --basecolors-frame-subdued: #d9dae8;
192
+ --basecolors-frame-tint: #f6f6f9;
193
+ --basecolors-shape-accent: #181c56;
194
+ --basecolors-shape-bicycle-contrast: #00db9b;
195
+ --basecolors-shape-bicycle-default: #388f76;
196
+ --basecolors-shape-bus-contrast: #ff6392;
197
+ --basecolors-shape-bus-default: #c5044e;
198
+ --basecolors-shape-cableway-contrast: #b482fb;
199
+ --basecolors-shape-cableway-default: #78469a;
200
+ --basecolors-shape-disabled: #6e6f73;
201
+ --basecolors-shape-disabledalt: #b6b8ba;
202
+ --basecolors-shape-ferry-contrast: #6fdfff;
203
+ --basecolors-shape-ferry-default: #0c6693;
204
+ --basecolors-shape-funicular-contrast: #b482fb;
205
+ --basecolors-shape-funicular-default: #78469a;
206
+ --basecolors-shape-helicopter-contrast: #fbafea;
207
+ --basecolors-shape-helicopter-default: #800664;
208
+ --basecolors-shape-highlight: #ff5959;
209
+ --basecolors-shape-light: #ffffff;
210
+ --basecolors-shape-mask: #ffffff;
211
+ --basecolors-shape-maskalt: #ffffff;
212
+ --basecolors-shape-metro-contrast: #f08901;
213
+ --basecolors-shape-metro-default: #bf5826;
214
+ --basecolors-shape-mobility-contrast: #00db9b;
215
+ --basecolors-shape-mobility-default: #388f76;
216
+ --basecolors-shape-plane-contrast: #fbafea;
217
+ --basecolors-shape-plane-default: #800664;
218
+ --basecolors-shape-subdued: #626493;
219
+ --basecolors-shape-subduedalt: #d9dae8;
220
+ --basecolors-shape-taxi-contrast: #ffe082;
221
+ --basecolors-shape-taxi-default: #3d3e40;
222
+ --basecolors-shape-train-contrast: #42a5f5;
223
+ --basecolors-shape-train-default: #00367f;
224
+ --basecolors-shape-tram-contrast: #b482fb;
225
+ --basecolors-shape-tram-default: #78469a;
226
+ --basecolors-shape-walk-contrast: #8284ab;
227
+ --basecolors-shape-walk-default: #8d8e9c;
228
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
229
+ --basecolors-shape-airportlinkbus-default: #800664;
230
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
231
+ --basecolors-shape-airportlinkrail-default: #800664;
232
+ --basecolors-stroke-contrast: #aeb7e2;
233
+ --basecolors-stroke-default: #181c56;
234
+ --basecolors-stroke-disabled: #949699;
235
+ --basecolors-stroke-focus-contrast: #aeb7e2;
236
+ --basecolors-stroke-focus-standard: #181c56;
237
+ --basecolors-stroke-highlight: #ff5959;
238
+ --basecolors-stroke-light: #ffffff;
239
+ --basecolors-stroke-subdued: #8284ab;
240
+ --basecolors-stroke-subduedalt: #e3e6e8;
241
+ --basecolors-text-accent: #181c56;
242
+ --basecolors-text-disabled: #6e6f73;
243
+ --basecolors-text-disabledalt: #b6b8ba;
244
+ --basecolors-text-highlight: #ff5959;
245
+ --basecolors-text-light: #ffffff;
246
+ --basecolors-text-subdued: #626493;
247
+ --basecolors-text-subduedalt: #d9dae8;
248
+ }
249
+
250
+ [data-color-mode=dark] {
251
+ --basecolors-frame-contrast: #212233;
252
+ --basecolors-frame-contrastalt: #141527;
253
+ --basecolors-frame-contrastalt-2: #08091c;
254
+ --basecolors-frame-default: #08091c;
255
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
256
+ --basecolors-frame-elevatedalt: #464755;
257
+ --basecolors-frame-subdued: #2d2e3e;
258
+ --basecolors-frame-tint: #141527;
259
+ --basecolors-shape-accent: #e5e5e9;
260
+ --basecolors-shape-bicycle-contrast: #4db295;
261
+ --basecolors-shape-bicycle-default: #4db295;
262
+ --basecolors-shape-bus-contrast: #ef7398;
263
+ --basecolors-shape-bus-default: #ef7398;
264
+ --basecolors-shape-cableway-contrast: #b898e5;
265
+ --basecolors-shape-cableway-default: #b898e5;
266
+ --basecolors-shape-disabled: #b6b8ba;
267
+ --basecolors-shape-disabledalt: #b3b4bd;
268
+ --basecolors-shape-ferry-contrast: #8ccfe2;
269
+ --basecolors-shape-ferry-default: #8ccfe2;
270
+ --basecolors-shape-funicular-contrast: #b898e5;
271
+ --basecolors-shape-funicular-default: #b898e5;
272
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
273
+ --basecolors-shape-helicopter-default: #f2b8e5;
274
+ --basecolors-shape-highlight: #ff9494;
275
+ --basecolors-shape-light: #e5e5e9;
276
+ --basecolors-shape-mask: #2d2e3e;
277
+ --basecolors-shape-maskalt: #393a49;
278
+ --basecolors-shape-metro-contrast: #dd973c;
279
+ --basecolors-shape-metro-default: #dd973c;
280
+ --basecolors-shape-mobility-contrast: #4db295;
281
+ --basecolors-shape-mobility-default: #4db295;
282
+ --basecolors-shape-plane-contrast: #f2b8e5;
283
+ --basecolors-shape-plane-default: #f2b8e5;
284
+ --basecolors-shape-subdued: #b3b4bd;
285
+ --basecolors-shape-subduedalt: #b3b4bd;
286
+ --basecolors-shape-taxi-contrast: #ffe082;
287
+ --basecolors-shape-taxi-default: #ffe082;
288
+ --basecolors-shape-train-contrast: #60a2d7;
289
+ --basecolors-shape-train-default: #60a2d7;
290
+ --basecolors-shape-tram-contrast: #b898e5;
291
+ --basecolors-shape-tram-default: #b898e5;
292
+ --basecolors-shape-walk-contrast: #8d8e9c;
293
+ --basecolors-shape-walk-default: #8d8e9c;
294
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
295
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
296
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
297
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
298
+ --basecolors-stroke-contrast: #aeb7e2;
299
+ --basecolors-stroke-default: #b3b4bd;
300
+ --basecolors-stroke-disabled: #e3e6e8;
301
+ --basecolors-stroke-focus-contrast: #aeb7e2;
302
+ --basecolors-stroke-focus-standard: #aeb7e2;
303
+ --basecolors-stroke-highlight: #ff9494;
304
+ --basecolors-stroke-light: #b3b4bd;
305
+ --basecolors-stroke-subdued: #81828f;
306
+ --basecolors-stroke-subduedalt: #949699;
307
+ --basecolors-text-accent: #e5e5e9;
308
+ --basecolors-text-disabled: #b6b8ba;
309
+ --basecolors-text-disabledalt: #b6b8ba;
310
+ --basecolors-text-highlight: #ff9494;
311
+ --basecolors-text-light: #e5e5e9;
312
+ --basecolors-text-subdued: #b3b4bd;
313
+ --basecolors-text-subduedalt: #b3b4bd;
314
+ }
315
+
316
+ :root {
317
+ --eds-layout: 1;
318
+ }/* DO NOT CHANGE!*/
2
319
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
320
  /* DO NOT CHANGE!*/
4
321
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -104,33 +421,33 @@
104
421
  --sky-70: #044d6c;
105
422
  --sky-80: #003852;
106
423
  --sky-90: #022536;
107
- --transparent-blue-alpha10: rgba(158,160,189,0.10196);
108
- --transparent-blue-alpha40: rgba(84,86,140,0.4);
109
- --transparent-canary-alpha25: rgba(255,224,130,0.25098);
110
- --transparent-canary-alpha30: rgba(255,244,205,0.30196);
111
- --transparent-coral-alpha20: rgba(255,148,148,0.2);
112
- --transparent-ebony-alpha15: rgba(229,229,233,0.14902);
113
- --transparent-ebony-alpha20: rgba(204,205,212,0.30196);
114
- --transparent-ebony-alpha25: rgba(229,229,233,0.25098);
115
- --transparent-ebony-alpha35: rgba(229,229,233,0.34902);
116
- --transparent-lavender-alpha70: rgba(174,183,226,0.69804);
117
- --transparent-mint-alpha20: rgba(90,195,154,0.2);
118
- --transparent-neutral-alpha10: rgba(207,210,212,0.10196);
119
- --transparent-neutral-alpha15: rgba(207,210,212,0.14902);
120
- --transparent-neutral-alpha20: rgba(38,39,41,0.2);
121
- --transparent-peach-alpha70: rgba(255,191,158,0.69804);
122
- --transparent-sky-alpha20: rgba(45,152,210,0.2);
123
- --white-alpha-0: rgba(255,255,255,0);
124
- --white-alpha-10: rgba(255,255,255,0.10196);
424
+ --transparent-blue-alpha10: #9ea0bd1a;
425
+ --transparent-blue-alpha40: #54568c66;
426
+ --transparent-canary-alpha25: #ffe08240;
427
+ --transparent-canary-alpha30: #fff4cd4d;
428
+ --transparent-coral-alpha20: #ff949433;
429
+ --transparent-ebony-alpha15: #e5e5e926;
430
+ --transparent-ebony-alpha20: #cccdd44d;
431
+ --transparent-ebony-alpha25: #e5e5e940;
432
+ --transparent-ebony-alpha35: #e5e5e959;
433
+ --transparent-lavender-alpha70: #aeb7e2b2;
434
+ --transparent-mint-alpha20: #5ac39a33;
435
+ --transparent-neutral-alpha10: #cfd2d41a;
436
+ --transparent-neutral-alpha15: #cfd2d426;
437
+ --transparent-neutral-alpha20: #26272933;
438
+ --transparent-peach-alpha70: #ffbf9eb2;
439
+ --transparent-sky-alpha20: #2d98d233;
440
+ --white-alpha-0: #ffffff00;
441
+ --white-alpha-10: #ffffff1a;
125
442
  --white-alpha-100: #ffffff;
126
- --white-alpha-20: rgba(255,255,255,0.2);
127
- --white-alpha-30: rgba(255,255,255,0.30196);
128
- --white-alpha-40: rgba(255,255,255,0.4);
129
- --white-alpha-50: rgba(255,255,255,0.50196);
130
- --white-alpha-60: rgba(255,255,255,0.6);
131
- --white-alpha-70: rgba(255,255,255,0.69804);
132
- --white-alpha-80: rgba(255,255,255,0.8);
133
- --white-alpha-90: rgba(255,255,255,0.89804);
443
+ --white-alpha-20: #ffffff33;
444
+ --white-alpha-30: #ffffff4d;
445
+ --white-alpha-40: #ffffff66;
446
+ --white-alpha-50: #ffffff80;
447
+ --white-alpha-60: #ffffff99;
448
+ --white-alpha-70: #ffffffb2;
449
+ --white-alpha-80: #ffffffcc;
450
+ --white-alpha-90: #ffffffe5;
134
451
  }
135
452
 
136
453
  .eds-base-card {
@@ -141,10 +458,7 @@
141
458
  color: var(--components-layout-card-standard-text);
142
459
  border-radius: 0.25rem;
143
460
  align-items: flex-start;
144
- -webkit-appearance: none;
145
- -moz-appearance: none;
146
- appearance: none;
147
- -webkit-text-decoration: none;
461
+ appearance: none;
148
462
  text-decoration: none;
149
463
  }
150
464
  .eds-contrast .eds-base-card {
@@ -152,8 +466,7 @@
152
466
  border-color: var(--components-layout-card-contrast-border-default);
153
467
  box-shadow: none;
154
468
  color: var(--components-layout-card-contrast-text);
155
- }
156
- /* DO NOT CHANGE!*/
469
+ }/* DO NOT CHANGE!*/
157
470
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
158
471
  /* DO NOT CHANGE!*/
159
472
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -259,33 +572,33 @@
259
572
  --sky-70: #044d6c;
260
573
  --sky-80: #003852;
261
574
  --sky-90: #022536;
262
- --transparent-blue-alpha10: rgba(158,160,189,0.10196);
263
- --transparent-blue-alpha40: rgba(84,86,140,0.4);
264
- --transparent-canary-alpha25: rgba(255,224,130,0.25098);
265
- --transparent-canary-alpha30: rgba(255,244,205,0.30196);
266
- --transparent-coral-alpha20: rgba(255,148,148,0.2);
267
- --transparent-ebony-alpha15: rgba(229,229,233,0.14902);
268
- --transparent-ebony-alpha20: rgba(204,205,212,0.30196);
269
- --transparent-ebony-alpha25: rgba(229,229,233,0.25098);
270
- --transparent-ebony-alpha35: rgba(229,229,233,0.34902);
271
- --transparent-lavender-alpha70: rgba(174,183,226,0.69804);
272
- --transparent-mint-alpha20: rgba(90,195,154,0.2);
273
- --transparent-neutral-alpha10: rgba(207,210,212,0.10196);
274
- --transparent-neutral-alpha15: rgba(207,210,212,0.14902);
275
- --transparent-neutral-alpha20: rgba(38,39,41,0.2);
276
- --transparent-peach-alpha70: rgba(255,191,158,0.69804);
277
- --transparent-sky-alpha20: rgba(45,152,210,0.2);
278
- --white-alpha-0: rgba(255,255,255,0);
279
- --white-alpha-10: rgba(255,255,255,0.10196);
575
+ --transparent-blue-alpha10: #9ea0bd1a;
576
+ --transparent-blue-alpha40: #54568c66;
577
+ --transparent-canary-alpha25: #ffe08240;
578
+ --transparent-canary-alpha30: #fff4cd4d;
579
+ --transparent-coral-alpha20: #ff949433;
580
+ --transparent-ebony-alpha15: #e5e5e926;
581
+ --transparent-ebony-alpha20: #cccdd44d;
582
+ --transparent-ebony-alpha25: #e5e5e940;
583
+ --transparent-ebony-alpha35: #e5e5e959;
584
+ --transparent-lavender-alpha70: #aeb7e2b2;
585
+ --transparent-mint-alpha20: #5ac39a33;
586
+ --transparent-neutral-alpha10: #cfd2d41a;
587
+ --transparent-neutral-alpha15: #cfd2d426;
588
+ --transparent-neutral-alpha20: #26272933;
589
+ --transparent-peach-alpha70: #ffbf9eb2;
590
+ --transparent-sky-alpha20: #2d98d233;
591
+ --white-alpha-0: #ffffff00;
592
+ --white-alpha-10: #ffffff1a;
280
593
  --white-alpha-100: #ffffff;
281
- --white-alpha-20: rgba(255,255,255,0.2);
282
- --white-alpha-30: rgba(255,255,255,0.30196);
283
- --white-alpha-40: rgba(255,255,255,0.4);
284
- --white-alpha-50: rgba(255,255,255,0.50196);
285
- --white-alpha-60: rgba(255,255,255,0.6);
286
- --white-alpha-70: rgba(255,255,255,0.69804);
287
- --white-alpha-80: rgba(255,255,255,0.8);
288
- --white-alpha-90: rgba(255,255,255,0.89804);
594
+ --white-alpha-20: #ffffff33;
595
+ --white-alpha-30: #ffffff4d;
596
+ --white-alpha-40: #ffffff66;
597
+ --white-alpha-50: #ffffff80;
598
+ --white-alpha-60: #ffffff99;
599
+ --white-alpha-70: #ffffffb2;
600
+ --white-alpha-80: #ffffffcc;
601
+ --white-alpha-90: #ffffffe5;
289
602
  }
290
603
 
291
604
  .eds-navigation-card {
@@ -379,8 +692,7 @@
379
692
  .eds-navigation-card:hover .eds-navigation-card-header__highlight {
380
693
  width: 2rem;
381
694
  }
382
- }
383
- /* DO NOT CHANGE!*/
695
+ }/* DO NOT CHANGE!*/
384
696
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
385
697
  .eds-media-card {
386
698
  display: flex;
@@ -389,7 +701,6 @@
389
701
  flex-direction: column;
390
702
  overflow: hidden;
391
703
  position: relative;
392
- width: -moz-fit-content;
393
704
  width: fit-content;
394
705
  background-color: var(--components-layout-card-standard-fill-default-solid);
395
706
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
@@ -433,18 +744,14 @@
433
744
  .eds-media-card__media img {
434
745
  width: 100%;
435
746
  height: 100%;
436
- -o-object-fit: cover;
437
- object-fit: cover;
747
+ object-fit: cover;
438
748
  }
439
749
  .eds-media-card__text {
440
- -webkit-appearance: none;
441
- -moz-appearance: none;
442
- appearance: none;
750
+ appearance: none;
443
751
  width: 100%;
444
752
  color: inherit;
445
753
  display: flex;
446
754
  flex-direction: column;
447
- -webkit-text-decoration: none;
448
755
  text-decoration: none;
449
756
  padding: 1.5rem 2rem 2rem 2rem;
450
757
  }
@@ -455,9 +762,7 @@
455
762
  margin: 0.25rem 0 0.25rem;
456
763
  }
457
764
  .eds-media-card__text__title-link {
458
- -webkit-appearance: none;
459
- -moz-appearance: none;
460
- appearance: none;
765
+ appearance: none;
461
766
  all: unset;
462
767
  }
463
768
  .eds-media-card__text__title-link::after {
@@ -485,8 +790,7 @@
485
790
  }
486
791
  .eds-media-card--horizontal .eds-media-card__media {
487
792
  padding: 1.5rem 0 1.5rem 1.5rem;
488
- overflow: visible;
489
- overflow: initial;
793
+ overflow: unset;
490
794
  }
491
795
  .eds-media-card--horizontal .eds-media-card__media img {
492
796
  width: 10rem;
@@ -518,8 +822,7 @@
518
822
  .eds-media-card--horizontal .eds-media-card__text {
519
823
  padding: 2rem 2rem 2rem 0;
520
824
  }
521
- }
522
- /* DO NOT CHANGE!*/
825
+ }/* DO NOT CHANGE!*/
523
826
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
524
827
  .eds-badge {
525
828
  display: flex;
@@ -530,7 +833,6 @@
530
833
  font-size: 0.75rem;
531
834
  min-width: 1.5rem;
532
835
  height: 1.5rem;
533
- width: -moz-fit-content;
534
836
  width: fit-content;
535
837
  line-height: 1rem;
536
838
  padding: 2px 8px;
@@ -565,490 +867,170 @@
565
867
  background-color: var(--components-layout-badge-success-standard-fill);
566
868
  color: var(--components-layout-badge-success-standard-text);
567
869
  }
568
- .eds-contrast .eds-badge--variant-success {
569
- background-color: var(--components-layout-badge-success-contrast-fill);
570
- color: var(--components-layout-badge-success-contrast-text);
571
- }
572
- .eds-badge--variant-success.eds-badge--type-status, .eds-badge--variant-success.eds-badge--type-notification {
573
- border-color: var(--components-layout-badge-success-standard-border);
574
- }
575
- .eds-contrast .eds-badge--variant-success.eds-badge--type-status, .eds-contrast .eds-badge--variant-success.eds-badge--type-notification {
576
- border-color: var(--components-layout-badge-success-contrast-border);
577
- }
578
- .eds-badge--variant-success.eds-badge--type-bullet::before {
579
- background-color: var(--components-layout-badge-success-standard-bullet);
580
- }
581
- .eds-contrast .eds-badge--variant-success.eds-badge--type-bullet::before {
582
- background-color: var(--components-layout-badge-success-contrast-bullet);
583
- }
584
- .eds-badge--variant-warning {
585
- background-color: var(--components-layout-badge-warning-standard-fill);
586
- color: var(--components-layout-badge-warning-standard-text);
587
- }
588
- .eds-contrast .eds-badge--variant-warning {
589
- background-color: var(--components-layout-badge-warning-contrast-fill);
590
- color: var(--components-layout-badge-warning-contrast-text);
591
- }
592
- .eds-badge--variant-warning.eds-badge--type-status, .eds-badge--variant-warning.eds-badge--type-notification {
593
- border-color: var(--components-layout-badge-warning-standard-border);
594
- }
595
- .eds-contrast .eds-badge--variant-warning.eds-badge--type-status, .eds-contrast .eds-badge--variant-warning.eds-badge--type-notification {
596
- border-color: var(--components-layout-badge-warning-contrast-border);
597
- }
598
- .eds-badge--variant-warning.eds-badge--type-bullet::before {
599
- background-color: var(--components-layout-badge-warning-standard-bullet);
600
- }
601
- .eds-contrast .eds-badge--variant-warning.eds-badge--type-bullet::before {
602
- background-color: var(--components-layout-badge-warning-contrast-bullet);
603
- }
604
- .eds-badge--variant-danger, .eds-badge--variant-negative {
605
- background-color: var(--components-layout-badge-negative-standard-fill);
606
- color: var(--components-layout-badge-negative-standard-text);
607
- }
608
- .eds-contrast .eds-badge--variant-danger, .eds-contrast .eds-badge--variant-negative {
609
- background-color: var(--components-layout-badge-negative-contrast-fill);
610
- color: var(--components-layout-badge-negative-contrast-text);
611
- }
612
- .eds-badge--variant-danger.eds-badge--type-status, .eds-badge--variant-danger.eds-badge--type-notification, .eds-badge--variant-negative.eds-badge--type-status, .eds-badge--variant-negative.eds-badge--type-notification {
613
- border-color: var(--components-layout-badge-negative-standard-border);
614
- }
615
- .eds-contrast .eds-badge--variant-danger.eds-badge--type-status, .eds-contrast .eds-badge--variant-danger.eds-badge--type-notification, .eds-contrast .eds-badge--variant-negative.eds-badge--type-status, .eds-contrast .eds-badge--variant-negative.eds-badge--type-notification {
616
- border-color: var(--components-layout-badge-negative-contrast-border);
617
- }
618
- .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-badge--variant-negative.eds-badge--type-bullet::before {
619
- background-color: var(--components-layout-badge-negative-standard-bullet);
620
- }
621
- .eds-contrast .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-negative.eds-badge--type-bullet::before {
622
- background-color: var(--components-layout-badge-negative-contrast-bullet);
623
- }
624
- .eds-badge--variant-info, .eds-badge--variant-information {
625
- background-color: var(--components-layout-badge-information-standard-fill);
626
- color: var(--components-layout-badge-information-standard-text);
627
- }
628
- .eds-contrast .eds-badge--variant-info, .eds-contrast .eds-badge--variant-information {
629
- background-color: var(--components-layout-badge-information-contrast-fill);
630
- color: var(--components-layout-badge-information-contrast-text);
631
- }
632
- .eds-badge--variant-info.eds-badge--type-status, .eds-badge--variant-info.eds-badge--type-notification, .eds-badge--variant-information.eds-badge--type-status, .eds-badge--variant-information.eds-badge--type-notification {
633
- border-color: var(--components-layout-badge-information-standard-border);
634
- }
635
- .eds-contrast .eds-badge--variant-info.eds-badge--type-status, .eds-contrast .eds-badge--variant-info.eds-badge--type-notification, .eds-contrast .eds-badge--variant-information.eds-badge--type-status, .eds-contrast .eds-badge--variant-information.eds-badge--type-notification {
636
- border-color: var(--components-layout-badge-information-contrast-border);
637
- }
638
- .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-badge--variant-information.eds-badge--type-bullet::before {
639
- background-color: var(--components-layout-badge-information-standard-bullet);
640
- }
641
- .eds-contrast .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-information.eds-badge--type-bullet::before {
642
- background-color: var(--components-layout-badge-information-contrast-bullet);
643
- }
644
- .eds-badge--variant-neutral {
645
- background-color: var(--components-layout-badge-neutral-standard-fill);
646
- color: var(--components-layout-badge-neutral-standard-text);
647
- }
648
- .eds-contrast .eds-badge--variant-neutral {
649
- background-color: var(--components-layout-badge-neutral-contrast-fill);
650
- color: var(--components-layout-badge-neutral-contrast-text);
651
- }
652
- .eds-badge--variant-neutral.eds-badge--type-status, .eds-badge--variant-neutral.eds-badge--type-notification {
653
- border-color: var(--components-layout-badge-neutral-standard-border);
654
- }
655
- .eds-contrast .eds-badge--variant-neutral.eds-badge--type-status, .eds-contrast .eds-badge--variant-neutral.eds-badge--type-notification {
656
- border-color: var(--components-layout-badge-neutral-contrast-border);
657
- }
658
- .eds-badge--variant-neutral.eds-badge--type-bullet::before {
659
- background-color: var(--components-layout-badge-neutral-standard-bullet);
660
- }
661
- .eds-contrast .eds-badge--variant-neutral.eds-badge--type-bullet::before {
662
- background-color: var(--components-layout-badge-neutral-contrast-bullet);
663
- }
664
- .eds-badge--type-status {
665
- display: block;
666
- text-transform: uppercase;
667
- border-radius: 0.25rem;
668
- line-height: 1.25rem;
669
- padding: 0 0.5rem;
670
- height: 1.25rem;
671
- border: 0.0625rem solid transparent;
672
- border-color: transparent;
673
- }
674
- .eds-badge--type-notification {
675
- line-height: 1.5rem;
676
- height: 1.5rem;
677
- min-width: 1.5rem;
678
- padding: 0 0.25rem;
679
- border: 0.0625rem solid transparent;
870
+ .eds-contrast .eds-badge--variant-success {
871
+ background-color: var(--components-layout-badge-success-contrast-fill);
872
+ color: var(--components-layout-badge-success-contrast-text);
680
873
  }
681
- .eds-contrast .eds-badge--type-notification {
682
- border-color: transparent;
874
+ .eds-badge--variant-success.eds-badge--type-status, .eds-badge--variant-success.eds-badge--type-notification {
875
+ border-color: var(--components-layout-badge-success-standard-border);
683
876
  }
684
- .eds-badge--type-bullet {
685
- background: none;
686
- font-size: 1rem;
687
- line-height: 1.5rem;
688
- color: var(--components-layout-badge-primary-standard-text-bullet);
689
- border: none;
690
- position: relative;
691
- padding-left: 1.375rem;
877
+ .eds-contrast .eds-badge--variant-success.eds-badge--type-status, .eds-contrast .eds-badge--variant-success.eds-badge--type-notification {
878
+ border-color: var(--components-layout-badge-success-contrast-border);
692
879
  }
693
- .eds-contrast .eds-badge--type-bullet {
694
- color: var(--components-layout-badge-primary-contrast-text-bullet);
695
- background: none;
880
+ .eds-badge--variant-success.eds-badge--type-bullet::before {
881
+ background-color: var(--components-layout-badge-success-standard-bullet);
696
882
  }
697
- .eds-badge--type-bullet::before {
698
- background: var(--components-layout-badge-primary-standard-fill);
699
- left: 0;
700
- content: "";
701
- position: absolute;
702
- top: 0.3125rem;
703
- height: 0.625rem;
704
- width: 0.625rem;
705
- border-radius: 50%;
883
+ .eds-contrast .eds-badge--variant-success.eds-badge--type-bullet::before {
884
+ background-color: var(--components-layout-badge-success-contrast-bullet);
706
885
  }
707
- /* DO NOT CHANGE!*/
708
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
709
- .eds-tag {
710
- background: #e9e9e9;
711
- color: #181c56;
712
- display: inline-block;
713
- min-width: 2rem;
714
- padding: 0.25rem 0.75rem;
715
- font-size: 0.875rem;
716
- line-height: 1.375rem;
886
+ .eds-badge--variant-warning {
887
+ background-color: var(--components-layout-badge-warning-standard-fill);
888
+ color: var(--components-layout-badge-warning-standard-text);
717
889
  }
718
- .eds-tag--leading-icon .eds-icon {
719
- margin-right: 0.5rem;
890
+ .eds-contrast .eds-badge--variant-warning {
891
+ background-color: var(--components-layout-badge-warning-contrast-fill);
892
+ color: var(--components-layout-badge-warning-contrast-text);
720
893
  }
721
- .eds-tag--trailing-icon .eds-icon {
722
- margin-left: 0.5rem;
894
+ .eds-badge--variant-warning.eds-badge--type-status, .eds-badge--variant-warning.eds-badge--type-notification {
895
+ border-color: var(--components-layout-badge-warning-standard-border);
723
896
  }
724
- .eds-tag--compact {
725
- font-size: 0.75rem;
726
- padding: 0.125rem 0.5rem;
727
- line-height: 1.25rem;
728
- height: 1.5rem;
897
+ .eds-contrast .eds-badge--variant-warning.eds-badge--type-status, .eds-contrast .eds-badge--variant-warning.eds-badge--type-notification {
898
+ border-color: var(--components-layout-badge-warning-contrast-border);
729
899
  }
730
- .eds-tag--compact.eds-tag--leading-icon .eds-icon {
731
- margin-right: 0.25rem;
900
+ .eds-badge--variant-warning.eds-badge--type-bullet::before {
901
+ background-color: var(--components-layout-badge-warning-standard-bullet);
732
902
  }
733
- .eds-tag--compact.eds-tag--trailing-icon .eds-icon {
734
- margin-left: 0.25rem;
903
+ .eds-contrast .eds-badge--variant-warning.eds-badge--type-bullet::before {
904
+ background-color: var(--components-layout-badge-warning-contrast-bullet);
735
905
  }
736
- /* DO NOT CHANGE!*/
737
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
738
- /* DO NOT CHANGE!*/
739
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
740
- /* DO NOT CHANGE!*/
741
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
742
- [data-color-mode=light],
743
- :root {
744
- --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
745
- --components-layout-badge-information-contrast-bullet: #64b3e7;
746
- --components-layout-badge-information-contrast-fill: #64b3e7;
747
- --components-layout-badge-information-contrast-text: #181c56;
748
- --components-layout-badge-information-contrast-text-bullet: #ffffff;
749
- --components-layout-badge-information-standard-border: #067eb2;
750
- --components-layout-badge-information-standard-bullet: #067eb2;
751
- --components-layout-badge-information-standard-fill: #e1eff8;
752
- --components-layout-badge-information-standard-text: #181c56;
753
- --components-layout-badge-information-standard-text-bullet: #181c56;
754
- --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
755
- --components-layout-badge-negative-contrast-bullet: #ff5959;
756
- --components-layout-badge-negative-contrast-fill: #ff9494;
757
- --components-layout-badge-negative-contrast-text: #181c56;
758
- --components-layout-badge-negative-contrast-text-bullet: #ffffff;
759
- --components-layout-badge-negative-standard-border: #d31b1b;
760
- --components-layout-badge-negative-standard-bullet: #d31b1b;
761
- --components-layout-badge-negative-standard-fill: #ffcece;
762
- --components-layout-badge-negative-standard-text: #181c56;
763
- --components-layout-badge-negative-standard-text-bullet: #181c56;
764
- --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
765
- --components-layout-badge-neutral-contrast-bullet: #c7cdeb;
766
- --components-layout-badge-neutral-contrast-fill: #54568c;
767
- --components-layout-badge-neutral-contrast-text: #ffffff;
768
- --components-layout-badge-neutral-contrast-text-bullet: #ffffff;
769
- --components-layout-badge-neutral-standard-border: #949699;
770
- --components-layout-badge-neutral-standard-bullet: #81828f;
771
- --components-layout-badge-neutral-standard-fill: #f6f6f9;
772
- --components-layout-badge-neutral-standard-text: #181c56;
773
- --components-layout-badge-neutral-standard-text-bullet: #181c56;
774
- --components-layout-badge-primary-contrast-bullet: #aeb7e2;
775
- --components-layout-badge-primary-contrast-fill: #aeb7e2;
776
- --components-layout-badge-primary-contrast-text: #181c56;
777
- --components-layout-badge-primary-contrast-text-bullet: #ffffff;
778
- --components-layout-badge-primary-standard-bullet: #181c56;
779
- --components-layout-badge-primary-standard-fill: #181c56;
780
- --components-layout-badge-primary-standard-text: #ffffff;
781
- --components-layout-badge-primary-standard-text-bullet: #181c56;
782
- --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
783
- --components-layout-badge-success-contrast-bullet: #5ac39a;
784
- --components-layout-badge-success-contrast-fill: #5ac39a;
785
- --components-layout-badge-success-contrast-text: #181c56;
786
- --components-layout-badge-success-contrast-text-bullet: #ffffff;
787
- --components-layout-badge-success-standard-border: #1a8e60;
788
- --components-layout-badge-success-standard-bullet: #1a8e60;
789
- --components-layout-badge-success-standard-fill: #d0f1e3;
790
- --components-layout-badge-success-standard-text: #181c56;
791
- --components-layout-badge-success-standard-text-bullet: #181c56;
792
- --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
793
- --components-layout-badge-warning-contrast-bullet: #ffe082;
794
- --components-layout-badge-warning-contrast-fill: #ffe082;
795
- --components-layout-badge-warning-contrast-text: #181c56;
796
- --components-layout-badge-warning-contrast-text-bullet: #ffffff;
797
- --components-layout-badge-warning-standard-border: #e9b10c;
798
- --components-layout-badge-warning-standard-bullet: #ffca28;
799
- --components-layout-badge-warning-standard-fill: #fff4cd;
800
- --components-layout-badge-warning-standard-text: #181c56;
801
- --components-layout-badge-warning-standard-text-bullet: #181c56;
802
- --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
803
- --components-layout-card-contrast-border-active: #aeb7e2;
804
- --components-layout-card-contrast-divide: #ff5959;
805
- --components-layout-card-contrast-fill-default-solid: #393d79;
806
- --components-layout-card-contrast-fill-default-transparent: #393d79;
807
- --components-layout-card-contrast-fill-hoveractive: #54568c;
808
- --components-layout-card-contrast-icon: #ffffff;
809
- --components-layout-card-contrast-shadowlayer1: rgba(255, 255, 255, 0);
810
- --components-layout-card-contrast-shadowlayer2: rgba(255, 255, 255, 0);
811
- --components-layout-card-contrast-shadowlayer3: rgba(255, 255, 255, 0);
812
- --components-layout-card-contrast-subjecttext: #d9dae8;
813
- --components-layout-card-contrast-text: #ffffff;
814
- --components-layout-card-standard-border-default: #e3e6e8;
815
- --components-layout-card-standard-border-active: #181c56;
816
- --components-layout-card-standard-divide: #ff5959;
817
- --components-layout-card-standard-fill-default-solid: #ffffff;
818
- --components-layout-card-standard-fill-default-transparent: #ffffff;
819
- --components-layout-card-standard-fill-hoveractive: #f6f6f9;
820
- --components-layout-card-standard-icon: #181c56;
821
- --components-layout-card-standard-shadowlayer1: rgba(204, 205, 212, 0.3019607843);
822
- --components-layout-card-standard-shadowlayer2: rgba(229, 229, 233, 0.3490196078);
823
- --components-layout-card-standard-shadowlayer3: rgba(229, 229, 233, 0.1490196078);
824
- --components-layout-card-standard-subjecttext: #626493;
825
- --components-layout-card-standard-text: #181c56;
906
+ .eds-badge--variant-danger, .eds-badge--variant-negative {
907
+ background-color: var(--components-layout-badge-negative-standard-fill);
908
+ color: var(--components-layout-badge-negative-standard-text);
826
909
  }
827
-
828
- [data-color-mode=dark] {
829
- --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
830
- --components-layout-badge-information-contrast-bullet: #acd7f1;
831
- --components-layout-badge-information-contrast-fill: #acd7f1;
832
- --components-layout-badge-information-contrast-text: #08091c;
833
- --components-layout-badge-information-contrast-text-bullet: #e5e5e9;
834
- --components-layout-badge-information-standard-border: rgba(255, 255, 255, 0);
835
- --components-layout-badge-information-standard-bullet: #acd7f1;
836
- --components-layout-badge-information-standard-fill: #acd7f1;
837
- --components-layout-badge-information-standard-text: #08091c;
838
- --components-layout-badge-information-standard-text-bullet: #e5e5e9;
839
- --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
840
- --components-layout-badge-negative-contrast-bullet: #ff9494;
841
- --components-layout-badge-negative-contrast-fill: #ffcece;
842
- --components-layout-badge-negative-contrast-text: #08091c;
843
- --components-layout-badge-negative-contrast-text-bullet: #e5e5e9;
844
- --components-layout-badge-negative-standard-border: rgba(255, 255, 255, 0);
845
- --components-layout-badge-negative-standard-bullet: #ff9494;
846
- --components-layout-badge-negative-standard-fill: #ffcece;
847
- --components-layout-badge-negative-standard-text: #08091c;
848
- --components-layout-badge-negative-standard-text-bullet: #e5e5e9;
849
- --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
850
- --components-layout-badge-neutral-contrast-bullet: #e5e5e9;
851
- --components-layout-badge-neutral-contrast-fill: rgba(229, 229, 233, 0.3490196078);
852
- --components-layout-badge-neutral-contrast-text: #e5e5e9;
853
- --components-layout-badge-neutral-contrast-text-bullet: #e5e5e9;
854
- --components-layout-badge-neutral-standard-border: rgba(255, 255, 255, 0);
855
- --components-layout-badge-neutral-standard-bullet: #e5e5e9;
856
- --components-layout-badge-neutral-standard-fill: rgba(229, 229, 233, 0.3490196078);
857
- --components-layout-badge-neutral-standard-text: #e5e5e9;
858
- --components-layout-badge-neutral-standard-text-bullet: #e5e5e9;
859
- --components-layout-badge-primary-contrast-bullet: #aeb7e2;
860
- --components-layout-badge-primary-contrast-fill: #aeb7e2;
861
- --components-layout-badge-primary-contrast-text: #08091c;
862
- --components-layout-badge-primary-contrast-text-bullet: #e5e5e9;
863
- --components-layout-badge-primary-standard-bullet: #aeb7e2;
864
- --components-layout-badge-primary-standard-fill: #aeb7e2;
865
- --components-layout-badge-primary-standard-text: #08091c;
866
- --components-layout-badge-primary-standard-text-bullet: #e5e5e9;
867
- --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
868
- --components-layout-badge-success-contrast-bullet: #9cd9c2;
869
- --components-layout-badge-success-contrast-fill: #9cd9c2;
870
- --components-layout-badge-success-contrast-text: #08091c;
871
- --components-layout-badge-success-contrast-text-bullet: #e5e5e9;
872
- --components-layout-badge-success-standard-border: rgba(255, 255, 255, 0);
873
- --components-layout-badge-success-standard-bullet: #9cd9c2;
874
- --components-layout-badge-success-standard-fill: #9cd9c2;
875
- --components-layout-badge-success-standard-text: #08091c;
876
- --components-layout-badge-success-standard-text-bullet: #e5e5e9;
877
- --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
878
- --components-layout-badge-warning-contrast-bullet: #ffeeb3;
879
- --components-layout-badge-warning-contrast-fill: #ffeeb3;
880
- --components-layout-badge-warning-contrast-text: #08091c;
881
- --components-layout-badge-warning-contrast-text-bullet: #e5e5e9;
882
- --components-layout-badge-warning-standard-border: rgba(255, 255, 255, 0);
883
- --components-layout-badge-warning-standard-bullet: #ffeeb3;
884
- --components-layout-badge-warning-standard-fill: #ffeeb3;
885
- --components-layout-badge-warning-standard-text: #08091c;
886
- --components-layout-badge-warning-standard-text-bullet: #e5e5e9;
887
- --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
888
- --components-layout-card-contrast-border-active: #b3b4bd;
889
- --components-layout-card-contrast-divide: #ff5959;
890
- --components-layout-card-contrast-fill-default-solid: #393a49;
891
- --components-layout-card-contrast-fill-default-transparent: rgba(229, 229, 233, 0.1490196078);
892
- --components-layout-card-contrast-fill-hoveractive: #464755;
893
- --components-layout-card-contrast-icon: #e5e5e9;
894
- --components-layout-card-contrast-shadowlayer1: rgba(255, 255, 255, 0);
895
- --components-layout-card-contrast-shadowlayer2: rgba(255, 255, 255, 0);
896
- --components-layout-card-contrast-shadowlayer3: rgba(255, 255, 255, 0);
897
- --components-layout-card-contrast-subjecttext: #b3b4bd;
898
- --components-layout-card-contrast-text: #e5e5e9;
899
- --components-layout-card-standard-border-default: rgba(255, 255, 255, 0);
900
- --components-layout-card-standard-border-active: #b3b4bd;
901
- --components-layout-card-standard-divide: #ff5959;
902
- --components-layout-card-standard-fill-default-solid: #393a49;
903
- --components-layout-card-standard-fill-default-transparent: rgba(229, 229, 233, 0.1490196078);
904
- --components-layout-card-standard-fill-hoveractive: #464755;
905
- --components-layout-card-standard-icon: #e5e5e9;
906
- --components-layout-card-standard-shadowlayer1: rgba(255, 255, 255, 0);
907
- --components-layout-card-standard-shadowlayer2: rgba(255, 255, 255, 0);
908
- --components-layout-card-standard-shadowlayer3: rgba(255, 255, 255, 0);
909
- --components-layout-card-standard-subjecttext: #b3b4bd;
910
- --components-layout-card-standard-text: #e5e5e9;
910
+ .eds-contrast .eds-badge--variant-danger, .eds-contrast .eds-badge--variant-negative {
911
+ background-color: var(--components-layout-badge-negative-contrast-fill);
912
+ color: var(--components-layout-badge-negative-contrast-text);
911
913
  }
912
-
913
- /* DO NOT CHANGE!*/
914
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
915
- /* DO NOT CHANGE!*/
916
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
917
- [data-color-mode=light],
918
- :root {
919
- --basecolors-frame-contrast: #181c56;
920
- --basecolors-frame-contrastalt: #393d79;
921
- --basecolors-frame-contrastalt-2: #292b6a;
922
- --basecolors-frame-default: #ffffff;
923
- --basecolors-frame-elevated: #ffffff;
924
- --basecolors-frame-elevatedalt: #f6f6f9;
925
- --basecolors-frame-subdued: #d9dae8;
926
- --basecolors-frame-tint: #f6f6f9;
927
- --basecolors-shape-accent: #181c56;
928
- --basecolors-shape-bicycle-contrast: #00db9b;
929
- --basecolors-shape-bicycle-default: #388f76;
930
- --basecolors-shape-bus-contrast: #ff6392;
931
- --basecolors-shape-bus-default: #c5044e;
932
- --basecolors-shape-cableway-contrast: #b482fb;
933
- --basecolors-shape-cableway-default: #78469a;
934
- --basecolors-shape-disabled: #6e6f73;
935
- --basecolors-shape-disabledalt: #b6b8ba;
936
- --basecolors-shape-ferry-contrast: #6fdfff;
937
- --basecolors-shape-ferry-default: #0c6693;
938
- --basecolors-shape-funicular-contrast: #b482fb;
939
- --basecolors-shape-funicular-default: #78469a;
940
- --basecolors-shape-helicopter-contrast: #fbafea;
941
- --basecolors-shape-helicopter-default: #800664;
942
- --basecolors-shape-highlight: #ff5959;
943
- --basecolors-shape-light: #ffffff;
944
- --basecolors-shape-mask: #ffffff;
945
- --basecolors-shape-maskalt: #ffffff;
946
- --basecolors-shape-metro-contrast: #f08901;
947
- --basecolors-shape-metro-default: #bf5826;
948
- --basecolors-shape-mobility-contrast: #00db9b;
949
- --basecolors-shape-mobility-default: #388f76;
950
- --basecolors-shape-plane-contrast: #fbafea;
951
- --basecolors-shape-plane-default: #800664;
952
- --basecolors-shape-subdued: #626493;
953
- --basecolors-shape-subduedalt: #d9dae8;
954
- --basecolors-shape-taxi-contrast: #ffe082;
955
- --basecolors-shape-taxi-default: #3d3e40;
956
- --basecolors-shape-train-contrast: #42a5f5;
957
- --basecolors-shape-train-default: #00367f;
958
- --basecolors-shape-tram-contrast: #b482fb;
959
- --basecolors-shape-tram-default: #78469a;
960
- --basecolors-shape-walk-contrast: #8284ab;
961
- --basecolors-shape-walk-default: #8d8e9c;
962
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
963
- --basecolors-shape-airportlinkbus-default: #800664;
964
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
965
- --basecolors-shape-airportlinkrail-default: #800664;
966
- --basecolors-stroke-contrast: #aeb7e2;
967
- --basecolors-stroke-default: #181c56;
968
- --basecolors-stroke-disabled: #949699;
969
- --basecolors-stroke-focus-contrast: #aeb7e2;
970
- --basecolors-stroke-focus-standard: #181c56;
971
- --basecolors-stroke-highlight: #ff5959;
972
- --basecolors-stroke-light: #ffffff;
973
- --basecolors-stroke-subdued: #8284ab;
974
- --basecolors-stroke-subduedalt: #e3e6e8;
975
- --basecolors-text-accent: #181c56;
976
- --basecolors-text-disabled: #6e6f73;
977
- --basecolors-text-disabledalt: #b6b8ba;
978
- --basecolors-text-highlight: #ff5959;
979
- --basecolors-text-light: #ffffff;
980
- --basecolors-text-subdued: #626493;
981
- --basecolors-text-subduedalt: #d9dae8;
914
+ .eds-badge--variant-danger.eds-badge--type-status, .eds-badge--variant-danger.eds-badge--type-notification, .eds-badge--variant-negative.eds-badge--type-status, .eds-badge--variant-negative.eds-badge--type-notification {
915
+ border-color: var(--components-layout-badge-negative-standard-border);
982
916
  }
983
-
984
- [data-color-mode=dark] {
985
- --basecolors-frame-contrast: #212233;
986
- --basecolors-frame-contrastalt: #141527;
987
- --basecolors-frame-contrastalt-2: #08091c;
988
- --basecolors-frame-default: #08091c;
989
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
990
- --basecolors-frame-elevatedalt: #464755;
991
- --basecolors-frame-subdued: #2d2e3e;
992
- --basecolors-frame-tint: #141527;
993
- --basecolors-shape-accent: #e5e5e9;
994
- --basecolors-shape-bicycle-contrast: #4db295;
995
- --basecolors-shape-bicycle-default: #4db295;
996
- --basecolors-shape-bus-contrast: #ef7398;
997
- --basecolors-shape-bus-default: #ef7398;
998
- --basecolors-shape-cableway-contrast: #b898e5;
999
- --basecolors-shape-cableway-default: #b898e5;
1000
- --basecolors-shape-disabled: #b6b8ba;
1001
- --basecolors-shape-disabledalt: #b3b4bd;
1002
- --basecolors-shape-ferry-contrast: #8ccfe2;
1003
- --basecolors-shape-ferry-default: #8ccfe2;
1004
- --basecolors-shape-funicular-contrast: #b898e5;
1005
- --basecolors-shape-funicular-default: #b898e5;
1006
- --basecolors-shape-helicopter-contrast: #f2b8e5;
1007
- --basecolors-shape-helicopter-default: #f2b8e5;
1008
- --basecolors-shape-highlight: #ff9494;
1009
- --basecolors-shape-light: #e5e5e9;
1010
- --basecolors-shape-mask: #2d2e3e;
1011
- --basecolors-shape-maskalt: #393a49;
1012
- --basecolors-shape-metro-contrast: #dd973c;
1013
- --basecolors-shape-metro-default: #dd973c;
1014
- --basecolors-shape-mobility-contrast: #4db295;
1015
- --basecolors-shape-mobility-default: #4db295;
1016
- --basecolors-shape-plane-contrast: #f2b8e5;
1017
- --basecolors-shape-plane-default: #f2b8e5;
1018
- --basecolors-shape-subdued: #b3b4bd;
1019
- --basecolors-shape-subduedalt: #b3b4bd;
1020
- --basecolors-shape-taxi-contrast: #ffe082;
1021
- --basecolors-shape-taxi-default: #ffe082;
1022
- --basecolors-shape-train-contrast: #60a2d7;
1023
- --basecolors-shape-train-default: #60a2d7;
1024
- --basecolors-shape-tram-contrast: #b898e5;
1025
- --basecolors-shape-tram-default: #b898e5;
1026
- --basecolors-shape-walk-contrast: #8d8e9c;
1027
- --basecolors-shape-walk-default: #8d8e9c;
1028
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
1029
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
1030
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
1031
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
1032
- --basecolors-stroke-contrast: #aeb7e2;
1033
- --basecolors-stroke-default: #b3b4bd;
1034
- --basecolors-stroke-disabled: #e3e6e8;
1035
- --basecolors-stroke-focus-contrast: #aeb7e2;
1036
- --basecolors-stroke-focus-standard: #aeb7e2;
1037
- --basecolors-stroke-highlight: #ff9494;
1038
- --basecolors-stroke-light: #b3b4bd;
1039
- --basecolors-stroke-subdued: #81828f;
1040
- --basecolors-stroke-subduedalt: #949699;
1041
- --basecolors-text-accent: #e5e5e9;
1042
- --basecolors-text-disabled: #b6b8ba;
1043
- --basecolors-text-disabledalt: #b6b8ba;
1044
- --basecolors-text-highlight: #ff9494;
1045
- --basecolors-text-light: #e5e5e9;
1046
- --basecolors-text-subdued: #b3b4bd;
1047
- --basecolors-text-subduedalt: #b3b4bd;
917
+ .eds-contrast .eds-badge--variant-danger.eds-badge--type-status, .eds-contrast .eds-badge--variant-danger.eds-badge--type-notification, .eds-contrast .eds-badge--variant-negative.eds-badge--type-status, .eds-contrast .eds-badge--variant-negative.eds-badge--type-notification {
918
+ border-color: var(--components-layout-badge-negative-contrast-border);
1048
919
  }
1049
-
1050
- :root {
1051
- --eds-layout: 1;
920
+ .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-badge--variant-negative.eds-badge--type-bullet::before {
921
+ background-color: var(--components-layout-badge-negative-standard-bullet);
1052
922
  }
1053
- /* DO NOT CHANGE!*/
923
+ .eds-contrast .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-negative.eds-badge--type-bullet::before {
924
+ background-color: var(--components-layout-badge-negative-contrast-bullet);
925
+ }
926
+ .eds-badge--variant-info, .eds-badge--variant-information {
927
+ background-color: var(--components-layout-badge-information-standard-fill);
928
+ color: var(--components-layout-badge-information-standard-text);
929
+ }
930
+ .eds-contrast .eds-badge--variant-info, .eds-contrast .eds-badge--variant-information {
931
+ background-color: var(--components-layout-badge-information-contrast-fill);
932
+ color: var(--components-layout-badge-information-contrast-text);
933
+ }
934
+ .eds-badge--variant-info.eds-badge--type-status, .eds-badge--variant-info.eds-badge--type-notification, .eds-badge--variant-information.eds-badge--type-status, .eds-badge--variant-information.eds-badge--type-notification {
935
+ border-color: var(--components-layout-badge-information-standard-border);
936
+ }
937
+ .eds-contrast .eds-badge--variant-info.eds-badge--type-status, .eds-contrast .eds-badge--variant-info.eds-badge--type-notification, .eds-contrast .eds-badge--variant-information.eds-badge--type-status, .eds-contrast .eds-badge--variant-information.eds-badge--type-notification {
938
+ border-color: var(--components-layout-badge-information-contrast-border);
939
+ }
940
+ .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-badge--variant-information.eds-badge--type-bullet::before {
941
+ background-color: var(--components-layout-badge-information-standard-bullet);
942
+ }
943
+ .eds-contrast .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-information.eds-badge--type-bullet::before {
944
+ background-color: var(--components-layout-badge-information-contrast-bullet);
945
+ }
946
+ .eds-badge--variant-neutral {
947
+ background-color: var(--components-layout-badge-neutral-standard-fill);
948
+ color: var(--components-layout-badge-neutral-standard-text);
949
+ }
950
+ .eds-contrast .eds-badge--variant-neutral {
951
+ background-color: var(--components-layout-badge-neutral-contrast-fill);
952
+ color: var(--components-layout-badge-neutral-contrast-text);
953
+ }
954
+ .eds-badge--variant-neutral.eds-badge--type-status, .eds-badge--variant-neutral.eds-badge--type-notification {
955
+ border-color: var(--components-layout-badge-neutral-standard-border);
956
+ }
957
+ .eds-contrast .eds-badge--variant-neutral.eds-badge--type-status, .eds-contrast .eds-badge--variant-neutral.eds-badge--type-notification {
958
+ border-color: var(--components-layout-badge-neutral-contrast-border);
959
+ }
960
+ .eds-badge--variant-neutral.eds-badge--type-bullet::before {
961
+ background-color: var(--components-layout-badge-neutral-standard-bullet);
962
+ }
963
+ .eds-contrast .eds-badge--variant-neutral.eds-badge--type-bullet::before {
964
+ background-color: var(--components-layout-badge-neutral-contrast-bullet);
965
+ }
966
+ .eds-badge--type-status {
967
+ display: block;
968
+ text-transform: uppercase;
969
+ border-radius: 0.25rem;
970
+ line-height: 1.25rem;
971
+ padding: 0 0.5rem;
972
+ height: 1.25rem;
973
+ border: 0.0625rem solid transparent;
974
+ border-color: transparent;
975
+ }
976
+ .eds-badge--type-notification {
977
+ line-height: 1.5rem;
978
+ height: 1.5rem;
979
+ min-width: 1.5rem;
980
+ padding: 0 0.25rem;
981
+ border: 0.0625rem solid transparent;
982
+ }
983
+ .eds-contrast .eds-badge--type-notification {
984
+ border-color: transparent;
985
+ }
986
+ .eds-badge--type-bullet {
987
+ background: none;
988
+ font-size: 1rem;
989
+ line-height: 1.5rem;
990
+ color: var(--components-layout-badge-primary-standard-text-bullet);
991
+ border: none;
992
+ position: relative;
993
+ padding-left: 1.375rem;
994
+ }
995
+ .eds-contrast .eds-badge--type-bullet {
996
+ color: var(--components-layout-badge-primary-contrast-text-bullet);
997
+ background: none;
998
+ }
999
+ .eds-badge--type-bullet::before {
1000
+ background: var(--components-layout-badge-primary-standard-fill);
1001
+ left: 0;
1002
+ content: "";
1003
+ position: absolute;
1004
+ top: 0.3125rem;
1005
+ height: 0.625rem;
1006
+ width: 0.625rem;
1007
+ border-radius: 50%;
1008
+ }/* DO NOT CHANGE!*/
1054
1009
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1010
+ .eds-tag {
1011
+ background: #e9e9e9;
1012
+ color: #181c56;
1013
+ display: inline-block;
1014
+ min-width: 2rem;
1015
+ padding: 0.25rem 0.75rem;
1016
+ font-size: 0.875rem;
1017
+ line-height: 1.375rem;
1018
+ }
1019
+ .eds-tag--leading-icon .eds-icon {
1020
+ margin-right: 0.5rem;
1021
+ }
1022
+ .eds-tag--trailing-icon .eds-icon {
1023
+ margin-left: 0.5rem;
1024
+ }
1025
+ .eds-tag--compact {
1026
+ font-size: 0.75rem;
1027
+ padding: 0.125rem 0.5rem;
1028
+ line-height: 1.25rem;
1029
+ height: 1.5rem;
1030
+ }
1031
+ .eds-tag--compact.eds-tag--leading-icon .eds-icon {
1032
+ margin-right: 0.25rem;
1033
+ }
1034
+ .eds-tag--compact.eds-tag--trailing-icon .eds-icon {
1035
+ margin-left: 0.25rem;
1036
+ }