@entur/alert 0.17.13-beta.1 → 0.17.13-beta.11

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,289 +1,5 @@
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-alert-alertbox-information-contrast-border: #067eb2;
10
- --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
11
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
12
- --components-alert-alertbox-information-contrast-icondefault: #181c56;
13
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
14
- --components-alert-alertbox-information-contrast-textdefault: #181c56;
15
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
16
- --components-alert-alertbox-information-standard-border: #067eb2;
17
- --components-alert-alertbox-information-standard-filldefault: #e1eff8;
18
- --components-alert-alertbox-information-standard-filltoast: #e1eff8;
19
- --components-alert-alertbox-information-standard-icondefault: #067eb2;
20
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
21
- --components-alert-alertbox-information-standard-textdefault: #181c56;
22
- --components-alert-alertbox-information-standard-texttoast: #181c56;
23
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
24
- --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
25
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
26
- --components-alert-alertbox-negative-contrast-icondefault: #181c56;
27
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
28
- --components-alert-alertbox-negative-contrast-textdefault: #181c56;
29
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
30
- --components-alert-alertbox-negative-standard-border: #d31b1b;
31
- --components-alert-alertbox-negative-standard-filldefault: #ffcece;
32
- --components-alert-alertbox-negative-standard-filltoast: #ffcece;
33
- --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
34
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
35
- --components-alert-alertbox-negative-standard-textdefault: #181c56;
36
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
37
- --components-alert-alertbox-success-contrast-border: #1a8e60;
38
- --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
39
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
40
- --components-alert-alertbox-success-contrast-icondefault: #181c56;
41
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
42
- --components-alert-alertbox-success-contrast-textdefault: #181c56;
43
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
44
- --components-alert-alertbox-success-standard-border: #1a8e60;
45
- --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
46
- --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
47
- --components-alert-alertbox-success-standard-icondefault: #1a8e60;
48
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
49
- --components-alert-alertbox-success-standard-textdefault: #181c56;
50
- --components-alert-alertbox-success-standard-texttoast: #181c56;
51
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
52
- --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
53
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
54
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
55
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
56
- --components-alert-alertbox-warning-contrast-textdefault: #181c56;
57
- --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
58
- --components-alert-alertbox-warning-standard-border: #e9b10c;
59
- --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
60
- --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
61
- --components-alert-alertbox-warning-standard-icondefault: #181c56;
62
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
63
- --components-alert-alertbox-warning-standard-textdefault: #181c56;
64
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
65
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
66
- --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
67
- --components-alert-copyabletext-contrast-fill: #f6f6f9;
68
- --components-alert-copyabletext-contrast-icon: #181c56;
69
- --components-alert-copyabletext-contrast-text: #181c56;
70
- --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
71
- --components-alert-copyabletext-standard-border-interactive: #181c56;
72
- --components-alert-copyabletext-standard-fill: #f6f6f9;
73
- --components-alert-copyabletext-standard-icon: #181c56;
74
- --components-alert-copyabletext-standard-text: #181c56;
75
- }
76
-
77
- [data-color-mode=dark] {
78
- --components-alert-alertbox-information-contrast-border: #067eb2;
79
- --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
80
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
81
- --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
82
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
83
- --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
84
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
85
- --components-alert-alertbox-information-standard-border: #067eb2;
86
- --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
87
- --components-alert-alertbox-information-standard-filltoast: #acd7f1;
88
- --components-alert-alertbox-information-standard-icondefault: #acd7f1;
89
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
90
- --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
91
- --components-alert-alertbox-information-standard-texttoast: #181c56;
92
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
93
- --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
94
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
95
- --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
96
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
97
- --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
98
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
99
- --components-alert-alertbox-negative-standard-border: #d31b1b;
100
- --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
101
- --components-alert-alertbox-negative-standard-filltoast: #ff9494;
102
- --components-alert-alertbox-negative-standard-icondefault: #ff9494;
103
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
104
- --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
105
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
106
- --components-alert-alertbox-success-contrast-border: #1a8e60;
107
- --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
108
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
109
- --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
110
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
111
- --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
112
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
113
- --components-alert-alertbox-success-standard-border: #1a8e60;
114
- --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
115
- --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
116
- --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
117
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
118
- --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
119
- --components-alert-alertbox-success-standard-texttoast: #181c56;
120
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
121
- --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
122
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
123
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
124
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
125
- --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
126
- --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
127
- --components-alert-alertbox-warning-standard-border: #e9b10c;
128
- --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
129
- --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
130
- --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
131
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
132
- --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
133
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
134
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
135
- --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
136
- --components-alert-copyabletext-contrast-fill: #393a49;
137
- --components-alert-copyabletext-contrast-icon: #e5e5e9;
138
- --components-alert-copyabletext-contrast-text: #e5e5e9;
139
- --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
140
- --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
141
- --components-alert-copyabletext-standard-fill: #393a49;
142
- --components-alert-copyabletext-standard-icon: #e5e5e9;
143
- --components-alert-copyabletext-standard-text: #e5e5e9;
144
- }
145
-
146
- /* DO NOT CHANGE!*/
147
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
148
- /* DO NOT CHANGE!*/
149
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
150
- [data-color-mode=light],
151
- :root {
152
- --basecolors-frame-contrast: #181c56;
153
- --basecolors-frame-contrastalt: #393d79;
154
- --basecolors-frame-contrastalt-2: #292b6a;
155
- --basecolors-frame-default: #ffffff;
156
- --basecolors-frame-elevated: #ffffff;
157
- --basecolors-frame-elevatedalt: #f6f6f9;
158
- --basecolors-frame-subdued: #d9dae8;
159
- --basecolors-frame-tint: #f6f6f9;
160
- --basecolors-shape-accent: #181c56;
161
- --basecolors-shape-bicycle-contrast: #00db9b;
162
- --basecolors-shape-bicycle-default: #388f76;
163
- --basecolors-shape-bus-contrast: #ff6392;
164
- --basecolors-shape-bus-default: #c5044e;
165
- --basecolors-shape-cableway-contrast: #b482fb;
166
- --basecolors-shape-cableway-default: #78469a;
167
- --basecolors-shape-disabled: #6e6f73;
168
- --basecolors-shape-disabledalt: #b6b8ba;
169
- --basecolors-shape-ferry-contrast: #6fdfff;
170
- --basecolors-shape-ferry-default: #0c6693;
171
- --basecolors-shape-funicular-contrast: #b482fb;
172
- --basecolors-shape-funicular-default: #78469a;
173
- --basecolors-shape-helicopter-contrast: #fbafea;
174
- --basecolors-shape-helicopter-default: #800664;
175
- --basecolors-shape-highlight: #ff5959;
176
- --basecolors-shape-light: #ffffff;
177
- --basecolors-shape-mask: #ffffff;
178
- --basecolors-shape-maskalt: #ffffff;
179
- --basecolors-shape-metro-contrast: #f08901;
180
- --basecolors-shape-metro-default: #bf5826;
181
- --basecolors-shape-mobility-contrast: #00db9b;
182
- --basecolors-shape-mobility-default: #388f76;
183
- --basecolors-shape-plane-contrast: #fbafea;
184
- --basecolors-shape-plane-default: #800664;
185
- --basecolors-shape-subdued: #626493;
186
- --basecolors-shape-subduedalt: #d9dae8;
187
- --basecolors-shape-taxi-contrast: #ffe082;
188
- --basecolors-shape-taxi-default: #3d3e40;
189
- --basecolors-shape-train-contrast: #42a5f5;
190
- --basecolors-shape-train-default: #00367f;
191
- --basecolors-shape-tram-contrast: #b482fb;
192
- --basecolors-shape-tram-default: #78469a;
193
- --basecolors-shape-walk-contrast: #8284ab;
194
- --basecolors-shape-walk-default: #8d8e9c;
195
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
196
- --basecolors-shape-airportlinkbus-default: #800664;
197
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
198
- --basecolors-shape-airportlinkrail-default: #800664;
199
- --basecolors-stroke-contrast: #aeb7e2;
200
- --basecolors-stroke-default: #181c56;
201
- --basecolors-stroke-disabled: #949699;
202
- --basecolors-stroke-focus-contrast: #aeb7e2;
203
- --basecolors-stroke-focus-standard: #181c56;
204
- --basecolors-stroke-highlight: #ff5959;
205
- --basecolors-stroke-light: #ffffff;
206
- --basecolors-stroke-subdued: #8284ab;
207
- --basecolors-stroke-subduedalt: #e3e6e8;
208
- --basecolors-text-accent: #181c56;
209
- --basecolors-text-disabled: #6e6f73;
210
- --basecolors-text-disabledalt: #b6b8ba;
211
- --basecolors-text-highlight: #ff5959;
212
- --basecolors-text-light: #ffffff;
213
- --basecolors-text-subdued: #626493;
214
- --basecolors-text-subduedalt: #d9dae8;
215
- }
216
-
217
- [data-color-mode=dark] {
218
- --basecolors-frame-contrast: #212233;
219
- --basecolors-frame-contrastalt: #141527;
220
- --basecolors-frame-contrastalt-2: #08091c;
221
- --basecolors-frame-default: #08091c;
222
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
223
- --basecolors-frame-elevatedalt: #464755;
224
- --basecolors-frame-subdued: #2d2e3e;
225
- --basecolors-frame-tint: #141527;
226
- --basecolors-shape-accent: #e5e5e9;
227
- --basecolors-shape-bicycle-contrast: #4db295;
228
- --basecolors-shape-bicycle-default: #4db295;
229
- --basecolors-shape-bus-contrast: #ef7398;
230
- --basecolors-shape-bus-default: #ef7398;
231
- --basecolors-shape-cableway-contrast: #b898e5;
232
- --basecolors-shape-cableway-default: #b898e5;
233
- --basecolors-shape-disabled: #b6b8ba;
234
- --basecolors-shape-disabledalt: #b3b4bd;
235
- --basecolors-shape-ferry-contrast: #8ccfe2;
236
- --basecolors-shape-ferry-default: #8ccfe2;
237
- --basecolors-shape-funicular-contrast: #b898e5;
238
- --basecolors-shape-funicular-default: #b898e5;
239
- --basecolors-shape-helicopter-contrast: #f2b8e5;
240
- --basecolors-shape-helicopter-default: #f2b8e5;
241
- --basecolors-shape-highlight: #ff9494;
242
- --basecolors-shape-light: #e5e5e9;
243
- --basecolors-shape-mask: #2d2e3e;
244
- --basecolors-shape-maskalt: #393a49;
245
- --basecolors-shape-metro-contrast: #dd973c;
246
- --basecolors-shape-metro-default: #dd973c;
247
- --basecolors-shape-mobility-contrast: #4db295;
248
- --basecolors-shape-mobility-default: #4db295;
249
- --basecolors-shape-plane-contrast: #f2b8e5;
250
- --basecolors-shape-plane-default: #f2b8e5;
251
- --basecolors-shape-subdued: #b3b4bd;
252
- --basecolors-shape-subduedalt: #b3b4bd;
253
- --basecolors-shape-taxi-contrast: #ffe082;
254
- --basecolors-shape-taxi-default: #ffe082;
255
- --basecolors-shape-train-contrast: #60a2d7;
256
- --basecolors-shape-train-default: #60a2d7;
257
- --basecolors-shape-tram-contrast: #b898e5;
258
- --basecolors-shape-tram-default: #b898e5;
259
- --basecolors-shape-walk-contrast: #8d8e9c;
260
- --basecolors-shape-walk-default: #8d8e9c;
261
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
262
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
263
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
264
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
265
- --basecolors-stroke-contrast: #aeb7e2;
266
- --basecolors-stroke-default: #b3b4bd;
267
- --basecolors-stroke-disabled: #e3e6e8;
268
- --basecolors-stroke-focus-contrast: #aeb7e2;
269
- --basecolors-stroke-focus-standard: #aeb7e2;
270
- --basecolors-stroke-highlight: #ff9494;
271
- --basecolors-stroke-light: #b3b4bd;
272
- --basecolors-stroke-subdued: #81828f;
273
- --basecolors-stroke-subduedalt: #949699;
274
- --basecolors-text-accent: #e5e5e9;
275
- --basecolors-text-disabled: #b6b8ba;
276
- --basecolors-text-disabledalt: #b6b8ba;
277
- --basecolors-text-highlight: #ff9494;
278
- --basecolors-text-light: #e5e5e9;
279
- --basecolors-text-subdued: #b3b4bd;
280
- --basecolors-text-subduedalt: #b3b4bd;
281
- }
282
-
283
- :root {
284
- --eds-alert: 1;
285
- }/* DO NOT CHANGE!*/
286
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
287
3
  .eds-alert-box {
288
4
  border: 0.0625rem solid transparent;
289
5
  border-radius: 0.25rem;
@@ -308,6 +24,7 @@
308
24
  @media screen and (min-width: 50rem) {
309
25
  .eds-alert-box--toast {
310
26
  min-width: 18rem;
27
+ width: -moz-fit-content;
311
28
  width: fit-content;
312
29
  }
313
30
  }
@@ -318,6 +35,7 @@
318
35
  font-size: 0.875rem;
319
36
  }
