chore(theme): define palette and typographies and override mui styles with this values, also add rtlProvider
This commit is contained in:
Sajad Mirjalili
46
src/theme/color.type.ts
Normal file
46
src/theme/color.type.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import type {
|
||||
PaletteColor,
|
||||
TypeAction,
|
||||
TypeBackground,
|
||||
TypeText,
|
||||
} from '@mui/material';
|
||||
import type { PaletteColorOptions } from 'node_modules/@mui/material';
|
||||
|
||||
export interface Palette {
|
||||
primary: {
|
||||
dark: PaletteColorOptions;
|
||||
light: PaletteColorOptions;
|
||||
};
|
||||
secondary: {
|
||||
dark: PaletteColor;
|
||||
light: PaletteColor;
|
||||
};
|
||||
action: {
|
||||
dark: Partial<TypeAction>;
|
||||
light: Partial<TypeAction>;
|
||||
};
|
||||
error: {
|
||||
dark: PaletteColor;
|
||||
light: PaletteColor;
|
||||
};
|
||||
warning: {
|
||||
dark: PaletteColor;
|
||||
light: PaletteColor;
|
||||
};
|
||||
info: {
|
||||
dark: PaletteColor;
|
||||
light: PaletteColor;
|
||||
};
|
||||
success: {
|
||||
dark: PaletteColor;
|
||||
light: PaletteColor;
|
||||
};
|
||||
background: {
|
||||
dark: Partial<TypeBackground>;
|
||||
light: Partial<TypeBackground>;
|
||||
};
|
||||
text: {
|
||||
dark: Partial<TypeText>;
|
||||
light: Partial<TypeText>;
|
||||
};
|
||||
}
|
||||
188
src/theme/colorTmp.ts
Normal file
188
src/theme/colorTmp.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
export const PALETTE = {
|
||||
primary: {
|
||||
light: {
|
||||
main: '#212121',
|
||||
dark: '#000000',
|
||||
light: '#616161',
|
||||
contrastText: '#FFFFFF',
|
||||
hover: '#21212104',
|
||||
selected: '#21212108',
|
||||
focus: '#21212112',
|
||||
focusVisible: '#21212130',
|
||||
outlinedBorder: '#21212150',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#64b5f6',
|
||||
light: '#90caf9',
|
||||
dark: '#42a5f5',
|
||||
contrastText: 'rgba(0, 0, 0, 0.87)',
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
light: {
|
||||
main: '#FF5722',
|
||||
dark: '#E64A19',
|
||||
light: '#FF8A65',
|
||||
contrastText: '#FFFFFF',
|
||||
hover: '#FF572204',
|
||||
selected: '#FF572208',
|
||||
focus: '#FF572212',
|
||||
focusVisible: '#FF572230',
|
||||
outlinedBorder: '#FF572250',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#ce93d8',
|
||||
light: '#f3e5f5',
|
||||
dark: '#ab47bc',
|
||||
contrastText: 'rgba(0, 0, 0, 0.87)',
|
||||
},
|
||||
},
|
||||
action: {
|
||||
light: {
|
||||
action: '#00000056',
|
||||
hover: '#00000004',
|
||||
selected: '#00000008',
|
||||
focus: '#00000012',
|
||||
disabled: '#00000038',
|
||||
disabledBackground: '#00000012',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
action: '#FFFFFF56',
|
||||
hover: '#FFFFFF04',
|
||||
selected: '#FFFFFF08',
|
||||
focus: '#FFFFFF12',
|
||||
disabled: '#FFFFFF38',
|
||||
disabledBackground: '#FFFFFF12',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
light: {
|
||||
main: '#E53935',
|
||||
dark: '#C62828',
|
||||
light: '#EF5350',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#D32F2F04',
|
||||
selected: '#D32F2F08',
|
||||
focusVisible: '#D32F2F30',
|
||||
outlinedBorder: '#D32F2F50',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#E53935',
|
||||
dark: '#C62828',
|
||||
light: '#EF5350',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#D32F2F04',
|
||||
selected: '#D32F2F08',
|
||||
focusVisible: '#D32F2F30',
|
||||
outlinedBorder: '#D32F2F50',
|
||||
},
|
||||
},
|
||||
warning: {
|
||||
light: {
|
||||
main: '#EF6C00',
|
||||
dark: '#E65100',
|
||||
light: '#FF9800',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#EF6C0004',
|
||||
selected: '#EF6C0008',
|
||||
focusVisible: '#EF6C0030',
|
||||
outlinedBorder: '#EF6C0050',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#EF6C00',
|
||||
dark: '#E65100',
|
||||
light: '#FF9800',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#EF6C0004',
|
||||
selected: '#EF6C0008',
|
||||
focusVisible: '#EF6C0030',
|
||||
outlinedBorder: '#EF6C0050',
|
||||
},
|
||||
},
|
||||
info: {
|
||||
light: {
|
||||
main: '#29B6F6',
|
||||
dark: '#0288D1',
|
||||
light: '#4FC3F7',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#0288D104',
|
||||
selected: '#0288D108',
|
||||
focusVisible: '#0288D130',
|
||||
outlinedBorder: '#0288D150',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#29B6F6',
|
||||
dark: '#0288D1',
|
||||
light: '#4FC3F7',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#0288D104',
|
||||
selected: '#0288D108',
|
||||
focusVisible: '#0288D130',
|
||||
outlinedBorder: '#0288D150',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
light: {
|
||||
main: '#43A047',
|
||||
dark: '#1B5E20',
|
||||
light: '#81C784',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#2E7D3204',
|
||||
selected: '#2E7D3208',
|
||||
focusVisible: '#2E7D3230',
|
||||
outlinedBorder: '#2E7D3250',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#43A047',
|
||||
dark: '#1B5E20',
|
||||
light: '#81C784',
|
||||
contrast: '#FFFFFF',
|
||||
hover: '#2E7D3204',
|
||||
selected: '#2E7D3208',
|
||||
focusVisible: '#2E7D3230',
|
||||
outlinedBorder: '#2E7D3250',
|
||||
},
|
||||
},
|
||||
// Background colors
|
||||
background: {
|
||||
light: {
|
||||
default: '#FAFAFA',
|
||||
},
|
||||
dark: {
|
||||
default: '#121212',
|
||||
},
|
||||
},
|
||||
// Text colors
|
||||
text: {
|
||||
light: {
|
||||
primary: '#000000',
|
||||
secondary: '#424242',
|
||||
tertiary: '#757575',
|
||||
disabled: '#00000038',
|
||||
hover: '#00000004',
|
||||
selected: '#00000008',
|
||||
divider: '#E0E0E0',
|
||||
focus: '#00000012',
|
||||
focusVisible: '#00000030',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
primary: '#FFFFFF',
|
||||
secondary: '#424242',
|
||||
tertiary: '#757575',
|
||||
disabled: '#FFFFFF38',
|
||||
hover: '#FFFFFF04',
|
||||
selected: '#FFFFFF08',
|
||||
divider: '#E0E0E0',
|
||||
focus: '#FFFFFF12',
|
||||
focusVisible: '#FFFFFF30',
|
||||
},
|
||||
},
|
||||
};
|
||||
134
src/theme/colors.ts
Normal file
134
src/theme/colors.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
import type { Palette } from './color.type';
|
||||
|
||||
export const PALETTE: Palette = {
|
||||
primary: {
|
||||
light: {
|
||||
main: '#212121',
|
||||
dark: '#000000',
|
||||
light: '#616161',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#64b5f6',
|
||||
light: '#90caf9',
|
||||
dark: '#42a5f5',
|
||||
contrastText: 'rgba(0, 0, 0, 0.87)',
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
light: {
|
||||
main: '#FF5722',
|
||||
dark: '#E64A19',
|
||||
light: '#FF8A65',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#ce93d8',
|
||||
light: '#f3e5f5',
|
||||
dark: '#ab47bc',
|
||||
contrastText: 'rgba(0, 0, 0, 0.87)',
|
||||
},
|
||||
},
|
||||
action: {
|
||||
light: {
|
||||
hover: '#00000004',
|
||||
selected: '#00000008',
|
||||
focus: '#00000012',
|
||||
disabled: '#00000038',
|
||||
disabledBackground: '#00000012',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
hover: '#FFFFFF04',
|
||||
selected: '#FFFFFF08',
|
||||
focus: '#FFFFFF12',
|
||||
disabled: '#FFFFFF38',
|
||||
disabledBackground: '#FFFFFF12',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
light: {
|
||||
main: '#E53935',
|
||||
dark: '#C62828',
|
||||
light: '#EF5350',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#E53935',
|
||||
dark: '#C62828',
|
||||
light: '#EF5350',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
warning: {
|
||||
light: {
|
||||
main: '#EF6C00',
|
||||
dark: '#E65100',
|
||||
light: '#FF9800',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#EF6C00',
|
||||
dark: '#E65100',
|
||||
light: '#FF9800',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
info: {
|
||||
light: {
|
||||
main: '#29B6F6',
|
||||
dark: '#0288D1',
|
||||
light: '#4FC3F7',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#29B6F6',
|
||||
dark: '#0288D1',
|
||||
light: '#4FC3F7',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
light: {
|
||||
main: '#43A047',
|
||||
dark: '#1B5E20',
|
||||
light: '#81C784',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
main: '#43A047',
|
||||
dark: '#1B5E20',
|
||||
light: '#81C784',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
// Background colors
|
||||
background: {
|
||||
light: {
|
||||
default: '#FAFAFA',
|
||||
},
|
||||
dark: {
|
||||
default: '#121212',
|
||||
},
|
||||
},
|
||||
// Text colors
|
||||
text: {
|
||||
light: {
|
||||
primary: '#000000',
|
||||
secondary: '#424242',
|
||||
disabled: '#00000038',
|
||||
},
|
||||
// TODO
|
||||
dark: {
|
||||
primary: '#FFFFFF',
|
||||
secondary: '#424242',
|
||||
disabled: '#FFFFFF38',
|
||||
},
|
||||
},
|
||||
};
|
||||
28
src/theme/palette.ts
Normal file
28
src/theme/palette.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { type PaletteOptions } from '@mui/material/styles';
|
||||
import { PALETTE } from './colors';
|
||||
|
||||
export const lightPalette: PaletteOptions = {
|
||||
mode: 'light',
|
||||
primary: PALETTE.primary.light,
|
||||
secondary: PALETTE.secondary.light,
|
||||
action: PALETTE.action.light,
|
||||
error: PALETTE.error.light,
|
||||
success: PALETTE.success.light,
|
||||
warning: PALETTE.warning.light,
|
||||
info: PALETTE.info.light,
|
||||
background: PALETTE.background.light,
|
||||
text: PALETTE.text.light,
|
||||
};
|
||||
|
||||
export const darkPalette: PaletteOptions = {
|
||||
mode: 'dark',
|
||||
primary: PALETTE.primary.dark,
|
||||
secondary: PALETTE.secondary.dark,
|
||||
action: PALETTE.action.dark,
|
||||
error: PALETTE.error.dark,
|
||||
success: PALETTE.success.dark,
|
||||
warning: PALETTE.warning.dark,
|
||||
info: PALETTE.info.dark,
|
||||
background: PALETTE.background.dark,
|
||||
text: PALETTE.text.dark,
|
||||
};
|
||||
65
src/theme/typography.ts
Normal file
65
src/theme/typography.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
// No need for a function, just a static object
|
||||
export const typography = {
|
||||
fontFamily: ['Roboto', 'sans-serif'].join(','),
|
||||
fontWeightRegular: 400,
|
||||
fontWeightMedium: 500,
|
||||
fontWeightBold: 700,
|
||||
|
||||
h1: {
|
||||
fontWeight: 700,
|
||||
fontSize: '6rem', // 96px
|
||||
lineHeight: 1.17,
|
||||
},
|
||||
h2: {
|
||||
fontWeight: 700,
|
||||
fontSize: '3.75rem', // 60px
|
||||
lineHeight: 1.2,
|
||||
},
|
||||
h3: {
|
||||
fontWeight: 700,
|
||||
fontSize: '3rem', // 48px
|
||||
lineHeight: 1.17,
|
||||
},
|
||||
h4: {
|
||||
fontWeight: 700,
|
||||
fontSize: '2.125rem', // 34px
|
||||
lineHeight: 1.24,
|
||||
},
|
||||
h5: {
|
||||
fontWeight: 700,
|
||||
fontSize: '1.5rem', // 24px
|
||||
lineHeight: 1.35,
|
||||
},
|
||||
h6: {
|
||||
fontWeight: 700,
|
||||
fontSize: '1.25rem', // 20px
|
||||
lineHeight: 1.6,
|
||||
},
|
||||
subtitle1: {
|
||||
fontSize: '1rem', // 16px
|
||||
fontWeight: 500,
|
||||
},
|
||||
subtitle2: {
|
||||
fontSize: '.785rem', // 16px
|
||||
fontWeight: 500,
|
||||
},
|
||||
body1: {
|
||||
fontSize: '1rem', // 16px
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
body2: {
|
||||
fontSize: '0.875rem', // 14px
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
caption: {
|
||||
fontSize: '0.75rem', // 12px
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
overline: {
|
||||
fontSize: '0.75rem', // 12px
|
||||
fontWeight: 400,
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user