HDS-3373 Add conditionals to dark theme mixin for sidenav

hashicorp · Jun 25, 2024 · e3c5b21 · e3c5b21
1 parent 87dcaa2
commit e3c5b21
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/packages/components/src/styles/components/side-nav/header.scss b/packages/components/src/styles/components/side-nav/header.scss
@@ -42,7 +42,7 @@
 // "home-link"
 
 .hds-side-nav__home-link {
-  @include hds-interactive-dark-theme($add-visible-border: false);
+  @include hds-interactive-dark-theme($add-visible-border: false, $is-within-side-nav: true);
   display: block;
   width: 100%;
   height: 100%;
@@ -62,7 +62,7 @@
 .hds-side-nav__dropdown { // ⬅︎ add this class name to the `Hds::Dropdown` component to apply the style overrides
   .hds-dropdown-toggle-icon,
   .hds-dropdown-toggle-button {
-    @include hds-interactive-dark-theme();
+    @include hds-interactive-dark-theme($add-visible-border: true, $is-within-side-nav: true);
   }
 }
 

diff --git a/packages/components/src/styles/mixins/_interactive-dark-theme.scss b/packages/components/src/styles/mixins/_interactive-dark-theme.scss
@@ -5,12 +5,23 @@
 
  @use "../mixins/focus-ring" as *;
 
+ // TODO: Deprecate SideNav specific dark theme tokens in favor of general dark theme tokens
+
 // Used to apply dark theme to interactive elements such as Button & Dropdown
-@mixin hds-interactive-dark-theme($add-visible-border: true) {
-  color: var(--token-color-palette-neutral-0);
-  background-color: var(--token-color-palette-neutral-700);
+@mixin hds-interactive-dark-theme($add-visible-border: true, $is-within-side-nav: false) {
+  @if $is-within-side-nav {
+    // sidenav specific dark theme tokens
+    color: var(--token-side-nav-color-foreground-strong);
+    background-color: transparent; // test
+    border-radius: var(--token-side-nav-body-list-item-border-radius);
+  } @else {
+    // general dark theme tokens
+    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-palette-neutral-700);
+    border-radius: var(--token-form-control-border-radius);
+  }
+
   border: 1px solid transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
   cursor: pointer;
 
   @if ($add-visible-border) {
@@ -37,19 +48,33 @@
 
   &:hover,
   &.mock-hover {
-    color: var(--token-color-palette-neutral-0); // to avoid overrides by specificity (eg. `a:hover`)
-    background-color: var(--token-color-palette-neutral-600);
-
+    @if $is-within-side-nav {
+      // sidenav specific dark theme tokens
+      color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
+      background-color: var(--token-side-nav-color-surface-interactive-hover);
+    } @else {
+      // general dark theme tokens
+      color: var(--token-color-palette-neutral-0); // to avoid overrides by specificity (eg. `a:hover`)
+      background-color: var(--token-color-palette-neutral-600);
+    }
+
     @if ($add-visible-border) {
       border-color: var(--token-color-palette-neutral-500);
     }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-color-palette-neutral-0); // to avoid overrides by specificity (eg. `a:hover`)
+    @if $is-within-side-nav {
+      // sidenav specific dark theme tokens
+      color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
+      background-color: var(--token-side-nav-color-surface-interactive-active);
+    } @else {
+      // general dark theme tokens
+      color: var(--token-color-palette-neutral-0); // to avoid overrides by specificity (eg. `a:hover`)
     background-color: var(--token-color-palette-neutral-500);
-
+    }
+
     @if ($add-visible-border) {
       border-color: var(--token-color-palette-neutral-400);
     }