@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-dropdown-vars-beta.0

package/dist/tl-icon.css

@@ -1,5 +1,5 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
  */
 .tl-icon {
   display: inline-block;
@@ -284,6 +284,10 @@
   mask-image: var(--icon-document_tool-svg);
   background-color: currentcolor;
 }
+.tl-icon--document_word {
+  mask-image: var(--icon-document_word-svg);
+  background-color: currentcolor;
+}
 .tl-icon--document_wrong {
   mask-image: var(--icon-document_wrong-svg);
   background-color: currentcolor;

package/dist/tl-inline-tabs.css

@@ -1,56 +1,160 @@
+/**
+ * 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-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-light);
+  --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-light);
+  --component-tabs-background-scroll-default: var(--scania-color-grey-200);
+  --component-tabs-background-item-primary-default: var(--scania-color-grey-100);
+  --component-tabs-background-item-primary-hover: var(--scania-color-grey-200);
+  --component-tabs-background-item-primary-current-default: var(--scania-color-grey-50);
+  --component-tabs-background-item-secondary-default: var(--scania-color-grey-100);
+  --component-tabs-background-item-secondary-hover: var(--scania-color-grey-200);
+  --component-tabs-background-item-secondary-current-default: var(--scania-color-base-white);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--scania-color-grey-850);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--scania-color-blue-400);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--scania-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-light);
+  --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-light);
+  --component-tabs-background-scroll-default: var(--traton-color-grey-300);
+  --component-tabs-background-item-primary-default: var(--traton-color-grey-200);
+  --component-tabs-background-item-primary-hover: var(--traton-color-grey-300);
+  --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
+  --component-tabs-background-item-secondary-default: var(--traton-color-grey-200);
+  --component-tabs-background-item-secondary-hover: var(--traton-color-grey-300);
+  --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--color-border-discrete);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--traton-color-blue-500);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--traton-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-dark);
+  --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-dark);
+  --component-tabs-background-scroll-default: var(--scania-color-grey-750);
+  --component-tabs-background-item-primary-default: var(--scania-color-grey-800);
+  --component-tabs-background-item-primary-hover: var(--scania-color-grey-800);
+  --component-tabs-background-item-primary-current-default: var(--scania-color-grey-850);
+  --component-tabs-background-item-secondary-default: var(--scania-color-grey-750);
+  --component-tabs-background-item-secondary-hover: var(--scania-color-grey-800);
+  --component-tabs-background-item-secondary-current-default: var(--scania-color-grey-800);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--scania-color-grey-50);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--scania-color-blue-300);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--scania-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-dark);
+  --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-dark);
+  --component-tabs-background-scroll-default: var(--traton-color-blue-800);
+  --component-tabs-background-item-primary-default: var(--traton-color-blue-850);
+  --component-tabs-background-item-primary-hover: var(--traton-color-blue-800);
+  --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
+  --component-tabs-background-item-secondary-default: var(--traton-color-blue-850);
+  --component-tabs-background-item-secondary-hover: var(--traton-color-blue-800);
+  --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--color-border-discrete);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--traton-color-yellow-400);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--traton-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
 .tl-inline-tabs {
   /* Horizontal divider */
-  --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
-  /* Mode variant backgrounds */
-  --inline-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
-  --inline-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
-  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
+  --inline-tabs-horizontal-divider: var(--component-tabs-border-default);
   /* Scroll button */
-  --inline-tabs-scroll-button-text: var(--color-foreground-icon-strong);
-  --inline-tabs-scroll-button-background: var(--inline-tabs-tab-background);
-  --inline-tabs-scroll-button-background-hover: var(--inline-tabs-tab-background);
-  --inline-tabs-scroll-button-background-active: var(--inline-tabs-tab-background);
+  --inline-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
+  --inline-tabs-scroll-button-background: var(--component-tabs-background-primary);
 }
 .tl-inline-tabs--primary {
-  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
+  --inline-tabs-scroll-button-background: var(--component-tabs-background-primary);
 }
 .tl-inline-tabs--secondary {
-  --inline-tabs-tab-background: var(--inline-tabs-tab-background-secondary);
-}
-
-.traton .tl-inline-tabs {
-  --inline-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
-  --inline-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
+  --inline-tabs-scroll-button-background: var(--component-tabs-background-secondary);
 }
 
 .tl-inline-tabs__tab {
   /* Tab */
-  --inline-tabs-tab: var(--color-foreground-text-soft);
-  --inline-tabs-tab-selected: var(--color-foreground-text-strong);
-  --inline-tabs-tab-disabled: var(--color-foreground-text-disabled);
-  --inline-tabs-tab-hover: var(--color-foreground-text-strong);
-  --inline-tabs-tab-focus: var(--color-foreground-border-accent-focus);
-  --inline-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
-  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
+  --inline-tabs-tab-color: var(--component-tabs-text-item-default);
+  --inline-tabs-tab-color-selected: var(--component-tabs-text-item-current-default);
+  --inline-tabs-tab-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
+  --inline-tabs-tab-color-hover: var(--component-tabs-text-item-current-default);
+  --inline-tabs-tab-indicator-active: var(--component-tabs-border-item-indicator-default);
+  --inline-tabs-tab-indicator-hover: var(--component-tabs-border-item-hover);
 }
 
 /* Typography Usage mixins */
 .tl-inline-tabs__tab {
   all: unset;
-  margin-right: 32px;
   box-sizing: border-box;
 }
 .tl-inline-tabs__tab * {
   box-sizing: border-box;
 }
 .tl-inline-tabs__tab {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--inline-tabs-tab);
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  color: var(--inline-tabs-tab-color);
   text-decoration: none;
   display: block;
   position: relative;
