diff --git a/frontend/vite-template-master/color-inventory.md b/frontend/vite-template-master/color-inventory.md deleted file mode 100644 index ea6f8a1..0000000 --- a/frontend/vite-template-master/color-inventory.md +++ /dev/null @@ -1,78 +0,0 @@ -# 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 \ No newline at end of file diff --git a/frontend/vite-template-master/color-migration-guide.md b/frontend/vite-template-master/color-migration-guide.md deleted file mode 100644 index d8a8d7e..0000000 --- a/frontend/vite-template-master/color-migration-guide.md +++ /dev/null @@ -1,182 +0,0 @@ -# Color System Migration Guide - -This guide will help you migrate your components to use our new standardized color system. - -## Why Migrate? - -- **Consistency**: Ensure all UI elements have consistent colors -- **Maintainability**: Easier to update the design system -- **Accessibility**: Better contrast and readability -- **Dark Mode**: Simplified light/dark mode support - -## Migration Steps - -### 1. Identify Current Color Usage - -First, identify all hardcoded colors or direct Mantine color variables in your component: - -```css -/* Before */ -.element { - color: #333; - background-color: var(--mantine-color-blue-6); - border: 1px solid var(--mantine-color-gray-3); -} -``` - -### 2. Replace with Theme Color Tokens - -Replace hardcoded colors and direct Mantine variables with our standardized tokens: - -```css -/* After */ -.element { - color: var(--mantine-color-brand-gray-7); - background-color: var(--mantine-color-brand-primary-6); - border: 1px solid var(--mantine-color-brand-gray-3); -} -``` - -### 3. Use Semantic Color Tokens Where Available - -For common UI elements, use semantic tokens: - -```css -/* Before */ -.header { - background-color: var(--mantine-color-body); - border-bottom: 1px solid var(--mantine-color-gray-3); -} - -/* After */ -.header { - background-color: var(--mantine-other-headerBgColor); - border-bottom: 1px solid var(--mantine-other-headerBorderColor); -} -``` - -### 4. Use Light/Dark Mode Consistently - -For elements that need different colors in light/dark mode: - -```css -/* Before */ -.text { - color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); -} - -/* After */ -.text { - color: light-dark(var(--mantine-color-brand-gray-7), var(--mantine-color-brand-gray-0)); -} -``` - -### 5. Update Inline Styles in Components - -For inline styles in components: - -```tsx -// Before - - -// After - - -// Or better, use Mantine props - -``` - -## Mapping Old Colors to New Colors - -Use this reference to map old color values to our new color system: - -| Old Color | New Color | -|-----------|-----------| -| `var(--mantine-color-blue-0)` | `var(--mantine-color-brand-primary-0)` | -| `var(--mantine-color-blue-1)` | `var(--mantine-color-brand-primary-1)` | -| `var(--mantine-color-blue-4)` | `var(--mantine-color-brand-primary-4)` | -| `var(--mantine-color-blue-6)` | `var(--mantine-color-brand-primary-6)` | -| `var(--mantine-color-blue-7)` | `var(--mantine-color-brand-primary-7)` | -| `var(--mantine-color-blue-filled)` | `var(--mantine-other-navigationActiveColor)` | -| `var(--mantine-color-gray-0)` | `var(--mantine-color-brand-gray-0)` | -| `var(--mantine-color-gray-3)` | `var(--mantine-color-brand-gray-3)` | -| `var(--mantine-color-gray-4)` | `var(--mantine-color-brand-gray-4)` | -| `var(--mantine-color-gray-5)` | `var(--mantine-color-brand-gray-5)` | -| `var(--mantine-color-gray-7)` | `var(--mantine-color-brand-gray-7)` | -| `var(--mantine-color-dark-0)` | `var(--mantine-color-brand-gray-0)` | -| `var(--mantine-color-dark-4)` | `var(--mantine-color-brand-gray-4)` | -| `var(--mantine-color-dark-6)` | `var(--mantine-color-brand-gray-6)` | -| `var(--mantine-color-dark-8)` | `var(--mantine-color-brand-gray-8)` | - -## Examples - -### Header Component Example - -```css -/* Before */ -.header { - background-color: var(--mantine-color-body); - border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); -} - -.link { - color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); -} - -.link:hover { - background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); -} - -.active { - background-color: var(--mantine-color-blue-filled); - color: var(--mantine-color-white); -} - -/* After */ -.header { - background-color: var(--mantine-other-headerBgColor); - border-bottom: 1px solid var(--mantine-other-headerBorderColor); -} - -.link { - color: light-dark(var(--mantine-color-brand-gray-7), var(--mantine-color-brand-gray-0)); -} - -.link:hover { - background-color: light-dark(var(--mantine-color-brand-gray-1), var(--mantine-color-brand-gray-8)); -} - -.active { - background-color: var(--mantine-other-navigationActiveColor); - color: var(--mantine-color-white); -} -``` - -### Button Component Example - -```tsx -// Before - - -// After - -``` - -## Testing Your Migration - -After migrating, run stylelint to ensure you're not using hardcoded colors: - -```bash -yarn stylelint -``` - -## Need Help? - -Refer to the `color-tokens.md` file or the `ColorPalette` component in Storybook for a complete reference of our color system. \ No newline at end of file