@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.1

package/dist/global.css

@@ -1308,6 +1308,72 @@ html {
   --tl-scrollbar-thumb-color: #d9edf054;
 }
 
+/**
+ * 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--focus-ring-radius-none: var(--scania-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--scania-unit-9999);
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component--focus-ring-radius-none: var(--traton-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--traton-unit-9999);
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component--focus-ring-radius-none: var(--scania-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--scania-unit-9999);
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--scania-color-base-white);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component--focus-ring-radius-none: var(--traton-unit-0);
+  --component--focus-ring-radius-extra-small: 1;
+  --component--focus-ring-radius-small: 2;
+  --component--focus-ring-radius-medium: 3;
+  --component--focus-ring-radius-large: 4;
+  --component--focus-ring-radius-extra-large: 5;
+  --component--focus-ring-radius-full: var(--traton-unit-9999);
+  --component--focus-ring-color-strong: var(--color-system-info-default);
+  --component--focus-ring-color-discrete: var(--traton-color-base-white);
+}
+
 body {
   font-family: var(--body-01-font-family);
   font-size: 14px;

package/dist/scania-variables.css

@@ -19,11 +19,13 @@
   --scania-color-transparent-invisible-dark: #0000;
   --scania-color-transparent-scrim-light: #0006;
   --scania-color-transparent-scrim-dark: #0009;
+  --scania-color-transparent-shadow-10: #00000003;
   --scania-color-transparent-shadow-100: #0000001a;
   --scania-color-transparent-shadow-150: #00000026;
   --scania-color-transparent-shadow-200: #0003;
   --scania-color-transparent-shadow-250: #00000040;
   --scania-color-transparent-shadow-350: #00000059;
+  --scania-color-transparent-shadow-00: #0000;
   --scania-color-blue-50: #d8dde5;
   --scania-color-blue-100: #bacde8;
   --scania-color-blue-200: #87afe8;
@@ -152,11 +154,15 @@
   --color-border-inverse-disabled: var(--scania-color-transparent-inverse-500);
   --color-border-inverse-discrete: var(--scania-color-transparent-inverse-600);
   --color-border-inverse-none: var(--scania-color-transparent-invisible-dark);
+  --color-icon-base: var(--traton-color-base-black);
+  --color-icon-brand: var(--traton-color-blue-950);
   --color-icon-defined: var(--scania-color-transparent-650);
   --color-icon-soft: var(--scania-color-transparent-500);
   --color-icon-subtle: var(--scania-color-transparent-350);
   --color-icon-disabled: var(--scania-color-transparent-250);
   --color-icon-discrete: var(--scania-color-transparent-200);
+  --color-icon-inverse-base: var(--traton-color-base-black);
+  --color-icon-inverse-brand: var(--traton-color-blue-950);
   --color-icon-inverse-defined: var(--scania-color-transparent-inverse-200);
   --color-icon-inverse-soft: var(--scania-color-transparent-inverse-300);
   --color-icon-inverse-subtle: var(--scania-color-transparent-inverse-400);
@@ -182,24 +188,26 @@
   --color-system-danger-default: var(--scania-color-red-400);
   --color-system-danger-subtle: var(--scania-color-red-300);
   --color-system-danger-discrete: var(--scania-color-red-50);
+  --color-text-brand: var(--scania-color-blue-800);
   --color-text-defined: var(--scania-color-transparent-650);
   --color-text-soft: var(--scania-color-transparent-500);
   --color-text-subtle: var(--scania-color-transparent-350);
   --color-text-disabled: var(--scania-color-transparent-250);
-  --color-text-brand: var(--scania-color-blue-800);
+  --color-text-discrete: var(--scania-color-transparent-200);
   --color-text-inverse-defined: var(--scania-color-transparent-inverse-200);
   --color-text-inverse-soft: var(--scania-color-transparent-inverse-300);
   --color-text-inverse-subtle: var(--scania-color-transparent-inverse-400);
   --color-text-inverse-disabled: var(--scania-color-transparent-inverse-500);
+  --color-text-inverse-discrete: var(--scania-color-transparent-inverse-200);
   --color-border-strong: var(--scania-color-transparent-950);
   --color-border-inverse-strong: var(--scania-color-transparent-inverse-50);
   --color-icon-strong: var(--scania-color-transparent-950);
   --color-icon-inverse-strong: var(--scania-color-transparent-inverse-50);
-  --color-text-strong: var(--scania-color-transparent-950);
   --color-text-base: var(--scania-color-base-black);
-  --color-text-inverse-strong: var(--scania-color-transparent-inverse-50);
-  --color-text-inverse-brand: var(--scania-color-base-white);
+  --color-text-strong: var(--scania-color-transparent-950);
   --color-text-inverse-base: var(--scania-color-base-white);
+  --color-text-inverse-brand: var(--scania-color-base-white);
+  --color-text-inverse-strong: var(--scania-color-transparent-inverse-50);
 }
 
 /**
@@ -235,11 +243,15 @@
   --color-border-inverse-disabled: var(--scania-color-transparent-250);
   --color-border-inverse-discrete: var(--scania-color-transparent-200);
   --color-border-inverse-none: var(--scania-color-transparent-invisible-light);
+  --color-icon-base: var(--traton-color-base-white);
+  --color-icon-brand: var(--traton-color-base-white);
   --color-icon-defined: var(--scania-color-transparent-inverse-200);
   --color-icon-soft: var(--scania-color-transparent-inverse-300);
   --color-icon-subtle: var(--scania-color-transparent-inverse-400);
   --color-icon-disabled: var(--scania-color-transparent-inverse-500);
   --color-icon-discrete: var(--scania-color-transparent-inverse-600);
+  --color-icon-inverse-base: var(--traton-color-base-white);
+  --color-icon-inverse-brand: var(--traton-color-base-white);
   --color-icon-inverse-defined: var(--scania-color-transparent-650);
   --color-icon-inverse-soft: var(--scania-color-transparent-500);
   --color-icon-inverse-subtle: var(--scania-color-transparent-350);
@@ -269,20 +281,22 @@
   --color-text-soft: var(--scania-color-transparent-inverse-300);
   --color-text-subtle: var(--scania-color-transparent-inverse-400);
   --color-text-disabled: var(--scania-color-transparent-inverse-500);
+  --color-text-discrete: var(--scania-color-transparent-inverse-200);
+  --color-text-inverse-brand: var(--scania-color-blue-800);
   --color-text-inverse-defined: var(--scania-color-transparent-650);
   --color-text-inverse-soft: var(--scania-color-transparent-500);
   --color-text-inverse-subtle: var(--scania-color-transparent-350);
   --color-text-inverse-disabled: var(--scania-color-transparent-250);
-  --color-text-inverse-brand: var(--scania-color-blue-800);
+  --color-text-inverse-discrete: var(--scania-color-transparent-200);
   --color-border-strong: var(--scania-color-transparent-inverse-50);
   --color-border-inverse-strong: var(--scania-color-transparent-950);
   --color-icon-strong: var(--scania-color-transparent-inverse-50);
   --color-icon-inverse-strong: var(--scania-color-transparent-950);
-  --color-text-strong: var(--scania-color-transparent-inverse-50);
-  --color-text-brand: var(--scania-color-base-white);
   --color-text-base: var(--scania-color-base-white);
-  --color-text-inverse-strong: var(--scania-color-transparent-950);
+  --color-text-brand: var(--scania-color-base-white);
+  --color-text-strong: var(--scania-color-transparent-inverse-50);
   --color-text-inverse-base: var(--scania-color-base-black);
+  --color-text-inverse-strong: var(--scania-color-transparent-950);
 }
 
 /* Scania dimension tokens */
