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

package/dist/tl-modal.css

@@ -66,16 +66,108 @@ body {
   --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
 }
 
-/* Component variables */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-modal-background-default: var(--color-background-layer-01);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-modal-background-default: var(--color-background-layer-02);
+  --component-modal-border-radius-default: 4;
+  --component-modal-icon-dismiss-default: var(--color-icon-strong);
+  --component-modal-text-title-default: var(--color-text-strong);
+  --component-modal-text-body-default: var(--color-text-strong);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-overlay-background-default: var(--scania-color-base-black);
+  --component-overlay-opacity-default: 60;
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-overlay-background-default: var(--traton-color-base-black);
+  --component-overlay-opacity-default: 40;
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-overlay-background-default: var(--scania-color-grey-900);
+  --component-overlay-opacity-default: 84;
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-overlay-background-default: var(--traton-color-base-black);
+  --component-overlay-opacity-default: 60;
+}
+
 .tl-modal,
-:root {
-  --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
-  --modal-background: var(--color-background-layer-02);
-  --modal-backdrop: var(--color-background-overlay);
-  --modal-text: var(--color-foreground-text-strong);
-  --modal-cross-svg: var(--color-foreground-text-strong);
-  --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
-  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
+.tl-modal__overlay {
+  --modal-background: var(--component-modal-background-default);
+  --modal-backdrop: color-mix(
+    in srgb,
+    var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
+    transparent
+  );
+  --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
+  --modal-text: var(--component-modal-text-title-default);
+  --modal-body-text: var(--component-modal-text-body-default);
+  --modal-cross-svg: var(--component-modal-icon-dismiss-default);
+  --modal-shadow: 0 3px 3px 0 var(--component-shadow-default, rgba(0, 0, 0, 0.15)),
+    0 -1px 1px 0 var(--component-shadow-base-modifier, rgba(0, 0, 0, 0.10));
 }
 
 /* MIXINS */
@@ -90,7 +182,7 @@ body {
   box-shadow: var(--modal-shadow);
   margin: auto;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--modal-border-radius);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
@@ -103,7 +195,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-modal::-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;
@@ -112,6 +204,7 @@ body {
 }
 .tl-modal::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-modal::-webkit-scrollbar-button {
   height: 0;
@@ -242,7 +335,7 @@ body {
   font-weight: var(--body-01-font-weight);
   letter-spacing: var(--body-01-letter-spacing);
   text-transform: var(--body-01-text-transform);
-  color: var(--modal-text);
+  color: var(--modal-body-text);
   padding: 0 16px 16px;
 }
 .tl-modal__body::-webkit-scrollbar {
@@ -252,7 +345,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-modal__body::-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;
@@ -261,6 +354,7 @@ body {
 }
 .tl-modal__body::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-modal__body::-webkit-scrollbar-button {
   height: 0;
@@ -293,15 +387,16 @@ body {
   background-color: transparent;
   border: 0;
   padding: 0;
+  height: 20px;
+  width: 20px;
   appearance: unset;
   display: inline-block;
-  height: auto;
   color: var(--modal-text);
   cursor: pointer;
 }
 .tl-modal__close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/tl-navigation-tabs.css

@@ -1,54 +1,159 @@
-.tl-navigation-tabs__tab {
-  /* tds-navigation-tab variables */
-  --navigation-tabs-tab: var(--color-foreground-text-soft);
-  --navigation-tabs-tab-selected: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-hover: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-focus: var(--color-foreground-text-strong);
-  --navigation-tabs-tab-disabled: var(--color-foreground-text-disabled);
-  --navigation-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
-  --navigation-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-light);
+  --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-light);
+  --component-tabs-background-scroll-default: var(--scania-color-grey-200);
+  --component-tabs-background-item-primary-default: var(--scania-color-grey-100);
+  --component-tabs-background-item-primary-hover: var(--scania-color-grey-200);
+  --component-tabs-background-item-primary-current-default: var(--scania-color-grey-50);
+  --component-tabs-background-item-secondary-default: var(--scania-color-grey-100);
+  --component-tabs-background-item-secondary-hover: var(--scania-color-grey-200);
+  --component-tabs-background-item-secondary-current-default: var(--scania-color-base-white);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--scania-color-grey-850);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--scania-color-blue-400);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--scania-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-light);
+  --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-light);
+  --component-tabs-background-scroll-default: var(--traton-color-grey-300);
+  --component-tabs-background-item-primary-default: var(--traton-color-grey-200);
+  --component-tabs-background-item-primary-hover: var(--traton-color-grey-300);
+  --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
+  --component-tabs-background-item-secondary-default: var(--traton-color-grey-200);
+  --component-tabs-background-item-secondary-hover: var(--traton-color-grey-300);
+  --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--color-border-discrete);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--traton-color-blue-500);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--traton-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-dark);
+  --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-dark);
+  --component-tabs-background-scroll-default: var(--scania-color-grey-750);
+  --component-tabs-background-item-primary-default: var(--scania-color-grey-800);
+  --component-tabs-background-item-primary-hover: var(--scania-color-grey-800);
+  --component-tabs-background-item-primary-current-default: var(--scania-color-grey-850);
+  --component-tabs-background-item-secondary-default: var(--scania-color-grey-750);
+  --component-tabs-background-item-secondary-hover: var(--scania-color-grey-800);
+  --component-tabs-background-item-secondary-current-default: var(--scania-color-grey-800);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--scania-color-grey-50);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--scania-color-blue-300);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--scania-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-tabs-background-primary: var(--color-background-base);
+  --component-tabs-background-secondary: var(--color-background-layer-01);
+  --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-dark);
+  --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-dark);
+  --component-tabs-background-scroll-default: var(--traton-color-blue-800);
+  --component-tabs-background-item-primary-default: var(--traton-color-blue-850);
+  --component-tabs-background-item-primary-hover: var(--traton-color-blue-800);
+  --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
+  --component-tabs-background-item-secondary-default: var(--traton-color-blue-850);
+  --component-tabs-background-item-secondary-hover: var(--traton-color-blue-800);
+  --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
+  --component-tabs-border-default: var(--color-border-discrete);
+  --component-tabs-border-folder-default: var(--color-border-none);
+  --component-tabs-border-item-default: var(--color-border-none);
+  --component-tabs-border-item-hover: var(--color-border-discrete);
+  --component-tabs-border-item-divider-default: var(--color-border-discrete);
+  --component-tabs-border-item-indicator-default: var(--traton-color-yellow-400);
+  --component-tabs-text-item-default: var(--color-text-soft);
+  --component-tabs-text-item-folder-default: var(--color-text-strong);
+  --component-tabs-text-item-current-default: var(--color-text-strong);
+  --component-tabs-opacity-disabled: var(--traton-opacity-25);
+  --component-tabs-icon-scroll-default: var(--color-icon-strong);
 }
 
 .tl-navigation-tabs {
   /* tds-navigation-tabs variables */
-  --navigation-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
-  --navigation-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
-  --navigation-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
-  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
-  --navigation-tabs-scroll-button-icon: var(--color-foreground-icon-strong);
-  --navigation-tabs-scroll-button-background: var(--navigation-tabs-tab-background);
-  --navigation-tabs-scroll-button-background-hover: var(--navigation-tabs-tab-background);
-  --navigation-tabs-scroll-button-background-active: var(--navigation-tabs-tab-background);
+  --navigation-tabs-horizontal-divider: var(--component-tabs-border-default);
+  --navigation-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
+  --navigation-tabs-scroll-button-background: var(--component-tabs-background-primary);
 }
 .tl-navigation-tabs--primary {
-  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
+  --navigation-tabs-scroll-button-background: var(--component-tabs-background-primary);
 }
 .tl-navigation-tabs--secondary {
-  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-secondary);
+  --navigation-tabs-scroll-button-background: var(--component-tabs-background-secondary);
 }
 
