From ef03a1d8192a79aecf9ad08a89fc6af26cf43fc2 Mon Sep 17 00:00:00 2001
From: Kyle Shike <kyleshike@gmail.com>
Date: Fri, 12 Apr 2024 09:37:04 -0400
Subject: [PATCH] Improves hover state of tabs to avoid content shifting
 (#1184)

---
 package.json                       | 8 ++++++--
 scss/colors/synthesis-palette.scss | 1 +
 scss/css_properties.scss           | 1 +
 src/Tabs/tabs.module.scss          | 7 +++++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9859786b..fdef3633 100644
--- a/package.json
+++ b/package.json
@@ -193,5 +193,9 @@
   },
   "readme": "https://github.com/user-interviews/ui-design-system#readme",
   "homepage": "https://github.com/user-interviews/ui-design-system",
-  "_id": "@user-interviews/ui-design-system@1.32.0"
-}
+  "_id": "@user-interviews/ui-design-system@1.32.0",
+  "volta": {
+    "node": "18.18.2",
+    "yarn": "1.22.21"
+  }
+}
\ No newline at end of file
diff --git a/scss/colors/synthesis-palette.scss b/scss/colors/synthesis-palette.scss
index f671eecf..3eae6c1c 100644
--- a/scss/colors/synthesis-palette.scss
+++ b/scss/colors/synthesis-palette.scss
@@ -19,6 +19,7 @@ $synth-header-neutral: #fbfbfb;
 $synth-page-neutral: #fdfdfd;
 $synth-text-neutral: #1b1b1b;
 $synth-unselected-neutral: #5b5b5b;
+$synth-unselected-tab: #767676;
 
 // main schema - visual hierarchy
 $synth-accent-green: #158d71;
diff --git a/scss/css_properties.scss b/scss/css_properties.scss
index 61077f2e..e776c5f6 100644
--- a/scss/css_properties.scss
+++ b/scss/css_properties.scss
@@ -187,6 +187,7 @@
   --synth-page-neutral: #{$synth-page-neutral};
   --synth-text-neutral: #{$synth-text-neutral};
   --synth-unselected-neutral: #{$synth-unselected-neutral};
+  --synth-unselected-tab: #{$synth-unselected-tab};
   --synth-accent-green: #{$synth-accent-green};
   --synth-dark-background-selected-blue: #{$synth-dark-background-selected-blue};
   --synth-dark-background-pressed-blue: #{$synth-dark-background-pressed-blue};
diff --git a/src/Tabs/tabs.module.scss b/src/Tabs/tabs.module.scss
index 1bdb2f0c..4234c5c3 100644
--- a/src/Tabs/tabs.module.scss
+++ b/src/Tabs/tabs.module.scss
@@ -41,17 +41,20 @@
 
   :global(.nav-link),
   :global(.nav-link.disabled) {
-    color: $synth-unselected-neutral;
+    color: $synth-unselected-tab;
     border-bottom: 1px solid $synth-div-stroke-neutral;
     position: relative;
     margin-bottom: -1px;
   }
 
+  :global(.nav-link.active) {
+    font-weight: $synth-font-weight-bold;
+  }
+
   :global(.nav-link.active),
   :global(.nav-link:hover),
   :global(.nav-link:active),
   :global(.nav-link:focus) {
-    font-weight: $synth-font-weight-bold;
     color: $synth-text-neutral;
     border-bottom: 3px solid $synth-indicator-stroke-green;
   }