320
37
  .eds-alert-box--fit-content {
38
+ width: -moz-fit-content;
321
39
  width: fit-content;
322
40
  }
323
41
  .eds-alert-box--success {
@@ -464,7 +182,8 @@
464
182
  .eds-alert-box__content {
465
183
  flex: 1;
466
184
  word-break: break-word;
467
- hyphens: auto;
185
+ -webkit-hyphens: auto;
186
+ hyphens: auto;
468
187
  }
469
188
  .eds-alert-box__content--no-children {
470
189
  display: flex;
@@ -482,7 +201,9 @@
482
201
  .eds-alert-box .eds-alert-box__close-button {
483
202
  margin-top: -0.3125rem;
484
203
  margin-left: 0.5rem;
204
+ height: -moz-fit-content;
485
205
  height: fit-content;
206
+ width: -moz-fit-content;
486
207
  width: fit-content;
487
208
  }
488
209
  .eds-contrast .eds-alert-box .eds-alert-box__close-button {
@@ -504,7 +225,8 @@
504
225
  }
505
226
  .eds-contrast .eds-alert-box .eds-alert-box__tooltip::after {
506
227
  background: var(--components-tooltip-tooltip-standard-fill);
507
- }/* DO NOT CHANGE!*/
228
+ }
229
+ /* DO NOT CHANGE!*/
508
230
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
509
231
  .eds-toast-container {
510
232
  position: fixed;
@@ -533,6 +255,7 @@
533
255
  }
534
256
  @media screen and (min-width: 50rem) {
535
257
  .eds-toast-container {
258
+ left: auto;
536
259
  left: initial;
537
260
  }
538
261
  }
@@ -568,11 +291,14 @@
568
291
  opacity: 0;
569
292
  transform: translate3d(2000px, 0, 0) scaleX(2);
570
293
  }
