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

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 {
@@ -403,8 +405,8 @@
   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;
 }
@@ -531,15 +533,61 @@
   text-transform: var(--detail-03-text-transform);
 }
 
+/**
+ * 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-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-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-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
 .tl-breadcrumbs {
-  --breadcrumb-label: var(--color-foreground-text-strong);
-  --breadcrumb-hover: var(--color-foreground-text-strong);
-  --breadcrumb-current: var(--color-foreground-text-subtle);
-  --breadcrumb-separator-color: var(--color-foreground-text-strong);
+  --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
+  --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
+  --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
+  --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
   --breadcrumb-separator-margin: 4px;
   --breadcrumb-separator-width: 4px;
   --breadcrumb-separator-height: 8px;
-  --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
+  --breadcrumb-focus-outline-color: var(--color-system-info-default);
   --breadcrumb-focus-outline-width: 2px;
 }
 
@@ -593,7 +641,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;
@@ -616,14 +667,14 @@
 .scania.tl-mode-light {
   --component-button-background-standard-primary-default: var(--scania-color-blue-600);
   --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
-  --component-button-background-standard-primary-active: var(--scania-color-blue-700);
+  --component-button-background-standard-primary-active: var(--scania-color-blue-800);
   --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);
   --component-button-background-standard-tertiary-default: var(--color-background-none);
   --component-button-background-standard-tertiary-hover: var(--color-background-none);
   --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-default);
+  --component-button-background-danger-primary-default: var(--scania-color-red-400);
   --component-button-background-danger-primary-hover: var(--scania-color-red-500);
   --component-button-background-danger-primary-active: var(--scania-color-red-600);
   --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -645,59 +696,68 @@
   --component-button-border-danger-primary-default: var(--color-border-none);
   --component-button-border-danger-primary-hover: var(--color-border-none);
   --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-border-danger-secondary-default: var(--scania-color-red-400);
   --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-border-danger-secondary-active: var(--scania-color-red-600);
   --component-button-border-danger-tertiary-default: var(--color-border-none);
   --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
+  --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
+  --component-button-icon-standard-primary-default: var(--scania-color-base-white);
   --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
+    --component-button-icon-standard-primary-default
   );
   --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
+    --component-button-icon-standard-primary-default
+  );
+  --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
+  --component-button-icon-standard-secondary-hover: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-secondary-active: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
+  --component-button-icon-standard-tertiary-hover: var(
+    --component-button-icon-standard-tertiary-default
   );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
+  --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-hover: var(--component-button-icon-danger-primary-default);
   --component-button-icon-danger-primary-active: var(
-    --component-button-text-danger-primary-default
+    --component-button-icon-danger-primary-default
   );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
   --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
+  --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
   --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
   --component-button-opacity-disabled: var(--scania-opacity-25);
-  --component-button-text-standard-primary-default: var(--color-text-inverse-brand);
+  --component-button-text-standard-primary-default: var(--scania-color-base-white);
   --component-button-text-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
   --component-button-text-standard-primary-active: var(
     --component-button-text-standard-primary-default
   );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
+  --component-button-text-standard-secondary-default: var(--scania-color-base-black);
+  --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
+  --component-button-text-standard-secondary-active: var(--scania-color-base-black);
+  --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
+  --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
+  --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
+  --component-button-text-danger-primary-default: var(--scania-color-base-white);
   --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
   --component-button-text-danger-primary-active: var(
     --component-button-text-danger-primary-default
   );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-text-danger-secondary-default: var(--scania-color-red-400);
   --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-text-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
+  --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
   --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
 }
@@ -706,9 +766,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);
@@ -743,23 +803,32 @@
   --component-button-border-danger-tertiary-default: var(--color-border-none);
   --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
   --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
-  --component-button-icon-standard-primary-default: #fff;
+  --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-button-icon-standard-primary-default: var(--traton-color-base-white);
   --component-button-icon-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
   --component-button-icon-standard-primary-active: var(
     --component-button-text-standard-primary-default
   );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-inverse-strong);
-  --component-button-icon-danger-primary-hover: var(--component-button-text-danger-primary-default);
+  --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
+  --component-button-icon-standard-secondary-hover: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-secondary-active: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
+  --component-button-icon-standard-tertiary-hover: var(
+    --component-button-icon-standard-tertiary-default
+  );
+  --component-button-icon-standard-tertiary-active: var(
+    --component-button-icon-standard-tertiary-default
+  );
+  --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-text-danger-primary-default
+    --component-button-icon-danger-primary-default
   );
   --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
   --component-button-icon-danger-secondary-hover: var(
@@ -776,7 +845,7 @@
     --component-button-text-danger-tertiary-default
   );
   --component-button-opacity-disabled: var(--traton-opacity-25);
-  --component-button-text-standard-primary-default: #fff;
+  --component-button-text-standard-primary-default: var(--traton-color-base-white);
   --component-button-text-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
@@ -789,7 +858,7 @@
   --component-button-text-standard-tertiary-default: var(--color-text-strong);
   --component-button-text-standard-tertiary-hover: var(--color-text-strong);
   --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-inverse-strong);
+  --component-button-text-danger-primary-default: var(--traton-color-base-white);
   --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
   --component-button-text-danger-primary-active: var(
     --component-button-text-danger-primary-default
@@ -824,7 +893,7 @@
   --component-button-background-standard-tertiary-default: var(--color-background-none);
   --component-button-background-standard-tertiary-hover: var(--color-background-none);
   --component-button-background-standard-tertiary-active: var(--color-background-none);
-  --component-button-background-danger-primary-default: var(--color-system-danger-subtle);
+  --component-button-background-danger-primary-default: var(--scania-color-red-400);
   --component-button-background-danger-primary-hover: var(--scania-color-red-500);
   --component-button-background-danger-primary-active: var(--scania-color-red-600);
   --component-button-background-danger-secondary-default: var(--color-background-none);
@@ -846,59 +915,68 @@
   --component-button-border-danger-primary-default: var(--color-border-none);
   --component-button-border-danger-primary-hover: var(--color-border-none);
   --component-button-border-danger-primary-active: var(--color-border-none);
-  --component-button-border-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-border-danger-secondary-default: var(--scania-color-red-400);
   --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-border-danger-secondary-active: var(--scania-color-red-600);
   --component-button-border-danger-tertiary-default: var(--color-border-none);
   --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
-  --component-button-icon-standard-primary-default: var(--color-text-inverse-brand);
+  --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
+  --component-button-icon-standard-primary-default: var(--scania-color-base-white);
   --component-button-icon-standard-primary-hover: var(
-    --component-button-text-standard-primary-default
+    --component-button-icon-standard-primary-default
   );
   --component-button-icon-standard-primary-active: var(
-    --component-button-text-standard-primary-default
+    --component-button-icon-standard-primary-default
+  );
+  --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
+  --component-button-icon-standard-secondary-hover: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-secondary-active: var(
+    --component-button-icon-standard-secondary-default
   );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-strong);
+  --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
+  --component-button-icon-standard-tertiary-hover: var(
+    --component-button-icon-standard-tertiary-default
+  );
+  --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-hover: var(--component-button-icon-danger-primary-default);
   --component-button-icon-danger-primary-active: var(
     --component-button-icon-danger-primary-default
   );
-  --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
   --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
+  --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
   --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
   --component-button-opacity-disabled: var(--scania-opacity-25);
-  --component-button-text-standard-primary-default: var(--color-text-brand);
+  --component-button-text-standard-primary-default: var(--scania-color-base-white);
   --component-button-text-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
   --component-button-text-standard-primary-active: var(
     --component-button-text-standard-primary-default
   );
-  --component-button-text-standard-secondary-default: var(--color-text-strong);
-  --component-button-text-standard-secondary-hover: var(--color-text-strong);
-  --component-button-text-standard-secondary-active: var(--color-text-strong);
-  --component-button-text-standard-tertiary-default: var(--color-text-strong);
-  --component-button-text-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-strong);
+  --component-button-text-standard-secondary-default: var(--scania-color-base-white);
+  --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
+  --component-button-text-standard-secondary-active: var(--scania-color-base-white);
+  --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
+  --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
+  --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
+  --component-button-text-danger-primary-default: var(--scania-color-base-white);
   --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
   --component-button-text-danger-primary-active: var(
     --component-button-text-danger-primary-default
   );
-  --component-button-text-danger-secondary-default: var(--color-system-danger-default);
+  --component-button-text-danger-secondary-default: var(--scania-color-red-400);
   --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
   --component-button-text-danger-secondary-active: var(--scania-color-red-600);
-  --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
+  --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
   --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
   --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
 }
@@ -907,9 +985,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);
@@ -944,20 +1022,29 @@
   --component-button-border-danger-tertiary-default: var(--color-border-none);
   --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
   --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
-  --component-button-icon-standard-primary-default: #000;
+  --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-button-icon-standard-primary-default: var(--traton-color-base-black);
   --component-button-icon-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
   --component-button-icon-standard-primary-active: var(
     --component-button-text-standard-primary-default
   );
-  --component-button-icon-standard-secondary-default: var(--color-text-strong);
-  --component-button-icon-standard-secondary-hover: var(--color-text-strong);
-  --component-button-icon-standard-secondary-active: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-default: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-hover: var(--color-text-strong);
-  --component-button-icon-standard-tertiary-active: var(--color-text-strong);
-  --component-button-icon-danger-primary-default: var(--color-text-strong);
+  --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
+  --component-button-icon-standard-secondary-hover: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-secondary-active: var(
+    --component-button-icon-standard-secondary-default
+  );
+  --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
+  --component-button-icon-standard-tertiary-hover: var(
+    --component-button-icon-standard-tertiary-default
+  );
+  --component-button-icon-standard-tertiary-active: var(
+    --component-button-icon-standard-tertiary-default
+  );
+  --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
@@ -977,7 +1064,7 @@
     --component-button-text-danger-tertiary-default
   );
   --component-button-opacity-disabled: var(--traton-opacity-25);
-  --component-button-text-standard-primary-default: #000;
+  --component-button-text-standard-primary-default: var(--traton-color-base-black);
   --component-button-text-standard-primary-hover: var(
     --component-button-text-standard-primary-default
   );
@@ -990,7 +1077,7 @@
   --component-button-text-standard-tertiary-default: var(--color-text-strong);
   --component-button-text-standard-tertiary-hover: var(--color-text-strong);
   --component-button-text-standard-tertiary-active: var(--color-text-strong);
-  --component-button-text-danger-primary-default: var(--color-text-strong);
+  --component-button-text-danger-primary-default: var(--traton-color-base-white);
   --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
   --component-button-text-danger-primary-active: var(
     --component-button-text-danger-primary-default
@@ -1012,69 +1099,54 @@
 }
 
 .tl-button {
-  --button-transparent: transparent;
-  --button-white: var(--color-brand-neutral-white);
-  --button-black: var(--color-brand-neutral-black);
-  --button-radius: var(--dimension-radius-for-surface-clickable);
+  --button-radius: calc(var(--component-button-border-radius-default) * 1px);
   --button-sm-only-icon-padding: 11px;
   --button-md-only-icon-padding: 13px;
   --button-lg-only-icon-padding: 17px;
-  --button-primary-background: var(--color-background-accent-primary-default);
-  --button-primary-background-hover: var(--color-background-accent-primary-hover);
-  --button-primary-background-active: var(--color-background-accent-primary-pressed);
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-primary-color: var(--component-button-primary-text);
-  --button-primary-color-disabled: var(--color-foreground-text-disabled);
-  --button-primary-border-color: var(--button-transparent);
-  --button-primary-border-color-disabled: var(--button-transparent);
-  --button-primary-background-focus: var(--color-background-accent-primary-focus);
-  --button-primary-color-focus: var(--component-button-primary-text);
-  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
+  --button-primary-background: var(--component-button-background-standard-primary-default);
+  --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
+  --button-primary-background-active: var(--component-button-background-standard-primary-active);
+  --button-primary-background-focus: var(--component-button-background-standard-primary-default);
+  --button-primary-color: var(--component-button-text-standard-primary-default);
+  --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
+  --button-primary-border-color: var(--component-button-border-standard-primary-default);
+  --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
   --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-secondary-background: var(--button-transparent);
-  --button-secondary-color: var(--color-foreground-text-strong);
-  --button-secondary-border-color: var(--color-foreground-border-soft);
-  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
-  --button-secondary-border-color-active: var(--color-foreground-border-strong);
-  --button-secondary-background-disabled: var(--button-transparent);
-  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
-  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
-  --button-secondary-background-focus: var(--button-transparent);
-  --button-secondary-color-focus: var(--color-foreground-text-strong);
-  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-primary-icon-color: var(--component-button-icon-standard-primary-default);
+  --button-secondary-background: var(--component-button-background-standard-secondary-default);
+  --button-secondary-background-focus: var(
+    --component-button-background-standard-secondary-default
+  );
+  --button-secondary-color: var(--component-button-text-standard-secondary-default);
+  --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
+  --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
+  --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
+  --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
+  --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
   --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-ghost-background: var(--button-transparent);
-  --button-ghost-color: var(--color-foreground-text-strong);
-  --button-ghost-border-color: var(--button-transparent);
-  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
-  --button-ghost-border-color-active: var(--color-foreground-border-strong);
-  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
-  --button-ghost-border-color-disabled: var(--button-transparent);
-  --button-ghost-background-focus: var(--button-transparent);
-  --button-ghost-color-focus: var(--color-foreground-text-strong);
-  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-secondary-icon-color: var(--component-button-icon-standard-secondary-default);
+  --button-ghost-background: var(--component-button-background-standard-tertiary-default);
+  --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
+  --button-ghost-color: var(--component-button-text-standard-tertiary-default);
+  --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
+  --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
+  --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
+  --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
+  --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
   --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
-  --button-danger-background: var(--color-background-accent-danger-default);
-  --button-danger-color: var(--button-white);
-  --button-danger-border-color: var(--button-transparent);
-  --button-danger-background-hover: var(--color-background-accent-danger-hover);
-  --button-danger-background-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-  --button-danger-color-disabled: var(--color-foreground-text-disabled);
-  --button-danger-border-color-disabled: var(--button-transparent);
-  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
-  --button-danger-background-focus: var(--color-background-accent-danger-focus);
-  --button-danger-color-focus: var(--button-white);
-  --button-danger-border-color-focus: var(--button-transparent);
+  --button-ghost-icon-color: var(--component-button-icon-standard-tertiary-default);
+  --button-danger-background: var(--component-button-background-danger-primary-default);
+  --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
+  --button-danger-background-active: var(--component-button-background-danger-primary-active);
+  --button-danger-background-focus: var(--component-button-background-danger-primary-default);
+  --button-danger-color: var(--component-button-text-danger-primary-default);
+  --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
+  --button-danger-border-color: var(--component-button-border-danger-primary-default);
+  --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
+  --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
   --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
-}
-.tl-button .tl-button--primary {
-  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
-  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
-}
-.tl-button .tl-button--secondary {
-  --button-primary-background-disabled: var(--button-white);
-  --button-danger-background-disabled: var(--button-white);
+  --button-danger-icon-color: var(--component-button-icon-danger-primary-default);
 }
 
 .scania .tl-button {
@@ -1111,8 +1183,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 */
@@ -1122,25 +1196,24 @@
   color: var(--button-primary-color);
   border-color: var(--button-primary-border-color);
 }
