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

package/dist/tl-header.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -8,93 +7,106 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-header-color-popovers: var(--color-background-layer-02);
-  --component-header-color-icon-strong: var(--color-icon-inverse-strong);
-  --component-header-color-icon-defined: var(--color-text-inverse-defined);
-  --component-header-color-icon-selected: var(--color-icon-strong);
-  --component-header-color-background-default: #041e42;
-  --component-header-color-background-hover: #0f3263;
-  --component-header-color-background-focus: #041e42;
-  --component-header-color-background-pressed: #0f3263;
-  --component-header-color-background-selected: #fff;
-  --component-header-color-background-border: #0f3263;
-  --component-header-color-background-profile: #0f3263;
-  --component-header-color-expressive-mobile-menu-primary: #041e42;
-  --component-header-color-expressive-mobile-menu-focus: #041e42;
-  --component-header-color-expressive-mobile-menu-pressed: #0f3263;
-  --component-header-color-expressive-mobile-menu-selected: #fff;
-  --component-header-color-expressive-mobile-menu-selected-expressive: #041e42;
-  --component-header-text-application-name-font-family: var(--scania-font-family-display);
-  --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-application-name-font-size: 14;
-  --component-header-text-application-name-line-height: 16;
-  --component-header-text-application-name-text-transform: none;
-  --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-font-size: 14;
-  --component-header-text-item-line-height: 16;
-  --component-header-text-item-letter-spacing: -0.14;
-  --component-header-text-item-text-transform: none;
-  --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-selected-font-size: 14;
-  --component-header-text-item-selected-line-height: 16;
-  --component-header-text-item-selected-letter-spacing: -0.14;
-  --component-header-text-item-selected-text-transform: none;
-  --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-profile-font-size: 14;
-  --component-header-text-item-profile-line-height: 16;
-  --component-header-text-item-profile-letter-spacing: -0.14;
-  --component-header-text-item-profile-text-transform: none;
-  --component-header-space-profile-padding: var(--scania-unit-16);
-  --component-header-space-profile-size: var(--scania-unit-32);
+  --component-header-background-content-default: var(--scania-color-base-white);
+  --component-header-background-popover-default: var(--color-background-base);
+  --component-header-background-main-standard-default: var(--scania-color-blue-800);
+  --component-header-background-main-expressive-default: var(--scania-color-blue-800);
+  --component-header-background-nav-item-avatar-default: var(--scania-color-blue-700);
+  --component-header-background-nav-item-current-default: var(
+    --component-header-background-popover-default
+  );
+  --component-header-background-nav-item-link-default: var(--scania-color-blue-800);
+  --component-header-background-nav-item-link-hover: var(--scania-color-blue-700);
+  --component-header-background-nav-item-link-active: var(--scania-color-blue-600);
+  --component-header-background-menu-item-link-default: var(--color-background-base);
+  --component-header-background-menu-item-link-hover: var(--color-background-layer-01);
+  --component-header-background-menu-item-tile-default: var(--color-background-base);
+  --component-header-background-menu-item-tile-hover: var(--color-background-layer-01);
+  --component-header-background-menu-item-current-default: var(--scania-color-grey-100);
+  --component-header-background-menu-item-sub-link-active: var(--scania-color-blue-700);
+  --component-header-background-search-dismiss-default: var(--color-background-none);
+  --component-header-background-search-dismiss-hover: var(--scania-color-grey-100);
+  --component-header-background-search-dismiss-active: var(--scania-color-grey-150);
+  --component-header-background-search-result-default: var(--color-background-base);
+  --component-header-background-search-result-hover: var(--color-background-layer-01);
+  --component-header-background-search-result-active: var(--scania-color-grey-100);
+  --component-header-border-divider-default: var(--scania-color-blue-700);
+  --component-header-border-nav-item-indicator-default: var(--scania-color-blue-400);
+  --component-header-border-menu-item-avatar-default: var(--color-border-strong);
+  --component-header-border-menu-item-indicator-default: var(--scania-color-blue-400);
+  --component-header-border-menu-item-link-default: var(--color-border-disabled);
+  --component-header-border-menu-item-link-hover: var(--color-border-discrete);
+  --component-header-border-search-divider-default: var(--color-border-discrete);
+  --component-header-icon-nav-item-current-default: var(--color-icon-strong);
+  --component-header-icon-nav-item-link-default: var(--color-icon-inverse-strong);
+  --component-header-icon-search-result-default: var(--color-icon-strong);
+  --component-header-icon-menu-item-avatar-default: var(--color-icon-strong);
+  --component-header-text-title-default: var(--color-text-strong);
+  --component-header-text-subtitle-default: var(--color-text-soft);
+  --component-header-text-category-default: var(--color-text-strong);
+  --component-header-text-menu-item-current-default: var(--color-text-strong);
+  --component-header-text-menu-item-link-default: var(--color-text-strong);
+  --component-header-text-nav-item-current-default: var(--color-text-strong);
+  --component-header-text-nav-item-link-default: var(--color-text-inverse-strong);
+  --component-header-text-nav-item-sub-link-default: var(--color-text-inverse-defined);
+  --component-header-text-search-result-default: var(--color-text-strong);
+  --component-header-text-font-weight-font-weight: var(--scania-font-weight-bold);
+  --component-header-size-avatar-default: var(--scania-unit-32);
+  --component-header-size-avatar-padding: var(--scania-unit-16);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-header-color-popovers: var(--color-background-layer-01);
-  --component-header-color-icon-strong: var(--color-icon-strong);
-  --component-header-color-icon-defined: var(--color-icon-defined);
-  --component-header-color-icon-selected: var(--color-icon-strong);
-  --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-hover: var(--color-background-layer-01);
-  --component-header-color-background-focus: var(--color-background-base);
-  --component-header-color-background-pressed: var(--color-background-layer-01);
-  --component-header-color-background-selected: var(--color-background-base);
-  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-profile: #ebe7dd;
-  --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
-  --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
-  --component-header-color-expressive-mobile-menu-pressed: #ebe7dd;
-  --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
-  --component-header-color-expressive-mobile-menu-selected-expressive: var(
-    --traton-color-base-white
+  --component-header-background-content-default: var(--color-background-layer-01);
+  --component-header-background-popover-default: var(--color-background-layer-01);
+  --component-header-background-main-standard-default: var(
+    --traton-color-transparent-invisible-light
+  );
+  --component-header-background-main-expressive-default: var(--color-background-base);
+  --component-header-background-nav-item-avatar-default: var(--traton-color-grey-150);
+  --component-header-background-nav-item-current-default: var(--color-background-base);
+  --component-header-background-nav-item-link-default: var(
+    --traton-color-transparent-invisible-light
   );
-  --component-header-text-application-name-font-family: var(--traton-font-family-display);
-  --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-application-name-font-size: 14;
-  --component-header-text-application-name-line-height: 16;
-  --component-header-text-application-name-text-transform: none;
-  --component-header-text-item-font-family: var(--traton-font-family-default);
-  --component-header-text-item-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-item-font-size: 14;
-  --component-header-text-item-line-height: 16;
-  --component-header-text-item-text-transform: none;
-  --component-header-text-item-selected-font-family: var(--traton-font-family-default);
-  --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
-  --component-header-text-item-selected-font-size: 14;
-  --component-header-text-item-selected-line-height: 18;
-  --component-header-text-item-selected-text-transform: none;
-  --component-header-text-item-profile-font-family: var(--traton-font-family-default);
-  --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
-  --component-header-text-item-profile-font-size: 12;
-  --component-header-text-item-profile-line-height: 18;
-  --component-header-text-item-profile-text-transform: none;
-  --component-header-space-profile-padding: var(--traton-unit-20);
-  --component-header-space-profile-size: var(--traton-unit-24);
+  --component-header-background-nav-item-link-hover: var(--color-background-layer-01);
+  --component-header-background-nav-item-link-active: var(--color-background-layer-02);
+  --component-header-background-menu-item-link-default: var(--color-background-layer-01);
+  --component-header-background-menu-item-link-hover: var(--traton-color-grey-100);
+  --component-header-background-menu-item-tile-default: var(--color-background-none);
+  --component-header-background-menu-item-tile-hover: var(--traton-color-grey-150);
+  --component-header-background-menu-item-current-default: var(--traton-color-grey-150);
+  --component-header-background-menu-item-sub-link-active: var(--color-background-layer-01);
+  --component-header-background-search-dismiss-default: var(--color-background-none);
+  --component-header-background-search-dismiss-hover: var(--traton-color-grey-150);
+  --component-header-background-search-dismiss-active: var(--traton-color-grey-200);
+  --component-header-background-search-result-default: var(--color-background-base);
+  --component-header-background-search-result-hover: var(--color-background-layer-01);
+  --component-header-background-search-result-active: var(--color-background-layer-01);
+  --component-header-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-header-border-nav-item-indicator-default: var(--traton-color-blue-500);
+  --component-header-border-menu-item-avatar-default: var(--color-border-defined);
+  --component-header-border-menu-item-indicator-default: var(--traton-color-blue-500);
+  --component-header-border-menu-item-link-default: var(--color-border-disabled);
+  --component-header-border-menu-item-link-hover: var(--color-border-discrete);
+  --component-header-border-search-divider-default: var(--color-border-discrete);
+  --component-header-icon-nav-item-current-default: var(--color-icon-strong);
+  --component-header-icon-nav-item-link-default: var(--color-icon-strong);
+  --component-header-icon-search-result-default: var(--color-icon-strong);
+  --component-header-icon-menu-item-avatar-default: var(--color-icon-defined);
+  --component-header-text-title-default: var(--color-text-strong);
+  --component-header-text-subtitle-default: var(--color-text-soft);
+  --component-header-text-category-default: var(--color-text-soft);
+  --component-header-text-menu-item-current-default: var(--color-text-strong);
+  --component-header-text-menu-item-link-default: var(--color-text-defined);
+  --component-header-text-nav-item-current-default: var(--color-text-strong);
+  --component-header-text-nav-item-link-default: var(--color-text-strong);
+  --component-header-text-nav-item-sub-link-default: var(--color-text-defined);
+  --component-header-text-search-result-default: var(--color-text-strong);
+  --component-header-text-font-weight-font-weight: var(--traton-font-weight-regular);
+  --component-header-size-avatar-default: var(--traton-unit-24);
+  --component-header-size-avatar-padding: var(--traton-unit-20);
 }
 
 .tds-mode-dark,
