diff --git a/libs/components/src/list/nav-list-item.scss b/libs/components/src/list/nav-list-item.scss
index 8b0b279e7d..366bf3c036 100644
--- a/libs/components/src/list/nav-list-item.scss
+++ b/libs/components/src/list/nav-list-item.scss
@@ -60,7 +60,8 @@
 }
 
 :host([selected]),
-:host([activated]) {
+:host([activated]),
+:host([hasActivatedChild]) {
   .mdc-deprecated-list-item__graphic.material-icons {
     font-variation-settings: 'FILL' 1;
   }
diff --git a/libs/components/src/theme/_index.scss b/libs/components/src/theme/_index.scss
index 6c9ca4e924..5e85860788 100644
--- a/libs/components/src/theme/_index.scss
+++ b/libs/components/src/theme/_index.scss
@@ -1,99 +1,21 @@
-@mixin css-variable-theme-tokens($theme, $prefix: 'cv') {
+@mixin css-variable-tokens($theme, $prefix: 'cv-theme') {
   @each $key, $value in $theme {
-    --#{$prefix}-theme-#{$key}: #{map-get($theme, $key)};
+    --#{$prefix}-#{$key}: #{map-get($theme, $key)};
   }
 }
 
 @mixin components-theme($theme, $typography) {
   // Covalent theme tokens as css variables
-  @include css-variable-theme-tokens($theme);
-
-  // Foreground colors
-  --mdc-theme-primary: #{map-get($theme, primary)};
-  --mdc-theme-secondary: #{map-get($theme, secondary)};
-  --mdc-theme-error: #{map-get($theme, error)};
-  --mdc-theme-negative: #{map-get($theme, error)};
-  --mdc-theme-positive: #{map-get($theme, positive)};
-  --mdc-theme-caution: #{map-get($theme, caution)};
-  --mdc-theme-emphasis: #{map-get($theme, emphasis)};
-
-  // Alias for primary
-  --mdc-theme-accent: #{map-get($theme, accent)};
-
-  // Background colors
-  --mdc-theme-background: #{map-get($theme, background)};
-  --mdc-ripple-color: #{map-get($theme, on-surface)};
-  --mdc-theme-surface: #{map-get($theme, surface)};
-  --mdc-theme-surface-canvas: #{map-get($theme, surface-canvas)};
-  --mdc-theme-surface-primary: #{map-get($theme, surface-primary)};
-  --mdc-theme-surface-primary-highlight: #{map-get(
-      $theme,
-      surface-primary-highlight
-    )};
-  --mdc-theme-surface-primary-highlight-hover: #{map-get(
-      $theme,
-      surface-primary-highlight-hover
-    )};
-  --mdc-theme-surface-secondary: #{map-get($theme, surface-secondary)};
-  --mdc-theme-surface-secondary-highlight: #{map-get(
-      $theme,
-      surface-secondary-highlight
-    )};
-  --mdc-theme-surface-secondary-highlight-hover: #{map-get(
-      $theme,
-      surface-secondary-highlight-hover
-    )};
-  --mdc-theme-surface-caution: #{map-get($theme, surface-caution)};
-  --mdc-theme-surface-caution-highlight: #{map-get(
-      $theme,
-      surface-caution-highlight
-    )};
-  --mdc-theme-surface-caution-highlight-hover: #{map-get(
-      $theme,
-      surface-caution-highlight-hover
-    )};
-  --mdc-theme-surface-negative: #{map-get($theme, surface-negative)};
-  --mdc-theme-surface-negative-highlight: #{map-get(
-      $theme,
-      surface-negative-highlight
-    )};
-  --mdc-theme-surface-negative-highlight-hover: #{map-get(
-      $theme,
-      surface-negative-highlight-hover
-    )};
-  --mdc-theme-surface-positive: #{map-get($theme, surface-positive)};
-  --mdc-theme-surface-positive-highlight: #{map-get(
-      $theme,
-      surface-positive-highlight
-    )};
-  --mdc-theme-surface-positive-highlight-hover: #{map-get(
-      $theme,
-      surface-positive-highlight-hover
-    )};
-  --mdc-theme-surface-neutral: #{map-get($theme, surface-neutral)};
-  --mdc-theme-surface-neutral-highlight: #{map-get(
-      $theme,
-      surface-neutral-highlight
-    )};
-  --mdc-theme-surface-neutral-highlight-hover: #{map-get(
-      $theme,
-      surface-neutral-highlight-hover
-    )};
-  --mdc-theme-surface-emphasis: #{map-get($theme, surface-emphasis)};
-  --mdc-theme-surface-emphasis-highlight: #{map-get(
-      $theme,
-      surface-emphasis-highlight
-    )};
-  --mdc-theme-surface-emphasis-highlight-hover: #{map-get(
-      $theme,
-      surface-emphasis-highlight-hover
-    )};
-  --mdc-theme-on-primary: #{map-get($theme, on-primary)};
-  --mdc-theme-on-secondary: #{map-get($theme, on-secondary)};
-  --mdc-theme-on-surface: #{map-get($theme, on-surface)};
+  @include css-variable-tokens($theme);
+  // Covalent typography tokens as css variables
+  @include css-variable-tokens($typography, 'cv-typography');
+  // Material tokens as css variables
+  @include css-variable-tokens($theme, 'mdc-theme');
+  // Material typography tokens as css variables
+  @include css-variable-tokens($typography, 'mdc-typography');
+
+  // Overrides that dont fit in the theme map
   --mdc-theme-border: #{map-get($theme, divider)};
