@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) 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 +530 -244
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-banner.css +2 -2
  25. package/dist/tl-breadcrumbs.css +51 -5
  26. package/dist/tl-button.css +172 -149
  27. package/dist/tl-card.css +20 -8
  28. package/dist/tl-chip.css +8 -8
  29. package/dist/tl-divider.css +61 -3
  30. package/dist/tl-footer.css +83 -31
  31. package/dist/tl-link.css +106 -13
  32. package/dist/tl-modal.css +2 -2
  33. package/dist/tl-side-menu.css +4 -4
  34. package/dist/tl-slider.css +172 -149
  35. package/dist/tl-toast.css +2 -2
  36. package/dist/tl-toggle.css +2 -2
  37. package/dist/tl-tooltip.css +17 -15
  38. package/dist/traton-variables.css +35 -23
  39. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -403,8 +403,8 @@
403
403
  width: 20px;
404
404
  }
405
405
  .tl-banner__close:focus-visible {
406
- outline: 2px solid var(--tds-focus-outline-color);
407
- box-shadow: 0 0 0 1px var(--tds-white);
406
+ outline: 2px solid var(--component--focus-ring-color-strong);
407
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
408
408
  outline-offset: 1px;
409
409
  z-index: 1;
410
410
  }
@@ -531,15 +531,61 @@
531
531
  text-transform: var(--detail-03-text-transform);
532
532
  }
533
533
 
534
+ /**
535
+ * Do not edit directly, this file was auto-generated.
536
+ */
537
+ :root,
538
+ .tds-mode-light,
539
+ .scania .tds-mode-light,
540
+ .scania.tds-mode-light,
541
+ .scania .tl-mode-light,
542
+ .scania.tl-mode-light {
543
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
544
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
545
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
546
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
547
+ }
548
+
549
+ .traton .tds-mode-light,
550
+ .traton.tds-mode-light,
551
+ .traton .tl-mode-light,
552
+ .traton.tl-mode-light {
553
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
554
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
555
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
556
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
557
+ }
558
+
559
+ .tds-mode-dark,
560
+ .scania .tds-mode-dark,
561
+ .scania.tds-mode-dark,
562
+ .scania .tl-mode-dark,
563
+ .scania.tl-mode-dark {
564
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
565
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
566
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
567
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
568
+ }
569
+
570
+ .traton .tds-mode-dark,
571
+ .traton.tds-mode-dark,
572
+ .traton .tl-mode-dark,
573
+ .traton.tl-mode-dark {
574
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
575
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
576
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
577
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
578
+ }
579
+
534
580
  .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);
581
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
582
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
583
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
584
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
539
585
  --breadcrumb-separator-margin: 4px;
540
586
  --breadcrumb-separator-width: 4px;
541
587
  --breadcrumb-separator-height: 8px;
542
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
588
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
543
589
  --breadcrumb-focus-outline-width: 2px;
544
590
  }
545
591
 
@@ -616,14 +662,14 @@
616
662
  .scania.tl-mode-light {
617
663
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
618
664
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
619
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
665
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
620
666
  --component-button-background-standard-secondary-default: var(--color-background-none);
621
667
  --component-button-background-standard-secondary-hover: var(--color-background-none);
622
668
  --component-button-background-standard-secondary-active: var(--color-background-none);
623
669
  --component-button-background-standard-tertiary-default: var(--color-background-none);
624
670
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
625
671
  --component-button-background-standard-tertiary-active: var(--color-background-none);
626
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
672
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
627
673
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
628
674
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
629
675
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -645,59 +691,68 @@
645
691
  --component-button-border-danger-primary-default: var(--color-border-none);
646
692
  --component-button-border-danger-primary-hover: var(--color-border-none);
647
693
  --component-button-border-danger-primary-active: var(--color-border-none);
648
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
694
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
649
695
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
650
696
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
651
697
  --component-button-border-danger-tertiary-default: var(--color-border-none);
652
698
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
653
699
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
654
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
700
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
701
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
655
702
  --component-button-icon-standard-primary-hover: var(
656
- --component-button-text-standard-primary-default
703
+ --component-button-icon-standard-primary-default
657
704
  );
658
705
  --component-button-icon-standard-primary-active: var(
659
- --component-button-text-standard-primary-default
706
+ --component-button-icon-standard-primary-default
707
+ );
708
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
709
+ --component-button-icon-standard-secondary-hover: var(
710
+ --component-button-icon-standard-secondary-default
660
711
  );
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);
712
+ --component-button-icon-standard-secondary-active: var(
713
+ --component-button-icon-standard-secondary-default
714
+ );
715
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
716
+ --component-button-icon-standard-tertiary-hover: var(
717
+ --component-button-icon-standard-tertiary-default
718
+ );
719
+ --component-button-icon-standard-tertiary-active: var(
720
+ --component-button-icon-standard-tertiary-default
721
+ );
722
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
723
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
669
724
  --component-button-icon-danger-primary-active: var(
670
- --component-button-text-danger-primary-default
725
+ --component-button-icon-danger-primary-default
671
726
  );
672
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
727
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
673
728
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
674
729
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
675
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
730
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
676
731
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
677
732
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
678
733
  --component-button-opacity-disabled: var(--scania-opacity-25);
