@scania/tegel-lite 1.2.1 → 1.3.0

package/dist/global.css

@@ -1374,6 +1374,8 @@ html {
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
   --component--focus-ring-radius-none: var(--scania-unit-0);
   --component--focus-ring-radius-extra-small: 1;
   --component--focus-ring-radius-small: 2;
@@ -1381,14 +1383,14 @@ html {
   --component--focus-ring-radius-large: 4;
   --component--focus-ring-radius-extra-large: 5;
   --component--focus-ring-radius-full: var(--scania-unit-9999);
-  --component--focus-ring-color-strong: var(--color-system-info-default);
-  --component--focus-ring-color-discrete: var(--scania-color-base-white);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
   --component--focus-ring-radius-none: var(--traton-unit-0);
   --component--focus-ring-radius-extra-small: 1;
   --component--focus-ring-radius-small: 2;
@@ -1396,8 +1398,6 @@ html {
   --component--focus-ring-radius-large: 4;
   --component--focus-ring-radius-extra-large: 5;
   --component--focus-ring-radius-full: var(--traton-unit-9999);
-  --component--focus-ring-color-strong: var(--color-system-info-default);
-  --component--focus-ring-color-discrete: var(--traton-color-base-white);
 }
 
 .tds-mode-dark,
@@ -1405,6 +1405,8 @@ html {
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
   --component--focus-ring-radius-none: var(--scania-unit-0);
   --component--focus-ring-radius-extra-small: 1;
   --component--focus-ring-radius-small: 2;
@@ -1412,14 +1414,14 @@ html {
   --component--focus-ring-radius-large: 4;
   --component--focus-ring-radius-extra-large: 5;
   --component--focus-ring-radius-full: var(--scania-unit-9999);
-  --component--focus-ring-color-strong: var(--color-system-info-default);
-  --component--focus-ring-color-discrete: var(--scania-color-base-white);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
   --component--focus-ring-radius-none: var(--traton-unit-0);
   --component--focus-ring-radius-extra-small: 1;
   --component--focus-ring-radius-small: 2;
@@ -1427,8 +1429,6 @@ html {
   --component--focus-ring-radius-large: 4;
   --component--focus-ring-radius-extra-large: 5;
   --component--focus-ring-radius-full: var(--traton-unit-9999);
-  --component--focus-ring-color-strong: var(--color-system-info-default);
-  --component--focus-ring-color-discrete: var(--traton-color-base-white);
 }
 
 body {

package/dist/scania-variables.css

@@ -155,8 +155,6 @@
   --color-border-inverse-disabled: var(--scania-color-transparent-inverse-500);
   --color-border-inverse-discrete: var(--scania-color-transparent-inverse-600);
   --color-border-inverse-none: var(--scania-color-transparent-invisible-dark);
-  --color-icon-base: var(--traton-color-base-black);
-  --color-icon-brand: var(--traton-color-blue-950);
   --color-icon-defined: var(--scania-color-transparent-650);
   --color-icon-soft: var(--scania-color-transparent-500);
   --color-icon-subtle: var(--scania-color-transparent-350);
@@ -202,6 +200,8 @@
   --color-text-inverse-discrete: var(--scania-color-transparent-inverse-200);
   --color-border-strong: var(--scania-color-transparent-950);
   --color-border-inverse-strong: var(--scania-color-transparent-inverse-50);
+  --color-icon-base: var(--scania-color-base-black);
+  --color-icon-brand: var(--scania-color-base-black);
   --color-icon-strong: var(--scania-color-transparent-950);
   --color-icon-inverse-strong: var(--scania-color-transparent-inverse-50);
   --color-text-base: var(--scania-color-base-black);
@@ -244,8 +244,6 @@
   --color-border-inverse-disabled: var(--scania-color-transparent-250);
   --color-border-inverse-discrete: var(--scania-color-transparent-200);
   --color-border-inverse-none: var(--scania-color-transparent-invisible-light);
-  --color-icon-base: var(--traton-color-base-white);
-  --color-icon-brand: var(--traton-color-base-white);
   --color-icon-defined: var(--scania-color-transparent-inverse-200);
   --color-icon-soft: var(--scania-color-transparent-inverse-300);
   --color-icon-subtle: var(--scania-color-transparent-inverse-400);
@@ -291,6 +289,8 @@
   --color-text-inverse-discrete: var(--scania-color-transparent-200);
   --color-border-strong: var(--scania-color-transparent-inverse-50);
   --color-border-inverse-strong: var(--scania-color-transparent-950);
+  --color-icon-base: var(--scania-color-base-white);
+  --color-icon-brand: var(--scania-color-base-white);
   --color-icon-strong: var(--scania-color-transparent-inverse-50);
   --color-icon-inverse-strong: var(--scania-color-transparent-950);
   --color-text-base: var(--scania-color-base-white);

package/dist/tl-card.css

@@ -67,7 +67,7 @@
   --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-divider: var(--color-border-discrete);
   --card-icon-color: var(--component-card-text-title-default);
   --card-body-padding: 0 16px;
   --card-header-padding: 16px;
@@ -190,6 +190,7 @@
   inline-size: 100%;
   block-size: auto;
   display: block;
+  background-color: var(--color-background-layer-03);
 }
 
 .tl-card__divider {

package/dist/tl-datetime.css

@@ -5,17 +5,17 @@
   --datetime-background: var(--datetime-background-primary);
   --datetime-text: var(--color-foreground-text-strong);
   --datetime-icon: var(--color-foreground-icon-strong);
-  --datetime-placeholder: var(--color-foreground-text-subtle);
+  --datetime-placeholder: var(--color-text-subtle);
   --datetime-background-disabled-primary: var(--color-background-layer-01);
   --datetime-background-disabled-secondary: var(--color-background-layer-02);
   --datetime-background-disabled: var(--datetime-background-disabled-primary);
   --datetime-text-disabled: var(--color-foreground-text-disabled);
-  --datetime-placeholder-disabled: var(--color-foreground-text-disabled);
+  --datetime-placeholder-disabled: var(--color-text-disabled);
   --datetime-label-disabled: var(--color-foreground-text-disabled);
   --datetime-icon-disabled: var(--color-foreground-text-disabled);
   --datetime-label: var(--color-foreground-text-strong);
   --datetime-label-inside: var(--color-foreground-text-strong);
-  --datetime-placeholder-focus: var(--tds-grey-500);
+  --datetime-placeholder-focus: var(--color-text-subtle);
   --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
   --datetime-helper: var(--color-foreground-text-defined);
   --datetime-helper-error: var(--color-system-danger-default);
@@ -252,6 +252,35 @@
 .tl-datetime__input:focus::placeholder {
   color: var(--datetime-placeholder-focus);
 }
+.tl-datetime__input {
+  /*
+   * Empty/default state: when no date is picked Safari renders the placeholder
+   * (e.g. "yyyy/mm/dd") through the ::-webkit-datetime-edit container and its
+   * -fields-wrapper. Safari ignores `color` on these pseudos and paints the
+   * text via `-webkit-text-fill-color`; with neither set it falls back to the
+   * UA accent (aqua) — most visible on TRATON, where no theme rule overrides
+   * it. Set both `color` (other engines) and `-webkit-text-fill-color` (Safari)
+   * to the placeholder colour. We only target the container + fields-wrapper,
+   * not the individual sub-fields: when a value IS present Safari paints the
+   * digits in the sub-field pseudos (e.g. ::-webkit-datetime-edit-year-field),
+   * which keep `--datetime-text` from the rules below — so a filled value is
+   * not dimmed in either state. We cover both `:not(:focus)` and `:focus`:
+   * Safari keeps painting the empty placeholder through the container while the
+   * input is focused, so without the focused branch it falls back to the aqua
+   * UA accent again on focus. The focused branch uses the focus placeholder
+   * token to mirror the `::placeholder` rule above.
+   */
+}
+@supports selector(input::-webkit-datetime-edit) {
+  .tl-datetime__input:not(:focus)::-webkit-datetime-edit, .tl-datetime__input:not(:focus)::-webkit-datetime-edit-fields-wrapper {
+    color: var(--datetime-placeholder);
+    -webkit-text-fill-color: var(--datetime-placeholder);
+  }
+  .tl-datetime__input:focus::-webkit-datetime-edit, .tl-datetime__input:focus::-webkit-datetime-edit-fields-wrapper {
+    color: var(--datetime-placeholder-focus);
+    -webkit-text-fill-color: var(--datetime-placeholder-focus);
+  }
+}
 .tl-datetime__input {
   /* WebKit datetime fields */
 }

package/dist/tl-divider.css

@@ -71,12 +71,24 @@
 .tl-divider {
   background-color: var(--divider-background);
 }
-.tl-divider--expressive {
-  background-color: var(--divider-background-strong);
-}
 .tl-divider--discrete {
   background-color: var(--divider-background-discrete);
 }
+.tl-divider--subtle {
+  background-color: var(--divider-background-subtle);
+}
+.tl-divider--soft {
+  background-color: var(--divider-background-soft);
+}
+.tl-divider--defined {
+  background-color: var(--divider-background-defined);
+}
+.tl-divider--strong {
+  background-color: var(--divider-background-strong);
+}
+.tl-divider--expressive {
+  background-color: var(--divider-background-expressive);
+}
 .tl-divider--horizontal {
   width: 100%;
   height: 1px;

package/dist/tl-footer.css

@@ -103,11 +103,13 @@
   --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);