@scania/tegel-lite 0.1.0-var-develop-beta.1 → 0.1.0-var-batch-4-beta.3

package/dist/tl-button.css

@@ -108,9 +108,9 @@
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-button-background-standard-primary-default: #004852;
-  --component-button-background-standard-primary-hover: #003137;
-  --component-button-background-standard-primary-active: #002429;
+  --component-button-background-standard-primary-default: var(--traton-color-blue-800);
+  --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
+  --component-button-background-standard-primary-active: var(--traton-color-blue-900);
   --component-button-background-standard-secondary-default: var(--color-background-none);
   --component-button-background-standard-secondary-hover: var(--color-background-none);
   --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -327,9 +327,9 @@
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-button-background-standard-primary-default: #c2bfb6;
-  --component-button-background-standard-primary-hover: #d6d4c9;
-  --component-button-background-standard-primary-active: #a6a49c;
+  --component-button-background-standard-primary-default: var(--traton-color-grey-300);
+  --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
+  --component-button-background-standard-primary-active: var(--traton-color-grey-400);
   --component-button-background-standard-secondary-default: var(--color-background-none);
   --component-button-background-standard-secondary-hover: var(--color-background-none);
   --component-button-background-standard-secondary-active: var(--color-background-none);
@@ -386,7 +386,7 @@
   --component-button-icon-standard-tertiary-active: var(
     --component-button-icon-standard-tertiary-default
   );
-  --component-button-icon-danger-primary-default: var(--scania-color-base-white);
+  --component-button-icon-danger-primary-default: var(--traton-color-base-white);
   --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
   --component-button-icon-danger-primary-active: var(
     --component-button-icon-danger-primary-default
@@ -526,8 +526,10 @@
   cursor: pointer;
 }
 .tl-button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
+  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-button {
   /* Variants */
@@ -551,11 +553,10 @@
   background: var(--button-primary-background-focus);
   border-color: var(--button-primary-border-color-focus);
   color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
 }
 .tl-button--primary:active:not(:disabled):focus-visible {
   outline: none;
-  outline-offset: none;
+  box-shadow: none;
 }
 .tl-button--primary:active:not(:disabled) {
   background-color: var(--button-primary-background-active);
@@ -580,10 +581,10 @@
   background: var(--button-secondary-background-focus);
   border-color: var(--button-secondary-border-color-focus);
   color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
 }
 .tl-button--secondary:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--secondary:active:not(:disabled) {
   border-color: var(--button-secondary-border-color-active);
@@ -607,10 +608,10 @@
   background: var(--button-ghost-background-focus);
   border-color: var(--button-ghost-border-color-focus);
   color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
 }
 .tl-button--ghost:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--ghost:active:not(:disabled) {
   border-color: var(--button-ghost-border-color-active);
@@ -634,10 +635,10 @@
   background: var(--button-danger-background-focus);
   border-color: var(--button-danger-border-color-focus);
   color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
 }
 .tl-button--danger:active:not(:disabled):focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .tl-button--danger:active:not(:disabled) {
   background-color: var(--button-danger-background-active);

package/dist/tl-card.css

@@ -57,20 +57,18 @@
 }
 
 .tl-card {
-  --card-background: var(--tds-white);
-  --card-background-primary: var(--component-card-primary);
-  --card-background-secondary: var(--component-card-secondary);
+  --card-background: var(--component-card-background-primary-default);
+  --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
   --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
   --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
   --card-box: var(--card-box-primary);
   --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
   --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
-  --card-headline: var(--color-foreground-text-strong);
-  --card-sub-headline: var(--color-foreground-text-subtle);
-  --card-body-color: var(--color-foreground-text-defined);
-  --card-divider: var(--color-foreground-border-discrete);
-  --card-icon-color: var(--color-foreground-icon-strong);
-  /* Paddings */
+  --card-headline: var(--component-card-text-title-default);
+  --card-sub-headline: var(--component-card-text-subtitle-default);
+  --card-body-color: var(--component-card-text-body-default);
+  --card-divider: var(--color-border-soft);
+  --card-icon-color: var(--component-card-text-title-default);
   --card-body-padding: 0 16px;
   --card-header-padding: 16px;
   --card-slotted-padding: 16px;
@@ -78,31 +76,23 @@
 }
 .tl-card--primary {
   --card-box: var(--card-box-primary);
+  --card-background: var(--component-card-background-primary-default);
 }