@@ -867,213 +881,248 @@ html {
   --tds-detail-ex-07-ls: 0;
 }
 
+/* Typography Usage mixins */
 .tds-headline-01 {
-  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 40px;
-  line-height: 1;
-  letter-spacing: 0;
+  font-family: var(--headline-01-font-family);
+  font-size: var(--headline-01-font-size);
+  line-height: var(--headline-01-line-height);
+  font-weight: var(--headline-01-font-weight);
+  letter-spacing: var(--headline-01-letter-spacing);
+  text-transform: var(--headline-01-text-transform);
 }
 
 .tds-headline-02 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 32px;
-  line-height: 1;
-  letter-spacing: -0.04em;
+  font-family: var(--headline-02-font-family);
+  font-size: var(--headline-02-font-size);
+  line-height: var(--headline-02-line-height);
+  font-weight: var(--headline-02-font-weight);
+  letter-spacing: var(--headline-02-letter-spacing);
+  text-transform: var(--headline-02-text-transform);
 }
 
 .tds-headline-03 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: -0.03em;
+  font-family: var(--headline-03-font-family);
+  font-size: var(--headline-03-font-size);
+  line-height: var(--headline-03-line-height);
+  font-weight: var(--headline-03-font-weight);
+  letter-spacing: var(--headline-03-letter-spacing);
+  text-transform: var(--headline-03-text-transform);
 }
 
 .tds-headline-04 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 20px;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
