@entur/alert 0.15.24 → 0.16.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.
Files changed (14) hide show
  1. package/dist/BannerAlertBox.d.ts +7 -1
  2. package/dist/BaseAlertBox.d.ts +6 -1
  3. package/dist/ExpandableAlertBox.d.ts +7 -2
  4. package/dist/SmallAlertBox.d.ts +8 -2
  5. package/dist/ToastAlertBox.d.ts +4 -1
  6. package/dist/ToastProvider.d.ts +4 -1
  7. package/dist/alert.cjs.development.js +14 -5
  8. package/dist/alert.cjs.development.js.map +1 -1
  9. package/dist/alert.cjs.production.min.js +1 -1
  10. package/dist/alert.cjs.production.min.js.map +1 -1
  11. package/dist/alert.esm.js +15 -6
  12. package/dist/alert.esm.js.map +1 -1
  13. package/dist/styles.css +220 -373
  14. package/package.json +9 -9
package/dist/styles.css CHANGED
@@ -1,7 +1,6 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
3
  .eds-alert-box {
4
- border: 0.0625rem solid transparent;
5
4
  border-radius: 0.25rem;
6
5
  display: flex;
7
6
  padding: 0.75rem;
@@ -40,7 +39,6 @@
40
39
  }
41
40
  .eds-alert-box--success {
42
41
  background-color: var(--components-alert-alertbox-success-standard-fill);
43
- border-color: var(--components-alert-alertbox-success-standard-border);
44
42
  color: var(--components-alert-alertbox-success-standard-text);
45
43
  }
46
44
  .eds-alert-box--success .eds-alert-box__icon {
@@ -48,31 +46,27 @@
48
46
  }
49
47
  .eds-contrast .eds-alert-box--success {
50
48
  background-color: var(--components-alert-alertbox-success-contrast-fill);
51
- border-color: transparent;
52
49
  color: var(--components-alert-alertbox-success-contrast-text);
53
50
  }
54
51
  .eds-contrast .eds-alert-box--success .eds-alert-box__icon {
55
52
  color: var(--components-alert-alertbox-success-contrast-icon);
56
53
  }
