Repository navigation
feat(ui): refine the light theme and retire AppShell for the workspace kit - #50
Conversation
Move the builtin light theme to a white workspace: content and cards are white, the sidebar sits at 97%, and hairlines run at a full-strength 90% instead of a 60% wash of 95%, so regions separate without heavier lines. - border 95% -> 90%, sidebar-border 92% -> 90%, input 89% -> 87%, accent 96% -> 95%, background 98% -> white - light-only default hairline drops the /60 opacity; dark is unchanged - subtle-foreground 50% -> 44% so hints clear AA on white and the sidebar - card ring 0.055 -> 0.08 (hover 0.075 -> 0.11) to hold edges on white - link follows its rule onto the white page (0.549 -> 0.559) - theme tuning defaults and playground presets track the new hairline, keeping dark's ring at 0.10
Move border and sidebar-border from 90% to 92% (#ebebeb): regions still separate, but a 1px line reads finer.
Table rows and footers, accordion dividers, stack headers and panel edges, code and diff separators, and borders that are a component's only edge now use the full border token instead of a softened /50-/80 wash. Thread and trace guide lines stay soft on purpose.
Light shadow-card drew its hairline outside the box, so any card flush with an overflow edge lost it (dark already drew it inset). Draw it inset in both modes, apply surfaceInsetClass's 1px padding in both modes, and give the sidebar scroll body room for the first control's focus ring without moving anything.
DialogHeader gains variant="band", mirroring the default footer; SheetHeader and SheetFooter gain the same variant, bleeding to the panel edges. Data Rooms dialogs and sheets adopt them.
TableGroupRow opens a group of body rows with a tinted, hairline-bounded heading; workspace templates get tableGroupRowClass, which the billing catalog adopts. Table header and footer bands share one tint.
Badge status variants move from an 8% to a 14% fill (12% for error) and ToneBadge to a 14% fill under a softer border, so pills read on a white page. Dark keeps its previous values.
The sweep ran toward the foreground colour, which on a light page only darkened grey text a step. Sweep toward the page colour in light mode; dark keeps its glint.
Move the person picker out of the view header to follow "Pick a person to see where their access reaches.", announce the result after it, and span that row across the map and inheritance panel so both share a top edge.
The preview padded every story, so fullscreen shells were offset and overflowed both ways, and Storybook's backgrounds forced a white body in dark mode. Skip the padding for fullscreen stories, drop the viewport-sized wrapper, and let html/body paint --background. Template frames that relied on the hidden padding now add it themselves.
WorkspaceShell's framed prop sits the workspace in a rounded, hairline-edged frame on a canvas one tier darker than the sidebar; className moves to the canvas. The five templates pass it through, and the billing feature pack declares it in its public props.
The console kit already renders WorkspaceShell and only borrowed AppShell's types, which made every console-kit-core install pull app-shell, app-bar, and the shadcn sidebar. Move the brand, account, and navigation types into workspace-kit (links use NavRowLinkProps), retarget the console kit, and delete both components with their stories, test, exports, and registry items. Registry docs, the agent skill, and smoke install point at workspace-kit. The console kit's brand and account props are now typed WorkspaceBrand and WorkspaceAccount (same shape for the fields it reads).
|
Review complete. 🟡 2 medium 💬 Inline comments (1)
📍 Findings outside the diff (1) — 🟡 1 medium — defects on lines GitHub can't attach comments to🟡 Medium — Remove The patch deletes the The migration moves all five workspace templates onto
Reviewed commit: cf588cf |
![tenki-reviewer[bot]](https://avatars.githubusercontent.com/in/2900641?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR replaces the deleted AppShell/AppBar components with the workspace-kit shell/nav contracts, threads a new framed mode through every template, and retunes the light theme.
Key findings
- 🟡 Framed
StorageBrowserdouble-frames its canvas — storage-browser.tsx:342 - 🟡 Remove
app-bar/app-shellexports without deprecation — package.json
| sidebar={sidebar} | ||
| defaultSidebarCollapsed={defaultSidebarCollapsed} | ||
| framed={framed} | ||
| className={cn('rounded-xl border border-border', className)} |
There was a problem hiding this comment.
🟡 bug · medium
Framed StorageBrowser double-frames its canvas
In framed mode WorkspaceShell draws its own rounded-xl border border-border shadow-xs on the shell and re-routes the caller's className onto the outer canvas div (packages/ui/src/components/workspace-kit/shell.tsx:132), but StorageBrowser still bakes rounded-xl border border-border into that className (packages/ui/src/components/storage/storage-browser.tsx:342). The legacy frame classes therefore land on the full-bleed canvas, producing a doubled edge that defeats the frame's one-tier-darker look. Every other framed caller passes className through without built-in frame classes, so StorageBrowser is the odd one out.
📋 Prompt for AI Agents
In packages/ui/src/components/storage/storage-browser.tsx at line 342, change the WorkspaceShell className prop from className={cn('rounded-xl border border-border', className)} to className={framed ? className : cn('rounded-xl border border-border', className)}. WorkspaceShell routes className to the canvas div when framed is true and already draws its own rounded border on the shell (workspace-kit/shell.tsx:132), so leaving the frame classes unconditional draws a second border around the whole canvas.
The console-kit contracts now import the workspace kit through the app's @/components/ui alias, and scripts/inspect-console-kit.ts type-checks those contracts under tsconfig.scripts.json, which only mapped @/* to the app source. Mirror the app's alias so both configs resolve the same files.
1 participant
Refines the builtin light theme for the dashboard and Blocks surfaces, polishes components to use the new tiers, and replaces
AppShell/AppBarwith the workspace kit.Light theme
backgroundborder/sidebar-borderinputaccentsubtle-foregroundshadow-card)Components
DialogHeader variant="band",SheetHeader/SheetFooter variant="band"; adopted by Data Rooms dialogs and sheets.TableGroupRow+tableGroupRowClass(billing catalog adopts it).Badge/ToneBadgefills read on white (light only).TextShimmersweeps toward the page colour in light mode, so running agents visibly shimmer.Framed shell
WorkspaceShell framedsits the workspace in a rounded, hairline frame on a canvas one tier past the sidebar. All five templates pass it through.AppShell → workspace kit
flowchart LR subgraph Before CK1[console-kit-core] -->|types only| AS[app-shell] --> AB[app-bar] --> SB[shadcn sidebar] CK1 --> WK1[workspace-kit] end subgraph After CK2[console-kit-core] --> WK2["workspace-kit (+ brand/account/nav types)"] endapp-shellandapp-bar(components, stories, test, exports, registry items).workspace-kit; the console kit uses them, so console-kit installs no longer pullapp-shell,app-bar, orsidebar.workspace-kit.Storybook
Review in Storybook: Templates/DataRooms (Room: Q&A, Access map, Framed shell), Templates/AgentsBuilder (Chat, Framed shell), UI/Dialog → Banded Header, UI/Sheet → Banded, UI/Table → Grouped, Workspace Kit/Shell.