@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-dev-test-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 (32) hide show
  1. package/dist/assets/icons/scania/configurator.svg +1 -0
  2. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  3. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  4. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  5. package/dist/components.css +1044 -447
  6. package/dist/global.css +45 -3560
  7. package/dist/scania-variables.css +328 -453
  8. package/dist/tl-accordion.css +8 -8
  9. package/dist/tl-badge.css +4 -18
  10. package/dist/tl-banner.css +2 -2
  11. package/dist/tl-button.css +397 -10
  12. package/dist/tl-card.css +47 -11
  13. package/dist/tl-checkbox-vars.css +1 -1
  14. package/dist/tl-checkbox.css +1 -1
  15. package/dist/tl-chip.css +21 -71
  16. package/dist/tl-datetime.css +7 -4
  17. package/dist/tl-dropdown.css +55 -8
  18. package/dist/tl-footer.css +34 -52
  19. package/dist/tl-header.css +189 -103
  20. package/dist/tl-icon.css +2 -2
  21. package/dist/tl-modal.css +33 -14
  22. package/dist/tl-side-menu.css +131 -42
  23. package/dist/tl-slider.css +416 -20
  24. package/dist/tl-spinner.css +10 -18
  25. package/dist/tl-step.css +28 -2
  26. package/dist/tl-stepper.css +28 -2
  27. package/dist/tl-table.css +42 -9
  28. package/dist/tl-text-field.css +19 -67
  29. package/dist/tl-toggle.css +1 -1
  30. package/dist/traton-variables.css +330 -437
  31. package/package.json +1 -1
  32. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/components.css CHANGED
@@ -31,26 +31,26 @@
31
31
  }
32
32
 
33
33
  /* Mode variants */
