Phase 1: Midnight skin + mobile-first layout#1
Merged
Conversation
Adds the Midnight v1.1 token set as src/styles/midnight.css and wires shadcn-style semantic vars (--background, --foreground, --primary, etc.) to resolve against Midnight tokens so legacy bg-background / text-muted- foreground utilities keep working. Tailwind config extends with Midnight palette, pastels, radii, shadows, and motion curves. HTML root now declares class=dark and preconnects to Inter + Geist Mono. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Introduces a five-slot primary navigation — Chat, Sessions, Preview, Browser, More — that renders as a bottom .ds-tabbar below 1024px and a 64px left rail at lg+. Sessions slot opens the sidebar as a Midnight .ds-sheet on mobile (swipe-down-to-dismiss) and selects the persistent second-column sidebar on desktop. Per-section data-accent wires focus rings and selection highlights to the section's pastel. Touch targets are 44x44px minimum on mobile; safe-area-inset-bottom is respected via .ios-bottom-safe on the tab bar container. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Rewrites the hardcoded color sites called out in the phase-1 brief so none rely on literal Tailwind palette classes. MCP provider buttons now use primary/card; kanban columns compose .ds-tile-inset with per- status pastel accents; TaskCard becomes a .ds-tile-hover with status- accented dots; the image viewer sits on a .ds-sheet-backdrop inside a .ds-tile; login submit becomes .btn-primary; Queue indicators use the pastel mint/sky tokens. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
DesktopRail drops the role="tablist" / role="tab" pair since the component does not implement the roving-tabindex / arrow-key semantics those roles promise. Replaces with aria-current="page" on the active item, which is accurate for primary nav. MobileSidebarSheet now subtracts --keyboard-height from its 80vh/svh target so the iOS keyboard does not clip the session list when a text field inside focuses. Co-Authored-By: Claude Opus 4.7 <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
1 participant
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.
Summary
Phase 1 of Dispatch: apply the Midnight dark-only design system as a mobile-first skin.
Changes by commit
feat(skin): install Midnight design system tokens and shadcn mappingsrc/styles/midnight.css(copied + stripped of duplicate at-rules),src/index.css(shadcn--background/--foreground/etc. remapped to Midnight tokens),tailwind.config.js(pastels, radii, shadows, motion curves, typography),index.html(<html class="dark">+ font preconnect)feat(skin): add mobile tab bar and persistent desktop left railsrc/components/layout/{useAppNavItems, MobileTabBar, DesktopRail, MobileSidebarSheet}.tsx, wired intosrc/components/app/AppContent.tsx. Section-leveldata-accentdrives focus rings + selection highlights per Phase-1 accent table (Chat=sky, Sidebar=lavender, Preview=mint, Browser=peach, Tasks=butter, Settings=blush).feat(skin): replace raw Tailwind color classes with Midnight semanticssrc/components/mcp/constants.ts,src/components/task-master/{view/TaskCard.tsx, utils/taskKanban.ts},src/components/file-tree/view/ImageViewer.tsx,src/components/auth/view/LoginForm.tsx,src/shared/view/ui/Queue.tsxfix(skin): a11y polish — drop tablist role, make sheet keyboard-awarerole="tablist"it didn't implement; bottom sheet subtracts--keyboard-heightso iOS keyboard doesn't clip session listGuardrails
server/projects.js,server/index.js,src/components/sidebar/subcomponents/SidebarProjectItem.tsx(git diff --name-only main..HEADconfirms).grep -rnE 'bg-(blue|red|green|gray|yellow|pink|purple|indigo|orange|slate|zinc|neutral|stone|amber|emerald|teal|cyan|rose|violet|fuchsia)-[0-9]'on the diff returns nothing.env(safe-area-inset-bottom)respected via.ios-bottom-safe, sheet swipes down to dismiss (>120px or >0.4 px/ms flick), Esc also closes.+0.14%(2,444,186 → 2,447,663 B), CSS-3.4%(182,841 → 176,545 B). Well inside the 5% budget.Known follow-ups (out-of-scope for Phase 1)
MobileSidebarSheet; Esc closes it, Tab can escape. Candidate for Phase 2 a11y pass.Test plan
npm run buildsucceeds (client + server)npm run typecheckcleannpm run lint— 0 errors (warnings are pre-existing + style-only)npm testexits with "Missing script: test")🤖 Generated with Claude Code