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

package/dist/tl-folder-tabs.css

@@ -1,39 +1,159 @@
 /* tl-folder-tabs.scss (overlay buttons, no JS) */
+/**
+ * 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-folder-tabs {
-  --folder-tabs-scroll-button-surface: var(--color-background-surface-200);
-  --folder-tabs-scroll-button-surface-hover: var(--color-background-surface-300);
-  --folder-tabs-scroll-button-surface-active: var(--color-background-surface-400);
-  --folder-tabs-scroll-button-text: var(--color-foreground-text-soft);
+  --folder-tabs-scroll-button-background: var(--component-tabs-background-scroll-default);
+  --folder-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
 }
 
 .tl-folder-tabs__tab {
-  --folder-tab-surface: var(--color-background-surface-200);
-  --folder-tab-surface-selected: var(--color-background-layer-01);
-  --folder-tab-surface-hover: var(--color-background-surface-300);
-  --folder-tab-border-selected: var(--color-foreground-border-accent-focus);
-  --folder-tab-divider: var(--color-foreground-icon-discrete);
-  --folder-tab-text: var(--color-foreground-text-soft);
-  --folder-tab-text-disabled: var(--color-foreground-text-disabled);
+  --folder-tab-background: var(--component-tabs-background-item-primary-default);
+  --folder-tab-background-hover: var(--component-tabs-background-item-primary-hover);
+  --folder-tab-background-selected: var(--component-tabs-background-item-primary-current-default);
+  --folder-tab-border-selected: var(--component-tabs-border-item-indicator-default);
+  --folder-tab-divider-color: var(--component-tabs-border-item-divider-default);
+  --folder-tab-text: var(--component-tabs-text-item-folder-default);
+  --folder-tab-text-selected: var(--component-tabs-text-item-current-default);
+  --folder-tab-item-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
 }
 
 .tl-folder-tabs--primary .tl-folder-tabs__tab {
-  --folder-tab-surface-selected: var(--color-background-layer-01);
+  --folder-tab-background: var(--component-tabs-background-item-primary-default);
+  --folder-tab-background-hover: var(--component-tabs-background-item-primary-hover);
+  --folder-tab-background-selected: var(--component-tabs-background-item-primary-current-default);
 }
 
 .tl-folder-tabs--secondary .tl-folder-tabs__tab {
-  --folder-tab-surface-selected: var(--color-background-layer-02);
+  --folder-tab-background: var(--component-tabs-background-item-secondary-default);
+  --folder-tab-background-hover: var(--component-tabs-background-item-secondary-hover);
+  --folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
 }
 
 /* tl-folder-tabs.scss (overlay buttons, no JS) */
 /* Typography Usage mixins */
 .tl-folder-tabs__tab {
   all: unset;
-  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);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -46,40 +166,30 @@
   text-align: left;
   cursor: pointer;
   border-left: 1px solid transparent;
-  border-top: 2px solid var(--folder-tab-surface);
-  background-color: var(--folder-tab-surface);
+  border-top: 2px solid transparent;
+  background-color: var(--folder-tab-background);
   color: var(--folder-tab-text);
 }
 .tl-folder-tabs__tab + .tl-folder-tabs__tab {
-  border-left-color: var(--folder-tab-divider);
+  border-left: 1px solid var(--folder-tab-divider-color);
 }
 .tl-folder-tabs__tab:focus-visible {
-  outline: 2px solid currentcolor;
-  outline-offset: -4px;
-  box-shadow: 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;
+  box-shadow: inset -0.5px -1px 0 3px var(--component--focus-ring-color-discrete);
 }
-.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
-  background-color: var(--folder-tab-surface-hover);
-  border-top-color: var(--folder-tab-surface-hover);
-  color: var(--folder-tab-text);
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
+  background-color: var(--folder-tab-background-hover);
 }
 .tl-folder-tabs__tab--selected {
-  background-color: var(--folder-tab-surface-selected);
-  border-top-color: var(--folder-tab-border-selected);
-  color: var(--folder-tab-text);
-}
-.tl-folder-tabs__tab--selected::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -1px;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--folder-tab-surface-selected);
-  z-index: 1;
+  background-color: var(--folder-tab-background-selected);
+  border-top: 2px solid var(--folder-tab-border-selected);
+  color: var(--folder-tab-text-selected);
 }
 .tl-folder-tabs__tab--disabled {
-  color: var(--folder-tab-text-disabled);
+  opacity: var(--folder-tab-item-opacity-disabled);
   cursor: not-allowed;
   user-select: none;
 }
@@ -104,11 +214,17 @@
 .tl-folder-tabs::-webkit-scrollbar {
   display: none;
 }
+.tl-folder-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;
+}
 
 /* Overlay buttons (optional in markup; visible via media query) */
 .tl-folder-tabs__scroll-button {
-  background-color: var(--folder-tab-surface);
-  color: var(--folder-tabs-scroll-button-text);
+  background-color: var(--folder-tabs-scroll-button-background);
+  color: var(--folder-tabs-scroll-button-color);
   min-width: 48px;
   border: 0;
   justify-content: center;
@@ -116,11 +232,11 @@
   position: sticky;
   cursor: pointer;
 }
