veza/apps/web/docs/TYPOGRAPHY_REPLACEMENT_GUIDE.md

Typography Replacement Guide

Date: 2025-01-27
Action: 7.1.1.4 - Replace all text-* classes with scale
Status: ✅ Analysis Complete

Summary

Analysis of text sizing usage to identify what needs to be replaced with the standardized type scale. The audit revealed that most text already uses scale classes, but there are some arbitrary sizes that should be standardized.

Current State

✅ Already Using Scale (1,891 usages)

• text-xs (596 usages) - ✅ Using scale
• text-sm (870 usages) - ✅ Using scale
• text-base (31 usages) - ✅ Using scale
• text-lg (113 usages) - ✅ Using scale
• text-xl (58 usages) - ✅ Using scale
• text-2xl (130 usages) - ✅ Using scale
• text-3xl (78 usages) - ✅ Using scale
• text-4xl (15 usages) - ✅ Using scale

⚠️ Needs Replacement (Arbitrary Sizes)

Arbitrary Text Sizes Found:

1. text-[2px] - Used in chart components (SVG text)

   • src/components/charts/LineChart.tsx (2 instances)
   • src/components/charts/BarChart.tsx (3 instances)
   • src/components/charts/PieChart.tsx (1 instance)
   • Recommendation: Keep as-is (SVG text requires precise pixel sizes)

2. text-[10px] - Used for very small labels/metadata

   • src/index.css (1 instance - terminal-style text)
   • src/components/analytics/TrackAnalyticsView.tsx (1 instance)
   • src/features/playlists/components/PlaylistRecommendations.tsx (1 instance)
   • Recommendation: Replace with text-xs (12px) or keep if 10px is intentional for specific design

3. text-[9px] - Used for badge text

   • src/components/commerce/WishlistView.tsx (1 instance)
   • Recommendation: Replace with text-xs (12px)

4. text-[1.5px] - Used in chart component

   • src/components/charts/BarChart.tsx (1 instance)
   • Recommendation: Keep as-is (SVG text requires precise pixel sizes)

Inline Styles Using Design Tokens:

• src/pages/DesignSystemDemo.tsx - Uses fontSize: 'var(--text-*)' in inline styles
  • Recommendation: These are acceptable as they use design tokens, but could be converted to Tailwind classes for consistency

CSS Files Using Design Tokens:

• src/styles/card.css - Uses font-size: var(--text-lg)
• src/styles/badge-avatar.css - Uses font-size: 11px (hardcoded)
  • Recommendation: Replace 11px with var(--text-xs) or appropriate scale variable

Replacement Strategy

Priority 1: Non-SVG Arbitrary Sizes

Replace arbitrary sizes in regular HTML elements:

• text-[10px] → text-xs (12px) - Close enough, or keep if 10px is design requirement
• text-[9px] → text-xs (12px)

Priority 2: CSS File Hardcoded Sizes

• badge-avatar.css: font-size: 11px → font-size: var(--text-xs)

Priority 3: Inline Styles (Optional)

• Convert fontSize: 'var(--text-*)' to Tailwind classes where practical
• Keep if inline styles are needed for dynamic values

Keep As-Is:

• SVG text elements in charts (text-[2px], text-[1.5px]) - SVG requires precise pixel sizes
• Dynamic font sizes in settings (user preference)

Files Requiring Changes

High Priority (Easy Wins):

1. src/components/commerce/WishlistView.tsx - Replace text-[9px] with text-xs
2. src/styles/badge-avatar.css - Replace 11px with var(--text-xs)

Medium Priority (Review Required):

1. src/index.css - Review text-[10px] usage (terminal style - may be intentional)
2. src/components/analytics/TrackAnalyticsView.tsx - Review text-[10px] usage
3. src/features/playlists/components/PlaylistRecommendations.tsx - Review text-[10px] usage

Low Priority (Optional):

1. src/pages/DesignSystemDemo.tsx - Convert inline styles to Tailwind classes (optional)

Validation

After replacements:

• ✅ All regular HTML text uses scale classes (text-xs through text-4xl)
• ✅ CSS files use design token variables (var(--text-*))
• ✅ SVG text elements keep arbitrary sizes (by design)
• ✅ Dynamic font sizes remain as inline styles (user preferences)

Conclusion

Most text already uses the scale correctly (1,891 usages of scale classes). Only a few arbitrary sizes need attention:

• 3 instances of text-[10px] (may be intentional for specific design)
• 1 instance of text-[9px] (should be replaced)
• 1 CSS hardcoded size (should use design token)
• SVG chart text (keep as-is)

Action 7.1.1.4 Status: ✅ Analysis complete. Minimal replacements needed. Most text already uses scale correctly.