@campxdev/react-blueprint 1.1.5 → 1.1.7

package/src/themes/commonTheme.ts

@@ -1,40 +1,56 @@
-import { Components } from "@mui/material";
-import { TypographyOptions } from "@mui/material/styles/createTypography";
-import { DarkColorTokens } from "./colorTokens/darkColorTokens";
-import { LightColorTokens } from "./colorTokens/lightColorTokens";
-import { customCssBaseline } from "./customCssBaseline";
+import { Components } from '@mui/material';
+import { TypographyOptions } from '@mui/material/styles/createTypography';
+import { DarkColorTokens } from './colorTokens/darkColorTokens';
+import { LightColorTokens } from './colorTokens/lightColorTokens';
+import { customCssBaseline } from './customCssBaseline';
 
 export enum Theme {
-  LIGHT = "light",
-  DARK = "dark",
+  LIGHT = 'light',
+  DARK = 'dark',
 }
 export const getCommonTheme = (mode: Theme) => {
-  const ColorTokens = mode == Theme.DARK ? DarkColorTokens : LightColorTokens;
+  const ColorTokens = mode === Theme.DARK ? DarkColorTokens : LightColorTokens;
   return {
     typography: {
-      fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
+      fontFamily: ['Heebo', 'Poppins', 'sans-serif'].join(','),
     },
     components: {
+      MuiMultiSectionDigitalClockSection: {
+        styleOverrides: {
+          root: {
+            width: '90px',
+            scrollbarWidth: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          },
+          item: {
+            width: '50px',
+            borderRadius: '4px',
+            padding: '0px 8px',
+          },
+        },
+      },
       MuiAccordionSummary: {
         styleOverrides: {
           root: {
-            justifyContent: "flex-start",
-            paddingLeft: "20px",
-            "&.Mui-expanded": {
-              minHeight: "0px",
+            justifyContent: 'flex-start',
+            paddingLeft: '20px',
+            '&.Mui-expanded': {
+              minHeight: '0px',
             },
           },
           content: {
-            flexGrow: "unset",
-            margin: "0px 16px 0px 0px",
-            "&.Mui-expanded": {
-              margin: "16px 16px 0px 0px",
+            flexGrow: 'unset',
+            margin: '0px 16px 0px 0px',
+            '&.Mui-expanded': {
+              margin: '16px 16px 0px 0px',
             },
           },
           expandIconWrapper: {
-            "&.Mui-expanded": {
-              transform: "rotate(180deg)",
-              marginTop: "16px",
+            '&.Mui-expanded': {
+              transform: 'rotate(180deg)',
+              marginTop: '16px',
             },
           },
         },
@@ -42,14 +58,14 @@ export const getCommonTheme = (mode: Theme) => {
       MuiStepLabel: {
         styleOverrides: {
           root: {
-            marginLeft: "2px",
+            marginLeft: '2px',
           },
         },
       },
       MuiBreadcrumbs: {
         styleOverrides: {
           root: {
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
           },
           separator: {
             color: ColorTokens.text.tertiary,
@@ -59,10 +75,10 @@ export const getCommonTheme = (mode: Theme) => {
       MuiAlert: {
         styleOverrides: {
           root: {
-            width: "400px",
-            fontFamily: "Poppins",
+            width: '400px',
+            fontFamily: 'Poppins',
             fontWeight: 500,
-            fontSize: "14px",
+            fontSize: '14px',
             color: ColorTokens.text.primary,
           },
           standardSuccess: {
@@ -87,7 +103,7 @@ export const getCommonTheme = (mode: Theme) => {
         },
         styleOverrides: {
           root: {
-            borderRadius: "10px",
+            borderRadius: '10px',
           },
         },
       },
@@ -97,9 +113,9 @@ export const getCommonTheme = (mode: Theme) => {
         },
         styleOverrides: {
           root: {
-            "& .MuiSvgIcon-root": {
-              width: "20px",
-              height: "20px",
+            '& .MuiSvgIcon-root': {
+              width: '20px',
+              height: '20px',
             },
           },
         },
@@ -107,14 +123,14 @@ export const getCommonTheme = (mode: Theme) => {
       MuiDialogTitle: {
         styleOverrides: {
           root: {
-            fontFamily: "poppins",
+            fontFamily: 'poppins',
             fontWeight: 400,
-            fontSize: "16px",
+            fontSize: '16px',
             padding: 0,
           },
           paper: {
             elevation: 2,
-            borderRadius: "10px",
+            borderRadius: '10px',
           },
         },
       },
@@ -122,24 +138,24 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             backgroundColor: ColorTokens.secondary.main,
-            "&:hover": {
+            '&:hover': {
               backgroundColor: ColorTokens.secondary.dark,
             },
-            borderRadius: "6px",
-            padding: "10px 10px",
-            fontSize: "14px",
+            borderRadius: '6px',
+            padding: '10px 10px',
+            fontSize: '14px',
             fontWeight: 400,
-            fontFamily: "Heebo",
-            margin: "5px",
+            fontFamily: 'Heebo',
+            margin: '5px',
           },
         },
       },
       MuiCard: {
         styleOverrides: {
           root: {
-            boxShadow: "none",
+            boxShadow: 'none',
             border: `1px solid ${ColorTokens.border.primary}`,
-            borderRadius: "8px",
+            borderRadius: '8px',
           },
         },
       },
@@ -150,38 +166,38 @@ export const getCommonTheme = (mode: Theme) => {
           },
           paper: {
             color: ColorTokens.surface.defaultBackground,
-            borderRadius: "5px",
-            width: "100%",
-            maxHeight: "calc(100vh - 64px)",
-            overflow: "auto",
-            boxShadow: "none",
+            borderRadius: '5px',
+            width: '100%',
+            maxHeight: 'calc(100vh - 64px)',
+            overflow: 'auto',
+            boxShadow: 'none',
           },
         },
       },
       MuiMenu: {
         styleOverrides: {
           list: {
-            minWidth: "240px",
+            minWidth: '240px',
             padding: 0,
-            "& > :last-child": {
-              borderBottom: "none",
-              "& li": {
-                borderBottom: "none",
+            '& > :last-child': {
+              borderBottom: 'none',
+              '& li': {
+                borderBottom: 'none',
               },
             },
           },
           paper: {
-            borderRadius: "5px",
+            borderRadius: '5px',
             border: `1px solid ${ColorTokens.secondary.main}`,
-            marginTop: "10px",
+            marginTop: '10px',
             boxShadow: `0px 5px 15px ${ColorTokens.secondary.main}`,
-            "&::-webkit-scrollbar": {
-              width: "0.5em",
-              height: "0.5em",
+            '&::-webkit-scrollbar': {
+              width: '0.5em',
+              height: '0.5em',
             },
-            "&::-webkit-scrollbar-thumb": {
+            '&::-webkit-scrollbar-thumb': {
               backgroundColor: ColorTokens.surface.paperBackground,
-              borderRadius: "3px",
+              borderRadius: '3px',
             },
           },
         },
@@ -189,8 +205,8 @@ export const getCommonTheme = (mode: Theme) => {
       MuiMenuItem: {
         styleOverrides: {
           root: {
-            minHeight: "50px !important",
-            padding: "10px 16px",
+            minHeight: '50px !important',
+            padding: '10px 16px',
           },
         },
       },
@@ -201,7 +217,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             background: ColorTokens.surface.defaultBackground,
-            "&.Mui-selected": {
+            '&.Mui-selected': {
               background: ColorTokens.surface.paperBackground,
               border: `1px solid ${ColorTokens.tertiary.main}`,
             },
@@ -211,57 +227,57 @@ export const getCommonTheme = (mode: Theme) => {
       MuiButton: {
         styleOverrides: {
           root: {
-            textTransform: "none",
-            padding: "10px 20px ",
-            maxHeight: "40px ",
-            borderRadius: "5px ",
-            boxShadow: "none ",
-            fontSize: "14px ",
-            fontFamily: "Poppins",
+            textTransform: 'none',
+            padding: '10px 20px ',
+            maxHeight: '40px ',
+            borderRadius: '5px ',
+            boxShadow: 'none ',
+            fontSize: '14px ',
+            fontFamily: 'Poppins',
             fontWeight: 600,
-            "&:hover": {
-              boxShadow: "none ",
-              "@media (hover: none )": {
-                boxShadow: "none ",
+            '&:hover': {
+              boxShadow: 'none ',
+              '@media (hover: none )': {
+                boxShadow: 'none ',
               },
             },
-            "&$focusVisible": {
-              boxShadow: "none",
+            '&$focusVisible': {
+              boxShadow: 'none',
             },
-            "&:active": {
-              boxShadow: "none",
+            '&:active': {
+              boxShadow: 'none',
             },
-            "&$disabled": { boxShadow: "none" },
+            '&$disabled': { boxShadow: 'none' },
           },
           text: {
-            padding: "0px",
-            "&:hover": {
-              backgroundColor: "transparent",
+            padding: '0px',
+            '&:hover': {
+              backgroundColor: 'transparent',
             },
           },
         },
       },
       MuiTextField: {
         defaultProps: {
-          variant: "outlined",
-          color: "primary",
+          variant: 'outlined',
+          color: 'primary',
           fullWidth: true,
         },
         styleOverrides: {
           root: {
-            "& label": {
-              display: "none",
+            '& label': {
+              display: 'none',
             },
-            "& legend": {
-              "& span": {
-                display: "none",
+            '& legend': {
+              '& span': {
+                display: 'none',
               },
             },
-            "& input:-webkit-autofill": {
-              height: "7px",
+            '& input:-webkit-autofill': {
+              height: '7px',
             },
-            minWidth: "200px",
-            margin: "5px 0px",
+            minWidth: '200px',
+            margin: '2px 0px',
           },
         },
       },
@@ -274,7 +290,7 @@ export const getCommonTheme = (mode: Theme) => {
           },
           arrow: {
             color: ColorTokens.surface.paperBackground,
-            "&:before": {
+            '&:before': {
               border: `1px solid ${ColorTokens.secondary.main}`,
             },
           },
@@ -286,43 +302,43 @@ export const getCommonTheme = (mode: Theme) => {
             width: 45,
             height: 26,
             padding: 0,
-            "& .MuiSwitch-switchBase": {
+            '& .MuiSwitch-switchBase': {
               padding: 0,
               margin: 2,
-              transitionDuration: "500ms",
-              "&.Mui-checked": {
-                transform: "translateX(18px)",
-                "& + .MuiSwitch-track": {
+              transitionDuration: '500ms',
+              '&.Mui-checked': {
+                transform: 'translateX(18px)',
+                '& + .MuiSwitch-track': {
                   backgroundColor: ColorTokens.surface.grey,
                   opacity: 1,
                   border: 0,
                 },
-                "& .MuiSwitch-thumb": {
-                  boxSizing: "border-box",
+                '& .MuiSwitch-thumb': {
+                  boxSizing: 'border-box',
                   backgroundColor: ColorTokens.primary.main,
                   width: 22,
                   height: 22,
                 },
-                "&.Mui-disabled + .MuiSwitch-track": {
+                '&.Mui-disabled + .MuiSwitch-track': {
                   opacity: 0.5,
                 },
               },
             },
-            "& .MuiSwitch-thumb": {
-              boxSizing: "border-box",
+            '& .MuiSwitch-thumb': {
+              boxSizing: 'border-box',
               backgroundColor: ColorTokens.surface.paperBackground,
               width: 22,
               height: 22,
             },
-            "& .MuiSwitch-track": {
+            '& .MuiSwitch-track': {
               borderRadius: 13,
               backgroundColor: ColorTokens.surface.grey,
               opacity: 1,
             },
-            "&.Mui-disabled + .MuiSwitch-track": {
+            '&.Mui-disabled + .MuiSwitch-track': {
               opacity: 0.1,
             },
-            "&.Mui-disabled + .MuiSwitch-thumb": {
+            '&.Mui-disabled + .MuiSwitch-thumb': {
               opacity: 0.1,
             },
           },
@@ -331,46 +347,46 @@ export const getCommonTheme = (mode: Theme) => {
       MuiFormHelperText: {
         styleOverrides: {
           root: {
-            marginLeft: "0px",
+            marginLeft: '0px',
           },
         },
       },
       MuiSnackbar: {
         defaultProps: {
           anchorOrigin: {
-            vertical: "bottom",
-            horizontal: "right",
+            vertical: 'bottom',
+            horizontal: 'right',
           },
         },
       },
       MuiAutocomplete: {
         styleOverrides: {
           root: {
-            "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+            '& .MuiOutlinedInput-root .MuiAutocomplete-input': {
               padding: 0,
-              maxHeight: "40px",
+              maxHeight: '100px',
             },
-            overflowY: "auto",
+            overflowY: 'auto',
           },
           paper: {
-            borderRadius: "10px",
+            borderRadius: '10px',
           },
         },
       },
       MuiOutlinedInput: {
         styleOverrides: {
           root: {
-            "& label": {
-              display: "none",
+            '& label': {
+              display: 'none',
             },
-            "& legend": {
-              "& span": {
-                display: "none",
+            '& legend': {
+              '& span': {
+                display: 'none',
               },
             },
-            maxHeight: "40px",
-            fontSize: "16px",
-            fontFamily: "Heebo",
+            maxHeight: '40px',
+            fontSize: '16px',
+            fontFamily: 'Heebo',
             fontWeight: 300,
             color: ColorTokens.text.primary,
           },
@@ -378,7 +394,7 @@ export const getCommonTheme = (mode: Theme) => {
       },
       MuiLink: {
         defaultProps: {
-          underline: "none",
+          underline: 'none',
         },
         styleOverrides: {
           root: {
@@ -389,18 +405,18 @@ export const getCommonTheme = (mode: Theme) => {
       MuiTabs: {
         styleOverrides: {
           root: {
-            "& .MuiTabs-flexContainer": {
+            '& .MuiTabs-flexContainer': {
               borderBottom: `1px solid ${ColorTokens.border.primary}`,
             },
           },
           indicator: {
-            display: "flex",
-            justifyContent: "center",
-            backgroundColor: "transparent",
-            height: "3px",
-            "& .MuiTabs-indicatorSpan": {
-              borderRadius: "30px",
-              width: "60%",
+            display: 'flex',
+            justifyContent: 'center',
+            backgroundColor: 'transparent',
+            height: '3px',
+            '& .MuiTabs-indicatorSpan': {
+              borderRadius: '30px',
+              width: '60%',
               backgroundColor: ColorTokens.tertiary.main,
             },
           },
@@ -413,12 +429,12 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             color: ColorTokens.text.secondary,
-            fontSize: "14px",
-            fontWeight: "600",
-            textTransform: "initial",
-            minHeight: "50px",
-            paddingBottom: "0px",
-            "&.Mui-selected": {
+            fontSize: '14px',
+            fontWeight: '600',
+            textTransform: 'initial',
+            minHeight: '50px',
+            paddingBottom: '0px',
+            '&.Mui-selected': {
               color: ColorTokens.text.primary,
             },
           },
@@ -428,7 +444,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             background: ColorTokens.surface.defaultBackground,
-            cursor: "pointer",
+            cursor: 'pointer',
             border: `1px solid ${ColorTokens.primary.main}`,
             color: ColorTokens.primary.main,
           },
@@ -437,63 +453,63 @@ export const getCommonTheme = (mode: Theme) => {
       MuiTypography: {
         styleOverrides: {
           h6: {
-            fontSize: "24px",
+            fontSize: '24px',
             fontWeight: 800,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
           subtitle1: {
-            fontSize: "18px",
+            fontSize: '18px',
             fontWeight: 600,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
           subtitle2: {
-            fontSize: "16px",
+            fontSize: '16px',
             fontWeight: 500,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
           subtitle3: {
-            fontSize: "14px",
+            fontSize: '14px',
             fontWeight: 400,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
           body1: {
-            fontSize: "16px",
+            fontSize: '16px',
             fontWeight: 600,
-            fontFamily: "Heebo",
+            fontFamily: 'Heebo',
             color: ColorTokens.text.primary,
           },
           body2: {
-            fontSize: "14px",
+            fontSize: '14px',
             fontWeight: 400,
-            fontFamily: "Heebo",
+            fontFamily: 'Heebo',
             color: ColorTokens.text.primary,
           },
           caption: {
-            fontSize: "12px",
+            fontSize: '12px',
             fontWeight: 400,
-            fontFamily: "Heebo",
+            fontFamily: 'Heebo',
             color: ColorTokens.text.secondary,
           },
           label1: {
-            fontSize: "14px",
+            fontSize: '14px',
             fontWeight: 400,
-            fontFamily: "Heebo",
+            fontFamily: 'Heebo',
             color: ColorTokens.text.secondary,
           },
           label2: {
-            fontSize: "12px",
+            fontSize: '12px',
             fontWeight: 400,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.secondary,
           },
           button1: {
-            fontSize: "14px",
+            fontSize: '14px',
             fontWeight: 600,
-            fontFamily: "Poppins",
+            fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
         } as TypographyOptions,