fix(showcase): drop Tailwind from kind:'react' pages — inline styles + pre-styled overlays (ADR-0065)#2494
Merged
Merged
Conversation
…+ pre-styled overlays (ADR-0065)
A react/html page's `source` is runtime metadata, so the console's build-time
Tailwind never scans it — utility classes that don't also appear in the console's
own source silently produce NO CSS (exactly the ADR-0065 failure: styling that
"works only by coincidence"). The Task Desk modal proved it: a hand-rolled
`bg-black/50` backdrop rendered transparent, the form floated as unstyled black
boxes, and light-theme `text-slate-900` headings were invisible on the dark theme.
Rewrite all six kind:'react' showcase pages to use ZERO Tailwind:
- Overlays use the platform's own `<ObjectForm formType="drawer"|"modal">`
variant (pre-styled Sheet/Dialog with backdrop + animation), driven by
`open`/`onOpenChange` — NOT hand-rolled `fixed inset-0` overlays.
- Page chrome (headers, KPI cards, tabs, badges, empty states) uses inline
`style={{}}` with `hsl(var(--token))` theme colors — real CSS, theme-aware,
always generated regardless of the build's content scan.
Pages: task-desk, crm-workbench, inquiry-triage, account-cockpit,
invoice-console, renewals-pipeline.
Browser-verified on a real `objectstack serve` console: titles now legible,
Task Desk drawer/modal render the pre-styled ObjectForm overlay (proper backdrop
+ card), CRM KPI cards and Inquiry tabs/badges all theme-correct.
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.
The bug
A
kind:'react'/'html'page'ssourceis runtime metadata, so the console's build-time Tailwind never scans it. Utility classes that don't also appear in the console's own source silently produce no CSS — exactly the ADR-0065 failure: styling that "works only by coincidence."Caught on the live Task Desk page: the hand-rolled
bg-black/50modal backdrop computed torgba(0,0,0,0)(transparent), the form floated as unstyled black boxes with invisible labels, and light-themetext-slate-900headings were near-invisible on the dark theme.Confirmed in the browser
getComputedStyleprobe on the running console:bg-black/50→rgba(0,0,0,0)(no CSS), whilehsl(var(--card))→rgb(24,24,27)✓. The console's CSS tokens are HSL triplets that must be wrappedhsl(var(--token)).The fix
All six
kind:'react'showcase pages now use ZERO Tailwind:<ObjectForm formType="drawer"|"modal">variant — a pre-styled Radix Sheet/Dialog with backdrop + animation, driven byopen/onOpenChange— instead of hand-rolledfixed inset-0overlays.style={{}}withhsl(var(--token))theme colors — real CSS, theme-aware, always generated regardless of the build's content scan.Pages:
task-desk,crm-workbench,inquiry-triage,account-cockpit,invoice-console,renewals-pipeline.Verification
Browser-verified on a real
objectstack serve --devconsole (not a dev preview):tsc --noEmitgreen.Follow-up (same correction, next PRs)
command-center-jsx(thekind:'html'page) off Tailwind.classNamein react/html page source.🤖 Generated with Claude Code