@sonardigital/carbon-ui 1.2.15 → 1.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.15",
+   "version": "1.2.17",
    "description": "",
    "main": "src/index.ts",
    "files": [

package/src/theme/constants/components.ts

@@ -1,5 +1,10 @@
 import { Theme } from '@emotion/react';
-import { Components, CssVarsTheme, linearProgressClasses } from '@mui/material';
+import {
+   ButtonProps,
+   Components,
+   CssVarsTheme,
+   linearProgressClasses,
+} from '@mui/material';
 import { palette } from './palette';
 
 const defaultButtonStyle = {
@@ -13,6 +18,27 @@ const defaultButtonStyle = {
 
 const borderRadius = 1;
 
+const generateButtonVariants = (
+   color: Exclude<NonNullable<ButtonProps['color']>, 'inherit'>,
+) => {
+   return {
+      props: {
+         variant: 'contained' as const,
+         color,
+      },
+      style: ({ theme }: any) => ({
+         ...defaultButtonStyle,
+         backgroundColor: theme.palette[color].light,
+         color: theme.palette[color].main,
+         '&:hover': {
+            boxShadow: 0,
+            backgroundColor: theme.palette[color].main,
+            color: 'white',
+         },
+      }),
+   };
+};
+
 export const components: Components<
    Omit<Theme, 'components' | 'palette'> & CssVarsTheme
 > = {
@@ -202,7 +228,15 @@ export const components: Components<
          },
       },
    },
-
+   MuiSkeleton: {
+      defaultProps: {
+         variant: 'rounded',
+         animation: 'wave',
+         sx: {
+            bgcolor: 'grey.100',
+         },
+      },
+   },
    MuiAccordionDetails: {
       defaultProps: {
          sx: {
@@ -290,54 +324,12 @@ export const components: Components<
    },
    MuiButton: {
       variants: [
-         {
-            props: {
-               variant: 'contained',
-               color: 'primary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.primary.light,
-               color: theme.palette.primary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.primary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'secondary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.secondary.light,
-               color: theme.palette.secondary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.secondary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'info',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               paddingTop: 10,
-               backgroundColor: theme.palette.info.light,
-               color: theme.palette.info.main,
-               '&:hover': {
-                  backgroundColor: theme.palette.info.main,
-                  color: 'white',
-               },
-            }),
-         },
+         generateButtonVariants('primary'),
+         generateButtonVariants('secondary'),
+         generateButtonVariants('info'),
+         generateButtonVariants('error'),
+         generateButtonVariants('success'),
+         generateButtonVariants('warning'),
          {
             props: {
                variant: 'text',