adam/proposal-system
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/proposal-system.git synced 2026-10-03 02:13:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: apply full UX audit token pass (palette, typography, shapes, component overrides)

Browse source
This commit is contained in:
Adam Moussa 2026-05-22 18:51:30 -04:00
parent d27cc2e528
commit f7b4ab6f93
1 changed files with 83 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
web/src/theme.ts
View file

@ -3,26 +3,26 @@ import { createTheme } from '@mui/material/styles';
export const theme = createTheme({ export const theme = createTheme({
palette: { palette: {
primary: { primary: {
main: '#0B4F6C', main: '#0B5A73',
light: '#1B789B', light: '#0E7490',
dark: '#07384D', dark: '#073B4C',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
secondary: { secondary: {
main: '#2563EB', main: '#475569',
light: '#60A5FA', light: '#64748B',
dark: '#1D4ED8', dark: '#334155',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
success: { success: {
main: '#2E7D32', main: '#2E7D32',
light: '#E8F5E9', light: '#DCFCE7',
dark: '#1B5E20', dark: '#1B5E20',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
warning: { warning: {
main: '#EA580C', main: '#F97316',
light: '#FFF3E6', light: '#FFEDD5',
dark: '#C2410C', dark: '#C2410C',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
@ -43,30 +43,29 @@ export const theme = createTheme({
paper: '#FFFFFF', paper: '#FFFFFF',
}, },
text: { text: {
primary: '#1F2933', primary: '#1E293B',
secondary: '#5B6673', secondary: '#475569',
disabled: '#9AA4AF', disabled: '#94A3B8',
}, },
divider: '#DDE3E8', divider: '#E2E8F0',
}, },
typography: { typography: {
fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif', fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
fontSize: 14, fontSize: 14,
h4: { h4: {
fontWeight: 600, fontWeight: 700,
fontSize: '24px', fontSize: '24px',
lineHeight: 1.25, lineHeight: 1.25,
letterSpacing: '-0.01em', letterSpacing: '-0.02em',
}, },
h5: { h5: {
fontWeight: 600, fontWeight: 700,
fontSize: '22px', fontSize: '18px',
lineHeight: 1.3, lineHeight: 1.3,
letterSpacing: '-0.01em',
}, },
h6: { h6: {
fontWeight: 600, fontWeight: 700,
fontSize: '16px', fontSize: '16px',
lineHeight: 1.4, lineHeight: 1.4,
}, },
@ -86,17 +85,25 @@ export const theme = createTheme({
caption: { caption: {
fontSize: '12px', fontSize: '12px',
lineHeight: 1.35, lineHeight: 1.35,
color: '#5B6673', color: '#64748B',
}, },
button: { button: {
fontSize: '13px', fontSize: '14px',
fontWeight: 600, fontWeight: 700,
textTransform: 'none' as const, textTransform: 'none' as const,
}, },
overline: {
fontSize: '11px',
lineHeight: '16px',
fontWeight: 700,
letterSpacing: '0.08em',
textTransform: 'uppercase' as const,
color: '#94A3B8',
},
}, },
shape: { shape: {
borderRadius: 6, borderRadius: 8,
}, },
components: { components: {
@ -115,7 +122,7 @@ export const theme = createTheme({
}, },
styleOverrides: { styleOverrides: {
root: { root: {
backgroundColor: '#07384D', backgroundColor: '#073B4C',
boxShadow: 'none', boxShadow: 'none',
borderBottom: '1px solid rgba(255,255,255,0.08)', borderBottom: '1px solid rgba(255,255,255,0.08)',
}, },
@ -125,8 +132,9 @@ export const theme = createTheme({
MuiDrawer: { MuiDrawer: {
styleOverrides: { styleOverrides: {
paper: { paper: {
backgroundColor: '#FBFCFD', backgroundColor: '#FFFFFF',
borderRight: '1px solid #DDE3E8', borderRight: '1px solid #DDE3E8',
width: 216,
}, },
}, },
}, },
@ -137,9 +145,9 @@ export const theme = createTheme({
}, },
styleOverrides: { styleOverrides: {
root: { root: {
border: '1px solid #DDE3E8', border: '1px solid #D6E0EA',
boxShadow: '0 1px 2px rgba(16, 24, 40, 0.06)', boxShadow: '0 1px 2px rgba(15, 23, 42, 0.06)',
borderRadius: 6, borderRadius: 8,
}, },
}, },
}, },
@ -163,18 +171,21 @@ export const theme = createTheme({
boxShadow: 'none', boxShadow: 'none',
textTransform: 'none' as const, textTransform: 'none' as const,
fontWeight: 600, fontWeight: 600,
height: 36,
paddingLeft: 14,
paddingRight: 14,
}, },
contained: { contained: {
boxShadow: '0 1px 2px rgba(16, 24, 40, 0.12)', boxShadow: 'none',
'&:hover': { '&:hover': {
boxShadow: '0 2px 4px rgba(16, 24, 40, 0.16)', boxShadow: 'none',
}, },
}, },
outlined: { outlined: {
borderColor: '#B8C7D3', borderColor: '#BFD0DF',
'&:hover': { '&:hover': {
borderColor: '#0B4F6C', borderColor: '#0B5A73',
backgroundColor: '#E6F2F8', backgroundColor: '#E6F3F7',
}, },
}, },
}, },
@ -197,15 +208,32 @@ export const theme = createTheme({
styleOverrides: { styleOverrides: {
root: { root: {
borderRadius: 6, borderRadius: 6,
minHeight: 38,
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
borderColor: '#B8C7D3', borderColor: '#BFD0DF',
}, },
'&:hover .MuiOutlinedInput-notchedOutline': { '&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: '#8EA4B5', borderColor: '#0E7490',
}, },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#0B4F6C', borderColor: '#0B5A73',
borderWidth: 1, borderWidth: 2,
},
},
input: {
fontSize: 14,
padding: '9px 12px',
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: 13,
color: '#64748B',
'&.Mui-focused': {
color: '#0B5A73',
}, },
}, },
}, },
@ -215,13 +243,14 @@ export const theme = createTheme({
styleOverrides: { styleOverrides: {
root: { root: {
'& .MuiTableCell-head': { '& .MuiTableCell-head': {
color: '#374151', color: '#334155',
fontWeight: 600, fontWeight: 700,
fontSize: 13, fontSize: 13,
paddingTop: 12, paddingTop: 12,
paddingBottom: 12, paddingBottom: 12,
borderBottom: '1px solid #DDE3E8', borderBottom: '1px solid #DDE3E8',
backgroundColor: '#F8FAFC', backgroundColor: '#F8FAFC',
whiteSpace: 'nowrap',
}, },
}, },
}, },
@ -230,10 +259,10 @@ export const theme = createTheme({
MuiTableCell: { MuiTableCell: {
styleOverrides: { styleOverrides: {
root: { root: {
color: '#1F2933', color: '#1E293B',
fontSize: '13px', fontSize: 14,
padding: '11px 12px', padding: '12px 14px',
borderBottom: '1px solid #E8EDF2', borderBottom: '1px solid #E2E8F0',
}, },
}, },
}, },
@ -242,7 +271,7 @@ export const theme = createTheme({
styleOverrides: { styleOverrides: {
root: { root: {
'&:hover': { '&:hover': {
backgroundColor: '#F3F8FB', backgroundColor: '#F8FAFC',
}, },
}, },
}, },
@ -252,14 +281,22 @@ export const theme = createTheme({
styleOverrides: { styleOverrides: {
root: { root: {
height: 24, height: 24,
borderRadius: 5, borderRadius: 6,
fontSize: 12, fontSize: 12,
fontWeight: 600, fontWeight: 700,
}, },
sizeSmall: { sizeSmall: {
height: 22, height: 22,
fontSize: 12, fontSize: 12,
}, },
label: {
paddingLeft: 8,
paddingRight: 8,
},
icon: {
fontSize: 14,
marginLeft: 6,
},
}, },
}, },