79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
|
# H2-H6 Standardization Plan
|
||
|
|
|
||
|
|
**Date**: 2025-01-27
|
||
|
|
**Action**: 7.1.2.3 - Standardize h2-h6 elements
|
||
|
|
**Status**: In Progress
|
||
|
|
|
||
|
|
## Standard Typography Hierarchy
|
||
|
|
|
||
|
|
Based on the type scale and h1 standardization (text-3xl), the standard hierarchy is:
|
||
|
|
|
||
|
|
- **h1**: `text-3xl` (30px) - Page titles ✅ Already standardized
|
||
|
|
- **h2**: `text-2xl` (24px) - Major section headings
|
||
|
|
- **h3**: `text-xl` (20px) - Subsection headings
|
||
|
|
- **h4**: `text-lg` (18px) - Minor section headings
|
||
|
|
- **h5**: `text-base` (16px) - Small headings
|
||
|
|
- **h6**: `text-sm` (14px) - Smallest headings
|
||
|
|
|
||
|
|
## Current State Analysis
|
||
|
|
|
||
|
|
### H2 Elements (86 with explicit sizes)
|
||
|
|
- `text-3xl`: ~20 instances (should be `text-2xl` for consistency)
|
||
|
|
- `text-2xl`: ~40 instances ✅ Correct
|
||
|
|
- `text-xl`: ~15 instances (should be `text-2xl`)
|
||
|
|
- `text-xs`: ~1 instance (Sidebar - special case, may keep)
|
||
|
|
- No size: ~10 instances (should add `text-2xl`)
|
||
|
|
|
||
|
|
### H3 Elements (109 with explicit sizes)
|
||
|
|
- `text-lg`: ~30 instances (should be `text-xl`)
|
||
|
|
- `text-xl`: ~25 instances ✅ Correct
|
||
|
|
- `text-2xl`: ~10 instances (should be `text-xl`)
|
||
|
|
- `text-sm`: ~15 instances (should be `text-xl` unless truly small)
|
||
|
|
- `text-base`: ~10 instances (should be `text-xl`)
|
||
|
|
- No size: ~19 instances (should add `text-xl`)
|
||
|
|
|
||
|
|
### H4-H6 Elements
|
||
|
|
- Mostly use `text-lg`, `text-sm`, `text-base` inconsistently
|
||
|
|
- Need standardization to `text-lg` (h4), `text-base` (h5), `text-sm` (h6)
|
||
|
|
|
||
|
|
## Standardization Strategy
|
||
|
|
|
||
|
|
1. **H2 Elements**: Standardize to `text-2xl`
|
||
|
|
- Exception: Sidebar navigation labels with `text-xs` (keep as special case)
|
||
|
|
- Exception: Design system demo pages (keep as-is for demonstration)
|
||
|
|
|
||
|
|
2. **H3 Elements**: Standardize to `text-xl`
|
||
|
|
- Exception: Very small labels/captions (keep `text-sm` if appropriate)
|
||
|
|
|
||
|
|
3. **H4 Elements**: Standardize to `text-lg`
|
||
|
|
|
||
|
|
4. **H5 Elements**: Standardize to `text-base`
|
||
|
|
|
||
|
|
5. **H6 Elements**: Standardize to `text-sm`
|
||
|
|
|
||
|
|
## Implementation Approach
|
||
|
|
|
||
|
|
1. Start with h2 elements (most visible)
|
||
|
|
2. Then h3 elements
|
||
|
|
3. Then h4-h6 elements
|
||
|
|
4. Verify no visual regressions
|
||
|
|
5. Update TODO list
|
||
|
|
|
||
|
|
## Files Requiring Changes
|
||
|
|
|
||
|
|
### High Priority (H2 inconsistencies):
|
||
|
|
- Files with h2 using `text-3xl` (should be `text-2xl`)
|
||
|
|
- Files with h2 using `text-xl` (should be `text-2xl`)
|
||
|
|
- Files with h2 without explicit size (should add `text-2xl`)
|
||
|
|
|
||
|
|
### Medium Priority (H3 inconsistencies):
|
||
|
|
- Files with h3 using `text-lg` (should be `text-xl`)
|
||
|
|
- Files with h3 using `text-2xl` (should be `text-xl`)
|
||
|
|
- Files with h3 without explicit size (should add `text-xl`)
|
||
|
|
|
||
|
|
## Special Cases to Preserve
|
||
|
|
|
||
|
|
1. **Sidebar navigation**: `text-xs` for h2/h3 labels (intentional small size)
|
||
|
|
2. **Design system demos**: Keep existing sizes for demonstration purposes
|
||
|
|
3. **Responsive patterns**: Preserve responsive variants (e.g., `text-xl md:text-2xl`)
|