From 9cc0f2f4b410eeaa3e56325a6c4ef615531f1183 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Wed, 15 Jan 2025 20:10:03 +0530
Subject: [PATCH 1/2] fix(tabs): theme changes

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/theme/components/tab.modifier.ts  | 2 +-
 src/theme/components/tabs.modifier.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts
index ed7ca5875..f9bced139 100644
--- a/src/theme/components/tab.modifier.ts
+++ b/src/theme/components/tab.modifier.ts
@@ -6,7 +6,7 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
       const {
         palette: {
           text: { default: defaultText },
-          background: { default: defaultBackground }
+          background: { neutral: defaultBackground }
         }
       } = theme;
       return {
diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts
index 63173a06c..79bdca246 100644
--- a/src/theme/components/tabs.modifier.ts
+++ b/src/theme/components/tabs.modifier.ts
@@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette.background.neutral?.default
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default

From a1432b8181df3b7266092c5bd06d302467df02be Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Thu, 16 Jan 2025 19:41:19 +0530
Subject: [PATCH 2/2] fix(colors): reuse colors

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/theme/colors/colors.ts            | 5 +++++
 src/theme/colors/index.ts             | 1 +
 src/theme/components/tab.modifier.ts  | 2 +-
 src/theme/components/tabs.modifier.ts | 2 +-
 src/theme/palette.ts                  | 4 ++--
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
index 45c94f786..5136bfda0 100644
--- a/src/theme/colors/colors.ts
+++ b/src/theme/colors/colors.ts
@@ -102,6 +102,11 @@ export const charcoal = {
   10: '#000D12'
 };
 
+export const gray = {
+  10: '#1A1A1A',
+  20: '#212121'
+};
+
 export const accentGrey = {
   100: '#F6F8F8',
   90: '#E8EFF3',
diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts
index 096a406b8..3d1a19607 100644
--- a/src/theme/colors/index.ts
+++ b/src/theme/colors/index.ts
@@ -57,6 +57,7 @@ export {
   darkSlateGray,
   darkTeal,
   eerieBlack,
+  gray,
   green,
   jungleGreen,
   keppel,
diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts
index f9bced139..58e49f42e 100644
--- a/src/theme/components/tab.modifier.ts
+++ b/src/theme/components/tab.modifier.ts
@@ -6,7 +6,7 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
       const {
         palette: {
           text: { default: defaultText },
-          background: { neutral: defaultBackground }
+          background: { tabs: defaultBackground }
         }
       } = theme;
       return {
diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts
index 79bdca246..1fb4ed457 100644
--- a/src/theme/components/tabs.modifier.ts
+++ b/src/theme/components/tabs.modifier.ts
@@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.neutral?.default
+      backgroundColor: theme.palette.background.tabs
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index 4fa6034d8..a8dda89f0 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -195,7 +195,7 @@ export const lightModePalette: PaletteOptions = {
     default: Colors.charcoal[100],
     secondary: Colors.accentGrey[90],
     tertiary: Colors.accentGrey[80],
-    tabs: Colors.charcoal[70],
+    tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[90],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -312,7 +312,7 @@ export const darkModePalette: PaletteOptions = {
     default: Colors.charcoal[10],
     secondary: Colors.accentGrey[20],
     tertiary: Colors.accentGrey[30],
-    tabs: Colors.charcoal[110],
+    tabs: Colors.gray[10], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[20],
     supplementary: Colors.accentGrey[40],
     blur: {