@@ -102,219 +114,256 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-header-color-popovers: var(--color-background-layer-02);
-  --component-header-color-icon-strong: var(--color-icon-strong);
-  --component-header-color-icon-defined: var(--color-text-defined);
-  --component-header-color-icon-selected: var(--color-icon-strong);
-  --component-header-color-background-default: #001533;
-  --component-header-color-background-hover: #041e42;
-  --component-header-color-background-focus: #001533;
-  --component-header-color-background-pressed: #041e42;
-  --component-header-color-background-selected: #041e42;
-  --component-header-color-background-border: #041e42;
-  --component-header-color-background-profile: #041e42;
-  --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: #041e42;
-  --component-header-color-expressive-mobile-menu-selected-expressive: #001533;
-  --component-header-text-application-name-font-family: var(--scania-font-family-display);
-  --component-header-text-application-name-font-weight: var(--scania-font-weight-regular);
-  --component-header-text-application-name-font-size: 14;
-  --component-header-text-application-name-line-height: 16;
-  --component-header-text-application-name-text-transform: none;
-  --component-header-text-item-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-font-size: 14;
-  --component-header-text-item-line-height: 16;
-  --component-header-text-item-letter-spacing: -0.14;
-  --component-header-text-item-text-transform: none;
-  --component-header-text-item-selected-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-selected-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-selected-font-size: 14;
-  --component-header-text-item-selected-line-height: 16;
-  --component-header-text-item-selected-letter-spacing: -0.14;
-  --component-header-text-item-selected-text-transform: none;
-  --component-header-text-item-profile-font-family: var(--scania-font-family-semi-condensed);
-  --component-header-text-item-profile-font-weight: var(--scania-font-weight-bold);
-  --component-header-text-item-profile-font-size: 14;
-  --component-header-text-item-profile-line-height: 16;
-  --component-header-text-item-profile-letter-spacing: -0.14;
-  --component-header-text-item-profile-text-transform: none;
-  --component-header-space-profile-padding: var(--scania-unit-16);
-  --component-header-space-profile-size: var(--scania-unit-32);
+  --component-header-background-content-default: var(--color-background-layer-01);
+  --component-header-background-popover-default: var(--color-background-layer-01);
+  --component-header-background-main-standard-default: var(--scania-color-blue-900);
+  --component-header-background-main-expressive-default: var(--scania-color-blue-900);
+  --component-header-background-nav-item-avatar-default: var(--scania-color-blue-800);
+  --component-header-background-nav-item-current-default: var(
+    --component-header-background-popover-default
+  );
+  --component-header-background-nav-item-link-default: var(--scania-color-blue-900);
+  --component-header-background-nav-item-link-hover: var(--scania-color-blue-800);
+  --component-header-background-nav-item-link-active: var(--scania-color-blue-700);
+  --component-header-background-menu-item-link-default: var(--color-background-layer-01);
+  --component-header-background-menu-item-link-hover: var(--color-background-layer-02);
+  --component-header-background-menu-item-tile-default: var(--color-background-layer-01);
+  --component-header-background-menu-item-tile-hover: var(--color-background-layer-02);
+  --component-header-background-menu-item-current-default: var(--scania-color-grey-850);
+  --component-header-background-menu-item-sub-link-active: var(--scania-color-blue-800);
+  --component-header-background-search-dismiss-default: var(--color-background-none);
+  --component-header-background-search-dismiss-hover: var(--scania-color-grey-850);
+  --component-header-background-search-dismiss-active: var(--scania-color-grey-800);
+  --component-header-background-search-result-default: var(--color-background-layer-01);
+  --component-header-background-search-result-hover: var(--color-background-layer-02);
+  --component-header-background-search-result-active: var(--color-background-layer-03);
+  --component-header-border-divider-default: var(--scania-color-blue-800);
+  --component-header-border-nav-item-indicator-default: var(--scania-color-blue-300);
+  --component-header-border-menu-item-avatar-default: var(--color-border-strong);
+  --component-header-border-menu-item-indicator-default: var(--scania-color-blue-300);
+  --component-header-border-menu-item-link-default: var(--color-border-disabled);
+  --component-header-border-menu-item-link-hover: var(--color-border-discrete);
+  --component-header-border-search-divider-default: var(--color-border-discrete);
+  --component-header-icon-nav-item-current-default: var(--color-icon-strong);
+  --component-header-icon-nav-item-link-default: var(--color-icon-strong);
+  --component-header-icon-search-result-default: var(--color-icon-strong);
+  --component-header-icon-menu-item-avatar-default: var(--color-icon-strong);
+  --component-header-text-title-default: var(--color-text-strong);
+  --component-header-text-subtitle-default: var(--color-text-soft);
+  --component-header-text-category-default: var(--color-text-strong);
+  --component-header-text-menu-item-current-default: var(--color-text-strong);
+  --component-header-text-menu-item-link-default: var(--color-text-strong);
+  --component-header-text-nav-item-current-default: var(--color-text-strong);
+  --component-header-text-nav-item-link-default: var(--color-text-strong);
+  --component-header-text-nav-item-sub-link-default: var(--color-text-defined);
+  --component-header-text-search-result-default: var(--color-text-strong);
+  --component-header-text-font-weight-font-weight: var(--scania-font-weight-bold);
+  --component-header-size-avatar-default: var(--scania-unit-32);
+  --component-header-size-avatar-padding: var(--scania-unit-16);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-header-color-popovers: var(--color-background-layer-01);
-  --component-header-color-icon-strong: var(--color-icon-strong);
-  --component-header-color-icon-defined: var(--color-icon-defined);
-  --component-header-color-icon-selected: var(--color-icon-strong);
-  --component-header-color-background-default: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-hover: var(--color-background-layer-01);
-  --component-header-color-background-focus: var(--color-background-base);
-  --component-header-color-background-pressed: #002429;
-  --component-header-color-background-selected: var(--color-background-base);
-  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
-  --component-header-color-background-profile: #002429;
-  --component-header-color-expressive-mobile-menu-primary: var(--color-background-base);
-  --component-header-color-expressive-mobile-menu-focus: var(--color-background-base);
-  --component-header-color-expressive-mobile-menu-pressed: #002429;
-  --component-header-color-expressive-mobile-menu-selected: var(--traton-color-base-white);
-  --component-header-color-expressive-mobile-menu-selected-expressive: var(
-    --traton-color-base-white
+  --component-header-background-content-default: var(--color-background-layer-01);
+  --component-header-background-popover-default: var(--color-background-layer-01);
+  --component-header-background-main-standard-default: var(
+    --traton-color-transparent-invisible-light
   );
-  --component-header-text-application-name-font-family: var(--traton-font-family-display);
-  --component-header-text-application-name-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-application-name-font-size: 14;
-  --component-header-text-application-name-line-height: 16;
-  --component-header-text-application-name-text-transform: none;
-  --component-header-text-item-font-family: var(--traton-font-family-default);
-  --component-header-text-item-font-weight: var(--traton-font-weight-medium);
-  --component-header-text-item-font-size: 14;
-  --component-header-text-item-line-height: 16;
-  --component-header-text-item-text-transform: none;
-  --component-header-text-item-selected-font-family: var(--traton-font-family-default);
-  --component-header-text-item-selected-font-weight: var(--traton-font-weight-semi-bold);
-  --component-header-text-item-selected-font-size: 14;
-  --component-header-text-item-selected-line-height: 18;
-  --component-header-text-item-selected-text-transform: none;
-  --component-header-text-item-profile-font-family: var(--traton-font-family-default);
-  --component-header-text-item-profile-font-weight: var(--traton-font-weight-semi-bold);
-  --component-header-text-item-profile-font-size: 12;
-  --component-header-text-item-profile-line-height: 18;
-  --component-header-text-item-profile-text-transform: none;
-  --component-header-space-profile-padding: var(--traton-unit-20);
-  --component-header-space-profile-size: var(--traton-unit-24);
+  --component-header-background-main-expressive-default: var(--color-background-base);
+  --component-header-background-nav-item-avatar-default: var(--traton-color-blue-900);
+  --component-header-background-nav-item-current-default: var(--color-background-base);
+  --component-header-background-nav-item-link-default: var(
+    --traton-color-transparent-invisible-light
+  );
+  --component-header-background-nav-item-link-hover: var(--color-background-layer-01);
+  --component-header-background-nav-item-link-active: var(--traton-color-blue-900);
+  --component-header-background-menu-item-link-default: var(--color-background-layer-01);
+  --component-header-background-menu-item-link-hover: var(--traton-color-blue-900);
+  --component-header-background-menu-item-tile-default: var(--color-background-none);
+  --component-header-background-menu-item-tile-hover: var(--traton-color-blue-900);
+  --component-header-background-menu-item-current-default: var(--traton-color-blue-900);
+  --component-header-background-menu-item-sub-link-active: var(--traton-color-blue-900);
+  --component-header-background-search-dismiss-default: var(--color-background-none);
+  --component-header-background-search-dismiss-hover: var(--traton-color-blue-900);
+  --component-header-background-search-dismiss-active: var(--traton-color-blue-850);
+  --component-header-background-search-result-default: var(--color-background-base);
+  --component-header-background-search-result-hover: var(--color-background-layer-01);
+  --component-header-background-search-result-active: var(--color-background-layer-01);
+  --component-header-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-header-border-nav-item-indicator-default: var(--traton-color-yellow-400);
+  --component-header-border-menu-item-avatar-default: var(--color-border-defined);
+  --component-header-border-menu-item-indicator-default: var(--traton-color-yellow-400);
+  --component-header-border-menu-item-link-default: var(--color-border-disabled);
+  --component-header-border-menu-item-link-hover: var(--color-border-discrete);
+  --component-header-border-search-divider-default: var(--color-border-discrete);
+  --component-header-icon-nav-item-current-default: var(--color-icon-strong);
+  --component-header-icon-nav-item-link-default: var(--color-icon-strong);
+  --component-header-icon-search-result-default: var(--color-icon-strong);
+  --component-header-icon-menu-item-avatar-default: var(--color-icon-defined);
+  --component-header-text-title-default: var(--color-text-strong);
+  --component-header-text-subtitle-default: var(--color-text-soft);
+  --component-header-text-category-default: var(--color-text-soft);
+  --component-header-text-menu-item-current-default: var(--color-text-strong);
+  --component-header-text-menu-item-link-default: var(--color-text-defined);
+  --component-header-text-nav-item-current-default: var(--color-text-strong);
+  --component-header-text-nav-item-link-default: var(--color-text-strong);
+  --component-header-text-nav-item-sub-link-default: var(--color-text-defined);
+  --component-header-text-search-result-default: var(--color-text-strong);
+  --component-header-text-font-weight-font-weight: var(--traton-font-weight-regular);
+  --component-header-size-avatar-default: var(--traton-unit-24);
+  --component-header-size-avatar-padding: var(--traton-unit-20);
+}
+
+/**
+ * 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-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
+  --component-shadow-default: var(--scania-color-transparent-shadow-150);
+  --component-shadow-hover: var(--scania-color-transparent-shadow-250);
+  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
+  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
+  --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
 }
 
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
+  --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
+  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
+}
+
+/* Typography Usage mixins */
 .tl-header {
   /* Layout */
-  --tds-header-height: 64px;
-  --tds-header-list-item-md-height: 48px;
-  /* App launcher dropdown background */
-  --tds-header-app-launcher-menu-background: var(--header-app-launcher-menu-background);
-  /* Base text */
-  --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(--component-header-dropdown-item-background);
-  --header-nav-item-border-pressed: 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-pressed: var(--tds-grey-300);
-  --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-dropdown-item-background);
-  --header-basic-element-background-selected: var(--component-header-dropdown-item-background);
-  /* 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-height: var(--tds-spacing-layout-64);
+  --header-list-item-md-height: var(--tds-spacing-layout-48);
+  --header-spacing-default: var(--tds-spacing-layout-16);
+  /* Header items */
+  --header-background: var(--component-header-background-main-standard-default);
+  --header-item-background-hover: var(--component-header-background-nav-item-link-hover);
+  --header-item-background-active: var(--component-header-background-nav-item-link-active);
+  --header-item-background-selected: var(--component-header-background-nav-item-current-default);
+  --header-item-text-color: var(--component-header-icon-nav-item-link-default);
+  --header-item-border-right: var(--component-header-border-divider-default);
+  --header-item-border-accent-color: var(--component-header-border-nav-item-indicator-default);
+  --header-item-border-accent-thickness: var(--tds-spacing-element-4);
   /* Header title */
-  --header-font-weight: var(--component-header-font-weight);
-  --header-font-family-headline: var(--component-header-font-family-headline);
+  --header-title-font-family: var(--type-headline-01-font-family);
+  --header-title-font-size: calc(var(--type-headline-06-font-size) * 1px);
   --header-text-transform: var(--component-header-text-transform);
-  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
+  --header-title-line-height: calc(var(--type-headline-06-line-height) * 1px);
+  --header-title-letter-spacing: calc(var(--type-headline-06-letter-spacing) * 1px);
+  --header-item-user-id-padding: calc(var(--component-header-size-avatar-padding) * 1px);
+  --header-item-user-id-image-size: calc(var(--component-header-size-avatar-default) * 1px);
 }
-
-.scania {
-  /* Light mode - explicit light mode class */
-}
-.scania .tl-mode-light .tl-header {
-  --header-background: var(--color-brand-primary-800);
-  --header-nav-item: var(--color-foreground-icon-inverse-strong);
-  --header-item-hover: var(--color-brand-primary-700);
-  --header-basic-element-border: var(--color-brand-primary-700);
-  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
-  --header-basic-element-background-selected: var(--color-brand-primary-700);
+.tl-header .tl-header__title {
+  --header-title-font-weight: 400;
 }
-.scania {
-  /* Dark mode - override with dark colors */
+.tl-header {
+  /* Expandable header items */
+  --header-item-background-opened: var(--component-header-background-nav-item-current-default);
+  --header-item-background-opened-hover: var(--component-header-background-menu-item-link-hover);
+  --header-item-text-color-opened: var(--component-header-text-nav-item-current-default);
+  /* Sub menu items */
+  --header-sub-menu-box-shadow: var(--component-shadow-default);
+  --header-sub-menu-background: var(--component-header-background-popover-default);
+  --header-sub-menu-item-background: var(--component-header-background-menu-item-link-default);
+  --header-sub-menu-item-background-hover: var(--component-header-background-menu-item-link-hover);
+  --header-sub-menu-item-background-selected: var(
+    --component-header-background-menu-item-current-default
+  );
+  --header-sub-menu-item-text-color: var(--component-header-text-menu-item-link-default);
+  --header-sub-menu-item-border-bottom: var(--color-border-discrete);
+  /* Category items in app laucher */
+  --header-sub-menu-category-item-text-color: var(--component-header-text-category-default);
+  --header-sub-menu-category-item-background: var(--component-header-background-popover-default);
+  --header-sub-menu-category-item-border-bottom: var(
+    --component-header-border-menu-item-link-hover
+  );
+  /* Grid items in app laucher */
+  --header-sub-menu-tile-item-background: var(--component-header-background-menu-item-tile-default);
+  --header-sub-menu-tile-item-background-hover: var(
+    --component-header-background-menu-item-tile-hover
+  );
+  --header-sub-menu-tile-item-icon-color: var(--component-header-icon-menu-item-avatar-default);
+  --header-sub-menu-tile-item-text-color: var(--component-header-text-menu-item-link-default);
+  /* user id submenu items */
+  --header-sub-menu-item-title-color: var(--component-header-text-title-default);
+  --header-sub-menu-item-subtitle-color: var(--component-header-text-subtitle-default);
 }
-.scania .tl-mode-dark .tl-header {
-  --header-background: var(--color-brand-primary-900);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-brand-primary-800);
-  --header-basic-element-border: var(--color-brand-primary-800);
-  --header-basic-element-background-pressed: var(--color-brand-primary-800);
-  --header-basic-element-background-selected: var(--color-brand-primary-800);
+.tl-header .tl-header__brand {
+  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
+  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
+  --header-brand-logo-size: 32px;
+  --header-brand-item-width: 30px;
 }
-.scania {
-  /* Default .tl-header (works for no mode specified - defaults to light) */
+
+.scania .tl-header__title {
+  --header-title-font-weight: 400;
 }
-.scania .tl-header {
-  /* Brand logo */
+.scania .tl-header__brand {
   --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
   --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
-  --component-header-space-profile-padding: 16px;
-  /* Background defaults to light mode */
-  --header-background: var(--color-brand-primary-800);
-  --header-nav-item: var(--color-foreground-icon-inverse-strong);
-  --header-item-hover: var(--color-brand-primary-700);
-  --header-basic-element-border: var(--color-brand-primary-700);
-  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
-  --header-basic-element-background-selected: var(--color-brand-primary-700);
-}
-
-.traton .tl-mode-dark .tl-header {
-  /* Brand logo - White for dark mode */
-  --header-logotype-local: var(--traton-logotype-white-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-white-svg);
-  /* Background - uses base from traton tokens */
-  --header-background: var(--color-background-base);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-background-layer-01);
-  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
-  --header-basic-element-background-pressed: var(--color-background-base);
-  --header-basic-element-background-selected: var(--color-background-surface-100);
-}
-.traton .tl-mode-light .tl-header {
-  /* Brand logo - Black for light mode */
-  --header-logotype-local: var(--traton-logotype-black-svg-local);
-  --header-logotype-cdn: var(--traton-logotype-black-svg);
-  /* Background - uses base from traton tokens */
-  --header-background: var(--color-background-base);
-  --header-nav-item: var(--color-foreground-icon-strong);
-  --header-item-hover: var(--color-background-layer-01);
-  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
-  --header-basic-element-background-pressed: var(--color-background-base);
-  --header-basic-element-background-selected: var(--color-background-layer-01);
-}
-.traton .tl-header {
-  /* Brand logo - Black as default (for no mode specified) */
+  --header-brand-logo-size: 32px;
+  --header-brand-item-width: 30px;
+}
+
+.traton .tl-header__title {
+  --header-title-font-weight: 500;
+}
+.traton .tl-mode-light .tl-header__brand,
+.traton .tds-mode-light .tl-header__brand {
   --header-logotype-local: var(--traton-logotype-black-svg-local);
   --header-logotype-cdn: var(--traton-logotype-black-svg);
-  --component-header-space-profile-padding: 20px;
-  --header-background: transparent;
+  --header-brand-logo-size: 117px;
+  --header-brand-item-width: 117px;
+}
+.traton .tl-mode-dark .tl-header__brand,
+.traton .tds-mode-dark .tl-header__brand {
+  --header-logotype-local: var(--traton-logotype-white-svg-local);
+  --header-logotype-cdn: var(--traton-logotype-white-svg);
+  --header-brand-logo-size: 117px;
+  --header-brand-item-width: 117px;
 }
 
-/* Typography Usage mixins */
 /* Header Elements */
 .tl-header__item-wrapper {
   all: unset;
@@ -324,15 +373,14 @@
   box-sizing: border-box;
 }
 .tl-header__item-wrapper {
-  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);
+  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);
   background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
+  border-right: 1px solid var(--header-item-border-right);
+  color: var(--header-item-text-color);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -345,17 +393,20 @@
   padding: 0 19px;
 }
 .tl-header__item-wrapper:hover {
-  background-color: var(--header-item-hover);
+  background-color: var(--header-item-background-hover);
 }
 .tl-header__item-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__item-wrapper:active {
   padding-top: 2px;
   padding-bottom: 2px;
-  background-color: var(--header-basic-element-background-selected);
-  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
+  background-color: var(--header-item-background-active);
+}
+.tl-header__item-wrapper:selected {
+  background-color: var(--header-item-background-selected);
 }
 
 .tl-header__item-wrapper .tl-link__icon {
@@ -387,9 +438,14 @@ body {
   box-sizing: border-box;
 }
 .tl-header__dropdown-wrapper {
+  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);
   background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
+  border-right: 1px solid var(--header-item-border-right);
+  color: var(--header-item-text-color);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -399,30 +455,30 @@ body {
   gap: 8px;
 }
 .tl-header__dropdown-wrapper:hover {
-  background-color: var(--header-item-hover);
+  background-color: var(--header-item-background-hover);
 }
 .tl-header__dropdown-wrapper:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-wrapper:active {
-  background-color: var(--header-basic-element-background-selected);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  background-color: var(--header-item-background-active);
 }
 .tl-header__dropdown-wrapper--open {
-  background-color: var(--component-header-color-background-pressed);
-  color: var(--header-nav-item-dropdown-opened);
+  background-color: var(--header-item-background-opened);
+  color: var(--header-item-text-color-opened);
   position: relative;
+  border-bottom: var(--header-item-border-accent-thickness) solid var(--header-item-border-accent-color);
 }
 .tl-header__dropdown-wrapper--open:hover {
-  background-color: var(--component-header-color-background-pressed);
+  background-color: var(--header-item-background-opened-hover);
 }
 .tl-header__dropdown-wrapper--open:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  background-color: var(--header-item-background-opened);
 }
 .tl-header__dropdown-wrapper--selected {
-  border-bottom: 4px solid var(--header-nav-item-border-pressed);
+  border-bottom: var(--header-item-border-accent-thickness) solid var(--header-item-border-accent-color);
 }
 
 .tl-header__dropdown-wrapper-user {
@@ -434,41 +490,41 @@ body {
 }
 .tl-header__dropdown-wrapper-user {
   background-color: var(--header-background);
-  border-right: 1px solid var(--header-basic-element-border);
-  color: var(--header-nav-item);
+  border-right: 1px solid var(--header-item-border-right);
+  color: var(--header-item-text-color);
   width: 100%;
   height: 100%;
   cursor: pointer;
-  padding: var(--component-header-space-profile-padding);
+  padding: var(--header-item-user-id-padding);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 .tl-header__dropdown-wrapper-user:hover {
-  background-color: var(--header-item-hover);
+  background-color: var(--header-item-background-hover);
 }
 .tl-header__dropdown-wrapper-user:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-wrapper-user:active {
-  background-color: var(--header-basic-element-background-selected);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  background-color: var(--header-item-background-active);
 }
 .tl-header__dropdown-wrapper-user--open {
-  background-color: var(--component-header-color-background-pressed);
-  color: var(--header-nav-item-dropdown-opened);
+  background-color: var(--header-item-background-opened);
+  color: var(--header-item-text-color-opened);
   position: relative;
+  border-bottom: var(--header-item-border-accent-thickness) solid var(--header-item-border-accent-color);
 }
 .tl-header__dropdown-wrapper-user--open:hover {
-  background-color: var(--component-header-color-background-pressed);
+  background-color: var(--header-item-background-opened-hover);
 }
 .tl-header__dropdown-wrapper-user--open:active {
-  background-color: var(--component-header-color-background-pressed);
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  background-color: var(--header-item-background-opened);
 }
 .tl-header__dropdown-wrapper-user--selected {
-  border-bottom: 4px solid var(--header-nav-item-border-pressed);
+  border-bottom: var(--header-item-border-accent-thickness) solid var(--header-item-border-accent-color);
 }
 
 .tl-header__dropdown-icon {
@@ -488,10 +544,10 @@ body {
   position: absolute;
   top: 100%;
   left: 0;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
+  background: var(--header-sub-menu-background);
+  box-shadow: 0 3px 3px 0 var(--header-sub-menu-box-shadow);
   min-width: 190px;
-  max-height: calc(100vh - var(--tds-header-height));
+  max-height: calc(100vh - var(--header-height));
   overflow-y: auto;
 }
 .tl-header__dropdown-menu::-webkit-scrollbar {
@@ -501,7 +557,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -510,6 +566,7 @@ body {
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__dropdown-menu::-webkit-scrollbar-button {
   height: 0;
@@ -528,19 +585,20 @@ body {
 }
 .tl-header__dropdown-menu--open {
   display: block;
+  z-index: 901;
 }
 
 .tl-header__user-menu {
   all: unset;
   display: none;
   position: fixed;
-  top: var(--tds-header-height);
+  top: var(--header-height);
   right: 0;
   left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
+  background: var(--header-sub-menu-background);
+  box-shadow: 0 3px 3px 0 var(--header-sub-menu-box-shadow);
   min-width: 290px;
-  max-height: calc(100vh - var(--tds-header-height));
+  max-height: calc(100vh - var(--header-height));
   overflow-y: auto;
   border-radius: 4px;
 }
@@ -551,7 +609,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__user-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -560,6 +618,7 @@ body {
 }
 .tl-header__user-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__user-menu::-webkit-scrollbar-button {
   height: 0;
@@ -573,19 +632,19 @@ body {
 }
 .tl-header__user-menu--open {
   display: block;
+  z-index: 901;
 }
 
 .tl-header__launcher-menu {
   all: unset;
   display: none;
   position: fixed;
-  top: var(--tds-header-height);
+  top: var(--header-height);
   right: 0;
   left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
+  background: var(--header-sub-menu-background);
   min-width: 320px;
-  max-height: calc(100vh - var(--tds-header-height));
+  max-height: calc(100vh - var(--header-height));
   overflow-y: auto;
 }
 .tl-header__launcher-menu::-webkit-scrollbar {
@@ -595,7 +654,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__launcher-menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -604,6 +663,7 @@ body {
 }
 .tl-header__launcher-menu::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__launcher-menu::-webkit-scrollbar-button {
   height: 0;
@@ -616,20 +676,23 @@ body {
   }
 }
 .tl-header__launcher-menu--open {
+  height: calc(100vh - var(--header-height));
   display: block;
+  z-index: 901;
+  box-shadow: 0 2px 3px 0 var(--header-sub-menu-box-shadow);
 }
 
 .tl-header__launcher-menu-grid {
   all: unset;
   display: none;
   position: fixed;
-  top: var(--tds-header-height);
+  top: var(--header-height);
   right: 0;
   left: auto;
-  background: var(--tds-header-app-launcher-menu-background);
-  box-shadow: var(--header-dropdown-box-shadow);
+  background: var(--header-sub-menu-background);
+  box-shadow: 0 2px 3px 0 var(--header-sub-menu-box-shadow);
   min-width: 320px;
-  max-height: calc(100vh - var(--tds-header-height));
+  max-height: calc(100vh - var(--header-height));
   overflow-y: auto;
   border-radius: 4px;
 }
@@ -640,7 +703,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
   background: var(--tl-scrollbar-thumb-color);
   border-width: var(--tl-scrollbar-thumb-border-width);
   border-style: solid;
@@ -649,6 +712,7 @@ body {
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-header__launcher-menu-grid::-webkit-scrollbar-button {
   height: 0;
@@ -662,41 +726,53 @@ body {
 }
 .tl-header__launcher-menu-grid--open {
   display: block;
+  z-index: 901;
 }
 
 .tl-header__dropdown-menu-item {
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
   display: block;
   box-sizing: border-box;
-  height: var(--tds-header-list-item-md-height);
+  height: var(--header-list-item-md-height);
   width: 100%;
 }
 .tl-header__dropdown-menu-item:not(:last-child) {
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
+  border-bottom: 1px solid var(--header-sub-menu-item-border-bottom);
 }
 .tl-header__dropdown-menu-item--selected {
-  background-color: var(--header-nav-item-background-selected);
+  background-color: var(--header-sub-menu-item-background-selected);
   padding-right: 4px;
-  border-left: 4px solid var(--header-nav-item-border-pressed);
+  border-left: var(--header-item-border-accent-thickness) solid var(--header-item-border-accent-color);
 }
 
 .tl-header__user-menu-item {
-  background-color: var(--header-avatar-item-background);
+  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);
+  background-color: var(--header-sub-menu-item-background);
   display: flex;
   height: 84px;
 }
 
 .tl-header__user-menu-box {
-  gap: 16px;
+  gap: var(--header-spacing-default);
   width: 100%;
-  padding: 0 16px;
+  padding: 0 var(--header-spacing-default);
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
+  border-bottom: 1px solid var(--header-sub-menu-item-border-bottom);
 }
 
 .tl-header__user-menu-image {
-  width: var(--header-item-image-size);
-  height: var(--header-item-image-size);
+  width: var(--header-item-user-id-image-size);
+  height: var(--header-item-user-id-image-size);
   border-radius: 50%;
   overflow: hidden;
 }
@@ -708,23 +784,21 @@ body {
 }
 
 .tl-header__user-menu-header {
-  font-family: var(--detail-06-font-family);
-  font-size: var(--detail-06-font-size);
-  line-height: var(--detail-06-line-height);
-  font-weight: var(--detail-06-font-weight);
-  letter-spacing: var(--detail-06-letter-spacing);
-  text-transform: var(--detail-06-text-transform);
-  color: var(--color-foreground-text-defined);
+  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(--header-sub-menu-item-title-color);
 }
 
 .tl-header__user-menu-subheader {
-  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(--header-avatar-item);
+  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(--header-sub-menu-item-subtitle-color);
 }
 
 .tl-header__launcher-menu-list {
@@ -736,7 +810,7 @@ body {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 4px;
-  background-color: var(--header-nav-dropdown-item-background);
+  background-color: var(--header-sub-menu-background);
 }
 
 .tl-header__launcher-menu-item {
@@ -748,19 +822,19 @@ body {
 .tl-header__launcher-menu-title {
   all: unset;
   box-sizing: border-box;
-  font-family: var(--text-component-title-02-font-family);
-  font-size: var(--text-component-title-02-font-size);
-  line-height: var(--text-component-title-02-line-height);
-  font-weight: var(--text-component-title-02-font-weight);
-  letter-spacing: var(--text-component-title-02-letter-spacing);
-  text-transform: var(--text-component-title-02-text-transform);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--header-app-launcher-grid-category-title);
+  font-family: var(--type-system-title-02-font-family);
+  font-size: calc(var(--type-system-title-02-font-size) * 1px);
+  line-height: calc(var(--type-system-title-02-line-height) * 1px);
+  font-weight: var(--type-system-title-02-font-weight);
+  letter-spacing: calc(var(--type-system-title-02-letter-spacing) * 1px);
+  text-transform: uppercase;
+  background-color: var(--header-sub-menu-category-item-background);
+  color: var(--header-sub-menu-category-item-text-color);
   height: 48px;
-  padding: 0 16px;
+  padding: 0 var(--header-spacing-default);
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
+  border-bottom: 1px solid var(--header-sub-menu-category-item-border-bottom);
   margin: 0;
 }
 
@@ -779,22 +853,27 @@ body {
   font-weight: var(--detail-02-font-weight);
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--color-foreground-text-defined);
+  background-color: var(--header-sub-menu-item-background);
+  color: var(--header-sub-menu-item-text-color);
 }
 .tl-header__dropdown-menu-item a:hover,
 .tl-header__dropdown-menu-item button:hover {
-  background-color: var(--header-nav-item-background-hover);
+  background-color: var(--header-sub-menu-item-background-hover);
   cursor: pointer;
 }
 .tl-header__dropdown-menu-item a:focus-visible,
 .tl-header__dropdown-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
 }
 .tl-header__dropdown-menu-item--selected a,
 .tl-header__dropdown-menu-item--selected button {
-  background-color: var(--header-nav-item-background-selected);
+  background-color: var(--header-sub-menu-item-background-selected);
+}
+.tl-header__dropdown-menu-item--selected a:hover,
+.tl-header__dropdown-menu-item--selected button:hover {
+  background-color: var(--header-sub-menu-item-background-selected);
 }
 .tl-header__launcher-menu-item a,
 .tl-header__launcher-menu-item button {
@@ -815,20 +894,22 @@ body {
   font-weight: var(--detail-05-font-weight);
   letter-spacing: var(--detail-05-letter-spacing);
   text-transform: var(--detail-05-text-transform);
-  background-color: var(--header-nav-dropdown-item-background);
-  color: var(--color-foreground-text-defined);
+  background-color: var(--header-sub-menu-item-background);
+  color: var(--header-sub-menu-item-text-color);
   border-radius: 4px;
   transition: background-color 150ms ease;
 }
 .tl-header__launcher-menu-item a:hover,
 .tl-header__launcher-menu-item button:hover {
-  background-color: var(--header-app-launcher-grid-hover-background);
+  background-color: var(--header-sub-menu-tile-item-background-hover);
   cursor: pointer;
 }
 .tl-header__launcher-menu-item a:focus-visible,
 .tl-header__launcher-menu-item button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 
 .tl-header__user-menu-image img {
@@ -845,17 +926,18 @@ body {
   box-sizing: border-box;
 }
 .tl-header__title {
-  border-right: 1px solid var(--header-basic-element-border);
+  border-right: 1px solid var(--header-item-border-right);
   height: 100%;
 }
 
 .tl-header__title-text {
-  font-size: 14px;
+  font-size: var(--header-title-font-size);
   padding: 4px 32px 0 16px;
-  color: var(--header-nav-item);
-  font-weight: var(--header-font-weight);
-  font-family: var(--header-font-family-headline);
-  text-transform: var(--header-text-transform);
+  color: var(--header-item-text-color);
+  font-weight: var(--header-title-font-weight);
+  font-family: var(--header-title-font-family);
+  line-height: var(--header-title-line-height);
+  letter-spacing: var(--header-title-letter-spacing);
   letter-spacing: normal;
   position: relative;
   white-space: nowrap;
@@ -875,7 +957,7 @@ body {
 
 .tl-header {
   display: block;
-  height: var(--tds-header-height);
+  height: var(--header-height);
   background-color: var(--header-background);
   width: 100%;
 }
@@ -896,7 +978,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: var(--tds-header-height);
+  height: var(--header-height);
   list-style: none;
   padding: 0;
   margin: 0;
@@ -906,7 +988,7 @@ body {
   display: none;
   height: 100%;
 }
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .tl-header__item {
     display: block;
   }
@@ -926,7 +1008,7 @@ body {
   height: 100%;
   position: relative;
 }
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .tl-header__dropdown {
     display: block;
   }
@@ -938,6 +1020,6 @@ body {
 .tl-header__middle-spacer {
   display: block;
   flex-grow: 1;
-  height: var(--tds-header-height);
-  border-right: 1px solid var(--header-basic-element-border);
+  height: var(--header-height);
+  border-right: 1px solid var(--header-item-border-right);
 }