679
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
734
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
680
735
  --component-button-text-standard-primary-hover: var(
681
736
  --component-button-text-standard-primary-default
682
737
  );
683
738
  --component-button-text-standard-primary-active: var(
684
739
  --component-button-text-standard-primary-default
685
740
  );
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);
741
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
742
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
743
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
744
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
745
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
746
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
747
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
693
748
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
694
749
  --component-button-text-danger-primary-active: var(
695
750
  --component-button-text-danger-primary-default
696
751
  );
697
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
752
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
698
753
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
699
754
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
700
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
755
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
701
756
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
702
757
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
703
758
  }
@@ -706,9 +761,9 @@
706
761
  .traton.tds-mode-light,
707
762
  .traton .tl-mode-light,
708
763
  .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;
764
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
765
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
766
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
712
767
  --component-button-background-standard-secondary-default: var(--color-background-none);
713
768
  --component-button-background-standard-secondary-hover: var(--color-background-none);
714
769
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -743,23 +798,32 @@
743
798
  --component-button-border-danger-tertiary-default: var(--color-border-none);
744
799
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
745
800
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
746
- --component-button-icon-standard-primary-default: #fff;
801
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
802
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
747
803
  --component-button-icon-standard-primary-hover: var(
748
804
  --component-button-text-standard-primary-default
749
805
  );
750
806
  --component-button-icon-standard-primary-active: var(
751
807
  --component-button-text-standard-primary-default
752
808
  );
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);
809
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
810
+ --component-button-icon-standard-secondary-hover: var(
811
+ --component-button-icon-standard-secondary-default
812
+ );
813
+ --component-button-icon-standard-secondary-active: var(
814
+ --component-button-icon-standard-secondary-default
815
+ );
816
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
817
+ --component-button-icon-standard-tertiary-hover: var(
818
+ --component-button-icon-standard-tertiary-default
819
+ );
820
+ --component-button-icon-standard-tertiary-active: var(
821
+ --component-button-icon-standard-tertiary-default
822
+ );
823
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
824
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
761
825
  --component-button-icon-danger-primary-active: var(
762
- --component-button-text-danger-primary-default
826
+ --component-button-icon-danger-primary-default
763
827
  );
764
828
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
765
829
  --component-button-icon-danger-secondary-hover: var(
@@ -776,7 +840,7 @@
776
840
  --component-button-text-danger-tertiary-default
777
841
  );
778
842
  --component-button-opacity-disabled: var(--traton-opacity-25);
779
- --component-button-text-standard-primary-default: #fff;
843
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
780
844
  --component-button-text-standard-primary-hover: var(
781
845
  --component-button-text-standard-primary-default
782
846
  );
@@ -789,7 +853,7 @@
789
853
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
790
854
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
791
855
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
792
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
856
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
793
857
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
794
858
  --component-button-text-danger-primary-active: var(
795
859
  --component-button-text-danger-primary-default
@@ -824,7 +888,7 @@
824
888
  --component-button-background-standard-tertiary-default: var(--color-background-none);
825
889
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
826
890
  --component-button-background-standard-tertiary-active: var(--color-background-none);
827
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
891
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
828
892
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
829
893
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
830
894
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -846,59 +910,68 @@
846
910
  --component-button-border-danger-primary-default: var(--color-border-none);
847
911
  --component-button-border-danger-primary-hover: var(--color-border-none);
848
912
  --component-button-border-danger-primary-active: var(--color-border-none);
849
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
913
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
850
914
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
851
915
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
852
916
  --component-button-border-danger-tertiary-default: var(--color-border-none);
853
917
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
854
918
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
855
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
919
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
920
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
856
921
  --component-button-icon-standard-primary-hover: var(
857
- --component-button-text-standard-primary-default
922
+ --component-button-icon-standard-primary-default
858
923
  );
859
924
  --component-button-icon-standard-primary-active: var(
860
- --component-button-text-standard-primary-default
925
+ --component-button-icon-standard-primary-default
926
+ );
927
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
928
+ --component-button-icon-standard-secondary-hover: var(
929
+ --component-button-icon-standard-secondary-default
930
+ );
931
+ --component-button-icon-standard-secondary-active: var(
932
+ --component-button-icon-standard-secondary-default
933
+ );
934
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
935
+ --component-button-icon-standard-tertiary-hover: var(
936
+ --component-button-icon-standard-tertiary-default
937
+ );
938
+ --component-button-icon-standard-tertiary-active: var(
939
+ --component-button-icon-standard-tertiary-default
861
940
  );
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);
941
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
869
942
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
870
943
  --component-button-icon-danger-primary-active: var(
871
944
  --component-button-icon-danger-primary-default
872
945
  );
873
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
946
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
874
947
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
875
948
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
876
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
949
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
877
950
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
878
951
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
879
952
  --component-button-opacity-disabled: var(--scania-opacity-25);
880
- --component-button-text-standard-primary-default: var(--color-text-brand);
953
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
881
954
  --component-button-text-standard-primary-hover: var(
882
955
  --component-button-text-standard-primary-default
883
956
  );
