Replace the single 524-line globals.css + global-class approach with a real component library: a global SCSS token/theme layer (styles/) and per-component scoped .module.scss, de-duplicating logic/layout/style and harmonising visual inconsistencies.
Plan (approved): SCSS Modules + global tokens; restructure + harmonise; full migration of all ~18 pages + ~17 components.
- Foundation: add
sass; styles/ = _tokens (dark/light CSS vars + spacing scale), _mixins (focus-ring, card, pill, menu-pop, media), reset, _markdown (global), globals.scss.
- Primitives: Button, IconButton, Panel, Badge/Chip/State/Priority/Label, Form/Field/FieldRow/TextInput/Textarea/CheckGroup, SearchBox, Select, EmptyState (collapses 3 variants), PageHeader, BackLink, ListRow, KeyValue, Avatar, Tabs, Timeline, Disclosure, Chevron, Stack/Cluster, IntegrationCard, Board/BoardCard, DevPanel.
- Migrate all existing components to folder+module; recompose IssueRow on ListRow.
- De-dup logic: formatDate/formatDateTime (lib/format), resolveWorkspaceOr404 (lib/workspace), one chevron.
- Migrate all pages; delete globals.css. Target: 0 inline style={{}}, no global component classes.
- Verify: tsc, vitest, next build, visual parity (Playwright harness) in dark+light.
Multiple commits on develop under this issue (foundation → primitives → components → pages).
No comments yet.