@entur/alert 0.17.1-beta.0 → 0.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +290 -186
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,71 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-toast-container {
4
- position: fixed;
5
- z-index: 50;
6
- display: flex;
7
- align-items: flex-end;
8
- flex-direction: column;
9
- }
10
- .eds-toast-container .eds-alert-box__close-button {
11
- position: absolute;
12
- top: 0.75rem;
13
- right: 0.75rem;
14
- }
15
- .eds-toast-container--bottom-right {
16
- bottom: 1.5rem;
17
- right: 1.5rem;
18
- left: 1.5rem;
19
- }
20
- .eds-toast-container--top-right {
21
- top: 1.5rem;
22
- right: 1.5rem;
23
- left: 1.5rem;
24
- }
25
- .eds-toast-container > * + * {
26
- margin-top: 1rem;
27
- }
28
- @media screen and (min-width: 50rem) {
29
- .eds-toast-container {
30
- left: auto;
31
- left: initial;
32
- }
33
- }
34
-
35
- @keyframes bounceInRight {
36
- from, 60%, 75%, 90%, to {
37
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
38
- }
39
- from {
40
- opacity: 0;
41
- transform: translate3d(3000px, 0, 0) scaleX(3);
42
- }
43
- 60% {
44
- opacity: 1;
45
- transform: translate3d(-25px, 0, 0) scaleX(1);
46
- }
47
- 75% {
48
- transform: translate3d(10px, 0, 0) scaleX(0.98);
49
- }
50
- 90% {
51
- transform: translate3d(-5px, 0, 0) scaleX(0.995);
52
- }
53
- to {
54
- transform: translate3d(0, 0, 0);
55
- }
56
- }
57
- @keyframes bounceOutRight {
58
- 20% {
59
- opacity: 1;
60
- transform: translate3d(-20px, 0, 0) scaleX(0.9);
61
- }
62
- to {
63
- opacity: 0;
64
- transform: translate3d(2000px, 0, 0) scaleX(2);
65
- }
66
- }
67
- /* DO NOT CHANGE!*/
68
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
69
3
  .eds-alert-box {
70
4
  border: 0.0625rem solid transparent;
71
5
  border-radius: 0.25rem;
@@ -89,7 +23,7 @@
89
23
  }
90
24
  @media screen and (min-width: 50rem) {
91
25
  .eds-alert-box--toast {
92
- min-width: 12rem;
26
+ min-width: 18rem;
93
27
  width: -moz-fit-content;
94
28
  width: fit-content;
95
29
  }
@@ -105,68 +39,124 @@
105
39
  width: fit-content;
106
40
  }
107
41
  .eds-alert-box--success {
108
- background-color: var(--components-alert-alertbox-success-standard-fill);
42
+ background-color: var(--components-alert-alertbox-success-standard-filldefault);
109
43
  border-color: var(--components-alert-alertbox-success-standard-border);
110
- color: var(--components-alert-alertbox-success-standard-text);
44
+ color: var(--components-alert-alertbox-success-standard-textdefault);
111
45
  }
112
46
  .eds-alert-box--success .eds-alert-box__icon {
113
- color: var(--components-alert-alertbox-success-standard-icon);
47
+ color: var(--components-alert-alertbox-success-standard-icondefault);
48
+ }
49
+ .eds-alert-box--success.eds-alert-box--toast {
50
+ background-color: var(--components-alert-alertbox-success-standard-filltoast);
51
+ color: var(--components-alert-alertbox-success-standard-texttoast);
52
+ }
53
+ .eds-alert-box--success.eds-alert-box--toast .eds-alert-box__icon {
54
+ color: var(--components-alert-alertbox-success-standard-icontoast);
114
55
  }
115
56
  .eds-contrast .eds-alert-box--success {
116
- background-color: var(--components-alert-alertbox-success-contrast-fill);
57
+ background-color: var(--components-alert-alertbox-success-contrast-filldefault);
117
58
  border-color: transparent;
118
- color: var(--components-alert-alertbox-success-contrast-text);
59
+ color: var(--components-alert-alertbox-success-contrast-textdefault);
119
60
  }
