@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/theme.ts

@@ -1,439 +1,439 @@
-import { alpha, createTheme } from '@mui/material/styles';
-import '@mui/material/styles';
-
-let theme = createTheme({ typography: {} });
-
-const DiagramCardStyles = {
-  backgroundColor: '#fff',
-  padding: '10px',
-  borderRadius: '0.5rem',
-  border: '2px solid #1d1d1d',
-  paddingTop: '-1rem',
-  fontSize: '13px', // converted 0.8rem to 13px
-  height: '100%',
-  width: '100%',
-};
-
-const themeOptions: any = {
-  styledBox: {
-    downloadPanelInputLabel: {
-      backgroundColor: 'white',
-      padding: '2px 8px',
-      borderRadius: 0,
-      cursor: 'pointer',
-      fontWeight: 400,
-      color: theme.palette.text.primary,
-      fontSize: '0.8rem',
-      textTransform: 'uppercase',
-      display: 'flex',
-      alignItems: 'center',
-      ['&:disabled' as any]: {
-        color: '#666666',
-        cursor: 'not-allowed',
-      },
-      ['&:hover' as any]: {
-        backgroundColor: 'transparent',
-      },
-      ['@media (max-width: 767px)' as any]: {
-        borderBottom: 'none',
-        fontSize: '0.5rem',
-      },
-    },
-    inputVariant: {
-      width: '100%',
-      textAlign: 'center',
-      border: 'none',
-      backgroundColor: 'transparent',
-      outline: 'none',
-    },
-    cardCoverImage: {
-      width: '100%',
-      height: 'auto',
-      maxHeight: '80px', // converted 5rem to 80px
-      objectFit: 'cover',
-      borderRadius: '0.5rem',
-    },
-    cardCoverImagePreview: {
-      borderRadius: '0.5rem',
-      width: '100%',
-      height: '80px', // converted 5rem to 80px
-      backgroundColor: 'rgba(245, 204, 0, 0.16)',
-    },
-    cardAddNewBlock: {
-      fontSize: '11px', // converted 0.7rem to 11px
-      fontWeight: 600,
-      backgroundColor: '#fff',
-      color: '#1d1d1d',
-      marginBottom: '2px',
-      borderRadius: '0.3rem',
-      minWidth: '96px', // converted 6rem to 96px
-      padding: '0.25rem',
-      width: '100%',
-
-      ['&:hover' as any]: {
-        backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      },
-    },
-  },
-
-  typography: {
-    // Base font settings
-    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
-    fontSize: 12, // Set a small base font size
-
-    // Headers
-    h1: {
-      fontSize: '1.75rem',
-      fontWeight: 500,
-    },
-    h2: {
-      fontSize: '1.5rem',
-      fontWeight: 500,
-    },
-    h3: {
-      fontSize: '1.25rem',
-      fontWeight: 500,
-    },
-    h4: {
-      fontSize: '1.1rem',
-      fontWeight: 500,
-    },
-    h5: {
-      fontSize: '1rem',
-      fontWeight: 500,
-    },
-    h6: {
-      fontSize: '0.875rem',
-      fontWeight: 500,
-    },
-
-    // Body text
-    body1: {
-      fontSize: '0.875rem',
-      fontWeight: 400,
-    },
-    body2: {
-      fontSize: '0.75rem',
-      fontWeight: 400,
-    },
-
-    // Other text elements
-    button: {
-      fontSize: '0.75rem',
-      fontWeight: 600,
-      textTransform: 'none',
-    },
-    caption: {
-      fontSize: '0.7rem',
-      fontWeight: 400,
-    },
-    overline: {
-      fontSize: '0.65rem',
-      fontWeight: 400,
-      textTransform: 'uppercase',
-    },
-    subtitle1: {
-      fontSize: '0.85rem',
-      fontWeight: 500,
-    },
-    subtitle2: {
-      fontSize: '0.75rem',
-      fontWeight: 500,
-    },
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 1000,
-      lg: 1200,
-      xl: 1920,
-    },
-  },
-  components: {
-    MuiTypography: {
-      variants: [],
-    },
-    MuiPaper: {
-      variants: [
-        {
-          props: { variant: 'draggedDiagramCard' as any },
-          style: { ...DiagramCardStyles, borderColor: '#fd944e' },
-        },
-        {
-          props: { variant: 'diagramCard' as any },
-          style: DiagramCardStyles,
-        },
-      ],
-    },
-    MuiInputLabel: {
-      variants: [
-        {
-          props: { variant: 'downloadPanel' as any },
-          style: {
-            backgroundColor: 'transparent',
-            padding: 0,
-            borderRadius: 0,
-            border: 'none',
-            cursor: 'pointer',
-            fontWeight: 400,
-            color: theme.palette.text.primary,
-            borderBottom: `1px solid ${theme.palette.text.primary}`,
-            fontSize: '0.8rem',
-            textTransform: 'uppercase',
-            display: 'flex',
-            alignItems: 'center',
-            '&:disabled': {
-              color: '#666666',
-              cursor: 'not-allowed',
-            },
-            '&:hover': {
-              backgroundColor: 'transparent',
-            },
-            '@media (max-width: 767px)': {
-              borderBottom: 'none',
-              fontSize: '0.5rem',
-            },
-          },
-        },
-      ],
-    },
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: 'downloadPanel' },
-          style: {
-            backgroundColor: 'transparent',
-            padding: 0,
-            borderRadius: 0,
-            border: 'none',
-            cursor: 'pointer',
-            fontWeight: 400,
-            color: theme.palette.text.primary,
-            borderBottom: `1px solid ${theme.palette.text.primary}`,
-            fontSize: '0.8rem',
-            textTransform: 'uppercase',
-            display: 'flex',
-            alignItems: 'center',
-            '&:disabled': {
-              color: '#666666',
-              cursor: 'not-allowed',
-            },
-            '&:hover': {
-              backgroundColor: 'transparent',
-            },
-            '@media (max-width: 767px)': {
-              borderBottom: 'none',
-              fontSize: '0.5rem',
-            },
-          },
-        },
-        {
-          props: { variant: 'addNode' as any },
-          style: {
-            position: 'absolute',
-            width: '8px',
-            height: '8px',
-            minWidth: '8px',
-            minHeight: '8px',
-            padding: '7px 6px 6px 6px',
-            borderRadius: '50%',
-            border: 'none',
-            backgroundColor: '#0050ff',
-            fontSize: '13px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#fff',
-            '&:hover': {
-              backgroundColor: alpha('#0050ff', 0.8),
-            },
-          },
-        },
-      ],
-    },
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          '&.cardTitle': {
-            fontSize: '13px',
-            fontWeight: 600,
-            '& input': {
-              textAlign: 'start',
-              backgroundColor: 'transparent',
-              padding: '0.05rem 0.1rem',
-              minWidth: '96px',
-              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: {},
-        '.react-flow, .react-flow *, .react-flow *::before, .react-flow *::after':
-          {
-            boxSizing: 'border-box',
-          },
-      },
-    },
-    MuiOutlinedInput: {},
-    MuiTableHead: {},
-  },
-  palette: {
-    neutral: {
-      100: '#F5F5F7', // Light Gray
-      200: '#E5E5EA', // Gray
-      300: '#D1D1D6', // Dark Gray
-      400: '#8E8E93', // Slate Gray
-      500: '#636366', // Dark Slate Gray
-      600: '#48484A', // Charcoal Gray
-      700: '#3A3A3C', // Almost Black
-      800: '#2C2C2E', // Darker Black
-      900: '#1C1C1E', // Black
-    },
-    action: {
-      active: '#636366', // Dark Slate Gray
-      focus: 'rgba(255, 255, 255, 0.2)', // White with transparency
-      hover: 'rgba(255, 255, 255, 0.1)', // Slightly less opaque white
-      selected: 'rgba(255, 255, 255, 0.15)', // Selected with subtle transparency
-      disabledBackground: 'rgba(255, 255, 255, 0.1)', // Disabled state background
-      disabled: 'rgba(255, 255, 255, 0.3)', // Lightened disabled state
-    },
-    background: {
-      default: '#F5F5F7', // Light background
-      paper: '#FFFFFF', // White background for cards/papers
-    },
-    divider: '#E0E0E0', // Light divider
-    primary: {
-      main: '#007AFF', // Blue
-      light: '#5AC8FA', // Light Blue
-      dark: '#0051BA', // Darker Blue
-      contrastText: '#FFFFFF', // White text on blue
-    },
-    tertiary: {
-      main: '#FF3B30', // Red
-      light: '#FF5C5C', // Light Red
-      dark: '#BF2C20', // Darker Red
-      contrastText: '#FFFFFF', // White text on red
-    },
-    secondary: {
-      main: '#34C759', // Green
-      light: '#6AD88D', // Light Green
-      dark: '#1B8C3B', // Darker Green
-      contrastText: '#FFFFFF', // White text on green
-    },
-    success: {
-      main: '#30D158', // Green
-      light: '#5CEB8E', // Light Green
-      dark: '#20B457', // Dark Green
-      contrastText: '#FFFFFF', // White text
-    },
-    info: {
-      main: '#007AFF', // Blue
-      light: '#6BB7F8', // Light Blue
-      dark: '#0051BA', // Dark Blue
-      contrastText: '#FFFFFF', // White text
-    },
-    warning: {
-      main: '#FFCC00', // Yellow
-      light: '#FFD500', // Light Yellow
-      dark: '#BDA800', // Dark Yellow
-      contrastText: '#FFFFFF', // White text
-    },
-    error: {
-      main: '#FF3B30', // Red
-      light: '#FF5C5C', // Light Red
-      dark: '#BF2C20', // Dark Red
-      contrastText: '#FFFFFF', // White text
-    },
-    text: {
-      primary: '#000000', // Black
-      secondary: '#8E8E93', // Dark Gray
-      disabled: 'rgba(0, 0, 0, 0.38)', // Light disabled state
-    },
-  },
-  shape: {
-    borderRadius: 3,
-  },
-  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 { alpha, createTheme } from '@mui/material/styles';
+import '@mui/material/styles';
+
+let theme = createTheme({ typography: {} });
+
+const DiagramCardStyles = {
+  backgroundColor: '#fff',
+  padding: '10px',
+  borderRadius: '0.5rem',
+  border: '2px solid #1d1d1d',
+  paddingTop: '-1rem',
+  fontSize: '13px', // converted 0.8rem to 13px
+  height: '100%',
+  width: '100%',
+};
+
+const themeOptions: any = {
+  styledBox: {
+    downloadPanelInputLabel: {
+      backgroundColor: 'white',
+      padding: '2px 8px',
+      borderRadius: 0,
+      cursor: 'pointer',
+      fontWeight: 400,
+      color: theme.palette.text.primary,
+      fontSize: '0.8rem',
+      textTransform: 'uppercase',
+      display: 'flex',
+      alignItems: 'center',
+      ['&:disabled' as any]: {
+        color: '#666666',
+        cursor: 'not-allowed',
+      },
+      ['&:hover' as any]: {
+        backgroundColor: 'transparent',
+      },
+      ['@media (max-width: 767px)' as any]: {
+        borderBottom: 'none',
+        fontSize: '0.5rem',
+      },
+    },
+    inputVariant: {
+      width: '100%',
+      textAlign: 'center',
+      border: 'none',
+      backgroundColor: 'transparent',
+      outline: 'none',
+    },
+    cardCoverImage: {
+      width: '100%',
+      height: 'auto',
+      maxHeight: '80px', // converted 5rem to 80px
+      objectFit: 'cover',
+      borderRadius: '0.5rem',
+    },
+    cardCoverImagePreview: {
+      borderRadius: '0.5rem',
+      width: '100%',
+      height: '80px', // converted 5rem to 80px
+      backgroundColor: 'rgba(245, 204, 0, 0.16)',
+    },
+    cardAddNewBlock: {
+      fontSize: '11px', // converted 0.7rem to 11px
+      fontWeight: 600,
+      backgroundColor: '#fff',
+      color: '#1d1d1d',
+      marginBottom: '2px',
+      borderRadius: '0.3rem',
+      minWidth: '96px', // converted 6rem to 96px
+      padding: '0.25rem',
+      width: '100%',
+
+      ['&:hover' as any]: {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
+  },
+
+  typography: {
+    // Base font settings
+    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+    fontSize: 12, // Set a small base font size
+
+    // Headers
+    h1: {
+      fontSize: '1.75rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '1.5rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+    },
+    h4: {
+      fontSize: '1.1rem',
+      fontWeight: 500,
+    },
+    h5: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+    h6: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+    },
+
+    // Body text
+    body1: {
+      fontSize: '0.875rem',
+      fontWeight: 400,
+    },
+    body2: {
+      fontSize: '0.75rem',
+      fontWeight: 400,
+    },
+
+    // Other text elements
+    button: {
+      fontSize: '0.75rem',
+      fontWeight: 600,
+      textTransform: 'none',
+    },
+    caption: {
+      fontSize: '0.7rem',
+      fontWeight: 400,
+    },
+    overline: {
+      fontSize: '0.65rem',
+      fontWeight: 400,
+      textTransform: 'uppercase',
+    },
+    subtitle1: {
+      fontSize: '0.85rem',
+      fontWeight: 500,
+    },
+    subtitle2: {
+      fontSize: '0.75rem',
+      fontWeight: 500,
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 1000,
+      lg: 1200,
+      xl: 1920,
+    },
+  },
+  components: {
+    MuiTypography: {
+      variants: [],
+    },
+    MuiPaper: {
+      variants: [
+        {
+          props: { variant: 'draggedDiagramCard' as any },
+          style: { ...DiagramCardStyles, borderColor: '#fd944e' },
+        },
+        {
+          props: { variant: 'diagramCard' as any },
+          style: DiagramCardStyles,
+        },
+      ],
+    },
+    MuiInputLabel: {
+      variants: [
+        {
+          props: { variant: 'downloadPanel' as any },
+          style: {
+            backgroundColor: 'transparent',
+            padding: 0,
+            borderRadius: 0,
+            border: 'none',
+            cursor: 'pointer',
+            fontWeight: 400,
+            color: theme.palette.text.primary,
+            borderBottom: `1px solid ${theme.palette.text.primary}`,
+            fontSize: '0.8rem',
+            textTransform: 'uppercase',
+            display: 'flex',
+            alignItems: 'center',
+            '&:disabled': {
+              color: '#666666',
+              cursor: 'not-allowed',
+            },
+            '&:hover': {
+              backgroundColor: 'transparent',
+            },
+            '@media (max-width: 767px)': {
+              borderBottom: 'none',
+              fontSize: '0.5rem',
+            },
+          },
+        },
+      ],
+    },
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: 'downloadPanel' },
+          style: {
+            backgroundColor: 'transparent',
+            padding: 0,
+            borderRadius: 0,
+            border: 'none',
+            cursor: 'pointer',
+            fontWeight: 400,
+            color: theme.palette.text.primary,
+            borderBottom: `1px solid ${theme.palette.text.primary}`,
+            fontSize: '0.8rem',
+            textTransform: 'uppercase',
+            display: 'flex',
+            alignItems: 'center',
+            '&:disabled': {
+              color: '#666666',
+              cursor: 'not-allowed',
+            },
+            '&:hover': {
+              backgroundColor: 'transparent',
+            },
+            '@media (max-width: 767px)': {
+              borderBottom: 'none',
+              fontSize: '0.5rem',
+            },
+          },
+        },
+        {
+          props: { variant: 'addNode' as any },
+          style: {
+            position: 'absolute',
+            width: '8px',
+            height: '8px',
+            minWidth: '8px',
+            minHeight: '8px',
+            padding: '7px 6px 6px 6px',
+            borderRadius: '50%',
+            border: 'none',
+            backgroundColor: '#0050ff',
+            fontSize: '13px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#fff',
+            '&:hover': {
+              backgroundColor: alpha('#0050ff', 0.8),
+            },
+          },
+        },
+      ],
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          '&.cardTitle': {
+            fontSize: '13px',
+            fontWeight: 600,
+            '& input': {
+              textAlign: 'start',
+              backgroundColor: 'transparent',
+              padding: '0.05rem 0.1rem',
+              minWidth: '96px',
+              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: {},
+        '.react-flow, .react-flow *, .react-flow *::before, .react-flow *::after':
+          {
+            boxSizing: 'border-box',
+          },
+      },
+    },
+    MuiOutlinedInput: {},
+    MuiTableHead: {},
+  },
+  palette: {
+    neutral: {
+      100: '#F5F5F7', // Light Gray
+      200: '#E5E5EA', // Gray
+      300: '#D1D1D6', // Dark Gray
+      400: '#8E8E93', // Slate Gray
+      500: '#636366', // Dark Slate Gray
+      600: '#48484A', // Charcoal Gray
+      700: '#3A3A3C', // Almost Black
+      800: '#2C2C2E', // Darker Black
+      900: '#1C1C1E', // Black
+    },
+    action: {
+      active: '#636366', // Dark Slate Gray
+      focus: 'rgba(255, 255, 255, 0.2)', // White with transparency
+      hover: 'rgba(255, 255, 255, 0.1)', // Slightly less opaque white
+      selected: 'rgba(255, 255, 255, 0.15)', // Selected with subtle transparency
+      disabledBackground: 'rgba(255, 255, 255, 0.1)', // Disabled state background
+      disabled: 'rgba(255, 255, 255, 0.3)', // Lightened disabled state
+    },
+    background: {
+      default: '#F5F5F7', // Light background
+      paper: '#FFFFFF', // White background for cards/papers
+    },
+    divider: '#E0E0E0', // Light divider
+    primary: {
+      main: '#007AFF', // Blue
+      light: '#5AC8FA', // Light Blue
+      dark: '#0051BA', // Darker Blue
+      contrastText: '#FFFFFF', // White text on blue
+    },
+    tertiary: {
+      main: '#FF3B30', // Red
+      light: '#FF5C5C', // Light Red
+      dark: '#BF2C20', // Darker Red
+      contrastText: '#FFFFFF', // White text on red
+    },
+    secondary: {
+      main: '#34C759', // Green
+      light: '#6AD88D', // Light Green
+      dark: '#1B8C3B', // Darker Green
+      contrastText: '#FFFFFF', // White text on green
+    },
+    success: {
+      main: '#30D158', // Green
+      light: '#5CEB8E', // Light Green
+      dark: '#20B457', // Dark Green
+      contrastText: '#FFFFFF', // White text
+    },
+    info: {
+      main: '#007AFF', // Blue
+      light: '#6BB7F8', // Light Blue
+      dark: '#0051BA', // Dark Blue
+      contrastText: '#FFFFFF', // White text
+    },
+    warning: {
+      main: '#FFCC00', // Yellow
+      light: '#FFD500', // Light Yellow
+      dark: '#BDA800', // Dark Yellow
+      contrastText: '#FFFFFF', // White text
+    },
+    error: {
+      main: '#FF3B30', // Red
+      light: '#FF5C5C', // Light Red
+      dark: '#BF2C20', // Dark Red
+      contrastText: '#FFFFFF', // White text
+    },
+    text: {
+      primary: '#000000', // Black
+      secondary: '#8E8E93', // Dark Gray
+      disabled: 'rgba(0, 0, 0, 0.38)', // Light disabled state
+    },
+  },
+  shape: {
+    borderRadius: 3,
+  },
+  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 };