@evenicanpm/ui 1.3.0

package/src/theme/build-mui-theme.ts

@@ -0,0 +1,146 @@
+"use client";
+//import type { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+import type { Shadows, ThemeOptions } from "@mui/material";
+
+// The file that contains a call to createTheme must have a use client directive
+// https://mui.com/material-ui/integrations/nextjs/
+import { createTheme, type Theme } from "@mui/material/styles";
+
+export interface ThemeObject {
+	// Breakpoints
+	smBreakpoint: number;
+	mdBreakpoint: number;
+	lgBreakpoint: number;
+	xlBreakpoint: number;
+
+	// Colors
+	colorPrimary: string;
+	colorSecondary: string;
+
+	textPrimary: string;
+	textSecondary: string;
+
+	panelBackground?: string;
+
+	warning: string;
+	success: string;
+	error: string;
+	info: string;
+
+	// Fonts
+	fontFamily: string;
+
+	h1: number;
+	h2: number;
+	h3: number;
+	h4: number;
+	h5: number;
+	h6: number;
+
+	body1: number;
+	body2: number;
+
+	h1Font?: string;
+	h5Font?: string;
+	h6Font?: string;
+	body1Font?: string;
+	body2Font?: string;
+}
+
+/**
+ * Converts database theme object into an MUI theme object to pass to the ThemeProvider
+ * @param themeObject is E4 theme entity
+ * @returns an MUI theme object
+ */
+const themeBuilder = (themeObject: ThemeObject): Theme => {
+	const theme = {
+		breakpoints: {
+			values: {
+				xs: 0,
+				sm: themeObject.smBreakpoint,
+				md: themeObject.mdBreakpoint,
+				lg: themeObject.lgBreakpoint,
+				xl: themeObject.xlBreakpoint,
+			},
+		},
+		palette: {
+			background: {
+				default: "#FAFAFA",
+				paper: themeObject.panelBackground || "#f6f9fc",
+			},
+			primary: {
+				main: themeObject.colorPrimary,
+				contrastText: "#FFF",
+			},
+			secondary: {
+				main: themeObject.colorSecondary,
+			},
+			text: {
+				primary: themeObject.textPrimary,
+				secondary: themeObject.textSecondary,
+			},
+			warning: {
+				main: themeObject.warning,
+			},
+			success: {
+				main: themeObject.success,
+			},
+			error: {
+				main: themeObject.error,
+			},
+			info: {
+				main: themeObject.info,
+			},
+		},
+		typography: {
+			fontFamily: themeObject.fontFamily,
+			h1: {
+				fontSize: `${themeObject.h1}rem`,
+				fontFamily: themeObject.h1Font || themeObject.fontFamily,
+			},
+			h2: {
+				fontSize: `${themeObject.h2}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h3: {
+				fontSize: `${themeObject.h3}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h4: {
+				fontSize: `${themeObject.h4}rem`,
+				fontFamily: themeObject.fontFamily,
+			},
+			h5: {
+				fontSize: `${themeObject.h5}rem`,
+				fontFamily: themeObject.h5Font || themeObject.fontFamily,
+			},
+			h6: {
+				fontSize: `${themeObject.h6}rem`,
+				fontFamily: themeObject.h6Font || themeObject.fontFamily,
+			},
+			body1: {
+				fontSize: `${themeObject.body1}rem`,
+				fontFamily: themeObject.body1Font || themeObject.fontFamily,
+			},
+			body2: {
+				fontSize: `${themeObject.body2}rem`,
+				fontFamily: themeObject.body2Font || themeObject.fontFamily,
+			},
+		},
+		shape: {
+			borderRadius: 4,
+		},
+		shadows: [
+			"none",
+			"0px 0px 3px rgba(0, 0, 0, 0.09)",
+			"0px 35px 60px rgba(0, 0, 0, 0.25)",
+			"20px 55px 60px rgba(0, 0, 0, 0.25)",
+			"10px 15px 60px rgba(0, 0, 0, 0.25)",
+			...Array(20).fill("none"),
+		] as Shadows,
+	};
+	const e4Theme = createTheme(theme as ThemeOptions);
+	return e4Theme;
+};
+
+export default themeBuilder;

package/src/theme/components.ts

@@ -0,0 +1,208 @@
+import type { TypographyOptions } from "@mui/material/styles/createTypography";
+import { dark, grey, primary, secondary, success } from "./theme-colors";
+import { classes } from "./utils";
+
+// ========================================================
+
+declare module "@mui/material/Button" {
+	interface ButtonPropsColorOverrides {
+		dark: true;
+		paste: true;
+		marron: true;
+		orange: true;
+	}
+
+	interface ButtonPropsSizeOverrides {
+		normal: true;
+	}
+}
+
+// =========================================================
+
+export const components = (typography: TypographyOptions) => ({
+	MuiCssBaseline: {
+		styleOverrides: {
+			"*": {
+				margin: 0,
+				padding: 0,
+				boxSizing: "border-box",
+				scrollBehavior: "smooth",
+			},
+			html: {
+				scrollBehavior: "smooth",
+			},
+			p: {
+				lineHeight: 1.75,
+			},
+			button: {
+				fontSize: 14,
+				fontFamily: typography.fontFamily,
+			},
+			".MuiRating-sizeSmall": {
+				fontSize: "20px",
+			},
+			a: {
+				color: "inherit",
+				textDecoration: "none",
+			},
+			ul: {
+				margin: 0,
+				padding: 0,
+				listStyle: "none",
+			},
+			".bg-white": {
+				backgroundColor: "white",
+			},
+
+			...classes(),
+		},
+	},
+	MuiInputLabel: {
+		styleOverrides: {
+			root: { zIndex: 0 },
+		},
+	},
+	MuiDialog: {
+		styleOverrides: {
+			paper: { borderRadius: 8 },
+		},
+	},
+	MuiCard: {
+		styleOverrides: {
+			root: { borderRadius: "8px" },
+		},
+	},
+	MuiPagination: {
+		defaultProps: {
+			variant: "outlined",
+			color: "primary",
+		},
+	},
+	MuiMenuItem: {
+		styleOverrides: {
+			root: { paddingTop: 8, paddingBottom: 8 },
+		},
+	},
+	MuiSvgIcon: {
+		styleOverrides: {
+			root: {
+				"& .secondary": { opacity: 0.4 },
+			},
+		},
+	},
+	MuiTextField: {
+		defaultProps: { size: "small", variant: "outlined" },
+		styleOverrides: {
+			//@ts-nocheck
+			root: {
+				variants: [
+					{
+						props: { color: "info" },
+						style: {
+							"& .MuiOutlinedInput-root": {
+								borderRadius: "8px",
+								fontWeight: 600,
+							},
+							"& .MuiOutlinedInput-notchedOutline": { borderColor: grey[300] },
+						},
+					},
+				],
+			}, // <-- FIX: Closing brace added here
+		}, // <-- FIX: Closing brace added here
+	}, // <-- FIX: Closing brace added here
+	MuiButton: {
+		styleOverrides: {
+			root: {
+				// Base styles that apply to ALL buttons (moved from the top of the root function)
+				minWidth: 0,
+				minHeight: 0,
+				fontWeight: 600,
+				borderRadius: "6px",
+				textTransform: "capitalize",
+			},
+			// The 'sizeLarge' style override can remain as it is not dependent on other props.
+			sizeLarge: {
+				padding: ".6rem 2.5rem",
+			},
+		},
+		defaultProps: {
+			color: "inherit",
+		},
+		// --- New Variants Array ---
+		variants: [
+			// 1. ownerState.color === "dark" (Default solid dark button)
+			{
+				props: { color: "dark", variant: "contained" },
+				style: {
+					color: "#fff",
+					borderRadius: 0,
+					transition: "all 0.3s",
+					"&:hover": {
+						backgroundColor: "#343434",
+					},
+				},
+			},
+			// 2. ownerState.color === "dark" && ownerState.variant === "outlined"
+			{
+				props: { color: "dark", variant: "outlined" },
+				style: () => ({
+					// Use theme here if needed, or if dark.main is a variable
+					color: dark.main,
+					borderRadius: "3px",
+					transition: "all 0.3s",
+					"&:hover": {
+						backgroundColor: dark.main,
+						color: "white",
+					},
+				}),
+			},
+			// 3. ownerState.color === "info" || ownerState.color === "orange"
+			{
+				props: { color: "info" },
+				style: {
+					borderRadius: "8px",
+				},
+			},
+			{
+				props: { color: "orange" },
+				style: {
+					borderRadius: "8px",
+				},
+			},
+			// 4. ownerState.color === "orange" || ownerState.color === "success" (Text color white)
+			{
+				props: { color: "orange" },
+				style: {
+					color: "white",
+				},
+			},
+			{
+				props: { color: "success" },
+				style: {
+					color: "white",
+				},
+			},
+		],
+	},
+
+	MuiChip: {
+		defaultProps: { color: "primary" },
+		styleOverrides: {
+			labelSmall: { paddingInline: 12 },
+			colorSuccess: { color: success.main, backgroundColor: success[100] },
+			colorSecondary: {
+				color: secondary[500],
+				backgroundColor: secondary[100],
+			},
+			colorPrimary: {
+				color: primary[500],
+				backgroundColor: primary[100],
+				"&:hover": { color: primary[500], backgroundColor: primary[100] },
+			},
+		},
+	},
+
+	MuiContainer: {
+		defaultProps: { maxWidth: "xl" },
+	},
+});

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from "./theme-provider";

package/src/theme/theme-colors.ts

@@ -0,0 +1,205 @@
+// =================================================================
+interface CustomPaletteColor {
+	50: string;
+	100: string;
+	200: string;
+	300: string;
+	400: string;
+	600: string;
+	700: string;
+	800: string;
+	900: string;
+	main: string;
+	contrastText: string;
+}
+
+declare module "@mui/material/styles" {
+	interface Palette {
+		dark?: CustomPaletteColor;
+		paste?: CustomPaletteColor;
+		marron?: CustomPaletteColor;
+		orange?: CustomPaletteColor;
+		bluish?: CustomPaletteColor;
+	}
+
+	interface PaletteOptions {
+		gold?: CustomPaletteColor;
+		dark?: CustomPaletteColor;
+		paste?: CustomPaletteColor;
+		marron?: CustomPaletteColor;
+		orange?: CustomPaletteColor;
+		bluish?: CustomPaletteColor;
+	}
+}
+// =================================================================
+
+export const grey = {
+	900: "#2B3445", // Main Text
+	800: "#373F50", // Paragraph
+	700: "#4B566B",
+	600: "#7D879C", // Low Priority form Title/Text
+	500: "#AEB4BE",
+	400: "#DAE1E7", // Border
+	300: "#E3E9EF",
+	200: "#F3F5F9", // Line Stroke
+	100: "#FFFFFF",
+};
+
+export const primary = {
+	100: "#FCE9EC",
+	200: "#F8C7CF",
+	300: "#F07D90",
+	400: "#EC6178",
+	500: "#D23F57",
+	600: "#E63E58",
+	700: "#E3364E",
+	800: "#DF2E44",
+	900: "#D91F33",
+};
+
+export const secondary = {
+	100: "#e8e8ee",
+	200: "#b9bacb",
+	300: "#8a8ca8",
+	400: "#5b5d85",
+	500: "#141850",
+	600: "#0F3460",
+	700: "#101340",
+	800: "#0e1138",
+	900: "#0c0e30",
+	main: "#0F3460",
+	dark: "#0c0e30",
+};
+
+export const error = {
+	100: "#FFEAEA",
+	200: "#FFCBCB",
+	300: "#FFA9A9",
+	400: "#FF6D6D",
+	500: "#FF5353",
+	600: "#FF4C4C",
+	700: "#FF4242",
+	800: "#FF3939",
+	900: "#FF2929",
+	main: "#E94560",
+};
+
+export const success = {
+	100: "#E7F9ED",
+	200: "#C2F1D1",
+	300: "#99E8B3",
+	400: "#52D77E",
+	500: "#33D067",
+	600: "#2ECB5F",
+	700: "#27C454",
+	800: "#20BE4A",
+	900: "#0b7724",
+	main: "rgb(51, 208, 103)",
+};
+
+export const blue = {
+	50: "#f3f5f9",
+	100: "#DBF0FE",
+	200: "#B8DEFE",
+	300: "#94C9FE",
+	400: "#7AB6FD",
+	500: "#4E97FD",
+	600: "#3975D9",
+	700: "#2756B6",
+	800: "#183C92",
+	900: "#0E2979",
+	main: "#4E97FD",
+	contrastText: "#FFFFFF",
+};
+
+export const marron = {
+	50: "#f3f5f9",
+	100: "#F6F2ED",
+	200: "#F8DBD1",
+	300: "#EBBCB3",
+	400: "#D89C98",
+	600: "#A3545C",
+	700: "#883948",
+	800: "#6E2438",
+	900: "#5B162F",
+	main: "#BE7374",
+};
+
+export const paste = {
+	50: "#F5F5F5",
+	100: "#DDFBF1",
+	200: "#BDF7E8",
+	300: "#97E8DA",
+	400: "#76D2CA",
+	600: "#36929A",
+	700: "#257181",
+	800: "#175368",
+	900: "#0E3D56",
+	main: "#4BB4B4",
+	contrastText: "#FFFFFF",
+};
+
+export const orange = {
+	50: "#FEE9D2",
+	100: "#FDD8AF",
+	200: "#FCC487",
+	300: "#FCB05F",
+	400: "#FB9C37",
+	500: "#FA8C16",
+	600: "#C86904",
+	700: "#A05403",
+	800: "#783F03",
+	900: "#502A02",
+	main: "#FA8C16",
+	dark: "#C86904",
+	light: "#FDD8AF",
+};
+
+export const bluish = {
+	100: "#DDFBF1",
+	200: "#BDF7E8",
+	300: "#97E8DA",
+	400: "#76D2CA",
+	500: "#4BB4B4",
+	600: "#36929A",
+	700: "#257181",
+	800: "#175368",
+	900: "#0E3D56",
+	main: "#4BB4B4",
+	dark: "#36929A",
+	light: "#BDF7E8",
+};
+
+export const warning = {
+	100: "#FFF8E5",
+	main: "#FFCD4E",
+	dark: "#FA8C16",
+	contrastText: "#FFFFFF",
+};
+
+export const gold = {
+	main: "#BB9C36",
+};
+
+export const bluishBackground = "#F6F9FC";
+
+export const dark = { main: "#1F2937" };
+export const white = { main: "#fff" };
+
+export const themeColors = {
+	dark,
+	grey,
+	gold,
+	paste,
+	error,
+	orange,
+	marron,
+	bluish,
+	warning,
+	success,
+	secondary,
+	info: blue,
+	divider: grey[200],
+	background: { default: grey[100] },
+	text: { primary: grey[900], secondary: grey[800], disabled: grey[400] },
+};

package/src/theme/theme-options.ts

@@ -0,0 +1,113 @@
+import type { TypographyOptions } from "@mui/material/styles/createTypography";
+import { components } from "./components";
+import {
+	blue,
+	bluish,
+	gold,
+	marron,
+	orange,
+	paste,
+	primary,
+	success,
+	themeColors,
+	warning,
+} from "./theme-colors";
+
+const THEMES = {
+	GIFT: "GIFT",
+	HEALTH: "HEALTH",
+	DEFAULT: "DEFAULT",
+	GROCERY: "GROCERY",
+	PASTE: "PASTE",
+	ORANGE: "ORANGE",
+	GOLD: "GOLD",
+	BLUISH: "BLUISH",
+	GREEN: "GREEN",
+	YELLOW: "YELLOW",
+};
+
+const breakpoints = {
+	values: {
+		xs: 0,
+		sm: 600,
+		md: 960,
+		lg: 1280,
+		xl: 1600,
+		xxl: 1920,
+	},
+};
+/*
+WE CREATED MULTIPLE THEME OPTIONS FOR DIFFERENT SHOP VARIATION.
+
+YOU CAN JUST KEEP [THEMES.DEFAULT] AND REMOVE OTHER THEME OPTIONS.
+*/
+const themesOptionList = (typography: TypographyOptions) => ({
+	[THEMES.DEFAULT]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+	},
+	[THEMES.GROCERY]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
+	},
+	[THEMES.PASTE]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
+	},
+	[THEMES.HEALTH]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
+	},
+	[THEMES.GIFT]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
+	},
+	[THEMES.ORANGE]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...orange }, ...themeColors },
+	},
+	[THEMES.GOLD]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...gold }, ...themeColors },
+	},
+	[THEMES.BLUISH]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...bluish }, ...themeColors },
+	},
+	[THEMES.GREEN]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...success }, ...themeColors },
+	},
+
+	[THEMES.YELLOW]: {
+		typography,
+		components: components(typography),
+		breakpoints,
+		palette: { primary: { ...warning }, ...themeColors },
+	},
+});
+
+const getThemeOptions = (typography: TypographyOptions) => {
+	const themeOption = themesOptionList(typography)[THEMES.DEFAULT];
+	return themeOption;
+};
+
+export default getThemeOptions;

