From e1eabbfdd48ea580dbba8d10d44acbecfacd8b16 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Tue, 31 May 2022 13:33:34 -0500
Subject: [PATCH] Updated hover/focus states as requested

---
 components/src/tabs/tab-item.component.ts | 12 ++++++++----
 components/tailwind.config.base.js        |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/src/tabs/tab-item.component.ts b/components/src/tabs/tab-item.component.ts
index bac9d52e..8e736d7f 100644
--- a/components/src/tabs/tab-item.component.ts
+++ b/components/src/tabs/tab-item.component.ts
@@ -28,15 +28,14 @@ export class TabItemComponent {
       "tw-cursor-pointer",
       "tw-box-border", // Necessary? - compounds final width/height of tab to include borders
       "tw-text-main",
-      "hover:tw-border-t-4",
-      "hover:tw-border-t-secondary-700",
-      "hover:tw-no-underline",
-      "focus:tw-border-t-secondary-700",
+      "hover:tw-underline",
+      "focus:tw-underline",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",
       "disabled:tw-bg-secondary-100",
       "disabled:tw-text-muted",
+      "disabled:tw-no-underline",
       "disabled:tw-border-t-transparent",
       "disabled:tw-cursor-not-allowed",
     ].join(" ");
@@ -49,6 +48,11 @@ export class TabItemComponent {
       "tw-border-t-primary-500",
       "tw-border-b-transparent",
       "tw-text-primary-500",
+      "hover:tw-border-t-primary-700",
+      "hover:tw-text-primary-700",
+      "focus:tw-border-t-primary-700",
+      "focus:tw-text-primary-700",
+      "focus:tw-underline",
     ].join(" ");
   }
 }
diff --git a/components/tailwind.config.base.js b/components/tailwind.config.base.js
index 55954a07..dccc0aef 100644
--- a/components/tailwind.config.base.js
+++ b/components/tailwind.config.base.js
@@ -61,6 +61,7 @@ module.exports = {
       primary: {
         300: "var(--color-primary-300)",
         500: "var(--color-primary-500)",
+        700: "var(--color-primary-700)",
       },
     },
     ringOffsetColor: ({ theme }) => ({