@scania/tegel 1.26.0 → 1.27.0

package/dist/collection/components/popover-core/tds-popover-core.css

@@ -1,3 +1,510 @@
+/* Multibrand tokens */
+/* Tegel Color Primitives palette */
+:root {
+  /* Neutral Solid */
+  --scania-neutral-solid-1000: rgba(0, 0, 0, 1);
+  --scania-neutral-solid-958: rgba(14, 16, 19, 1);
+  --scania-neutral-solid-928: rgba(21, 24, 29, 1);
+  --scania-neutral-solid-900: rgba(28, 34, 43, 1);
+  --scania-neutral-solid-868: rgba(36, 44, 55, 1);
+  --scania-neutral-solid-846: rgba(45, 54, 67, 1);
+  --scania-neutral-solid-800: rgba(58, 69, 84, 1);
+  --scania-neutral-solid-700: rgba(83, 95, 112, 1);
+  --scania-neutral-solid-600: rgba(117, 131, 152, 1);
+  --scania-neutral-solid-500: rgba(147, 161, 183, 1);
+  --scania-neutral-solid-400: rgba(181, 189, 204, 1);
+  --scania-neutral-solid-300: rgba(206, 210, 220, 1);
+  --scania-neutral-solid-200: rgba(222, 224, 230, 1);
+  --scania-neutral-solid-100: rgba(235, 236, 238, 1);
+  --scania-neutral-solid-50: rgba(243, 244, 247, 1);
+  --scania-neutral-solid-00: rgba(255, 255, 255, 1);
+  /* Neutral Transparent */
+  --scania-neutral-transparent-958: var(--scania-neutral-solid-958);
+  --scania-neutral-transparent-826: rgba(28, 39, 57, 0.86);
+  --scania-neutral-transparent-700: rgba(6, 23, 49, 0.69);
+  --scania-neutral-transparent-600: rgba(23, 50, 87, 0.6);
+  --scania-neutral-transparent-500: rgba(41, 68, 110, 0.5);
+  --scania-neutral-transparent-400: rgba(41, 65, 110, 0.35);
+  --scania-neutral-transparent-200: rgba(51, 64, 102, 0.17);
+  /* Neutral Transparent Inverse */
+  --scania-neutral-transparent-inverse-958: var(--scania-neutral-solid-50);
+  --scania-neutral-transparent-inverse-700: rgba(226, 235, 253, 0.8);
+  --scania-neutral-transparent-inverse-600: rgba(195, 213, 242, 0.75);
+  --scania-neutral-transparent-inverse-500: rgba(194, 218, 252, 0.6);
+  --scania-neutral-transparent-inverse-400: rgba(184, 212, 250, 0.45);
+  --scania-neutral-transparent-inverse-200: rgba(172, 204, 246, 0.34);
+  /* Blue Solid */
+  --scania-blue-900: rgba(0, 21, 51, 1);
+  --scania-blue-800: rgba(4, 30, 66, 1);
+  --scania-blue-700: rgba(15, 50, 99, 1);
+  --scania-blue-600: rgba(22, 65, 127, 1);
+  --scania-blue-500: rgba(32, 88, 168, 1);
+  --scania-blue-400: rgba(43, 112, 211, 1);
+  --scania-blue-300: rgba(74, 137, 243, 1);
+  --scania-blue-200: rgba(135, 175, 232, 1);
+  --scania-blue-100: rgba(186, 205, 232, 1);
+  --scania-blue-50: rgba(216, 221, 229, 1);
+  /* Extended Red Solid */
+  --scania-extended-red-900: rgba(53, 0, 4, 1);
+  --scania-extended-red-800: rgba(72, 0, 8, 1);
+  --scania-extended-red-700: rgba(108, 0, 17, 1);
+  --scania-extended-red-600: rgba(138, 0, 25, 1);
+  --scania-extended-red-500: rgba(182, 0, 36, 1);
+  --scania-extended-red-400: rgba(227, 3, 48, 1);
+  --scania-extended-red-300: rgba(255, 68, 79, 1);
+  --scania-extended-red-200: rgba(255, 141, 139, 1);
+  --scania-extended-red-100: rgba(255, 211, 210, 1);
+  --scania-extended-red-50: rgba(255, 223, 227, 1);
+  /* Extended Green Solid */
+  --scania-extended-green-900: rgba(0, 26, 18, 1);
+  --scania-extended-green-800: rgba(0, 37, 27, 1);
+  --scania-extended-green-700: rgba(0, 58, 45, 1);
+  --scania-extended-green-600: rgba(0, 76, 59, 1);
+  --scania-extended-green-500: rgba(0, 102, 80, 1);
+  --scania-extended-green-400: rgba(0, 129, 102, 1);
+  --scania-extended-green-300: rgba(0, 158, 126, 1);
+  --scania-extended-green-200: rgba(65, 194, 159, 1);
+  --scania-extended-green-100: rgba(164, 215, 196, 1);
+  --scania-extended-green-50: rgba(209, 224, 217, 1);
+  /* Extended Yellow Solid */
+  --scania-extended-yellow-900: rgba(29, 21, 0, 1);
+  --scania-extended-yellow-800: rgba(40, 30, 0, 1);
+  --scania-extended-yellow-700: rgba(63, 49, 0, 1);
+  --scania-extended-yellow-600: rgba(82, 64, 0, 1);
+  --scania-extended-yellow-500: rgba(110, 87, 0, 1);
+  --scania-extended-yellow-400: rgba(139, 110, 0, 1);
+  --scania-extended-yellow-300: rgba(169, 135, 0, 1);
+  --scania-extended-yellow-200: rgba(211, 169, 0, 1);
+  --scania-extended-yellow-100: rgba(241, 194, 27, 1);
+  --scania-extended-yellow-50: rgba(244, 219, 153, 1);
+}
+
+/* Tegel Brand Usage Tokens */
+/* Light mode tokens (applied to :root and .scania .tds-mode-light) */
+:root,
+.scania .tds-mode-light {
+  /* Foreground - Text */
+  --foreground-text-strong: var(--scania-neutral-transparent-958);
+  --foreground-text-defined: var(--scania-neutral-transparent-700);
+  --foreground-text-soft: var(--scania-neutral-transparent-600);
+  --foreground-text-subtle: var(--scania-neutral-transparent-500);
+  --foreground-text-disabled: var(--scania-neutral-transparent-400);
+  --foreground-text-supertype: var(--scania-blue-800);
+  /* Foreground - Text - Inverse */
+  --foreground-text-inverse-strong: var(--scania-neutral-transparent-inverse-958);
+  --foreground-text-inverse-defined: var(--scania-neutral-transparent-inverse-700);
+  --foreground-text-inverse-soft: var(--scania-neutral-transparent-inverse-600);
+  --foreground-text-inverse-subtle: var(--scania-neutral-transparent-inverse-500);
+  --foreground-text-inverse-disabled: var(--scania-neutral-transparent-inverse-400);
+  --foreground-text-inverse-supertype: var(--scania-neutral-solid-00);
+  /* Foreground - Text - Clickable */
+  --foreground-text-clickable-link: var(--scania-blue-400);
+  --foreground-text-clickable-link-visited: var(--scania-blue-700);
+  --foreground-text-clickable-link-brand: var(--scania-neutral-solid-00);
+  --foreground-text-clickable-link-brand-inverse: var(--scania-neutral-solid-958);
+  /* Foreground - Border */
+  --foreground-border-strong: var(--scania-neutral-transparent-958);
+  --foreground-border-defined: var(--scania-neutral-transparent-700);
+  --foreground-border-soft: var(--scania-neutral-transparent-600);
+  --foreground-border-subtle: var(--scania-neutral-transparent-500);
+  --foreground-border-disabled: var(--scania-neutral-transparent-400);
+  --foreground-border-discrete: var(--scania-neutral-transparent-200);
+  /* Foreground - Border - Inverse */
+  --foreground-border-inverse-strong: var(--scania-neutral-transparent-inverse-958);
+  --foreground-border-inverse-defined: var(--scania-neutral-transparent-inverse-700);
+  --foreground-border-inverse-soft: var(--scania-neutral-transparent-inverse-600);
+  --foreground-border-inverse-subtle: var(--scania-neutral-transparent-inverse-500);
+  --foreground-border-inverse-disabled: var(--scania-neutral-transparent-inverse-400);
+  --foreground-border-inverse-discrete: var(--scania-neutral-transparent-inverse-200);
+  /* Foreground - Border - Clickable */
+  --foreground-border-clickable-link: var(--scania-blue-400);
+  --foreground-border-clickable-focus: var(--scania-blue-400);
+  /* TODO: Migrate to unit tokens */
+  --foreground-border-clickable-focus-width: 2px;
+  /* Foreground - Elements - Transparent */
+  --foreground-elements-transparparent-strong: var(--scania-neutral-transparent-958);
+  --foreground-elements-transparparent-defined: var(--scania-neutral-transparent-700);
+  --foreground-elements-transparparent-soft: var(--scania-neutral-transparent-600);
+  --foreground-elements-transparparent-subtle: var(--scania-neutral-transparent-500);
+  --foreground-elements-transparparent-disabled: var(--scania-neutral-transparent-400);
+  --foreground-elements-transparparent-discrete: var(--scania-neutral-transparent-200);
+  --foreground-elements-transparparent-strong-inverse: var(
+    --scania-neutral-transparent-inverse-958
+  );
+  --foreground-elements-transparparent-defined-inverse: var(
+    --scania-neutral-transparent-inverse-700
+  );
+  --foreground-elements-transparparent-soft-inverse: var(--scania-neutral-transparent-inverse-600);
+  --foreground-elements-transparparent-subtle-inverse: var(
+    --scania-neutral-transparent-inverse-500
+  );
+  --foreground-elements-transparparent-disabled-inverse: var(
+    --scania-neutral-transparent-inverse-400
+  );
+  --foreground-elements-transparparent-discrete-inverse: var(
+    --scania-neutral-transparent-inverse-200
+  );
+  /* Foreground - Elements - Solid */
+  --foreground-elements-solid-1000: var(--scania-neutral-solid-958);
+  --foreground-elements-solid-900: var(--scania-neutral-solid-800);
+  --foreground-elements-solid-800: var(--scania-neutral-solid-700);
+  --foreground-elements-solid-700: var(--scania-neutral-solid-600);
+  --foreground-elements-solid-600: var(--scania-neutral-solid-500);
+  --foreground-elements-solid-500: var(--scania-neutral-solid-400);
+  --foreground-elements-solid-400: var(--scania-neutral-solid-300);
+  --foreground-elements-solid-300: var(--scania-neutral-solid-200);
+  --foreground-elements-solid-200: var(--scania-neutral-solid-100);
+  --foreground-elements-solid-100: var(--scania-neutral-solid-50);
+  /* Background - Elevation */
+  --background-elevation-base: var(--scania-neutral-solid-00);
+  --background-elevation-layer-01: var(--scania-neutral-solid-50);
+  --background-elevation-layer-02: var(--scania-neutral-solid-00);
+  --background-elevation-layer-03: var(--scania-neutral-solid-50);
+  --background-elevation-top: var(--scania-neutral-solid-00);
+  --background-elevation-scrim: rgb(0 0 0 / 38%);
+  --background-elevation-inverse: var(--scania-neutral-solid-1000);
+  --background-elevation-layer-01-inverse: var(--scania-neutral-solid-958);
+  --background-elevation-layer-02-inverse: var(--scania-neutral-solid-928);
+  --background-elevation-layer-03-inverse: var(--scania-neutral-solid-900);
+  --background-elevation-top-inverse: var(--scania-neutral-solid-900);
+  /* Background - Elements */
+  --background-elements-1000: var(--scania-neutral-solid-958);
+  --background-elements-900: var(--scania-neutral-solid-900);
+  --background-elements-800: var(--scania-neutral-solid-800);
+  --background-elements-700: var(--scania-neutral-solid-700);
+  --background-elements-600: var(--scania-neutral-solid-600);
+  --background-elements-500: var(--scania-neutral-solid-500);
+  --background-elements-400: var(--scania-neutral-solid-400);
+  --background-elements-300: var(--scania-neutral-solid-300);
+  --background-elements-200: var(--scania-neutral-solid-200);
+  --background-elements-100: var(--scania-neutral-solid-100);
+  /* Background - Clickable - Primary */
+  --background-clickable-primary-primary: var(--scania-blue-600);
+  --background-clickable-primary-primary-hover: var(--scania-blue-500);
+  --background-clickable-primary-pressed: var(--scania-blue-700);
+  --background-clickable-primary-focus: var(--scania-blue-400);
+  --background-clickable-primary-disabled: var(--scania-neutral-solid-50);
+  --background-clickable-primary-resting: var(--scania-neutral-solid-100);
+  /* Background - Clickable - Primary-Inverse */
+  --background-clickable-primary-inverse-primary: var(--scania-blue-400);
+  --background-clickable-primary-inverse-primary-hover: var(--scania-blue-500);
+  --background-clickable-primary-inverse-pressed: var(--scania-blue-300);
+  --background-clickable-primary-inverse-focus: var(--scania-blue-600);
+  --background-clickable-primary-inverse-disabled: var(--scania-neutral-solid-50);
+  --background-clickable-primary-inverse-resting: var(--scania-neutral-solid-100);
+  /* Background - Clickable - Danger */
+  --background-clickable-danger-danger: var(--scania-extended-red-400);
+  --background-clickable-danger-danger-hover: var(--scania-extended-red-600);
+  --background-clickable-danger-pressed: var(--scania-extended-red-700);
+  --background-clickable-danger-focus: var(--scania-extended-red-400);
+  --background-clickable-danger-disabled: var(--scania-neutral-solid-50);
+  --background-clickable-danger-resting: var(--scania-neutral-solid-100);
+  /* System - Info */
+  --system-info-strong: var(--scania-blue-800);
+  --system-info-default: var(--scania-blue-400);
+  --system-info-subtle: var(--scania-blue-50);
+  /* System - Success */
+  --system-success-strong: var(--scania-extended-green-700);
+  --system-success-default: var(--scania-extended-green-200);
+  --system-success-discrete: var(--scania-extended-green-50);
+  /* System - Warning */
+  --system-warning-strong: var(--scania-extended-yellow-800);
+  --system-warning-default: var(--scania-extended-yellow-100);
+  --system-warning-subtle: var(--scania-extended-yellow-50);
+  /* System - Danger */
+  --system-danger-strong: var(--scania-extended-red-800);
+  --system-danger-default: var(--scania-extended-red-400);
+  --system-danger-subtle: var(--scania-extended-red-50);
+}
+
+/* Dark mode tokens (applied to .tds-mode-dark and .scania .tds-mode-dark) */
+.tds-mode-dark,
+.scania .tds-mode-dark {
+  /* Foreground - Text */
+  --foreground-text-strong: var(--scania-neutral-transparent-inverse-958);
+  --foreground-text-defined: var(--scania-neutral-transparent-inverse-700);
+  --foreground-text-soft: var(--scania-neutral-transparent-inverse-600);
+  --foreground-text-subtle: var(--scania-neutral-transparent-inverse-500);
+  --foreground-text-disabled: var(--scania-neutral-transparent-inverse-400);
+  --foreground-text-supertype: var(--scania-neutral-solid-00);
+  /* Foreground - Text - Inverse */
+  --foreground-text-inverse-strong: var(--scania-neutral-transparent-958);
+  --foreground-text-inverse-defined: var(--scania-neutral-transparent-700);
+  --foreground-text-inverse-soft: var(--scania-neutral-transparent-600);
+  --foreground-text-inverse-subtle: var(--scania-neutral-transparent-500);
+  --foreground-text-inverse-disabled: var(--scania-neutral-transparent-400);
+  --foreground-text-inverse-supertype: var(--scania-blue-900);
+  /* Foreground - Text - Clickable */
+  --foreground-text-clickable-link: var(--scania-blue-300);
+  --foreground-text-clickable-link-visited: var(--scania-blue-100);
+  --foreground-text-clickable-link-brand: var(--scania-neutral-solid-00);
+  --foreground-text-clickable-link-brand-inverse: var(--scania-neutral-solid-00);
+  /* Foreground - Border */
+  --foreground-border-strong: var(--scania-neutral-transparent-inverse-958);
+  --foreground-border-defined: var(--scania-neutral-transparent-inverse-700);
+  --foreground-border-soft: var(--scania-neutral-transparent-inverse-600);
+  --foreground-border-subtle: var(--scania-neutral-transparent-inverse-500);
+  --foreground-border-disabled: var(--scania-neutral-transparent-inverse-400);
+  --foreground-border-discrete: var(--scania-neutral-transparent-inverse-200);
+  /* Foreground - Border - Inverse */
+  --foreground-border-inverse-strong: var(--scania-neutral-transparent-958);
+  --foreground-border-inverse-defined: var(--scania-neutral-transparent-700);
+  --foreground-border-inverse-soft: var(--scania-neutral-transparent-600);
+  --foreground-border-inverse-subtle: var(--scania-neutral-transparent-500);
+  --foreground-border-inverse-disabled: var(--scania-neutral-transparent-400);
+  --foreground-border-inverse-discrete: var(--scania-neutral-transparent-200);
+  /* Foreground - Border - Clickable */
+  --foreground-border-clickable-link: var(--scania-blue-300);
+  --foreground-border-clickable-focus: var(--scania-blue-300);
+  /* TODO: Migrate to unit tokens */
+  --foreground-border-clickable-focus-width: 2px;
+  /* Foreground - Elements - Transparent */
+  --foreground-elements-transparparent-strong: var(--scania-neutral-transparent-inverse-958);
+  --foreground-elements-transparparent-defined: var(--scania-neutral-transparent-inverse-700);
+  --foreground-elements-transparparent-soft: var(--scania-neutral-transparent-inverse-600);
+  --foreground-elements-transparparent-subtle: var(--scania-neutral-transparent-inverse-500);
+  --foreground-elements-transparparent-disabled: var(--scania-neutral-transparent-inverse-400);
+  --foreground-elements-transparparent-discrete: var(--scania-neutral-transparent-inverse-200);
+  --foreground-elements-transparparent-strong-inverse: var(--scania-neutral-transparent-958);
+  --foreground-elements-transparparent-defined-inverse: var(--scania-neutral-transparent-700);
+  --foreground-elements-transparparent-soft-inverse: var(--scania-neutral-transparent-600);
+  --foreground-elements-transparparent-subtle-inverse: var(--scania-neutral-transparent-500);
+  --foreground-elements-transparparent-disabled-inverse: var(--scania-neutral-transparent-400);
+  --foreground-elements-transparparent-discrete-inverse: var(--scania-neutral-transparent-200);
+  /* Foreground - Elements - Solid */
+  --foreground-elements-solid-1000: var(--scania-neutral-solid-50);
+  --foreground-elements-solid-900: var(--scania-neutral-solid-300);
+  --foreground-elements-solid-800: var(--scania-neutral-solid-500);
+  --foreground-elements-solid-700: var(--scania-neutral-solid-600);
+  --foreground-elements-solid-600: var(--scania-neutral-solid-700);
+  --foreground-elements-solid-500: var(--scania-neutral-solid-800);
+  --foreground-elements-solid-400: var(--scania-neutral-solid-868);
+  --foreground-elements-solid-300: var(--scania-neutral-solid-900);
+  --foreground-elements-solid-200: var(--scania-neutral-solid-928);
+  --foreground-elements-solid-100: var(--scania-neutral-solid-958);
+  /* Background - Elevation */
+  --background-elevation-base: var(--scania-neutral-solid-1000);
+  --background-elevation-layer-01: var(--scania-neutral-solid-928);
+  --background-elevation-layer-02: var(--scania-neutral-solid-900);
+  --background-elevation-layer-03: var(--scania-neutral-solid-846);
+  --background-elevation-top: var(--scania-neutral-solid-846);
+  --background-elevation-scrim: rgb(0 0 0 / 50%);
+  --background-elevation-inverse: var(--scania-neutral-solid-00);
+  --background-elevation-layer-01-inverse: var(--scania-neutral-solid-50);
+  --background-elevation-layer-02-inverse: var(--scania-neutral-solid-100);
+  --background-elevation-layer-03-inverse: var(--scania-neutral-solid-200);
+  --background-elevation-top-inverse: var(--scania-neutral-solid-200);
+  /* Background - Elements */
+  --background-elements-1000: var(--scania-neutral-solid-50);
+  --background-elements-900: var(--scania-neutral-solid-300);
+  --background-elements-800: var(--scania-neutral-solid-500);
+  --background-elements-700: var(--scania-neutral-solid-600);
+  --background-elements-600: var(--scania-neutral-solid-700);
+  --background-elements-500: var(--scania-neutral-solid-800);
+  --background-elements-400: var(--scania-neutral-solid-846);
+  --background-elements-300: var(--scania-neutral-solid-868);
+  --background-elements-200: var(--scania-neutral-solid-900);
+  --background-elements-100: var(--scania-neutral-solid-928);
+  /* Background - Clickable - Primary */
+  --background-clickable-primary-primary: var(--scania-blue-400);
+  --background-clickable-primary-primary-hover: var(--scania-blue-500);
+  --background-clickable-primary-pressed: var(--scania-blue-300);
+  --background-clickable-primary-focus: var(--scania-blue-600);
+  --background-clickable-primary-disabled: var(--scania-neutral-solid-868);
+  --background-clickable-primary-resting: var(--scania-neutral-solid-800);
+  /* Background - Clickable - Primary-Inverse */
+  --background-clickable-primary-inverse-primary: var(--scania-blue-600);
+  --background-clickable-primary-inverse-primary-hover: var(--scania-blue-500);
+  --background-clickable-primary-inverse-pressed: var(--scania-blue-700);
+  --background-clickable-primary-inverse-focus: var(--scania-blue-400);
+  --background-clickable-primary-inverse-disabled: var(--scania-neutral-solid-868);
+  --background-clickable-primary-inverse-resting: var(--scania-neutral-solid-800);
+  /* Background - Clickable - Danger */
+  --background-clickable-danger-danger: var(--scania-extended-red-400);
+  --background-clickable-danger-danger-hover: var(--scania-extended-red-600);
+  --background-clickable-danger-pressed: var(--scania-extended-red-700);
+  --background-clickable-danger-focus: var(--scania-extended-red-400);
+  --background-clickable-danger-disabled: var(--scania-neutral-solid-900);
+  --background-clickable-danger-resting: var(--scania-neutral-solid-900);
+  /* System - Info */
+  --system-info-strong: var(--scania-blue-50);
+  --system-info-default: var(--scania-blue-400);
+  --system-info-subtle: var(--scania-blue-700);
+  /* System - Success */
+  --system-success-strong: var(--scania-extended-green-50);
+  --system-success-default: var(--scania-extended-green-200);
+  --system-success-discrete: var(--scania-extended-green-700);
+  /* System - Warning */
+  --system-warning-strong: var(--scania-extended-yellow-50);
+  --system-warning-default: var(--scania-extended-yellow-100);
+  --system-warning-subtle: var(--scania-extended-yellow-600);
+  /* System - Danger */
+  --system-danger-strong: var(--scania-extended-red-50);
+  --system-danger-default: var(--scania-extended-red-400);
+  --system-danger-subtle: var(--scania-extended-red-800);
+}
+
+/* Scania Typography Usage Tokens */
+:root,
+.scania {
+  /* 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;
+  /* Line height tokens */
+  --super-type-01-line-height: 183px;
+  --super-type-02-line-height: 148px;
+  --super-type-03-line-height: 106px;
+  --expressive-headline-01-line-height: 80px;
+  --expressive-headline-02-line-height: 56px;
+  --headline-01-line-height: 40px;
+  --headline-02-line-height: 32px;
+  --headline-03-line-height: 24px;
+  --headline-04-line-height: 24px;
+  --headline-05-line-height: 24px;
+  --headline-06-line-height: 16px;
+  --headline-07-line-height: 16px;
+  --paragraph-01-line-height: 32px;
+  --paragraph-02-line-height: 24px;
+  --body-01-line-height: 24px;
+  --body-02-line-height: 20px;
+  --body-link-01-line-height: 24px;
+  --body-link-02-line-height: 20px;
+  --detail-01-line-height: 24px;
+  --detail-02-line-height: 16px;
+  --detail-03-line-height: 20px;
+  --detail-04-line-height: 16px;
+  --detail-05-line-height: 16px;
+  --detail-06-line-height: 16px;
+  --detail-07-line-height: 8px;
+  /* Font family tokens */
+  --super-type-01-font-family: "Scania Sans Headline";
+  --super-type-02-font-family: "Scania Sans Headline";
+  --super-type-03-font-family: "Scania Sans Headline";
+  --expressive-headline-01-font-family: "Scania Sans Headline";
+  --expressive-headline-02-font-family: "Scania Sans Headline";
+  --headline-01-font-family: "Scania Sans Headline";
+  --headline-02-font-family: "Scania Sans";
+  --headline-03-font-family: "Scania Sans";
+  --headline-04-font-family: "Scania Sans";
+  --headline-05-font-family: "Scania Sans";
+  --headline-06-font-family: "Scania Sans";
+  --headline-07-font-family: "Scania Sans Semi Condensed";
+  --paragraph-01-font-family: "Scania Sans";
+  --paragraph-02-font-family: "Scania Sans";
+  --body-01-font-family: "Scania Sans";
+  --body-02-font-family: "Scania Sans";
+  --body-link-01-font-family: "Scania Sans";
+  --body-link-02-font-family: "Scania Sans";
+  --detail-01-font-family: "Scania Sans Semi Condensed";
+  --detail-02-font-family: "Scania Sans Semi Condensed";
+  --detail-03-font-family: "Scania Sans Semi Condensed";
+  --detail-04-font-family: "Scania Sans";
+  --detail-05-font-family: "Scania Sans Semi Condensed";
+  --detail-06-font-family: "Scania Sans";
+  --detail-07-font-family: "Scania Sans Semi Condensed";
+  /* Font weight tokens */
+  --super-type-01-font-weight: bold;
+  --super-type-02-font-weight: bold;
+  --super-type-03-font-weight: bold;
+  --expressive-headline-01-font-weight: bold;
+  --expressive-headline-02-font-weight: bold;
+  --headline-01-font-weight: bold;
+  --headline-02-font-weight: bold;
+  --headline-03-font-weight: bold;
+  --headline-04-font-weight: bold;
+  --headline-05-font-weight: bold;
+  --headline-06-font-weight: bold;
+  --headline-07-font-weight: bold;
+  --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: bold;
+  --detail-05-font-weight: normal;
+  --detail-06-font-weight: bold;
+  --detail-07-font-weight: normal;
+  /* Letter spacing tokens */
+  --super-type-01-letter-spacing: 0;
+  --super-type-02-letter-spacing: 0;
+  --super-type-03-letter-spacing: 0;
+  --expressive-headline-01-letter-spacing: 0;
+  --expressive-headline-02-letter-spacing: 0;
+  --headline-01-letter-spacing: 0;
+  --headline-02-letter-spacing: -1.28px;
+  --headline-03-letter-spacing: -0.72px;
+  --headline-04-letter-spacing: -0.2px;
+  --headline-05-letter-spacing: -0.32px;
+  --headline-06-letter-spacing: -0.28px;
+  --headline-07-letter-spacing: -0.14px;
+  --paragraph-01-letter-spacing: -0.72px;
+  --paragraph-02-letter-spacing: -0.2px;
+  --body-01-letter-spacing: -0.32px;
+  --body-02-letter-spacing: -0.14px;
+  --body-link-01-letter-spacing: -0.32px;
+  --body-link-02-letter-spacing: -0.14px;
+  --detail-01-letter-spacing: -0.16px;
+  --detail-02-letter-spacing: -0.14px;
+  --detail-03-letter-spacing: -0.14px;
+  --detail-04-letter-spacing: 0.96px;
+  --detail-05-letter-spacing: 0;
+  --detail-06-letter-spacing: 0.8px;
+  --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: uppercase;
+  --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,
 html {
   /* ========================================================================
@@ -4203,118 +4710,119 @@ html {
     width: 1856px;
   }
 }
+/* TODO: Add CY to all cyrilic fonts */
 @font-face {
   font-family: "Scania Sans";
   font-weight: bold;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-style: italic;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-weight: bold;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-style: italic;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   font-weight: bold;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-weight: bold;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-style: italic;
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
   font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
   font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Condensed";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
   font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Headline";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Regular.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
   font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff");
 }
 @font-face {
   font-family: "Scania Sans Semi Condensed";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff");
+  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff");
 }
 /* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
 :root {
@@ -6135,37 +6643,6 @@ tds-link tds-icon {
   padding-left: 5px;
 }
 
-:root,
-.tds-mode-light {
-  --tds-message-color: var(--tds-grey-958);
-  --tds-message-background-primary: var(--tds-grey-50);
-  --tds-message-background-secondary: var(--tds-white);
-  --tds-message-background: var(--tds-message-background-primary);
-  --tds-message-type-error-background: var(--tds-red-50);
-}
-:root .tds-mode-variant-primary,
-.tds-mode-light .tds-mode-variant-primary {
-  --tds-message-background: var(--tds-message-background-primary);
-}
-:root .tds-mode-variant-secondary,
-.tds-mode-light .tds-mode-variant-secondary {
-  --tds-message-background: var(--tds-message-background-secondary);
-}
-
-.tds-mode-dark {
-  --tds-message-color: var(--tds-grey-50);
-  --tds-message-background-primary: var(--tds-grey-900);
-  --tds-message-background-secondary: var(--tds-grey-868);
-  --tds-message-background: var(--tds-message-background-primary);
-  --tds-message-type-error-background: rgb(255 35 64 / 24%);
-}
-.tds-mode-dark .tds-mode-variant-primary {
-  --tds-message-background: var(--tds-message-background-primary);
-}
-.tds-mode-dark .tds-mode-variant-secondary {
-  --tds-message-background: var(--tds-message-background-secondary);
-}
-
 :root,
 .tds-mode-light {
   --tds-modal-backdrop: rgba(0 0 0 / 40%);