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

package/dist/tl-chip.css

@@ -1,20 +1,158 @@
 /* Typography Usage mixins */
+/**
+ * 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-chip-background-standard-default: var(--scania-color-grey-150);
+  --component-chip-background-standard-hover: var(--scania-color-grey-200);
+  --component-chip-background-selected-default: var(--color-system-info-default);
+  --component-chip-background-selected-hover: var(--color-system-info-defined);
+  --component-chip-border-radius-full: var(--scania-unit-24);
+  --component-chip-border-radius-none: var(--scania-unit-0);
+  --component-chip-border-radius-default: var(--scania-unit-24);
+  --component-chip-border-selected-default: var(--color-border-soft);
+  --component-chip-border-selected-hover: var(--color-border-strong);
+  --component-chip-border-selected-active: var(--color-border-none);
+  --component-chip-border-standard-default: var(--color-border-subtle);
+  --component-chip-border-standard-hover: var(--color-border-subtle);
+  --component-chip-border-standard-active: var(--color-border-none);
+  --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-chip-icon-default: var(--color-icon-strong);
+  --component-chip-icon-hover: var(--component-chip-icon-default);
+  --component-chip-icon-active: var(--component-chip-icon-default);
+  --component-chip-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
+  --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
+  --component-chip-opacity-disabled: var(--scania-opacity-25);
+  --component-chip-text-standard-default: var(--color-text-strong);
+  --component-chip-text-standard-hover: var(--color-text-strong);
+  --component-chip-text-standard-active: var(--color-text-strong);
+  --component-chip-text-selected-default: var(--color-text-inverse-strong);
+  --component-chip-text-selected-hover: var(--color-text-strong);
+  --component-chip-text-selected-active: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-chip-background-standard-default: var(--traton-color-grey-200);
+  --component-chip-background-standard-hover: var(--traton-color-grey-400);
+  --component-chip-background-selected-default: var(--traton-color-grey-300);
+  --component-chip-background-selected-hover: var(--traton-color-grey-400);
+  --component-chip-border-radius-full: var(--traton-unit-24);
+  --component-chip-border-radius-none: var(--traton-unit-0);
+  --component-chip-border-radius-default: var(--traton-unit-2);
+  --component-chip-border-selected-default: var(--color-border-none);
+  --component-chip-border-selected-hover: var(--color-border-none);
+  --component-chip-border-selected-active: var(--color-border-none);
+  --component-chip-border-standard-default: var(--color-border-none);
+  --component-chip-border-standard-hover: var(--color-border-none);
+  --component-chip-border-standard-active: var(--color-border-none);
+  --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-chip-icon-default: var(--color-icon-strong);
+  --component-chip-icon-hover: var(--component-chip-icon-default);
+  --component-chip-icon-active: var(--component-chip-icon-default);
+  --component-chip-icon-selected-default: var(--color-icon-strong);
+  --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
+  --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
+  --component-chip-opacity-disabled: var(--traton-opacity-25);
+  --component-chip-text-standard-default: var(--color-text-strong);
+  --component-chip-text-standard-hover: var(--color-text-strong);
+  --component-chip-text-standard-active: var(--color-text-strong);
+  --component-chip-text-selected-default: var(--color-text-strong);
+  --component-chip-text-selected-hover: var(--color-text-strong);
+  --component-chip-text-selected-active: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-chip-background-standard-default: var(--scania-color-grey-800);
+  --component-chip-background-standard-hover: var(--scania-color-grey-750);
+  --component-chip-background-selected-default: var(--color-system-info-subtle);
+  --component-chip-background-selected-hover: var(--scania-color-blue-500);
+  --component-chip-border-radius-full: var(--scania-unit-24);
+  --component-chip-border-radius-none: var(--scania-unit-0);
+  --component-chip-border-radius-default: var(--scania-unit-24);
+  --component-chip-border-selected-default: var(--color-border-soft);
+  --component-chip-border-selected-hover: var(--color-border-strong);
+  --component-chip-border-selected-active: var(--color-border-none);
+  --component-chip-border-standard-default: var(--color-border-subtle);
+  --component-chip-border-standard-hover: var(--color-border-subtle);
+  --component-chip-border-standard-active: var(--color-border-none);
+  --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-chip-icon-default: var(--color-icon-strong);
+  --component-chip-icon-hover: var(--component-chip-icon-default);
+  --component-chip-icon-active: var(--component-chip-icon-default);
+  --component-chip-icon-selected-default: var(--color-icon-strong);
+  --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
+  --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
+  --component-chip-opacity-disabled: var(--scania-opacity-25);
+  --component-chip-text-standard-default: var(--color-text-strong);
+  --component-chip-text-standard-hover: var(--color-text-strong);
+  --component-chip-text-standard-active: var(--color-text-strong);
+  --component-chip-text-selected-default: var(--color-text-strong);
+  --component-chip-text-selected-hover: var(--color-text-inverse-strong);
+  --component-chip-text-selected-active: var(--color-text-inverse-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-chip-background-standard-default: var(--traton-color-blue-800);
+  --component-chip-background-standard-hover: var(--traton-color-blue-600);
+  --component-chip-background-selected-default: var(--traton-color-blue-400);
+  --component-chip-background-selected-hover: var(--traton-color-blue-300);
+  --component-chip-border-radius-full: var(--traton-unit-24);
+  --component-chip-border-radius-none: var(--traton-unit-0);
+  --component-chip-border-radius-default: var(--traton-unit-2);
+  --component-chip-border-selected-default: var(--color-border-none);
+  --component-chip-border-selected-hover: var(--color-border-none);
+  --component-chip-border-selected-active: var(--color-border-none);
+  --component-chip-border-standard-default: var(--color-border-none);
+  --component-chip-border-standard-hover: var(--color-border-none);
+  --component-chip-border-standard-active: var(--color-border-none);
+  --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-chip-icon-default: var(--color-icon-strong);
+  --component-chip-icon-hover: var(--component-chip-icon-default);
+  --component-chip-icon-active: var(--component-chip-icon-default);
+  --component-chip-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
+  --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
+  --component-chip-opacity-disabled: var(--traton-opacity-25);
+  --component-chip-text-standard-default: var(--color-text-strong);
+  --component-chip-text-standard-hover: var(--color-text-strong);
+  --component-chip-text-standard-active: var(--color-text-strong);
+  --component-chip-text-selected-default: var(--color-text-inverse-strong);
+  --component-chip-text-selected-hover: var(--color-text-inverse-strong);
+  --component-chip-text-selected-active: var(--color-text-inverse-strong);
+}
+
 .tl-chip {
-  --chip-text: var(--component-chip-text-default);
+  --chip-text: var(--component-chip-text-standard-default);
   --chip-text-active: var(--component-chip-text-selected-default);
-  --chip-background: var(--component-chip-background-default);
-  --chip-background-hover: var(--component-chip-background-hover);
-  --chip-background-focus: var(--component-chip-background-hover);
+  --chip-background: var(--component-chip-background-standard-default);
+  --chip-background-hover: var(--component-chip-background-standard-hover);
+  --chip-background-focus: var(--component-chip-background-standard-hover);
   --chip-background-active: var(--component-chip-background-selected-default);
   --chip-background-active-hover: var(--component-chip-background-selected-hover);
   --chip-focused-on-selected: var(--component-chip-background-selected-default);
-  --chip-border: var(--component-chip-border-default);
-  --chip-border-hover: var(--component-chip-border-hover);
+  --chip-border: var(--component-chip-border-standard-default);
+  --chip-border-hover: var(--component-chip-border-standard-hover);
   --chip-border-selected: var(--component-chip-border-selected-default);
   --chip-border-selected-hover: var(--component-chip-border-selected-hover);
   --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
-  --chip-opacity-disabled: var(--component-chip-opacity-disabled);
-  --chip-icon-fill: var(--component-chip-text-default);
+  --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
+  --chip-icon-fill: var(--component-chip-text-standard-default);
   --chip-icon-fill-active: var(--component-chip-text-selected-default);
 }
 
@@ -44,9 +182,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 +208,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-datetime.css

@@ -1,20 +1,21 @@
+@charset "UTF-8";
 .tl-datetime {
   --datetime-background-primary: var(--color-background-layer-01);
   --datetime-background-secondary: var(--color-background-layer-02);
   --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);
@@ -178,45 +179,26 @@
 .tl-datetime:has(input:disabled) .tl-datetime__wrapper {
   cursor: not-allowed;
 }
-.tl-datetime__wrapper {
-  /* CSS-generated icon */
-}
-.tl-datetime__wrapper::after {
-  content: "";
+
+.tl-datetime__icon {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   right: 18px;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 20px 20px;
-  background-color: var(--datetime-icon);
+  transform: translateY(-50%);
+  color: var(--datetime-icon);
   pointer-events: none;
-  /* Default: calendar icon for date/datetime inputs */
-  mask-image: var(--icon-calendar-svg);
-  /* Firefox - hide our custom icon since Firefox shows its own */
+  /* Firefox shows its own native picker icon — hide ours to avoid a duplicate */
 }
 @supports (-moz-appearance: none) {
-  .tl-datetime__wrapper::after {
+  .tl-datetime__icon {
     display: none;
   }
 }
-.tl-datetime__wrapper {
-  /* Change to clock icon for time input */
+.tl-datetime--error .tl-datetime__icon {
+  color: var(--datetime-icon-error);
 }
-.tl-datetime__wrapper:has(input[type=time])::after {
-  mask-image: var(--icon-clock-svg);
-}
-.tl-datetime--error .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-error);
-}
-.tl-datetime__wrapper {
-  /* Disabled state */
-}
-.tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-disabled);
+.tl-datetime:has(input:disabled) .tl-datetime__icon {
+  color: var(--datetime-icon-disabled);
 }
 
 .tl-datetime__input {
@@ -248,7 +230,7 @@
 .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-focus);
 }
