@tedi-design-system/core 2.2.0 → 2.4.0

package/variables/_font-variables-legacy.scss

@@ -0,0 +1,77 @@
+:root {
+  --heading-h1-weight-desktop: var(--weight-01);
+  --heading-h1-weight-mobile: var(--weight-01);
+  --heading-h1-size-desktop: var(--size-09);
+  --heading-h1-size-mobile: var(--size-06);
+  --heading-h1-line-height-desktop: var(--line-height-10);
+  --heading-h1-line-height-mobile: var(--line-height-07);
+  --heading-h2-weight-desktop: var(--weight-02);
+  --heading-h2-weight-mobile: var(--weight-02);
+  --heading-h2-size-desktop: var(--size-07);
+  --heading-h2-size-mobile: var(--size-05);
+  --heading-h2-line-height-desktop: var(--line-height-08);
+  --heading-h2-line-height-mobile: var(--line-height-05);
+  --heading-h3-weight-desktop: var(--weight-02);
+  --heading-h3-weight-mobile: var(--weight-02);
+  --heading-h3-size-desktop: var(--size-06);
+  --heading-h3-size-mobile: var(--size-04);
+  --heading-h3-line-height-desktop: var(--line-height-07);
+  --heading-h3-line-height-mobile: var(--line-height-04);
+  --heading-h4-weight-desktop: var(--weight-02);
+  --heading-h4-weight-mobile: var(--weight-02);
+  --heading-h4-size-desktop: var(--size-04);
+  --heading-h4-size-mobile: var(--size-03);
+  --heading-h4-line-height-desktop: var(--line-height-04);
+  --heading-h4-line-height-mobile: var(--line-height-03);
+  --heading-h5-weight-desktop: var(--weight-02);
+  --heading-h5-weight-mobile: var(--weight-03);
+  --heading-h5-size-desktop: var(--size-03);
+  --heading-h5-size-mobile: var(--size-02);
+  --heading-h5-line-height-desktop: var(--line-height-03);
+  --heading-h5-line-height-mobile: var(--line-height-03);
+  --heading-h6-weight-desktop: var(--weight-03);
+  --heading-h6-weight-mobile: var(--weight-03);
+  --heading-h6-size-desktop: var(--size-02);
+  --heading-h6-size-mobile: var(--size-02);
+  --heading-h6-line-height-desktop: var(--line-height-03);
+  --heading-h6-line-height-mobile: var(--line-height-03);
+  --body-regular-weight-desktop: var(--weight-02);
+  --body-regular-weight-mobile: var(--weight-02);
+  --body-regular-size-desktop: var(--size-02);
+  --body-regular-size-mobile: var(--size-02);
+  --body-regular-line-height-desktop: var(--line-height-03);
+  --body-regular-line-height-tablet: var(--line-height-03);
+  --body-regular-line-height-mobile: var(--line-height-03);
+  --family-primary-desktop: var(--family-roboto);
+  --family-primary-mobile: var(--family-roboto);
+  --body-bold-weight-desktop: var(--weight-03);
+  --body-bold-weight-mobile: var(--weight-03);
+  --body-bold-size-desktop: var(--size-02);
+  --body-bold-size-mobile: var(--size-02);
+  --body-bold-line-height-desktop: var(--line-height-03);
+  --body-bold-line-height-mobile: var(--line-height-03);
+  --body-small-regular-weight-desktop: var(--weight-02);
+  --body-small-regular-weight-mobile: var(--weight-02);
+  --body-small-regular-size-desktop: var(--size-01);
+  --body-small-regular-size-mobile: var(--size-01);
+  --body-small-regular-line-height-desktop: var(--line-height-01);
+  --body-small-regular-line-height-mobile: var(--line-height-01);
+  --body-small-bold-weight-desktop: var(--weight-03);
+  --body-small-bold-weight-mobile: var(--weight-03);
+  --body-small-bold-size-desktop: var(--size-01);
+  --body-small-bold-size-mobile: var(--size-01);
+  --body-small-bold-line-height-desktop: var(--line-height-01);
+  --body-small-bold-line-height-mobile: var(--line-height-01);
+  --heading-subtitle-regular-weight-desktop: var(--weight-03);
+  --heading-subtitle-regular-weight-mobile: var(--weight-03);
+  --heading-subtitle-regular-size-desktop: var(--size-02);
+  --heading-subtitle-regular-size-mobile: var(--size-02);
+  --heading-subtitle-regular-line-height-desktop: var(--line-height-03);
+  --heading-subtitle-regular-line-height-mobile: var(--line-height-03);
+  --heading-subtitle-small-weight-desktop: var(--weight-02);
+  --heading-subtitle-small-weight-mobile: var(--weight-02);
+  --heading-subtitle-small-size-desktop: var(--size-01);
+  --heading-subtitle-small-size-mobile: var(--size-01);
+  --heading-subtitle-small-line-height-desktop: var(--line-height-01);
+  --heading-subtitle-small-line-height-mobile: var(--line-height-01);
+}

