@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.0

package/dist/tl-modal.css

@@ -18,7 +18,9 @@ body {
 :root,
 .tds-mode-light,
 .scania .tds-mode-light,
-.scania .tl-mode-light {
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
   --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
   --component-shadow-default: var(--scania-color-transparent-shadow-150);
   --component-shadow-hover: var(--scania-color-transparent-shadow-250);
@@ -28,7 +30,9 @@ body {
 }
 
 .traton .tds-mode-light,
-.traton .tl-mode-light {
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
   --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
   --component-shadow-default: var(--traton-color-transparent-invisible-dark);
   --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
@@ -39,7 +43,9 @@ body {
 
 .tds-mode-dark,
 .scania .tds-mode-dark,
-.scania .tl-mode-dark {
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
   --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
   --component-shadow-default: var(--scania-color-transparent-invisible-dark);
   --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
@@ -49,7 +55,9 @@ body {
 }
 
 .traton .tds-mode-dark,
-.traton .tl-mode-dark {
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
   --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
   --component-shadow-default: var(--traton-color-transparent-invisible-dark);
   --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
@@ -58,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 */
@@ -82,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;
@@ -95,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;
@@ -104,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;
@@ -234,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 {
@@ -244,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;
@@ -253,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;
@@ -285,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-radio-button.css

@@ -1,26 +1,120 @@
 @charset "UTF-8";
-.tl-radio-button {
-  --radio-button-background-hover: var(--color-foreground-border-discrete);
-  --radio-button-background-inverse: var(--color-foreground-icon-inverse-strong);
-  --radio-button-background-disabled: var(--color-background-accent-primary-disabled);
-  --radio-button-border: var(--color-foreground-border-strong);
-  --radio-button-label: var(--color-foreground-text-strong);
-  --radio-button-label-disabled: var(--color-foreground-text-disabled);
-  --radio-button-border-disabled: var(--color-foreground-border-discrete);
-  --radio-button-focus: var(--color-foreground-border-accent-focus);
-  --radio-button-checked-disabled: var(--color-foreground-icon-disabled);
-  --radio-button-spacing-4: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4)
-    var(--tds-spacing-element-4);
-  --radio-button-focus-outline-color: var(--color-foreground-border-accent-focus);
-  --radio-button-focus-outline-width: 2px;
+/**
+ * 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-radio-button-background-standard-default: var(--color-background-none);
+  --component-radio-button-background-standard-hover: var(--color-background-none);
+  --component-radio-button-background-selected-default: var(--scania-color-grey-950);
+  --component-radio-button-background-selected-hover: var(--scania-color-grey-950);
+  --component-radio-button-border-standard-default: var(--color-border-strong);
+  --component-radio-button-border-standard-hover: var(--color-border-strong);
+  --component-radio-button-border-selected-default: var(--color-border-none);
+  --component-radio-button-border-selected-hover: var(--color-border-none);
+  --component-radio-button-border-indicator-default: var(--color-border-none);
+  --component-radio-button-border-indicator-hover: var(--color-border-subtle);
+  --component-radio-button-border-radius-default: var(--scania-unit-9999);
+  --component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-radio-button-opacity-disabled: var(--scania-opacity-25);
+  --component-radio-button-text-default: var(--color-text-strong);
+  --component-radio-button-text-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-radio-button-background-standard-default: var(--color-background-none);
+  --component-radio-button-background-standard-hover: var(--color-background-none);
+  --component-radio-button-background-selected-default: var(--traton-color-blue-950);
+  --component-radio-button-background-selected-hover: var(--traton-color-blue-950);
+  --component-radio-button-border-standard-default: var(--color-border-strong);
+  --component-radio-button-border-standard-hover: var(--color-border-strong);
+  --component-radio-button-border-selected-default: var(--color-border-none);
+  --component-radio-button-border-selected-hover: var(--color-border-none);
+  --component-radio-button-border-indicator-default: var(--color-border-none);
+  --component-radio-button-border-indicator-hover: var(--color-border-subtle);
+  --component-radio-button-border-radius-default: var(--traton-unit-9999);
+  --component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-radio-button-opacity-disabled: var(--traton-opacity-25);
+  --component-radio-button-text-default: var(--color-text-strong);
+  --component-radio-button-text-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-radio-button-background-standard-default: var(--color-background-none);
+  --component-radio-button-background-standard-hover: var(--color-background-none);
+  --component-radio-button-background-selected-default: var(--scania-color-grey-50);
+  --component-radio-button-background-selected-hover: var(--scania-color-grey-50);
+  --component-radio-button-border-standard-default: var(--color-border-strong);
+  --component-radio-button-border-standard-hover: var(--color-border-strong);
+  --component-radio-button-border-selected-default: var(--color-border-none);
+  --component-radio-button-border-selected-hover: var(--color-border-none);
+  --component-radio-button-border-indicator-default: var(--color-border-none);
+  --component-radio-button-border-indicator-hover: var(--color-border-subtle);
+  --component-radio-button-border-radius-default: var(--scania-unit-9999);
+  --component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-radio-button-opacity-disabled: var(--scania-opacity-25);
+  --component-radio-button-text-default: var(--color-text-strong);
+  --component-radio-button-text-hover: var(--color-text-strong);
 }
 
-.scania .tl-radio-button {
-  --radio-button-focus-outline-width: 2px;
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-radio-button-background-standard-default: var(--color-background-none);
+  --component-radio-button-background-standard-hover: var(--color-background-none);
+  --component-radio-button-background-selected-default: var(--traton-color-base-white);
+  --component-radio-button-background-selected-hover: var(--traton-color-base-white);
+  --component-radio-button-border-standard-default: var(--color-border-strong);
+  --component-radio-button-border-standard-hover: var(--color-border-strong);
+  --component-radio-button-border-selected-default: var(--color-border-none);
+  --component-radio-button-border-selected-hover: var(--color-border-none);
+  --component-radio-button-border-indicator-default: var(--color-border-none);
+  --component-radio-button-border-indicator-hover: var(--color-border-subtle);
+  --component-radio-button-border-radius-default: var(--traton-unit-9999);
+  --component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
+  --component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-radio-button-opacity-disabled: var(--traton-opacity-25);
+  --component-radio-button-text-default: var(--color-text-strong);
+  --component-radio-button-text-hover: var(--color-text-strong);
 }
 
-.traton .tl-radio-button {
-  --radio-button-focus-outline-width: 4px;
+.tl-radio-button {
+  --radio-button-text: var(--component-radio-button-text-default);
+  --radio-button-text-hover: var(--component-radio-button-text-hover);
+  --radio-button-background: var(--component-radio-button-background-standard-default);
+  --radio-button-background-hover: var(--component-radio-button-background-standard-hover);
+  --radio-button-background-selected: var(--component-radio-button-background-selected-default);
+  --radio-button-background-selected-hover: var(--component-radio-button-background-selected-hover);
+  --radio-button-border: var(--component-radio-button-border-standard-default);
+  --radio-button-border-hover: var(--component-radio-button-border-standard-hover);
+  --radio-button-border-selected: var(--component-radio-button-border-selected-default);
+  --radio-button-border-selected-hover: var(--component-radio-button-border-selected-hover);
+  --radio-button-indicator: var(--component-radio-button-border-indicator-default);
+  --radio-button-indicator-hover: var(--component-radio-button-border-indicator-hover);
+  --radio-button-icon-selected: var(--component-radio-button-icon-selected-default);
+  --radio-button-icon-selected-hover: var(--component-radio-button-icon-selected-hover);
+  --radio-button-border-radius: calc(var(--component-radio-button-border-radius-default) * 1px);
+  --radio-button-focus-ring-radius: calc(var(--component-radio-button-focus-ring-radius-default) * 1px);
+  --radio-button-opacity-disabled: calc(var(--component-radio-button-opacity-disabled) / 100);
 }
 
 /* Typography Usage mixins */
@@ -38,10 +132,9 @@
   font-weight: var(--detail-02-font-weight);
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
-  color: var(--radio-button-label);
+  color: var(--radio-button-text);
   display: flex;
   align-items: center;
-  gap: var(--radio-button-spacing-8);
 }
 .tl-radio-button:has(:disabled) {
   cursor: not-allowed;
@@ -59,110 +152,79 @@
   position: relative;
   cursor: pointer;
   flex-shrink: 0;
-  border-radius: 50%;
 }
 .tl-radio-button__input::before, .tl-radio-button__input::after {
   content: "";
   position: absolute;
-  border-radius: 50%;
   box-sizing: border-box;
+  border-radius: var(--radio-button-border-radius);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .tl-radio-button__input {
-  /* focus "pulse" background holder */
+  /* The outer circle: border + fill, plus the (transparent by default) hover indicator halo. */
 }
 .tl-radio-button__input::before {
-  inline-size: 22px;
-  block-size: 22px;
-  left: 1px;
-  top: 1px;
-}
-.tl-radio-button__input {
-  /* base inner circle + ring */
-}
-.tl-radio-button__input::after {
-  background-color: var(--radio-button-background-inverse);
-  border: 1px solid var(--radio-button-border);
   inline-size: 16px;
   block-size: 16px;
-  left: 4px;
-  top: 4px;
+  border: 1px solid var(--radio-button-border);
+  background-color: var(--radio-button-background);
+  box-shadow: 0 0 0 2px var(--radio-button-indicator);
+  transition: box-shadow 0.2s ease-in-out;
 }
 .tl-radio-button__input {
-  /* Focus */
+  /* The inner dot, colour driven by the icon token. Hidden until selected. */
 }
-.tl-radio-button__input:focus::before {
-  background-color: var(--radio-button-focus);
-  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
-}
-.tl-radio-button__input:focus::after {
-  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-focus-outline-color);
-}
-.tl-radio-button__input {
-  /* Checked */
+.tl-radio-button__input::after {
+  inline-size: 6px;
+  block-size: 6px;
+  background-color: var(--radio-button-icon-selected);
+  opacity: 0;
+  /* Keep the dot above the circle fill, which gets z-index: 1 from the focus ring. */
+  z-index: 1;
+}
+.tl-radio-button__input:not(:disabled):hover::before {
+  border-color: var(--radio-button-border-hover);
+  background-color: var(--radio-button-background-hover);
+  box-shadow: 0 0 0 2px var(--radio-button-indicator-hover);
+}
+.tl-radio-button__input: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;
+  border-radius: var(--radio-button-focus-ring-radius);
+}
+.tl-radio-button__input:checked::before {
+  border-color: var(--radio-button-border-selected);
+  background-color: var(--radio-button-background-selected);
 }
 .tl-radio-button__input:checked::after {
-  border: 4px solid var(--radio-button-border);
+  background-color: var(--radio-button-icon-selected);
+  opacity: 1;
 }
-.tl-radio-button__input {
-  /* Checked + focus */
-}
-.tl-radio-button__input:checked:focus::after {
-  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-focus-outline-color);
-}
-.tl-radio-button__input {
-  /* Hover */
+.tl-radio-button__input:checked:not(:disabled):hover::before {
+  border-color: var(--radio-button-border-selected-hover);
+  background-color: var(--radio-button-background-selected-hover);
 }
-.tl-radio-button:not(:has(:disabled)):hover .tl-radio-button__input::after {
-  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-background-hover);
-}
-.tl-radio-button__input {
-  /* Disabled */
+.tl-radio-button__input:checked:not(:disabled):hover::after {
+  background-color: var(--radio-button-icon-selected-hover);
 }
 .tl-radio-button__input:disabled {
   cursor: not-allowed;
-}
-.tl-radio-button__input:disabled::before {
-  outline: 1px solid var(--radio-button-border-disabled);
-  outline-offset: -4px;
-}
-.tl-radio-button__input:disabled::after {
-  background-color: var(--radio-button-background-disabled);
-  border-color: var(--radio-button-background-disabled);
-  outline: none;
-}
-.tl-radio-button__input:disabled:checked::before {
-  border: 1px solid var(--radio-button-border-disabled);
-  display: block;
-  inline-size: 16px;
-  block-size: 16px;
-  left: 3px;
-  top: 3px;
-  box-sizing: content-box;
-}
-.tl-radio-button__input:disabled:checked::after {
-  border: 4px solid var(--radio-button-background-disabled);
-  background-color: var(--radio-button-checked-disabled);
-  left: 4px;
-  top: 4px;
+  opacity: var(--radio-button-opacity-disabled);
 }
 
 /* LABEL — text only */
 .tl-radio-button__label {
   cursor: pointer;
   padding-left: 4px;
+  color: var(--radio-button-text);
+}
+.tl-radio-button__input:not(:disabled):hover + .tl-radio-button__label {
+  color: var(--radio-button-text-hover);
 }
 .tl-radio-button:has(:disabled) .tl-radio-button__label {
   cursor: not-allowed;
-  color: var(--radio-button-label-disabled);
-}
-
-/* Focus animation */
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-  }
 }