Improves hover state of tabs to avoid content shifting (#1184)

Author: kyleshike

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/[email protected]"
-}
+  "_id": "@user-interviews/[email protected]",
+  "volta": {
+    "node": "18.18.2",
+    "yarn": "1.22.21"
+  }
+}

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;

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};

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;
   }