directlx-claude-config/plans/splendid-greeting-biscuit.md

Global Typography System

Summary

Create CSS custom properties for all font sizes, defined in app.css :root, derived from the sidebar's sizing hierarchy. Replace all hardcoded font-size values across every component CSS file and scoped <style> block with the variables.

Sidebar Reference (the baseline)

• Sidebar header (h1): 1.4rem
• Nav item text: 0.95rem
• Submenu item text: 0.85rem
• Nav icon: 1.1rem
• Submenu icon: 0.9rem
• Expand icon: 0.7rem
• Footer text: 0.85rem

CSS Variables (in app.css :root)

/* Typography scale */
--font-size-page-title: 1.4rem;      /* h1 page headings (matches sidebar header) */
--font-size-section-title: 1.1rem;   /* h2 panel/section headings */
--font-size-card-title: 0.95rem;     /* h3 card titles, stat labels */
--font-size-body: 0.95rem;           /* default body/nav text */
--font-size-body-sm: 0.9rem;         /* secondary text, timestamps, dropdowns */
--font-size-label: 0.85rem;          /* labels, submenu, badges, small text */
--font-size-caption: 0.8rem;         /* table headers, bar labels */
--font-size-tiny: 0.75rem;           /* expand icons, bar values */
--font-size-stat-value: 2rem;        /* large dashboard stat numbers */
--font-size-icon: 1.1rem;            /* icons */
--font-size-icon-sm: 0.9rem;         /* small icons */
--font-size-subtitle: 0.85rem;       /* header subtitle/description */

Files to Modify

1. frontend/src/app.css

