@scania/tegel-lite 0.1.0 → 1.0.1

package/dist/scania-variables.css

@@ -1,31 +1,32 @@
+@charset "UTF-8";
 /* Scania primitive tokens */
 /**
  * Do not edit directly, this file was auto-generated.
  */
 :root {
-  --scania-color-transparent-200: rgba(48, 60, 97, 0.17);
-  --scania-color-transparent-250: rgba(58, 81, 124, 0.35);
-  --scania-color-transparent-350: rgba(7, 39, 88, 0.5);
-  --scania-color-transparent-500: rgba(10, 40, 80, 0.64);
-  --scania-color-transparent-650: rgba(4, 21, 48, 0.72);
-  --scania-color-transparent-750: rgba(13, 23, 39, 0.86);
-  --scania-color-transparent-950: #0e1013;
-  --scania-color-transparent-inverse-50: #f6f7f9;
-  --scania-color-transparent-inverse-200: rgba(233, 240, 252, 0.88);
-  --scania-color-transparent-inverse-250: rgba(219, 230, 248, 0.8);
-  --scania-color-transparent-inverse-300: rgba(195, 216, 247, 0.72);
-  --scania-color-transparent-inverse-400: rgba(170, 201, 246, 0.6);
-  --scania-color-transparent-inverse-500: rgba(174, 208, 255, 0.49);
-  --scania-color-transparent-inverse-600: rgba(164, 199, 245, 0.4);
-  --scania-color-transparent-scrim-light: rgba(0, 0, 0, 0.4);
-  --scania-color-transparent-scrim-dark: rgba(0, 0, 0, 0.6);
-  --scania-color-transparent-invisible-light: rgba(255, 255, 255, 0);
-  --scania-color-transparent-invisible-dark: rgba(0, 0, 0, 0);
-  --scania-color-transparent-shadow-100: rgba(0, 0, 0, 0.1);
-  --scania-color-transparent-shadow-150: rgba(0, 0, 0, 0.15);
-  --scania-color-transparent-shadow-200: rgba(0, 0, 0, 0.2);
-  --scania-color-transparent-shadow-250: rgba(0, 0, 0, 0.25);
-  --scania-color-transparent-shadow-350: rgba(0, 0, 0, 0.35);
+  --scania-color-transparent-200: #303c612b;
+  --scania-color-transparent-250: #3a517c59;
+  --scania-color-transparent-350: #07275880;
+  --scania-color-transparent-500: #0a2850a3;
+  --scania-color-transparent-650: #041530b8;
+  --scania-color-transparent-750: #0d1727db;
+  --scania-color-transparent-inverse-200: #e9f0fce0;
+  --scania-color-transparent-inverse-250: #dbe6f8cc;
+  --scania-color-transparent-inverse-300: #c3d8f7b8;
+  --scania-color-transparent-inverse-400: #aac9f699;
+  --scania-color-transparent-inverse-500: #aed0ff7d;
+  --scania-color-transparent-inverse-600: #a4c7f566;
+  --scania-color-transparent-invisible-light: #fff0;
+  --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;
@@ -36,16 +37,6 @@
   --scania-color-blue-700: #0f3263;
   --scania-color-blue-800: #041e42;
   --scania-color-blue-900: #001533;
-  --scania-color-red-50: #ffdfe3;
-  --scania-color-red-100: #ffb9b8;
-  --scania-color-red-200: #fc8a88;
-  --scania-color-red-300: #ea4851;
-  --scania-color-red-400: #d1001b;
-  --scania-color-red-500: #b20018;
-  --scania-color-red-600: #8a0012;
-  --scania-color-red-700: #6c0011;
-  --scania-color-red-800: #480008;
-  --scania-color-red-900: #350004;
   --scania-color-green-50: #d3eee7;
   --scania-color-green-100: #9bd9c2;
   --scania-color-green-200: #65bda5;
@@ -56,16 +47,6 @@
   --scania-color-green-700: #0a382e;
   --scania-color-green-800: #00251b;
   --scania-color-green-900: #001a12;
-  --scania-color-yellow-50: #f9eec3;
-  --scania-color-yellow-100: #f8e596;
-  --scania-color-yellow-200: #f4d65d;
-  --scania-color-yellow-300: #f1c21b;
-  --scania-color-yellow-400: #eaad06;
-  --scania-color-yellow-500: #b87c14;
-  --scania-color-yellow-600: #975717;
-  --scania-color-yellow-700: #6b3b10;
-  --scania-color-yellow-800: #4d260a;
-  --scania-color-yellow-900: #361b07;
   --scania-color-grey-50: #f6f7f9;
   --scania-color-grey-100: #edeff3;
   --scania-color-grey-150: #e0e5eb;
@@ -85,29 +66,58 @@
   --scania-color-grey-950: #0e1013;
   --scania-color-grey-1000: #000;
   --scania-color-grey-00: #fff;
-  --scania-font-family-display: scania sans headline;
+  --scania-color-red-50: #ffdfe3;
+  --scania-color-red-100: #ffb9b8;
+  --scania-color-red-200: #fc8a88;
+  --scania-color-red-300: #ea4851;
+  --scania-color-red-400: #d1001b;
+  --scania-color-red-500: #b20018;
+  --scania-color-red-600: #8a0012;
+  --scania-color-red-700: #6c0011;
+  --scania-color-red-800: #480008;
+  --scania-color-red-900: #350004;
+  --scania-color-yellow-50: #f9eec3;
+  --scania-color-yellow-100: #f8e596;
+  --scania-color-yellow-200: #f4d65d;
+  --scania-color-yellow-300: #f1c21b;
+  --scania-color-yellow-400: #eaad06;
+  --scania-color-yellow-500: #b87c14;
+  --scania-color-yellow-600: #975717;
+  --scania-color-yellow-700: #6b3b10;
+  --scania-color-yellow-800: #4d260a;
+  --scania-color-yellow-900: #361b07;
   --scania-font-family-default: scania sans;
+  --scania-font-family-display: scania sans headline;
   --scania-font-family-semi-condensed: scania sans semi condensed;
-  --scania-font-weight-regular: 400;
   --scania-font-weight-bold: 700;
+  --scania-font-weight-regular: 400;
+  --scania-opacity-0: 0;
+  --scania-opacity-25: 25;
+  --scania-opacity-50: 50;
+  --scania-opacity-75: 75;
+  --scania-opacity-100: 100;
   --scania-unit-0: 0;
-  --scania-unit-1: 1px;
-  --scania-unit-2: 2px;
-  --scania-unit-4: 4px;
-  --scania-unit-8: 8px;
-  --scania-unit-12: 12px;
-  --scania-unit-16: 16px;
-  --scania-unit-20: 20px;
-  --scania-unit-24: 24px;
-  --scania-unit-32: 32px;
-  --scania-unit-40: 40px;
-  --scania-unit-48: 48px;
-  --scania-unit-56: 56px;
-  --scania-unit-64: 64px;
-  --scania-unit-80: 80px;
-  --scania-unit-96: 96px;
-  --scania-unit-120: 120px;
-  --scania-unit-9999: 9999px;
+  --scania-unit-1: 1;
+  --scania-unit-2: 2;
+  --scania-unit-4: 4;
+  --scania-unit-8: 8;
+  --scania-unit-12: 12;
+  --scania-unit-16: 16;
+  --scania-unit-20: 20;
+  --scania-unit-24: 24;
+  --scania-unit-32: 32;
+  --scania-unit-40: 40;
+  --scania-unit-48: 48;
+  --scania-unit-56: 56;
+  --scania-unit-64: 64;
+  --scania-unit-80: 80;
+  --scania-unit-96: 96;
+  --scania-unit-120: 120;
+  --scania-unit-9999: 9999;
+  --scania-color-base-black: var(--scania-color-grey-1000);
+  --scania-color-base-white: var(--scania-color-grey-00);
+  --scania-color-transparent-950: var(--scania-color-grey-950);
+  --scania-color-transparent-inverse-50: var(--scania-color-grey-50);
 }
 
 /* Scania color tokens */
