From bdc040c7951ac857bb01180bc7f303af35530946 Mon Sep 17 00:00:00 2001
From: Kitty Allen <kitty.allen@cultureamp.com>
Date: Fri, 7 Feb 2025 15:33:12 +1100
Subject: [PATCH 1/2] updates colors to reflect design changes

---
 .changeset/tiny-elephants-kick.md                 |  5 +++++
 .../__rc__/Tabs/subcomponents/Tab/Tab.module.css  |  3 +--
 .../Tabs/subcomponents/TabList/TabList.module.css | 15 +++++++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/tiny-elephants-kick.md

diff --git a/.changeset/tiny-elephants-kick.md b/.changeset/tiny-elephants-kick.md
new file mode 100644
index 00000000000..10001e46671
--- /dev/null
+++ b/.changeset/tiny-elephants-kick.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Tabs: small style changes in line with button
diff --git a/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css b/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
index 1f9fa7623ce..42d7f77bd7b 100644
--- a/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
+++ b/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
@@ -23,7 +23,6 @@
   }
 
   &:focus-visible {
-    background: var(--color-blue-100);
     color: var(--color-blue-500);
     border-color: var(--color-blue-500);
   }
@@ -37,7 +36,7 @@
   }
 
   &:not([data-disabled]):hover {
-    background: var(--color-blue-100);
+    background: var(--color-blue-200);
     color: var(--color-blue-500);
   }
 }
diff --git a/packages/components/src/__rc__/Tabs/subcomponents/TabList/TabList.module.css b/packages/components/src/__rc__/Tabs/subcomponents/TabList/TabList.module.css
index c0fda872113..b3643359cbe 100644
--- a/packages/components/src/__rc__/Tabs/subcomponents/TabList/TabList.module.css
+++ b/packages/components/src/__rc__/Tabs/subcomponents/TabList/TabList.module.css
@@ -3,7 +3,7 @@
 }
 
 .tabList {
-  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-bottom: 1px solid var(--color-gray-300);
   padding: var(--spacing-6) 0 0;
   width: 100%;
   height: 100%;
@@ -42,7 +42,7 @@
 
 .leftArrow,
 .leftArrow:hover {
-  border-right: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-right: 1px solid var(--color-gray-300);
 }
 
 .rightArrow {
@@ -51,10 +51,17 @@
 
 .rightArrow,
 .rightArrow:hover {
-  border-left: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-left: 1px solid var(--color-gray-300);
 }
 
 .leftArrow:hover,
 .rightArrow:hover {
-  background: var(--color-gray-200);
+  background: var(--color-blue-200);
+  color: var(--color-blue-500);
+}
+
+.leftArrow:active,
+.rightArrow:active {
+  background: var(--color-blue-100);
+  color: var(--color-blue-500);
 }

From fa9af58f0104fe699091190f5ff30391542af218 Mon Sep 17 00:00:00 2001
From: Kitty Allen <kitty.allen@cultureamp.com>
Date: Fri, 7 Feb 2025 15:59:45 +1100
Subject: [PATCH 2/2] Tabs active background colour change

---
 .../src/__rc__/Tabs/subcomponents/Tab/Tab.module.css          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css b/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
index 42d7f77bd7b..f611e058753 100644
--- a/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
+++ b/packages/components/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css
@@ -39,6 +39,10 @@
     background: var(--color-blue-200);
     color: var(--color-blue-500);
   }
+
+  &:not([data-disabled]):active {
+    background: var(--color-blue-100);
+  }
 }
 
 .tab[data-selected] {