-
-  // Alias for primary
   --mdc-theme-surface-accent: #{map-get($theme, surface-primary)};
   --mdc-theme-surface-accent-highlight: #{map-get(
       $theme,
@@ -104,213 +26,20 @@
       surface-primary-highlight-hover
     )};
 
+  // Icons
+  --mdc-icon-font: 'Material Symbols Outlined';
+
+  // Ripple
+  --mdc-ripple-color: #{map-get($theme, on-surface)};
+
+  // Shape
+  --mdc-shape-small: 8px;
+  --mdc-shape-medium: 8px;
+
   // Tooltip
   --mdc-plain-tooltip-container-color: #{map-get($theme, inverse-surface)};
   --mdc-plain-tooltip-supporting-text-color: #{map-get(
       $theme,
       inverse-on-surface
     )};
-
-  // Typography
-  --mdc-typography-font-family: #{map-get($typography, font-family)};
-  --mdc-typography-headline1-font-family: #{map-get(
-      $typography,
-      headline1-font-family
-    )};
-  --mdc-typography-headline1-font-size: #{map-get(
-      $typography,
-      headline1-font-size
-    )};
-  --mdc-typography-headline1-font-weight: #{map-get(
-      $typography,
-      headline1-font-weight
-    )};
-  --mdc-typography-headline1-line-height: #{map-get(
-      $typography,
-      headline1-line-height
-    )};
-  --mdc-typography-headline2-font-family: #{map-get(
-      $typography,
-      headline2-font-family
-    )};
-  --mdc-typography-headline2-font-size: #{map-get(
-      $typography,
-      headline2-font-size
-    )};
-  --mdc-typography-headline2-font-weight: #{map-get(
-      $typography,
-      headline2-font-weight
-    )};
-  --mdc-typography-headline2-line-height: #{map-get(
-      $typography,
-      headline2-line-height
-    )};
-  --mdc-typography-headline3-font-family: #{map-get(
-      $typography,
-      headline3-font-family
-    )};
-  --mdc-typography-headline3-font-size: #{map-get(
-      $typography,
-      headline3-font-size
-    )};
-  --mdc-typography-headline3-font-weight: #{map-get(
-      $typography,
-      headline3-font-weight
-    )};
-  --mdc-typography-headline3-line-height: #{map-get(
-      $typography,
-      headline3-line-height
-    )};
-  --mdc-typography-headline4-font-family: #{map-get(
-      $typography,
-      headline4-font-family
-    )};
-  --mdc-typography-headline4-font-size: #{map-get(
-      $typography,
-      headline4-font-size
-    )};
-  --mdc-typography-headline4-font-weight: #{map-get(
-      $typography,
-      headline4-font-weight
-    )};
-  --mdc-typography-headline4-line-height: #{map-get(
-      $typography,
-      headline4-line-height
-    )};
-  --mdc-typography-headline5-font-family: #{map-get(
-      $typography,
-      headline5-font-family
-    )};
-  --mdc-typography-headline5-font-size: #{map-get(
-      $typography,
-      headline5-font-size
-    )};
-  --mdc-typography-headline5-font-weight: #{map-get(
-      $typography,
-      headline5-font-weight
-    )};
-  --mdc-typography-headline5-line-height: #{map-get(
-      $typography,
-      headline5-line-height
-    )};
-  --mdc-typography-headline6-font-family: #{map-get(
-      $typography,
-      headline6-font-family
-    )};
-  --mdc-typography-headline6-font-size: #{map-get(
-      $typography,
-      headline6-font-size
-    )};
-  --mdc-typography-headline6-font-weight: #{map-get(
-      $typography,
-      headline6-font-weight
-    )};
-  --mdc-typography-headline6-line-height: #{map-get(
-      $typography,
-      headline6-line-height
-    )};
-  --mdc-typography-subtitle1-font-family: #{map-get(
-      $typography,
-      subtitle1-font-family
-    )};
-  --mdc-typography-subtitle1-font-size: #{map-get(
-      $typography,
-      subtitle1-font-size
-    )};
-  --mdc-typography-subtitle1-font-weight: #{map-get(
-      $typography,
-      subtitle1-font-weight
-    )};
-  --mdc-typography-subtitle1-line-height: #{map-get(
-      $typography,
-      subtitle1-line-height
-    )};
-  --mdc-typography-subtitle2-font-family: #{map-get(
-      $typography,
-      subtitle2-font-family
-    )};
-  --mdc-typography-subtitle2-font-size: #{map-get(
-      $typography,
-      subtitle2-font-size
-    )};
-  --mdc-typography-subtitle2-font-weight: #{map-get(
-      $typography,
-      subtitle2-font-weight
-    )};
-  --mdc-typography-subtitle2-line-height: #{map-get(
-      $typography,
-      subtitle2-line-height
-    )};
-  --mdc-typography-body1-font-family: var(--mdc-typography-font-family);
-  --mdc-typography-body1-font-size: #{map-get($typography, body1-font-size)};
-  --mdc-typography-body1-font-weight: #{map-get($typography, body1-font-weight)};
-  --mdc-typography-body1-line-height: #{map-get($typography, body1-line-height)};
-  --mdc-typography-body2-font-family: var(--mdc-typography-font-family);
-  --mdc-typography-body2-font-size: #{map-get($typography, body2-font-size)};
-  --mdc-typography-body2-font-weight: #{map-get($typography, body2-font-weight)};
-  --mdc-typography-body2-line-height: #{map-get($typography, body2-line-height)};
-  --mdc-typography-button-font-family: #{map-get(
-      $typography,
-      button-font-family
-    )};
-  --mdc-typography-button-font-size: #{map-get($typography, button-font-size)};
-  --mdc-typography-button-font-weight: #{map-get(
-      $typography,
-      button-font-weight
-    )};
-  --mdc-typography-button-line-height: #{map-get(
-      $typography,
-      button-line-height
-    )};
-  --mdc-typography-button-text-transform: none;
-  --mdc-typography-caption-font-family: var(--mdc-typography-font-family);
-  --mdc-typography-caption-font-size: #{map-get($typography, caption-font-size)};
-  --mdc-typography-caption-font-weight: #{map-get(
-      $typography,
-      caption-font-weight
-    )};
-  --mdc-typography-caption-line-height: #{map-get(
-      $typography,
-      caption-line-height
-    )};
-
-  // Text
-  --mdc-theme-text-primary-on-background: #{map-get(
-      $theme,
-      text-primary-on-background
-    )};
-  --mdc-theme-text-secondary-on-background: #{map-get(
-      $theme,
-      text-secondary-on-background
-    )};
-  --mdc-theme-text-hint-on-background: #{map-get(
-      $theme,
-      text-hint-on-background
-    )};
-  --mdc-theme-text-disabled-on-background: #{map-get(
-      $theme,
-      text-disabled-on-background
-    )};
-  --mdc-theme-text-icon-on-background: #{map-get(
-      $theme,
-      text-icon-on-background
-    )};
-  --mdc-theme-text-primary-on-light: #{map-get($theme, text-primary-on-light)};
-  --mdc-theme-text-secondary-on-light: #{map-get(
-      $theme,
-      text-secondary-on-light
-    )};
-  --mdc-theme-text-hint-on-light: #{map-get($theme, text-hint-on-light)};
-  --mdc-theme-text-disabled-on-light: #{map-get($theme, text-disabled-on-light)};
-  --mdc-theme-text-icon-on-light: #{map-get($theme, text-icon-on-light)};
-  --mdc-theme-text-primary-on-dark: #{map-get($theme, text-primary-on-dark)};
-  --mdc-theme-text-secondary-on-dark: #{map-get($theme, text-secondary-on-dark)};
-  --mdc-theme-text-hint-on-dark: #{map-get($theme, text-hint-on-dark)};
-  --mdc-theme-text-disabled-on-dark: #{map-get($theme, text-disabled-on-dark)};
-  --mdc-theme-text-icon-on-dark: #{map-get($theme, text-icon-on-dark)};
-  --mdc-icon-font: 'Material Symbols Outlined';
-
-  // Shape
-  --mdc-shape-small: 8px;
-  --mdc-shape-medium: 8px;
 }