refactor(desktop): migrate plan board onto the design system
D40 of the design-system migration (Desktop stack, base feature/desktop-d39-move-plan-dialog, #3419).
What
- A column's + ("New issue in ā¦") is the barrel
IconButton, not a raw<button class="icon-button issue-column-new">. Its label, tooltip and press (opening the new issue's card with that column's status) are unchanged. - A column's head sets its name in the shared section role (
Text, 13/18 semibold) and its count in the caption role (subtle), inside the sameh2, so the column's heading still reads "Todo2" etc. - An empty column's "No issues" is
Textin the caption role (muted), as the idle line was. - The board no longer borrows Factory's station classes (
.factory-step,.factory-head,.factory-name,.factory-count,.factory-idle). Its column box and head are its own container layout (.issue-column,.issue-column-head) on--luke-*tokens, with the same values. Factory still uses those classes; D42 migrates them. - Kept: the cards (the sidebar's rows,
.sidebar-task), since the board's arrow keys, focus return and context menu walk those; the board's scroller and column sizing. - Removed, now unused:
.issue-column-newand.factory-count + .issue-column-new.
Visible changes
- The + is the contract's 30px control (it was squeezed to 24px), held to the head's 24px line by a negative block margin, so the head and the cards don't move. Its hover fill is 3px taller and wider on each side.
- The count is regular weight (400), not medium (500), as the caption role sets it, and sits 3px further from the edge (the + glyph doesn't move; the 8px gap now runs from the wider button's edge).
- The column name and "No issues" take the roles' line heights (18px and 16px, not
normal), so they shift by about 1px.
Tests
No behavior changed, so no new tests. issues-page.test.ts (45 tests, including the board's columns, arrow keys, + and focus return) passes; its column helpers now read each column's h2 and idle p instead of the removed Factory class names. pnpm check:affected exits 0.
Evidence
Captured on Linux with headless Chrome at 1280Ć840, the way #3416 was: a throwaway, uncommitted jsdom test rendered the real IssuesPage as a board (the existing test's harness, synthetic issues), framed in main.desktop-main with the desktop stylesheet built from each commit. "Before" is the base, #3419.
| Light | Dark | |
|---|---|---|
| Board, before | ![]() | ![]() |
| Board, after | ![]() | ![]() |
Not captured: the + hovered or focused, and the tooltip.
Not verified on a Mac
- The + staying no-drag (
.luke-buttonis in the no-drag list). - SF Pro rendering of the heads; the board's sideways scroll and trackpad feel.
š¤ Generated with Claude Code