+  font-family: var(--headline-04-font-family);
+  font-size: var(--headline-04-font-size);
+  line-height: var(--headline-04-line-height);
+  font-weight: var(--headline-04-font-weight);
+  letter-spacing: var(--headline-04-letter-spacing);
+  text-transform: var(--headline-04-text-transform);
 }
 
 .tds-headline-05 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 1.5;
-  letter-spacing: -0.02em;
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
 }
 
 .tds-headline-06 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1.14;
-  letter-spacing: -0.02em;
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
 }
 
 .tds-headline-07 {
-  font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1.14;
-  letter-spacing: -0.01em;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
 }
 
 .tds-paragraph-01 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-size: 24px;
-  line-height: 1.33;
-  letter-spacing: -0.03em;
+  font-family: var(--paragraph-01-font-family);
+  font-size: var(--paragraph-01-font-size);
+  line-height: var(--paragraph-01-line-height);
+  font-weight: var(--paragraph-01-font-weight);
+  letter-spacing: var(--paragraph-01-letter-spacing);
+  text-transform: var(--paragraph-01-text-transform);
 }
 
 .tds-paragraph-02 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-size: 20px;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
+  font-family: var(--paragraph-02-font-family);
+  font-size: var(--paragraph-02-font-size);
+  line-height: var(--paragraph-02-line-height);
+  font-weight: var(--paragraph-02-font-weight);
+  letter-spacing: var(--paragraph-02-letter-spacing);
+  text-transform: var(--paragraph-02-text-transform);
 }
 
 .tds-body-01 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  letter-spacing: -0.02em;
+  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);
 }
 
 .tds-body-02 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.43;
-  letter-spacing: -0.01em;
+  font-family: var(--body-02-font-family);
+  font-size: var(--body-02-font-size);
+  line-height: var(--body-02-line-height);
+  font-weight: var(--body-02-font-weight);
+  letter-spacing: var(--body-02-letter-spacing);
+  text-transform: var(--body-02-text-transform);
 }
 
 .tds-detail-01 {
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  letter-spacing: -0.01em;
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
 }
 
 .tds-detail-02 {
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.14;
-  letter-spacing: -0.01em;
+  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);
 }
 
 .tds-detail-03 {
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.43;
-  letter-spacing: -0.01em;
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
 }
 
 .tds-detail-04 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 12px;
-  line-height: 1.33;
-  letter-spacing: 0.08em;
+  font-family: var(--detail-04-font-family);
+  font-size: var(--detail-04-font-size);
+  line-height: var(--detail-04-line-height);
+  font-weight: var(--detail-04-font-weight);
+  letter-spacing: var(--detail-04-letter-spacing);
+  text-transform: var(--detail-04-text-transform);
 }
 
 .tds-detail-05 {
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-size: 12px;
-  line-height: 1.33;
-  letter-spacing: 0;
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
 
 .tds-detail-06 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 10px;
-  line-height: 1.6;
-  letter-spacing: 0.08em;
+  font-family: var(--detail-06-font-family);
+  font-size: var(--detail-06-font-size);
+  line-height: var(--detail-06-line-height);
+  font-weight: var(--detail-06-font-weight);
+  letter-spacing: var(--detail-06-letter-spacing);
+  text-transform: var(--detail-06-text-transform);
 }
 
 .tds-detail-07 {
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-size: 10px;
-  line-height: 0.8;
-  letter-spacing: 0;
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
 }
 
 .tds-expressive-headline-01 {
-  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 80px;
-  line-height: 1;
-  letter-spacing: 0;
+  font-family: var(--expressive-headline-01-font-family);
+  font-size: var(--expressive-headline-01-font-size);
+  line-height: var(--expressive-headline-01-line-height);
+  font-weight: var(--expressive-headline-01-font-weight);
+  letter-spacing: var(--expressive-headline-01-letter-spacing);
+  text-transform: var(--expressive-headline-01-text-transform);
 }
 
 .tds-expressive-headline-02 {
-  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 56px;
-  line-height: 1;
-  letter-spacing: 0;
+  font-family: var(--expressive-headline-02-font-family);
+  font-size: var(--expressive-headline-02-font-size);
+  line-height: var(--expressive-headline-02-line-height);
+  font-weight: var(--expressive-headline-02-font-weight);
+  letter-spacing: var(--expressive-headline-02-letter-spacing);
+  text-transform: var(--expressive-headline-02-text-transform);
 }
 
 h1 {
-  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 40px;
-  line-height: 1;
-  letter-spacing: 0;
+  font-family: var(--headline-01-font-family);
+  font-size: var(--headline-01-font-size);
+  line-height: var(--headline-01-line-height);
+  font-weight: var(--headline-01-font-weight);
+  letter-spacing: var(--headline-01-letter-spacing);
+  text-transform: var(--headline-01-text-transform);
 }
 
 h2 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 32px;
