@scania/tegel-lite 0.1.0-focus-ring-beta.0 → 0.1.0-header-beta.0

package/dist/tl-popover-menu.css

@@ -1,22 +1,124 @@
-.tl-popover-menu {
-  --popover-menu-text: var(--color-foreground-text-strong);
-  --popover-menu-background: var(--color-background-layer-01);
-  --popover-menu-background-hover: var(--color-background-layer-02);
-  --popover-menu-item-outline-focus: var(--color-foreground-border-accent-focus);
-  --popover-menu-item-disabled: var(--color-foreground-text-disabled);
-  --popover-menu-item-icon-disabled: var(--color-foreground-icon-disabled);
+/**
+ * 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-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-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-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
+  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
+  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
 }
-.tl-popover-menu--primary {
-  --popover-menu-background: var(--color-background-layer-01);
-  --popover-menu-background-hover: var(--color-background-layer-02);
+
+.tl-popover-menu {
+  --popover-menu-text: var(--component-popover-text-link-primary-default);
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
+  --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
+  --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
+  --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
 }
-.tl-popover-menu--secondary {
-  --popover-menu-background: var(--color-background-layer-02);
-  --popover-menu-background-hover: var(--color-background-layer-01);
+
+.tl-popover-menu--primary,
+.tl-popover-menu .tl-popover-menu--primary {
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
 }
 
-.scania .tl-popover-menu {
-  --popover-menu-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
+.tl-popover-menu--secondary,
+.tl-popover-menu .tl-popover-menu--secondary {
+  --popover-menu-background: var(--component-popover-background-secondary);
+  --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
 }
 
 .traton .tl-popover-menu {
@@ -45,20 +147,22 @@
   color: var(--popover-menu-text);
   position: relative;
   transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
 }
 .tl-popover-menu__item:hover {
   cursor: pointer;
   background-color: var(--popover-menu-background-hover);
 }
 .tl-popover-menu__item:focus-visible {
-  outline: 1px solid var(--popover-menu-item-outline-focus);
-  outline-offset: -1px;
+  outline: 2px solid var(--popover-menu-item-outline-focus);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
 }
 
 .tl-popover-menu__item--disabled {
@@ -69,8 +173,14 @@
   gap: 10px;
   padding: 10px 16px;
   cursor: not-allowed;
-  color: var(--popover-menu-item-disabled);
+  opacity: var(--popover-menu-item-opacity-disabled);
   pointer-events: none;
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
 }
 .tl-popover-menu__item--disabled:hover {
   background-color: inherit;
@@ -80,10 +190,6 @@
   box-shadow: none;
 }
 
-.tl-popover-menu__item--disabled .tl-icon {
-  color: var(--popover-menu-item-icon-disabled);
-}
-
 .tl-popover-menu {
   box-sizing: border-box;
 }

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,80 @@
   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 {
+  opacity: var(--radio-button-opacity-disabled);
   cursor: not-allowed;
-  color: var(--radio-button-label-disabled);
-}
-
-/* Focus animation */
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-  }
 }