feat(web/ui): consolidate dialogs, cards, and breakpoints (Pass 3)
- Unify modal/dialog system; .modal-* are now aliases of .dialog-* - Migrate WorkspacesPage, start-tool-modal, merge-dialog, workspace-tools-panel to .dialog-* - Add .card-sm/.card-md/.card-lg/.card-elevated/.card-borderless modifiers - Apply card utilities across workspaces, projects, ssh-keys, workspace-detail, git-history - Remove duplicated card-like background/border/padding from page CSS - Remove 860px breakpoint; standardize on 767px/768px mobile split - Add docs/development/ui-review-checklist.md - Archive web-ui-spacing-typography-rework OpenSpec change
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
# UI Change Review Checklist
|
||||
|
||||
When changing styles or components in `apps/web/src`:
|
||||
|
||||
- [ ] New layout/spacing uses `--space-*` tokens, not hardcoded px/rem.
|
||||
- [ ] New type sizes use `--font-size-*` tokens.
|
||||
- [ ] New radii use `--radius-*` tokens.
|
||||
- [ ] New shadows use `--shadow-*` tokens.
|
||||
- [ ] No new inline `style={{...}}` blocks for static layout (computed values are OK).
|
||||
- [ ] Interactive controls meet `min-height: var(--touch-target)`.
|
||||
- [ ] `:focus-visible` states are visible and use `--brand`.
|
||||
- [ ] Mobile layouts are tested down to 375px wide.
|
||||
- [ ] New class names are defined in a stylesheet before being referenced.
|
||||
- [ ] Breakpoints use the literal values from `tokens.css` (`480px`, `768px`, `1024px`, `1280px`).
|
||||
Reference in New Issue
Block a user