@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-field-var.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +1491 -567
  22. package/dist/global.css +134 -11
  23. package/dist/scania-variables.css +437 -136
  24. package/dist/tl-accordion.css +5 -3
  25. package/dist/tl-banner.css +88 -13
  26. package/dist/tl-breadcrumbs.css +55 -6
  27. package/dist/tl-button.css +180 -156
  28. package/dist/tl-card.css +42 -62
  29. package/dist/tl-chip.css +14 -12
  30. package/dist/tl-divider.css +61 -3
  31. package/dist/tl-dropdown.css +11 -7
  32. package/dist/tl-folder-tabs.css +5 -4
  33. package/dist/tl-footer.css +86 -34
  34. package/dist/tl-header.css +24 -14
  35. package/dist/tl-inline-tabs.css +5 -2
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +111 -16
  39. package/dist/tl-navigation-tabs.css +5 -2
  40. package/dist/tl-side-menu.css +12 -7
  41. package/dist/tl-slider.css +180 -156
  42. package/dist/tl-table.css +15 -9
  43. package/dist/tl-text-field.css +252 -76
  44. package/dist/tl-textarea.css +274 -76
  45. package/dist/tl-toast.css +119 -10
  46. package/dist/tl-toggle.css +2 -2
  47. package/dist/tl-tooltip.css +17 -15
  48. package/dist/traton-variables.css +271 -29
  49. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -76,8 +76,8 @@
76
76
  margin-bottom: -1px;
77
77
  border-bottom: 1px solid var(--accordion-border);
78
78
  }
79
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
80
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
79
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
80
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
81
81
  background-color: var(--accordion-background-hover);
82
82
  }
83
83
  .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -88,8 +88,10 @@
88
88
  /* Focus state */
89
89
  }
90
90
  .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
91
- outline: 2px solid var(--color-foreground-border-accent-focus);
91
+ outline: 2px solid var(--component--focus-ring-color-strong);
92
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
92
93
  outline-offset: 1px;
94
+ z-index: 1;
93
95
  background-color: var(--accordion-background-focus);
94
96
  }
95
97
  .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
@@ -315,23 +317,91 @@
315
317
  font-weight: bold;
316
318
  }
317
319
 
320
+ /**
321
+ * Do not edit directly, this file was auto-generated.
322
+ */
318
323
  :root,
319
- .tl-mode-light,
320
- .tl-mode-dark {
321
- --banner-text: var(--color-foreground-text-strong);
322
- --banner-close-icon: var(--color-foreground-icon-strong);
323
- --banner-background-default: var(--color-background-layer-01);
324
- --banner-prefix-default: var(--color-foreground-icon-strong);
325
- --banner-background-info: var(--color-system-info-discrete);
326
- --banner-prefix-info: var(--color-system-info-default);
327
- --banner-background-error: var(--color-system-danger-discrete);
328
- --banner-prefix-error: var(--color-system-danger-default);
324
+ .tds-mode-light,
325
+ .scania .tds-mode-light,
326
+ .scania.tds-mode-light,
327
+ .scania .tl-mode-light,
328
+ .scania.tl-mode-light {
329
+ --component-banner-background-neutral-default: var(--scania-color-grey-150);
330
+ --component-banner-background-information-default: var(--scania-color-blue-100);
331
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
332
+ --component-banner-text-neutral-default: var(--color-text-strong);
333
+ --component-banner-text-information-default: var(--color-text-strong);
334
+ --component-banner-text-error-default: var(--color-text-strong);
335
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
336
+ --component-banner-icon-information-default: var(--color-system-info-default);
337
+ --component-banner-icon-error-default: var(--color-system-danger-default);
338
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
339
+ }
340
+
341
+ .traton .tds-mode-light,
342
+ .traton.tds-mode-light,
343
+ .traton .tl-mode-light,
344
+ .traton.tl-mode-light {
345
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
346
+ --component-banner-background-information-default: var(--color-system-info-discrete);
347
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
348
+ --component-banner-text-neutral-default: var(--color-text-strong);
349
+ --component-banner-text-information-default: var(--color-text-strong);
350
+ --component-banner-text-error-default: var(--color-text-strong);
351
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
352
+ --component-banner-icon-information-default: var(--color-system-info-default);
353
+ --component-banner-icon-error-default: var(--color-system-danger-default);
354
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
355
+ }
356
+
357
+ .tds-mode-dark,
358
+ .scania .tds-mode-dark,
359
+ .scania.tds-mode-dark,
360
+ .scania .tl-mode-dark,
361
+ .scania.tl-mode-dark {
362
+ --component-banner-background-neutral-default: var(--color-background-layer-02);
363
+ --component-banner-background-information-default: var(--scania-color-blue-700);
364
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
365
+ --component-banner-text-neutral-default: var(--color-text-strong);
366
+ --component-banner-text-information-default: var(--color-text-strong);
367
+ --component-banner-text-error-default: var(--color-text-strong);
368
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
369
+ --component-banner-icon-information-default: var(--color-system-info-default);
370
+ --component-banner-icon-error-default: var(--color-system-danger-default);
371
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
372
+ }
373
+
374
+ .traton .tds-mode-dark,
375
+ .traton.tds-mode-dark,
376
+ .traton .tl-mode-dark,
377
+ .traton.tl-mode-dark {
378
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
379
+ --component-banner-background-information-default: var(--color-system-info-discrete);
380
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
381
+ --component-banner-text-neutral-default: var(--color-text-strong);
382
+ --component-banner-text-information-default: var(--color-text-strong);
383
+ --component-banner-text-error-default: var(--color-text-strong);
384
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
385
+ --component-banner-icon-information-default: var(--color-system-info-default);
386
+ --component-banner-icon-error-default: var(--color-system-danger-default);
387
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
388
+ }
389
+
390
+ .tl-banner {
391
+ --banner-text: var(--component-banner-text-neutral-default);
392
+ --banner-close-icon: var(--component-banner-icon-dismiss-default);
393
+ --banner-background-default: var(--component-banner-background-neutral-default);
394
+ --banner-prefix-default: var(--component-banner-icon-neutral-default);
395
+ --banner-background-info: var(--component-banner-background-information-default);
396
+ --banner-prefix-info: var(--component-banner-icon-information-default);
397
+ --banner-background-error: var(--component-banner-background-error-default);
398
+ --banner-prefix-error: var(--component-banner-icon-error-default);
329
399
  }
330
400
 
331
401
  .tl-banner {
332
402
  display: flex;
333
403
  background-color: var(--banner-background-default);
334
- padding: 16px 20px;
404
+ padding: 16px;
335
405
  position: relative;
336
406
  }
337
407
  .tl-banner--error {
@@ -403,12 +473,19 @@
403
473
  width: 20px;
404
474
  }
405
475
  .tl-banner__close:focus-visible {
406
- outline: 2px solid var(--tds-focus-outline-color);
407
- box-shadow: 0 0 0 1px var(--tds-white);
476
+ outline: 2px solid var(--component--focus-ring-color-strong);
477
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
408
478
  outline-offset: 1px;
409
479
  z-index: 1;
410
480
  }
411
481
 
482
+ .tl-banner .tl-link {
483
+ text-decoration: underline;
484
+ }
485
+ .tl-banner .tl-link:hover {
486
+ text-decoration: none;
487
+ }
488
+
412
489
  .tl-block {
413
490
  --block-background: var(--color-background-layer-01);
414
491
  --block-text-color: var(--color-foreground-text-strong);
@@ -531,15 +608,61 @@
531
608
  text-transform: var(--detail-03-text-transform);
532
609
  }
533
610
 
611
+ /**
612
+ * Do not edit directly, this file was auto-generated.
613
+ */
614
+ :root,
615
+ .tds-mode-light,
616
+ .scania .tds-mode-light,
617
+ .scania.tds-mode-light,
618
+ .scania .tl-mode-light,
619
+ .scania.tl-mode-light {
620
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
621
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
622
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
623
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
624
+ }
625
+
626
+ .traton .tds-mode-light,
627
+ .traton.tds-mode-light,
628
+ .traton .tl-mode-light,
629
+ .traton.tl-mode-light {
630
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
631
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
632
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
633
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
634
+ }
635
+
636
+ .tds-mode-dark,
637
+ .scania .tds-mode-dark,
638
+ .scania.tds-mode-dark,
639
+ .scania .tl-mode-dark,
640
+ .scania.tl-mode-dark {
641
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
642
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
643
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
644
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
645
+ }
646
+
647
+ .traton .tds-mode-dark,
648
+ .traton.tds-mode-dark,
649
+ .traton .tl-mode-dark,
650
+ .traton.tl-mode-dark {
651
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
652
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
653
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
654
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
655
+ }
656
+
534
657
  .tl-breadcrumbs {
535
- --breadcrumb-label: var(--color-foreground-text-strong);
536
- --breadcrumb-hover: var(--color-foreground-text-strong);
537
- --breadcrumb-current: var(--color-foreground-text-subtle);
538
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
658
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
659
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
660
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
661
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
539
662
  --breadcrumb-separator-margin: 4px;
540
663
  --breadcrumb-separator-width: 4px;
541
664
  --breadcrumb-separator-height: 8px;
542
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
665
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
543
666
  --breadcrumb-focus-outline-width: 2px;
544
667
  }
545
668
 
@@ -593,7 +716,10 @@
593
716
  text-decoration: underline;
594
717
  }
595
718
  .tl-breadcrumbs a:focus-visible {
596
- outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
719
+ outline: 2px solid var(--component--focus-ring-color-strong);
720
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
721
+ outline-offset: 1px;
722
+ z-index: 1;
597
723
  }