package/variables/_font-variables.scss

@@ -1,3 +1,4 @@
+@use 'font-variables-legacy';
 @use 'themes/default/font-variables__default';
 @use 'themes/rit/font-variables__rit';
 

package/variables/themes/default/color-variables__dark.scss

@@ -90,6 +90,14 @@
   --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
   --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
   --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
+  --button-main-danger-background-active: var(--tedi-red-500);
+  --button-main-danger-background-default: var(--tedi-red-300);
+  --button-main-danger-background-focus: var(--tedi-red-300);
+  --button-main-danger-background-hover: var(--tedi-red-400);
+  --button-main-danger-border-active: var(--button-main-danger-background-active);
+  --button-main-danger-border-default: var(--button-main-danger-background-default);
+  --button-main-danger-border-focus: var(--button-main-danger-background-focus);
+  --button-main-danger-border-hover: var(--button-main-danger-background-hover);
   --button-main-danger-neutral-background-active: var(--tedi-alpha-01);
   --button-main-danger-neutral-background-default: var(--tedi-alpha-01);
   --button-main-danger-neutral-background-focus: var(--tedi-alpha-01);
@@ -106,20 +114,24 @@
   --button-main-danger-neutral-text-default: var(--tedi-red-300);
   --button-main-danger-neutral-text-focus: var(--tedi-red-300);
   --button-main-danger-neutral-text-hover: var(--tedi-red-200);
-  --button-main-danger-background-active: var(--tedi-red-500);
-  --button-main-danger-background-default: var(--tedi-red-300);
-  --button-main-danger-background-focus: var(--tedi-red-300);
-  --button-main-danger-background-hover: var(--tedi-red-400);
-  --button-main-danger-border-active: var(--button-main-danger-background-active);
-  --button-main-danger-border-default: var(--button-main-danger-background-default);
-  --button-main-danger-border-focus: var(--button-main-danger-background-focus);
-  --button-main-danger-border-hover: var(--button-main-danger-background-hover);
   --button-main-danger-text-default: var(--tedi-neutral-900);
   --button-main-disabled-general-background: var(--general-surface-disabled);
   --button-main-disabled-general-border: var(--general-surface-disabled);
   --button-main-disabled-general-text: var(--general-text-disabled);
   --button-main-disabled-neutral-background: var(--button-main-neutral-background-default);
   --button-main-disabled-neutral-border: var(--button-main-neutral-border-default);
