Doormile/doormile_hub_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Thiru-tenext
2026-07-01 17:49:49 +05:30
commit c36f2d5b1d
36 changed files with 12284 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/theme/componentsOverride.js Normal file
View File

@@ -0,0 +1,191 @@
import customShadows from './shadows';
// ==============================|| DOORMILE THEME - COMPONENT OVERRIDES ||============================== //
// Clean, corporate Material Design tuning for the whole console.
export default function componentsOverride(theme) {
const { palette } = theme;
return {
MuiCssBaseline: {
styleOverrides: {
html: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' },
body: { backgroundColor: palette.background.default },
'*::-webkit-scrollbar': { width: 8, height: 8 },
'*::-webkit-scrollbar-thumb': { background: palette.grey[300], borderRadius: 8 },
'*::-webkit-scrollbar-thumb:hover': { background: palette.grey[400] }
}
},
MuiButton: {
defaultProps: { disableElevation: true, disableRipple: false },
styleOverrides: {
root: {
borderRadius: 8,
fontWeight: 600,
padding: '8px 18px',
transition: 'background-color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease',
'&:active': { transform: 'translateY(0.5px)' },
'&.Mui-focusVisible': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` }
},
containedPrimary: {
boxShadow: customShadows.primaryGlow,
'&:hover': { boxShadow: customShadows.primaryGlowHover, backgroundColor: palette.primary.dark }
},
outlined: {
borderColor: palette.grey[300],
'&:hover': { borderColor: palette.grey[400], backgroundColor: palette.grey[50] }
},
text: { '&:hover': { backgroundColor: palette.grey[100] } },
sizeLarge: { padding: '11px 24px', fontSize: '0.9375rem' },
sizeSmall: { padding: '5px 14px' },
// Give every button clear breathing room between its icon and label
startIcon: { marginRight: 10 },
endIcon: { marginLeft: 10 }
}
},
MuiIconButton: {
styleOverrides: { root: { borderRadius: 8 } }
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 14,
border: `1px solid ${palette.grey[200]}`,
boxShadow: customShadows.card,
backgroundImage: 'none',
transition: 'box-shadow .22s ease, border-color .22s ease, transform .22s ease'
}
}
},
MuiCardHeader: {
defaultProps: { titleTypographyProps: { variant: 'h5' }, subheaderTypographyProps: { variant: 'caption' } },
styleOverrides: { root: { padding: 20 } }
},
MuiCardContent: {
styleOverrides: { root: { padding: 20, '&:last-child': { paddingBottom: 20 } } }
},
MuiPaper: {
defaultProps: { elevation: 0 },
styleOverrides: { rounded: { borderRadius: 14 } }
},
MuiToggleButtonGroup: {
styleOverrides: {
root: { backgroundColor: palette.grey[100], borderRadius: 10, padding: 4, gap: 4 },
grouped: {
border: 0,
borderRadius: '8px !important',
margin: 0
}
}
},
MuiToggleButton: {
styleOverrides: {
root: {
border: 0,
borderRadius: 8,
padding: '6px 12px',
color: palette.grey[600],
transition: 'all .18s ease',
'&:hover': { backgroundColor: palette.grey[200] },
'&.Mui-selected': {
backgroundColor: palette.background.paper,
color: palette.primary.main,
boxShadow: customShadows.card,
'&:hover': { backgroundColor: palette.background.paper }
}
}
}
},
MuiChip: {
styleOverrides: {
root: { borderRadius: 6, fontWeight: 600, fontSize: '0.75rem' },
sizeSmall: { height: 22 },
label: { paddingLeft: 8, paddingRight: 8 }
}
},
MuiTableCell: {
styleOverrides: {
root: { borderColor: palette.grey[200], padding: '12px 16px', fontSize: '0.8125rem' },
head: {
fontWeight: 600,
color: palette.grey[600],
backgroundColor: palette.grey[50],
textTransform: 'none',
whiteSpace: 'nowrap'
}
}
},
MuiTableRow: {
styleOverrides: {
root: { transition: 'background-color .15s ease', '&:hover': { backgroundColor: palette.grey[50] } }
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: 8,
backgroundColor: palette.background.paper,
transition: 'box-shadow .2s ease, border-color .2s ease',
'& .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[300], transition: 'border-color .2s ease' },
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[400] },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: palette.primary.main, borderWidth: 1 }
},
input: { padding: '11px 14px' }
}
},
MuiSelect: {
styleOverrides: {
select: {
paddingTop: '11px',
paddingBottom: '11px',
paddingLeft: '14px',
display: 'flex',
alignItems: 'center'
}
}
},
MuiInputLabel: {
styleOverrides: { root: { color: palette.grey[600], fontSize: '0.875rem' } }
},
MuiTab: {
styleOverrides: {
root: { textTransform: 'none', fontWeight: 600, minHeight: 46, fontSize: '0.875rem' }
}
},
MuiTabs: {
styleOverrides: { indicator: { height: 3, borderRadius: 3 } }
},
MuiTooltip: {
styleOverrides: {
tooltip: { backgroundColor: palette.grey[800], borderRadius: 6, fontSize: '0.75rem', padding: '6px 10px' }
}
},
MuiDialog: {
styleOverrides: { paper: { borderRadius: 16 } }
},
MuiAvatar: {
styleOverrides: { root: { fontWeight: 600, fontSize: '0.875rem' } }
},
MuiListItemButton: {
styleOverrides: { root: { borderRadius: 8 } }
},
MuiLinearProgress: {
styleOverrides: { root: { borderRadius: 8, height: 6, backgroundColor: palette.grey[200] } }
},
MuiMenu: {
styleOverrides: { paper: { borderRadius: 12, boxShadow: customShadows.dropdown, marginTop: 6, border: `1px solid ${palette.grey[200]}` } }
},
MuiMenuItem: {
styleOverrides: {
root: {
borderRadius: 8,
margin: '2px 6px',
padding: '8px 10px',
fontSize: '0.875rem',
'&:hover': { backgroundColor: palette.grey[100] }
}
}
}
};
}

20
src/theme/index.js Normal file
View File

@@ -0,0 +1,20 @@
import { createTheme } from '@mui/material/styles';
import palette from './palette';
import typography from './typography';
import customShadows from './shadows';
import componentsOverride from './componentsOverride';
// ==============================|| DOORMILE THEME - ENTRY ||============================== //
let theme = createTheme({
palette,
typography,
shape: { borderRadius: 6 },
customShadows,
mixins: { toolbar: { minHeight: 64 } }
});
theme.components = componentsOverride(theme);
export default theme;

102
src/theme/palette.js Normal file
View File

@@ -0,0 +1,102 @@
// ==============================|| DOORMILE THEME - PALETTE ||============================== //
// Corporate red brand palette. Brand red #C01227.
export const grey = {
0: '#FFFFFF',
50: '#F8F9FA',
100: '#F1F3F5',
200: '#E9ECEF',
300: '#DEE2E6',
400: '#CED4DA',
500: '#ADB5BD',
600: '#868E96',
700: '#495057',
800: '#343A40', // Slate
900: '#212529', // Graphite
A50: '#F8F9FA',
A100: '#E9ECEF'
};
const palette = {
mode: 'light',
common: { black: '#000000', white: '#FFFFFF' },
primary: {
lighter: '#F8E0E3',
100: '#EFBBC1',
200: '#E08A92',
light: '#D6515C',
400: '#CC2E3C',
main: '#C01227',
dark: '#9E0E20',
700: '#870C1B',
darker: '#7E0B17',
900: '#520710',
contrastText: '#FFFFFF'
},
secondary: {
lighter: grey[100],
100: grey[100],
200: grey[200],
light: grey[300],
400: grey[400],
main: grey[500],
600: grey[600],
dark: grey[700],
800: grey[800],
darker: grey[900],
A100: grey[0],
A200: grey[400],
A300: grey[700],
contrastText: grey[0]
},
error: {
lighter: '#FEEAE9',
light: '#F88078',
main: '#F04134',
dark: '#A82216',
darker: '#7A150C',
contrastText: '#FFFFFF'
},
warning: {
lighter: '#FFF7E0',
light: '#FFD666',
main: '#FFBF00',
dark: '#B38600',
darker: '#805F00',
contrastText: '#262626'
},
info: {
lighter: '#E0F7F8',
light: '#66CBD2',
main: '#00A2AE',
dark: '#00727B',
darker: '#005159',
contrastText: '#FFFFFF'
},
success: {
lighter: '#E3F6EC',
light: '#5CC98C',
main: '#00A854',
dark: '#00773B',
darker: '#00552A',
contrastText: '#FFFFFF'
},
grey,
text: {
primary: grey[800],
secondary: grey[600],
disabled: grey[400]
},
action: {
disabled: grey[300],
hover: 'rgba(192, 18, 39, 0.04)',
selected: 'rgba(192, 18, 39, 0.08)'
},
divider: grey[200],
background: {
paper: '#FFFFFF',
default: grey.A50
}
};
export default palette;

15
src/theme/shadows.js Normal file
View File

@@ -0,0 +1,15 @@
// ==============================|| DOORMILE THEME - CUSTOM SHADOWS ||============================== //
// Layered elevation (a tight contact shadow + a soft ambient shadow) reads far more
// premium than a single blurry drop shadow. Brand glow on CTAs is kept restrained.
const customShadows = {
card: '0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06)',
cardHover: '0 10px 28px -6px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05)',
widget: '0 1px 3px rgba(16, 24, 40, 0.06)',
dropdown: '0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 4px 10px rgba(16, 24, 40, 0.06)',
primaryGlow: '0 4px 12px -2px rgba(192, 18, 39, 0.22)',
primaryGlowHover: '0 6px 16px -2px rgba(192, 18, 39, 0.30)',
header: '0 1px 0 rgba(16, 24, 40, 0.06)'
};
export default customShadows;

28
src/theme/typography.js Normal file
View File

@@ -0,0 +1,28 @@
// ==============================|| DOORMILE THEME - TYPOGRAPHY ||============================== //
// A deliberate type scale with optical tracking: large display text gets tighter
// negative letter-spacing, small UI text stays legible. Optical tracking like this
// is what separates a designed interface from a default Material build.
const typography = {
fontFamily: '"Public Sans", "Inter", "Helvetica", "Arial", sans-serif',
htmlFontSize: 16,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
h1: { fontWeight: 800, fontSize: '2.375rem', lineHeight: 1.15, letterSpacing: '-0.022em' },
h2: { fontWeight: 800, fontSize: '1.875rem', lineHeight: 1.2, letterSpacing: '-0.02em' },
h3: { fontWeight: 700, fontSize: '1.5rem', lineHeight: 1.28, letterSpacing: '-0.018em' },
h4: { fontWeight: 700, fontSize: '1.25rem', lineHeight: 1.35, letterSpacing: '-0.014em' },
h5: { fontWeight: 700, fontSize: '1rem', lineHeight: 1.5, letterSpacing: '-0.01em' },
h6: { fontWeight: 600, fontSize: '0.875rem', lineHeight: 1.57, letterSpacing: '-0.006em' },
caption: { fontWeight: 400, fontSize: '0.75rem', lineHeight: 1.66 },
body1: { fontSize: '0.875rem', lineHeight: 1.6, letterSpacing: '-0.003em' },
body2: { fontSize: '0.75rem', lineHeight: 1.66 },
subtitle1: { fontSize: '0.875rem', fontWeight: 600, lineHeight: 1.57, letterSpacing: '-0.006em' },
subtitle2: { fontSize: '0.75rem', fontWeight: 600, lineHeight: 1.66 },
overline: { fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' },
button: { textTransform: 'none', fontWeight: 600, letterSpacing: '-0.006em' }
};
export default typography;