884
957
  --component-button-text-standard-primary-active: var(
885
958
  --component-button-text-standard-primary-default
886
959
  );
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);
960
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
961
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
962
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
963
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
964
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
965
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
966
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
894
967
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
895
968
  --component-button-text-danger-primary-active: var(
896
969
  --component-button-text-danger-primary-default
897
970
  );
898
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
971
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
899
972
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
900
973
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
901
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
974
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
902
975
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
903
976
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
904
977
  }
@@ -907,9 +980,9 @@
907
980
  .traton.tds-mode-dark,
908
981
  .traton .tl-mode-dark,
909
982
  .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;
983
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
984
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
985
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
913
986
  --component-button-background-standard-secondary-default: var(--color-background-none);
914
987
  --component-button-background-standard-secondary-hover: var(--color-background-none);
915
988
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -944,20 +1017,29 @@
944
1017
  --component-button-border-danger-tertiary-default: var(--color-border-none);
945
1018
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
946
1019
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
947
- --component-button-icon-standard-primary-default: #000;
1020
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
1021
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
948
1022
  --component-button-icon-standard-primary-hover: var(
949
1023
  --component-button-text-standard-primary-default
950
1024
  );
951
1025
  --component-button-icon-standard-primary-active: var(
952
1026
  --component-button-text-standard-primary-default
953
1027
  );
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);
1028
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
1029
+ --component-button-icon-standard-secondary-hover: var(
1030
+ --component-button-icon-standard-secondary-default
1031
+ );
1032
+ --component-button-icon-standard-secondary-active: var(
1033
+ --component-button-icon-standard-secondary-default
1034
+ );
1035
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
1036
+ --component-button-icon-standard-tertiary-hover: var(
1037
+ --component-button-icon-standard-tertiary-default
1038
+ );
1039
+ --component-button-icon-standard-tertiary-active: var(
1040
+ --component-button-icon-standard-tertiary-default
1041
+ );
1042
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
961
1043
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
962
1044
  --component-button-icon-danger-primary-active: var(
963
1045
  --component-button-icon-danger-primary-default
@@ -977,7 +1059,7 @@
977
1059
  --component-button-text-danger-tertiary-default
978
1060
  );
979
1061
  --component-button-opacity-disabled: var(--traton-opacity-25);
980
- --component-button-text-standard-primary-default: #000;
1062
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
981
1063
  --component-button-text-standard-primary-hover: var(
982
1064
  --component-button-text-standard-primary-default
983
1065
  );
@@ -990,7 +1072,7 @@
990
1072
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
991
1073
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
992
1074
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
993
- --component-button-text-danger-primary-default: var(--color-text-strong);
1075
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
994
1076
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
995
1077
  --component-button-text-danger-primary-active: var(
996
1078
  --component-button-text-danger-primary-default
@@ -1012,69 +1094,54 @@
1012
1094
  }
1013
1095
 
1014
1096
  .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);
1097
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
1019
1098
  --button-sm-only-icon-padding: 11px;
1020
1099
  --button-md-only-icon-padding: 13px;
1021
1100
  --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);
1101
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
1102
+ --button-primary-background: var(--component-button-background-standard-primary-default);
1103
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
1104
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
1105
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
1106
+ --button-primary-color: var(--component-button-text-standard-primary-default);
1107
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
1108
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
1109
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
1033
1110
  --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);
1111
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
1112
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
1113
+ --button-secondary-background-focus: var(
1114
+ --component-button-background-standard-secondary-default
1115
+ );
1116
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
1117
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
1118
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
1119
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
1120
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
1121
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
1045
1122
  --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);
1123
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
1124
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
1125
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
1126
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
1127
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
1128
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
1129
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
1130
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
1131
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
1056
1132
  --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);
1133
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
1134
+ --button-danger-background: var(--component-button-background-danger-primary-default);
1135
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
1136
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
1137
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
1138
+ --button-danger-color: var(--component-button-text-danger-primary-default);
1139
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
1140
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
1141
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
1142
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
1069
1143
  --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);
1144
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
1078
1145
  }
1079
1146
 
1080
1147
  .scania .tl-button {
@@ -1122,15 +1189,15 @@
1122
1189
  color: var(--button-primary-color);
1123
1190
  border-color: var(--button-primary-border-color);
1124
1191
  }
1192
+ .tl-button--primary .tl-icon {
1193
+ color: var(--button-primary-icon-color);
1194
+ }
1125
1195
  .tl-button--primary:hover:not(:disabled) {
1126
1196
  background-color: var(--button-primary-background-hover);
1127
1197
  }
1128
1198
  .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
1199
  cursor: not-allowed;
1133
- opacity: 0.6;
1200
+ opacity: var(--button-opacity-disabled);
1134
1201
  }
1135
1202
  .tl-button--primary:focus-visible:not(:disabled) {
1136
1203
  background: var(--button-primary-background-focus);
@@ -1151,15 +1218,15 @@
1151
1218
  color: var(--button-secondary-color);
1152
1219
  border-color: var(--button-secondary-border-color);
1153
1220
  }
1221
+ .tl-button--secondary .tl-icon {
1222
+ color: var(--button-secondary-icon-color);
1223
+ }
1154
1224
  .tl-button--secondary:hover:not(:disabled) {
1155
1225
  border-color: var(--button-secondary-border-color-hover);
1156
1226
  }
