Implement standardized color system: update theme with new color tokens, add color inventory and migration guide documentation, and create ColorPalette component for showcasing colors.

frontend/vite-template-master/color-inventory.md

@@ -0,0 +1,78 @@
+# 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