+  --button-main-neutral-background-active: var(--tedi-alpha-01);
+  --button-main-neutral-background-default: var(--tedi-alpha-01);
+  --button-main-neutral-background-focus: var(--tedi-alpha-01);
+  --button-main-neutral-background-hover: var(--tedi-alpha-01);
+  --button-main-neutral-border-active: var(--tedi-alpha-01);
+  --button-main-neutral-border-default: var(--tedi-alpha-01);
+  --button-main-neutral-border-focus: var(--general-surface-primary);
+  --button-main-neutral-border-hover: var(--tedi-alpha-01);
+  --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
+  --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01);
+  --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
+  --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
   --button-main-neutral-inverted-background-active: var(--tedi-alpha-01);
   --button-main-neutral-inverted-background-default: var(--tedi-alpha-01);
   --button-main-neutral-inverted-background-focus: var(--tedi-alpha-01);
@@ -136,22 +148,18 @@
   --button-main-neutral-inverted-text-default: var(--tedi-neutral-100);
   --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100);
   --button-main-neutral-inverted-text-hover: var(--tedi-primary-200);
-  --button-main-neutral-background-active: var(--tedi-alpha-01);
-  --button-main-neutral-background-default: var(--tedi-alpha-01);
-  --button-main-neutral-background-focus: var(--tedi-alpha-01);
-  --button-main-neutral-background-hover: var(--tedi-alpha-01);
-  --button-main-neutral-border-active: var(--tedi-alpha-01);
-  --button-main-neutral-border-default: var(--tedi-alpha-01);
-  --button-main-neutral-border-focus: var(--general-surface-primary);
-  --button-main-neutral-border-hover: var(--tedi-alpha-01);
-  --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
-  --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01);
-  --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
-  --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
   --button-main-neutral-text-active: var(--tedi-primary-300);
   --button-main-neutral-text-default: var(--tedi-neutral-100);
   --button-main-neutral-text-focus: var(--tedi-neutral-100);
   --button-main-neutral-text-hover: var(--tedi-primary-200);
+  --button-main-primary-background-active: var(--tedi-primary-100);
+  --button-main-primary-background-default: var(--tedi-primary-300);
+  --button-main-primary-background-focus: var(--tedi-primary-300);
+  --button-main-primary-background-hover: var(--tedi-primary-200);
+  --button-main-primary-border-active: var(--button-main-primary-background-active);
+  --button-main-primary-border-default: var(--button-main-primary-background-default);
+  --button-main-primary-border-focus: var(--button-main-primary-background-focus);
+  --button-main-primary-border-hover: var(--button-main-primary-background-hover);
   --button-main-primary-inverted-background-active: var(--tedi-primary-300);
   --button-main-primary-inverted-background-default: var(--tedi-primary-200);
   --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default);
@@ -163,17 +171,17 @@
   --button-main-primary-inverted-text-active: var(--tedi-primary-800);
   --button-main-primary-inverted-text-default: var(--tedi-primary-700);
   --button-main-primary-inverted-text-hover: var(--tedi-primary-700);
-  --button-main-primary-background-active: var(--tedi-primary-100);
-  --button-main-primary-background-default: var(--tedi-primary-300);
-  --button-main-primary-background-focus: var(--tedi-primary-300);
-  --button-main-primary-background-hover: var(--tedi-primary-200);
-  --button-main-primary-border-active: var(--button-main-primary-background-active);
-  --button-main-primary-border-default: var(--button-main-primary-background-default);
-  --button-main-primary-border-focus: var(--button-main-primary-background-focus);
-  --button-main-primary-border-hover: var(--button-main-primary-background-hover);
   --button-main-primary-text-active: var(--tedi-primary-800);
   --button-main-primary-text-default: var(--tedi-primary-700);
   --button-main-primary-text-hover: var(--tedi-primary-800);
+  --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
+  --button-main-secondary-background-default: var(--tedi-neutral-850);
+  --button-main-secondary-background-focus: var(--tedi-neutral-850);
+  --button-main-secondary-background-hover: var(--general-surface-hover);
+  --button-main-secondary-border-active: var(--tedi-primary-200);
+  --button-main-secondary-border-default: var(--tedi-neutral-300);
+  --button-main-secondary-border-focus: var(--tedi-primary-100);
+  --button-main-secondary-border-hover: var(--tedi-primary-100);
   --button-main-secondary-inverted-background-active: var(--tedi-alpha-white-10);
   --button-main-secondary-inverted-background-default: var(--tedi-alpha-01);
   --button-main-secondary-inverted-background-focus: var(--tedi-alpha-01);
