refactor(ui): migrate to design tokens + re-sync components to ui-registry v2.2.0#2536
Open
c-julin wants to merge 3 commits into
Open
refactor(ui): migrate to design tokens + re-sync components to ui-registry v2.2.0#2536c-julin wants to merge 3 commits into
c-julin wants to merge 3 commits into
Conversation
…tokens Replace raw Tailwind palette colours (red/green/blue/orange/etc.) across app code with semantic tokens (text-error/success/informative/warning, bg-background-*-subtle/strong, border-outline-*), and ad-hoc utility classes (text-[10px]->text-caption-sm, text-[0.75rem]/[11px]->text-xs, rounded-[2px]->rounded-xs) with named scale entries. Vendored redpanda-ui components are untouched (they track the registry). Behaviour/visual-token only; clears the frontend UI audit's off-token and ad-hoc findings.
Contributor
|
| Count | |
|---|---|
| 0 | |
| 🛠 Locally-modified components | 0 |
| ❓ Unknown to registry | 0 |
| 🎨 Off-token palette colours | 68 |
| 🔢 Ad-hoc utility classes | 1 |
🎨 Off-token colours (palette literals)
Use semantic tokens (primary, muted-foreground, border, …) instead of raw palette names.
| Class | Uses | Files |
|---|---|---|
indigo-400 |
14 | 1 |
indigo-500 |
9 | 1 |
indigo-300 |
7 | 1 |
indigo-alpha-200 |
7 | 1 |
blue-400 |
6 | 1 |
indigo-600 |
6 | 1 |
indigo-800 |
6 | 1 |
blue-900 |
5 | 1 |
green-500 |
5 | 1 |
indigo-100 |
5 | 1 |
orange-400 |
5 | 1 |
red-600 |
5 | 1 |
blue-500 |
4 | 1 |
blue-alpha-200 |
4 | 1 |
green-400 |
4 | 1 |
indigo-200 |
4 | 1 |
indigo-900 |
4 | 1 |
indigo-alpha-100 |
4 | 1 |
indigo-alpha-300 |
4 | 1 |
orange-500 |
4 | 1 |
red-400 |
4 | 1 |
red-500 |
4 | 1 |
red-alpha-200 |
4 | 1 |
blue-600 |
3 | 1 |
blue-800 |
3 | 1 |
green-300 |
3 | 1 |
green-600 |
3 | 1 |
orange-200 |
3 | 1 |
blue-100 |
2 | 1 |
blue-200 |
2 | 1 |
blue-300 |
2 | 1 |
blue-alpha-100 |
2 | 1 |
blue-alpha-300 |
2 | 1 |
blue-alpha-500 |
2 | 1 |
green-100 |
2 | 1 |
green-50 |
2 | 1 |
green-700 |
2 | 1 |
green-800 |
2 | 1 |
green-900 |
2 | 1 |
indigo-50 |
2 | 1 |
indigo-700 |
2 | 1 |
indigo-alpha-500 |
2 | 1 |
orange-100 |
2 | 1 |
orange-300 |
2 | 1 |
orange-800 |
2 | 1 |
orange-900 |
2 | 1 |
red-200 |
2 | 1 |
red-300 |
2 | 1 |
red-50 |
2 | 1 |
red-alpha-100 |
2 | 1 |
red-alpha-300 |
2 | 1 |
red-alpha-500 |
2 | 1 |
blue-alpha-400 |
1 | 1 |
green-200 |
1 | 1 |
green-alpha-100 |
1 | 1 |
green-alpha-200 |
1 | 1 |
indigo-alpha-400 |
1 | 1 |
orange-50 |
1 | 1 |
orange-600 |
1 | 1 |
orange-700 |
1 | 1 |
orange-950 |
1 | 1 |
purple-500 |
1 | 1 |
purple-600 |
1 | 1 |
red-100 |
1 | 1 |
red-700 |
1 | 1 |
red-800 |
1 | 1 |
red-950 |
1 | 1 |
red-alpha-400 |
1 | 1 |
🔢 Ad-hoc utility classes (arbitrary values)
These bypass the design tokens. Prefer a named scale entry or add a new token.
| Class | Category | Uses | Files |
|---|---|---|---|
text-[11px] |
🔢 text-size | 1 | 1 |
Generated by lookout audit-changes.
… to ui-registry v2.2.0 v2.2.0 adopts the Badge semantic-colour palette across Alert/Badge/StatusBadge and deepens the dark-mode warning/error surfaces (theme.css token additions). Re-synced the 5 vendored components Console carries (json-viewer not vendored) to the v2.2.0 published bytes + theme. Backward-compatible (variants added, none removed; type-check clean). Clears the UI audit's outdated-component finding so the cleanup PR's audit goes fully green.
c-julin
changed the title
The colour-token migration collapsed light/dark palette pairs (e.g. text-red-600 dark:text-red-400) onto a single semantic token, leaving no-op dark: duplicates (text-error dark:text-error). Semantic tokens are already theme-aware, so the dark: variants are redundant. Also dropped the dark:bg-background-*-subtle/NN opacity overrides — a raw-palette-era hack (blue-950 was too saturated in dark); the dark-safe -subtle token is the intended dark surface on its own. Kept genuinely-different variants.
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.
What
Clears the Frontend UI Audit findings by replacing raw Tailwind palette colours and ad-hoc utility classes in app code with semantic design tokens. The vendored
redpanda-ui/components are untouched (they track the registry).Local lookout audit is now ✅ Clean (0 drift / 0 off-token / 0 ad-hoc) across the 48 changed files.
Colours (91 sites, 44 files)
Mapped by semantic intent:
red/rose-*→ error ·green/emerald-*→ success ·blue/sky/cyan-*→ informative ·orange/amber/yellow-*→ warning ·purple/violet/indigo-*→ informative (closest semantic)text-<c>-<n>→text-<sem>·bg-<c>-<n>→bg-background-<sem>-<subtle|strong>(≤200/≥900 ⇒ subtle) ·border-<c>-<n>→border-outline-<sem>Every introduced utility was validated against a real
--color-*token (no silent no-ops).Ad-hoc classes (7 app sites)
text-[10px]→text-caption-sm(exact) ·text-[0.75rem]→text-xs(exact) ·text-[11px]→text-xs(nearest readable) ·rounded-[2px]→rounded-xs(exact)Judgement calls (per the "force everything" intent)
json-view: number→informative, string→success) and a few decorative purple/indigo sites are now semantic tokens. They're not strictly "states" — if the team prefers dedicated syntax tokens, that's a follow-up.fill-[#252F3E]AWS logo,rounded-[inherit],shadow-[…sidebar…],tracking-[0.12em]) live in vendoredredpanda-uiand are intentionally left (touching them re-introduces registry drift).Notes
Visual-token only; no logic changes. No tests assert the old palette classes. Browser snapshot baselines for
ai-agent-list-page/remote-mcp-inspector-tabwill shift (semantic tokens aren't pixel-identical to the raw palette) and will be regenerated.🤖 Generated with Claude Code
v2.2.0 re-sync (added)
To clear the audit's outdated-component finding (registry shipped v2.2.0 since), re-synced the 5 vendored components Console carries —
alert,badge,badge-group,sonner,status-badge— plustheme.css, to the v2.2.0 published bytes (byte-identical toui-registry@main).json-viewerisn't vendored here, so skipped. v2.2.0 is the Badge/Alert semantic-palette alignment + deeper dark-mode error/warning surfaces; backward-compatible (variants added, none removed; type-check clean). Audit now reports 0 drift / 0 outdated / 0 off-token / 0 ad-hoc.Known audit false-positive (accepted)
The
Audit registry usagecheck reports ~68 "off-token colours" — these are theme.css's own palette scale definitions (--color-indigo-400,--color-blue-alpha-200, …), which lookout counts because the v2.2.0 theme re-sync putstheme.cssin the diff and it scans the whole file. They are the registry's palette source, not off-token usage, and can't be removed without diverging from the registry. App-code off-token usage and ad-hoc classes are genuinely 0, outdated/drift/locally-modified are 0. Upstream fix to excludestyle/theme.cssfrom the off-token scan: redpanda-data/ui-registry#228.