First Commit
This commit is contained in:
cesnimda
@@ -0,0 +1,16 @@
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
/*************************** DEFAULT THEME - SHADOWS ***************************/
|
||||
|
||||
export default function CustomShadows(palette) {
|
||||
const shadowColor = palette.text.primary;
|
||||
const primaryColor = palette.primary.main;
|
||||
|
||||
return {
|
||||
button: `0px 0.711px 1.422px 0px ${withAlpha(shadowColor, 0.05)}`,
|
||||
section: `0px 1px 2px 0px ${withAlpha(shadowColor, 0.07)}`,
|
||||
tooltip: `0px 12px 16px -4px ${withAlpha(shadowColor, 0.08)}, 0px 4px 6px -2px ${withAlpha(shadowColor, 0.03)}`,
|
||||
focus: `0px 0px 0px 3px ${withAlpha(primaryColor, 0.2)}`
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
|
||||
// @mui
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
|
||||
// @project
|
||||
import { CSS_VAR_PREFIX } from '@/config';
|
||||
import CustomShadows from './custom-shadows';
|
||||
import { buildPalette } from './palette';
|
||||
import componentsOverride from './overrides';
|
||||
import typography from './typography';
|
||||
|
||||
import useConfig from '@/hooks/useConfig';
|
||||
|
||||
/*************************** DEFAULT THEME - MAIN ***************************/
|
||||
|
||||
export default function ThemeCustomization({ children }) {
|
||||
const {
|
||||
state: { themeDirection }
|
||||
} = useConfig();
|
||||
|
||||
const palette = useMemo(() => buildPalette(), []);
|
||||
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 768,
|
||||
md: 1024,
|
||||
lg: 1266,
|
||||
xl: 1440
|
||||
}
|
||||
},
|
||||
direction: themeDirection,
|
||||
colorSchemes: {
|
||||
light: {
|
||||
palette: palette.light,
|
||||
customShadows: CustomShadows(palette.light)
|
||||
}
|
||||
},
|
||||
cssVariables: {
|
||||
cssVarPrefix: CSS_VAR_PREFIX,
|
||||
colorSchemeSelector: 'data-color-scheme'
|
||||
},
|
||||
typography: typography()
|
||||
});
|
||||
|
||||
theme.components = componentsOverride(theme);
|
||||
|
||||
return (
|
||||
<ThemeProvider disableTransitionOnChange theme={theme} defaultMode="light">
|
||||
<CssBaseline enableColorScheme />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
ThemeCustomization.propTypes = { children: PropTypes.any };
|
||||
@@ -0,0 +1,76 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
const TaskAltOutlinedIcon = (props) => (
|
||||
<SvgIcon {...props} fontSize="inherit">
|
||||
<path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
|
||||
</SvgIcon>
|
||||
);
|
||||
|
||||
/*************************** OVERRIDES - ALERT ***************************/
|
||||
|
||||
export default function Alert(theme) {
|
||||
const { vars } = theme;
|
||||
|
||||
const standardVariant = ({ ownerState }) => {
|
||||
if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
|
||||
const paletteColor = vars.palette[ownerState.severity];
|
||||
|
||||
return {
|
||||
color: vars.palette.text.secondary,
|
||||
backgroundColor: withAlpha(paletteColor.lighter, 0.25),
|
||||
'& .MuiAlert-icon': { color: paletteColor.main }
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const outlinedVariant = ({ ownerState }) => {
|
||||
if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
|
||||
const paletteColor = vars.palette[ownerState.severity];
|
||||
|
||||
return {
|
||||
color: vars.palette.text.secondary,
|
||||
'& .MuiAlert-icon': { color: paletteColor.main }
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const filledVariant = ({ ownerState }) => {
|
||||
if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
|
||||
const paletteColor = vars.palette[ownerState.severity];
|
||||
|
||||
return {
|
||||
color: vars.palette.common.white,
|
||||
backgroundColor: paletteColor.main,
|
||||
'& .MuiAlert-icon': {
|
||||
color: vars.palette.common.white
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
MuiAlert: {
|
||||
defaultProps: {
|
||||
iconMapping: {
|
||||
primary: <TaskAltOutlinedIcon />,
|
||||
secondary: <TaskAltOutlinedIcon />
|
||||
}
|
||||
},
|
||||
styleOverrides: {
|
||||
icon: {
|
||||
fontSize: 20
|
||||
},
|
||||
root: {
|
||||
variants: [
|
||||
{ props: { variant: 'standard' }, style: standardVariant },
|
||||
{ props: { variant: 'outlined' }, style: outlinedVariant },
|
||||
{ props: { variant: 'filled' }, style: filledVariant }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// @project
|
||||
import { AvatarSize } from '@/enum';
|
||||
|
||||
// @assets
|
||||
import { IconUser } from '@tabler/icons-react';
|
||||
|
||||
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
||||
|
||||
/*************************** AVATAR - SIZE ***************************/
|
||||
|
||||
const badgeSX = { border: '2px solid', borderRadius: '50%' };
|
||||
|
||||
const avatarSizes = (theme) => ({
|
||||
[AvatarSize.BADGE]: {
|
||||
fontSize: 10,
|
||||
lineHeight: 14,
|
||||
fontWeight: 400,
|
||||
width: 20,
|
||||
height: 20,
|
||||
'& ~ span.MuiBadge-dot': { ...badgeSX, borderWidth: 1 },
|
||||
'& svg': { width: 14, height: 14 }
|
||||
},
|
||||
[AvatarSize.XS]: {
|
||||
...theme.typography.caption,
|
||||
width: 32,
|
||||
height: 32,
|
||||
'& ~ span.MuiBadge-dot': { width: 10, height: 10, ...badgeSX },
|
||||
'& svg': { width: 16, height: 16 }
|
||||
},
|
||||
[AvatarSize.SM]: {
|
||||
...theme.typography.caption,
|
||||
width: 40,
|
||||
height: 40,
|
||||
'& ~ span.MuiBadge-dot': { width: 12, height: 12, ...badgeSX },
|
||||
'& svg': { width: 16, height: 16 }
|
||||
}
|
||||
});
|
||||
|
||||
/*************************** OVERRIDES - AVATAR ***************************/
|
||||
|
||||
export default function Avatar(theme) {
|
||||
const sizeVariants = (theme) => {
|
||||
const styles = avatarSizes(theme);
|
||||
|
||||
return Object.values(AvatarSize).map((size) => ({
|
||||
props: { size },
|
||||
style: styles[size]
|
||||
}));
|
||||
};
|
||||
|
||||
const colorVariants = colors.map((color) => {
|
||||
const paletteColor = theme.vars.palette[color];
|
||||
|
||||
return {
|
||||
props: { color },
|
||||
style: {
|
||||
color: paletteColor.main,
|
||||
backgroundColor: paletteColor.light
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
MuiAvatar: {
|
||||
defaultProps: {
|
||||
children: <IconUser />,
|
||||
color: 'primary',
|
||||
size: AvatarSize.SM
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
variants: [
|
||||
{
|
||||
props: { color: 'default' },
|
||||
style: {
|
||||
color: theme.vars.palette.primary.darker,
|
||||
backgroundColor: theme.vars.palette.primary.lighter
|
||||
}
|
||||
},
|
||||
...colorVariants,
|
||||
...sizeVariants(theme),
|
||||
{
|
||||
props: { variant: 'rounded' },
|
||||
style: {
|
||||
borderRadius: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*************************** OVERRIDES - AVATAR GROUP ***************************/
|
||||
|
||||
export default function AvatarGroup() {
|
||||
return {
|
||||
MuiAvatarGroup: {
|
||||
defaultProps: {
|
||||
slotProps: {
|
||||
additionalAvatar: {
|
||||
color: 'default'
|
||||
}
|
||||
}
|
||||
},
|
||||
styleOverrides: {
|
||||
avatar: { width: 32, height: 32 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
/*************************** OVERRIDES - BACKDROP ***************************/
|
||||
|
||||
export default function Backdrop(theme) {
|
||||
return {
|
||||
MuiBackdrop: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[900], 0.2)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*************************** OVERRIDES - BAR LABEL ***************************/
|
||||
|
||||
export default function BarLabel(theme) {
|
||||
return {
|
||||
MuiBarLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
fill: theme.vars.palette.text.secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/*************************** COMPONENT - BREADCRUMBS ***************************/
|
||||
|
||||
export default function Breadcrumbs(theme) {
|
||||
return {
|
||||
MuiBreadcrumbs: {
|
||||
styleOverrides: {
|
||||
separator: {
|
||||
color: theme.vars.palette.text.secondary,
|
||||
marginLeft: 4,
|
||||
marginRight: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
// @project
|
||||
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
||||
|
||||
// Define the list of colors that the Radio component will support
|
||||
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
||||
|
||||
/*************************** OVERRIDES - BUTTON ***************************/
|
||||
|
||||
export default function Button(theme) {
|
||||
const boxShadow = {
|
||||
boxShadow: theme.vars.customShadows.button,
|
||||
'&:hover': {
|
||||
boxShadow: theme.vars.customShadows.button
|
||||
}
|
||||
};
|
||||
|
||||
const outlinedColorVariants = colors.map((color) => {
|
||||
const paletteColor = theme.vars.palette[color];
|
||||
return {
|
||||
props: { variant: 'outlined', color },
|
||||
style: {
|
||||
...boxShadow,
|
||||
borderColor: paletteColor.lighter,
|
||||
...(color === 'secondary' && {
|
||||
borderColor: theme.vars.palette.divider,
|
||||
color: theme.vars.palette.text.primary
|
||||
})
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableFocusRipple: true
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
'&.Mui-disabled': {
|
||||
cursor: 'not-allowed',
|
||||
pointerEvents: 'auto',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
'&.MuiButton-contained': {
|
||||
backgroundColor: theme.vars.palette.action.disabledBackground
|
||||
}
|
||||
}
|
||||
},
|
||||
'&:focus-visible': {
|
||||
...generateFocusStyle(theme.vars.palette.primary.main)
|
||||
},
|
||||
variants: [
|
||||
...outlinedColorVariants,
|
||||
{
|
||||
props: { variant: 'text', color: 'secondary' },
|
||||
style: {
|
||||
color: theme.vars.palette.text.primary
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
contained: { ...boxShadow },
|
||||
startIcon: {
|
||||
marginLeft: 0,
|
||||
marginRight: 4
|
||||
},
|
||||
endIcon: {
|
||||
marginLeft: 4
|
||||
},
|
||||
sizeSmall: {
|
||||
height: 36,
|
||||
fontSize: 12,
|
||||
lineHeight: '16px',
|
||||
letterSpacing: 0,
|
||||
padding: 10
|
||||
},
|
||||
sizeMedium: {
|
||||
height: 42,
|
||||
fontSize: 14,
|
||||
lineHeight: '18px',
|
||||
letterSpacing: 0,
|
||||
padding: 12
|
||||
},
|
||||
sizeLarge: {
|
||||
height: 48,
|
||||
fontSize: 16,
|
||||
lineHeight: '20px',
|
||||
letterSpacing: 0,
|
||||
padding: '16px 18px'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*************************** OVERRIDES - CARD ACTIONS ***************************/
|
||||
|
||||
export default function CardActions(theme) {
|
||||
return {
|
||||
MuiCardActions: {
|
||||
styleOverrides: {
|
||||
root: { padding: 20, borderTop: `1px solid ${theme.vars.palette.divider}` }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/*************************** OVERRIDES - CARD CONTENT ***************************/
|
||||
|
||||
export default function CardContent() {
|
||||
return {
|
||||
MuiCardContent: {
|
||||
styleOverrides: { root: { padding: 20 } }
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*************************** OVERRIDES - CARD HEADER ***************************/
|
||||
|
||||
export default function CardHeader(theme) {
|
||||
return {
|
||||
MuiCardHeader: {
|
||||
styleOverrides: {
|
||||
root: { padding: 20, borderBottom: `1px solid ${theme.vars.palette.divider}` },
|
||||
action: { margin: 0 },
|
||||
content: {},
|
||||
title: { '& ~ span.MuiCardHeader-subheader': { marginTop: 4 } }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*************************** OVERRIDES - CHARTS AXIS ***************************/
|
||||
|
||||
export default function ChartsAxis(theme) {
|
||||
return {
|
||||
MuiChartsAxis: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiChartsAxis-tickLabel': {
|
||||
fill: theme.vars.palette.text.secondary
|
||||
},
|
||||
'& .MuiChartsAxis-line': {
|
||||
stroke: theme.vars.palette.divider
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/*************************** OVERRIDES - CHARTS AXIS HIGHLIGHT ***************************/
|
||||
|
||||
export default function ChartsAxiasHighlight(theme) {
|
||||
return {
|
||||
MuiChartsAxisHighlight: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
stroke: theme.vars.palette.grey[600]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*************************** OVERRIDES - CHARTS TOOLTIP ***************************/
|
||||
|
||||
export default function ChartsTooltip(theme) {
|
||||
return {
|
||||
MuiChartsTooltip: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiChartsTooltip-paper': {
|
||||
border: `1px solid ${theme.vars.palette.divider}`,
|
||||
borderRadius: 8,
|
||||
boxShadow: theme.vars.customShadows.section
|
||||
},
|
||||
'& .MuiChartsTooltip-row': {
|
||||
'&:first-of-type .MuiChartsTooltip-cell': { paddingTop: 14 },
|
||||
'&:last-of-type .MuiChartsTooltip-cell': { paddingBottom: 14 }
|
||||
},
|
||||
'& .MuiChartsTooltip-cell': { paddingTop: 6, paddingBottom: 6 },
|
||||
'& .MuiChartsTooltip-labelCell': { '& .MuiTypography-root': { color: theme.vars.palette.text.secondary } },
|
||||
'& .MuiChartsTooltip-valueCell': { '& .MuiTypography-root': { ...theme.typography.subtitle1 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
// @project
|
||||
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
||||
|
||||
// @assets
|
||||
import { IconX } from '@tabler/icons-react';
|
||||
|
||||
const validPaletteKeys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
|
||||
const isValidPaletteKey = (value) => validPaletteKeys.includes(value);
|
||||
|
||||
/*************************** OVERRIDES - CHIP ***************************/
|
||||
|
||||
export default function Chip(theme) {
|
||||
return {
|
||||
MuiChip: {
|
||||
defaultProps: {
|
||||
variant: 'light', // Default variant is 'light'
|
||||
deleteIcon: <IconX size={16} />
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
height: '100%',
|
||||
'&.Mui-focusVisible': {
|
||||
...generateFocusStyle(theme.vars.palette.primary.main)
|
||||
},
|
||||
variants: [
|
||||
{
|
||||
props: { variant: 'text' }, // Variant for text Chip
|
||||
style: ({ ownerState }) => {
|
||||
const paletteColor = isValidPaletteKey(ownerState.color) ? theme.vars.palette[ownerState.color] : undefined;
|
||||
return {
|
||||
backgroundColor: 'transparent', // Transparent background for text variant
|
||||
...(paletteColor && {
|
||||
color: paletteColor.main
|
||||
}),
|
||||
'& .MuiChip-label': {
|
||||
padding: 0
|
||||
},
|
||||
'& .MuiChip-icon': {
|
||||
marginRight: 2,
|
||||
marginLeft: 0
|
||||
},
|
||||
'& .MuiChip-avatar': {
|
||||
marginLeft: 0,
|
||||
marginRight: 4,
|
||||
...(paletteColor && {
|
||||
color: paletteColor.main,
|
||||
backgroundColor: paletteColor.light
|
||||
})
|
||||
},
|
||||
'&[position="right"]': {
|
||||
'& .MuiChip-icon': {
|
||||
marginLeft: 2, // Adjust margin when icon is on the right
|
||||
marginRight: 0
|
||||
},
|
||||
'& .MuiChip-avatar': {
|
||||
marginLeft: 4, // Adjust margin when avatar is on the right
|
||||
marginRight: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
avatar: {
|
||||
borderRadius: '50%', // Circular avatar
|
||||
padding: 2
|
||||
},
|
||||
icon: {
|
||||
fontSize: 10,
|
||||
lineHeight: 14,
|
||||
fontWeight: 400,
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: '50%', // Circular icon
|
||||
padding: 3
|
||||
},
|
||||
avatarSmall: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
padding: 1.5,
|
||||
...theme.typography.caption // Small avatar typography
|
||||
},
|
||||
labelSmall: theme.typography.caption1 // Small label typography
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
/*************************** OVERRIDES - FORM CONTROL LABEL ***************************/
|
||||
|
||||
export default function FormControlLabel(theme) {
|
||||
return {
|
||||
MuiFormControlLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-disabled': {
|
||||
cursor: 'not-allowed'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
'&.Mui-disabled': {
|
||||
color: withAlpha(theme.vars.palette.text.disabled, 0.8)
|
||||
}
|
||||
},
|
||||
labelPlacementStart: { marginRight: 0, '& .MuiSwitch-root': { marginLeft: 12 } },
|
||||
labelPlacementEnd: { '& .MuiSwitch-root': { marginRight: 12 } }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/*************************** OVERRIDES - FORM HELPER TEXT ***************************/
|
||||
|
||||
export default function FormHelperText(theme) {
|
||||
return {
|
||||
MuiFormHelperText: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
marginTop: 6,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
color: theme.vars.palette.grey[700],
|
||||
'&.Mui-error': {
|
||||
color: theme.vars.palette.error.main
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
||||
|
||||
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
||||
|
||||
/*************************** COMPONENT - ICON BUTTON ***************************/
|
||||
|
||||
export default function IconButton(theme) {
|
||||
const createColorVariant = (color, variant, styleFn, theme) => {
|
||||
const paletteColor = theme.vars.palette[color];
|
||||
return {
|
||||
props: { variant, color },
|
||||
style: styleFn(paletteColor)
|
||||
};
|
||||
};
|
||||
|
||||
const commonDisabledStyles = {
|
||||
'&.Mui-disabled': {
|
||||
backgroundColor: theme.vars.palette.action.disabledBackground
|
||||
},
|
||||
'&.Mui-disabled:not(.MuiIconButton-loading)': {
|
||||
color: theme.vars.palette.action.disabled
|
||||
}
|
||||
};
|
||||
|
||||
const colorTextVariants = colors.map((color) =>
|
||||
createColorVariant(
|
||||
color,
|
||||
undefined,
|
||||
(paletteColor) => ({
|
||||
color: paletteColor.main
|
||||
}),
|
||||
theme
|
||||
)
|
||||
);
|
||||
|
||||
const colorContainedVariants = colors.map((color) =>
|
||||
createColorVariant(
|
||||
color,
|
||||
'contained',
|
||||
(paletteColor) => ({
|
||||
color: paletteColor.contrastText,
|
||||
backgroundColor: paletteColor.main,
|
||||
'&:hover': {
|
||||
backgroundColor: paletteColor.dark
|
||||
},
|
||||
...commonDisabledStyles
|
||||
}),
|
||||
theme
|
||||
)
|
||||
);
|
||||
|
||||
const colorOutlinedVariants = colors.map((color) =>
|
||||
createColorVariant(
|
||||
color,
|
||||
'outlined',
|
||||
(paletteColor) => ({
|
||||
color: paletteColor.main,
|
||||
border: `1px solid ${paletteColor.lighter}`,
|
||||
...(color === 'secondary' && { color: theme.vars.palette.text.primary, borderColor: theme.vars.palette.divider }),
|
||||
'&.Mui-disabled': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[700], 0.04),
|
||||
borderColor: theme.vars.palette.action.disabledBackground
|
||||
},
|
||||
'&.Mui-disabled:not(.MuiIconButton-loading)': {
|
||||
color: theme.vars.palette.action.disabled
|
||||
}
|
||||
}),
|
||||
theme
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
MuiIconButton: {
|
||||
defaultProps: {
|
||||
disableFocusRipple: true,
|
||||
color: 'primary'
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
'& .MuiTouchRipple-root span': {
|
||||
borderRadius: 8
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
'&:focus-visible': {
|
||||
...generateFocusStyle(theme.vars.palette.primary.main)
|
||||
},
|
||||
variants: [...colorTextVariants, ...colorContainedVariants, ...colorOutlinedVariants]
|
||||
},
|
||||
sizeSmall: { width: 36, height: 36 },
|
||||
sizeMedium: { width: 42, height: 42 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*************************** COMPONENT - INPUT ADORNMENT ***************************/
|
||||
|
||||
export default function InputAdornment(theme) {
|
||||
return {
|
||||
MuiInputAdornment: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: theme.vars.palette.text.secondary,
|
||||
'& svg': { width: 16, height: 16, color: theme.vars.palette.text.secondary }
|
||||
},
|
||||
positionStart: { marginRight: 6 },
|
||||
positionEnd: { marginLeft: 6 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*************************** OVERRIDES - INPUT LABEL ***************************/
|
||||
|
||||
export default function InputLabel(theme) {
|
||||
return {
|
||||
MuiInputLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
...theme.typography.body2,
|
||||
color: theme.vars.palette.text.primary,
|
||||
marginBottom: 6,
|
||||
'&.Mui-error': {
|
||||
color: theme.vars.palette.error.main
|
||||
}
|
||||
},
|
||||
asterisk: {
|
||||
color: theme.vars.palette.error.main
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
const validPaletteKeys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
|
||||
const isValidPaletteKey = (value) => validPaletteKeys.includes(value);
|
||||
|
||||
/*************************** COMPONENT - LINEAR PROGRESS ***************************/
|
||||
|
||||
export default function LinearProgress(theme) {
|
||||
return {
|
||||
MuiLinearProgress: {
|
||||
defaultProps: {
|
||||
variant: 'determinate'
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ ownerState }) => {
|
||||
const paletteColor = isValidPaletteKey(ownerState.color) ? theme.vars.palette[ownerState.color] : undefined;
|
||||
return {
|
||||
'& .MuiLinearProgress-bar': {
|
||||
backgroundColor: paletteColor.main
|
||||
},
|
||||
borderRadius: 24,
|
||||
backgroundColor: theme.vars.palette.grey[100],
|
||||
variants: [
|
||||
{
|
||||
props: { type: 'light' },
|
||||
style: {
|
||||
'& .MuiLinearProgress-bar': {
|
||||
opacity: 0.6
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
bar: {
|
||||
borderRadius: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*************************** OVERRIDES - MENU ***************************/
|
||||
|
||||
export default function ListItemButton(theme) {
|
||||
return {
|
||||
MuiListItemButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: '10px 8px',
|
||||
borderRadius: 4,
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: theme.vars.palette.primary.lighter,
|
||||
'&:hover': { backgroundColor: theme.vars.palette.primary.light }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*************************** OVERRIDES - MENU ***************************/
|
||||
|
||||
export default function ListItemIcon() {
|
||||
return {
|
||||
MuiListItemIcon: {
|
||||
styleOverrides: {
|
||||
root: { minWidth: 26, color: 'inherit' }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*************************** OVERRIDES - LIST ITEM TEXT ***************************/
|
||||
|
||||
export default function ListItemText() {
|
||||
return {
|
||||
MuiListItemText: {
|
||||
defaultProps: {
|
||||
primaryTypographyProps: { variant: 'body2' }
|
||||
},
|
||||
styleOverrides: {
|
||||
root: { marginTop: 0, marginBottom: 0 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// @project
|
||||
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
||||
|
||||
/*************************** COMPONENT - OUTLINED INPUT ***************************/
|
||||
|
||||
export default function OutlinedInput(theme) {
|
||||
return {
|
||||
MuiOutlinedInput: {
|
||||
defaultProps: {
|
||||
size: 'small'
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
boxShadow: theme.vars.customShadows.button,
|
||||
background: theme.vars.palette.background.default,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
'&.MuiInputBase-colorPrimary': {
|
||||
'&:not(.Mui-error):not(.Mui-disabled):not(.Mui-focused):hover': {
|
||||
'& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.primary.main }
|
||||
},
|
||||
'&:not(.Mui-error).Mui-focused': {
|
||||
'& .MuiOutlinedInput-notchedOutline': { borderWidth: '1px', boxShadow: theme.vars.customShadows.focus }
|
||||
}
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
cursor: 'not-allowed',
|
||||
input: { cursor: 'not-allowed' },
|
||||
'& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.divider },
|
||||
'& .MuiInputAdornment-root': { color: theme.vars.palette.secondary.main, opacity: 0.6 }
|
||||
},
|
||||
'&.Mui-error': {
|
||||
'&.Mui-focused': {
|
||||
'& .MuiOutlinedInput-notchedOutline': { ...generateFocusStyle(theme.vars.palette.error.main), borderWidth: '1px' }
|
||||
}
|
||||
},
|
||||
variants: [
|
||||
{
|
||||
props: { size: 'small' },
|
||||
style: { ...theme.typography.body2, '& input': { paddingTop: 7.94, paddingBottom: 7.94 } }
|
||||
}
|
||||
]
|
||||
},
|
||||
notchedOutline: { borderColor: theme.vars.palette.divider },
|
||||
colorSecondary: {
|
||||
'&:not(.Mui-error):not(.Mui-disabled):not(.Mui-focused):hover': {
|
||||
'& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.grey[600] }
|
||||
},
|
||||
'&:not(.Mui-error).Mui-focused': {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid',
|
||||
borderColor: theme.vars.palette.grey[600],
|
||||
boxShadow: theme.vars.customShadows.focus
|
||||
}
|
||||
}
|
||||
},
|
||||
multiline: { padding: 10 },
|
||||
input: { paddingLeft: 0, paddingRight: 0 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*************************** OVERRIDES - POPPER ***************************/
|
||||
|
||||
export default function Popper() {
|
||||
return {
|
||||
MuiPopper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
zIndex: 1201
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
||||
|
||||
/*************************** SWITCH - SIZE ***************************/
|
||||
|
||||
function getSizeStyle(size) {
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return { width: 34, height: 20, base: 14, thumb: 16, trackRadius: 16 };
|
||||
default:
|
||||
return { width: 38, height: 22, base: 16, thumb: 18, trackRadius: 16 };
|
||||
}
|
||||
}
|
||||
|
||||
function switchStyle(size) {
|
||||
const sizes = getSizeStyle(size);
|
||||
|
||||
return {
|
||||
width: sizes.width,
|
||||
height: sizes.height,
|
||||
'& .MuiSwitch-switchBase': {
|
||||
padding: 2,
|
||||
'&.Mui-checked': {
|
||||
transform: `translateX(${sizes.base}px)`
|
||||
}
|
||||
},
|
||||
'& .MuiSwitch-thumb': {
|
||||
width: sizes.thumb,
|
||||
height: sizes.thumb
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
borderRadius: sizes.trackRadius
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*************************** OVERRIDES - SWITCH ***************************/
|
||||
|
||||
export default function Switch(theme) {
|
||||
const colorVariants = colors.map((color) => {
|
||||
const paletteColor = theme.vars.palette[color];
|
||||
|
||||
return {
|
||||
props: { color },
|
||||
style: {
|
||||
'& .MuiSwitch-switchBase': {
|
||||
'&.Mui-checked': {
|
||||
'& ~ .MuiSwitch-track': {
|
||||
backgroundColor: paletteColor.main
|
||||
}
|
||||
},
|
||||
'&:not(.Mui-checked) ~ .MuiSwitch-track': {
|
||||
backgroundColor: theme.vars.palette.secondary.lighter
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
MuiSwitch: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: theme.vars.palette.text.primary,
|
||||
padding: 0,
|
||||
display: 'flex',
|
||||
variants: [...colorVariants]
|
||||
},
|
||||
track: {
|
||||
opacity: 1,
|
||||
backgroundColor: theme.vars.palette.secondary.lighter,
|
||||
boxSizing: 'border-box'
|
||||
},
|
||||
thumb: {
|
||||
borderRadius: '50%',
|
||||
transition: theme.transitions.create(['width'], {
|
||||
duration: 200
|
||||
})
|
||||
},
|
||||
switchBase: {
|
||||
'&.Mui-checked': {
|
||||
color: theme.vars.palette.background.default,
|
||||
'& ~ .MuiSwitch-track': {
|
||||
opacity: 1
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
color: theme.vars.palette.background.paper,
|
||||
'~.MuiSwitch-track': {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
color: theme.vars.palette.background.paper,
|
||||
'~.MuiSwitch-track': {
|
||||
opacity: 0.3
|
||||
},
|
||||
cursor: 'not-allowed',
|
||||
pointerEvents: 'auto',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
sizeSmall: { ...switchStyle('small'), '& ~ .MuiFormControlLabel-label': theme.typography.body2 }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
/*************************** OVERRIDES - TAB ***************************/
|
||||
|
||||
export default function Tab(theme) {
|
||||
return {
|
||||
MuiTab: {
|
||||
defaultProps: {
|
||||
disableFocusRipple: true
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
...theme.typography.h6,
|
||||
fontWeight: 400,
|
||||
minWidth: 'auto',
|
||||
minHeight: 42,
|
||||
padding: '10px 16px',
|
||||
color: withAlpha(theme.vars.palette.text.secondary, 0.6),
|
||||
'&:hover': {
|
||||
color: theme.vars.palette.text.secondary
|
||||
},
|
||||
'&:focus-visible': {
|
||||
boxShadow: 'none',
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[500], 0.25)
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
color: withAlpha(theme.vars.palette.text.secondary, 0.3),
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'not-allowed',
|
||||
'&:hover': {
|
||||
color: withAlpha(theme.vars.palette.text.secondary, 0.3),
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
'& .MuiTouchRipple-root span': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.secondary.main, 0.3)
|
||||
}
|
||||
},
|
||||
textColorSecondary: {
|
||||
'&.Mui-selected': {
|
||||
color: theme.vars.palette.text.primary,
|
||||
'&:hover': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[200], 0.25)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// @project
|
||||
import { TabsType } from '@/enum';
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
const segmentedBorderRadius = 8;
|
||||
|
||||
/*************************** OVERRIDES - TABS ***************************/
|
||||
|
||||
export default function Tabs(theme) {
|
||||
return {
|
||||
MuiTabs: {
|
||||
defaultProps: {
|
||||
indicatorColor: 'secondary',
|
||||
textColor: 'secondary'
|
||||
},
|
||||
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minHeight: 42,
|
||||
variants: [
|
||||
{
|
||||
props: { type: TabsType.SEGMENTED, variant: 'fullWidth' },
|
||||
style: {
|
||||
width: '100%'
|
||||
}
|
||||
},
|
||||
{
|
||||
props: { type: TabsType.SEGMENTED },
|
||||
style: {
|
||||
display: 'inline-flex',
|
||||
borderRadius: segmentedBorderRadius,
|
||||
overflow: 'hidden',
|
||||
minHeight: 38,
|
||||
'& .MuiTabs-indicator': {
|
||||
display: 'none'
|
||||
},
|
||||
'& .MuiTab-root': {
|
||||
...theme.typography.body2,
|
||||
color: theme.vars.palette.text.secondary,
|
||||
textTransform: 'none',
|
||||
minHeight: 38,
|
||||
padding: '9px 12px',
|
||||
borderRadius: 0,
|
||||
border: `1px solid ${theme.vars.palette.grey[200]}`,
|
||||
'&:first-of-type': {
|
||||
borderTopLeftRadius: segmentedBorderRadius,
|
||||
borderBottomLeftRadius: segmentedBorderRadius
|
||||
},
|
||||
'&:last-of-type': {
|
||||
borderTopRightRadius: segmentedBorderRadius,
|
||||
borderBottomRightRadius: segmentedBorderRadius
|
||||
},
|
||||
'&:not(:first-of-type)': {
|
||||
borderLeft: 'none' // Prevent double border between tab
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: theme.vars.palette.grey[100],
|
||||
'&:hover': {
|
||||
backgroundColor: theme.vars.palette.grey[200]
|
||||
}
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[200], 0.25)
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
color: theme.vars.palette.action.disabled
|
||||
}
|
||||
},
|
||||
'& .Mui-focusVisible': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.grey[500], 0.25),
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: withAlpha(theme.vars.palette.secondary.light, 0.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
indicator: ({ ownerState }) => ({
|
||||
...(ownerState.indicatorColor === 'secondary' && {
|
||||
backgroundColor: theme.vars.palette.text.primary
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*************************** COMPONENT - TOOLTIP ***************************/
|
||||
|
||||
export default function Tooltip(theme) {
|
||||
return {
|
||||
MuiTooltip: {
|
||||
styleOverrides: {
|
||||
tooltip: {
|
||||
...theme.typography.caption,
|
||||
color: theme.vars.palette.secondary.darker,
|
||||
backgroundColor: theme.vars.palette.secondary.lighter,
|
||||
padding: 6,
|
||||
borderRadius: 8,
|
||||
boxShadow: theme.vars.customShadows.tooltip,
|
||||
'& svg': {
|
||||
opacity: 0.7
|
||||
}
|
||||
},
|
||||
arrow: {
|
||||
color: theme.vars.palette.secondary.lighter
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// @third-party
|
||||
import { merge } from 'lodash-es';
|
||||
|
||||
// @project
|
||||
import Alert from './Alert';
|
||||
import Avatar from './Avatar';
|
||||
import AvatarGroup from './AvatarGroup';
|
||||
import Backdrop from './Backdrop';
|
||||
import BarLabel from './BarLabel';
|
||||
import Breadcrumbs from './Breadcrumbs';
|
||||
import Button from './Button';
|
||||
import CardActions from './CardActions';
|
||||
import CardContent from './CardContent';
|
||||
import CardHeader from './CardHeader';
|
||||
import ChartsAxis from './ChartsAxis';
|
||||
import ChartsAxiasHighlight from './ChartsAxisHighlight';
|
||||
import ChartsTooltip from './ChartsTooltip';
|
||||
import Chip from './Chip';
|
||||
import FormControlLabel from './FormControlLabel';
|
||||
import FormHelperText from './FormHelperText';
|
||||
import IconButton from './IconButton';
|
||||
import InputAdornment from './InputAdornment';
|
||||
import InputLabel from './InputLabel';
|
||||
import LinearProgress from './LinearProgress';
|
||||
import ListItemButton from './ListItemButton';
|
||||
import ListItemIcon from './ListItemIcon';
|
||||
import ListItemText from './ListItemText';
|
||||
import OutlinedInput from './OutlinedInput';
|
||||
import Popper from './Popper';
|
||||
import Switch from './Switch';
|
||||
import Tab from './Tab';
|
||||
import Tabs from './Tabs';
|
||||
import Tooltip from './Tooltip';
|
||||
|
||||
/*************************** OVERRIDES - MAIN ***************************/
|
||||
|
||||
export default function ComponentsOverrides(theme) {
|
||||
return merge(
|
||||
Alert(theme),
|
||||
Avatar(theme),
|
||||
AvatarGroup(),
|
||||
Backdrop(theme),
|
||||
BarLabel(theme),
|
||||
Breadcrumbs(theme),
|
||||
Button(theme),
|
||||
CardActions(theme),
|
||||
CardContent(),
|
||||
CardHeader(theme),
|
||||
ChartsAxis(theme),
|
||||
ChartsAxiasHighlight(theme),
|
||||
ChartsTooltip(theme),
|
||||
Chip(theme),
|
||||
FormControlLabel(theme),
|
||||
FormHelperText(theme),
|
||||
IconButton(theme),
|
||||
InputAdornment(theme),
|
||||
InputLabel(theme),
|
||||
LinearProgress(theme),
|
||||
ListItemButton(theme),
|
||||
ListItemIcon(),
|
||||
ListItemText(),
|
||||
OutlinedInput(theme),
|
||||
Popper(),
|
||||
Switch(theme),
|
||||
Tab(theme),
|
||||
Tabs(theme),
|
||||
Tooltip(theme)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// @project
|
||||
import { extendPaletteWithChannels, withAlpha } from '@/utils/colorUtils';
|
||||
|
||||
/*************************** DEFAULT - PALETTE ***************************/
|
||||
|
||||
export function buildPalette() {
|
||||
const textPrimary = '#1B1B1F'; // Hosting/neutral/10 - on surface
|
||||
const textSecondary = '#46464F'; // Hosting/neutral variant/30 - on surface variant
|
||||
|
||||
const secondaryMain = '#5A5C78'; // Hosting/secondary/40 - secondary
|
||||
|
||||
const divider = '#EFEDF4'; // Hosting/neutral/94 - surface container
|
||||
const background = '#FFF';
|
||||
|
||||
const disabled = '#777680'; // Hosting/neutral variant/50 - outline
|
||||
const disabledBackground = '#E4E1E6'; // Hosting/neutral/90 - surface container highest
|
||||
|
||||
const lightPalette = {
|
||||
primary: {
|
||||
lighter: '#E0E0FF', // Hosting/primary/90 - primary container / primary fixed
|
||||
light: '#BDC2FF', // Hosting/primary/80 - primary fixed dim
|
||||
main: '#606BDF', // Hosting/primary/40 - primary
|
||||
dark: '#3944B8', // Hosting/primary/30 - on primary fixed variant
|
||||
darker: '#000668' // Hosting/primary/10 - on primary container / on primary fixed
|
||||
},
|
||||
secondary: {
|
||||
lighter: '#E0E0FF', // Hosting/secondary/90 - secondary container / secondary fixed
|
||||
light: '#C3C4E4', // Hosting/secondary/80 - secondary fixed dim
|
||||
main: secondaryMain, // Hosting/secondary/40 - secondary
|
||||
dark: '#43455F', // Hosting/secondary/30 - on secondary fixed variant
|
||||
darker: '#171A31' // Hosting/secondary/10 - on secondary container / on secondary fixed
|
||||
},
|
||||
error: {
|
||||
lighter: '#FFEDEA', // error/90 - error container / error fixed
|
||||
light: '#FFDAD6', // error/80 - error fixed dim
|
||||
main: '#DE3730', // error/40 - error
|
||||
dark: '#BA1A1A', // error/30 - on error fixed variant
|
||||
darker: '#690005' // error/10 - on error container / on error fixed
|
||||
},
|
||||
warning: {
|
||||
lighter: '#FFEEE1', // warning/90 - warning container / warning fixed
|
||||
light: '#FFDCBE', // warning/80 - warning fixed dim
|
||||
main: '#AE6600', // warning/40 - warning
|
||||
dark: '#8B5000', // warning/30 - on warning fixed variant
|
||||
darker: '#4A2800' // warning/10 - on warning container / on warning fixed
|
||||
},
|
||||
success: {
|
||||
lighter: '#C8FFC0', // success/90 - success container / success fixed
|
||||
light: '#B6F2AF', // success/80 - success fixed dim
|
||||
main: '#22892F', // success/40 - success
|
||||
dark: '#006E1C', // success/30 - on success fixed variant
|
||||
darker: '#00390A' // success/10 - on success container / on success fixed
|
||||
},
|
||||
info: {
|
||||
lighter: '#D4F7FF', // info/90 - info container / info fixed
|
||||
light: '#A1EFFF', // info/80 - info fixed dim
|
||||
main: '#008394', // info/40 - info
|
||||
dark: '#006876', // info/30 - on info fixed variant
|
||||
darker: '#00363E' // info/10 - on info container / on info fixed
|
||||
},
|
||||
grey: {
|
||||
50: '#FBF8FF', // Hosting/neutral/98 - surface / surface bright
|
||||
100: '#F5F2FA', // Hosting/neutral/96 - surface container low
|
||||
200: divider, // Hosting/neutral/94 - surface container
|
||||
300: '#EAE7EF', // Hosting/neutral/92 - surface container high
|
||||
400: disabledBackground, // Hosting/neutral/90 - surface container highest
|
||||
500: '#DBD9E0', // Hosting/neutral/87 - surface dim
|
||||
600: '#C7C5D0', // Hosting/neutral variant/80 - outline variant
|
||||
700: disabled, // Hosting/neutral variant/50 - outline
|
||||
800: textSecondary, // Hosting/neutral variant/30 - on surface variant
|
||||
900: textPrimary // Hosting/neutral/10 - on surface
|
||||
},
|
||||
text: {
|
||||
primary: textPrimary, // Hosting/neutral/10 - on surface
|
||||
secondary: textSecondary, // Hosting/neutral variant/30 - on surface variant
|
||||
disabled: disabled
|
||||
},
|
||||
divider,
|
||||
background: {
|
||||
default: background
|
||||
},
|
||||
action: {
|
||||
hover: withAlpha(secondaryMain, 0.05),
|
||||
disabled: withAlpha(disabled, 0.6),
|
||||
disabledBackground: withAlpha(disabledBackground, 0.9)
|
||||
}
|
||||
};
|
||||
|
||||
const commonColor = { common: { black: '#000', white: '#fff' } };
|
||||
|
||||
const extendedLight = extendPaletteWithChannels(lightPalette);
|
||||
const extendedCommon = extendPaletteWithChannels(commonColor);
|
||||
|
||||
return {
|
||||
light: {
|
||||
mode: 'light',
|
||||
...extendedCommon,
|
||||
...extendedLight
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
# PALETTE COLORS
|
||||
@@ -0,0 +1,102 @@
|
||||
// @project
|
||||
import { FONT_ARCHIVO } from '@/config';
|
||||
|
||||
/*************************** DEFAULT - TYPOGRAPHY ***************************/
|
||||
|
||||
export default function typography() {
|
||||
return {
|
||||
fontFamily: FONT_ARCHIVO,
|
||||
letterSpacing: 0,
|
||||
|
||||
// heading - h1
|
||||
h1: {
|
||||
fontWeight: 500,
|
||||
fontSize: 40,
|
||||
lineHeight: '44px'
|
||||
},
|
||||
|
||||
// heading - h2
|
||||
h2: {
|
||||
fontWeight: 500,
|
||||
fontSize: 32,
|
||||
lineHeight: '36px'
|
||||
},
|
||||
|
||||
// heading - h3
|
||||
h3: {
|
||||
fontWeight: 500,
|
||||
fontSize: 28,
|
||||
lineHeight: '32px'
|
||||
},
|
||||
|
||||
// heading - h4
|
||||
h4: {
|
||||
fontWeight: 500,
|
||||
fontSize: 24,
|
||||
lineHeight: '28px'
|
||||
},
|
||||
|
||||
// heading - h5
|
||||
h5: {
|
||||
fontWeight: 500,
|
||||
fontSize: 20,
|
||||
lineHeight: '24px'
|
||||
},
|
||||
|
||||
// heading - h6
|
||||
h6: {
|
||||
fontWeight: 500,
|
||||
fontSize: 18,
|
||||
lineHeight: '22px'
|
||||
},
|
||||
|
||||
// subtitle - 1
|
||||
subtitle1: {
|
||||
fontWeight: 500,
|
||||
fontSize: 16,
|
||||
lineHeight: '20px'
|
||||
},
|
||||
|
||||
// subtitle - 2
|
||||
subtitle2: {
|
||||
fontWeight: 500,
|
||||
fontSize: 14,
|
||||
lineHeight: '18px'
|
||||
},
|
||||
|
||||
// paragraph - 1
|
||||
body1: {
|
||||
fontWeight: 400,
|
||||
fontSize: 16,
|
||||
lineHeight: '20px'
|
||||
},
|
||||
|
||||
// paragraph - 2
|
||||
body2: {
|
||||
fontWeight: 400,
|
||||
fontSize: 14,
|
||||
lineHeight: '18px'
|
||||
},
|
||||
|
||||
// caption - regular
|
||||
caption: {
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
lineHeight: '16px',
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
// caption - medium
|
||||
caption1: {
|
||||
fontWeight: 500,
|
||||
fontSize: 12,
|
||||
lineHeight: '16px',
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
// button
|
||||
button: {
|
||||
textTransform: 'capitalize'
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user