272 lines
6.7 KiB
Markdown
272 lines
6.7 KiB
Markdown
# Badge/Label Patterns - Course Platform
|
|
|
|
## Overview
|
|
|
|
This document defines the standardized badge/label patterns used throughout the course platform application. All badges should follow these patterns to ensure consistency across the UI.
|
|
|
|
## Base Badge Style
|
|
|
|
All badges use a modern UI pattern with:
|
|
- **Size**: `px-2.5 py-0.5` (horizontal padding 0.625rem, vertical padding 0.125rem)
|
|
- **Shape**: `rounded-full` (fully rounded corners)
|
|
- **Typography**: `text-[11px] tracking-wide uppercase` (11px font, wide letter spacing, uppercase text)
|
|
- **Layout**: `inline-flex items-center` (flexbox with centered items)
|
|
- **Transition**: `transition-colors` (smooth color transitions)
|
|
|
|
## Color Patterns
|
|
|
|
### Emerald (Success/Active Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-emerald-50`
|
|
- Text: `text-emerald-700`
|
|
- Border: `border border-emerald-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-emerald-500/10`
|
|
- Text: `dark:text-emerald-400`
|
|
- Border: `dark:border-emerald-500/20`
|
|
|
|
**Usage:** Active status, completed items, success states, positive indicators
|
|
|
|
---
|
|
|
|
### Blue (Info/Primary Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-blue-50`
|
|
- Text: `text-blue-700`
|
|
- Border: `border border-blue-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-blue-500/10`
|
|
- Text: `dark:text-blue-400`
|
|
- Border: `dark:border-blue-500/20`
|
|
|
|
**Usage:** Informational status, primary actions, neutral indicators
|
|
|
|
---
|
|
|
|
### Red (Error/Danger Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-red-50`
|
|
- Text: `text-red-700`
|
|
- Border: `border border-red-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-red-500/10`
|
|
- Text: `dark:text-red-400`
|
|
- Border: `dark:border-red-500/20`
|
|
|
|
**Usage:** Error states, danger warnings, negative indicators, failed status
|
|
|
|
---
|
|
|
|
### Amber (Warning Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-amber-50`
|
|
- Text: `text-amber-700`
|
|
- Border: `border border-amber-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-amber-500/10`
|
|
- Text: `dark:text-amber-400`
|
|
- Border: `dark:border-amber-500/20`
|
|
|
|
**Usage:** Warning states, caution indicators, pending actions
|
|
|
|
---
|
|
|
|
### Yellow (Caution Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-yellow-50`
|
|
- Text: `text-yellow-700`
|
|
- Border: `border border-yellow-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-yellow-500/10`
|
|
- Text: `dark:text-yellow-400`
|
|
- Border: `dark:border-yellow-500/20`
|
|
|
|
**Usage:** Caution indicators, attention needed, minor warnings
|
|
|
|
---
|
|
|
|
### Purple (Special/Featured Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-purple-50`
|
|
- Text: `text-purple-700`
|
|
- Border: `border border-purple-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-purple-500/10`
|
|
- Text: `dark:text-purple-400`
|
|
- Border: `dark:border-purple-500/20`
|
|
|
|
**Usage:** Featured items, special categories, premium content
|
|
|
|
---
|
|
|
|
### Indigo (Secondary Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-indigo-50`
|
|
- Text: `text-indigo-700`
|
|
- Border: `border border-indigo-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-indigo-500/10`
|
|
- Text: `dark:text-indigo-400`
|
|
- Border: `dark:border-indigo-500/20`
|
|
|
|
**Usage:** Secondary status, alternative categories, supplementary info
|
|
|
|
---
|
|
|
|
### Gray (Neutral/Default Status)
|
|
|
|
**Light Mode:**
|
|
- Background: `bg-gray-50`
|
|
- Text: `text-gray-700`
|
|
- Border: `border border-gray-200/60`
|
|
|
|
**Dark Mode:**
|
|
- Background: `dark:bg-gray-500/10`
|
|
- Text: `dark:text-gray-400`
|
|
- Border: `dark:border-gray-500/20`
|
|
|
|
**Usage:** Default status, neutral indicators, inactive states
|
|
|
|
---
|
|
|
|
## Usage with @apply Classes
|
|
|
|
To reduce HTML class clutter, use the predefined CSS classes in `globals.css`:
|
|
|
|
```jsx
|
|
// Emerald badge
|
|
<span className="badge-emerald">Active</span>
|
|
|
|
// Blue badge
|
|
<span className="badge-blue">Info</span>
|
|
|
|
// Red badge
|
|
<span className="badge-red">Error</span>
|
|
|
|
// Amber badge
|
|
<span className="badge-amber">Warning</span>
|
|
|
|
// Yellow badge
|
|
<span className="badge-yellow">Caution</span>
|
|
|
|
// Purple badge
|
|
<span className="badge-purple">Featured</span>
|
|
|
|
// Indigo badge
|
|
<span className="badge-indigo">Secondary</span>
|
|
|
|
// Gray badge
|
|
<span className="badge-gray">Inactive</span>
|
|
```
|
|
|
|
## Full Tailwind Classes (Reference)
|
|
|
|
If you need to use the full Tailwind classes directly:
|
|
|
|
```jsx
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] tracking-wide uppercase bg-emerald-50 text-emerald-700 border border-emerald-200/60 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20 transition-colors">
|
|
Status
|
|
</span>
|
|
```
|
|
|
|
## Common Use Cases
|
|
|
|
### Status Badges
|
|
|
|
| Status | Color | Class |
|
|
|--------|-------|-------|
|
|
| Active | Emerald | `badge-emerald` |
|
|
| Inactive | Gray | `badge-gray` |
|
|
| Pending | Amber | `badge-amber` |
|
|
| Completed | Emerald | `badge-emerald` |
|
|
| Cancelled | Red | `badge-red` |
|
|
| Draft | Gray | `badge-gray` |
|
|
| Published | Emerald | `badge-emerald` |
|
|
|
|
### Payment Status
|
|
|
|
| Status | Color | Class |
|
|
|--------|-------|-------|
|
|
| Paid | Emerald | `badge-emerald` |
|
|
| Unpaid | Red | `badge-red` |
|
|
| Partial | Amber | `badge-amber` |
|
|
| Overdue | Red | `badge-red` |
|
|
|
|
### Attendance Status
|
|
|
|
| Status | Color | Class |
|
|
|--------|-------|-------|
|
|
| Present | Emerald | `badge-emerald` |
|
|
| Absent | Red | `badge-red` |
|
|
| Late | Amber | `badge-amber` |
|
|
| Excused | Blue | `badge-blue` |
|
|
|
|
### Exam Status
|
|
|
|
| Status | Color | Class |
|
|
|--------|-------|-------|
|
|
| Available | Emerald | `badge-emerald` |
|
|
| Completed | Blue | `badge-blue` |
|
|
| Graded | Purple | `badge-purple` |
|
|
| Pending | Amber | `badge-amber` |
|
|
|
|
### Content Categories
|
|
|
|
| Category | Color | Class |
|
|
|----------|-------|-------|
|
|
| Slides | Blue | `badge-blue` |
|
|
| Exercises | Emerald | `badge-emerald` |
|
|
| Reading | Purple | `badge-purple` |
|
|
| Videos | Red | `badge-red` |
|
|
| Audio | Amber | `badge-amber` |
|
|
| Assignments | Indigo | `badge-indigo` |
|
|
| Other | Gray | `badge-gray` |
|
|
|
|
## Implementation Notes
|
|
|
|
1. **Always use the @apply classes** (`badge-emerald`, `badge-blue`, etc.) instead of inline Tailwind classes for consistency
|
|
2. **Badge text should be short** (1-2 words) and in uppercase
|
|
3. **Use semantic colors** based on the meaning (emerald for success, red for danger, etc.)
|
|
4. **Ensure accessibility** by maintaining good contrast ratios in both light and dark modes
|
|
5. **Test in both themes** to verify proper appearance
|
|
|
|
## Migration Guide
|
|
|
|
When updating existing badges:
|
|
|
|
1. Replace long Tailwind class strings with the appropriate `badge-*` class
|
|
2. Ensure text content is uppercase
|
|
3. Verify the color matches the semantic meaning
|
|
4. Test in both light and dark themes
|
|
|
|
### Before:
|
|
```jsx
|
|
<span className="text-xs px-2 py-1 rounded-full border bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800">
|
|
Active
|
|
</span>
|
|
```
|
|
|
|
### After:
|
|
```jsx
|
|
<span className="badge-emerald">Active</span>
|
|
```
|
|
|
|
## Related Files
|
|
|
|
- `src/app/globals.css` - Contains all badge CSS classes with @apply
|
|
- `STYLE_GUIDE.md` - Overall style guide for the application
|