feat: creating base for colors out from createTheme

Client/src/App.jsx

@@ -35,7 +35,7 @@ import withAdminProp from "./Components/HOC/withAdminProp";
 import { ThemeProvider } from "@emotion/react";
 import lightTheme from "./Utils/Theme/lightTheme";
 import darkTheme from "./Utils/Theme/darkTheme";
-import { CssBaseline } from "@mui/material";
+import { CssBaseline, GlobalStyles } from "@mui/material";
 import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
@@ -68,8 +68,19 @@ function App() {
 	}, []);
 
 	return (
+		/* Extract Themeprovider, baseline and global styles to Styles */
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
 			<CssBaseline />
+			<GlobalStyles
+				styles={({ palette }) => {
+					return {
+						body: {
+							backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
+						},
+					};
+				}}
+			/>
+			{/* Extract Routes to Routes */}
 			<Routes>
 				<Route
 					exact

Client/src/Components/Charts/BarChart/index.jsx

@@ -111,7 +111,7 @@ const BarChart = ({ checks = [] }) => {
 								],
 								sx: {
 									"& .MuiTooltip-tooltip": {
-										backgroundColor: theme.palette.background.main,
+										backgroundColor: theme.palette.secondary.main,
 										border: 1,
 										borderColor: theme.palette.border.dark,
 										borderRadius: theme.shape.borderRadius,

Client/src/Utils/Theme/constants.js

@@ -1,11 +1,14 @@
+const typographyBase = 14;
 const typographyLevels = {
-	xs: ".625rem",
-	s: ".75rem",
-	m: ".875rem",
-	l: "1rem",
-	xl: "1.5rem",
+	base: typographyBase,
+	xs: `${(typographyBase - 4) / 16}rem`,
+	s: `${(typographyBase - 2) / 16}rem`,
+	m: `${typographyBase / 16}rem`,
+	l: `${(typographyBase + 2) / 16}rem`,
+	xl: `${(typographyBase + 10) / 16}rem`,
 };
 
+/* This should not be here. INcorporate into color structure */
 const paletteLight = {
 	text: {
 		primary: "#1c2130",
@@ -15,4 +18,64 @@ const paletteLight = {
 	},
 };
 
-export { typographyLevels, paletteLight };
+/* TODO Expand this */
+
+const paletteColors = {
+	white: "#FFFFFF",
+	gray50: "#FEFEFE",
+	gray60: "#FEFDFE",
+	gray70: "#FDFDFD",
+	gray80: "#FDFCFD",
+	gray90: "#FCFCFD",
+	gray850: "#131315",
+	gray860: "#111113",
+	gray870: "#0F0F11",
+	gray880: "#0C0C0E",
+	gray890: "#09090B",
+	black: "#000000",
+};
+
+/* TODO Export this as colors */
+/*  primary: {
+    main: {
+      light:,
+      dark:
+    },
+    light:{
+      light:,
+      dark:
+    },
+    dark:{
+      light:,
+      dark:
+    },
+    contrastText: {
+      light:,
+      dark:
+    },
+  } */
+const semanticColors = {
+	gradient: {
+		color1: {
+			light: paletteColors.gray90,
+			dark: paletteColors.gray890,
+		},
+		color2: {
+			light: paletteColors.gray80,
+			dark: paletteColors.gray880,
+		},
+		color3: {
+			light: paletteColors.gray70,
+			dark: paletteColors.gray870,
+		},
+		color4: {
+			light: paletteColors.gray60,
+			dark: paletteColors.gray860,
+		},
+		color5: {
+			light: paletteColors.gray50,
+			dark: paletteColors.gray850,
+		},
+	},
+};
+export { typographyLevels, paletteLight, semanticColors as colors };

Client/src/Utils/Theme/darkTheme.js

@@ -1,5 +1,6 @@
 import { createTheme } from "@mui/material";
 import { baseTheme } from "./globalTheme";
+import { colors } from "./constants";
 
 const text = {
 	primary: "#fafafa",
@@ -16,35 +17,18 @@ const background = {
 };
 const border = { light: "#27272a", dark: "#36363e" };
 
-/* const fontFamilyDefault =
-	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
-const shadow =
-	"0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
+const { gradient } = colors;
+/* const gradient = {
+	color1: "#09090b",
+	color2: "#0c0c0e",
+	color3: "#0f0f11",
+	color4: "#111113",
+	color5: "#131315",
+}; */
 
 const darkTheme = createTheme({
 	...baseTheme,
-	// typography: {
-	// 	/* 	fontFamily: fontFamilyDefault, */
-	// 	fontSize: 13,
-	// 	h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
-	// 	h2: { fontSize: 16, color: text.secondary, fontWeight: 400 },
-	// 	body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
-	// 	body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
-	// },
-	chart: {
-		header: {
-			fontWeight: 400,
-			fill: text.tertiary,
-			fontSize: 11,
-		},
-		subheader: {
-			fontWeight: 400,
-			fill: text.tertiary,
-			fontSize: 9,
-		},
-	},
 	palette: {
-		mode: "dark",
 		primary: { main: "#1570ef" },
 		secondary: { main: "#2D2D33" },
 		text: text,
@@ -57,6 +41,7 @@ const darkTheme = createTheme({
 			light: background.main,
 			border: border.light,
 		},
+		gradient,
 		success: {
 			text: "#079455",
 			main: "#45bb7a",
@@ -94,176 +79,6 @@ const darkTheme = createTheme({
 			autofill: "#2d2d33",
 		},
 	},
-	spacing: 2,
-	components: {
-		MuiCssBaseline: {
-			styleOverrides: {
-				body: {
-					backgroundImage:
-						"radial-gradient(circle, #09090b, #0c0c0e, #0f0f11, #111113, #131315, #131315, #131315, #131315, #111113, #0f0f11, #0c0c0e, #09090b)",
-					lineHeight: "inherit",
-					paddingLeft: "calc(100vw - 100%)",
-				},
-			},
-		},
-		MuiButton: {
-			defaultProps: {
-				disableRipple: true,
-			},
-			styleOverrides: {
-				root: ({ theme }) => ({
-					variants: [
-						{
-							props: (props) => props.variant === "group",
-							style: {
-								color: theme.palette.secondary.contrastText,
-								backgroundColor: theme.palette.background.main,
-								border: 1,
-								borderStyle: "solid",
-								borderColor: theme.palette.border.light,
-							},
-						},
-						{
-							props: (props) => props.variant === "group" && props.filled === "true",
-							style: {
-								backgroundColor: theme.palette.secondary.main,
-							},
-						},
-						{
-							props: (props) =>
-								props.variant === "contained" && props.color === "secondary",
-							style: {
-								border: 1,
-								borderStyle: "solid",
-								borderColor: theme.palette.border.dark,
-							},
-						},
-					],
-					fontWeight: 400,
-					borderRadius: 4,
-					boxShadow: "none",
-					textTransform: "none",
-					"&:focus": {
-						outline: "none",
-					},
-					"&:hover": {
-						boxShadow: "none",
-					},
-				}),
-			},
-		},
-		MuiIconButton: {
-			styleOverrides: {
-				root: {
-					padding: 4,
-					transition: "none",
-					"&:hover": {
-						backgroundColor: border.light,
-					},
-				},
-			},
-		},
-		MuiPaper: {
-			styleOverrides: {
-				root: {
-					marginTop: 4,
-					padding: 0,
-					border: 1,
-					borderStyle: "solid",
-					borderColor: border.light,
-					borderRadius: 4,
-					boxShadow: shadow,
-					backgroundColor: background.main,
-					backgroundImage: "none",
-				},
-			},
-		},
-		MuiList: {
-			styleOverrides: {
-				root: {
-					padding: 0,
-				},
-			},
-		},
-		MuiListItemButton: {
-			styleOverrides: {
-				root: {
-					transition: "none",
-				},
-			},
-		},
-		MuiMenuItem: {
-			styleOverrides: {
-				root: {
-					borderRadius: 4,
-					backgroundColor: "inherit",
-					padding: "4px 6px",
-					color: text.secondary,
-					fontSize: 13,
-					margin: 2,
-					minWidth: 100,
-					"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
-						{
-							backgroundColor: background.fill,
-						},
-				},
-			},
-		},
-		MuiTableCell: {
-			styleOverrides: {
-				root: {
-					borderBottomColor: border.light,
-				},
-			},
-		},
-		MuiTableHead: {
-			styleOverrides: {
-				root: {
-					backgroundColor: background.accent,
-				},
-			},
-		},
-		MuiPagination: {
-			styleOverrides: {
-				root: {
-					backgroundColor: background.main,
-					border: 1,
-					borderStyle: "solid",
-					borderColor: border.light,
-					"& button": {
-						color: text.tertiary,
-						borderRadius: 4,
-					},
-					"& li:first-of-type button, & li:last-of-type button": {
-						border: 1,
-						borderStyle: "solid",
-						borderColor: border.light,
-					},
-				},
-			},
-		},
-		MuiPaginationItem: {
-			styleOverrides: {
-				root: {
-					"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
-						backgroundColor: background.fill,
-					},
-				},
-			},
-		},
-		MuiSkeleton: {
-			styleOverrides: {
-				root: {
-					backgroundColor: "#151518",
-				},
-			},
-		},
-	},
-	shape: {
-		borderRadius: 2,
-		borderThick: 2,
-		boxShadow: shadow,
-	},
 });
 
 export default darkTheme;

Client/src/Utils/Theme/globalTheme.js

@@ -3,10 +3,30 @@ import { paletteLight, typographyLevels } from "./constants";
 const fontFamilyPrimary = '"Inter" , sans-serif';
 // const fontFamilySecondary = '"Avenir", sans-serif';
 
+const shadow =
+	"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
+
+const background = {
+	main: "#FFFFFF",
+	alt: "#FCFCFD",
+	fill: "#F4F4F4",
+	accent: "#f9fafb",
+};
+
+const border = { light: "#eaecf0", dark: "#d0d5dd" };
+
+const text = {
+	primary: "#1c2130",
+	secondary: "#344054",
+	tertiary: "#475467",
+	accent: "#838c99",
+};
+
 const baseTheme = {
+	/* TODO colors should not live here */
 	typography: {
 		fontFamily: fontFamilyPrimary,
-		fontSize: typographyLevels.m,
+		fontSize: 14,
 		h1: {
 			fontSize: typographyLevels.xl,
 			color: paletteLight.text.primary,
@@ -28,6 +48,179 @@ const baseTheme = {
 			fontWeight: 400,
 		},
 	},
+	/* TODO take chart from here, it should live inside of the gauge, and get info from the theme */
+	chart: {
+		header: {
+			fontWeight: 400,
+			fill: paletteLight.text.tertiary,
+			fontSize: typographyLevels.m,
+		},
+		subheader: {
+			fontWeight: 400,
+			fill: paletteLight.text.tertiary,
+			fontSize: typographyLevels.xs,
+		},
+	},
+	spacing: 2,
+	components: {
+		MuiButton: {
+			defaultProps: {
+				disableRipple: true,
+			},
+			styleOverrides: {
+				root: ({ theme }) => ({
+					variants: [
+						{
+							props: (props) => props.variant === "group",
+							style: {
+								color: theme.palette.secondary.contrastText,
+								backgroundColor: theme.palette.background.main,
+								border: 1,
+								borderStyle: "solid",
+								borderColor: theme.palette.border.light,
+							},
+						},
+						{
+							props: (props) => props.variant === "group" && props.filled === "true",
+							style: {
+								backgroundColor: theme.palette.secondary.main,
+							},
+						},
+						{
+							props: (props) =>
+								props.variant === "contained" && props.color === "secondary",
+							style: {
+								border: 1,
+								borderStyle: "solid",
+								borderColor: theme.palette.border.light,
+							},
+						},
+					],
+					fontWeight: 400,
+					borderRadius: 4,
+					boxShadow: "none",
+					textTransform: "none",
+					"&:focus": {
+						outline: "none",
+					},
+					"&:hover": {
+						boxShadow: "none",
+					},
+				}),
+			},
+		},
+		MuiIconButton: {
+			styleOverrides: {
+				root: {
+					padding: 4,
+					transition: "none",
+					"&:hover": {
+						backgroundColor: background.fill,
+					},
+				},
+			},
+		},
+		MuiPaper: {
+			styleOverrides: {
+				root: {
+					marginTop: 4,
+					padding: 0,
+					border: 1,
+					borderStyle: "solid",
+					borderColor: border.light,
+					borderRadius: 4,
+					boxShadow: shadow,
+					backgroundColor: background.main,
+					backgroundImage: "none",
+				},
+			},
+		},
+		MuiList: {
+			styleOverrides: {
+				root: {
+					padding: 0,
+				},
+			},
+		},
+		MuiListItemButton: {
+			styleOverrides: {
+				root: {
+					transition: "none",
+				},
+			},
+		},
+		MuiMenuItem: {
+			styleOverrides: {
+				root: {
+					borderRadius: 4,
+					backgroundColor: "inherit",
+					padding: "4px 6px",
+					color: text.secondary,
+					fontSize: 13,
+					margin: 2,
+					minWidth: 100,
+					"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
+						{
+							backgroundColor: background.fill,
+						},
+				},
+			},
+		},
+		MuiTableCell: {
+			styleOverrides: {
+				root: {
+					borderBottomColor: border.light,
+				},
+			},
+		},
+		MuiTableHead: {
+			styleOverrides: {
+				root: {
+					backgroundColor: background.accent,
+				},
+			},
+		},
+		MuiPagination: {
+			styleOverrides: {
+				root: {
+					backgroundColor: background.main,
+					border: 1,
+					borderStyle: "solid",
+					borderColor: border.light,
+					"& button": {
+						color: text.tertiary,
+						borderRadius: 4,
+					},
+					"& li:first-of-type button, & li:last-of-type button": {
+						border: 1,
+						borderStyle: "solid",
+						borderColor: border.light,
+					},
+				},
+			},
+		},
+		MuiPaginationItem: {
+			styleOverrides: {
+				root: {
+					"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
+						backgroundColor: background.fill,
+					},
+				},
+			},
+		},
+		MuiSkeleton: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					backgroundColor: theme.palette.unresolved.bg,
+				}),
+			},
+		},
+	},
+	shape: {
+		borderRadius: 2,
+		borderThick: 2,
+		boxShadow: shadow,
+	},
 };
 
 export { baseTheme };

Client/src/Utils/Theme/lightTheme.js

@@ -1,6 +1,6 @@
 import { createTheme } from "@mui/material";
-import { typographyLevels } from "./constants";
 import { baseTheme } from "./globalTheme";
+import { colors } from "./constants";
 
 const text = {
 	primary: "#1c2130",
@@ -15,38 +15,19 @@ const background = {
 	accent: "#f9fafb",
 };
 
+const { gradient } = colors;
+/* const gradient = {
+	color1: "#fcfcfd",
+	color2: "#fdfcfd",
+	color3: "#fdfdfd",
+	color4: "#fefdfe",
+	color5: "#fefefe",
+}; */
+
 const border = { light: "#eaecf0", dark: "#d0d5dd" };
 
-/* TODO stop using mui for fonts. Create text component based on emotion */
-
-/* const fontFamilyDefault =
-	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
-
-const shadow =
-	"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
-
 const lightTheme = createTheme({
 	...baseTheme,
-	// typography: {
-	// 	/* fontFamily: fontFamilyDefault, */
-	// 	fontSize: typographyLevels.m,
-	// 	h1: { fontSize: typographyLevels.xl, color: text.primary, fontWeight: 500 },
-	// 	h2: { fontSize: typographyLevels.l, color: text.secondary, fontWeight: 400 },
-	// 	body1: { fontSize: typographyLevels.m, color: text.tertiary, fontWeight: 400 },
-	// 	body2: { fontSize: typographyLevels.s, color: text.tertiary, fontWeight: 400 },
-	// },
-	chart: {
-		header: {
-			fontWeight: 400,
-			fill: text.tertiary,
-			fontSize: typographyLevels.m,
-		},
-		subheader: {
-			fontWeight: 400,
-			fill: text.tertiary,
-			fontSize: typographyLevels.xs,
-		},
-	},
 	palette: {
 		primary: { main: "#1570EF" },
 		secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
@@ -60,6 +41,7 @@ const lightTheme = createTheme({
 			light: background.main,
 			border: border.dark,
 		},
+		gradient,
 		success: {
 			text: "#079455",
 			main: "#17b26a",
@@ -96,176 +78,6 @@ const lightTheme = createTheme({
 			autofill: "#e8f0fe",
 		},
 	},
-	spacing: 2,
-	components: {
-		MuiCssBaseline: {
-			styleOverrides: {
-				body: {
-					backgroundImage:
-						"radial-gradient(circle, #fcfcfd, #fdfcfd, #fdfdfd, #fefdfe, #fefefe, #fefefe, #fefefe, #fefefe, #fefdfe, #fdfdfd, #fdfcfd, #fcfcfd)",
-					lineHeight: "inherit",
-					paddingLeft: "calc(100vw - 100%)",
-				},
-			},
-		},
-		MuiButton: {
-			defaultProps: {
-				disableRipple: true,
-			},
-			styleOverrides: {
-				root: ({ theme }) => ({
-					variants: [
-						{
-							props: (props) => props.variant === "group",
-							style: {
-								color: theme.palette.secondary.contrastText,
-								backgroundColor: theme.palette.background.main,
-								border: 1,
-								borderStyle: "solid",
-								borderColor: theme.palette.border.light,
-							},
-						},
-						{
-							props: (props) => props.variant === "group" && props.filled === "true",
-							style: {
-								backgroundColor: theme.palette.secondary.main,
-							},
-						},
-						{
-							props: (props) =>
-								props.variant === "contained" && props.color === "secondary",
-							style: {
-								border: 1,
-								borderStyle: "solid",
-								borderColor: theme.palette.border.light,
-							},
-						},
-					],
-					fontWeight: 400,
-					borderRadius: 4,
-					boxShadow: "none",
-					textTransform: "none",
-					"&:focus": {
-						outline: "none",
-					},
-					"&:hover": {
-						boxShadow: "none",
-					},
-				}),
-			},
-		},
-		MuiIconButton: {
-			styleOverrides: {
-				root: {
-					padding: 4,
-					transition: "none",
-					"&:hover": {
-						backgroundColor: background.fill,
-					},
-				},
-			},
-		},
-		MuiPaper: {
-			styleOverrides: {
-				root: {
-					marginTop: 4,
-					padding: 0,
-					border: 1,
-					borderStyle: "solid",
-					borderColor: border.light,
-					borderRadius: 4,
-					boxShadow: shadow,
-					backgroundColor: background.main,
-					backgroundImage: "none",
-				},
-			},
-		},
-		MuiList: {
-			styleOverrides: {
-				root: {
-					padding: 0,
-				},
-			},
-		},
-		MuiListItemButton: {
-			styleOverrides: {
-				root: {
-					transition: "none",
-				},
-			},
-		},
-		MuiMenuItem: {
-			styleOverrides: {
-				root: {
-					borderRadius: 4,
-					backgroundColor: "inherit",
-					padding: "4px 6px",
-					color: text.secondary,
-					fontSize: 13,
-					margin: 2,
-					minWidth: 100,
-					"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
-						{
-							backgroundColor: background.fill,
-						},
-				},
-			},
-		},
-		MuiTableCell: {
-			styleOverrides: {
-				root: {
-					borderBottomColor: border.light,
-				},
-			},
-		},
-		MuiTableHead: {
-			styleOverrides: {
-				root: {
-					backgroundColor: background.accent,
-				},
-			},
-		},
-		MuiPagination: {
-			styleOverrides: {
-				root: {
-					backgroundColor: background.main,
-					border: 1,
-					borderStyle: "solid",
-					borderColor: border.light,
-					"& button": {
-						color: text.tertiary,
-						borderRadius: 4,
-					},
-					"& li:first-of-type button, & li:last-of-type button": {
-						border: 1,
-						borderStyle: "solid",
-						borderColor: border.light,
-					},
-				},
-			},
-		},
-		MuiPaginationItem: {
-			styleOverrides: {
-				root: {
-					"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
-						backgroundColor: background.fill,
-					},
-				},
-			},
-		},
-		MuiSkeleton: {
-			styleOverrides: {
-				root: {
-					backgroundColor: "#f2f4f7",
-				},
-			},
-		},
-	},
-	shape: {
-		borderRadius: 2,
-		borderThick: 2,
-		boxShadow: shadow,
-	},
 });
 
 export default lightTheme;