598
724
  .tl-breadcrumbs a[aria-current=page] {
599
725
  pointer-events: none;
@@ -616,14 +742,14 @@
616
742
  .scania.tl-mode-light {
617
743
  --component-button-background-standard-primary-default: var(--scania-color-blue-600);
618
744
  --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
619
- --component-button-background-standard-primary-active: var(--scania-color-blue-700);
745
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
620
746
  --component-button-background-standard-secondary-default: var(--color-background-none);
621
747
  --component-button-background-standard-secondary-hover: var(--color-background-none);
622
748
  --component-button-background-standard-secondary-active: var(--color-background-none);
623
749
  --component-button-background-standard-tertiary-default: var(--color-background-none);
624
750
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
625
751
  --component-button-background-standard-tertiary-active: var(--color-background-none);
626
- --component-button-background-danger-primary-default: var(--color-system-danger-default);
752
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
627
753
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
628
754
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
629
755
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -645,59 +771,68 @@
645
771
  --component-button-border-danger-primary-default: var(--color-border-none);
646
772
  --component-button-border-danger-primary-hover: var(--color-border-none);
647
773
  --component-button-border-danger-primary-active: var(--color-border-none);
648
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
774
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
649
775
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
650
776
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
651
777
  --component-button-border-danger-tertiary-default: var(--color-border-none);
652
778
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
653
779
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
654
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
780
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
781
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
655
782
  --component-button-icon-standard-primary-hover: var(
656
- --component-button-text-standard-primary-default
783
+ --component-button-icon-standard-primary-default
657
784
  );
658
785
  --component-button-icon-standard-primary-active: var(
659
- --component-button-text-standard-primary-default
786
+ --component-button-icon-standard-primary-default
787
+ );
788
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
789
+ --component-button-icon-standard-secondary-hover: var(
790
+ --component-button-icon-standard-secondary-default
791
+ );
792
+ --component-button-icon-standard-secondary-active: var(
793
+ --component-button-icon-standard-secondary-default
660
794
  );
661
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
662
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
663
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
664
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
665
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
666
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
667
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
668
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
795
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
796
+ --component-button-icon-standard-tertiary-hover: var(
797
+ --component-button-icon-standard-tertiary-default
798
+ );
799
+ --component-button-icon-standard-tertiary-active: var(
800
+ --component-button-icon-standard-tertiary-default
801
+ );
802
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
803
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
669
804
  --component-button-icon-danger-primary-active: var(
670
- --component-button-text-danger-primary-default
805
+ --component-button-icon-danger-primary-default
671
806
  );
672
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
807
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
673
808
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
674
809
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
675
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
810
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
676
811
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
677
812
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
678
813
  --component-button-opacity-disabled: var(--scania-opacity-25);
679
- --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
814
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
680
815
  --component-button-text-standard-primary-hover: var(
681
816
  --component-button-text-standard-primary-default
682
817
  );
683
818
  --component-button-text-standard-primary-active: var(
684
819
  --component-button-text-standard-primary-default
685
820
  );
686
- --component-button-text-standard-secondary-default: var(--color-text-strong);
687
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
688
- --component-button-text-standard-secondary-active: var(--color-text-strong);
689
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
690
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
691
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
692
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
821
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
822
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
823
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
824
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
825
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
826
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
827
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
693
828
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
694
829
  --component-button-text-danger-primary-active: var(
695
830
  --component-button-text-danger-primary-default
696
831
  );
697
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
832
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
698
833
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
699
834
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
700
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
835
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
701
836
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
702
837
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
703
838
  }
@@ -706,9 +841,9 @@
706
841
  .traton.tds-mode-light,
707
842
  .traton .tl-mode-light,
708
843
  .traton.tl-mode-light {
709
- --component-button-background-standard-primary-default: #004852;
710
- --component-button-background-standard-primary-hover: #003137;
711
- --component-button-background-standard-primary-active: #002429;
844
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
845
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
846
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
712
847
  --component-button-background-standard-secondary-default: var(--color-background-none);
713
848
  --component-button-background-standard-secondary-hover: var(--color-background-none);
714
849
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -743,23 +878,32 @@
743
878
  --component-button-border-danger-tertiary-default: var(--color-border-none);
744
879
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
745
880
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
746
- --component-button-icon-standard-primary-default: #fff;
881
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
882
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
747
883
  --component-button-icon-standard-primary-hover: var(
748
884
  --component-button-text-standard-primary-default
749
885
  );
750
886
  --component-button-icon-standard-primary-active: var(
751
887
  --component-button-text-standard-primary-default
752
888
  );
753
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
754
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
755
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
756
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
757
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
758
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
759
- --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
760
- --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
889
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
890
+ --component-button-icon-standard-secondary-hover: var(
891
+ --component-button-icon-standard-secondary-default
892
+ );
893
+ --component-button-icon-standard-secondary-active: var(
894
+ --component-button-icon-standard-secondary-default
895
+ );
896
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
897
+ --component-button-icon-standard-tertiary-hover: var(
898
+ --component-button-icon-standard-tertiary-default
899
+ );
900
+ --component-button-icon-standard-tertiary-active: var(
901
+ --component-button-icon-standard-tertiary-default
902
+ );
903
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
904
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
761
905
  --component-button-icon-danger-primary-active: var(
762
- --component-button-text-danger-primary-default
906
+ --component-button-icon-danger-primary-default
763
907
  );
764
908
  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
765
909
  --component-button-icon-danger-secondary-hover: var(
@@ -776,7 +920,7 @@
776
920
  --component-button-text-danger-tertiary-default
777
921
  );
778
922
  --component-button-opacity-disabled: var(--traton-opacity-25);
779
- --component-button-text-standard-primary-default: #fff;
923
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
780
924
  --component-button-text-standard-primary-hover: var(
781
925
  --component-button-text-standard-primary-default
782
926
  );
@@ -789,7 +933,7 @@
789
933
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
790
934
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
791
935
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
792
- --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
936
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
793
937
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
794
938
  --component-button-text-danger-primary-active: var(
795
939
  --component-button-text-danger-primary-default
@@ -824,7 +968,7 @@
824
968
  --component-button-background-standard-tertiary-default: var(--color-background-none);
825
969
  --component-button-background-standard-tertiary-hover: var(--color-background-none);
826
970
  --component-button-background-standard-tertiary-active: var(--color-background-none);
827
- --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
971
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
828
972
  --component-button-background-danger-primary-hover: var(--scania-color-red-500);
829
973
  --component-button-background-danger-primary-active: var(--scania-color-red-600);
830
974
  --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -846,59 +990,68 @@
846
990
  --component-button-border-danger-primary-default: var(--color-border-none);
847
991
  --component-button-border-danger-primary-hover: var(--color-border-none);
848
992
  --component-button-border-danger-primary-active: var(--color-border-none);
849
- --component-button-border-danger-secondary-default: var(--color-system-danger-default);
993
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
850
994
  --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
851
995
  --component-button-border-danger-secondary-active: var(--scania-color-red-600);
852
996
  --component-button-border-danger-tertiary-default: var(--color-border-none);
853
997
  --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
854
998
  --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
855
- --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
999
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
1000
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
856
1001
  --component-button-icon-standard-primary-hover: var(
857
- --component-button-text-standard-primary-default
1002
+ --component-button-icon-standard-primary-default
858
1003
  );
859
1004
  --component-button-icon-standard-primary-active: var(
860
- --component-button-text-standard-primary-default
1005
+ --component-button-icon-standard-primary-default
1006
+ );
1007
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
1008
+ --component-button-icon-standard-secondary-hover: var(
1009
+ --component-button-icon-standard-secondary-default
1010
+ );
1011
+ --component-button-icon-standard-secondary-active: var(
1012
+ --component-button-icon-standard-secondary-default
1013
+ );
1014
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
1015
+ --component-button-icon-standard-tertiary-hover: var(
1016
+ --component-button-icon-standard-tertiary-default
861
1017
  );
862
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
863
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
864
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
865
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
866
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
867
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
868
- --component-button-icon-danger-primary-default: var(--color-text-strong);
1018
+ --component-button-icon-standard-tertiary-active: var(
1019
+ --component-button-icon-standard-tertiary-default
1020
+ );
1021
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
869
1022
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
870
1023
  --component-button-icon-danger-primary-active: var(
871
1024
  --component-button-icon-danger-primary-default
872
1025
  );
873
- --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
1026
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
874
1027
  --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
875
1028
  --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
876
- --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
1029
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
877
1030
  --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
878
1031
  --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
879
1032
  --component-button-opacity-disabled: var(--scania-opacity-25);
880
- --component-button-text-standard-primary-default: var(--color-text-brand);
1033
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
881
1034
  --component-button-text-standard-primary-hover: var(
882
1035
  --component-button-text-standard-primary-default
883
1036
  );
884
1037
  --component-button-text-standard-primary-active: var(
885
1038
  --component-button-text-standard-primary-default
886
1039
  );
887
- --component-button-text-standard-secondary-default: var(--color-text-strong);
888
- --component-button-text-standard-secondary-hover: var(--color-text-strong);
889
- --component-button-text-standard-secondary-active: var(--color-text-strong);
890
- --component-button-text-standard-tertiary-default: var(--color-text-strong);
891
- --component-button-text-standard-tertiary-hover: var(--color-text-strong);
892
- --component-button-text-standard-tertiary-active: var(--color-text-strong);
893
- --component-button-text-danger-primary-default: var(--color-text-strong);
1040
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
1041
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
1042
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
1043
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
1044
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
1045
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
1046
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
894
1047
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
895
1048
  --component-button-text-danger-primary-active: var(
896
1049
  --component-button-text-danger-primary-default
897
1050
  );
898
- --component-button-text-danger-secondary-default: var(--color-system-danger-default);
1051
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
899
1052
  --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
900
1053
  --component-button-text-danger-secondary-active: var(--scania-color-red-600);
901
- --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
1054
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
902
1055
  --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
903
1056
  --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
904
1057
  }
@@ -907,9 +1060,9 @@
907
1060
  .traton.tds-mode-dark,
908
1061
  .traton .tl-mode-dark,
909
1062
  .traton.tl-mode-dark {
910
- --component-button-background-standard-primary-default: #c2bfb6;
911
- --component-button-background-standard-primary-hover: #d6d4c9;
912
- --component-button-background-standard-primary-active: #a6a49c;
1063
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
1064
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
1065
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
913
1066
  --component-button-background-standard-secondary-default: var(--color-background-none);
914
1067
  --component-button-background-standard-secondary-hover: var(--color-background-none);
915
1068
  --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -944,20 +1097,29 @@
944
1097
  --component-button-border-danger-tertiary-default: var(--color-border-none);
945
1098
  --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
946
1099
  --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
947
- --component-button-icon-standard-primary-default: #000;
1100
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
1101
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
948
1102
  --component-button-icon-standard-primary-hover: var(
949
1103
  --component-button-text-standard-primary-default
950
1104
  );
951
1105
  --component-button-icon-standard-primary-active: var(
952
1106
  --component-button-text-standard-primary-default
953
1107
  );
954
- --component-button-icon-standard-secondary-default: var(--color-text-strong);
955
- --component-button-icon-standard-secondary-hover: var(--color-text-strong);
956
- --component-button-icon-standard-secondary-active: var(--color-text-strong);
957
- --component-button-icon-standard-tertiary-default: var(--color-text-strong);
958
- --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
959
- --component-button-icon-standard-tertiary-active: var(--color-text-strong);
960
- --component-button-icon-danger-primary-default: var(--color-text-strong);
1108
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
1109
+ --component-button-icon-standard-secondary-hover: var(
1110
+ --component-button-icon-standard-secondary-default
1111
+ );
1112
+ --component-button-icon-standard-secondary-active: var(
1113
+ --component-button-icon-standard-secondary-default
1114
+ );
1115
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
1116
+ --component-button-icon-standard-tertiary-hover: var(
1117
+ --component-button-icon-standard-tertiary-default
1118
+ );
1119
+ --component-button-icon-standard-tertiary-active: var(
1120
+ --component-button-icon-standard-tertiary-default
1121
+ );
1122
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
961
1123
  --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
962
1124
  --component-button-icon-danger-primary-active: var(
963
1125
  --component-button-icon-danger-primary-default
@@ -977,7 +1139,7 @@
977
1139
  --component-button-text-danger-tertiary-default
978
1140
  );
979
1141
  --component-button-opacity-disabled: var(--traton-opacity-25);
980
- --component-button-text-standard-primary-default: #000;
1142
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
981
1143
  --component-button-text-standard-primary-hover: var(
982
1144
  --component-button-text-standard-primary-default
983
1145
  );
@@ -990,7 +1152,7 @@
990
1152
  --component-button-text-standard-tertiary-default: var(--color-text-strong);
991
1153
  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
992
1154
  --component-button-text-standard-tertiary-active: var(--color-text-strong);
993
- --component-button-text-danger-primary-default: var(--color-text-strong);
1155
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
994
1156
  --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
995
1157
  --component-button-text-danger-primary-active: var(
996
1158
  --component-button-text-danger-primary-default
@@ -1012,69 +1174,54 @@
1012
1174
  }
1013
1175
 
1014
1176
  .tl-button {
1015
- --button-transparent: transparent;
1016
- --button-white: var(--color-brand-neutral-white);
1017
- --button-black: var(--color-brand-neutral-black);
1018
- --button-radius: var(--dimension-radius-for-surface-clickable);
1177
+ --button-radius: calc(var(--component-button-border-radius-default) * 1px);
1019
1178
  --button-sm-only-icon-padding: 11px;
1020
1179
  --button-md-only-icon-padding: 13px;
1021
1180
  --button-lg-only-icon-padding: 17px;
1022
- --button-primary-background: var(--color-background-accent-primary-default);
1023
- --button-primary-background-hover: var(--color-background-accent-primary-hover);
1024
- --button-primary-background-active: var(--color-background-accent-primary-pressed);
1025
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1026
- --button-primary-color: var(--component-button-primary-text);
1027
- --button-primary-color-disabled: var(--color-foreground-text-disabled);
1028
- --button-primary-border-color: var(--button-transparent);
1029
- --button-primary-border-color-disabled: var(--button-transparent);
1030
- --button-primary-background-focus: var(--color-background-accent-primary-focus);
1031
- --button-primary-color-focus: var(--component-button-primary-text);
1032
- --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
1181
+ --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
1182
+ --button-primary-background: var(--component-button-background-standard-primary-default);
1183
+ --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
1184
+ --button-primary-background-active: var(--component-button-background-standard-primary-active);
1185
+ --button-primary-background-focus: var(--component-button-background-standard-primary-default);
1186
+ --button-primary-color: var(--component-button-text-standard-primary-default);
1187
+ --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
1188
+ --button-primary-border-color: var(--component-button-border-standard-primary-default);
1189
+ --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
1033
1190
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
1034
- --button-secondary-background: var(--button-transparent);
1035
- --button-secondary-color: var(--color-foreground-text-strong);
1036
- --button-secondary-border-color: var(--color-foreground-border-soft);
1037
- --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
1038
- --button-secondary-border-color-active: var(--color-foreground-border-strong);
1039
- --button-secondary-background-disabled: var(--button-transparent);
1040
- --button-secondary-color-disabled: var(--color-foreground-text-disabled);
1041
- --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
1042
- --button-secondary-background-focus: var(--button-transparent);
1043
- --button-secondary-color-focus: var(--color-foreground-text-strong);
1044
- --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
1191
+ --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
1192
+ --button-secondary-background: var(--component-button-background-standard-secondary-default);
1193
+ --button-secondary-background-focus: var(
1194
+ --component-button-background-standard-secondary-default
1195
+ );
1196
+ --button-secondary-color: var(--component-button-text-standard-secondary-default);
1197
+ --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
1198
+ --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
1199
+ --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
1200
+ --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
1201
+ --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
1045
1202
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
1046
- --button-ghost-background: var(--button-transparent);
1047
- --button-ghost-color: var(--color-foreground-text-strong);
1048
- --button-ghost-border-color: var(--button-transparent);
1049
- --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
1050
- --button-ghost-border-color-active: var(--color-foreground-border-strong);
1051
- --button-ghost-color-disabled: var(--color-foreground-text-disabled);
1052
- --button-ghost-border-color-disabled: var(--button-transparent);
1053
- --button-ghost-background-focus: var(--button-transparent);
1054
- --button-ghost-color-focus: var(--color-foreground-text-strong);
1055
- --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
1203
+ --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
1204
+ --button-ghost-background: var(--component-button-background-standard-tertiary-default);
1205
+ --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
1206
+ --button-ghost-color: var(--component-button-text-standard-tertiary-default);
1207
+ --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
1208
+ --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
1209
+ --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
1210
+ --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
1211
+ --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
1056
1212
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
1057
- --button-danger-background: var(--color-background-accent-danger-default);
1058
- --button-danger-color: var(--button-white);
1059
- --button-danger-border-color: var(--button-transparent);
1060
- --button-danger-background-hover: var(--color-background-accent-danger-hover);
1061
- --button-danger-background-active: var(--color-background-accent-danger-pressed);
1062
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1063
- --button-danger-color-disabled: var(--color-foreground-text-disabled);
1064
- --button-danger-border-color-disabled: var(--button-transparent);
1065
- --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
1066
- --button-danger-background-focus: var(--color-background-accent-danger-focus);
1067
- --button-danger-color-focus: var(--button-white);
1068
- --button-danger-border-color-focus: var(--button-transparent);
1213
+ --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
1214
+ --button-danger-background: var(--component-button-background-danger-primary-default);
1215
+ --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
1216
+ --button-danger-background-active: var(--component-button-background-danger-primary-active);
1217
+ --button-danger-background-focus: var(--component-button-background-danger-primary-default);
1218
+ --button-danger-color: var(--component-button-text-danger-primary-default);
1219
+ --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
1220
+ --button-danger-border-color: var(--component-button-border-danger-primary-default);
1221
+ --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
1222
+ --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
1069
1223
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
1070
- }
1071
- .tl-button .tl-button--primary {
1072
- --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1073
- --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1074
- }
1075
- .tl-button .tl-button--secondary {
1076
- --button-primary-background-disabled: var(--button-white);
1077
- --button-danger-background-disabled: var(--button-white);
1224
+ --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
1078
1225
  }
1079
1226
 
1080
1227
  .scania .tl-button {
@@ -1111,8 +1258,10 @@
1111
1258
  cursor: pointer;
1112
1259
  }
1113
1260
  .tl-button:focus-visible {
1114
- outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
1115
- outline-offset: calc(var(--button-outline-width) * -1);
1261
+ outline: 2px solid var(--component--focus-ring-color-strong);
1262
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1263
+ outline-offset: 1px;
1264
+ z-index: 1;
1116
1265
  }
1117
1266
  .tl-button {
1118
1267
  /* Variants */
@@ -1122,25 +1271,24 @@
1122
1271
  color: var(--button-primary-color);
1123
1272
  border-color: var(--button-primary-border-color);
1124
1273
  }
1274
+ .tl-button--primary .tl-icon {
1275
+ color: var(--button-primary-icon-color);
1276
+ }
1125
1277
  .tl-button--primary:hover:not(:disabled) {
1126
1278
  background-color: var(--button-primary-background-hover);
1127
1279
  }
1128
1280
  .tl-button--primary:disabled {
1129
- background-color: var(--button-primary-background-disabled);
1130
- color: var(--button-primary-color-disabled);
1131
- border-color: var(--button-primary-border-color-disabled);
1132
1281
  cursor: not-allowed;
1133
- opacity: 0.6;
1282
+ opacity: var(--button-opacity-disabled);
1134
1283
  }
1135
1284
  .tl-button--primary:focus-visible:not(:disabled) {
1136
1285
  background: var(--button-primary-background-focus);
1137
1286
  border-color: var(--button-primary-border-color-focus);
1138
1287
  color: var(--button-primary-color-focus);
1139
- outline-color: var(--button-primary-outline-color-focus);
1140
1288
  }
1141
1289
  .tl-button--primary:active:not(:disabled):focus-visible {
1142
1290
  outline: none;
1143
- outline-offset: none;
1291
+ box-shadow: none;
1144
1292
  }
1145
1293
  .tl-button--primary:active:not(:disabled) {
1146
1294
  background-color: var(--button-primary-background-active);
@@ -1151,24 +1299,24 @@
1151
1299
  color: var(--button-secondary-color);
1152
1300
  border-color: var(--button-secondary-border-color);
1153
1301
  }
1302
+ .tl-button--secondary .tl-icon {
1303
+ color: var(--button-secondary-icon-color);
1304
+ }
1154
1305
  .tl-button--secondary:hover:not(:disabled) {
1155
1306
  border-color: var(--button-secondary-border-color-hover);
1156
1307
  }
1157
1308
  .tl-button--secondary:disabled {
1158
- background-color: var(--button-secondary-background-disabled);
1159
- color: var(--button-secondary-color-disabled);
1160
- border-color: var(--button-secondary-border-color-disabled);
1161
1309
  cursor: not-allowed;
1162
- opacity: 0.6;
1310
+ opacity: var(--button-opacity-disabled);
1163
1311
  }
1164
1312
  .tl-button--secondary:focus-visible:not(:disabled) {
1165
1313
  background: var(--button-secondary-background-focus);
1166
1314
  border-color: var(--button-secondary-border-color-focus);
1167
1315
  color: var(--button-secondary-color-focus);
1168
- outline-color: var(--button-secondary-outline-color-focus);
1169
1316
  }
1170
1317
  .tl-button--secondary:active:not(:disabled):focus-visible {
1171
1318
  outline: none;
1319
+ box-shadow: none;
1172
1320
  }
1173
1321
  .tl-button--secondary:active:not(:disabled) {
1174
1322
  border-color: var(--button-secondary-border-color-active);
@@ -1178,22 +1326,24 @@
1178
1326
  color: var(--button-ghost-color);
1179
1327
  border-color: var(--button-ghost-border-color);
1180
1328
  }
1329
+ .tl-button--ghost .tl-icon {
1330
+ color: var(--button-ghost-icon-color);
1331
+ }
1181
1332
  .tl-button--ghost:hover:not(:disabled) {
1182
1333
  border-color: var(--button-ghost-border-color-hover);
1183
1334
  }
1184
1335
  .tl-button--ghost:disabled {
1185
- color: var(--button-ghost-color-disabled);
1186
1336
  cursor: not-allowed;
1187
- opacity: 0.6;
1337
+ opacity: var(--button-opacity-disabled);
1188
1338
  }
1189
1339
  .tl-button--ghost:focus-visible:not(:disabled) {
1190
1340
  background: var(--button-ghost-background-focus);
1191
1341
  border-color: var(--button-ghost-border-color-focus);
1192
1342
  color: var(--button-ghost-color-focus);
1193
- outline-color: var(--button-ghost-outline-color-focus);
1194
1343
  }
1195
1344
  .tl-button--ghost:active:not(:disabled):focus-visible {
1196
1345
  outline: none;
1346
+ box-shadow: none;
1197
1347
  }
1198
1348
  .tl-button--ghost:active:not(:disabled) {
1199
1349
  border-color: var(--button-ghost-border-color-active);
@@ -1203,24 +1353,24 @@
1203
1353
  color: var(--button-danger-color);
1204
1354
  border-color: var(--button-danger-border-color);
1205
1355
  }
1356
+ .tl-button--danger .tl-icon {
1357
+ color: var(--button-danger-icon-color);
1358
+ }
1206
1359
  .tl-button--danger:hover:not(:disabled) {
1207
1360
  background-color: var(--button-danger-background-hover);
1208
1361
  }
1209
1362
  .tl-button--danger:disabled {
1210
- background-color: var(--button-danger-background-disabled);
1211
- color: var(--button-danger-color-disabled);
1212
- border-color: var(--button-danger-border-color-disabled);
1213
1363
  cursor: not-allowed;
1214
- opacity: 0.6;
1364
+ opacity: var(--button-opacity-disabled);
1215
1365
  }
1216
1366
  .tl-button--danger:focus-visible:not(:disabled) {
1217
1367
  background: var(--button-danger-background-focus);
1218
1368
  border-color: var(--button-danger-border-color-focus);
1219
1369
  color: var(--button-danger-color-focus);
1220
- outline-color: var(--button-danger-outline-color-focus);
1221
1370
  }
1222
1371
  .tl-button--danger:active:not(:disabled):focus-visible {
1223
1372
  outline: none;
1373
+ box-shadow: none;
1224
1374
  }
1225
1375
  .tl-button--danger:active:not(:disabled) {
1226
1376
  background-color: var(--button-danger-background-active);
@@ -1303,20 +1453,26 @@
1303
1453
  .scania.tds-mode-light,
1304
1454
  .scania .tl-mode-light,
1305
1455
  .scania.tl-mode-light {
1306
- --component-card-background-primary: #fff;
1307
- --component-card-background-secondary: #fff;
1456
+ --component-card-background-primary-default: var(--scania-color-base-white);
1457
+ --component-card-background-secondary-default: var(--scania-color-base-white);
1308
1458
  --component-card-border-radius-default: var(--scania-unit-4);
1309
1459
  --component-card-space-padding-default: var(--scania-unit-16);
1460
+ --component-card-text-title-default: var(--color-text-strong);
1461
+ --component-card-text-subtitle-default: var(--color-text-soft);
1462
+ --component-card-text-body-default: var(--color-text-defined);
1310
1463
  }
1311
1464
 
1312
1465
  .traton .tds-mode-light,
1313
1466
  .traton.tds-mode-light,
1314
1467
  .traton .tl-mode-light,
1315
1468
  .traton.tl-mode-light {
1316
- --component-card-background-primary: var(--traton-color-transparent-invisible-light);
1317
- --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
1469
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
1470
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
1318
1471
  --component-card-border-radius-default: var(--traton-unit-0);
1319
1472
  --component-card-space-padding-default: var(--traton-unit-0);
1473
+ --component-card-text-title-default: var(--color-text-strong);
1474
+ --component-card-text-subtitle-default: var(--color-text-soft);
1475
+ --component-card-text-body-default: var(--color-text-defined);
1320
1476
  }
1321
1477
 
1322
1478
  .tds-mode-dark,
@@ -1324,37 +1480,41 @@
1324
1480
  .scania.tds-mode-dark,
1325
1481
  .scania .tl-mode-dark,
1326
1482
  .scania.tl-mode-dark {
1327
- --component-card-background-primary: var(--color-background-layer-01);
1328
- --component-card-background-secondary: var(--color-background-layer-02);
1483
+ --component-card-background-primary-default: var(--color-background-layer-01);
1484
+ --component-card-background-secondary-default: var(--color-background-layer-02);
1329
1485
  --component-card-border-radius-default: var(--scania-unit-4);
1330
1486
  --component-card-space-padding-default: var(--scania-unit-16);
1487
+ --component-card-text-title-default: var(--color-text-strong);
1488
+ --component-card-text-subtitle-default: var(--color-text-soft);
1489
+ --component-card-text-body-default: var(--color-text-defined);
1331
1490
  }
1332
1491
 
1333
1492
  .traton .tds-mode-dark,
1334
1493
  .traton.tds-mode-dark,
1335
1494
  .traton .tl-mode-dark,
1336
1495
  .traton.tl-mode-dark {
1337
- --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
1338
- --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
1496
+ --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
1497
+ --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
1339
1498
  --component-card-border-radius-default: var(--traton-unit-0);
1340
1499
  --component-card-space-padding-default: var(--traton-unit-0);
1500
+ --component-card-text-title-default: var(--color-text-strong);
1501
+ --component-card-text-subtitle-default: var(--color-text-soft);
1502
+ --component-card-text-body-default: var(--color-text-defined);
1341
1503
  }
1342
1504
 
1343
1505
  .tl-card {
1344
- --card-background: var(--tds-white);
1345
- --card-background-primary: var(--component-card-primary);
1346
- --card-background-secondary: var(--component-card-secondary);
1506
+ --card-background: var(--component-card-background-primary-default);
1507
+ --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
1347
1508
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
1348
1509
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
1349
1510
  --card-box: var(--card-box-primary);
1350
1511
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
1351
1512
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
1352
- --card-headline: var(--color-foreground-text-strong);
1353
- --card-sub-headline: var(--color-foreground-text-subtle);
1354
- --card-body-color: var(--color-foreground-text-defined);
1355
- --card-divider: var(--color-foreground-border-discrete);
1356
- --card-icon-color: var(--color-foreground-icon-strong);
1357
- /* Paddings */
1513
+ --card-headline: var(--component-card-text-title-default);
1514
+ --card-sub-headline: var(--component-card-text-subtitle-default);
1515
+ --card-body-color: var(--component-card-text-body-default);
1516
+ --card-divider: var(--color-border-soft);
1517
+ --card-icon-color: var(--component-card-text-title-default);
1358
1518
  --card-body-padding: 0 16px;
1359
1519
  --card-header-padding: 16px;
1360
1520
  --card-slotted-padding: 16px;
@@ -1362,31 +1522,23 @@
1362
1522
  }
1363
1523
  .tl-card--primary {
1364
1524
  --card-box: var(--card-box-primary);
1525
+ --card-background: var(--component-card-background-primary-default);
1365
1526
  }
1366
- .tl-card.tl-card--mode-variant-secondary {
1527
+ .tl-card--secondary {
1367
1528
  --card-box: var(--card-box-secondary);
1529
+ --card-background: var(--component-card-background-secondary-default);
1368
1530
  }
1369
1531
 
1370
- .scania .tl-card {
1371
- /* Paddings */
1372
- --card-body-padding: 0 16px;
1373
- --card-header-padding: 16px;
1374
- --card-slotted-padding: 16px;
1375
- --card-divider-margin: 16px 16px 0;
1376
- }
1377
- .scania .tl-card--primary {
1378
- --card-box: var(--card-box-primary);
1379
- }
1380
- .scania .tl-card--secondary {
1381
- --card-box: var(--card-box-primary);
1532
+ .tds-mode-dark .tl-card,
1533
+ .tl-mode-dark .tl-card {
1534
+ --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
1535
+ --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
1382
1536
  }
1383
1537
 
1384
1538
  .traton .tl-card {
1385
1539
  --card-box: none;
1386
- --card-background: transparent;
1387
1540
  --card-box-hover: none;
1388
1541
  --card-box-pressed: none;
1389
- /* Paddings and margins */
1390
1542
  --card-body-padding: 0;
1391
1543
  --card-header-padding: 16px 16px 16px 0;
1392
1544
  --card-slotted-padding: 16px 16px 16px 0;
@@ -1394,35 +1546,11 @@
1394
1546
  }
1395
1547
  .traton .tl-card--primary {
1396
1548
  --card-box: none;
1397
- --card-background: transparent;
1549
+ --card-background: var(--component-card-background-primary-default);
1398
1550
  }
1399
1551
  .traton .tl-card--secondary {
1400
1552
  --card-box: none;
1401
- --card-background: transparent;
1402
- }
1403
-
1404
- /* Dark mode */
1405
- .tl-mode-dark {
1406
- --card-background-primary: var(--tds-grey-900);
1407
- --card-background-secondary: var(--tds-grey-850);
1408
- }
1409
- .tl-mode-dark .tl-card {
1410
- --card-background: var(--card-background-primary);
1411
- }
1412
- .tl-mode-dark .tl-card--primary {
1413
- --card-box: var(--card-box-primary);
1414
- --card-background: var(--card-background-primary);
1415
- }
1416
- .tl-mode-dark .tl-card--secondary {
1417
- --card-box: var(--card-box-primary);
1418
- --card-background: var(--card-background-secondary);
1419
- }
1420
-
1421
- .traton .tl-mode-dark .tl-card--primary {
1422
- --card-background: transparent;
1423
- }
1424
- .traton .tl-mode-dark .tl-card--secondary {
1425
- --card-background: transparent;
1553
+ --card-background: var(--component-card-background-secondary-default);
1426
1554
  }
1427
1555
 
1428
1556
  .tl-card {
@@ -1438,7 +1566,7 @@
1438
1566
  width: 100%;
1439
1567
  box-shadow: var(--card-box);
1440
1568
  background-color: var(--card-background);
1441
- border-radius: 4px;
1569
+ border-radius: var(--card-border-radius);
1442
1570
  overflow: hidden;
1443
1571
  }
1444
1572
  .tl-card--clickable {
@@ -1448,9 +1576,10 @@
1448
1576
  padding: 0;
1449
1577
  }
1450
1578
  .tl-card--clickable:focus-visible {
1451
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1452
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
1579
+ outline: 2px solid var(--component--focus-ring-color-strong);
1580
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1453
1581
  outline-offset: 1px;
1582
+ z-index: 1;
1454
1583
  }
1455
1584
  .tl-card--clickable:active {
1456
1585
  box-shadow: var(--card-box-pressed);
@@ -1484,6 +1613,7 @@
1484
1613
  block-size: 36px;
1485
1614
  border-radius: 100%;
1486
1615
  margin-right: 16px;
1616
+ background-color: var(--color-background-layer-03);
1487
1617
  }
1488
1618
 
1489
1619
  .tl-card__headings {
@@ -1516,7 +1646,7 @@
1516
1646
 
1517
1647
  .tl-card__body {
1518
1648
  display: block;
1519
- word-wrap: break-word;
1649
+ overflow-wrap: break-word;
1520
1650
  }
1521
1651
  .tl-card--stretch .tl-card__body {
1522
1652
  display: flex;
@@ -1766,21 +1896,21 @@
1766
1896
  }
1767
1897
 
1768
1898
  .tl-chip {
1769
- --chip-text: var(--component-chip-text-default);
1899
+ --chip-text: var(--component-chip-text-standard-default);
1770
1900
  --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);
1901
+ --chip-background: var(--component-chip-background-standard-default);
1902
+ --chip-background-hover: var(--component-chip-background-standard-hover);
1903
+ --chip-background-focus: var(--component-chip-background-standard-hover);
1774
1904
  --chip-background-active: var(--component-chip-background-selected-default);
1775
1905
  --chip-background-active-hover: var(--component-chip-background-selected-hover);
1776
1906
  --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);
1907
+ --chip-border: var(--component-chip-border-standard-default);
1908
+ --chip-border-hover: var(--component-chip-border-standard-hover);
1779
1909
  --chip-border-selected: var(--component-chip-border-selected-default);
1780
1910
  --chip-border-selected-hover: var(--component-chip-border-selected-hover);
1781
1911
  --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);
1912
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
1913
+ --chip-icon-fill: var(--component-chip-text-standard-default);
1784
1914
  --chip-icon-fill-active: var(--component-chip-text-selected-default);
1785
1915
  }
1786
1916
 
@@ -1810,9 +1940,10 @@
1810
1940
  border-color: var(--chip-border-hover);
1811
1941
  }
1812
1942
  .tl-chip:focus-visible {
1813
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1814
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
1943
+ outline: 2px solid var(--component--focus-ring-color-strong);
1944
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1815
1945
  outline-offset: 1px;
1946
+ z-index: 1;
1816
1947
  background-color: var(--chip-background-focus);
1817
1948
  }
1818
1949
  .tl-chip--sm {
@@ -1835,9 +1966,10 @@
1835
1966
  border-color: var(--chip-border-selected-hover);
1836
1967
  }
1837
1968
  .tl-chip--selected:focus-visible {
1838
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
1839
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
1969
+ outline: 2px solid var(--component--focus-ring-color-strong);
1970
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
1840
1971
  outline-offset: 1px;
1972
+ z-index: 1;
1841
1973
  background-color: var(--chip-focused-on-selected);
1842
1974
  }
1843
1975
  .tl-chip:disabled {
@@ -2280,10 +2412,68 @@
2280
2412
  color: var(--color-foreground-text-disabled);
2281
2413
  }
2282
2414
 
2415
+ /**
2416
+ * Do not edit directly, this file was auto-generated.
2417
+ */
2418
+ :root,
2419
+ .tds-mode-light,
2420
+ .scania .tds-mode-light,
2421
+ .scania.tds-mode-light,
2422
+ .scania .tl-mode-light,
2423
+ .scania.tl-mode-light {
2424
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
2425
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
2426
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
2427
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
2428
+ --component-divider-border-strong-default: var(--color-border-strong);
2429
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
2430
+ }
2431
+
2432
+ .traton .tds-mode-light,
2433
+ .traton.tds-mode-light,
2434
+ .traton .tl-mode-light,
2435
+ .traton.tl-mode-light {
2436
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2437
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2438
+ --component-divider-border-soft-default: var(--color-border-soft);
2439
+ --component-divider-border-defined-default: var(--color-border-defined);
2440
+ --component-divider-border-strong-default: var(--color-border-strong);
2441
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2442
+ }
2443
+
2444
+ .tds-mode-dark,
2445
+ .scania .tds-mode-dark,
2446
+ .scania.tds-mode-dark,
2447
+ .scania .tl-mode-dark,
2448
+ .scania.tl-mode-dark {
2449
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2450
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2451
+ --component-divider-border-soft-default: var(--color-border-soft);
2452
+ --component-divider-border-defined-default: var(--color-border-defined);
2453
+ --component-divider-border-strong-default: var(--color-border-strong);
2454
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
2455
+ }
2456
+
2457
+ .traton .tds-mode-dark,
2458
+ .traton.tds-mode-dark,
2459
+ .traton .tl-mode-dark,
2460
+ .traton.tl-mode-dark {
2461
+ --component-divider-border-discrete-default: var(--color-border-discrete);
2462
+ --component-divider-border-subtle-default: var(--color-border-subtle);
2463
+ --component-divider-border-soft-default: var(--color-border-soft);
2464
+ --component-divider-border-defined-default: var(--color-border-defined);
2465
+ --component-divider-border-strong-default: var(--color-border-strong);
2466
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
2467
+ }
2468
+
2283
2469
  .tl-divider {
2284
- --divider-background: var(--color-foreground-border-discrete);
2285
- --divider-background-strong: var(--color-foreground-border-strong);
2286
- --divider-background-discrete: var(--color-foreground-border-discrete);
2470
+ --divider-background: var(--component-divider-border-discrete-default);
2471
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
2472
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
2473
+ --divider-background-soft: var(--component-divider-border-soft-default);
2474
+ --divider-background-defined: var(--component-divider-border-defined-default);
2475
+ --divider-background-strong: var(--component-divider-border-strong-default);
2476
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
2287
2477
  }
2288
2478
 
2289
2479
  .tl-divider {
@@ -2591,8 +2781,10 @@ body {
2591
2781
  display: block;
2592
2782
  }
2593
2783
  .tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
2594
- outline: 2px solid var(--color-foreground-border-accent-focus);
2595
- outline-offset: 2px;
2784
+ outline: 2px solid var(--component--focus-ring-color-strong);
2785
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
2786
+ outline-offset: 1px;
2787
+ z-index: 1;
2596
2788
  }
2597
2789
 
2598
2790
  .tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
@@ -2899,12 +3091,12 @@ body {
2899
3091
  display: none;
2900
3092
  }
2901
3093
 
2902
- .tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
3094
+ .tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
2903
3095
  top: 50%;
2904
3096
  transform: translateY(-50%);
2905
3097
  }
2906
3098
 
2907
- .tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
3099
+ .tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
2908
3100
  top: calc(50% - 9.5px);
2909
3101
  }
2910
3102
 
@@ -2960,7 +3152,7 @@ body {
2960
3152
  background: var(--tl-scrollbar-track-color);
2961
3153
  }
2962
3154
  .tl-dropdown__list::-webkit-scrollbar-thumb {
2963
- border-radius: 40px;
3155
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
2964
3156
  background: var(--tl-scrollbar-thumb-color);
2965
3157
  border-width: var(--tl-scrollbar-thumb-border-width);
2966
3158
  border-style: solid;
@@ -2969,6 +3161,7 @@ body {
2969
3161
  }
2970
3162
  .tl-dropdown__list::-webkit-scrollbar-thumb:hover {
2971
3163
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
3164
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
2972
3165
  }
2973
3166
  .tl-dropdown__list::-webkit-scrollbar-button {
2974
3167
  height: 0;
@@ -3048,8 +3241,9 @@ body {
3048
3241
  background: var(--dropdown-option-background-hover);
3049
3242
  }
3050
3243
  .tl-dropdown__option:focus-visible {
3051
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
3052
- z-index: 2;
3244
+ outline: 2px solid var(--component--focus-ring-color-strong);
3245
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
3246
+ outline-offset: -2px;
3053
3247
  }
3054
3248
  .tl-dropdown__option--selected {
3055
3249
  background: var(--dropdown-option-background-selected);
@@ -3240,20 +3434,36 @@ body {
3240
3434
  .scania.tds-mode-light,
3241
3435
  .scania .tl-mode-light,
3242
3436
  .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);
3437
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
3438
+ --component-footer-background-main-default: var(--scania-color-blue-800);
3439
+ --component-footer-background-top-default: var(--color-background-layer-01);
3440
+ --component-footer-background-top-secondary: var(--color-background-base);
3441
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3442
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
3443
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
3444
+ --component-footer-text-link-default: var(--color-text-strong);
3445
+ --component-footer-text-title-default: var(--color-text-strong);
3446
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3447
+ --component-footer-icon-link-default: var(--color-icon-strong);
3448
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
3247
3449
  }
3248
3450
 
3249
3451
  .traton .tds-mode-light,
3250
3452
  .traton.tds-mode-light,
3251
3453
  .traton .tl-mode-light,
3252
3454
  .traton.tl-mode-light {
3253
- --component-footer-border: var(--traton-color-transparent-invisible-light);
3254
- --component-footer-primary: var(--traton-color-grey-50);
3255
- --component-footer-color-text-link-default: var(--color-text-strong);
3256
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
3455
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3456
+ --component-footer-background-main-default: var(--traton-color-grey-50);
3457
+ --component-footer-background-top-default: var(--color-background-layer-01);
3458
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3459
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3460
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
3461
+ --component-footer-text-copyright-default: var(--color-text-soft);
3462
+ --component-footer-text-link-default: var(--color-text-strong);
3463
+ --component-footer-text-title-default: var(--color-text-strong);
3464
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3465
+ --component-footer-icon-link-default: var(--color-icon-strong);
3466
+ --component-footer-icon-social-default: var(--color-icon-strong);
3257
3467
  }
3258
3468
 
3259
3469
  .tds-mode-dark,
@@ -3261,35 +3471,51 @@ body {
3261
3471
  .scania.tds-mode-dark,
3262
3472
  .scania .tl-mode-dark,
3263
3473
  .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);
3474
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
3475
+ --component-footer-background-main-default: var(--scania-color-blue-900);
3476
+ --component-footer-background-top-default: var(--color-background-layer-01);
3477
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
3478
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3479
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
3480
+ --component-footer-text-copyright-default: var(--color-text-soft);
3481
+ --component-footer-text-link-default: var(--color-text-strong);
3482
+ --component-footer-text-title-default: var(--color-text-strong);
3483
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
3484
+ --component-footer-icon-link-default: var(--color-icon-strong);
3485
+ --component-footer-icon-social-default: var(--color-icon-strong);
3268
3486
  }
3269
3487
 
3270
3488
  .traton .tds-mode-dark,
3271
3489
  .traton.tds-mode-dark,
3272
3490
  .traton .tl-mode-dark,
3273
3491
  .traton.tl-mode-dark {
3274
- --component-footer-border: var(--traton-color-transparent-invisible-light);
3275
- --component-footer-primary: var(--traton-color-blue-1000);
3276
- --component-footer-color-text-link-default: var(--color-text-strong);
3277
- --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
3492
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
3493
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
3494
+ --component-footer-background-top-default: var(--color-background-layer-01);
3495
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
3496
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
3497
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
3498
+ --component-footer-text-copyright-default: var(--color-text-soft);
3499
+ --component-footer-text-link-default: var(--color-text-strong);
3500
+ --component-footer-text-title-default: var(--color-text-strong);
3501
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
3502
+ --component-footer-icon-link-default: var(--color-icon-strong);
3503
+ --component-footer-icon-social-default: var(--color-icon-strong);
3278
3504
  }
3279
3505
 
3280
3506
  .tl-footer {
3281
- --footer-top-background-primary: var(--color-background-layer-01);
3282
- --footer-top-background-secondary: var(--color-background-base);
3283
- --footer-top-background: var(--color-background-layer-01);
3284
- --footer-top-divider: var(--color-foreground-border-discrete);
3285
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
3286
- --footer-top-links: var(--component-footer-text-color-link-text);
3287
- --footer-top-links-background-hover: var(--color-background-surface-300);
3288
- --footer-top-button-active: var(--color-background-surface-300);
3289
- --footer-main-background: var(--component-footer-primary);
3290
- --footer-main-links: var(--color-foreground-text-accent-brand);
3291
- --footer-main-divider: var(--component-footer-border);
3292
- --footer-main-copyright: var(--component-footer-text-color-copyright);
3507
+ --footer-top-background-primary: var(--component-footer-background-top-default);
3508
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
3509
+ --footer-top-background: var(--component-footer-background-top-default);
3510
+ --footer-top-divider: var(--color-border-discrete);
3511
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
3512
+ --footer-top-links: var(--component-footer-text-link-default);
3513
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
3514
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
3515
+ --footer-main-background: var(--component-footer-background-main-default);
3516
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
3517
+ --footer-main-divider: var(--component-footer-border-divider-default);
3518
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
3293
3519
  }
3294
3520
  .tl-footer.tl-footer--primary {
3295
3521
  --footer-top-background: var(--footer-top-background-primary);
@@ -3298,6 +3524,26 @@ body {
3298
3524
  --footer-top-background: var(--footer-top-background-secondary);
3299
3525
  }
3300
3526
 
3527
+ .scania .tl-footer {
3528
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
3529
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
3530
+ }
3531
+
3532
+ .traton .tl-mode-dark .tl-footer {
3533
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3534
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
3535
+ }
3536
+
3537
+ .traton .tl-mode-light .tl-footer {
3538
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3539
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3540
+ }
3541
+
3542
+ .traton .tl-footer {
3543
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3544
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3545
+ }
3546
+
3301
3547
  .tl-footer__group {
3302
3548
  display: block;
3303
3549
  }
@@ -3339,8 +3585,8 @@ body {
3339
3585
  text-decoration: underline;
3340
3586
  }
3341
3587
  .tl-footer__link:focus-visible {
3342
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3343
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3588
+ outline: 2px solid var(--component--focus-ring-color-strong);
3589
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
3344
3590
  outline-offset: 1px;
3345
3591
  z-index: 1;
3346
3592
  }
@@ -3399,8 +3645,8 @@ body {
3399
3645
  background-color: var(--footer-top-button-active);
3400
3646
  }
3401
3647
  .tl-footer__top-title:focus-visible {
3402
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3403
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3648
+ outline: 2px solid var(--component--focus-ring-color-strong);
3649
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
3404
3650
  outline-offset: -2px;
3405
3651
  z-index: 1;
3406
3652
  }
@@ -3420,8 +3666,8 @@ body {
3420
3666
  text-decoration: none;
3421
3667
  }
3422
3668
  .tl-footer__main .tl-footer__link:focus-visible {
3423
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3424
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3669
+ outline: 2px solid var(--component--focus-ring-color-strong);
3670
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
3425
3671
  outline-offset: 1px;
3426
3672
  z-index: 1;
3427
3673
  }
@@ -3894,8 +4140,9 @@ body {
3894
4140
  background-color: var(--header-item-hover);
3895
4141
  }
3896
4142
  .tl-header__item-wrapper:focus-visible {
3897
- outline: none;
3898
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4143
+ outline: 2px solid var(--component--focus-ring-color-strong);
4144
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4145
+ outline-offset: -2px;
3899
4146
  }
3900
4147
  .tl-header__item-wrapper:active {
3901
4148
  padding-top: 2px;
@@ -3935,8 +4182,9 @@ body {
3935
4182
  background-color: var(--header-item-hover);
3936
4183
  }
3937
4184
  .tl-header__dropdown-wrapper:focus-visible {
3938
- outline: none;
3939
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4185
+ outline: 2px solid var(--component--focus-ring-color-strong);
4186
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4187
+ outline-offset: -2px;
3940
4188
  }
3941
4189
  .tl-header__dropdown-wrapper:active {
3942
4190
  background-color: var(--header-basic-element-background-selected);
@@ -3981,8 +4229,9 @@ body {
3981
4229
  background-color: var(--header-item-hover);
3982
4230
  }
3983
4231
  .tl-header__dropdown-wrapper-user:focus-visible {
3984
- outline: none;
3985
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4232
+ outline: 2px solid var(--component--focus-ring-color-strong);
4233
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4234
+ outline-offset: -2px;
3986
4235
  }
3987
4236
  .tl-header__dropdown-wrapper-user:active {
3988
4237
  background-color: var(--header-basic-element-background-selected);
@@ -4034,7 +4283,7 @@ body {
4034
4283
  background: var(--tl-scrollbar-track-color);
4035
4284
  }
4036
4285
  .tl-header__dropdown-menu::-webkit-scrollbar-thumb {
4037
- border-radius: 40px;
4286
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
4038
4287
  background: var(--tl-scrollbar-thumb-color);
4039
4288
  border-width: var(--tl-scrollbar-thumb-border-width);
4040
4289
  border-style: solid;
@@ -4043,6 +4292,7 @@ body {
4043
4292
  }
4044
4293
  .tl-header__dropdown-menu::-webkit-scrollbar-thumb:hover {
4045
4294
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
4295
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
4046
4296
  }
4047
4297
  .tl-header__dropdown-menu::-webkit-scrollbar-button {
4048
4298
  height: 0;
@@ -4084,7 +4334,7 @@ body {
4084
4334
  background: var(--tl-scrollbar-track-color);
4085
4335
  }
4086
4336
  .tl-header__user-menu::-webkit-scrollbar-thumb {
4087
- border-radius: 40px;
4337
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
4088
4338
  background: var(--tl-scrollbar-thumb-color);
4089
4339
  border-width: var(--tl-scrollbar-thumb-border-width);
4090
4340
  border-style: solid;
@@ -4093,6 +4343,7 @@ body {
4093
4343
  }
4094
4344
  .tl-header__user-menu::-webkit-scrollbar-thumb:hover {
4095
4345
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
4346
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
4096
4347
  }
4097
4348
  .tl-header__user-menu::-webkit-scrollbar-button {
4098
4349
  height: 0;
@@ -4128,7 +4379,7 @@ body {
4128
4379
  background: var(--tl-scrollbar-track-color);
4129
4380
  }
4130
4381
  .tl-header__launcher-menu::-webkit-scrollbar-thumb {
4131
- border-radius: 40px;
4382
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
4132
4383
  background: var(--tl-scrollbar-thumb-color);
4133
4384
  border-width: var(--tl-scrollbar-thumb-border-width);
4134
4385
  border-style: solid;
@@ -4137,6 +4388,7 @@ body {
4137
4388
  }
4138
4389
  .tl-header__launcher-menu::-webkit-scrollbar-thumb:hover {
4139
4390
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
4391
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
4140
4392
  }
4141
4393
  .tl-header__launcher-menu::-webkit-scrollbar-button {
4142
4394
  height: 0;
@@ -4173,7 +4425,7 @@ body {
4173
4425
  background: var(--tl-scrollbar-track-color);
4174
4426
  }
4175
4427
  .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb {
4176
- border-radius: 40px;
4428
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
4177
4429
  background: var(--tl-scrollbar-thumb-color);
4178
4430
  border-width: var(--tl-scrollbar-thumb-border-width);
4179
4431
  border-style: solid;
@@ -4182,6 +4434,7 @@ body {
4182
4434
  }
4183
4435
  .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb:hover {
4184
4436
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
4437
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
4185
4438
  }
4186
4439
  .tl-header__launcher-menu-grid::-webkit-scrollbar-button {
4187
4440
  height: 0;
@@ -4322,8 +4575,9 @@ body {
4322
4575
  }
4323
4576
  .tl-header__dropdown-menu-item a:focus-visible,
4324
4577
  .tl-header__dropdown-menu-item button:focus-visible {
4325
- outline: none;
4326
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4578
+ outline: 2px solid var(--component--focus-ring-color-strong);
4579
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
4580
+ outline-offset: -2px;
4327
4581
  }
4328
4582
  .tl-header__dropdown-menu-item--selected a,
4329
4583
  .tl-header__dropdown-menu-item--selected button {
@@ -4360,8 +4614,10 @@ body {
4360
4614
  }
4361
4615
  .tl-header__launcher-menu-item a:focus-visible,
4362
4616
  .tl-header__launcher-menu-item button:focus-visible {
4363
- outline: none;
4364
- box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
4617
+ outline: 2px solid var(--component--focus-ring-color-strong);
4618
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
4619
+ outline-offset: 1px;
4620
+ z-index: 1;
4365
4621
  }
4366
4622
 
4367
4623
  .tl-header__user-menu-image img {
@@ -5670,27 +5926,128 @@ body {
5670
5926
  height: 96px;
5671
5927
  }
5672
5928
 
5929
+ /**
5930
+ * Do not edit directly, this file was auto-generated.
5931
+ */
5932
+ :root,
5933
+ .tds-mode-light,
5934
+ .scania .tds-mode-light,
5935
+ .scania.tds-mode-light,
5936
+ .scania .tl-mode-light,
5937
+ .scania.tl-mode-light {
5938
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
5939
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
5940
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
5941
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
5942
+ --component-link-icon-standard-default: var(--color-text-strong);
5943
+ --component-link-icon-standard-hover: var(--color-text-defined);
5944
+ --component-link-icon-standard-active: var(--color-text-soft);
5945
+ --component-link-icon-standard-visited: var(--color-text-strong);
5946
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5947
+ --component-link-text-accent-default: var(--scania-color-blue-400);
5948
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
5949
+ --component-link-text-accent-active: var(--scania-color-blue-600);
5950
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
5951
+ --component-link-text-standard-default: var(--color-text-strong);
5952
+ --component-link-text-standard-hover: var(--color-text-defined);
5953
+ --component-link-text-standard-active: var(--color-text-soft);
5954
+ --component-link-text-standard-visited: var(--color-text-strong);
5955
+ }
5956
+
5957
+ .traton .tds-mode-light,
5958
+ .traton.tds-mode-light,
5959
+ .traton .tl-mode-light,
5960
+ .traton.tl-mode-light {
5961
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
5962
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
5963
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
5964
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
5965
+ --component-link-icon-standard-default: var(--color-text-strong);
5966
+ --component-link-icon-standard-hover: var(--color-text-defined);
5967
+ --component-link-icon-standard-active: var(--color-text-soft);
5968
+ --component-link-icon-standard-visited: var(--color-text-strong);
5969
+ --component-link-opacity-disabled: var(--traton-opacity-25);
5970
+ --component-link-text-accent-default: var(--traton-color-blue-700);
5971
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
5972
+ --component-link-text-accent-active: var(--traton-color-blue-950);
5973
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
5974
+ --component-link-text-standard-default: var(--color-text-strong);
5975
+ --component-link-text-standard-hover: var(--color-text-defined);
5976
+ --component-link-text-standard-active: var(--color-text-soft);
5977
+ --component-link-text-standard-visited: var(--color-text-strong);
5978
+ }
5979
+
5980
+ .tds-mode-dark,
5981
+ .scania .tds-mode-dark,
5982
+ .scania.tds-mode-dark,
5983
+ .scania .tl-mode-dark,
5984
+ .scania.tl-mode-dark {
5985
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
5986
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
5987
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
5988
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
5989
+ --component-link-icon-standard-default: var(--color-text-strong);
5990
+ --component-link-icon-standard-hover: var(--color-text-defined);
5991
+ --component-link-icon-standard-active: var(--color-text-soft);
5992
+ --component-link-icon-standard-visited: var(--color-text-strong);
5993
+ --component-link-opacity-disabled: var(--scania-opacity-25);
5994
+ --component-link-text-accent-default: var(--scania-color-blue-300);
5995
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
5996
+ --component-link-text-accent-active: var(--scania-color-blue-100);
5997
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
5998
+ --component-link-text-standard-default: var(--color-text-strong);
5999
+ --component-link-text-standard-hover: var(--color-text-defined);
6000
+ --component-link-text-standard-active: var(--color-text-soft);
6001
+ --component-link-text-standard-visited: var(--color-text-strong);
6002
+ }
6003
+
6004
+ .traton .tds-mode-dark,
6005
+ .traton.tds-mode-dark,
6006
+ .traton .tl-mode-dark,
6007
+ .traton.tl-mode-dark {
6008
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
6009
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
6010
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
6011
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
6012
+ --component-link-icon-standard-default: var(--color-text-strong);
6013
+ --component-link-icon-standard-hover: var(--color-text-defined);
6014
+ --component-link-icon-standard-active: var(--color-text-soft);
6015
+ --component-link-icon-standard-visited: var(--color-text-strong);
6016
+ --component-link-opacity-disabled: var(--traton-opacity-25);
6017
+ --component-link-text-accent-default: var(--traton-color-blue-400);
6018
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
6019
+ --component-link-text-accent-active: var(--traton-color-blue-150);
6020
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
6021
+ --component-link-text-standard-default: var(--color-text-strong);
6022
+ --component-link-text-standard-hover: var(--color-text-defined);
6023
+ --component-link-text-standard-active: var(--color-text-soft);
6024
+ --component-link-text-standard-visited: var(--color-text-strong);
6025
+ }
6026
+
5673
6027
  /* Component variables */
5674
6028
  .tl-link {
5675
- --link: var(--color-foreground-text-accent-default);
5676
- --link-hover: var(--color-foreground-text-accent-default);
6029
+ --link: var(--component-link-text-accent-default);
6030
+ --link-hover: var(--component-link-text-accent-hover);
5677
6031
  --link-focus-outline-width: 2px;
5678
- --link-visited: var(--color-foreground-text-accent-visited);
5679
- --link-disabled: var(--color-foreground-text-disabled);
5680
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
6032
+ --link-visited: var(--component-link-text-accent-visited);
6033
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
6034
+ --link-focus-outline-color: var(--color-system-info-default);
5681
6035
  }
5682
6036
 
5683
6037
  .tl-banner .tl-link {
5684
- --link: var(--color-system-info-default);
6038
+ --link: var(--color-text-strong);
6039
+ --link-hover: var(--color-text-strong);
6040
+ --link-visited: var(--color-text-strong);
5685
6041
  }
5686
6042
 
5687
6043
  .tl-toast .tl-link {
5688
- --link: var(--color-system-info-default);
5689
- --link-hover: var(--color-foreground-text-accent-default);
6044
+ --link: var(--color-text-inverse-strong);
6045
+ --link-hover: var(--color-text-inverse-strong);
6046
+ --link-visited: var(--color-text-inverse-strong);
5690
6047
  }
5691
6048
 
5692
6049
  .traton .tl-link {
5693
- --link-focus-outline-width: 4px;
6050
+ --link-focus-outline-width: 2px;
5694
6051
  }
5695
6052
 
5696
6053
  .tl-link-text {
@@ -5715,8 +6072,10 @@ body {
5715
6072
  font: inherit;
5716
6073
  }
5717
6074
  .tl-link:focus-visible {
5718
- outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
6075
+ outline: 2px solid var(--component--focus-ring-color-strong);
6076
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
5719
6077
  outline-offset: 1px;
6078
+ z-index: 1;
5720
6079
  text-decoration: none;
5721
6080
  }
5722
6081
  .tl-link:active {
@@ -5731,15 +6090,10 @@ body {
5731
6090
  text-decoration-color: var(--link-visited);
5732
6091
  }
5733
6092
  .tl-link--disabled {
5734
- color: var(--link-disabled);
5735
- text-decoration-color: var(--link-disabled);
6093
+ opacity: var(--link-opacity-disabled);
5736
6094
  pointer-events: none;
5737
6095
  cursor: not-allowed;
5738
6096
  }
5739
- .tl-link--disabled:visited {
5740
- color: var(--link-disabled);
5741
- text-decoration-color: var(--link-disabled);
5742
- }
5743
6097
  .tl-link--underline {
5744
6098
  text-decoration: underline;
5745
6099
  }
@@ -5771,28 +6125,142 @@ body {
5771
6125
  color: var(--link);
5772
6126
  }
5773
6127
 
5774
- .tl-message {
5775
- --message-main-background: var(--color-background-layer-01);
5776
- --message-mode-primary-background: var(--color-background-layer-01);
5777
- --message-mode-secondary-background: var(--color-background-layer-02);
5778
- --message-main-text-color: var(--color-foreground-text-strong);
5779
- /* Info */
5780
- --message-info-border-color: var(--color-system-info-subtle);
5781
- --message-info-icon-color: var(--color-system-info-default);
5782
- /* Success */
5783
- --message-success-border-color: var(--color-system-success-subtle);
5784
- --message-success-icon-color: var(--color-system-success-default);
5785
- /* Error */
5786
- --message-error-background: var(--color-system-danger-discrete);
5787
- --message-error-border-color: var(--color-system-danger-subtle);
5788
- --message-error-icon-color: var(--color-system-danger-default);
5789
- --message-error-header-text-color: var(--color-system-danger-default);
5790
- /* Warning */
5791
- --message-warning-border-color: var(--color-system-warning-subtle);
5792
- --message-warning-icon-color: var(--color-system-warning-default);
5793
- }
5794
-
5795
- .tl-message--primary {
6128
+ /**
6129
+ * Do not edit directly, this file was auto-generated.
6130
+ */
6131
+ :root,
6132
+ .tds-mode-light,
6133
+ .scania .tds-mode-light,
6134
+ .scania.tds-mode-light,
6135
+ .scania .tl-mode-light,
6136
+ .scania.tl-mode-light {
6137
+ --component-message-background-primary: var(--color-background-layer-01);
6138
+ --component-message-background-secondary: var(--color-background-layer-02);
6139
+ --component-message-background-information-default: var(--color-background-layer-01);
6140
+ --component-message-background-success-default: var(--color-background-layer-01);
6141
+ --component-message-background-warning-default: var(--color-background-layer-01);
6142
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6143
+ --component-message-text-information-default: var(--color-text-strong);
6144
+ --component-message-text-success-default: var(--color-text-strong);
6145
+ --component-message-text-warning-default: var(--color-text-strong);
6146
+ --component-message-text-error-default: var(--color-text-strong);
6147
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6148
+ --component-message-border-information-default: var(--color-system-info-default);
6149
+ --component-message-border-success-default: var(--color-system-success-default);
6150
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6151
+ --component-message-border-error-default: var(--color-system-danger-default);
6152
+ --component-message-border-radius-default: var(--scania-unit-4);
6153
+ --component-message-border-width-default: var(--scania-unit-4);
6154
+ --component-message-icon-information-default: var(--color-system-info-default);
6155
+ --component-message-icon-success-default: var(--color-system-success-default);
6156
+ --component-message-icon-warning-default: var(--color-system-warning-default);
6157
+ --component-message-icon-error-default: var(--color-system-danger-default);
6158
+ }
6159
+
6160
+ .traton .tds-mode-light,
6161
+ .traton.tds-mode-light,
6162
+ .traton .tl-mode-light,
6163
+ .traton.tl-mode-light {
6164
+ --component-message-background-primary: var(--color-background-layer-01);
6165
+ --component-message-background-secondary: var(--color-background-layer-02);
6166
+ --component-message-background-information-default: var(--color-background-layer-01);
6167
+ --component-message-background-success-default: var(--color-background-layer-01);
6168
+ --component-message-background-warning-default: var(--color-background-layer-01);
6169
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6170
+ --component-message-text-information-default: var(--color-text-strong);
6171
+ --component-message-text-success-default: var(--color-text-strong);
6172
+ --component-message-text-warning-default: var(--color-text-strong);
6173
+ --component-message-text-error-default: var(--color-text-strong);
6174
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6175
+ --component-message-border-information-default: var(--color-system-info-subtle);
6176
+ --component-message-border-success-default: var(--color-system-success-subtle);
6177
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6178
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6179
+ --component-message-border-radius-default: var(--traton-unit-4);
6180
+ --component-message-border-width-default: var(--traton-unit-4);
6181
+ --component-message-icon-information-default: var(--color-system-info-default);
6182
+ --component-message-icon-success-default: var(--color-system-success-default);
6183
+ --component-message-icon-warning-default: var(--color-system-warning-defined);
6184
+ --component-message-icon-error-default: var(--color-system-danger-default);
6185
+ }
6186
+
6187
+ .tds-mode-dark,
6188
+ .scania .tds-mode-dark,
6189
+ .scania.tds-mode-dark,
6190
+ .scania .tl-mode-dark,
6191
+ .scania.tl-mode-dark {
6192
+ --component-message-background-primary: var(--color-background-layer-01);
6193
+ --component-message-background-secondary: var(--color-background-layer-02);
6194
+ --component-message-background-information-default: var(--color-background-layer-01);
6195
+ --component-message-background-success-default: var(--color-background-layer-01);
6196
+ --component-message-background-warning-default: var(--color-background-layer-01);
6197
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6198
+ --component-message-text-information-default: var(--color-text-strong);
6199
+ --component-message-text-success-default: var(--color-text-strong);
6200
+ --component-message-text-warning-default: var(--color-text-strong);
6201
+ --component-message-text-error-default: var(--color-text-strong);
6202
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6203
+ --component-message-border-information-default: var(--color-system-info-default);
6204
+ --component-message-border-success-default: var(--color-system-success-subtle);
6205
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6206
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6207
+ --component-message-border-radius-default: var(--scania-unit-4);
6208
+ --component-message-border-width-default: var(--scania-unit-4);
6209
+ --component-message-icon-information-default: var(--color-system-info-default);
6210
+ --component-message-icon-success-default: var(--color-system-success-subtle);
6211
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
6212
+ --component-message-icon-error-default: var(--color-system-danger-default);
6213
+ }
6214
+
6215
+ .traton .tds-mode-dark,
6216
+ .traton.tds-mode-dark,
6217
+ .traton .tl-mode-dark,
6218
+ .traton.tl-mode-dark {
6219
+ --component-message-background-primary: var(--color-background-layer-01);
6220
+ --component-message-background-secondary: var(--color-background-layer-02);
6221
+ --component-message-background-information-default: var(--color-background-layer-01);
6222
+ --component-message-background-success-default: var(--color-background-layer-01);
6223
+ --component-message-background-warning-default: var(--color-background-layer-01);
6224
+ --component-message-background-error-default: var(--color-system-danger-discrete);
6225
+ --component-message-text-information-default: var(--color-text-strong);
6226
+ --component-message-text-success-default: var(--color-text-strong);
6227
+ --component-message-text-warning-default: var(--color-text-strong);
6228
+ --component-message-text-error-default: var(--color-text-strong);
6229
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
6230
+ --component-message-border-information-default: var(--color-system-info-subtle);
6231
+ --component-message-border-success-default: var(--color-system-success-subtle);
6232
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
6233
+ --component-message-border-error-default: var(--color-system-danger-subtle);
6234
+ --component-message-border-radius-default: var(--traton-unit-4);
6235
+ --component-message-border-width-default: var(--traton-unit-4);
6236
+ --component-message-icon-information-default: var(--color-system-info-default);
6237
+ --component-message-icon-success-default: var(--color-system-success-default);
6238
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
6239
+ --component-message-icon-error-default: var(--color-system-danger-default);
6240
+ }
6241
+
6242
+ .tl-message {
6243
+ --message-main-background: var(--component-message-background-primary);
6244
+ --message-mode-primary-background: var(--component-message-background-primary);
6245
+ --message-mode-secondary-background: var(--component-message-background-secondary);
6246
+ --message-main-text-color: var(--color-text-strong);
6247
+ /* Info */
6248
+ --message-info-border-color: var(--component-message-border-information-default);
6249
+ --message-info-icon-color: var(--component-message-icon-information-default);
6250
+ /* Success */
6251
+ --message-success-border-color: var(--component-message-border-success-default);
6252
+ --message-success-icon-color: var(--component-message-icon-success-default);
6253
+ /* Error */
6254
+ --message-error-background: var(--component-message-background-error-default);
6255
+ --message-error-border-color: var(--component-message-border-error-default);
6256
+ --message-error-icon-color: var(--component-message-icon-error-default);
6257
+ --message-error-header-text-color: var(--component-message-text-error-highlight-default);
6258
+ /* Warning */
6259
+ --message-warning-border-color: var(--component-message-border-warning-default);
6260
+ --message-warning-icon-color: var(--component-message-icon-warning-default);
6261
+ }
6262
+
6263
+ .tl-message--primary {
5796
6264
  --message-main-background: var(--message-mode-primary-background);
5797
6265
  }
5798
6266
  .tl-message--secondary {
@@ -5955,16 +6423,108 @@ body {
5955
6423
  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
5956
6424
  }
5957
6425
 
5958
- /* Component variables */
6426
+ /**
6427
+ * Do not edit directly, this file was auto-generated.
6428
+ */
6429
+ :root,
6430
+ .tds-mode-light,
6431
+ .scania .tds-mode-light,
6432
+ .scania.tds-mode-light,
6433
+ .scania .tl-mode-light,
6434
+ .scania.tl-mode-light {
6435
+ --component-modal-background-default: var(--color-background-layer-02);
6436
+ --component-modal-border-radius-default: 4;
6437
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6438
+ --component-modal-text-title-default: var(--color-text-strong);
6439
+ --component-modal-text-body-default: var(--color-text-strong);
6440
+ }
6441
+
6442
+ .traton .tds-mode-light,
6443
+ .traton.tds-mode-light,
6444
+ .traton .tl-mode-light,
6445
+ .traton.tl-mode-light {
6446
+ --component-modal-background-default: var(--color-background-layer-02);
6447
+ --component-modal-border-radius-default: 4;
6448
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6449
+ --component-modal-text-title-default: var(--color-text-strong);
6450
+ --component-modal-text-body-default: var(--color-text-strong);
6451
+ }
6452
+
6453
+ .tds-mode-dark,
6454
+ .scania .tds-mode-dark,
6455
+ .scania.tds-mode-dark,
6456
+ .scania .tl-mode-dark,
6457
+ .scania.tl-mode-dark {
6458
+ --component-modal-background-default: var(--color-background-layer-01);
6459
+ --component-modal-border-radius-default: 4;
6460
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6461
+ --component-modal-text-title-default: var(--color-text-strong);
6462
+ --component-modal-text-body-default: var(--color-text-strong);
6463
+ }
6464
+
6465
+ .traton .tds-mode-dark,
6466
+ .traton.tds-mode-dark,
6467
+ .traton .tl-mode-dark,
6468
+ .traton.tl-mode-dark {
6469
+ --component-modal-background-default: var(--color-background-layer-02);
6470
+ --component-modal-border-radius-default: 4;
6471
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6472
+ --component-modal-text-title-default: var(--color-text-strong);
6473
+ --component-modal-text-body-default: var(--color-text-strong);
6474
+ }
6475
+
6476
+ /**
6477
+ * Do not edit directly, this file was auto-generated.
6478
+ */
6479
+ :root,
6480
+ .tds-mode-light,
6481
+ .scania .tds-mode-light,
6482
+ .scania.tds-mode-light,
6483
+ .scania .tl-mode-light,
6484
+ .scania.tl-mode-light {
6485
+ --component-overlay-background-default: var(--scania-color-base-black);
6486
+ --component-overlay-opacity-default: 60;
6487
+ }
6488
+
6489
+ .traton .tds-mode-light,
6490
+ .traton.tds-mode-light,
6491
+ .traton .tl-mode-light,
6492
+ .traton.tl-mode-light {
6493
+ --component-overlay-background-default: var(--traton-color-base-black);
6494
+ --component-overlay-opacity-default: 40;
6495
+ }
6496
+
6497
+ .tds-mode-dark,
6498
+ .scania .tds-mode-dark,
6499
+ .scania.tds-mode-dark,
6500
+ .scania .tl-mode-dark,
6501
+ .scania.tl-mode-dark {
6502
+ --component-overlay-background-default: var(--scania-color-grey-900);
6503
+ --component-overlay-opacity-default: 84;
6504
+ }
6505
+
6506
+ .traton .tds-mode-dark,
6507
+ .traton.tds-mode-dark,
6508
+ .traton .tl-mode-dark,
6509
+ .traton.tl-mode-dark {
6510
+ --component-overlay-background-default: var(--traton-color-base-black);
6511
+ --component-overlay-opacity-default: 60;
6512
+ }
6513
+
5959
6514
  .tl-modal,
5960
- :root {
5961
- --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
5962
- --modal-background: var(--color-background-layer-02);
5963
- --modal-backdrop: var(--color-background-overlay);
5964
- --modal-text: var(--color-foreground-text-strong);
5965
- --modal-cross-svg: var(--color-foreground-text-strong);
5966
- --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
5967
- --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
6515
+ .tl-modal__overlay {
6516
+ --modal-background: var(--component-modal-background-default);
6517
+ --modal-backdrop: color-mix(
6518
+ in srgb,
6519
+ var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
6520
+ transparent
6521
+ );
6522
+ --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
6523
+ --modal-text: var(--component-modal-text-title-default);
6524
+ --modal-body-text: var(--component-modal-text-body-default);
6525
+ --modal-cross-svg: var(--component-modal-icon-dismiss-default);
6526
+ --modal-shadow: 0 3px 3px 0 var(--component-shadow-default, rgba(0, 0, 0, 0.15)),
6527
+ 0 -1px 1px 0 var(--component-shadow-base-modifier, rgba(0, 0, 0, 0.10));
5968
6528
  }
5969
6529
 
5970
6530
  /* MIXINS */
@@ -5979,7 +6539,7 @@ body {
5979
6539
  box-shadow: var(--modal-shadow);
5980
6540
  margin: auto;
5981
6541
  position: relative;
5982
- border-radius: 4px;
6542
+ border-radius: var(--modal-border-radius);
5983
6543
  max-height: 85vh;
5984
6544
  overflow-y: auto;
5985
6545
  pointer-events: auto;
@@ -5992,7 +6552,7 @@ body {
5992
6552
  background: var(--tl-scrollbar-track-color);
5993
6553
  }
5994
6554
  .tl-modal::-webkit-scrollbar-thumb {
5995
- border-radius: 40px;
6555
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
5996
6556
  background: var(--tl-scrollbar-thumb-color);
5997
6557
  border-width: var(--tl-scrollbar-thumb-border-width);
5998
6558
  border-style: solid;
@@ -6001,6 +6561,7 @@ body {
6001
6561
  }
6002
6562
  .tl-modal::-webkit-scrollbar-thumb:hover {
6003
6563
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
6564
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
6004
6565
  }
6005
6566
  .tl-modal::-webkit-scrollbar-button {
6006
6567
  height: 0;
@@ -6131,7 +6692,7 @@ body {
6131
6692
  font-weight: var(--body-01-font-weight);
6132
6693
  letter-spacing: var(--body-01-letter-spacing);
6133
6694
  text-transform: var(--body-01-text-transform);
6134
- color: var(--modal-text);
6695
+ color: var(--modal-body-text);
6135
6696
  padding: 0 16px 16px;
6136
6697
  }
6137
6698
  .tl-modal__body::-webkit-scrollbar {
@@ -6141,7 +6702,7 @@ body {
6141
6702
  background: var(--tl-scrollbar-track-color);
6142
6703
  }
6143
6704
  .tl-modal__body::-webkit-scrollbar-thumb {
6144
- border-radius: 40px;
6705
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
6145
6706
  background: var(--tl-scrollbar-thumb-color);
6146
6707
  border-width: var(--tl-scrollbar-thumb-border-width);
6147
6708
  border-style: solid;
@@ -6150,6 +6711,7 @@ body {
6150
6711
  }
6151
6712
  .tl-modal__body::-webkit-scrollbar-thumb:hover {
6152
6713
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
6714
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
6153
6715
  }
6154
6716
  .tl-modal__body::-webkit-scrollbar-button {
6155
6717
  height: 0;
@@ -6182,15 +6744,16 @@ body {
6182
6744
  background-color: transparent;
6183
6745
  border: 0;
6184
6746
  padding: 0;
6747
+ height: 20px;
6748
+ width: 20px;
6185
6749
  appearance: unset;
6186
6750
  display: inline-block;
6187
- height: auto;
6188
6751
  color: var(--modal-text);
6189
6752
  cursor: pointer;
6190
6753
  }
6191
6754
  .tl-modal__close:focus {
6192
- outline: 2px solid var(--tds-focus-outline-color);
6193
- box-shadow: 0 0 0 1px var(--tds-white);
6755
+ outline: 2px solid var(--component--focus-ring-color-strong);
6756
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
6194
6757
  outline-offset: 1px;
6195
6758
  z-index: 1;
6196
6759
  }
@@ -6608,7 +7171,7 @@ body {
6608
7171
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6609
7172
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6610
7173
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6611
- --component-side-menu-radius-default: var(--scania-unit-0);
7174
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6612
7175
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6613
7176
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6614
7177
  --component-side-menu-text-items-font-size: 14;
@@ -6649,7 +7212,7 @@ body {
6649
7212
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6650
7213
  --traton-unit-12
6651
7214
  );
6652
- --component-side-menu-radius-default: var(--traton-unit-8);
7215
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6653
7216
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6654
7217
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6655
7218
  --component-side-menu-text-items-font-size: 14;
@@ -6686,7 +7249,7 @@ body {
6686
7249
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6687
7250
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6688
7251
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6689
- --component-side-menu-radius-default: var(--scania-unit-0);
7252
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
6690
7253
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6691
7254
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6692
7255
  --component-side-menu-text-items-font-size: 14;
@@ -6727,7 +7290,7 @@ body {
6727
7290
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6728
7291
  --traton-unit-12
6729
7292
  );
6730
- --component-side-menu-radius-default: var(--traton-unit-8);
7293
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
6731
7294
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6732
7295
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6733
7296
  --component-side-menu-text-items-font-size: 14;
@@ -6835,8 +7398,10 @@ body {
6835
7398
  letter-spacing: var(--side-menu-text-item-letter-spacing);
6836
7399
  }
6837
7400
  .tl-side-menu__item:focus-visible {
6838
- outline: 2px solid var(--color-foreground-border-accent-focus);
7401
+ outline: 2px solid var(--component--focus-ring-color-strong);
7402
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6839
7403
  outline-offset: -2px;
7404
+ z-index: 1;
6840
7405
  }
6841
7406
  .tl-side-menu__item:hover {
6842
7407
  background-color: var(--side-menu-item-state-hover);
@@ -6949,8 +7514,10 @@ body {
6949
7514
  background-color: var(--side-menu-dropdown-list-item-custom-background-active);
6950
7515
  }
6951
7516
  .tl-side-menu__dropdown-item:focus {
6952
- outline: 2px solid var(--color-foreground-border-accent-focus);
7517
+ outline: 2px solid var(--component--focus-ring-color-strong);
7518
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6953
7519
  outline-offset: -2px;
7520
+ z-index: 1;
6954
7521
  }
6955
7522
  .tl-side-menu__dropdown-item--selected {
6956
7523
  background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
@@ -7135,7 +7702,7 @@ body {
7135
7702
  background: var(--tl-scrollbar-track-color);
7136
7703
  }
7137
7704
  .tl-side-menu__list-wrapper::-webkit-scrollbar-thumb {
7138
- border-radius: 40px;
7705
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
7139
7706
  background: var(--tl-scrollbar-thumb-color);
7140
7707
  border-width: var(--tl-scrollbar-thumb-border-width);
7141
7708
  border-style: solid;
@@ -7144,6 +7711,7 @@ body {
7144
7711
  }
7145
7712
  .tl-side-menu__list-wrapper::-webkit-scrollbar-thumb:hover {
7146
7713
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
7714
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
7147
7715
  }
7148
7716
  .tl-side-menu__list-wrapper::-webkit-scrollbar-button {
7149
7717
  height: 0;
@@ -8253,7 +8821,7 @@ body {
8253
8821
  background: var(--tl-scrollbar-track-color);
8254
8822
  }
8255
8823
  .tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
8256
- border-radius: 40px;
8824
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
8257
8825
  background: var(--tl-scrollbar-thumb-color);
8258
8826
  border-width: var(--tl-scrollbar-thumb-border-width);
8259
8827
  border-style: solid;
@@ -8262,6 +8830,7 @@ body {
8262
8830
  }
8263
8831
  .tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
8264
8832
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
8833
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
8265
8834
  }
8266
8835
  .tl-table--horizontal-scroll::-webkit-scrollbar-button {
8267
8836
  height: 0;
@@ -8313,8 +8882,10 @@ body {
8313
8882
  cursor: pointer;
8314
8883
  }
8315
8884
  .tl-table__row--clickable:focus-visible {
8316
- outline: 2px solid var(--table-header-button-focus);
8885
+ outline: 2px solid var(--component--focus-ring-color-strong);
8886
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
8317
8887
  outline-offset: -2px;
8888
+ z-index: 1;
8318
8889
  }
8319
8890
  .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
8320
8891
  background-color: var(--table-zebra-mode);
@@ -8339,7 +8910,7 @@ body {
8339
8910
  transition: background-color 200ms ease;
8340
8911
  min-width: 192px;
8341
8912
  }
8342
- .tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
8913
+ .tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
8343
8914
  background-color: var(--table-header-hover);
8344
8915
  }
8345
8916
  .tl-table__header-cell:first-of-type {
@@ -8413,8 +8984,10 @@ body {
8413
8984
  text-align: left;
8414
8985
  }
8415
8986
  .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
8416
- outline: 2px solid var(--table-header-button-focus);
8987
+ outline: 2px solid var(--component--focus-ring-color-strong);
8988
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
8417
8989
  outline-offset: -2px;
8990
+ z-index: 1;
8418
8991
  }
8419
8992
  .tl-table--compact .tl-table__header-button {
8420
8993
  padding: 0;
@@ -8498,7 +9071,7 @@ body {
8498
9071
  .tl-table--no-min-width .tl-table__body-cell {
8499
9072
  min-width: unset;
8500
9073
  }
8501
- .tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
9074
+ .tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
8502
9075
  border-right: 1px solid var(--table-divider);
8503
9076
  }
8504
9077
  .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -8724,9 +9297,9 @@ body {
8724
9297
  padding: 0;
8725
9298
  }
8726
9299
  .tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
8727
- outline: 2px solid var(--table-header-button-focus);
8728
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
8729
- outline-offset: -1px;
9300
+ outline: 2px solid var(--component--focus-ring-color-strong);
9301
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
9302
+ outline-offset: -2px;
8730
9303
  z-index: 1;
8731
9304
  }
8732
9305
 
@@ -8797,7 +9370,7 @@ body {
8797
9370
  background: var(--tl-scrollbar-track-color);
8798
9371
  }
8799
9372
  .tl-table__expand-row-cell::-webkit-scrollbar-thumb {
8800
- border-radius: 40px;
9373
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
8801
9374
  background: var(--tl-scrollbar-thumb-color);
8802
9375
  border-width: var(--tl-scrollbar-thumb-border-width);
8803
9376
  border-style: solid;
@@ -8806,6 +9379,7 @@ body {
8806
9379
  }
8807
9380
  .tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
8808
9381
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
9382
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
8809
9383
  }
8810
9384
  .tl-table__expand-row-cell::-webkit-scrollbar-button {
8811
9385
  height: 0;
@@ -8901,11 +9475,12 @@ body {
8901
9475
  border-left-color: var(--folder-tab-divider);
8902
9476
  }
8903
9477
  .tl-folder-tabs__tab:focus-visible {
8904
- outline: 2px solid currentcolor;
8905
- outline-offset: -4px;
8906
- box-shadow: none;
9478
+ outline: 2px solid var(--component--focus-ring-color-strong);
9479
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
9480
+ outline-offset: -2px;
9481
+ z-index: 1;
8907
9482
  }
8908
- .tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
9483
+ .tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
8909
9484
  background-color: var(--folder-tab-surface-hover);
8910
9485
  border-top-color: var(--folder-tab-surface-hover);
8911
9486
  color: var(--folder-tab-text);
@@ -9050,12 +9625,14 @@ body {
9050
9625
  outline: none;
9051
9626
  }
9052
9627
  .tl-inline-tabs__tab:focus-visible::before {
9628
+ outline: 2px solid var(--component--focus-ring-color-strong);
9629
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
9630
+ outline-offset: 1px;
9631
+ z-index: 1;
9053
9632
  content: "";
9054
9633
  position: absolute;
9055
9634
  inset: 18px 0;
9056
9635
  border-radius: 2px;
9057
- box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
9058
- z-index: 2;
9059
9636
  pointer-events: none;
9060
9637
  }
9061
9638
  .tl-inline-tabs__tab::after {
@@ -9098,6 +9675,7 @@ body {
9098
9675
  content: none;
9099
9676
  }
9100
9677
  .tl-inline-tabs__tab--disabled:focus-visible::before {
9678
+ outline: none;
9101
9679
  box-shadow: none;
9102
9680
  }
9103
9681
 
@@ -9221,12 +9799,14 @@ body {
9221
9799
  outline: none;
9222
9800
  }
9223
9801
  .tl-navigation-tabs__tab:focus-visible::before {
9802
+ outline: 2px solid var(--component--focus-ring-color-strong);
9803
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
9804
+ outline-offset: 1px;
9805
+ z-index: 1;
9224
9806
  content: "";
9225
9807
  position: absolute;
9226
9808
  inset: 18px 0;
9227
9809
  border-radius: 2px;
9228
- box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
9229
- z-index: 2;
9230
9810
  pointer-events: none;
9231
9811
  }
9232
9812
  .tl-navigation-tabs__tab::after {
@@ -9269,6 +9849,7 @@ body {
9269
9849
  content: none;
9270
9850
  }
9271
9851
  .tl-navigation-tabs__tab--disabled:focus-visible::before {
9852
+ outline: none;
9272
9853
  box-shadow: none;
9273
9854
  }
9274
9855
 
@@ -9329,67 +9910,232 @@ body {
9329
9910
  fill: var(--navigation-tabs-scroll-button-color);
9330
9911
  }
9331
9912
 
9913
+ /**
9914
+ * Do not edit directly, this file was auto-generated.
9915
+ */
9916
+ :root,
9917
+ .tds-mode-light,
9918
+ .scania .tds-mode-light,
9919
+ .scania.tds-mode-light,
9920
+ .scania .tl-mode-light,
9921
+ .scania.tl-mode-light {
9922
+ --component--input-background-primary: var(--color-background-layer-01);
9923
+ --component--input-background-secondary: var(--color-background-layer-02);
9924
+ --component--input-border-default: var(--color-border-soft);
9925
+ --component--input-border-hover: var(--color-border-strong);
9926
+ --component--input-border-success-default: var(--color-border-strong);
9927
+ --component--input-border-error-default: var(--color-system-danger-default);
9928
+ --component--input-border-radius-default: var(--scania-unit-4);
9929
+ --component--input-border-radius-none: var(--scania-unit-0);
9930
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
9931
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
9932
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
9933
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
9934
+ --component--input-border-width-default: var(--scania-unit-1);
9935
+ --component--input-border-width-none: var(--scania-unit-0);
9936
+ --component--input-border-width-top: var(--component--input-border-width-none);
9937
+ --component--input-border-width-right: var(--component--input-border-width-none);
9938
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
9939
+ --component--input-border-width-left: var(--component--input-border-width-none);
9940
+ --component--input-icon-prefix-default: var(--color-text-defined);
9941
+ --component--input-icon-suffix-default: var(--color-text-defined);
9942
+ --component--input-icon-error-default: var(--color-system-danger-default);
9943
+ --component--input-opacity-disabled: var(--scania-opacity-25);
9944
+ --component--input-text-counter-default: var(--color-text-defined);
9945
+ --component--input-text-label-default: var(--color-text-strong);
9946
+ --component--input-text-helper-default: var(--color-text-defined);
9947
+ --component--input-text-placeholder-default: var(--color-text-soft);
9948
+ --component--input-text-value-default: var(--color-text-strong);
9949
+ --component--input-text-error-default: var(--color-system-danger-default);
9950
+ }
9951
+
9952
+ .traton .tds-mode-light,
9953
+ .traton.tds-mode-light,
9954
+ .traton .tl-mode-light,
9955
+ .traton.tl-mode-light {
9956
+ --component--input-background-primary: var(--color-background-layer-01);
9957
+ --component--input-background-secondary: var(--color-background-layer-02);
9958
+ --component--input-border-default: var(--color-border-soft);
9959
+ --component--input-border-hover: var(--color-border-strong);
9960
+ --component--input-border-success-default: var(--color-border-strong);
9961
+ --component--input-border-error-default: var(--color-system-danger-default);
9962
+ --component--input-border-radius-default: var(--traton-unit-4);
9963
+ --component--input-border-radius-none: var(--traton-unit-0);
9964
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
9965
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
9966
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
9967
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
9968
+ --component--input-border-width-default: var(--traton-unit-1);
9969
+ --component--input-border-width-none: var(--traton-unit-0);
9970
+ --component--input-border-width-top: var(--component--input-border-width-default);
9971
+ --component--input-border-width-right: var(--component--input-border-width-default);
9972
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
9973
+ --component--input-border-width-left: var(--component--input-border-width-default);
9974
+ --component--input-icon-prefix-default: var(--color-text-defined);
9975
+ --component--input-icon-suffix-default: var(--color-text-defined);
9976
+ --component--input-icon-error-default: var(--color-system-danger-default);
9977
+ --component--input-opacity-disabled: var(--traton-opacity-25);
9978
+ --component--input-text-counter-default: var(--color-text-defined);
9979
+ --component--input-text-label-default: var(--color-text-strong);
9980
+ --component--input-text-helper-default: var(--color-text-defined);
9981
+ --component--input-text-placeholder-default: var(--color-text-subtle);
9982
+ --component--input-text-value-default: var(--color-text-strong);
9983
+ --component--input-text-error-default: var(--color-system-danger-default);
9984
+ }
9985
+
9986
+ .tds-mode-dark,
9987
+ .scania .tds-mode-dark,
9988
+ .scania.tds-mode-dark,
9989
+ .scania .tl-mode-dark,
9990
+ .scania.tl-mode-dark {
9991
+ --component--input-background-primary: var(--color-background-layer-01);
9992
+ --component--input-background-secondary: var(--color-background-layer-02);
9993
+ --component--input-border-default: var(--color-border-soft);
9994
+ --component--input-border-hover: var(--color-border-strong);
9995
+ --component--input-border-success-default: var(--color-border-strong);
9996
+ --component--input-border-error-default: var(--color-system-danger-default);
9997
+ --component--input-border-radius-default: var(--scania-unit-4);
9998
+ --component--input-border-radius-none: var(--scania-unit-0);
9999
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
10000
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
10001
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
10002
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
10003
+ --component--input-border-width-default: var(--scania-unit-1);
10004
+ --component--input-border-width-none: var(--scania-unit-0);
10005
+ --component--input-border-width-top: var(--component--input-border-width-none);
10006
+ --component--input-border-width-right: var(--component--input-border-width-none);
10007
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
10008
+ --component--input-border-width-left: var(--component--input-border-width-none);
10009
+ --component--input-icon-prefix-default: var(--color-text-defined);
10010
+ --component--input-icon-suffix-default: var(--color-text-defined);
10011
+ --component--input-icon-error-default: var(--color-system-danger-default);
10012
+ --component--input-opacity-disabled: var(--scania-opacity-25);
10013
+ --component--input-text-counter-default: var(--color-text-defined);
10014
+ --component--input-text-label-default: var(--color-text-strong);
10015
+ --component--input-text-helper-default: var(--color-text-defined);
10016
+ --component--input-text-placeholder-default: var(--color-text-soft);
10017
+ --component--input-text-value-default: var(--color-text-strong);
10018
+ --component--input-text-error-default: var(--color-system-danger-default);
10019
+ }
10020
+
10021
+ .traton .tds-mode-dark,
10022
+ .traton.tds-mode-dark,
10023
+ .traton .tl-mode-dark,
10024
+ .traton.tl-mode-dark {
10025
+ --component--input-background-primary: var(--color-background-layer-01);
10026
+ --component--input-background-secondary: var(--color-background-layer-02);
10027
+ --component--input-border-default: var(--color-border-soft);
10028
+ --component--input-border-hover: var(--color-border-strong);
10029
+ --component--input-border-success-default: var(--color-border-strong);
10030
+ --component--input-border-error-default: var(--color-system-danger-default);
10031
+ --component--input-border-radius-default: var(--traton-unit-4);
10032
+ --component--input-border-radius-none: var(--traton-unit-0);
10033
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
10034
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
10035
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
10036
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
10037
+ --component--input-border-width-default: var(--traton-unit-1);
10038
+ --component--input-border-width-none: var(--traton-unit-0);
10039
+ --component--input-border-width-top: var(--component--input-border-width-default);
10040
+ --component--input-border-width-right: var(--component--input-border-width-default);
10041
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
10042
+ --component--input-border-width-left: var(--component--input-border-width-default);
10043
+ --component--input-icon-prefix-default: var(--color-text-defined);
10044
+ --component--input-icon-suffix-default: var(--color-text-defined);
10045
+ --component--input-icon-error-default: var(--color-system-danger-default);
10046
+ --component--input-opacity-disabled: var(--traton-opacity-25);
10047
+ --component--input-text-counter-default: var(--color-text-defined);
10048
+ --component--input-text-label-default: var(--color-text-strong);
10049
+ --component--input-text-helper-default: var(--color-text-defined);
10050
+ --component--input-text-placeholder-default: var(--color-text-subtle);
10051
+ --component--input-text-value-default: var(--color-text-strong);
10052
+ --component--input-text-error-default: var(--color-system-danger-default);
10053
+ }
10054
+
10055
+ /**
10056
+ * Do not edit directly, this file was auto-generated.
10057
+ */
10058
+ :root,
10059
+ .tds-mode-light,
10060
+ .scania .tds-mode-light,
10061
+ .scania.tds-mode-light,
10062
+ .scania .tl-mode-light,
10063
+ .scania.tl-mode-light {
10064
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10065
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10066
+ }
10067
+
10068
+ .traton .tds-mode-light,
10069
+ .traton.tds-mode-light,
10070
+ .traton .tl-mode-light,
10071
+ .traton.tl-mode-light {
10072
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10073
+ --component-text-field-focus-ring-radius-secondary: var(
10074
+ --component--focus-ring-radius-extra-large
10075
+ );
10076
+ }
10077
+
10078
+ .tds-mode-dark,
10079
+ .scania .tds-mode-dark,
10080
+ .scania.tds-mode-dark,
10081
+ .scania .tl-mode-dark,
10082
+ .scania.tl-mode-dark {
10083
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10084
+ --component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10085
+ }
10086
+
10087
+ .traton .tds-mode-dark,
10088
+ .traton.tds-mode-dark,
10089
+ .traton .tl-mode-dark,
10090
+ .traton.tl-mode-dark {
10091
+ --component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10092
+ --component-text-field-focus-ring-radius-secondary: var(
10093
+ --component--focus-ring-radius-extra-large
10094
+ );
10095
+ }
10096
+
9332
10097
  .tl-text-field {
9333
- --text-field-background: var(--color-background-layer-01);
9334
- --text-field-text: var(--color-foreground-text-strong);
9335
- --text-field-placeholder: var(--color-foreground-text-subtle);
9336
- --text-field-affix: var(--color-foreground-text-defined);
9337
- --text-field-label: var(--color-foreground-text-strong);
9338
- --text-field-label-inside: var(--color-foreground-text-strong);
10098
+ --text-field-background: var(--component--input-background-primary);
10099
+ --text-field-text: var(--component--input-text-value-default);
10100
+ --text-field-placeholder: var(--component--input-text-placeholder-default);
10101
+ --text-field-affix: var(--component--input-icon-prefix-default);
10102
+ --text-field-affix-suffix: var(--component--input-icon-suffix-default);
10103
+ --text-field-label: var(--component--input-text-label-default);
10104
+ --text-field-label-inside: var(--component--input-text-label-default);
9339
10105
  --text-field-label-inside-left: 16px;
9340
10106
  --text-field-affix-width-icon: 35px;
9341
10107
  --text-field-affix-width-text: 8px;
9342
- --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
9343
- --text-field-helper: var(--color-foreground-text-defined);
9344
- --text-field-error: var(--color-system-danger-default);
9345
- --text-field-affix-error: var(--color-foreground-text-defined);
9346
- --text-field-background-disabled: var(--color-background-layer-01);
9347
- --text-field-text-disabled: var(--color-foreground-text-disabled);
9348
- --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
9349
- --text-field-label-disabled: var(--color-foreground-text-disabled);
9350
- --text-field-affix-disabled: var(--color-foreground-text-disabled);
9351
- --text-field-textcounter: var(--color-foreground-text-defined);
10108
+ --text-field-helper: var(--component--input-text-helper-default);
10109
+ --text-field-error: var(--component--input-text-error-default);
10110
+ --text-field-error-icon: var(--component--input-icon-error-default);
10111
+ --text-field-affix-error: var(--component--input-icon-error-default);
10112
+ --text-field-background-disabled: var(--component--input-background-primary);
10113
+ --text-field-text-disabled: var(--color-text-disabled);
10114
+ --text-field-placeholder-disabled: var(--color-text-disabled);
10115
+ --text-field-label-disabled: var(--color-text-disabled);
10116
+ --text-field-affix-disabled: var(--color-text-disabled);
10117
+ --text-field-textcounter: var(--component--input-text-counter-default);
10118
+ --text-field-opacity-disabled: var(--component--input-opacity-disabled);
10119
+ --text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
10120
+ calc(var(--component--input-border-radius-top-right) * 1px)
10121
+ calc(var(--component--input-border-radius-bottom-right) * 1px)
10122
+ calc(var(--component--input-border-radius-bottom-left) * 1px);
10123
+ --text-field-border-color: var(--component--input-border-default);
10124
+ --text-field-border-color-hover: var(--component--input-border-hover);
10125
+ --text-field-border-color-success: var(--component--input-border-success-default);
10126
+ --text-field-border-color-error: var(--component--input-border-error-default);
10127
+ --text-field-border-color-readonly: var(--color-border-strong);
10128
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
9352
10129
  }
9353
10130
  .tl-text-field--primary {
9354
- --text-field-background: var(--color-background-layer-01);
9355
- --text-field-background-disabled: var(--color-background-layer-01);
10131
+ --text-field-background: var(--component--input-background-primary);
10132
+ --text-field-background-disabled: var(--component--input-background-primary);
10133
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
9356
10134
  }
9357
10135
  .tl-text-field--secondary {
9358
- --text-field-background: var(--color-background-layer-02);
9359
- --text-field-background-disabled: var(--color-background-layer-02);
9360
- }
9361
-
9362
- .tl-text-field,
9363
- .scania .tl-text-field {
9364
- --text-field-border-radius: 4px 4px 0 0;
9365
- --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
9366
- --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
9367
- --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
9368
- --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
9369
- --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
9370
- --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
9371
- --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
9372
- --text-field-bar-focus: var(--color-foreground-border-accent-focus);
9373
- --text-field-bar-error: var(--color-system-danger-default);
9374
- --text-field-focus-outline: none;
9375
- --text-field-focus-outline-error: none;
9376
- --text-field-focus-outline-offset: 0;
9377
- }
9378
-
9379
- .traton .tl-text-field {
9380
- --text-field-border-radius: 4px 4px 4px 4px;
9381
- --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
9382
- --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
9383
- --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
9384
- --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
9385
- --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
9386
- --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
9387
- --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
9388
- --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
9389
- --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
9390
- --text-field-focus-outline-offset: 0;
9391
- --text-field-bar-focus: transparent;
9392
- --text-field-bar-error: transparent;
10136
+ --text-field-background: var(--component--input-background-secondary);
10137
+ --text-field-background-disabled: var(--component--input-background-secondary);
10138
+ --text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
9393
10139
  }
9394
10140
 
9395
10141
  .tl-text-field {
@@ -9406,12 +10152,12 @@ body {
9406
10152
  .tl-text-field:has(.tl-text-field__input:disabled) {
9407
10153
  cursor: not-allowed;
9408
10154
  }
10155
+ .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
10156
+ opacity: var(--text-field-opacity-disabled);
10157
+ }
9409
10158
  .tl-text-field .tl-icon {
9410
10159
  background-color: var(--text-field-affix);
9411
10160
  }
9412
- :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
9413
- background-color: var(--text-field-affix-disabled);
9414
- }
9415
10161
 
9416
10162
  .tl-text-field__input-wrapper {
9417
10163
  position: relative;
@@ -9440,8 +10186,11 @@ body {
9440
10186
  width: 100%;
9441
10187
  box-sizing: border-box;
9442
10188
  margin: 0;
9443
- border: none;
10189
+ border-style: solid;
10190
+ border-color: var(--text-field-border-color);
10191
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
9444
10192
  outline: none;
10193
+ transition: border-color 200ms ease;
9445
10194
  }
9446
10195
  .tl-text-field__input::placeholder {
9447
10196
  color: var(--text-field-placeholder);
@@ -9466,42 +10215,46 @@ body {
9466
10215
  color: var(--text-field-text);
9467
10216
  flex: 1;
9468
10217
  order: 2;
9469
- box-shadow: inset var(--text-field-box-shadow);
9470
- transition: box-shadow 0.2s;
9471
10218
  }
9472
10219
  .tl-text-field__input:focus {
9473
- box-shadow: inset var(--text-field-box-shadow-focus);
10220
+ outline: 2px solid var(--component--focus-ring-color-strong);
10221
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10222
+ outline-offset: 1px;
10223
+ z-index: 1;
9474
10224
  }
9475
10225
  .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
9476
- box-shadow: inset var(--text-field-box-shadow-hover);
10226
+ border-color: var(--text-field-border-color-hover);
9477
10227
  }
9478
10228
  .tl-text-field--error .tl-text-field__input {
9479
- box-shadow: inset var(--text-field-box-shadow-error);
10229
+ border-color: var(--text-field-border-color-error);
9480
10230
  }
9481
10231
  .tl-text-field--error .tl-text-field__input:focus {
9482
- box-shadow: inset var(--text-field-box-shadow-error-focus);
10232
+ outline: 2px solid var(--component--focus-ring-color-strong);
10233
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10234
+ outline-offset: 1px;
10235
+ z-index: 1;
9483
10236
  }
9484
10237
  .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
9485
- box-shadow: inset var(--text-field-box-shadow-error-hover);
10238
+ border-color: var(--text-field-border-color-error);
9486
10239
  }
9487
10240
  .tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
9488
- box-shadow: inset var(--text-field-box-shadow-success);
10241
+ border-color: var(--text-field-border-color-success);
9489
10242
  }
9490
10243
  .tl-text-field__input:disabled {
9491
- box-shadow: none;
9492
- background-color: var(--text-field-background-disabled);
9493
- color: var(--text-field-text-disabled);
9494
10244
  cursor: not-allowed;
9495
10245
  pointer-events: none;
9496
10246
  }
9497
10247
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
9498
- box-shadow: inset var(--text-field-box-shadow);
10248
+ border-color: var(--text-field-border-color-readonly);
9499
10249
  }
9500
10250
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
9501
- box-shadow: inset var(--text-field-box-shadow-focus);
10251
+ outline: 2px solid var(--component--focus-ring-color-strong);
10252
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10253
+ outline-offset: 1px;
10254
+ z-index: 1;
9502
10255
  }
9503
10256
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
9504
- box-shadow: inset var(--text-field-box-shadow-hover);
10257
+ border-color: var(--text-field-border-color-hover);
9505
10258
  }
9506
10259
  :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
9507
10260
  user-select: auto;
@@ -9634,7 +10387,7 @@ body {
9634
10387
  position: relative;
9635
10388
  }
9636
10389
  :has(.tl-text-field__input:disabled) .tl-text-field__helper {
9637
- color: var(--color-foreground-text-disabled);
10390
+ color: var(--color-text-disabled);
9638
10391
  }
9639
10392
  .tl-text-field--error .tl-text-field__helper {
9640
10393
  padding-left: 24px;
@@ -9646,7 +10399,7 @@ body {
9646
10399
  top: 0;
9647
10400
  width: 16px;
9648
10401
  height: 16px;
9649
- background-color: var(--text-field-error);
10402
+ background-color: var(--text-field-error-icon);
9650
10403
  mask-image: var(--icon-error-svg);
9651
10404
  mask-size: contain;
9652
10405
  mask-repeat: no-repeat;
@@ -9662,7 +10415,7 @@ body {
9662
10415
  color: var(--text-field-error);
9663
10416
  }
9664
10417
  .tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
9665
- background-color: var(--color-foreground-text-disabled);
10418
+ background-color: var(--color-text-disabled);
9666
10419
  }
9667
10420
 
9668
10421
  .tl-text-field__charcounter {
@@ -9676,7 +10429,7 @@ body {
9676
10429
  color: var(--text-field-textcounter);
9677
10430
  }
9678
10431
  :has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
9679
- color: var(--color-foreground-text-disabled);
10432
+ color: var(--color-text-disabled);
9680
10433
  }
9681
10434
  .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
9682
10435
  color: var(--text-field-error);
@@ -9686,7 +10439,7 @@ body {
9686
10439
  }
9687
10440
 
9688
10441
  .tl-text-field__charcounter-divider {
9689
- color: var(--color-foreground-text-disabled);
10442
+ color: var(--color-text-disabled);
9690
10443
  }
9691
10444
 
9692
10445
  .tl-text-field__prefix {
@@ -9736,6 +10489,10 @@ body {
9736
10489
  align-items: center;
9737
10490
  z-index: 1;
9738
10491
  position: relative;
10492
+ color: var(--text-field-affix-suffix);
10493
+ }
10494
+ .tl-text-field__suffix--icon.tl-icon {
10495
+ background-color: var(--text-field-affix-suffix);
9739
10496
  }
9740
10497
  .tl-text-field__suffix--text, .tl-text-field__suffix--icon {
9741
10498
  position: absolute;
@@ -9780,54 +10537,99 @@ body {
9780
10537
  left: calc(16px + var(--text-field-affix-width-text) + 8px);
9781
10538
  }
9782
10539
 
10540
+ /**
10541
+ * Do not edit directly, this file was auto-generated.
10542
+ */
10543
+ :root,
10544
+ .tds-mode-light,
10545
+ .scania .tds-mode-light,
10546
+ .scania.tds-mode-light,
10547
+ .scania .tl-mode-light,
10548
+ .scania.tl-mode-light {
10549
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10550
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10551
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10552
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10553
+ --component-textarea-size-resize-height: var(--scania-unit-12);
10554
+ --component-textarea-size-resize-width: var(--scania-unit-12);
10555
+ }
10556
+
10557
+ .traton .tds-mode-light,
10558
+ .traton.tds-mode-light,
10559
+ .traton .tl-mode-light,
10560
+ .traton.tl-mode-light {
10561
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10562
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
10563
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10564
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10565
+ --component-textarea-size-resize-height: var(--traton-unit-12);
10566
+ --component-textarea-size-resize-width: var(--traton-unit-12);
10567
+ }
10568
+
10569
+ .tds-mode-dark,
10570
+ .scania .tds-mode-dark,
10571
+ .scania.tds-mode-dark,
10572
+ .scania .tl-mode-dark,
10573
+ .scania.tl-mode-dark {
10574
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10575
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
10576
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10577
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10578
+ --component-textarea-size-resize-height: var(--scania-unit-12);
10579
+ --component-textarea-size-resize-width: var(--scania-unit-12);
10580
+ }
10581
+
10582
+ .traton .tds-mode-dark,
10583
+ .traton.tds-mode-dark,
10584
+ .traton .tl-mode-dark,
10585
+ .traton.tl-mode-dark {
10586
+ --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
10587
+ --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
10588
+ --component-textarea-icon-resize-default: var(--color-icon-subtle);
10589
+ --component-textarea-icon-readonly-default: var(--color-icon-strong);
10590
+ --component-textarea-size-resize-height: var(--traton-unit-12);
10591
+ --component-textarea-size-resize-width: var(--traton-unit-12);
10592
+ }
10593
+
9783
10594
  .tl-textarea {
9784
- --textarea-background-primary: var(--color-background-layer-01);
9785
- --textarea-background-secondary: var(--color-background-layer-02);
10595
+ --textarea-background-primary: var(--component--input-background-primary);
10596
+ --textarea-background-secondary: var(--component--input-background-secondary);
9786
10597
  --textarea-background: var(--textarea-background-primary);
9787
- --textarea-text: var(--color-foreground-text-strong);
10598
+ --textarea-text: var(--component--input-text-value-default);
9788
10599
  --textarea-background-disabled: var(--textarea-background-primary);
9789
- --textarea-text-disabled: var(--color-foreground-text-disabled);
9790
- --textarea-placeholder-disabled: var(--color-foreground-text-disabled);
9791
- --textarea-label-disabled: var(--color-foreground-text-disabled);
9792
- --textarea-label: var(--color-foreground-text-strong);
9793
- --textarea-label-inside: var(--color-foreground-text-strong);
10600
+ --textarea-text-disabled: var(--color-text-disabled);
10601
+ --textarea-placeholder-disabled: var(--color-text-disabled);
10602
+ --textarea-label-disabled: var(--color-text-disabled);
10603
+ --textarea-label: var(--component--input-text-label-default);
10604
+ --textarea-label-inside: var(--component--input-text-label-default);
9794
10605
  --textarea-label-inside-left: 16px;
9795
- --textarea-placeholder: var(--color-foreground-text-subtle);
9796
- --textarea-helper: var(--color-foreground-text-defined);
9797
- --textarea-error: var(--color-system-danger-default);
9798
- --textarea-textcounter: var(--color-foreground-text-defined);
9799
- --textarea-resize-icon: var(--color-foreground-text-subtle);
10606
+ --textarea-placeholder: var(--component--input-text-placeholder-default);
10607
+ --textarea-helper: var(--component--input-text-helper-default);
10608
+ --textarea-error: var(--component--input-text-error-default);
10609
+ --textarea-error-icon: var(--component--input-icon-error-default);
10610
+ --textarea-textcounter: var(--component--input-text-counter-default);
10611
+ --textarea-resize-icon: var(--component-textarea-icon-resize-default);
10612
+ --textarea-opacity-disabled: var(--component--input-opacity-disabled);
10613
+ --textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
10614
+ calc(var(--component--input-border-radius-top-right) * 1px)
10615
+ calc(var(--component--input-border-radius-bottom-right) * 1px)
10616
+ calc(var(--component--input-border-radius-bottom-left) * 1px);
10617
+ --textarea-border-color: var(--component--input-border-default);
10618
+ --textarea-border-color-hover: var(--component--input-border-hover);
10619
+ --textarea-border-color-success: var(--component--input-border-success-default);
10620
+ --textarea-border-color-error: var(--component--input-border-error-default);
10621
+ --textarea-border-color-readonly: var(--color-border-strong);
10622
+ --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
9800
10623
  }
9801
10624
  .tl-textarea--primary {
9802
10625
  --textarea-background: var(--textarea-background-primary);
9803
10626
  --textarea-background-disabled: var(--textarea-background-primary);
10627
+ --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
9804
10628
  }
9805
10629
  .tl-textarea--secondary {
9806
10630
  --textarea-background: var(--textarea-background-secondary);
9807
10631
  --textarea-background-disabled: var(--textarea-background-secondary);
9808
- }
9809
-
9810
- .tl-textarea,
9811
- .scania .tl-textarea {
9812
- --textarea-border-radius: 4px 4px 0 0;
9813
- --textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
9814
- --textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
9815
- --textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
9816
- --textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
9817
- --textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
9818
- --textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
9819
- --textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
9820
- }
9821
-
9822
- .traton .tl-textarea {
9823
- --textarea-border-radius: 4px;
9824
- --textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
9825
- --textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
9826
- --textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
9827
- --textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
9828
- --textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
9829
- --textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
9830
- --textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
10632
+ --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-secondary);
9831
10633
  }
9832
10634
 
9833
10635
  .tl-textarea {
@@ -9845,7 +10647,13 @@ body {
9845
10647
  .tl-textarea:has(.tl-textarea__input:disabled) {
9846
10648
  cursor: not-allowed;
9847
10649
  }
9848
- .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10650
+ .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__input, .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__label {
10651
+ opacity: var(--textarea-opacity-disabled);
10652
+ }
10653
+ .tl-textarea:has(.tl-textarea__input:disabled)::after {
10654
+ opacity: var(--textarea-opacity-disabled);
10655
+ }
10656
+ .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9849
10657
  content: "";
9850
10658
  position: absolute;
9851
10659
  top: 18px;
@@ -9857,22 +10665,22 @@ body {
9857
10665
  mask-size: contain;
9858
10666
  mask-repeat: no-repeat;
9859
10667
  mask-position: center;
9860
- z-index: 1;
10668
+ z-index: 2;
9861
10669
  }
9862
- .traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10670
+ .traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9863
10671
  top: 20px;
9864
10672
  right: 16px;
9865
10673
  }
9866
- .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10674
+ .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9867
10675
  top: 42px;
9868
10676
  }
9869
- .traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10677
+ .traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9870
10678
  top: 44px;
9871
10679
  }
9872
- .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10680
+ .tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9873
10681
  top: 17px;
9874
10682
  }
9875
- .traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
10683
+ .traton .tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
9876
10684
  top: 19px;
9877
10685
  }
9878
10686
  .tl-textarea::after {
@@ -9880,15 +10688,15 @@ body {
9880
10688
  position: absolute;
9881
10689
  bottom: 3px;
9882
10690
  right: 3px;
9883
- width: 12px;
9884
- height: 12px;
10691
+ width: calc(var(--component-textarea-size-resize-width) * 1px);
10692
+ height: calc(var(--component-textarea-size-resize-height) * 1px);
9885
10693
  background-color: var(--textarea-resize-icon);
9886
10694
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
9887
10695
  mask-size: contain;
9888
10696
  mask-repeat: no-repeat;
9889
10697
  mask-position: center;
9890
10698
  pointer-events: none;
9891
- z-index: 1;
10699
+ z-index: 2;
9892
10700
  }
9893
10701
  .traton .tl-textarea::after {
9894
10702
  bottom: 5px;
@@ -9906,9 +10714,6 @@ body {
9906
10714
  .traton .tl-textarea:has(.tl-textarea__bottom)::after {
9907
10715
  bottom: 27px;
9908
10716
  }
9909
- .tl-textarea :has(.tl-textarea__input:disabled)::after {
9910
- background-color: var(--color-foreground-text-disabled);
9911
- }
9912
10717
 
9913
10718
  .tl-textarea__input {
9914
10719
  all: unset;
@@ -9918,8 +10723,11 @@ body {
9918
10723
  width: 100%;
9919
10724
  box-sizing: border-box;
9920
10725
  margin: 0;
9921
- border: none;
10726
+ border-style: solid;
10727
+ border-color: var(--textarea-border-color);
10728
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
9922
10729
  outline: none;
10730
+ transition: border-color 200ms ease;
9923
10731
  }
9924
10732
  .tl-textarea__input::placeholder {
9925
10733
  color: var(--textarea-placeholder);
@@ -9946,48 +10754,53 @@ body {
9946
10754
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
9947
10755
  color: var(--textarea-text);
9948
10756
  resize: vertical;
9949
- box-shadow: inset var(--textarea-box-shadow);
9950
- transition: box-shadow 0.2s;
9951
10757
  z-index: 0;
9952
10758
  }
9953
10759
  .tl-textarea__input::placeholder {
9954
10760
  transform: translateY(1px);
9955
10761
  }
9956
10762
  .tl-textarea__input:focus {
9957
- box-shadow: inset var(--textarea-box-shadow-focus);
10763
+ outline: 2px solid var(--component--focus-ring-color-strong);
10764
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10765
+ outline-offset: 1px;
10766
+ z-index: 1;
9958
10767
  }
9959
10768
  .tl-textarea__input::-webkit-resizer {
9960
10769
  display: none;
9961
10770
  }
9962
- .tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
9963
- box-shadow: inset var(--textarea-box-shadow-hover);
10771
+ .tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
10772
+ border-color: var(--textarea-border-color-hover);
9964
10773
  }
9965
10774
  .tl-textarea--error .tl-textarea__input {
9966
- box-shadow: inset var(--textarea-box-shadow-error);
10775
+ border-color: var(--textarea-border-color-error);
9967
10776
  }
9968
10777
  .tl-textarea--error .tl-textarea__input:focus {
9969
- box-shadow: inset var(--textarea-box-shadow-error-focus);
10778
+ outline: 2px solid var(--component--focus-ring-color-strong);
10779
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10780
+ outline-offset: 1px;
10781
+ z-index: 1;
9970
10782
  }
9971
- .tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
9972
- box-shadow: inset var(--textarea-box-shadow-error-hover);
10783
+ .tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
10784
+ border-color: var(--textarea-border-color-error);
9973
10785
  }
9974
- .tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
9975
- box-shadow: inset var(--textarea-box-shadow-success);
10786
+ .tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
10787
+ border-color: var(--textarea-border-color-success);
9976
10788
  }
9977
10789
  .tl-textarea__input:disabled {
9978
- box-shadow: none;
9979
- color: var(--textarea-text-disabled);
9980
10790
  cursor: not-allowed;
9981
10791
  pointer-events: none;
9982
10792
  }
9983
10793
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
9984
- box-shadow: inset var(--textarea-box-shadow);
10794
+ border-color: var(--textarea-border-color-readonly);
9985
10795
  }
9986
10796
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
9987
- box-shadow: inset var(--textarea-box-shadow-focus);
10797
+ outline: 2px solid var(--component--focus-ring-color-strong);
10798
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10799
+ outline-offset: 1px;
10800
+ z-index: 1;
9988
10801
  }
9989
10802
  :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
9990
- box-shadow: inset var(--textarea-box-shadow-hover);
10803
+ border-color: var(--textarea-border-color-hover);
9991
10804
  }
9992
10805
  .tl-textarea--label-inside .tl-textarea__input {
9993
10806
  padding-top: 26px;
@@ -10006,7 +10819,7 @@ body {
10006
10819
  cursor: default;
10007
10820
  pointer-events: none;
10008
10821
  }
10009
- :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
10822
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
10010
10823
  padding-right: 50px;
10011
10824
  }
10012
10825
 
@@ -10036,7 +10849,7 @@ body {
10036
10849
  transform: none;
10037
10850
  transform-origin: top left;
10038
10851
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
10039
- z-index: 1;
10852
+ z-index: 2;
10040
10853
  }
10041
10854
  .tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
10042
10855
  font-family: var(--detail-07-font-family);
@@ -10070,7 +10883,7 @@ body {
10070
10883
  position: relative;
10071
10884
  }
10072
10885
  :has(.tl-textarea__input:disabled) .tl-textarea__helper {
10073
- color: var(--color-foreground-text-disabled);
10886
+ color: var(--color-text-disabled);
10074
10887
  }
10075
10888
  .tl-textarea--error .tl-textarea__helper {
10076
10889
  padding-left: 24px;
@@ -10082,7 +10895,7 @@ body {
10082
10895
  top: 0;
10083
10896
  width: 16px;
10084
10897
  height: 16px;
10085
- background-color: var(--textarea-error);
10898
+ background-color: var(--textarea-error-icon);
10086
10899
  mask-image: var(--icon-error-svg);
10087
10900
  mask-size: contain;
10088
10901
  mask-repeat: no-repeat;
@@ -10094,11 +10907,11 @@ body {
10094
10907
  .tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
10095
10908
  display: none;
10096
10909
  }
10097
- .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
10910
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
10098
10911
  color: var(--textarea-error);
10099
10912
  }
10100
10913
  .tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
10101
- background-color: var(--color-foreground-text-disabled);
10914
+ background-color: var(--color-text-disabled);
10102
10915
  }
10103
10916
 
10104
10917
  .tl-textarea__charcounter {
@@ -10112,17 +10925,17 @@ body {
10112
10925
  color: var(--textarea-textcounter);
10113
10926
  }
10114
10927
  :has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
10115
- color: var(--color-foreground-text-disabled);
10928
+ color: var(--color-text-disabled);
10116
10929
  }
10117
- .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
10930
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
10118
10931
  color: var(--textarea-error);
10119
10932
  }
10120
- .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
10933
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
10121
10934
  color: var(--textarea-error);
10122
10935
  }
10123
10936
 
10124
10937
  .tl-textarea__charcounter-divider {
10125
- color: var(--color-foreground-text-disabled);
10938
+ color: var(--color-text-disabled);
10126
10939
  }
10127
10940
 
10128
10941
  .tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
@@ -10137,15 +10950,117 @@ body {
10137
10950
  transform: none;
10138
10951
  }
10139
10952
 
10953
+ /**
10954
+ * Do not edit directly, this file was auto-generated.
10955
+ */
10956
+ :root,
10957
+ .tds-mode-light,
10958
+ .scania .tds-mode-light,
10959
+ .scania.tds-mode-light,
10960
+ .scania .tl-mode-light,
10961
+ .scania.tl-mode-light {
10962
+ --component-toast-background-information-default: var(--color-background-inverse-base);
10963
+ --component-toast-background-success-default: var(--color-background-inverse-base);
10964
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
10965
+ --component-toast-background-error-default: var(--color-background-inverse-base);
10966
+ --component-toast-border-radius-default: var(--scania-unit-4);
10967
+ --component-toast-border-width-default: var(--scania-unit-4);
10968
+ --component-toast-border-information-default: var(--scania-color-blue-300);
10969
+ --component-toast-border-success-default: var(--scania-color-green-300);
10970
+ --component-toast-border-warning-default: var(--scania-color-yellow-300);
10971
+ --component-toast-border-error-default: var(--scania-color-red-400);
10972
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10973
+ --component-toast-text-body-default: var(--color-text-inverse-strong);
10974
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10975
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
10976
+ --component-toast-icon-information-default: var(--scania-color-blue-300);
10977
+ --component-toast-icon-success-default: var(--scania-color-green-300);
10978
+ --component-toast-icon-warning-default: var(--scania-color-yellow-300);
10979
+ --component-toast-icon-error-default: var(--scania-color-red-400);
10980
+ }
10981
+
10982
+ .traton .tds-mode-light,
10983
+ .traton.tds-mode-light,
10984
+ .traton .tl-mode-light,
10985
+ .traton.tl-mode-light {
10986
+ --component-toast-background-information-default: var(--color-background-inverse-base);
10987
+ --component-toast-background-success-default: var(--color-background-inverse-base);
10988
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
10989
+ --component-toast-background-error-default: var(--color-background-inverse-base);
10990
+ --component-toast-border-radius-default: var(--traton-unit-4);
10991
+ --component-toast-border-width-default: var(--traton-unit-4);
10992
+ --component-toast-border-information-default: var(--color-system-info-default);
10993
+ --component-toast-border-success-default: var(--color-system-success-default);
10994
+ --component-toast-border-warning-default: var(--color-system-warning-default);
10995
+ --component-toast-border-error-default: var(--color-system-danger-default);
10996
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
10997
+ --component-toast-text-body-default: var(--color-text-inverse-soft);
10998
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
10999
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
11000
+ --component-toast-icon-information-default: var(--color-system-info-default);
11001
+ --component-toast-icon-success-default: var(--color-system-success-default);
11002
+ --component-toast-icon-warning-default: var(--color-system-warning-default);
11003
+ --component-toast-icon-error-default: var(--color-system-danger-default);
11004
+ }
11005
+
11006
+ .tds-mode-dark,
11007
+ .scania .tds-mode-dark,
11008
+ .scania.tds-mode-dark,
11009
+ .scania .tl-mode-dark,
11010
+ .scania.tl-mode-dark {
11011
+ --component-toast-background-information-default: var(--color-background-inverse-layer-01);
11012
+ --component-toast-background-success-default: var(--color-background-inverse-layer-01);
11013
+ --component-toast-background-warning-default: var(--color-background-inverse-layer-01);
11014
+ --component-toast-background-error-default: var(--color-background-inverse-layer-01);
11015
+ --component-toast-border-radius-default: var(--scania-unit-4);
11016
+ --component-toast-border-width-default: var(--scania-unit-4);
11017
+ --component-toast-border-information-default: var(--scania-color-blue-400);
11018
+ --component-toast-border-success-default: var(--scania-color-green-300);
11019
+ --component-toast-border-warning-default: var(--scania-color-yellow-400);
11020
+ --component-toast-border-error-default: var(--scania-color-red-400);
11021
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
11022
+ --component-toast-text-body-default: var(--color-text-inverse-strong);
11023
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
11024
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
11025
+ --component-toast-icon-information-default: var(--scania-color-blue-400);
11026
+ --component-toast-icon-success-default: var(--scania-color-green-300);
11027
+ --component-toast-icon-warning-default: var(--scania-color-yellow-500);
11028
+ --component-toast-icon-error-default: var(--scania-color-red-400);
11029
+ }
11030
+
11031
+ .traton .tds-mode-dark,
11032
+ .traton.tds-mode-dark,
11033
+ .traton .tl-mode-dark,
11034
+ .traton.tl-mode-dark {
11035
+ --component-toast-background-information-default: var(--color-background-inverse-base);
11036
+ --component-toast-background-success-default: var(--color-background-inverse-base);
11037
+ --component-toast-background-warning-default: var(--color-background-inverse-base);
11038
+ --component-toast-background-error-default: var(--color-background-inverse-base);
11039
+ --component-toast-border-radius-default: var(--traton-unit-4);
11040
+ --component-toast-border-width-default: var(--traton-unit-4);
11041
+ --component-toast-border-information-default: var(--color-system-info-default);
11042
+ --component-toast-border-success-default: var(--color-system-success-default);
11043
+ --component-toast-border-warning-default: var(--color-system-warning-default);
11044
+ --component-toast-border-error-default: var(--color-system-danger-default);
11045
+ --component-toast-text-title-default: var(--color-text-inverse-strong);
11046
+ --component-toast-text-body-default: var(--color-text-inverse-soft);
11047
+ --component-toast-text-link-default: var(--component-toast-text-body-default);
11048
+ --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
11049
+ --component-toast-icon-information-default: var(--color-system-info-default);
11050
+ --component-toast-icon-success-default: var(--color-system-success-default);
11051
+ --component-toast-icon-warning-default: var(--color-system-warning-default);
11052
+ --component-toast-icon-error-default: var(--color-system-danger-default);
11053
+ }
11054
+
10140
11055
  .tl-toast {
10141
- --toast-background: var(--color-background-inverse-base);
10142
- --toast-headline: var(--color-foreground-text-inverse-strong);
10143
- --toast-subheadline: var(--color-foreground-text-inverse-soft);
10144
- --toast-dismiss: var(--color-foreground-text-inverse-strong);
10145
- --toast-icon-error: var(--color-system-danger-default);
10146
- --toast-icon-success: var(--color-system-success-default);
10147
- --toast-icon-warning: var(--color-system-warning-default);
10148
- --toast-icon-info: var(--color-system-info-default);
11056
+ --toast-background: var(--component-toast-background-information-default);
11057
+ --toast-headline: var(--component-toast-text-title-default);
11058
+ --toast-subheadline: var(--component-toast-text-body-default);
11059
+ --toast-dismiss: var(--component-toast-icon-dismiss-default);
11060
+ --toast-icon-info: var(--component-toast-icon-information-default);
11061
+ --toast-icon-success: var(--component-toast-icon-success-default);
11062
+ --toast-icon-warning: var(--component-toast-icon-warning-default);
11063
+ --toast-icon-error: var(--component-toast-icon-error-default);
10149
11064
  }
10150
11065
 
10151
11066
  .tl-toast {
@@ -10232,8 +11147,8 @@ body {
10232
11147
  cursor: pointer;
10233
11148
  }
10234
11149
  .tl-toast__close:focus-visible {
10235
- outline: 2px solid var(--tds-focus-outline-color);
10236
- box-shadow: 0 0 0 1px var(--tds-white);
11150
+ outline: 2px solid var(--component--focus-ring-color-strong);
11151
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10237
11152
  outline-offset: 1px;
10238
11153
  z-index: 1;
10239
11154
  }
@@ -10248,6 +11163,13 @@ body {
10248
11163
  color: var(--toast-icon-warning);
10249
11164
  }
10250
11165
 
11166
+ .tl-toast .tl-link {
11167
+ text-decoration: underline;
11168
+ }
11169
+ .tl-toast .tl-link:hover {
11170
+ text-decoration: none;
11171
+ }
11172
+
10251
11173
  .tl-toggle {
10252
11174
  --toggle-switch: var(--color-brand-neutral-white);
10253
11175
  --toggle-text: var(--color-foreground-text-strong);
@@ -10298,8 +11220,8 @@ body {
10298
11220
  height: 16px;
10299
11221
  }
10300
11222
  .tl-toggle__input:focus-visible {
10301
- outline: 2px solid var(--tds-focus-outline-color);
10302
- box-shadow: 0 0 0 1px var(--tds-white);
11223
+ outline: 2px solid var(--component--focus-ring-color-strong);
11224
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
10303
11225
  outline-offset: 1px;
10304
11226
  z-index: 1;
10305
11227
  border-radius: 16px;
@@ -10394,8 +11316,10 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10394
11316
  }
10395
11317
 
10396
11318
  .tl-tooltip {
10397
- --tooltip-text: var(--color-foreground-text-inverse-strong);
10398
- --tooltip-background: var(--color-background-inverse-layer-03);
11319
+ --tooltip-color: var(--component-tooltip-text-default);
11320
+ --tooltip-background: var(--component-tooltip-background-default);
11321
+ --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
11322
+ --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
10399
11323
  }
10400
11324
 
10401
11325
  .scania {
@@ -10416,19 +11340,19 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10416
11340
  position: fixed;
10417
11341
  z-index: var(--tds-z-index-tooltip, 1000);
10418
11342
  padding: 8px;
10419
- max-width: 204px;
11343
+ max-width: 208px;
10420
11344
  width: max-content;
10421
11345
  white-space: normal;
10422
- word-wrap: break-word;
10423
- background-color: var(--tooltip-background, #333);
10424
- color: var(--tooltip-text, #fff);
11346
+ overflow-wrap: break-word;
11347
+ background-color: var(--tooltip-background);
11348
+ color: var(--tooltip-color);
10425
11349
  box-sizing: border-box;
10426
11350
  line-height: var(--tl-tooltip-line-height);
10427
11351
  opacity: 0;
10428
11352
  visibility: hidden;
10429
11353
  pointer-events: none;
10430
11354
  transition: opacity 0.2s ease, visibility 0.2s ease;
10431
- border-radius: 4px;
11355
+ border-radius: var(--tooltip-border-radius);
10432
11356
  }
10433
11357
  .tl-tooltip--visible {
10434
11358
  opacity: 1;
@@ -10436,26 +11360,26 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10436
11360
  pointer-events: auto;
10437
11361
  }
10438
11362
  .tl-tooltip--top-start {
10439
- border-radius: 4px 4px 4px 0;
11363
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10440
11364
  }
10441
11365
  .tl-tooltip--top-end {
10442
- border-radius: 4px 4px 0;
11366
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10443
11367
  }
10444
11368
  .tl-tooltip--bottom-start {
10445
- border-radius: 0 4px 4px;
11369
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10446
11370
  }
10447
11371
  .tl-tooltip--bottom-end {
10448
- border-radius: 4px 0 4px 4px;
11372
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10449
11373
  }
10450
11374
  .tl-tooltip--left-start {
10451
- border-radius: 4px 0 4px 4px;
11375
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10452
11376
  }
10453
11377
  .tl-tooltip--left-end {
10454
- border-radius: 4px 4px 0;
11378
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10455
11379
  }
10456
11380
  .tl-tooltip--right-start {
10457
- border-radius: 0 4px 4px;
11381
+ border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10458
11382
  }
10459
11383
  .tl-tooltip--right-end {
10460
- border-radius: 4px 4px 4px 0;
11384
+ border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10461
11385
  }