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

package/dist/traton-variables.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Spacing */
 :root,
 .traton {
@@ -24,74 +25,74 @@
 /* === TRATON Type Display === */
 @font-face {
   font-family: "TRATON Type Display";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeDisplay-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Display";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeDisplay-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
 }
 /* === TRATON Type Text === */
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-MediumItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-SemiBold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
   font-weight: 600;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
   font-weight: 700;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-BoldItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
 }
 .traton {
   /* Font size tokens */
@@ -344,16 +345,16 @@
   --traton-color-yellow-900: #302403;
   --traton-color-yellow-950: #241b00;
   --traton-color-yellow-1000: #1a1300;
-  --traton-opacity-0: 0;
-  --traton-opacity-25: 25;
-  --traton-opacity-50: 50;
-  --traton-opacity-75: 75;
-  --traton-opacity-100: 100;
   --traton-font-family-default: traton type text;
   --traton-font-family-display: traton type display;
   --traton-font-weight-semi-bold: 600;
   --traton-font-weight-medium: 500;
   --traton-font-weight-regular: 400;
+  --traton-opacity-0: 0;
+  --traton-opacity-25: 25;
+  --traton-opacity-50: 50;
+  --traton-opacity-75: 75;
+  --traton-opacity-100: 100;
   --traton-unit-0: 0;
   --traton-unit-1: 1;
   --traton-unit-2: 2;
@@ -409,11 +410,15 @@
   --color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
   --color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
   --color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
+  --color-icon-base: var(--traton-color-base-black);
+  --color-icon-brand: var(--traton-color-blue-950);
   --color-icon-defined: var(--traton-color-transparent-700);
   --color-icon-soft: var(--traton-color-transparent-600);
   --color-icon-subtle: var(--traton-color-transparent-500);
   --color-icon-disabled: var(--traton-color-transparent-400);
   --color-icon-discrete: var(--traton-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(--traton-color-transparent-inverse-700);
   --color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
   --color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
@@ -439,24 +444,26 @@
   --color-system-danger-default: var(--traton-color-red-300);
   --color-system-danger-subtle: var(--traton-color-red-200);
   --color-system-danger-discrete: var(--traton-color-red-50);
+  --color-text-base: var(--traton-color-base-black);
+  --color-text-brand: var(--traton-color-blue-950);
   --color-text-defined: var(--traton-color-transparent-700);
   --color-text-soft: var(--traton-color-transparent-600);
   --color-text-subtle: var(--traton-color-transparent-500);
   --color-text-disabled: var(--traton-color-transparent-400);
-  --color-text-brand: var(--traton-color-blue-950);
-  --color-text-base: var(--traton-color-base-black);
+  --color-text-discrete: var(--traton-color-transparent-200);
+  --color-text-inverse-brand: var(--traton-color-base-white);
   --color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
   --color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
   --color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
   --color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
-  --color-text-inverse-brand: var(--traton-color-base-white);
+  --color-text-inverse-discrete: var(--traton-color-transparent-inverse-200);
   --color-border-strong: var(--traton-color-transparent-950);
   --color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-icon-strong: var(--traton-color-transparent-950);
   --color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-text-strong: var(--traton-color-transparent-950);
-  --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-text-inverse-base: var(--scania-color-base-white);
+  --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
 }
 
 /**
@@ -490,11 +497,15 @@
   --color-border-inverse-disabled: var(--traton-color-transparent-400);
   --color-border-inverse-discrete: var(--traton-color-transparent-200);
   --color-border-inverse-none: var(--traton-color-transparent-invisible-light);
+  --color-icon-base: var(--traton-color-base-white);
+  --color-icon-brand: var(--traton-color-base-white);
   --color-icon-defined: var(--traton-color-transparent-inverse-700);
   --color-icon-soft: var(--traton-color-transparent-inverse-600);
   --color-icon-subtle: var(--traton-color-transparent-inverse-500);
   --color-icon-disabled: var(--traton-color-transparent-inverse-400);
   --color-icon-discrete: var(--traton-color-transparent-inverse-200);
+  --color-icon-inverse-base: var(--traton-color-base-white);
+  --color-icon-inverse-brand: var(--traton-color-base-white);
   --color-icon-inverse-defined: var(--traton-color-transparent-700);
   --color-icon-inverse-soft: var(--traton-color-transparent-600);
   --color-icon-inverse-subtle: var(--traton-color-transparent-500);
@@ -520,24 +531,26 @@
   --color-system-danger-default: var(--traton-color-red-300);
   --color-system-danger-subtle: var(--traton-color-red-500);
   --color-system-danger-discrete: var(--traton-color-red-850);
+  --color-text-base: var(--traton-color-base-white);
+  --color-text-brand: var(--traton-color-base-white);
   --color-text-defined: var(--traton-color-transparent-inverse-700);
   --color-text-soft: var(--traton-color-transparent-inverse-600);
   --color-text-subtle: var(--traton-color-transparent-inverse-500);
   --color-text-disabled: var(--traton-color-transparent-inverse-400);
-  --color-text-brand: var(--traton-color-base-white);
-  --color-text-base: var(--traton-color-base-white);
+  --color-text-discrete: var(--traton-color-transparent-inverse-200);
+  --color-text-inverse-base: var(--traton-color-base-black);
   --color-text-inverse-defined: var(--traton-color-transparent-700);
   --color-text-inverse-soft: var(--traton-color-transparent-600);
   --color-text-inverse-subtle: var(--traton-color-transparent-500);
   --color-text-inverse-disabled: var(--traton-color-transparent-400);
-  --color-text-inverse-base: var(--traton-color-base-black);
+  --color-text-inverse-discrete: var(--traton-color-transparent-200);
   --color-border-strong: var(--traton-color-transparent-inverse-950);
   --color-border-inverse-strong: var(--traton-color-transparent-950);
   --color-icon-strong: var(--traton-color-transparent-inverse-950);
   --color-icon-inverse-strong: var(--traton-color-transparent-950);
   --color-text-strong: var(--traton-color-transparent-inverse-950);
-  --color-text-inverse-strong: var(--traton-color-transparent-950);
   --color-text-inverse-brand: var(--traton-color-transparent-950);
+  --color-text-inverse-strong: var(--traton-color-transparent-950);
 }
 
 /* Traton logotype tokens */
@@ -711,12 +724,9 @@
   --type-system-body-02-font-weight: var(--traton-font-weight-regular);
 }
 
