Merge pull request #2199 from Teradata/style/nav-item-selected

fix(components): background styles to selected nav item
Teradata · Jul 23, 2024 · dc64034 · dc64034
2 parents 1467026 + b39a556
commit dc64034
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -16,6 +16,8 @@
   --cv-list-item-graphic-margin-left: 0;
   --cv-list-menu-height: 0;
   --cv-list-item-expansion-icon-size: 0;
+  --cv-list-item-selected-background-color: var(--cv-theme-primary-24);
+  --cv-list-item-selected-color: var(--cv-theme-primary);
 }
 
 :host([open]) .navigation {
@@ -27,6 +29,10 @@
   --cv-list-item-expansion-icon-margin: -24px;
   --cv-list-item-expansion-icon-size: 24px;
   --cv-list-menu-height: inherit;
+  --cv-list-item-selected-background-color: var(
+    --cv-theme-on-surface-variant-8
+  );
+  --cv-list-item-selected-color: var(--cv-theme-on-surface-variant);
 }
 
 :host([helpOpen]) {

diff --git a/libs/components/src/list/nav-list-item.scss b/libs/components/src/list/nav-list-item.scss
@@ -23,6 +23,16 @@
   }
 }
 
+:host([selected]:not([activated])) .expansion-header {
+  transition: background-color 250ms ease-in, color 250ms ease-in;
+  background-color: var(--cv-list-item-selected-background-color);
+  color: var(--cv-list-item-selected-color);
+
+  .mdc-deprecated-list-item__graphic {
+    --mdc-theme-text-icon-on-background: var(--cv-list-item-selected-color);
+  }
+}
+
 :host([subnav]) {
   height: 32px;
   font-weight: var(--mdc-typography-body2-font-weight);