feat(ui): apply Claude Design Workspace shell polish#97
Merged
Conversation
Implement the targeted visual deltas from the Claude Design handoff bundle (assistsupport/project/AssistSupport Workspace.html) against the existing revamp shell. Functional code and DraftTab layout unchanged; this is a scoped visual pass. Changes: - Add [data-accent] + [data-density] token variants (teal/violet/amber) and --as-glow-1 / --as-glow-2 so the shell background glows swap with the accent tweak. - Wire the shell main background gradient in theme.css through the new glow tokens so accent swaps propagate to radial highlights. - Brand mark: teal gradient fill with inner-shadow + drop-shadow, replacing the flat accent-surface-1 swatch. - Active nav item: add the 2px accent indicator bar matching the handoff bundle ::before treatment. - Topbar page title: breadcrumb pattern (AssistSupport / <Tab>) replacing the plain title, preserving the existing subtitle. - RevampShell root emits data-accent=teal data-density=cozy as the default, giving future tweaks a hook without structural changes. Verified: pnpm ui:typecheck clean; pnpm test passes (262/262). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 tasks
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
2 participants
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
Applies the targeted visual deltas from the Claude Design handoff bundle for the Workspace surface onto the existing revamp shell. Functional code and DraftTab layout are unchanged — this is a scoped visual pass informed by the bundle's README ("read the chat first"), transcript, and
AssistSupport Workspace.html+ its CSS imports.The bundle's own tokens were "lifted from src/styles/revamp/tokens.css and theme.css," so the warm-graphite-plus-teal aesthetic was already in the codebase. This PR implements the genuine visual deltas on top.
Changes
[data-accent="teal|violet|amber"]+[data-density="compact|cozy|comfy"]intokens.css; introduces--as-glow-1/--as-glow-2so shell radial-glow highlights swap with accent.theme.cssnow pipes the two radial gradients through the glow tokens; accent changes propagate automatically.accent-surface-1swatch).::beforematching the handoff treatment.AssistSupport / <Tab>) replacing plain title; subtitle preserved.data-accent="teal" data-density="cozy"default, giving future Tweaks UI a wire-up hook without structural changes.What I deliberately did NOT do
WorkspaceWorkflowStrip,TicketWorkspaceRail,DraftResponsePanelalready cover the ticket card / stage strip / panel / sources / alternatives / gauge patterns the bundle mocks.Test plan
pnpm ui:typecheck— cleanpnpm test— 67/67 files, 262/262 tests passingdata-accent="violet"on.as-shellin devtools, verify glow + accent swap🤖 Generated with Claude Code