[Chakra exit · Phase 3 · PR 14] frontend: delete the dead Chakra and antd CSS

[SpicyPete]

What

Phase 3, PR 14 — the last PR of the Chakra exit. Stacked on #2650 (PR 13); review that first.

Deletes the stylesheet residue that nothing can match now that Console renders no Chakra component, and corrects the record on the three interop hacks that have to stay.

Deleted

Rule	File	Why it is dead
nav.chakra-stack, nav.chakra-breadcrumb	index.scss	Console has no Chakra nav. Both are unlayered, so embedded they were reaching the host's nav — removing them fixes a leak as well as dead weight. Carried the comment "Console adjustments to be removed later - Dan added the below".
body.chakra-ui-dark { .statisticsBar }	index-cloud-integration.scss	Dead twice over — .statisticsBar is rendered by no component, and this was the last --chakra-colors-gray-800 reference.
.reassignPartitions .ant-* (3 rules)	index.scss	antd left the codebase long ago; no source emits an ant- class.
Commented-out .ant-* block	Wizard.module.scss	Same, and already commented out.

What I did not delete, and why this is the interesting part

The plan of record had this PR remove the three globals.css Chakra hacks. Checking cloud-ui says it cannot, yet. apps/cloud-ui still mounts its own ChakraProvider on @redpanda-data/ui@4.2.0, so Chakra is still in the embedded document after PR 13 — it now arrives from the host, not from us.

That matters unevenly across the three:

1. [class*="chakra-"] { border-color: transparent } — deleted, after two rounds of review corrected me twice. I first argued it was the document's only copy and load-bearing for the host. That was wrong: it sits in @layer base, and cloud-ui mounts ChakraProvider with no disableGlobalStyle, so Chakra's GlobalStyle still emits its *, ::before, ::after border reset unlayered, outranking any layered rule. I then kept it as "the fallback for a host that drops that reset" — also wrong, and worse: since Console renders no chakra-* class, the rule's only possible targets are the host's Chakra nodes, so the day cloud-ui drops its reset this rule becomes the winning declaration and forces transparent borders onto cloud-ui's own components. Console's stylesheet overriding the host's, not protecting it. So two host-only hacks remain, not three.

2. --chakra-colors-chakra-border-color repoint and 3. [class*="border-"] { border-color: revert-layer } are duplicated value-identically in cloud-ui, whose own comment says "Must stay in step with console's globals.css: two apps in one document diverging here makes the winner depend on load order." They are inert standalone. Removing them would leave Console's embedded correctness depending on the host's stylesheet continuing to carry them.

So all three stay, and I rewrote their comments to say what is now true — that they are embedded-only, which copy is load-bearing, and that they go with cloud-ui's Chakra exit. A stale comment claiming Console's own Chakra injects the reset is worse than the rule itself.

apps/admin-ui also carries a Chakra bridge but does not embed Console, so it is unaffected either way.

This is the paired cross-repo change the tracker always said it was — it just turns out the pairing runs the other way. The precondition is cloud-ui's own Chakra exit, not a simultaneous CSS edit. Happy to open the cloud-ui side if you want the two to land together.

Also unchanged, as planned: the index.scss toast-viewport block, which waits on an upstream position prop.

Review

Reviewed at high effort; nine findings, six applied (see the fix(review): commit). The one that mattered invalidated this PR's own central claim — see item 1 above. Two more were stale records in files this PR already touched: index-cloud-integration.scss's header said its rules "can be removed when ant design is removed", which my own premise makes actionable even though they govern Console's #mainLayout scroll container; and wizard.tsx renders className={styles.wizard} for a class that only ever existed inside the commented-out block I deleted, so it has always been undefined.

One finding I reverted rather than applied. The review found five dangling var(--ant-primary-color) references the antd sweep missed — nothing in the repo defines that variable — and rewrote them to a registry token. That is a real bug, and I have filed it, but not fixed it here: because the variable is undefined those declarations are invalid at computed-value time and fall back to currentColor, so substituting a colour changes what live surfaces render — .hoverLink on the connect cluster/connector tables, .linkBtn, and the reassignment spinner's two-tone border, which currently gets its accent from currentColor by accident. Which accent those should use is a design call, and a visual change does not belong in a PR whose whole contract is deletion. One-line follow-up if you want it.

