fix(showcase): command-center html page off Tailwind (ADR-0065)#2496
Merged
Conversation
…ps + style objects (ADR-0065)
The last kind:'html' showcase page still used Tailwind className (48 of them),
which the new ADR-0065 guardrail flags: page source is runtime metadata the
build never scans, so the classes silently no-op (and the light-theme slate/indigo
palette was wrong for the dark console anyway).
Rewrite with the html tier's real primitives:
- layout via the components' own structured props (<flex direction gap>, <grid columns>);
- color/size via inline JSON `style` objects with hsl(var(--token)) theme colors;
- text via native <div style> (the <text> renderer only applies `style` when a
className/designer-id is also present — a real html-tier limitation — so styled
text uses native passthrough tags instead);
- the throughput bars via <grid columns={7}> (a nested <flex> bar with flex:1
collapsed to width:0; a grid track gives each bar width).
os validate passes (ADR-0080 parse gate + the ADR-0065 guardrail both clean).
The <flex>/grid/card/color rendering was browser-verified in the html tier; the
native-div text + grid bars use the same confirmed style-passthrough path.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Completes the "no Tailwind in page source" conversion (#2494 did the react pages; the guardrail + guidance landed in #2495). This is the last page — the
kind:'html'Command Center, which still had 48 TailwindclassNames the new guardrail flags.Change
Rewritten with the html tier's real primitives (no Tailwind):
<flex direction gap>,<grid columns>.styleobjects withhsl(var(--token))theme colors.<div style>— the<text>renderer only appliesstylewhen aclassName/designer-id is also present (a real html-tier limitation worth noting), so styled text uses native passthrough tags.<grid columns={7}>— a nested<flex>bar withflex:1collapsed to width:0; a grid track gives each bar width.Verification
os validatepasses: the ADR-0080 parse gate and the new ADR-0065 styling guardrail are both clean (0 className).<flex>/grid/card/color rendering was browser-verified earlier in the session (cards, the primary-bg card, grid layout, and colored status dots all render correctly via<flex style>).<div>text + grid bars) use the same confirmed style-passthrough path and pass the gates. Note: the final pixel re-check of those two tweaks was blocked by a local dev-serve login glitch (the dev login's password autofill didn't populate after repeated serve restarts), so a quick glance on a normally-authed console is worth it post-merge.Finding (follow-up candidate)
The
<text>renderer droppingstyleunless aclassName/dataObjIdis present is a genuine html-tier styling gap — worth fixing in objectui so<text style>works without the className escape hatch.🤖 Generated with Claude Code