@@ -183,14 +191,6 @@
   --button-main-secondary-inverted-border-focus: var(--tedi-neutral-100);
   --button-main-secondary-inverted-border-hover: var(--tedi-neutral-100);
   --button-main-secondary-inverted-text-default: var(--general-text-white);
-  --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
-  --button-main-secondary-background-default: var(--tedi-neutral-850);
-  --button-main-secondary-background-focus: var(--tedi-neutral-850);
-  --button-main-secondary-background-hover: var(--general-surface-hover);
-  --button-main-secondary-border-active: var(--tedi-primary-200);
-  --button-main-secondary-border-default: var(--tedi-neutral-300);
-  --button-main-secondary-border-focus: var(--tedi-primary-100);
-  --button-main-secondary-border-hover: var(--tedi-primary-100);
   --button-main-secondary-text-default: var(--tedi-neutral-100);
   --button-main-success-background-active: var(--tedi-green-500);
   --button-main-success-background-default: var(--tedi-green-300);
@@ -211,7 +211,12 @@
   --card-background-secondary: var(--general-surface-secondary);
   --card-background-success: var(--general-status-success-background-primary);
   --card-background-tertiary: var(--general-surface-tertiary);
+  --card-background-tertiary-2: var(--general-surface-tertiary);
   --card-background-warning: var(--general-status-warning-background-light);
+  --card-body-background-distinctive-primary: var(--general-surface-brand-primary);
+  --card-body-background-primary: var(--general-surface-primary);
+  --card-body-background-secondary: var(--general-surface-secondary);
+  --card-border-distinctive: var(--card-body-background-distinctive-primary);
   --card-border-primary: var(--general-border-primary);
   --card-border-selected: var(--tedi-primary-300);
   --carousel-dot-background-active: var(--button-main-primary-background-active);
@@ -222,6 +227,7 @@
   --carousel-dot-border-focus: var(--button-main-primary-background-focus);
   --carousel-dot-border-hover: var(--button-main-primary-background-hover);
   --carousel-dot-border-selected: var(--button-main-primary-background-default);
+  --choice-group-active-text: var(--tedi-neutral-100);
   --dropdown-item-active-background: var(--general-surface-selected);
   --dropdown-item-active-text: var(--general-text-white);
   --dropdown-item-default-background: var(--general-surface-primary);
@@ -230,10 +236,10 @@
   --dropdown-item-disabled-text: var(--general-text-disabled);
   --dropdown-item-hover-background: var(--general-surface-hover);
   --dropdown-item-hover-text: var(--general-text-white);
-  --empty-state-border: var(--card-border-primary);
   --empty-state-background-primary: var(--general-surface-primary);
   --empty-state-background-secondary: var(--general-surface-secondary);
   --empty-state-background-tertiary: var(--general-surface-tertiary);
+  --empty-state-border: var(--card-border-primary);
   --empty-state-icon-primary: var(--general-icon-brand);
   --empty-state-icon-secondary: var(--general-icon-tertiary);
   --file-dropzone-background-default: var(--form-input-background-default);
@@ -269,6 +275,7 @@
   --footer-background: var(--tedi-neutral-750);
   --footer-bottom-background: var(--tedi-neutral-800);
   --footer-icon-background: var(--tedi-alpha-white-20);
+  --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text);
   --form-checkbox-radio-card-primary-default-background: var(--general-surface-primary);
   --form-checkbox-radio-card-primary-default-border-group: var(--tedi-neutral-500);
   --form-checkbox-radio-card-primary-default-border-separate: var(--tedi-neutral-500);
