@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/apps/workflow/src/theme/index.ts

@@ -1,546 +1,546 @@
-import * as React from 'react';
-import { alpha, createTheme, ThemeOptions } from '@mui/material/styles';
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {}
-}
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsVariantOverrides {
-    addNode: true;
-  }
-
-  interface ButtonPropsColorOverrides {}
-}
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    draggedDiagramCard: true;
-    diagramCard: true;
-  }
-}
-
-declare module '@mui/material/TextField' {
-  interface TextFieldPropsVariantOverrides {
-    cardTitle: true;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    neutral: Palette['primary'];
-    tertiary: Palette['primary'];
-    globalAction: Palette['primary'];
-    stepAction: Palette['primary'];
-
-    checkboxPrimary: Palette['primary'];
-    checkboxStyle1: Palette['secondary'];
-  }
-
-  interface PaletteOptions {
-    neutral?: PaletteOptions['primary'];
-    tertiary?: PaletteOptions['primary'];
-    globalAction?: PaletteOptions['primary'];
-    stepAction?: PaletteOptions['primary'];
-
-    checkboxPrimary?: PaletteOptions['primary'];
-    checkboxStyle1?: PaletteOptions['secondary'];
-  }
-}
-
-let theme = createTheme({});
-
-const DiagramCardStyles = {
-  backgroundColor: '#fff',
-  padding: '10px',
-  borderRadius: '0.5rem',
-  border: '2px solid #1d1d1d',
-  paddingTop: '-1rem',
-  fontSize: '0.8rem',
-  height: '100%',
-  width: '100%',
-};
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    styledBox: { [key: string]: React.CSSProperties };
-    tableView?: {
-      [key: string]:
-        | React.CSSProperties
-        | { [key: string]: React.CSSProperties };
-    };
-  }
-
-  interface ThemeOptions {
-    styledBox?: { [key: string]: React.CSSProperties };
-    tableView?: {
-      [key: string]: React.CSSProperties | { [key: string]: any };
-    };
-  }
-}
-
-declare module '@flowuent-labs/interfaces' {
-  interface StyledBoxVariantOverrides {
-    inputVariant: true;
-    cardCoverImage: true;
-    cardCoverImagePreview: true;
-    cardAddNewBlock: true;
-  }
-
-  interface DataGridVariantOverrides {
-    grayRow: true;
-  }
-}
-
-const themeOptions: ThemeOptions = {
-  styledBox: {
-    inputVariant: {
-      width: '100%',
-      textAlign: 'center',
-      border: 'none',
-      backgroundColor: 'transparent',
-      outline: 'none',
-    },
-    cardCoverImage: {
-      width: '100%',
-      maxWidth: '7rem',
-      height: 'auto',
-      maxHeight: '5rem',
-      objectFit: 'cover',
-      borderRadius: '0.5rem',
-    },
-    cardCoverImagePreview: {
-      borderRadius: '0.5rem',
-      width: '100%',
-      maxWidth: '7rem',
-      height: '5rem',
-      backgroundColor: 'rgba(245, 204, 0, 0.16)',
-    },
-    cardAddNewBlock: {
-      fontSize: '0.7rem',
-      fontWeight: 600,
-      backgroundColor: '#fff',
-      color: '#1d1d1d',
-      marginBottom: '2px',
-      borderRadius: '0.3rem',
-      minWidth: '6rem',
-      padding: '0.25rem',
-      width: '100%',
-      // '&:hover': {
-      //   backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      // },
-    },
-  },
-  tableView: {
-    grayRow: {
-      // FIXME: need to fix the design
-      '.MuiDataGrid-row': {
-        backgroundColor: '#F5F5F5',
-        color: '#707070B2',
-        '&:hover': {
-          backgroundColor: '#F5F5F5',
-        },
-      },
-      '& .MuiDataGrid-row.Mui-hovered': {
-        backgroundColor: '#F5F5F5',
-      },
-      '.MuiDataGrid-columnHeaders': {
-        backgroundColor: '#F5F5F5',
-      },
-    },
-  },
-
-  typography: {
-    button: {
-      fontWeight: 600,
-    },
-    fontFamily:
-      '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Roboto"',
-    body1: {
-      fontSize: '1vw',
-      fontWeight: 400,
-      lineHeight: 1.5,
-    },
-    body2: {
-      fontSize: '0.875vw',
-      fontWeight: 400,
-      lineHeight: 1.57,
-    },
-    subtitle1: {
-      fontSize: '1vw',
-      fontWeight: 500,
-      lineHeight: 1.75,
-    },
-    subtitle2: {
-      fontSize: '0.875vw',
-      fontWeight: 500,
-      lineHeight: 1.57,
-    },
-    overline: {
-      fontSize: '0.75vw',
-      fontWeight: 600,
-      letterSpacing: '0.5px',
-      lineHeight: 2.5,
-      textTransform: 'uppercase',
-    },
-    caption: {
-      fontSize: '0.75vw',
-      fontWeight: 400,
-      lineHeight: 1.66,
-    },
-    h1: {
-      fontWeight: 700,
-      fontSize: '3.5vw',
-      lineHeight: 1.375,
-    },
-    h2: {
-      fontWeight: 700,
-      fontSize: '3vw',
-      lineHeight: 1.375,
-    },
-    h3: {
-      fontWeight: 700,
-      fontSize: '2.25vw',
-      lineHeight: 1.375,
-    },
-    h4: {
-      fontWeight: 700,
-      fontSize: '2vw',
-      lineHeight: 1.375,
-    },
-    h5: {
-      fontWeight: 600,
-      fontSize: '1.5vw',
-      lineHeight: 1.375,
-    },
-    h6: {
-      fontWeight: 600,
-      fontSize: '1.125vw',
-      lineHeight: 1.375,
-    },
-  },
-
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 1000,
-      lg: 1200,
-      xl: 1920,
-    },
-  },
-  components: {
-    MuiTypography: {
-      variants: [],
-    },
-    MuiPaper: {
-      variants: [
-        {
-          props: { variant: 'draggedDiagramCard' },
-          style: { ...DiagramCardStyles, borderColor: '#fd944e' },
-        },
-        {
-          props: { variant: 'diagramCard' },
-          style: DiagramCardStyles,
-        },
-      ],
-    },
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: 'addNode' },
-          style: {
-            position: 'absolute',
-            width: '8px',
-            height: '8px',
-            minWidth: '8px',
-            minHeight: '8px',
-            padding: '7px 6px 6px 6px',
-            borderRadius: '50%',
-            border: 'none',
-            backgroundColor: '#0050ff',
-            fontSize: '0.8rem',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#fff',
-            '&:hover': {
-              backgroundColor: alpha('#0050ff', 0.8),
-            },
-          },
-        },
-      ],
-    },
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F5F5F5',
-          color: '#707070',
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          '&.Mui-selected': {
-            color: '#393434',
-          },
-        },
-        selected: {
-          color: '#393434',
-        },
-      },
-    },
-    MuiTabs: {
-      styleOverrides: {
-        indicator: {
-          backgroundColor: '#2761DA',
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F5F5F5',
-          color: '#707070',
-        },
-      },
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          '&.cardTitle': {
-            fontSize: '0.8rem',
-            fontWeight: 600,
-            '& input': {
-              textAlign: 'start',
-              backgroundColor: 'transparent',
-              padding: '0.05rem 0.1rem',
-              minWidth: '6rem',
-              maxWidth: '100%',
-              marginBottom: '0.4rem',
-            },
-            '& .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-            '&:hover .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-            '&.Mui-focused .MuiInput-notchedOutline': {
-              border: 'none',
-            },
-          },
-        },
-      },
-    },
-    MuiCardContent: {},
-    MuiCardHeader: {},
-
-    MuiCssBaseline: {
-      styleOverrides: {
-        '*': {},
-        html: {},
-        body: {},
-      },
-    },
-    MuiOutlinedInput: {},
-    MuiTableHead: {},
-    MuiSwitch: {
-      styleOverrides: {
-        root: {
-          width: 78,
-          height: 29,
-          padding: 1,
-        },
-        switchBase: {
-          padding: 1,
-          margin: 2,
-          transitionDuration: '300ms',
-          '&.Mui-checked': {
-            width: 78,
-            transform: 'translateX(13px)',
-            color: '#2761DA',
-          },
-          '&.Mui-focusVisible .MuiSwitch-thumb': {
-            color: '#FAFAFA',
-            border: '6px solid #FAFAFA',
-          },
-        },
-        thumb: {
-          boxSizing: 'border-box',
-          width: 42,
-          height: 22,
-          borderRadius: '99px',
-        },
-        track: {
-          borderRadius: '13px',
-        },
-        colorSecondary: {
-          '&.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#2761DA',
-            opacity: 1,
-            border: 0,
-          },
-          '&.Mui-disabled + .MuiSwitch-track': {
-            opacity: 0.7,
-          },
-          '&.Mui-disabled .MuiSwitch-thumb': {
-            color: '#B3B3B3',
-          },
-        },
-      },
-    },
-  },
-  palette: {
-    neutral: {
-      100: '#F3F4F6',
-      200: '#E5E7EB',
-      300: '#D1D5DB',
-      400: '#9CA3AF',
-      500: '#6B7280',
-      600: '#4B5563',
-      700: '#374151',
-      800: '#1F2937',
-      900: '#3f4b68',
-    },
-    action: {
-      active: '#6B7280',
-      focus: 'rgba(55, 65, 81, 0.12)',
-      hover: 'rgba(55, 65, 81, 0.04)',
-      selected: 'rgba(55, 65, 81, 0.08)',
-      disabledBackground: 'rgba(55, 65, 81, 0.12)',
-      disabled: 'rgba(55, 65, 81, 0.26)',
-    },
-    background: {
-      // grey color
-      default: '#d3d3d3',
-
-      // Old background
-      // default1: '#8262b4',
-      // coral
-      paper: '#FFFFFF',
-    },
-    divider: '#E6E8F0',
-    primary: {
-      main: '#b1d2d2',
-      light: '#828DF8',
-      dark: '#3832A0',
-      contrastText: '#FFFFFF',
-    },
-    tertiary: {
-      main: '#3832A0',
-      light: '#b8d4d4',
-      dark: '#14B8A6',
-      contrastText: '#FFFFFF',
-    },
-    secondary: {
-      main: '#10B981',
-      light: '#3FC79A',
-      dark: '#0B815A',
-      contrastText: '#FFFFFF',
-    },
-    success: {
-      main: '#14B8A6',
-      light: '#43C6B7',
-      dark: '#0E8074',
-      contrastText: '#FFFFFF',
-    },
-    info: {
-      main: '#2196F3',
-      light: '#64B6F7',
-      dark: '#0B79D0',
-      contrastText: '#FFFFFF',
-    },
-    warning: {
-      main: '#FFB020',
-      light: '#FFBF4C',
-      dark: '#B27B16',
-      contrastText: '#FFFFFF',
-    },
-    error: {
-      main: '#D14343',
-      light: '#DA6868',
-      dark: '#922E2E',
-      contrastText: '#FFFFFF',
-    },
-    // goToModule: {
-    //     main: '#2F1943',
-    //         light: '#DA6868',
-    //         dark: '#922E2E',
-    //         contrastText: '#FFFFFF'
-    // },
-    text: {
-      primary: '#121828',
-      secondary: '#65748B',
-      disabled: 'rgba(55, 65, 81, 0.48)',
-    },
-  },
-  shape: {
-    borderRadius: 8,
-  },
-  shadows: [
-    'none',
-    '0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1)',
-    '0px 1px 2px rgba(100, 116, 139, 0.12)',
-    '0px 1px 4px rgba(100, 116, 139, 0.12)',
-    '0px 1px 5px rgba(100, 116, 139, 0.12)',
-    '0px 1px 6px rgba(100, 116, 139, 0.12)',
-    '0px 2px 6px rgba(100, 116, 139, 0.12)',
-    '0px 3px 6px rgba(100, 116, 139, 0.12)',
-    '0px 2px 4px rgba(31, 41, 55, 0.06), 0px 4px 6px rgba(100, 116, 139, 0.12)',
-    '0px 5px 12px rgba(100, 116, 139, 0.12)',
-    '0px 5px 14px rgba(100, 116, 139, 0.12)',
-    '0px 5px 15px rgba(100, 116, 139, 0.12)',
-    '0px 6px 15px rgba(100, 116, 139, 0.12)',
-    '0px 7px 15px rgba(100, 116, 139, 0.12)',
-    '0px 8px 15px rgba(100, 116, 139, 0.12)',
-    '0px 9px 15px rgba(100, 116, 139, 0.12)',
-    '0px 10px 15px rgba(100, 116, 139, 0.12)',
-    '0px 12px 22px -8px rgba(100, 116, 139, 0.25)',
-    '0px 13px 22px -8px rgba(100, 116, 139, 0.25)',
-    '0px 14px 24px -8px rgba(100, 116, 139, 0.25)',
-    '0px 10px 10px rgba(31, 41, 55, 0.04), 0px 20px 25px rgba(31, 41, 55, 0.1)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-    '0px 25px 50px rgba(100, 116, 139, 0.25)',
-  ],
-};
-
-theme = createTheme(theme, themeOptions);
-theme = createTheme(theme, {
-  palette: {
-    globalAction: {
-      main: '#260353',
-      light: '#441680',
-      dark: '#441680',
-      contrastText: '#fff',
-    },
-    stepAction: {
-      main: '#441680',
-      light: '#260353',
-      dark: '#260353',
-      contrastText: '#fff',
-    },
-
-    checkboxPrimary: {
-      main: '#ccc',
-      contrastText: '#FFFFFF',
-    },
-    checkboxStyle1: {
-      checked: '#78C1BE',
-      border: '1px solid #78C1BE',
-      hover: '#ccc',
-      disabled: '#FFFFFF',
-      backgroundColor: '',
-      contrastText: '#fff',
-    },
-  },
-});
-
-export { theme };
+import * as React from 'react';
+import { alpha, createTheme, ThemeOptions } from '@mui/material/styles';
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {}
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsVariantOverrides {
+    addNode: true;
+  }
+
+  interface ButtonPropsColorOverrides {}
+}
+
+declare module '@mui/material/Paper' {
+  interface PaperPropsVariantOverrides {
+    draggedDiagramCard: true;
+    diagramCard: true;
+  }
+}
+
+declare module '@mui/material/TextField' {
+  interface TextFieldPropsVariantOverrides {
+    cardTitle: true;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    neutral: Palette['primary'];
+    tertiary: Palette['primary'];
+    globalAction: Palette['primary'];
+    stepAction: Palette['primary'];
+
+    checkboxPrimary: Palette['primary'];
+    checkboxStyle1: Palette['secondary'];
+  }
+
+  interface PaletteOptions {
+    neutral?: PaletteOptions['primary'];
+    tertiary?: PaletteOptions['primary'];
+    globalAction?: PaletteOptions['primary'];
+    stepAction?: PaletteOptions['primary'];
+
+    checkboxPrimary?: PaletteOptions['primary'];
+    checkboxStyle1?: PaletteOptions['secondary'];
+  }
+}
+
+let theme = createTheme({});
+
+const DiagramCardStyles = {
+  backgroundColor: '#fff',
+  padding: '10px',
+  borderRadius: '0.5rem',
+  border: '2px solid #1d1d1d',
+  paddingTop: '-1rem',
+  fontSize: '0.8rem',
+  height: '100%',
+  width: '100%',
+};
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    styledBox: { [key: string]: React.CSSProperties };
+    tableView?: {
+      [key: string]:
+        | React.CSSProperties
+        | { [key: string]: React.CSSProperties };
+    };
+  }
+
+  interface ThemeOptions {
+    styledBox?: { [key: string]: React.CSSProperties };
+    tableView?: {
+      [key: string]: React.CSSProperties | { [key: string]: any };
+    };
+  }
+}
+
+declare module '@flowuent-labs/interfaces' {
+  interface StyledBoxVariantOverrides {
+    inputVariant: true;
+    cardCoverImage: true;
+    cardCoverImagePreview: true;
+    cardAddNewBlock: true;
+  }
+
+  interface DataGridVariantOverrides {
+    grayRow: true;
+  }
+}
+
+const themeOptions: ThemeOptions = {
+  styledBox: {
+    inputVariant: {
+      width: '100%',
+      textAlign: 'center',
+      border: 'none',
+      backgroundColor: 'transparent',
+      outline: 'none',
+    },
+    cardCoverImage: {
+      width: '100%',
+      maxWidth: '7rem',
+      height: 'auto',
+      maxHeight: '5rem',
+      objectFit: 'cover',
+      borderRadius: '0.5rem',
+    },
+    cardCoverImagePreview: {
+      borderRadius: '0.5rem',
+      width: '100%',
+      maxWidth: '7rem',
+      height: '5rem',
+      backgroundColor: 'rgba(245, 204, 0, 0.16)',
+    },
+    cardAddNewBlock: {
+      fontSize: '0.7rem',
+      fontWeight: 600,
+      backgroundColor: '#fff',
+      color: '#1d1d1d',
+      marginBottom: '2px',
+      borderRadius: '0.3rem',
+      minWidth: '6rem',
+      padding: '0.25rem',
+      width: '100%',
+      // '&:hover': {
+      //   backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      // },
+    },
+  },
+  tableView: {
+    grayRow: {
+      // FIXME: need to fix the design
+      '.MuiDataGrid-row': {
+        backgroundColor: '#F5F5F5',
+        color: '#707070B2',
+        '&:hover': {
+          backgroundColor: '#F5F5F5',
+        },
+      },
+      '& .MuiDataGrid-row.Mui-hovered': {
+        backgroundColor: '#F5F5F5',
+      },
+      '.MuiDataGrid-columnHeaders': {
+        backgroundColor: '#F5F5F5',
+      },
+    },
+  },
+
+  typography: {
+    button: {
+      fontWeight: 600,
+    },
+    fontFamily:
+      '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Roboto"',
+    body1: {
+      fontSize: '1vw',
+      fontWeight: 400,
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: '0.875vw',
+      fontWeight: 400,
+      lineHeight: 1.57,
+    },
+    subtitle1: {
+      fontSize: '1vw',
+      fontWeight: 500,
+      lineHeight: 1.75,
+    },
+    subtitle2: {
+      fontSize: '0.875vw',
+      fontWeight: 500,
+      lineHeight: 1.57,
+    },
+    overline: {
+      fontSize: '0.75vw',
+      fontWeight: 600,
+      letterSpacing: '0.5px',
+      lineHeight: 2.5,
+      textTransform: 'uppercase',
+    },
+    caption: {
+      fontSize: '0.75vw',
+      fontWeight: 400,
+      lineHeight: 1.66,
+    },
+    h1: {
+      fontWeight: 700,
+      fontSize: '3.5vw',
+      lineHeight: 1.375,
+    },
+    h2: {
+      fontWeight: 700,
+      fontSize: '3vw',
+      lineHeight: 1.375,
+    },
+    h3: {
+      fontWeight: 700,
+      fontSize: '2.25vw',
+      lineHeight: 1.375,
+    },
+    h4: {
+      fontWeight: 700,
+      fontSize: '2vw',
+      lineHeight: 1.375,
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: '1.5vw',
+      lineHeight: 1.375,
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: '1.125vw',
+      lineHeight: 1.375,
+    },
+  },
+
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 1000,
+      lg: 1200,
+      xl: 1920,
+    },
+  },
+  components: {
+    MuiTypography: {
+      variants: [],
+    },
+    MuiPaper: {
+      variants: [
+        {
+          props: { variant: 'draggedDiagramCard' },
+          style: { ...DiagramCardStyles, borderColor: '#fd944e' },
+        },
+        {
+          props: { variant: 'diagramCard' },
+          style: DiagramCardStyles,
+        },
+      ],
+    },
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: 'addNode' },
+          style: {
+            position: 'absolute',
+            width: '8px',
+            height: '8px',
+            minWidth: '8px',
+            minHeight: '8px',
+            padding: '7px 6px 6px 6px',
+            borderRadius: '50%',
+            border: 'none',
+            backgroundColor: '#0050ff',
+            fontSize: '0.8rem',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#fff',
+            '&:hover': {
+              backgroundColor: alpha('#0050ff', 0.8),
+            },
+          },
+        },
+      ],
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#F5F5F5',
+          color: '#707070',
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            color: '#393434',
+          },
+        },
+        selected: {
+          color: '#393434',
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: '#2761DA',
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#F5F5F5',
+          color: '#707070',
+        },
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          '&.cardTitle': {
+            fontSize: '0.8rem',
+            fontWeight: 600,
+            '& input': {
+              textAlign: 'start',
+              backgroundColor: 'transparent',
+              padding: '0.05rem 0.1rem',
+              minWidth: '6rem',
+              maxWidth: '100%',
+              marginBottom: '0.4rem',
+            },
+            '& .MuiInput-notchedOutline': {
+              border: 'none',
+            },
+            '&:hover .MuiInput-notchedOutline': {
+              border: 'none',
+            },
+            '&.Mui-focused .MuiInput-notchedOutline': {
+              border: 'none',
+            },
+          },
+        },
+      },
+    },
+    MuiCardContent: {},
+    MuiCardHeader: {},
+
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*': {},
+        html: {},
+        body: {},
+      },
+    },
+    MuiOutlinedInput: {},
+    MuiTableHead: {},
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          width: 78,
+          height: 29,
+          padding: 1,
+        },
+        switchBase: {
+          padding: 1,
+          margin: 2,
+          transitionDuration: '300ms',
+          '&.Mui-checked': {
+            width: 78,
+            transform: 'translateX(13px)',
+            color: '#2761DA',
+          },
+          '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: '#FAFAFA',
+            border: '6px solid #FAFAFA',
+          },
+        },
+        thumb: {
+          boxSizing: 'border-box',
+          width: 42,
+          height: 22,
+          borderRadius: '99px',
+        },
+        track: {
+          borderRadius: '13px',
+        },
+        colorSecondary: {
+          '&.Mui-checked + .MuiSwitch-track': {
+            backgroundColor: '#2761DA',
+            opacity: 1,
+            border: 0,
+          },
+          '&.Mui-disabled + .MuiSwitch-track': {
+            opacity: 0.7,
+          },
+          '&.Mui-disabled .MuiSwitch-thumb': {
+            color: '#B3B3B3',
+          },
+        },
+      },
+    },
+  },
+  palette: {
+    neutral: {
+      100: '#F3F4F6',
+      200: '#E5E7EB',
+      300: '#D1D5DB',
+      400: '#9CA3AF',
+      500: '#6B7280',
+      600: '#4B5563',
+      700: '#374151',
+      800: '#1F2937',
+      900: '#3f4b68',
+    },
+    action: {
+      active: '#6B7280',
+      focus: 'rgba(55, 65, 81, 0.12)',
+      hover: 'rgba(55, 65, 81, 0.04)',
+      selected: 'rgba(55, 65, 81, 0.08)',
+      disabledBackground: 'rgba(55, 65, 81, 0.12)',
+      disabled: 'rgba(55, 65, 81, 0.26)',
+    },
+    background: {
+      // grey color
+      default: '#d3d3d3',
+
+      // Old background
+      // default1: '#8262b4',
+      // coral
+      paper: '#FFFFFF',
+    },
+    divider: '#E6E8F0',
+    primary: {
+      main: '#b1d2d2',
+      light: '#828DF8',
+      dark: '#3832A0',
+      contrastText: '#FFFFFF',
+    },
+    tertiary: {
+      main: '#3832A0',
+      light: '#b8d4d4',
+      dark: '#14B8A6',
+      contrastText: '#FFFFFF',
+    },
+    secondary: {
+      main: '#10B981',
+      light: '#3FC79A',
+      dark: '#0B815A',
+      contrastText: '#FFFFFF',
+    },
+    success: {
+      main: '#14B8A6',
+      light: '#43C6B7',
+      dark: '#0E8074',
+      contrastText: '#FFFFFF',
+    },
+    info: {
+      main: '#2196F3',
+      light: '#64B6F7',
+      dark: '#0B79D0',
+      contrastText: '#FFFFFF',
+    },
+    warning: {
+      main: '#FFB020',
+      light: '#FFBF4C',
+      dark: '#B27B16',
+      contrastText: '#FFFFFF',
+    },
+    error: {
+      main: '#D14343',
+      light: '#DA6868',
+      dark: '#922E2E',
+      contrastText: '#FFFFFF',
+    },
+    // goToModule: {
+    //     main: '#2F1943',
+    //         light: '#DA6868',
+    //         dark: '#922E2E',
+    //         contrastText: '#FFFFFF'
+    // },
+    text: {
+      primary: '#121828',
+      secondary: '#65748B',
+      disabled: 'rgba(55, 65, 81, 0.48)',
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  shadows: [
+    'none',
+    '0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1)',
+    '0px 1px 2px rgba(100, 116, 139, 0.12)',
+    '0px 1px 4px rgba(100, 116, 139, 0.12)',
+    '0px 1px 5px rgba(100, 116, 139, 0.12)',
+    '0px 1px 6px rgba(100, 116, 139, 0.12)',
+    '0px 2px 6px rgba(100, 116, 139, 0.12)',
+    '0px 3px 6px rgba(100, 116, 139, 0.12)',
+    '0px 2px 4px rgba(31, 41, 55, 0.06), 0px 4px 6px rgba(100, 116, 139, 0.12)',
+    '0px 5px 12px rgba(100, 116, 139, 0.12)',
+    '0px 5px 14px rgba(100, 116, 139, 0.12)',
+    '0px 5px 15px rgba(100, 116, 139, 0.12)',
+    '0px 6px 15px rgba(100, 116, 139, 0.12)',
+    '0px 7px 15px rgba(100, 116, 139, 0.12)',
+    '0px 8px 15px rgba(100, 116, 139, 0.12)',
+    '0px 9px 15px rgba(100, 116, 139, 0.12)',
+    '0px 10px 15px rgba(100, 116, 139, 0.12)',
+    '0px 12px 22px -8px rgba(100, 116, 139, 0.25)',
+    '0px 13px 22px -8px rgba(100, 116, 139, 0.25)',
+    '0px 14px 24px -8px rgba(100, 116, 139, 0.25)',
+    '0px 10px 10px rgba(31, 41, 55, 0.04), 0px 20px 25px rgba(31, 41, 55, 0.1)',
+    '0px 25px 50px rgba(100, 116, 139, 0.25)',
+    '0px 25px 50px rgba(100, 116, 139, 0.25)',
+    '0px 25px 50px rgba(100, 116, 139, 0.25)',
+    '0px 25px 50px rgba(100, 116, 139, 0.25)',
+  ],
+};
+
+theme = createTheme(theme, themeOptions);
+theme = createTheme(theme, {
+  palette: {
+    globalAction: {
+      main: '#260353',
+      light: '#441680',
+      dark: '#441680',
+      contrastText: '#fff',
+    },
+    stepAction: {
+      main: '#441680',
+      light: '#260353',
+      dark: '#260353',
+      contrastText: '#fff',
+    },
+
+    checkboxPrimary: {
+      main: '#ccc',
+      contrastText: '#FFFFFF',
+    },
+    checkboxStyle1: {
+      checked: '#78C1BE',
+      border: '1px solid #78C1BE',
+      hover: '#ccc',
+      disabled: '#FFFFFF',
+      backgroundColor: '',
+      contrastText: '#fff',
+    },
+  },
+});
+
+export { theme };