-.tl-card.tl-card--mode-variant-secondary {
+.tl-card--secondary {
   --card-box: var(--card-box-secondary);
+  --card-background: var(--component-card-background-secondary-default);
 }
 
-.scania .tl-card {
-  /* Paddings */
-  --card-body-padding: 0 16px;
-  --card-header-padding: 16px;
-  --card-slotted-padding: 16px;
-  --card-divider-margin: 16px 16px 0;
-}
-.scania .tl-card--primary {
-  --card-box: var(--card-box-primary);
-}
-.scania .tl-card--secondary {
-  --card-box: var(--card-box-primary);
+.tds-mode-dark .tl-card,
+.tl-mode-dark .tl-card {
+  --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
+  --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
 }
 
 .traton .tl-card {
   --card-box: none;
-  --card-background: transparent;
   --card-box-hover: none;
   --card-box-pressed: none;
-  /* Paddings and margins */
   --card-body-padding: 0;
   --card-header-padding: 16px 16px 16px 0;
   --card-slotted-padding: 16px 16px 16px 0;
@@ -110,35 +100,11 @@
 }
 .traton .tl-card--primary {
   --card-box: none;
-  --card-background: transparent;
+  --card-background: var(--component-card-background-primary-default);
 }
 .traton .tl-card--secondary {
   --card-box: none;
-  --card-background: transparent;
-}
-
-/* Dark mode */
-.tl-mode-dark {
-  --card-background-primary: var(--tds-grey-900);
-  --card-background-secondary: var(--tds-grey-850);
-}
-.tl-mode-dark .tl-card {
-  --card-background: var(--card-background-primary);
-}
-.tl-mode-dark .tl-card--primary {
-  --card-box: var(--card-box-primary);
-  --card-background: var(--card-background-primary);
-}
-.tl-mode-dark .tl-card--secondary {
-  --card-box: var(--card-box-primary);
-  --card-background: var(--card-background-secondary);
-}
-
-.traton .tl-mode-dark .tl-card--primary {
-  --card-background: transparent;
-}
-.traton .tl-mode-dark .tl-card--secondary {
-  --card-background: transparent;
+  --card-background: var(--component-card-background-secondary-default);
 }
 
 /* Typography Usage mixins */
@@ -155,7 +121,7 @@
   width: 100%;
   box-shadow: var(--card-box);
   background-color: var(--card-background);
-  border-radius: 4px;
+  border-radius: var(--card-border-radius);
   overflow: hidden;
 }
 .tl-card--clickable {
@@ -165,9 +131,10 @@
   padding: 0;
 }
 .tl-card--clickable: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;
 }
 .tl-card--clickable:active {
   box-shadow: var(--card-box-pressed);
@@ -233,7 +200,7 @@
 
 .tl-card__body {
   display: block;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .tl-card--stretch .tl-card__body {
   display: flex;

package/dist/tl-chip.css

@@ -44,9 +44,10 @@
   border-color: var(--chip-border-hover);
 }
 .tl-chip: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;
   background-color: var(--chip-background-focus);
 }
 .tl-chip--sm {
@@ -69,9 +70,10 @@
   border-color: var(--chip-border-selected-hover);
 }
 .tl-chip--selected: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;
   background-color: var(--chip-focused-on-selected);
 }
 .tl-chip:disabled {

package/dist/tl-dropdown.css

@@ -280,8 +280,10 @@ body {
   display: block;
 }
 .tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
-  outline-offset: 2px;
+  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-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
@@ -588,12 +590,12 @@ body {
   display: none;
 }
 
-.tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
+.tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
+.tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty)), :has(.tl-dropdown__input:focus), :has(.tl-dropdown__input:not(:placeholder-shown)), :has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
   top: calc(50% - 9.5px);
 }
 
@@ -649,7 +651,7 @@ body {
   background: var(--tl-scrollbar-track-color);
 }
 .tl-dropdown__list::-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;
@@ -658,6 +660,7 @@ body {
 }
 .tl-dropdown__list::-webkit-scrollbar-thumb:hover {
   border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
 }
 .tl-dropdown__list::-webkit-scrollbar-button {
   height: 0;
@@ -737,8 +740,9 @@ body {
   background: var(--dropdown-option-background-hover);
 }
 .tl-dropdown__option:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
-  z-index: 2;
+  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-dropdown__option--selected {
   background: var(--dropdown-option-background-selected);

package/dist/tl-folder-tabs.css

@@ -54,11 +54,12 @@
   border-left-color: var(--folder-tab-divider);
 }
 .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;
 }
-.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .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);

package/dist/tl-footer.css

@@ -159,8 +159,8 @@
   text-decoration: underline;
 }
 .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }
@@ -219,8 +219,8 @@
     background-color: var(--footer-top-button-active);
   }
   .tl-footer__top-title:focus-visible {
-    outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-    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;
   }
@@ -240,8 +240,8 @@
   text-decoration: none;
 }
 .tl-footer__main .tl-footer__link:focus-visible {
-  outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
-  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;
 }

package/dist/tl-header.css

@@ -348,8 +348,9 @@
   background-color: var(--header-item-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;
@@ -402,8 +403,9 @@ body {
   background-color: var(--header-item-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);
@@ -448,8 +450,9 @@ body {
   background-color: var(--header-item-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);
@@ -501,7 +504,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 +513,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;
@@ -551,7 +555,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 +564,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;
@@ -595,7 +600,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 +609,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;
@@ -640,7 +646,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 +655,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;
@@ -789,8 +796,9 @@ body {
 }
 .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 {
@@ -827,8 +835,10 @@ body {
 }
 .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 {

package/dist/tl-inline-tabs.css

@@ -64,12 +64,14 @@
   outline: none;
 }
 .tl-inline-tabs__tab:focus-visible::before {
+  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;
   content: "";
   position: absolute;
   inset: 18px 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
-  z-index: 2;
   pointer-events: none;
 }
 .tl-inline-tabs__tab::after {
@@ -112,6 +114,7 @@
   content: none;
 }
 .tl-inline-tabs__tab--disabled:focus-visible::before {
+  outline: none;
   box-shadow: none;
 }
 

package/dist/tl-link.css

@@ -108,12 +108,15 @@
 }
 
 .tl-banner .tl-link {
-  --link: var(--color-system-info-default);
+  --link: var(--color-text-strong);
+  --link-hover: var(--color-text-strong);
+  --link-visited: var(--color-text-strong);
 }
 
 .tl-toast .tl-link {
-  --link: var(--color-system-info-default);
-  --link-hover: var(--color-system-info-default);
+  --link: var(--color-text-inverse-strong);
+  --link-hover: var(--color-text-inverse-strong);
+  --link-visited: var(--color-text-inverse-strong);
 }
 
 .traton .tl-link {
@@ -142,8 +145,10 @@
   font: inherit;
 }
 .tl-link:focus-visible {
-  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
+  z-index: 1;
   text-decoration: none;
 }
 .tl-link:active {