@@ -353,7 +360,6 @@
   --form-input-text-disabled: var(--general-text-secondary);
   --form-input-text-filled: var(--general-text-primary);
   --form-input-text-placeholder: var(--tedi-neutral-450);
-  --form-slider-track: var(--general-surface-primary);
   --form-slider-active-background-active: var(--tedi-blue-500);
   --form-slider-active-background-default: var(--tedi-blue-300);
   --form-slider-active-background-disabled: var(--tedi-neutral-700);
@@ -372,7 +378,7 @@
   --form-slider-thumb-border-disabled: var(--tedi-neutral-700);
   --form-slider-thumb-border-focus: var(--tedi-blue-300);
   --form-slider-thumb-border-hover: var(--tedi-blue-400);
-  --form-toggl-outlined-background: var(--tedi-alpha-01);
+  --form-slider-track: var(--general-surface-primary);
   --form-toggl-colored-active-active: var(--tedi-green-600);
   --form-toggl-colored-active-default: var(--tedi-green-500);
   --form-toggl-colored-active-hover: var(--tedi-green-600);
@@ -385,6 +391,7 @@
   --form-toggl-colored-inactive-icon: var(--tedi-red-600);
   --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white);
   --form-toggl-colored-inactive-indicator: var(--tedi-neutral-100);
+  --form-toggl-outlined-background: var(--tedi-alpha-01);
   --form-toggl-primary-active-active: var(--tedi-primary-500);
   --form-toggl-primary-active-default: var(--tedi-primary-400);
   --form-toggl-primary-active-hover: var(--tedi-primary-500);
@@ -403,6 +410,10 @@
   --general-border-secondary: var(--tedi-neutral-500);
   --general-border-white: var(--tedi-neutral-100);
   --general-icon-accent: var(--tedi-orange-300);
+  --general-icon-background-brand-primary: var(--general-surface-brand-primary);
+  --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
+  --general-icon-background-primary: var(--tedi-alpha-40);
+  --general-icon-background-secondary: var(--tedi-alpha-white-30);
   --general-icon-brand: var(--tedi-primary-300);
   --general-icon-brand-dark: var(--tedi-primary-400);
   --general-icon-danger: var(--tedi-red-300);
@@ -413,32 +424,31 @@
   --general-icon-warning: var(--tedi-yellow-200);
   --general-icon-warning-dark: var(--tedi-yellow-300);
   --general-icon-white: var(--tedi-neutral-100);
-  --general-icon-background-brand-primary: var(--general-surface-brand-primary);
-  --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
-  --general-icon-background-primary: var(--tedi-alpha-40);
-  --general-icon-background-secondary: var(--tedi-alpha-white-30);
-  --general-status-danger-border: var(--tedi-red-500);
-  --general-status-danger-text: var(--general-text-primary);
+  --general-separator-primary: var(--general-border-primary);
   --general-status-danger-background-primary: var(--tedi-red-700);
   --general-status-danger-background-secondary: var(--tedi-red-700);
   --general-status-danger-background-tertiary: var(--tedi-red-600);
-  --general-status-info-border: var(--tedi-blue-400);
-  --general-status-info-text: var(--general-text-primary);
+  --general-status-danger-border: var(--tedi-red-500);
+  --general-status-danger-text: var(--general-text-primary);
   --general-status-info-background-dark: var(--tedi-blue-400);
   --general-status-info-background-light: var(--tedi-blue-700);
-  --general-status-neutral-border: var(--tedi-neutral-400);
-  --general-status-neutral-text: var(--general-text-primary);
+  --general-status-info-border: var(--tedi-blue-400);
+  --general-status-info-text: var(--general-text-primary);
   --general-status-neutral-background-dark: var(--tedi-neutral-350);
   --general-status-neutral-background-light: var(--tedi-neutral-800);