1157
1227
  .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
1228
  cursor: not-allowed;
1162
- opacity: 0.6;
1229
+ opacity: var(--button-opacity-disabled);
1163
1230
  }
1164
1231
  .tl-button--secondary:focus-visible:not(:disabled) {
1165
1232
  background: var(--button-secondary-background-focus);
@@ -1178,13 +1245,15 @@
1178
1245
  color: var(--button-ghost-color);
1179
1246
  border-color: var(--button-ghost-border-color);
1180
1247
  }
1248
+ .tl-button--ghost .tl-icon {
1249
+ color: var(--button-ghost-icon-color);
1250
+ }
1181
1251
  .tl-button--ghost:hover:not(:disabled) {
1182
1252
  border-color: var(--button-ghost-border-color-hover);
1183
1253
  }
1184
1254
  .tl-button--ghost:disabled {
1185
- color: var(--button-ghost-color-disabled);
1186
1255
  cursor: not-allowed;
1187
- opacity: 0.6;
1256
+ opacity: var(--button-opacity-disabled);
1188
1257
  }
1189
1258
  .tl-button--ghost:focus-visible:not(:disabled) {
1190
1259
  background: var(--button-ghost-background-focus);
@@ -1203,15 +1272,15 @@
1203
1272
  color: var(--button-danger-color);
1204
1273
  border-color: var(--button-danger-border-color);
1205
1274
  }
1275
+ .tl-button--danger .tl-icon {
1276
+ color: var(--button-danger-icon-color);
1277
+ }
1206
1278
  .tl-button--danger:hover:not(:disabled) {
1207
1279
  background-color: var(--button-danger-background-hover);
1208
1280
  }
1209
1281
  .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
1282
  cursor: not-allowed;
1214
- opacity: 0.6;
1283
+ opacity: var(--button-opacity-disabled);
1215
1284
  }
1216
1285
  .tl-button--danger:focus-visible:not(:disabled) {
1217
1286
  background: var(--button-danger-background-focus);
@@ -1303,20 +1372,26 @@
1303
1372
  .scania.tds-mode-light,
1304
1373
  .scania .tl-mode-light,
1305
1374
  .scania.tl-mode-light {
1306
- --component-card-background-primary: #fff;
1307
- --component-card-background-secondary: #fff;
1375
+ --component-card-background-primary-default: var(--scania-color-base-white);
1376
+ --component-card-background-secondary-default: var(--scania-color-base-white);
1308
1377
  --component-card-border-radius-default: var(--scania-unit-4);
1309
1378
  --component-card-space-padding-default: var(--scania-unit-16);
1379
+ --component-card-text-title-default: var(--color-text-strong);
1380
+ --component-card-text-subtitle-default: var(--color-text-soft);
1381
+ --component-card-text-body-default: var(--color-text-defined);
1310
1382
  }
1311
1383
 
1312
1384
  .traton .tds-mode-light,
1313
1385
  .traton.tds-mode-light,
1314
1386
  .traton .tl-mode-light,
1315
1387
  .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);
1388
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
1389
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
1318
1390
  --component-card-border-radius-default: var(--traton-unit-0);
1319
1391
  --component-card-space-padding-default: var(--traton-unit-0);
1392
+ --component-card-text-title-default: var(--color-text-strong);
1393
+ --component-card-text-subtitle-default: var(--color-text-soft);
1394
+ --component-card-text-body-default: var(--color-text-defined);
1320
1395
  }
1321
1396
 
1322
1397
  .tds-mode-dark,
@@ -1324,20 +1399,26 @@
1324
1399
  .scania.tds-mode-dark,
1325
1400
  .scania .tl-mode-dark,
1326
1401
  .scania.tl-mode-dark {
1327
- --component-card-background-primary: var(--color-background-layer-01);
1328
- --component-card-background-secondary: var(--color-background-layer-02);
1402
+ --component-card-background-primary-default: var(--color-background-layer-01);
1403
+ --component-card-background-secondary-default: var(--color-background-layer-02);
1329
1404
  --component-card-border-radius-default: var(--scania-unit-4);
1330
1405
  --component-card-space-padding-default: var(--scania-unit-16);
1406
+ --component-card-text-title-default: var(--color-text-strong);
1407
+ --component-card-text-subtitle-default: var(--color-text-soft);
1408
+ --component-card-text-body-default: var(--color-text-defined);
1331
1409
  }
1332
1410
 
1333
1411
  .traton .tds-mode-dark,
1334
1412
  .traton.tds-mode-dark,
1335
1413
  .traton .tl-mode-dark,
1336
1414
  .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);
1415
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
1416
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
1339
1417
  --component-card-border-radius-default: var(--traton-unit-0);
1340
1418
  --component-card-space-padding-default: var(--traton-unit-0);
1419
+ --component-card-text-title-default: var(--color-text-strong);
1420
+ --component-card-text-subtitle-default: var(--color-text-soft);
1421
+ --component-card-text-body-default: var(--color-text-defined);
1341
1422
  }
1342
1423
 
1343
1424
  .tl-card {
@@ -1766,21 +1847,21 @@
1766
1847
  }
1767
1848
 
