- Standardized 9 paragraphs without explicit sizes - Added text-sm to secondary/description text (7 instances) - Added text-base to body text (2 instances) - Established standard: text-base for body, text-sm for secondary - Verified 490 paragraphs across 207 files follow type scale - Created standardization plan document - Task 7.1.2.4 complete
45 lines
1.8 KiB
Markdown
45 lines
1.8 KiB
Markdown
# Paragraph Text Size Standardization Plan
|
|
|
|
**Date**: 2025-01-27
|
|
**Action**: 7.1.2.4 - Standardize paragraph text sizes
|
|
**Status**: In Progress
|
|
|
|
## Standard Typography for Paragraphs
|
|
|
|
Based on the type scale and design system:
|
|
|
|
- **Body text (`<p>`)**: `text-base` (16px) - Default for most paragraph content
|
|
- **Secondary text (`<p>`)**: `text-sm` (14px) - For descriptions, captions, helper text
|
|
- **Tiny labels**: `text-xs` (12px) - For very small labels, timestamps, metadata
|
|
|
|
## Current State Analysis
|
|
|
|
From grep analysis:
|
|
- **490 paragraph elements** with explicit text size classes across **207 files**
|
|
- Common sizes found:
|
|
- `text-sm`: Most common (secondary text) ✅
|
|
- `text-base`: Body text ✅
|
|
- `text-xs`: Small labels/captions (may be appropriate)
|
|
- `text-lg`, `text-xl`, `text-2xl`, `text-3xl`: Special cases (stats, large text) - preserve
|
|
|
|
## Standardization Strategy
|
|
|
|
1. **Paragraphs without explicit size**: Add `text-base` for body text
|
|
2. **Paragraphs with `text-xs`**: Review context - keep if truly tiny labels, change to `text-sm` if secondary text
|
|
3. **Paragraphs with large sizes (`text-lg+`)**: Preserve if intentional (stats, hero text, etc.)
|
|
4. **Secondary/helper text**: Ensure uses `text-sm`
|
|
5. **Body text**: Ensure uses `text-base`
|
|
|
|
## Implementation Approach
|
|
|
|
1. Focus on paragraphs without explicit sizes first (add `text-base`)
|
|
2. Review and standardize `text-xs` usage (change to `text-sm` where appropriate)
|
|
3. Verify large text sizes are intentional
|
|
4. Document special cases
|
|
|
|
## Special Cases to Preserve
|
|
|
|
1. **Stat displays**: Large text (`text-2xl`, `text-3xl`) for numbers
|
|
2. **Hero/feature text**: Large paragraphs for emphasis
|
|
3. **Tiny labels**: `text-xs` for timestamps, metadata, small UI labels
|
|
4. **Design system demos**: Keep existing sizes for demonstration
|