-  --general-status-success-border: var(--tedi-green-500);
-  --general-status-success-text: var(--general-text-primary);
+  --general-status-neutral-border: var(--tedi-neutral-400);
+  --general-status-neutral-text: var(--general-text-primary);
+  --general-status-success-background-primary: var(--tedi-green-700);
   --general-status-success-background-primary: var(--tedi-green-700);
   --general-status-success-background-secondary: var(--tedi-green-700);
   --general-status-success-background-tertiary: var(--tedi-green-600);
-  --general-status-warning-border: var(--tedi-yellow-600);
-  --general-status-warning-text: var(--general-text-primary);
+  --general-status-success-border: var(--tedi-green-500);
+  --general-status-success-text: var(--general-text-primary);
   --general-status-warning-background-dark: var(--tedi-yellow-400);
   --general-status-warning-background-light: var(--tedi-yellow-700);
+  --general-status-warning-background-primary: var(--tedi-yellow-700);
+  --general-status-warning-border: var(--tedi-yellow-600);
+  --general-status-warning-text: var(--general-text-primary);
   --general-surface-accent: var(--tedi-accent-700);
   --general-surface-active: var(--general-surface-brand-secondary);
   --general-surface-brand-primary: var(--tedi-primary-600);
@@ -454,6 +464,7 @@
   --general-surface-primary: var(--tedi-neutral-850);
   --general-surface-secondary: var(--tedi-neutral-800);
   --general-surface-selected: var(--general-surface-brand-secondary);
+  --general-surface-success: var(--general-status-success-background-primary);
   --general-surface-tertiary: var(--tedi-neutral-750);
   --general-text-brand: var(--tedi-primary-200);
   --general-text-dark: var(--tedi-neutral-850);
@@ -461,6 +472,7 @@
   --general-text-primary: var(--tedi-neutral-100);
   --general-text-secondary: var(--tedi-neutral-300);
   --general-text-tertiary: var(--tedi-neutral-400);
+  --general-text-text-inverted-tehik: var(--tedi-neutral-100);
   --general-text-white: var(--tedi-neutral-100);
   --header-background: var(--general-surface-primary);
   --header-bottom-border: var(--tedi-neutral-900);
@@ -484,13 +496,50 @@
   --link-primary-default: var(--tedi-primary-400);
   --link-primary-focus: var(--tedi-primary-200);
   --link-primary-hover: var(--tedi-primary-400);
-  --loader-skeleton-color: #9293a433;
+  --loader-skeleton-color: rgb(146 147 164 / 20%);
   --loader-spinner-color-primary: var(--tedi-alpha-white-80);
   --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
   --modal-background: var(--general-surface-primary);
-  --modal-border: var(--general-border-primary);
+  --modal-border-inner: var(--general-border-primary);
+  --modal-border-outer: var(--general-border-primary);
   --modal-footer-border-top: var(--general-border-primary);