-.tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-hover);
 }
 .tl-datetime--error .tl-datetime__input {
@@ -257,7 +239,7 @@
 .tl-datetime--error .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-error-focus);
 }
-.tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-error-hover);
 }
 .tl-datetime--error .tl-datetime__input:disabled {
@@ -270,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

@@ -1,7 +1,65 @@
+/**
+ * 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-divider-border-discrete-default: var(--scania-color-grey-200);
+  --component-divider-border-subtle-default: var(--scania-color-grey-350);
+  --component-divider-border-soft-default: var(--scania-color-grey-500);
+  --component-divider-border-defined-default: var(--scania-color-grey-650);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-700);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--scania-color-blue-800);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-divider-border-discrete-default: var(--color-border-discrete);
+  --component-divider-border-subtle-default: var(--color-border-subtle);
+  --component-divider-border-soft-default: var(--color-border-soft);
+  --component-divider-border-defined-default: var(--color-border-defined);
+  --component-divider-border-strong-default: var(--color-border-strong);
+  --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
+}
+
 .tl-divider {
-  --divider-background: var(--color-foreground-border-discrete);
-  --divider-background-strong: var(--color-foreground-border-strong);
-  --divider-background-discrete: var(--color-foreground-border-discrete);
+  --divider-background: var(--component-divider-border-discrete-default);
+  --divider-background-discrete: var(--component-divider-border-discrete-default);
+  --divider-background-subtle: var(--component-divider-border-subtle-default);
+  --divider-background-soft: var(--component-divider-border-soft-default);
+  --divider-background-defined: var(--component-divider-border-defined-default);
+  --divider-background-strong: var(--component-divider-border-strong-default);
+  --divider-background-expressive: var(--component-divider-border-expressive-default);
 }
 
 .tl-divider {
@@ -13,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;