-/* Spacing */
-/* Typography */
-/* Traton specific imports */
 /* Traton primitive icon tokens */
 /**
- * Do not edit directly, this file was auto-generated.
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
  */
 :root {
   --traton-icon-arrow_diagonal-svg: url(./assets/icons/traton/arrow_diagonal.svg);
@@ -724,37 +734,124 @@
   --traton-icon-arrow_left-svg: url(./assets/icons/traton/arrow_left.svg);
   --traton-icon-arrow_right-svg: url(./assets/icons/traton/arrow_right.svg);
   --traton-icon-arrow_up-svg: url(./assets/icons/traton/arrow_up.svg);
+  --traton-icon-back-svg: url(./assets/icons/traton/back.svg);
   --traton-icon-bento-svg: url(./assets/icons/traton/bento.svg);
   --traton-icon-burger-svg: url(./assets/icons/traton/burger.svg);
   --traton-icon-calendar-svg: url(./assets/icons/traton/calendar.svg);
+  --traton-icon-calendar_inactive-svg: url(./assets/icons/traton/calendar_inactive.svg);
+  --traton-icon-card-svg: url(./assets/icons/traton/card.svg);
+  --traton-icon-cart-svg: url(./assets/icons/traton/cart.svg);
   --traton-icon-chevron_down-svg: url(./assets/icons/traton/chevron_down.svg);
   --traton-icon-chevron_left-svg: url(./assets/icons/traton/chevron_left.svg);
   --traton-icon-chevron_right-svg: url(./assets/icons/traton/chevron_right.svg);
   --traton-icon-chevron_up-svg: url(./assets/icons/traton/chevron_up.svg);
+  --traton-icon-clock-svg: url(./assets/icons/traton/clock.svg);
+  --traton-icon-clock_inactive-svg: url(./assets/icons/traton/clock_inactive.svg);
+  --traton-icon-contact-svg: url(./assets/icons/traton/contact.svg);
+  --traton-icon-contact_inactive-svg: url(./assets/icons/traton/contact_inactive.svg);
+  --traton-icon-copy-svg: url(./assets/icons/traton/copy.svg);
   --traton-icon-cross-svg: url(./assets/icons/traton/cross.svg);
-  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
+  --traton-icon-document-svg: url(./assets/icons/traton/document.svg);
+  --traton-icon-document_check-svg: url(./assets/icons/traton/document_check.svg);
+  --traton-icon-document_doc-svg: url(./assets/icons/traton/document_doc.svg);
+  --traton-icon-document_eye-svg: url(./assets/icons/traton/document_eye.svg);
+  --traton-icon-document_pdf-svg: url(./assets/icons/traton/document_pdf.svg);
+  --traton-icon-document_tool-svg: url(./assets/icons/traton/document_tool.svg);
+  --traton-icon-document_word-svg: url(./assets/icons/traton/document_word.svg);
+  --traton-icon-document_wrong-svg: url(./assets/icons/traton/document_wrong.svg);
+  --traton-icon-document_xls-svg: url(./assets/icons/traton/document_xls.svg);
+  --traton-icon-dollar-svg: url(./assets/icons/traton/dollar.svg);
+  --traton-icon-doner-svg: url(./assets/icons/traton/doner.svg);
+  --traton-icon-double_kebab-svg: url(./assets/icons/traton/double_kebab.svg);
+  --traton-icon-download-svg: url(./assets/icons/traton/download.svg);
   --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
+  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
+  --traton-icon-email-svg: url(./assets/icons/traton/email.svg);
   --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
+  --traton-icon-export-svg: url(./assets/icons/traton/export.svg);
+  --traton-icon-export_inactive-svg: url(./assets/icons/traton/export_inactive.svg);
+  --traton-icon-eye-svg: url(./assets/icons/traton/eye.svg);
+  --traton-icon-eye_inactive-svg: url(./assets/icons/traton/eye_inactive.svg);
+  --traton-icon-face_dissatisfied-svg: url(./assets/icons/traton/face_dissatisfied.svg);
+  --traton-icon-face_neutral-svg: url(./assets/icons/traton/face_neutral.svg);
+  --traton-icon-face_satisfied-svg: url(./assets/icons/traton/face_satisfied.svg);
+  --traton-icon-filters-svg: url(./assets/icons/traton/filters.svg);
+  --traton-icon-filters_inactive-svg: url(./assets/icons/traton/filters_inactive.svg);
+  --traton-icon-folder-svg: url(./assets/icons/traton/folder.svg);
+  --traton-icon-fuel_gauge-svg: url(./assets/icons/traton/fuel_gauge.svg);
+  --traton-icon-fuel_gauge_inactive-svg: url(./assets/icons/traton/fuel_gauge_inactive.svg);
+  --traton-icon-global-svg: url(./assets/icons/traton/global.svg);
+  --traton-icon-heart-svg: url(./assets/icons/traton/heart.svg);
+  --traton-icon-heart_inactive-svg: url(./assets/icons/traton/heart_inactive.svg);
+  --traton-icon-home-svg: url(./assets/icons/traton/home.svg);
+  --traton-icon-home_inactive-svg: url(./assets/icons/traton/home_inactive.svg);
+  --traton-icon-image-svg: url(./assets/icons/traton/image.svg);
+  --traton-icon-image_add-svg: url(./assets/icons/traton/image_add.svg);
+  --traton-icon-image_inactive-svg: url(./assets/icons/traton/image_inactive.svg);
+  --traton-icon-image_set-svg: url(./assets/icons/traton/image_set.svg);
   --traton-icon-info-svg: url(./assets/icons/traton/info.svg);
+  --traton-icon-kebab-svg: url(./assets/icons/traton/kebab.svg);
+  --traton-icon-link-svg: url(./assets/icons/traton/link.svg);
+  --traton-icon-link_broken-svg: url(./assets/icons/traton/link_broken.svg);
+  --traton-icon-lock-svg: url(./assets/icons/traton/lock.svg);
+  --traton-icon-meatballs-svg: url(./assets/icons/traton/meatballs.svg);
+  --traton-icon-message-svg: url(./assets/icons/traton/message.svg);
+  --traton-icon-message_inactive-svg: url(./assets/icons/traton/message_inactive.svg);
+  --traton-icon-mileage-svg: url(./assets/icons/traton/mileage.svg);
+  --traton-icon-mileage_inactive-svg: url(./assets/icons/traton/mileage_inactive.svg);
   --traton-icon-minus-svg: url(./assets/icons/traton/minus.svg);
   --traton-icon-notification-svg: url(./assets/icons/traton/notification.svg);
+  --traton-icon-notification_inactive-svg: url(./assets/icons/traton/notification_inactive.svg);
+  --traton-icon-phone-svg: url(./assets/icons/traton/phone.svg);
+  --traton-icon-phone_inactive-svg: url(./assets/icons/traton/phone_inactive.svg);
+  --traton-icon-pin-svg: url(./assets/icons/traton/pin.svg);
+  --traton-icon-pin_inactive-svg: url(./assets/icons/traton/pin_inactive.svg);
+  --traton-icon-placeholder-svg: url(./assets/icons/traton/placeholder.svg);
   --traton-icon-plus-svg: url(./assets/icons/traton/plus.svg);
   --traton-icon-print-svg: url(./assets/icons/traton/print.svg);
+  --traton-icon-print_inactive-svg: url(./assets/icons/traton/print_inactive.svg);
+  --traton-icon-profile-svg: url(./assets/icons/traton/profile.svg);
+  --traton-icon-profile_inactive-svg: url(./assets/icons/traton/profile_inactive.svg);
+  --traton-icon-proportions-svg: url(./assets/icons/traton/proportions.svg);
+  --traton-icon-proportions_inactive-svg: url(./assets/icons/traton/proportions_inactive.svg);
+  --traton-icon-redirect-svg: url(./assets/icons/traton/redirect.svg);
   --traton-icon-refresh-svg: url(./assets/icons/traton/refresh.svg);
+  --traton-icon-report-svg: url(./assets/icons/traton/report.svg);
+  --traton-icon-report_inactive-svg: url(./assets/icons/traton/report_inactive.svg);
+  --traton-icon-save-svg: url(./assets/icons/traton/save.svg);
+  --traton-icon-save_inactive-svg: url(./assets/icons/traton/save_inactive.svg);
   --traton-icon-search-svg: url(./assets/icons/traton/search.svg);
+  --traton-icon-send-svg: url(./assets/icons/traton/send.svg);
+  --traton-icon-send_inactive-svg: url(./assets/icons/traton/send_inactive.svg);
+  --traton-icon-settings-svg: url(./assets/icons/traton/settings.svg);
   --traton-icon-share-svg: url(./assets/icons/traton/share.svg);
   --traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
   --traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
+  --traton-icon-smartphone-svg: url(./assets/icons/traton/smartphone.svg);
+  --traton-icon-smartphone_inactive-svg: url(./assets/icons/traton/smartphone_inactive.svg);
   --traton-icon-sorting-svg: url(./assets/icons/traton/sorting.svg);
+  --traton-icon-speedometer-svg: url(./assets/icons/traton/speedometer.svg);
+  --traton-icon-speedometer_inactive-svg: url(./assets/icons/traton/speedometer_inactive.svg);
   --traton-icon-star-svg: url(./assets/icons/traton/star.svg);
+  --traton-icon-support-svg: url(./assets/icons/traton/support.svg);
   --traton-icon-tick-svg: url(./assets/icons/traton/tick.svg);
+  --traton-icon-timer-svg: url(./assets/icons/traton/timer.svg);
+  --traton-icon-tool-svg: url(./assets/icons/traton/tool.svg);
+  --traton-icon-tool_inactive-svg: url(./assets/icons/traton/tool_inactive.svg);
+  --traton-icon-trash-svg: url(./assets/icons/traton/trash.svg);
+  --traton-icon-trash_inactive-svg: url(./assets/icons/traton/trash_inactive.svg);
   --traton-icon-truck-svg: url(./assets/icons/traton/truck.svg);
+  --traton-icon-unlock-svg: url(./assets/icons/traton/unlock.svg);
+  --traton-icon-upload-svg: url(./assets/icons/traton/upload.svg);
+  --traton-icon-wallet-svg: url(./assets/icons/traton/wallet.svg);
   --traton-icon-warning-svg: url(./assets/icons/traton/warning.svg);
+  --traton-icon-wifi-svg: url(./assets/icons/traton/wifi.svg);
+  --traton-icon-wifi_inactive-svg: url(./assets/icons/traton/wifi_inactive.svg);
 }
 
 /* Traton icon tokens */
 /**
- * Do not edit directly, this file was auto-generated.
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
  */
 .traton {
   --icon-arrow_diagonal-svg: var(--traton-icon-arrow_diagonal-svg);
@@ -762,30 +859,264 @@
   --icon-arrow_left-svg: var(--traton-icon-arrow_left-svg);
   --icon-arrow_right-svg: var(--traton-icon-arrow_right-svg);
   --icon-arrow_up-svg: var(--traton-icon-arrow_up-svg);
+  --icon-back-svg: var(--traton-icon-back-svg);
   --icon-bento-svg: var(--traton-icon-bento-svg);
   --icon-burger-svg: var(--traton-icon-burger-svg);
   --icon-calendar-svg: var(--traton-icon-calendar-svg);
+  --icon-calendar_inactive-svg: var(--traton-icon-calendar_inactive-svg);
+  --icon-card-svg: var(--traton-icon-card-svg);
+  --icon-cart-svg: var(--traton-icon-cart-svg);
   --icon-chevron_down-svg: var(--traton-icon-chevron_down-svg);
   --icon-chevron_left-svg: var(--traton-icon-chevron_left-svg);
   --icon-chevron_right-svg: var(--traton-icon-chevron_right-svg);
   --icon-chevron_up-svg: var(--traton-icon-chevron_up-svg);
+  --icon-clock-svg: var(--traton-icon-clock-svg);
+  --icon-clock_inactive-svg: var(--traton-icon-clock_inactive-svg);
+  --icon-contact-svg: var(--traton-icon-contact-svg);
+  --icon-contact_inactive-svg: var(--traton-icon-contact_inactive-svg);
+  --icon-copy-svg: var(--traton-icon-copy-svg);
   --icon-cross-svg: var(--traton-icon-cross-svg);
-  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
+  --icon-document-svg: var(--traton-icon-document-svg);
+  --icon-document_check-svg: var(--traton-icon-document_check-svg);
+  --icon-document_doc-svg: var(--traton-icon-document_doc-svg);
+  --icon-document_eye-svg: var(--traton-icon-document_eye-svg);
+  --icon-document_pdf-svg: var(--traton-icon-document_pdf-svg);
+  --icon-document_tool-svg: var(--traton-icon-document_tool-svg);
+  --icon-document_word-svg: var(--traton-icon-document_word-svg);
+  --icon-document_wrong-svg: var(--traton-icon-document_wrong-svg);
+  --icon-document_xls-svg: var(--traton-icon-document_xls-svg);
+  --icon-dollar-svg: var(--traton-icon-dollar-svg);
+  --icon-doner-svg: var(--traton-icon-doner-svg);
+  --icon-double_kebab-svg: var(--traton-icon-double_kebab-svg);
+  --icon-download-svg: var(--traton-icon-download-svg);
   --icon-edit-svg: var(--traton-icon-edit-svg);
+  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
+  --icon-email-svg: var(--traton-icon-email-svg);
   --icon-error-svg: var(--traton-icon-error-svg);
+  --icon-export-svg: var(--traton-icon-export-svg);
+  --icon-export_inactive-svg: var(--traton-icon-export_inactive-svg);
+  --icon-eye-svg: var(--traton-icon-eye-svg);
+  --icon-eye_inactive-svg: var(--traton-icon-eye_inactive-svg);
+  --icon-face_dissatisfied-svg: var(--traton-icon-face_dissatisfied-svg);
+  --icon-face_neutral-svg: var(--traton-icon-face_neutral-svg);
+  --icon-face_satisfied-svg: var(--traton-icon-face_satisfied-svg);
+  --icon-filters-svg: var(--traton-icon-filters-svg);
+  --icon-filters_inactive-svg: var(--traton-icon-filters_inactive-svg);
+  --icon-folder-svg: var(--traton-icon-folder-svg);
+  --icon-fuel_gauge-svg: var(--traton-icon-fuel_gauge-svg);
+  --icon-fuel_gauge_inactive-svg: var(--traton-icon-fuel_gauge_inactive-svg);
+  --icon-global-svg: var(--traton-icon-global-svg);
+  --icon-heart-svg: var(--traton-icon-heart-svg);
+  --icon-heart_inactive-svg: var(--traton-icon-heart_inactive-svg);
+  --icon-home-svg: var(--traton-icon-home-svg);
+  --icon-home_inactive-svg: var(--traton-icon-home_inactive-svg);
+  --icon-image-svg: var(--traton-icon-image-svg);
+  --icon-image_add-svg: var(--traton-icon-image_add-svg);
+  --icon-image_inactive-svg: var(--traton-icon-image_inactive-svg);
+  --icon-image_set-svg: var(--traton-icon-image_set-svg);
   --icon-info-svg: var(--traton-icon-info-svg);
+  --icon-kebab-svg: var(--traton-icon-kebab-svg);
+  --icon-link-svg: var(--traton-icon-link-svg);
+  --icon-link_broken-svg: var(--traton-icon-link_broken-svg);
+  --icon-lock-svg: var(--traton-icon-lock-svg);
+  --icon-meatballs-svg: var(--traton-icon-meatballs-svg);
+  --icon-message-svg: var(--traton-icon-message-svg);
+  --icon-message_inactive-svg: var(--traton-icon-message_inactive-svg);
+  --icon-mileage-svg: var(--traton-icon-mileage-svg);
+  --icon-mileage_inactive-svg: var(--traton-icon-mileage_inactive-svg);
   --icon-minus-svg: var(--traton-icon-minus-svg);
   --icon-notification-svg: var(--traton-icon-notification-svg);
+  --icon-notification_inactive-svg: var(--traton-icon-notification_inactive-svg);
+  --icon-phone-svg: var(--traton-icon-phone-svg);
+  --icon-phone_inactive-svg: var(--traton-icon-phone_inactive-svg);
+  --icon-pin-svg: var(--traton-icon-pin-svg);
+  --icon-pin_inactive-svg: var(--traton-icon-pin_inactive-svg);
+  --icon-placeholder-svg: var(--traton-icon-placeholder-svg);
   --icon-plus-svg: var(--traton-icon-plus-svg);
   --icon-print-svg: var(--traton-icon-print-svg);
+  --icon-print_inactive-svg: var(--traton-icon-print_inactive-svg);
+  --icon-profile-svg: var(--traton-icon-profile-svg);
+  --icon-profile_inactive-svg: var(--traton-icon-profile_inactive-svg);
+  --icon-proportions-svg: var(--traton-icon-proportions-svg);
+  --icon-proportions_inactive-svg: var(--traton-icon-proportions_inactive-svg);
+  --icon-redirect-svg: var(--traton-icon-redirect-svg);
   --icon-refresh-svg: var(--traton-icon-refresh-svg);
+  --icon-report-svg: var(--traton-icon-report-svg);
+  --icon-report_inactive-svg: var(--traton-icon-report_inactive-svg);
+  --icon-save-svg: var(--traton-icon-save-svg);
+  --icon-save_inactive-svg: var(--traton-icon-save_inactive-svg);
   --icon-search-svg: var(--traton-icon-search-svg);
+  --icon-send-svg: var(--traton-icon-send-svg);
+  --icon-send_inactive-svg: var(--traton-icon-send_inactive-svg);
+  --icon-settings-svg: var(--traton-icon-settings-svg);
   --icon-share-svg: var(--traton-icon-share-svg);
   --icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
   --icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
+  --icon-smartphone-svg: var(--traton-icon-smartphone-svg);
+  --icon-smartphone_inactive-svg: var(--traton-icon-smartphone_inactive-svg);
   --icon-sorting-svg: var(--traton-icon-sorting-svg);
+  --icon-speedometer-svg: var(--traton-icon-speedometer-svg);
+  --icon-speedometer_inactive-svg: var(--traton-icon-speedometer_inactive-svg);
   --icon-star-svg: var(--traton-icon-star-svg);
+  --icon-support-svg: var(--traton-icon-support-svg);
   --icon-tick-svg: var(--traton-icon-tick-svg);
+  --icon-timer-svg: var(--traton-icon-timer-svg);
+  --icon-tool-svg: var(--traton-icon-tool-svg);
+  --icon-tool_inactive-svg: var(--traton-icon-tool_inactive-svg);
+  --icon-trash-svg: var(--traton-icon-trash-svg);
+  --icon-trash_inactive-svg: var(--traton-icon-trash_inactive-svg);
   --icon-truck-svg: var(--traton-icon-truck-svg);
+  --icon-unlock-svg: var(--traton-icon-unlock-svg);
+  --icon-upload-svg: var(--traton-icon-upload-svg);
+  --icon-wallet-svg: var(--traton-icon-wallet-svg);
   --icon-warning-svg: var(--traton-icon-warning-svg);
+  --icon-wifi-svg: var(--traton-icon-wifi-svg);
+  --icon-wifi_inactive-svg: var(--traton-icon-wifi_inactive-svg);
+}
+
+/* Cross-brand placeholder fallbacks — generated alongside icon.scss */
+/**
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
+ */
+:root,
+.scania {
+  --icon-document_word-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-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-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-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);
 }