UX: Remove background from nav pill hover (#32893)

jordanvidrine · web-flow · commit 0f8248d889af · 2025-05-23T16:19:22.000-05:00
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
@@ -14,8 +14,8 @@
   --d-input-border--disabled: 1px solid var(--primary-low);
   --d-nav-color: var(--primary);
   --d-nav-bg-color: transparent;
-  --d-nav-color--hover: var(--primary);
-  --d-nav-bg-color--hover: var(--d-hover);
+  --d-nav-color--hover: var(--tertiary);
+  --d-nav-bg-color--hover: transparent;
   --d-nav-color--active: var(--tertiary);
   --d-nav-bg-color--active: transparent;
   --d-nav-border-color--active: var(--d-nav-color--active);
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
@@ -48,12 +48,7 @@
       }
 
       &:hover {
-        color: var(--d-nav-color--hover);
-        background: var(--d-nav-bg-color--hover);
-
-        .d-icon {
-          color: var(--d-nav-color--hover);
-        }
+        @include nav-hover;
       }
     }
 
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -290,6 +290,15 @@ $hpad: 0.65em;
   }
 }
 
+@mixin nav-hover() {
+  color: var(--d-nav-color--hover);
+  background: var(--d-nav-bg-color--hover);
+
+  .d-icon {
+    color: var(--d-nav-color--active);
+  }
+}
+
 @mixin click-counter-badge {
   content: attr(data-clicks);
   font-weight: normal;

Original file line number	Diff line number	Diff line change
`@@ -48,12 +48,7 @@`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`&:hover {`
`51`		`- color: var(--d-nav-color--hover);`
`52`		`- background: var(--d-nav-bg-color--hover);`
`53`		`-`
`54`		`- .d-icon {`
`55`		`- color: var(--d-nav-color--hover);`
`56`		`- }`
	`51`	`+ @include nav-hover;`
`57`	`52`	`}`
`58`	`53`	`}`
`59`	`54`