120
61
  .eds-contrast .eds-alert-box--success .eds-alert-box__icon {
121
- color: var(--components-alert-alertbox-success-contrast-icon);
62
+ color: var(--components-alert-alertbox-success-contrast-icondefault);
63
+ }
64
+ .eds-contrast .eds-alert-box--success.eds-alert-box--toast {
65
+ background-color: var(--components-alert-alertbox-success-contrast-filltoast);
66
+ color: var(--components-alert-alertbox-success-contrast-texttoast);
67
+ }
68
+ .eds-contrast .eds-alert-box--success.eds-alert-box--toast .eds-alert-box__icon {
69
+ color: var(--components-alert-alertbox-success-contrast-icontoast);
122
70
  }
123
71
  .eds-alert-box--info, .eds-alert-box--information {
124
- background-color: var(--components-alert-alertbox-information-standard-fill);
72
+ background-color: var(--components-alert-alertbox-information-standard-filldefault);
125
73
  border-color: var(--components-alert-alertbox-information-standard-border);
126
- color: var(--components-alert-alertbox-information-standard-text);
74
+ color: var(--components-alert-alertbox-information-standard-textdefault);
127
75
  }
128
76
  .eds-alert-box--info .eds-alert-box__icon, .eds-alert-box--information .eds-alert-box__icon {
129
- color: var(--components-alert-alertbox-information-standard-icon);
77
+ color: var(--components-alert-alertbox-information-standard-icondefault);
78
+ }
79
+ .eds-alert-box--info.eds-alert-box--toast, .eds-alert-box--information.eds-alert-box--toast {
80
+ background-color: var(--components-alert-alertbox-information-standard-filltoast);
81
+ color: var(--components-alert-alertbox-information-standard-texttoast);
82
+ }
83
+ .eds-alert-box--info.eds-alert-box--toast .eds-alert-box__icon, .eds-alert-box--information.eds-alert-box--toast .eds-alert-box__icon {
84
+ color: var(--components-alert-alertbox-information-standard-icontoast);
130
85
  }
131
86
  .eds-contrast .eds-alert-box--info, .eds-contrast .eds-alert-box--information {
132
- background-color: var(--components-alert-alertbox-information-contrast-fill);
87
+ background-color: var(--components-alert-alertbox-information-contrast-filldefault);
133
88
  border-color: transparent;
134
- color: var(--components-alert-alertbox-information-contrast-text);
89
+ color: var(--components-alert-alertbox-information-contrast-textdefault);
135
90
  }
136
91
  .eds-contrast .eds-alert-box--info .eds-alert-box__icon, .eds-contrast .eds-alert-box--information .eds-alert-box__icon {
137
92
  color: var(--components-alert-alertbox-information-contrast-icon);
138
93
  }
94
+ .eds-contrast .eds-alert-box--info.eds-alert-box--toast, .eds-contrast .eds-alert-box--information.eds-alert-box--toast {
95
+ background-color: var(--components-alert-alertbox-information-contrast-filltoast);
96
+ color: var(--components-alert-alertbox-information-contrast-texttoast);
97
+ }
98
+ .eds-contrast .eds-alert-box--info.eds-alert-box--toast .eds-alert-box__icon, .eds-contrast .eds-alert-box--information.eds-alert-box--toast .eds-alert-box__icon {
99
+ color: var(--components-alert-alertbox-information-contrast-icontoast);
100
+ }
139
101
  .eds-alert-box--warning {
140
- background-color: var(--components-alert-alertbox-warning-standard-fill);
102
+ background-color: var(--components-alert-alertbox-warning-standard-filldefault);
141
103
  border-color: var(--components-alert-alertbox-warning-standard-border);
142
- color: var(--components-alert-alertbox-warning-standard-text);
104
+ color: var(--components-alert-alertbox-warning-standard-textdefault);
143
105
  }
