100 lines
No EOL
2 KiB
TypeScript
100 lines
No EOL
2 KiB
TypeScript
import { createTheme, MantineColorsTuple } from '@mantine/core';
|
|
|
|
// Color Psychology:
|
|
// Primary (Blue-Purple gradient): Trust, innovation, creativity
|
|
// Accent (Coral): Energy, friendliness, approachability
|
|
// Success (Teal): Growth, clarity, balance
|
|
// Dark mode optimized for reduced eye strain
|
|
|
|
const primary: MantineColorsTuple = [
|
|
'#f3f0ff',
|
|
'#e5deff',
|
|
'#c8b9ff',
|
|
'#ab91ff',
|
|
'#9670ff',
|
|
'#8759ff',
|
|
'#7d4cff',
|
|
'#6b3de6',
|
|
'#5f35cc',
|
|
'#512ab3'
|
|
];
|
|
|
|
const accent: MantineColorsTuple = [
|
|
'#fff0ec',
|
|
'#ffe0d6',
|
|
'#ffbfa8',
|
|
'#ff9b76',
|
|
'#ff7d4d',
|
|
'#ff6933',
|
|
'#ff5e26',
|
|
'#e44d1a',
|
|
'#ca4217',
|
|
'#b13812'
|
|
];
|
|
|
|
const teal: MantineColorsTuple = [
|
|
'#e6fcf5',
|
|
'#c3fae8',
|
|
'#96f2d7',
|
|
'#63e6be',
|
|
'#38d9a9',
|
|
'#20c997',
|
|
'#12b886',
|
|
'#0ca678',
|
|
'#099268',
|
|
'#087f5b'
|
|
];
|
|
|
|
export const theme = createTheme({
|
|
primaryColor: 'brand',
|
|
colors: {
|
|
brand: primary,
|
|
accent: accent,
|
|
teal: teal
|
|
},
|
|
|
|
// Modern, clean typography
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
fontFamilyMonospace: '"Fira Code", "JetBrains Mono", monospace',
|
|
|
|
// Smooth shadows for depth
|
|
shadows: {
|
|
xs: '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',
|
|
sm: '0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06)',
|
|
md: '0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05)',
|
|
lg: '0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.04)',
|
|
xl: '0 25px 50px rgba(0, 0, 0, 0.06)'
|
|
},
|
|
|
|
// Smooth radius for modern feel
|
|
radius: {
|
|
xs: '4px',
|
|
sm: '8px',
|
|
md: '12px',
|
|
lg: '16px',
|
|
xl: '24px'
|
|
},
|
|
|
|
// Enhanced focus styles for accessibility
|
|
focusRing: 'auto',
|
|
|
|
// Component specific styles
|
|
components: {
|
|
Button: {
|
|
defaultProps: {
|
|
radius: 'md'
|
|
}
|
|
},
|
|
Card: {
|
|
defaultProps: {
|
|
radius: 'lg',
|
|
shadow: 'sm'
|
|
}
|
|
},
|
|
Code: {
|
|
defaultProps: {
|
|
radius: 'sm'
|
|
}
|
|
}
|
|
}
|
|
}); |