@@ -116,264 +126,178 @@
  */
 :root,
 .tds-mode-light,
-.scania .tds-mode-light {
+.tl-mode-light,
+.scania .tds-mode-light,
+.scania .tl-mode-light {
   --color-background-base: var(--scania-color-grey-00);
-  --color-background-accent-primary-default: var(--scania-color-blue-600);
-  --color-background-accent-primary-disabled: var(--scania-color-grey-50);
-  --color-background-accent-primary-hover: var(--scania-color-blue-500);
-  --color-background-accent-primary-pressed: var(--scania-color-blue-700);
-  --color-background-accent-primary-focus: var(--scania-color-blue-400);
-  --color-background-accent-primary-inverse-default: var(--scania-color-blue-400);
-  --color-background-accent-primary-inverse-hover: var(--scania-color-blue-500);
-  --color-background-accent-primary-inverse-pressed: var(--scania-color-blue-300);
-  --color-background-accent-primary-inverse-focus: var(--scania-color-blue-600);
-  --color-background-accent-primary-inverse-disabled: var(--scania-color-grey-850);
-  --color-background-accent-danger-default: var(--scania-color-red-400);
-  --color-background-accent-danger-hover: var(--scania-color-red-600);
-  --color-background-accent-danger-pressed: var(--scania-color-red-700);
-  --color-background-accent-danger-focus: var(--scania-color-red-400);
-  --color-background-accent-danger-disabled: var(--scania-color-grey-50);
   --color-background-layer-01: var(--scania-color-grey-50);
   --color-background-layer-02: var(--scania-color-grey-00);
   --color-background-layer-03: var(--scania-color-grey-50);
   --color-background-overlay: var(--scania-color-transparent-scrim-light);
+  --color-background-top: var(--scania-color-grey-00);
+  --color-background-none: var(--scania-color-transparent-invisible-light);
   --color-background-inverse-base: var(--scania-color-grey-950);
   --color-background-inverse-layer-01: var(--scania-color-grey-900);
   --color-background-inverse-layer-02: var(--scania-color-grey-850);
   --color-background-inverse-layer-03: var(--scania-color-grey-800);
-  --color-background-inverse-top: var(--scania-color-grey-900);
   --color-background-inverse-overlay: var(--scania-color-transparent-scrim-light);
-  --color-background-surface-100: var(--scania-color-grey-100);
-  --color-background-surface-200: var(--scania-color-grey-150);
-  --color-background-surface-300: var(--scania-color-grey-200);
-  --color-background-surface-400: var(--scania-color-grey-250);
-  --color-background-surface-500: var(--scania-color-grey-350);
-  --color-background-surface-600: var(--scania-color-grey-600);
-  --color-background-surface-700: var(--scania-color-grey-700);
-  --color-background-surface-800: var(--scania-color-grey-750);
-  --color-background-surface-900: var(--scania-color-grey-800);
-  --color-background-surface-1000: var(--scania-color-grey-850);
-  --color-background-top: var(--scania-color-grey-00);
-  --color-system-warning-default: var(--scania-color-yellow-500);
-  --color-system-warning-discrete: var(--scania-color-yellow-50);
-  --color-system-warning-strong: var(--scania-color-yellow-900);
-  --color-system-warning-defined: var(--scania-color-yellow-600);
-  --color-system-warning-subtle: var(--scania-color-yellow-400);
-  --color-system-success-default: var(--scania-color-green-300);
-  --color-system-success-discrete: var(--scania-color-green-50);
-  --color-system-success-strong: var(--scania-color-green-800);
-  --color-system-success-defined: var(--scania-color-green-500);
-  --color-system-success-subtle: var(--scania-color-green-200);
-  --color-system-info-default: var(--scania-color-blue-400);
-  --color-system-info-discrete: var(--scania-color-blue-50);
+  --color-background-inverse-top: var(--scania-color-grey-900);
+  --color-background-inverse-none: var(--scania-color-transparent-invisible-dark);
+  --color-border-defined: var(--scania-color-transparent-650);
+  --color-border-soft: var(--scania-color-transparent-500);
+  --color-border-subtle: var(--scania-color-transparent-350);
+  --color-border-disabled: var(--scania-color-transparent-250);
+  --color-border-discrete: var(--scania-color-transparent-200);
+  --color-border-none: var(--scania-color-transparent-invisible-light);
+  --color-border-inverse-defined: var(--scania-color-transparent-inverse-200);
+  --color-border-inverse-soft: var(--scania-color-transparent-inverse-300);
+  --color-border-inverse-subtle: var(--scania-color-transparent-inverse-400);
+  --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);
+  --color-icon-inverse-disabled: var(--scania-color-transparent-inverse-500);
+  --color-icon-inverse-discrete: var(--scania-color-transparent-inverse-600);
   --color-system-info-strong: var(--scania-color-blue-800);
   --color-system-info-defined: var(--scania-color-blue-600);
+  --color-system-info-default: var(--scania-color-blue-400);
   --color-system-info-subtle: var(--scania-color-blue-300);
-  --color-system-danger-default: var(--scania-color-red-400);
-  --color-system-danger-discrete: var(--scania-color-red-50);
+  --color-system-info-discrete: var(--scania-color-blue-50);
+  --color-system-success-strong: var(--scania-color-green-800);
+  --color-system-success-defined: var(--scania-color-green-500);
+  --color-system-success-default: var(--scania-color-green-300);
+  --color-system-success-subtle: var(--scania-color-green-200);
+  --color-system-success-discrete: var(--scania-color-green-50);
+  --color-system-warning-strong: var(--scania-color-yellow-900);
+  --color-system-warning-defined: var(--scania-color-yellow-600);
+  --color-system-warning-default: var(--scania-color-yellow-500);
+  --color-system-warning-subtle: var(--scania-color-yellow-400);
+  --color-system-warning-discrete: var(--scania-color-yellow-50);
   --color-system-danger-strong: var(--scania-color-red-800);
   --color-system-danger-defined: var(--scania-color-red-500);
+  --color-system-danger-default: var(--scania-color-red-400);
   --color-system-danger-subtle: var(--scania-color-red-300);
-  --color-foreground-text-accent-default: var(--scania-color-blue-400);
-  --color-foreground-text-accent-brand: var(--scania-color-grey-00);
-  --color-foreground-text-accent-brand-inverse: var(--scania-color-grey-950);
-  --color-foreground-text-accent-visited: var(--scania-color-blue-700);
-  --color-foreground-text-strong: var(--scania-color-transparent-950);
-  --color-foreground-text-defined: var(--scania-color-transparent-650);
-  --color-foreground-text-subtle: var(--scania-color-transparent-350);
-  --color-foreground-text-inverse-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-text-inverse-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-text-inverse-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-text-inverse-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-text-inverse-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-text-inverse-brand: var(--scania-color-grey-00);
-  --color-foreground-text-brand: var(--scania-color-blue-800);
-  --color-foreground-text-disabled: var(--scania-color-transparent-250);
-  --color-foreground-text-soft: var(--scania-color-transparent-500);
-  --color-foreground-border-inverse-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-border-inverse-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-border-inverse-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-border-inverse-discrete: var(--scania-color-transparent-inverse-600);
-  --color-foreground-border-inverse-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-border-inverse-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-border-strong: var(--scania-color-transparent-950);
-  --color-foreground-border-soft: var(--scania-color-transparent-500);
-  --color-foreground-border-subtle: var(--scania-color-transparent-350);
-  --color-foreground-border-discrete: var(--scania-color-transparent-200);
-  --color-foreground-border-accent-link: var(--scania-color-blue-400);
-  --color-foreground-border-accent-focus: var(--scania-color-blue-400);
-  --color-foreground-border-defined: var(--scania-color-transparent-650);
-  --color-foreground-border-disabled: var(--scania-color-transparent-250);
-  --color-foreground-icon-strong: var(--scania-color-transparent-950);
-  --color-foreground-icon-defined: var(--scania-color-transparent-650);
-  --color-foreground-icon-soft: var(--scania-color-transparent-500);
-  --color-foreground-icon-subtle: var(--scania-color-transparent-350);
-  --color-foreground-icon-disabled: var(--scania-color-transparent-250);
-  --color-foreground-icon-discrete: var(--scania-color-transparent-200);
-  --color-foreground-icon-inverse-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-icon-inverse-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-icon-inverse-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-icon-inverse-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-icon-inverse-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-icon-inverse-discrete: var(--scania-color-transparent-inverse-600);
-  --color-foreground-icon-accent-default: var(--scania-color-blue-400);
-  --color-foreground-icon-accent-visited: var(--scania-color-blue-700);
-  --color-foreground-icon-accent-brand: var(--scania-color-grey-00);
-  --color-foreground-icon-accent-brand-inverse: var(--scania-color-grey-950);
-  --color-brand-neutral-white: var(--scania-color-grey-00);
-  --color-brand-neutral-black: var(--scania-color-grey-1000);
-  --color-brand-primary-50: var(--scania-color-blue-50);
-  --color-brand-primary-100: var(--scania-color-blue-100);
-  --color-brand-primary-200: var(--scania-color-blue-200);
-  --color-brand-primary-300: var(--scania-color-blue-300);
-  --color-brand-primary-400: var(--scania-color-blue-400);
-  --color-brand-primary-500: var(--scania-color-blue-500);
-  --color-brand-primary-600: var(--scania-color-blue-600);
-  --color-brand-primary-700: var(--scania-color-blue-700);
-  --color-brand-primary-800: var(--scania-color-blue-800);
-  --color-brand-primary-900: var(--scania-color-blue-900);
-  --color-brand-secondary-50: var(--scania-color-red-50);
-  --color-brand-secondary-100: var(--scania-color-red-100);
-  --color-brand-secondary-200: var(--scania-color-red-200);
-  --color-brand-secondary-300: var(--scania-color-red-300);
-  --color-brand-secondary-400: var(--scania-color-red-400);
-  --color-brand-secondary-500: var(--scania-color-red-500);
-  --color-brand-secondary-600: var(--scania-color-red-600);
-  --color-brand-secondary-700: var(--scania-color-red-700);
-  --color-brand-secondary-800: var(--scania-color-red-800);
-  --color-brand-secondary-900: var(--scania-color-red-900);
+  --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-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-base: var(--scania-color-base-black);
+  --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);
 }
 
 /**
  * Do not edit directly, this file was auto-generated.
  */
 .tds-mode-dark,
