From 1769d479d3cf4f4f4d7e1fa5730a885189e99772 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip@pixelflips.com>
Date: Tue, 23 Jan 2024 12:00:52 -0800
Subject: [PATCH] fix(nav): adjust sizing and color of text and icon

---
 .../app/views/sage_components/_sage_nav_link.html.erb        | 2 +-
 packages/sage-assets/lib/stylesheets/components/_nav.scss    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb
index 5e0f8973ae..8c052e3b73 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_nav_link.html.erb
@@ -22,7 +22,7 @@ attributes = component.attributes.present? ? component.attributes : {}
 %>
 <%= link_to component.link, method: component.method, class: "sage-nav__link #{active_class} #{component_class} #{nav_link_icon_class}", **attributes do %>
   <% if component.icon %>
-    <i class="sage-icon-<%= component.icon %>-lg sage-nav__icon"></i>
+    <i class="sage-icon-<%= component.icon %> sage-nav__icon"></i>
   <% end %>
   <span class="sage-nav__label">
     <%= component.text %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
index 6293ab452f..5ecab8ca10 100644
--- a/packages/sage-assets/lib/stylesheets/components/_nav.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -4,11 +4,11 @@
 /// @group sage
 ////
 
-$-nav-color-text: sage-color(charcoal, 500);
+$-nav-color-text: sage-color(charcoal, 300);
 $-nav-color-focus: sage-color(grey, 500);
 $-nav-color-background: sage-color(grey, 300);
 $-nav-color-background-hover: sage-color(grey, 300);
-$-nav-icon-size: rem(20px);
+$-nav-icon-size: rem(16px);
 $-nav-icon-spacing: rem(8px);
 $-nav-subitem-border-width: rem(2px);
 
@@ -49,6 +49,7 @@ $-nav-subitem-border-width: rem(2px);
   transition-property: background, box-shadow;
 
   &:hover {
+    color: $-nav-color-text;
     background-color: $-nav-color-background-hover;
   }
 }