+.tl-button--primary .tl-icon {
+  color: var(--button-primary-icon-color);
+}
 .tl-button--primary:hover:not(:disabled) {
   background-color: var(--button-primary-background-hover);
 }
 .tl-button--primary:disabled {
-  background-color: var(--button-primary-background-disabled);
-  color: var(--button-primary-color-disabled);
-  border-color: var(--button-primary-border-color-disabled);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: var(--button-opacity-disabled);
 }
 .tl-button--primary:focus-visible:not(:disabled) {
   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);
@@ -1151,24 +1224,24 @@
   color: var(--button-secondary-color);
   border-color: var(--button-secondary-border-color);
 }
+.tl-button--secondary .tl-icon {
+  color: var(--button-secondary-icon-color);
+}
 .tl-button--secondary:hover:not(:disabled) {
   border-color: var(--button-secondary-border-color-hover);
 }
 .tl-button--secondary:disabled {
-  background-color: var(--button-secondary-background-disabled);
-  color: var(--button-secondary-color-disabled);
-  border-color: var(--button-secondary-border-color-disabled);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: var(--button-opacity-disabled);
 }
 .tl-button--secondary:focus-visible:not(:disabled) {
   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);
@@ -1178,22 +1251,24 @@
   color: var(--button-ghost-color);
   border-color: var(--button-ghost-border-color);
 }