57
- .eds-alert-box--info {
54
+ .eds-alert-box--info, .eds-alert-box--information {
58
55
  background-color: var(--components-alert-alertbox-information-standard-fill);
59
- border-color: var(--components-alert-alertbox-information-standard-border);
60
56
  color: var(--components-alert-alertbox-information-standard-text);
61
57
  }
62
- .eds-alert-box--info .eds-alert-box__icon {
58
+ .eds-alert-box--info .eds-alert-box__icon, .eds-alert-box--information .eds-alert-box__icon {
63
59
  color: var(--components-alert-alertbox-information-standard-icon);
64
60
  }
65
- .eds-contrast .eds-alert-box--info {
61
+ .eds-contrast .eds-alert-box--info, .eds-contrast .eds-alert-box--information {
66
62
  background-color: var(--components-alert-alertbox-information-contrast-fill);
67
- border-color: transparent;
68
63
  color: var(--components-alert-alertbox-information-contrast-text);
69
64
  }
70
- .eds-contrast .eds-alert-box--info .eds-alert-box__icon {
65
+ .eds-contrast .eds-alert-box--info .eds-alert-box__icon, .eds-contrast .eds-alert-box--information .eds-alert-box__icon {
71
66
  color: var(--components-alert-alertbox-information-contrast-icon);
72
67
  }
73
68
  .eds-alert-box--warning {
74
69
  background-color: var(--components-alert-alertbox-warning-standard-fill);
75
- border-color: var(--components-alert-alertbox-warning-standard-border);
76
70
  color: var(--components-alert-alertbox-warning-standard-text);
77
71
  }
78
72
  .eds-alert-box--warning .eds-alert-box__icon {
@@ -80,26 +74,23 @@
80
74
  }
81
75
  .eds-contrast .eds-alert-box--warning {
82
76
  background-color: var(--components-alert-alertbox-warning-contrast-fill);
83
- border-color: transparent;
84
77
  color: var(--components-alert-alertbox-warning-contrast-text);
85
78
  }
86
79
  .eds-contrast .eds-alert-box--warning .eds-alert-box__icon {
87
80
  color: var(--components-alert-alertbox-warning-contrast-icon);
88
81
  }
89
- .eds-alert-box--error {
82
+ .eds-alert-box--error, .eds-alert-box--negative {
90
83
  background-color: var(--components-alert-alertbox-negative-standard-fill);
91
- border-color: var(--components-alert-alertbox-negative-standard-border);
92
84
  color: var(--components-alert-alertbox-negative-standard-text);
93
85
  }
94
- .eds-alert-box--error .eds-alert-box__icon {
86
+ .eds-alert-box--error .eds-alert-box__icon, .eds-alert-box--negative .eds-alert-box__icon {
95
87
  color: var(--components-alert-alertbox-negative-standard-icon);
96
88
  }
97
- .eds-contrast .eds-alert-box--error {
89
+ .eds-contrast .eds-alert-box--error, .eds-contrast .eds-alert-box--negative {
98
90
  background-color: var(--components-alert-alertbox-negative-contrast-fill);
99
- border-color: transparent;
100
91
  color: var(--components-alert-alertbox-negative-contrast-text);
101
92
  }
102
- .eds-contrast .eds-alert-box--error .eds-alert-box__icon {
93
+ .eds-contrast .eds-alert-box--error .eds-alert-box__icon, .eds-contrast .eds-alert-box--negative .eds-alert-box__icon {
103
94
  color: var(--components-alert-alertbox-negative-contrast-icon);
104
95
  }
105
96
  .eds-alert-box__icon {
@@ -324,380 +315,236 @@
324
315
  .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus {
325
316
  outline-color: var(--basecolors-stroke-focus-contrast);
326
317
  }
327
- @import "~@entur/tokens/dist/primitive.css";
328
- @import "~@entur/tokens/dist/semantic.css";
329
318
  /* DO NOT CHANGE!*/
330
319
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
331
- :root {
332
- --fill-background-contrast-dark: var(--ebony-90);
333
- --fill-background-contrast-light: var(--lavender-90);
334
- --fill-background-contrast-lightalt: var(--blue-90);
335
- --fill-background-contrast-lightalt-2: var(--blue-100);
336
- --fill-background-overlay-solid: var(--ebony-80);
337
- --fill-background-overlay-solidalt: var(--ebony-75);
338
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
339
- --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
340
- --fill-background-standard-colorless: var(--white-alpha-0);
341
- --fill-background-standard-dark: var(--ebony-100);
342
- --fill-background-standard-light: var(--white-alpha-100);
343
- --fill-background-subdued-dark: var(--ebony-85);
344
- --fill-background-subdued-light: var(--blue-30);
345
- --fill-background-tint-dark: var(--ebony-95);
346
- --fill-background-tint-light: var(--blue-10);
347
- --fill-background-tint-neutral: var(--grey-10);
348
- --fill-background-tint-transparent: var(--transparent-blue-alpha10);
349
- --fill-boolean-false-contrast: var(--blue-50);
350
- --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
351
- --fill-boolean-false-light: var(--grey-60);
352
- --fill-boolean-true-contrast: var(--mint-40);
353
- --fill-boolean-true-dark: var(--mint-40);
354
- --fill-boolean-true-light: var(--mint-60);
355
- --fill-disabled-light: var(--grey-40);
356
- --fill-disabled-transparent: var(--transparent-neutral-alpha15);
357
- --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
358
- --fill-information-contrast: var(--sky-30);
359
- --fill-information-deep: var(--sky-50);
360
- --fill-information-muted: var(--sky-10);
361
- --fill-information-tint: var(--sky-20);
362
- --fill-negative-contrast: var(--coral-40);
363
- --fill-negative-dark: var(--coral-90);
364
- --fill-negative-deep: var(--coral-60);
365
- --fill-negative-muted: var(--coral-20);
366
- --fill-negative-tint: var(--coral-30);
367
- --fill-negative-transparent: var(--transparent-coral-alpha20);
368
- --fill-primary-active-contrast: var(--lavender-50);
369
- --fill-primary-active-light: var(--lavender-100);
370
- --fill-primary-default-contrast: var(--lavender-40);
371
- --fill-primary-default-light: var(--lavender-90);
372
- --fill-primary-hover-contrast: var(--lavender-30);
373
- --fill-primary-hover-light: var(--blue-90);
374
- --fill-secondary-active-contrast: var(--lavender-50);
375
- --fill-secondary-active-light: var(--lavender-40);
376
- --fill-secondary-default-colorless: var(--white-alpha-0);
377
- --fill-secondary-hover-contrast: var(--blue-70);
378
- --fill-secondary-hover-light: var(--lavender-20);
379
- --fill-selected-default-contrast: var(--blue-90);
380
- --fill-selected-default-dark: var(--ebony-10);
381
- --fill-selected-default-darkalt: var(--ebony-50);
382
- --fill-selected-default-light: var(--blue-10);
383
- --fill-selected-default-neutral: var(--grey-30);
384
- --fill-selected-hover-contrast: var(--blue-80);
385
- --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
386
- --fill-selected-hover-light: var(--blue-20);
387
- --fill-selected-hover-neutral: var(--grey-20);
388
- --fill-success-contrast: var(--mint-40);
389
- --fill-success-deep: var(--mint-60);
390
- --fill-success-muted: var(--mint-20);
391
- --fill-success-subdued: var(--mint-50);
392
- --fill-success-tint: var(--mint-30);
393
- --fill-warning-contrast: var(--canary-40);
394
- --fill-warning-deep: var(--canary-60);
395
- --fill-warning-muted: var(--canary-20);
396
- --fill-warning-tint: var(--canary-30);
397
- --shape-accent: var(--lavender-90);
398
- --shape-contrast: var(--lavender-40);
399
- --shape-dark: var(--ebony-100);
400
- --shape-darkalt: var(--ebony-30);
401
- --shape-disabled: var(--grey-80);
402
- --shape-highlight: var(--coral-40);
403
- --shape-highlightalt: var(--coral-30);
404
- --shape-inactive: var(--blue-40);
405
- --shape-information: var(--sky-50);
406
- --shape-informationalt: var(--sky-30);
407
- --shape-light: var(--white-alpha-100);
408
- --shape-lightalt: var(--ebony-10);
409
- --shape-negative: var(--coral-60);
410
- --shape-negativealt: var(--coral-30);
411
- --shape-neutral: var(--grey-70);
412
- --shape-neutralalt: var(--grey-50);
413
- --shape-neutralalt2: var(--grey-60);
414
- --shape-subdued: var(--blue-70);
415
- --shape-subduedalt: var(--blue-30);
416
- --shape-success: var(--mint-60);
417
- --shape-successalt: var(--mint-40);
418
- --shape-warning: var(--canary-60);
419
- --shape-warningalt: var(--canary-40);
420
- --stroke-accent: var(--lavender-90);
421
- --stroke-colorless: var(--white-alpha-0);
422
- --stroke-contrast: var(--lavender-40);
423
- --stroke-contrastalt: var(--blue-80);
424
- --stroke-dark: var(--ebony-30);
425
- --stroke-darkalt: var(--ebony-50);
426
- --stroke-darkalt-2: var(--ebony-100);
427
- --stroke-highlight: var(--coral-40);
428
- --stroke-highlightalt: var(--coral-30);
429
- --stroke-information: var(--sky-50);
430
- --stroke-light: var(--white-alpha-100);
431
- --stroke-lightalt: var(--ebony-10);
432
- --stroke-negative: var(--coral-60);
433
- --stroke-negativealt: var(--coral-30);
434
- --stroke-neutral: var(--grey-30);
435
- --stroke-neutralalt: var(--grey-60);
436
- --stroke-subdued: var(--blue-60);
437
- --stroke-success: var(--mint-60);
438
- --stroke-successalt: var(--mint-40);
439
- --stroke-transparent: var(--transparent-blue-alpha40);
440
- --stroke-transparentalt: var(--transparent-lavender-alpha70);
441
- --stroke-warning: var(--canary-70);
442
- --text-accent: var(--lavender-90);
443
- --text-dark: var(--ebony-100);
444
- --text-darkalt: var(--ebony-30);
445
- --text-disabled: var(--grey-80);
446
- --text-highlight: var(--lavender-40);
447
- --text-highlightalt: var(--peach-40);
448
- --text-light: var(--white-alpha-100);
449
- --text-lightalt: var(--ebony-10);
450
- --text-negative: var(--coral-60);
451
- --text-negativealt: var(--coral-30);
452
- --text-neutral: var(--grey-70);
453
- --text-neutralalt: var(--grey-50);
454
- --text-neutralalt2: var(--grey-60);
455
- --text-subdued: var(--blue-70);
456
- --text-subduedalt: var(--blue-30);
457
- --text-success: var(--mint-60);
458
- --text-successalt: var(--mint-40);
459
- }
460
-
320
+ /* DO NOT CHANGE!*/
321
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
461
322
  /* DO NOT CHANGE!*/
462
323
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
463
324
  [data-color-mode=light],
464
325
  :root {
465
- --components-alert-alertbox-information-contrast-border: var(--stroke-colorless);
466
- --components-alert-alertbox-information-contrast-fill: var(--fill-information-tint);
467
- --components-alert-alertbox-information-contrast-icon: var(--shape-accent);
468
- --components-alert-alertbox-information-contrast-iconborder: var(--stroke-accent);
469
- --components-alert-alertbox-information-contrast-text: var(--text-accent);
470
- --components-alert-alertbox-information-standard-border: var(--stroke-information);
471
- --components-alert-alertbox-information-standard-fill: var(--fill-information-muted);
472
- --components-alert-alertbox-information-standard-icon: var(--shape-information);
473
- --components-alert-alertbox-information-standard-iconborder: var(--stroke-information);
474
- --components-alert-alertbox-information-standard-text: var(--text-accent);
475
- --components-alert-alertbox-negative-contrast-border: var(--stroke-colorless);
476
- --components-alert-alertbox-negative-contrast-fill: var(--fill-negative-tint);
477
- --components-alert-alertbox-negative-contrast-icon: var(--shape-accent);
478
- --components-alert-alertbox-negative-contrast-iconborder: var(--stroke-accent);
479
- --components-alert-alertbox-negative-contrast-text: var(--text-accent);
480
- --components-alert-alertbox-negative-standard-border: var(--stroke-colorless);
481
- --components-alert-alertbox-negative-standard-fill: var(--fill-negative-muted);
482
- --components-alert-alertbox-negative-standard-icon: var(--shape-negative);
483
- --components-alert-alertbox-negative-standard-iconborder: var(--stroke-negative);
484
- --components-alert-alertbox-negative-standard-text: var(--text-accent);
485
- --components-alert-alertbox-success-contrast-border: var(--stroke-colorless);
486
- --components-alert-alertbox-success-contrast-fill: var(--fill-success-tint);
487
- --components-alert-alertbox-success-contrast-icon: var(--shape-accent);
488
- --components-alert-alertbox-success-contrast-iconborder: var(--stroke-accent);
489
- --components-alert-alertbox-success-contrast-text: var(--text-accent);
490
- --components-alert-alertbox-success-standard-border: var(--stroke-success);
491
- --components-alert-alertbox-success-standard-fill: var(--fill-success-muted);
492
- --components-alert-alertbox-success-standard-icon: var(--shape-success);
493
- --components-alert-alertbox-success-standard-iconborder: var(--stroke-success);
494
- --components-alert-alertbox-success-standard-text: var(--text-accent);
495
- --components-alert-alertbox-warning-contrast-border: var(--stroke-colorless);
496
- --components-alert-alertbox-warning-contrast-fill: var(--fill-warning-tint);
497
- --components-alert-alertbox-warning-contrast-icon: var(--shape-accent);
498
- --components-alert-alertbox-warning-contrast-iconborder: var(--stroke-accent);
499
- --components-alert-alertbox-warning-contrast-text: var(--text-accent);
500
- --components-alert-alertbox-warning-standard-border: var(--stroke-warning);
501
- --components-alert-alertbox-warning-standard-fill: var(--fill-warning-muted);
502
- --components-alert-alertbox-warning-standard-icon: var(--shape-accent);
503
- --components-alert-alertbox-warning-standard-iconborder: var(--stroke-accent);
504
- --components-alert-alertbox-warning-standard-text: var(--text-accent);
505
- --components-alert-copyabletext-contrast-border: var(--stroke-colorless);
506
- --components-alert-copyabletext-contrast-border-interactive: var(--stroke-contrast);
507
- --components-alert-copyabletext-contrast-fill: var(--fill-background-tint-light);
508
- --components-alert-copyabletext-contrast-icon: var(--shape-accent);
509
- --components-alert-copyabletext-contrast-text: var(--text-accent);
510
- --components-alert-copyabletext-standard-border: var(--stroke-transparent);
511
- --components-alert-copyabletext-standard-border-interactive: var(--stroke-accent);
512
- --components-alert-copyabletext-standard-fill: var(--fill-background-tint-light);
513
- --components-alert-copyabletext-standard-icon: var(--shape-accent);
514
- --components-alert-copyabletext-standard-text: var(--text-accent);
326
+ --components-alert-alertbox-information-contrast-border: rgba(255, 255, 255, 0);
327
+ --components-alert-alertbox-information-contrast-fill: #acd7f1;
328
+ --components-alert-alertbox-information-contrast-icon: #181c56;
329
+ --components-alert-alertbox-information-contrast-text: #181c56;
330
+ --components-alert-alertbox-information-standard-border: #067eb2;
331
+ --components-alert-alertbox-information-standard-fill: #e1eff8;
332
+ --components-alert-alertbox-information-standard-icon: #067eb2;
333
+ --components-alert-alertbox-information-standard-text: #181c56;
334
+ --components-alert-alertbox-negative-contrast-border: rgba(255, 255, 255, 0);
335
+ --components-alert-alertbox-negative-contrast-fill: #ff9494;
336
+ --components-alert-alertbox-negative-contrast-icon: #181c56;
337
+ --components-alert-alertbox-negative-contrast-text: #181c56;
338
+ --components-alert-alertbox-negative-standard-border: rgba(255, 255, 255, 0);
339
+ --components-alert-alertbox-negative-standard-fill: #ffcece;
340
+ --components-alert-alertbox-negative-standard-icon: #d31b1b;
341
+ --components-alert-alertbox-negative-standard-text: #181c56;
342
+ --components-alert-alertbox-success-contrast-border: rgba(255, 255, 255, 0);
343
+ --components-alert-alertbox-success-contrast-fill: #9cd9c2;
344
+ --components-alert-alertbox-success-contrast-icon: #181c56;
345
+ --components-alert-alertbox-success-contrast-text: #181c56;
346
+ --components-alert-alertbox-success-standard-border: rgba(255, 255, 255, 0);
347
+ --components-alert-alertbox-success-standard-fill: #d0f1e3;
348
+ --components-alert-alertbox-success-standard-icon: #1a8e60;
349
+ --components-alert-alertbox-success-standard-text: #181c56;
350
+ --components-alert-alertbox-warning-contrast-border: rgba(255, 255, 255, 0);
351
+ --components-alert-alertbox-warning-contrast-fill: #ffeeb3;
352
+ --components-alert-alertbox-warning-contrast-icon: #181c56;
353
+ --components-alert-alertbox-warning-contrast-text: #181c56;
354
+ --components-alert-alertbox-warning-standard-border: rgba(255, 255, 255, 0);
355
+ --components-alert-alertbox-warning-standard-fill: #fff4cd;
356
+ --components-alert-alertbox-warning-standard-icon: #181c56;
357
+ --components-alert-alertbox-warning-standard-text: #181c56;
358
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
359
+ --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
360
+ --components-alert-copyabletext-contrast-fill: #f6f6f9;
361
+ --components-alert-copyabletext-contrast-icon: #181c56;
362
+ --components-alert-copyabletext-contrast-text: #181c56;
363
+ --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
364
+ --components-alert-copyabletext-standard-border-interactive: #181c56;
365
+ --components-alert-copyabletext-standard-fill: #f6f6f9;
366
+ --components-alert-copyabletext-standard-icon: #181c56;
367
+ --components-alert-copyabletext-standard-text: #181c56;
515
368
  }
516
369
 
517
370
  [data-color-mode=dark] {
518
- --components-alert-alertbox-information-contrast-border: var(--stroke-colorless);
519
- --components-alert-alertbox-information-contrast-fill: var(--fill-information-tint);
520
- --components-alert-alertbox-information-contrast-icon: var(--shape-dark);
521
- --components-alert-alertbox-information-contrast-iconborder: var(--stroke-darkalt-2);
522
- --components-alert-alertbox-information-contrast-text: var(--text-dark);
523
- --components-alert-alertbox-information-standard-border: var(--stroke-colorless);
524
- --components-alert-alertbox-information-standard-fill: var(--fill-information-tint);
525
- --components-alert-alertbox-information-standard-icon: var(--shape-dark);
526
- --components-alert-alertbox-information-standard-iconborder: var(--stroke-darkalt-2);
527
- --components-alert-alertbox-information-standard-text: var(--text-dark);
528
- --components-alert-alertbox-negative-contrast-border: var(--stroke-colorless);
529
- --components-alert-alertbox-negative-contrast-fill: var(--fill-negative-tint);
530
- --components-alert-alertbox-negative-contrast-icon: var(--shape-dark);
531
- --components-alert-alertbox-negative-contrast-iconborder: var(--stroke-darkalt-2);
532
- --components-alert-alertbox-negative-contrast-text: var(--text-dark);
533
- --components-alert-alertbox-negative-standard-border: var(--stroke-colorless);
534
- --components-alert-alertbox-negative-standard-fill: var(--fill-negative-tint);
535
- --components-alert-alertbox-negative-standard-icon: var(--shape-dark);
536
- --components-alert-alertbox-negative-standard-iconborder: var(--stroke-darkalt-2);
537
- --components-alert-alertbox-negative-standard-text: var(--text-dark);
538
- --components-alert-alertbox-success-contrast-border: var(--stroke-colorless);
539
- --components-alert-alertbox-success-contrast-fill: var(--fill-success-tint);
540
- --components-alert-alertbox-success-contrast-icon: var(--shape-dark);
541
- --components-alert-alertbox-success-contrast-iconborder: var(--stroke-darkalt-2);
542
- --components-alert-alertbox-success-contrast-text: var(--text-dark);
543
- --components-alert-alertbox-success-standard-border: var(--stroke-colorless);
544
- --components-alert-alertbox-success-standard-fill: var(--fill-success-tint);
545
- --components-alert-alertbox-success-standard-icon: var(--shape-dark);
546
- --components-alert-alertbox-success-standard-iconborder: var(--stroke-darkalt-2);
547
- --components-alert-alertbox-success-standard-text: var(--text-dark);
548
- --components-alert-alertbox-warning-contrast-border: var(--stroke-colorless);
549
- --components-alert-alertbox-warning-contrast-fill: var(--fill-warning-tint);
550
- --components-alert-alertbox-warning-contrast-icon: var(--shape-dark);
551
- --components-alert-alertbox-warning-contrast-iconborder: var(--stroke-darkalt-2);
552
- --components-alert-alertbox-warning-contrast-text: var(--text-dark);
553
- --components-alert-alertbox-warning-standard-border: var(--stroke-colorless);
554
- --components-alert-alertbox-warning-standard-fill: var(--fill-warning-tint);
555
- --components-alert-alertbox-warning-standard-icon: var(--shape-dark);
556
- --components-alert-alertbox-warning-standard-iconborder: var(--stroke-darkalt-2);
557
- --components-alert-alertbox-warning-standard-text: var(--text-dark);
558
- --components-alert-copyabletext-contrast-border: var(--stroke-colorless);
559
- --components-alert-copyabletext-contrast-border-interactive: var(--stroke-lightalt);
560
- --components-alert-copyabletext-contrast-fill: var(--fill-background-overlay-solid);
561
- --components-alert-copyabletext-contrast-icon: var(--shape-lightalt);
562
- --components-alert-copyabletext-contrast-text: var(--text-lightalt);
563
- --components-alert-copyabletext-standard-border: var(--stroke-colorless);
564
- --components-alert-copyabletext-standard-border-interactive: var(--stroke-lightalt);
565
- --components-alert-copyabletext-standard-fill: var(--fill-background-overlay-solid);
566
- --components-alert-copyabletext-standard-icon: var(--shape-lightalt);
567
- --components-alert-copyabletext-standard-text: var(--text-lightalt);
371
+ --components-alert-alertbox-information-contrast-border: rgba(255, 255, 255, 0);
372
+ --components-alert-alertbox-information-contrast-fill: #e1eff8;
373
+ --components-alert-alertbox-information-contrast-icon: #067eb2;
374
+ --components-alert-alertbox-information-contrast-text: #08091c;
375
+ --components-alert-alertbox-information-standard-border: rgba(255, 255, 255, 0);
376
+ --components-alert-alertbox-information-standard-fill: #e1eff8;
377
+ --components-alert-alertbox-information-standard-icon: #067eb2;
378
+ --components-alert-alertbox-information-standard-text: #08091c;
379
+ --components-alert-alertbox-negative-contrast-border: rgba(255, 255, 255, 0);
380
+ --components-alert-alertbox-negative-contrast-fill: #ffcece;
381
+ --components-alert-alertbox-negative-contrast-icon: #d31b1b;
382
+ --components-alert-alertbox-negative-contrast-text: #08091c;
383
+ --components-alert-alertbox-negative-standard-border: rgba(255, 255, 255, 0);
384
+ --components-alert-alertbox-negative-standard-fill: #ffcece;
385
+ --components-alert-alertbox-negative-standard-icon: #d31b1b;
386
+ --components-alert-alertbox-negative-standard-text: #08091c;
387
+ --components-alert-alertbox-success-contrast-border: rgba(255, 255, 255, 0);
388
+ --components-alert-alertbox-success-contrast-fill: #d0f1e3;
389
+ --components-alert-alertbox-success-contrast-icon: #1a8e60;
390
+ --components-alert-alertbox-success-contrast-text: #08091c;
391
+ --components-alert-alertbox-success-standard-border: rgba(255, 255, 255, 0);
392
+ --components-alert-alertbox-success-standard-fill: #d0f1e3;
393
+ --components-alert-alertbox-success-standard-icon: #1a8e60;
394
+ --components-alert-alertbox-success-standard-text: #08091c;
395
+ --components-alert-alertbox-warning-contrast-border: rgba(255, 255, 255, 0);
396
+ --components-alert-alertbox-warning-contrast-fill: #fff4cd;
397
+ --components-alert-alertbox-warning-contrast-icon: #08091c;
398
+ --components-alert-alertbox-warning-contrast-text: #08091c;
399
+ --components-alert-alertbox-warning-standard-border: rgba(255, 255, 255, 0);
400
+ --components-alert-alertbox-warning-standard-fill: #fff4cd;
401
+ --components-alert-alertbox-warning-standard-icon: #08091c;
402
+ --components-alert-alertbox-warning-standard-text: #08091c;
403
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
404
+ --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
405
+ --components-alert-copyabletext-contrast-fill: #393a49;
406
+ --components-alert-copyabletext-contrast-icon: #e5e5e9;
407
+ --components-alert-copyabletext-contrast-text: #e5e5e9;
408
+ --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
409
+ --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
410
+ --components-alert-copyabletext-standard-fill: #393a49;
411
+ --components-alert-copyabletext-standard-icon: #e5e5e9;
412
+ --components-alert-copyabletext-standard-text: #e5e5e9;
568
413
  }
569
414
 
415
+ /* DO NOT CHANGE!*/
416
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
570
417
  /* DO NOT CHANGE!*/
571
418
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
572
419
  [data-color-mode=light],
573
420
  :root {
574
- --basecolors-frame-contrast: var(--fill-background-contrast-light);
575
- --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
576
- --basecolors-frame-default: var(--fill-background-standard-light);
577
- --basecolors-frame-elevated: var(--fill-background-standard-light);
578
- --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
579
- --basecolors-frame-subdued: var(--fill-background-subdued-light);
580
- --basecolors-frame-tint: var(--fill-background-tint-light);
581
- --basecolors-shape-accent: var(--shape-accent);
582
- --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
583
- --basecolors-shape-bicycle-default: var(--standard-bicycle);
584
- --basecolors-shape-bus-contrast: var(--contrast-bus);
585
- --basecolors-shape-bus-default: var(--standard-bus);
586
- --basecolors-shape-cableway-contrast: var(--contrast-cableway);
587
- --basecolors-shape-cableway-default: var(--standard-cableway);
588
- --basecolors-shape-disabled: var(--shape-neutral);
589
- --basecolors-shape-disabledalt: var(--shape-neutralalt);
590
- --basecolors-shape-ferry-contrast: var(--contrast-ferry);
591
- --basecolors-shape-ferry-default: var(--standard-ferry);
592
- --basecolors-shape-funicular-contrast: var(--contrast-funicular);
593
- --basecolors-shape-funicular-default: var(--standard-funicular);
594
- --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
595
- --basecolors-shape-helicopter-default: var(--standard-helicopter);
596
- --basecolors-shape-highlight: var(--stroke-highlight);
597
- --basecolors-shape-light: var(--shape-light);
598
- --basecolors-shape-mask: var(--shape-light);
599
- --basecolors-shape-maskalt: var(--shape-light);
600
- --basecolors-shape-metro-contrast: var(--contrast-metro);
601
- --basecolors-shape-metro-default: var(--standard-metro);
602
- --basecolors-shape-mobility-contrast: var(--contrast-mobility);
603
- --basecolors-shape-mobility-default: var(--standard-mobility);
604
- --basecolors-shape-plane-contrast: var(--contrast-plane);
605
- --basecolors-shape-plane-default: var(--standard-plane);
606
- --basecolors-shape-subdued: var(--shape-subdued);
607
- --basecolors-shape-subduedalt: var(--shape-subduedalt);
608
- --basecolors-shape-taxi-contrast: var(--contrast-taxi);
609
- --basecolors-shape-taxi-default: var(--standard-taxi);
610
- --basecolors-shape-train-contrast: var(--contrast-train);
611
- --basecolors-shape-train-default: var(--standard-train);
612
- --basecolors-shape-tram-contrast: var(--contrast-tram);
613
- --basecolors-shape-tram-default: var(--standard-tram);
614
- --basecolors-shape-walk-contrast: var(--contrast-walk);
615
- --basecolors-shape-walk-default: var(--standard-walk);
616
- --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
617
- --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
618
- --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
619
- --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
620
- --basecolors-stroke-contrast: var(--stroke-contrast);
621
- --basecolors-stroke-default: var(--stroke-accent);
622
- --basecolors-stroke-disabled: var(--stroke-neutralalt);
623
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
624
- --basecolors-stroke-focus-standard: var(--stroke-accent);
625
- --basecolors-stroke-highlight: var(--stroke-highlight);
626
- --basecolors-stroke-light: var(--stroke-light);
627
- --basecolors-stroke-subdued: var(--stroke-subdued);
628
- --basecolors-stroke-subduedalt: var(--stroke-neutral);
629
- --basecolors-text-accent: var(--text-accent);
630
- --basecolors-text-disabled: var(--text-neutral);
631
- --basecolors-text-disabledalt: var(--text-neutralalt);
632
- --basecolors-text-highlight: var(--stroke-highlight);
633
- --basecolors-text-light: var(--text-light);
634
- --basecolors-text-subdued: var(--text-subdued);
635
- --basecolors-text-subduedalt: var(--text-subduedalt);
421
+ --basecolors-frame-contrast: #181c56;
422
+ --basecolors-frame-contrastalt: #393d79;
423
+ --basecolors-frame-default: #ffffff;
424
+ --basecolors-frame-elevated: #ffffff;
425
+ --basecolors-frame-elevatedalt: #f6f6f9;
426
+ --basecolors-frame-subdued: #d9dae8;
427
+ --basecolors-frame-tint: #f6f6f9;
428
+ --basecolors-shape-accent: #181c56;
429
+ --basecolors-shape-bicycle-contrast: #00db9b;
430
+ --basecolors-shape-bicycle-default: #388f76;
431
+ --basecolors-shape-bus-contrast: #ff6392;
432
+ --basecolors-shape-bus-default: #c5044e;
433
+ --basecolors-shape-cableway-contrast: #b482fb;
434
+ --basecolors-shape-cableway-default: #78469a;
435
+ --basecolors-shape-disabled: #6e6f73;
436
+ --basecolors-shape-disabledalt: #b6b8ba;
437
+ --basecolors-shape-ferry-contrast: #6fdfff;
438
+ --basecolors-shape-ferry-default: #0c6693;
439
+ --basecolors-shape-funicular-contrast: #b482fb;
440
+ --basecolors-shape-funicular-default: #78469a;
441
+ --basecolors-shape-helicopter-contrast: #fbafea;
442
+ --basecolors-shape-helicopter-default: #800664;
443
+ --basecolors-shape-highlight: #ff5959;
444
+ --basecolors-shape-light: #ffffff;
445
+ --basecolors-shape-mask: #ffffff;
446
+ --basecolors-shape-maskalt: #ffffff;
447
+ --basecolors-shape-metro-contrast: #f08901;
448
+ --basecolors-shape-metro-default: #bf5826;
449
+ --basecolors-shape-mobility-contrast: #00db9b;
450
+ --basecolors-shape-mobility-default: #388f76;
451
+ --basecolors-shape-plane-contrast: #fbafea;
452
+ --basecolors-shape-plane-default: #800664;
453
+ --basecolors-shape-subdued: #626493;
454
+ --basecolors-shape-subduedalt: #d9dae8;
455
+ --basecolors-shape-taxi-contrast: #ffe082;
456
+ --basecolors-shape-taxi-default: #3d3e40;
457
+ --basecolors-shape-train-contrast: #42a5f5;
458
+ --basecolors-shape-train-default: #00367f;
459
+ --basecolors-shape-tram-contrast: #b482fb;
460
+ --basecolors-shape-tram-default: #78469a;
461
+ --basecolors-shape-walk-contrast: #8284ab;
462
+ --basecolors-shape-walk-default: #8d8e9c;
463
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
464
+ --basecolors-shape-airportlinkbus-default: #800664;
465
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
466
+ --basecolors-shape-airportlinkrail-default: #800664;
467
+ --basecolors-stroke-contrast: #aeb7e2;
468
+ --basecolors-stroke-default: #181c56;
469
+ --basecolors-stroke-disabled: #949699;
470
+ --basecolors-stroke-focus-contrast: #aeb7e2;
471
+ --basecolors-stroke-focus-standard: #181c56;
472
+ --basecolors-stroke-highlight: #ff5959;
473
+ --basecolors-stroke-light: #ffffff;
474
+ --basecolors-stroke-subdued: #8284ab;
475
+ --basecolors-stroke-subduedalt: #e3e6e8;
476
+ --basecolors-text-accent: #181c56;
477
+ --basecolors-text-disabled: #6e6f73;
478
+ --basecolors-text-disabledalt: #b6b8ba;
479
+ --basecolors-text-highlight: #ff5959;
480
+ --basecolors-text-light: #ffffff;
481
+ --basecolors-text-subdued: #626493;
482
+ --basecolors-text-subduedalt: #d9dae8;
636
483
  }
637
484
 
638
485
  [data-color-mode=dark] {
639
- --basecolors-frame-contrast: var(--fill-background-contrast-dark);
640
- --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
641
- --basecolors-frame-default: var(--fill-background-standard-dark);
642
- --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
643
- --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
644
- --basecolors-frame-subdued: var(--fill-background-subdued-dark);
645
- --basecolors-frame-tint: var(--fill-background-tint-dark);
646
- --basecolors-shape-accent: var(--shape-lightalt);
647
- --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
648
- --basecolors-shape-bicycle-default: var(--dark-bicycle);
649
- --basecolors-shape-bus-contrast: var(--dark-bus);
650
- --basecolors-shape-bus-default: var(--dark-bus);
651
- --basecolors-shape-cableway-contrast: var(--dark-cableway);
652
- --basecolors-shape-cableway-default: var(--dark-cableway);
653
- --basecolors-shape-disabled: var(--shape-neutralalt);
654
- --basecolors-shape-disabledalt: var(--shape-darkalt);
655
- --basecolors-shape-ferry-contrast: var(--dark-ferry);
656
- --basecolors-shape-ferry-default: var(--dark-ferry);
657
- --basecolors-shape-funicular-contrast: var(--dark-funicular);
658
- --basecolors-shape-funicular-default: var(--dark-funicular);
659
- --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
660
- --basecolors-shape-helicopter-default: var(--dark-helicopter);
661
- --basecolors-shape-highlight: var(--stroke-highlightalt);
662
- --basecolors-shape-light: var(--shape-lightalt);
663
- --basecolors-shape-mask: var(--fill-background-subdued-dark);
664
- --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
665
- --basecolors-shape-metro-contrast: var(--dark-metro);
666
- --basecolors-shape-metro-default: var(--dark-metro);
667
- --basecolors-shape-mobility-contrast: var(--dark-mobility);
668
- --basecolors-shape-mobility-default: var(--dark-mobility);
669
- --basecolors-shape-plane-contrast: var(--dark-plane);
670
- --basecolors-shape-plane-default: var(--dark-plane);
671
- --basecolors-shape-subdued: var(--shape-darkalt);
672
- --basecolors-shape-subduedalt: var(--shape-darkalt);
673
- --basecolors-shape-taxi-contrast: var(--dark-taxi);
674
- --basecolors-shape-taxi-default: var(--dark-taxi);
675
- --basecolors-shape-train-contrast: var(--dark-train);
676
- --basecolors-shape-train-default: var(--dark-train);
677
- --basecolors-shape-tram-contrast: var(--dark-tram);
678
- --basecolors-shape-tram-default: var(--dark-tram);
679
- --basecolors-shape-walk-contrast: var(--dark-walk);
680
- --basecolors-shape-walk-default: var(--dark-walk);
681
- --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
682
- --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
683
- --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
684
- --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
685
- --basecolors-stroke-contrast: var(--stroke-contrast);
686
- --basecolors-stroke-default: var(--stroke-dark);
687
- --basecolors-stroke-disabled: var(--stroke-neutral);
688
- --basecolors-stroke-focus-contrast: var(--stroke-contrast);
689
- --basecolors-stroke-focus-standard: var(--stroke-contrast);
690
- --basecolors-stroke-highlight: var(--stroke-highlightalt);
691
- --basecolors-stroke-light: var(--stroke-dark);
692
- --basecolors-stroke-subdued: var(--stroke-darkalt);
693
- --basecolors-stroke-subduedalt: var(--stroke-darkalt);
694
- --basecolors-text-accent: var(--text-lightalt);
695
- --basecolors-text-disabled: var(--text-neutralalt);
696
- --basecolors-text-disabledalt: var(--text-neutralalt);
697
- --basecolors-text-highlight: var(--stroke-highlightalt);
698
- --basecolors-text-light: var(--text-lightalt);
699
- --basecolors-text-subdued: var(--text-darkalt);
700
- --basecolors-text-subduedalt: var(--text-darkalt);
486
+ --basecolors-frame-contrast: #212233;
487
+ --basecolors-frame-contrastalt: #141527;
488
+ --basecolors-frame-default: #08091c;
489
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
490
+ --basecolors-frame-elevatedalt: #464755;
491
+ --basecolors-frame-subdued: #2d2e3e;
492
+ --basecolors-frame-tint: #141527;
493
+ --basecolors-shape-accent: #e5e5e9;
494
+ --basecolors-shape-bicycle-contrast: #4db295;
495
+ --basecolors-shape-bicycle-default: #4db295;
496
+ --basecolors-shape-bus-contrast: #e87a9b;
497
+ --basecolors-shape-bus-default: #e87a9b;
498
+ --basecolors-shape-cableway-contrast: #b898e5;
499
+ --basecolors-shape-cableway-default: #b898e5;
500
+ --basecolors-shape-disabled: #b6b8ba;
501
+ --basecolors-shape-disabledalt: #b3b4bd;
502
+ --basecolors-shape-ferry-contrast: #8ccfe2;
503
+ --basecolors-shape-ferry-default: #8ccfe2;
504
+ --basecolors-shape-funicular-contrast: #b898e5;
505
+ --basecolors-shape-funicular-default: #b898e5;
506
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
507
+ --basecolors-shape-helicopter-default: #f2b8e5;
508
+ --basecolors-shape-highlight: #ff9494;
509
+ --basecolors-shape-light: #e5e5e9;
510
+ --basecolors-shape-mask: #2d2e3e;
511
+ --basecolors-shape-maskalt: #393a49;
512
+ --basecolors-shape-metro-contrast: #dd973c;
513
+ --basecolors-shape-metro-default: #dd973c;
514
+ --basecolors-shape-mobility-contrast: #4db295;
515
+ --basecolors-shape-mobility-default: #4db295;
516
+ --basecolors-shape-plane-contrast: #f2b8e5;
517
+ --basecolors-shape-plane-default: #f2b8e5;
518
+ --basecolors-shape-subdued: #b3b4bd;
519
+ --basecolors-shape-subduedalt: #b3b4bd;
520
+ --basecolors-shape-taxi-contrast: #ffe082;
521
+ --basecolors-shape-taxi-default: #ffe082;
522
+ --basecolors-shape-train-contrast: #60a2d7;
523
+ --basecolors-shape-train-default: #60a2d7;
524
+ --basecolors-shape-tram-contrast: #b898e5;
525
+ --basecolors-shape-tram-default: #b898e5;
526
+ --basecolors-shape-walk-contrast: #8d8e9c;
527
+ --basecolors-shape-walk-default: #8d8e9c;
528
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
529
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
530
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
531
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
532
+ --basecolors-stroke-contrast: #aeb7e2;
533
+ --basecolors-stroke-default: #b3b4bd;
534
+ --basecolors-stroke-disabled: #e3e6e8;
535
+ --basecolors-stroke-focus-contrast: #aeb7e2;
536
+ --basecolors-stroke-focus-standard: #aeb7e2;
537
+ --basecolors-stroke-highlight: #ff9494;
538
+ --basecolors-stroke-light: #b3b4bd;
539
+ --basecolors-stroke-subdued: #81828f;
540
+ --basecolors-stroke-subduedalt: #81828f;
541
+ --basecolors-text-accent: #e5e5e9;
542
+ --basecolors-text-disabled: #b6b8ba;
543
+ --basecolors-text-disabledalt: #b6b8ba;
544
+ --basecolors-text-highlight: #ff9494;
545
+ --basecolors-text-light: #e5e5e9;
546
+ --basecolors-text-subdued: #b3b4bd;
547
+ --basecolors-text-subduedalt: #b3b4bd;
701
548
  }
702
549
 
703
550
  :root {