@scania/tegel 1.34.0-design.tokens.beta.test.0 → 1.34.0-internal-variables-demo.1

package/dist-styles/scania.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Global variables. Needed for local assets path. */
 /* Scania primitive tokens */
 /**
@@ -397,6 +398,7 @@
   --dimension-radius-for-area-large: var(--scania-unit-16);
   --dimension-radius-for-area-small: var(--scania-unit-2);
   --dimension-radius-focus-width: var(--traton-unit-2);
+  --dimension-radius-focus-width-side-menu: var(--traton-unit-2);
 }
 
 /* Scania logotype tokens */
@@ -1915,39 +1917,90 @@ tds-footer {
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.tl-header,
-tds-header {
-  --component-header-color-expressive-mobile-menu-primary: var(--scania-color-blue-900);
-  --component-header-color-expressive-mobile-menu-focus: var(--scania-color-blue-900);
-  --component-header-color-expressive-mobile-menu-pressed: var(--scania-color-blue-800);
-  --component-header-color-expressive-mobile-menu-selected: var(--scania-color-blue-800);
-  --component-header-color-expressive-mobile-menu-selected-expressive: var(--scania-color-blue-900);
-  --component-header-color-background: var(--scania-color-blue-900);
-  --component-header-color-dropdown-hover: var(--traton-color-blue-900);
-  --component-header-color-dropdown-focus: var(--traton-color-blue-1000);
-  --component-header-color-dropdown-text-transform: none;
-  --component-header-color-dropdown-font-family: var(--scania-font-family-semi condensed);
-  --component-header-color-dropdown-letter-spacing: -0.14px;
-  --component-header-color-dropdown-font-size: 14px;
-  --component-header-color-dropdown-line-height: 16px;
-  --component-header-color-dropdown-font-weight: var(--scania-font-weight-bold);
-  --component-header-color-foreground-strong: var(--color-brand-neutral-white);
+.scania {
+  /* ── Light-mode overrides ───────────────────── */
+  /* ── Dark-mode overrides ───────────────────── */
+}
+.scania tds-header,
+.scania .tl-header {
+  /* State & interaction colors */
+  --component-header-color-background-open: var(--color-foreground-border-accent-focus);
   --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
-  --component-header-color-foreground-defined: var(--color-foreground-text-defined);
-  --component-header-text-component-title-01-menu-font-family: var(
-    --scania-font-family-semi condensed
-  );
-  --component-header-text-component-title-01-menu-text-transform: none;
-  --component-header-text-component-title-01-menu-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-component-title-01-menu-font-size: 14px;
-  --component-header-text-component-title-01-menu-line-height: 16px;
-  --component-header-text-component-title-01-menu-letter-spacing: -0.14px;
-  --component-header-text-application-name-font-family: var(--scania-font-family-display);
-  --component-header-text-application-name-text-transform: none;
-  --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-application-name-font-size: 14px;
-  --component-header-text-application-name-line-height: 16px;
-  --component-header-text-application-name-letter-spacing: 0;
+  --component-header-dropdown-item-background: var(--color-background-layer-02);
+  --component-header-avatar-item-background: var(--color-background-layer-02);
+  --component-header-app-launcher-meny-background: var(--color-background-layer-02);
+  /* Sizing & spacing */
+  --component-header-brand-logo-size: 30px;
+  --component-header-space-profile-padding: 16px;
+  --component-header-item-image-size: 34px;
+  --component-header-item-image-left: 10px;
+  --component-header-item-width: none;
+  --component-header-item-border-right: 1px solid var(--header-basic-element-border);
+  /* Borders */
+  --component-header-border: none;
+  /* Typography */
+  --component-header-font-family-headline: var(--scania-font-family-display);
+  --component-header-font-weight: var(--scania-font-weight-regular);
+  --component-header-text-transform: none;
+}
+.scania .tds-mode-light tds-header,
+.scania .tds-mode-light .tl-header {
+  --component-header-color-background: var(--color-brand-primary-800);
+  --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
+  --component-header-color-background-hover: var(--color-brand-primary-700);
+  --component-header-color-background-border: var(--color-brand-primary-700);
+  --component-header-color-background-pressed: var(--color-brand-neutral-white);
+  --component-header-color-background-selected: var(--color-brand-primary-700);
+}
+.scania .tds-mode-dark tds-header,
+.scania .tds-mode-dark .tl-header {
+  --component-header-color-background: var(--color-brand-primary-900);
+  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
+  --component-header-color-background-hover: var(--color-brand-primary-800);
+  --component-header-color-background-border: var(--color-brand-primary-800);
+  --component-header-color-background-pressed: var(--color-brand-primary-800);
+  --component-header-color-background-selected: var(--color-brand-primary-800);
+}
+
+.traton {
+  /* ── Light-mode overrides ───────────────────── */
+  /* ── Dark-mode overrides ───────────────────── */
+}
+.traton tds-header,
+.traton .tl-header {
+  /* Base colors */
+  --component-header-color-background: var(--color-background-base);
+  --component-header-color-background-hover: var(--color-background-layer-01);
+  --component-header-color-background-open: transparent;
+  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
+  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
+  --component-header-color-background-pressed: var(--color-background-base);
+  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
+  /* Dropdown & launcher */
+  --component-header-dropdown-item-background: var(--color-background-layer-01);
+  --component-header-avatar-item-background: var(--color-background-layer-01);
+  --component-header-app-launcher-meny-background: var(--color-background-layer-01);
+  /* Sizing & spacing */
+  --component-header-brand-logo-size: 106px;
+  --component-header-space-profile-padding: 20px;
+  --component-header-item-image-size: 24px;
+  --component-header-item-image-left: 15px;
+  --component-header-item-width: 122px;
+  --component-header-item-border-right: none;
+  /* Borders */
+  --component-header-border: 2px solid var(--header-nav-item-border-active);
+  /* Typography */
+  --component-header-font-family-headline: var(--traton-font-family-display);
+  --component-header-font-weight: var(--traton-font-weight-medium);
+  --component-header-text-transform: uppercase;
+}
+.traton .tds-mode-light tds-header,
+.traton .tds-mode-light .tl-header {
+  --component-header-color-background-selected: var(--color-background-layer-01);
+}
+.traton .tds-mode-dark tds-header,
+.traton .tds-mode-dark .tl-header {
+  --component-header-color-background-selected: var(--color-background-surface-100);
 }
 
 /**
@@ -2021,37 +2074,93 @@ tds-logo {
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.tl-side-menu,
-tds-side-menu {
-  --component-side-menu-states-default: var(--scania-color-grey-950);
-  --component-side-menu-states-hover: var(--scania-color-grey-900);
-  --component-side-menu-states-pressed: var(--scania-color-grey-850);
-  --component-side-menu-states-focus: var(--scania-color-grey-950);
-  --component-side-menu-states-selected: var(--scania-color-grey-900);
-  --component-side-menu-dividers-default: var(--color-foreground-border-discrete);
-  --component-side-menu-icons-icon-size: var(--scania-unit-16);
-  --component-side-menu-icons-close-icon-size: var(--scania-unit-20);
-  --component-side-menu-padding-sub-menu-item-top-and-bottom: var(--scania-unit-8);
-  --component-side-menu-padding-sub-menu-item-left: var(--scania-unit-12);
-  --component-side-menu-padding-sub-menu-item-chevron-right-padding: 12px;
-  --component-side-menu-padding-sub-menu-item-profile-left: var(--scania-unit-4);
-  --component-side-menu-padding-sub-menu-item-profile-gap: var(--scania-unit-12);
-  --component-side-menu-padding-sub-menu-item-profile-top--bottom: var(--scania-unit-4);
-  --component-side-menu-padding-sub-menu-item-selected-marker-height: 40px;
-  --component-side-menu-padding-top-level-left: var(--scania-unit-16);
-  --component-side-menu-padding-top-level-horizontal-gap-padding: var(--scania-unit-4);
-  --component-side-menu-padding-top-level-top: 14px;
-  --component-side-menu-padding-top-level-bottom-collapsible: var(--scania-unit-16);
-  --component-side-menu-padding-collapsed-item-left--right-inner-icon-padding: 12px;
-  --component-side-menu-padding-collapsed-item-top--bottom-inner-icon-padding: 12px;
-  --component-side-menu-padding-sub-page-top--bottom: var(--scania-unit-8);
-  --component-side-menu-padding-sub-page-left-with-icon: var(--scania-unit-40);
-  --component-side-menu-padding-sub-page-left-no-icon: 14px;
-  --component-side-menu-padding-sub-page-left-profile: var(--scania-unit-48);
-  --component-side-menu-padding-sub-page-top-group: var(--scania-unit-4);
-  --component-side-menu-padding-sub-page-selected-marker-height: 34px;
-  --component-side-menu-padding-sub-page-selected-marker-width: var(--scania-unit-8);
-  --component-side-menu-radius-corner-radius: var(--scania-unit-8);
+:root .tl-side-menu,
+:root tds-side-menu,
+.scania .tl-side-menu,
+.scania tds-side-menu {
+  --component-side-menu-bottom-menu-border-top-collapsed: 1px solid
+    var(--color-foreground-border-discrete);
+  --component-side-menu-close-button-wrapper-height: auto;
+  --component-side-menu-collapsed-button-size: 68px;
+  --component-side-menu-collapsed-dropdown-background-active: var(--color-background-surface-100);
+  --component-side-menu-collapsed-dropdown-background-hover: var(--color-background-layer-01);
+  --component-side-menu-collapsed-dropdown-background-selected: var(--color-background-layer-01);
+  --component-side-menu-collapsed-dropdown-background: var(--color-background-base);
+  --component-side-menu-collapsed-dropdown-heading-padding-left: 24px;
+  --component-side-menu-color-divider: var(--color-foreground-border-discrete);
+  --component-side-menu-dropdown-list-item-height: 48px;
+  --component-side-menu-profile-user-image-size: 34px;
+  --component-side-menu-radius-corner: var(--scania-unit-0);
+  --component-side-menu-selected-left-border: 4px;
+  --component-side-menu-single-item-height: 68px;
+  --component-side-menu-size-close-icon-size: var(--scania-unit-20);
+  --component-side-menu-size-icon: var(--scania-unit-24);
+  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: 22px;
+  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--scania-unit-16);
+  --component-side-menu-space-sub-menu-item-left: 22px;
+  --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
+  --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
+  --component-side-menu-space-sub-menu-item-profile-top-bottom: 18px;
+  --component-side-menu-space-sub-menu-item-selected-marker-height: 68px;
+  --component-side-menu-space-sub-menu-item-top-and-bottom: 22px;
+  --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
+  --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
+  --component-side-menu-space-sub-page-left-with-icon: 58px;
+  --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
+  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
+  --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
+  --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
+  --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
+  --component-side-menu-space-top-level-left: var(--scania-unit-0);
+  --component-side-menu-space-top-level-top: var(--scania-unit-0);
+  --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
+  --component-side-menu-subnav-border-radius: 0;
+  --component-side-menu-subnav-box-shadow: var(--tds-nav-dropdown-menu-box);
+  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
+}
+
+.traton .tl-side-menu,
+.traton tds-side-menu {
+  --component-side-menu-bottom-menu-border-top-collapsed: none;
+  --component-side-menu-close-button-wrapper-height: 64px;
+  --component-side-menu-collapsed-button-size: 72px;
+  --component-side-menu-collapsed-dropdown-background-active: var(--color-background-surface-200);
+  --component-side-menu-collapsed-dropdown-background-hover: var(--color-background-surface-100);
+  --component-side-menu-collapsed-dropdown-background-selected: var(
+    --color-background-surface-100
+  );
+  --component-side-menu-collapsed-dropdown-background: var(--color-background-layer-01);
+  --component-side-menu-collapsed-dropdown-heading-padding-left: 14px;
+  --component-side-menu-color-divider: var(--traton-color-transparent-invisible-light);
+  --component-side-menu-dropdown-list-item-height: 32px;
+  --component-side-menu-profile-user-image-size: 25.5px;
+  --component-side-menu-radius-corner: var(--traton-unit-8);
+  --component-side-menu-selected-left-border: 8px;
+  --component-side-menu-single-item-height: 40px;
+  --component-side-menu-size-close-icon-size: var(--traton-unit-20);
+  --component-side-menu-size-icon: var(--traton-unit-16);
+  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: var(--traton-unit-12);
+  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--traton-unit-12);
+  --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
+  --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
+  --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
+  --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
+  --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
+  --component-side-menu-space-sub-menu-item-top-and-bottom: var(--traton-unit-8);
+  --component-side-menu-space-sub-page-left-no-icon: 14px;
+  --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
+  --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
+  --component-side-menu-space-sub-page-selected-marker-height: 32px;
+  --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
+  --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
+  --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
+  --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
+  --component-side-menu-space-top-level-left: var(--traton-unit-16);
+  --component-side-menu-space-top-level-top: var(--traton-unit-14);
+  --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
+  --component-side-menu-subnav-border-radius: 4px;
+  --component-side-menu-subnav-box-shadow: none;
+  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
 }
 
 /**
@@ -6679,8 +6788,8 @@ tds-dropdown-option {
 tds-table-footer {
   --dropdown-option-border: var(--color-foreground-border-discrete);
   --dropdown-option-background: var(--color-background-layer-01);
-  --dropdown-option-background-hover: var(--color-background-surface-500);
-  --dropdown-option-background-selected: var(--color-background-surface-400);
+  --dropdown-option-background-hover: var(--color-background-surface-100);
+  --dropdown-option-background-selected: var(--color-background-surface-300);
 }
 
 tds-footer {
@@ -6714,9 +6823,9 @@ tds-footer.tds-mode-variant-secondary {
 .__tds-header-item-image {
   position: relative;
   margin-left: -20px;
-  left: 10px;
-  width: 34px;
-  height: 34px;
+  left: var(--header-item-image-left);
+  width: var(--header-item-image-size);
+  height: var(--header-item-image-size);
   border-radius: 50%;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
@@ -6726,215 +6835,71 @@ tds-footer.tds-mode-variant-secondary {
   --tds-header-list-item-md-height: 48px;
 }
 
-:root,
-.tds-mode-light {
-  --tds-header-overlay: var(--tds-black);
-  --tds-header-app-name-color: var(--tds-white);
-  --tds-header-background: var(--tds-blue-800);
-  --tds-header-mob-menu-color: var(--tds-white);
-  --tds-header-mob-menu-open-color: var(--tds-grey-958);
-  --tds-header-mob-menu-open-background: var(--tds-white);
-  --tds-header-mob-menu-border: var(--tds-blue-700);
-  --tds-header-mob-menu-open-border: var(--tds-grey-300);
-  --tds-nav-item-background: var(--tds-white);
-  --tds-nav-item-background-active: var(--tds-grey-100);
-  --tds-nav-item-background-hover: var(--tds-grey-100);
-  --tds-nav-item-background-selected: var(--tds-grey-100);
-  --tds-nav-item-border-color: var(--tds-blue-700);
-  --tds-nav-item-border-color-active: var(--tds-blue-400);
-  --tds-nav-item-core-background-hover: var(--tds-grey-100);
-  --tds-nav-item-core-color-active: var(--tds-grey-800);
-  --tds-header-nav-item-color: var(--tds-white);
-  --tds-header-nav-item-background-active: var(--tds-blue-700);
-  --tds-nav-dropdown-item-background: var(--tds-white);
-  --tds-nav-dropdown-item-border-color: var(--tds-grey-300);
+tds-header {
+  /* Navigation item */
+  --tds-nav-item-border-color: red; /* TODO: replace if design token exists */
+  /* Base background & text */
+  --header-background: var(--component-header-color-background);
+  --header-nav-item: var(--component-header-color-foreground-strong);
+  /* Nav-item states */
+  --header-nav-item-background-hover: var(--color-background-surface-100);
+  --header-nav-item-background-selected: var(--color-background-surface-100);
+  --header-nav-item-border-active: var(--color-foreground-border-accent-focus);
+  --header-item-hover: var(--component-header-color-background-hover);
+  /* Dropdown menu items */
+  --header-nav-dropdown-item-background: var(--component-header-dropdown-item-background);
+  --header-nav-dropdown-item-border: var(--color-foreground-border-discrete);
+  /* Dropdown “opened” state */
   --tds-header-nav-item-dropdown-opened-background: var(--tds-white);
   --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-100);
   --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-100);
   --tds-header-nav-item-dropdown-opened-background-active: var(--tds-grey-300);
-  --tds-header-nav-item-dropdown-opened-color: var(--tds-grey-958);
-  --tds-header-nav-item-dropdown-hover-color: var(--tds-grey-300);
-  --tds-header-item-hover: var(--tds-blue-700);
-  --tds-header--basic-element-border: var(--tds-blue-700);
-  --tds-header--basic-element-border-open: var(--tds-white);
-  --tds-header--basic-element-background: var(--tds-blue-800);
-  --tds-header--basic-element-background-open: var(--tds-white);
-  --tds-header--basic-element-background-hover: var(--tds-blue-700);
-  --tds-header--basic-element-background-selected: var(--tds-blue-700);
-  /* Searchbar */
-  --tds-header-searchbar-input-background: var(--tds-white);
-  --tds-header-searchbar-input-color: var(--tds-black);
-  --tds-header-searchbar-input-placeholder-color: var(--tds-grey-958);
-  --tds-header-searchbar-input-expanded-after-border-bottom: var(--tds-grey-300);
-  --tds-header-searchbar-border-color: var(--tds-blue-700);
-  --tds-header-searchbar-btn-active: var(--tds-white);
-  --tds-header-searchbar-x-btn-background: var(--tds-white);
-  --tds-header-searchbar-x-btn-background-hover: var(--tds-grey-100);
-  --tds-header-searchbar-btn-svg-fill: var(--tds-grey-958);
-  /* Searchbar Results */
-  --tds-header-searchbar-result-item-background: var(--tds-white);
-  --tds-header-searchbar-result-item-background-hover: var(--tds-grey-100);
-  --tds-header-searchbar-result-item-background-active: var(--tds-blue-400);
-  --tds-header-searchbar-result-item-background-visited: var(--tds-grey-400);
-  --tds-header-searchbar-result-item-anchor-background-hover: var(--tds-grey-100);
-  --tds-header-searchbar-result-item-top-border-color: var(--tds-grey-300);
-  --tds-header-searchbar-result-item-top-background: var(--tds-white);
-  --tds-header-searchbar-result-item-category-title-background: var(--tds-white);
-  --tds-header-searchbar-result-x-btn: var(--tds-white);
-  --tds-header-searchbar-result-item-core-color: var(--tds-black);
-  --tds-header-searchbar-result-item-core-background: var(--tds-white);
-  --tds-header-searchbar-result-category-border-color: var(--tds-grey-300);
-  --tds-header-searchbar-result-category-background: var(--tds-white);
-  /* Searchbar Results All */
-  --tds-header-searchbar-all-result-item-color: var(--tds-black);
-  --tds-header-searchbar-all-result-item-background-hover: var(--tds-grey-100);
-  --tds-header-searchbar-all-result-item-background-active: var(--tds-blue-400);
-  --tds-header-searchbar-all-result-item-background-visited: var(--tds-grey-400);
-  /* Avatar */
-  --tds-header-avatar-item-background: var(--tds-white);
-  --tds-header-avatar-item-background-hover: var(--tds-grey-100);
-  --tds-header-avatar-item-border-color: var(--tds-grey-300);
-  --tds-header-avatar-subtitle-color: var(--tds-grey-500);
-  --tds-header-avatar-item-color: var(--tds-grey-700);
-  --tds-header-avatar-item-btn-background: var(--tds-white);
-  /* App Launcher */
-  --tds-header-app-launcher-menu-background: var(--tds-white);
-  --tds-header-app-launcher-btn-background: var(--tds-white);
-  --tds-header-app-launcher-btn-color: var(--tds-white);
-  --tds-header-app-launcher-open-btn-color: var(--tds-black);
-  --tds-header-app-launcher-item-border-color: var(--tds-grey-300);
-  --tds-header-app-launcher-category-title-background: var(--tds-white);
-  --tds-header-app-launcher-category-title-color: var(--tds-grey-500);
-  --tds-header-app-launcher-grid-category-title-color: var(--tds-grey-800);
-  --tds-header-app-launcher-item-background: var(--tds-white);
-  --tds-header-app-launcher-item-background-hover: var(--tds-grey-100);
-  --tds-header-app-launcher-item-color: var(--tds-grey-700);
-  --tds-header-app-launcher-grid--color: var(--tds-grey-800);
-  --tds-header-app-launcher-grid-hover-background: var(--tds-grey-100);
-  /* MOBILE AND TABLET */
-  --tds-header-mobile-menu-background: var(--tds-white);
-  --tds-header-mobile-menu-item-background: var(--tds-white);
-  --tds-header-mobile-menu-item-background-hover: var(--tds-grey-300);
-  --tds-header-mobile-menu-item-color: var(--tds-grey-958);
-  --tds-header-mobile-menu-item-border-color: var(--tds-grey-300);
-  --tds-header-mobile-nav-center-background: var(--tds-white);
-  --tds-header-mobile-nav-center-item-border-color: var(--tds-grey-300);
-  --tds-header-mobile-nav-center-item-border-color-active-after: var(--tds-blue-400);
-  --tds-header-mobile-nav-center-dropdown-item--last-border-color: var(--tds-grey-300);
-  --tds-header-mobile-nav-toolbar-border-color: var(--tds-grey-300);
-  --tds-header-mobile-searchbar-container-border-color: var(--tds-grey-300);
-  --tds-header-mobile-searchbar-input-background: var(--tds-white);
-  --tds-header-mobile-searchbar-input-color: var(--tds-black);
-  --tds-header-mobile-searchbar-input-placeholder-color: var(--tds-grey-800);
-  --tds-header-mobile-searchbar-input-expanded-before-background: var(--tds-white);
-  --tds-header-mobile-searchbar-btn-background: var(--tds-white);
-  --tds-header-mobile-searchbar-btn-background-hover: var(--tds-grey-100);
-  --tds-header-mobile-searchbar-open-btn-background: var(--tds-white);
-  --tds-header-mobile-searchbar-open-btn-background-hover: var(--tds-grey-100);
-  --tds-header-mobile-searchbar-btn-svg-fill: var(--tds-grey-958);
-  --tds-header-mobile-searchbar-container-color: var(--tds-grey-958);
-  --tds-header-mobile-avatar--item-btn-background: var(--tds-white);
-  --tds-header-mobile-avatar--item-btn-background-hover: var(--tds-grey-100);
-  --tds-header-mobile-avatar--item-btn-background-selected: var(--tds-grey-100);
-  --tds-header-mobile-avatar--item-btn-background-active: var(--tds-grey-300);
-  --tds-header-mobile-avatar--item-btn-color: var(--tds-grey-958);
-}
-
-.tds-mode-dark {
-  --tds-header-background: var(--tds-blue-900);
-  --tds-header-mob-menu-open-color: var(--tds-white);
-  --tds-header-mob-menu-open-background: var(--tds-grey-958);
-  --tds-header-mob-menu-border: var(--tds-blue-800);
-  --tds-header-mob-menu-open-border: var(--tds-grey-868);
-  --tds-nav-item-background: var(--tds-grey-800);
-  --tds-nav-item-background-hover: var(--tds-grey-700);
-  --tds-nav-item-background-active: var(--tds-grey-700);
-  --tds-nav-item-background-selected: var(--tds-grey-700);
-  --tds-nav-item-border-color: var(--tds-blue-700);
-  --tds-nav-item-border-color-active: var(--tds-blue-300);
-  --tds-nav-item-core-background-hover: var(--tds-grey-700);
-  --tds-nav-item-core-color-active: var(--tds-grey-50);
-  --tds-header-nav-item-color: var(--tds-white);
-  --tds-header-nav-item-background-active: var(--tds-blue-800);
-  --tds-nav-dropdown-item-background: var(--tds-grey-800);
-  --tds-nav-dropdown-item-border-color: var(--tds-grey-700);
-  --tds-header-nav-item-dropdown-opened-background: var(--tds-grey-958);
-  --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-800);
-  --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-868);
-  --tds-header-nav-item-dropdown-opened-background-active: var(--tds-grey-800);
-  --tds-header-nav-item-dropdown-opened-color: var(--tds-white);
-  --tds-header-item-hover: var(--tds-blue-800);
-  --tds-header--basic-element-border: var(--tds-blue-700);
-  --tds-header--basic-element-border-open: var(--tds-blue-700);
-  --tds-header--basic-element-background-open: var(--tds-blue-800);
-  --tds-header--basic-element-background-hover: var(--tds-blue-800);
-  --tds-header--basic-element-background-selected: var(--tds-blue-800);
-  --tds-header-searchbar-input-background: var(--tds-grey-958);
-  --tds-header-searchbar-input-color: var(--tds-white);
-  --tds-header-searchbar-input-placeholder-color: var(--tds-grey-400);
-  --tds-header-searchbar-input-expanded-after-border-bottom: var(--tds-grey-700);
-  --tds-header-searchbar-border-color: var(--tds-blue-700);
-  --tds-header-searchbar-x-btn-background: var(--tds-grey-958);
-  --tds-header-searchbar-x-btn-background-hover: var(--tds-grey-868);
-  --tds-header-searchbar-btn-svg-fill: var(--tds-white);
-  --tds-header-searchbar-result-item-background: var(--tds-grey-958);
-  --tds-header-searchbar-result-item-background-hover: var(--tds-grey-868);
-  --tds-header-searchbar-result-item-background-active: var(--tds-grey-800);
-  --tds-header-searchbar-result-item-background-visited: var(--tds-grey-600);
-  --tds-header-searchbar-result-item-anchor-background-hover: var(--tds-grey-868);
-  --tds-header-searchbar-result-item-top-border-color: var(--tds-grey-700);
-  --tds-header-searchbar-result-item-top-background: var(--tds-grey-958);
-  --tds-header-searchbar-result-item-category-title-background: var(--tds-grey-958);
-  --tds-header-searchbar-result-x-btn: var(--tds-white);
-  --tds-header-searchbar-result-item-core-color: var(--tds-white);
-  --tds-header-searchbar-result-item-core-background: var(--tds-grey-958);
-  --tds-header-searchbar-result-category-border-color: var(--tds-grey-700);
-  --tds-header-searchbar-result-category-background: var(--tds-grey-958);
-  --tds-header-searchbar-all-result-item-color: var(--tds-white);
-  --tds-header-searchbar-all-result-item-background-hover: var(--tds-grey-868);
-  --tds-header-searchbar-all-result-item-background-active: var(--tds-grey-868);
-  --tds-header-searchbar-all-result-item-background-visited: var(--tds-grey-600);
-  --tds-header-avatar-item-background: var(--tds-grey-800);
-  --tds-header-avatar-item-border-color: var(--tds-grey-700);
-  --tds-header-avatar-subtitle-color: var(--tds-grey-500);
-  --tds-header-avatar-title-color: var(--tds-grey-50);
-  --tds-header-avatar-item-background-hover: var(--tds-grey-700);
-  --tds-header-avatar-item-color: var(--tds-grey-500);
-  --tds-header-avatar-item-btn-background: var(--tds-grey-800);
-  --tds-header-app-launcher-menu-background: var(--tds-grey-800);
-  --tds-header-app-launcher-btn-background: var(--tds-grey-800);
-  --tds-header-app-launcher-btn-color: var(--tds-white);
-  --tds-header-app-launcher-open-btn-color: var(--tds-white);
-  --tds-header-app-launcher-item-border-color: var(--tds-grey-700);
-  --tds-header-app-launcher-category-title-background: var(--tds-grey-800);
-  --tds-header-app-launcher-category-title-color: var(--tds-grey-500);
-  --tds-header-app-launcher-grid-category-title-color: var(--tds-grey-500);
-  --tds-header-app-launcher-item-background: var(--tds-grey-800);
-  --tds-header-app-launcher-item-background-hover: var(--tds-grey-700);
-  --tds-header-app-launcher-item-color: var(--tds-grey-50);
-  --tds-header-app-launcher-grid-color: var(--tds-grey-50);
-  --tds-header-app-launcher-grid-hover-background: var(--tds-grey-700);
-  --tds-header-mobile-nav-center-background: var(--tds-grey-958);
-  --tds-header-mobile-nav-center-item-border-color: var(--tds-grey-868);
-  --tds-header-mobile-nav-center-item-border-color-active-after: var(--tds-blue-400);
-  --tds-header-mobile-nav-center-dropdown-item--last-border-color: var(--tds-grey-868);
-  --tds-header-mobile-nav-toolbar-border-color: var(--tds-grey-868);
-  --tds-header-mobile-searchbar-container-border-color: var(--tds-grey-868);
-  --tds-header-mobile-searchbar-input-background: var(--tds-grey-958);
-  --tds-header-mobile-searchbar-input-color: var(--tds-white);
-  --tds-header-mobile-searchbar-input-placeholder-color: var(--tds-grey-400);
-  --tds-header-mobile-searchbar-input-expanded-before-background: var(--tds-black);
-  --tds-header-mobile-searchbar-btn-background: var(--tds-grey-958);
-  --tds-header-mobile-searchbar-btn-background-hover: var(--tds-grey-868);
-  --tds-header-mobile-searchbar-open-btn-background: var(--tds-grey-958);
-  --tds-header-mobile-searchbar-open-btn-background-hover: var(--tds-grey-868);
-  --tds-header-mobile-searchbar-btn-svg-fill: var(--tds-white);
-  --tds-header-mobile-searchbar-container-color: var(--tds-white);
-  --tds-header-mobile-avatar--item-btn-background: var(--tds-grey-958);
-  --tds-header-mobile-avatar--item-btn-background-hover: var(--tds-grey-868);
-  --tds-header-mobile-avatar--item-btn-background-selected: var(--tds-grey-868);
-  --tds-header-mobile-avatar--item-btn-background-active: var(--tds-grey-800);
-  --tds-header-mobile-avatar--item-btn-color: var(--tds-white);
+  --header-nav-item-dropdown-opened: var(--component-header-color-foreground-selected);
+  /* Basic element (“Bento”) separators & backgrounds */
+  --header-basic-element-border: var(--component-header-color-background-border);
+  --header-basic-element-border-open: var(--component-header-color-background-open);
+  --header-basic-element-background-pressed: var(--component-header-color-background-pressed);
+  --header-basic-element-background-selected: var(--component-header-color-background-selected);
+  /* Avatar dropdown */
+  --header-avatar-item-background: var(--component-header-avatar-item-background);
+  --header-avatar-item: var(--color-foreground-text-soft);
+  /* App launcher (list) */
+  --header-app-launcher-menu-background: var(--component-header-app-launcher-meny-background);
+  --header-app-launcher-category-title: var(--color-foreground-text-soft);
+  --header-app-launcher-item: var(--color-foreground-text-defined);
+  /* App launcher (grid) */
+  --header-app-launcher-grid-category-title: var(--color-foreground-text-soft);
+  --header-app-launcher-grid-hover-background: var(--color-background-surface-200);
+  /* Brand symbol */
+  --header-brand-item-width: var(--component-header-item-width);
+  /* Brand logo */
+  --header-brand-logo-size: var(--component-header-brand-logo-size);
+  /* Header item */
+  --header-item-image-left: var(--component-header-item-image-left);
+  --header-item-image-size: var(--component-header-item-image-size);
+  --header-item-border-right: var(--component-header-item-border-right);
+  /* Header title */
+  --header-font-weight: var(--component-header-font-weight);
+  --header-font-family-headline: var(--component-header-font-family-headline);
+  --header-text-transform: var(--component-header-text-transform);
+}
+
+tds-header,
+.scania tds-header {
+  /* Brand logo */
+  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
+  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
+}
+
+.traton .tds-mode-dark tds-header {
+  /* Brand logo */
+  --header-logotype-local: var(--traton-logotype-white-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-white-svg);
+}
+.traton .tds-mode-light tds-header {
+  /* Brand logo */
+  --header-logotype-local: var(--traton-logotype-black-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-black-svg);
 }
 
 tds-link {
@@ -6991,7 +6956,22 @@ tds-modal {
 
 tds-popover-canvas {
   --popover-canvas-text: var(--color-foreground-text-strong);
-  --popover-canvas-background: var(--color-background-base);
+  --popover-canvas-background: var(--color-background-layer-01);
+}
+tds-popover-canvas.tds-mode-variant-primary {
+  --popover-canvas-background: var(--color-background-layer-01);
+}
+tds-popover-canvas.tds-mode-variant-secondary {
+  --popover-canvas-background: var(--color-background-layer-02);
+}
+
+:root,
+.scania {
+  --popover-canvas-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
+}
+
+.traton {
+  --popover-canvas-box-shadow: none;
 }
 
 tds-popover-menu {
@@ -7011,6 +6991,15 @@ tds-popover-menu.tds-mode-variant-secondary {
   --popover-menu-background-hover: var(--color-background-layer-01);
 }
 
+:root,
+.scania {
+  --popover-menu-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
+}
+
+.traton {
+  --popover-menu-box-shadow: none;
+}
+
 tds-radio-button {
   --radio-button-background-hover: var(--color-foreground-border-discrete);
   --radio-button-background-inverse: var(--color-foreground-icon-inverse-strong);
@@ -7025,68 +7014,106 @@ tds-radio-button {
 }
 
 .__tds-side-menu-item-icon-collapsed {
-  color: var(--tds-sidebar-side-menu-single-item-color);
+  color: var(--side-menu-single-item-color);
   margin-left: 0;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
 
-:root,
-.tds-mode-light {
-  --tds-sidebar-mobile-menu-btn-hover: var(--tds-blue-700);
-  --tds-sidebar-mobile-menu-btn-icon: var(--tds-white);
-  --tds-sidebar-item-state-focus: var(--tds-grey-50);
-  --tds-sidebar-item-state-border-focus: var(--tds-blue-400);
-  --tds-sidebar-item-state-hover: var(--tds-grey-100);
-  --tds-sidebar-item-state-active: var(--tds-grey-300);
-  --tds-sidemenu-item-state-active: var(--tds-grey-300);
-  --tds-sidebar-item-state-selected: var(--tds-grey-100);
-  --tds-sidebar-side-menu: var(--tds-white);
-  --tds-sidebar-side-menu-border-right: var(--tds-grey-300);
-  --tds-sidebar-side-menu-background-cover: var(--tds-white);
-  --tds-sidebar-side-menu-mobile-header-border-bottom: var(--tds-grey-300);
-  --tds-sidebar-side-menu-bottom-menu-background: var(--tds-white);
-  --tds-sidebar-side-menu-bottom-menu-border-top: var(--tds-grey-300);
-  --tds-sidebar-side-menu-single-item-border-bottom: var(--tds-grey-300);
-  --tds-sidebar-side-menu-single-item-color: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-item-background-selected: var(--tds-grey-100);
-  --tds-sidebar-side-menu-single-item-border-left-selected: var(--tds-blue-400);
-  --tds-sidebar-side-menu-single-subitem-color: var(--tds-grey-800);
-  --tds-sidebar-side-menu-single-subitem-title-color: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-subitem-color-active: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-subitem-backgrund: var(--tds-white);
-  --tds-sidebar-side-menu-single-subitem-divider: var(--tds-grey-300);
-  --tds-sidebar-side-menu-subnav-background: var(--tds-white);
-  --tds-sidebar-side-menu-single-subitem-selected-border-color: var(--tds-blue-400);
-}
-
-.tds-mode-dark {
-  --tds-sidebar-mobile-menu-btn-hover: var(--tds-blue-700);
-  --tds-sidebar-mobile-menu-btn-icon: var(--tds-white);
-  --tds-sidebar-item-state-focus: var(--tds-grey-958);
-  --tds-sidebar-item-state-border-focus: var(--tds-blue-400);
-  --tds-sidebar-item-state-hover: var(--tds-grey-850);
-  --tds-sidebar-item-state-active: var(--tds-grey-800);
-  --tds-sidemenu-item-state-active: var(--tds-grey-800);
-  --tds-sidebar-item-state-selected: var(--tds-grey-868);
-  --tds-sidebar-side-menu: var(--tds-grey-958);
-  --tds-sidebar-side-menu-border-right: var(--tds-grey-850);
-  --tds-sidebar-side-menu-background-cover: var(--tds-grey-958);
-  --tds-sidebar-side-menu-mobile-header-border-bottom: var(--tds-grey-850);
-  --tds-sidebar-side-menu-bottom-menu-background: var(--tds-grey-958);
-  --tds-sidebar-side-menu-bottom-menu-border-top: var(--tds-grey-850);
-  --tds-sidebar-side-menu-single-item-border-bottom: var(--tds-grey-850);
-  --tds-sidebar-side-menu-single-item-color: var(--tds-grey-50);
-  --tds-sidebar-side-menu-single-item-background-selected: var(--tds-grey-850);
-  --tds-sidebar-side-menu-single-item-border-left-selected: var(--tds-blue-400);
-  --tds-sidebar-side-menu-single-subitem-color: var(--tds-grey-100);
-  --tds-sidebar-side-menu-single-subitem-title-color: var(--tds-grey-50);
-  --tds-sidebar-side-menu-single-subitem-color-active: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-subitem-backgrund: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-subitem-divider: var(--tds-grey-700);
-  --tds-sidebar-side-menu-subnav-background: var(--tds-grey-958);
-  --tds-sidebar-side-menu-single-subitem-selected-border-color: var(--tds-blue-400);
+tds-side-menu {
+  /*
+  side-menu-item and side-menu-dropdown-list-item background colors:
+  */
+  --side-menu-background-cover: var(--color-background-base);
+  --side-menu-item-state-hover: var(--color-background-layer-01);
+  --side-menu-item-state-active: var(--color-background-surface-100);
+  --side-menu-item-state-selected: var(--color-background-layer-01);
+  /*
+  side-menu-dropdown-list-item background colors when side-menu is collapsed:
+  */
+  --side-menu-collapsed-dropdown-background: var(
+    --component-side-menu-collapsed-dropdown-background
+  );
+  --side-menu-collapsed-dropdown-background-hover: var(
+    --component-side-menu-collapsed-dropdown-background-hover
+  );
+  --side-menu-collapsed-dropdown-background-active: var(
+    --component-side-menu-collapsed-dropdown-background-active
+  );
+  --side-menu-collapsed-dropdown-background-selected: var(
+    --component-side-menu-collapsed-dropdown-background-selected
+  );
+  /* 
+  Non brand specific variables:
+  */
+  --side-menu-single-subitem-selected-border-color: var(--color-foreground-border-accent-focus);
+  --side-menu-dropdown-list-item-color: var(--color-foreground-text-defined);
+  --side-menu-subnav-background: var(--color-background-layer-01);
+  --side-menu-single-item-color: var(--color-foreground-text-strong);
+  /* 
+  Brand specific variables: 
+  */
+  --side-menu-bottom-menu-border-top: var(--component-side-menu-color-divider);
+  --side-menu-bottom-menu-border-top-collapsed: var(
+    --component-side-menu-bottom-menu-border-top-collapsed
+  );
+  --side-menu-close-button-wrapper-height: var(--component-side-menu-close-button-wrapper-height);
+  --side-menu-collapsed-button-size: var(--component-side-menu-collapsed-button-size);
+  --side-menu-collapsed-dropdown-heading-padding-left: var(
+    --component-side-menu-collapsed-dropdown-heading-padding-left
+  );
+  --side-menu-dropdown-list-item-height: var(--component-side-menu-dropdown-list-item-height);
+  --side-menu-profile-user-image-size: var(--component-side-menu-profile-user-image-size);
+  --side-menu-radius-corner: var(--component-side-menu-radius-corner);
+  --side-menu-single-item-height: var(--component-side-menu-single-item-height);
+  --side-menu-size-close-icon-size: var(--component-side-menu-size-close-icon-size);
+  --side-menu-size-icon: var(--component-side-menu-size-icon);
+  --side-menu-space-collapsed-item-left-right-inner-icon-padding: var(
+    --component-side-menu-space-collapsed-item-left-right-inner-icon-padding
+  );
+  --side-menu-space-sub-menu-item-chevron-right-padding: var(
+    --component-side-menu-space-sub-menu-item-chevron-right-padding
+  );
+  --side-menu-space-sub-menu-item-left: var(--component-side-menu-space-sub-menu-item-left);
+  --side-menu-space-sub-menu-item-profile-gap: var(
+    --component-side-menu-space-sub-menu-item-profile-gap
+  );
+  --side-menu-space-sub-menu-item-profile-left: var(
+    --component-side-menu-space-sub-menu-item-profile-left
+  );
+  --side-menu-space-sub-menu-item-profile-top-bottom: var(
+    --component-side-menu-space-sub-menu-item-profile-top-bottom
+  );
+  --side-menu-space-sub-menu-item-selected-marker-height: var(
+    --component-side-menu-space-sub-menu-item-selected-marker-height
+  );
+  --side-menu-space-sub-menu-item-top-and-bottom: var(
+    --component-side-menu-space-sub-menu-item-top-and-bottom
+  );
+  --side-menu-space-sub-page-left-no-icon: var(--component-side-menu-space-sub-page-left-no-icon);
+  --side-menu-space-sub-page-left-profile: var(--component-side-menu-space-sub-page-left-profile);
+  --side-menu-space-sub-page-left-with-icon: var(
+    --component-side-menu-space-sub-page-left-with-icon
+  );
+  --side-menu-space-sub-page-selected-marker-height: var(
+    --component-side-menu-space-sub-page-selected-marker-height
+  );
+  --side-menu-space-sub-page-selected-marker-width: var(
+    --component-side-menu-space-sub-page-selected-marker-width
+  );
+  --side-menu-space-sub-page-top-bottom: var(--component-side-menu-space-sub-page-top-bottom);
+  --side-menu-space-sub-page-top-group: var(--component-side-menu-space-sub-page-top-group);
+  --side-menu-space-top-level-bottom-collapsible: var(
+    --component-side-menu-space-top-level-bottom-collapsible
+  );
+  --side-menu-space-top-level-left: var(--component-side-menu-space-top-level-left);
+  --side-menu-space-top-level-vertical-gap-padding: var(
+    --component-side-menu-space-top-level-vertical-gap-padding
+  );
+  --side-menu-subnav-border-radius: var(--component-side-menu-subnav-border-radius);
+  --side-menu-subnav-box-shadow: var(--component-side-menu-subnav-box-shadow);
+  --side-menu-text-items-font-weight: var(--component-side-menu-text-items-font-weight);
 }
 
 tds-slider {
@@ -7104,7 +7131,7 @@ tds-slider {
   --slider-inputfield-background: var(--color-background-layer-01);
   --slider-inputfield-background-secondary: var(--color-background-layer-02);
   --slider-inputfield-box-shadow: var(--color-foreground-border-discrete);
-  --slider-input-inputfield: var(--color-foreground-text-soft);
+  --slider-input-inputfield: var(--color-foreground-text-strong);
   --slider-input-focused: var(--color-foreground-border-accent-focus);
   --slider-input-value: var(--color-foreground-text-defined);
   --slider-input-hover: var(--color-foreground-border-subtle);
@@ -7122,41 +7149,23 @@ tds-slider,
 .scania tds-slider {
   /* Slider: Scania Units */
   --slider-border-radius: 4px 4px 0 0;
-  --slider-border-appearance: inset 0 -1px 0 var(--slider-inputfield-box-shadow);
-  --slider-border-hover: inset 0 -1px 0 var(--slider-input-hover);
-  --slider-border-focus: inset 0 -2px 0 var(--slider-input-focused);
-  --slider-border-success: inset 0 -1px 0 var(--slider-input-success-border);
   --slider-border-outline: 0;
+  /* Slider: input field */
+  --slider-input-field-box-shadow: 0 1px 0 0 var(--color-foreground-border-soft);
+  --slider-input-field-box-shadow-hover: 0 1px 0 0 var(--color-foreground-border-strong);
+  --slider-input-field-box-shadow-focus: inset 0 -2px 0 var(--color-foreground-border-accent-focus);
+  --slider-input-field-box-shadow-success: inset 0 -1px 0 var(--slider-input-success-border);
 }
 
 .traton tds-slider {
   /* Slider: Traton Units */
   --slider-border-radius: 4px 4px 4px 4px;
-  --slider-border-appearance: none;
-  --slider-border-hover: none;
-  --slider-border-focus: none;
   --slider-border-outline: none;
-  --slider-border-success: none;
-  /* Slider: border colors */
-  --slider-border-left: var(--color-foreground-border-soft);
-  --slider-border-right: var(--color-foreground-border-soft);
-  --slider-border-bottom: var(--color-foreground-border-soft);
-  --slider-border-top: var(--color-foreground-border-soft);
-  /* Slider: border colors on hover */
-  --slider-border-left-hover: var(--color-foreground-border-strong);
-  --slider-border-right-hover: var(--color-foreground-border-strong);
-  --slider-border-bottom-hover: var(--color-foreground-border-strong);
-  --slider-border-top-hover: var(--color-foreground-border-strong);
-  /* Slider: border colors on success */
-  --slider-border-left-success: var(--color-foreground-border-defined);
-  --slider-border-right-success: var(--color-foreground-border-defined);
-  --slider-border-bottom-success: var(--color-foreground-border-defined);
-  --slider-border-top-success: var(--color-foreground-border-defined);
-  /* Slider: border colors on focus */
-  --slider-border-left-focus: var(--color-foreground-border-accent-focus);
-  --slider-border-right-focus: var(--color-foreground-border-accent-focus);
-  --slider-border-bottom-focus: var(--color-foreground-border-accent-focus);
-  --slider-border-top-focus: var(--color-foreground-border-accent-focus);
+  /* Slider: Input field */
+  --slider-input-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
+  --slider-input-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
+  --slider-input-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
+  --slider-input-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
 }
 
 tds-spinner {
@@ -7272,6 +7281,9 @@ tds-textarea {
   --textarea-background-secondary: var(--color-background-layer-02);
   --textarea-background: var(--textarea-background-primary);
   --textarea-text: var(--color-foreground-text-strong);
+  --textarea-disabled-background-primary: var(--color-background-layer-01);
+  --textarea-disabled-background-secondary: var(--color-background-layer-02);
+  --textarea-disabled-background: var(--textarea-disabled-background-primary);
   --textarea-disabled-text: var(--color-foreground-text-disabled);
   --textarea-disabled-placeholder: var(--color-foreground-text-disabled);
   --textarea-disabled-label: var(--color-foreground-text-disabled);