-.tl-folder-tabs__scroll-button:hover {
-  background-color: var(--folder-tabs-scroll-button-surface-hover);
-}
-.tl-folder-tabs__scroll-button:active {
-  background-color: var(--folder-tabs-scroll-button-surface-active);
+.tl-folder-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;
 }
 
 /* left/right anchoring over the track */
@@ -135,5 +251,5 @@
 }
 
 .tl-folder-tabs__scroll-button svg {
-  fill: var(--folder-tabs-scroll-button-text);
+  fill: var(--folder-tabs-scroll-button-color);
 }

package/dist/tl-footer.css

@@ -8,20 +8,36 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-footer-border: var(--scania-color-blue-700);
-  --component-footer-primary: var(--scania-color-blue-800);
-  --component-footer-color-text-link-default: var(--color-text-brand);
-  --component-footer-color-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-700);
+  --component-footer-background-main-default: var(--scania-color-blue-800);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-base);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-150);
+  --component-footer-text-copyright-default: var(--color-text-inverse-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-inverse-strong);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-grey-50);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-grey-50);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-grey-300);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tds-mode-dark,
@@ -29,35 +45,51 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-footer-border: var(--scania-color-blue-800);
-  --component-footer-primary: var(--scania-color-blue-900);
-  --component-footer-color-text-link-default: #d8dde5;
-  --component-footer-color-text-copyright-default: var(--color-text-soft);
+  --component-footer-border-divider-default: var(--scania-color-blue-800);
+  --component-footer-background-main-default: var(--scania-color-blue-900);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-02);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--scania-color-grey-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-footer-border: var(--traton-color-transparent-invisible-light);
-  --component-footer-primary: var(--traton-color-blue-1000);
-  --component-footer-color-text-link-default: var(--color-text-strong);
-  --component-footer-color-text-copyright-default: var(--traton-color-transparent-inverse-600);
+  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
+  --component-footer-background-main-default: var(--traton-color-blue-1000);
+  --component-footer-background-top-default: var(--color-background-layer-01);
+  --component-footer-background-top-secondary: var(--color-background-layer-01);
+  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
+  --component-footer-background-list-item-active: var(--traton-color-blue-800);
+  --component-footer-text-copyright-default: var(--color-text-soft);
+  --component-footer-text-link-default: var(--color-text-strong);
+  --component-footer-text-title-default: var(--color-text-strong);
+  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
+  --component-footer-icon-link-default: var(--color-icon-strong);
+  --component-footer-icon-social-default: var(--color-icon-strong);
 }
 
 .tl-footer {
-  --footer-top-background-primary: var(--color-background-layer-01);
-  --footer-top-background-secondary: var(--color-background-base);
-  --footer-top-background: var(--color-background-layer-01);
-  --footer-top-divider: var(--color-foreground-border-discrete);
-  --footer-top-links-desktop: var(--color-foreground-text-subtle);
-  --footer-top-links: var(--component-footer-text-color-link-text);
-  --footer-top-links-background-hover: var(--color-background-surface-300);
-  --footer-top-button-active: var(--color-background-surface-300);
-  --footer-main-background: var(--component-footer-primary);
-  --footer-main-links: var(--color-foreground-text-accent-brand);
-  --footer-main-divider: var(--component-footer-border);
-  --footer-main-copyright: var(--component-footer-text-color-copyright);
+  --footer-top-background-primary: var(--component-footer-background-top-default);
+  --footer-top-background-secondary: var(--component-footer-background-top-secondary);
+  --footer-top-background: var(--component-footer-background-top-default);
+  --footer-top-divider: var(--color-border-discrete);
+  --footer-top-links-desktop: var(--component-footer-text-title-default);
+  --footer-top-links: var(--component-footer-text-link-default);
+  --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
+  --footer-top-button-active: var(--component-footer-background-list-item-active);
+  --footer-main-background: var(--component-footer-background-main-default);
+  --footer-main-links: var(--component-footer-text-inverse-link-default);
+  --footer-main-divider: var(--component-footer-border-divider-default);
+  --footer-main-copyright: var(--component-footer-text-copyright-default);
 }
 .tl-footer.tl-footer--primary {
   --footer-top-background: var(--footer-top-background-primary);
@@ -66,6 +98,28 @@
   --footer-top-background: var(--footer-top-background-secondary);
 }
 
+.scania .tl-footer {
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+}
+
+.traton .tds-mode-dark .tl-footer,
+.traton .tl-mode-dark .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
+}
+
+.traton .tds-mode-light .tl-footer,
+.traton .tl-mode-light .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
+.traton .tl-footer {
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+}
+
 .tl-footer__group {
   display: block;
 }
@@ -107,8 +161,8 @@
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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;
 }
@@ -167,8 +221,8 @@
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title:focus-visible {
-    outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-    box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+    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;
   }
@@ -188,8 +242,8 @@
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-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;
 }