Second review, on the full stack

Reviewed again with both PRs as one diff against master. Ten findings, six applied. In this PR: the globals.css deletion above, and my index-cloud-integration.scss header — I had implied the file is embedded-only and that an embedded check suffices to drop it, when app.tsx imports it standalone too and #mainLayout renders in every mode.

Two findings left as flags because fixing them changes rendering, which this PR's contract excludes:

• body { font-family: "Inter" !important } in index.scss, four lines from the nav.chakra-* rules I deleted — an unlayered body selector with !important, so embedded it re-fonts the whole cloud-ui shell. Exactly the leak class I used to justify those deletions, and the largest instance of it. Retargeting it is a host-pair visual decision.
• The five var(--ant-primary-color) references, as before.

Third review — dead code, comments, semantic colours

Reviewed again against those three axes. Fifteen findings, twelve applied.

The reported dark-mode bug and its family. .labelText was rgba(0, 0, 0, 0.45) — near-invisible on a dark ground, which is why "FORMATTING" and "SORT" on Broker Details read as black-on-black while the Stat labels beside them were fine. It turned out to be declared twice in index.scss; I fixed one half and review caught the other, which also hardcoded color: red for the required-field asterisk. And .currentReassignments .title carried the byte-identical properties of the dead .h3 rule I had just deleted — same defect, but live.

Nine more live classes came off literals (faithful neutral mappings, not retoning): the two .iconButton blocks, .messageHeaders, .brokerTagList and its tags, .footer, .editorLoading, .previewTag .path, plus .hoverLink which pointed at the undefined var(--ant-primary-color). index.scss goes from 82 hardcoded colour declarations to 56, with no near-black text colour left, and the dangling antd variable is gone from the codebase entirely.

Two Registry contract violations. .currentReassignments button painted a hardcoded pale-blue fill and hover onto <Button variant="link">; being unlayered it beat the variant's own layered classes. And .cursor-pointer/.capitalize were hand-rolled duplicates of Tailwind utilities that, being unlayered, defeated layered variants like disabled:cursor-default on the same element. All deleted.

Left for a separate pass, deliberately:

• globals.scss's unlayered h2, b and body resets. These outrank @layer utilities, so text-heading is inert on <h2> across ~14 call sites — and because only app.tsx imports that file, standalone and embedded Console render different typography. The fix is to wrap them in @layer base, but that changes type across many pages and wants a visual pass.
• ~46 more unreferenced index.scss class blocks. Verified zero references, but CSS deletions are invisible to type-check, lint and tests, so they deserve their own reviewable commit rather than riding along here.

Gates

• theme:check ok — 0 semantic overrides across 0 roles, 161 registry roles deliberately inherited, no dead names
• type:check clean
• bun run build green
• 997 unit + 1438 integration passing
• The built CSS chunk no longer contains ant-steps, ant-table-expanded, nav.chakra-stack, chakra-breadcrumb, chakra-ui-dark, statisticsBar or chakra-colors-gray-800. What remains is exactly the two documented host-only hacks — the built CSS carries a single chakra string, the --chakra-colors-chakra-border-color repoint.

Still wants a human

An embedded Cloud UI pass, for the same reason as PR 13 — this touches the stylesheet that is shared with the host, and nothing in this repo renders Console inside cloud-ui.

🤖 Generated with Claude Code

[github-actions]

✅ Clean — no registry drift, off-token colours, or ad-hoc classes

App: frontend · Scope: diff vs origin/chakra-exit/13-remove-dependency · Files: 13

	Count
⚠️ Outdated registry components	0
🛠 Locally-modified components	0
❓ Unknown to registry	0
🎨 Off-token palette colours	0
🔢 Ad-hoc utility classes	0

Generated by lookout audit-changes.