-  line-height: 1;
-  letter-spacing: -0.04em;
+  font-family: var(--headline-02-font-family);
+  font-size: var(--headline-02-font-size);
+  line-height: var(--headline-02-line-height);
+  font-weight: var(--headline-02-font-weight);
+  letter-spacing: var(--headline-02-letter-spacing);
+  text-transform: var(--headline-02-text-transform);
 }
 
 h3 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: -0.03em;
+  font-family: var(--headline-03-font-family);
+  font-size: var(--headline-03-font-size);
+  line-height: var(--headline-03-line-height);
+  font-weight: var(--headline-03-font-weight);
+  letter-spacing: var(--headline-03-letter-spacing);
+  text-transform: var(--headline-03-text-transform);
 }
 
 h4 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 20px;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
+  font-family: var(--headline-04-font-family);
+  font-size: var(--headline-04-font-size);
+  line-height: var(--headline-04-line-height);
+  font-weight: var(--headline-04-font-weight);
+  letter-spacing: var(--headline-04-letter-spacing);
+  text-transform: var(--headline-04-text-transform);
 }
 
 h5 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 1.5;
-  letter-spacing: -0.02em;
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
 }
 
 h6 {
-  font-family: "Scania Sans", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1.14;
-  letter-spacing: -0.02em;
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
 }
 
 .h7 {
-  font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1.14;
-  letter-spacing: -0.01em;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
 }
 
 /* Scania primitive icon tokens */

package/dist/tl-accordion.css

@@ -63,8 +63,8 @@
   margin-bottom: -1px;
   border-bottom: 1px solid var(--accordion-border);
 }
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
-.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
   background-color: var(--accordion-background-hover);
 }
 .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -75,8 +75,10 @@
   /* Focus state  */
 }
 .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
+  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(--accordion-background-focus);
 }
 .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {

package/dist/tl-banner.css

@@ -87,8 +87,8 @@
   width: 20px;
 }
 .tl-banner__close:focus-visible {
-  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-breadcrumbs.css

@@ -1,13 +1,59 @@
 @charset "UTF-8";
+/**
+ * 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-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-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-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-breadcrumbs-text-link-default: var(--color-text-strong);
+  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
+  --component-breadcrumbs-text-current-default: var(--color-text-soft);
+  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
+}
+
 .tl-breadcrumbs {
-  --breadcrumb-label: var(--color-foreground-text-strong);
-  --breadcrumb-hover: var(--color-foreground-text-strong);
-  --breadcrumb-current: var(--color-foreground-text-subtle);
-  --breadcrumb-separator-color: var(--color-foreground-text-strong);
+  --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
+  --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
+  --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
+  --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
   --breadcrumb-separator-margin: 4px;
   --breadcrumb-separator-width: 4px;
   --breadcrumb-separator-height: 8px;
-  --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
+  --breadcrumb-focus-outline-color: var(--color-system-info-default);
   --breadcrumb-focus-outline-width: 2px;
 }
 
@@ -62,7 +108,10 @@
   text-decoration: underline;
 }
 .tl-breadcrumbs a:focus-visible {
-  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+  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-breadcrumbs a[aria-current=page] {
   pointer-events: none;