package/src/theme/theme-provider.tsx

@@ -0,0 +1,40 @@
+"use client";
+import type { ThemeOptions } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import createTheme from "@mui/material/styles/createTheme";
+
+import type { TypographyOptions } from "@mui/material/styles/createTypography";
+import responsiveFontSizes from "@mui/material/styles/responsiveFontSizes";
+import MuiThemeProvider from "@mui/material/styles/ThemeProvider";
+import { deepmerge } from "@mui/utils";
+import type { ReactNode } from "react";
+import getThemeOptions from "./theme-options";
+
+export const ThemeProvider = ({
+	children,
+	typography,
+	themeOptions,
+}: {
+	children: ReactNode;
+	themeOptions?: ThemeOptions;
+	typography: TypographyOptions;
+}) => {
+	const baseTheme = getThemeOptions(typography) as unknown as ThemeOptions;
+
+	let theme = createTheme(deepmerge(baseTheme, themeOptions));
+
+	theme = responsiveFontSizes(theme);
+
+	// theme shadows
+	theme.shadows[1] = "0px 1px 3px rgba(3, 0, 71, 0.09)";
+	theme.shadows[2] = "0px 4px 16px rgba(43, 52, 69, 0.1)";
+	theme.shadows[3] = "0px 8px 45px rgba(3, 0, 71, 0.09)";
+	theme.shadows[4] = "0px 0px 28px rgba(3, 0, 71, 0.01)";
+
+	return (
+		<MuiThemeProvider theme={theme}>
+			<CssBaseline />
+			{children}
+		</MuiThemeProvider>
+	);
+};