feat(tokens): more tokens

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
sudhanshutech · Mar 8, 2024 · a149648 · a149648
1 parent ed3ffc2
commit a149648
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 5 deletions.
diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
@@ -48,11 +48,28 @@ export const common = {
   white: WHITE
 };
 
-export const keppel = {};
+export const keppel = {
+  80: '#daf3eb',
+  70: '#00B39F',
+  60: '#93E6D1',
+  50: '#41CCB3',
+  40: '#00B39F',
+  30: '#008c81',
+  20: '#006661',
+  10: '#00403f'
+};
 
 export const carribean = {};
 
-export const saffron = {};
+export const saffron = {
+  70: '#F8E2A6',
+  60: '#EBC017',
+  50: '#D3A300',
+  40: '#B38600',
+  30: '#c4990a',
+  20: '#664F00',
+  10: '#403400'
+};
 
 /**
  * Grayscale Colors

diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts
@@ -52,11 +52,13 @@ export {
   eerieBlack,
   green,
   jungleGreen,
+  keppel,
   notificationColors,
   patternsBlue,
   primaryColor,
   red,
   redDelete,
+  saffron,
   tabMenu,
   tableBackgroundHover,
   white,

diff --git a/src/theme/palette.ts b/src/theme/palette.ts
@@ -30,6 +30,29 @@ declare module '@mui/material/styles' {
       error: Interactiveness;
       code: string;
     };
+    text: {
+      default: string;
+      secondary: string;
+      tertiary: string;
+      inverse: string;
+      brand: string;
+      info: string;
+      success: string;
+      error: string;
+    };
+    border: {
+      default: string;
+      strong: string;
+      brand: string;
+      normal: string;
+    };
+    icon: {
+      default: string;
+      brand: string;
+      inverse: string;
+      weather: string;
+      disabled: string;
+    };
   }
   interface SimplePaletteColorOptions {
     background: {
@@ -50,17 +73,86 @@ declare module '@mui/material/styles' {
       error: Interactiveness;
       code: string;
     };
+    text: {
+      default: string;
+      secondary: string;
+      tertiary: string;
+      inverse: string;
+      brand: string;
+      info: string;
+      success: string;
+      error: string;
+    };
+    border: {
+      default: string;
+      strong: string;
+      brand: string;
+      normal: string;
+    };
+    icon: {
+      default: string;
+      brand: string;
+      inverse: string;
+      weather: string;
+      disabled: string;
+    };
   }
 }
 
 export const lightModePalette: PaletteOptions = {
   background: {
     default: Colors.charcoal[100],
     secondary: Colors.accentGrey[90],
-    tertiary: Colors.accentGrey[80]
-    // rest of token in background
+    tertiary: Colors.accentGrey[80],
+    hover: Colors.charcoal[90],
+    blur: {
+      heavy: `rgba(${Colors.charcoal[90]}, 0.8)`,
+      light: `rgba(${Colors.charcoal[90]}, 0.2)`
+    },
+    brand: {
+      default: Colors.keppel[30],
+      hover: Colors.keppel[40],
+      disabled: Colors.charcoal[90],
+      pressed: Colors.keppel[10],
+      secondary: Colors.keppel[50],
+      tertiary: Colors.keppel[70]
+    },
+    cta: {
+      default: Colors.saffron[30],
+      hover: Colors.keppel[40],
+      pressed: Colors.keppel[50],
+      secondary: Colors.keppel[60],
+      tertiary: Colors.keppel[70]
+    },
+    info: {
+      default: Colors.blue[30],
+      hover: Colors.blue[20],
+      pressed: Colors.blue[10],
+      secondary: Colors.blue[60],
+      tertiary: Colors.blue[70]
+    },
+    success: {
+      default: Colors.green[30],
+      hover: Colors.green[20],
+      pressed: Colors.green[10],
+      secondary: Colors.green[60],
+      tertiary: Colors.green[70]
+    },
+    warning: {
+      default: Colors.yellow[30],
+      hover: Colors.yellow[20],
+      pressed: Colors.yellow[10],
+      secondary: Colors.yellow[60],
+      tertiary: Colors.yellow[70]
+    },
+    error: {
+      default: Colors.red[30],
+      hover: Colors.red[20],
+      pressed: Colors.red[10],
+      secondary: Colors.red[60],
+      tertiary: Colors.red[70]
+    }
   }
-  // rest of tokens
 };
 
 export const darkModePalette: PaletteOptions = {