@scania/tegel 1.33.0 → 1.34.0-multibrand-beta.0

package/dist-styles/traton-variables.css

@@ -0,0 +1,1148 @@
+/* Spacing */
+:root,
+.traton {
+  /* Radius tokens */
+  --radius-narrow: var(--unit-4);
+  --radius-soft: var(--unit-8);
+  --radius-rounded: var(--unit-32);
+  --radius-circle: 500px;
+  /* Radius for-surface tokens */
+  --radius-surface-clickable: var(--radius-full);
+  --radius-surface-field: var(--unit-2);
+  /* Radius for-area tokens */
+  --radius-area-large: var(--unit-8);
+  --radius-area-small: var(--unit-4);
+  /* Space tokens */
+  --space-tiny: var(--unit-4);
+  --space-small: var(--unit-16);
+  --space-medium: var(--unit-24);
+  --space-large: var(--unit-48);
+  --space-huge: var(--unit-80);
+}
+
+/* Typography */
+/* === 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;
+}
+@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;
+}
+/* === 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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+.traton {
+  /* Font size tokens */
+  --super-type-01-font-size: 216px;
+  --super-type-02-font-size: 156px;
+  --super-type-03-font-size: 112px;
+  --expressive-headline-01-font-size: 80px;
+  --expressive-headline-02-font-size: 56px;
+  --headline-01-font-size: 40px;
+  --headline-02-font-size: 32px;
+  --headline-03-font-size: 24px;
+  --headline-04-font-size: 20px;
+  --headline-05-font-size: 16px;
+  --headline-06-font-size: 14px;
+  --headline-07-font-size: 14px;
+  --paragraph-01-font-size: 24px;
+  --paragraph-02-font-size: 20px;
+  --body-01-font-size: 16px;
+  --body-02-font-size: 14px;
+  --body-link-01-font-size: 16px;
+  --body-link-02-font-size: 14px;
+  --detail-01-font-size: 16px;
+  --detail-02-font-size: 14px;
+  --detail-03-font-size: 14px;
+  --detail-04-font-size: 12px;
+  --detail-05-font-size: 12px;
+  --detail-06-font-size: 10px;
+  --detail-07-font-size: 10px;
+  /* Typography Line Height Tokens */
+  --super-type-01-line-height: 227px;
+  --super-type-02-line-height: 164px;
+  --super-type-03-line-height: 106px;
+  --expressive-headline-01-line-height: 84px;
+  --expressive-headline-02-line-height: 59px;
+  --headline-01-line-height: 42px;
+  --headline-02-line-height: 40px;
+  --headline-03-line-height: 30px;
+  --headline-04-line-height: 25px;
+  --headline-05-line-height: 22px;
+  --headline-06-line-height: 20px;
+  --headline-07-line-height: 18px;
+  --paragraph-01-line-height: 30px;
+  --paragraph-02-line-height: 25px;
+  --body-01-line-height: 22px;
+  --body-02-line-height: 20px;
+  --body-link-01-line-height: 22px;
+  --body-link-02-line-height: 20px;
+  --detail-01-line-height: 22px;
+  --detail-02-line-height: 16px;
+  --detail-03-line-height: 20px;
+  --detail-04-line-height: 17px;
+  --detail-05-line-height: 17px;
+  --detail-06-line-height: 14px;
+  --detail-07-line-height: 14px;
+  /* Typography Font Family Tokens */
+  --super-type-01-font-family: "TRATON Type Display", verdana;
+  --super-type-02-font-family: "TRATON Type Display", verdana;
+  --super-type-03-font-family: "TRATON Type Display", verdana;
+  --expressive-headline-01-font-family: "TRATON Type Display", verdana;
+  --expressive-headline-02-font-family: "TRATON Type Display", verdana;
+  --headline-01-font-family: "TRATON Type Display", verdana;
+  --headline-02-font-family: "TRATON Type Display", verdana;
+  --headline-03-font-family: "TRATON Type Display", verdana;
+  --headline-04-font-family: "TRATON Type Display", verdana;
+  --headline-05-font-family: "TRATON Type Text", verdana;
+  --headline-06-font-family: "TRATON Type Text", verdana;
+  --headline-07-font-family: "TRATON Type Text", verdana;
+  --paragraph-01-font-family: "TRATON Type Display", verdana;
+  --paragraph-02-font-family: "TRATON Type Display", verdana;
+  --body-01-font-family: "TRATON Type Text", verdana;
+  --body-02-font-family: "TRATON Type Text", verdana;
+  --body-link-01-font-family: "TRATON Type Text", verdana;
+  --body-link-02-font-family: "TRATON Type Text", verdana;
+  --detail-01-font-family: "TRATON Type Text", verdana;
+  --detail-02-font-family: "TRATON Type Text", verdana;
+  --detail-03-font-family: "TRATON Type Text", verdana;
+  --detail-04-font-family: "TRATON Type Text", verdana;
+  --detail-05-font-family: "TRATON Type Text", verdana;
+  --detail-06-font-family: "TRATON Type Text", verdana;
+  --detail-07-font-family: "TRATON Type Text", verdana;
+  /* Typography Font Weight Tokens */
+  --super-type-01-font-weight: normal;
+  --super-type-02-font-weight: normal;
+  --super-type-03-font-weight: normal;
+  --expressive-headline-01-font-weight: normal;
+  --expressive-headline-02-font-weight: normal;
+  --headline-01-font-weight: normal;
+  --headline-02-font-weight: normal;
+  --headline-03-font-weight: normal;
+  --headline-04-font-weight: normal;
+  --headline-05-font-weight: 600;
+  --headline-06-font-weight: 600;
+  --headline-07-font-weight: 600;
+  --paragraph-01-font-weight: normal;
+  --paragraph-02-font-weight: normal;
+  --body-01-font-weight: normal;
+  --body-02-font-weight: normal;
+  --body-link-01-font-weight: normal;
+  --body-link-02-font-weight: normal;
+  --detail-01-font-weight: normal;
+  --detail-02-font-weight: normal;
+  --detail-03-font-weight: normal;
+  --detail-04-font-weight: 600;
+  --detail-05-font-weight: normal;
+  --detail-06-font-weight: 600;
+  --detail-07-font-weight: normal;
+  /* Typography Letter-Spacing (Kerning) Tokens */
+  --super-type-01-letter-spacing: 1.08px;
+  --super-type-02-letter-spacing: 0.78px;
+  --super-type-03-letter-spacing: 0.56px;
+  --expressive-headline-01-letter-spacing: 0.4px;
+  --expressive-headline-02-letter-spacing: 0.28px;
+  --headline-01-letter-spacing: 0;
+  --headline-02-letter-spacing: 0;
+  --headline-03-letter-spacing: 0;
+  --headline-04-letter-spacing: 0;
+  --headline-05-letter-spacing: 0;
+  --headline-06-letter-spacing: 0;
+  --headline-07-letter-spacing: 0;
+  --paragraph-01-letter-spacing: 0;
+  --paragraph-02-letter-spacing: 0;
+  --body-01-letter-spacing: 0;
+  --body-02-letter-spacing: 0;
+  --body-link-01-letter-spacing: 0;
+  --body-link-02-letter-spacing: 0;
+  --detail-01-letter-spacing: 0;
+  --detail-02-letter-spacing: 0;
+  --detail-03-letter-spacing: 0;
+  --detail-04-letter-spacing: 0.48px;
+  --detail-05-letter-spacing: 0;
+  --detail-06-letter-spacing: 0.4px;
+  --detail-07-letter-spacing: 0;
+  /* Text transform tokens */
+  --super-type-01-text-transform: uppercase;
+  --super-type-02-text-transform: uppercase;
+  --super-type-03-text-transform: uppercase;
+  --expressive-headline-01-text-transform: uppercase;
+  --expressive-headline-02-text-transform: uppercase;
+  --headline-01-text-transform: none;
+  --headline-02-text-transform: none;
+  --headline-03-text-transform: none;
+  --headline-04-text-transform: none;
+  --headline-05-text-transform: none;
+  --headline-06-text-transform: none;
+  --headline-07-text-transform: none;
+  --paragraph-01-text-transform: none;
+  --paragraph-02-text-transform: none;
+  --body-01-text-transform: none;
+  --body-02-text-transform: none;
+  --body-link-01-text-transform: none;
+  --body-link-02-text-transform: none;
+  --detail-01-text-transform: none;
+  --detail-02-text-transform: none;
+  --detail-03-text-transform: none;
+  --detail-04-text-transform: uppercase;
+  --detail-05-text-transform: none;
+  --detail-06-text-transform: uppercase;
+  --detail-07-text-transform: none;
+}
+
+/* Traton primitive tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --traton-color-yellow-50: #fff6db;
+  --traton-color-yellow-100: #ffe9aa;
+  --traton-color-yellow-150: #ffdc7a;
+  --traton-color-yellow-200: #ffd04a;
+  --traton-color-yellow-300: #ffc00d;
+  --traton-color-yellow-400: #e5ad0c;
+  --traton-color-yellow-500: #bf900a;
+  --traton-color-yellow-600: #997308;
+  --traton-color-yellow-700: #735606;
+  --traton-color-yellow-800: #594305;
+  --traton-color-yellow-850: #433204;
+  --traton-color-yellow-900: #302403;
+  --traton-color-yellow-950: #241b00;
+  --traton-color-yellow-1000: #1a1300;
+  --traton-color-blue-50: #f8fcfc;
+  --traton-color-blue-100: #e9f5f6;
+  --traton-color-blue-150: #d9edf0;
+  --traton-color-blue-200: #b3dce1;
+  --traton-color-blue-300: #8ccad2;
+  --traton-color-blue-400: #66b8c4;
+  --traton-color-blue-500: #2d9ead;
+  --traton-color-blue-600: #008294;
+  --traton-color-blue-700: #006371;
+  --traton-color-blue-800: #004852;
+  --traton-color-blue-850: #003137;
+  --traton-color-blue-900: #002429;
+  --traton-color-blue-950: #001d21;
+  --traton-color-blue-1000: #001214;
+  --traton-color-grey-50: #fcfbf7;
+  --traton-color-grey-100: #f6f3e9;
+  --traton-color-grey-150: #ebe7dd;
+  --traton-color-grey-200: #d6d4c9;
+  --traton-color-grey-300: #c2bfb6;
+  --traton-color-grey-400: #a6a49c;
+  --traton-color-grey-500: #8c8a84;
+  --traton-color-grey-600: #73716c;
+  --traton-color-grey-700: #595854;
+  --traton-color-grey-800: #454441;
+  --traton-color-grey-850: #333230;
+  --traton-color-grey-900: #252423;
+  --traton-color-grey-950: #1a1a19;
+  --traton-color-grey-1000: #100f0f;
+  --traton-color-base-warm-white: #fcfbf7;
+  --traton-color-base-neutral-white: #fff;
+  --traton-color-base-neutral-black: #000;
+  --traton-color-transparent-200: rgba(26, 26, 25, 0.15);
+  --traton-color-transparent-400: rgba(26, 26, 25, 0.36);
+  --traton-color-transparent-500: rgba(26, 26, 25, 0.5);
+  --traton-color-transparent-600: rgba(26, 26, 25, 0.62);
+  --traton-color-transparent-700: rgba(26, 26, 25, 0.76);
+  --traton-color-transparent-950: #001d21;
+  --traton-color-transparent-inverse-200: rgba(217, 237, 240, 0.33);
+  --traton-color-transparent-inverse-400: rgba(217, 237, 240, 0.49);
+  --traton-color-transparent-inverse-500: rgba(217, 237, 240, 0.63);
+  --traton-color-transparent-inverse-600: rgba(217, 237, 240, 0.75);
+  --traton-color-transparent-inverse-700: rgba(217, 237, 240, 0.87);
+  --traton-color-transparent-inverse-950: #fff;
+  --traton-color-transparent-scrim-light: rgba(0, 0, 0, 0.4);
+  --traton-color-transparent-scrim-dark: rgba(0, 0, 0, 0.6);
+  --traton-color-transparent-invisible-light: rgba(255, 255, 255, 0);
+  --traton-color-transparent-invisible-dark: rgba(0, 0, 0, 0);
+  --traton-color-red-50: #ffe0e0;
+  --traton-color-red-100: #f7baba;
+  --traton-color-red-150: #f28686;
+  --traton-color-red-200: #ec5655;
+  --traton-color-red-300: #d83b3a;
+  --traton-color-red-400: #bc302f;
+  --traton-color-red-500: #a02f2e;
+  --traton-color-red-600: #852929;
+  --traton-color-red-700: #6d2323;
+  --traton-color-red-800: #551b1b;
+  --traton-color-red-850: #411616;
+  --traton-color-red-900: #311111;
+  --traton-color-red-950: #240d0d;
+  --traton-color-red-1000: #140808;
+  --traton-color-green-50: #d1fad1;
+  --traton-color-green-100: #adebb1;
+  --traton-color-green-150: #81d585;
+  --traton-color-green-200: #5abf5c;
+  --traton-color-green-300: #3ba63f;
+  --traton-color-green-400: #38943c;
+  --traton-color-green-500: #318035;
+  --traton-color-green-600: #2b6c2e;
+  --traton-color-green-700: #235727;
+  --traton-color-green-800: #1d441f;
+  --traton-color-green-850: #153217;
+  --traton-color-green-900: #102311;
+  --traton-color-green-950: #0d1b0e;
+  --traton-color-green-1000: #080c08;
+  --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-unit-0: 0;
+  --traton-unit-1: 1px;
+  --traton-unit-2: 2px;
+  --traton-unit-4: 4px;
+  --traton-unit-8: 8px;
+  --traton-unit-12: 12px;
+  --traton-unit-16: 16px;
+  --traton-unit-20: 20px;
+  --traton-unit-24: 24px;
+  --traton-unit-32: 32px;
+  --traton-unit-40: 40px;
+  --traton-unit-48: 48px;
+  --traton-unit-56: 56px;
+  --traton-unit-64: 64px;
+  --traton-unit-80: 80px;
+  --traton-unit-96: 96px;
+  --traton-unit-120: 120px;
+  --traton-unit-9999: 9999px;
+}
+
+/* Traton color tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.traton,
+.traton .tds-mode-light {
+  --color-background-base: var(--traton-color-grey-50);
+  --color-background-accent-primary-default: var(--traton-color-blue-800);
+  --color-background-accent-primary-disabled: var(--traton-color-blue-100);
+  --color-background-accent-primary-hover: var(--traton-color-blue-850);
+  --color-background-accent-primary-pressed: var(--traton-color-blue-900);
+  --color-background-accent-primary-focus: var(--traton-color-blue-850);
+  --color-background-accent-primary-inverse-default: var(--traton-color-grey-300);
+  --color-background-accent-primary-inverse-hover: var(--traton-color-grey-200);
+  --color-background-accent-primary-inverse-pressed: var(--traton-color-grey-400);
+  --color-background-accent-primary-inverse-focus: var(--traton-color-grey-100);
+  --color-background-accent-primary-inverse-disabled: var(--traton-color-grey-900);
+  --color-background-accent-danger-default: var(--traton-color-red-300);
+  --color-background-accent-danger-hover: var(--traton-color-red-400);
+  --color-background-accent-danger-pressed: var(--traton-color-red-600);
+  --color-background-accent-danger-focus: var(--traton-color-red-400);
+  --color-background-accent-danger-disabled: var(--traton-color-red-50);
+  --color-background-layer-01: var(--traton-color-grey-100);
+  --color-background-layer-02: var(--traton-color-grey-50);
+  --color-background-layer-03: var(--traton-color-grey-100);
+  --color-background-overlay: var(--traton-color-transparent-scrim-light);
+  --color-background-inverse-base: var(--traton-color-grey-1000);
+  --color-background-inverse-layer-01: var(--traton-color-grey-950);
+  --color-background-inverse-layer-02: var(--traton-color-grey-900);
+  --color-background-inverse-layer-03: var(--traton-color-grey-850);
+  --color-background-inverse-top: var(--traton-color-grey-900);
+  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-light);
+  --color-background-surface-100: var(--traton-color-grey-150);
+  --color-background-surface-200: var(--traton-color-grey-200);
+  --color-background-surface-300: var(--traton-color-grey-300);
+  --color-background-surface-400: var(--traton-color-grey-400);
+  --color-background-surface-500: var(--traton-color-grey-500);
+  --color-background-surface-600: var(--traton-color-grey-600);
+  --color-background-surface-700: var(--traton-color-grey-700);
+  --color-background-surface-800: var(--traton-color-grey-800);
+  --color-background-surface-900: var(--traton-color-grey-900);
+  --color-background-surface-1000: var(--traton-color-grey-950);
+  --color-background-top: var(--traton-color-grey-50);
+  --color-system-warning-default: var(--traton-color-yellow-300);
+  --color-system-warning-discrete: var(--traton-color-yellow-100);
+  --color-system-warning-strong: var(--traton-color-yellow-800);
+  --color-system-warning-defined: var(--traton-color-yellow-600);
+  --color-system-warning-subtle: var(--traton-color-yellow-200);
+  --color-system-success-default: var(--traton-color-green-300);
+  --color-system-success-discrete: var(--traton-color-green-50);
+  --color-system-success-strong: var(--traton-color-green-850);
+  --color-system-success-defined: var(--traton-color-green-500);
+  --color-system-success-subtle: var(--traton-color-green-200);
+  --color-system-info-default: var(--traton-color-blue-500);
+  --color-system-info-discrete: var(--traton-color-blue-150);
+  --color-system-info-strong: var(--traton-color-blue-800);
+  --color-system-info-defined: var(--traton-color-blue-800);
+  --color-system-info-subtle: var(--traton-color-blue-400);
+  --color-system-danger-default: var(--traton-color-red-300);
+  --color-system-danger-discrete: var(--traton-color-red-50);
+  --color-system-danger-strong: var(--traton-color-red-850);
+  --color-system-danger-defined: var(--traton-color-red-500);
+  --color-system-danger-subtle: var(--traton-color-red-200);
+  --color-foreground-text-accent-default: var(--traton-color-blue-700);
+  --color-foreground-text-accent-brand: var(--traton-color-blue-950);
+  --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-700);
+  --color-foreground-text-accent-visited: var(--traton-color-blue-950);
+  --color-foreground-text-strong: var(--traton-color-transparent-950);
+  --color-foreground-text-defined: var(--traton-color-transparent-700);
+  --color-foreground-text-subtle: var(--traton-color-transparent-500);
+  --color-foreground-text-inverse-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-text-inverse-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-text-inverse-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-text-inverse-brand: var(--traton-color-base-neutral-white);
+  --color-foreground-text-brand: var(--traton-color-blue-950);
+  --color-foreground-text-disabled: var(--traton-color-transparent-400);
+  --color-foreground-text-soft: var(--traton-color-transparent-600);
+  --color-foreground-border-inverse-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-border-inverse-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
+  --color-foreground-border-inverse-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-border-strong: var(--traton-color-transparent-950);
+  --color-foreground-border-soft: var(--traton-color-transparent-600);
+  --color-foreground-border-subtle: var(--traton-color-transparent-500);
+  --color-foreground-border-discrete: var(--traton-color-transparent-200);
+  --color-foreground-border-accent-link: var(--traton-color-yellow-300);
+  --color-foreground-border-accent-focus: var(--traton-color-blue-500);
+  --color-foreground-border-defined: var(--traton-color-transparent-700);
+  --color-foreground-border-disabled: var(--traton-color-transparent-400);
+  --color-foreground-icon-strong: var(--traton-color-transparent-950);
+  --color-foreground-icon-defined: var(--traton-color-transparent-700);
+  --color-foreground-icon-soft: var(--traton-color-transparent-600);
+  --color-foreground-icon-subtle: var(--traton-color-transparent-500);
+  --color-foreground-icon-disabled: var(--traton-color-transparent-400);
+  --color-foreground-icon-discrete: var(--traton-color-transparent-200);
+  --color-foreground-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
+  --color-foreground-icon-accent-default: var(--traton-color-blue-700);
+  --color-foreground-icon-accent-visited: var(--traton-color-blue-950);
+  --color-foreground-icon-accent-brand: var(--traton-color-blue-950);
+  --color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-700);
+  --color-brand-neutral-white: var(--traton-color-base-neutral-white);
+  --color-brand-neutral-black: var(--traton-color-base-neutral-black);
+  --color-brand-primary-50: var(--traton-color-blue-50);
+  --color-brand-primary-100: var(--traton-color-blue-100);
+  --color-brand-primary-200: var(--traton-color-blue-200);
+  --color-brand-primary-300: var(--traton-color-blue-300);
+  --color-brand-primary-400: var(--traton-color-blue-400);
+  --color-brand-primary-500: var(--traton-color-blue-500);
+  --color-brand-primary-600: var(--traton-color-blue-600);
+  --color-brand-primary-700: var(--traton-color-blue-700);
+  --color-brand-primary-800: var(--traton-color-blue-800);
+  --color-brand-primary-900: var(--traton-color-blue-900);
+  --color-brand-secondary-50: var(--traton-color-yellow-50);
+  --color-brand-secondary-100: var(--traton-color-yellow-100);
+  --color-brand-secondary-200: var(--traton-color-yellow-200);
+  --color-brand-secondary-300: var(--traton-color-yellow-300);
+  --color-brand-secondary-400: var(--traton-color-yellow-400);
+  --color-brand-secondary-500: var(--traton-color-yellow-500);
+  --color-brand-secondary-600: var(--traton-color-yellow-600);
+  --color-brand-secondary-700: var(--traton-color-yellow-700);
+  --color-brand-secondary-800: var(--traton-color-yellow-800);
+  --color-brand-secondary-900: var(--traton-color-yellow-900);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.traton .tds-mode-dark {
+  --color-background-base: var(--traton-color-blue-1000);
+  --color-background-accent-primary-default: var(--traton-color-grey-300);
+  --color-background-accent-primary-disabled: var(--traton-color-grey-900);
+  --color-background-accent-primary-hover: var(--traton-color-grey-200);
+  --color-background-accent-primary-pressed: var(--traton-color-grey-400);
+  --color-background-accent-primary-focus: var(--traton-color-grey-100);
+  --color-background-accent-primary-inverse-default: var(--traton-color-blue-800);
+  --color-background-accent-primary-inverse-hover: var(--traton-color-blue-850);
+  --color-background-accent-primary-inverse-pressed: var(--traton-color-blue-900);
+  --color-background-accent-primary-inverse-focus: var(--traton-color-blue-850);
+  --color-background-accent-primary-inverse-disabled: var(--traton-color-blue-100);
+  --color-background-accent-danger-default: var(--traton-color-red-300);
+  --color-background-accent-danger-hover: var(--traton-color-red-400);
+  --color-background-accent-danger-pressed: var(--traton-color-red-600);
+  --color-background-accent-danger-focus: var(--traton-color-red-400);
+  --color-background-accent-danger-disabled: var(--traton-color-red-900);
+  --color-background-layer-01: var(--traton-color-blue-950);
+  --color-background-layer-02: var(--traton-color-blue-900);
+  --color-background-layer-03: var(--traton-color-blue-850);
+  --color-background-overlay: var(--traton-color-transparent-scrim-dark);
+  --color-background-inverse-base: var(--traton-color-blue-50);
+  --color-background-inverse-layer-01: var(--traton-color-blue-100);
+  --color-background-inverse-layer-02: var(--traton-color-blue-150);
+  --color-background-inverse-layer-03: var(--traton-color-blue-200);
+  --color-background-inverse-top: var(--traton-color-blue-50);
+  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-dark);
+  --color-background-surface-100: var(--traton-color-blue-900);
+  --color-background-surface-200: var(--traton-color-blue-850);
+  --color-background-surface-300: var(--traton-color-blue-800);
+  --color-background-surface-400: var(--traton-color-blue-700);
+  --color-background-surface-500: var(--traton-color-blue-600);
+  --color-background-surface-600: var(--traton-color-blue-500);
+  --color-background-surface-700: var(--traton-color-blue-400);
+  --color-background-surface-800: var(--traton-color-blue-300);
+  --color-background-surface-900: var(--traton-color-blue-200);
+  --color-background-surface-1000: var(--traton-color-blue-150);
+  --color-background-top: var(--traton-color-blue-900);
+  --color-system-warning-default: var(--traton-color-yellow-300);
+  --color-system-warning-discrete: var(--traton-color-yellow-800);
+  --color-system-warning-strong: var(--traton-color-yellow-100);
+  --color-system-warning-defined: var(--traton-color-yellow-200);
+  --color-system-warning-subtle: var(--traton-color-yellow-400);
+  --color-system-success-default: var(--traton-color-green-300);
+  --color-system-success-discrete: var(--traton-color-green-850);
+  --color-system-success-strong: var(--traton-color-green-50);
+  --color-system-success-defined: var(--traton-color-green-200);
+  --color-system-success-subtle: var(--traton-color-green-400);
+  --color-system-info-default: var(--traton-color-blue-500);
+  --color-system-info-discrete: var(--traton-color-blue-850);
+  --color-system-info-strong: var(--traton-color-blue-100);
+  --color-system-info-defined: var(--traton-color-blue-100);
+  --color-system-info-subtle: var(--traton-color-blue-600);
+  --color-system-danger-default: var(--traton-color-red-300);
+  --color-system-danger-discrete: var(--traton-color-red-850);
+  --color-system-danger-strong: var(--traton-color-red-50);
+  --color-system-danger-defined: var(--traton-color-red-100);
+  --color-system-danger-subtle: var(--traton-color-red-500);
+  --color-foreground-text-accent-default: var(--traton-color-blue-400);
+  --color-foreground-text-accent-brand: var(--traton-color-blue-50);
+  --color-foreground-text-accent-brand-inverse: var(--traton-color-blue-500);
+  --color-foreground-text-accent-visited: var(--traton-color-blue-150);
+  --color-foreground-text-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-text-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-text-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-text-inverse-strong: var(--traton-color-transparent-950);
+  --color-foreground-text-inverse-soft: var(--traton-color-transparent-600);
+  --color-foreground-text-inverse-subtle: var(--traton-color-transparent-500);
+  --color-foreground-text-inverse-defined: var(--traton-color-transparent-700);
+  --color-foreground-text-inverse-disabled: var(--traton-color-transparent-400);
+  --color-foreground-text-inverse-brand: var(--traton-color-transparent-950);
+  --color-foreground-text-brand: var(--traton-color-base-neutral-white);
+  --color-foreground-text-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-text-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-border-inverse-strong: var(--traton-color-transparent-950);
+  --color-foreground-border-inverse-soft: var(--traton-color-transparent-600);
+  --color-foreground-border-inverse-subtle: var(--traton-color-transparent-500);
+  --color-foreground-border-inverse-discrete: var(--traton-color-transparent-200);
+  --color-foreground-border-inverse-defined: var(--traton-color-transparent-700);
+  --color-foreground-border-inverse-disabled: var(--traton-color-transparent-400);
+  --color-foreground-border-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-border-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-border-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-border-discrete: var(--traton-color-transparent-inverse-200);
+  --color-foreground-border-accent-link: var(--traton-color-yellow-300);
+  --color-foreground-border-accent-focus: var(--traton-color-yellow-400);
+  --color-foreground-border-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-border-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-icon-strong: var(--traton-color-transparent-inverse-950);
+  --color-foreground-icon-defined: var(--traton-color-transparent-inverse-700);
+  --color-foreground-icon-soft: var(--traton-color-transparent-inverse-600);
+  --color-foreground-icon-subtle: var(--traton-color-transparent-inverse-500);
+  --color-foreground-icon-disabled: var(--traton-color-transparent-inverse-400);
+  --color-foreground-icon-discrete: var(--traton-color-transparent-inverse-200);
+  --color-foreground-icon-inverse-strong: var(--traton-color-transparent-950);
+  --color-foreground-icon-inverse-defined: var(--traton-color-transparent-700);
+  --color-foreground-icon-inverse-soft: var(--traton-color-transparent-600);
+  --color-foreground-icon-inverse-subtle: var(--traton-color-transparent-500);
+  --color-foreground-icon-inverse-disabled: var(--traton-color-transparent-400);
+  --color-foreground-icon-inverse-discrete: var(--traton-color-transparent-200);
+  --color-foreground-icon-accent-default: var(--traton-color-blue-400);
+  --color-foreground-icon-accent-visited: var(--traton-color-blue-150);
+  --color-foreground-icon-accent-brand: var(--traton-color-blue-50);
+  --color-foreground-icon-accent-brand-inverse: var(--traton-color-blue-500);
+  --color-brand-neutral-white: var(--traton-color-base-neutral-white);
+  --color-brand-neutral-black: var(--traton-color-base-neutral-black);
+  --color-brand-primary-50: var(--traton-color-blue-50);
+  --color-brand-primary-100: var(--traton-color-blue-100);
+  --color-brand-primary-200: var(--traton-color-blue-200);
+  --color-brand-primary-300: var(--traton-color-blue-300);
+  --color-brand-primary-400: var(--traton-color-blue-400);
+  --color-brand-primary-500: var(--traton-color-blue-500);
+  --color-brand-primary-600: var(--traton-color-blue-600);
+  --color-brand-primary-700: var(--traton-color-blue-700);
+  --color-brand-primary-800: var(--traton-color-blue-800);
+  --color-brand-primary-900: var(--traton-color-blue-900);
+  --color-brand-secondary-50: var(--traton-color-yellow-50);
+  --color-brand-secondary-100: var(--traton-color-yellow-100);
+  --color-brand-secondary-200: var(--traton-color-yellow-200);
+  --color-brand-secondary-300: var(--traton-color-yellow-300);
+  --color-brand-secondary-400: var(--traton-color-yellow-400);
+  --color-brand-secondary-500: var(--traton-color-yellow-500);
+  --color-brand-secondary-600: var(--traton-color-yellow-600);
+  --color-brand-secondary-700: var(--traton-color-yellow-700);
+  --color-brand-secondary-800: var(--traton-color-yellow-800);
+  --color-brand-secondary-900: var(--traton-color-yellow-900);
+}
+
+/* Traton logotype tokens */
+:root {
+  --traton-logotype-white-png: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-white.png");
+  --traton-logotype-white-png-local: url("./assets/logos/traton/traton-logotype-white.png");
+  --traton-logotype-white-svg: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-white.svg");
+  --traton-logotype-white-svg-local: url("./assets/logos/traton/traton-logotype-white.svg");
+  --traton-logotype-black-png: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-black.png");
+  --traton-logotype-black-png-local: url("./assets/logos/traton/traton-logotype-black.png");
+  --traton-logotype-black-svg: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-black.svg");
+  --traton-logotype-black-svg-local: url("./assets/logos/traton/traton-logotype-black.svg");
+  --traton-logotype-blue-png: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-blue.png");
+  --traton-logotype-blue-png-local: url("./assets/logos/traton/traton-logotype-blue.png");
+  --traton-logotype-blue-svg: url("https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-blue.svg");
+  --traton-logotype-blue-svg-local: url("./assets/logos/traton/traton-logotype-blue.svg");
+}
+
+/* Traton dimension tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.traton {
+  --dimension-space-tiny: var(--traton-unit-4);
+  --dimension-space-small: var(--traton-unit-16);
+  --dimension-space-medium: var(--traton-unit-24);
+  --dimension-space-large: var(--traton-unit-48);
+  --dimension-space-huge: var(--traton-unit-80);
+  --dimension-radius-for-surface-clickable: var(--traton-unit-9999);
+  --dimension-radius-for-surface-field: var(--traton-unit-2);
+  --dimension-radius-for-surface-inverse: var(--traton-unit-2);
+  --dimension-radius-narrow: var(--traton-unit-4);
+  --dimension-radius-soft: var(--traton-unit-8);
+  --dimension-radius-rounded: var(--traton-unit-32);
+  --dimension-radius-circle: var(--traton-unit-9999);
+  --dimension-radius-for-area-large: var(--traton-unit-8);
+  --dimension-radius-for-area-small: var(--traton-unit-4);
+  --dimension-radius-focus-width: var(--traton-unit-4);
+}
+
+/* Traton typography tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.traton {
+  --text-display-01-text-transform: uppercase;
+  --text-display-01-letter-spacing: 1.08px;
+  --text-display-01-font-size: 216px;
+  --text-display-01-line-height: 227px;
+  --text-display-02-text-transform: uppercase;
+  --text-display-02-font-size: 156px;
+  --text-display-02-line-height: 164px;
+  --text-display-02-letter-spacing: 0.78px;
+  --text-display-03-text-transform: uppercase;
+  --text-display-03-font-size: 112px;
+  --text-display-03-line-height: 118px;
+  --text-display-03-letter-spacing: 0.56px;
+  --text-display-04-text-transform: uppercase;
+  --text-display-04-font-size: 80px;
+  --text-display-04-line-height: 84px;
+  --text-display-04-letter-spacing: 0.4px;
+  --text-display-05-text-transform: uppercase;
+  --text-display-05-font-size: 56px;
+  --text-display-05-line-height: 59px;
+  --text-display-05-letter-spacing: 0.28px;
+  --text-headline-01-text-transform: none;
+  --text-headline-01-font-size: 40px;
+  --text-headline-01-line-height: 42px;
+  --text-headline-01-letter-spacing: 0;
+  --text-headline-02-text-transform: none;
+  --text-headline-02-font-size: 32px;
+  --text-headline-02-line-height: 40px;
+  --text-headline-02-letter-spacing: 0;
+  --text-headline-03-text-transform: none;
+  --text-headline-03-font-size: 24px;
+  --text-headline-03-line-height: 30px;
+  --text-headline-03-letter-spacing: 0;
+  --text-headline-04-text-transform: none;
+  --text-headline-04-font-size: 20px;
+  --text-headline-04-line-height: 25px;
+  --text-headline-04-letter-spacing: 0;
+  --text-headline-05-text-transform: none;
+  --text-headline-05-font-size: 16px;
+  --text-headline-05-line-height: 22px;
+  --text-headline-05-letter-spacing: 0;
+  --text-headline-06-text-transform: none;
+  --text-headline-06-font-size: 14px;
+  --text-headline-06-line-height: 20px;
+  --text-headline-06-letter-spacing: 0;
+  --text-paragraph-01-text-transform: none;
+  --text-paragraph-01-font-size: 24px;
+  --text-paragraph-01-line-height: 30px;
+  --text-paragraph-01-letter-spacing: 0;
+  --text-paragraph-02-text-transform: none;
+  --text-paragraph-02-font-size: 20px;
+  --text-paragraph-02-line-height: 25px;
+  --text-paragraph-02-letter-spacing: 0;
+  --text-body-01-text-transform: none;
+  --text-body-01-font-size: 16px;
+  --text-body-01-line-height: 22px;
+  --text-body-01-letter-spacing: 0;
+  --text-body-02-text-transform: none;
+  --text-body-02-font-size: 14px;
+  --text-body-02-line-height: 20px;
+  --text-body-02-letter-spacing: 0;
+  --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;
+  --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;
+  --text-component-label-01-text-transform: none;
+  --text-component-label-01-font-size: 12px;
+  --text-component-label-01-line-height: 17px;
+  --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: 14px;
+  --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: 18px;
+  --text-component-title-01-letter-spacing: 0;
+  --text-component-title-01-letter-spacing-2: 0;
+  --text-component-title-01-font-size-2: 14px;
+  --text-component-title-01-line-height-2: 18px;
+  --text-component-title-02-text-transform: none;
+  --text-component-title-02-font-size: 10px;
+  --text-component-title-02-line-height: 14px;
+  --text-component-title-02-letter-spacing: 0.4px;
+  --text-link-01-text-transform: none;
+  --text-link-01-font-size: 16px;
+  --text-link-01-line-height: 22px;
+  --text-link-01-letter-spacing: 0;
+  --text-link-02-text-transform: none;
+  --text-link-02-font-size: 14px;
+  --text-link-02-line-height: 20px;
+  --text-link-02-letter-spacing: 0;
+  --text-display-01-font-family: var(--traton-font-family-display);
+  --text-display-01-font-weight: var(--traton-font-weight-medium);
+  --text-display-02-font-family: var(--traton-font-family-display);
+  --text-display-02-font-weight: var(--traton-font-weight-medium);
+  --text-display-03-font-family: var(--traton-font-family-display);
+  --text-display-03-font-weight: var(--traton-font-weight-medium);
+  --text-display-04-font-family: var(--traton-font-family-display);
+  --text-display-04-font-weight: var(--traton-font-weight-medium);
+  --text-display-05-font-family: var(--traton-font-family-display);
+  --text-display-05-font-weight: var(--traton-font-weight-medium);
+  --text-headline-01-font-family: var(--traton-font-family-display);
+  --text-headline-01-font-weight: var(--traton-font-weight-medium);
+  --text-headline-02-font-family: var(--traton-font-family-display);
+  --text-headline-02-font-weight: var(--traton-font-weight-medium);
+  --text-headline-03-font-family: var(--traton-font-family-display);
+  --text-headline-03-font-weight: var(--traton-font-weight-medium);
+  --text-headline-04-font-family: var(--traton-font-family-display);
+  --text-headline-04-font-weight: var(--traton-font-weight-medium);
+  --text-headline-05-font-family: var(--traton-font-family-default);
+  --text-headline-05-font-weight: var(--traton-font-weight-semi-bold);
+  --text-headline-06-font-family: var(--traton-font-family-default);
+  --text-headline-06-font-weight: var(--traton-font-weight-semi-bold);
+  --text-paragraph-01-font-family: var(--traton-font-family-display);
+  --text-paragraph-01-font-weight: var(--traton-font-weight-medium);
+  --text-paragraph-02-font-family: var(--traton-font-family-display);
+  --text-paragraph-02-font-weight: var(--traton-font-weight-medium);
+  --text-body-01-font-family: var(--traton-font-family-default);
+  --text-body-01-font-weight: var(--traton-font-weight-regular);
+  --text-body-02-font-family: var(--traton-font-family-default);
+  --text-body-02-font-weight: var(--traton-font-weight-regular);
+  --text-component-text-01-font-family: var(--traton-font-family-default);
+  --text-component-text-01-font-weight: var(--traton-font-weight-regular);
+  --text-component-text-02-font-family: var(--traton-font-family-default);
+  --text-component-text-02-font-weight: var(--traton-font-weight-regular);
+  --text-component-label-01-font-family: var(--traton-font-family-default);
+  --text-component-label-01-font-weight: var(--traton-font-weight-medium);
+  --text-component-label-02-font-family: var(--traton-font-family-default);
+  --text-component-label-02-font-weight: var(--traton-font-weight-medium);
+  --text-component-title-01-font-family: var(--traton-font-family-default);
+  --text-component-title-01-font-family-2: var(--traton-font-family-default);
+  --text-component-title-01-font-weight: var(--traton-font-weight-semi-bold);
+  --text-component-title-01-font-weight-2: var(--traton-font-weight-semi-bold);
+  --text-component-title-02-font-family: var(--traton-font-family-default);
+  --text-component-title-02-font-weight: var(--traton-font-weight-semi-bold);
+  --text-link-01-font-family: var(--traton-font-family-default);
+  --text-link-01-font-weight: var(--traton-font-weight-regular);
+  --text-link-02-font-family: var(--traton-font-family-default);
+  --text-link-02-font-weight: var(--traton-font-weight-regular);
+}
+
+/* Traton specific imports */
+.traton {
+  /* Font size tokens */
+  --super-type-01-font-size: 216px;
+  --super-type-02-font-size: 156px;
+  --super-type-03-font-size: 112px;
+  --expressive-headline-01-font-size: 80px;
+  --expressive-headline-02-font-size: 56px;
+  --headline-01-font-size: 40px;
+  --headline-02-font-size: 32px;
+  --headline-03-font-size: 24px;
+  --headline-04-font-size: 20px;
+  --headline-05-font-size: 16px;
+  --headline-06-font-size: 14px;
+  --headline-07-font-size: 14px;
+  --paragraph-01-font-size: 24px;
+  --paragraph-02-font-size: 20px;
+  --body-01-font-size: 16px;
+  --body-02-font-size: 14px;
+  --body-link-01-font-size: 16px;
+  --body-link-02-font-size: 14px;
+  --detail-01-font-size: 16px;
+  --detail-02-font-size: 14px;
+  --detail-03-font-size: 14px;
+  --detail-04-font-size: 12px;
+  --detail-05-font-size: 12px;
+  --detail-06-font-size: 10px;
+  --detail-07-font-size: 10px;
+  /* Typography Line Height Tokens */
+  --super-type-01-line-height: 227px;
+  --super-type-02-line-height: 164px;
+  --super-type-03-line-height: 106px;
+  --expressive-headline-01-line-height: 84px;
+  --expressive-headline-02-line-height: 59px;
+  --headline-01-line-height: 42px;
+  --headline-02-line-height: 40px;
+  --headline-03-line-height: 30px;
+  --headline-04-line-height: 25px;
+  --headline-05-line-height: 22px;
+  --headline-06-line-height: 20px;
+  --headline-07-line-height: 18px;
+  --paragraph-01-line-height: 30px;
+  --paragraph-02-line-height: 25px;
+  --body-01-line-height: 22px;
+  --body-02-line-height: 20px;
+  --body-link-01-line-height: 22px;
+  --body-link-02-line-height: 20px;
+  --detail-01-line-height: 22px;
+  --detail-02-line-height: 16px;
+  --detail-03-line-height: 20px;
+  --detail-04-line-height: 17px;
+  --detail-05-line-height: 17px;
+  --detail-06-line-height: 14px;
+  --detail-07-line-height: 14px;
+  /* Typography Font Family Tokens */
+  --super-type-01-font-family: "TRATON Type Display", verdana;
+  --super-type-02-font-family: "TRATON Type Display", verdana;
+  --super-type-03-font-family: "TRATON Type Display", verdana;
+  --expressive-headline-01-font-family: "TRATON Type Display", verdana;
+  --expressive-headline-02-font-family: "TRATON Type Display", verdana;
+  --headline-01-font-family: "TRATON Type Display", verdana;
+  --headline-02-font-family: "TRATON Type Display", verdana;
+  --headline-03-font-family: "TRATON Type Display", verdana;
+  --headline-04-font-family: "TRATON Type Display", verdana;
+  --headline-05-font-family: "TRATON Type Text", verdana;
+  --headline-06-font-family: "TRATON Type Text", verdana;
+  --headline-07-font-family: "TRATON Type Text", verdana;
+  --paragraph-01-font-family: "TRATON Type Display", verdana;
+  --paragraph-02-font-family: "TRATON Type Display", verdana;
+  --body-01-font-family: "TRATON Type Text", verdana;
+  --body-02-font-family: "TRATON Type Text", verdana;
+  --body-link-01-font-family: "TRATON Type Text", verdana;
+  --body-link-02-font-family: "TRATON Type Text", verdana;
+  --detail-01-font-family: "TRATON Type Text", verdana;
+  --detail-02-font-family: "TRATON Type Text", verdana;
+  --detail-03-font-family: "TRATON Type Text", verdana;
+  --detail-04-font-family: "TRATON Type Text", verdana;
+  --detail-05-font-family: "TRATON Type Text", verdana;
+  --detail-06-font-family: "TRATON Type Text", verdana;
+  --detail-07-font-family: "TRATON Type Text", verdana;
+  /* Typography Font Weight Tokens */
+  --super-type-01-font-weight: normal;
+  --super-type-02-font-weight: normal;
+  --super-type-03-font-weight: normal;
+  --expressive-headline-01-font-weight: normal;
+  --expressive-headline-02-font-weight: normal;
+  --headline-01-font-weight: normal;
+  --headline-02-font-weight: normal;
+  --headline-03-font-weight: normal;
+  --headline-04-font-weight: normal;
+  --headline-05-font-weight: 600;
+  --headline-06-font-weight: 600;
+  --headline-07-font-weight: 600;
+  --paragraph-01-font-weight: normal;
+  --paragraph-02-font-weight: normal;
+  --body-01-font-weight: normal;
+  --body-02-font-weight: normal;
+  --body-link-01-font-weight: normal;
+  --body-link-02-font-weight: normal;
+  --detail-01-font-weight: normal;
+  --detail-02-font-weight: normal;
+  --detail-03-font-weight: normal;
+  --detail-04-font-weight: 600;
+  --detail-05-font-weight: normal;
+  --detail-06-font-weight: 600;
+  --detail-07-font-weight: normal;
+  /* Typography Letter-Spacing (Kerning) Tokens */
+  --super-type-01-letter-spacing: 1.08px;
+  --super-type-02-letter-spacing: 0.78px;
+  --super-type-03-letter-spacing: 0.56px;
+  --expressive-headline-01-letter-spacing: 0.4px;
+  --expressive-headline-02-letter-spacing: 0.28px;
+  --headline-01-letter-spacing: 0;
+  --headline-02-letter-spacing: 0;
+  --headline-03-letter-spacing: 0;
+  --headline-04-letter-spacing: 0;
+  --headline-05-letter-spacing: 0;
+  --headline-06-letter-spacing: 0;
+  --headline-07-letter-spacing: 0;
+  --paragraph-01-letter-spacing: 0;
+  --paragraph-02-letter-spacing: 0;
+  --body-01-letter-spacing: 0;
+  --body-02-letter-spacing: 0;
+  --body-link-01-letter-spacing: 0;
+  --body-link-02-letter-spacing: 0;
+  --detail-01-letter-spacing: 0;
+  --detail-02-letter-spacing: 0;
+  --detail-03-letter-spacing: 0;
+  --detail-04-letter-spacing: 0.48px;
+  --detail-05-letter-spacing: 0;
+  --detail-06-letter-spacing: 0.4px;
+  --detail-07-letter-spacing: 0;
+  /* Text transform tokens */
+  --super-type-01-text-transform: uppercase;
+  --super-type-02-text-transform: uppercase;
+  --super-type-03-text-transform: uppercase;
+  --expressive-headline-01-text-transform: uppercase;
+  --expressive-headline-02-text-transform: uppercase;
+  --headline-01-text-transform: none;
+  --headline-02-text-transform: none;
+  --headline-03-text-transform: none;
+  --headline-04-text-transform: none;
+  --headline-05-text-transform: none;
+  --headline-06-text-transform: none;
+  --headline-07-text-transform: none;
+  --paragraph-01-text-transform: none;
+  --paragraph-02-text-transform: none;
+  --body-01-text-transform: none;
+  --body-02-text-transform: none;
+  --body-link-01-text-transform: none;
+  --body-link-02-text-transform: none;
+  --detail-01-text-transform: none;
+  --detail-02-text-transform: none;
+  --detail-03-text-transform: none;
+  --detail-04-text-transform: uppercase;
+  --detail-05-text-transform: none;
+  --detail-06-text-transform: uppercase;
+  --detail-07-text-transform: none;
+}
+
+:root,
+.traton {
+  /* Radius tokens */
+  --radius-narrow: var(--unit-4);
+  --radius-soft: var(--unit-8);
+  --radius-rounded: var(--unit-32);
+  --radius-circle: 500px;
+  /* Radius for-surface tokens */
+  --radius-surface-clickable: var(--radius-full);
+  --radius-surface-field: var(--unit-2);
+  /* Radius for-area tokens */
+  --radius-area-large: var(--unit-8);
+  --radius-area-small: var(--unit-4);
+  /* Space tokens */
+  --space-tiny: var(--unit-4);
+  --space-small: var(--unit-16);
+  --space-medium: var(--unit-24);
+  --space-large: var(--unit-48);
+  --space-huge: var(--unit-80);
+}
+
+/* === 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;
+}
+@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;
+}
+/* === 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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+@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;
+}
+/* Traton primitive icon tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --traton-icon-arrow_diagonal-svg: url(../dist/tegel/assets/icons/traton/arrow_diagonal.svg);
+  --traton-icon-arrow_down-svg: url(../dist/tegel/assets/icons/traton/arrow_down.svg);
+  --traton-icon-arrow_left-svg: url(../dist/tegel/assets/icons/traton/arrow_left.svg);
+  --traton-icon-arrow_right-svg: url(../dist/tegel/assets/icons/traton/arrow_right.svg);
+  --traton-icon-arrow_up-svg: url(../dist/tegel/assets/icons/traton/arrow_up.svg);
+  --traton-icon-bento-svg: url(../dist/tegel/assets/icons/traton/bento.svg);
+  --traton-icon-burger-svg: url(../dist/tegel/assets/icons/traton/burger.svg);
+  --traton-icon-calendar-svg: url(../dist/tegel/assets/icons/traton/calendar.svg);
+  --traton-icon-chevron_down-svg: url(../dist/tegel/assets/icons/traton/chevron_down.svg);
+  --traton-icon-chevron_left-svg: url(../dist/tegel/assets/icons/traton/chevron_left.svg);
+  --traton-icon-chevron_right-svg: url(../dist/tegel/assets/icons/traton/chevron_right.svg);
+  --traton-icon-chevron_up-svg: url(../dist/tegel/assets/icons/traton/chevron_up.svg);
+  --traton-icon-cross-svg: url(../dist/tegel/assets/icons/traton/cross.svg);
+  --traton-icon-edit-svg: url(../dist/tegel/assets/icons/traton/edit.svg);
+  --traton-icon-error-svg: url(../dist/tegel/assets/icons/traton/error.svg);
+  --traton-icon-info-svg: url(../dist/tegel/assets/icons/traton/info.svg);
+  --traton-icon-minus-svg: url(../dist/tegel/assets/icons/traton/minus.svg);
+  --traton-icon-notification-svg: url(../dist/tegel/assets/icons/traton/notification.svg);
+  --traton-icon-plus-svg: url(../dist/tegel/assets/icons/traton/plus.svg);
+  --traton-icon-print-svg: url(../dist/tegel/assets/icons/traton/print.svg);
+  --traton-icon-refresh-svg: url(../dist/tegel/assets/icons/traton/refresh.svg);
+  --traton-icon-search-svg: url(../dist/tegel/assets/icons/traton/search.svg);
+  --traton-icon-share-svg: url(../dist/tegel/assets/icons/traton/share.svg);
+  --traton-icon-sorting-svg: url(../dist/tegel/assets/icons/traton/sorting.svg);
+  --traton-icon-star-svg: url(../dist/tegel/assets/icons/traton/star.svg);
+  --traton-icon-tick-svg: url(../dist/tegel/assets/icons/traton/tick.svg);
+  --traton-icon-truck-svg: url(../dist/tegel/assets/icons/traton/truck.svg);
+  --traton-icon-warning-svg: url(../dist/tegel/assets/icons/traton/warning.svg);
+}
+
+/* Traton icon tokens */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.traton {
+  --icon-arrow_diagonal-svg: var(--traton-icon-arrow_diagonal-svg);
+  --icon-arrow_down-svg: var(--traton-icon-arrow_down-svg);
+  --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-bento-svg: var(--traton-icon-bento-svg);
+  --icon-burger-svg: var(--traton-icon-burger-svg);
+  --icon-calendar-svg: var(--traton-icon-calendar-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-cross-svg: var(--traton-icon-cross-svg);
+  --icon-edit-svg: var(--traton-icon-edit-svg);
+  --icon-error-svg: var(--traton-icon-error-svg);
+  --icon-info-svg: var(--traton-icon-info-svg);
+  --icon-minus-svg: var(--traton-icon-minus-svg);
+  --icon-notification-svg: var(--traton-icon-notification-svg);
+  --icon-plus-svg: var(--traton-icon-plus-svg);
+  --icon-print-svg: var(--traton-icon-print-svg);
+  --icon-refresh-svg: var(--traton-icon-refresh-svg);
+  --icon-search-svg: var(--traton-icon-search-svg);
+  --icon-share-svg: var(--traton-icon-share-svg);
+  --icon-sorting-svg: var(--traton-icon-sorting-svg);
+  --icon-star-svg: var(--traton-icon-star-svg);
+  --icon-tick-svg: var(--traton-icon-tick-svg);
+  --icon-truck-svg: var(--traton-icon-truck-svg);
+  --icon-warning-svg: var(--traton-icon-warning-svg);
+}