144
106
  .eds-alert-box--warning .eds-alert-box__icon {
145
- color: var(--components-alert-alertbox-warning-standard-icon);
107
+ color: var(--components-alert-alertbox-warning-standard-icondefault);
108
+ }
109
+ .eds-alert-box--warning.eds-alert-box--toast {
110
+ background-color: var(--components-alert-alertbox-warning-standard-filltoast);
111
+ color: var(--components-alert-alertbox-warning-standard-texttoast);
112
+ }
113
+ .eds-alert-box--warning.eds-alert-box--toast .eds-alert-box__icon {
114
+ color: var(--components-alert-alertbox-warning-standard-icontoast);
146
115
  }
147
116
  .eds-contrast .eds-alert-box--warning {
148
- background-color: var(--components-alert-alertbox-warning-contrast-fill);
117
+ background-color: var(--components-alert-alertbox-warning-contrast-filldefault);
149
118
  border-color: transparent;
150
- color: var(--components-alert-alertbox-warning-contrast-text);
119
+ color: var(--components-alert-alertbox-warning-contrast-textdefault);
151
120
  }
152
121
  .eds-contrast .eds-alert-box--warning .eds-alert-box__icon {
153
- color: var(--components-alert-alertbox-warning-contrast-icon);
122
+ color: var(--components-alert-alertbox-warning-contrast-icondefault);
123
+ }
124
+ .eds-contrast .eds-alert-box--warning.eds-alert-box--toast {
125
+ background-color: var(--components-alert-alertbox-warning-contrast-filltoast);
126
+ color: var(--components-alert-alertbox-warning-contrast-textdefault2);
127
+ }
128
+ .eds-contrast .eds-alert-box--warning.eds-alert-box--toast .eds-alert-box__icon {
129
+ color: var(--components-alert-alertbox-warning-contrast-icontoast);
154
130
  }
155
131
  .eds-alert-box--error, .eds-alert-box--negative {
156
- background-color: var(--components-alert-alertbox-negative-standard-fill);
132
+ background-color: var(--components-alert-alertbox-negative-standard-filldefault);
157
133
  border-color: var(--components-alert-alertbox-negative-standard-border);
158
- color: var(--components-alert-alertbox-negative-standard-text);
134
+ color: var(--components-alert-alertbox-negative-standard-textdefault);
159
135
  }
160
136
  .eds-alert-box--error .eds-alert-box__icon, .eds-alert-box--negative .eds-alert-box__icon {
161
- color: var(--components-alert-alertbox-negative-standard-icon);
137
+ color: var(--components-alert-alertbox-negative-standard-icondefault);
138
+ }
139
+ .eds-alert-box--error.eds-alert-box--toast, .eds-alert-box--negative.eds-alert-box--toast {
140
+ background-color: var(--components-alert-alertbox-negative-standard-filltoast);
141
+ color: var(--components-alert-alertbox-negative-standard-texttoast);
142
+ }
143
+ .eds-alert-box--error.eds-alert-box--toast .eds-alert-box__icon, .eds-alert-box--negative.eds-alert-box--toast .eds-alert-box__icon {
144
+ color: var(--components-alert-alertbox-negative-standard-icontoast);
162
145
  }
163
146
  .eds-contrast .eds-alert-box--error, .eds-contrast .eds-alert-box--negative {
164
- background-color: var(--components-alert-alertbox-negative-contrast-fill);
147
+ background-color: var(--components-alert-alertbox-negative-contrast-filldefault);
165
148
  border-color: transparent;
166
- color: var(--components-alert-alertbox-negative-contrast-text);
149
+ color: var(--components-alert-alertbox-negative-contrast-textdefault);
167
150
  }