@@ -58,19 +162,14 @@
   white-space: nowrap;
   background-color: transparent;
   border: 0;
-  padding: 20px 4px;
+  padding: 20px 8px;
 }
 .tl-inline-tabs__tab:focus-visible {
-  outline: none;
-}
-.tl-inline-tabs__tab:focus-visible::before {
-  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;
+  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;
+  outline-offset: -2px;
 }
 .tl-inline-tabs__tab::after {
   background-color: var(--inline-tabs-tab-indicator-hover);
@@ -89,29 +188,30 @@
 .tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
   width: 0%;
 }
-.tl-inline-tabs__tab:hover {
+.tl-inline-tabs__tab:hover:not(.tl-inline-tabs__tab--disabled, .tl-inline-tabs__tab--selected) {
   cursor: pointer;
-  color: var(--inline-tabs-tab-hover);
+  color: var(--inline-tabs-tab-color-hover);
 }
-.tl-inline-tabs__tab:hover::after {
+.tl-inline-tabs__tab:hover:not(.tl-inline-tabs__tab--disabled, .tl-inline-tabs__tab--selected)::after {
   width: 100%;
 }
 .tl-inline-tabs__tab--selected {
-  color: var(--inline-tabs-tab-selected);
+  color: var(--inline-tabs-tab-color-selected);
 }
 .tl-inline-tabs__tab--selected::after {
   background-color: var(--inline-tabs-tab-indicator-active);
   width: 100%;
 }
 .tl-inline-tabs__tab--disabled {
-  color: var(--inline-tabs-tab-disabled);
-  pointer-events: none;
+  opacity: var(--inline-tabs-tab-opacity-disabled);
   cursor: not-allowed;
+  user-select: none;
 }
 .tl-inline-tabs__tab--disabled::after {
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -128,26 +228,22 @@
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
-  gap: 16px;
   position: relative;
-  background-color: var(--inline-tabs-tab-background);
+  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
 }
 .tl-inline-tabs::-webkit-scrollbar {
   display: none;
 }
-.tl-inline-tabs::after {
-  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
-  content: " ";
-  display: block;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
+.tl-inline-tabs:focus-visible {
+  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-inline-tabs__scroll-button {
-  background-color: transparent;
-  color: var(--inline-tabs-scroll-button-text);
+  background-color: var(--inline-tabs-scroll-button-background);
+  color: var(--inline-tabs-scroll-button-color);
   cursor: pointer;
   min-width: 48px;
   border: 0;
@@ -157,6 +253,13 @@
   opacity: 1;
   position: sticky;
 }
+.tl-inline-tabs__scroll-button:focus-visible {
+  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;
+  outline-offset: -2px;
+}
 
 .tl-inline-tabs__scroll-button--right {
   right: 0;
@@ -169,5 +272,5 @@
 }
 
 .tl-inline-tabs__scroll-button svg {
-  fill: var(--inline-tabs-scroll-button-text);
+  fill: var(--inline-tabs-scroll-button-color);
 }

package/dist/tl-link.css

@@ -1,25 +1,126 @@
 /* Typography Usage mixins */
+/**
+ * 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 {
-  --link: var(--color-system-info-default);
+  --link: var(--color-text-strong);
+  --link-hover: var(--color-text-strong);
+  --link-visited: var(--color-text-strong);
 }
 
 .tl-toast .tl-link {
-  --link: var(--color-system-info-default);
-  --link-hover: var(--color-foreground-text-accent-default);
+  --link: var(--color-text-inverse-strong);
+  --link-hover: var(--color-text-inverse-strong);
+  --link-visited: var(--color-text-inverse-strong);
 }
 
 .traton .tl-link {
-  --link-focus-outline-width: 4px;
+  --link-focus-outline-width: 2px;
 }
 
 .tl-link-text {
@@ -44,8 +145,10 @@
   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 {
@@ -60,15 +163,10 @@
   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;
 }

package/dist/tl-message.css

@@ -1,23 +1,137 @@
 /* Typography Usage mixins */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-default);
+  --component-message-border-success-default: var(--color-system-success-default);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-default);
+  --component-message-border-radius-default: var(--scania-unit-4);
+  --component-message-border-width-default: var(--scania-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-default);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-subtle);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--traton-unit-4);
+  --component-message-border-width-default: var(--traton-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-defined);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-default);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--scania-unit-4);
+  --component-message-border-width-default: var(--scania-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-subtle);
+  --component-message-icon-warning-default: var(--color-system-warning-subtle);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-message-background-primary: var(--color-background-layer-01);
+  --component-message-background-secondary: var(--color-background-layer-02);
+  --component-message-background-information-default: var(--color-background-layer-01);
+  --component-message-background-success-default: var(--color-background-layer-01);
+  --component-message-background-warning-default: var(--color-background-layer-01);
+  --component-message-background-error-default: var(--color-system-danger-discrete);
+  --component-message-text-information-default: var(--color-text-strong);
+  --component-message-text-success-default: var(--color-text-strong);
+  --component-message-text-warning-default: var(--color-text-strong);
+  --component-message-text-error-default: var(--color-text-strong);
+  --component-message-text-error-highlight-default: var(--color-system-danger-default);
+  --component-message-border-information-default: var(--color-system-info-subtle);
+  --component-message-border-success-default: var(--color-system-success-subtle);
+  --component-message-border-warning-default: var(--color-system-warning-subtle);
+  --component-message-border-error-default: var(--color-system-danger-subtle);
+  --component-message-border-radius-default: var(--traton-unit-4);
+  --component-message-border-width-default: var(--traton-unit-4);
+  --component-message-icon-information-default: var(--color-system-info-default);
+  --component-message-icon-success-default: var(--color-system-success-default);
+  --component-message-icon-warning-default: var(--color-system-warning-subtle);
+  --component-message-icon-error-default: var(--color-system-danger-default);
+}
+
 .tl-message {
-  --message-main-background: var(--color-background-layer-01);
-  --message-mode-primary-background: var(--color-background-layer-01);
-  --message-mode-secondary-background: var(--color-background-layer-02);
-  --message-main-text-color: var(--color-foreground-text-strong);
+  --message-main-background: var(--component-message-background-primary);
+  --message-mode-primary-background: var(--component-message-background-primary);
+  --message-mode-secondary-background: var(--component-message-background-secondary);
+  --message-main-text-color: var(--color-text-strong);
   /* Info */
-  --message-info-border-color: var(--color-system-info-subtle);
-  --message-info-icon-color: var(--color-system-info-default);
+  --message-info-border-color: var(--component-message-border-information-default);
+  --message-info-icon-color: var(--component-message-icon-information-default);
   /* Success */
-  --message-success-border-color: var(--color-system-success-subtle);
-  --message-success-icon-color: var(--color-system-success-default);
+  --message-success-border-color: var(--component-message-border-success-default);
+  --message-success-icon-color: var(--component-message-icon-success-default);
   /* Error */
-  --message-error-background: var(--color-system-danger-discrete);
-  --message-error-border-color: var(--color-system-danger-subtle);
-  --message-error-icon-color: var(--color-system-danger-default);
-  --message-error-header-text-color: var(--color-system-danger-default);
+  --message-error-background: var(--component-message-background-error-default);
+  --message-error-border-color: var(--component-message-border-error-default);
+  --message-error-icon-color: var(--component-message-icon-error-default);
+  --message-error-header-text-color: var(--component-message-text-error-highlight-default);
   /* Warning */
-  --message-warning-border-color: var(--color-system-warning-subtle);
-  --message-warning-icon-color: var(--color-system-warning-default);
+  --message-warning-border-color: var(--component-message-border-warning-default);
+  --message-warning-icon-color: var(--component-message-icon-warning-default);
 }
 
 .tl-message--primary {