@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
536 lines • 14.7 kB
JavaScript
import { createTheme } from '@mui/material/styles';
// Common theme options
const commonTheme = {
typography: {
fontFamily: 'Inter, sans-serif',
h1: {
fontSize: '2.5rem',
fontWeight: 600,
},
h2: {
fontSize: '2rem',
fontWeight: 600,
},
h3: {
fontSize: '1.5rem',
fontWeight: 600,
},
h4: {
fontSize: '1.25rem',
fontWeight: 600,
},
h5: {
fontSize: '1.125rem',
fontWeight: 600,
},
h6: {
fontSize: '1rem',
fontWeight: 600,
},
body1: {
fontSize: '1rem',
lineHeight: 1.5,
},
body2: {
fontSize: '0.875rem',
lineHeight: 1.43,
},
},
shape: {
borderRadius: 8,
},
spacing: 8,
components: {
MuiCssBaseline: {
styleOverrides: {
'*': {
fontFamily: 'Inter, sans-serif',
},
body: {
fontFamily: 'Inter, sans-serif',
},
},
},
MuiTypography: {
styleOverrides: {
root: {
fontFamily: 'Inter, sans-serif',
},
h1: {
fontFamily: 'Inter, sans-serif',
},
h2: {
fontFamily: 'Inter, sans-serif',
},
h3: {
fontFamily: 'Inter, sans-serif',
},
h4: {
fontFamily: 'Inter, sans-serif',
},
h5: {
fontFamily: 'Inter, sans-serif',
},
h6: {
fontFamily: 'Inter, sans-serif',
},
},
},
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
fontWeight: 600,
borderRadius: 8,
padding: '8px 16px',
},
contained: {
boxShadow: 'none',
'&:hover': {
boxShadow: 'none',
},
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.05)',
},
},
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
borderRadius: 8,
},
},
},
},
},
};
// Base neumorphism shadows
const neumorphismShadows = {
light: {
inset: 'inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff',
raised: '2px 2px 5px #d1d9e6, -2px -2px 5px #ffffff',
pressed: 'inset 1px 1px 2px #d1d9e6, inset -1px -1px 2px #ffffff',
soft: '1px 1px 3px #d1d9e6, -1px -1px 3px #ffffff',
},
dark: {
inset: 'inset 2px 2px 5px #0a0a0a, inset -2px -2px 5px #2a2a2a',
raised: '2px 2px 5px #0a0a0a, -2px -2px 5px #2a2a2a',
pressed: 'inset 1px 1px 2px #0a0a0a, inset -1px -1px 2px #2a2a2a',
soft: '1px 1px 3px #0a0a0a, -1px -1px 3px #2a2a2a',
},
};
// Create shadow arrays for neumorphism themes
const createNeumorphismShadows = (shadowType) => [
'none',
neumorphismShadows[shadowType].soft,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
neumorphismShadows[shadowType].raised,
];
// Light theme
export const lightTheme = createTheme({
...commonTheme,
palette: {
mode: 'light',
primary: {
main: '#223A5F',
light: '#3a4e7a',
dark: '#16213a',
contrastText: '#ffffff',
},
secondary: {
main: '#dc004e',
light: '#ff5983',
dark: '#9a0036',
contrastText: '#ffffff',
},
unicityGreen: {
main: '#43C06F',
light: '#D6F5E3',
dark: '#2B9B4F',
contrastText: '#fff',
},
unicityBlue: {
main: '#009ECF',
light: '#D6F5FF',
dark: '#0086B3',
contrastText: '#fff',
},
unicityPurple: {
main: '#BA71AA',
light: '#F8E3F3',
dark: '#8C4F7F',
contrastText: '#fff',
},
unicityOrange: {
main: '#FFA77B',
light: '#FFE6DB',
dark: '#CC845E',
contrastText: '#fff',
},
unicityNavy: {
main: '#183A5A',
light: '#E9EEF3',
dark: '#0F2233',
contrastText: '#fff',
},
background: {
default: '#ffffff',
paper: '#ffffff',
paper2: '#F5F5F7',
},
text: {
primary: '#1a1a1a',
secondary: '#666666',
},
grey: {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
},
},
});
// Dark theme
export const darkTheme = createTheme({
...commonTheme,
palette: {
mode: 'dark',
primary: {
main: '#FFFFFF',
light: '#FFFFFF',
dark: '#E0E0E0',
contrastText: '#000000',
},
secondary: {
main: '#f48fb1',
light: '#f8bbd9',
dark: '#f06292',
contrastText: '#000000',
},
unicityGreen: {
main: '#43C06F',
light: '#D6F5E3',
dark: '#2B9B4F',
contrastText: '#fff',
},
unicityBlue: {
main: '#009ECF',
light: '#D6F5FF',
dark: '#0086B3',
contrastText: '#fff',
},
unicityPurple: {
main: '#BA71AA',
light: '#F8E3F3',
dark: '#8C4F7F',
contrastText: '#fff',
},
unicityOrange: {
main: '#FFA77B',
light: '#FFE6DB',
dark: '#CC845E',
contrastText: '#fff',
},
unicityNavy: {
main: '#183A5A',
light: '#E9EEF3',
dark: '#0F2233',
contrastText: '#fff',
},
background: {
default: '#121212',
paper: '#1e1e1e',
paper2: '#2a2a2a',
},
text: {
primary: '#ffffff',
secondary: '#b3b3b3',
},
grey: {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
},
},
});
export const neumorphismLightTheme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#223A5F',
light: '#3a4e7a',
dark: '#16213a',
contrastText: '#ffffff',
},
secondary: {
main: '#ec4899',
light: '#f472b6',
dark: '#db2777',
contrastText: '#db2777',
},
unicityGreen: {
main: '#43C06F',
light: '#D6F5E3',
dark: '#2B9B4F',
contrastText: '#fff',
},
unicityBlue: {
main: '#009ECF',
light: '#D6F5FF',
dark: '#0086B3',
contrastText: '#fff',
},
unicityPurple: {
main: '#BA71AA',
light: '#F8E3F3',
dark: '#8C4F7F',
contrastText: '#fff',
},
unicityOrange: {
main: '#FFA77B',
light: '#FFE6DB',
dark: '#CC845E',
contrastText: '#fff',
},
unicityNavy: {
main: '#183A5A',
light: '#E9EEF3',
dark: '#0F2233',
contrastText: '#fff',
},
background: {
default: '#e6e7ee',
paper: '#e6e7ee',
paper2: '#d1d9e6',
},
text: {
primary: '#5a6376',
secondary: '#8b95a7',
},
divider: '#d1d9e6',
action: {
hover: 'rgba(209, 217, 230, 0.3)',
selected: 'rgba(209, 217, 230, 0.5)',
disabled: '#b8c2cc',
disabledBackground: '#d1d9e6',
},
grey: {
50: '#f8f9fa',
100: '#f1f3f4',
200: '#e6e7ee',
300: '#d1d9e6',
400: '#b8c2cc',
500: '#8b95a7',
600: '#5a6376',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
},
},
shape: {
borderRadius: 16,
},
shadows: createNeumorphismShadows('light'),
components: {
MuiButton: {
styleOverrides: {
root: {
boxShadow: neumorphismShadows.light.raised,
border: 'none',
'&:hover': {
boxShadow: neumorphismShadows.light.soft,
},
'&:active': {
boxShadow: neumorphismShadows.light.pressed,
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
backgroundImage: 'none',
boxShadow: neumorphismShadows.light.raised,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: neumorphismShadows.light.raised,
},
},
},
},
});
export const neumorphismDarkTheme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#FFFFFF',
light: '#FFFFFF',
dark: '#E0E0E0',
contrastText: '#000000',
},
secondary: {
main: '#f472b6',
light: '#f9a8d4',
dark: '#ec4899',
contrastText: '#e6e7ee',
},
unicityGreen: {
main: '#43C06F',
light: '#D6F5E3',
dark: '#2B9B4F',
contrastText: '#fff',
},
unicityBlue: {
main: '#009ECF',
light: '#D6F5FF',
dark: '#0086B3',
contrastText: '#fff',
},
unicityPurple: {
main: '#BA71AA',
light: '#F8E3F3',
dark: '#8C4F7F',
contrastText: '#fff',
},
unicityOrange: {
main: '#FFA77B',
light: '#FFE6DB',
dark: '#CC845E',
contrastText: '#fff',
},
unicityNavy: {
main: '#183A5A',
light: '#E9EEF3',
dark: '#0F2233',
contrastText: '#fff',
},
background: {
default: '#1a1a1a',
paper: '#1a1a1a',
paper2: '#0f0f0f',
},
text: {
primary: '#c1c2c8',
secondary: '#888991',
},
divider: '#2a2a2a',
action: {
hover: 'rgba(42, 42, 42, 0.3)',
selected: 'rgba(42, 42, 42, 0.5)',
disabled: '#404040',
disabledBackground: '#2a2a2a',
},
grey: {
50: '#2a2a2a',
100: '#333333',
200: '#404040',
300: '#4d4d4d',
400: '#666666',
500: '#888991',
600: '#c1c2c8',
700: '#d4d4d6',
800: '#e6e6e8',
900: '#f2f2f2',
},
},
shape: {
borderRadius: 16,
},
shadows: createNeumorphismShadows('dark'),
components: {
MuiButton: {
styleOverrides: {
root: {
boxShadow: neumorphismShadows.dark.raised,
border: 'none',
'&:hover': {
boxShadow: neumorphismShadows.dark.soft,
},
'&:active': {
boxShadow: neumorphismShadows.dark.pressed,
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
backgroundImage: 'none',
boxShadow: neumorphismShadows.dark.raised,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: neumorphismShadows.dark.raised,
},
},
},
},
});
export const getTheme = (mode) => {
switch (mode) {
case 'dark':
return darkTheme;
case 'neumorphism-light':
return neumorphismLightTheme;
case 'neumorphism-dark':
return neumorphismDarkTheme;
case 'light':
default:
return lightTheme;
}
};
//# sourceMappingURL=theme.js.map