Merge pull request #1158 from FaheemOnHub/add/status/colors

add: new color prop "status' for notification snackbars and designCard ribbons

Author: Namanv0509

src/custom/CustomCatalog/style.tsx

@@ -1,5 +1,5 @@
 import { styled, Typography } from '@mui/material';
-import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, slateGray, WHITESMOKE } from '../../theme';
+import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, WHITESMOKE } from '../../theme';
 import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors';
 
 type DesignCardProps = {
@@ -52,9 +52,11 @@ export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProp
   theme
 }) => {
   const mapToColor: Record<string, string> = {
-    community: slateGray.main,
-    official: theme.palette.background.cta?.default || '#EBC017',
-    verified: theme.palette.background.brand?.default || '#00B39F'
+    community: theme.palette.catalogStatus?.community,
+    official:
+      theme.palette.catalogStatus?.official,
+    verified:
+      theme.palette.catalogStatus?.verified
   };
   return {
     font: 'bold 10px sans-serif',

src/theme/palette.ts

@@ -169,6 +169,17 @@ declare module '@mui/material/styles' {
         alt: string;
       };
     };
+    status: {
+      success: string;
+      warning: string;
+      error: string;
+      info: string;
+    };
+    catalogStatus: {
+      community: string;
+      official: string;
+      verified: string;
+    };
   }
 
   // surface tokens need to have enough contrast
@@ -261,6 +272,18 @@ declare module '@mui/material/styles' {
         alt: string;
       };
     };
+
+    status: {
+      success: string;
+      warning: string;
+      error: string;
+      info: string;
+    };
+    catalogStatus: {
+      community: string;
+      official: string;
+      verified: string;
+    };
   }
 }
 
@@ -416,6 +439,17 @@ export const lightModePalette: PaletteOptions = {
       default: Colors.charcoal[40],
       alt: Colors.charcoal[40]
     }
+  },
+  status: {
+    success: Colors.notificationColors.success.main,
+    warning: Colors.notificationColors.warning.main,
+    error: Colors.notificationColors.error.main,
+    info: Colors.notificationColors.info.main
+  },
+  catalogStatus: {
+    community: Colors.slateGray.main,
+    official: Colors.saffron[40],
+    verified: Colors.keppel[40]
   }
 };
 
@@ -567,5 +601,16 @@ export const darkModePalette: PaletteOptions = {
       default: Colors.accentGrey[100],
       alt: Colors.keppel[40]
     }
+  },
+  status: {
+    success: Colors.notificationColors.success.main,
+    warning: Colors.notificationColors.warning.main,
+    error: Colors.notificationColors.error.main,
+    info: Colors.notificationColors.info.main
+  },
+  catalogStatus: {
+    community: Colors.slateGray.main,
+    official: Colors.saffron[40],
+    verified: Colors.keppel[40]
   }
 };

src/theme/theme.ts

@@ -297,6 +297,19 @@ export const createCustomTheme = (mode: PaletteMode, primitives?: PrimitivePalet
             default: alpha(p.foreground, 0.9),
             alt: alpha(p.foreground, 0.8)
           }
+        },
+        status: {
+          //->org-independent status colors
+          success: Colors.notificationColors.success.main,
+          warning: Colors.notificationColors.warning.main,
+          error: Colors.notificationColors.error.main,
+          info: Colors.notificationColors.info.main
+        },
+        //->catalog status colors (org-independent)
+        catalogStatus: {
+          community: Colors.slateGray.main,
+          official: Colors.saffron[40],
+          verified: Colors.keppel[40]
         }
       }
     : {};