+.tl-button--ghost .tl-icon {
+  color: var(--button-ghost-icon-color);
+}
 .tl-button--ghost:hover:not(:disabled) {
   border-color: var(--button-ghost-border-color-hover);
 }
 .tl-button--ghost:disabled {
-  color: var(--button-ghost-color-disabled);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: var(--button-opacity-disabled);
 }
 .tl-button--ghost:focus-visible:not(:disabled) {
   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);
@@ -1203,24 +1278,24 @@
   color: var(--button-danger-color);
   border-color: var(--button-danger-border-color);
 }
+.tl-button--danger .tl-icon {
+  color: var(--button-danger-icon-color);
+}
 .tl-button--danger:hover:not(:disabled) {
   background-color: var(--button-danger-background-hover);
 }
 .tl-button--danger:disabled {
-  background-color: var(--button-danger-background-disabled);
-  color: var(--button-danger-color-disabled);
-  border-color: var(--button-danger-border-color-disabled);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: var(--button-opacity-disabled);
 }
 .tl-button--danger:focus-visible:not(:disabled) {
   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);
@@ -1303,20 +1378,26 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-card-background-primary: #fff;
-  --component-card-background-secondary: #fff;
+  --component-card-background-primary-default: var(--scania-color-base-white);
+  --component-card-background-secondary-default: var(--scania-color-base-white);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-light);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .tds-mode-dark,
@@ -1324,20 +1405,26 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-card-background-primary: var(--color-background-layer-01);
-  --component-card-background-secondary: var(--color-background-layer-02);
+  --component-card-background-primary-default: var(--color-background-layer-01);
+  --component-card-background-secondary-default: var(--color-background-layer-02);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .tl-card {
@@ -1448,9 +1535,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);
@@ -1516,7 +1604,7 @@
 
 .tl-card__body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .tl-card--stretch .tl-card__body {
   display: flex;
@@ -1766,21 +1854,21 @@
 }
 
 .tl-chip {
-  --chip-text: var(--component-chip-text-default);
+  --chip-text: var(--component-chip-text-standard-default);
   --chip-text-active: var(--component-chip-text-selected-default);
-  --chip-background: var(--component-chip-background-default);
-  --chip-background-hover: var(--component-chip-background-hover);
-  --chip-background-focus: var(--component-chip-background-hover);
+  --chip-background: var(--component-chip-background-standard-default);
+  --chip-background-hover: var(--component-chip-background-standard-hover);
+  --chip-background-focus: var(--component-chip-background-standard-hover);
   --chip-background-active: var(--component-chip-background-selected-default);
   --chip-background-active-hover: var(--component-chip-background-selected-hover);
   --chip-focused-on-selected: var(--component-chip-background-selected-default);
-  --chip-border: var(--component-chip-border-default);
-  --chip-border-hover: var(--component-chip-border-hover);
+  --chip-border: var(--component-chip-border-standard-default);
+  --chip-border-hover: var(--component-chip-border-standard-hover);
   --chip-border-selected: var(--component-chip-border-selected-default);
   --chip-border-selected-hover: var(--component-chip-border-selected-hover);
   --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
-  --chip-opacity-disabled: var(--component-chip-opacity-disabled);
-  --chip-icon-fill: var(--component-chip-text-default);
+  --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
+  --chip-icon-fill: var(--component-chip-text-standard-default);
   --chip-icon-fill-active: var(--component-chip-text-selected-default);
 }
 