1768
1849
  .tl-chip {
1769
- --chip-text: var(--component-chip-text-default);
1850
+ --chip-text: var(--component-chip-text-standard-default);
1770
1851
  --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);
1852
+ --chip-background: var(--component-chip-background-standard-default);
1853
+ --chip-background-hover: var(--component-chip-background-standard-hover);
1854
+ --chip-background-focus: var(--component-chip-background-standard-hover);
1774
1855
  --chip-background-active: var(--component-chip-background-selected-default);
1775
1856
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
1776
1857
  --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);
1858
+ --chip-border: var(--component-chip-border-standard-default);
1859
+ --chip-border-hover: var(--component-chip-border-standard-hover);
1779
1860
  --chip-border-selected: var(--component-chip-border-selected-default);
1780
1861
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
1781
1862
  --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);
1863
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
1864
+ --chip-icon-fill: var(--component-chip-text-standard-default);
1784
1865
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
1785
1866
  }
1786
1867
 
@@ -2280,10 +2361,68 @@
2280
2361
  color: var(--color-foreground-text-disabled);
2281
2362
  }
2282
2363
 
2364
+ /**
2365
+ * Do not edit directly, this file was auto-generated.
2366
+ */
2367
+ :root,
2368
+ .tds-mode-light,
2369
+ .scania .tds-mode-light,
2370
+ .scania.tds-mode-light,
2371
+ .scania .tl-mode-light,
2372
+ .scania.tl-mode-light {
2373
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
2374
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
2375
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
2376
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
2377
+ --component-divider-border-strong-default: var(--color-border-strong);
2378
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
2379
+ }
2380
+
2381
+ .traton .tds-mode-light,
2382
+ .traton.tds-mode-light,
2383
+ .traton .tl-mode-light,
2384
+ .traton.tl-mode-light {
2385
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2386
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2387
+ --component-divider-border-soft-default: var(--color-border-soft);
2388
+ --component-divider-border-defined-default: var(--color-border-defined);
2389
+ --component-divider-border-strong-default: var(--color-border-strong);
2390
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2391
+ }
2392
+
2393
+ .tds-mode-dark,
2394
+ .scania .tds-mode-dark,
2395
+ .scania.tds-mode-dark,
2396
+ .scania .tl-mode-dark,
2397
+ .scania.tl-mode-dark {
2398
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2399
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2400
+ --component-divider-border-soft-default: var(--color-border-soft);
2401
+ --component-divider-border-defined-default: var(--color-border-defined);
2402
+ --component-divider-border-strong-default: var(--color-border-strong);
2403
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
2404
+ }
2405
+
2406
+ .traton .tds-mode-dark,
2407
+ .traton.tds-mode-dark,
2408
+ .traton .tl-mode-dark,
2409
+ .traton.tl-mode-dark {
2410
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2411
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2412
+ --component-divider-border-soft-default: var(--color-border-soft);
2413
+ --component-divider-border-defined-default: var(--color-border-defined);
2414
+ --component-divider-border-strong-default: var(--color-border-strong);
2415
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2416
+ }
2417
+
2283
2418
  .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);
2419
+ --divider-background: var(--component-divider-border-discrete-default);
2420
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
2421
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
2422
+ --divider-background-soft: var(--component-divider-border-soft-default);
2423
+ --divider-background-defined: var(--component-divider-border-defined-default);
2424
+ --divider-background-strong: var(--component-divider-border-strong-default);
2425
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
2287
2426
  }
2288
2427
 
2289
2428
  .tl-divider {
@@ -3240,20 +3379,36 @@ body {
3240
3379
  .scania.tds-mode-light,
3241
3380
  .scania .tl-mode-light,
3242
3381
  .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);
3382
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
3383
+ --component-footer-background-main-default: var(--scania-color-blue-800);
3384
+ --component-footer-background-top-default: var(--color-background-layer-01);
3385
+ --component-footer-background-top-secondary: var(--color-background-base);
3386
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3387
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
3388
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
3389
+ --component-footer-text-link-default: var(--color-text-strong);
3390
+ --component-footer-text-title-default: var(--color-text-strong);
3391
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3392
+ --component-footer-icon-link-default: var(--color-icon-strong);
3393
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
3247
3394
  }
3248
3395
 
3249
3396
  .traton .tds-mode-light,
3250
3397
  .traton.tds-mode-light,
3251
3398
  .traton .tl-mode-light,
3252
3399
  .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);
3400
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3401
+ --component-footer-background-main-default: var(--traton-color-grey-50);
3402
+ --component-footer-background-top-default: var(--color-background-layer-01);
3403
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3404
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3405
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
3406
+ --component-footer-text-copyright-default: var(--color-text-soft);
3407
+ --component-footer-text-link-default: var(--color-text-strong);
3408
+ --component-footer-text-title-default: var(--color-text-strong);
3409
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3410
+ --component-footer-icon-link-default: var(--color-icon-strong);
3411
+ --component-footer-icon-social-default: var(--color-icon-strong);
3257
3412
  }
3258
3413
 
3259
3414
  .tds-mode-dark,
@@ -3261,35 +3416,51 @@ body {
3261
3416
  .scania.tds-mode-dark,
3262
3417
  .scania .tl-mode-dark,
3263
3418
  .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);
