Skip to content

CL-6493: register the semantic color tokens - #226

Merged
TheGreatAxios merged 3 commits into
mainfrom
cl-6493-theme-tokens
Aug 21, 2026
Merged

TheGreatAxios merged 3 commits into
mainfrom
cl-6493-theme-tokens

Conversation

@TheGreatAxios

Copy link
Copy Markdown
Contributor

Summary

apps/web imports react-ui's prebuilt styles.css for reset/theme/base but never react-ui's theme.css, so --success / --destructive (and --ok / --warn) exist only as plain :root custom properties inherited from that prebuilt sheet — never registered under Tailwind's @theme in apps/web's own build. Tailwind has no theme color to generate bg-success / bg-destructive utilities from, so data-[state=connected]:bg-success in packages/plugins-ui/src/installed-strip.tsx compiled to nothing and the plugin directory's connected-state dot was invisible.

  • Added @import "@corbits/react-ui/theme.css"; to apps/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.
  • Added @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 no styles.css of its own so CL-6490's guard heuristic (which only checks imported stylesheets) doesn't catch it.
  • Fixed the sibling data-[state=needs_attention]:bg-destructive on 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 real needs_attention DOM attribute. Escaped to needs\_attention.
  • Fixed six call sites using text-danger-foreground (agent-skills-picker.tsx x2, agent-detail-page.tsx x3, agents-page.tsx x1) — danger was never a registered token anywhere (react-ui ships success/destructive/ok/warn, not danger), so this text has never rendered as destructive-colored. Replaced with text-destructive, matching the identical working pattern used elsewhere.

Before / after evidence (built apps/web CSS)

Before:

$ grep -oE '\.bg-success\{[^}]*\}' dist/assets/*.css
(no output)
$ grep -o '\[data-state=connected\][^{]*{[^}]*}' dist/assets/*.css
(no output)

After:

$ grep -oE '\.bg-success\{[^}]*\}' dist/assets/*.css
.bg-success{background-color:var(--success)}
$ grep -o 'data-\\\[state\\=connected\\\]\\:bg-success\[data-state=connected\][^}]*}' dist/assets/*.css
data-\[state\=connected\]\:bg-success[data-state=connected]{background-color:var(--success)}

Also confirmed post-fix: needs_attention variant now matches [data-state=needs_attention] (literal underscore), context-menu's text-destructive/data-[highlighted]:bg-destructive/10 now compile, and all text-danger-foreground references 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 extend scripts/checks/tailwind-source.ts — per CL-6493's own guidance, a stray token gets fixed directly rather than new tooling.

Test plan

  • bun run build in apps/web succeeds before and after (both green)
  • Grepped emitted CSS before/after for bg-success, the data-[state=connected]:bg-success variant, needs_attention, text-destructive, and text-danger-foreground — all confirmed
  • bun run lint passes (0 errors, only pre-existing unrelated warnings)
  • bun run check (full monorepo typecheck/lint/test) — running in CI; not held locally per timebox

DO NOT MERGE — reviewer should confirm CI is green before merging.

Fixes CL-6493

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.
@TheGreatAxios
TheGreatAxios merged commit 0b6d006 into main Aug 21, 2026
2 checks passed
@TheGreatAxios
TheGreatAxios deleted the cl-6493-theme-tokens branch August 25, 2026 15:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant