@scania/tegel-lite 0.1.0-var-develop-beta.1 → 0.1.0-var-batch-4-beta.3

package/dist/components.css

@@ -76,8 +76,8 @@
   margin-bottom: -1px;
   border-bottom: 1px solid var(--accordion-border);
 }
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
   background-color: var(--accordion-background-hover);
 }
 .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -88,8 +88,10 @@
   /* Focus state  */
 }
 .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
   background-color: var(--accordion-background-focus);
 }
 .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
@@ -315,23 +317,91 @@
   font-weight: bold;
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 :root,
-.tl-mode-light,
-.tl-mode-dark {
-  --banner-text: var(--color-foreground-text-strong);
-  --banner-close-icon: var(--color-foreground-icon-strong);
-  --banner-background-default: var(--color-background-layer-01);
-  --banner-prefix-default: var(--color-foreground-icon-strong);
-  --banner-background-info: var(--color-system-info-discrete);
-  --banner-prefix-info: var(--color-system-info-default);
-  --banner-background-error: var(--color-system-danger-discrete);
-  --banner-prefix-error: var(--color-system-danger-default);
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-banner-background-neutral-default: var(--scania-color-grey-150);
+  --component-banner-background-information-default: var(--scania-color-blue-100);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-banner-background-neutral-default: var(--color-background-layer-01);
+  --component-banner-background-information-default: var(--color-system-info-discrete);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-banner-background-neutral-default: var(--color-background-layer-02);
+  --component-banner-background-information-default: var(--scania-color-blue-700);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-banner-background-neutral-default: var(--color-background-layer-01);
+  --component-banner-background-information-default: var(--color-system-info-discrete);
+  --component-banner-background-error-default: var(--color-system-danger-discrete);
+  --component-banner-text-neutral-default: var(--color-text-strong);
+  --component-banner-text-information-default: var(--color-text-strong);
+  --component-banner-text-error-default: var(--color-text-strong);
+  --component-banner-icon-neutral-default: var(--color-icon-strong);
+  --component-banner-icon-information-default: var(--color-system-info-default);
+  --component-banner-icon-error-default: var(--color-system-danger-default);
+  --component-banner-icon-dismiss-default: var(--color-icon-strong);
+}
+
+.tl-banner {
+  --banner-text: var(--component-banner-text-neutral-default);
+  --banner-close-icon: var(--component-banner-icon-dismiss-default);
+  --banner-background-default: var(--component-banner-background-neutral-default);
+  --banner-prefix-default: var(--component-banner-icon-neutral-default);
+  --banner-background-info: var(--component-banner-background-information-default);
+  --banner-prefix-info: var(--component-banner-icon-information-default);
+  --banner-background-error: var(--component-banner-background-error-default);
+  --banner-prefix-error: var(--component-banner-icon-error-default);
 }
 
 .tl-banner {
   display: flex;
   background-color: var(--banner-background-default);
-  padding: 16px 20px;
+  padding: 16px;
   position: relative;
 }
 .tl-banner--error {
@@ -403,12 +473,19 @@
   width: 20px;
 }
 .tl-banner__close:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
 
