@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-field-var.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 (49) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +1204 -429
  22. package/dist/global.css +68 -0
  23. package/dist/scania-variables.css +437 -136
  24. package/dist/tl-accordion.css +5 -3
  25. package/dist/tl-banner.css +88 -13
  26. package/dist/tl-breadcrumbs.css +55 -6
  27. package/dist/tl-button.css +180 -156
  28. package/dist/tl-card.css +24 -11
  29. package/dist/tl-chip.css +14 -12
  30. package/dist/tl-divider.css +61 -3
  31. package/dist/tl-dropdown.css +9 -6
  32. package/dist/tl-folder-tabs.css +5 -4
  33. package/dist/tl-footer.css +86 -34
  34. package/dist/tl-header.css +16 -10
  35. package/dist/tl-inline-tabs.css +5 -2
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +2 -2
  39. package/dist/tl-navigation-tabs.css +5 -2
  40. package/dist/tl-side-menu.css +10 -6
  41. package/dist/tl-slider.css +180 -156
  42. package/dist/tl-table.css +11 -7
  43. package/dist/tl-text-field.css +154 -52
  44. package/dist/tl-textarea.css +172 -43
  45. package/dist/tl-toast.css +119 -10
  46. package/dist/tl-toggle.css +2 -2
  47. package/dist/tl-tooltip.css +17 -15
  48. package/dist/traton-variables.css +271 -29
  49. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -76,8 +76,8 @@
76
76
  margin-bottom: -1px;
77
77
  border-bottom: 1px solid var(--accordion-border);
78
78
  }
79
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
80
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
79
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
80
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
81
81
  background-color: var(--accordion-background-hover);
82
82
  }
83
83
  .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -88,8 +88,10 @@
88
88
  /* Focus state */
89
89
  }
90
90
  .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
91
- outline: 2px solid var(--color-foreground-border-accent-focus);
91
+ outline: 2px solid var(--component--focus-ring-color-strong);
92
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
92
93
  outline-offset: 1px;
94
+ z-index: 1;
93
95
  background-color: var(--accordion-background-focus);
94
96
  }
95
97
  .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
@@ -315,23 +317,91 @@
315
317
  font-weight: bold;
316
318
  }
317
319
 
320
+ /**
321
+ * Do not edit directly, this file was auto-generated.
322
+ */
318
323
  :root,
319
- .tl-mode-light,
320
- .tl-mode-dark {
321
- --banner-text: var(--color-foreground-text-strong);
322
- --banner-close-icon: var(--color-foreground-icon-strong);
323
- --banner-background-default: var(--color-background-layer-01);
324
- --banner-prefix-default: var(--color-foreground-icon-strong);
325
- --banner-background-info: var(--color-system-info-discrete);
326
- --banner-prefix-info: var(--color-system-info-default);
327
- --banner-background-error: var(--color-system-danger-discrete);
328
- --banner-prefix-error: var(--color-system-danger-default);
324
+ .tds-mode-light,
325
+ .scania .tds-mode-light,
326
+ .scania.tds-mode-light,
327
+ .scania .tl-mode-light,
328
+ .scania.tl-mode-light {
329
+ --component-banner-background-neutral-default: var(--scania-color-grey-150);
330
+ --component-banner-background-information-default: var(--scania-color-blue-100);
331
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
332
+ --component-banner-text-neutral-default: var(--color-text-strong);
333
+ --component-banner-text-information-default: var(--color-text-strong);
334
+ --component-banner-text-error-default: var(--color-text-strong);
335
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
336
+ --component-banner-icon-information-default: var(--color-system-info-default);
337
+ --component-banner-icon-error-default: var(--color-system-danger-default);
338
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
339
+ }
340
+
341
+ .traton .tds-mode-light,
342
+ .traton.tds-mode-light,
343
+ .traton .tl-mode-light,
344
+ .traton.tl-mode-light {
345
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
346
+ --component-banner-background-information-default: var(--color-system-info-discrete);
347
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
348
+ --component-banner-text-neutral-default: var(--color-text-strong);
349
+ --component-banner-text-information-default: var(--color-text-strong);
350
+ --component-banner-text-error-default: var(--color-text-strong);
351
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
352
+ --component-banner-icon-information-default: var(--color-system-info-default);
353
+ --component-banner-icon-error-default: var(--color-system-danger-default);
354
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
355
+ }
356
+
357
+ .tds-mode-dark,
358
+ .scania .tds-mode-dark,
359
+ .scania.tds-mode-dark,
360
+ .scania .tl-mode-dark,
361
+ .scania.tl-mode-dark {
362
+ --component-banner-background-neutral-default: var(--color-background-layer-02);
363
+ --component-banner-background-information-default: var(--scania-color-blue-700);
364
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
365
+ --component-banner-text-neutral-default: var(--color-text-strong);
366
+ --component-banner-text-information-default: var(--color-text-strong);
367
+ --component-banner-text-error-default: var(--color-text-strong);
368
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
369
+ --component-banner-icon-information-default: var(--color-system-info-default);
370
+ --component-banner-icon-error-default: var(--color-system-danger-default);
371
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
372
+ }
373
+
374
+ .traton .tds-mode-dark,
375
+ .traton.tds-mode-dark,
376
+ .traton .tl-mode-dark,
377
+ .traton.tl-mode-dark {
378
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
379
+ --component-banner-background-information-default: var(--color-system-info-discrete);
380
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
381
+ --component-banner-text-neutral-default: var(--color-text-strong);
382
+ --component-banner-text-information-default: var(--color-text-strong);
383
+ --component-banner-text-error-default: var(--color-text-strong);
384
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
385
+ --component-banner-icon-information-default: var(--color-system-info-default);
386
+ --component-banner-icon-error-default: var(--color-system-danger-default);
387
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
388
+ }
389
+
390
+ .tl-banner {
391
+ --banner-text: var(--component-banner-text-neutral-default);
392
+ --banner-close-icon: var(--component-banner-icon-dismiss-default);
393
+ --banner-background-default: var(--component-banner-background-neutral-default);
394
+ --banner-prefix-default: var(--component-banner-icon-neutral-default);
395
+ --banner-background-info: var(--component-banner-background-information-default);
396
+ --banner-prefix-info: var(--component-banner-icon-information-default);
397
+ --banner-background-error: var(--component-banner-background-error-default);
398
+ --banner-prefix-error: var(--component-banner-icon-error-default);
329
399
  }
330
400
 
331
401
  .tl-banner {
332
402
  display: flex;
333
403
  background-color: var(--banner-background-default);
334
- padding: 16px 20px;
404
+ padding: 16px;
335
405
  position: relative;
336
406
  }
337
407
  .tl-banner--error {
@@ -403,12 +473,19 @@
403
473
  width: 20px;
404
474
  }
405
475
  .tl-banner__close:focus-visible {
406
- outline: 2px solid var(--tds-focus-outline-color);
407
- box-shadow: 0 0 0 1px var(--tds-white);
476
+ outline: 2px solid var(--component--focus-ring-color-strong);
477
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
408
478
  outline-offset: 1px;
409
479
  z-index: 1;
410
480
  }
411
481
 
482
+ .tl-banner .tl-link {
483
+ text-decoration: underline;
484
+ }
485
+ .tl-banner .tl-link:hover {
486
+ text-decoration: none;
487
+ }
488
+
412
489
  .tl-block {
413
490
  --block-background: var(--color-background-layer-01);
414
491
  --block-text-color: var(--color-foreground-text-strong);
@@ -531,15 +608,61 @@
531
608
  text-transform: var(--detail-03-text-transform);
532
609
  }
533
610
 
611
+ /**
612
+ * Do not edit directly, this file was auto-generated.
613
+ */
614
+ :root,
615
+ .tds-mode-light,
616
+ .scania .tds-mode-light,
617
+ .scania.tds-mode-light,
618
+ .scania .tl-mode-light,
619
+ .scania.tl-mode-light {
620
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
621
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
622
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
623
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
624
+ }
625
+
626
+ .traton .tds-mode-light,
627
+ .traton.tds-mode-light,
628
+ .traton .tl-mode-light,
629
+ .traton.tl-mode-light {
630
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
631
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
632
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
633
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
634
+ }
635
+
636
+ .tds-mode-dark,
637
+ .scania .tds-mode-dark,
638
+ .scania.tds-mode-dark,
639
+ .scania .tl-mode-dark,
640
+ .scania.tl-mode-dark {
641
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
642
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
643
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
644
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
645
+ }
646
+
647
+ .traton .tds-mode-dark,
648
+ .traton.tds-mode-dark,
649
+ .traton .tl-mode-dark,
650
+ .traton.tl-mode-dark {
651
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
652
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
653
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
654
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
655
+ }
656
+
534
657
  .tl-breadcrumbs {
535
- --breadcrumb-label: var(--color-foreground-text-strong);
536
- --breadcrumb-hover: var(--color-foreground-text-strong);
537
- --breadcrumb-current: var(--color-foreground-text-subtle);
538
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
658
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
659
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
660
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
661
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
539
662
  --breadcrumb-separator-margin: 4px;
540
663
  --breadcrumb-separator-width: 4px;
541
664
  --breadcrumb-separator-height: 8px;
542
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
665
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
543
666
  --breadcrumb-focus-outline-width: 2px;
544
667
  }
545
668
 
@@ -593,7 +716,10 @@
593
716
  text-decoration: underline;
594
717
  }
595
718
  .tl-breadcrumbs a:focus-visible {
596
- outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
719
+ outline: 2px solid var(--component--focus-ring-color-strong);
720
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
721
+ outline-offset: 1px;
722
+ z-index: 1;
597
723
  }