34
- .tds-mode-light .tl-accordion--primary,
35
- .tds-mode-light .tl-accordion .tl-accordion--primary {
34
+ .tl-mode-light .tl-accordion--primary,
35
+ .tl-mode-light .tl-accordion .tl-accordion--primary {
36
36
  background-color: var(--accordion-background-hover-secondary);
37
37
  --accordion-background-hover: var(--accordion-background-hover-primary);
38
38
  }
39
39
 
40
- .tds-mode-light .tl-accordion--secondary,
41
- .tds-mode-light .tl-accordion .tl-accordion--secondary {
40
+ .tl-mode-light .tl-accordion--secondary,
41
+ .tl-mode-light .tl-accordion .tl-accordion--secondary {
42
42
  background-color: var(--accordion-background-hover-primary);
43
43
  --accordion-background-hover: var(--accordion-background-hover-secondary);
44
44
  }
45
45
 
46
- .tds-mode-dark .tl-accordion--primary,
47
- .tds-mode-dark .tl-accordion .tl-accordion--primary {
46
+ .tl-mode-dark .tl-accordion--primary,
47
+ .tl-mode-dark .tl-accordion .tl-accordion--primary {
48
48
  background-color: var(--accordion-background-hover-secondary);
49
49
  --accordion-background-hover: var(--accordion-background-hover-primary);
50
50
  }
51
51
 
52
- .tds-mode-dark .tl-accordion--secondary,
53
- .tds-mode-dark .tl-accordion .tl-accordion--secondary {
52
+ .tl-mode-dark .tl-accordion--secondary,
53
+ .tl-mode-dark .tl-accordion .tl-accordion--secondary {
54
54
  background-color: var(--accordion-background-hover-primary);
55
55
  --accordion-background-hover: var(--accordion-background-hover-secondary);
56
56
  }
@@ -270,24 +270,10 @@
270
270
  position: relative;
271
271
  }
272
272
 
273
- /**
274
- * Do not edit directly, this file was auto-generated.
275
- */
276
- .tl-badge,
277
- tds-badge {
278
- --component-badge-text: var(--color-brand-neutral-white);
279
- --component-badge-background: var(--color-system-danger-subtle);
280
- }
281
-
282
- .traton .tl-badge,
283
- .traton tds-badge {
284
- --component-badge-text: var(--color-brand-neutral-black);
285
- --component-badge-background: var(--color-system-warning-subtle);
286
- }
287
-
288
273
  .tl-badge {
289
- --badge-background-color: var(--component-badge-background);
290
- --badge-color-text: var(--component-badge-text);
274
+ --badge-background-color: var(--component-badge-background-default);
275
+ --badge-color-text: var(--component-badge-text-default);
276
+ --badge-border-radius: calc(var(--component-badge-border-radius-default) * 1px);
291
277
  }
292
278
 
293
279
  .tl-badge {
@@ -298,7 +284,7 @@ tds-badge {
298
284
  }
299
285
  .tl-badge {
300
286
  display: block;
301
- border-radius: 12px;
287
+ border-radius: var(--badge-border-radius);
302
288
  background-color: var(--badge-background-color);
303
289
  text-align: center;
304
290
  }
@@ -330,8 +316,8 @@ tds-badge {
330
316
  }
331
317
 
332
318
  :root,
333
- .tds-mode-light,
334
- .tds-mode-dark {
319
+ .tl-mode-light,
320
+ .tl-mode-dark {
335
321
  --banner-text: var(--color-foreground-text-strong);
336
322
  --banner-close-icon: var(--color-foreground-icon-strong);
337
323
  --banner-background-default: var(--color-background-layer-01);
@@ -622,20 +608,407 @@ tds-badge {
622
608
  /**
623
609
  * Do not edit directly, this file was auto-generated.
624
610
  */
625
- .tl-button,
626
- tds-button,
627
- .tds-mode-light tds-button {
628
- --component-button-primary-text: var(--color-brand-neutral-white);
611
+ :root,
612
+ .tds-mode-light,
613
+ .scania .tds-mode-light,
614
+ .scania.tds-mode-light,
615
+ .scania .tl-mode-light,
616
+ .scania.tl-mode-light {
617
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
618
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
619
+ --component-button-background-standard-primary-active: var(--scania-color-blue-700);
620
+ --component-button-background-standard-secondary-default: var(--color-background-none);
621
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
622
+ --component-button-background-standard-secondary-active: var(--color-background-none);
623
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
624
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
625
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
626
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
627
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
628
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
629
+ --component-button-background-danger-secondary-default: var(--color-background-none);
630
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
631
+ --component-button-background-danger-secondary-active: var(--color-background-none);
632
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
633
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
634
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
635
+ --component-button-border-radius-default: var(--scania-unit-4);
636
+ --component-button-border-standard-primary-default: var(--color-border-none);
637
+ --component-button-border-standard-primary-hover: var(--color-border-none);
638
+ --component-button-border-standard-primary-active: var(--color-border-none);
639
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
640
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
641
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
642
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
643
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
644
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
645
+ --component-button-border-danger-primary-default: var(--color-border-none);
646
+ --component-button-border-danger-primary-hover: var(--color-border-none);
647
+ --component-button-border-danger-primary-active: var(--color-border-none);
648
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
649
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
650
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
651
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
652
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
653
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
654
+ --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
655
+ --component-button-icon-standard-primary-hover: var(
656
+ --component-button-text-standard-primary-default
657
+ );
658
+ --component-button-icon-standard-primary-active: var(
659
+ --component-button-text-standard-primary-default
660
+ );
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);
669
+ --component-button-icon-danger-primary-active: var(
670
+ --component-button-text-danger-primary-default
671
+ );
672
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
673
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
674
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
675
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
676
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
677
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
678
+ --component-button-opacity-disabled: var(--scania-opacity-25);
679
+ --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
680
+ --component-button-text-standard-primary-hover: var(
681
+ --component-button-text-standard-primary-default
682
+ );
683
+ --component-button-text-standard-primary-active: var(
684
+ --component-button-text-standard-primary-default
685
+ );
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);
693
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
694
+ --component-button-text-danger-primary-active: var(
695
+ --component-button-text-danger-primary-default
696
+ );
697
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
698
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
699
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
700
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
701
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
702
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
629
703
  }
630
704
 
631
- .scania .tds-mode-dark tds-button,
632
- .scania .tds-mode-dark .tl-button {
633
- --component-button-primary-text: var(--color-brand-neutral-white);
705
+ .traton .tds-mode-light,
706
+ .traton.tds-mode-light,
707
+ .traton .tl-mode-light,
708
+ .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;
712
+ --component-button-background-standard-secondary-default: var(--color-background-none);
713
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
714
+ --component-button-background-standard-secondary-active: var(--color-background-none);
715
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
716
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
717
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
718
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
719
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
720
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
721
+ --component-button-background-danger-secondary-default: var(--color-background-none);
722
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
723
+ --component-button-background-danger-secondary-active: var(--color-background-none);
724
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
725
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
726
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
727
+ --component-button-border-radius-default: var(--traton-unit-56);
728
+ --component-button-border-standard-primary-default: var(--color-border-none);
729
+ --component-button-border-standard-primary-hover: var(--color-border-none);
730
+ --component-button-border-standard-primary-active: var(--color-border-none);
731
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
732
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
733
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
734
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
735
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
736
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
737
+ --component-button-border-danger-primary-default: var(--color-border-none);
738
+ --component-button-border-danger-primary-hover: var(--color-border-none);
739
+ --component-button-border-danger-primary-active: var(--color-border-none);
740
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
741
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
742
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
743
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
744
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
745
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
746
+ --component-button-icon-standard-primary-default: #fff;
747
+ --component-button-icon-standard-primary-hover: var(
748
+ --component-button-text-standard-primary-default
749
+ );
750
+ --component-button-icon-standard-primary-active: var(
751
+ --component-button-text-standard-primary-default
752
+ );
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);
761
+ --component-button-icon-danger-primary-active: var(
762
+ --component-button-text-danger-primary-default
763
+ );
764
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
765
+ --component-button-icon-danger-secondary-hover: var(
766
+ --component-button-text-danger-secondary-default
767
+ );
768
+ --component-button-icon-danger-secondary-active: var(
769
+ --component-button-text-danger-secondary-default
770
+ );
771
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
772
+ --component-button-icon-danger-tertiary-hover: var(
773
+ --component-button-text-danger-tertiary-default
774
+ );
775
+ --component-button-icon-danger-tertiary-active: var(
776
+ --component-button-text-danger-tertiary-default
777
+ );
778
+ --component-button-opacity-disabled: var(--traton-opacity-25);
779
+ --component-button-text-standard-primary-default: #fff;
780
+ --component-button-text-standard-primary-hover: var(
781
+ --component-button-text-standard-primary-default
782
+ );
783
+ --component-button-text-standard-primary-active: var(
784
+ --component-button-text-standard-primary-default
785
+ );
786
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
787
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
788
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
789
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
790
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
791
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
792
+ --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
793
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
794
+ --component-button-text-danger-primary-active: var(
795
+ --component-button-text-danger-primary-default
796
+ );
797
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
798
+ --component-button-text-danger-secondary-hover: var(
799
+ --component-button-text-danger-secondary-default
800
+ );
801
+ --component-button-text-danger-secondary-active: var(
802
+ --component-button-text-danger-secondary-default
803
+ );
804
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
805
+ --component-button-text-danger-tertiary-hover: var(
806
+ --component-button-text-danger-tertiary-default
807
+ );
808
+ --component-button-text-danger-tertiary-active: var(
809
+ --component-button-text-danger-tertiary-default
810
+ );
634
811
  }
635
812
 
636
- .tds-mode-dark tds-button,
637
- .tds-mode-dark .tl-button {
638
- --component-button-primary-text: var(--color-brand-neutral-black);
813
+ .tds-mode-dark,
814
+ .scania .tds-mode-dark,
815
+ .scania.tds-mode-dark,
816
+ .scania .tl-mode-dark,
817
+ .scania.tl-mode-dark {
818
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
819
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
820
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
821
+ --component-button-background-standard-secondary-default: var(--color-background-none);
822
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
823
+ --component-button-background-standard-secondary-active: var(--color-background-none);
824
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
825
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
826
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
827
+ --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
828
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
829
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
830
+ --component-button-background-danger-secondary-default: var(--color-background-none);
831
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
832
+ --component-button-background-danger-secondary-active: var(--color-background-none);
833
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
834
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
835
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
836
+ --component-button-border-radius-default: var(--scania-unit-4);
837
+ --component-button-border-standard-primary-default: var(--color-border-none);
838
+ --component-button-border-standard-primary-hover: var(--color-border-none);
839
+ --component-button-border-standard-primary-active: var(--color-border-none);
840
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
841
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
842
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
843
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
844
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
845
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
846
+ --component-button-border-danger-primary-default: var(--color-border-none);
847
+ --component-button-border-danger-primary-hover: var(--color-border-none);
848
+ --component-button-border-danger-primary-active: var(--color-border-none);
849
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
850
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
851
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
852
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
853
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
854
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
855
+ --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
856
+ --component-button-icon-standard-primary-hover: var(
857
+ --component-button-text-standard-primary-default
858
+ );
859
+ --component-button-icon-standard-primary-active: var(
860
+ --component-button-text-standard-primary-default
861
+ );
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);
869
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
870
+ --component-button-icon-danger-primary-active: var(
871
+ --component-button-icon-danger-primary-default
872
+ );
873
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
874
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
875
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
876
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
877
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
878
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
879
+ --component-button-opacity-disabled: var(--scania-opacity-25);
880
+ --component-button-text-standard-primary-default: var(--color-text-brand);
881
+ --component-button-text-standard-primary-hover: var(
882
+ --component-button-text-standard-primary-default
883
+ );
884
+ --component-button-text-standard-primary-active: var(
885
+ --component-button-text-standard-primary-default
886
+ );
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);
894
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
895
+ --component-button-text-danger-primary-active: var(
896
+ --component-button-text-danger-primary-default
897
+ );
898
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
899
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
900
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
901
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
902
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
903
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
904
+ }
905
+
906
+ .traton .tds-mode-dark,
907
+ .traton.tds-mode-dark,
908
+ .traton .tl-mode-dark,
909
+ .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;
913
+ --component-button-background-standard-secondary-default: var(--color-background-none);
914
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
915
+ --component-button-background-standard-secondary-active: var(--color-background-none);
916
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
917
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
918
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
919
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
920
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
921
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
922
+ --component-button-background-danger-secondary-default: var(--color-background-none);
923
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
924
+ --component-button-background-danger-secondary-active: var(--color-background-none);
925
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
926
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
927
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
928
+ --component-button-border-radius-default: var(--traton-unit-56);
929
+ --component-button-border-standard-primary-default: var(--color-border-none);
930
+ --component-button-border-standard-primary-hover: var(--color-border-none);
931
+ --component-button-border-standard-primary-active: var(--color-border-none);
932
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
933
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
934
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
935
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
936
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
937
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
938
+ --component-button-border-danger-primary-default: var(--color-border-none);
939
+ --component-button-border-danger-primary-hover: var(--color-border-none);
940
+ --component-button-border-danger-primary-active: var(--color-border-none);
941
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
942
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
943
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
944
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
945
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
946
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
947
+ --component-button-icon-standard-primary-default: #000;
948
+ --component-button-icon-standard-primary-hover: var(
949
+ --component-button-text-standard-primary-default
950
+ );
951
+ --component-button-icon-standard-primary-active: var(
952
+ --component-button-text-standard-primary-default
953
+ );
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);
961
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
962
+ --component-button-icon-danger-primary-active: var(
963
+ --component-button-icon-danger-primary-default
964
+ );
965
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
966
+ --component-button-icon-danger-secondary-hover: var(
967
+ --component-button-text-danger-secondary-default
968
+ );
969
+ --component-button-icon-danger-secondary-active: var(
970
+ --component-button-text-danger-secondary-default
971
+ );
972
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
973
+ --component-button-icon-danger-tertiary-hover: var(
974
+ --component-button-text-danger-tertiary-default
975
+ );
976
+ --component-button-icon-danger-tertiary-active: var(
977
+ --component-button-text-danger-tertiary-default
978
+ );
979
+ --component-button-opacity-disabled: var(--traton-opacity-25);
980
+ --component-button-text-standard-primary-default: #000;
981
+ --component-button-text-standard-primary-hover: var(
982
+ --component-button-text-standard-primary-default
983
+ );
984
+ --component-button-text-standard-primary-active: var(
985
+ --component-button-text-standard-primary-default
986
+ );
987
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
988
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
989
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
990
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
991
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
992
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
993
+ --component-button-text-danger-primary-default: var(--color-text-strong);
994
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
995
+ --component-button-text-danger-primary-active: var(
996
+ --component-button-text-danger-primary-default
997
+ );
998
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
999
+ --component-button-text-danger-secondary-hover: var(
1000
+ --component-button-text-danger-secondary-default
1001
+ );
1002
+ --component-button-text-danger-secondary-active: var(
1003
+ --component-button-text-danger-secondary-default
1004
+ );
1005
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
1006
+ --component-button-text-danger-tertiary-hover: var(
1007
+ --component-button-text-danger-tertiary-default
1008
+ );
1009
+ --component-button-text-danger-tertiary-active: var(
1010
+ --component-button-text-danger-tertiary-default
1011
+ );
639
1012
  }
640
1013
 
641
1014
  .tl-button {
@@ -924,11 +1297,47 @@ tds-button,
924
1297
  /**
925
1298
  * Do not edit directly, this file was auto-generated.
926
1299
  */
927
- .tl-card,
928
- tds-card {
929
- --component-card-secondary: var(--color-background-layer-02);
930
- --component-card-primary: var(--color-background-layer-01);
931
- --component-card-padding-padding: var(--scania-unit-16);
1300
+ :root,
1301
+ .tds-mode-light,
1302
+ .scania .tds-mode-light,
1303
+ .scania.tds-mode-light,
1304
+ .scania .tl-mode-light,
1305
+ .scania.tl-mode-light {
1306
+ --component-card-background-primary: #fff;
1307
+ --component-card-background-secondary: #fff;
1308
+ --component-card-border-radius-default: var(--scania-unit-4);
1309
+ --component-card-space-padding-default: var(--scania-unit-16);
1310
+ }
1311
+
1312
+ .traton .tds-mode-light,
1313
+ .traton.tds-mode-light,
1314
+ .traton .tl-mode-light,
1315
+ .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);
1318
+ --component-card-border-radius-default: var(--traton-unit-0);
1319
+ --component-card-space-padding-default: var(--traton-unit-0);
1320
+ }
1321
+
1322
+ .tds-mode-dark,
1323
+ .scania .tds-mode-dark,
1324
+ .scania.tds-mode-dark,
1325
+ .scania .tl-mode-dark,
1326
+ .scania.tl-mode-dark {
1327
+ --component-card-background-primary: var(--color-background-layer-01);
1328
+ --component-card-background-secondary: var(--color-background-layer-02);
1329
+ --component-card-border-radius-default: var(--scania-unit-4);
1330
+ --component-card-space-padding-default: var(--scania-unit-16);
1331
+ }
1332
+
1333
+ .traton .tds-mode-dark,
1334
+ .traton.tds-mode-dark,
1335
+ .traton .tl-mode-dark,
1336
+ .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);
1339
+ --component-card-border-radius-default: var(--traton-unit-0);
1340
+ --component-card-space-padding-default: var(--traton-unit-0);
932
1341
  }
933
1342
 
