153 lines
7.8 KiB
Markdown
153 lines
7.8 KiB
Markdown
# 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`)
|
|
|
|
```css
|
|
/* 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)
|