598
724
  .tl-breadcrumbs a[aria-current=page] {
599
725
  pointer-events: none;
@@ -616,14 +742,14 @@
616
742
  .scania.tl-mode-light {
617
743
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
618
744
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
619
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
745
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
620
746
  --component-button-background-standard-secondary-default: var(--color-background-none);
621
747
  --component-button-background-standard-secondary-hover: var(--color-background-none);
622
748
  --component-button-background-standard-secondary-active: var(--color-background-none);
623
749
  --component-button-background-standard-tertiary-default: var(--color-background-none);
624
750
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
625
751
  --component-button-background-standard-tertiary-active: var(--color-background-none);
626
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
752
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
627
753
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
628
754
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
629
755
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -645,59 +771,68 @@
645
771
  --component-button-border-danger-primary-default: var(--color-border-none);
646
772
  --component-button-border-danger-primary-hover: var(--color-border-none);
647
773
  --component-button-border-danger-primary-active: var(--color-border-none);
648
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
774
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
649
775
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
650
776
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
651
777
  --component-button-border-danger-tertiary-default: var(--color-border-none);
652
778
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
653
779
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
654
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
780
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
781
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
655
782
  --component-button-icon-standard-primary-hover: var(
656
- --component-button-text-standard-primary-default
783
+ --component-button-icon-standard-primary-default
657
784
  );
658
785
  --component-button-icon-standard-primary-active: var(
659
- --component-button-text-standard-primary-default
786
+ --component-button-icon-standard-primary-default
787
+ );
788
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
789
+ --component-button-icon-standard-secondary-hover: var(
790
+ --component-button-icon-standard-secondary-default
791
+ );
792
+ --component-button-icon-standard-secondary-active: var(
793
+ --component-button-icon-standard-secondary-default
660
794
  );
661
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
662
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
663
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
664
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
665
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
666
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
667
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
668
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
795
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
796
+ --component-button-icon-standard-tertiary-hover: var(
797
+ --component-button-icon-standard-tertiary-default
798
+ );
799
+ --component-button-icon-standard-tertiary-active: var(
800
+ --component-button-icon-standard-tertiary-default
801
+ );
802
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
803
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
669
804
  --component-button-icon-danger-primary-active: var(
670
- --component-button-text-danger-primary-default
805
+ --component-button-icon-danger-primary-default
671
806
  );
672
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
807
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
673
808
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
674
809
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
675
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
810
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
676
811
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
677
812
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
678
813
  --component-button-opacity-disabled: var(--scania-opacity-25);
679
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
814
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
680
815
  --component-button-text-standard-primary-hover: var(
681
816
  --component-button-text-standard-primary-default
682
817
  );
683
818
  --component-button-text-standard-primary-active: var(
684
819
  --component-button-text-standard-primary-default
685
820
  );
686
- --component-button-text-standard-secondary-default: var(--color-text-strong);
687
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
688
- --component-button-text-standard-secondary-active: var(--color-text-strong);
689
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
690
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
691
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
692
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
821
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
822
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
823
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
824
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
825
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
826
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
827
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
693
828
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
694
829
  --component-button-text-danger-primary-active: var(
695
830
  --component-button-text-danger-primary-default
696
831
  );
697
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
832
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
698
833
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
699
834
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
700
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
835
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
701
836
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
702
837
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
703
838
  }
@@ -706,9 +841,9 @@
706
841
  .traton.tds-mode-light,
707
842
  .traton .tl-mode-light,
708
843
  .traton.tl-mode-light {
709
- --component-button-background-standard-primary-default: #004852;
710
- --component-button-background-standard-primary-hover: #003137;
711
- --component-button-background-standard-primary-active: #002429;
844
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
845
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
846
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
712
847
  --component-button-background-standard-secondary-default: var(--color-background-none);
713
848
  --component-button-background-standard-secondary-hover: var(--color-background-none);
714
849
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -743,23 +878,32 @@
743
878
  --component-button-border-danger-tertiary-default: var(--color-border-none);
744
879
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
745
880
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
746
- --component-button-icon-standard-primary-default: #fff;
881
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
882
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
747
883
  --component-button-icon-standard-primary-hover: var(
748
884
  --component-button-text-standard-primary-default
749
885
  );
750
886
  --component-button-icon-standard-primary-active: var(
751
887
  --component-button-text-standard-primary-default
752
888
  );
753
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
754
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
755
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
756
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
757
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
758
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
759
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
760
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
889
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
890
+ --component-button-icon-standard-secondary-hover: var(
891
+ --component-button-icon-standard-secondary-default
892
+ );
893
+ --component-button-icon-standard-secondary-active: var(
894
+ --component-button-icon-standard-secondary-default
895
+ );
896
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
897
+ --component-button-icon-standard-tertiary-hover: var(
898
+ --component-button-icon-standard-tertiary-default
899
+ );
900
+ --component-button-icon-standard-tertiary-active: var(
901
+ --component-button-icon-standard-tertiary-default
902
+ );
903
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
904
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
761
905
  --component-button-icon-danger-primary-active: var(
762
- --component-button-text-danger-primary-default
906
+ --component-button-icon-danger-primary-default
763
907
  );
764
908
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
765
909
  --component-button-icon-danger-secondary-hover: var(
@@ -776,7 +920,7 @@
776
920
  --component-button-text-danger-tertiary-default
777
921
  );
778
922
  --component-button-opacity-disabled: var(--traton-opacity-25);
779
- --component-button-text-standard-primary-default: #fff;
923
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
780
924
  --component-button-text-standard-primary-hover: var(
781
925
  --component-button-text-standard-primary-default
782
926
  );
@@ -789,7 +933,7 @@
789
933
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
790
934
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
791
935
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
792
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
936
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
793
937
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
794
938
  --component-button-text-danger-primary-active: var(
795
939
  --component-button-text-danger-primary-default
@@ -824,7 +968,7 @@
824
968
  --component-button-background-standard-tertiary-default: var(--color-background-none);
825
969
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
826
970
  --component-button-background-standard-tertiary-active: var(--color-background-none);
827
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
971
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
828
972
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
829
973
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
830
974
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -846,59 +990,68 @@
846
990
  --component-button-border-danger-primary-default: var(--color-border-none);
847
991
  --component-button-border-danger-primary-hover: var(--color-border-none);
848
992
  --component-button-border-danger-primary-active: var(--color-border-none);
849
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
993
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
850
994
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
851
995
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
852
996
  --component-button-border-danger-tertiary-default: var(--color-border-none);
853
997
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
854
998
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
855
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
999
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
1000
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
856
1001
  --component-button-icon-standard-primary-hover: var(
857
- --component-button-text-standard-primary-default
1002
+ --component-button-icon-standard-primary-default
858
1003
  );
859
1004
  --component-button-icon-standard-primary-active: var(
860
- --component-button-text-standard-primary-default
1005
+ --component-button-icon-standard-primary-default
1006
+ );
1007
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
1008
+ --component-button-icon-standard-secondary-hover: var(
1009
+ --component-button-icon-standard-secondary-default
1010
+ );
1011
+ --component-button-icon-standard-secondary-active: var(
1012
+ --component-button-icon-standard-secondary-default
1013
+ );
1014
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
1015
+ --component-button-icon-standard-tertiary-hover: var(
1016
+ --component-button-icon-standard-tertiary-default
861
1017
  );
862
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
863
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
864
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
865
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
866
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
867
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
868
- --component-button-icon-danger-primary-default: var(--color-text-strong);
1018
+ --component-button-icon-standard-tertiary-active: var(
1019
+ --component-button-icon-standard-tertiary-default
1020
+ );
1021
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
869
1022
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
870
1023
  --component-button-icon-danger-primary-active: var(
871
1024
  --component-button-icon-danger-primary-default
872
1025
  );
873
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
1026
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
874
1027
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
875
1028
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
876
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
1029
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
877
1030
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
878
1031
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
879
1032
  --component-button-opacity-disabled: var(--scania-opacity-25);
880
- --component-button-text-standard-primary-default: var(--color-text-brand);
1033
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
881
1034
  --component-button-text-standard-primary-hover: var(
882
1035
  --component-button-text-standard-primary-default
883
1036
  );
884
1037
  --component-button-text-standard-primary-active: var(
885
1038
  --component-button-text-standard-primary-default
886
1039
  );
887
- --component-button-text-standard-secondary-default: var(--color-text-strong);
888
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
889
- --component-button-text-standard-secondary-active: var(--color-text-strong);
890
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
891
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
892
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
893
- --component-button-text-danger-primary-default: var(--color-text-strong);
1040
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
1041
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
1042
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
1043
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
1044
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
1045
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
1046
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
894
1047
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
895
1048
  --component-button-text-danger-primary-active: var(
896
1049
  --component-button-text-danger-primary-default
897
1050
  );
898
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
1051
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
899
1052
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
900
1053
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
901
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
1054
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
902
1055
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
903
1056
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
904
1057
  }
@@ -907,9 +1060,9 @@
907
1060
  .traton.tds-mode-dark,
908
1061
  .traton .tl-mode-dark,
909
1062
  .traton.tl-mode-dark {
910
- --component-button-background-standard-primary-default: #c2bfb6;
911
- --component-button-background-standard-primary-hover: #d6d4c9;
912
- --component-button-background-standard-primary-active: #a6a49c;
1063
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
1064
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
1065
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
913
1066
  --component-button-background-standard-secondary-default: var(--color-background-none);
914
1067
  --component-button-background-standard-secondary-hover: var(--color-background-none);
915
1068
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -944,20 +1097,29 @@
944
1097
  --component-button-border-danger-tertiary-default: var(--color-border-none);
945
1098
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
946
1099
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
947
- --component-button-icon-standard-primary-default: #000;
1100
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
1101
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
948
1102
  --component-button-icon-standard-primary-hover: var(
949
1103
  --component-button-text-standard-primary-default
950
1104
  );
951
1105
  --component-button-icon-standard-primary-active: var(
952
1106
  --component-button-text-standard-primary-default
953
1107
  );
954
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
955
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
956
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
957
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
958
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
959
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
960
- --component-button-icon-danger-primary-default: var(--color-text-strong);
1108
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
1109
+ --component-button-icon-standard-secondary-hover: var(
1110
+ --component-button-icon-standard-secondary-default
1111
+ );
1112
+ --component-button-icon-standard-secondary-active: var(
1113
+ --component-button-icon-standard-secondary-default
1114
+ );
1115
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
1116
+ --component-button-icon-standard-tertiary-hover: var(
1117
+ --component-button-icon-standard-tertiary-default
1118
+ );
1119
+ --component-button-icon-standard-tertiary-active: var(
1120
+ --component-button-icon-standard-tertiary-default
1121
+ );
1122
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
961
1123
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
962
1124
  --component-button-icon-danger-primary-active: var(
963
1125
  --component-button-icon-danger-primary-default
@@ -977,7 +1139,7 @@
977
1139
  --component-button-text-danger-tertiary-default
978
1140
  );
979
1141
  --component-button-opacity-disabled: var(--traton-opacity-25);
980
- --component-button-text-standard-primary-default: #000;
1142
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
981
1143
  --component-button-text-standard-primary-hover: var(
982
1144
  --component-button-text-standard-primary-default
983
1145
  );
@@ -990,7 +1152,7 @@
990
1152
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
991
1153
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
992
1154
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
993
- --component-button-text-danger-primary-default: var(--color-text-strong);
1155
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
994
1156
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
995
1157
  --component-button-text-danger-primary-active: var(
996
1158
  --component-button-text-danger-primary-default
@@ -1012,69 +1174,54 @@
1012
1174
  }
1013
1175
 
1014
1176
  .tl-button {
1015
- --button-transparent: transparent;
1016
- --button-white: var(--color-brand-neutral-white);
1017
- --button-black: var(--color-brand-neutral-black);
1018
- --button-radius: var(--dimension-radius-for-surface-clickable);
1177
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
1019
1178
  --button-sm-only-icon-padding: 11px;
1020
1179
  --button-md-only-icon-padding: 13px;
1021
1180
  --button-lg-only-icon-padding: 17px;
1022
- --button-primary-background: var(--color-background-accent-primary-default);
1023
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
1024
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
1025
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1026
- --button-primary-color: var(--component-button-primary-text);
1027
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
1028
- --button-primary-border-color: var(--button-transparent);
1029
- --button-primary-border-color-disabled: var(--button-transparent);
1030
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
1031
- --button-primary-color-focus: var(--component-button-primary-text);
1032
- --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
1181
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
1182
+ --button-primary-background: var(--component-button-background-standard-primary-default);
1183
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
1184
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
1185
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
1186
+ --button-primary-color: var(--component-button-text-standard-primary-default);
1187
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
1188
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
1189
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
1033
1190
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
1034
- --button-secondary-background: var(--button-transparent);
1035
- --button-secondary-color: var(--color-foreground-text-strong);
1036
- --button-secondary-border-color: var(--color-foreground-border-soft);
1037
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
1038
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
1039
- --button-secondary-background-disabled: var(--button-transparent);
1040
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
1041
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
1042
- --button-secondary-background-focus: var(--button-transparent);
1043
- --button-secondary-color-focus: var(--color-foreground-text-strong);
1044
- --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
1191
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
1192
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
1193
+ --button-secondary-background-focus: var(
1194
+ --component-button-background-standard-secondary-default
1195
+ );
1196
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
1197
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
1198
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
1199
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
1200
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
1201
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
1045
1202
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
1046
- --button-ghost-background: var(--button-transparent);
1047
- --button-ghost-color: var(--color-foreground-text-strong);
1048
- --button-ghost-border-color: var(--button-transparent);
1049
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
1050
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
1051
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
1052
- --button-ghost-border-color-disabled: var(--button-transparent);
1053
- --button-ghost-background-focus: var(--button-transparent);
1054
- --button-ghost-color-focus: var(--color-foreground-text-strong);
1055
- --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
1203
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
1204
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
1205
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
1206
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
1207
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
1208
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
1209
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
1210
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
1211
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
1056
1212
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
1057
- --button-danger-background: var(--color-background-accent-danger-default);
1058
- --button-danger-color: var(--button-white);
1059
- --button-danger-border-color: var(--button-transparent);
1060
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
1061
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
1062
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1063
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
1064
- --button-danger-border-color-disabled: var(--button-transparent);
1065
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
1066
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
1067
- --button-danger-color-focus: var(--button-white);
1068
- --button-danger-border-color-focus: var(--button-transparent);
1213
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
1214
+ --button-danger-background: var(--component-button-background-danger-primary-default);
1215
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
1216
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
1217
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
1218
+ --button-danger-color: var(--component-button-text-danger-primary-default);
1219
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
1220
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
1221
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
1222
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
1069
1223
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
1070
- }
1071
- .tl-button .tl-button--primary {
1072
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1073
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1074
- }
1075
- .tl-button .tl-button--secondary {
1076
- --button-primary-background-disabled: var(--button-white);
1077
- --button-danger-background-disabled: var(--button-white);
1224
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
1078
1225
  }
1079
1226
 
1080
1227
  .scania .tl-button {
@@ -1111,8 +1258,10 @@
1111
1258
  cursor: pointer;
1112
1259
  }
1113
1260
  .tl-button:focus-visible {
1114
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
1115
- outline-offset: calc(var(--button-outline-width) * -1);
1261
+ outline: 2px solid var(--component--focus-ring-color-strong);
1262
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1263
+ outline-offset: 1px;
1264
+ z-index: 1;
1116
1265
  }
1117
1266
  .tl-button {
1118
1267
  /* Variants */
@@ -1122,25 +1271,24 @@
1122
1271
  color: var(--button-primary-color);
1123
1272
  border-color: var(--button-primary-border-color);
1124
1273
  }
1274
+ .tl-button--primary .tl-icon {
1275
+ color: var(--button-primary-icon-color);
1276
+ }
1125
1277
  .tl-button--primary:hover:not(:disabled) {
1126
1278
  background-color: var(--button-primary-background-hover);
1127
1279
  }
1128
1280
  .tl-button--primary:disabled {
1129
- background-color: var(--button-primary-background-disabled);
1130
- color: var(--button-primary-color-disabled);
1131
- border-color: var(--button-primary-border-color-disabled);
1132
1281
  cursor: not-allowed;
1133
- opacity: 0.6;
1282
+ opacity: var(--button-opacity-disabled);
1134
1283
  }
1135
1284
  .tl-button--primary:focus-visible:not(:disabled) {
1136
1285
  background: var(--button-primary-background-focus);
1137
1286
  border-color: var(--button-primary-border-color-focus);
1138
1287
  color: var(--button-primary-color-focus);
1139
- outline-color: var(--button-primary-outline-color-focus);
1140
1288
  }
1141
1289
  .tl-button--primary:active:not(:disabled):focus-visible {
1142
1290
  outline: none;
1143
- outline-offset: none;
1291
+ box-shadow: none;
1144
1292
  }
1145
1293
  .tl-button--primary:active:not(:disabled) {
1146
1294
  background-color: var(--button-primary-background-active);
@@ -1151,24 +1299,24 @@
1151
1299
  color: var(--button-secondary-color);
1152
1300
  border-color: var(--button-secondary-border-color);
1153
1301
  }
1302
+ .tl-button--secondary .tl-icon {
1303
+ color: var(--button-secondary-icon-color);
1304
+ }
1154
1305
  .tl-button--secondary:hover:not(:disabled) {
1155
1306
  border-color: var(--button-secondary-border-color-hover);
1156
1307
  }
1157
1308
  .tl-button--secondary:disabled {
1158
- background-color: var(--button-secondary-background-disabled);
1159
- color: var(--button-secondary-color-disabled);
1160
- border-color: var(--button-secondary-border-color-disabled);
1161
1309
  cursor: not-allowed;
1162
- opacity: 0.6;
1310
+ opacity: var(--button-opacity-disabled);
1163
1311
  }
1164
1312
  .tl-button--secondary:focus-visible:not(:disabled) {
1165
1313
  background: var(--button-secondary-background-focus);
1166
1314
  border-color: var(--button-secondary-border-color-focus);
1167
1315
  color: var(--button-secondary-color-focus);
1168
- outline-color: var(--button-secondary-outline-color-focus);
1169
1316
  }
1170
1317
  .tl-button--secondary:active:not(:disabled):focus-visible {
1171
1318
  outline: none;
1319
+ box-shadow: none;
1172
1320
  }
1173
1321
  .tl-button--secondary:active:not(:disabled) {
1174
1322
  border-color: var(--button-secondary-border-color-active);
@@ -1178,22 +1326,24 @@
1178
1326
  color: var(--button-ghost-color);
1179
1327
  border-color: var(--button-ghost-border-color);
1180
1328
  }
1329
+ .tl-button--ghost .tl-icon {
1330
+ color: var(--button-ghost-icon-color);
1331
+ }
1181
1332
  .tl-button--ghost:hover:not(:disabled) {
1182
1333
  border-color: var(--button-ghost-border-color-hover);
1183
1334
  }
1184
1335
  .tl-button--ghost:disabled {
1185
- color: var(--button-ghost-color-disabled);
1186
1336
  cursor: not-allowed;
1187
- opacity: 0.6;
1337
+ opacity: var(--button-opacity-disabled);
1188
1338
  }
1189
1339
  .tl-button--ghost:focus-visible:not(:disabled) {
1190
1340
  background: var(--button-ghost-background-focus);
1191
1341
  border-color: var(--button-ghost-border-color-focus);
1192
1342
  color: var(--button-ghost-color-focus);
1193
- outline-color: var(--button-ghost-outline-color-focus);
1194
1343
  }
1195
1344
  .tl-button--ghost:active:not(:disabled):focus-visible {
1196
1345
  outline: none;
1346
+ box-shadow: none;
1197
1347
  }
1198
1348
  .tl-button--ghost:active:not(:disabled) {
1199
1349
  border-color: var(--button-ghost-border-color-active);
@@ -1203,24 +1353,24 @@
1203
1353
  color: var(--button-danger-color);
1204
1354
  border-color: var(--button-danger-border-color);
1205
1355
  }
1356
+ .tl-button--danger .tl-icon {
1357
+ color: var(--button-danger-icon-color);
1358
+ }
1206
1359
  .tl-button--danger:hover:not(:disabled) {
1207
1360
  background-color: var(--button-danger-background-hover);
1208
1361
  }
1209
1362
  .tl-button--danger:disabled {
1210
- background-color: var(--button-danger-background-disabled);
1211
- color: var(--button-danger-color-disabled);
1212
- border-color: var(--button-danger-border-color-disabled);
1213
1363
  cursor: not-allowed;
1214
- opacity: 0.6;
1364
+ opacity: var(--button-opacity-disabled);
1215
1365
  }
1216
1366
  .tl-button--danger:focus-visible:not(:disabled) {
1217
1367
  background: var(--button-danger-background-focus);
1218
1368
  border-color: var(--button-danger-border-color-focus);
1219
1369
  color: var(--button-danger-color-focus);
1220
- outline-color: var(--button-danger-outline-color-focus);
1221
1370
  }
1222
1371
  .tl-button--danger:active:not(:disabled):focus-visible {
1223
1372
  outline: none;
1373
+ box-shadow: none;
1224
1374
  }
1225
1375
  .tl-button--danger:active:not(:disabled) {
1226
1376
  background-color: var(--button-danger-background-active);
@@ -1303,20 +1453,26 @@
1303
1453
  .scania.tds-mode-light,
1304
1454
  .scania .tl-mode-light,
1305
1455
  .scania.tl-mode-light {
1306
- --component-card-background-primary: #fff;
1307
- --component-card-background-secondary: #fff;
1456
+ --component-card-background-primary-default: var(--scania-color-base-white);
1457
+ --component-card-background-secondary-default: var(--scania-color-base-white);
1308
1458
  --component-card-border-radius-default: var(--scania-unit-4);
1309
1459
  --component-card-space-padding-default: var(--scania-unit-16);
1460
+ --component-card-text-title-default: var(--color-text-strong);
1461
+ --component-card-text-subtitle-default: var(--color-text-soft);
1462
+ --component-card-text-body-default: var(--color-text-defined);
1310
1463
  }
1311
1464
 
1312
1465
  .traton .tds-mode-light,
1313
1466
  .traton.tds-mode-light,
1314
1467
  .traton .tl-mode-light,
1315
1468
  .traton.tl-mode-light {
1316
- --component-card-background-primary: var(--traton-color-transparent-invisible-light);
1317
- --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
1469
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
1470
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
1318
1471
  --component-card-border-radius-default: var(--traton-unit-0);
1319
1472
  --component-card-space-padding-default: var(--traton-unit-0);
1473
+ --component-card-text-title-default: var(--color-text-strong);
1474
+ --component-card-text-subtitle-default: var(--color-text-soft);
1475
+ --component-card-text-body-default: var(--color-text-defined);
1320
1476
  }
1321
1477
 
1322
1478
  .tds-mode-dark,
@@ -1324,20 +1480,26 @@
1324
1480
  .scania.tds-mode-dark,
1325
1481
  .scania .tl-mode-dark,
1326
1482
  .scania.tl-mode-dark {
1327
- --component-card-background-primary: var(--color-background-layer-01);
1328
- --component-card-background-secondary: var(--color-background-layer-02);
1483
+ --component-card-background-primary-default: var(--color-background-layer-01);
1484
+ --component-card-background-secondary-default: var(--color-background-layer-02);
1329
1485
  --component-card-border-radius-default: var(--scania-unit-4);
1330
1486
  --component-card-space-padding-default: var(--scania-unit-16);
1487
+ --component-card-text-title-default: var(--color-text-strong);
1488
+ --component-card-text-subtitle-default: var(--color-text-soft);
1489
+ --component-card-text-body-default: var(--color-text-defined);
1331
1490
  }
1332
1491
 
1333
1492
  .traton .tds-mode-dark,
1334
1493
  .traton.tds-mode-dark,
1335
1494
  .traton .tl-mode-dark,
1336
1495
  .traton.tl-mode-dark {
1337
- --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
1338
- --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
1496
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
1497
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
1339
1498
  --component-card-border-radius-default: var(--traton-unit-0);
1340
1499
  --component-card-space-padding-default: var(--traton-unit-0);
1500
+ --component-card-text-title-default: var(--color-text-strong);
1501
+ --component-card-text-subtitle-default: var(--color-text-soft);
1502
+ --component-card-text-body-default: var(--color-text-defined);
1341
1503
  }
1342
1504
 
1343
1505
  .tl-card {
@@ -1448,9 +1610,10 @@
1448
1610
  padding: 0;
1449
1611
  }
1450
1612
  .tl-card--clickable:focus-visible {
1451
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1452
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
1613
+ outline: 2px solid var(--component--focus-ring-color-strong);
1614
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1453
1615
  outline-offset: 1px;
1616
+ z-index: 1;
1454
1617
  }
1455
1618
  .tl-card--clickable:active {
1456
1619
  box-shadow: var(--card-box-pressed);
@@ -1516,7 +1679,7 @@
1516
1679
 
1517
1680
  .tl-card__body {
1518
1681
  display: block;
1519
- word-wrap: break-word;
1682
+ overflow-wrap: break-word;
1520
1683
  }
1521
1684
  .tl-card--stretch .tl-card__body {
1522
1685
  display: flex;
@@ -1766,21 +1929,21 @@
1766
1929
  }
1767
1930
 
1768
1931
  .tl-chip {
1769
- --chip-text: var(--component-chip-text-default);
1932
+ --chip-text: var(--component-chip-text-standard-default);
1770
1933
  --chip-text-active: var(--component-chip-text-selected-default);
1771
- --chip-background: var(--component-chip-background-default);
1772
- --chip-background-hover: var(--component-chip-background-hover);
1773
- --chip-background-focus: var(--component-chip-background-hover);
1934
+ --chip-background: var(--component-chip-background-standard-default);
1935
+ --chip-background-hover: var(--component-chip-background-standard-hover);
1936
+ --chip-background-focus: var(--component-chip-background-standard-hover);
1774
1937
  --chip-background-active: var(--component-chip-background-selected-default);
1775
1938
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
1776
1939
  --chip-focused-on-selected: var(--component-chip-background-selected-default);
1777
- --chip-border: var(--component-chip-border-default);
1778
- --chip-border-hover: var(--component-chip-border-hover);
1940
+ --chip-border: var(--component-chip-border-standard-default);
1941
+ --chip-border-hover: var(--component-chip-border-standard-hover);
1779
1942
  --chip-border-selected: var(--component-chip-border-selected-default);
1780
1943
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
1781
1944
  --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
1782
- --chip-opacity-disabled: var(--component-chip-opacity-disabled);
1783
- --chip-icon-fill: var(--component-chip-text-default);
1945
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
1946
+ --chip-icon-fill: var(--component-chip-text-standard-default);
1784
1947
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
1785
1948
  }
1786
1949
 
@@ -1810,9 +1973,10 @@
1810
1973
  border-color: var(--chip-border-hover);
1811
1974
  }
1812
1975
  .tl-chip:focus-visible {
1813
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1814
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
1976
+ outline: 2px solid var(--component--focus-ring-color-strong);
1977
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1815
1978
  outline-offset: 1px;
1979
+ z-index: 1;
1816
1980
  background-color: var(--chip-background-focus);
1817
1981
  }
1818
1982
  .tl-chip--sm {
@@ -1835,9 +1999,10 @@
1835
1999
  border-color: var(--chip-border-selected-hover);
1836
2000
  }
1837
2001
  .tl-chip--selected:focus-visible {
1838
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1839
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
2002
+ outline: 2px solid var(--component--focus-ring-color-strong);
2003
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1840
2004
  outline-offset: 1px;
2005
+ z-index: 1;
1841
2006
  background-color: var(--chip-focused-on-selected);
1842
2007
  }
1843
2008
  .tl-chip:disabled {
@@ -2280,10 +2445,68 @@
2280
2445
  color: var(--color-foreground-text-disabled);
2281
2446
  }
2282
2447
 
2448
+ /**
2449
+ * Do not edit directly, this file was auto-generated.
2450
+ */
2451
+ :root,
2452
+ .tds-mode-light,
2453
+ .scania .tds-mode-light,
2454
+ .scania.tds-mode-light,
2455
+ .scania .tl-mode-light,
2456
+ .scania.tl-mode-light {
2457
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
2458
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
2459
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
2460
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
2461
+ --component-divider-border-strong-default: var(--color-border-strong);
2462
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
2463
+ }
2464
+
2465
+ .traton .tds-mode-light,
2466
+ .traton.tds-mode-light,
2467
+ .traton .tl-mode-light,
2468
+ .traton.tl-mode-light {
2469
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2470
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2471
+ --component-divider-border-soft-default: var(--color-border-soft);
2472
+ --component-divider-border-defined-default: var(--color-border-defined);
2473
+ --component-divider-border-strong-default: var(--color-border-strong);
2474
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2475
+ }
2476
+
2477
+ .tds-mode-dark,
2478
+ .scania .tds-mode-dark,
2479
+ .scania.tds-mode-dark,
2480
+ .scania .tl-mode-dark,
2481
+ .scania.tl-mode-dark {
2482
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2483
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2484
+ --component-divider-border-soft-default: var(--color-border-soft);
2485
+ --component-divider-border-defined-default: var(--color-border-defined);
2486
+ --component-divider-border-strong-default: var(--color-border-strong);
2487
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
2488
+ }
2489
+
2490
+ .traton .tds-mode-dark,
2491
+ .traton.tds-mode-dark,
2492
+ .traton .tl-mode-dark,
2493
+ .traton.tl-mode-dark {
2494
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2495
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2496
+ --component-divider-border-soft-default: var(--color-border-soft);
2497
+ --component-divider-border-defined-default: var(--color-border-defined);
2498
+ --component-divider-border-strong-default: var(--color-border-strong);
2499
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2500
+ }
2501
+
2283
2502
  .tl-divider {
2284
- --divider-background: var(--color-foreground-border-discrete);
2285
- --divider-background-strong: var(--color-foreground-border-strong);
2286
- --divider-background-discrete: var(--color-foreground-border-discrete);
2503
+ --divider-background: var(--component-divider-border-discrete-default);
2504
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
2505
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
2506
+ --divider-background-soft: var(--component-divider-border-soft-default);
2507
+ --divider-background-defined: var(--component-divider-border-defined-default);
2508
+ --divider-background-strong: var(--component-divider-border-strong-default);
2509
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
2287
2510
  }
2288
2511
 
2289
2512
  .tl-divider {
@@ -2591,8 +2814,10 @@ body {
2591
2814
  display: block;
2592
2815
  }
2593
2816
  .tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
2594
- outline: 2px solid var(--color-foreground-border-accent-focus);
2595
- outline-offset: 2px;
2817
+ outline: 2px solid var(--component--focus-ring-color-strong);
2818
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
2819
+ outline-offset: 1px;
2820
+ z-index: 1;
2596
2821
  }
2597
2822
 
2598
2823
  .tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
@@ -2899,12 +3124,12 @@ body {
2899
3124
  display: none;
2900
3125
  }
2901
3126
 
2902
- .tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
3127
+ .tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
2903
3128
  top: 50%;
2904
3129
  transform: translateY(-50%);
2905
3130
  }
2906
3131
 
2907
- .tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
3132
+ .tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
2908
3133
  top: calc(50% - 9.5px);
2909
3134
  }
2910
3135
 
@@ -3048,8 +3273,9 @@ body {
3048
3273
  background: var(--dropdown-option-background-hover);
3049
3274
  }
3050
3275
  .tl-dropdown__option:focus-visible {
3051
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
3052
- z-index: 2;
3276
+ outline: 2px solid var(--component--focus-ring-color-strong);
3277
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
3278
+ outline-offset: -2px;
3053
3279
  }
3054
3280
  .tl-dropdown__option--selected {
3055
3281
  background: var(--dropdown-option-background-selected);
@@ -3240,20 +3466,36 @@ body {
3240
3466
  .scania.tds-mode-light,
3241
3467
  .scania .tl-mode-light,
3242
3468
  .scania.tl-mode-light {
3243
- --component-footer-border: var(--scania-color-blue-700);
3244
- --component-footer-primary: var(--scania-color-blue-800);
3245
- --component-footer-color-text-link-default: var(--color-text-brand);
3246
- --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
3469
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
3470
+ --component-footer-background-main-default: var(--scania-color-blue-800);
3471
+ --component-footer-background-top-default: var(--color-background-layer-01);
3472
+ --component-footer-background-top-secondary: var(--color-background-base);
3473
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3474
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
3475
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
3476
+ --component-footer-text-link-default: var(--color-text-strong);
3477
+ --component-footer-text-title-default: var(--color-text-strong);
3478
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3479
+ --component-footer-icon-link-default: var(--color-icon-strong);
3480
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
3247
3481
  }
3248
3482
 
3249
3483
  .traton .tds-mode-light,
3250
3484
  .traton.tds-mode-light,
3251
3485
  .traton .tl-mode-light,
3252
3486
  .traton.tl-mode-light {
3253
- --component-footer-border: var(--traton-color-transparent-invisible-light);
3254
- --component-footer-primary: var(--traton-color-grey-50);
3255
- --component-footer-color-text-link-default: var(--color-text-strong);
3256
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
3487
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3488
+ --component-footer-background-main-default: var(--traton-color-grey-50);
3489
+ --component-footer-background-top-default: var(--color-background-layer-01);
3490
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3491
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3492
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
3493
+ --component-footer-text-copyright-default: var(--color-text-soft);
3494
+ --component-footer-text-link-default: var(--color-text-strong);
3495
+ --component-footer-text-title-default: var(--color-text-strong);
3496
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3497
+ --component-footer-icon-link-default: var(--color-icon-strong);
3498
+ --component-footer-icon-social-default: var(--color-icon-strong);
3257
3499
  }
3258
3500
 
3259
3501
  .tds-mode-dark,
@@ -3261,35 +3503,51 @@ body {
3261
3503
  .scania.tds-mode-dark,
3262
3504
  .scania .tl-mode-dark,
3263
3505
  .scania.tl-mode-dark {
3264
- --component-footer-border: var(--scania-color-blue-800);
3265
- --component-footer-primary: var(--scania-color-blue-900);
3266
- --component-footer-color-text-link-default: #d8dde5;
3267
- --component-footer-color-text-copyright-default: var(--color-text-soft);
3506
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
3507
+ --component-footer-background-main-default: var(--scania-color-blue-900);
3508
+ --component-footer-background-top-default: var(--color-background-layer-01);
3509
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
3510
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3511
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
3512
+ --component-footer-text-copyright-default: var(--color-text-soft);
3513
+ --component-footer-text-link-default: var(--color-text-strong);
3514
+ --component-footer-text-title-default: var(--color-text-strong);
3515
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3516
+ --component-footer-icon-link-default: var(--color-icon-strong);
3517
+ --component-footer-icon-social-default: var(--color-icon-strong);
3268
3518
  }
3269
3519
 
3270
3520
  .traton .tds-mode-dark,
3271
3521
  .traton.tds-mode-dark,
3272
3522
  .traton .tl-mode-dark,
3273
3523
  .traton.tl-mode-dark {
3274
- --component-footer-border: var(--traton-color-transparent-invisible-light);
3275
- --component-footer-primary: var(--traton-color-blue-1000);
3276
- --component-footer-color-text-link-default: var(--color-text-strong);
3277
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
3524
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3525
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
3526
+ --component-footer-background-top-default: var(--color-background-layer-01);
3527
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3528
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3529
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
3530
+ --component-footer-text-copyright-default: var(--color-text-soft);
3531
+ --component-footer-text-link-default: var(--color-text-strong);
3532
+ --component-footer-text-title-default: var(--color-text-strong);
3533
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3534
+ --component-footer-icon-link-default: var(--color-icon-strong);
3535
+ --component-footer-icon-social-default: var(--color-icon-strong);
3278
3536
  }
3279
3537
 
3280
3538
  .tl-footer {
3281
- --footer-top-background-primary: var(--color-background-layer-01);
3282
- --footer-top-background-secondary: var(--color-background-base);
3283
- --footer-top-background: var(--color-background-layer-01);
3284
- --footer-top-divider: var(--color-foreground-border-discrete);
3285
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
3286
- --footer-top-links: var(--component-footer-text-color-link-text);
3287
- --footer-top-links-background-hover: var(--color-background-surface-300);
3288
- --footer-top-button-active: var(--color-background-surface-300);
3289
- --footer-main-background: var(--component-footer-primary);
3290
- --footer-main-links: var(--color-foreground-text-accent-brand);
3291
- --footer-main-divider: var(--component-footer-border);
3292
- --footer-main-copyright: var(--component-footer-text-color-copyright);
3539
+ --footer-top-background-primary: var(--component-footer-background-top-default);
3540
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
3541
+ --footer-top-background: var(--component-footer-background-top-default);
3542
+ --footer-top-divider: var(--color-border-discrete);
3543
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
3544
+ --footer-top-links: var(--component-footer-text-link-default);
3545
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
3546
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
3547
+ --footer-main-background: var(--component-footer-background-main-default);
3548
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
3549
+ --footer-main-divider: var(--component-footer-border-divider-default);
3550
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
3293
3551
  }
3294
3552
  .tl-footer.tl-footer--primary {
3295
3553
  --footer-top-background: var(--footer-top-background-primary);
@@ -3298,6 +3556,26 @@ body {
3298
3556
  --footer-top-background: var(--footer-top-background-secondary);
3299
3557
  }
3300
3558
 
3559
+ .scania .tl-footer {
3560
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
3561
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
3562
+ }
3563
+
3564
+ .traton .tl-mode-dark .tl-footer {
3565
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3566
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
3567
+ }
3568
+
3569
+ .traton .tl-mode-light .tl-footer {
3570
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3571
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3572
+ }
3573
+
3574
+ .traton .tl-footer {
3575
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3576
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3577
+ }
3578
+
3301
3579
  .tl-footer__group {
3302
3580
  display: block;
3303
3581
  }
@@ -3339,8 +3617,8 @@ body {
3339
3617
  text-decoration: underline;
3340
3618
  }
3341
3619
  .tl-footer__link:focus-visible {
3342
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3343
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3620
+ outline: 2px solid var(--component--focus-ring-color-strong);
3621
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
3344
3622
  outline-offset: 1px;
3345
3623
  z-index: 1;
3346
3624
  }
@@ -3399,8 +3677,8 @@ body {
3399
3677
  background-color: var(--footer-top-button-active);
3400
3678
  }
3401
3679
  .tl-footer__top-title:focus-visible {
3402
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3403
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3680
+ outline: 2px solid var(--component--focus-ring-color-strong);
3681
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
3404
3682
  outline-offset: -2px;
3405
3683
  z-index: 1;
3406
3684
  }
@@ -3420,8 +3698,8 @@ body {
3420
3698
  text-decoration: none;
3421
3699
  }
3422
3700
  .tl-footer__main .tl-footer__link:focus-visible {
3423
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3424
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3701
+ outline: 2px solid var(--component--focus-ring-color-strong);
3702
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
3425
3703
  outline-offset: 1px;
3426
3704
  z-index: 1;
3427
3705
  }
@@ -3894,8 +4172,9 @@ body {
3894
4172
  background-color: var(--header-item-hover);
3895
4173
  }
3896
4174
  .tl-header__item-wrapper:focus-visible {
3897
- outline: none;
3898
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4175
+ outline: 2px solid var(--component--focus-ring-color-strong);
4176
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4177
+ outline-offset: -2px;
3899
4178
  }
3900
4179
  .tl-header__item-wrapper:active {
3901
4180
  padding-top: 2px;
@@ -3935,8 +4214,9 @@ body {
3935
4214
  background-color: var(--header-item-hover);
3936
4215
  }
3937
4216
  .tl-header__dropdown-wrapper:focus-visible {
3938
- outline: none;
3939
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4217
+ outline: 2px solid var(--component--focus-ring-color-strong);
4218
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4219
+ outline-offset: -2px;
3940
4220
  }
3941
4221
  .tl-header__dropdown-wrapper:active {
3942
4222
  background-color: var(--header-basic-element-background-selected);
@@ -3981,8 +4261,9 @@ body {
3981
4261
  background-color: var(--header-item-hover);
3982
4262
  }
3983
4263
  .tl-header__dropdown-wrapper-user:focus-visible {
3984
- outline: none;
3985
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4264
+ outline: 2px solid var(--component--focus-ring-color-strong);
4265
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4266
+ outline-offset: -2px;
3986
4267
  }
3987
4268
  .tl-header__dropdown-wrapper-user:active {
3988
4269
  background-color: var(--header-basic-element-background-selected);
@@ -4322,8 +4603,9 @@ body {
4322
4603
  }
4323
4604
  .tl-header__dropdown-menu-item a:focus-visible,
4324
4605
  .tl-header__dropdown-menu-item button:focus-visible {
4325
- outline: none;
4326
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4606
+ outline: 2px solid var(--component--focus-ring-color-strong);
4607
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4608
+ outline-offset: -2px;
4327
4609
  }
4328
4610
  .tl-header__dropdown-menu-item--selected a,
4329
4611
  .tl-header__dropdown-menu-item--selected button {
@@ -4360,8 +4642,10 @@ body {
4360
4642
  }
4361
4643
  .tl-header__launcher-menu-item a:focus-visible,
4362
4644
  .tl-header__launcher-menu-item button:focus-visible {
4363
- outline: none;
4364
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4645
+ outline: 2px solid var(--component--focus-ring-color-strong);
4646
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
4647
+ outline-offset: 1px;
4648
+ z-index: 1;
4365
4649
  }
4366
4650
 
4367
4651
  .tl-header__user-menu-image img {
@@ -5670,27 +5954,128 @@ body {
5670
5954
  height: 96px;
5671
5955
  }
5672
5956
 
5957
+ /**
5958
+ * Do not edit directly, this file was auto-generated.
5959
+ */
5960
+ :root,
5961
+ .tds-mode-light,
5962
+ .scania .tds-mode-light,
5963
+ .scania.tds-mode-light,
5964
+ .scania .tl-mode-light,
5965
+ .scania.tl-mode-light {
5966
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
5967
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
5968
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
5969
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
5970
+ --component-link-icon-standard-default: var(--color-text-strong);
5971
+ --component-link-icon-standard-hover: var(--color-text-defined);
5972
+ --component-link-icon-standard-active: var(--color-text-soft);
5973
+ --component-link-icon-standard-visited: var(--color-text-strong);
5974
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5975
+ --component-link-text-accent-default: var(--scania-color-blue-400);
5976
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
5977
+ --component-link-text-accent-active: var(--scania-color-blue-600);
5978
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
5979
+ --component-link-text-standard-default: var(--color-text-strong);
5980
+ --component-link-text-standard-hover: var(--color-text-defined);
5981
+ --component-link-text-standard-active: var(--color-text-soft);
5982
+ --component-link-text-standard-visited: var(--color-text-strong);
5983
+ }
5984
+
5985
+ .traton .tds-mode-light,
5986
+ .traton.tds-mode-light,
5987
+ .traton .tl-mode-light,
5988
+ .traton.tl-mode-light {
5989
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
5990
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
5991
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
5992
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
5993
+ --component-link-icon-standard-default: var(--color-text-strong);
5994
+ --component-link-icon-standard-hover: var(--color-text-defined);
5995
+ --component-link-icon-standard-active: var(--color-text-soft);
5996
+ --component-link-icon-standard-visited: var(--color-text-strong);
5997
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5998
+ --component-link-text-accent-default: var(--traton-color-blue-700);
5999
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
6000
+ --component-link-text-accent-active: var(--traton-color-blue-950);
6001
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
6002
+ --component-link-text-standard-default: var(--color-text-strong);
6003
+ --component-link-text-standard-hover: var(--color-text-defined);
6004
+ --component-link-text-standard-active: var(--color-text-soft);
6005
+ --component-link-text-standard-visited: var(--color-text-strong);
6006
+ }
6007
+
6008
+ .tds-mode-dark,
6009
+ .scania .tds-mode-dark,
6010
+ .scania.tds-mode-dark,
6011
+ .scania .tl-mode-dark,
6012
+ .scania.tl-mode-dark {
6013
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
6014
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
6015
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
6016
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
6017
+ --component-link-icon-standard-default: var(--color-text-strong);
6018
+ --component-link-icon-standard-hover: var(--color-text-defined);
6019
+ --component-link-icon-standard-active: var(--color-text-soft);
6020
+ --component-link-icon-standard-visited: var(--color-text-strong);
6021
+ --component-link-opacity-disabled: var(--scania-opacity-25);
6022
+ --component-link-text-accent-default: var(--scania-color-blue-300);
6023
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
6024
+ --component-link-text-accent-active: var(--scania-color-blue-100);
6025
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
6026
+ --component-link-text-standard-default: var(--color-text-strong);
6027
+ --component-link-text-standard-hover: var(--color-text-defined);
6028
+ --component-link-text-standard-active: var(--color-text-soft);
6029
+ --component-link-text-standard-visited: var(--color-text-strong);
6030
+ }
6031
+
6032
+ .traton .tds-mode-dark,
6033
+ .traton.tds-mode-dark,
6034
+ .traton .tl-mode-dark,
6035
+ .traton.tl-mode-dark {
6036
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
6037
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
6038
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
6039
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
6040
+ --component-link-icon-standard-default: var(--color-text-strong);
6041
+ --component-link-icon-standard-hover: var(--color-text-defined);
6042
+ --component-link-icon-standard-active: var(--color-text-soft);
6043
+ --component-link-icon-standard-visited: var(--color-text-strong);
6044
+ --component-link-opacity-disabled: var(--traton-opacity-25);
6045
+ --component-link-text-accent-default: var(--traton-color-blue-400);
6046
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
6047
+ --component-link-text-accent-active: var(--traton-color-blue-150);
6048
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
6049
+ --component-link-text-standard-default: var(--color-text-strong);
6050
+ --component-link-text-standard-hover: var(--color-text-defined);
6051
+ --component-link-text-standard-active: var(--color-text-soft);
6052
+ --component-link-text-standard-visited: var(--color-text-strong);
6053
+ }
6054
+
5673
6055
  /* Component variables */
5674
6056
  .tl-link {
5675
- --link: var(--color-foreground-text-accent-default);
5676
- --link-hover: var(--color-foreground-text-accent-default);
6057
+ --link: var(--component-link-text-accent-default);
6058
+ --link-hover: var(--component-link-text-accent-hover);
5677
6059
  --link-focus-outline-width: 2px;
5678
- --link-visited: var(--color-foreground-text-accent-visited);
5679
- --link-disabled: var(--color-foreground-text-disabled);
5680
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
6060
+ --link-visited: var(--component-link-text-accent-visited);
6061
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
6062
+ --link-focus-outline-color: var(--color-system-info-default);
5681
6063
  }
5682
6064
 
5683
6065
  .tl-banner .tl-link {
5684
- --link: var(--color-system-info-default);
6066
+ --link: var(--color-text-strong);
6067
+ --link-hover: var(--color-text-strong);
6068
+ --link-visited: var(--color-text-strong);
5685
6069
  }
5686
6070
 
5687
6071
  .tl-toast .tl-link {
5688
- --link: var(--color-system-info-default);
5689
- --link-hover: var(--color-foreground-text-accent-default);
6072
+ --link: var(--color-text-inverse-strong);
6073
+ --link-hover: var(--color-text-inverse-strong);
6074
+ --link-visited: var(--color-text-inverse-strong);
5690
6075
  }
5691
6076
 
5692
6077
  .traton .tl-link {
5693
- --link-focus-outline-width: 4px;
6078
+ --link-focus-outline-width: 2px;
5694
6079
  }
5695
6080
 
5696
6081
  .tl-link-text {
@@ -5715,8 +6100,10 @@ body {
5715
6100
  font: inherit;
5716
6101
  }
5717
6102
  .tl-link:focus-visible {
5718
- outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
6103
+ outline: 2px solid var(--component--focus-ring-color-strong);
6104
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
5719
6105
  outline-offset: 1px;
6106
+ z-index: 1;
5720
6107
  text-decoration: none;
5721
6108
  }
5722
6109
  .tl-link:active {
@@ -5731,15 +6118,10 @@ body {
5731
6118
  text-decoration-color: var(--link-visited);
5732
6119
  }
5733
6120
  .tl-link--disabled {
5734
- color: var(--link-disabled);
5735
- text-decoration-color: var(--link-disabled);
6121
+ opacity: var(--link-opacity-disabled);
5736
6122
  pointer-events: none;
5737
6123
  cursor: not-allowed;
5738
6124
  }
5739
- .tl-link--disabled:visited {
5740
- color: var(--link-disabled);
5741
- text-decoration-color: var(--link-disabled);
5742
- }
5743
6125
  .tl-link--underline {
5744
6126
  text-decoration: underline;
5745
6127
  }
@@ -5771,25 +6153,139 @@ body {
5771
6153
  color: var(--link);
5772
6154
  }
5773
6155
 
6156
+ /**
6157
+ * Do not edit directly, this file was auto-generated.
6158
+ */
6159
+ :root,
6160
+ .tds-mode-light,
6161
+ .scania .tds-mode-light,
6162
+ .scania.tds-mode-light,
6163
+ .scania .tl-mode-light,
6164
+ .scania.tl-mode-light {
6165
+ --component-message-background-primary: var(--color-background-layer-01);
6166
+ --component-message-background-secondary: var(--color-background-layer-02);
6167
+ --component-message-background-information-default: var(--color-background-layer-01);
6168
+ --component-message-background-success-default: var(--color-background-layer-01);
6169
+ --component-message-background-warning-default: var(--color-background-layer-01);
6170
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6171
+ --component-message-text-information-default: var(--color-text-strong);
6172
+ --component-message-text-success-default: var(--color-text-strong);
6173
+ --component-message-text-warning-default: var(--color-text-strong);
6174
+ --component-message-text-error-default: var(--color-text-strong);
6175
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6176
+ --component-message-border-information-default: var(--color-system-info-default);
6177
+ --component-message-border-success-default: var(--color-system-success-default);
6178
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6179
+ --component-message-border-error-default: var(--color-system-danger-default);
6180
+ --component-message-border-radius-default: var(--scania-unit-4);
6181
+ --component-message-border-width-default: var(--scania-unit-4);
6182
+ --component-message-icon-information-default: var(--color-system-info-default);
6183
+ --component-message-icon-success-default: var(--color-system-success-default);
6184
+ --component-message-icon-warning-default: var(--color-system-warning-default);
6185
+ --component-message-icon-error-default: var(--color-system-danger-default);
6186
+ }
6187
+
6188
+ .traton .tds-mode-light,
6189
+ .traton.tds-mode-light,
6190
+ .traton .tl-mode-light,
6191
+ .traton.tl-mode-light {
6192
+ --component-message-background-primary: var(--color-background-layer-01);
6193
+ --component-message-background-secondary: var(--color-background-layer-02);
6194
+ --component-message-background-information-default: var(--color-background-layer-01);
6195
+ --component-message-background-success-default: var(--color-background-layer-01);
6196
+ --component-message-background-warning-default: var(--color-background-layer-01);
6197
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6198
+ --component-message-text-information-default: var(--color-text-strong);
6199
+ --component-message-text-success-default: var(--color-text-strong);
6200
+ --component-message-text-warning-default: var(--color-text-strong);
6201
+ --component-message-text-error-default: var(--color-text-strong);
6202
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6203
+ --component-message-border-information-default: var(--color-system-info-subtle);
6204
+ --component-message-border-success-default: var(--color-system-success-subtle);
6205
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6206
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6207
+ --component-message-border-radius-default: var(--traton-unit-4);
6208
+ --component-message-border-width-default: var(--traton-unit-4);
6209
+ --component-message-icon-information-default: var(--color-system-info-default);
6210
+ --component-message-icon-success-default: var(--color-system-success-default);
6211
+ --component-message-icon-warning-default: var(--color-system-warning-defined);
6212
+ --component-message-icon-error-default: var(--color-system-danger-default);
6213
+ }
6214
+
6215
+ .tds-mode-dark,
6216
+ .scania .tds-mode-dark,
6217
+ .scania.tds-mode-dark,
6218
+ .scania .tl-mode-dark,
6219
+ .scania.tl-mode-dark {
6220
+ --component-message-background-primary: var(--color-background-layer-01);
6221
+ --component-message-background-secondary: var(--color-background-layer-02);
6222
+ --component-message-background-information-default: var(--color-background-layer-01);
6223
+ --component-message-background-success-default: var(--color-background-layer-01);
6224
+ --component-message-background-warning-default: var(--color-background-layer-01);
6225
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6226
+ --component-message-text-information-default: var(--color-text-strong);
6227
+ --component-message-text-success-default: var(--color-text-strong);
6228
+ --component-message-text-warning-default: var(--color-text-strong);
6229
+ --component-message-text-error-default: var(--color-text-strong);
6230
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6231
+ --component-message-border-information-default: var(--color-system-info-default);
6232
+ --component-message-border-success-default: var(--color-system-success-subtle);
6233
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6234
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6235
+ --component-message-border-radius-default: var(--scania-unit-4);
6236
+ --component-message-border-width-default: var(--scania-unit-4);
6237
+ --component-message-icon-information-default: var(--color-system-info-default);
6238
+ --component-message-icon-success-default: var(--color-system-success-subtle);
6239
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
6240
+ --component-message-icon-error-default: var(--color-system-danger-default);
6241
+ }
6242
+
6243
+ .traton .tds-mode-dark,
6244
+ .traton.tds-mode-dark,
6245
+ .traton .tl-mode-dark,
6246
+ .traton.tl-mode-dark {
6247
+ --component-message-background-primary: var(--color-background-layer-01);
6248
+ --component-message-background-secondary: var(--color-background-layer-02);
6249
+ --component-message-background-information-default: var(--color-background-layer-01);
6250
+ --component-message-background-success-default: var(--color-background-layer-01);
6251
+ --component-message-background-warning-default: var(--color-background-layer-01);
6252
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6253
+ --component-message-text-information-default: var(--color-text-strong);
6254
+ --component-message-text-success-default: var(--color-text-strong);
6255
+ --component-message-text-warning-default: var(--color-text-strong);
6256
+ --component-message-text-error-default: var(--color-text-strong);
6257
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6258
+ --component-message-border-information-default: var(--color-system-info-subtle);
6259
+ --component-message-border-success-default: var(--color-system-success-subtle);
6260
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6261
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6262
+ --component-message-border-radius-default: var(--traton-unit-4);
6263
+ --component-message-border-width-default: var(--traton-unit-4);
6264
+ --component-message-icon-information-default: var(--color-system-info-default);
6265
+ --component-message-icon-success-default: var(--color-system-success-default);
6266
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
6267
+ --component-message-icon-error-default: var(--color-system-danger-default);
6268
+ }
6269
+
5774
6270
  .tl-message {
5775
- --message-main-background: var(--color-background-layer-01);
5776
- --message-mode-primary-background: var(--color-background-layer-01);
5777
- --message-mode-secondary-background: var(--color-background-layer-02);
5778
- --message-main-text-color: var(--color-foreground-text-strong);
6271
+ --message-main-background: var(--component-message-background-primary);
6272
+ --message-mode-primary-background: var(--component-message-background-primary);
6273
+ --message-mode-secondary-background: var(--component-message-background-secondary);
6274
+ --message-main-text-color: var(--color-text-strong);
5779
6275
  /* Info */
5780
- --message-info-border-color: var(--color-system-info-subtle);
5781
- --message-info-icon-color: var(--color-system-info-default);
6276
+ --message-info-border-color: var(--component-message-border-information-default);
6277
+ --message-info-icon-color: var(--component-message-icon-information-default);
5782
6278
  /* Success */
5783
- --message-success-border-color: var(--color-system-success-subtle);
5784
- --message-success-icon-color: var(--color-system-success-default);
6279
+ --message-success-border-color: var(--component-message-border-success-default);
6280
+ --message-success-icon-color: var(--component-message-icon-success-default);
5785
6281
  /* Error */
5786
- --message-error-background: var(--color-system-danger-discrete);
5787
- --message-error-border-color: var(--color-system-danger-subtle);
5788
- --message-error-icon-color: var(--color-system-danger-default);
5789
- --message-error-header-text-color: var(--color-system-danger-default);
6282
+ --message-error-background: var(--component-message-background-error-default);
6283
+ --message-error-border-color: var(--component-message-border-error-default);
6284
+ --message-error-icon-color: var(--component-message-icon-error-default);
6285
+ --message-error-header-text-color: var(--component-message-text-error-highlight-default);
5790
6286
  /* Warning */
5791
- --message-warning-border-color: var(--color-system-warning-subtle);
5792
- --message-warning-icon-color: var(--color-system-warning-default);
6287
+ --message-warning-border-color: var(--component-message-border-warning-default);
6288
+ --message-warning-icon-color: var(--component-message-icon-warning-default);
5793
6289
  }
5794
6290
 
5795
6291
  .tl-message--primary {
@@ -6189,8 +6685,8 @@ body {
6189
6685
  cursor: pointer;
6190
6686
  }
6191
6687
  .tl-modal__close:focus {
6192
- outline: 2px solid var(--tds-focus-outline-color);
6193
- box-shadow: 0 0 0 1px var(--tds-white);
6688
+ outline: 2px solid var(--component--focus-ring-color-strong);
6689
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
6194
6690
  outline-offset: 1px;
6195
6691
  z-index: 1;
6196
6692
  }
@@ -6608,7 +7104,7 @@ body {
6608
7104
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6609
7105
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6610
7106
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6611
- --component-side-menu-radius-default: var(--scania-unit-0);
7107
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6612
7108
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6613
7109
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6614
7110
  --component-side-menu-text-items-font-size: 14;
@@ -6649,7 +7145,7 @@ body {
6649
7145
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6650
7146
  --traton-unit-12
6651
7147
  );
6652
- --component-side-menu-radius-default: var(--traton-unit-8);
7148
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6653
7149
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6654
7150
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6655
7151
  --component-side-menu-text-items-font-size: 14;
@@ -6686,7 +7182,7 @@ body {
6686
7182
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6687
7183
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6688
7184
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6689
- --component-side-menu-radius-default: var(--scania-unit-0);
7185
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6690
7186
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6691
7187
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6692
7188
  --component-side-menu-text-items-font-size: 14;
@@ -6727,7 +7223,7 @@ body {
6727
7223
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6728
7224
  --traton-unit-12
6729
7225
  );
6730
- --component-side-menu-radius-default: var(--traton-unit-8);
7226
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6731
7227
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6732
7228
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6733
7229
  --component-side-menu-text-items-font-size: 14;
@@ -6835,8 +7331,10 @@ body {
6835
7331
  letter-spacing: var(--side-menu-text-item-letter-spacing);
6836
7332
  }
6837
7333
  .tl-side-menu__item:focus-visible {
6838
- outline: 2px solid var(--color-foreground-border-accent-focus);
7334
+ outline: 2px solid var(--component--focus-ring-color-strong);
7335
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6839
7336
  outline-offset: -2px;
7337
+ z-index: 1;
6840
7338
  }
6841
7339
  .tl-side-menu__item:hover {
6842
7340
  background-color: var(--side-menu-item-state-hover);
@@ -6949,8 +7447,10 @@ body {
6949
7447
  background-color: var(--side-menu-dropdown-list-item-custom-background-active);
6950
7448
  }
6951
7449
  .tl-side-menu__dropdown-item:focus {
6952
- outline: 2px solid var(--color-foreground-border-accent-focus);
7450
+ outline: 2px solid var(--component--focus-ring-color-strong);
7451
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6953
7452
  outline-offset: -2px;
7453
+ z-index: 1;
6954
7454
  }
6955
7455
  .tl-side-menu__dropdown-item--selected {
6956
7456
  background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
@@ -8313,8 +8813,10 @@ body {
8313
8813
  cursor: pointer;
8314
8814
  }
8315
8815
  .tl-table__row--clickable:focus-visible {
8316
- outline: 2px solid var(--table-header-button-focus);
8816
+ outline: 2px solid var(--component--focus-ring-color-strong);
8817
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
8317
8818
  outline-offset: -2px;
8819
+ z-index: 1;
8318
8820
  }
8319
8821
  .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
8320
8822
  background-color: var(--table-zebra-mode);
@@ -8339,7 +8841,7 @@ body {
8339
8841
  transition: background-color 200ms ease;
8340
8842
  min-width: 192px;
8341
8843
  }
8342
- .tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
8844
+ .tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
8343
8845
  background-color: var(--table-header-hover);
8344
8846
  }
8345
8847
  .tl-table__header-cell:first-of-type {
@@ -8413,8 +8915,10 @@ body {
8413
8915
  text-align: left;
8414
8916
  }
8415
8917
  .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
8416
- outline: 2px solid var(--table-header-button-focus);
8918
+ outline: 2px solid var(--component--focus-ring-color-strong);
8919
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
8417
8920
  outline-offset: -2px;
8921
+ z-index: 1;
8418
8922
  }
8419
8923
  .tl-table--compact .tl-table__header-button {
8420
8924
  padding: 0;
@@ -8498,7 +9002,7 @@ body {
8498
9002
  .tl-table--no-min-width .tl-table__body-cell {
8499
9003
  min-width: unset;
8500
9004
  }
8501
- .tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
9005
+ .tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
8502
9006
  border-right: 1px solid var(--table-divider);
8503
9007
  }
8504
9008
  .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -8724,9 +9228,9 @@ body {
8724
9228
  padding: 0;
8725
9229
  }
8726
9230
  .tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
8727
- outline: 2px solid var(--table-header-button-focus);
8728
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
8729
- outline-offset: -1px;
9231
+ outline: 2px solid var(--component--focus-ring-color-strong);
9232
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
9233
+ outline-offset: -2px;
8730
9234
  z-index: 1;
8731
9235
  }
8732
9236
 
@@ -8901,11 +9405,12 @@ body {
8901
9405
  border-left-color: var(--folder-tab-divider);
8902
9406
  }
8903
9407
  .tl-folder-tabs__tab:focus-visible {
8904
- outline: 2px solid currentcolor;
8905
- outline-offset: -4px;
8906
- box-shadow: none;
9408
+ outline: 2px solid var(--component--focus-ring-color-strong);
9409
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
9410
+ outline-offset: -2px;
9411
+ z-index: 1;
8907
9412
  }
8908
- .tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
9413
+ .tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
8909
9414
  background-color: var(--folder-tab-surface-hover);
8910
9415
  border-top-color: var(--folder-tab-surface-hover);
8911
9416
  color: var(--folder-tab-text);
@@ -9050,12 +9555,14 @@ body {
9050
9555
  outline: none;
9051
9556
  }
9052
9557
  .tl-inline-tabs__tab:focus-visible::before {
9558
+ outline: 2px solid var(--component--focus-ring-color-strong);
9559
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
9560
+ outline-offset: 1px;
9561
+ z-index: 1;
9053
9562
  content: "";
9054
9563
  position: absolute;
9055
9564
  inset: 18px 0;
9056
9565
  border-radius: 2px;
9057
- box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
9058
- z-index: 2;
9059
9566
  pointer-events: none;
9060
9567
  }
9061
9568
  .tl-inline-tabs__tab::after {
@@ -9098,6 +9605,7 @@ body {
9098
9605
  content: none;
9099
9606
  }
9100
9607
  .tl-inline-tabs__tab--disabled:focus-visible::before {
9608
+ outline: none;
9101
9609
  box-shadow: none;
9102
9610
  }
9103
9611
 
@@ -9221,12 +9729,14 @@ body {
9221
9729
  outline: none;
9222
9730
  }
9223
9731
  .tl-navigation-tabs__tab:focus-visible::before {
9732
+ outline: 2px solid var(--component--focus-ring-color-strong);
9733
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
9734
+ outline-offset: 1px;
9735
+ z-index: 1;
9224
9736
  content: "";
9225
9737
  position: absolute;
9226
9738
  inset: 18px 0;
9227
9739
  border-radius: 2px;
9228
- box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
9229
- z-index: 2;
9230
9740
  pointer-events: none;
9231
9741
  }
9232
9742
  .tl-navigation-tabs__tab::after {
@@ -9269,6 +9779,7 @@ body {
9269
9779
  content: none;
9270
9780
  }
9271
9781
  .tl-navigation-tabs__tab--disabled:focus-visible::before {
9782
+ outline: none;
9272
9783
  box-shadow: none;
9273
9784
  }
9274
9785
 
@@ -9329,6 +9840,126 @@ body {
9329
9840
  fill: var(--navigation-tabs-scroll-button-color);
9330
9841
  }
9331
9842
 
9843
+ /**
9844
+ * Do not edit directly, this file was auto-generated.
9845
+ */
9846
+ :root,
9847
+ .tds-mode-light,
9848
+ .scania .tds-mode-light,
9849
+ .scania.tds-mode-light,
9850
+ .scania .tl-mode-light,
9851
+ .scania.tl-mode-light {
9852
+ --component-input-field-border-focus-top: var(--scania-unit-0);
9853
+ --component-input-field-border-focus-right: var(--scania-unit-0);
9854
+ --component-input-field-border-focus-bottom: var(--scania-unit-2);
9855
+ --component-input-field-border-focus-left: var(--scania-unit-0);
9856
+ --component-input-field-border-radius-top-left: var(--scania-unit-4);
9857
+ --component-input-field-border-radius-top-right: var(--scania-unit-4);
9858
+ --component-input-field-border-radius-bottom-left: var(--scania-unit-0);
9859
+ --component-input-field-border-radius-bottom-right: var(--scania-unit-0);
9860
+ --component-input-field-border-width-top: var(--scania-unit-0);
9861
+ --component-input-field-border-width-right: var(--scania-unit-0);
9862
+ --component-input-field-border-width-bottom: var(--scania-unit-1);
9863
+ --component-input-field-border-width-left: var(--scania-unit-0);
9864
+ }
9865
+
9866
+ .traton .tds-mode-light,
9867
+ .traton.tds-mode-light,
9868
+ .traton .tl-mode-light,
9869
+ .traton.tl-mode-light {
9870
+ --component-input-field-border-focus-top: var(--traton-unit-2);
9871
+ --component-input-field-border-focus-right: var(--traton-unit-2);
9872
+ --component-input-field-border-focus-bottom: var(--traton-unit-2);
9873
+ --component-input-field-border-focus-left: var(--traton-unit-2);
9874
+ --component-input-field-border-radius-top-left: var(--traton-unit-4);
9875
+ --component-input-field-border-radius-top-right: var(--traton-unit-4);
9876
+ --component-input-field-border-radius-bottom-left: var(--traton-unit-4);
9877
+ --component-input-field-border-radius-bottom-right: var(--traton-unit-4);
9878
+ --component-input-field-border-width-top: var(--traton-unit-1);
9879
+ --component-input-field-border-width-right: var(--traton-unit-1);
9880
+ --component-input-field-border-width-bottom: var(--traton-unit-1);
9881
+ --component-input-field-border-width-left: var(--traton-unit-1);
9882
+ }
9883
+
9884
+ .tds-mode-dark,
9885
+ .scania .tds-mode-dark,
9886
+ .scania.tds-mode-dark,
9887
+ .scania .tl-mode-dark,
9888
+ .scania.tl-mode-dark {
9889
+ --component-input-field-border-focus-top: var(--scania-unit-0);
9890
+ --component-input-field-border-focus-right: var(--scania-unit-0);
9891
+ --component-input-field-border-focus-bottom: var(--scania-unit-2);
9892
+ --component-input-field-border-focus-left: var(--scania-unit-0);
9893
+ --component-input-field-border-radius-top-left: var(--scania-unit-4);
9894
+ --component-input-field-border-radius-top-right: var(--scania-unit-4);
9895
+ --component-input-field-border-radius-bottom-left: var(--scania-unit-0);
9896
+ --component-input-field-border-radius-bottom-right: var(--scania-unit-0);
9897
+ --component-input-field-border-width-top: var(--scania-unit-0);
9898
+ --component-input-field-border-width-right: var(--scania-unit-0);
9899
+ --component-input-field-border-width-bottom: var(--scania-unit-1);
9900
+ --component-input-field-border-width-left: var(--scania-unit-0);
9901
+ }
9902
+
9903
+ .traton .tds-mode-dark,
9904
+ .traton.tds-mode-dark,
9905
+ .traton .tl-mode-dark,
9906
+ .traton.tl-mode-dark {
9907
+ --component-input-field-border-focus-top: var(--traton-unit-2);
9908
+ --component-input-field-border-focus-right: var(--traton-unit-2);
9909
+ --component-input-field-border-focus-bottom: var(--traton-unit-2);
9910
+ --component-input-field-border-focus-left: var(--traton-unit-2);
9911
+ --component-input-field-border-radius-top-left: var(--traton-unit-4);
9912
+ --component-input-field-border-radius-top-right: var(--traton-unit-4);
9913
+ --component-input-field-border-radius-bottom-left: var(--traton-unit-4);
9914
+ --component-input-field-border-radius-bottom-right: var(--traton-unit-4);
9915
+ --component-input-field-border-width-top: var(--traton-unit-1);
9916
+ --component-input-field-border-width-right: var(--traton-unit-1);
9917
+ --component-input-field-border-width-bottom: var(--traton-unit-1);
9918
+ --component-input-field-border-width-left: var(--traton-unit-1);
9919
+ }
9920
+
9921
+ /**
9922
+ * Do not edit directly, this file was auto-generated.
9923
+ */
9924
+ :root,
9925
+ .tds-mode-light,
9926
+ .scania .tds-mode-light,
9927
+ .scania.tds-mode-light,
9928
+ .scania .tl-mode-light,
9929
+ .scania.tl-mode-light {
9930
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
9931
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
9932
+ }
9933
+
9934
+ .traton .tds-mode-light,
9935
+ .traton.tds-mode-light,
9936
+ .traton .tl-mode-light,
9937
+ .traton.tl-mode-light {
9938
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
9939
+ --component-text-field-focus-ring-radius-secondary: var(
9940
+ --component--focus-ring-radius-extra-large
9941
+ );
9942
+ }
9943
+
9944
+ .tds-mode-dark,
9945
+ .scania .tds-mode-dark,
9946
+ .scania.tds-mode-dark,
9947
+ .scania .tl-mode-dark,
9948
+ .scania.tl-mode-dark {
9949
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
9950
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
9951
+ }
9952
+
9953
+ .traton .tds-mode-dark,
9954
+ .traton.tds-mode-dark,
9955
+ .traton .tl-mode-dark,
9956
+ .traton.tl-mode-dark {
9957
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
9958
+ --component-text-field-focus-ring-radius-secondary: var(
9959
+ --component--focus-ring-radius-extra-large
9960
+ );
9961
+ }
9962
+
9332
9963
  .tl-text-field {
9333
9964
  --text-field-background: var(--color-background-layer-01);
9334
9965
  --text-field-text: var(--color-foreground-text-strong);
@@ -9339,7 +9970,6 @@ body {
9339
9970
  --text-field-label-inside-left: 16px;
9340
9971
  --text-field-affix-width-icon: 35px;
9341
9972
  --text-field-affix-width-text: 8px;
9342
- --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
9343
9973
  --text-field-helper: var(--color-foreground-text-defined);
9344
9974
  --text-field-error: var(--color-system-danger-default);
9345
9975
  --text-field-affix-error: var(--color-foreground-text-defined);
@@ -9349,6 +9979,15 @@ body {
9349
9979
  --text-field-label-disabled: var(--color-foreground-text-disabled);
9350
9980
  --text-field-affix-disabled: var(--color-foreground-text-disabled);
9351
9981
  --text-field-textcounter: var(--color-foreground-text-defined);
9982
+ --text-field-border-radius: calc(var(--component-input-field-border-radius-top-left) * 1px)
9983
+ calc(var(--component-input-field-border-radius-top-right) * 1px)
9984
+ calc(var(--component-input-field-border-radius-bottom-right) * 1px)
9985
+ calc(var(--component-input-field-border-radius-bottom-left) * 1px);
9986
+ --text-field-border-color: var(--color-foreground-border-soft);
9987
+ --text-field-border-color-hover: var(--color-foreground-border-strong);
9988
+ --text-field-border-color-success: var(--color-foreground-border-strong);
9989
+ --text-field-border-color-error: var(--color-system-danger-default);
9990
+ --text-field-border-color-readonly: var(--color-foreground-border-strong);
9352
9991
  }
9353
9992
  .tl-text-field--primary {
9354
9993
  --text-field-background: var(--color-background-layer-01);
@@ -9359,39 +9998,6 @@ body {
9359
9998
  --text-field-background-disabled: var(--color-background-layer-02);
9360
9999
  }
9361
10000
 
9362
- .tl-text-field,
9363
- .scania .tl-text-field {
9364
- --text-field-border-radius: 4px 4px 0 0;
9365
- --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
9366
- --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
9367
- --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
9368
- --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
9369
- --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
9370
- --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
9371
- --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
9372
- --text-field-bar-focus: var(--color-foreground-border-accent-focus);
9373
- --text-field-bar-error: var(--color-system-danger-default);
9374
- --text-field-focus-outline: none;
9375
- --text-field-focus-outline-error: none;
9376
- --text-field-focus-outline-offset: 0;
9377
- }
9378
-
9379
- .traton .tl-text-field {
9380
- --text-field-border-radius: 4px 4px 4px 4px;
9381
- --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
9382
- --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
9383
- --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
9384
- --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
9385
- --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
9386
- --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
9387
- --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
9388
- --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
9389
- --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
9390
- --text-field-focus-outline-offset: 0;
9391
- --text-field-bar-focus: transparent;
9392
- --text-field-bar-error: transparent;
9393
- }
9394
-
9395
10001
  .tl-text-field {
9396
10002
  display: block;
9397
10003
  position: relative;
@@ -9406,12 +10012,12 @@ body {
9406
10012
  .tl-text-field:has(.tl-text-field__input:disabled) {
9407
10013
  cursor: not-allowed;
9408
10014
  }
10015
+ .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
10016
+ opacity: 0.25;
10017
+ }
9409
10018
  .tl-text-field .tl-icon {
9410
10019
  background-color: var(--text-field-affix);
9411
10020
  }
9412
- :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
9413
- background-color: var(--text-field-affix-disabled);
9414
- }
9415
10021
 
9416
10022
  .tl-text-field__input-wrapper {
9417
10023
  position: relative;
@@ -9440,8 +10046,11 @@ body {
9440
10046
  width: 100%;
9441
10047
  box-sizing: border-box;
9442
10048
  margin: 0;
9443
- border: none;
10049
+ border-style: solid;
10050
+ border-color: var(--text-field-border-color);
10051
+ border-width: calc(var(--component-input-field-border-width-top) * 1px) calc(var(--component-input-field-border-width-right) * 1px) calc(var(--component-input-field-border-width-bottom) * 1px) calc(var(--component-input-field-border-width-left) * 1px);
9444
10052
  outline: none;
10053
+ transition: border-color 200ms ease;
9445
10054
  }
9446
10055
  .tl-text-field__input::placeholder {
9447
10056
  color: var(--text-field-placeholder);
@@ -9466,42 +10075,46 @@ body {
9466
10075
  color: var(--text-field-text);
9467
10076
  flex: 1;
9468
10077
  order: 2;
9469
- box-shadow: inset var(--text-field-box-shadow);
9470
- transition: box-shadow 0.2s;
9471
10078
  }
9472
10079
  .tl-text-field__input:focus {
9473
- box-shadow: inset var(--text-field-box-shadow-focus);
10080
+ outline: 2px solid var(--component--focus-ring-color-strong);
10081
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10082
+ outline-offset: 1px;
10083
+ z-index: 1;
9474
10084
  }
9475
10085
  .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
9476
- box-shadow: inset var(--text-field-box-shadow-hover);
10086
+ border-color: var(--text-field-border-color-hover);
9477
10087
  }
9478
10088
  .tl-text-field--error .tl-text-field__input {
9479
- box-shadow: inset var(--text-field-box-shadow-error);
10089
+ border-color: var(--text-field-border-color-error);
9480
10090
  }
9481
10091
  .tl-text-field--error .tl-text-field__input:focus {
9482
- box-shadow: inset var(--text-field-box-shadow-error-focus);
10092
+ outline: 2px solid var(--component--focus-ring-color-strong);
10093
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10094
+ outline-offset: 1px;
10095
+ z-index: 1;
9483
10096
  }
9484
10097
  .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
9485
- box-shadow: inset var(--text-field-box-shadow-error-hover);
10098
+ border-color: var(--text-field-border-color-error);
9486
10099
  }
9487
10100
  .tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
9488
- box-shadow: inset var(--text-field-box-shadow-success);
10101
+ border-color: var(--text-field-border-color-success);
9489
10102
  }
9490
10103
  .tl-text-field__input:disabled {
9491
- box-shadow: none;
9492
- background-color: var(--text-field-background-disabled);
9493
- color: var(--text-field-text-disabled);
9494
10104
  cursor: not-allowed;
9495
10105
  pointer-events: none;
9496
10106
  }
9497
10107
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
9498
- box-shadow: inset var(--text-field-box-shadow);
10108
+ border-color: var(--text-field-border-color-readonly);
9499
10109
  }
9500
10110
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
9501
- box-shadow: inset var(--text-field-box-shadow-focus);
10111
+ outline: 2px solid var(--component--focus-ring-color-strong);
10112
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10113
+ outline-offset: 1px;
10114
+ z-index: 1;
9502
10115
  }
9503
10116
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
9504
- box-shadow: inset var(--text-field-box-shadow-hover);
10117
+ border-color: var(--text-field-border-color-hover);
9505
10118
  }
9506
10119
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
9507
10120
  user-select: auto;
@@ -9780,6 +10393,60 @@ body {
9780
10393
  left: calc(16px + var(--text-field-affix-width-text) + 8px);
9781
10394
  }
9782
10395
 
10396
+ /**
10397
+ * Do not edit directly, this file was auto-generated.
10398
+ */
10399
+ :root,
10400
+ .tds-mode-light,
10401
+ .scania .tds-mode-light,
10402
+ .scania.tds-mode-light,
10403
+ .scania .tl-mode-light,
10404
+ .scania.tl-mode-light {
10405
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10406
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10407
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10408
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10409
+ --component-textarea-size-resize-height: var(--scania-unit-12);
10410
+ --component-textarea-size-resize-width: var(--scania-unit-12);
10411
+ }
10412
+
10413
+ .traton .tds-mode-light,
10414
+ .traton.tds-mode-light,
10415
+ .traton .tl-mode-light,
10416
+ .traton.tl-mode-light {
10417
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10418
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
10419
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10420
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10421
+ --component-textarea-size-resize-height: var(--traton-unit-12);
10422
+ --component-textarea-size-resize-width: var(--traton-unit-12);
10423
+ }
10424
+
10425
+ .tds-mode-dark,
10426
+ .scania .tds-mode-dark,
10427
+ .scania.tds-mode-dark,
10428
+ .scania .tl-mode-dark,
10429
+ .scania.tl-mode-dark {
10430
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10431
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10432
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10433
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10434
+ --component-textarea-size-resize-height: var(--scania-unit-12);
10435
+ --component-textarea-size-resize-width: var(--scania-unit-12);
10436
+ }
10437
+
10438
+ .traton .tds-mode-dark,
10439
+ .traton.tds-mode-dark,
10440
+ .traton .tl-mode-dark,
10441
+ .traton.tl-mode-dark {
10442
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10443
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
10444
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10445
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10446
+ --component-textarea-size-resize-height: var(--traton-unit-12);
10447
+ --component-textarea-size-resize-width: var(--traton-unit-12);
10448
+ }
10449
+
9783
10450
  .tl-textarea {
9784
10451
  --textarea-background-primary: var(--color-background-layer-01);
9785
10452
  --textarea-background-secondary: var(--color-background-layer-02);
@@ -9796,7 +10463,16 @@ body {
9796
10463
  --textarea-helper: var(--color-foreground-text-defined);
9797
10464
  --textarea-error: var(--color-system-danger-default);
9798
10465
  --textarea-textcounter: var(--color-foreground-text-defined);
9799
- --textarea-resize-icon: var(--color-foreground-text-subtle);
10466
+ --textarea-resize-icon: var(--component-textarea-icon-resize-default);
10467
+ --textarea-border-radius: calc(var(--component-input-field-border-radius-top-left) * 1px)
10468
+ calc(var(--component-input-field-border-radius-top-right) * 1px)
10469
+ calc(var(--component-input-field-border-radius-bottom-right) * 1px)
10470
+ calc(var(--component-input-field-border-radius-bottom-left) * 1px);
10471
+ --textarea-border-color: var(--color-foreground-border-soft);
10472
+ --textarea-border-color-hover: var(--color-foreground-border-strong);
10473
+ --textarea-border-color-success: var(--color-foreground-border-strong);
10474
+ --textarea-border-color-error: var(--color-system-danger-default);
10475
+ --textarea-border-color-readonly: var(--color-foreground-border-strong);
9800
10476
  }
9801
10477
  .tl-textarea--primary {
9802
10478
  --textarea-background: var(--textarea-background-primary);
@@ -9807,29 +10483,6 @@ body {
9807
10483
  --textarea-background-disabled: var(--textarea-background-secondary);
9808
10484
  }
9809
10485
 
9810
- .tl-textarea,
9811
- .scania .tl-textarea {
9812
- --textarea-border-radius: 4px 4px 0 0;
9813
- --textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
9814
- --textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
9815
- --textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
9816
- --textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
9817
- --textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
9818
- --textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
9819
- --textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
9820
- }
9821
-
9822
- .traton .tl-textarea {
9823
- --textarea-border-radius: 4px;
9824
- --textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
9825
- --textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
9826
- --textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
9827
- --textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
9828
- --textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
9829
- --textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
9830
- --textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
9831
- }
9832
-
9833
10486
  .tl-textarea {
9834
10487
  display: block;
9835
10488
  position: relative;
@@ -9845,6 +10498,12 @@ body {
9845
10498
  .tl-textarea:has(.tl-textarea__input:disabled) {
9846
10499
  cursor: not-allowed;
9847
10500
  }
10501
+ .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__input, .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__label {
10502
+ opacity: 0.25;
10503
+ }
10504
+ .tl-textarea:has(.tl-textarea__input:disabled)::after {
10505
+ opacity: 0.25;
10506
+ }
9848
10507
  .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
9849
10508
  content: "";
9850
10509
  position: absolute;
@@ -9880,8 +10539,8 @@ body {
9880
10539
  position: absolute;
9881
10540
  bottom: 3px;
9882
10541
  right: 3px;
9883
- width: 12px;
9884
- height: 12px;
10542
+ width: calc(var(--component-textarea-size-resize-width) * 1px);
10543
+ height: calc(var(--component-textarea-size-resize-height) * 1px);
9885
10544
  background-color: var(--textarea-resize-icon);
9886
10545
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
9887
10546
  mask-size: contain;
@@ -9906,9 +10565,6 @@ body {
9906
10565
  .traton .tl-textarea:has(.tl-textarea__bottom)::after {
9907
10566
  bottom: 27px;
9908
10567
  }
9909
- .tl-textarea :has(.tl-textarea__input:disabled)::after {
9910
- background-color: var(--color-foreground-text-disabled);
9911
- }
9912
10568
 
9913
10569
  .tl-textarea__input {
9914
10570
  all: unset;
@@ -9918,8 +10574,11 @@ body {
9918
10574
  width: 100%;
9919
10575
  box-sizing: border-box;
9920
10576
  margin: 0;
9921
- border: none;
10577
+ border-style: solid;
10578
+ border-color: var(--textarea-border-color);
10579
+ border-width: calc(var(--component-input-field-border-width-top) * 1px) calc(var(--component-input-field-border-width-right) * 1px) calc(var(--component-input-field-border-width-bottom) * 1px) calc(var(--component-input-field-border-width-left) * 1px);
9922
10580
  outline: none;
10581
+ transition: border-color 200ms ease;
9923
10582
  }
9924
10583
  .tl-textarea__input::placeholder {
9925
10584
  color: var(--textarea-placeholder);
@@ -9946,48 +10605,53 @@ body {
9946
10605
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
9947
10606
  color: var(--textarea-text);
9948
10607
  resize: vertical;
9949
- box-shadow: inset var(--textarea-box-shadow);
9950
- transition: box-shadow 0.2s;
9951
10608
  z-index: 0;
9952
10609
  }
9953
10610
  .tl-textarea__input::placeholder {
9954
10611
  transform: translateY(1px);
9955
10612
  }
9956
10613
  .tl-textarea__input:focus {
9957
- box-shadow: inset var(--textarea-box-shadow-focus);
10614
+ outline: 2px solid var(--component--focus-ring-color-strong);
10615
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10616
+ outline-offset: 1px;
10617
+ z-index: 1;
9958
10618
  }
9959
10619
  .tl-textarea__input::-webkit-resizer {
9960
10620
  display: none;
9961
10621
  }
9962
10622
  .tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
9963
- box-shadow: inset var(--textarea-box-shadow-hover);
10623
+ border-color: var(--textarea-border-color-hover);
9964
10624
  }
9965
10625
  .tl-textarea--error .tl-textarea__input {
9966
- box-shadow: inset var(--textarea-box-shadow-error);
10626
+ border-color: var(--textarea-border-color-error);
9967
10627
  }
9968
10628
  .tl-textarea--error .tl-textarea__input:focus {
9969
- box-shadow: inset var(--textarea-box-shadow-error-focus);
10629
+ outline: 2px solid var(--component--focus-ring-color-strong);
10630
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10631
+ outline-offset: 1px;
10632
+ z-index: 1;
9970
10633
  }
9971
10634
  .tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
9972
- box-shadow: inset var(--textarea-box-shadow-error-hover);
10635
+ border-color: var(--textarea-border-color-error);
9973
10636
  }
9974
10637
  .tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
9975
- box-shadow: inset var(--textarea-box-shadow-success);
10638
+ border-color: var(--textarea-border-color-success);
9976
10639
  }
9977
10640
  .tl-textarea__input:disabled {
9978
- box-shadow: none;
9979
- color: var(--textarea-text-disabled);
9980
10641
  cursor: not-allowed;
9981
10642
  pointer-events: none;
9982
10643
  }
9983
10644
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
9984
- box-shadow: inset var(--textarea-box-shadow);
10645
+ border-color: var(--textarea-border-color-readonly);
9985
10646
  }
9986
10647
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
9987
- box-shadow: inset var(--textarea-box-shadow-focus);
10648
+ outline: 2px solid var(--component--focus-ring-color-strong);
10649
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10650
+ outline-offset: 1px;
10651
+ z-index: 1;
9988
10652
  }
9989
10653
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
9990
- box-shadow: inset var(--textarea-box-shadow-hover);
10654
+ border-color: var(--textarea-border-color-hover);
9991
10655
  }
9992
10656
  .tl-textarea--label-inside .tl-textarea__input {
9993
10657
  padding-top: 26px;
@@ -10137,15 +10801,117 @@ body {
10137
10801
  transform: none;
10138
10802
  }
10139
10803
 
10804
+ /**
10805
+ * Do not edit directly, this file was auto-generated.
10806
+ */
10807
+ :root,
10808
+ .tds-mode-light,
10809
+ .scania .tds-mode-light,
10810
+ .scania.tds-mode-light,
10811
+ .scania .tl-mode-light,
10812
+ .scania.tl-mode-light {
10813
+ --component-toast-background-information-default: var(--color-background-inverse-base);
10814
+ --component-toast-background-success-default: var(--color-background-inverse-base);
10815
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
10816
+ --component-toast-background-error-default: var(--color-background-inverse-base);
10817
+ --component-toast-border-radius-default: var(--scania-unit-4);
10818
+ --component-toast-border-width-default: var(--scania-unit-4);
10819
+ --component-toast-border-information-default: var(--scania-color-blue-300);
10820
+ --component-toast-border-success-default: var(--scania-color-green-300);
10821
+ --component-toast-border-warning-default: var(--scania-color-yellow-300);
10822
+ --component-toast-border-error-default: var(--scania-color-red-400);
10823
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10824
+ --component-toast-text-body-default: var(--color-text-inverse-strong);
10825
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10826
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
10827
+ --component-toast-icon-information-default: var(--scania-color-blue-300);
10828
+ --component-toast-icon-success-default: var(--scania-color-green-300);
10829
+ --component-toast-icon-warning-default: var(--scania-color-yellow-300);
10830
+ --component-toast-icon-error-default: var(--scania-color-red-400);
10831
+ }
10832
+
10833
+ .traton .tds-mode-light,
10834
+ .traton.tds-mode-light,
10835
+ .traton .tl-mode-light,
10836
+ .traton.tl-mode-light {
10837
+ --component-toast-background-information-default: var(--color-background-inverse-base);
10838
+ --component-toast-background-success-default: var(--color-background-inverse-base);
10839
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
10840
+ --component-toast-background-error-default: var(--color-background-inverse-base);
10841
+ --component-toast-border-radius-default: var(--traton-unit-4);
10842
+ --component-toast-border-width-default: var(--traton-unit-4);
10843
+ --component-toast-border-information-default: var(--color-system-info-default);
10844
+ --component-toast-border-success-default: var(--color-system-success-default);
10845
+ --component-toast-border-warning-default: var(--color-system-warning-default);
10846
+ --component-toast-border-error-default: var(--color-system-danger-default);
10847
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10848
+ --component-toast-text-body-default: var(--color-text-inverse-soft);
10849
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10850
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
10851
+ --component-toast-icon-information-default: var(--color-system-info-default);
10852
+ --component-toast-icon-success-default: var(--color-system-success-default);
10853
+ --component-toast-icon-warning-default: var(--color-system-warning-default);
10854
+ --component-toast-icon-error-default: var(--color-system-danger-default);
10855
+ }
10856
+
10857
+ .tds-mode-dark,
10858
+ .scania .tds-mode-dark,
10859
+ .scania.tds-mode-dark,
10860
+ .scania .tl-mode-dark,
10861
+ .scania.tl-mode-dark {
10862
+ --component-toast-background-information-default: var(--color-background-inverse-layer-01);
10863
+ --component-toast-background-success-default: var(--color-background-inverse-layer-01);
10864
+ --component-toast-background-warning-default: var(--color-background-inverse-layer-01);
10865
+ --component-toast-background-error-default: var(--color-background-inverse-layer-01);
10866
+ --component-toast-border-radius-default: var(--scania-unit-4);
10867
+ --component-toast-border-width-default: var(--scania-unit-4);
10868
+ --component-toast-border-information-default: var(--scania-color-blue-400);
10869
+ --component-toast-border-success-default: var(--scania-color-green-300);
10870
+ --component-toast-border-warning-default: var(--scania-color-yellow-400);
10871
+ --component-toast-border-error-default: var(--scania-color-red-400);
10872
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10873
+ --component-toast-text-body-default: var(--color-text-inverse-strong);
10874
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10875
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
10876
+ --component-toast-icon-information-default: var(--scania-color-blue-400);
10877
+ --component-toast-icon-success-default: var(--scania-color-green-300);
10878
+ --component-toast-icon-warning-default: var(--scania-color-yellow-500);
10879
+ --component-toast-icon-error-default: var(--scania-color-red-400);
10880
+ }
10881
+
10882
+ .traton .tds-mode-dark,
10883
+ .traton.tds-mode-dark,
10884
+ .traton .tl-mode-dark,
10885
+ .traton.tl-mode-dark {
10886
+ --component-toast-background-information-default: var(--color-background-inverse-base);
10887
+ --component-toast-background-success-default: var(--color-background-inverse-base);
10888
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
10889
+ --component-toast-background-error-default: var(--color-background-inverse-base);
10890
+ --component-toast-border-radius-default: var(--traton-unit-4);
10891
+ --component-toast-border-width-default: var(--traton-unit-4);
10892
+ --component-toast-border-information-default: var(--color-system-info-default);
10893
+ --component-toast-border-success-default: var(--color-system-success-default);
10894
+ --component-toast-border-warning-default: var(--color-system-warning-default);
10895
+ --component-toast-border-error-default: var(--color-system-danger-default);
10896
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10897
+ --component-toast-text-body-default: var(--color-text-inverse-soft);
10898
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10899
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
10900
+ --component-toast-icon-information-default: var(--color-system-info-default);
10901
+ --component-toast-icon-success-default: var(--color-system-success-default);
10902
+ --component-toast-icon-warning-default: var(--color-system-warning-default);
10903
+ --component-toast-icon-error-default: var(--color-system-danger-default);
10904
+ }
10905
+
10140
10906
  .tl-toast {
10141
- --toast-background: var(--color-background-inverse-base);
10142
- --toast-headline: var(--color-foreground-text-inverse-strong);
10143
- --toast-subheadline: var(--color-foreground-text-inverse-soft);
10144
- --toast-dismiss: var(--color-foreground-text-inverse-strong);
10145
- --toast-icon-error: var(--color-system-danger-default);
10146
- --toast-icon-success: var(--color-system-success-default);
10147
- --toast-icon-warning: var(--color-system-warning-default);
10148
- --toast-icon-info: var(--color-system-info-default);
10907
+ --toast-background: var(--component-toast-background-information-default);
10908
+ --toast-headline: var(--component-toast-text-title-default);
10909
+ --toast-subheadline: var(--component-toast-text-body-default);
10910
+ --toast-dismiss: var(--component-toast-icon-dismiss-default);
10911
+ --toast-icon-info: var(--component-toast-icon-information-default);
10912
+ --toast-icon-success: var(--component-toast-icon-success-default);
10913
+ --toast-icon-warning: var(--component-toast-icon-warning-default);
10914
+ --toast-icon-error: var(--component-toast-icon-error-default);
10149
10915
  }
10150
10916
 
10151
10917
  .tl-toast {
@@ -10232,8 +10998,8 @@ body {
10232
10998
  cursor: pointer;
10233
10999
  }
10234
11000
  .tl-toast__close:focus-visible {
10235
- outline: 2px solid var(--tds-focus-outline-color);
10236
- box-shadow: 0 0 0 1px var(--tds-white);
11001
+ outline: 2px solid var(--component--focus-ring-color-strong);
11002
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10237
11003
  outline-offset: 1px;
10238
11004
  z-index: 1;
10239
11005
  }
@@ -10248,6 +11014,13 @@ body {
10248
11014
  color: var(--toast-icon-warning);
10249
11015
  }
10250
11016
 
11017
+ .tl-toast .tl-link {
11018
+ text-decoration: underline;
11019
+ }
11020
+ .tl-toast .tl-link:hover {
11021
+ text-decoration: none;
11022
+ }
11023
+
10251
11024
  .tl-toggle {
10252
11025
  --toggle-switch: var(--color-brand-neutral-white);
10253
11026
  --toggle-text: var(--color-foreground-text-strong);
@@ -10298,8 +11071,8 @@ body {
10298
11071
  height: 16px;
10299
11072
  }
10300
11073
  .tl-toggle__input:focus-visible {
10301
- outline: 2px solid var(--tds-focus-outline-color);
10302
- box-shadow: 0 0 0 1px var(--tds-white);
11074
+ outline: 2px solid var(--component--focus-ring-color-strong);
11075
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10303
11076
  outline-offset: 1px;
10304
11077
  z-index: 1;
10305
11078
  border-radius: 16px;
@@ -10394,8 +11167,10 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10394
11167
  }
10395
11168
 
10396
11169
  .tl-tooltip {
10397
- --tooltip-text: var(--color-foreground-text-inverse-strong);
10398
- --tooltip-background: var(--color-background-inverse-layer-03);
11170
+ --tooltip-color: var(--component-tooltip-text-default);
11171
+ --tooltip-background: var(--component-tooltip-background-default);
11172
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
11173
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
10399
11174
  }
10400
11175
 
10401
11176
  .scania {
@@ -10416,19 +11191,19 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10416
11191
  position: fixed;
10417
11192
  z-index: var(--tds-z-index-tooltip, 1000);
10418
11193
  padding: 8px;
10419
- max-width: 204px;
11194
+ max-width: 208px;
10420
11195
  width: max-content;
10421
11196
  white-space: normal;
10422
- word-wrap: break-word;
10423
- background-color: var(--tooltip-background, #333);
10424
- color: var(--tooltip-text, #fff);
11197
+ overflow-wrap: break-word;
11198
+ background-color: var(--tooltip-background);
11199
+ color: var(--tooltip-color);
10425
11200
  box-sizing: border-box;
10426
11201
  line-height: var(--tl-tooltip-line-height);
10427
11202
  opacity: 0;
10428
11203
  visibility: hidden;
10429
11204
  pointer-events: none;
10430
11205
  transition: opacity 0.2s ease, visibility 0.2s ease;
10431
- border-radius: 4px;
11206
+ border-radius: var(--tooltip-border-radius);
10432
11207
  }
10433
11208
  .tl-tooltip--visible {
10434
11209
  opacity: 1;
@@ -10436,26 +11211,26 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10436
11211
  pointer-events: auto;
10437
11212
  }
10438
11213
  .tl-tooltip--top-start {
10439
- border-radius: 4px 4px 4px 0;
11214
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10440
11215
  }
10441
11216
  .tl-tooltip--top-end {
10442
- border-radius: 4px 4px 0;
11217
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10443
11218
  }
10444
11219
  .tl-tooltip--bottom-start {
10445
- border-radius: 0 4px 4px;
11220
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10446
11221
  }
10447
11222
  .tl-tooltip--bottom-end {
10448
- border-radius: 4px 0 4px 4px;
11223
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10449
11224
  }
10450
11225
  .tl-tooltip--left-start {
10451
- border-radius: 4px 0 4px 4px;
11226
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10452
11227
  }
10453
11228
  .tl-tooltip--left-end {
10454
- border-radius: 4px 4px 0;
11229
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10455
11230
  }
10456
11231
  .tl-tooltip--right-start {
10457
- border-radius: 0 4px 4px;
11232
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10458
11233
  }
10459
11234
  .tl-tooltip--right-end {
10460
- border-radius: 4px 4px 4px 0;
11235
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10461
11236
  }