@@ -1810,9 +1898,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 {
@@ -1835,9 +1924,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 {
@@ -2280,10 +2370,68 @@
   color: var(--color-foreground-text-disabled);
 }
 
+/**
+ * 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-divider-border-discrete-default: var(--scania-color-grey-200);
+  --component-divider-border-subtle-default: var(--scania-color-grey-350);
+  --component-divider-border-soft-default: var(--scania-color-grey-500);
+  --component-divider-border-defined-default: var(--scania-color-grey-650);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-700);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-800);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
 .tl-divider {
-  --divider-background: var(--color-foreground-border-discrete);
-  --divider-background-strong: var(--color-foreground-border-strong);
-  --divider-background-discrete: var(--color-foreground-border-discrete);
+  --divider-background: var(--component-divider-border-discrete-default);
+  --divider-background-discrete: var(--component-divider-border-discrete-default);
+  --divider-background-subtle: var(--component-divider-border-subtle-default);
+  --divider-background-soft: var(--component-divider-border-soft-default);
+  --divider-background-defined: var(--component-divider-border-defined-default);
+  --divider-background-strong: var(--component-divider-border-strong-default);
+  --divider-background-expressive: var(--component-divider-border-expressive-default);
 }
 
 .tl-divider {
@@ -2591,8 +2739,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 {
@@ -2899,12 +3049,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);
 }
 
@@ -3048,8 +3198,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);
@@ -3240,20 +3391,36 @@ body {
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-footer-border: var(--scania-color-blue-700);
-  --component-footer-primary: var(--scania-color-blue-800);
-  --component-footer-color-text-link-default: var(--color-text-brand);
-  --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-700);
+  --component-footer-background-main-default: var(--scania-color-blue-800);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-base);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-150);
+  --component-footer-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-inverse-strong);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-grey-50);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-grey-50);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-grey-300);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tds-mode-dark,
@@ -3261,35 +3428,51 @@ body {
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-footer-border: var(--scania-color-blue-800);
-  --component-footer-primary: var(--scania-color-blue-900);
-  --component-footer-color-text-link-default: #d8dde5;
-  --component-footer-color-text-copyright-default: var(--color-text-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-800);
+  --component-footer-background-main-default: var(--scania-color-blue-900);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-02);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-blue-1000);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-blue-1000);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-blue-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tl-footer {
-  --footer-top-background-primary: var(--color-background-layer-01);
-  --footer-top-background-secondary: var(--color-background-base);
-  --footer-top-background: var(--color-background-layer-01);
-  --footer-top-divider: var(--color-foreground-border-discrete);
-  --footer-top-links-desktop: var(--color-foreground-text-subtle);
-  --footer-top-links: var(--component-footer-text-color-link-text);
-  --footer-top-links-background-hover: var(--color-background-surface-300);
-  --footer-top-button-active: var(--color-background-surface-300);
-  --footer-main-background: var(--component-footer-primary);
-  --footer-main-links: var(--color-foreground-text-accent-brand);
-  --footer-main-divider: var(--component-footer-border);
-  --footer-main-copyright: var(--component-footer-text-color-copyright);
+  --footer-top-background-primary: var(--component-footer-background-top-default);
+  --footer-top-background-secondary: var(--component-footer-background-top-secondary);
+  --footer-top-background: var(--component-footer-background-top-default);
+  --footer-top-divider: var(--color-border-discrete);
+  --footer-top-links-desktop: var(--component-footer-text-title-default);
+  --footer-top-links: var(--component-footer-text-link-default);
+  --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
+  --footer-top-button-active: var(--component-footer-background-list-item-active);
+  --footer-main-background: var(--component-footer-background-main-default);
+  --footer-main-links: var(--component-footer-text-inverse-link-default);
+  --footer-main-divider: var(--component-footer-border-divider-default);
+  --footer-main-copyright: var(--component-footer-text-copyright-default);
 }
 .tl-footer.tl-footer--primary {
   --footer-top-background: var(--footer-top-background-primary);
@@ -3298,6 +3481,26 @@ body {
   --footer-top-background: var(--footer-top-background-secondary);
 }
 
+.scania .tl-footer {
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+}
+
+.traton .tl-mode-dark .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
+}
+
+.traton .tl-mode-light .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
+.traton .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
 .tl-footer__group {
   display: block;
 }
@@ -3339,8 +3542,8 @@ body {
   text-decoration: underline;
 }
 .tl-footer__link: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;
 }
@@ -3399,8 +3602,8 @@ body {
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title: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: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
     outline-offset: -2px;
     z-index: 1;
   }
@@ -3420,8 +3623,8 @@ body {
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link: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;
 }
@@ -3894,8 +4097,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;
@@ -3935,8 +4139,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);
@@ -3981,8 +4186,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);
@@ -4322,8 +4528,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 {
@@ -4360,8 +4567,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 {
@@ -5670,14 +5879,112 @@ body {
   height: 96px;
 }
 
+/**
+ * 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-link-icon-accent-default: var(--scania-color-blue-400);
+  --component-link-icon-accent-hover: var(--scania-color-blue-400);
+  --component-link-icon-accent-active: var(--scania-color-blue-600);
+  --component-link-icon-accent-visited: var(--scania-color-blue-600);
+  --component-link-icon-standard-default: var(--color-text-strong);
+  --component-link-icon-standard-hover: var(--color-text-defined);
+  --component-link-icon-standard-active: var(--color-text-soft);
+  --component-link-icon-standard-visited: var(--color-text-strong);
+  --component-link-opacity-disabled: var(--scania-opacity-25);
+  --component-link-text-accent-default: var(--scania-color-blue-400);
+  --component-link-text-accent-hover: var(--scania-color-blue-400);
+  --component-link-text-accent-active: var(--scania-color-blue-600);
+  --component-link-text-accent-visited: var(--scania-color-blue-600);
+  --component-link-text-standard-default: var(--color-text-strong);
+  --component-link-text-standard-hover: var(--color-text-defined);
+  --component-link-text-standard-active: var(--color-text-soft);
+  --component-link-text-standard-visited: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-link-icon-accent-default: var(--traton-color-blue-700);
+  --component-link-icon-accent-hover: var(--traton-color-blue-700);
+  --component-link-icon-accent-active: var(--traton-color-blue-950);
+  --component-link-icon-accent-visited: var(--traton-color-blue-950);
+  --component-link-icon-standard-default: var(--color-text-strong);
+  --component-link-icon-standard-hover: var(--color-text-defined);
+  --component-link-icon-standard-active: var(--color-text-soft);
+  --component-link-icon-standard-visited: var(--color-text-strong);
+  --component-link-opacity-disabled: var(--traton-opacity-25);
+  --component-link-text-accent-default: var(--traton-color-blue-700);
+  --component-link-text-accent-hover: var(--traton-color-blue-700);
+  --component-link-text-accent-active: var(--traton-color-blue-950);
+  --component-link-text-accent-visited: var(--traton-color-blue-950);
+  --component-link-text-standard-default: var(--color-text-strong);
+  --component-link-text-standard-hover: var(--color-text-defined);
+  --component-link-text-standard-active: var(--color-text-soft);
+  --component-link-text-standard-visited: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-link-icon-accent-default: var(--scania-color-blue-300);
+  --component-link-icon-accent-hover: var(--scania-color-blue-300);
+  --component-link-icon-accent-active: var(--scania-color-blue-100);
+  --component-link-icon-accent-visited: var(--scania-color-blue-100);
+  --component-link-icon-standard-default: var(--color-text-strong);
+  --component-link-icon-standard-hover: var(--color-text-defined);
+  --component-link-icon-standard-active: var(--color-text-soft);
+  --component-link-icon-standard-visited: var(--color-text-strong);
+  --component-link-opacity-disabled: var(--scania-opacity-25);
+  --component-link-text-accent-default: var(--scania-color-blue-300);
+  --component-link-text-accent-hover: var(--scania-color-blue-300);
+  --component-link-text-accent-active: var(--scania-color-blue-100);
+  --component-link-text-accent-visited: var(--scania-color-blue-100);
+  --component-link-text-standard-default: var(--color-text-strong);
+  --component-link-text-standard-hover: var(--color-text-defined);
+  --component-link-text-standard-active: var(--color-text-soft);
+  --component-link-text-standard-visited: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-link-icon-accent-default: var(--traton-color-blue-400);
+  --component-link-icon-accent-hover: var(--traton-color-blue-400);
+  --component-link-icon-accent-active: var(--traton-color-blue-150);
+  --component-link-icon-accent-visited: var(--traton-color-blue-150);
+  --component-link-icon-standard-default: var(--color-text-strong);
+  --component-link-icon-standard-hover: var(--color-text-defined);
+  --component-link-icon-standard-active: var(--color-text-soft);
+  --component-link-icon-standard-visited: var(--color-text-strong);
+  --component-link-opacity-disabled: var(--traton-opacity-25);
+  --component-link-text-accent-default: var(--traton-color-blue-400);
+  --component-link-text-accent-hover: var(--traton-color-blue-400);
+  --component-link-text-accent-active: var(--traton-color-blue-150);
+  --component-link-text-accent-visited: var(--traton-color-blue-150);
+  --component-link-text-standard-default: var(--color-text-strong);
+  --component-link-text-standard-hover: var(--color-text-defined);
+  --component-link-text-standard-active: var(--color-text-soft);
+  --component-link-text-standard-visited: var(--color-text-strong);
+}
+
 /* Component variables */
 .tl-link {
-  --link: var(--color-foreground-text-accent-default);
-  --link-hover: var(--color-foreground-text-accent-default);
+  --link: var(--component-link-text-accent-default);
+  --link-hover: var(--component-link-text-accent-hover);
   --link-focus-outline-width: 2px;
-  --link-visited: var(--color-foreground-text-accent-visited);
-  --link-disabled: var(--color-foreground-text-disabled);
-  --link-focus-outline-color: var(--color-foreground-border-accent-focus);
+  --link-visited: var(--component-link-text-accent-visited);
+  --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
+  --link-focus-outline-color: var(--color-system-info-default);
 }
 
 .tl-banner .tl-link {
@@ -5686,11 +5993,11 @@ body {
 
 .tl-toast .tl-link {
   --link: var(--color-system-info-default);
-  --link-hover: var(--color-foreground-text-accent-default);
+  --link-hover: var(--color-system-info-default);
 }
 
 .traton .tl-link {
-  --link-focus-outline-width: 4px;
+  --link-focus-outline-width: 2px;
 }
 
 .tl-link-text {
@@ -5715,8 +6022,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 {
@@ -5731,15 +6040,10 @@ body {
   text-decoration-color: var(--link-visited);
 }
 .tl-link--disabled {
-  color: var(--link-disabled);
-  text-decoration-color: var(--link-disabled);
+  opacity: var(--link-opacity-disabled);
   pointer-events: none;
   cursor: not-allowed;
 }
-.tl-link--disabled:visited {
-  color: var(--link-disabled);
-  text-decoration-color: var(--link-disabled);
-}
 .tl-link--underline {
   text-decoration: underline;
 }
@@ -6189,8 +6493,8 @@ body {
   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;
 }
@@ -6608,7 +6912,7 @@ body {
   --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
   --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
-  --component-side-menu-radius-default: var(--scania-unit-0);
+  --component-side-menu-radius-radius-default: var(--scania-unit-0);
   --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
   --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
   --component-side-menu-text-items-font-size: 14;
@@ -6649,7 +6953,7 @@ body {
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
     --traton-unit-12
   );
-  --component-side-menu-radius-default: var(--traton-unit-8);
+  --component-side-menu-radius-radius-default: var(--traton-unit-8);
   --component-side-menu-text-items-font-family: var(--traton-font-family-default);
   --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
   --component-side-menu-text-items-font-size: 14;
@@ -6686,7 +6990,7 @@ body {
   --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
   --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
-  --component-side-menu-radius-default: var(--scania-unit-0);
+  --component-side-menu-radius-radius-default: var(--scania-unit-0);
   --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
   --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
   --component-side-menu-text-items-font-size: 14;
@@ -6727,7 +7031,7 @@ body {
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
     --traton-unit-12
   );
-  --component-side-menu-radius-default: var(--traton-unit-8);
+  --component-side-menu-radius-radius-default: var(--traton-unit-8);
   --component-side-menu-text-items-font-family: var(--traton-font-family-default);
   --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
   --component-side-menu-text-items-font-size: 14;
@@ -6835,8 +7139,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);
@@ -6949,8 +7255,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);
@@ -8313,8 +8621,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);
@@ -8339,7 +8649,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 {
@@ -8413,8 +8723,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;
@@ -8498,7 +8810,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) {
@@ -8724,9 +9036,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;
 }
 
@@ -8901,11 +9213,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);
@@ -9050,12 +9363,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 {
@@ -9098,6 +9413,7 @@ body {
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -9221,12 +9537,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 {
@@ -9269,6 +9587,7 @@ body {
   content: none;
 }
 .tl-navigation-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -10232,8 +10551,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;
 }
@@ -10298,8 +10617,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;
@@ -10394,8 +10713,10 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
 }
 
 .tl-tooltip {
-  --tooltip-text: var(--color-foreground-text-inverse-strong);
-  --tooltip-background: var(--color-background-inverse-layer-03);
+  --tooltip-color: var(--component-tooltip-text-default);
+  --tooltip-background: var(--component-tooltip-background-default);
+  --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
+  --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
 }
 
 .scania {
@@ -10416,19 +10737,19 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
   position: fixed;
   z-index: var(--tds-z-index-tooltip, 1000);
   padding: 8px;
-  max-width: 204px;
+  max-width: 208px;
   width: max-content;
   white-space: normal;
-  word-wrap: break-word;
-  background-color: var(--tooltip-background, #333);
-  color: var(--tooltip-text, #fff);
+  overflow-wrap: break-word;
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-color);
   box-sizing: border-box;
   line-height: var(--tl-tooltip-line-height);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s ease, visibility 0.2s ease;
-  border-radius: 4px;
+  border-radius: var(--tooltip-border-radius);
 }
 .tl-tooltip--visible {
   opacity: 1;
@@ -10436,26 +10757,26 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
   pointer-events: auto;
 }
 .tl-tooltip--top-start {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
 }
 .tl-tooltip--top-end {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
 }
 .tl-tooltip--bottom-start {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--bottom-end {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--left-start {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--left-end {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
 }
 .tl-tooltip--right-start {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--right-end {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
 }