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

package/dist/scania-variables.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Scania primitive tokens */
 /**
  * Do not edit directly, this file was auto-generated.
@@ -19,11 +20,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 +155,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 +189,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 +244,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 +282,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 +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 */
@@ -1104,6 +1154,7 @@ h6 {
   --scania-icon-burger-svg: url(./assets/icons/scania/burger.svg);
   --scania-icon-bus_inactive-svg: url(./assets/icons/scania/bus_inactive.svg);
   --scania-icon-bus-svg: url(./assets/icons/scania/bus.svg);
+  --scania-icon-cab_door-svg: url(./assets/icons/scania/cab_door.svg);
   --scania-icon-calendar_inactive-svg: url(./assets/icons/scania/calendar_inactive.svg);
   --scania-icon-calendar-svg: url(./assets/icons/scania/calendar.svg);
   --scania-icon-camera_inactive-svg: url(./assets/icons/scania/camera_inactive.svg);
@@ -1218,6 +1269,7 @@ h6 {
   --scania-icon-kebab-svg: url(./assets/icons/scania/kebab.svg);
   --scania-icon-key_inactive-svg: url(./assets/icons/scania/key_inactive.svg);
   --scania-icon-key-svg: url(./assets/icons/scania/key.svg);
+  --scania-icon-language-svg: url(./assets/icons/scania/language.svg);
   --scania-icon-layer_inactive-svg: url(./assets/icons/scania/layer_inactive.svg);
   --scania-icon-layer-svg: url(./assets/icons/scania/layer.svg);
   --scania-icon-link_broken-svg: url(./assets/icons/scania/link_broken.svg);
@@ -1234,6 +1286,8 @@ h6 {
   --scania-icon-merge-svg: url(./assets/icons/scania/merge.svg);
   --scania-icon-message_inactive-svg: url(./assets/icons/scania/message_inactive.svg);
   --scania-icon-message-svg: url(./assets/icons/scania/message.svg);
+  --scania-icon-microphone_inactive-svg: url(./assets/icons/scania/microphone_inactive.svg);
+  --scania-icon-microphone-svg: url(./assets/icons/scania/microphone.svg);
   --scania-icon-mileage_inactive-svg: url(./assets/icons/scania/mileage_inactive.svg);
   --scania-icon-mileage-svg: url(./assets/icons/scania/mileage.svg);
   --scania-icon-minimize_fullscreen-svg: url(./assets/icons/scania/minimize_fullscreen.svg);
@@ -1241,9 +1295,11 @@ h6 {
   --scania-icon-navigate_inactive-svg: url(./assets/icons/scania/navigate_inactive.svg);
   --scania-icon-navigate-svg: url(./assets/icons/scania/navigate.svg);
   --scania-icon-notification_inactive-svg: url(./assets/icons/scania/notification_inactive.svg);
+  --scania-icon-notification_snooze-svg: url(./assets/icons/scania/notification_snooze.svg);
   --scania-icon-notification-svg: url(./assets/icons/scania/notification.svg);
   --scania-icon-oil_level_inactive-svg: url(./assets/icons/scania/oil_level_inactive.svg);
   --scania-icon-oil_level-svg: url(./assets/icons/scania/oil_level.svg);
+  --scania-icon-paperclip-svg: url(./assets/icons/scania/paperclip.svg);
   --scania-icon-pause_inactive-svg: url(./assets/icons/scania/pause_inactive.svg);
   --scania-icon-pause-svg: url(./assets/icons/scania/pause.svg);
   --scania-icon-phone_inactive-svg: url(./assets/icons/scania/phone_inactive.svg);
@@ -1263,6 +1319,7 @@ h6 {
   --scania-icon-privacy-svg: url(./assets/icons/scania/privacy.svg);
   --scania-icon-profile_inactive-svg: url(./assets/icons/scania/profile_inactive.svg);
   --scania-icon-profile-svg: url(./assets/icons/scania/profile.svg);
+  --scania-icon-prohibited-svg: url(./assets/icons/scania/prohibited.svg);
   --scania-icon-proportions_inactive-svg: url(./assets/icons/scania/proportions_inactive.svg);
   --scania-icon-proportions-svg: url(./assets/icons/scania/proportions.svg);
   --scania-icon-range_inactive-svg: url(./assets/icons/scania/range_inactive.svg);
@@ -1284,6 +1341,7 @@ h6 {
   --scania-icon-send-svg: url(./assets/icons/scania/send.svg);
   --scania-icon-settings-svg: url(./assets/icons/scania/settings.svg);
   --scania-icon-share-svg: url(./assets/icons/scania/share.svg);
+  --scania-icon-shuffle-svg: url(./assets/icons/scania/shuffle.svg);
   --scania-icon-skip_backwards-svg: url(./assets/icons/scania/skip_backwards.svg);
   --scania-icon-skip_forward-svg: url(./assets/icons/scania/skip_forward.svg);
   --scania-icon-smartphone_inactive-svg: url(./assets/icons/scania/smartphone_inactive.svg);
@@ -1356,6 +1414,7 @@ h6 {
   --icon-burger-svg: var(--scania-icon-burger-svg);
   --icon-bus_inactive-svg: var(--scania-icon-bus_inactive-svg);
   --icon-bus-svg: var(--scania-icon-bus-svg);
+  --icon-cab_door-svg: var(--scania-icon-cab_door-svg);
   --icon-calendar_inactive-svg: var(--scania-icon-calendar_inactive-svg);
   --icon-calendar-svg: var(--scania-icon-calendar-svg);
   --icon-camera_inactive-svg: var(--scania-icon-camera_inactive-svg);
@@ -1470,6 +1529,7 @@ h6 {
   --icon-kebab-svg: var(--scania-icon-kebab-svg);
   --icon-key_inactive-svg: var(--scania-icon-key_inactive-svg);
   --icon-key-svg: var(--scania-icon-key-svg);
+  --icon-language-svg: var(--scania-icon-language-svg);
   --icon-layer_inactive-svg: var(--scania-icon-layer_inactive-svg);
   --icon-layer-svg: var(--scania-icon-layer-svg);
   --icon-link_broken-svg: var(--scania-icon-link_broken-svg);
@@ -1486,6 +1546,8 @@ h6 {
   --icon-merge-svg: var(--scania-icon-merge-svg);
   --icon-message_inactive-svg: var(--scania-icon-message_inactive-svg);
   --icon-message-svg: var(--scania-icon-message-svg);
+  --icon-microphone_inactive-svg: var(--scania-icon-microphone_inactive-svg);
+  --icon-microphone-svg: var(--scania-icon-microphone-svg);
   --icon-mileage_inactive-svg: var(--scania-icon-mileage_inactive-svg);
   --icon-mileage-svg: var(--scania-icon-mileage-svg);
   --icon-minimize_fullscreen-svg: var(--scania-icon-minimize_fullscreen-svg);
@@ -1493,9 +1555,11 @@ h6 {
   --icon-navigate_inactive-svg: var(--scania-icon-navigate_inactive-svg);
   --icon-navigate-svg: var(--scania-icon-navigate-svg);
   --icon-notification_inactive-svg: var(--scania-icon-notification_inactive-svg);
+  --icon-notification_snooze-svg: var(--scania-icon-notification_snooze-svg);
   --icon-notification-svg: var(--scania-icon-notification-svg);
   --icon-oil_level_inactive-svg: var(--scania-icon-oil_level_inactive-svg);
   --icon-oil_level-svg: var(--scania-icon-oil_level-svg);
+  --icon-paperclip-svg: var(--scania-icon-paperclip-svg);
   --icon-pause_inactive-svg: var(--scania-icon-pause_inactive-svg);
   --icon-pause-svg: var(--scania-icon-pause-svg);
   --icon-phone_inactive-svg: var(--scania-icon-phone_inactive-svg);
@@ -1515,6 +1579,7 @@ h6 {
   --icon-privacy-svg: var(--scania-icon-privacy-svg);
   --icon-profile_inactive-svg: var(--scania-icon-profile_inactive-svg);
   --icon-profile-svg: var(--scania-icon-profile-svg);
+  --icon-prohibited-svg: var(--scania-icon-prohibited-svg);
   --icon-proportions_inactive-svg: var(--scania-icon-proportions_inactive-svg);
   --icon-proportions-svg: var(--scania-icon-proportions-svg);
   --icon-range_inactive-svg: var(--scania-icon-range_inactive-svg);
@@ -1536,6 +1601,7 @@ h6 {
   --icon-send-svg: var(--scania-icon-send-svg);
   --icon-settings-svg: var(--scania-icon-settings-svg);
   --icon-share-svg: var(--scania-icon-share-svg);
+  --icon-shuffle-svg: var(--scania-icon-shuffle-svg);
   --icon-skip_backwards-svg: var(--scania-icon-skip_backwards-svg);
   --icon-skip_forward-svg: var(--scania-icon-skip_forward-svg);
   --icon-smartphone_inactive-svg: var(--scania-icon-smartphone_inactive-svg);
@@ -1577,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);
 }