• Add all --font-size-* variables to :root
• Fix duplicate font-family (remove from app.css, keep App.svelte's)

2. frontend/src/App.svelte (style block)

• Global .header h1/h2: 28px → var(--font-size-page-title)
• Global .header p: 14px → var(--font-size-subtitle)
• .sidebar-header h1: 1.4rem → var(--font-size-page-title)
• .nav-btn: 0.95rem → var(--font-size-body)
• .nav-icon: 1.1rem → var(--font-size-icon)
• .expand-icon: 0.7rem → var(--font-size-tiny)
• .submenu-btn: 0.85rem → var(--font-size-label)
• .submenu-icon: 0.9rem → var(--font-size-icon-sm)
• .main-footer p: 0.85rem → var(--font-size-label)

3. frontend/src/components/Dashboard/Dashboard.css

• .header h1: 28px → var(--font-size-page-title)
• .header p: 14px → var(--font-size-subtitle)
• .loading: 1.1rem → var(--font-size-section-title)
• .stat-card h3: 0.95rem → var(--font-size-card-title)
• .stat-value: 2.5rem → var(--font-size-stat-value)
• .stat-percentage: 0.9rem → var(--font-size-body-sm)
• .panel h2: 1.1rem → var(--font-size-section-title)
• .bar-value: 0.75rem → var(--font-size-tiny)
• .bar-label: 0.8rem → var(--font-size-caption)
• .metrics-table th: 0.85rem → var(--font-size-label)
• .region-card h3: 0.95rem → var(--font-size-card-title)
• .region-stat .stat-label: 0.7rem → var(--font-size-tiny)
• .region-stat .stat-number: 1rem → var(--font-size-body)
• Media query .stat-value: 2rem → var(--font-size-stat-value)

4. frontend/src/components/Incident/IncidentList/IncidentList.css

• .header h1: 28px → var(--font-size-page-title)
• .header p: 14px → var(--font-size-subtitle)
• .filter-group label: 1rem → var(--font-size-body)
• .filter-group select: 1rem → var(--font-size-body)
• .stats span: 0.9rem → var(--font-size-body-sm)
• .loading: 1.1rem → var(--font-size-section-title)
• .incidents-table th: 0.8rem → var(--font-size-caption)
• .col-created: 0.9rem → var(--font-size-body-sm)
• .severity-badge: 0.85rem → var(--font-size-label)
• .status-badge: 0.85rem → var(--font-size-label)
• .expand-btn: 0.75rem → var(--font-size-tiny)
• .action-select: 0.9rem → var(--font-size-body-sm)
• .history-btn: 1.1rem → var(--font-size-icon)
• .card-title: 0.9rem → var(--font-size-body-sm)
• .field-label: 0.85rem → var(--font-size-label)
• .field-value: 0.95rem → var(--font-size-body)
• .helpdesk-name-large: 1rem → var(--font-size-body)
• .helpdesk-department: 0.8rem → var(--font-size-caption)
• .tech-name-large: 1rem → var(--font-size-body)
• .tech-status: 0.8rem → var(--font-size-caption)
• .description-text: 0.95rem → var(--font-size-body)
• Media query values updated accordingly

5. frontend/src/components/Incident/AtmHistory/AtmHistory.css

• .header h1: 28px → var(--font-size-page-title)
• .header p: 14px → var(--font-size-subtitle)
• .filter-group label: 0.85rem → var(--font-size-label)
• .filter-group select: 0.9rem → var(--font-size-body-sm)
• .incidents-table th: 0.8rem → var(--font-size-caption)
• .col-created: 0.85rem → var(--font-size-label)
• .col-resolved: 0.85rem → var(--font-size-label)
• .severity-badge/.status-badge: 0.75rem → var(--font-size-label) (fix inconsistency — was smaller than IncidentList)
• .no-selection p: 1.1rem → var(--font-size-section-title)
• .no-data .hint: 0.85rem → var(--font-size-label)
• Media query values updated accordingly

6. frontend/src/components/JournalEvents/JournalEvents.css

• .header h1: 28px → var(--font-size-page-title)
• .header p: 14px → var(--font-size-subtitle)
• .filter-group select: 1rem → var(--font-size-body)
• .event-icon: 1.5rem (keep as-is — special large icon, not in scale)
• .event-time: 0.9rem → var(--font-size-body-sm)
• .event-meta: 0.9rem → var(--font-size-body-sm)
• .event-source: 0.85rem → var(--font-size-label)

7. frontend/src/components/Incident/CreateIncident/CreateIncident.css

• .btn-create: 1rem → var(--font-size-body)
• .modal-header h2: 1.5rem → var(--font-size-page-title) (was inconsistent)
• .close-btn: 1.5rem (keep — decorative close X)
• Form inputs: 1rem → var(--font-size-body)
• Buttons: 1rem → var(--font-size-body)

8. frontend/src/components/AtmProperties/AtmProperties.svelte (scoped style)

• Map all px font sizes to variables (28px→page-title, 20px→section-title area, 14px→subtitle, 13px→label, 12px→caption area)
• Keep special large sizes like 48px/32px icons as-is

9. frontend/src/components/Workflow/IncidentWorkflow.svelte (scoped style)

• Map all font-size values to variables following same pattern

10. frontend/src/components/common/MultiSelectDropdown.svelte (scoped style)

• .msd-toggle: 1rem → var(--font-size-body)
• .msd-item: 0.9rem → var(--font-size-body-sm)
• .msd-arrow: 0.75rem → var(--font-size-tiny)

11. frontend/src/components/common/AtmInfoCard.svelte (scoped style)

• .atm-info-label: 0.7rem → var(--font-size-tiny)
• .atm-info-value: 0.95rem → var(--font-size-body)
• .card-status-badge: 0.75rem → var(--font-size-tiny)

12. frontend/src/components/common/AtmSelector.svelte (scoped style)

• .selector-label: 14px → var(--font-size-subtitle)
• .atm-select: 14px → var(--font-size-subtitle)
• .position-indicator: 12px → var(--font-size-caption) approx
• Compact variants: 13px/14px → corresponding variables

Key normalizations (fixes inconsistencies)

• Page title h1: was 28px everywhere → now 1.4rem (matching sidebar header)
• AtmHistory badges: were 0.75rem (smaller) → now var(--font-size-label) = 0.85rem (same as IncidentList)
• Filter labels: were 0.85rem in AtmHistory vs 1rem in IncidentList → both get var(--font-size-label) = 0.85rem
• Modal h2: was 1.5rem → var(--font-size-page-title) = 1.4rem
• Font-family: remove duplicate from app.css, keep App.svelte global

Verification

• cd frontend && npm run build — build must succeed
• Visual check: all text should look consistent across pages
• Sidebar text sizes unchanged (just using variables now)