@campxdev/react-blueprint 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Charts/BarChart/BarChart.tsx

@@ -1,4 +1,4 @@
-import { Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Stack, SxProps, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -15,12 +15,14 @@ import {
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  TitleProps,
 } from '../types/types';
 import { LayoutType } from 'recharts/types/util/types';
+import { Typography } from '../../export';
 
 export type BarChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   width?: number;
   height?: number;
   layout?: LayoutType;
@@ -48,7 +50,7 @@ type BarItem = {
 
 export const BarChart = ({
   title = 'Bar Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
   margin,
@@ -74,7 +76,11 @@ export const BarChart = ({
 
   return (
     <Stack alignItems={'center'} sx={{ ...containerSx }} width={'fit-content'}>
-      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReBarChart

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Box, Stack, SxProps, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -15,12 +15,14 @@ import {
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  TitleProps,
 } from '../types/types';
 import { CurveType } from 'recharts/types/shape/Curve';
+import { Typography } from '../../export';
 
 export type LineChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   width?: number;
   height?: number;
   dataKey: string;
@@ -44,7 +46,7 @@ type LineItem = {
 
 export const LineChart = ({
   title = 'Line Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
   margin,
@@ -64,7 +66,11 @@ export const LineChart = ({
 
   return (
     <Stack alignItems={'center'} sx={containerSx}>
-      <Typography variant={'h5'} align={'center'} sx={titleSx}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReLineChart width={width} height={height} margin={margin} data={data}>

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,10 +1,11 @@
-import { Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Stack, SxProps, useTheme } from '@mui/material';
 import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import { LegendProps, MarginProps } from '../types/types';
+import { LegendProps, MarginProps, TitleProps } from '../types/types';
+import { Typography } from '../../export';
 
 export type PieChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   margin?: MarginProps;
   width?: number;
   height?: number;
@@ -30,7 +31,7 @@ type PieProps = {
 
 export const PieChart = ({
   title = 'Pie Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   margin,
   width = 500,
   height = 500,
@@ -45,7 +46,11 @@ export const PieChart = ({
 
   return (
     <Stack alignItems="center" sx={{ ...containerSx }}>
-      <Typography variant="h5" align="center" sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <RePieChart width={width} height={height} margin={margin}>

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -1,18 +1,12 @@
-import {
-  Box,
-  Stack,
-  styled,
-  SxProps,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
 import { Treemap as ReTreeMap, Tooltip } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { MarginProps } from '../types/types';
+import { MarginProps, TitleProps } from '../types/types';
+import { Typography } from '../../export';
 
 interface TreeMapProps {
   title?: string;
-  titleSx?: any;
+  titleProps?: TitleProps;
   data: any;
   dataKey: string | number;
   width?: number;
@@ -31,7 +25,7 @@ interface TreeMapProps {
 
 const TreeMap = ({
   title = 'Tree Map',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   data,
   dataKey,
   width = 400,
@@ -48,7 +42,11 @@ const TreeMap = ({
 }: TreeMapProps) => {
   return (
     <Stack alignItems={'center'} sx={{ ...containerSx }}>
-      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReTreeMap

package/src/components/Charts/types/types.ts

@@ -1,4 +1,5 @@
-import { SxProps } from '@mui/material';
+import { Variant } from '@mui/material/styles/createTypography';
+
 import {
   HorizontalAlignmentType,
   IconType,
@@ -16,6 +17,11 @@ export type AxisLabelProps = {
   yLabel?: LabelProps;
 };
 
+export type TitleProps = {
+  variant?: Variant;
+  sx?: any;
+};
+
 export type MarginProps = {
   top?: number;
   right?: number;

package/src/components/DataDisplay/Card/Card.tsx

@@ -31,12 +31,10 @@ export interface CardProps {
     endIcon?: ReactNode;
     buttonProps?: any;
   };
-  fields?: [
-    {
-      title: string;
-      value: string;
-    },
-  ];
+  fields?: {
+    title: string;
+    value: string;
+  }[];
   titleProps?: {
     variant: Variant;
     sx?: SxProps;

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -5,6 +5,7 @@ import {
 } from '@mui/x-data-grid';
 import { DataGridContainer } from '../styles';
 import { TablePagination } from './TablePagination';
+import { v4 } from 'uuid';
 
 export type DataTableProps = {
   limit?: number;
@@ -23,6 +24,7 @@ export const DataTable = (props: DataTableProps) => {
         disableColumnFilter
         disableColumnMenu
         disableColumnSorting
+        getRowId={(row) => row.id ?? v4()}
         {...props}
         slots={{
           pagination: () => {

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -35,7 +35,7 @@ export const TablePagination = (props: PaginationProps) => {
         {...props}
         variant="outlined"
         shape="rounded"
-        onChange={(e, v) => onPageChange(Number(v) * limit)}
+        onChange={(e, v) => onPageChange((Number(v) - 1) * limit)}
       />
       <DropdownMenu
         anchor={({ open }) => (

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -1,9 +1,79 @@
+import { SxProps, Typography } from '@mui/material';
 import { ReactNode } from 'react';
+import Image from '../../Image/Image';
+import {
+  StyledSidePanelContainer,
+  StyledTextContainer,
+  StyledTypography,
+  StyledValueContainer,
+} from './styles';
 
 export interface SidePanelProps {
-  children?: ReactNode;
+  variables?: { label: string; value: string }[];
+  bottomChildren?: ReactNode;
+  containerSx?: SxProps;
+  variablesContainerSX?: SxProps;
+  imageUrl?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  title?: string;
 }
+interface variablesProps {
+  data?: { label: string; value: string }[];
+  variablesContainerSX?: SxProps;
+}
+export const SidePanelVariables = ({
+  data,
+  variablesContainerSX,
+}: variablesProps) => {
+  return (
+    <>
+      {data?.map((item, index) => (
+        <>
+          <StyledValueContainer key={index} sx={variablesContainerSX}>
+            <Typography variant="label1">{item.label}</Typography>
+            <Typography variant="body2">{item.value}</Typography>
+          </StyledValueContainer>
+        </>
+      ))}
+    </>
+  );
+};
+
+export const SidePanel = ({
+  variables,
+  bottomChildren,
+  containerSx,
+  variablesContainerSX,
+  imageUrl,
+  imageHeight = '100%',
+  imageWidth = '100%',
+  title = 'Default Title',
+}: SidePanelProps) => {
+  return (
+    <>
+      <StyledSidePanelContainer sx={containerSx}>
+        {imageUrl ? (
+          <Image
+            radius={'4px'}
+            src={imageUrl || ''}
+            alt="Image"
+            width={imageWidth}
+            height={imageHeight}
+          />
+        ) : (
+          <StyledTextContainer>
+            <StyledTypography variant="subtitle1">{title}</StyledTypography>
+          </StyledTextContainer>
+        )}
+
+        <SidePanelVariables
+          data={variables}
+          variablesContainerSX={variablesContainerSX}
+        />
 
-export const SidePanel = ({ children }: SidePanelProps) => {
-  return <></>;
+        {bottomChildren}
+      </StyledSidePanelContainer>
+    </>
+  );
 };

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -0,0 +1,33 @@
+import { Box, Stack, styled, Typography } from '@mui/material';
+
+export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
+  width: '250px',
+  backgroundColor: theme.palette.surface.paperBackground,
+  padding: '12px',
+  borderRadius: '8px',
+  gap: '12px',
+  margin: '20px',
+}));
+
+export const StyledValueContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '50px',
+  width: '226px',
+  padding: '14px 12px',
+  borderRadius: '4px',
+}));
+
+export const StyledTextContainer = styled(Stack)(({ theme }) => ({
+  width: '226px',
+  height: '128px',
+  backgroundColor: theme.palette.surface.defaultBackground,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.tertiary,
+}));

package/src/components/DataDisplay/export.ts

@@ -3,4 +3,5 @@ export * from './Avatar/Avatar';
 export * from './Card/Card';
 export * from './Chips/Chips';
 export * from './DataTable/DataTable';
+export * from './SidePanel/SidePanel';
 export * from './Typography/Typography';

package/src/components/Input/Button/Button.tsx

@@ -4,11 +4,15 @@ import {
 } from '@mui/material';
 import './ButtonLoader.css';
 
-export type ButtonProps = { loading?: boolean } & MuiButtonProps;
+export type ButtonProps = {
+  loading?: boolean;
+  color?: string;
+} & Omit<MuiButtonProps, 'color'>;
 
-export const Button = ({ loading = false, ...props }: ButtonProps) => {
+export const Button = ({ loading = false, color, ...props }: ButtonProps) => {
   return (
     <MuiButton
+      sx={{ color, ...props.sx }}
       {...props}
       endIcon={loading ? <div className="buttonLoader"></div> : props.endIcon}
       disabled={props.disabled || loading}

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack } from '@mui/material';
+import { Box, Stack, useTheme } from '@mui/material';
 import { AnimatedGifs } from '../../../assets/images/gif';
 import { Button, Dialog, Typography } from '../../export';
 
@@ -11,6 +11,8 @@ export type ConfirmDialogProps = {
   onConfirm: () => void;
   onCancel: () => void;
   type: ConfirmDialogType;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
 };
 
 export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
@@ -20,7 +22,10 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onConfirm,
   onCancel,
   type,
+  confirmButtonText = type === 'delete' ? 'Confirm Delete' : 'Confirm',
+  cancelButtonText = 'Cancel',
 }) => {
+  const theme = useTheme();
   if (!isOpen) return null;
 
   return (
@@ -54,15 +59,16 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                   close();
                 }}
                 variant="text"
+                color={theme.palette.text.tertiary}
               >
-                Cancel
+                {cancelButtonText}
               </Button>
               <Button
                 onClick={onConfirm}
                 variant="contained"
                 color={type === 'delete' ? 'error' : 'primary'}
               >
-                {type === 'delete' ? 'Confirm Delete' : 'Confirm'}
+                {confirmButtonText}
               </Button>
             </Stack>
           </>

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   MenuState,
 } from './interfaces';
 import { createSidebarStyles } from './styles';
+import { Box } from '@mui/material';
 
 export const Sidebar = ({
   menu,
@@ -164,9 +165,11 @@ export const Sidebar = ({
         direction="column"
         className="sidebarContainer"
       >
-        <StyledLogoArea collapsed={collapsed}>
-          {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
-        </StyledLogoArea>
+        <Box>
+          <StyledLogoArea collapsed={collapsed}>
+            {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
+          </StyledLogoArea>
+        </Box>
 
         <motion.div
           initial={{ x: menuPosition }}

package/src/components/Navigation/UploadDialog/Styles.tsx

@@ -5,25 +5,27 @@ interface StyledBoxProps {
   dragging: boolean;
 }
 
-export const UploadDialogBox = styled(Box)<StyledBoxProps>(
-  ({ theme, dragging }) => ({
+export const UploadDialogBox = styled(Box)<StyledBoxProps>(({
+  theme,
+  dragging,
+}) => {
+  const strokeColor = dragging
+    ? encodeURIComponent(theme.palette.primary.dark)
+    : encodeURIComponent(theme.palette.primary.main);
+
+  return {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     height: '250px',
-    border: '1.5px dashed',
-    borderRadius: '10px',
-    borderColor: dragging
-      ? theme.palette.primary.dark
-      : theme.palette.primary.main,
-    backgroundColor: dragging
-      ? theme.palette.secondary.dark
-      : theme.palette.secondary.light,
+    borderRadius: '7px',
+    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' stroke-linecap='round'/%3e%3c/svg%3e")`,
+    backgroundColor: theme.palette.surface.defaultBackground,
     justifyContent: 'center',
     alignItems: 'center',
     transition: 'background-color 0.3s, border-color 0.3s',
-  }),
-);
+  };
+});
 
 export const ImageContainer = React.memo(
   styled('img')<{ size?: number }>(({ size }) => ({

package/src/components/Navigation/UploadDialog/UploadDialogContainer.tsx

@@ -62,7 +62,7 @@ export const UploadDialogContainer = ({
           Import your file
         </Typography>
         <Typography
-          color={theme.palette.primary.light}
+          color={theme.palette.text.tertiary}
           lineHeight="27px"
           variant="body2"
         >

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { Meta } from '@storybook/react/*';
 import {
   SidePanel,
@@ -7,33 +8,66 @@ import {
 export default {
   title: 'DataDisplay/SidePanel',
   component: SidePanel,
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Content inside the Avatar component',
-    },
-    src: {
-      control: 'text',
-      description: 'Image source for the Avatar component',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circular', 'rounded', 'square'],
-      },
-      description: 'Variant of the Avatar component',
-    },
-    sx: {
-      control: 'object',
-      description: 'Custom styling for the Avatar component',
-    },
-  },
 } as Meta<typeof SidePanel>;
 
 export const withText = {
   render: (args: SidePanelProps) => <SidePanel {...args} />,
   args: {
-    children: 'SS',
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+  },
+};
+
+export const WithImage = {
+  render: (args: SidePanelProps) => <SidePanel {...args} />,
+  args: {
+    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+  },
+};
+export const WithBottomComponent = {
+  render: (args: SidePanelProps) => <SidePanel {...args} />,
+  args: {
+    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+    bottomChildren: <Box>here your component</Box>,
   },
 };

package/src/stories/Navigation/ConfirmDialog.stories.tsx

@@ -19,6 +19,14 @@ const meta: Meta<typeof ConfirmDialog> = {
       description: 'Message text displayed in the dialog',
       control: 'text',
     },
+    cancelButtonText: {
+      description: 'Text displayed on the cancel button',
+      control: 'text',
+    },
+    confirmButtonText: {
+      description: 'Text displayed on the confirm button',
+      control: 'text',
+    },
     type: {
       description: "Type of confirmation dialog ('confirm' or 'delete')",
       control: {

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -16,6 +16,9 @@ export const DarkColorTokens = {
     primary: ColorPalette.GreyColors.White,
     secondary: ColorPalette.GreyColors.White70,
     tertiary: ColorPalette.GreyColors.White50,
+    black: ColorPalette.GreyColors.Black,
+    white: ColorPalette.GreyColors.White,
+    primaryContrast: ColorPalette.BlueGreyColors.BlueGrey800,
   },
   surface: {
     defaultBackground: ColorPalette.BlueGreyColors.BlueGrey600,

package/src/themes/colorTokens/lightColorTokens.ts

@@ -16,6 +16,9 @@ export const LightColorTokens = {
     primary: ColorPalette.GreyColors.Black,
     secondary: ColorPalette.GreyColors.Black70,
     tertiary: ColorPalette.GreyColors.Black50,
+    black: ColorPalette.GreyColors.Black,
+    white: ColorPalette.GreyColors.White,
+    primaryContrast: ColorPalette.GreyColors.White,
   },
   surface: {
     defaultBackground: ColorPalette.BlueGreyColors.BlueGrey100,

package/src/themes/commonTheme.ts

@@ -309,25 +309,25 @@ export const getCommonTheme = (mode: Theme) => {
       MuiSwitch: {
         styleOverrides: {
           root: {
-            width: 45,
-            height: 26,
+            width: 40,
+            height: 20,
             padding: 0,
             '& .MuiSwitch-switchBase': {
-              padding: 0,
+              padding: 1,
               margin: 2,
               transitionDuration: '500ms',
               '&.Mui-checked': {
-                transform: 'translateX(18px)',
+                transform: 'translateX(20px)',
                 '& + .MuiSwitch-track': {
-                  backgroundColor: ColorTokens.surface.grey,
+                  backgroundColor: ColorTokens.surface.paperBackground,
+                  border: `1px solid ${ColorTokens.highlight.highlightRed}`,
                   opacity: 1,
-                  border: 0,
                 },
                 '& .MuiSwitch-thumb': {
                   boxSizing: 'border-box',
-                  backgroundColor: ColorTokens.primary.main,
-                  width: 22,
-                  height: 22,
+                  backgroundColor: ColorTokens.highlight.highlightRed,
+                  width: 14,
+                  height: 14,
                 },
                 '&.Mui-disabled + .MuiSwitch-track': {
                   opacity: 0.5,
@@ -336,13 +336,16 @@ export const getCommonTheme = (mode: Theme) => {
             },
             '& .MuiSwitch-thumb': {
               boxSizing: 'border-box',
-              backgroundColor: ColorTokens.surface.paperBackground,
-              width: 22,
-              height: 22,
+              boxShadow: 'none',
+              borderRadius: 4,
+              backgroundColor: ColorTokens.surface.grey,
+              width: 14,
+              height: 14,
             },
             '& .MuiSwitch-track': {
-              borderRadius: 13,
-              backgroundColor: ColorTokens.surface.grey,
+              borderRadius: 4,
+              backgroundColor: ColorTokens.surface.paperBackground,
+              border: `1px solid ${ColorTokens.border.primary}`,
               opacity: 1,
             },
             '&.Mui-disabled + .MuiSwitch-track': {
@@ -476,7 +479,7 @@ export const getCommonTheme = (mode: Theme) => {
           },
           subtitle2: {
             fontSize: '16px',
-            fontWeight: 500,
+            fontWeight: 600,
             fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
@@ -486,6 +489,12 @@ export const getCommonTheme = (mode: Theme) => {
             fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
+          button1: {
+            fontSize: '14px',
+            fontWeight: 600,
+            fontFamily: 'Poppins',
+            color: ColorTokens.text.primary,
+          },
           body1: {
             fontSize: '16px',
             fontWeight: 600,
@@ -498,12 +507,6 @@ export const getCommonTheme = (mode: Theme) => {
             fontFamily: 'Heebo',
             color: ColorTokens.text.primary,
           },
-          caption: {
-            fontSize: '12px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.secondary,
-          },
           label1: {
             fontSize: '14px',
             fontWeight: 400,
@@ -511,16 +514,16 @@ export const getCommonTheme = (mode: Theme) => {
             color: ColorTokens.text.secondary,
           },
           label2: {
-            fontSize: '12px',
+            fontSize: '14px',
             fontWeight: 400,
             fontFamily: 'Poppins',
             color: ColorTokens.text.secondary,
           },
-          button1: {
-            fontSize: '14px',
-            fontWeight: 600,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
+          caption: {
+            fontSize: '12px',
+            fontWeight: 400,
+            fontFamily: 'Heebo',
+            color: ColorTokens.text.secondary,
           },
         } as TypographyOptions,
       },

package/types/theme.d.ts

@@ -1,6 +1,6 @@
-import "@mui/material/styles";
+import '@mui/material/styles';
 
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface Theme {
     palette: {
       [x: string]: any;
@@ -21,6 +21,9 @@ declare module "@mui/material/styles" {
         primary: string;
         secondary: string;
         tertiary: string;
+        black: string;
+        white: string;
+        primaryContrast: string;
       };
       surface: {
         defaultBackground: string;
@@ -49,7 +52,7 @@ declare module "@mui/material/styles" {
   export function createTheme(options?: CustomThemeOptions): CustomTheme;
 }
 
-declare module "@mui/material/Typography" {
+declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
     label1: true;
     label2: true;