Paradaux
IssuesPAR-119Done
0

Componentise the UI: SCSS Modules + global token layer, full de-duplication

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).

Comments

No comments yet.

Activity

  • paradaux description: Description updatedJun 7, 2026, 5:17 PM
  • paradaux changed status to Status → DoneJun 7, 2026, 5:17 PM
  • tesks changed status to Status → Pending ReleaseJun 6, 2026, 11:27 PM
  • tesks created the issueJun 6, 2026, 11:00 PM