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