Repository navigation
feat(web): design system with token utilities, owned primitives and guard - #103
Merged
Merged
Conversation
Reset Tailwind's default scales and register only canonical tokens, so utilities cannot resolve to off-system values. Add icon stroke, motion, panel-header, drawer-width and count-fill tokens; drop unused --toolbar-height and --border-strong, redundant [hidden] rules and dead CSS. Align DESIGN.md radii with shipped values.
Tokenize shadcn primitives against the theme bridge; one color vocabulary. Move element defaults to @layer base so primitive utilities win. Add tooltip, popover, checkbox, kbd, button-group, input-group primitives. Guard derives allowed utilities from style.css @theme blocks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
IconButton, SplitButton, SegmentedControl, SearchField, PanelHeader, CollapsibleSection, DisclosureIcon, ListRow, EmptyState, ErrorState, Notice, ConfirmDialog, CountBadge, StatusDot, Shortcut, KeyValueList, ContextIcon. format.ts holds count, plural, progress and shortcut formats. Topbar dedupes the review and session-shell headers; TooltipProvider at root. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Header, activity rail, theme, account and sync actions use IconButton with shell/rail variants and touch sizing; shortcuts show in tooltips via formatShortcut. Server status and diff comparison popovers use Popover and KeyValueList. Session status uses EmptyState. Skeletons take shapes from the primitive. Delete the topbar, rail, popover, spinner and skeleton CSS these replace. Tests use roles, labels and tooltips. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Picker: SearchField (32px) with IconButton back/filters/close, ListRow option rows with ContextIcon, CountBadge change counts, SegmentedControl freshness, Checkbox, EmptyState for empty list and filter menus, Shortcut footer hints. Account: Select for access/expiry, Input/Button touch sizing, ErrorState for errors, EmptyState for identity status. Delete replaced picker and account CSS; tests use role/text locators. Additive: ListRow variant "option", SearchField leading, CountBadge unit, Input touch. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Token list load failure uses ErrorState's shared "Retry" label instead of "Retry loading tokens", with a touch-sized Retry (ErrorState touch prop). Test covers the retry. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Repos, file tree, sidebar tabs, summary and review tools use PanelHeader, ListRow, IconButton, SearchField, CollapsibleSection, KeyValueList, CountBadge, StatusDot, EmptyState, ErrorState, Notice and SplitButton. Delete the replaced feature CSS; tests use role and label locators. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sentence case for review tool labels, drop titles that visible text covers, and drop the copy-review id in favor of role locators. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Review panel, comment cards, delete flows, diff toolbar and Pierre file header slots now compose primitives and composites. Feature CSS keeps only layout, shell islands and the Pierre boundary. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Bulk delete rests quiet; the confirm dialog carries the destructive fill. Sidebar and inline comment cards show the same labeled actions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Guard rejects token-shadowing arbitrary values, off-scale spacing, slot and ID selectors, visual classNames on components and hook-class restyling; oxlint forbids raw form controls in feature files. Remaining violations move into variants: ContextIcon size/tone, Separator chrome, DialogContent command, Toggle icon, Scrim. SearchField restores the shipped muted border; dead CSS and stale exceptions removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
/design.html renders every primitive and composite variant in both themes. A Playwright gallery project compares exact Chromium/Linux goldens and checks 44px touch targets at 390px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DESIGN.md gains the ownership rule, token utility table, component inventory, new guard rules and current exceptions; the picker search is 32px. development.md covers the gallery and goldens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Revoke opens the shared confirm dialog; failures stay in the dialog. Destructive menu triggers show the open fill like other variants. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
style.cssclears Tailwind's default scales and exposes each semantic token fromtokens.css/typography.cssas a same-name utility (bg-panel,border-control,h-control,rounded-round, …). Markup and tokens now share one vocabulary and the arbitrary[var(--x)]values are gone.components/ui/*(Button, Toggle, Tabs, Dialog, Separator, Skeleton, …) carry color, border, radius, height, padding and states as cva variants. Feature code only arranges components, so a visual change propagates from one place.components/(IconButton with tooltip, SplitButton, SegmentedControl, SearchField, ListRow, PanelHeader, CollapsibleSection, EmptyState/ErrorState/Notice, ConfirmDialog, CountBadge, StatusDot, Shortcut, KeyValueList, ContextIcon, Scrim) replace per-feature copies.tools/check-design.ts) enforces ownership: it rejects token-shadowing arbitrary values, off-scale spacing,[data-slot]/ID selectors, visualclassNames on components and hook-class restyling. oxlintreact/forbid-elementsblocks raw form controls in feature files. Contract tests cover each rule; stale exceptions are removed./design.html, excluded from the build) renders every variant in both themes. The Playwrightgalleryproject compares exact Chromium/Linux goldens and checks 44px touch targets at 390px.DESIGN.mddocuments the ownership rule, the utility table, the component inventory, the guard rules and the gallery;docs/development.mdcovers gallery and golden updates.Validation:
mise run checkpasses (Go, contracts, static, 105 browser tests including the gallery). Computed-style parity againstmainwas checked for the touched surfaces. Intended visual changes: SearchField and the hide-reviewed toggle are 32px (were 28/36), and dialogs share a 1px--borderframe.