141 lines
3.2 KiB
TypeScript
141 lines
3.2 KiB
TypeScript
import { createTheme, rem } from '@mantine/core';
|
|
|
|
export const theme = createTheme({
|
|
/** Color system for the application */
|
|
colors: {
|
|
// Primary brand color (blue shades from inventory with consistent gradation)
|
|
'brand-primary': [
|
|
'#EAF4FF', // 0: Lightest shade
|
|
'#D5E9FF', // 1
|
|
'#B0D3FF', // 2
|
|
'#8BBDFF', // 3
|
|
'#66A7FF', // 4: Base blue shade
|
|
'#4191FF', // 5
|
|
'#1C7BFF', // 6
|
|
'#0065F2', // 7: Original blue-7 shade
|
|
'#0055CC', // 8
|
|
'#004099', // 9: Darkest shade
|
|
],
|
|
|
|
// Secondary brand color - a complementary shade to the primary
|
|
'brand-secondary': [
|
|
'#F0F4F9', // 0
|
|
'#E1E9F4', // 1
|
|
'#C3D4E9', // 2
|
|
'#A5BFDE', // 3
|
|
'#87AAD3', // 4
|
|
'#6995C8', // 5
|
|
'#4B80BD', // 6
|
|
'#2D6BB2', // 7
|
|
'#1F5A99', // 8
|
|
'#114480', // 9
|
|
],
|
|
|
|
// Accent color for highlights, call to actions, important elements
|
|
'brand-accent': [
|
|
'#FFF0EA', // 0
|
|
'#FFE1D5', // 1
|
|
'#FFC3AD', // 2
|
|
'#FFA584', // 3
|
|
'#FF875B', // 4
|
|
'#FF6932', // 5
|
|
'#FF4A09', // 6
|
|
'#D93A00', // 7
|
|
'#B02F00', // 8
|
|
'#882400', // 9
|
|
],
|
|
|
|
// Standardized gray shades for consistency
|
|
'brand-gray': [
|
|
'#F8F9FA', // 0
|
|
'#F1F3F5', // 1
|
|
'#E9ECEF', // 2
|
|
'#DEE2E6', // 3
|
|
'#CED4DA', // 4
|
|
'#ADB5BD', // 5
|
|
'#868E96', // 6
|
|
'#495057', // 7
|
|
'#343A40', // 8
|
|
'#212529', // 9
|
|
],
|
|
|
|
// Semantic colors for state indications
|
|
success: [
|
|
'#EAFAF1', // 0
|
|
'#D5F5E3', // 1
|
|
'#ABEBC6', // 2
|
|
'#82E0AA', // 3
|
|
'#58D68D', // 4
|
|
'#2ECC71', // 5
|
|
'#27AE60', // 6
|
|
'#229954', // 7
|
|
'#1E8449', // 8
|
|
'#196F3D', // 9
|
|
],
|
|
|
|
warning: [
|
|
'#FEF9E7', // 0
|
|
'#FCF3CF', // 1
|
|
'#F9E79F', // 2
|
|
'#F7DC6F', // 3
|
|
'#F4D03F', // 4
|
|
'#F1C40F', // 5
|
|
'#D4AC0D', // 6
|
|
'#B7950B', // 7
|
|
'#9A7D0A', // 8
|
|
'#7D6608', // 9
|
|
],
|
|
|
|
error: [
|
|
'#FDEDEC', // 0
|
|
'#FADBD8', // 1
|
|
'#F5B7B1', // 2
|
|
'#F1948A', // 3
|
|
'#EC7063', // 4
|
|
'#E74C3C', // 5
|
|
'#CB4335', // 6
|
|
'#B03A2E', // 7
|
|
'#943126', // 8
|
|
'#78281F', // 9
|
|
],
|
|
},
|
|
|
|
// Set the primary color to our brand-primary
|
|
primaryColor: 'brand-primary',
|
|
|
|
// Add consistent spacing values
|
|
spacing: {
|
|
xs: rem(4),
|
|
sm: rem(8),
|
|
md: rem(16),
|
|
lg: rem(24),
|
|
xl: rem(32),
|
|
'2xl': rem(40),
|
|
'3xl': rem(64),
|
|
},
|
|
|
|
// Add consistent border radius values
|
|
radius: {
|
|
xs: rem(2),
|
|
sm: rem(4),
|
|
md: rem(8),
|
|
lg: rem(16),
|
|
xl: rem(24),
|
|
},
|
|
|
|
// Other theme customizations
|
|
fontFamily:
|
|
'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
|
|
// Add semantic tokens for common elements
|
|
other: {
|
|
headerBgColor: 'var(--mantine-color-body)',
|
|
headerBorderColor: 'var(--mantine-color-brand-gray-3)',
|
|
navigationActiveColor: 'var(--mantine-color-brand-primary-6)',
|
|
navigationHoverColor: 'var(--mantine-color-brand-primary-0)',
|
|
buttonPrimaryBg: 'var(--mantine-color-brand-primary-6)',
|
|
buttonSecondaryBg: 'var(--mantine-color-brand-secondary-6)',
|
|
buttonAccentBg: 'var(--mantine-color-brand-accent-6)',
|
|
},
|
|
});
|