168
151
  .eds-contrast .eds-alert-box--error .eds-alert-box__icon, .eds-contrast .eds-alert-box--negative .eds-alert-box__icon {
169
- color: var(--components-alert-alertbox-negative-contrast-icon);
152
+ color: var(--components-alert-alertbox-negative-contrast-icondefault);
153
+ }
154
+ .eds-contrast .eds-alert-box--error.eds-alert-box--toast, .eds-contrast .eds-alert-box--negative.eds-alert-box--toast {
155
+ background-color: var(--components-alert-alertbox-negative-contrast-filltoast);
156
+ color: var(--components-alert-alertbox-negative-contrast-texttoast);
157
+ }
158
+ .eds-contrast .eds-alert-box--error.eds-alert-box--toast .eds-alert-box__icon, .eds-contrast .eds-alert-box--negative.eds-alert-box--toast .eds-alert-box__icon {
159
+ color: var(--components-alert-alertbox-negative-contrast-icontoast);
170
160
  }
171
161
  .eds-alert-box--no-title {
172
162
  display: flex;
@@ -238,50 +228,69 @@
238
228
  }
239
229
  /* DO NOT CHANGE!*/
240
230
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
241
- .eds-expandable-alert-box .eds-alert-box__content {
242
- width: 100%;
231
+ .eds-toast-container {
232
+ position: fixed;
233
+ z-index: 50;
234
+ display: flex;
235
+ align-items: flex-end;
236
+ flex-direction: column;
243
237
  }
244
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
245
- margin-top: 0.0625rem;
238
+ .eds-toast-container .eds-alert-box__close-button {
239
+ position: absolute;
240
+ top: 0.75rem;
241
+ right: 0.75rem;
246
242
  }
247
- @media screen and (min-width: 50rem) {
248
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
249
- margin-top: -0.375rem;
250
- }
243
+ .eds-toast-container--bottom-right {
244
+ bottom: 1.5rem;
245
+ right: 1.5rem;
246
+ left: 1.5rem;
251
247
  }
252
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
253
- margin-top: 0.125rem;
248
+ .eds-toast-container--top-right {
249
+ top: 1.5rem;
250
+ right: 1.5rem;
251
+ left: 1.5rem;
252
+ }
253
+ .eds-toast-container > * + * {
254
+ margin-top: 1rem;
254
255
  }
255
256
  @media screen and (min-width: 50rem) {
256
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
257
- margin-top: 0.125rem;
257
+ .eds-toast-container {
258
+ left: auto;
259
+ left: initial;
258
260
  }
259
261
  }
260
- .eds-expandable-alert-box__title {
261
- display: flex;
262
- justify-content: space-between;
263
- align-items: baseline;
264
- }
265
- .eds-expandable-alert-box__button {
266
- color: var(--components-button-iconbutton-standard-text);
267
- background: none;
268
- border: none;
269
- cursor: pointer;
270
- font-family: inherit;
271
- font-size: inherit;
272
- line-height: 1.5rem;
273
- padding: 0 0.25rem;
274
- flex-shrink: 0;
275
- }
276
- .eds-expandable-alert-box__button:focus-visible {
277
- outline: 2px solid #181c56;
278
- outline-color: var(--basecolors-stroke-focus-standard);
279
- outline-offset: 0.125rem;
262
+
263
+ @keyframes bounceInRight {
264
+ from, 60%, 75%, 90%, to {
265
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
266
+ }
267
+ from {
268
+ opacity: 0;
269
+ transform: translate3d(3000px, 0, 0) scaleX(3);
270
+ }
271
+ 60% {
272
+ opacity: 1;
273
+ transform: translate3d(-25px, 0, 0) scaleX(1);
274
+ }
275
+ 75% {
276
+ transform: translate3d(10px, 0, 0) scaleX(0.98);
277
+ }
278
+ 90% {
279
+ transform: translate3d(-5px, 0, 0) scaleX(0.995);
280
+ }
281
+ to {
282
+ transform: translate3d(0, 0, 0);
283
+ }
280
284
  }
281
- .eds-expandable-alert-box__button .eds-icon {
282
- font-size: 1rem;
283
- padding-left: 0.25rem;
284
- color: var(--components-button-iconbutton-standard-text);
285
+ @keyframes bounceOutRight {
286
+ 20% {
287
+ opacity: 1;
288
+ transform: translate3d(-20px, 0, 0) scaleX(0.9);
289
+ }
290
+ to {
291
+ opacity: 0;
292
+ transform: translate3d(2000px, 0, 0) scaleX(2);
293
+ }
285
294
  }
286
295
  /* DO NOT CHANGE!*/
287
296
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -392,38 +401,62 @@
392
401
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
393
402
  [data-color-mode=light],
394
403
  :root {
395
- --components-alert-alertbox-information-contrast-border: rgba(255, 255, 255, 0);
396
- --components-alert-alertbox-information-contrast-fill: #acd7f1;
397
- --components-alert-alertbox-information-contrast-icon: #181c56;
398
- --components-alert-alertbox-information-contrast-text: #181c56;
404
+ --components-alert-alertbox-information-contrast-border: #067eb2;
405
+ --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
406
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
407
+ --components-alert-alertbox-information-contrast-icondefault: #181c56;
408
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
409
+ --components-alert-alertbox-information-contrast-textdefault: #181c56;
410
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
399
411
  --components-alert-alertbox-information-standard-border: #067eb2;
400
- --components-alert-alertbox-information-standard-fill: #e1eff8;
401
- --components-alert-alertbox-information-standard-icon: #067eb2;
402
- --components-alert-alertbox-information-standard-text: #181c56;
403
- --components-alert-alertbox-negative-contrast-border: rgba(255, 255, 255, 0);
404
- --components-alert-alertbox-negative-contrast-fill: #ff9494;
405
- --components-alert-alertbox-negative-contrast-icon: #181c56;
406
- --components-alert-alertbox-negative-contrast-text: #181c56;
412
+ --components-alert-alertbox-information-standard-filldefault: #e1eff8;
413
+ --components-alert-alertbox-information-standard-filltoast: #e1eff8;
414
+ --components-alert-alertbox-information-standard-icondefault: #067eb2;
415
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
416
+ --components-alert-alertbox-information-standard-textdefault: #181c56;
417
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
418
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
419
+ --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
420
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
421
+ --components-alert-alertbox-negative-contrast-icondefault: #181c56;
422
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
423
+ --components-alert-alertbox-negative-contrast-textdefault: #181c56;
424
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
407
425
  --components-alert-alertbox-negative-standard-border: #d31b1b;
408
- --components-alert-alertbox-negative-standard-fill: #ffcece;
409
- --components-alert-alertbox-negative-standard-icon: #d31b1b;
410
- --components-alert-alertbox-negative-standard-text: #181c56;
411
- --components-alert-alertbox-success-contrast-border: rgba(255, 255, 255, 0);
412
- --components-alert-alertbox-success-contrast-fill: #9cd9c2;
413
- --components-alert-alertbox-success-contrast-icon: #181c56;
414
- --components-alert-alertbox-success-contrast-text: #181c56;
426
+ --components-alert-alertbox-negative-standard-filldefault: #ffcece;
427
+ --components-alert-alertbox-negative-standard-filltoast: #ffcece;
428
+ --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
429
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
430
+ --components-alert-alertbox-negative-standard-textdefault: #181c56;
431
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
432
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
433
+ --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
434
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
435
+ --components-alert-alertbox-success-contrast-icondefault: #181c56;
436
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
437
+ --components-alert-alertbox-success-contrast-textdefault: #181c56;
438
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
415
439
  --components-alert-alertbox-success-standard-border: #1a8e60;
416
- --components-alert-alertbox-success-standard-fill: #d0f1e3;
417
- --components-alert-alertbox-success-standard-icon: #1a8e60;
418
- --components-alert-alertbox-success-standard-text: #181c56;
419
- --components-alert-alertbox-warning-contrast-border: rgba(255, 255, 255, 0);
420
- --components-alert-alertbox-warning-contrast-fill: #ffeeb3;
421
- --components-alert-alertbox-warning-contrast-icon: #181c56;
422
- --components-alert-alertbox-warning-contrast-text: #181c56;
440
+ --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
441
+ --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
442
+ --components-alert-alertbox-success-standard-icondefault: #1a8e60;
443
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
444
+ --components-alert-alertbox-success-standard-textdefault: #181c56;
445
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
446
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
447
+ --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
448
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
449
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
450
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
451
+ --components-alert-alertbox-warning-contrast-textdefault: #181c56;
452
+ --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
423
453
  --components-alert-alertbox-warning-standard-border: #e9b10c;
424
- --components-alert-alertbox-warning-standard-fill: #fff4cd;
425
- --components-alert-alertbox-warning-standard-icon: #181c56;
426
- --components-alert-alertbox-warning-standard-text: #181c56;
454
+ --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
455
+ --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
456
+ --components-alert-alertbox-warning-standard-icondefault: #181c56;
457
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
458
+ --components-alert-alertbox-warning-standard-textdefault: #181c56;
459
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
427
460
  --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
428
461
  --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
429
462
  --components-alert-copyabletext-contrast-fill: #f6f6f9;
@@ -437,38 +470,62 @@
437
470
  }
438
471
 
439
472
  [data-color-mode=dark] {
440
- --components-alert-alertbox-information-contrast-border: #acd7f1;
441
- --components-alert-alertbox-information-contrast-fill: rgba(45, 152, 210, 0.2);
442
- --components-alert-alertbox-information-contrast-icon: #acd7f1;
443
- --components-alert-alertbox-information-contrast-text: #e5e5e9;
444
- --components-alert-alertbox-information-standard-border: #acd7f1;
445
- --components-alert-alertbox-information-standard-fill: rgba(45, 152, 210, 0.2);
446
- --components-alert-alertbox-information-standard-icon: #acd7f1;
447
- --components-alert-alertbox-information-standard-text: #e5e5e9;
448
- --components-alert-alertbox-negative-contrast-border: #ff9494;
449
- --components-alert-alertbox-negative-contrast-fill: rgba(255, 148, 148, 0.2);
450
- --components-alert-alertbox-negative-contrast-icon: #ff9494;
451
- --components-alert-alertbox-negative-contrast-text: #e5e5e9;
452
- --components-alert-alertbox-negative-standard-border: #ff9494;
453
- --components-alert-alertbox-negative-standard-fill: rgba(255, 148, 148, 0.2);
454
- --components-alert-alertbox-negative-standard-icon: #ff9494;
455
- --components-alert-alertbox-negative-standard-text: #e5e5e9;
456
- --components-alert-alertbox-success-contrast-border: #9cd9c2;
457
- --components-alert-alertbox-success-contrast-fill: rgba(90, 195, 154, 0.2);
458
- --components-alert-alertbox-success-contrast-icon: #9cd9c2;
459
- --components-alert-alertbox-success-contrast-text: #e5e5e9;
460
- --components-alert-alertbox-success-standard-border: #9cd9c2;
461
- --components-alert-alertbox-success-standard-fill: rgba(90, 195, 154, 0.2);
462
- --components-alert-alertbox-success-standard-icon: #9cd9c2;
463
- --components-alert-alertbox-success-standard-text: #e5e5e9;
464
- --components-alert-alertbox-warning-contrast-border: #ffeeb3;
465
- --components-alert-alertbox-warning-contrast-fill: rgba(255, 224, 130, 0.2509803922);
466
- --components-alert-alertbox-warning-contrast-icon: #ffeeb3;
467
- --components-alert-alertbox-warning-contrast-text: #e5e5e9;
468
- --components-alert-alertbox-warning-standard-border: #ffeeb3;
469
- --components-alert-alertbox-warning-standard-fill: rgba(255, 224, 130, 0.2509803922);
470
- --components-alert-alertbox-warning-standard-icon: #ffeeb3;
471
- --components-alert-alertbox-warning-standard-text: #e5e5e9;
473
+ --components-alert-alertbox-information-contrast-border: #067eb2;
474
+ --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
475
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
476
+ --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
477
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
478
+ --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
479
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
480
+ --components-alert-alertbox-information-standard-border: #067eb2;
481
+ --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
482
+ --components-alert-alertbox-information-standard-filltoast: #acd7f1;
483
+ --components-alert-alertbox-information-standard-icondefault: #acd7f1;
484
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
485
+ --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
486
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
487
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
488
+ --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
489
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
490
+ --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
491
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
492
+ --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
493
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
494
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
495
+ --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
496
+ --components-alert-alertbox-negative-standard-filltoast: #ff9494;
497
+ --components-alert-alertbox-negative-standard-icondefault: #ff9494;
498
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
499
+ --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
500
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
501
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
502
+ --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
503
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
504
+ --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
505
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
506
+ --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
507
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
508
+ --components-alert-alertbox-success-standard-border: #1a8e60;
509
+ --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
510
+ --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
511
+ --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
512
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
513
+ --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
514
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
515
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
516
+ --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
517
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
518
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
519
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
520
+ --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
521
+ --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
522
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
523
+ --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
524
+ --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
525
+ --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
526
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
527
+ --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
528
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
472
529
  --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
473
530
  --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
474
531
  --components-alert-copyabletext-contrast-fill: #393a49;
@@ -619,3 +676,50 @@
619
676
  :root {
620
677
  --eds-alert: 1;
621
678
  }
679
+ /* DO NOT CHANGE!*/
680
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
681
+ .eds-expandable-alert-box .eds-alert-box__content {
682
+ width: 100%;
683
+ }
684
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
685
+ margin-top: 0.0625rem;
686
+ }
687
+ @media screen and (min-width: 50rem) {
688
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
689
+ margin-top: -0.375rem;
690
+ }
691
+ }
692
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
693
+ margin-top: 0.125rem;
694
+ }
695
+ @media screen and (min-width: 50rem) {
696
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
697
+ margin-top: 0.125rem;
698
+ }
699
+ }
700
+ .eds-expandable-alert-box__title {
701
+ display: flex;
702
+ justify-content: space-between;
703
+ align-items: baseline;
704
+ }
705
+ .eds-expandable-alert-box__button {
706
+ color: var(--components-button-iconbutton-standard-text);
707
+ background: none;
708
+ border: none;
709
+ cursor: pointer;
710
+ font-family: inherit;
711
+ font-size: inherit;
712
+ line-height: 1.5rem;
713
+ padding: 0 0.25rem;
714
+ flex-shrink: 0;
715
+ }
716
+ .eds-expandable-alert-box__button:focus-visible {
717
+ outline: 2px solid #181c56;
718
+ outline-color: var(--basecolors-stroke-focus-standard);
719
+ outline-offset: 0.125rem;
720
+ }
721
+ .eds-expandable-alert-box__button .eds-icon {
722
+ font-size: 1rem;
723
+ padding-left: 0.25rem;
724
+ color: var(--components-button-iconbutton-standard-text);
725
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/alert",
3
- "version": "0.17.1-beta.0",
3
+ "version": "0.17.1",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/alert.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.1-beta.0",
31
- "@entur/expand": "^3.6.1-beta.0",
32
- "@entur/icons": "^7.7.0-beta.0",
33
- "@entur/tokens": "^3.17.5",
34
- "@entur/tooltip": "^5.2.1-beta.0",
35
- "@entur/typography": "^1.9.1-beta.0",
30
+ "@entur/button": "^3.3.1",
31
+ "@entur/expand": "^3.6.1",
32
+ "@entur/icons": "^7.6.1",
33
+ "@entur/tokens": "^3.17.6",
34
+ "@entur/tooltip": "^5.2.1",
35
+ "@entur/typography": "^1.9.1",
36
36
  "@entur/utils": "^0.12.2",
37
37
  "classnames": "^2.3.1",
38
38
  "copy-text-to-clipboard": "^2.2"
@@ -40,5 +40,5 @@
40
40
  "devDependencies": {
41
41
  "dts-cli": "2.0.5"
42
42
  },
43
- "gitHead": "e65150a6a9f9e2beb4a8bbecc06b9237119fe55e"
43
+ "gitHead": "d7798b768ab73d677162cebcf3edd58680dc626f"
44
44
  }