-  --modal-header-border-bottom: var(--general-border-primary);
+  --navigation-horizontal-background: var(--navigation-vertical-background);
+  --navigation-horizontal-group-title-text: var(--navigation-vertical-group-title-text);
+  --navigation-horizontal-item-background-active: var(--navigation-vertical-item-background-active);
+  --navigation-horizontal-item-background-default: var(--navigation-vertical-item-background-default);
+  --navigation-horizontal-item-background-focus: var(--navigation-vertical-item-background-focus);
+  --navigation-horizontal-item-background-hover: var(--navigation-vertical-item-background-hover);
+  --navigation-horizontal-item-background-selected: var(--navigation-vertical-item-background-active);
+  --navigation-horizontal-item-border: var(--navigation-horizontal-item-background-default);
+  --navigation-horizontal-item-text: var(--navigation-vertical-item-text);
+  --navigation-horizontal-submenu-background: var(--navigation-horizontal-item-background-selected);
+  --navigation-horizontal-submenu-item-border: var(--navigation-horizontal-item-background-default);
+  --navigation-horizontal-submenu-item-border-active: var(--tedi-neutral-100);
+  --navigation-horizontal-submenu-item-border-default: var(--tedi-primary-200);
+  --navigation-horizontal-submenu-item-border-focus: var(--tedi-alpha-01);
+  --navigation-horizontal-submenu-item-border-hover: var(--tedi-neutral-100);
+  --navigation-horizontal-submenu-item-border-selected: var(--tedi-neutral-100);
+  --navigation-horizontal-submenu-item-text-active: var(--tedi-neutral-100);
+  --navigation-horizontal-submenu-item-text-default: var(--tedi-primary-200);
+  --navigation-horizontal-submenu-item-text-focus: var(--navigation-horizontal-submenu-item-text-default);
+  --navigation-horizontal-submenu-item-text-hover: var(--tedi-neutral-100);
+  --navigation-horizontal-submenu-item-text-selected: var(--tedi-neutral-100);
+  --navigation-vertical-background: var(--navigation-vertical-item-background-default);
+  --navigation-vertical-group-title-text: var(--tedi-neutral-450);
+  --navigation-vertical-item-background-active: var(--tedi-neutral-800);
+  --navigation-vertical-item-background-arrow-button-active: var(--tedi-neutral-850);
+  --navigation-vertical-item-background-arrow-button-hover: var(--tedi-neutral-800);
+  --navigation-vertical-item-background-default: var(--tedi-neutral-900);
+  --navigation-vertical-item-background-focus: var(--tedi-neutral-900);
+  --navigation-vertical-item-background-hover: var(--tedi-neutral-850);
+  --navigation-vertical-item-border: var(--tedi-neutral-800);
+  --navigation-vertical-item-text: var(--general-text-white);
+  --navigation-vertical-tree-brand-active: var(--tedi-neutral-700);
+  --navigation-vertical-tree-brand-default: var(--tedi-neutral-550);
+  --navigation-vertical-tree-brand-hover: var(--tedi-neutral-600);
+  --navigation-vertical-tree-neutral-active: var(--tedi-neutral-700);
+  --navigation-vertical-tree-neutral-default: var(--tedi-neutral-550);
+  --navigation-vertical-tree-neutral-hover: var(--tedi-neutral-600);
   --popover-background: var(--general-surface-primary);
   --popover-border: var(--general-border-secondary);
   --popover-text: var(--general-text-primary);
@@ -498,22 +547,6 @@
   --progress-bar-background-passive: var(--form-slider-passive-background-default);
   --progress-bar-border-default: var(--form-slider-border-default);
   --progress-bar-range-label-text: var(--form-slider-range-label-text);
-  --side-navigation-background: var(--side-navigation-item-background-default);
-  --side-navigation-group-title-text: var(--tedi-neutral-450);
-  --side-navigation-item-border: var(--tedi-neutral-800);
-  --side-navigation-item-text: var(--general-text-white);
-  --side-navigation-item-background-active: var(--tedi-neutral-800);
-  --side-navigation-item-background-arrow-button-active: var(--tedi-neutral-850);
-  --side-navigation-item-background-arrow-button-hover: var(--tedi-neutral-800);
-  --side-navigation-item-background-default: var(--tedi-neutral-900);
-  --side-navigation-item-background-focus: var(--tedi-neutral-900);
-  --side-navigation-item-background-hover: var(--tedi-neutral-850);
-  --side-navigation-tree-brand-active: var(--tedi-neutral-700);
-  --side-navigation-tree-brand-default: var(--tedi-neutral-550);
-  --side-navigation-tree-brand-hover: var(--tedi-neutral-600);
-  --side-navigation-tree-neutral-active: var(--tedi-neutral-700);
-  --side-navigation-tree-neutral-default: var(--tedi-neutral-550);
-  --side-navigation-tree-neutral-hover: var(--tedi-neutral-600);
   --status-badge-background-accent: var(--tedi-orange-700);
   --status-badge-background-brand: var(--general-status-info-background-light);
   --status-badge-background-danger: var(--general-status-danger-background-primary);