3419
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
3420
+ --component-footer-background-main-default: var(--scania-color-blue-900);
3421
+ --component-footer-background-top-default: var(--color-background-layer-01);
3422
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
3423
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3424
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
3425
+ --component-footer-text-copyright-default: var(--color-text-soft);
3426
+ --component-footer-text-link-default: var(--color-text-strong);
3427
+ --component-footer-text-title-default: var(--color-text-strong);
3428
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3429
+ --component-footer-icon-link-default: var(--color-icon-strong);
3430
+ --component-footer-icon-social-default: var(--color-icon-strong);
3268
3431
  }
3269
3432
 
3270
3433
  .traton .tds-mode-dark,
3271
3434
  .traton.tds-mode-dark,
3272
3435
  .traton .tl-mode-dark,
3273
3436
  .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);
3437
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3438
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
3439
+ --component-footer-background-top-default: var(--color-background-layer-01);
3440
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3441
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3442
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
3443
+ --component-footer-text-copyright-default: var(--color-text-soft);
3444
+ --component-footer-text-link-default: var(--color-text-strong);
3445
+ --component-footer-text-title-default: var(--color-text-strong);
3446
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3447
+ --component-footer-icon-link-default: var(--color-icon-strong);
3448
+ --component-footer-icon-social-default: var(--color-icon-strong);
3278
3449
  }
3279
3450
 
3280
3451
  .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);
3452
+ --footer-top-background-primary: var(--component-footer-background-top-default);
3453
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
3454
+ --footer-top-background: var(--component-footer-background-top-default);
3455
+ --footer-top-divider: var(--color-border-discrete);
3456
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
3457
+ --footer-top-links: var(--component-footer-text-link-default);
3458
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
3459
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
3460
+ --footer-main-background: var(--component-footer-background-main-default);
3461
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
3462
+ --footer-main-divider: var(--component-footer-border-divider-default);
3463
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
3293
3464
  }
