refactor(ui): adopt shadcn theme vars and utility shorthand#17
Merged
Conversation
Switch theme palette in index.css to the shadcn variable convention (--background, --foreground, --sidebar, --primary, ...) and update every component to match. Old highlight var --accent maps to --primary since the new --accent is a muted surface. Arbitrary class syntax like bg-(--sidebar) is rewritten to the registered utility shorthand bg-sidebar now that the vars are exposed via @theme inline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughReplaces CSS-variable-based styling with Tailwind design tokens: adds dark/light oklch palettes and Tailwind token mappings in ChangesTheme System and Component Styling
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
devbox | 262558b | Commit Preview URL Branch Preview URL |
Jun 02 2026, 04:39 PM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/modules/base64/ui/base64-tool.tsx (1)
55-55:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix legacy CSS var utility syntax in Base64 output label (and complete the refactor repo-wide)
src/modules/base64/ui/base64-tool.tsxstill usestext-(--sidebar-fg)for the output label; this should be updated totext-sidebar-foreground.- Legacy
text-(--*)/bg-(--*)patterns still remain elsewhere insrc/(e.g.,src/shared/ui/command.tsx,src/modules/base64/ui/base64-mode-button.tsx,src/app/shell/shortcuts-cheatsheet.tsx,src/app/shell/shell-icon-button.tsx,src/app/shell/tab-item.tsx), so styling will break if the old CSS variables are removed.🔧 Proposed fix
<Typography variant="span" - className="mb-1 text-xs font-semibold uppercase tracking-wider text-(--sidebar-fg)" + className="mb-1 text-xs font-semibold uppercase tracking-wider text-sidebar-foreground" >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/modules/base64/ui/base64-tool.tsx` at line 55, Replace the legacy utility text-(--sidebar-fg) in the Base64 output label with the new token name text-sidebar-foreground (update the className in the Base64 tool component), and perform a repo-wide search-and-replace for patterns like text-(--*) and bg-(--*) to the new Tailwind-like utility names used across the codebase; specifically update the occurrences in Base64ModeButton (base64-mode-button.tsx), shared Command component (command.tsx), ShortcutsCheatsheet (shortcuts-cheatsheet.tsx), ShellIconButton (shell-icon-button.tsx), and TabItem (tab-item.tsx) to their corresponding new tokens so styling continues to work after removing legacy CSS variables.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/shell/shortcuts-cheatsheet.tsx`:
- Around line 17-18: The DialogTitle and DialogClose still use the old
parentheses CSS variable syntax (text-(--fg), text-(--sidebar-fg),
hover:text-(--fg)); update these to the Tailwind-compatible variable syntax used
elsewhere by replacing those tokens with text-[var(--fg)],
text-[var(--sidebar-fg)] and hover:text-[var(--fg)] respectively so DialogTitle
and DialogClose use the new utility classes.
In `@src/app/shell/tab-item.tsx`:
- Line 24: The active tab class uses an incorrect utility "bg-(--bg)"; update
the conditional in the TabItem component (the isActive conditional in
src/app/shell/tab-item.tsx) to use the semantic utility "bg-background" instead
of "bg-(--bg)" so active tabs use the project's standard background variable
(leave the hover class unchanged).
In `@src/index.css`:
- Line 3: The custom Tailwind variant "dark" currently uses the selector
(&:is(.dark *)) which targets a .dark class but your app toggles dark mode via
the root attribute data-theme="dark"; update the variant selector to target that
attribute (replace .dark with [data-theme="dark"]) so dark: utilities activate
(e.g., change the `@custom-variant` dark declaration in src/index.css to use
(&:is([data-theme="dark"] *)); and then verify components using dark: prefixes
such as button.tsx respond).
---
Outside diff comments:
In `@src/modules/base64/ui/base64-tool.tsx`:
- Line 55: Replace the legacy utility text-(--sidebar-fg) in the Base64 output
label with the new token name text-sidebar-foreground (update the className in
the Base64 tool component), and perform a repo-wide search-and-replace for
patterns like text-(--*) and bg-(--*) to the new Tailwind-like utility names
used across the codebase; specifically update the occurrences in
Base64ModeButton (base64-mode-button.tsx), shared Command component
(command.tsx), ShortcutsCheatsheet (shortcuts-cheatsheet.tsx), ShellIconButton
(shell-icon-button.tsx), and TabItem (tab-item.tsx) to their corresponding new
tokens so styling continues to work after removing legacy CSS variables.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 21719805-2192-4a4b-aebb-cdee236c7c44
📒 Files selected for processing (15)
src/app/shell/app-shell.tsxsrc/app/shell/category-section.tsxsrc/app/shell/command-palette.tsxsrc/app/shell/shortcuts-cheatsheet.tsxsrc/app/shell/sidebar-tool-link.tsxsrc/app/shell/sidebar.tsxsrc/app/shell/status-bar.tsxsrc/app/shell/tab-bar.tsxsrc/app/shell/tab-item.tsxsrc/app/tool-host/tool-loading.tsxsrc/app/tool-host/tool-placeholder.tsxsrc/app/tool-host/unknown-tool.tsxsrc/index.csssrc/modules/base64/ui/base64-tool.tsxsrc/routes/index.tsx
Convert the remaining old-var references (--bg/--fg/--sidebar-fg/--accent) that the first pass missed across command, dialog, shortcuts-cheatsheet, tab-item, shell-icon-button and the base64 module, so no className resolves against an undefined custom property. Trim the theme registry to the two palettes index.css actually defines (dark, light) and point the `dark` custom-variant at [data-theme="dark"] to match how themes are applied. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
index.csswith the shadcn variable convention (--background,--foreground,--sidebar,--sidebar-foreground,--primary, ...), exposed to Tailwind via@theme inline.--accent(blue) maps to--primary(brand green); the new--accentis a muted surface, so a literal rename would have rendered highlights gray.bg-(--sidebar),text-(--foreground),border-(--border)) to the registered utility shorthand (bg-sidebar,text-foreground,border-border).Why
Aligns the codebase with the shadcn/ui token system so primitives and utilities resolve against a single, conventional set of theme variables.
Verification
vp check— formatting, lint, and type checks pass (0 errors, 54 files).srcfor the old var names — zero remaining references.Note: unrelated pre-existing
.github/workflows/*.ymlformatting tweaks were left out of this PR to keep it focused.🤖 Generated with Claude Code
Summary by CodeRabbit