Drew Galbraith
d60d834f38
Sets up API methods and types. Sets up a colorscheme. Sets up a homepage. Removes tailwind in favor of mui for now. Reviewed-on: #7 Co-authored-by: Drew Galbraith <drew@tiramisu.one> Co-committed-by: Drew Galbraith <drew@tiramisu.one>
178 lines
3.9 KiB
TypeScript
178 lines
3.9 KiB
TypeScript
import { createTheme } from '@mui/material/styles'
|
|
|
|
// Color palette constants
|
|
const colors = {
|
|
// Primary Colors
|
|
deepNavy: '#1e3a5f', // Main brand color for headers and primary actions
|
|
oceanBlue: '#2c5282', // Secondary blue for links and active states
|
|
compassGold: '#d69e2e', // Accent color for highlights and call-to-actions
|
|
|
|
// Status Colors
|
|
chartGreen: '#48bb78', // Completed tasks and success states
|
|
sunsetCoral: '#f56565', // Urgent tasks and error states
|
|
seaFoam: '#4fd1c7', // Information and notification states
|
|
|
|
// Neutrals
|
|
parchment: '#f7fafc', // Clean background color
|
|
fogGray: '#e2e8f0', // Subtle borders and dividers
|
|
stormGray: '#718096', // Secondary text
|
|
anchorDark: '#2d3748', // Primary text and headings
|
|
}
|
|
|
|
declare module '@mui/material/styles' {
|
|
interface Theme {
|
|
custom: {
|
|
task: {
|
|
todo: string
|
|
done: string
|
|
backlog: string
|
|
}
|
|
}
|
|
}
|
|
|
|
interface ThemeOptions {
|
|
custom?: {
|
|
task?: {
|
|
todo?: string
|
|
done?: string
|
|
backlog?: string
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export const theme = createTheme({
|
|
palette: {
|
|
mode: 'light',
|
|
primary: {
|
|
main: colors.deepNavy,
|
|
light: colors.oceanBlue,
|
|
contrastText: '#ffffff',
|
|
},
|
|
secondary: {
|
|
main: colors.compassGold,
|
|
contrastText: '#ffffff',
|
|
},
|
|
success: {
|
|
main: colors.chartGreen,
|
|
},
|
|
error: {
|
|
main: colors.sunsetCoral,
|
|
},
|
|
info: {
|
|
main: colors.seaFoam,
|
|
},
|
|
background: {
|
|
default: colors.parchment,
|
|
paper: '#ffffff',
|
|
},
|
|
text: {
|
|
primary: colors.anchorDark,
|
|
secondary: colors.stormGray,
|
|
},
|
|
grey: {
|
|
100: '#edf2f7',
|
|
200: colors.fogGray,
|
|
300: '#cbd5e0',
|
|
500: colors.stormGray,
|
|
700: colors.anchorDark,
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
|
|
h1: {
|
|
fontSize: '2rem',
|
|
fontWeight: 700,
|
|
lineHeight: 1.2,
|
|
},
|
|
h2: {
|
|
fontSize: '1.5rem',
|
|
fontWeight: 600,
|
|
lineHeight: 1.3,
|
|
},
|
|
h3: {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 600,
|
|
lineHeight: 1.4,
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
lineHeight: 1.6,
|
|
},
|
|
body2: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: 1.5,
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 12,
|
|
},
|
|
components: {
|
|
MuiAppBar: {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: colors.deepNavy,
|
|
color: '#ffffff',
|
|
boxShadow:
|
|
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
borderBottom: 'none',
|
|
},
|
|
},
|
|
},
|
|
MuiDrawer: {
|
|
styleOverrides: {
|
|
paper: {
|
|
backgroundColor: '#ffffff',
|
|
borderRight: `1px solid ${colors.fogGray}`,
|
|
},
|
|
},
|
|
},
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
textTransform: 'none',
|
|
borderRadius: '0.75rem',
|
|
fontWeight: 500,
|
|
},
|
|
contained: {
|
|
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
'&:hover': {
|
|
boxShadow:
|
|
'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: '0.75rem',
|
|
boxShadow:
|
|
'0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
border: `1px solid ${colors.fogGray}`,
|
|
'&:hover': {
|
|
boxShadow:
|
|
'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
borderColor: '#cbd5e0',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: '0.75rem',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
custom: {
|
|
task: {
|
|
todo: colors.oceanBlue,
|
|
done: colors.chartGreen,
|
|
backlog: colors.stormGray,
|
|
},
|
|
},
|
|
})
|