Enhance navbar styles with new hover effects and color variables (#2159)

.changeset/thick-kids-glow.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixes navbar styles with new hover effects and color variables

core/scss/_variables.scss

@@ -681,7 +681,7 @@ $dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 // Tooltip
 $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
 $tooltip-color: var(--#{$prefix}light) !default;
-$tooltip-padding-y: var(--#{$prefix}spacer-2) !default;
+$tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
 $tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
 
 // Loader
@@ -729,9 +729,10 @@ $modal-sm: 380px !default;
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
+$nav-link-active-color: var(--#{$prefix}body-color) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
-$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
+$nav-link-icon-color: inherit !default;
 
 $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
 $nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
@@ -753,7 +754,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
-$navbar-light-color: var(--#{$prefix}muted) !default;
+$navbar-light-color: var(--#{$prefix}secondary) !default;
 
 $navbar-hover-color: $white !default;
 
@@ -762,8 +763,8 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
-$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-active-color: var(--#{$prefix}body-color) !default;
-$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 
@@ -787,6 +788,7 @@ $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !default;
 
 $navbar-nav-link-padding-x: $nav-link-padding-x !default;
+$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
 
 $navbar-active-border-color: var(--#{$prefix}primary) !default;
 

core/scss/layout/_navbar.scss

@@ -107,8 +107,8 @@ Navbar
 
     .nav-link {
       position: relative;
-      min-width: 2rem;
+      min-width: 2.5rem;
-      min-height: 2rem;
+      min-height: 2.5rem;
       justify-content: center;
       border-radius: var(--#{$prefix}border-radius);
 
@@ -122,11 +122,6 @@ Navbar
   }
 }
 
-.navbar-nav {
-  margin: 0;
-  padding: 0;
-}
-
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -146,6 +141,10 @@ Navbar
         .nav-item.active {
           position: relative;
 
+          .nav-link {
+            color: var(--#{$prefix}navbar-active-color);
+          }
+
           &:after {
             content: "";
             position: absolute;
@@ -276,6 +275,9 @@ Navbar transparent
 Navbar nav
  */
 .navbar-nav {
+  --#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
+  margin: 0;
+  padding: 0;
   align-items: stretch;
 
   .nav-item {

core/scss/marketing/_browser.scss

@@ -53,7 +53,7 @@
   justify-content: center;
   text-decoration: none;
   padding: .25rem;
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
   border-radius: var(--#{$prefix}border-radius);
   line-height: 1;

core/scss/marketing/_hero.scss

@@ -18,7 +18,7 @@
 }
 
 .hero-description {
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h2);
   line-height: 1.5;
   margin: 0 auto;

core/scss/marketing/_sections.scss

@@ -81,7 +81,7 @@
 }
 
 .section-description {
-  color: var(--#{$prefix}muted);
+  color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h3);
   line-height: var(--#{$prefix}line-height-h3);
   margin-top: 1rem;

core/scss/ui/_nav.scss

@@ -51,8 +51,13 @@
 
 .nav-link {
   display: flex;
-  @include transition(color $transition-time);
+  @include transition(color $transition-time, background-color $transition-time);
   align-items: center;
+
+  &:hover,
+  &:focus {
+    background-color: var(--#{$prefix}nav-link-hover-bg);
+  }
 }
 
 .nav-link-toggle {

preview/pages/_includes/layout/navbar-side.html

@@ -14,15 +14,17 @@
 	{% endunless %}
 
 	<div class="d-none d-{{ include.breakpoint }}-flex">
-		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		<div class="nav-item">
-		   data-bs-placement="bottom">
+			<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
-			{% include "ui/icon.html" icon="moon" %}
+				data-bs-placement="bottom">
-		</a>
+				{% include "ui/icon.html" icon="moon" %}
+			</a>
 
-		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+			<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
-		   data-bs-placement="bottom">
+				data-bs-placement="bottom">
-			{% include "ui/icon.html" icon="sun" %}
+				{% include "ui/icon.html" icon="sun" %}
-		</a>
+			</a>
+		</div>
 
 		<div class="nav-item dropdown d-none d-md-flex me-3">
 			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
@@ -36,7 +38,7 @@
 	</div>
 
 	<div class="nav-item dropdown">
-		<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+		<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
 			{% include "ui/avatar.html" person-id=person-id size="sm" %}
 
 			{% unless include.hide-username %}