jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Profile Role page changes

Browse source
This commit is contained in:
jaanvi 2025-03-06 18:41:53 +05:30
parent f74ee5b25a
commit e0cb35e783
11 changed files with 808 additions and 862 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/Header/index.tsx
View file

@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store"; import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice"; import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import OptionsMenu from "../OptionsMenu"; import OptionsMenu from "../OptionsMenu";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
export default function Header() { export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false); const [showNotifications, setShowNotifications] = React.useState(false);
@ -34,16 +35,16 @@ export default function Header() {
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
height: "84px", // height: "84px",
backgroundColor: "#1C1C1C", // backgroundColor: "#1C1C1C",
//padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" }, flexDirection: { xs: "column", sm: "row" },
// padding:"0px"
}} }}
> >
<Box sx={{ flexGrow: 1 }} />
<Stack <Stack
direction="row" direction="row"
spacing={3} spacing={3}
@ -58,7 +59,7 @@ export default function Header() {
{/* Search Bar */} {/* Search Bar */}
<Box <Box
sx={{ sx={{
width: { xs: "100%", sm: "360px" }, // width: { xs: "100%", sm: "360px" },
height: "44px", height: "44px",
borderRadius: "8px", borderRadius: "8px",
@ -88,30 +89,20 @@ export default function Header() {
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}} }}
> >
{/* Custom Bell Icon */}
<MenuButton <NotificationsNoneIcon onClick={toggleNotifications} />
showBadge <Avatar
aria-label="Open notifications" alt="User Avatar"
onClick={toggleNotifications} src="/avatar.png"
> sx={{ width: 36, height: 36 }}
<NotificationsRoundedIcon /> />
</MenuButton> <Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Admin"}
</Typography>
<Divider flexItem sx={{ backgroundColor: "#202020" }} /> <OptionsMenu />
<Stack direction="row" spacing={1.5} alignItems="center">
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Admin"}
</Typography>
<OptionsMenu />
</Stack>
{/* <ColorModeIconDropdown /> */}
</Stack> </Stack>
{showNotifications && ( {showNotifications && (
<Box <Box
sx={{ sx={{

2
src/components/MainGrid/index.tsx
View file

@ -48,7 +48,7 @@ export default function MainGrid() {
spacing={2} spacing={2}
columns={12} columns={12}
sx={{ mb: (theme) => theme.spacing(2) }} // sx={{ mb: (theme) => theme.spacing(2) }}
> >
{data.map((card, index) => ( {data.map((card, index) => (
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}> <Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>

98
src/components/OptionsMenu/index.tsx
View file

@ -1,22 +1,15 @@
import * as React from "react"; import * as React from "react";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import Divider, { dividerClasses } from "@mui/material/Divider";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
import MuiMenuItem from "@mui/material/MenuItem"; import MuiMenuItem from "@mui/material/MenuItem";
import { paperClasses } from "@mui/material/Paper"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { listClasses } from "@mui/material/List"; import Link from "@mui/material/Link";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
import Logout from "../LogOutFunction/LogOutFunction"; import Logout from "../LogOutFunction/LogOutFunction";
import { ArrowDropDownIcon } from "@mui/x-date-pickers"; import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 0",
borderBottom: "none",
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
@ -29,74 +22,44 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/panel/profile");
};
//jaanvi
//date:- 13-Feb-2025
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <ExpandMoreIcon onClick={handleClick} />
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{/* {avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Super Admin"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)} */}
<ArrowDropDownIcon />
</MenuButton>
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
id="menu" id="top-menu"
open={open} open={open}
onClose={handleClose} onClose={handleClose}
onClick={handleClose} onClick={handleClose}
slotProps={{
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items
},
},
},
}}
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
backgroundColor:"#202020"
}}
> >
<MenuItem onClick={handleProfile} > <Link
Profile href={"/panel/profile"}
</MenuItem> underline="none"
{/* <MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem> */}
{/* <Divider /> */}
<MenuItem
onClick={handleClose}
sx={{ sx={{
[`& .${listItemIconClasses.root}`]: { "&::before": {
ml: "auto", display: "none",
minWidth: 0,
}, },
}} }}
> >
<MenuItem onClick={handleClose}>Profile</MenuItem>
</Link>
<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -106,14 +69,11 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
> >
Logout Logout
</ListItemText> </ListItemText>
<Logout <Logout
setLogoutModal={setLogoutModal} setLogoutModal={setLogoutModal}
logoutModal={logoutModal} logoutModal={logoutModal}
/> />
{/* <ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon> */}
</MenuItem> </MenuItem>
</Menu> </Menu>
</React.Fragment> </React.Fragment>

21
src/layouts/DashboardLayout/index.tsx
View file

@ -16,7 +16,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
height: "100vh", height: "auto",
flexDirection: { xs: "column", md: "row" }, flexDirection: { xs: "column", md: "row" },
width: "100%", width: "100%",
margin: 0, margin: 0,
@ -50,23 +50,12 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
...customStyles, ...customStyles,
mt: { xs: 8, md: 0 }, mt: { xs: 8, md: 0 },
padding: 0, padding: 0,
})} })}
> >
<Stack
spacing={2}
sx={{
display: "flex",
flex: 1,
justifyItems: "center",
alignItems: "center",
mx: 0,
pb: 5,
mt: { xs: 3, md: 0 },
}}
>
<Header />
</Stack>
<Stack <Stack
spacing={2} spacing={2}
sx={{ sx={{
@ -79,7 +68,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
mt: { xs: 3, md: 0 }, mt: { xs: 3, md: 0 },
}} }}
> >
<Header />
<Outlet /> <Outlet />
</Stack> </Stack>
</Box> </Box>

26
src/pages/AddEditRolePage/index.tsx
View file

@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#1976D2", backgroundColor: "#52ACDF",
color: "#fff", color: "#fffff",
p: 2, p: 2,
borderRadius: "8px", borderRadius: "8px",
mb: 2, mb: 2,
@ -147,18 +147,14 @@ const AddEditRolePage: React.FC = () => {
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600}>
Role Permissions Role Permissions
</Typography> </Typography>
<Button <Button variant="contained" onClick={handleBack}>
variant="contained"
color="secondary"
onClick={handleBack}
>
Back Back
</Button> </Button>
</Box> </Box>
{/* Role Name Input */} {/* Role Name Input */}
<Box sx={{ mb: 2}}> <Box sx={{ mb: 2 }}>
<label >Role Name</label> <label>Role Name</label>
<TextField <TextField
placeholder="Enter role name" placeholder="Enter role name"
value={roleName} value={roleName}
@ -166,20 +162,22 @@ const AddEditRolePage: React.FC = () => {
fullWidth fullWidth
required required
variant="outlined" variant="outlined"
sx={{ mb: 2, mt: 2 }}
sx={{ mb: 2 ,mt:2}}
/> />
</Box> </Box>
{/* Table Container */} {/* Table Container */}
<TableContainer <TableContainer
component={Paper} component={Paper}
sx={{ borderRadius: "8px", overflow: "hidden" }} sx={{
borderRadius: "8px",
overflow: "hidden",
}}
> >
<Table> <Table>
{/* Table Head */} {/* Table Head */}
<TableHead> <TableHead>
<TableRow sx={{ backgroundColor: "#f5f5f5" }}> <TableRow sx={{ backgroundColor: "#1C1C1C" }}>
<TableCell <TableCell
sx={{ fontWeight: "bold", width: "30%" }} sx={{ fontWeight: "bold", width: "30%" }}
> >
@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => {
key={index} key={index}
sx={{ sx={{
"&:nth-of-type(odd)": { "&:nth-of-type(odd)": {
backgroundColor: "#FAFAFA", backgroundColor: "#1C1C1C",
}, },
}} }}
> >

1
src/pages/Auth/Login/index.tsx
View file

@ -54,7 +54,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
} }
} catch (error: any) { } catch (error: any) {
console.log("Login failed:", error); console.log("Login failed:", error);
toast.error("Login failed: " + error);
} }
}; };

