121 lines
2.3 KiB
TypeScript
121 lines
2.3 KiB
TypeScript
import { createTheme } from '@mui/material/styles';
|
|
import type { Theme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles';
|
|
|
|
/**
|
|
* Base theme configuration shared by all GLAM frontends
|
|
*
|
|
* Contains common:
|
|
* - Typography scale
|
|
* - Spacing system
|
|
* - Breakpoints
|
|
* - Shape (border radius)
|
|
* - Component defaults
|
|
*/
|
|
export const baseThemeOptions: MuiThemeOptions = {
|
|
typography: {
|
|
fontFamily: [
|
|
'Inter',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
].join(','),
|
|
h1: {
|
|
fontSize: '2.5rem',
|
|
fontWeight: 600,
|
|
lineHeight: 1.2,
|
|
},
|
|
h2: {
|
|
fontSize: '2rem',
|
|
fontWeight: 600,
|
|
lineHeight: 1.3,
|
|
},
|
|
h3: {
|
|
fontSize: '1.75rem',
|
|
fontWeight: 600,
|
|
lineHeight: 1.3,
|
|
},
|
|
h4: {
|
|
fontSize: '1.5rem',
|
|
fontWeight: 500,
|
|
lineHeight: 1.4,
|
|
},
|
|
h5: {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 500,
|
|
lineHeight: 1.4,
|
|
},
|
|
h6: {
|
|
fontSize: '1rem',
|
|
fontWeight: 500,
|
|
lineHeight: 1.5,
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
lineHeight: 1.6,
|
|
},
|
|
body2: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: 1.6,
|
|
},
|
|
},
|
|
spacing: 8, // 8px base unit
|
|
shape: {
|
|
borderRadius: 8,
|
|
},
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 900,
|
|
lg: 1200,
|
|
xl: 1536,
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
textTransform: 'none',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)',
|
|
},
|
|
},
|
|
},
|
|
MuiAppBar: {
|
|
defaultProps: {
|
|
elevation: 0,
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Create the base theme (for internal use)
|
|
*/
|
|
export const baseTheme: Theme = createTheme(baseThemeOptions);
|
|
|
|
/**
|
|
* Create a site-specific theme by merging site palette with base theme
|
|
*/
|
|
export function createSiteTheme(paletteOptions: MuiThemeOptions['palette']): Theme {
|
|
return createTheme({
|
|
...baseThemeOptions,
|
|
palette: paletteOptions,
|
|
});
|
|
}
|