@scania/tegel-lite 0.1.0-var-work-beta.7 → 0.1.0-var-batch-4-beta.1

package/dist/assets/icons/traton/placeholder.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H6V4H4V6H2V4ZM14 4H10V2H14V4ZM22 4H18V2H22V4ZM28 4H26V2H28C29.1046 2 30 2.89543 30 4V6H28V4ZM4 10V14H2V10H4ZM28 14V10H30V14H28ZM4 18V22H2V18H4ZM28 22V18H30V22H28ZM4 26V28H6V30H4C2.89543 30 2 29.1046 2 28V26H4ZM28 28V26H30V28C30 29.1046 29.1046 30 28 30H26V28H28ZM10 28H14V30H10V28ZM18 28H22V30H18V28Z" fill="#0D0F13"/>
+</svg>

package/dist/components.css

@@ -1094,69 +1094,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 {
@@ -1204,15 +1189,15 @@
   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);
@@ -1233,15 +1218,15 @@
   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);
@@ -1260,13 +1245,15 @@
   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);
@@ -1285,15 +1272,15 @@
   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);
@@ -1376,67 +1363,19 @@
   width: 100%;
 }
 
-/**
- * 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-card-background-primary: #fff;
-  --component-card-background-secondary: #fff;
-  --component-card-border-radius-default: var(--scania-unit-4);
-  --component-card-space-padding-default: var(--scania-unit-16);
-}
-
-.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-border-radius-default: var(--traton-unit-0);
-  --component-card-space-padding-default: var(--traton-unit-0);
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark,
-.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-border-radius-default: var(--scania-unit-4);
-  --component-card-space-padding-default: var(--scania-unit-16);
-}
-
-.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-border-radius-default: var(--traton-unit-0);
-  --component-card-space-padding-default: var(--traton-unit-0);
-}
-
 .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;
@@ -1444,31 +1383,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;
@@ -1476,35 +1407,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 {
@@ -1520,7 +1427,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 {
@@ -1848,21 +1755,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);
 }
 
@@ -5966,7 +5873,6 @@ body {
   --link-hover: var(--component-link-text-accent-hover);
   --link-focus-outline-width: 2px;
   --link-visited: var(--component-link-text-accent-visited);
-  --link-disabled: var(--color-text-disabled);
   --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
   --link-focus-outline-color: var(--color-system-info-default);
 }
@@ -6022,15 +5928,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;
 }
@@ -6246,14 +6147,105 @@ 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);
+  --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-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);
 }
@@ -6270,7 +6262,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;
@@ -6899,7 +6891,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-border-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;
@@ -6940,7 +6932,7 @@ body {
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
     --traton-unit-12
   );
-  --component-side-menu-border-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;
@@ -6977,7 +6969,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-border-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;
@@ -7018,7 +7010,7 @@ body {
   --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
     --traton-unit-12
   );
-  --component-side-menu-border-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;
@@ -10685,8 +10677,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-radius-default) * 1px);
+  --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-radius-none) * 1px);
 }
 
 .scania {
@@ -10707,19 +10701,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;
@@ -10727,26 +10721,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);
 }