+.tl-banner .tl-link {
+  text-decoration: underline;
+}
+.tl-banner .tl-link:hover {
+  text-decoration: none;
+}
+
 .tl-block {
   --block-background: var(--color-background-layer-01);
   --block-text-color: var(--color-foreground-text-strong);
@@ -639,7 +716,10 @@
   text-decoration: underline;
 }
 .tl-breadcrumbs a:focus-visible {
-  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .tl-breadcrumbs a[aria-current=page] {
   pointer-events: none;
@@ -761,9 +841,9 @@
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-button-background-standard-primary-default: #004852;
-  --component-button-background-standard-primary-hover: #003137;
-  --component-button-background-standard-primary-active: #002429;
+  --component-button-background-standard-primary-default: var(--traton-color-blue-800);
+  --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
+  --component-button-background-standard-primary-active: var(--traton-color-blue-900);
   --component-button-background-standard-secondary-default: var(--color-background-none);
   --component-button-background-standard-secondary-hover: var(--color-background-none);
   --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -980,9 +1060,9 @@
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-button-background-standard-primary-default: #c2bfb6;
-  --component-button-background-standard-primary-hover: #d6d4c9;
-  --component-button-background-standard-primary-active: #a6a49c;
+  --component-button-background-standard-primary-default: var(--traton-color-grey-300);
+  --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
+  --component-button-background-standard-primary-active: var(--traton-color-grey-400);
   --component-button-background-standard-secondary-default: var(--color-background-none);
   --component-button-background-standard-secondary-hover: var(--color-background-none);
   --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -1039,7 +1119,7 @@
   --component-button-icon-standard-tertiary-active: var(
     --component-button-icon-standard-tertiary-default
   );
-  --component-button-icon-danger-primary-default: var(--scania-color-base-white);
+  --component-button-icon-danger-primary-default: var(--traton-color-base-white);
   --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
   --component-button-icon-danger-primary-active: var(
     --component-button-icon-danger-primary-default
@@ -1178,8 +1258,10 @@
   cursor: pointer;
 }
 .tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .tl-button {
   /* Variants */
@@ -1203,11 +1285,10 @@
   background: var(--button-primary-background-focus);
   border-color: var(--button-primary-border-color-focus);
   color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
 }
 .tl-button--primary:active:not(:disabled):focus-visible {
   outline: none;
-  outline-offset: none;
+  box-shadow: none;
 }
 .tl-button--primary:active:not(:disabled) {
   background-color: var(--button-primary-background-active);
@@ -1232,10 +1313,10 @@
   background: var(--button-secondary-background-focus);
   border-color: var(--button-secondary-border-color-focus);
   color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
 }
 .tl-button--secondary:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--secondary:active:not(:disabled) {
   border-color: var(--button-secondary-border-color-active);
@@ -1259,10 +1340,10 @@
   background: var(--button-ghost-background-focus);
   border-color: var(--button-ghost-border-color-focus);
   color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
 }
 .tl-button--ghost:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--ghost:active:not(:disabled) {
   border-color: var(--button-ghost-border-color-active);
@@ -1286,10 +1367,10 @@
   background: var(--button-danger-background-focus);
   border-color: var(--button-danger-border-color-focus);
   color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
 }
 .tl-button--danger:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--danger:active:not(:disabled) {
   background-color: var(--button-danger-background-active);
@@ -1422,20 +1503,18 @@
 }
 
 .tl-card {
-  --card-background: var(--tds-white);
-  --card-background-primary: var(--component-card-primary);
-  --card-background-secondary: var(--component-card-secondary);
+  --card-background: var(--component-card-background-primary-default);
+  --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
   --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
   --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
   --card-box: var(--card-box-primary);
   --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
   --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
-  --card-headline: var(--color-foreground-text-strong);
-  --card-sub-headline: var(--color-foreground-text-subtle);
-  --card-body-color: var(--color-foreground-text-defined);
-  --card-divider: var(--color-foreground-border-discrete);
-  --card-icon-color: var(--color-foreground-icon-strong);
-  /* Paddings */
+  --card-headline: var(--component-card-text-title-default);
+  --card-sub-headline: var(--component-card-text-subtitle-default);
+  --card-body-color: var(--component-card-text-body-default);
+  --card-divider: var(--color-border-soft);
+  --card-icon-color: var(--component-card-text-title-default);
   --card-body-padding: 0 16px;
   --card-header-padding: 16px;
   --card-slotted-padding: 16px;
@@ -1443,31 +1522,23 @@
 }
 .tl-card--primary {
   --card-box: var(--card-box-primary);
+  --card-background: var(--component-card-background-primary-default);
 }
-.tl-card.tl-card--mode-variant-secondary {
+.tl-card--secondary {
   --card-box: var(--card-box-secondary);
+  --card-background: var(--component-card-background-secondary-default);
 }
 
-.scania .tl-card {
-  /* Paddings */
-  --card-body-padding: 0 16px;
-  --card-header-padding: 16px;
-  --card-slotted-padding: 16px;
-  --card-divider-margin: 16px 16px 0;
-}
-.scania .tl-card--primary {
-  --card-box: var(--card-box-primary);
-}
-.scania .tl-card--secondary {
-  --card-box: var(--card-box-primary);
+.tds-mode-dark .tl-card,
+.tl-mode-dark .tl-card {
+  --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
+  --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
 }
 
 .traton .tl-card {
   --card-box: none;
-  --card-background: transparent;
   --card-box-hover: none;
   --card-box-pressed: none;
-  /* Paddings and margins */
   --card-body-padding: 0;
   --card-header-padding: 16px 16px 16px 0;
   --card-slotted-padding: 16px 16px 16px 0;
@@ -1475,35 +1546,11 @@
 }
 .traton .tl-card--primary {
   --card-box: none;
-  --card-background: transparent;
+  --card-background: var(--component-card-background-primary-default);
 }
 .traton .tl-card--secondary {
   --card-box: none;
-  --card-background: transparent;
-}
-
-/* Dark mode */
-.tl-mode-dark {
-  --card-background-primary: var(--tds-grey-900);
-  --card-background-secondary: var(--tds-grey-850);
-}
-.tl-mode-dark .tl-card {
-  --card-background: var(--card-background-primary);
-}
-.tl-mode-dark .tl-card--primary {
-  --card-box: var(--card-box-primary);
-  --card-background: var(--card-background-primary);
-}
-.tl-mode-dark .tl-card--secondary {
-  --card-box: var(--card-box-primary);
-  --card-background: var(--card-background-secondary);
-}
-
-.traton .tl-mode-dark .tl-card--primary {
-  --card-background: transparent;
-}
-.traton .tl-mode-dark .tl-card--secondary {
-  --card-background: transparent;
+  --card-background: var(--component-card-background-secondary-default);
 }
 
 .tl-card {
@@ -1519,7 +1566,7 @@
   width: 100%;
   box-shadow: var(--card-box);
   background-color: var(--card-background);
-  border-radius: 4px;
+  border-radius: var(--card-border-radius);
   overflow: hidden;
 }
 .tl-card--clickable {
@@ -1529,9 +1576,10 @@
   padding: 0;
 }
 .tl-card--clickable:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
 }
 .tl-card--clickable:active {
   box-shadow: var(--card-box-pressed);
@@ -1597,7 +1645,7 @@
 
 .tl-card__body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .tl-card--stretch .tl-card__body {
   display: flex;
@@ -1891,9 +1939,10 @@
   border-color: var(--chip-border-hover);
 }
 .tl-chip:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
   background-color: var(--chip-background-focus);
 }
 .tl-chip--sm {
@@ -1916,9 +1965,10 @@
   border-color: var(--chip-border-selected-hover);
 }
 .tl-chip--selected:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
   background-color: var(--chip-focused-on-selected);
 }
 .tl-chip:disabled {
@@ -2730,8 +2780,10 @@ body {
   display: block;
 }
 .tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
-  outline-offset: 2px;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 
 .tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
@@ -3038,12 +3090,12 @@ body {
   display: none;
 }
 
-.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 {
+.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 {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.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 {
+.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 {
   top: calc(50% - 9.5px);
 }
 
@@ -3099,7 +3151,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-dropdown__list::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -3108,6 +3160,7 @@ body {
 }
 .tl-dropdown__list::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-dropdown__list::-webkit-scrollbar-button {
   height: 0;
@@ -3187,8 +3240,9 @@ body {
   background: var(--dropdown-option-background-hover);
 }
 .tl-dropdown__option:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-  z-index: 2;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-dropdown__option--selected {
   background: var(--dropdown-option-background-selected);
@@ -3530,8 +3584,8 @@ body {
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -3590,8 +3644,8 @@ body {
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title:focus-visible {
-    outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-    box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+    outline: 2px solid var(--component--focus-ring-color-strong);
+    box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
     outline-offset: -2px;
     z-index: 1;
   }
@@ -3611,8 +3665,8 @@ body {
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -4085,8 +4139,9 @@ body {
   background-color: var(--header-item-hover);
 }
 .tl-header__item-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__item-wrapper:active {
   padding-top: 2px;
@@ -4126,8 +4181,9 @@ body {
   background-color: var(--header-item-hover);
 }
 .tl-header__dropdown-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-wrapper:active {
   background-color: var(--header-basic-element-background-selected);
@@ -4172,8 +4228,9 @@ body {
   background-color: var(--header-item-hover);
 }
 .tl-header__dropdown-wrapper-user:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-wrapper-user:active {
   background-color: var(--header-basic-element-background-selected);
@@ -4225,7 +4282,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -4234,6 +4291,7 @@ body {
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-button {
   height: 0;
@@ -4275,7 +4333,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__user-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -4284,6 +4342,7 @@ body {
 }
 .tl-header__user-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__user-menu::-webkit-scrollbar-button {
   height: 0;
@@ -4319,7 +4378,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__launcher-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -4328,6 +4387,7 @@ body {
 }
 .tl-header__launcher-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__launcher-menu::-webkit-scrollbar-button {
   height: 0;
@@ -4364,7 +4424,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -4373,6 +4433,7 @@ body {
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-button {
   height: 0;
@@ -4513,8 +4574,9 @@ body {
 }
 .tl-header__dropdown-menu-item a:focus-visible,
 .tl-header__dropdown-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-menu-item--selected a,
 .tl-header__dropdown-menu-item--selected button {
@@ -4551,8 +4613,10 @@ body {
 }
 .tl-header__launcher-menu-item a:focus-visible,
 .tl-header__launcher-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 
 .tl-header__user-menu-image img {
@@ -5970,12 +6034,15 @@ body {
 }
 
 .tl-banner .tl-link {
-  --link: var(--color-system-info-default);
+  --link: var(--color-text-strong);
+  --link-hover: var(--color-text-strong);
+  --link-visited: var(--color-text-strong);
 }
 
 .tl-toast .tl-link {
-  --link: var(--color-system-info-default);
-  --link-hover: var(--color-system-info-default);
+  --link: var(--color-text-inverse-strong);
+  --link-hover: var(--color-text-inverse-strong);
+  --link-visited: var(--color-text-inverse-strong);
 }
 
 .traton .tl-link {
@@ -6004,8 +6071,10 @@ body {
   font: inherit;
 }
 .tl-link:focus-visible {
-  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
   text-decoration: none;
 }
 .tl-link:active {
@@ -6055,25 +6124,139 @@ body {
   color: var(--link);
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-default);
+  --component-message-border-success-default: var(--color-system-success-default);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-default);
+  --component-message-border-radius-default: var(--scania-unit-4);
+  --component-message-border-width-default: var(--scania-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-default);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-subtle);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--traton-unit-4);
+  --component-message-border-width-default: var(--traton-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-defined);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-default);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--scania-unit-4);
+  --component-message-border-width-default: var(--scania-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-subtle);
+  --component-message-icon-warning-default: var(--color-system-warning-subtle);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-subtle);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--traton-unit-4);
+  --component-message-border-width-default: var(--traton-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-subtle);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
 .tl-message {
-  --message-main-background: var(--color-background-layer-01);
-  --message-mode-primary-background: var(--color-background-layer-01);
-  --message-mode-secondary-background: var(--color-background-layer-02);
-  --message-main-text-color: var(--color-foreground-text-strong);
+  --message-main-background: var(--component-message-background-primary);
+  --message-mode-primary-background: var(--component-message-background-primary);
+  --message-mode-secondary-background: var(--component-message-background-secondary);
+  --message-main-text-color: var(--color-text-strong);
   /* Info */
-  --message-info-border-color: var(--color-system-info-subtle);
-  --message-info-icon-color: var(--color-system-info-default);
+  --message-info-border-color: var(--component-message-border-information-default);
+  --message-info-icon-color: var(--component-message-icon-information-default);
   /* Success */
-  --message-success-border-color: var(--color-system-success-subtle);
-  --message-success-icon-color: var(--color-system-success-default);
+  --message-success-border-color: var(--component-message-border-success-default);
+  --message-success-icon-color: var(--component-message-icon-success-default);
   /* Error */
-  --message-error-background: var(--color-system-danger-discrete);
-  --message-error-border-color: var(--color-system-danger-subtle);
-  --message-error-icon-color: var(--color-system-danger-default);
-  --message-error-header-text-color: var(--color-system-danger-default);
+  --message-error-background: var(--component-message-background-error-default);
+  --message-error-border-color: var(--component-message-border-error-default);
+  --message-error-icon-color: var(--component-message-icon-error-default);
+  --message-error-header-text-color: var(--component-message-text-error-highlight-default);
   /* Warning */
-  --message-warning-border-color: var(--color-system-warning-subtle);
-  --message-warning-icon-color: var(--color-system-warning-default);
+  --message-warning-border-color: var(--component-message-border-warning-default);
+  --message-warning-icon-color: var(--component-message-icon-warning-default);
 }
 
 .tl-message--primary {
@@ -6239,14 +6422,106 @@ body {
   --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
 }
 
-/* Component variables */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-modal-background-default: var(--color-background-layer-01);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-overlay-background-default: var(--scania-color-base-black);
+  --component-overlay-opacity-default: 60;
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-overlay-background-default: var(--traton-color-base-black);
+  --component-overlay-opacity-default: 40;
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-overlay-background-default: var(--scania-color-grey-900);
+  --component-overlay-opacity-default: 84;
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-overlay-background-default: var(--traton-color-base-black);
+  --component-overlay-opacity-default: 60;
+}
+
 .tl-modal,
-:root {
-  --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
-  --modal-background: var(--color-background-layer-02);
-  --modal-backdrop: var(--color-background-overlay);
-  --modal-text: var(--color-foreground-text-strong);
-  --modal-cross-svg: var(--color-foreground-text-strong);
+.tl-modal__overlay {
+  --modal-background: var(--component-modal-background-default);
+  --modal-backdrop: color-mix(
+    in srgb,
+    var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
+    transparent
+  );
+  --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
+  --modal-text: var(--component-modal-text-title-default);
+  --modal-body-text: var(--component-modal-text-body-default);
+  --modal-cross-svg: var(--component-modal-icon-dismiss-default);
   --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
   --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
 }
@@ -6263,7 +6538,7 @@ body {
   box-shadow: var(--modal-shadow);
   margin: auto;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--modal-border-radius);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
@@ -6276,7 +6551,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-modal::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -6285,6 +6560,7 @@ body {
 }
 .tl-modal::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-modal::-webkit-scrollbar-button {
   height: 0;
@@ -6415,7 +6691,7 @@ body {
   font-weight: var(--body-01-font-weight);
   letter-spacing: var(--body-01-letter-spacing);
   text-transform: var(--body-01-text-transform);
-  color: var(--modal-text);
+  color: var(--modal-body-text);
   padding: 0 16px 16px;
 }
 .tl-modal__body::-webkit-scrollbar {
@@ -6425,7 +6701,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-modal__body::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -6434,6 +6710,7 @@ body {
 }
 .tl-modal__body::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-modal__body::-webkit-scrollbar-button {
   height: 0;
@@ -6466,15 +6743,16 @@ body {
   background-color: transparent;
   border: 0;
   padding: 0;
+  height: 20px;
+  width: 20px;
   appearance: unset;
   display: inline-block;
-  height: auto;
   color: var(--modal-text);
   cursor: pointer;
 }
 .tl-modal__close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -7119,8 +7397,10 @@ body {
   letter-spacing: var(--side-menu-text-item-letter-spacing);
 }
 .tl-side-menu__item:focus-visible {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-side-menu__item:hover {
   background-color: var(--side-menu-item-state-hover);
@@ -7233,8 +7513,10 @@ body {
   background-color: var(--side-menu-dropdown-list-item-custom-background-active);
 }
 .tl-side-menu__dropdown-item:focus {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-side-menu__dropdown-item--selected {
   background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
@@ -7419,7 +7701,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-side-menu__list-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -7428,6 +7710,7 @@ body {
 }
 .tl-side-menu__list-wrapper::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-side-menu__list-wrapper::-webkit-scrollbar-button {
   height: 0;
@@ -8537,7 +8820,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -8546,6 +8829,7 @@ body {
 }
 .tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-table--horizontal-scroll::-webkit-scrollbar-button {
   height: 0;
@@ -8597,8 +8881,10 @@ body {
   cursor: pointer;
 }
 .tl-table__row--clickable:focus-visible {
-  outline: 2px solid var(--table-header-button-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
   background-color: var(--table-zebra-mode);
@@ -8623,7 +8909,7 @@ body {
   transition: background-color 200ms ease;
   min-width: 192px;
 }
-.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
   background-color: var(--table-header-hover);
 }
 .tl-table__header-cell:first-of-type {
@@ -8697,8 +8983,10 @@ body {
   text-align: left;
 }
 .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
-  outline: 2px solid var(--table-header-button-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-table--compact .tl-table__header-button {
   padding: 0;
@@ -8782,7 +9070,7 @@ body {
 .tl-table--no-min-width .tl-table__body-cell {
   min-width: unset;
 }
-.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
   border-right: 1px solid var(--table-divider);
 }
 .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -9008,9 +9296,9 @@ body {
   padding: 0;
 }
 .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) {
-  outline: 2px solid var(--table-header-button-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
-  outline-offset: -1px;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
   z-index: 1;
 }
 
@@ -9081,7 +9369,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-table__expand-row-cell::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -9090,6 +9378,7 @@ body {
 }
 .tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-table__expand-row-cell::-webkit-scrollbar-button {
   height: 0;
@@ -9185,11 +9474,12 @@ body {
   border-left-color: var(--folder-tab-divider);
 }
 .tl-folder-tabs__tab:focus-visible {
-  outline: 2px solid currentcolor;
-  outline-offset: -4px;
-  box-shadow: none;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
 }
-.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
   background-color: var(--folder-tab-surface-hover);
   border-top-color: var(--folder-tab-surface-hover);
   color: var(--folder-tab-text);
@@ -9334,12 +9624,14 @@ body {
   outline: none;
 }
 .tl-inline-tabs__tab:focus-visible::before {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
   content: "";
   position: absolute;
   inset: 18px 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-inline-tabs__tab::after {
@@ -9382,6 +9674,7 @@ body {
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -9505,12 +9798,14 @@ body {
   outline: none;
 }
 .tl-navigation-tabs__tab:focus-visible::before {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
   content: "";
   position: absolute;
   inset: 18px 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-navigation-tabs__tab::after {
@@ -9553,6 +9848,7 @@ body {
   content: none;
 }
 .tl-navigation-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -10421,15 +10717,117 @@ body {
   transform: none;
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--scania-unit-4);
+  --component-toast-border-width-default: var(--scania-unit-4);
+  --component-toast-border-information-default: var(--scania-color-blue-300);
+  --component-toast-border-success-default: var(--scania-color-green-300);
+  --component-toast-border-warning-default: var(--scania-color-yellow-300);
+  --component-toast-border-error-default: var(--scania-color-red-400);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-strong);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--scania-color-blue-300);
+  --component-toast-icon-success-default: var(--scania-color-green-300);
+  --component-toast-icon-warning-default: var(--scania-color-yellow-300);
+  --component-toast-icon-error-default: var(--scania-color-red-400);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--traton-unit-4);
+  --component-toast-border-width-default: var(--traton-unit-4);
+  --component-toast-border-information-default: var(--color-system-info-default);
+  --component-toast-border-success-default: var(--color-system-success-default);
+  --component-toast-border-warning-default: var(--color-system-warning-default);
+  --component-toast-border-error-default: var(--color-system-danger-default);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-soft);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--color-system-info-default);
+  --component-toast-icon-success-default: var(--color-system-success-default);
+  --component-toast-icon-warning-default: var(--color-system-warning-default);
+  --component-toast-icon-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-toast-background-information-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-success-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-warning-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-error-default: var(--color-background-inverse-layer-01);
+  --component-toast-border-radius-default: var(--scania-unit-4);
+  --component-toast-border-width-default: var(--scania-unit-4);
+  --component-toast-border-information-default: var(--scania-color-blue-400);
+  --component-toast-border-success-default: var(--scania-color-green-300);
+  --component-toast-border-warning-default: var(--scania-color-yellow-400);
+  --component-toast-border-error-default: var(--scania-color-red-400);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-strong);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--scania-color-blue-400);
+  --component-toast-icon-success-default: var(--scania-color-green-300);
+  --component-toast-icon-warning-default: var(--scania-color-yellow-500);
+  --component-toast-icon-error-default: var(--scania-color-red-400);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--traton-unit-4);
+  --component-toast-border-width-default: var(--traton-unit-4);
+  --component-toast-border-information-default: var(--color-system-info-default);
+  --component-toast-border-success-default: var(--color-system-success-default);
+  --component-toast-border-warning-default: var(--color-system-warning-default);
+  --component-toast-border-error-default: var(--color-system-danger-default);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-soft);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--color-system-info-default);
+  --component-toast-icon-success-default: var(--color-system-success-default);
+  --component-toast-icon-warning-default: var(--color-system-warning-default);
+  --component-toast-icon-error-default: var(--color-system-danger-default);
+}
+
 .tl-toast {
-  --toast-background: var(--color-background-inverse-base);
-  --toast-headline: var(--color-foreground-text-inverse-strong);
-  --toast-subheadline: var(--color-foreground-text-inverse-soft);
-  --toast-dismiss: var(--color-foreground-text-inverse-strong);
-  --toast-icon-error: var(--color-system-danger-default);
-  --toast-icon-success: var(--color-system-success-default);
-  --toast-icon-warning: var(--color-system-warning-default);
-  --toast-icon-info: var(--color-system-info-default);
+  --toast-background: var(--component-toast-background-information-default);
+  --toast-headline: var(--component-toast-text-title-default);
+  --toast-subheadline: var(--component-toast-text-body-default);
+  --toast-dismiss: var(--component-toast-icon-dismiss-default);
+  --toast-icon-info: var(--component-toast-icon-information-default);
+  --toast-icon-success: var(--component-toast-icon-success-default);
+  --toast-icon-warning: var(--component-toast-icon-warning-default);
+  --toast-icon-error: var(--component-toast-icon-error-default);
 }
 
 .tl-toast {
@@ -10516,8 +10914,8 @@ body {
   cursor: pointer;
 }
 .tl-toast__close:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -10532,6 +10930,13 @@ body {
   color: var(--toast-icon-warning);
 }
 
+.tl-toast .tl-link {
+  text-decoration: underline;
+}
+.tl-toast .tl-link:hover {
+  text-decoration: none;
+}
+
 .tl-toggle {
   --toggle-switch: var(--color-brand-neutral-white);
   --toggle-text: var(--color-foreground-text-strong);
@@ -10582,8 +10987,8 @@ body {
   height: 16px;
 }
 .tl-toggle__input:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 16px;
@@ -10680,8 +11085,8 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
 .tl-tooltip {
   --tooltip-color: var(--component-tooltip-text-default);
   --tooltip-background: var(--component-tooltip-background-default);
-  --tooltip-border-radius: calc(var(--component-tooltip-border-radius-radius-default) * 1px);
-  --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-radius-none) * 1px);
+  --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
+  --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
 }
 
 .scania {