Merge pull request #889 from sudhanshutech/use/tabs

fix theme changes in tabs

Author: sudhanshutech

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',

src/theme/colors/index.ts

@@ -57,6 +57,7 @@ export {
   darkSlateGray,
   darkTeal,
   eerieBlack,
+  gray,
   green,
   jungleGreen,
   keppel,

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: { tabs: defaultBackground }
         }
       } = theme;
       return {

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.tabs
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default

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: {