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

package/dist/tl-card.css

@@ -7,20 +7,26 @@
 .scania.tds-mode-light,
 .scania .tl-mode-light,
 .scania.tl-mode-light {
-  --component-card-background-primary: #fff;
-  --component-card-background-secondary: #fff;
+  --component-card-background-primary-default: var(--scania-color-base-white);
+  --component-card-background-secondary-default: var(--scania-color-base-white);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-light,
 .traton.tds-mode-light,
 .traton .tl-mode-light,
 .traton.tl-mode-light {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-light);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .tds-mode-dark,
@@ -28,37 +34,41 @@
 .scania.tds-mode-dark,
 .scania .tl-mode-dark,
 .scania.tl-mode-dark {
-  --component-card-background-primary: var(--color-background-layer-01);
-  --component-card-background-secondary: var(--color-background-layer-02);
+  --component-card-background-primary-default: var(--color-background-layer-01);
+  --component-card-background-secondary-default: var(--color-background-layer-02);
   --component-card-border-radius-default: var(--scania-unit-4);
   --component-card-space-padding-default: var(--scania-unit-16);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .traton .tds-mode-dark,
 .traton.tds-mode-dark,
 .traton .tl-mode-dark,
 .traton.tl-mode-dark {
-  --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
-  --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
+  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
   --component-card-border-radius-default: var(--traton-unit-0);
   --component-card-space-padding-default: var(--traton-unit-0);
+  --component-card-text-title-default: var(--color-text-strong);
+  --component-card-text-subtitle-default: var(--color-text-soft);
+  --component-card-text-body-default: var(--color-text-defined);
 }
 
 .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-discrete);
+  --card-icon-color: var(--component-card-text-title-default);
   --card-body-padding: 0 16px;
   --card-header-padding: 16px;
   --card-slotted-padding: 16px;
@@ -66,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;
@@ -98,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 */
@@ -143,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 {
@@ -153,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);
@@ -189,6 +168,7 @@
   block-size: 36px;
   border-radius: 100%;
   margin-right: 16px;
+  background-color: var(--color-background-layer-03);
 }
 
 .tl-card__headings {
@@ -210,6 +190,7 @@
   inline-size: 100%;
   block-size: auto;
   display: block;
+  background-color: var(--color-background-layer-03);
 }
 
 .tl-card__divider {
@@ -221,7 +202,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-checkbox.css

@@ -1,41 +1,152 @@
 /* Typography Usage mixins */
-.tl-checkbox {
-  --checkbox-label: var(--color-foreground-text-strong);
-  --checkbox-label-disabled: var(--color-foreground-text-disabled);
-  --checkbox-icon: var(--color-foreground-icon-strong);
-  --checkbox-fill: var(--color-foreground-icon-inverse-strong);
-  --checkbox-fill-disabled: var(--color-background-accent-primary-disabled);
-  --checkbox-border: var(--color-foreground-border-strong);
-  --checkbox-border-hover: var(--color-foreground-border-subtle);
-  --checkbox-border-focus: var(--color-foreground-border-accent-focus);
-  --checkbox-border-disabled: var(--color-foreground-border-discrete);
-  --checkbox-background-opacity-hover: 0.12;
-  --checkbox-background-opacity-focus: 0.24;
-  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23ffffff'/></svg>");
-  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
+/**
+ * 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-checkbox-background-standard-default: var(--color-background-none);
+  --component-checkbox-background-standard-hover: var(--color-background-none);
+  --component-checkbox-background-selected-default: var(--scania-color-grey-950);
+  --component-checkbox-background-selected-hover: var(--scania-color-grey-950);
+  --component-checkbox-background-indeterminate-default: var(--scania-color-grey-950);
+  --component-checkbox-background-indeterminate-hover: var(--scania-color-grey-950);
+  --component-checkbox-border-standard-default: var(--color-border-strong);
+  --component-checkbox-border-standard-hover: var(--color-border-strong);
+  --component-checkbox-border-selected-default: var(--color-border-none);
+  --component-checkbox-border-selected-hover: var(--color-border-none);
+  --component-checkbox-border-indeterminate-default: var(--color-border-none);
+  --component-checkbox-border-indeterminate-hover: var(--color-border-none);
+  --component-checkbox-border-indicator-default: var(--color-border-none);
+  --component-checkbox-border-indicator-hover: var(--color-border-subtle);
+  --component-checkbox-border-radius-default: var(--scania-unit-2);
+  --component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-opacity-disabled: var(--scania-opacity-25);
+  --component-checkbox-text-default: var(--color-text-strong);
+  --component-checkbox-text-hover: var(--color-text-strong);
 }
 
-.tl-mode-dark .tl-checkbox {
-  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
-  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%2356657A'/></svg>");
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-checkbox-background-standard-default: var(--color-background-none);
+  --component-checkbox-background-standard-hover: var(--color-background-none);
+  --component-checkbox-background-selected-default: var(--traton-color-blue-950);
+  --component-checkbox-background-selected-hover: var(--traton-color-blue-950);
+  --component-checkbox-background-indeterminate-default: var(--traton-color-blue-950);
+  --component-checkbox-background-indeterminate-hover: var(--traton-color-blue-950);
+  --component-checkbox-border-standard-default: var(--color-border-strong);
+  --component-checkbox-border-standard-hover: var(--color-border-strong);
+  --component-checkbox-border-selected-default: var(--color-border-none);
+  --component-checkbox-border-selected-hover: var(--color-border-none);
+  --component-checkbox-border-indeterminate-default: var(--color-border-none);
+  --component-checkbox-border-indeterminate-hover: var(--color-border-none);
+  --component-checkbox-border-indicator-default: var(--color-border-none);
+  --component-checkbox-border-indicator-hover: var(--color-border-subtle);
+  --component-checkbox-border-radius-default: var(--traton-unit-2);
+  --component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-opacity-disabled: var(--traton-opacity-25);
+  --component-checkbox-text-default: var(--color-text-strong);
+  --component-checkbox-text-hover: var(--color-text-strong);
 }
 
-.scania .tl-checkbox {
-  --checkbox-focus-width: 20px;
-  --checkbox-focus-height: 20px;
-  --checkbox-focus-left: 2px;
-  --checkbox-focus-top: 2px;
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-checkbox-background-standard-default: var(--color-background-none);
+  --component-checkbox-background-standard-hover: var(--color-background-none);
+  --component-checkbox-background-selected-default: var(--scania-color-grey-50);
+  --component-checkbox-background-selected-hover: var(--scania-color-grey-50);
+  --component-checkbox-background-indeterminate-default: var(--scania-color-grey-50);
+  --component-checkbox-background-indeterminate-hover: var(--scania-color-grey-50);
+  --component-checkbox-border-standard-default: var(--color-border-strong);
+  --component-checkbox-border-standard-hover: var(--color-border-strong);
+  --component-checkbox-border-selected-default: var(--color-border-none);
+  --component-checkbox-border-selected-hover: var(--color-border-none);
+  --component-checkbox-border-indeterminate-default: var(--color-border-none);
+  --component-checkbox-border-indeterminate-hover: var(--color-border-none);
+  --component-checkbox-border-indicator-default: var(--color-border-none);
+  --component-checkbox-border-indicator-hover: var(--color-border-subtle);
+  --component-checkbox-border-radius-default: var(--scania-unit-2);
+  --component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-opacity-disabled: var(--scania-opacity-25);
+  --component-checkbox-text-default: var(--color-text-strong);
+  --component-checkbox-text-hover: var(--color-text-strong);
 }
 
-.traton .tl-checkbox {
-  --checkbox-focus-width: 22px;
-  --checkbox-focus-height: 22px;
-  --checkbox-focus-left: 1px;
-  --checkbox-focus-top: 1px;
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-checkbox-background-standard-default: var(--color-background-none);
+  --component-checkbox-background-standard-hover: var(--color-background-none);
+  --component-checkbox-background-selected-default: var(--traton-color-base-white);
+  --component-checkbox-background-selected-hover: var(--traton-color-base-white);
+  --component-checkbox-background-indeterminate-default: var(--traton-color-base-white);
+  --component-checkbox-background-indeterminate-hover: var(--traton-color-base-white);
+  --component-checkbox-border-standard-default: var(--color-border-strong);
+  --component-checkbox-border-standard-hover: var(--color-border-strong);
+  --component-checkbox-border-selected-default: var(--color-border-none);
+  --component-checkbox-border-selected-hover: var(--color-border-none);
+  --component-checkbox-border-indeterminate-default: var(--color-border-none);
+  --component-checkbox-border-indeterminate-hover: var(--color-border-none);
+  --component-checkbox-border-indicator-default: var(--color-border-none);
+  --component-checkbox-border-indicator-hover: var(--color-border-subtle);
+  --component-checkbox-border-radius-default: var(--traton-unit-2);
+  --component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
+  --component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
+  --component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
+  --component-checkbox-opacity-disabled: var(--traton-opacity-25);
+  --component-checkbox-text-default: var(--color-text-strong);
+  --component-checkbox-text-hover: var(--color-text-strong);
+}
+
+.tl-checkbox {
+  --checkbox-text: var(--component-checkbox-text-default);
+  --checkbox-text-hover: var(--component-checkbox-text-hover);
+  --checkbox-background: var(--component-checkbox-background-standard-default);
+  --checkbox-background-hover: var(--component-checkbox-background-standard-hover);
+  --checkbox-background-selected: var(--component-checkbox-background-selected-default);
+  --checkbox-background-selected-hover: var(--component-checkbox-background-selected-hover);
+  --checkbox-background-indeterminate: var(--component-checkbox-background-indeterminate-default);
+  --checkbox-background-indeterminate-hover: var(--component-checkbox-background-indeterminate-hover);
+  --checkbox-border: var(--component-checkbox-border-standard-default);
+  --checkbox-border-hover: var(--component-checkbox-border-standard-hover);
+  --checkbox-border-selected: var(--component-checkbox-border-selected-default);
+  --checkbox-border-selected-hover: var(--component-checkbox-border-selected-hover);
+  --checkbox-border-indeterminate: var(--component-checkbox-border-indeterminate-default);
+  --checkbox-border-indeterminate-hover: var(--component-checkbox-border-indeterminate-hover);
+  --checkbox-indicator: var(--component-checkbox-border-indicator-default);
+  --checkbox-indicator-hover: var(--component-checkbox-border-indicator-hover);
+  --checkbox-icon-selected: var(--component-checkbox-icon-selected-default);
+  --checkbox-icon-selected-hover: var(--component-checkbox-icon-selected-hover);
+  --checkbox-icon-indeterminate: var(--component-checkbox-icon-indeterminate-default);
+  --checkbox-icon-indeterminate-hover: var(--component-checkbox-icon-indeterminate-hover);
+  --checkbox-border-radius: calc(var(--component-checkbox-border-radius-default) * 1px);
+  --checkbox-focus-ring-radius: calc(var(--component-checkbox-focus-ring-radius-default) * 1px);
+  --checkbox-opacity-disabled: calc(var(--component-checkbox-opacity-disabled) / 100);
+  --checkbox-icon-mask: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --checkbox-icon-mask-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23000'/></svg>");
 }
 
 .tl-checkbox {
@@ -53,7 +164,7 @@
   text-transform: var(--detail-02-text-transform);
   display: flex;
   align-items: center;
-  color: var(--checkbox-label);
+  color: var(--checkbox-text);
 }
 .tl-checkbox:has(:disabled) {
   cursor: not-allowed;
@@ -64,7 +175,6 @@
   outline: none;
   margin: 0;
   border: 0;
-  border-radius: 2px;
   width: 24px;
   height: 24px;
   position: relative;
@@ -76,90 +186,76 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-}
-.tl-checkbox__input::before {
-  width: 20px;
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  border-radius: 4px;
-}
-.tl-checkbox__input::after {
-  border: 1px solid var(--checkbox-border);
-  background-color: var(--checkbox-fill);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
-  border-radius: 2px;
 }
-.tl-checkbox__input:not(:disabled):hover::before {
-  background-color: var(--checkbox-border-hover);
+.tl-checkbox__input::before {
+  border: 1px solid var(--checkbox-border);
+  background-color: var(--checkbox-background);
+  border-radius: var(--checkbox-border-radius);
+  box-shadow: 0 0 0 2px var(--checkbox-indicator);
+  transition: box-shadow 0.2s ease-in-out;
 }
-.tl-checkbox__input:focus-visible::before {
-  background-color: var(--checkbox-border-focus);
-  transition: opacity 0.2s ease-in-out;
-  width: var(--checkbox-focus-width);
-  height: var(--checkbox-focus-height);
-  left: var(--checkbox-focus-left);
-  top: var(--checkbox-focus-top);
-}
-.tl-checkbox__input:hover:focus-visible::before {
-  width: 20px;
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  background-color: var(--checkbox-border-hover);
+.tl-checkbox__input::after {
+  background-color: var(--checkbox-icon-selected);
+  mask: var(--checkbox-icon-mask) no-repeat center;
+  -webkit-mask: var(--checkbox-icon-mask) no-repeat center;
+  opacity: 0;
+  z-index: 1;
 }
-.tl-checkbox__input:disabled {
-  cursor: not-allowed;
+.tl-checkbox__input:not(:disabled):hover::before {
+  border-color: var(--checkbox-border-hover);
+  background-color: var(--checkbox-background-hover);
+  box-shadow: 0 0 0 2px var(--checkbox-indicator-hover);
 }
-.tl-checkbox__input:disabled::after {
-  border-color: var(--checkbox-border-disabled);
-  background-color: var(--checkbox-fill-disabled);
+.tl-checkbox__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(--checkbox-focus-ring-radius);
 }
-.tl-checkbox__input:disabled:hover::before {
-  display: none;
+.tl-checkbox__input:checked::before {
+  border-color: var(--checkbox-border-selected);
+  background-color: var(--checkbox-background-selected);
 }
 .tl-checkbox__input:checked::after {
-  background-image: var(--checkbox-background-img);
-  background-color: var(--checkbox-border);
-  background-repeat: no-repeat;
-  background-position: center;
-  border-color: var(--checkbox-border);
+  background-color: var(--checkbox-icon-selected);
+  opacity: 1;
 }
-.tl-checkbox__input:checked:not(:disabled):hover::after {
-  border-color: var(--checkbox-border-hover);
+.tl-checkbox__input:checked:not(:disabled):hover::before {
+  border-color: var(--checkbox-border-selected-hover);
+  background-color: var(--checkbox-background-selected-hover);
 }
-.tl-checkbox__input:checked:disabled::after {
-  background-image: var(--checkbox-background-img-disabled);
-  background-color: var(--checkbox-fill-disabled);
-  border-color: var(--checkbox-border-disabled);
+.tl-checkbox__input:checked:not(:disabled):hover::after {
+  background-color: var(--checkbox-icon-selected-hover);
 }
-.tl-checkbox__input:checked:focus-visible::before {
-  background-color: var(--checkbox-border-focus);
+.tl-checkbox__input--indeterminate::before {
+  border-color: var(--checkbox-border-indeterminate);
+  background-color: var(--checkbox-background-indeterminate);
 }
 .tl-checkbox__input--indeterminate::after {
-  background-image: var(--checkbox-background-img-indeterminate);
-  background-color: var(--checkbox-border);
-  background-repeat: no-repeat;
-  background-position: center;
-  border-color: var(--checkbox-border);
+  background-color: var(--checkbox-icon-indeterminate);
+  mask: var(--checkbox-icon-mask-indeterminate) no-repeat center;
+  -webkit-mask: var(--checkbox-icon-mask-indeterminate) no-repeat center;
+  opacity: 1;
 }
-.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
-  border-color: var(--checkbox-border-hover);
+.tl-checkbox__input--indeterminate:not(:disabled):hover::before {
+  border-color: var(--checkbox-border-indeterminate-hover);
+  background-color: var(--checkbox-background-indeterminate-hover);
 }
-.tl-checkbox__input--indeterminate:disabled::after {
-  background-image: var(--checkbox-background-img-indeterminate-disabled);
-  background-color: var(--checkbox-fill-disabled);
-  border-color: var(--checkbox-border-disabled);
+.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
+  background-color: var(--checkbox-icon-indeterminate-hover);
 }
-.tl-checkbox__input--indeterminate:focus-visible::before {
-  background-color: var(--checkbox-border-focus);
+.tl-checkbox__input:disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-opacity-disabled);
 }
 
 .tl-checkbox__label {
-  color: var(--checkbox-label);
+  color: var(--checkbox-text);
   padding-left: var(--tds-spacing-element-4);
   padding-top: var(--tds-spacing-element-4);
   padding-bottom: var(--tds-spacing-element-4);
@@ -168,26 +264,10 @@
   position: relative;
   cursor: pointer;
 }
+.tl-checkbox__input:not(:disabled):hover + .tl-checkbox__label {
+  color: var(--checkbox-text-hover);
+}
 .tl-checkbox:has(:disabled) .tl-checkbox__label {
-  color: var(--checkbox-label-disabled);
+  opacity: var(--checkbox-opacity-disabled);
   cursor: not-allowed;
-}
-
-.tl-checkbox__input--indeterminate::after {
-  background-image: var(--checkbox-background-img-indeterminate);
-  background-color: var(--checkbox-border);
-  background-repeat: no-repeat;
-  background-position: center;
-  border-color: var(--checkbox-border);
-}
-.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
-  border-color: var(--checkbox-border-hover);
-}
-.tl-checkbox__input--indeterminate:disabled::after {
-  background-image: var(--checkbox-background-img-indeterminate-disabled);
-  background-color: var(--checkbox-fill-disabled);
-  border-color: var(--checkbox-border-disabled);
-}
-.tl-checkbox__input--indeterminate:focus-visible::before {
-  background-color: var(--checkbox-border-focus);
 }