54
src/pages/ProfilePage/index.tsx
View file

@ -46,7 +46,12 @@ const ProfilePage = () => {
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom>
Account Info Account Info
</Typography> </Typography>
<Card sx={{ maxWidth: "100%", margin: "0 auto" }}> <Card
sx={{
maxWidth: "100%",
margin: "0 auto",
}}
>
<CardContent> <CardContent>
<Stack direction="column" spacing={2}> <Stack direction="column" spacing={2}>
<Stack <Stack
@ -62,14 +67,11 @@ const ProfilePage = () => {
<Box> <Box>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#202020" }} sx={{ color: "#FFFFFF" }}
> >
{user?.name || "No Admin"} {user?.name || "No Admin"}
</Typography> </Typography>
<Typography <Typography variant="body2" color="#D9D8D8">
variant="body2"
color="text.secondary"
>
{user?.userType || "N/A"} {user?.userType || "N/A"}
</Typography> </Typography>
</Box> </Box>
@ -86,65 +88,61 @@ const ProfilePage = () => {
> >
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#202020" }} sx={{ color: "#FFFFFF" }}
> >
Personal Information Personal Information
</Typography> </Typography>
<Link href="/edit-profile" underline="hover"> <Link
variant="body1"
href="/edit-profile"
color="#52ACDF"
>
Edit Edit
</Link> </Link>
</Stack> </Stack>
<Grid container > <Grid container>
<Grid item xs={12} sm={4}> <Grid item xs={12} sm={4}>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#202020" }} sx={{ color: "#FFFFFF" }}
> >
Name: Full Name:
</Typography> </Typography>
<Typography <Typography variant="body2" color="#D9D8D8">
variant="body2"
color="text.secondary"
>
{user?.name || "N/A"} {user?.name || "N/A"}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sm={4}> <Grid item xs={12} sm={4}>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#202020" }} sx={{ color: "#FFFFFF" }}
> >
Phone: Phone:
</Typography> </Typography>
<Typography <Typography variant="body2" color="#D9D8D8">
variant="body2"
color="text.secondary"
>
{user?.phone || "N/A"} {user?.phone || "N/A"}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sm={4}> <Grid item xs={12} sm={4}>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#202020" }} sx={{ color: "#FFFFFF" }}
> >
Email: Email:
</Typography> </Typography>
<Typography <Typography variant="body2" color="#D9D8D8">
variant="body2"
color="text.secondary"
>
{user?.email || "N/A"} {user?.email || "N/A"}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
<Typography variant="body1" sx={{ color: "#202020" }}>
Bio: Bio:
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="#D9D8D8">
{user?.bio || "No bio available."} {user?.bio || "No bio available."}
</Typography> </Typography>
</Stack> </Stack>

2
src/shared-theme/AppTheme.tsx
View file

@ -32,7 +32,7 @@ export default function AppTheme(props: AppThemeProps) {
palette: { palette: {
mode: "dark", // Enforcing dark mode across the app mode: "dark", // Enforcing dark mode across the app
background: { background: {
default: "#121212", // Dark background color default: "#111111", // Dark background color
paper: "#1e1e1e", // Darker background for cards, containers, etc. paper: "#1e1e1e", // Darker background for cards, containers, etc.
}, },
text: { text: {

2
src/shared-theme/customizations/surfaces.js
View file

@ -67,7 +67,7 @@ export const surfacesCustomizations = {
border: `1px solid ${(theme.vars || theme).palette.divider}`, border: `1px solid ${(theme.vars || theme).palette.divider}`,
boxShadow: 'none', boxShadow: 'none',
...theme.applyStyles('dark', { ...theme.applyStyles('dark', {
backgroundColor: gray[800], backgroundColor:"#1C1C1C",
}), }),
variants: [ variants: [
{ {

690
src/shared-theme/themePrimitives.js
View file

@ -1,380 +1,384 @@
import { createTheme, alpha } from '@mui/material/styles'; import { createTheme, alpha } from "@mui/material/styles";
const defaultTheme = createTheme(); const defaultTheme = createTheme();
const customShadows = [...defaultTheme.shadows]; const customShadows = [...defaultTheme.shadows];
export const brand = { export const brand = {
50: 'hsl(210, 100%, 95%)', 50: "hsl(210, 100%, 95%)",
100: 'hsl(210, 100%, 92%)', 100: "hsl(210, 100%, 92%)",
200: 'hsl(210, 100%, 80%)', 200: "hsl(210, 100%, 80%)",
300: 'hsl(210, 100%, 65%)', 300: "hsl(210, 100%, 65%)",
400: 'hsl(210, 98%, 48%)', 400: "hsl(210, 98%, 48%)",
500: 'hsl(210, 98%, 42%)', 500: "hsl(210, 98%, 42%)",
600: 'hsl(210, 98%, 55%)', 600: "hsl(210, 98%, 55%)",
700: 'hsl(210, 100%, 35%)', 700: "hsl(210, 100%, 35%)",
800: 'hsl(210, 100%, 16%)', 800: "hsl(210, 100%, 16%)",
900: 'hsl(210, 100%, 21%)', 900: "hsl(210, 100%, 21%)",
}; };
export const gray = { export const gray = {
50: 'hsl(220, 35%, 97%)', 50: "hsl(220, 35%, 97%)",
100: 'hsl(220, 30%, 94%)', 100: "hsl(220, 30%, 94%)",
200: 'hsl(220, 20%, 88%)', 200: "hsl(220, 20%, 88%)",
300: 'hsl(220, 20%, 80%)', 300: "hsl(220, 20%, 80%)",
400: 'hsl(220, 20%, 65%)', 400: "hsl(220, 20%, 65%)",
500: 'hsl(220, 20%, 42%)', 500: "hsl(220, 20%, 42%)",
600: 'hsl(220, 20%, 35%)', 600: "hsl(220, 20%, 35%)",
700: 'hsl(220, 20%, 25%)', 700: "hsl(220, 20%, 25%)",
800: 'hsl(220, 30%, 6%)', 800: "hsl(220, 30%, 6%)",
900: 'hsl(220, 35%, 3%)', 900: "hsl(220, 35%, 3%)",
}; };
export const green = { export const green = {
50: 'hsl(120, 80%, 98%)', 50: "hsl(120, 80%, 98%)",
100: 'hsl(120, 75%, 94%)', 100: "hsl(120, 75%, 94%)",
200: 'hsl(120, 75%, 87%)', 200: "hsl(120, 75%, 87%)",
300: 'hsl(120, 61%, 77%)', 300: "hsl(120, 61%, 77%)",
400: 'hsl(120, 44%, 53%)', 400: "hsl(120, 44%, 53%)",
500: 'hsl(120, 59%, 30%)', 500: "hsl(120, 59%, 30%)",
600: 'hsl(120, 70%, 25%)', 600: "hsl(120, 70%, 25%)",
700: 'hsl(120, 75%, 16%)', 700: "hsl(120, 75%, 16%)",
800: 'hsl(120, 84%, 10%)', 800: "hsl(120, 84%, 10%)",
900: 'hsl(120, 87%, 6%)', 900: "hsl(120, 87%, 6%)",
}; };
export const orange = { export const orange = {
50: 'hsl(45, 100%, 97%)', 50: "hsl(45, 100%, 97%)",
100: 'hsl(45, 92%, 90%)', 100: "hsl(45, 92%, 90%)",
200: 'hsl(45, 94%, 80%)', 200: "hsl(45, 94%, 80%)",
300: 'hsl(45, 90%, 65%)', 300: "hsl(45, 90%, 65%)",
400: 'hsl(45, 90%, 40%)', 400: "hsl(45, 90%, 40%)",
500: 'hsl(45, 90%, 35%)', 500: "hsl(45, 90%, 35%)",
600: 'hsl(45, 91%, 25%)', 600: "hsl(45, 91%, 25%)",
700: 'hsl(45, 94%, 20%)', 700: "hsl(45, 94%, 20%)",
800: 'hsl(45, 95%, 16%)', 800: "hsl(45, 95%, 16%)",
900: 'hsl(45, 93%, 12%)', 900: "hsl(45, 93%, 12%)",
}; };
export const red = { export const red = {
50: 'hsl(0, 100%, 97%)', 50: "hsl(0, 100%, 97%)",
100: 'hsl(0, 92%, 90%)', 100: "hsl(0, 92%, 90%)",
200: 'hsl(0, 94%, 80%)', 200: "hsl(0, 94%, 80%)",
300: 'hsl(0, 90%, 65%)', 300: "hsl(0, 90%, 65%)",
400: 'hsl(0, 90%, 40%)', 400: "hsl(0, 90%, 40%)",
500: 'hsl(0, 90%, 30%)', 500: "hsl(0, 90%, 30%)",
600: 'hsl(0, 91%, 25%)', 600: "hsl(0, 91%, 25%)",
700: 'hsl(0, 94%, 18%)', 700: "hsl(0, 94%, 18%)",
800: 'hsl(0, 95%, 12%)', 800: "hsl(0, 95%, 12%)",
900: 'hsl(0, 93%, 6%)', 900: "hsl(0, 93%, 6%)",
}; };
export const getDesignTokens = (mode) => { export const getDesignTokens = (mode) => {
customShadows[1] = customShadows[1] =
mode === 'dark' mode === "dark"
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return { return {
palette: { palette: {
mode, mode,
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}), }),
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}), }),
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}), }),
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}), }),
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}), }),
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), divider:
background: { mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
default: 'hsl(0, 0%, 99%)', background: {
paper: 'hsl(220, 35%, 97%)', default: "hsl(0, 0%, 99%)",
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), paper: "hsl(220, 35%, 97%)",
}, ...(mode === "dark" && {
text: { default: gray[900],
primary: gray[800], paper: "hsl(220, 30%, 7%)",
secondary: gray[600], }),
warning: orange[400], },
...(mode === 'dark' && { text: {
primary: 'hsl(0, 0%, 100%)', primary: gray[800],
secondary: gray[400], secondary: gray[600],
}), warning: orange[400],
}, ...(mode === "dark" && {
action: { primary: "hsl(0, 0%, 100%)",
hover: alpha(gray[200], 0.2), secondary: gray[400],
selected: `${alpha(gray[200], 0.3)}`, }),
...(mode === 'dark' && { },
hover: alpha(gray[600], 0.2), action: {
selected: alpha(gray[600], 0.3), hover: alpha(gray[200], 0.2),
}), selected: `${alpha(gray[200], 0.3)}`,
}, ...(mode === "dark" && {
}, hover: alpha(gray[600], 0.2),
typography: { selected: alpha(gray[600], 0.3),
fontFamily: 'Inter, sans-serif', }),
h1: { },
fontSize: defaultTheme.typography.pxToRem(48), },
fontWeight: 600, typography: {
lineHeight: 1.2, fontFamily: "Gilory",
letterSpacing: -0.5, h1: {
}, fontSize: defaultTheme.typography.pxToRem(48),
h2: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(36), lineHeight: 1.2,
fontWeight: 600, letterSpacing: -0.5,
lineHeight: 1.2, },
}, h2: {
h3: { fontSize: defaultTheme.typography.pxToRem(36),
fontSize: defaultTheme.typography.pxToRem(30), fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h3: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(30),
fontWeight: 600, lineHeight: 1.2,
lineHeight: 1.5, },
}, h4: {
h5: { fontSize: defaultTheme.typography.pxToRem(24),
fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600,
fontWeight: 600, lineHeight: 1.5,
}, },
h6: { h5: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, fontWeight: 600,
subtitle2: { },
fontSize: defaultTheme.typography.pxToRem(14), subtitle1: {
fontWeight: 500, fontSize: defaultTheme.typography.pxToRem(18),
}, },
body1: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, fontWeight: 500,
body2: { },
fontSize: defaultTheme.typography.pxToRem(14), body1: {
fontWeight: 400, fontSize: defaultTheme.typography.pxToRem(14),
}, },
caption: { body2: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
}, caption: {
shape: { fontSize: defaultTheme.typography.pxToRem(12),
borderRadius: 8, fontWeight: 400,
}, },
shadows: customShadows, },
}; shape: {
borderRadius: 8,
},
shadows: customShadows,
};
}; };
export const colorSchemes = { export const colorSchemes = {
light: { light: {
palette: { palette: {
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[300], 0.4), divider: alpha(gray[300], 0.4),
background: { background: {
default: 'hsl(0, 0%, 99%)', default: "hsl(0, 0%, 99%)",
paper: 'hsl(220, 35%, 97%)', paper: "hsl(220, 35%, 97%)",
}, },
text: { text: {
primary: gray[800], primary: gray[800],
secondary: gray[600], secondary: gray[600],
warning: orange[400], warning: orange[400],
}, },
action: { action: {
hover: alpha(gray[200], 0.2), hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`, selected: `${alpha(gray[200], 0.3)}`,
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
}, },
}, },
dark: { dark: {
palette: { palette: {
primary: { primary: {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}, },
info: { info: {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}, },
warning: { warning: {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}, },
error: { error: {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}, },
success: { success: {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[700], 0.6), divider: alpha(gray[700], 0.6),
background: { background: {
default: gray[900], default: gray[900],
paper: 'hsl(220, 30%, 7%)', paper: "hsl(220, 30%, 7%)",
}, },
text: { text: {
primary: 'hsl(0, 0%, 100%)', primary: "hsl(0, 0%, 100%)",
secondary: gray[400], secondary: gray[400],
}, },
action: { action: {
hover: alpha(gray[600], 0.2), hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3), selected: alpha(gray[600], 0.3),
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
}, },
}, },
}; };
export const typography = { export const typography = {
fontFamily: 'Inter, sans-serif', fontFamily: "Gilory",
h1: { h1: {
fontSize: defaultTheme.typography.pxToRem(48), fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
h2: { h2: {
fontSize: defaultTheme.typography.pxToRem(36), fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h3: { h3: {
fontSize: defaultTheme.typography.pxToRem(30), fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h4: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5, lineHeight: 1.5,
}, },
h5: { h5: {
fontSize: defaultTheme.typography.pxToRem(20), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
h6: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, },
subtitle2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500, fontWeight: 500,
}, },
body1: { body1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, },
body2: { body2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
caption: { caption: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400, fontWeight: 400,
}, },
}; };
export const shape = { export const shape = {
borderRadius: 8, borderRadius: 8,
}; };
const defaultShadows = [ const defaultShadows = [
'none', "none",
'var(--template-palette-baseShadow)', "var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2), ...defaultTheme.shadows.slice(2),
]; ];
export const shadows = defaultShadows; export const shadows = defaultShadows;

729
src/shared-theme/themePrimitives.ts
View file

@ -1,29 +1,29 @@
import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles";
declare module '@mui/material/Paper' { declare module "@mui/material/Paper" {
interface PaperPropsVariantOverrides { interface PaperPropsVariantOverrides {
highlighted: true; highlighted: true;
} }
} }
declare module '@mui/material/styles/createPalette' { declare module "@mui/material/styles/createPalette" {
interface ColorRange { interface ColorRange {
50: string; 50: string;
100: string; 100: string;
200: string; 200: string;
300: string; 300: string;
400: string; 400: string;
500: string; 500: string;
600: string; 600: string;
700: string; 700: string;
800: string; 800: string;
900: string; 900: string;
} }
interface PaletteColor extends ColorRange {} interface PaletteColor extends ColorRange {}
interface Palette { interface Palette {
baseShadow: string; baseShadow: string;
} }
} }
const defaultTheme = createTheme(); const defaultTheme = createTheme();
@ -31,373 +31,380 @@ const defaultTheme = createTheme();
const customShadows: Shadows = [...defaultTheme.shadows]; const customShadows: Shadows = [...defaultTheme.shadows];
export const brand = { export const brand = {
50: 'hsl(210, 100%, 95%)', 50: "hsl(210, 100%, 95%)",
100: 'hsl(210, 100%, 92%)', 100: "hsl(210, 100%, 92%)",
200: 'hsl(210, 100%, 80%)', 200: "hsl(210, 100%, 80%)",
300: 'hsl(210, 100%, 65%)', 300: "hsl(210, 100%, 65%)",
400: 'hsl(210, 98%, 48%)', 400: "hsl(210, 98%, 48%)",
500: 'hsl(210, 98%, 42%)', 500: "hsl(210, 98%, 42%)",
600: 'hsl(210, 98%, 55%)', 600: "hsl(210, 98%, 55%)",
700: 'hsl(210, 100%, 35%)', 700: "hsl(210, 100%, 35%)",
800: 'hsl(210, 100%, 16%)', 800: "hsl(210, 100%, 16%)",
900: 'hsl(210, 100%, 21%)', 900: "hsl(210, 100%, 21%)",
}; };
export const gray = { export const gray = {
50: 'hsl(220, 35%, 97%)', 50: "hsl(220, 35%, 97%)",
100: 'hsl(220, 30%, 94%)', 100: "hsl(220, 30%, 94%)",
200: 'hsl(220, 20%, 88%)', 200: "hsl(220, 20%, 88%)",
300: 'hsl(220, 20%, 80%)', 300: "hsl(220, 20%, 80%)",
400: 'hsl(220, 20%, 65%)', 400: "hsl(220, 20%, 65%)",
500: 'hsl(220, 20%, 42%)', 500: "hsl(220, 20%, 42%)",
600: 'hsl(220, 20%, 35%)', 600: "hsl(220, 20%, 35%)",
700: 'hsl(220, 20%, 25%)', 700: "hsl(220, 20%, 25%)",
800: 'hsl(220, 30%, 6%)', 800: "hsl(220, 30%, 6%)",
900: 'hsl(220, 35%, 3%)', 900: "hsl(220, 35%, 3%)",
}; };
export const green = { export const green = {
50: 'hsl(120, 80%, 98%)', 50: "hsl(120, 80%, 98%)",
100: 'hsl(120, 75%, 94%)', 100: "hsl(120, 75%, 94%)",
200: 'hsl(120, 75%, 87%)', 200: "hsl(120, 75%, 87%)",
300: 'hsl(120, 61%, 77%)', 300: "hsl(120, 61%, 77%)",
400: 'hsl(120, 44%, 53%)', 400: "hsl(120, 44%, 53%)",
500: 'hsl(120, 59%, 30%)', 500: "hsl(120, 59%, 30%)",
600: 'hsl(120, 70%, 25%)', 600: "hsl(120, 70%, 25%)",
700: 'hsl(120, 75%, 16%)', 700: "hsl(120, 75%, 16%)",
800: 'hsl(120, 84%, 10%)', 800: "hsl(120, 84%, 10%)",
900: 'hsl(120, 87%, 6%)', 900: "hsl(120, 87%, 6%)",
}; };
export const orange = { export const orange = {
50: 'hsl(45, 100%, 97%)', 50: "hsl(45, 100%, 97%)",
100: 'hsl(45, 92%, 90%)', 100: "hsl(45, 92%, 90%)",
200: 'hsl(45, 94%, 80%)', 200: "hsl(45, 94%, 80%)",
300: 'hsl(45, 90%, 65%)', 300: "hsl(45, 90%, 65%)",
400: 'hsl(45, 90%, 40%)', 400: "hsl(45, 90%, 40%)",
500: 'hsl(45, 90%, 35%)', 500: "hsl(45, 90%, 35%)",
600: 'hsl(45, 91%, 25%)', 600: "hsl(45, 91%, 25%)",
700: 'hsl(45, 94%, 20%)', 700: "hsl(45, 94%, 20%)",
800: 'hsl(45, 95%, 16%)', 800: "hsl(45, 95%, 16%)",
900: 'hsl(45, 93%, 12%)', 900: "hsl(45, 93%, 12%)",
}; };
export const red = { export const red = {
50: 'hsl(0, 100%, 97%)', 50: "hsl(0, 100%, 97%)",
100: 'hsl(0, 92%, 90%)', 100: "hsl(0, 92%, 90%)",
200: 'hsl(0, 94%, 80%)', 200: "hsl(0, 94%, 80%)",
300: 'hsl(0, 90%, 65%)', 300: "hsl(0, 90%, 65%)",
400: 'hsl(0, 90%, 40%)', 400: "hsl(0, 90%, 40%)",
500: 'hsl(0, 90%, 30%)', 500: "hsl(0, 90%, 30%)",
600: 'hsl(0, 91%, 25%)', 600: "hsl(0, 91%, 25%)",
700: 'hsl(0, 94%, 18%)', 700: "hsl(0, 94%, 18%)",
800: 'hsl(0, 95%, 12%)', 800: "hsl(0, 95%, 12%)",
900: 'hsl(0, 93%, 6%)', 900: "hsl(0, 93%, 6%)",
}; };
export const getDesignTokens = (mode: PaletteMode) => { export const getDesignTokens = (mode: PaletteMode) => {
customShadows[1] = customShadows[1] =
mode === 'dark' mode === "dark"
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return { return {
palette: { palette: {
mode, mode,
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}), }),
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}), }),
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}), }),
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}), }),
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}), }),
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), divider:
background: { mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
default: 'hsl(0, 0%, 99%)', background: {
paper: 'hsl(220, 35%, 97%)', default: "hsl(0, 0%, 99%)",
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), paper: "hsl(220, 35%, 97%)",
}, ...(mode === "dark" && {
text: { default: gray[900],
primary: gray[800], paper: "hsl(220, 30%, 7%)",
secondary: gray[600], }),
warning: orange[400], },
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), text: {
}, primary: gray[800],
action: { secondary: gray[600],
hover: alpha(gray[200], 0.2), warning: orange[400],
selected: `${alpha(gray[200], 0.3)}`, ...(mode === "dark" && {
...(mode === 'dark' && { primary: "hsl(0, 0%, 100%)",
hover: alpha(gray[600], 0.2), secondary: gray[400],
selected: alpha(gray[600], 0.3), }),
}), },
}, action: {
}, hover: alpha(gray[200], 0.2),
typography: { selected: `${alpha(gray[200], 0.3)}`,
fontFamily: 'Inter, sans-serif', ...(mode === "dark" && {
h1: { hover: alpha(gray[600], 0.2),
fontSize: defaultTheme.typography.pxToRem(48), selected: alpha(gray[600], 0.3),
fontWeight: 600, }),
lineHeight: 1.2, },
letterSpacing: -0.5, },
}, typography: {
h2: { fontFamily: "Gilroy",
fontSize: defaultTheme.typography.pxToRem(36), h1: {
fontWeight: 600, fontSize: defaultTheme.typography.pxToRem(48),
lineHeight: 1.2, fontWeight: 600,
}, lineHeight: 1.2,
h3: { letterSpacing: -0.5,
fontSize: defaultTheme.typography.pxToRem(30), },
lineHeight: 1.2, h2: {
}, fontSize: defaultTheme.typography.pxToRem(36),
h4: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(24), lineHeight: 1.2,
fontWeight: 600, },
lineHeight: 1.5, h3: {
}, fontSize: defaultTheme.typography.pxToRem(30),
h5: { lineHeight: 1.2,
fontSize: defaultTheme.typography.pxToRem(20), },
fontWeight: 600, h4: {
}, fontSize: defaultTheme.typography.pxToRem(24),
h6: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(18), lineHeight: 1.5,
fontWeight: 600, },
}, h5: {
subtitle1: { fontSize: defaultTheme.typography.pxToRem(20),
fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600,
}, },
subtitle2: { h6: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 500, fontWeight: 600,
}, },
body1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(18),
}, },
body2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 500,
}, },
caption: { body1: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, },
}, body2: {
}, fontSize: defaultTheme.typography.pxToRem(14),
shape: { fontWeight: 400,
borderRadius: 8, },
}, caption: {
shadows: customShadows, fontSize: defaultTheme.typography.pxToRem(12),
}; fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
}; };
export const colorSchemes = { export const colorSchemes = {
light: { light: {
palette: { palette: {
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[300], 0.4), divider: alpha(gray[300], 0.4),
background: { background: {
default: 'hsl(0, 0%, 99%)', default: "hsl(0, 0%, 99%)",
paper: 'hsl(220, 35%, 97%)', paper: "hsl(220, 35%, 97%)",
}, },
text: { text: {
primary: gray[800], primary: gray[800],
secondary: gray[600], secondary: gray[600],
warning: orange[400], warning: orange[400],
}, },
action: { action: {
hover: alpha(gray[200], 0.2), hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`, selected: `${alpha(gray[200], 0.3)}`,
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
}, },
}, },
dark: { dark: {
palette: { palette: {
primary: { primary: {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}, },
info: { info: {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}, },
warning: { warning: {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}, },
error: { error: {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}, },
success: { success: {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[700], 0.6), divider: alpha(gray[700], 0.6),
background: { background: {
default: gray[900], default: gray[900],
paper: 'hsl(220, 30%, 7%)', paper: "hsl(220, 30%, 7%)",
}, },
text: { text: {
primary: 'hsl(0, 0%, 100%)', primary: "hsl(0, 0%, 100%)",
secondary: gray[400], secondary: gray[400],
}, },
action: { action: {
hover: alpha(gray[600], 0.2), hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3), selected: alpha(gray[600], 0.3),
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
}, },
}, },
}; };
export const typography = { export const typography = {
fontFamily: 'Inter, sans-serif', fontFamily: "Gilroy",
h1: { h1: {
fontSize: defaultTheme.typography.pxToRem(48), fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
h2: { h2: {
fontSize: defaultTheme.typography.pxToRem(36), fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h3: { h3: {
fontSize: defaultTheme.typography.pxToRem(30), fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h4: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5, lineHeight: 1.5,
}, },
h5: { h5: {
fontSize: defaultTheme.typography.pxToRem(20), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
h6: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, },
subtitle2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500, fontWeight: 500,
}, },
body1: { body1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, },
body2: { body2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
caption: { caption: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400, fontWeight: 400,
}, },
}; };
export const shape = { export const shape = {
borderRadius: 8, borderRadius: 8,
}; };
// @ts-ignore // @ts-ignore
const defaultShadows: Shadows = [ const defaultShadows: Shadows = [
'none', "none",
'var(--template-palette-baseShadow)', "var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2), ...defaultTheme.shadows.slice(2),
]; ];
export const shadows = defaultShadows; export const shadows = defaultShadows;