CL-6493: register the semantic color tokens - #226
Merged
Merged
Conversation
apps/web imported react-ui's prebuilt styles.css but never its theme.css, so --success/--destructive/--ok/--warn existed only as plain :root custom properties inherited from that stylesheet, never as @theme colors in the app's own Tailwind build. Tailwind had no theme color to generate bg-success/bg-destructive utilities from, so data-[state=connected]:bg-success in plugins-ui's installed-strip compiled to nothing, and the plugin directory's connected-state dot was invisible. react-ui's README documents importing theme.css alongside tailwindcss for exactly this case.
The sibling data-[state=needs_attention]:bg-destructive variant on the same status dot had the identical invisible-dot symptom for an unrelated reason: Tailwind v4 converts an unescaped underscore in an arbitrary value to a space, so the generated selector matched [data-state="needs attention"] and never matched the real needs_attention DOM attribute. Escaping it (needs\_attention) keeps the literal underscore.
text-danger-foreground referenced a "danger" color that was never a registered theme token anywhere (react-ui ships success/destructive/ok/warn, not danger), so these six error-message call sites never rendered as destructive-colored text. Replaced with text-destructive, matching the identical working pattern used by every other error paragraph in the app.
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
apps/web imports react-ui's prebuilt
styles.cssfor reset/theme/base but never react-ui'stheme.css, so--success/--destructive(and--ok/--warn) exist only as plain:rootcustom properties inherited from that prebuilt sheet — never registered under Tailwind's@themein apps/web's own build. Tailwind has no theme color to generatebg-success/bg-destructiveutilities from, sodata-[state=connected]:bg-successinpackages/plugins-ui/src/installed-strip.tsxcompiled to nothing and the plugin directory's connected-state dot was invisible.@import "@corbits/react-ui/theme.css";toapps/web/src/tailwind.css, right after@import "tailwindcss";— this is react-ui's own README-documented pairing for a consumer that runs its own Tailwind v4 build, so it registers--color-success/--color-destructive/etc. as real theme colors without duplicating preflight.@source "../../../packages/context-menu/src";— that package is live-wired into the app's right-click menu (text-destructive,data-[highlighted]:bg-destructive/10) but was never scanned; it has nostyles.cssof its own so CL-6490's guard heuristic (which only checks imported stylesheets) doesn't catch it.data-[state=needs_attention]:bg-destructiveon the same dot: Tailwind v4 converts an unescaped underscore in an arbitrary value to a space, so the generated selector matched[data-state="needs attention"]and never matched the realneeds_attentionDOM attribute. Escaped toneeds\_attention.text-danger-foreground(agent-skills-picker.tsxx2,agent-detail-page.tsxx3,agents-page.tsxx1) —dangerwas never a registered token anywhere (react-ui shipssuccess/destructive/ok/warn, notdanger), so this text has never rendered as destructive-colored. Replaced withtext-destructive, matching the identical working pattern used elsewhere.Before / after evidence (built
apps/webCSS)Before:
After:
Also confirmed post-fix:
needs_attentionvariant now matches[data-state=needs_attention](literal underscore),context-menu'stext-destructive/data-[highlighted]:bg-destructive/10now compile, and alltext-danger-foregroundreferences are gone from the codebase.Cousins sweep
Grepped product code for every
(bg|text|border|ring|...)-{success,destructive,ok,warn,warning,danger,error,info}utility. Found and fixed the four classes above. This was one repeated stray token (danger) plus two other silent-failure instances of already-known bug classes (missing@source, unescaped underscore) rather than a new structural gap, so I did not extendscripts/checks/tailwind-source.ts— per CL-6493's own guidance, a stray token gets fixed directly rather than new tooling.Test plan
bun run buildinapps/websucceeds before and after (both green)bg-success, thedata-[state=connected]:bg-successvariant,needs_attention,text-destructive, andtext-danger-foreground— all confirmedbun run lintpasses (0 errors, only pre-existing unrelated warnings)bun run check(full monorepo typecheck/lint/test) — running in CI; not held locally per timeboxDO NOT MERGE — reviewer should confirm CI is green before merging.
Fixes CL-6493