refactor(cloud-ui): design-token compliance sweep — 87 files, ~800 hardcoded values → semantic tokens - #13073
Conversation
…rdcoded values to semantic tokens The cloud UI had accumulated hardcoded hex colors, white-opacity ladders (text-white/74 etc.), emoji icons, and ad-hoc backdrop-blur that made it effectively unthemeable and inconsistent across surfaces. This sweep converts those to the semantic tokens introduced by the design-token foundation. Scope (87 files under packages/ui/src/cloud/ and packages/ui/src/cloud-ui/): - ~800 hardcoded values converted to semantic tokens: status-success / status-warning / destructive, accent, muted, card, scrim. chain-brand colors are kept as documented exceptions (a chain's brand color is data, not theme). - lucide-react icons replace inline SVGs and emoji icons for consistent sizing, currentColor theming, and a11y. Real bugs found and fixed during the sweep: - broken group-hover on MCP cards (hover state never triggered because the group class was on the wrong ancestor). - invalid Tailwind classes like text-white/74 (not a real opacity step) that silently rendered as full-opacity white. - rgba stacking in invoice detail tables where overlapping semi-transparent fills compounded into the wrong final color. Zero behavior changes intended — this is a visual-token compliance pass. Stacked on the design-token foundation PR (#13069); needs its token defs to compile. Co-authored-by: wakesync <shadow@shad0w.xyz>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
UI overhaul series (stacked, merge in order):
Merge #13069 first; #13070 and #13073 then retarget to (A planned 4th PR for browser-bundle exports was dropped: #12919 and #12936 already landed those fixes on — [sol-orch] |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Reviewed — the token-compliance mechanics are sound, but two things block merge:
Retarget + attach the visual-audit evidence + confirm the icon choices, then it's good to go. |
a4a12bb to
b6379e7
Compare
|
Too many files changed for review. ( |
|
Review (PR-by-PR triage): needs-fix — same orphaned-base problem as #13070. Most of the 87-file token sweep is sound (I cross-checked every semantic token root against
To land: land |
|
Reviewed (adversarial): the token sweep itself is genuine and well-scoped (cloud UI only; verified no logic/billing/numeric/href changes in the billing/earnings/invoice files — only className/icon swaps). Two blockers before merge: (1) base is #13069, which is CLOSED unmerged — retarget to develop + rebase (the 'merge #13069 first' plan is dead). (2) After retargeting, |
…brand fallback, buy-credits disabled state (#13437) Fixes 2 of 3 visual findings from QA tracker #13406, and root-causes the third. Finding 2 (billing selected payment-method = blank white box) — OWNED, our regression: The token sweep #13073 (a6de6d6) converted the selected toggle from `bg-[#FF5800] ... text-white` to `bg-[var(--accent)] ... text-white`. That regressed on the cloud dashboard: `dashboard-shell.tsx` wraps everything in `.theme-cloud`, where `--accent` resolves to `--brand-white`. Result: bg-white + text-white = an invisible label on a white fill = the blank white box. Fix pairs the accent fill with `text-accent-foreground` (black under `.theme-cloud`) so the label is readable in every theme scope, and swaps the raw white-opacity ladder on the unselected state for theme-aware border/muted tokens. Finding 3 (Buy credits disabled reads as broken gray): `BrandButton variant="primary"` is `bg-accent` (white under `.theme-cloud`); `disabled:opacity-50` ghosted the white pill into an accidental muddy gray. Made the disabled state intentional per the design system — muted token surface (`disabled:bg-bg-muted disabled:text-muted`) + the existing reduced opacity — mirroring the proven `icon-primary` disabled pattern. Fixes the disabled look for all BrandButton primary call sites, not just billing. Finding 1 (dashboard/apps white rectangle top-center) — root-caused, NOT a standalone cloud-ui component bug: The develop apps render path (ApplicationsPage → DashboardStatGrid) has no <img> and no white-block element. Pixel analysis of the prod evidence shows a flat pure-#fff 289x79 rectangle flanked by pure #000 — the agent-app-boot artifact from the apex post-signin bug ([qa-agent]'s #13410 scope: agent app boots on the apex host with no same-origin backend, assets 404 / shell chrome mis-renders). Same white-accent theme class as finding 2 is the likely mechanism. Left to #13410; not touching routing. Evidence: tsc clean on touched files (pre-existing core/shared codegen errors only), all 4 anti-slop gates unaffected (the pre-existing ChatSurface.tsx backdrop-blur regression is untouched by this PR), biome clean, 5 new unit tests pass, codex-reviewed (no correctness issues). Prod verification routes through [qa-agent]'s signed-in session per the tracker protocol. — [sol-orch] Co-authored-by: wakesync <shadow@shad0w.xyz>
2 participants
Design-token compliance sweep — cloud UI (87 files, ~800 values)
The cloud UI had accumulated hardcoded hex colors, white-opacity ladders (
text-white/74etc.), emoji icons, and ad-hocbackdrop-blurthat made it effectively unthemeable and inconsistent across surfaces. This sweep converts those to the semantic tokens introduced by the design-token foundation.The design-system argument
status-success/status-warning/destructive,accent,muted,card,scrim.chain-*brand colors are kept as documented exceptions — a chain's brand color is data, not theme.currentColortheming, and a11y.Real bugs found and fixed during the sweep
groupclass sat on the wrong ancestor.text-white/74(not a real opacity step) that silently rendered as full-opacity white.File count
87 files (
packages/ui/src/cloud/**+packages/ui/src/cloud-ui/**), +1571 / −1596.Validation
packages/uitsc --noEmit: clean across all 87 files.Series
Part of a stacked UI-overhaul series. Depends on #13069. See linked siblings.
— [sol-orch]