934
1343
  .tl-card {
@@ -993,26 +1402,26 @@ tds-card {
993
1402
  }
994
1403
 
995
1404
  /* Dark mode */
996
- .tds-mode-dark {
1405
+ .tl-mode-dark {
997
1406
  --card-background-primary: var(--tds-grey-900);
998
1407
  --card-background-secondary: var(--tds-grey-850);
999
1408
  }
1000
- .tds-mode-dark .tl-card {
1409
+ .tl-mode-dark .tl-card {
1001
1410
  --card-background: var(--card-background-primary);
1002
1411
  }
1003
- .tds-mode-dark .tl-card--primary {
1412
+ .tl-mode-dark .tl-card--primary {
1004
1413
  --card-box: var(--card-box-primary);
1005
1414
  --card-background: var(--card-background-primary);
1006
1415
  }
1007
- .tds-mode-dark .tl-card--secondary {
1416
+ .tl-mode-dark .tl-card--secondary {
1008
1417
  --card-box: var(--card-box-primary);
1009
1418
  --card-background: var(--card-background-secondary);
1010
1419
  }
1011
1420
 
1012
- .traton .tds-mode-dark .tl-card--primary {
1421
+ .traton .tl-mode-dark .tl-card--primary {
1013
1422
  --card-background: transparent;
1014
1423
  }
1015
- .traton .tds-mode-dark .tl-card--secondary {
1424
+ .traton .tl-mode-dark .tl-card--secondary {
1016
1425
  --card-background: transparent;
1017
1426
  }
1018
1427
 
@@ -1181,7 +1590,7 @@ tds-card {
1181
1590
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
1182
1591
  }
1183
1592
 
1184
- .tds-mode-dark .tl-checkbox {
1593
+ .tl-mode-dark .tl-checkbox {
1185
1594
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
1186
1595
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
1187
1596
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -1357,70 +1766,22 @@ tds-card {
1357
1766
  }
1358
1767
 
1359
1768
  .tl-chip {
1360
- --chip-text: var(--color-foreground-text-strong);
1361
- --chip-text-active: var(--component-chip-foreground-inverse);
1362
- --chip-background: var(--component-chip-color-default);
1363
- --chip-background-active: var(--component-chip-color-selected);
1364
- --chip-background-disabled: var(--component-chip-color-disabled);
1365
- --chip-text-disabled: var(--color-foreground-text-disabled);
1366
- --chip-text-checked-disabled: var(--component-chip-foreground-foreground-disabled-selected);
1367
- --chip-background-active-hover: var(--component-chip-color-hover-on-selected);
1368
- --chip-background-hover: var(--component-chip-color-hover);
1369
- --chip-background-focus: var(--component-chip-color-focused);
1370
- --chip-border-radius: var(--component-chip-border-radius);
1371
- --chip-focused-on-selected: var(--component-chip-color-focused-on-selected);
1372
- --component-chip-color-focused-on-selected: var(--color-system-info-subtle);
1373
- --component-chip-color-disabled: var(--color-background-surface-100);
1374
- --component-chip-color-focused: var(--color-background-layer-02);
1375
- --component-chip-color-hover: var(--color-background-surface-600);
1376
- --component-chip-color-selected: var(--color-brand-primary-400);
1377
- --component-chip-color-disabled-selected: var(--color-brand-primary-400);
1378
- --component-chip-color-hover-on-selected: var(--color-system-info-default);
1379
- --component-chip-color-default: var(--color-background-surface-200);
1380
- --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
1381
- --component-chip-foreground-foreground-disabled-selected: var(
1382
- --color-foreground-text-inverse-subtle
1383
- );
1384
- --component-chip-border-selected-focus-border: var(--color-system-info-default);
1385
- }
1386
-
1387
- :root .tl-chip,
1388
- .scania .tl-chip {
1389
- --component-chip-border-radius: 16px;
1390
- }
1391
- :root .tds-mode-light .tl-chip,
1392
- .scania .tds-mode-light .tl-chip {
1393
- --component-chip-color-hover: var(--color-background-surface-300);
1394
- --component-chip-foreground-foreground-disabled-selected: var(
1395
- --color-foreground-text-inverse-subtle
1396
- );
1397
- }
1398
- :root .tds-mode-dark .tl-chip,
1399
- .scania .tds-mode-dark .tl-chip {
1400
- --component-chip-color-default: var(--color-background-surface-400);
1401
- --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
1402
- --component-chip-color-hover-on-selected: var(--color-system-info-default);
1403
- --component-chip-foreground-foreground-disabled-selected: var(--color-foreground-text-subtle);
1404
- --component-chip-foreground-inverse: var(--color-foreground-text-strong);
1405
- }
1406
-
1407
- .traton .tl-chip {
1408
- --component-chip-border-radius: 2px;
1409
- }
1410
- .traton .tds-mode-light .tl-chip {
1411
- --component-chip-color-default: var(--color-background-surface-200);
1412
- --component-chip-color-selected: var(--color-background-surface-300);
1413
- --component-chip-color-hover-on-selected: var(--color-background-surface-400);
1414
- --component-chip-foreground-inverse: var(--color-foreground-text-strong);
1415
- --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
1416
- --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
1417
- }
1418
- .traton .tds-mode-dark .tl-chip {
1419
- --component-chip-color-default: var(--color-background-surface-300);
1420
- --component-chip-color-disabled: var(--color-background-surface-200);
1421
- --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
1422
- --component-chip-color-focused-on-selected: var(--color-background-surface-700);
1423
- --component-chip-color-hover-on-selected: var(--color-background-surface-800);
1769
+ --chip-text: var(--component-chip-text-default);
1770
+ --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);
1774
+ --chip-background-active: var(--component-chip-background-selected-default);
1775
+ --chip-background-active-hover: var(--component-chip-background-selected-hover);
1776
+ --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);
1779
+ --chip-border-selected: var(--component-chip-border-selected-default);
1780
+ --chip-border-selected-hover: var(--component-chip-border-selected-hover);
1781
+ --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);
1784
+ --chip-icon-fill-active: var(--component-chip-text-selected-default);
1424
1785
  }
1425
1786
 
1426
1787
  .tl-chip {
@@ -1435,7 +1796,7 @@ tds-card {
1435
1796
  gap: 8px;
1436
1797
  padding: 8px 16px;
1437
1798
  border-radius: var(--chip-border-radius);
1438
- border: none;
1799
+ border: 1px solid var(--chip-border);
1439
1800
  background-color: var(--chip-background);
1440
1801
  color: var(--chip-text);
1441
1802
  cursor: pointer;
@@ -1446,6 +1807,7 @@ tds-card {
1446
1807
  }
1447
1808
  .tl-chip:hover {
1448
1809
  background-color: var(--chip-background-hover);
1810
+ border-color: var(--chip-border-hover);
1449
1811
  }
1450
1812
  .tl-chip:focus-visible {
1451
1813
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
@@ -1466,9 +1828,11 @@ tds-card {
1466
1828
  .tl-chip--selected {
1467
1829
  background-color: var(--chip-background-active);
1468
1830
  color: var(--chip-text-active);
1831
+ border-color: var(--chip-border-selected);
1469
1832
  }
1470
1833
  .tl-chip--selected:hover {
1471
1834
  background-color: var(--chip-background-active-hover);
1835
+ border-color: var(--chip-border-selected-hover);
1472
1836
  }
1473
1837
  .tl-chip--selected:focus-visible {
1474
1838
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
@@ -1479,12 +1843,7 @@ tds-card {
1479
1843
  .tl-chip:disabled {
1480
1844
  cursor: not-allowed;
1481
1845
  pointer-events: none;
1482
- background-color: var(--chip-background-disabled);
1483
- color: var(--chip-text-disabled);
1484
- }
1485
- .tl-chip:disabled.tl-chip--selected {
1486
- background-color: var(--chip-background-active);
1487
- color: var(--chip-text-checked-disabled);
1846
+ opacity: var(--chip-opacity-disabled);
1488
1847
  }
1489
1848
  .tl-chip--lg.tl-chip--prefix:not(.tl-chip--suffix) {
1490
1849
  padding: 0 16px 0 8px;
@@ -1719,9 +2078,9 @@ tds-card {
1719
2078
  background-color: var(--datetime-icon-error);
1720
2079
  }
1721
2080
  .tl-datetime__wrapper {
1722
- /* Disabled state (should not override error state) */
2081
+ /* Disabled state */
1723
2082
  }
1724
- .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
2083
+ .tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
1725
2084
  background-color: var(--datetime-icon-disabled);
1726
2085
  }
1727
2086
 
@@ -1754,7 +2113,7 @@ tds-card {
1754
2113
  .tl-datetime__input:focus {
1755
2114
  box-shadow: inset var(--datetime-box-shadow-focus);
1756
2115
  }
1757
- .tl-datetime:hover .tl-datetime__input:not(:focus) {
2116
+ .tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
1758
2117
  box-shadow: inset var(--datetime-box-shadow-hover);
1759
2118
  }
1760
2119
  .tl-datetime--error .tl-datetime__input {
@@ -1763,9 +2122,12 @@ tds-card {
1763
2122
  .tl-datetime--error .tl-datetime__input:focus {
1764
2123
  box-shadow: inset var(--datetime-box-shadow-error-focus);
1765
2124
  }
1766
- .tl-datetime--error:hover .tl-datetime__input:not(:focus) {
2125
+ .tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
1767
2126
  box-shadow: inset var(--datetime-box-shadow-error-hover);
1768
2127
  }
2128
+ .tl-datetime--error .tl-datetime__input:disabled {
2129
+ box-shadow: inset var(--datetime-box-shadow-error);
2130
+ }
1769
2131
  .tl-datetime__input::placeholder {
1770
2132
  opacity: 1;
1771
2133
  color: var(--datetime-placeholder);
@@ -1951,16 +2313,63 @@ tds-card {
1951
2313
  /**
1952
2314
  * Do not edit directly, this file was auto-generated.
1953
2315
  */
1954
- .tl-dropdown,
1955
- tds-dropdown {
2316
+ :root,
2317
+ .tds-mode-light,
2318
+ .scania .tds-mode-light,
2319
+ .scania.tds-mode-light,
2320
+ .scania .tl-mode-light,
2321
+ .scania.tl-mode-light {
2322
+ --component-dropdown-hover: #edeff3;
2323
+ --component-dropdown-focus: #edeff3;
2324
+ --component-dropdown-secondary-hover: #edeff3;
2325
+ --component-dropdown-secondary-focus: #edeff3;
2326
+ --component-dropdown-list-item-hover: #edeff3;
2327
+ --component-dropdown-list-item-focus: #edeff3;
2328
+ --component-dropdown-list-item-secondary-hover: #edeff3;
2329
+ --component-dropdown-list-item-secondary-focus: #edeff3;
2330
+ }
2331
+
2332
+ .traton .tds-mode-light,
2333
+ .traton.tds-mode-light,
2334
+ .traton .tl-mode-light,
2335
+ .traton.tl-mode-light {
2336
+ --component-dropdown-hover: #ebe7dd;
2337
+ --component-dropdown-focus: var(--color-background-layer-01);
2338
+ --component-dropdown-secondary-hover: #ebe7dd;
2339
+ --component-dropdown-secondary-focus: var(--color-background-layer-02);
2340
+ --component-dropdown-list-item-hover: #ebe7dd;
2341
+ --component-dropdown-list-item-focus: var(--color-background-layer-01);
2342
+ --component-dropdown-list-item-secondary-hover: #ebe7dd;
2343
+ --component-dropdown-list-item-secondary-focus: var(--color-background-layer-02);
2344
+ }
2345
+
2346
+ .tds-mode-dark,
2347
+ .scania .tds-mode-dark,
2348
+ .scania.tds-mode-dark,
2349
+ .scania .tl-mode-dark,
2350
+ .scania.tl-mode-dark {
2351
+ --component-dropdown-hover: var(--color-background-layer-02);
2352
+ --component-dropdown-focus: var(--color-background-layer-02);
2353
+ --component-dropdown-secondary-hover: var(--color-background-layer-03);
2354
+ --component-dropdown-secondary-focus: var(--color-background-layer-03);
2355
+ --component-dropdown-list-item-hover: var(--color-background-layer-02);
2356
+ --component-dropdown-list-item-focus: var(--color-background-layer-02);
1956
2357
  --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
1957
2358
  --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
1958
- --component-dropdown-list-item-focus: var(--color-background-layer-02);
1959
- --component-dropdown-list-item-hover: var(--color-background-layer-02);
2359
+ }
2360
+
2361
+ .traton .tds-mode-dark,
2362
+ .traton.tds-mode-dark,
2363
+ .traton .tl-mode-dark,
2364
+ .traton.tl-mode-dark {
2365
+ --component-dropdown-hover: var(--color-background-layer-02);
2366
+ --component-dropdown-focus: var(--color-background-layer-01);
1960
2367
  --component-dropdown-secondary-hover: var(--color-background-layer-03);
1961
- --component-dropdown-secondary-focus: var(--color-background-layer-03);
1962
- --component-dropdown-focus: var(--color-background-surface-300);
1963
- --component-dropdown-hover: var(--color-background-surface-100);
2368
+ --component-dropdown-secondary-focus: var(--color-background-layer-02);
2369
+ --component-dropdown-list-item-hover: var(--color-background-layer-02);
2370
+ --component-dropdown-list-item-focus: var(--color-background-layer-01);
2371
+ --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
2372
+ --component-dropdown-list-item-secondary-focus: var(--color-background-layer-02);
1964
2373
  }
1965
2374
 
1966
2375
  .tl-dropdown-option {
@@ -2571,7 +2980,7 @@ body {
2571
2980
  scrollbar-width: var(--tl-scrollbar-width-standard);
2572
2981
  }
2573
2982
  }
2574
- .tds-mode-dark .tl-dropdown__list {
2983
+ .tl-mode-dark .tl-dropdown__list {
2575
2984
  box-shadow: none;
2576
2985
  }
2577
2986
  .tl-dropdown--dropup .tl-dropdown__list {
@@ -2825,65 +3234,47 @@ body {
2825
3234
  /**
2826
3235
  * Do not edit directly, this file was auto-generated.
2827
3236
  */
2828
- .tl-footer,
2829
- tds-footer {
2830
- --component-footer-text-color-copyright: var(--color-foreground-text-soft);
2831
- --component-footer-text-color-link-text: var(--color-brand-primary-50);
2832
- --component-footer-primary: var(--scania-color-blue-900);
2833
- --component-footer-border: var(--scania-color-blue-800);
3237
+ :root,
3238
+ .tds-mode-light,
3239
+ .scania .tds-mode-light,
3240
+ .scania.tds-mode-light,
3241
+ .scania .tl-mode-light,
3242
+ .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);
2834
3247
  }
2835
3248
 
2836
- :root .tl-footer,
2837
- :root tds-footer,
2838
- .scania .tl-footer,
2839
- .scania tds-footer {
2840
- --component-footer-primary: var(--scania-color-blue-900);
2841
- --component-footer-border: var(--scania-color-blue-700);
2842
- --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
2843
- --component-footer-text-color-link-text: var(--color-foreground-text-brand);
2844
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
2845
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
2846
- }
2847
- :root .tds-mode-light tds-footer,
2848
- :root .tds-mode-light .tl-footer,
2849
- .scania .tds-mode-light tds-footer,
2850
- .scania .tds-mode-light .tl-footer {
2851
- --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
2852
- --component-footer-text-color-link-text: var(--color-foreground-text-brand);
2853
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
2854
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
2855
- }
2856
- :root .tds-mode-dark tds-footer,
2857
- :root .tds-mode-dark .tl-footer,
2858
- .scania .tds-mode-dark tds-footer,
2859
- .scania .tds-mode-dark .tl-footer {
2860
- --component-footer-text-color-copyright: var(--color-foreground-text-soft);
2861
- --component-footer-text-color-link-text: var(--color-brand-primary-50);
2862
- --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
2863
- --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
2864
- }
2865
-
2866
- .traton tds-footer,
2867
- .traton .tl-footer {
3249
+ .traton .tds-mode-light,
3250
+ .traton.tds-mode-light,
3251
+ .traton .tl-mode-light,
3252
+ .traton.tl-mode-light {
3253
+ --component-footer-border: var(--traton-color-transparent-invisible-light);
2868
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);
3257
+ }
3258
+
3259
+ .tds-mode-dark,
3260
+ .scania .tds-mode-dark,
3261
+ .scania.tds-mode-dark,
3262
+ .scania .tl-mode-dark,
3263
+ .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);
3268
+ }
3269
+
3270
+ .traton .tds-mode-dark,
3271
+ .traton.tds-mode-dark,
3272
+ .traton .tl-mode-dark,
3273
+ .traton.tl-mode-dark {
2869
3274
  --component-footer-border: var(--traton-color-transparent-invisible-light);
2870
- --component-footer-text-color-copyright: var(--traton-color-transparent-600);
2871
- --component-footer-text-color-link-text: var(--color-foreground-text-strong);
2872
- --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
2873
- --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
2874
- }
2875
- .traton .tds-mode-light tds-footer,
2876
- .traton .tds-mode-light .tl-footer {
2877
- --component-footer-text-color-copyright: var(--traton-color-transparent-600);
2878
- --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
2879
- --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
2880
- }
2881
- .traton .tds-mode-dark tds-footer,
2882
- .traton .tds-mode-dark .tl-footer {
2883
- --component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
2884
3275
  --component-footer-primary: var(--traton-color-blue-1000);
2885
- --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
2886
- --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3276
+ --component-footer-color-text-link-default: var(--color-text-strong);
3277
+ --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
2887
3278
  }
2888
3279
 
2889
3280
  .tl-footer {
@@ -3158,107 +3549,193 @@ tds-footer {
3158
3549
  /**
3159
3550
  * Do not edit directly, this file was auto-generated.
3160
3551
  */
3161
- .scania tds-header,
3162
- .scania .tl-header {
3163
- /* State & interaction colors */
3164
- --component-header-color-background-open: var(--color-foreground-border-accent-focus);
3165
- --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
3166
- --component-header-dropdown-item-background: var(--color-background-layer-02);
3167
- --component-header-avatar-item-background: var(--color-background-layer-02);
3168
- --component-header-app-launcher-meny-background: var(--color-background-layer-02);
3169
- /* Sizing & spacing */
3170
- --component-header-brand-logo-size: 30px;
3171
- --component-header-space-profile-padding: 16px;
3172
- --component-header-item-image-size: 34px;
3173
- --component-header-item-image-left: 10px;
3174
- --component-header-item-width: none;
3175
- --component-header-item-border-right: 1px solid var(--header-basic-element-border);
3176
- /* Borders */
3177
- --component-header-border: none;
3178
- /* Typography */
3179
- --component-header-font-family-headline: var(--scania-font-family-display);
3180
- --component-header-font-weight: var(--scania-font-weight-regular);
3181
- --component-header-text-transform: none;
3182
- }
3183
- .scania {
3184
- /* ── Light-mode overrides ───────────────────── */
3185
- }
3186
- .scania .tds-mode-light tds-header,
3187
- .scania .tds-mode-light .tl-header {
3188
- --component-header-color-background: var(--color-brand-primary-800);
3189
- --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
3190
- --component-header-color-background-hover: var(--color-brand-primary-700);
3191
- --component-header-color-background-border: var(--color-brand-primary-700);
3192
- --component-header-color-background-pressed: var(--color-brand-neutral-white);
3193
- --component-header-color-background-selected: var(--color-brand-primary-700);
3194
- }
3195
- .scania {
3196
- /* ── Dark-mode overrides ───────────────────── */
3197
- }
3198
- .scania .tds-mode-dark tds-header,
3199
- .scania .tds-mode-dark .tl-header {
3200
- --component-header-color-background: var(--color-brand-primary-900);
3201
- --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
3202
- --component-header-color-background-hover: var(--color-brand-primary-800);
3203
- --component-header-color-background-border: var(--color-brand-primary-800);
3204
- --component-header-color-background-pressed: var(--color-brand-primary-800);
3205
- --component-header-color-background-selected: var(--color-brand-primary-800);
3552
+ :root,
3553
+ .tds-mode-light,
3554
+ .scania .tds-mode-light,
3555
+ .scania.tds-mode-light,
3556
+ .scania .tl-mode-light,
3557
+ .scania.tl-mode-light {
3558
+ --component-header-color-popovers: var(--color-background-layer-02);
3559
+ --component-header-color-icon-strong: var(--color-icon-inverse-strong);
3560
+ --component-header-color-icon-defined: var(--color-text-inverse-defined);
3561
+ --component-header-color-icon-selected: var(--color-icon-strong);
3562
+ --component-header-color-background-default: #041e42;
3563
+ --component-header-color-background-hover: #0f3263;
3564
+ --component-header-color-background-focus: #041e42;
3565
+ --component-header-color-background-pressed: #0f3263;
3566
+ --component-header-color-background-selected: #fff;
3567
+ --component-header-color-background-border: #0f3263;
3568
+ --component-header-color-background-profile: #0f3263;
3569
+ --component-header-color-expressive-mobile-menu-primary: #041e42;
3570
+ --component-header-color-expressive-mobile-menu-focus: #041e42;
3571
+ --component-header-color-expressive-mobile-menu-pressed: #0f3263;
3572
+ --component-header-color-expressive-mobile-menu-selected: #fff;
3573
+ --component-header-color-expressive-mobile-menu-selected-expressive: #041e42;
3574
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
3575
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
3576
+ --component-header-text-application-name-font-size: 14;
3577
+ --component-header-text-application-name-line-height: 16;
3578
+ --component-header-text-application-name-text-transform: none;
3579
+ --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
3580
+ --component-header-text-item-font-weight: var(--scania-font-weight-bold);
3581
+ --component-header-text-item-font-size: 14;
3582
+ --component-header-text-item-line-height: 16;
3583
+ --component-header-text-item-letter-spacing: -0.14;
3584
+ --component-header-text-item-text-transform: none;
3585
+ --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
3586
+ --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
3587
+ --component-header-text-item-selected-font-size: 14;
3588
+ --component-header-text-item-selected-line-height: 16;
3589
+ --component-header-text-item-selected-letter-spacing: -0.14;
3590
+ --component-header-text-item-selected-text-transform: none;
3591
+ --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
3592
+ --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
3593
+ --component-header-text-item-profile-font-size: 14;
3594
+ --component-header-text-item-profile-line-height: 16;
3595
+ --component-header-text-item-profile-letter-spacing: -0.14;
3596
+ --component-header-text-item-profile-text-transform: none;
3597
+ --component-header-space-profile-padding: var(--scania-unit-16);
3598
+ --component-header-space-profile-size: var(--scania-unit-32);
3206
3599
  }
3207
3600
 
3208
- .traton tds-header,
3209
- .traton .tl-header {
3210
- /* Base colors */
3211
- --component-header-color-background: var(--color-background-base);
3601
+ .traton .tds-mode-light,
3602
+ .traton.tds-mode-light,
3603
+ .traton .tl-mode-light,
3604
+ .traton.tl-mode-light {
3605
+ --component-header-color-popovers: var(--color-background-layer-01);
3606
+ --component-header-color-icon-strong: var(--color-icon-strong);
3607
+ --component-header-color-icon-defined: var(--color-icon-defined);
3608
+ --component-header-color-icon-selected: var(--color-icon-strong);
3609
+ --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
3212
3610
  --component-header-color-background-hover: var(--color-background-layer-01);
3213
- --component-header-color-background-open: transparent;
3214
- --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
3611
+ --component-header-color-background-focus: var(--color-background-base);
3612
+ --component-header-color-background-pressed: var(--color-background-layer-01);
3613
+ --component-header-color-background-selected: var(--color-background-base);
3215
3614
  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
3216
- --component-header-color-background-pressed: var(--color-background-base);
3217
- --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
3218
- /* Dropdown & launcher */
3219
- --component-header-dropdown-item-background: var(--color-background-layer-01);
3220
- --component-header-avatar-item-background: var(--color-background-layer-01);
3221
- --component-header-app-launcher-meny-background: var(--color-background-layer-01);
3222
- /* Sizing & spacing */
3223
- --component-header-brand-logo-size: 106px;
3224
- --component-header-space-profile-padding: 20px;
3225
- --component-header-item-image-size: 24px;
3226
- --component-header-item-image-left: 15px;
3227
- --component-header-item-width: 122px;
3228
- --component-header-item-border-right: none;
3229
- /* Borders */
3230
- --component-header-border: 2px solid var(--header-nav-item-border-active);
3231
- /* Typography */
3232
- --component-header-font-family-headline: var(--traton-font-family-display);
3233
- --component-header-font-weight: var(--traton-font-weight-medium);
3234
- --component-header-text-transform: uppercase;
3235
- }
3236
- .traton {
3237
- /* ── Light-mode overrides ───────────────────── */
3238
- }
3239
- .traton .tds-mode-light tds-header,
3240
- .traton .tds-mode-light .tl-header {
3241
- --component-header-color-background-selected: var(--color-background-layer-01);
3242
- }
3243
- .traton {
3244
- /* ── Dark-mode overrides ───────────────────── */
3245
- }
3246
- .traton .tds-mode-dark tds-header,
3247
- .traton .tds-mode-dark .tl-header {
3248
- --component-header-color-background-selected: var(--color-background-surface-100);
3249
- }
3250
-
3251
- /*
3252
- Tegel Lite specific overrides
3253
- Keep this in last to ensure it has the highest specificity for Tegel Lite
3254
- */
3255
- .scania .tl-header {
3256
- --component-header-item-width: 30px;
3257
- --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
3615
+ --component-header-color-background-profile: #ebe7dd;
3616
+ --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
3617
+ --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
3618
+ --component-header-color-expressive-mobile-menu-pressed: #ebe7dd;
3619
+ --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
3620
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(
3621
+ --traton-color-base-white
3622
+ );
3623
+ --component-header-text-application-name-font-family: var(--traton-font-family-display);
3624
+ --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
3625
+ --component-header-text-application-name-font-size: 14;
3626
+ --component-header-text-application-name-line-height: 16;
3627
+ --component-header-text-application-name-text-transform: none;
3628
+ --component-header-text-item-font-family: var(--traton-font-family-default);
3629
+ --component-header-text-item-font-weight: var(--traton-font-weight-medium);
3630
+ --component-header-text-item-font-size: 14;
3631
+ --component-header-text-item-line-height: 16;
3632
+ --component-header-text-item-text-transform: none;
3633
+ --component-header-text-item-selected-font-family: var(--traton-font-family-default);
3634
+ --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
3635
+ --component-header-text-item-selected-font-size: 14;
3636
+ --component-header-text-item-selected-line-height: 18;
3637
+ --component-header-text-item-selected-text-transform: none;
3638
+ --component-header-text-item-profile-font-family: var(--traton-font-family-default);
3639
+ --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
3640
+ --component-header-text-item-profile-font-size: 12;
3641
+ --component-header-text-item-profile-line-height: 18;
3642
+ --component-header-text-item-profile-text-transform: none;
3643
+ --component-header-space-profile-padding: var(--traton-unit-20);
3644
+ --component-header-space-profile-size: var(--traton-unit-24);
3258
3645
  }
3259
3646
 
3260
- .traton .tl-header {
3261
- --component-header-dropdown-box-shadow: none;
3647
+ .tds-mode-dark,
3648
+ .scania .tds-mode-dark,
3649
+ .scania.tds-mode-dark,
3650
+ .scania .tl-mode-dark,
3651
+ .scania.tl-mode-dark {
3652
+ --component-header-color-popovers: var(--color-background-layer-02);
3653
+ --component-header-color-icon-strong: var(--color-icon-strong);
3654
+ --component-header-color-icon-defined: var(--color-text-defined);
3655
+ --component-header-color-icon-selected: var(--color-icon-strong);
3656
+ --component-header-color-background-default: #001533;
3657
+ --component-header-color-background-hover: #041e42;
3658
+ --component-header-color-background-focus: #001533;
3659
+ --component-header-color-background-pressed: #041e42;
3660
+ --component-header-color-background-selected: #041e42;
3661
+ --component-header-color-background-border: #041e42;
3662
+ --component-header-color-background-profile: #041e42;
3663
+ --component-header-color-expressive-mobile-menu-primary: var(--scania-color-blue-900);
3664
+ --component-header-color-expressive-mobile-menu-focus: var(--scania-color-blue-900);
3665
+ --component-header-color-expressive-mobile-menu-pressed: var(--scania-color-blue-800);
3666
+ --component-header-color-expressive-mobile-menu-selected: #041e42;
3667
+ --component-header-color-expressive-mobile-menu-selected-expressive: #001533;
3668
+ --component-header-text-application-name-font-family: var(--scania-font-family-display);
3669
+ --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
3670
+ --component-header-text-application-name-font-size: 14;
3671
+ --component-header-text-application-name-line-height: 16;
3672
+ --component-header-text-application-name-text-transform: none;
3673
+ --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
3674
+ --component-header-text-item-font-weight: var(--scania-font-weight-bold);
3675
+ --component-header-text-item-font-size: 14;
3676
+ --component-header-text-item-line-height: 16;
3677
+ --component-header-text-item-letter-spacing: -0.14;
3678
+ --component-header-text-item-text-transform: none;
3679
+ --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
3680
+ --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
3681
+ --component-header-text-item-selected-font-size: 14;
3682
+ --component-header-text-item-selected-line-height: 16;
3683
+ --component-header-text-item-selected-letter-spacing: -0.14;
3684
+ --component-header-text-item-selected-text-transform: none;
3685
+ --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
3686
+ --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
3687
+ --component-header-text-item-profile-font-size: 14;
3688
+ --component-header-text-item-profile-line-height: 16;
3689
+ --component-header-text-item-profile-letter-spacing: -0.14;
3690
+ --component-header-text-item-profile-text-transform: none;
3691
+ --component-header-space-profile-padding: var(--scania-unit-16);
3692
+ --component-header-space-profile-size: var(--scania-unit-32);
3693
+ }
3694
+
3695
+ .traton .tds-mode-dark,
3696
+ .traton.tds-mode-dark,
3697
+ .traton .tl-mode-dark,
3698
+ .traton.tl-mode-dark {
3699
+ --component-header-color-popovers: var(--color-background-layer-01);
3700
+ --component-header-color-icon-strong: var(--color-icon-strong);
3701
+ --component-header-color-icon-defined: var(--color-icon-defined);
3702
+ --component-header-color-icon-selected: var(--color-icon-strong);
3703
+ --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
3704
+ --component-header-color-background-hover: var(--color-background-layer-01);
3705
+ --component-header-color-background-focus: var(--color-background-base);
3706
+ --component-header-color-background-pressed: #002429;
3707
+ --component-header-color-background-selected: var(--color-background-base);
3708
+ --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
3709
+ --component-header-color-background-profile: #002429;
3710
+ --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
3711
+ --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
3712
+ --component-header-color-expressive-mobile-menu-pressed: #002429;
3713
+ --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
3714
+ --component-header-color-expressive-mobile-menu-selected-expressive: var(
3715
+ --traton-color-base-white
3716
+ );
3717
+ --component-header-text-application-name-font-family: var(--traton-font-family-display);
3718
+ --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
3719
+ --component-header-text-application-name-font-size: 14;
3720
+ --component-header-text-application-name-line-height: 16;
3721
+ --component-header-text-application-name-text-transform: none;
3722
+ --component-header-text-item-font-family: var(--traton-font-family-default);
3723
+ --component-header-text-item-font-weight: var(--traton-font-weight-medium);
3724
+ --component-header-text-item-font-size: 14;
3725
+ --component-header-text-item-line-height: 16;
3726
+ --component-header-text-item-text-transform: none;
3727
+ --component-header-text-item-selected-font-family: var(--traton-font-family-default);
3728
+ --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
3729
+ --component-header-text-item-selected-font-size: 14;
3730
+ --component-header-text-item-selected-line-height: 18;
3731
+ --component-header-text-item-selected-text-transform: none;
3732
+ --component-header-text-item-profile-font-family: var(--traton-font-family-default);
3733
+ --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
3734
+ --component-header-text-item-profile-font-size: 12;
3735
+ --component-header-text-item-profile-line-height: 18;
3736
+ --component-header-text-item-profile-text-transform: none;
3737
+ --component-header-space-profile-padding: var(--traton-unit-20);
3738
+ --component-header-space-profile-size: var(--traton-unit-24);
3262
3739
  }
3263
3740
 
3264
3741
  .tl-header {
@@ -3316,7 +3793,7 @@ tds-footer {
3316
3793
  .scania {
3317
3794
  /* Light mode - explicit light mode class */
3318
3795
  }
3319
- .scania .tds-mode-light .tl-header {
3796
+ .scania .tl-mode-light .tl-header {
3320
3797
  --header-background: var(--color-brand-primary-800);
3321
3798
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
3322
3799
  --header-item-hover: var(--color-brand-primary-700);
@@ -3327,7 +3804,7 @@ tds-footer {
3327
3804
  .scania {
3328
3805
  /* Dark mode - override with dark colors */
3329
3806
  }
3330
- .scania .tds-mode-dark .tl-header {
3807
+ .scania .tl-mode-dark .tl-header {
3331
3808
  --header-background: var(--color-brand-primary-900);
3332
3809
  --header-nav-item: var(--color-foreground-icon-strong);
3333
3810
  --header-item-hover: var(--color-brand-primary-800);
@@ -3352,7 +3829,7 @@ tds-footer {
3352
3829
  --header-basic-element-background-selected: var(--color-brand-primary-700);
3353
3830
  }
3354
3831
 
3355
- .traton .tds-mode-dark .tl-header {
3832
+ .traton .tl-mode-dark .tl-header {
3356
3833
  /* Brand logo - White for dark mode */
3357
3834
  --header-logotype-local: var(--traton-logotype-white-svg-local);
3358
3835
  --header-logotype-cdn: var(--traton-logotype-white-svg);
@@ -3364,7 +3841,7 @@ tds-footer {
3364
3841
  --header-basic-element-background-pressed: var(--color-background-base);
3365
3842
  --header-basic-element-background-selected: var(--color-background-surface-100);
3366
3843
  }
3367
- .traton .tds-mode-light .tl-header {
3844
+ .traton .tl-mode-light .tl-header {
3368
3845
  /* Brand logo - Black for light mode */
3369
3846
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3370
3847
  --header-logotype-cdn: var(--traton-logotype-black-svg);
@@ -4460,8 +4937,8 @@ tds-footer {
4460
4937
  mask-image: var(--icon-gift-svg);
4461
4938
  background-color: currentcolor;
4462
4939
  }
4463
- .tl-icon--gift inactive {
4464
- mask-image: var(--icon-gift inactive-svg);
4940
+ .tl-icon--gift_inactive {
4941
+ mask-image: var(--icon-gift_inactive-svg);
4465
4942
  background-color: currentcolor;
4466
4943
  }
4467
4944
  .tl-icon--global {
@@ -5429,34 +5906,53 @@ tds-footer {
5429
5906
  */
5430
5907
  :root,
5431
5908
  .tds-mode-light,
5432
- .scania .tds-mode-light {
5433
- --component-shadow-hover: var(--scania-color-transparent-shadow-250);
5909
+ .scania .tds-mode-light,
5910
+ .scania.tds-mode-light,
5911
+ .scania .tl-mode-light,
5912
+ .scania.tl-mode-light {
5913
+ --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
5434
5914
  --component-shadow-default: var(--scania-color-transparent-shadow-150);
5915
+ --component-shadow-hover: var(--scania-color-transparent-shadow-250);
5435
5916
  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
5436
- --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
5437
- --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
5438
5917
  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
5918
+ --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
5919
+ }
5920
+
5921
+ .traton .tds-mode-light,
5922
+ .traton.tds-mode-light,
5923
+ .traton .tl-mode-light,
5924
+ .traton.tl-mode-light {
5925
+ --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
5926
+ --component-shadow-default: var(--traton-color-transparent-invisible-dark);
5927
+ --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
5928
+ --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
5929
+ --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
5930
+ --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
5439
5931
  }
5440
5932
 
5441
5933
  .tds-mode-dark,
5442
- .scania .tds-mode-dark {
5443
- --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
5934
+ .scania .tds-mode-dark,
5935
+ .scania.tds-mode-dark,
5936
+ .scania .tl-mode-dark,
5937
+ .scania.tl-mode-dark {
5938
+ --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
5444
5939
  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
5940
+ --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
5445
5941
  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
5446
- --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
5447
- --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
5448
5942
  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
5943
+ --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
5449
5944
  }
5450
5945
 
5451
- .traton,
5452
- .traton .tds-mode-light,
5453
- .traton .tds-mode-dark {
5454
- --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
5946
+ .traton .tds-mode-dark,
5947
+ .traton.tds-mode-dark,
5948
+ .traton .tl-mode-dark,
5949
+ .traton.tl-mode-dark {
5950
+ --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
5455
5951
  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
5952
+ --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
5456
5953
  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
5457
- --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
5458
- --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
5459
5954
  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
5955
+ --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
5460
5956
  }
5461
5957
 
5462
5958
  /* Component variables */
@@ -6082,71 +6578,160 @@ tds-footer {
6082
6578
  /**
6083
6579
  * Do not edit directly, this file was auto-generated.
6084
6580
  */
6085
- :root .tl-side-menu,
6086
- :root tds-side-menu,
6087
- .scania .tl-side-menu,
6088
- .scania tds-side-menu {
6089
- --component-side-menu-color-divider: var(--color-foreground-border-discrete);
6090
- --component-side-menu-radius-corner: var(--scania-unit-0);
6091
- --component-side-menu-size-close-icon-size: var(--scania-unit-20);
6581
+ :root,
6582
+ .tds-mode-light,
6583
+ .scania .tds-mode-light,
6584
+ .scania.tds-mode-light,
6585
+ .scania .tl-mode-light,
6586
+ .scania.tl-mode-light {
6587
+ --component-side-menu-color-divider: var(--color-border-discrete);
6092
6588
  --component-side-menu-size-icon: var(--scania-unit-24);
6093
- --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: 22px;
6094
- --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--scania-unit-16);
6095
- --component-side-menu-space-sub-menu-item-left: 22px;
6096
- --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
6589
+ --component-side-menu-size-icon-close: var(--scania-unit-20);
6590
+ --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
6591
+ --component-side-menu-space-top-level-left: var(--scania-unit-0);
6592
+ --component-side-menu-space-top-level-top: var(--scania-unit-0);
6593
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--scania-unit-0);
6594
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
6595
+ --component-side-menu-space-sub-menu-item-left: 22;
6596
+ --component-side-menu-space-sub-menu-item-top-bottom: 22;
6597
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--scania-unit-16);
6598
+ --component-side-menu-space-sub-menu-item-selected-marker-height: 68;
6097
6599
  --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
6098
- --component-side-menu-space-sub-menu-item-profile-top-bottom: 18px;
6099
- --component-side-menu-space-sub-menu-item-selected-marker-height: 68px;
6100
- --component-side-menu-space-sub-menu-item-top-and-bottom: 22px;
6600
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
6601
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: 18;
6602
+ --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
6603
+ --component-side-menu-space-sub-page-left-with-icon: 58;
6101
6604
  --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
6102
6605
  --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
6103
- --component-side-menu-space-sub-page-left-with-icon: 58px;
6606
+ --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
6104
6607
  --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
6105
6608
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6106
- --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
6107
- --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
6108
- --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
6109
- --component-side-menu-space-top-level-left: var(--scania-unit-0);
6110
- --component-side-menu-space-top-level-top: var(--scania-unit-0);
6111
- --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
6609
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6610
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6611
+ --component-side-menu-radius-default: var(--scania-unit-0);
6112
6612
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6113
6613
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6114
- --component-side-menu-text-items-font-size: 14px;
6115
- --component-side-menu-text-items-line-height: 16px;
6116
- --component-side-menu-text-items-letter-spacing: -0.14px;
6614
+ --component-side-menu-text-items-font-size: 14;
6615
+ --component-side-menu-text-items-line-height: 16;
6616
+ --component-side-menu-text-items-letter-spacing: -0.14;
6117
6617
  --component-side-menu-text-items-text-transform: none;
6118
6618
  }
6119
6619
 
6120
- .traton .tl-side-menu,
6121
- .traton tds-side-menu {
6620
+ .traton .tds-mode-light,
6621
+ .traton.tds-mode-light,
6622
+ .traton .tl-mode-light,
6623
+ .traton.tl-mode-light {
6122
6624
  --component-side-menu-color-divider: var(--traton-color-transparent-invisible-light);
6123
- --component-side-menu-radius-corner: var(--traton-unit-8);
6124
- --component-side-menu-size-close-icon-size: var(--traton-unit-20);
6125
6625
  --component-side-menu-size-icon: var(--traton-unit-16);
6126
- --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: var(--traton-unit-12);
6127
- --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--traton-unit-12);
6626
+ --component-side-menu-size-icon-close: var(--traton-unit-20);
6627
+ --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
6628
+ --component-side-menu-space-top-level-left: var(--traton-unit-16);
6629
+ --component-side-menu-space-top-level-top: 14;
6630
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--traton-unit-16);
6631
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
6128
6632
  --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
6129
- --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
6633
+ --component-side-menu-space-sub-menu-item-top-bottom: var(--traton-unit-8);
6634
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--traton-unit-12);
6635
+ --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
6130
6636
  --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
6637
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
6131
6638
  --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
6132
- --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
6133
- --component-side-menu-space-sub-menu-item-top-and-bottom: var(--traton-unit-8);
6134
- --component-side-menu-space-sub-page-left-no-icon: 14px;
6135
- --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
6136
- --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
6137
- --component-side-menu-space-sub-page-selected-marker-height: 32px;
6138
- --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
6139
6639
  --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
6640
+ --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
6641
+ --component-side-menu-space-sub-page-left-no-icon: 14;
6642
+ --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
6140
6643
  --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
6644
+ --component-side-menu-space-sub-page-selected-marker-height: 34;
6645
+ --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
6646
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: var(
6647
+ --traton-unit-12
6648
+ );
6649
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6650
+ --traton-unit-12
6651
+ );
6652
+ --component-side-menu-radius-default: var(--traton-unit-8);
6653
+ --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6654
+ --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6655
+ --component-side-menu-text-items-font-size: 14;
6656
+ --component-side-menu-text-items-line-height: 18;
6657
+ --component-side-menu-text-items-text-transform: none;
6658
+ }
6659
+
6660
+ .tds-mode-dark,
6661
+ .scania .tds-mode-dark,
6662
+ .scania.tds-mode-dark,
6663
+ .scania .tl-mode-dark,
6664
+ .scania.tl-mode-dark {
6665
+ --component-side-menu-color-divider: var(--color-border-discrete);
6666
+ --component-side-menu-size-icon: var(--scania-unit-24);
6667
+ --component-side-menu-size-icon-close: var(--scania-unit-20);
6668
+ --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
6669
+ --component-side-menu-space-top-level-left: var(--scania-unit-0);
6670
+ --component-side-menu-space-top-level-top: var(--scania-unit-0);
6671
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--scania-unit-0);
6672
+ --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
6673
+ --component-side-menu-space-sub-menu-item-left: 22;
6674
+ --component-side-menu-space-sub-menu-item-top-bottom: 22;
6675
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--scania-unit-16);
6676
+ --component-side-menu-space-sub-menu-item-selected-marker-height: 68;
6677
+ --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
6678
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
6679
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: 18;
6680
+ --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
6681
+ --component-side-menu-space-sub-page-left-with-icon: 58;
6682
+ --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
6683
+ --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
6684
+ --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
6685
+ --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
6686
+ --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6687
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6688
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6689
+ --component-side-menu-radius-default: var(--scania-unit-0);
6690
+ --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6691
+ --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6692
+ --component-side-menu-text-items-font-size: 14;
6693
+ --component-side-menu-text-items-line-height: 16;
6694
+ --component-side-menu-text-items-letter-spacing: -0.14;
6695
+ --component-side-menu-text-items-text-transform: none;
6696
+ }
6697
+
6698
+ .traton .tds-mode-dark,
6699
+ .traton.tds-mode-dark,
6700
+ .traton .tl-mode-dark,
6701
+ .traton.tl-mode-dark {
6702
+ --component-side-menu-color-divider: var(--traton-color-transparent-invisible-dark);
6703
+ --component-side-menu-size-icon: var(--traton-unit-16);
6704
+ --component-side-menu-size-icon-close: var(--traton-unit-20);
6141
6705
  --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
6142
6706
  --component-side-menu-space-top-level-left: var(--traton-unit-16);
6143
- --component-side-menu-space-top-level-top: var(--traton-unit-14);
6707
+ --component-side-menu-space-top-level-top: 14;
6708
+ --component-side-menu-space-top-level-horizontal-gap-padding: var(--traton-unit-16);
6144
6709
  --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
6710
+ --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
6711
+ --component-side-menu-space-sub-menu-item-top-bottom: var(--traton-unit-8);
6712
+ --component-side-menu-space-sub-menu-item-right-padding-chevron: var(--traton-unit-12);
6713
+ --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
6714
+ --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
6715
+ --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
6716
+ --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
6717
+ --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
6718
+ --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
6719
+ --component-side-menu-space-sub-page-left-no-icon: 14;
6720
+ --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
6721
+ --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
6722
+ --component-side-menu-space-sub-page-selected-marker-height: 34;
6723
+ --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
6724
+ --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: var(
6725
+ --traton-unit-12
6726
+ );
6727
+ --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6728
+ --traton-unit-12
6729
+ );
6730
+ --component-side-menu-radius-default: var(--traton-unit-8);
6145
6731
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6146
6732
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6147
- --component-side-menu-text-items-font-size: 14px;
6148
- --component-side-menu-text-items-line-height: 18px;
6149
- --component-side-menu-text-items-letter-spacing: 0;
6733
+ --component-side-menu-text-items-font-size: 14;
6734
+ --component-side-menu-text-items-line-height: 18;
6150
6735
  --component-side-menu-text-items-text-transform: none;
6151
6736
  }
6152
6737
 
@@ -6691,6 +7276,8 @@ tds-footer {
6691
7276
  --slider-disabled-text: var(--color-foreground-text-disabled);
6692
7277
  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
6693
7278
  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
7279
+ --slider-input-background: var(--color-background-layer-01);
7280
+ --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
6694
7281
  }
6695
7282
 
6696
7283
  .tl-slider,
@@ -6700,6 +7287,7 @@ tds-footer {
6700
7287
 
6701
7288
  .traton .tl-slider {
6702
7289
  --slider-border-radius: 4px;
7290
+ --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
6703
7291
  }
6704
7292
 
6705
7293
  .tl-slider {
@@ -6745,7 +7333,7 @@ tds-footer {
6745
7333
  margin-bottom: 2px;
6746
7334
  margin-left: 0;
6747
7335
  }
6748
- :has(input[type=range]:disabled) .tl-slider__label {
7336
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__label {
6749
7337
  color: var(--slider-disabled-text);
6750
7338
  }
6751
7339
 
@@ -6825,7 +7413,7 @@ tds-footer {
6825
7413
  flex-shrink: 0;
6826
7414
  align-self: center;
6827
7415
  }
6828
- :has(input[type=range]:disabled) .tl-slider__value {
7416
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value {
6829
7417
  color: var(--slider-disabled-text);
6830
7418
  }
6831
7419
 
@@ -6836,6 +7424,7 @@ tds-footer {
6836
7424
  min-width: auto;
6837
7425
  margin-left: 0;
6838
7426
  align-self: center;
7427
+ border-radius: var(--slider-border-radius);
6839
7428
  }
6840
7429
  .tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
6841
7430
  width: 16px;
@@ -6850,6 +7439,11 @@ tds-footer {
6850
7439
  padding: 12px;
6851
7440
  text-align: center;
6852
7441
  appearance: textfield;
7442
+ border: none;
7443
+ background-color: var(--slider-input-background);
7444
+ color: var(--slider-input-value);
7445
+ border-radius: var(--slider-border-radius);
7446
+ box-shadow: inset var(--slider-input-box-shadow);
6853
7447
  }
6854
7448
  .tl-slider__input-wrapper .tl-slider__input-field--decimal {
6855
7449
  width: 56px;
@@ -6900,7 +7494,7 @@ tds-footer {
6900
7494
  .tl-slider__thumb:hover .tl-slider__value-tooltip {
6901
7495
  display: block;
6902
7496
  }
6903
- :has(input[type=range]:disabled) .tl-slider__value-tooltip {
7497
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
6904
7498
  display: none;
6905
7499
  }
6906
7500
 
@@ -6957,11 +7551,11 @@ tds-footer {
6957
7551
  width: 20px;
6958
7552
  height: 20px;
6959
7553
  }
6960
- :has(input[type=range]:disabled) .tl-slider__thumb-inner {
7554
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
6961
7555
  background-color: var(--slider-disabled);
6962
7556
  cursor: not-allowed;
6963
7557
  }
6964
- :has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
7558
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
6965
7559
  display: none;
6966
7560
  }
6967
7561
 
@@ -6992,7 +7586,7 @@ tds-footer {
6992
7586
  left: 50%;
6993
7587
  transform: translate(-50%, -50%);
6994
7588
  }
6995
- :has(input[type=range]:disabled) .tl-slider__value-divider-line {
7589
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
6996
7590
  background-color: var(--slider-disabled);
6997
7591
  }
6998
7592
 
@@ -7014,7 +7608,7 @@ tds-footer {
7014
7608
  user-select: none;
7015
7609
  color: var(--slider-divider-values);
7016
7610
  }
7017
- :has(input[type=range]:disabled) .tl-slider__value-divider-label {
7611
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
7018
7612
  color: var(--slider-disabled-text);
7019
7613
  }
7020
7614
 
@@ -7027,7 +7621,7 @@ tds-footer {
7027
7621
  top: -1px;
7028
7622
  z-index: 1;
7029
7623
  }
7030
- :has(input[type=range]:disabled) .tl-slider__track-fill {
7624
+ .tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
7031
7625
  background-color: var(--slider-disabled);
7032
7626
  }
7033
7627
 
@@ -7035,28 +7629,20 @@ tds-footer {
7035
7629
  display: none;
7036
7630
  }
7037
7631
 
7038
- /**
7039
- * Do not edit directly, this file was auto-generated.
7040
- */
7041
- .tl-spinner,
7042
- tds-spinner {
7043
- --component-spinner-color: var(--color-system-info-default);
7044
- }
7045
-
7046
7632
  /* Component variables */
7047
7633
  .tl-spinner {
7048
- --tl-spinner-background: var(--component-spinner-color);
7049
- --tl-spinner-background-inverted: var(--color-brand-neutral-white);
7634
+ --tl-spinner-background: var(--component-spinner-background-default);
7635
+ --tl-spinner-background-inverted: var(--component-spinner-background-default-inverse);
7050
7636
  --tl-spinner-speed: 1.8s;
7051
7637
  --tl-spinner-speed-lg: 2s;
7052
- --tl-spinner-radius-xs: 8px;
7053
- --tl-spinner-radius-sm: 12px;
7054
- --tl-spinner-radius-md: 26px;
7055
- --tl-spinner-radius-lg: 42px;
7056
- --tl-spinner-stroke-width-xs: 3px;
7057
- --tl-spinner-stroke-width-sm: 4px;
7058
- --tl-spinner-stroke-width-md: 6px;
7059
- --tl-spinner-stroke-width-lg: 8px;
7638
+ --tl-spinner-radius-xs: calc(var(--component-spinner-size-extra-small) / 2 * 1px);
7639
+ --tl-spinner-radius-sm: calc(var(--component-spinner-size-small) / 2 * 1px);
7640
+ --tl-spinner-radius-md: calc(var(--component-spinner-size-medium) / 2 * 1px);
7641
+ --tl-spinner-radius-lg: calc(var(--component-spinner-size-large) / 2 * 1px);
7642
+ --tl-spinner-stroke-width-xs: calc(var(--component-spinner-stroke-extra-small) * 1px);
7643
+ --tl-spinner-stroke-width-sm: calc(var(--component-spinner-stroke-small) * 1px);
7644
+ --tl-spinner-stroke-width-md: calc(var(--component-spinner-stroke-medium) * 1px);
7645
+ --tl-spinner-stroke-width-lg: calc(var(--component-spinner-stroke-large) * 1px);
7060
7646
  --tl-spinner-PI: 3.14159265358979;
7061
7647
  --tl-spinner-radius: var(--tl-spinner-radius-lg);
7062
7648
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
@@ -7124,8 +7710,34 @@ tds-spinner {
7124
7710
  /**
7125
7711
  * Do not edit directly, this file was auto-generated.
7126
7712
  */
7127
- .tl-stepper,
7128
- tds-stepper {
7713
+ :root,
7714
+ .tds-mode-light,
7715
+ .scania .tds-mode-light,
7716
+ .scania.tds-mode-light,
7717
+ .scania .tl-mode-light,
7718
+ .scania.tl-mode-light {
7719
+ --component-stepper-success: var(--color-system-success-default);
7720
+ }
7721
+
7722
+ .traton .tds-mode-light,
7723
+ .traton.tds-mode-light,
7724
+ .traton .tl-mode-light,
7725
+ .traton.tl-mode-light {
7726
+ --component-stepper-success: var(--color-system-success-default);
7727
+ }
7728
+
7729
+ .tds-mode-dark,
7730
+ .scania .tds-mode-dark,
7731
+ .scania.tds-mode-dark,
7732
+ .scania .tl-mode-dark,
7733
+ .scania.tl-mode-dark {
7734
+ --component-stepper-success: var(--color-system-success-default);
7735
+ }
7736
+
7737
+ .traton .tds-mode-dark,
7738
+ .traton.tds-mode-dark,
7739
+ .traton .tl-mode-dark,
7740
+ .traton.tl-mode-dark {
7129
7741
  --component-stepper-success: var(--color-system-success-default);
7130
7742
  }
7131
7743
 
@@ -7393,18 +8005,51 @@ tds-stepper {
7393
8005
  /**
7394
8006
  * Do not edit directly, this file was auto-generated.
7395
8007
  */
7396
- .tl-table,
7397
- tds-table {
8008
+ :root,
8009
+ .tds-mode-light,
8010
+ .scania .tds-mode-light,
8011
+ .scania.tds-mode-light,
8012
+ .scania .tl-mode-light,
8013
+ .scania.tl-mode-light {
8014
+ --component-table-cell: var(--color-background-layer-01);
8015
+ --component-table-cell-hover: #edeff3;
8016
+ --component-table-pagination-base: #e0e5eb;
8017
+ --component-table-pagination-dropdown: var(--color-background-base);
7398
8018
  --component-table-secondary-cell: var(--color-background-layer-02);
7399
- --component-table-pagination-dropdown: var(--color-background-layer-01);
7400
- --component-table-pagination-base: var(--color-background-surface-200);
7401
- --component-table-cell-hover: var(--color-background-surface-100);
8019
+ }
8020
+
8021
+ .traton .tds-mode-light,
8022
+ .traton.tds-mode-light,
8023
+ .traton .tl-mode-light,
8024
+ .traton.tl-mode-light {
8025
+ --component-table-cell: var(--color-background-layer-01);
8026
+ --component-table-cell-hover: #d6d4c9;
8027
+ --component-table-pagination-base: #d6d4c9;
8028
+ --component-table-pagination-dropdown: var(--color-background-base);
8029
+ --component-table-secondary-cell: var(--color-background-layer-02);
8030
+ }
8031
+
8032
+ .tds-mode-dark,
8033
+ .scania .tds-mode-dark,
8034
+ .scania.tds-mode-dark,
8035
+ .scania .tl-mode-dark,
8036
+ .scania.tl-mode-dark {
7402
8037
  --component-table-cell: var(--color-background-layer-01);
8038
+ --component-table-cell-hover: #1c222b;
8039
+ --component-table-pagination-base: #242c37;
8040
+ --component-table-pagination-dropdown: var(--color-background-layer-01);
8041
+ --component-table-secondary-cell: var(--color-background-layer-02);
7403
8042
  }
7404
8043
 
7405
- .traton .tl-table,
7406
- .traton tds-table {
7407
- --component-table-pagination-base: var(--color-background-surface-300);
8044
+ .traton .tds-mode-dark,
8045
+ .traton.tds-mode-dark,
8046
+ .traton .tl-mode-dark,
8047
+ .traton.tl-mode-dark {
8048
+ --component-table-cell: var(--color-background-layer-01);
8049
+ --component-table-cell-hover: #003137;
8050
+ --component-table-pagination-base: #004852;
8051
+ --component-table-pagination-dropdown: var(--color-background-layer-01);
8052
+ --component-table-secondary-cell: var(--color-background-layer-02);
7408
8053
  }
7409
8054
 
7410
8055
  .tl-table {
@@ -7463,7 +8108,7 @@ tds-table {
7463
8108
  --table-zebra-mode: var(--component-table-cell);
7464
8109
  }
7465
8110
 
7466
- .tds-mode-dark .tl-table.tl-table--secondary {
8111
+ .tl-mode-dark .tl-table.tl-table--secondary {
7467
8112
  --table-body-cell-hover: var(--color-background-surface-300);
7468
8113
  --table-body-row-hover: var(--color-background-surface-300);
7469
8114
  }
@@ -8758,7 +9403,20 @@ tds-table {
8758
9403
  .tl-text-field--no-min-width {
8759
9404
  min-width: auto;
8760
9405
  }
8761
- .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
9406
+ .tl-text-field:has(.tl-text-field__input:disabled) {
9407
+ cursor: not-allowed;
9408
+ }
9409
+ .tl-text-field .tl-icon {
9410
+ background-color: var(--text-field-affix);
9411
+ }
9412
+ :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
9413
+ background-color: var(--text-field-affix-disabled);
9414
+ }
9415
+
9416
+ .tl-text-field__input-wrapper {
9417
+ position: relative;
9418
+ }
9419
+ .tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
8762
9420
  content: "";
8763
9421
  position: absolute;
8764
9422
  top: 50%;
@@ -8773,18 +9431,6 @@ tds-table {
8773
9431
  transform: translateY(-50%);
8774
9432
  z-index: 1;
8775
9433
  }
8776
- .tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
8777
- top: calc(50% + 24px);
8778
- }
8779
- .tl-text-field:has(.tl-text-field__input:disabled) {
8780
- cursor: not-allowed;
8781
- }
8782
- .tl-text-field .tl-icon {
8783
- background-color: var(--text-field-affix);
8784
- }
8785
- :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
8786
- background-color: var(--text-field-affix-disabled);
8787
- }
8788
9434
 
8789
9435
  .tl-text-field__input {
8790
9436
  all: unset;
@@ -8928,6 +9574,7 @@ tds-table {
8928
9574
  letter-spacing: var(--detail-02-letter-spacing);
8929
9575
  text-transform: var(--detail-02-text-transform);
8930
9576
  position: absolute;
9577
+ top: 50%;
8931
9578
  left: var(--text-field-label-inside-left, 16px);
8932
9579
  color: var(--text-field-label-inside);
8933
9580
  pointer-events: none;
@@ -8936,18 +9583,6 @@ tds-table {
8936
9583
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
8937
9584
  z-index: 1;
8938
9585
  }
8939
- .tl-text-field__label {
8940
- /* Center label in input row before focus/fill */
8941
- }
8942
- .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__label {
8943
- top: 28px; /* half of 56px input height */
8944
- }
8945
- .tl-text-field--label-inside.tl-text-field--md .tl-text-field__label {
8946
- top: 24px; /* half of 48px input height */
8947
- }
8948
- .tl-text-field--label-inside.tl-text-field--sm .tl-text-field__label {
8949
- top: 20px; /* half of 40px input height */
8950
- }
8951
9586
  .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
8952
9587
  left: 44px;
8953
9588
  }
@@ -9072,12 +9707,9 @@ tds-table {
9072
9707
  position: absolute;
9073
9708
  left: 16px;
9074
9709
  top: 50%;
9075
- transform: translateY(calc(-50% - 1px));
9710
+ transform: translateY(-50%);
9076
9711
  z-index: 1;
9077
9712
  }
9078
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
9079
- transform: translateY(calc(-50% + 24px));
9080
- }
9081
9713
  :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
9082
9714
  color: var(--text-field-affix-disabled);
9083
9715
  }
@@ -9109,12 +9741,9 @@ tds-table {
9109
9741
  position: absolute;
9110
9742
  right: 16px;
9111
9743
  top: 50%;
9112
- transform: translateY(calc(-50% - 1px));
9744
+ transform: translateY(-50%);
9113
9745
  z-index: 1;
9114
9746
  }
9115
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
9116
- transform: translateY(calc(-50% + 24px));
9117
- }
9118
9747
  :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
9119
9748
  color: var(--text-field-affix-disabled);
9120
9749
  }
@@ -9126,38 +9755,6 @@ tds-table {
9126
9755
  :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
9127
9756
  background-color: var(--text-field-affix-disabled) !important;
9128
9757
  }
9129
-
9130
- .tl-text-field__suffix {
9131
- font-family: var(--detail-02-font-family);
9132
- font-size: var(--detail-02-font-size);
9133
- line-height: var(--detail-02-line-height);
9134
- font-weight: var(--detail-02-font-weight);
9135
- letter-spacing: var(--detail-02-letter-spacing);
9136
- text-transform: var(--detail-02-text-transform);
9137
- color: var(--text-field-affix);
9138
- align-self: center;
9139
- display: flex;
9140
- align-items: center;
9141
- z-index: 1;
9142
- position: relative;
9143
- right: 16px;
9144
- padding-right: 0;
9145
- z-index: 1;
9146
- }
9147
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
9148
- transform: translateY(calc(-50% + 24px));
9149
- }
9150
- :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
9151
- color: var(--text-field-affix-disabled);
9152
- }
9153
- :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
9154
- color: var(--text-field-affix-disabled);
9155
- }
9156
- :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
9157
- :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
9158
- :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
9159
- background-color: var(--text-field-affix-disabled);
9160
- }
9161
9758
  :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
9162
9759
  background-color: var(--text-field-affix-disabled);
9163
9760
  }
@@ -9770,7 +10367,7 @@ tds-table {
9770
10367
  color: var(--toggle-text);
9771
10368
  margin-bottom: 12px;
9772
10369
  }
9773
- :has(input[type=checkbox]:disabled) .tl-toggle__headline {
10370
+ .tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
9774
10371
  color: var(--toggle-disabled);
9775
10372
  user-select: none;
9776
10373
  cursor: not-allowed;