101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# Design System & Component Guidelines
|
|
|
|
> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes.
|
|
|
|
## 🔒 Style System Lock Status
|
|
|
|
**DO NOT:**
|
|
- ❌ Create new CSS classes without documenting in this file
|
|
- ❌ Duplicate existing styling patterns
|
|
- ❌ Create custom colors/utilities that already exist
|
|
- ❌ Modify core classes (`.igny8-table-compact`, etc.) without updating documentation
|
|
- ❌ Add inline styles for colors/spacing/typography
|
|
|
|
**DO:**
|
|
- ✅ Check this document before creating any styles
|
|
- ✅ Use existing classes from `igny8-colors.css`
|
|
- ✅ Use Tailwind defaults where possible
|
|
- ✅ Follow component patterns from this guide
|
|
- ✅ Update this document if you MUST add something new
|
|
|
|
Any new styling that duplicates existing functionality or creates new classes without documentation will be considered technical debt.
|
|
|
|
---
|
|
|
|
## Core Principles
|
|
|
|
### 1. **Reuse Existing Components Only**
|
|
- ✅ **DO**: Use existing components from `/src/components/ui/` and `/src/components/common/`
|
|
- ❌ **DON'T**: Create new components unless explicitly required and approved
|
|
- ❌ **DON'T**: Duplicate existing component functionality
|
|
|
|
### 2. **No Inline Styles**
|
|
- ✅ **DO**: Use Tailwind CSS utility classes
|
|
- ✅ **DO**: Use existing CSS classes from the design system
|
|
- ✅ **DO**: Use existing component props for styling
|
|
- ❌ **DON'T**: Use inline `style` attributes
|
|
- ❌ **DON'T**: Use inline `style={{}}` in JSX
|
|
|
|
### 3. **Component Consistency**
|
|
- All UI Elements pages should follow the same structure:
|
|
- Use `PageMeta` for SEO
|
|
- Use `PageBreadcrumb` for navigation
|
|
- Use `ComponentCard` for consistent card styling
|
|
- Import and use existing reusable components
|
|
|
|
### 4. **Available Component Libraries**
|
|
|
|
#### UI Components (`/src/components/ui/`)
|
|
- `alert/` - Alert components
|
|
- `avatar/` - Avatar components
|
|
- `badge/` - Badge components
|
|
- `breadcrumb/` - Breadcrumb navigation
|
|
- `button/` - Button components
|
|
- `button-group/` - Button group components
|
|
- `card/` - Card components
|
|
- `dropdown/` - Dropdown menu components
|
|
- `images/` - Image components
|
|
- `list/` - List components
|
|
- `modal/` - Modal components
|
|
- `pagination/` - Pagination components
|
|
- `progress/` - Progress bar components
|
|
- `ribbon/` - Ribbon components
|
|
- `spinner/` - Spinner/loading components
|
|
- `tabs/` - Tab components
|
|
- `table/` - Table components
|
|
- `toast/` - Toast notification components
|
|
- `tooltip/` - Tooltip components
|
|
- `videos/` - Video components
|
|
|
|
#### Common Components (`/src/components/common/`)
|
|
- `ComponentCard` - Consistent card wrapper for component showcases
|
|
- `PageBreadcrumb` - Breadcrumb navigation
|
|
- `PageMeta` - SEO meta tags
|
|
- `ConfirmDialog` - Confirmation dialogs
|
|
- `FormModal` - Form modals (when available)
|
|
|
|
### 5. **Styling Guidelines**
|
|
- Use Tailwind CSS classes exclusively
|
|
- Follow the existing color scheme from `igny8-colors.css`
|
|
- Use dark mode variants: `dark:bg-gray-900`, `dark:text-white`, etc.
|
|
- Maintain consistent spacing using Tailwind spacing scale
|
|
- Use existing utility classes: `shadow-theme-xs`, `text-theme-sm`, etc.
|
|
|
|
### 6. **When Creating New Components is Acceptable**
|
|
Only create new components if:
|
|
1. Explicitly requested by the user
|
|
2. Documented in an approved feature request
|
|
3. No existing component can be adapted or extended
|
|
|
|
### 7. **Checking for Existing Components**
|
|
Before implementing any UI element:
|
|
1. Search existing components in `/src/components/ui/`
|
|
2. Check common components in `/src/components/common/`
|
|
3. Review existing UI Elements pages for patterns
|
|
4. Check if similar functionality exists in other modules
|
|
|
|
---
|
|
|
|
**Last Updated**: Current Session
|
|
**Status**: Active Design System Rules
|