refactor(ui): converge attachment thumbnail + file card onto maka radius/surface tokens - #670
Merged
Merged
Conversation
…ius/surface tokens (#546) The attachment surfaces were the last chat-area holdouts still styled with raw shadcn semantic aliases and the deprecated `rounded-lg`, off the surface-alpha + radius-token system every other chat surface uses (the tail of #546 PR5). - Thumbnail placeholder (chat-view): `bg-muted` -> `--foreground-alpha-6` (matches the file card's own placeholder fill), `border-border` -> `border-[var(--border)]`, and drop the `/60` magic alpha stacked on the 50%-ink `--muted-foreground` (it dipped below the contrast floor). - Radius: retire the deprecated `rounded-lg` alias -> `rounded-md` (surface, 8px) on thumbnail + lightbox; the file card's inner icon tile and remove button move to `rounded-sm` (control, 6px) so the nested corners read concentric instead of matching the outer card radius. - Pin the converged form in attachment-frontend-contract.test.ts so the surfaces cannot drift back to shadcn aliases / deprecated radius. No behavior change. Full desktop suite green (2264 tests); radius governance + foreground-alpha contracts unaffected.
7 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
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
Converge the two attachment surfaces (image thumbnail in
chat-view, file card in composer + sent turns) onto Maka's radius-token + surface-alpha system. They were the last chat-area holdouts still styled with raw shadcn semantic aliases (bg-muted,border-border) and the deprecatedrounded-lg. Tail of #546 PR5 (chat-message polish).Why
Refs #546
Every other chat surface uses the
--foreground-alpha-*surface fills and--radius-*tokens; these two lagged behind. The file card also had a concentric-radius defect: inner icon tile and remove button shared the outer card's 8px radius instead of stepping down a tier.Scope
Changed:
packages/ui/src/chat-view.tsx):bg-muted→bg-[var(--foreground-alpha-6)](matches the file card's own placeholder fill),border-border→border-[var(--border)], and drop the/60magic alpha stacked on the 50%-ink--muted-foreground(it dipped below the contrast floor).chat-view.tsx+packages/ui/src/attachment-file-card.tsx): retire the deprecatedrounded-lgalias →rounded-md(surface, 8px) on thumbnail + lightbox; file card's inner icon tile and remove button →rounded-sm(control, 6px) so the nested corners read concentric.apps/desktop/src/main/__tests__/attachment-frontend-contract.test.ts): agovernance (#546)block pins the converged form so the surfaces cannot drift back to shadcn aliases / deprecated radius.Not included: image-attachment fixture + screenshot pipeline coverage (the pending/lightbox states need a seeded fixture — no runtime behavior changes here to warrant it).
Verification
npm run -w @maka/desktop test→ 2264 pass / 0 fail (radius-governance, foreground-alpha, chat-cascade contracts, and check-console/a11y/copy all green).npm run -w @maka/desktop build:main+ full@maka/*builds clean (tsc no type errors).renderToStaticMarkup(ChatView)render test still passes.User-facing impact
Effectively none visible. Confirmed by static token math (values are fixed oklch alphas / px, not render-dependent):
rounded-md→rounded-sm): the only persistent visible change — a 2px tighter radius on the icon tile + remove button, only when a non-image attachment (pdf/doc/…) is present. This is the intended concentric-radius fix.rounded-lgandrounded-mdboth resolve to--radius-surface= 8px; alias hygiene only).No docs / changelog / migration impact.
Reviewer notes
The
rounded-lg→rounded-mdswaps are behavior-neutral by design —styles.cssaliases both to--radius-surface. The real geometry change isrounded-md→rounded-smon the file card's nested elements only.Checklist