3294
3465
  .tl-footer.tl-footer--primary {
3295
3466
  --footer-top-background: var(--footer-top-background-primary);
@@ -3298,6 +3469,26 @@ body {
3298
3469
  --footer-top-background: var(--footer-top-background-secondary);
3299
3470
  }
3300
3471
 
3472
+ .scania .tl-footer {
3473
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
3474
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
3475
+ }
3476
+
3477
+ .traton .tl-mode-dark .tl-footer {
3478
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3479
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
3480
+ }
3481
+
3482
+ .traton .tl-mode-light .tl-footer {
3483
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3484
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3485
+ }
3486
+
3487
+ .traton .tl-footer {
3488
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3489
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3490
+ }
3491
+
3301
3492
  .tl-footer__group {
3302
3493
  display: block;
3303
3494
  }
@@ -3339,7 +3530,7 @@ body {
3339
3530
  text-decoration: underline;
3340
3531
  }
3341
3532
  .tl-footer__link:focus-visible {
3342
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3533
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3343
3534
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3344
3535
  outline-offset: 1px;
3345
3536
  z-index: 1;
@@ -3399,7 +3590,7 @@ body {
3399
3590
  background-color: var(--footer-top-button-active);
3400
3591
  }
3401
3592
  .tl-footer__top-title:focus-visible {
3402
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3593
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3403
3594
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3404
3595
  outline-offset: -2px;
3405
3596
  z-index: 1;
@@ -3420,7 +3611,7 @@ body {
3420
3611
  text-decoration: none;
3421
3612
  }
3422
3613
  .tl-footer__main .tl-footer__link:focus-visible {
3423
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3614
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3424
3615
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3425
3616
  outline-offset: 1px;
3426
3617
  z-index: 1;
@@ -5670,14 +5861,112 @@ body {
5670
5861
  height: 96px;
5671
5862
  }
5672
5863
 
5864
+ /**
5865
+ * Do not edit directly, this file was auto-generated.
5866
+ */
5867
+ :root,
5868
+ .tds-mode-light,
5869
+ .scania .tds-mode-light,
5870
+ .scania.tds-mode-light,
5871
+ .scania .tl-mode-light,
5872
+ .scania.tl-mode-light {
5873
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
5874
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
5875
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
5876
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
5877
+ --component-link-icon-standard-default: var(--color-text-strong);
5878
+ --component-link-icon-standard-hover: var(--color-text-defined);
5879
+ --component-link-icon-standard-active: var(--color-text-soft);
5880
+ --component-link-icon-standard-visited: var(--color-text-strong);
5881
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5882
+ --component-link-text-accent-default: var(--scania-color-blue-400);
5883
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
5884
+ --component-link-text-accent-active: var(--scania-color-blue-600);
5885
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
5886
+ --component-link-text-standard-default: var(--color-text-strong);
5887
+ --component-link-text-standard-hover: var(--color-text-defined);
5888
+ --component-link-text-standard-active: var(--color-text-soft);
5889
+ --component-link-text-standard-visited: var(--color-text-strong);
5890
+ }
5891
+
5892
+ .traton .tds-mode-light,
5893
+ .traton.tds-mode-light,
5894
+ .traton .tl-mode-light,
5895
+ .traton.tl-mode-light {
5896
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
5897
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
5898
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
5899
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
5900
+ --component-link-icon-standard-default: var(--color-text-strong);
5901
+ --component-link-icon-standard-hover: var(--color-text-defined);
5902
+ --component-link-icon-standard-active: var(--color-text-soft);
5903
+ --component-link-icon-standard-visited: var(--color-text-strong);
5904
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5905
+ --component-link-text-accent-default: var(--traton-color-blue-700);
5906
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
5907
+ --component-link-text-accent-active: var(--traton-color-blue-950);
5908
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
5909
+ --component-link-text-standard-default: var(--color-text-strong);
5910
+ --component-link-text-standard-hover: var(--color-text-defined);
5911
+ --component-link-text-standard-active: var(--color-text-soft);
5912
+ --component-link-text-standard-visited: var(--color-text-strong);
5913
+ }
5914
+
5915
+ .tds-mode-dark,
5916
+ .scania .tds-mode-dark,
5917
+ .scania.tds-mode-dark,
5918
+ .scania .tl-mode-dark,
5919
+ .scania.tl-mode-dark {
5920
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
5921
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
5922
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
5923
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
5924
+ --component-link-icon-standard-default: var(--color-text-strong);
5925
+ --component-link-icon-standard-hover: var(--color-text-defined);
5926
+ --component-link-icon-standard-active: var(--color-text-soft);
5927
+ --component-link-icon-standard-visited: var(--color-text-strong);
5928
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5929
+ --component-link-text-accent-default: var(--scania-color-blue-300);
5930
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
5931
+ --component-link-text-accent-active: var(--scania-color-blue-100);
5932
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
5933
+ --component-link-text-standard-default: var(--color-text-strong);
5934
+ --component-link-text-standard-hover: var(--color-text-defined);
5935
+ --component-link-text-standard-active: var(--color-text-soft);
5936
+ --component-link-text-standard-visited: var(--color-text-strong);
5937
+ }
5938
+
5939
+ .traton .tds-mode-dark,
5940
+ .traton.tds-mode-dark,
5941
+ .traton .tl-mode-dark,
5942
+ .traton.tl-mode-dark {
5943
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
5944
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
5945
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
5946
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
5947
+ --component-link-icon-standard-default: var(--color-text-strong);
5948
+ --component-link-icon-standard-hover: var(--color-text-defined);
5949
+ --component-link-icon-standard-active: var(--color-text-soft);
5950
+ --component-link-icon-standard-visited: var(--color-text-strong);
5951
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5952
+ --component-link-text-accent-default: var(--traton-color-blue-400);
5953
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
5954
+ --component-link-text-accent-active: var(--traton-color-blue-150);
5955
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
5956
+ --component-link-text-standard-default: var(--color-text-strong);
5957
+ --component-link-text-standard-hover: var(--color-text-defined);
5958
+ --component-link-text-standard-active: var(--color-text-soft);
5959
+ --component-link-text-standard-visited: var(--color-text-strong);
5960
+ }
5961
+
5673
5962
  /* Component variables */
5674
5963
  .tl-link {
5675
- --link: var(--color-foreground-text-accent-default);
5676
- --link-hover: var(--color-foreground-text-accent-default);
5964
+ --link: var(--component-link-text-accent-default);
5965
+ --link-hover: var(--component-link-text-accent-hover);
5677
5966
  --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);
5967
+ --link-visited: var(--component-link-text-accent-visited);
5968
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
5969
+ --link-focus-outline-color: var(--color-system-info-default);
5681
5970
  }
5682
5971
 
5683
5972
  .tl-banner .tl-link {
@@ -5686,11 +5975,11 @@ body {
5686
5975
 
5687
5976
  .tl-toast .tl-link {
5688
5977
  --link: var(--color-system-info-default);
5689
- --link-hover: var(--color-foreground-text-accent-default);
5978
+ --link-hover: var(--color-system-info-default);
5690
5979
  }
5691
5980
 
5692
5981
  .traton .tl-link {
5693
- --link-focus-outline-width: 4px;
5982
+ --link-focus-outline-width: 2px;
5694
5983
  }
5695
5984
 
5696
5985
  .tl-link-text {
@@ -5731,15 +6020,10 @@ body {
5731
6020
  text-decoration-color: var(--link-visited);
5732
6021
  }
5733
6022
  .tl-link--disabled {
5734
- color: var(--link-disabled);
5735
- text-decoration-color: var(--link-disabled);
6023
+ opacity: var(--link-opacity-disabled);
5736
6024
  pointer-events: none;
5737
6025
  cursor: not-allowed;
5738
6026
  }
5739
- .tl-link--disabled:visited {
5740
- color: var(--link-disabled);
5741
- text-decoration-color: var(--link-disabled);
5742
- }
5743
6027
  .tl-link--underline {
5744
6028
  text-decoration: underline;
5745
6029
  }
@@ -6189,8 +6473,8 @@ body {
6189
6473
  cursor: pointer;
6190
6474
  }
6191
6475
  .tl-modal__close:focus {
6192
- outline: 2px solid var(--tds-focus-outline-color);
6193
- box-shadow: 0 0 0 1px var(--tds-white);
6476
+ outline: 2px solid var(--component--focus-ring-color-strong);
6477
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
6194
6478
  outline-offset: 1px;
6195
6479
  z-index: 1;
6196
6480
  }
@@ -6608,7 +6892,7 @@ body {
6608
6892
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6609
6893
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6610
6894
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6611
- --component-side-menu-radius-default: var(--scania-unit-0);
6895
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6612
6896
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6613
6897
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6614
6898
  --component-side-menu-text-items-font-size: 14;
@@ -6649,7 +6933,7 @@ body {
6649
6933
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6650
6934
  --traton-unit-12
6651
6935
  );
6652
- --component-side-menu-radius-default: var(--traton-unit-8);
6936
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6653
6937
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6654
6938
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6655
6939
  --component-side-menu-text-items-font-size: 14;
@@ -6686,7 +6970,7 @@ body {
6686
6970
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6687
6971
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6688
6972
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6689
- --component-side-menu-radius-default: var(--scania-unit-0);
6973
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6690
6974
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6691
6975
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6692
6976
  --component-side-menu-text-items-font-size: 14;
@@ -6727,7 +7011,7 @@ body {
6727
7011
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6728
7012
  --traton-unit-12
6729
7013
  );
6730
- --component-side-menu-radius-default: var(--traton-unit-8);
7014
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6731
7015
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6732
7016
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6733
7017
  --component-side-menu-text-items-font-size: 14;
@@ -10232,8 +10516,8 @@ body {
10232
10516
  cursor: pointer;
10233
10517
  }
10234
10518
  .tl-toast__close:focus-visible {
10235
- outline: 2px solid var(--tds-focus-outline-color);
10236
- box-shadow: 0 0 0 1px var(--tds-white);
10519
+ outline: 2px solid var(--component--focus-ring-color-strong);
10520
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10237
10521
  outline-offset: 1px;
10238
10522
  z-index: 1;
10239
10523
  }
@@ -10298,8 +10582,8 @@ body {
10298
10582
  height: 16px;
10299
10583
  }
10300
10584
  .tl-toggle__input:focus-visible {
10301
- outline: 2px solid var(--tds-focus-outline-color);
10302
- box-shadow: 0 0 0 1px var(--tds-white);
10585
+ outline: 2px solid var(--component--focus-ring-color-strong);
10586
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10303
10587
  outline-offset: 1px;
10304
10588
  z-index: 1;
10305
10589
  border-radius: 16px;
@@ -10394,8 +10678,10 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10394
10678
  }
10395
10679
 
10396
10680
  .tl-tooltip {
10397
- --tooltip-text: var(--color-foreground-text-inverse-strong);
10398
- --tooltip-background: var(--color-background-inverse-layer-03);
10681
+ --tooltip-color: var(--component-tooltip-text-default);
10682
+ --tooltip-background: var(--component-tooltip-background-default);
10683
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
10684
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
10399
10685
  }
10400
10686
 
10401
10687
  .scania {
@@ -10416,19 +10702,19 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10416
10702
  position: fixed;
10417
10703
  z-index: var(--tds-z-index-tooltip, 1000);
10418
10704
  padding: 8px;
10419
- max-width: 204px;
10705
+ max-width: 208px;
10420
10706
  width: max-content;
10421
10707
  white-space: normal;
10422
- word-wrap: break-word;
10423
- background-color: var(--tooltip-background, #333);
10424
- color: var(--tooltip-text, #fff);
10708
+ overflow-wrap: break-word;
10709
+ background-color: var(--tooltip-background);
10710
+ color: var(--tooltip-color);
10425
10711
  box-sizing: border-box;
10426
10712
  line-height: var(--tl-tooltip-line-height);
10427
10713
  opacity: 0;
10428
10714
  visibility: hidden;
10429
10715
  pointer-events: none;
10430
10716
  transition: opacity 0.2s ease, visibility 0.2s ease;
10431
- border-radius: 4px;
10717
+ border-radius: var(--tooltip-border-radius);
10432
10718
  }
10433
10719
  .tl-tooltip--visible {
10434
10720
  opacity: 1;
@@ -10436,26 +10722,26 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10436
10722
  pointer-events: auto;
10437
10723
  }
10438
10724
  .tl-tooltip--top-start {
10439
- border-radius: 4px 4px 4px 0;
10725
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10440
10726
  }
10441
10727
  .tl-tooltip--top-end {
10442
- border-radius: 4px 4px 0;
10728
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10443
10729
  }
10444
10730
  .tl-tooltip--bottom-start {
10445
- border-radius: 0 4px 4px;
10731
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10446
10732
  }
10447
10733
  .tl-tooltip--bottom-end {
10448
- border-radius: 4px 0 4px 4px;
10734
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10449
10735
  }
10450
10736
  .tl-tooltip--left-start {
10451
- border-radius: 4px 0 4px 4px;
10737
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10452
10738
  }
10453
10739
  .tl-tooltip--left-end {
10454
- border-radius: 4px 4px 0;
10740
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10455
10741
  }
10456
10742
  .tl-tooltip--right-start {
10457
- border-radius: 0 4px 4px;
10743
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10458
10744
  }
10459
10745
  .tl-tooltip--right-end {
10460
- border-radius: 4px 4px 4px 0;
10746
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10461
10747
  }