Remove color inventory and migration guide documentation: delete color-inventory.md and color-migration-guide.md files to streamline the codebase and eliminate outdated references.
This commit is contained in:
Craig
@@ -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
|
|
||||||
@@ -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
|
|
||||||
<Box style={{ color: theme.colors.blue[6] }} />
|
|
||||||
|
|
||||||
// After
|
|
||||||
<Box style={{ color: 'var(--mantine-color-brand-primary-6)' }} />
|
|
||||||
|
|
||||||
// Or better, use Mantine props
|
|
||||||
<Box c="brand-primary.6" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
|
||||||
<Button
|
|
||||||
style={{
|
|
||||||
backgroundColor: theme.colors.blue[6],
|
|
||||||
color: 'white'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
// After
|
|
||||||
<Button color="brand-primary">Click me</Button>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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.
|
|
||||||
Reference in New Issue
Block a user