-.traton .tl-navigation-tabs {
-  --navigation-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
-  --navigation-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
+.tl-navigation-tabs__tab {
+  /* tds-navigation-tab variables */
+  --navigation-tabs-tab-color: var(--component-tabs-text-item-default);
+  --navigation-tabs-tab-color-selected: var(--component-tabs-text-item-current-default);
+  --navigation-tabs-tab-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
+  --navigation-tabs-tab-color-hover: var(--component-tabs-text-item-current-default);
+  --navigation-tabs-tab-indicator-hover: var(--component-tabs-border-item-hover);
+  --navigation-tabs-tab-indicator-active: var(--component-tabs-border-item-indicator-default);
 }
 
 /* Typography Usage mixins */
 .tl-navigation-tabs__tab {
   all: unset;
-  margin-right: 32px;
   box-sizing: border-box;
 }
 .tl-navigation-tabs__tab * {
   box-sizing: border-box;
 }
 .tl-navigation-tabs__tab {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-  color: var(--navigation-tabs-tab);
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  color: var(--navigation-tabs-tab-color);
   text-decoration: none;
   display: block;
   position: relative;
@@ -56,19 +161,14 @@
   white-space: nowrap;
   background-color: transparent;
   border: 0;
-  padding: 26px 4px;
+  padding: 25px 8px;
 }
 .tl-navigation-tabs__tab:focus-visible {
-  outline: none;
-}
-.tl-navigation-tabs__tab:focus-visible::before {
-  content: "";
-  position: absolute;
-  inset: 18px 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
-  z-index: 2;
-  pointer-events: none;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+  outline-offset: -2px;
 }
 .tl-navigation-tabs__tab::after {
   background-color: var(--navigation-tabs-tab-indicator-hover);
@@ -87,29 +187,33 @@
 .tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
   width: 0%;
 }
-.tl-navigation-tabs__tab:hover {
+.tl-navigation-tabs__tab:hover:not(.tl-navigation-tabs__tab--disabled, .tl-navigation-tabs__tab--selected) {
   cursor: pointer;
-  color: var(--navigation-tabs-tab-hover);
+  color: var(--navigation-tabs-tab-color-hover);
 }
-.tl-navigation-tabs__tab:hover::after {
+.tl-navigation-tabs__tab:hover:not(.tl-navigation-tabs__tab--disabled, .tl-navigation-tabs__tab--selected)::after {
   width: 100%;
 }
 .tl-navigation-tabs__tab--selected {
-  color: var(--navigation-tabs-tab-selected);
+  color: var(--navigation-tabs-tab-color-selected);
 }
 .tl-navigation-tabs__tab--selected::after {
   background-color: var(--navigation-tabs-tab-indicator-active);
   width: 100%;
 }
 .tl-navigation-tabs__tab--disabled {
-  color: var(--navigation-tabs-tab-disabled);
-  pointer-events: none;
+  opacity: var(--navigation-tabs-tab-opacity-disabled);
   cursor: not-allowed;
+  user-select: none;
 }
 .tl-navigation-tabs__tab--disabled::after {
   content: none;
 }
+.tl-navigation-tabs__tab--disabled:hover {
+  color: var(--navigation-tabs-tab-color);
+}
 .tl-navigation-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 
@@ -120,19 +224,24 @@
   box-sizing: border-box;
 }
 .tl-navigation-tabs {
-  background-color: var(--navigation-tabs-tab-background);
   display: flex;
   flex-wrap: nowrap;
   white-space: nowrap;
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
-  gap: 16px;
+  gap: 24px;
   position: relative;
 }
 .tl-navigation-tabs::-webkit-scrollbar {
   display: none;
 }
+.tl-navigation-tabs:focus-visible {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
+}
 .tl-navigation-tabs::after {
   border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
   content: " ";
@@ -144,8 +253,8 @@
 }
 
 .tl-navigation-tabs__scroll-button {
-  background-color: transparent;
-  color: var(--navigation-tabs-scroll-button-icon);
+  background-color: var(--navigation-tabs-scroll-button-background);
+  color: var(--navigation-tabs-scroll-button-color);
   cursor: pointer;
   min-width: 48px;
   border: 0;
@@ -154,6 +263,13 @@
   align-items: center;
   opacity: 1;
   position: sticky;
+  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
+}
+.tl-navigation-tabs__scroll-button:focus-visible {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
 }
 
 .tl-navigation-tabs__scroll-button--right {

package/dist/tl-popover-canvas.css

@@ -1,16 +1,119 @@
-.tl-popover-canvas {
-  --popover-canvas-text: var(--color-foreground-text-strong);
-  --popover-canvas-background: var(--color-background-layer-01);
+/**
+ * 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-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
 }
-.tl-popover-canvas--primary {
-  --popover-canvas-background: var(--color-background-layer-01);
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
+  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
+  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
 }
-.tl-popover-canvas--secondary {
-  --popover-canvas-background: var(--color-background-layer-02);
+
+.tl-popover-canvas {
+  --popover-canvas-text: var(--component-popover-text-link-primary-default);
+  --popover-canvas-background: var(--component-popover-background-primary);
+  --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
+}
+
+.tl-popover-canvas--primary,
+.tl-popover-canvas .tl-popover-canvas--primary {
+  --popover-canvas-background: var(--component-popover-background-primary);
 }
 
-.scania .tl-popover-canvas {
-  --popover-canvas-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
+.tl-popover-canvas--secondary,
+.tl-popover-canvas .tl-popover-canvas--secondary {
+  --popover-canvas-background: var(--component-popover-background-secondary);
 }
 
 .traton .tl-popover-canvas {