571
- }/* DO NOT CHANGE!*/
294
+ }
295
+ /* DO NOT CHANGE!*/
572
296
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
573
297
  .eds-copyable-text,
574
298
  .eds-contrast .eds-copyable-text {
575
- appearance: none;
299
+ -webkit-appearance: none;
300
+ -moz-appearance: none;
301
+ appearance: none;
576
302
  background: none;
577
303
  border: 0;
578
304
  border-radius: 0;
@@ -615,7 +341,9 @@
615
341
  color: var(--components-alert-copyabletext-standard-text);
616
342
  margin: -0.5rem;
617
343
  margin-left: 0.5rem;
344
+ width: -moz-fit-content;
618
345
  width: fit-content;
346
+ height: -moz-fit-content;
619
347
  height: fit-content;
620
348
  }
621
349
  .eds-copyable-text .eds-copyable-text__button, .eds-contrast .eds-copyable-text .eds-copyable-text__button,
@@ -664,7 +392,8 @@
664
392
  .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
665
393
  .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
666
394
  outline-color: var(--basecolors-stroke-focus-standard);
667
- }/* DO NOT CHANGE!*/
395
+ }
396
+ /* DO NOT CHANGE!*/
668
397
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
669
398
  .eds-expandable-alert-box .eds-alert-box__content {
670
399
  width: 100%;
@@ -680,34 +409,319 @@
680
409
  .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
681
410
  margin-top: 0.125rem;
682
411
  }
683
- @media screen and (min-width: 50rem) {
684
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
685
- margin-top: 0.125rem;
686
- }
412
+ @media screen and (min-width: 50rem) {
413
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
414
+ margin-top: 0.125rem;
415
+ }
416
+ }
417
+ .eds-expandable-alert-box__title {
418
+ display: flex;
419
+ justify-content: space-between;
420
+ align-items: baseline;
421
+ }
422
+ .eds-expandable-alert-box__button {
423
+ color: var(--components-button-iconbutton-standard-text);
424
+ background: none;
425
+ border: none;
426
+ cursor: pointer;
427
+ font-family: inherit;
428
+ font-size: inherit;
429
+ line-height: 1.5rem;
430
+ padding: 0 0.25rem;
431
+ flex-shrink: 0;
432
+ }
433
+ .eds-expandable-alert-box__button:focus-visible {
434
+ outline: 2px solid #181c56;
435
+ outline-color: var(--basecolors-stroke-focus-standard);
436
+ outline-offset: 0.125rem;
437
+ }
438
+ .eds-expandable-alert-box__button .eds-icon {
439
+ font-size: 1rem;
440
+ padding-left: 0.25rem;
441
+ color: var(--components-button-iconbutton-standard-text);
442
+ }
443
+ /* DO NOT CHANGE!*/
444
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
+ /* DO NOT CHANGE!*/
446
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
447
+ /* DO NOT CHANGE!*/
448
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
449
+ [data-color-mode=light],
450
+ :root {
451
+ --components-alert-alertbox-information-contrast-border: #067eb2;
452
+ --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
453
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
454
+ --components-alert-alertbox-information-contrast-icondefault: #181c56;
455
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
456
+ --components-alert-alertbox-information-contrast-textdefault: #181c56;
457
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
458
+ --components-alert-alertbox-information-standard-border: #067eb2;
459
+ --components-alert-alertbox-information-standard-filldefault: #e1eff8;
460
+ --components-alert-alertbox-information-standard-filltoast: #e1eff8;
461
+ --components-alert-alertbox-information-standard-icondefault: #067eb2;
462
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
463
+ --components-alert-alertbox-information-standard-textdefault: #181c56;
464
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
465
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
466
+ --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
467
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
468
+ --components-alert-alertbox-negative-contrast-icondefault: #181c56;
469
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
470
+ --components-alert-alertbox-negative-contrast-textdefault: #181c56;
471
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
472
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
473
+ --components-alert-alertbox-negative-standard-filldefault: #ffcece;
474
+ --components-alert-alertbox-negative-standard-filltoast: #ffcece;
475
+ --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
476
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
477
+ --components-alert-alertbox-negative-standard-textdefault: #181c56;
478
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
479
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
480
+ --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
481
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
482
+ --components-alert-alertbox-success-contrast-icondefault: #181c56;
483
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
484
+ --components-alert-alertbox-success-contrast-textdefault: #181c56;
485
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
486
+ --components-alert-alertbox-success-standard-border: #1a8e60;
487
+ --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
488
+ --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
489
+ --components-alert-alertbox-success-standard-icondefault: #1a8e60;
490
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
491
+ --components-alert-alertbox-success-standard-textdefault: #181c56;
492
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
493
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
494
+ --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
495
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
496
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
497
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
498
+ --components-alert-alertbox-warning-contrast-textdefault: #181c56;
499
+ --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
500
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
501
+ --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
502
+ --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
503
+ --components-alert-alertbox-warning-standard-icondefault: #181c56;
504
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
505
+ --components-alert-alertbox-warning-standard-textdefault: #181c56;
506
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
507
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
508
+ --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
509
+ --components-alert-copyabletext-contrast-fill: #f6f6f9;
510
+ --components-alert-copyabletext-contrast-icon: #181c56;
511
+ --components-alert-copyabletext-contrast-text: #181c56;
512
+ --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
513
+ --components-alert-copyabletext-standard-border-interactive: #181c56;
514
+ --components-alert-copyabletext-standard-fill: #f6f6f9;
515
+ --components-alert-copyabletext-standard-icon: #181c56;
516
+ --components-alert-copyabletext-standard-text: #181c56;
517
+ }
518
+
519
+ [data-color-mode=dark] {
520
+ --components-alert-alertbox-information-contrast-border: #067eb2;
521
+ --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
522
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
523
+ --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
524
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
525
+ --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
526
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
527
+ --components-alert-alertbox-information-standard-border: #067eb2;
528
+ --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
529
+ --components-alert-alertbox-information-standard-filltoast: #acd7f1;
530
+ --components-alert-alertbox-information-standard-icondefault: #acd7f1;
531
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
532
+ --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
533
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
534
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
535
+ --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
536
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
537
+ --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
538
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
539
+ --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
540
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
541
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
542
+ --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
543
+ --components-alert-alertbox-negative-standard-filltoast: #ff9494;
544
+ --components-alert-alertbox-negative-standard-icondefault: #ff9494;
545
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
546
+ --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
547
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
548
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
549
+ --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
550
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
551
+ --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
552
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
553
+ --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
554
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
555
+ --components-alert-alertbox-success-standard-border: #1a8e60;
556
+ --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
557
+ --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
558
+ --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
559
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
560
+ --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
561
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
562
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
563
+ --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
564
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
565
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
566
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
567
+ --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
568
+ --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
569
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
570
+ --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
571
+ --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
572
+ --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
573
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
574
+ --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
575
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
576
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
577
+ --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
578
+ --components-alert-copyabletext-contrast-fill: #393a49;
579
+ --components-alert-copyabletext-contrast-icon: #e5e5e9;
580
+ --components-alert-copyabletext-contrast-text: #e5e5e9;
581
+ --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
582
+ --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
583
+ --components-alert-copyabletext-standard-fill: #393a49;
584
+ --components-alert-copyabletext-standard-icon: #e5e5e9;
585
+ --components-alert-copyabletext-standard-text: #e5e5e9;
687
586
  }
688
- .eds-expandable-alert-box__title {
689
- display: flex;
690
- justify-content: space-between;
691
- align-items: baseline;
587
+
588
+ /* DO NOT CHANGE!*/
589
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
590
+ /* DO NOT CHANGE!*/
591
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
592
+ [data-color-mode=light],
593
+ :root {
594
+ --basecolors-frame-contrast: #181c56;
595
+ --basecolors-frame-contrastalt: #393d79;
596
+ --basecolors-frame-contrastalt-2: #292b6a;
597
+ --basecolors-frame-default: #ffffff;
598
+ --basecolors-frame-elevated: #ffffff;
599
+ --basecolors-frame-elevatedalt: #f6f6f9;
600
+ --basecolors-frame-subdued: #d9dae8;
601
+ --basecolors-frame-tint: #f6f6f9;
602
+ --basecolors-shape-accent: #181c56;
603
+ --basecolors-shape-bicycle-contrast: #00db9b;
604
+ --basecolors-shape-bicycle-default: #388f76;
605
+ --basecolors-shape-bus-contrast: #ff6392;
606
+ --basecolors-shape-bus-default: #c5044e;
607
+ --basecolors-shape-cableway-contrast: #b482fb;
608
+ --basecolors-shape-cableway-default: #78469a;
609
+ --basecolors-shape-disabled: #6e6f73;
610
+ --basecolors-shape-disabledalt: #b6b8ba;
611
+ --basecolors-shape-ferry-contrast: #6fdfff;
612
+ --basecolors-shape-ferry-default: #0c6693;
613
+ --basecolors-shape-funicular-contrast: #b482fb;
614
+ --basecolors-shape-funicular-default: #78469a;
615
+ --basecolors-shape-helicopter-contrast: #fbafea;
616
+ --basecolors-shape-helicopter-default: #800664;
617
+ --basecolors-shape-highlight: #ff5959;
618
+ --basecolors-shape-light: #ffffff;
619
+ --basecolors-shape-mask: #ffffff;
620
+ --basecolors-shape-maskalt: #ffffff;
621
+ --basecolors-shape-metro-contrast: #f08901;
622
+ --basecolors-shape-metro-default: #bf5826;
623
+ --basecolors-shape-mobility-contrast: #00db9b;
624
+ --basecolors-shape-mobility-default: #388f76;
625
+ --basecolors-shape-plane-contrast: #fbafea;
626
+ --basecolors-shape-plane-default: #800664;
627
+ --basecolors-shape-subdued: #626493;
628
+ --basecolors-shape-subduedalt: #d9dae8;
629
+ --basecolors-shape-taxi-contrast: #ffe082;
630
+ --basecolors-shape-taxi-default: #3d3e40;
631
+ --basecolors-shape-train-contrast: #42a5f5;
632
+ --basecolors-shape-train-default: #00367f;
633
+ --basecolors-shape-tram-contrast: #b482fb;
634
+ --basecolors-shape-tram-default: #78469a;
635
+ --basecolors-shape-walk-contrast: #8284ab;
636
+ --basecolors-shape-walk-default: #8d8e9c;
637
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
638
+ --basecolors-shape-airportlinkbus-default: #800664;
639
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
640
+ --basecolors-shape-airportlinkrail-default: #800664;
641
+ --basecolors-stroke-contrast: #aeb7e2;
642
+ --basecolors-stroke-default: #181c56;
643
+ --basecolors-stroke-disabled: #949699;
644
+ --basecolors-stroke-focus-contrast: #aeb7e2;
645
+ --basecolors-stroke-focus-standard: #181c56;
646
+ --basecolors-stroke-highlight: #ff5959;
647
+ --basecolors-stroke-light: #ffffff;
648
+ --basecolors-stroke-subdued: #8284ab;
649
+ --basecolors-stroke-subduedalt: #e3e6e8;
650
+ --basecolors-text-accent: #181c56;
651
+ --basecolors-text-disabled: #6e6f73;
652
+ --basecolors-text-disabledalt: #b6b8ba;
653
+ --basecolors-text-highlight: #ff5959;
654
+ --basecolors-text-light: #ffffff;
655
+ --basecolors-text-subdued: #626493;
656
+ --basecolors-text-subduedalt: #d9dae8;
692
657
  }
693
- .eds-expandable-alert-box__button {
694
- color: var(--components-button-iconbutton-standard-text);
695
- background: none;
696
- border: none;
697
- cursor: pointer;
698
- font-family: inherit;
699
- font-size: inherit;
700
- line-height: 1.5rem;
701
- padding: 0 0.25rem;
702
- flex-shrink: 0;
658
+
659
+ [data-color-mode=dark] {
660
+ --basecolors-frame-contrast: #212233;
661
+ --basecolors-frame-contrastalt: #141527;
662
+ --basecolors-frame-contrastalt-2: #08091c;
663
+ --basecolors-frame-default: #08091c;
664
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
665
+ --basecolors-frame-elevatedalt: #464755;
666
+ --basecolors-frame-subdued: #2d2e3e;
667
+ --basecolors-frame-tint: #141527;
668
+ --basecolors-shape-accent: #e5e5e9;
669
+ --basecolors-shape-bicycle-contrast: #4db295;
670
+ --basecolors-shape-bicycle-default: #4db295;
671
+ --basecolors-shape-bus-contrast: #ef7398;
672
+ --basecolors-shape-bus-default: #ef7398;
673
+ --basecolors-shape-cableway-contrast: #b898e5;
674
+ --basecolors-shape-cableway-default: #b898e5;
675
+ --basecolors-shape-disabled: #b6b8ba;
676
+ --basecolors-shape-disabledalt: #b3b4bd;
677
+ --basecolors-shape-ferry-contrast: #8ccfe2;
678
+ --basecolors-shape-ferry-default: #8ccfe2;
679
+ --basecolors-shape-funicular-contrast: #b898e5;
680
+ --basecolors-shape-funicular-default: #b898e5;
681
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
682
+ --basecolors-shape-helicopter-default: #f2b8e5;
683
+ --basecolors-shape-highlight: #ff9494;
684
+ --basecolors-shape-light: #e5e5e9;
685
+ --basecolors-shape-mask: #2d2e3e;
686
+ --basecolors-shape-maskalt: #393a49;
687
+ --basecolors-shape-metro-contrast: #dd973c;
688
+ --basecolors-shape-metro-default: #dd973c;
689
+ --basecolors-shape-mobility-contrast: #4db295;
690
+ --basecolors-shape-mobility-default: #4db295;
691
+ --basecolors-shape-plane-contrast: #f2b8e5;
692
+ --basecolors-shape-plane-default: #f2b8e5;
693
+ --basecolors-shape-subdued: #b3b4bd;
694
+ --basecolors-shape-subduedalt: #b3b4bd;
695
+ --basecolors-shape-taxi-contrast: #ffe082;
696
+ --basecolors-shape-taxi-default: #ffe082;
697
+ --basecolors-shape-train-contrast: #60a2d7;
698
+ --basecolors-shape-train-default: #60a2d7;
699
+ --basecolors-shape-tram-contrast: #b898e5;
700
+ --basecolors-shape-tram-default: #b898e5;
701
+ --basecolors-shape-walk-contrast: #8d8e9c;
702
+ --basecolors-shape-walk-default: #8d8e9c;
703
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
704
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
705
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
706
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
707
+ --basecolors-stroke-contrast: #aeb7e2;
708
+ --basecolors-stroke-default: #b3b4bd;
709
+ --basecolors-stroke-disabled: #e3e6e8;
710
+ --basecolors-stroke-focus-contrast: #aeb7e2;
711
+ --basecolors-stroke-focus-standard: #aeb7e2;
712
+ --basecolors-stroke-highlight: #ff9494;
713
+ --basecolors-stroke-light: #b3b4bd;
714
+ --basecolors-stroke-subdued: #81828f;
715
+ --basecolors-stroke-subduedalt: #949699;
716
+ --basecolors-text-accent: #e5e5e9;
717
+ --basecolors-text-disabled: #b6b8ba;
718
+ --basecolors-text-disabledalt: #b6b8ba;
719
+ --basecolors-text-highlight: #ff9494;
720
+ --basecolors-text-light: #e5e5e9;
721
+ --basecolors-text-subdued: #b3b4bd;
722
+ --basecolors-text-subduedalt: #b3b4bd;
703
723
  }
704
- .eds-expandable-alert-box__button:focus-visible {
705
- outline: 2px solid #181c56;
706
- outline-color: var(--basecolors-stroke-focus-standard);
707
- outline-offset: 0.125rem;
724
+
725
+ :root {
726
+ --eds-alert: 1;
708
727
  }
709
- .eds-expandable-alert-box__button .eds-icon {
710
- font-size: 1rem;
711
- padding-left: 0.25rem;
712
- color: var(--components-button-iconbutton-standard-text);
713
- }