-.scania .tds-mode-dark {
+.tl-mode-dark,
+.scania .tds-mode-dark,
+.scania .tl-mode-dark {
   --color-background-base: var(--scania-color-grey-950);
-  --color-background-accent-primary-default: var(--scania-color-blue-400);
-  --color-background-accent-primary-disabled: var(--scania-color-grey-850);
-  --color-background-accent-primary-hover: var(--scania-color-blue-500);
-  --color-background-accent-primary-pressed: var(--scania-color-blue-300);
-  --color-background-accent-primary-focus: var(--scania-color-blue-600);
-  --color-background-accent-primary-inverse-default: var(--scania-color-blue-600);
-  --color-background-accent-primary-inverse-hover: var(--scania-color-blue-500);
-  --color-background-accent-primary-inverse-pressed: var(--scania-color-blue-700);
-  --color-background-accent-primary-inverse-focus: var(--scania-color-blue-400);
-  --color-background-accent-primary-inverse-disabled: var(--scania-color-grey-50);
-  --color-background-accent-danger-default: var(--scania-color-red-400);
-  --color-background-accent-danger-hover: var(--scania-color-red-600);
-  --color-background-accent-danger-pressed: var(--scania-color-red-700);
-  --color-background-accent-danger-focus: var(--scania-color-red-400);
-  --color-background-accent-danger-disabled: var(--scania-color-grey-900);
   --color-background-layer-01: var(--scania-color-grey-900);
   --color-background-layer-02: var(--scania-color-grey-850);
   --color-background-layer-03: var(--scania-color-grey-800);
   --color-background-overlay: var(--scania-color-transparent-scrim-dark);
+  --color-background-top: var(--scania-color-grey-900);
+  --color-background-none: var(--scania-color-transparent-invisible-dark);
   --color-background-inverse-base: var(--scania-color-grey-00);
   --color-background-inverse-layer-01: var(--scania-color-grey-50);
   --color-background-inverse-layer-02: var(--scania-color-grey-00);
   --color-background-inverse-layer-03: var(--scania-color-grey-50);
-  --color-background-inverse-top: var(--scania-color-grey-00);
   --color-background-inverse-overlay: var(--scania-color-transparent-scrim-dark);
-  --color-background-surface-100: var(--scania-color-grey-850);
-  --color-background-surface-200: var(--scania-color-grey-800);
-  --color-background-surface-300: var(--scania-color-grey-750);
-  --color-background-surface-400: var(--scania-color-grey-700);
-  --color-background-surface-500: var(--scania-color-grey-600);
-  --color-background-surface-600: var(--scania-color-grey-350);
-  --color-background-surface-700: var(--scania-color-grey-250);
-  --color-background-surface-800: var(--scania-color-grey-200);
-  --color-background-surface-900: var(--scania-color-grey-150);
-  --color-background-surface-1000: var(--scania-color-grey-100);
-  --color-background-top: var(--scania-color-grey-900);
-  --color-system-warning-default: var(--traton-color-yellow-300);
-  --color-system-warning-discrete: var(--scania-color-yellow-800);
-  --color-system-warning-strong: var(--traton-color-yellow-50);
-  --color-system-warning-defined: var(--scania-color-yellow-100);
-  --color-system-warning-subtle: var(--scania-color-yellow-400);
-  --color-system-success-default: var(--scania-color-green-200);
-  --color-system-success-discrete: var(--scania-color-green-700);
-  --color-system-success-strong: var(--scania-color-green-50);
-  --color-system-success-defined: var(--scania-color-green-100);
-  --color-system-success-subtle: var(--scania-color-green-300);
-  --color-system-info-default: var(--scania-color-blue-300);
-  --color-system-info-discrete: var(--scania-color-blue-700);
+  --color-background-inverse-top: var(--scania-color-grey-00);
+  --color-background-inverse-none: var(--scania-color-transparent-invisible-dark);
+  --color-border-defined: var(--scania-color-transparent-inverse-200);
+  --color-border-soft: var(--scania-color-transparent-inverse-300);
+  --color-border-subtle: var(--scania-color-transparent-inverse-400);
+  --color-border-disabled: var(--scania-color-transparent-inverse-500);
+  --color-border-discrete: var(--scania-color-transparent-inverse-600);
+  --color-border-none: var(--scania-color-transparent-invisible-dark);
+  --color-border-inverse-defined: var(--scania-color-transparent-650);
+  --color-border-inverse-soft: var(--scania-color-transparent-500);
+  --color-border-inverse-subtle: var(--scania-color-transparent-350);
+  --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);
+  --color-icon-inverse-disabled: var(--scania-color-transparent-250);
+  --color-icon-inverse-discrete: var(--scania-color-transparent-200);
   --color-system-info-strong: var(--scania-color-blue-50);
   --color-system-info-defined: var(--scania-color-blue-200);
+  --color-system-info-default: var(--scania-color-blue-300);
   --color-system-info-subtle: var(--scania-color-blue-400);
-  --color-system-danger-default: var(--scania-color-red-300);
-  --color-system-danger-discrete: var(--scania-color-red-800);
+  --color-system-info-discrete: var(--scania-color-blue-700);
+  --color-system-success-strong: var(--scania-color-green-50);
+  --color-system-success-defined: var(--scania-color-green-100);
+  --color-system-success-default: var(--scania-color-green-200);
+  --color-system-success-subtle: var(--scania-color-green-300);
+  --color-system-success-discrete: var(--scania-color-green-700);
+  --color-system-warning-strong: var(--scania-color-yellow-50);
+  --color-system-warning-defined: var(--scania-color-yellow-100);
+  --color-system-warning-default: var(--scania-color-yellow-300);
+  --color-system-warning-subtle: var(--scania-color-yellow-400);
+  --color-system-warning-discrete: var(--scania-color-yellow-800);
   --color-system-danger-strong: var(--scania-color-red-50);
   --color-system-danger-defined: var(--scania-color-red-100);
+  --color-system-danger-default: var(--scania-color-red-300);
   --color-system-danger-subtle: var(--scania-color-red-400);
-  --color-foreground-text-accent-default: var(--scania-color-blue-300);
-  --color-foreground-text-accent-brand: var(--scania-color-grey-00);
-  --color-foreground-text-accent-brand-inverse: var(--scania-color-grey-00);
-  --color-foreground-text-accent-visited: var(--scania-color-blue-100);
-  --color-foreground-text-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-text-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-text-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-text-inverse-strong: var(--scania-color-transparent-950);
-  --color-foreground-text-inverse-soft: var(--scania-color-transparent-500);
-  --color-foreground-text-inverse-subtle: var(--scania-color-transparent-350);
-  --color-foreground-text-inverse-defined: var(--scania-color-transparent-650);
-  --color-foreground-text-inverse-disabled: var(--scania-color-transparent-250);
-  --color-foreground-text-inverse-brand: var(--scania-color-blue-800);
-  --color-foreground-text-brand: var(--scania-color-grey-00);
-  --color-foreground-text-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-text-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-border-inverse-strong: var(--scania-color-transparent-950);
-  --color-foreground-border-inverse-soft: var(--scania-color-transparent-500);
-  --color-foreground-border-inverse-subtle: var(--scania-color-transparent-350);
-  --color-foreground-border-inverse-discrete: var(--scania-color-transparent-200);
-  --color-foreground-border-inverse-defined: var(--scania-color-transparent-650);
-  --color-foreground-border-inverse-disabled: var(--scania-color-transparent-250);
-  --color-foreground-border-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-border-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-border-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-border-discrete: var(--scania-color-transparent-inverse-600);
-  --color-foreground-border-accent-link: var(--scania-color-blue-300);
-  --color-foreground-border-accent-focus: var(--scania-color-blue-300);
-  --color-foreground-border-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-border-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-icon-strong: var(--scania-color-transparent-inverse-50);
-  --color-foreground-icon-defined: var(--scania-color-transparent-inverse-200);
-  --color-foreground-icon-soft: var(--scania-color-transparent-inverse-300);
-  --color-foreground-icon-subtle: var(--scania-color-transparent-inverse-400);
-  --color-foreground-icon-disabled: var(--scania-color-transparent-inverse-500);
-  --color-foreground-icon-discrete: var(--scania-color-transparent-inverse-600);
-  --color-foreground-icon-inverse-strong: var(--scania-color-transparent-950);
-  --color-foreground-icon-inverse-defined: var(--scania-color-transparent-650);
-  --color-foreground-icon-inverse-soft: var(--scania-color-transparent-500);
-  --color-foreground-icon-inverse-subtle: var(--scania-color-transparent-350);
-  --color-foreground-icon-inverse-disabled: var(--scania-color-transparent-250);
-  --color-foreground-icon-inverse-discrete: var(--scania-color-transparent-200);
-  --color-foreground-icon-accent-default: var(--scania-color-blue-300);
-  --color-foreground-icon-accent-visited: var(--scania-color-blue-100);
-  --color-foreground-icon-accent-brand: var(--scania-color-grey-00);
-  --color-foreground-icon-accent-brand-inverse: var(--scania-color-grey-00);
-  --color-brand-neutral-white: var(--scania-color-grey-00);
-  --color-brand-neutral-black: var(--scania-color-grey-1000);
-  --color-brand-primary-50: var(--scania-color-blue-50);
-  --color-brand-primary-100: var(--scania-color-blue-100);
-  --color-brand-primary-200: var(--scania-color-blue-200);
-  --color-brand-primary-300: var(--scania-color-blue-300);
-  --color-brand-primary-400: var(--scania-color-blue-400);
-  --color-brand-primary-500: var(--scania-color-blue-500);
-  --color-brand-primary-600: var(--scania-color-blue-600);
-  --color-brand-primary-700: var(--scania-color-blue-700);
-  --color-brand-primary-800: var(--scania-color-blue-800);
-  --color-brand-primary-900: var(--scania-color-blue-900);
-  --color-brand-secondary-50: var(--scania-color-red-50);
-  --color-brand-secondary-100: var(--scania-color-red-100);
-  --color-brand-secondary-200: var(--scania-color-red-200);
-  --color-brand-secondary-300: var(--scania-color-red-300);
-  --color-brand-secondary-400: var(--scania-color-red-400);
-  --color-brand-secondary-500: var(--scania-color-red-500);
-  --color-brand-secondary-600: var(--scania-color-red-600);
-  --color-brand-secondary-700: var(--scania-color-red-700);
-  --color-brand-secondary-800: var(--scania-color-red-800);
-  --color-brand-secondary-900: var(--scania-color-red-900);
+  --color-system-danger-discrete: var(--scania-color-red-800);
+  --color-text-defined: var(--scania-color-transparent-inverse-200);
+  --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-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-base: var(--scania-color-base-white);
+  --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 */
@@ -381,21 +305,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 .scania {
-  --dimension-space-tiny: var(--scania-unit-4);
-  --dimension-space-small: var(--scania-unit-16);
-  --dimension-space-medium: var(--scania-unit-24);
-  --dimension-space-large: var(--scania-unit-48);
-  --dimension-space-huge: var(--scania-unit-80);
-  --dimension-radius-for-surface-clickable: var(--scania-unit-4);
-  --dimension-radius-for-surface-field: var(--scania-unit-4);
-  --dimension-radius-for-surface-inverse: var(--scania-unit-9999);
+  --dimension-radius-focus-width: var(--scania-unit-2);
   --dimension-radius-narrow: var(--scania-unit-4);
   --dimension-radius-soft: var(--scania-unit-8);
   --dimension-radius-rounded: var(--scania-unit-32);
   --dimension-radius-circle: var(--scania-unit-9999);
+  --dimension-radius-for-surface-clickable: var(--scania-unit-4);
+  --dimension-radius-for-surface-field: var(--scania-unit-4);
+  --dimension-radius-for-surface-inverse: var(--scania-unit-9999);
   --dimension-radius-for-area-large: var(--scania-unit-16);
   --dimension-radius-for-area-small: var(--scania-unit-2);
-  --dimension-radius-focus-width: var(--traton-unit-2);
+  --dimension-space-tiny: var(--scania-unit-4);
+  --dimension-space-small: var(--scania-unit-16);
+  --dimension-space-medium: var(--scania-unit-24);
+  --dimension-space-large: var(--scania-unit-48);
+  --dimension-space-huge: var(--scania-unit-80);
 }
 
 /* Scania logotype tokens */
@@ -424,150 +348,132 @@ html {
  * Do not edit directly, this file was auto-generated.
  */
 .scania {
-  --text-display-01-text-transform: uppercase;
-  --text-display-01-letter-spacing: 0;
-  --text-display-01-font-size: 216px;
-  --text-display-01-line-height: 183px;
-  --text-display-02-text-transform: uppercase;
-  --text-display-02-font-size: 156px;
-  --text-display-02-line-height: 148px;
-  --text-display-02-letter-spacing: 0;
-  --text-display-03-text-transform: uppercase;
-  --text-display-03-font-size: 112px;
-  --text-display-03-line-height: 106px;
-  --text-display-03-letter-spacing: 0;
-  --text-display-04-text-transform: uppercase;
-  --text-display-04-font-size: 80px;
-  --text-display-04-line-height: 80px;
-  --text-display-04-letter-spacing: 0;
-  --text-display-05-text-transform: uppercase;
-  --text-display-05-font-size: 56px;
-  --text-display-05-line-height: 56px;
-  --text-display-05-letter-spacing: 0;
-  --text-headline-01-text-transform: uppercase;
-  --text-headline-01-font-size: 40px;
-  --text-headline-01-line-height: 40px;
-  --text-headline-01-letter-spacing: 0;
-  --text-headline-02-text-transform: none;
-  --text-headline-02-font-size: 32px;
-  --text-headline-02-line-height: 32px;
-  --text-headline-02-letter-spacing: -1.28px;
-  --text-headline-03-text-transform: none;
-  --text-headline-03-font-size: 24px;
-  --text-headline-03-line-height: 24px;
-  --text-headline-03-letter-spacing: -0.72px;
-  --text-headline-04-text-transform: none;
-  --text-headline-04-font-size: 20px;
-  --text-headline-04-line-height: 24px;
-  --text-headline-04-letter-spacing: -0.4px;
-  --text-headline-05-text-transform: none;
-  --text-headline-05-font-size: 16px;
-  --text-headline-05-line-height: 24px;
-  --text-headline-05-letter-spacing: -0.32px;
-  --text-headline-06-text-transform: uppercase;
-  --text-headline-06-font-size: 14px;
-  --text-headline-06-line-height: 16px;
-  --text-headline-06-letter-spacing: -0.28px;
-  --text-paragraph-01-text-transform: none;
-  --text-paragraph-01-font-size: 24px;
-  --text-paragraph-01-line-height: 32px;
-  --text-paragraph-01-letter-spacing: -0.72px;
-  --text-paragraph-02-text-transform: none;
-  --text-paragraph-02-font-size: 20px;
-  --text-paragraph-02-line-height: 24px;
-  --text-paragraph-02-letter-spacing: -0.2px;
-  --text-body-01-text-transform: none;
-  --text-body-01-font-size: 16px;
-  --text-body-01-line-height: 24px;
-  --text-body-01-letter-spacing: -0.32px;
-  --text-body-02-text-transform: none;
-  --text-body-02-font-size: 14px;
-  --text-body-02-line-height: 20px;
-  --text-body-02-letter-spacing: -0.14px;
-  --text-component-text-01-text-transform: none;
-  --text-component-text-01-font-size: 14px;
-  --text-component-text-01-line-height: 16px;
-  --text-component-text-01-letter-spacing: -0.14px;
-  --text-component-text-02-text-transform: none;
-  --text-component-text-02-font-size: 14px;
-  --text-component-text-02-line-height: 20px;
-  --text-component-text-02-letter-spacing: -0.14px;
-  --text-component-label-01-text-transform: none;
-  --text-component-label-01-font-size: 12px;
-  --text-component-label-01-line-height: 16px;
-  --text-component-label-01-letter-spacing: 0;
-  --text-component-label-02-transform: none;
-  --text-component-label-02-font-size: 10px;
-  --text-component-label-02-line-height: 8px;
-  --text-component-label-02-letter-spacing: 0;
-  --text-component-title-01-text-transform: none;
-  --text-component-title-01-text-transform-2: none;
-  --text-component-title-01-font-size: 14px;
-  --text-component-title-01-line-height: 16px;
-  --text-component-title-01-letter-spacing: -0.14px;
-  --text-component-title-01-letter-spacing-2: -0.14px;
-  --text-component-title-01-font-size-2: 14px;
-  --text-component-title-01-line-height-2: 16px;
-  --text-component-title-02-text-transform: uppercase;
-  --text-component-title-02-font-size: 10px;
-  --text-component-title-02-line-height: 16px;
-  --text-component-title-02-letter-spacing: 0.8px;
-  --text-link-01-text-transform: none;
-  --text-link-01-font-size: 16px;
-  --text-link-01-line-height: 24px;
-  --text-link-01-letter-spacing: -0.32px;
-  --text-link-02-text-transform: none;
-  --text-link-02-font-size: 14px;
-  --text-link-02-line-height: 20px;
-  --text-link-02-letter-spacing: -0.14px;
-  --text-display-01-font-family: var(--scania-font-family-display);
-  --text-display-01-font-weight: var(--scania-font-weight-bold);
-  --text-display-02-font-family: var(--scania-font-family-display);
-  --text-display-02-font-weight: var(--scania-font-weight-bold);
-  --text-display-03-font-family: var(--scania-font-family-display);
-  --text-display-03-font-weight: var(--scania-font-weight-bold);
-  --text-display-04-font-family: var(--scania-font-family-display);
-  --text-display-04-font-weight: var(--scania-font-weight-bold);
-  --text-display-05-font-family: var(--scania-font-family-display);
-  --text-display-05-font-weight: var(--scania-font-weight-bold);
-  --text-headline-01-font-family: var(--scania-font-family-display);
-  --text-headline-01-font-weight: var(--scania-font-weight-bold);
-  --text-headline-02-font-family: var(--scania-font-family-default);
-  --text-headline-02-font-weight: var(--scania-font-weight-bold);
-  --text-headline-03-font-family: var(--scania-font-family-default);
-  --text-headline-03-font-weight: var(--scania-font-weight-bold);
-  --text-headline-04-font-family: var(--scania-font-family-default);
-  --text-headline-04-font-weight: var(--scania-font-weight-bold);
-  --text-headline-05-font-family: var(--scania-font-family-default);
-  --text-headline-05-font-weight: var(--scania-font-weight-bold);
-  --text-headline-06-font-family: var(--scania-font-family-default);
-  --text-headline-06-font-weight: var(--scania-font-weight-bold);
-  --text-paragraph-01-font-family: var(--scania-font-family-default);
-  --text-paragraph-01-font-weight: var(--scania-font-weight-regular);
-  --text-paragraph-02-font-family: var(--scania-font-family-default);
-  --text-paragraph-02-font-weight: var(--scania-font-weight-regular);
-  --text-body-01-font-family: var(--scania-font-family-default);
-  --text-body-01-font-weight: var(--scania-font-weight-regular);
-  --text-body-02-font-family: var(--scania-font-family-default);
-  --text-body-02-font-weight: var(--scania-font-weight-regular);
-  --text-component-text-01-font-family: var(--scania-font-family-semi-condensed);
-  --text-component-text-01-font-weight: var(--scania-font-weight-regular);
-  --text-component-text-02-font-family: var(--scania-font-family-semi-condensed);
-  --text-component-text-02-font-weight: var(--scania-font-weight-regular);
-  --text-component-label-01-font-family: var(--scania-font-family-semi-condensed);
-  --text-component-label-01-font-weight: var(--scania-font-weight-regular);
-  --text-component-label-02-font-family: var(--scania-font-family-semi-condensed);
-  --text-component-label-02-font-weight: var(--scania-font-weight-regular);
-  --text-component-title-01-font-family: var(--scania-font-family-semi-condensed);
-  --text-component-title-01-font-family-2: var(--scania-font-family-semi-condensed);
-  --text-component-title-01-font-weight: var(--scania-font-weight-bold);
-  --text-component-title-01-font-weight-2: var(--scania-font-weight-bold);
-  --text-component-title-02-font-family: var(--scania-font-family-default);
-  --text-component-title-02-font-weight: var(--scania-font-weight-bold);
-  --text-link-01-font-family: var(--scania-font-family-default);
-  --text-link-01-font-weight: var(--scania-font-weight-regular);
-  --text-link-02-font-family: var(--scania-font-family-default);
-  --text-link-02-font-weight: var(--scania-font-weight-regular);
+  --type-display-01-font-size: 216;
+  --type-display-01-line-height: 183;
+  --type-display-01-letter-spacing: 0;
+  --type-display-01-text-transform: uppercase;
+  --type-display-02-font-size: 156;
+  --type-display-02-line-height: 148;
+  --type-display-02-letter-spacing: 0;
+  --type-display-02-text-transform: uppercase;
+  --type-display-03-font-size: 112;
+  --type-display-03-line-height: 106;
+  --type-display-03-letter-spacing: 0;
+  --type-display-03-text-transform: uppercase;
+  --type-display-04-font-size: 80;
+  --type-display-04-line-height: 80;
+  --type-display-04-letter-spacing: 0;
+  --type-display-04-text-transform: uppercase;
+  --type-display-05-font-size: 56;
+  --type-display-05-line-height: 56;
+  --type-display-05-letter-spacing: 0;
+  --type-display-05-text-transform: uppercase;
+  --type-headline-01-font-size: 40;
+  --type-headline-01-line-height: 40;
+  --type-headline-01-letter-spacing: 0;
+  --type-headline-01-text-transform: uppercase;
+  --type-headline-02-font-size: 32;
+  --type-headline-02-line-height: 32;
+  --type-headline-02-letter-spacing: -1.28;
+  --type-headline-02-text-transform: none;
+  --type-headline-03-font-size: 24;
+  --type-headline-03-line-height: 24;
+  --type-headline-03-letter-spacing: -0.72;
+  --type-headline-03-text-transform: none;
+  --type-headline-04-font-size: 20;
+  --type-headline-04-line-height: 24;
+  --type-headline-04-letter-spacing: -0.4;
+  --type-headline-04-text-transform: none;
+  --type-headline-05-font-size: 16;
+  --type-headline-05-line-height: 24;
+  --type-headline-05-letter-spacing: -0.32;
+  --type-headline-05-text-transform: none;
+  --type-headline-06-font-size: 14;
+  --type-headline-06-line-height: 16;
+  --type-headline-06-letter-spacing: -0.28;
+  --type-headline-06-text-transform: uppercase;
+  --type-paragraph-01-font-size: 24;
+  --type-paragraph-01-line-height: 32;
+  --type-paragraph-01-letter-spacing: -0.72;
+  --type-paragraph-01-text-transform: none;
+  --type-paragraph-02-font-size: 20;
+  --type-paragraph-02-line-height: 24;
+  --type-paragraph-02-letter-spacing: -0.2;
+  --type-paragraph-02-text-transform: none;
+  --type-body-01-font-size: 16;
+  --type-body-01-line-height: 24;
+  --type-body-01-letter-spacing: -0.32;
+  --type-body-01-text-transform: none;
+  --type-body-02-font-size: 14;
+  --type-body-02-line-height: 20;
+  --type-body-02-letter-spacing: -0.14;
+  --type-body-02-text-transform: none;
+  --type-system-title-01-font-size: 14;
+  --type-system-title-01-line-height: 16;
+  --type-system-title-01-letter-spacing: -0.14;
+  --type-system-title-01-text-transform: none;
+  --type-system-title-02-font-size: 10;
+  --type-system-title-02-line-height: 16;
+  --type-system-title-02-letter-spacing: 0.8;
+  --type-system-title-02-text-transform: uppercase;
+  --type-system-label-01-font-size: 12;
+  --type-system-label-01-line-height: 16;
+  --type-system-label-01-letter-spacing: 0;
+  --type-system-label-01-text-transform: none;
+  --type-system-label-02-font-size: 10;
+  --type-system-label-02-line-height: 8;
+  --type-system-label-02-letter-spacing: 0;
+  --type-system-label-02-text-transform: none;
+  --type-system-body-01-font-size: 14;
+  --type-system-body-01-line-height: 16;
+  --type-system-body-01-letter-spacing: -0.14;
+  --type-system-body-01-text-transform: none;
+  --type-system-body-02-font-size: 14;
+  --type-system-body-02-line-height: 20;
+  --type-system-body-02-letter-spacing: -0.14;
+  --type-system-body-02-text-transform: none;
+  --type-display-01-font-family: var(--scania-font-family-display);
+  --type-display-01-font-weight: var(--scania-font-weight-bold);
+  --type-display-02-font-family: var(--scania-font-family-display);
+  --type-display-02-font-weight: var(--scania-font-weight-bold);
+  --type-display-03-font-family: var(--scania-font-family-display);
+  --type-display-03-font-weight: var(--scania-font-weight-bold);
+  --type-display-04-font-family: var(--scania-font-family-display);
+  --type-display-04-font-weight: var(--scania-font-weight-bold);
+  --type-display-05-font-family: var(--scania-font-family-display);
+  --type-display-05-font-weight: var(--scania-font-weight-bold);
+  --type-headline-01-font-family: var(--scania-font-family-display);
+  --type-headline-01-font-weight: var(--scania-font-weight-bold);
+  --type-headline-02-font-family: var(--scania-font-family-default);
+  --type-headline-02-font-weight: var(--scania-font-weight-bold);
+  --type-headline-03-font-family: var(--scania-font-family-default);
+  --type-headline-03-font-weight: var(--scania-font-weight-bold);
+  --type-headline-04-font-family: var(--scania-font-family-default);
+  --type-headline-04-font-weight: var(--scania-font-weight-bold);
+  --type-headline-05-font-family: var(--scania-font-family-default);
+  --type-headline-05-font-weight: var(--scania-font-weight-bold);
+  --type-headline-06-font-family: var(--scania-font-family-default);
+  --type-headline-06-font-weight: var(--scania-font-weight-bold);
+  --type-paragraph-01-font-family: var(--scania-font-family-default);
+  --type-paragraph-01-font-weight: var(--scania-font-weight-regular);
+  --type-paragraph-02-font-family: var(--scania-font-family-default);
+  --type-paragraph-02-font-weight: var(--scania-font-weight-regular);
+  --type-body-01-font-family: var(--scania-font-family-default);
+  --type-body-01-font-weight: var(--scania-font-weight-regular);
+  --type-body-02-font-family: var(--scania-font-family-default);
+  --type-body-02-font-weight: var(--scania-font-weight-regular);
+  --type-system-title-01-font-family: var(--scania-font-family-semi-condensed);
+  --type-system-title-01-font-weight: var(--scania-font-weight-bold);
+  --type-system-title-02-font-family: var(--scania-font-family-default);
+  --type-system-title-02-font-weight: var(--scania-font-weight-bold);
+  --type-system-label-01-font-family: var(--scania-font-family-semi-condensed);
+  --type-system-label-01-font-weight: var(--scania-font-weight-regular);
+  --type-system-label-02-font-family: var(--scania-font-family-semi-condensed);
+  --type-system-label-02-font-weight: var(--scania-font-weight-regular);
+  --type-system-body-01-font-family: var(--scania-font-family-semi-condensed);
+  --type-system-body-01-font-weight: var(--scania-font-weight-regular);
+  --type-system-body-02-font-family: var(--scania-font-family-semi-condensed);
+  --type-system-body-02-font-weight: var(--scania-font-weight-regular);
 }
 
 /* Multibrand tokens: Scania typography */
@@ -976,213 +882,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 */
@@ -1301,7 +1242,7 @@ h6 {
   --scania-icon-fuel_gauge-svg: url(./assets/icons/scania/fuel_gauge.svg);
   --scania-icon-fuel_inactive-svg: url(./assets/icons/scania/fuel_inactive.svg);
   --scania-icon-fuel-svg: url(./assets/icons/scania/fuel.svg);
-  --scania-icon-gift-inactive-svg: url(./assets/icons/scania/gift%20inactive.svg);
+  --scania-icon-gift_inactive-svg: url(./assets/icons/scania/gift_inactive.svg);
   --scania-icon-gift-svg: url(./assets/icons/scania/gift.svg);
   --scania-icon-global-svg: url(./assets/icons/scania/global.svg);
   --scania-icon-guided_tour_inactive-svg: url(./assets/icons/scania/guided_tour_inactive.svg);
@@ -1561,7 +1502,7 @@ h6 {
   --icon-fuel_gauge-svg: var(--scania-icon-fuel_gauge-svg);
   --icon-fuel_inactive-svg: var(--scania-icon-fuel_inactive-svg);
   --icon-fuel-svg: var(--scania-icon-fuel-svg);
-  --icon-gift-inactive-svg: var(--scania-icon-gift-inactive-svg);
+  --icon-gift_inactive-svg: var(--scania-icon-gift_inactive-svg);
   --icon-gift-svg: var(--scania-icon-gift-svg);
   --icon-global-svg: var(--scania-icon-global-svg);
   --icon-guided_tour_inactive-svg: var(--scania-icon-guided_tour_inactive-svg);
@@ -1702,4 +1643,159 @@ h6 {
   --icon-wifi-svg: var(--scania-icon-wifi-svg);
   --icon-windscreen_heating_inactive-svg: var(--scania-icon-windscreen_heating_inactive-svg);
   --icon-windscreen_heating-svg: var(--scania-icon-windscreen_heating-svg);
+}
+
+/* Cross-brand placeholder fallbacks — generated alongside icon.scss */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.scania {
+  --icon-document_word-svg: var(--scania-icon-placeholder-svg);
+  --icon-dollar_sign-svg: var(--scania-icon-placeholder-svg);
+  --icon-donner-svg: var(--scania-icon-placeholder-svg);
+  --icon-meatball-svg: var(--scania-icon-placeholder-svg);
+  --icon-skip_backward-svg: var(--scania-icon-placeholder-svg);
+}
+
+.traton {
+  --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
+  --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
+  --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-adblue-svg: var(--traton-icon-placeholder-svg);
+  --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-audio-svg: var(--traton-icon-placeholder-svg);
+  --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-award-svg: var(--traton-icon-placeholder-svg);
+  --icon-backward-svg: var(--traton-icon-placeholder-svg);
+  --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-bug-svg: var(--traton-icon-placeholder-svg);
+  --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-bus-svg: var(--traton-icon-placeholder-svg);
+  --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
+  --icon-camera-svg: var(--traton-icon-placeholder-svg);
+  --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
+  --icon-configurator-svg: var(--traton-icon-placeholder-svg);
+  --icon-cookie-svg: var(--traton-icon-placeholder-svg);
+  --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
+  --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-cup-svg: var(--traton-icon-placeholder-svg);
+  --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
+  --icon-department-svg: var(--traton-icon-placeholder-svg);
+  --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
+  --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-diamond-svg: var(--traton-icon-placeholder-svg);
+  --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
+  --icon-dollar-svg: var(--traton-icon-placeholder-svg);
+  --icon-doner-svg: var(--traton-icon-placeholder-svg);
+  --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
+  --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-drop-svg: var(--traton-icon-placeholder-svg);
+  --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-engine-svg: var(--traton-icon-placeholder-svg);
+  --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-environment-svg: var(--traton-icon-placeholder-svg);
+  --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-exit-svg: var(--traton-icon-placeholder-svg);
+  --icon-expand-svg: var(--traton-icon-placeholder-svg);
+  --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-factory-svg: var(--traton-icon-placeholder-svg);
+  --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-ferry-svg: var(--traton-icon-placeholder-svg);
+  --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-flash-svg: var(--traton-icon-placeholder-svg);
+  --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-forward-svg: var(--traton-icon-placeholder-svg);
+  --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel-svg: var(--traton-icon-placeholder-svg);
+  --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-gift-svg: var(--traton-icon-placeholder-svg);
+  --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
+  --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
+  --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
+  --icon-history-svg: var(--traton-icon-placeholder-svg);
+  --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-idea-svg: var(--traton-icon-placeholder-svg);
+  --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-insights-svg: var(--traton-icon-placeholder-svg);
+  --icon-key-svg: var(--traton-icon-placeholder-svg);
+  --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-language-svg: var(--traton-icon-placeholder-svg);
+  --icon-layer-svg: var(--traton-icon-placeholder-svg);
+  --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-list-svg: var(--traton-icon-placeholder-svg);
+  --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
+  --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
+  --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
+  --icon-merge-svg: var(--traton-icon-placeholder-svg);
+  --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-microphone-svg: var(--traton-icon-placeholder-svg);
+  --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
+  --icon-navigate-svg: var(--traton-icon-placeholder-svg);
+  --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
+  --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
+  --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
+  --icon-pause-svg: var(--traton-icon-placeholder-svg);
+  --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
+  --icon-play-svg: var(--traton-icon-placeholder-svg);
+  --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
+  --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-privacy-svg: var(--traton-icon-placeholder-svg);
+  --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
+  --icon-range-svg: var(--traton-icon-placeholder-svg);
+  --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-reload-svg: var(--traton-icon-placeholder-svg);
+  --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-repeat-svg: var(--traton-icon-placeholder-svg);
+  --icon-route-svg: var(--traton-icon-placeholder-svg);
+  --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
+  --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
+  --icon-target-svg: var(--traton-icon-placeholder-svg);
+  --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-temperature-svg: var(--traton-icon-placeholder-svg);
+  --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-text-svg: var(--traton-icon-placeholder-svg);
+  --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
+  --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
+  --icon-trailer-svg: var(--traton-icon-placeholder-svg);
+  --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-undo-svg: var(--traton-icon-placeholder-svg);
+  --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-video-svg: var(--traton-icon-placeholder-svg);
+  --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-weight-svg: var(--traton-icon-placeholder-svg);
+  --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
+  --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
+  --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
 }