@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

package/src/themes/commonTheme.ts

@@ -1,671 +0,0 @@
-import { Components } from '@mui/material';
-import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
-import type {} from '@mui/x-data-grid/themeAugmentation';
-import { DarkColorTokens } from './colorTokens/darkColorTokens';
-import { LightColorTokens } from './colorTokens/lightColorTokens';
-import { customCssBaseline } from './customCssBaseline';
-
-export enum Theme {
-  LIGHT = 'light',
-  DARK = 'dark',
-}
-export const getCommonTheme = (mode: Theme) => {
-  const ColorTokens = mode === Theme.DARK ? DarkColorTokens : LightColorTokens;
-  return {
-    typography: {
-      fontFamily: ['Heebo', 'Poppins', 'sans-serif'].join(','),
-    },
-    components: {
-      MuiPickersOutlinedInput: {
-        styleOverrides: {
-          root: {
-            padding: '0 14px 0 0',
-          },
-          sectionsContainer: {
-            padding: '9px',
-          },
-        },
-      },
-      MuiMultiSectionDigitalClockSection: {
-        styleOverrides: {
-          root: {
-            width: '90px',
-            scrollbarWidth: 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          },
-          item: {
-            width: '50px',
-            borderRadius: '4px',
-            padding: '0px 8px',
-          },
-        },
-      },
-      MuiTimelineConnector: {
-        styleOverrides: {
-          root: {
-            minHeight: '24px',
-            backgroundColor: ColorTokens.border.primary,
-          },
-        },
-      },
-      MuiDataGrid: {
-        styleOverrides: {
-          root: {
-            backgroundColor: ColorTokens.surface.paperBackground,
-            border: 'none',
-            height: '100%',
-            // minHeight: 'calc(100vh - 292px)',
-            maxHeight: 'calc(100vh - 232px)',
-            '& .MuiDataGrid-row--borderBottom': {
-              backgroundColor: `${ColorTokens.surface.grey} !important`,
-            },
-            '& .MuiDataGrid-columnHeader': {
-              backgroundColor: `${ColorTokens.surface.grey} !important`,
-            },
-          },
-        },
-      },
-      MuiTimelineContent: {
-        styleOverrides: {
-          root: {
-            margin: '12px 0px',
-          },
-        },
-      },
-      MuiTimelineOppositeContent: {
-        styleOverrides: {
-          root: {
-            margin: '12px 0px',
-          },
-        },
-      },
-
-      MuiTimelineDot: {
-        styleOverrides: {
-          root: {
-            backgroundColor: ColorTokens.surface.grey,
-            boxShadow: 'none',
-            padding: '12px',
-            margin: '8px 0px',
-          },
-        },
-      },
-      MuiPaper: {
-        root: {
-          MuiAccordion: {
-            root: {
-              ':last-of-type': {
-                borderBottomLeftRadius: '0px',
-                borderBottomRightRadius: '0px',
-              },
-            },
-          },
-        },
-      },
-      MuiAccordionSummary: {
-        styleOverrides: {
-          root: {
-            justifyContent: 'flex-start',
-            padding: '0px 16px',
-            '&.Mui-expanded': {
-              minHeight: '0px',
-            },
-          },
-          content: {
-            flexGrow: 'unset',
-            margin: '0px 16px 0px 0px',
-            '&.Mui-expanded': {
-              margin: '16px 16px 0px 0px',
-            },
-          },
-          expandIconWrapper: {
-            '&.Mui-expanded': {
-              transform: 'rotate(180deg)',
-              marginTop: '16px',
-            },
-          },
-        },
-      },
-      MuiAccordionDetails: {
-        styleOverrides: {
-          root: {
-            padding: '0px 16px',
-          },
-        },
-      },
-      MuiStepLabel: {
-        styleOverrides: {
-          root: {
-            marginLeft: '2px',
-            padding: '0px',
-            fontSize: '14px',
-          },
-          label: {
-            lineHeight: '1',
-          },
-        },
-      },
-      MuiBreadcrumbs: {
-        styleOverrides: {
-          root: {
-            fontFamily: 'Poppins',
-          },
-          separator: {
-            color: ColorTokens.text.tertiary,
-          },
-        },
-      },
-      MuiAlert: {
-        styleOverrides: {
-          root: {
-            display: 'flex',
-            minWidth: '300px',
-            width: 'fit-content',
-            maxWidth: '100%',
-            fontFamily: 'Poppins',
-            fontWeight: 500,
-            fontSize: '14px',
-            color: ColorTokens.text.primary,
-          },
-          standardSuccess: {
-            backgroundColor: ColorTokens.highlight.greenBackground,
-          },
-          standardInfo: {
-            backgroundColor: ColorTokens.highlight.blueBackground,
-          },
-          standardWarning: {
-            backgroundColor: ColorTokens.highlight.orangeBackground,
-          },
-          standardError: {
-            backgroundColor: ColorTokens.highlight.redBackground,
-          },
-        },
-      },
-      MuiIconButton: {
-        defaultProps: {
-          disableRipple: true,
-          disableFocusRipple: true,
-          disableTouchRipple: true,
-        },
-        styleOverrides: {
-          root: {
-            borderRadius: '10px',
-            // padding: '0px',
-          },
-        },
-      },
-      MuiCheckbox: {
-        defaultProps: {
-          disableRipple: true,
-        },
-        styleOverrides: {
-          root: {
-            '& .MuiSvgIcon-root': {
-              width: '20px',
-              height: '20px',
-            },
-          },
-        },
-      },
-      MuiDialogTitle: {
-        styleOverrides: {
-          root: {
-            fontFamily: 'poppins',
-            fontWeight: 500,
-            fontSize: '16px',
-            padding: '12px 16px',
-            backgroundColor: ColorTokens.surface.grey,
-          },
-          paper: {
-            elevation: 2,
-            borderRadius: '10px',
-          },
-        },
-      },
-      MuiDialogContent: {
-        styleOverrides: {
-          root: {
-            padding: '0px',
-          },
-        },
-      },
-      MuiBadge: {
-        styleOverrides: {
-          dot: {
-            width: '4px',
-            height: '4px',
-            borderRadius: '10px',
-            backgroundColor: ColorTokens.tertiary.main,
-            margin: '6px',
-            minWidth: '4px',
-          },
-        },
-      },
-
-      MuiChip: {
-        styleOverrides: {
-          root: {
-            backgroundColor: ColorTokens.secondary.main,
-            '&:hover': {
-              backgroundColor: ColorTokens.secondary.dark,
-            },
-            borderRadius: '6px',
-            padding: '10px 10px',
-            fontSize: '14px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            margin: '5px',
-          },
-        },
-      },
-
-      MuiCard: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-            backgroundColor: ColorTokens.surface.paperBackground,
-            border: `1px solid ${ColorTokens.border.primary}`,
-            borderRadius: '8px',
-            backgroundImage: 'none',
-          },
-        },
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: {
-            fullWidth: true,
-          },
-          paper: {
-            backgroundColor: ColorTokens.surface.defaultBackground,
-            borderRadius: '5px',
-            width: '100%',
-            maxHeight: 'calc(100vh - 64px)',
-            overflow: 'auto',
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiMenu: {
-        styleOverrides: {
-          list: {
-            minWidth: '240px',
-            padding: '8px',
-            '& > :last-child': {
-              borderBottom: 'none',
-              '& li': {
-                borderBottom: 'none',
-              },
-            },
-          },
-          paper: {
-            marginTop: '8px',
-            borderRadius: '5px',
-            border: `1px solid ${ColorTokens.secondary.main}`,
-            boxShadow: '0px',
-            '&::-webkit-scrollbar': {
-              width: '0.5em',
-              height: '0.5em',
-            },
-            '&::-webkit-scrollbar-thumb': {
-              backgroundColor: ColorTokens.surface.paperBackground,
-              borderRadius: '3px',
-            },
-          },
-        },
-      },
-      MuiMenuItem: {
-        styleOverrides: {
-          root: {
-            minHeight: '40px !important',
-            padding: '8px 12px',
-          },
-        },
-      },
-      MuiPagination: {
-        styleOverrides: {
-          root: {},
-        },
-      },
-      MuiPaginationItem: {
-        styleOverrides: {
-          root: {
-            background: ColorTokens.surface.defaultBackground,
-            '&.Mui-selected': {
-              background: ColorTokens.surface.paperBackground,
-              border: `1px solid ${ColorTokens.tertiary.main}`,
-            },
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            textTransform: 'none',
-            padding: '10px 20px ',
-            minWidth: '120px ',
-            maxHeight: '40px ',
-            borderRadius: '5px ',
-            boxShadow: 'none ',
-            fontSize: '14px ',
-            fontFamily: 'Poppins',
-            fontWeight: 600,
-            '@media (max-width:959.95px)': {
-              fontSize: '12px',
-              padding: '6px 12px ',
-            },
-            '&:hover': {
-              boxShadow: 'none ',
-              '@media (hover: none )': {
-                boxShadow: 'none ',
-              },
-            },
-            '&$focusVisible': {
-              boxShadow: 'none',
-            },
-            '&:active': {
-              boxShadow: 'none',
-            },
-            '&$disabled': { boxShadow: 'none' },
-          },
-          text: {
-            padding: '0px',
-            '&:hover': {
-              backgroundColor: 'transparent',
-            },
-          },
-        },
-      },
-      MuiTextField: {
-        defaultProps: {
-          variant: 'outlined',
-          color: 'primary',
-          fullWidth: true,
-        },
-        styleOverrides: {
-          root: {
-            '& label': {
-              display: 'none',
-            },
-            input: {
-              padding: '9px',
-            },
-
-            fieldset: {
-              top: '0px',
-            },
-            '& legend': {
-              height: '0px',
-              '& span': {
-                display: 'none',
-              },
-            },
-            '& input:-webkit-autofill': {
-              padding: '9px',
-            },
-            minWidth: '200px',
-          },
-        },
-      },
-      MuiTooltip: {
-        styleOverrides: {
-          tooltip: {
-            backgroundColor: ColorTokens.surface.paperBackground,
-            // boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
-            border: `1px solid ${ColorTokens.secondary.main}`,
-            color: ColorTokens.text.secondary,
-          },
-          arrow: {
-            color: ColorTokens.surface.paperBackground,
-            '&:before': {
-              border: `1px solid ${ColorTokens.secondary.main}`,
-            },
-          },
-        },
-      },
-      MuiSwitch: {
-        styleOverrides: {
-          root: {
-            width: 40,
-            height: 20,
-            padding: 0,
-            '& .MuiSwitch-switchBase': {
-              padding: 1,
-              margin: 2,
-              transitionDuration: '500ms',
-              '&.Mui-checked': {
-                transform: 'translateX(20px)',
-                '& + .MuiSwitch-track': {
-                  backgroundColor: ColorTokens.surface.paperBackground,
-                  border: `1px solid ${ColorTokens.highlight.highlightRed}`,
-                  opacity: 1,
-                },
-                '& .MuiSwitch-thumb': {
-                  boxSizing: 'border-box',
-                  backgroundColor: ColorTokens.highlight.highlightRed,
-                  width: 14,
-                  height: 14,
-                },
-                '&.Mui-disabled + .MuiSwitch-track': {
-                  opacity: 0.5,
-                },
-              },
-            },
-            '& .MuiSwitch-thumb': {
-              boxSizing: 'border-box',
-              boxShadow: 'none',
-              borderRadius: 4,
-              backgroundColor: ColorTokens.surface.grey,
-              width: 14,
-              height: 14,
-            },
-            '& .MuiSwitch-track': {
-              borderRadius: 4,
-              backgroundColor: ColorTokens.surface.paperBackground,
-              border: `1px solid ${ColorTokens.border.primary}`,
-              opacity: 1,
-            },
-            '&.Mui-disabled + .MuiSwitch-track': {
-              opacity: 0.1,
-            },
-            '&.Mui-disabled + .MuiSwitch-thumb': {
-              opacity: 0.1,
-            },
-          },
-        },
-      },
-      MuiFormHelperText: {
-        styleOverrides: {
-          root: {
-            marginLeft: '0px',
-          },
-        },
-      },
-      MuiSnackbar: {
-        defaultProps: {
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'right',
-          },
-        },
-      },
-      MuiAutocomplete: {
-        styleOverrides: {
-          root: {
-            '& .MuiOutlinedInput-root .MuiAutocomplete-input': {
-              padding: 0,
-              maxHeight: '40px',
-            },
-            minWidth: '200px',
-            overflowY: 'auto',
-          },
-          listbox: {
-            padding: 0,
-          },
-          option: {
-            borderBottom: `1px solid ${ColorTokens.border.secondary}`,
-          },
-          paper: {
-            borderRadius: '10px',
-          },
-        },
-      },
-      MuiOutlinedInput: {
-        styleOverrides: {
-          root: {
-            '& label': {
-              display: 'none',
-            },
-            '& legend': {
-              '& span': {
-                display: 'none',
-              },
-            },
-            maxHeight: '40px',
-            fontSize: '16px',
-            fontFamily: 'Heebo',
-            fontWeight: 300,
-            color: ColorTokens.text.primary,
-          },
-          multiline: {
-            maxHeight: '200px',
-          },
-        },
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: 'none',
-        },
-        styleOverrides: {
-          root: {
-            color: ColorTokens.text.tertiary,
-          },
-        },
-      },
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            '& .MuiTabs-flexContainer': {
-              borderBottom: `1px solid ${ColorTokens.border.primary}`,
-              backgroundColor: ColorTokens.surface.paperBackground,
-              borderRadius: '8px 8px 0px 0px',
-            },
-          },
-          indicator: {
-            display: 'flex',
-            justifyContent: 'flex-start',
-            backgroundColor: 'transparent',
-            height: '4px',
-            '& .MuiTabs-indicatorSpan': {
-              width: '60px',
-              marginLeft: '15px',
-              borderRadius: '20px',
-              backgroundColor: ColorTokens.tertiary.main,
-            },
-          },
-        },
-      },
-      MuiTab: {
-        defaultProps: {
-          disableRipple: true,
-        },
-        styleOverrides: {
-          root: {
-            color: ColorTokens.text.secondary,
-            fontSize: '14px',
-            fontWeight: '600',
-            fontFamily: 'Poppins',
-            textTransform: 'initial',
-            minHeight: '50px',
-            paddingBottom: '0px',
-            justifyContent: 'flex-start',
-            '@media (max-width:959.95px)': {
-              fontSize: '12px',
-            },
-            '&.Mui-selected': {
-              color: ColorTokens.text.primary,
-            },
-          },
-        },
-      },
-      MuiAvatar: {
-        styleOverrides: {
-          root: {
-            background: ColorTokens.surface.defaultBackground,
-            cursor: 'pointer',
-            border: `1px solid ${ColorTokens.primary.main}`,
-            color: ColorTokens.primary.main,
-          },
-        },
-      },
-      MuiTypography: {
-        styleOverrides: {
-          h6: {
-            fontSize: '24px',
-            fontWeight: 800,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
-          },
-          subtitle1: {
-            fontSize: '18px',
-            fontWeight: 600,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
-          },
-          subtitle2: {
-            fontSize: '16px',
-            fontWeight: 600,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
-          },
-          subtitle3: {
-            fontSize: '14px',
-            fontWeight: 500,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
-          },
-          button1: {
-            fontSize: '14px',
-            fontWeight: 600,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
-          },
-          body1: {
-            fontSize: '16px',
-            fontWeight: 600,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.primary,
-          },
-          body2: {
-            fontSize: '14px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.primary,
-          },
-          label1: {
-            fontSize: '14px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.secondary,
-          },
-          label2: {
-            fontSize: '12px',
-            fontWeight: 400,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.secondary,
-          },
-          caption: {
-            fontSize: '12px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.secondary,
-          },
-        } as TypographyStyleOptions,
-      },
-      MuiCssBaseline: {
-        styleOverrides: customCssBaseline,
-      },
-    } as Components,
-  };
-};

package/src/themes/customCssBaseline.ts

@@ -1,37 +0,0 @@
-export const customCssBaseline = `
-    @font-face {
-      font-family: Poppins;
-      font-display: swap;
-      font-weight: 400;
-      src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-    @font-face {
-      font-family: Poppins;
-      font-display: swap;
-      font-weight: 600;
-      src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-    @font-face {
-      font-family: Poppins;
-      font-display: swap;
-      font-weight: 800;
-      src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-    @font-face {
-      font-family: Heebo;
-      font-display: swap;
-      font-weight: 400;
-      src: url(https://fonts.gstatic.com/s/heebo/v26/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EuyysdUmm7UiCXB5W.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-    @font-face {
-      font-family: Heebo;
-      font-display: swap;
-      font-weight: 600;
-      src: url(https://fonts.gstatic.com/s/heebo/v26/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EVyusdUmm7UiCXB5W.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }
-`;

package/src/themes/darkTheme.ts

@@ -1,12 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-import { DarkColorTokens } from './colorTokens/darkColorTokens';
-import { Theme, getCommonTheme } from './commonTheme';
-
-export const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-    ...DarkColorTokens,
-  },
-  ...getCommonTheme(Theme.DARK),
-});