2.8 KiB
2.8 KiB
Current Color Usage Inventory
Mantine Color Variables Used
Basic Colors
- White:
var(--mantine-color-white) - Black:
var(--mantine-color-black) - Body:
var(--mantine-color-body)
Blue Shades
- Blue-0:
var(--mantine-color-blue-0) - Blue-1:
var(--mantine-color-blue-1) - Blue-4:
var(--mantine-color-blue-4) - Blue-6:
var(--mantine-color-blue-6) - Blue-7:
var(--mantine-color-blue-7) - Blue-filled:
var(--mantine-color-blue-filled)
Gray Shades
- Gray-0:
var(--mantine-color-gray-0) - Gray-3:
var(--mantine-color-gray-3) - Gray-4:
var(--mantine-color-gray-4) - Gray-5:
var(--mantine-color-gray-5) - Gray-7:
var(--mantine-color-gray-7)
Dark Shades
- Dark-0:
var(--mantine-color-dark-0) - Dark-4:
var(--mantine-color-dark-4) - Dark-6:
var(--mantine-color-dark-6) - Dark-8:
var(--mantine-color-dark-8)
Color Usage By Component
HeroTitle
- Background:
light-dark(var(--mantine-color-white), var(--mantine-color-dark-8)) - Text:
light-dark(var(--mantine-color-black), var(--mantine-color-white))
Welcome
- Text:
light-dark(var(--mantine-color-black), var(--mantine-color-white))
HeaderSimple
- Background:
var(--mantine-color-body) - Border:
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) - Text:
light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)) - Menu Background:
light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)) - Active Item Background:
var(--mantine-color-blue-filled) - Active Item Text:
var(--mantine-color-white)
ContactIcons
- Icon Color:
var(--mantine-color-white) - Icon Hover Color:
var(--mantine-color-blue-0) - Text Color:
var(--mantine-color-white)
Contact
- Background:
light-dark(var(--mantine-color-white), var(--mantine-color-dark-8))
ContactUs
- Gradient:
linear-gradient(to bottom right, var(--mantine-color-blue-4) 0%, var(--mantine-color-blue-7) 100%) - Title Color:
var(--mantine-color-white) - Subtitle Color:
var(--mantine-color-blue-0) - Form Background:
var(--mantine-color-white) - Form Button Text:
var(--mantine-color-white) - Form Button Hover:
var(--mantine-color-blue-1) - Input Background:
var(--mantine-color-white) - Input Border:
var(--mantine-color-gray-4) - Input Text:
var(--mantine-color-black) - Input Placeholder:
var(--mantine-color-gray-5) - Submit Button Background:
var(--mantine-color-blue-6)
Issues Identified
- Inconsistent use of blue shades across components
- Mix of direct color variables and light-dark functions
- No centralized theme definition with brand colors
- No semantic color naming (e.g., primary, secondary, etc.)
Next Steps
- Define a comprehensive color palette in theme.ts
- Create semantic color tokens
- Standardize light/dark mode transitions