🤖 Consolidate theme variables to Tailwind native colors #399
+433
−593
Conversation
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
Reduced custom CSS variables from 146 to 31 (79% reduction) by migrating to
Tailwind's native color system.
## Changes
### Removed (115 variables)
- 50+ gray variants → Tailwind gray-100 through gray-950
- 7 accent blue variants → Tailwind sky-{400,500,600,700,800}
- 40+ unused colors (toasts, overlays, review backgrounds)
### Kept (31 semantic variables)
- Mode colors: plan, exec, edit, editing, thinking, debug (17 vars)
- Status: interrupted, review-accent, git-dirty, pending (4 vars)
- Special: code-bg, user-border, assistant-border (3 vars)
- Tokens: input, output, cached (3 vars)
- Errors: error, error-bg, error-bg-dark (3 vars)
- Alpha: plan-mode-alpha, editing-mode-alpha (2 vars)
### Files Updated
- globals.css: -114 lines (replaced var() with @apply and theme())
- 60 component files: replaced custom classes with Tailwind equivalents
- text-muted → text-gray-500
- text-foreground → text-gray-200
- bg-dark → bg-gray-950
- border-border → border-gray-800
- text-accent → text-sky-600
## Benefits
- Simplified color system using standard Tailwind scale
- Better developer experience with documented color classes
- Easier theming via Tailwind's built-in system
- Reduced maintenance burden (79% fewer variables)
_Generated with `cmux`_
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Replace text-gray-200-dim with text-gray-400 - Replace text-gray-500-dark with text-gray-600 - Replace all bg-accent* with bg-sky-* - Replace bg-muted-dark with bg-gray-600 - Replace border-dark with border-gray-950
- Fix bg-bg-gray-950 → bg-gray-950 in App.tsx - Fix hover:bg-bg-subtle → hover:bg-gray-800 - Fix text-lighter → text-gray-100 - Fix border-hover → border-gray-900 - Fix text-message-header → text-gray-300
Tailwind's gray scale has a blue undertone. The original theme used pure neutral grays hsl(0 0% X%) with no color tint. Switching to Tailwind's 'neutral' palette which matches the original neutral appearance.
- text-neutral-200 → text-neutral-300 (main text, closer to original 83% lightness) - text-neutral-600 → text-neutral-500 (secondary text) - text-neutral-500 → text-neutral-400 (muted text) - Brighten scrollbar colors to match
Original used hsl(0 0% 12%) (~#1f1f1f, 12% lightness) neutral-950 is too dark (~5% lightness) neutral-900 (~15% lightness) is closer to original
kylecarbs
force-pushed
the
merge-theme
branch
from
5e4983d to
d06db2a
Compare
- Sidebars: neutral-900 → neutral-800 (lighter) - Chat input area: neutral-900 → neutral-800 (lighter) - Scrollbar: gray → neutral (removes blue tint) - Main message area: kept at neutral-900
Removes blue tint from all theme() calls in CSS
- Use exact HSL values instead of @apply for tooltips - background: hsl(0 0% 18%) - color: hsl(0 0% 83%) - border: hsl(0 0% 27%) - Fix caret to match tooltip background
kylecarbs
force-pushed
the
merge-theme
branch
from
b3967a0 to
535b249
Compare
- Use exact hex colors for tooltips: #2d2d30 bg, #d4d4d4 text, #464647 border - Fix tooltip caret to use #2d2d30 - Fix workspace base: neutral-800 → neutral-900 (darker) - Selected workspace stays neutral-800 (lighter than base)
kylecarbs
force-pushed
the
merge-theme
branch
from
d947531 to
f34e7e3
Compare
The sed replacement created malformed className with duplicated 'selected &&' expressions. Fixed to single conditional.
- ProjectSidebar: bg-separator + bg-hover for selected/hover - RightSidebar: bg-separator + border-border-light - LeftSidebar: bg-separator + border-border - Added semantic colors: --color-separator (15%), --color-hover (16.5%) - These match original theme exactly instead of using neutral-800/900
- Message area: bg-neutral-900 → bg-neutral-800 (lighter) - ProjectSidebar collapse border: border-neutral-900 → border-hover (match main)
- Message area: bg-neutral-800 → bg-neutral-950 (darker than sidebars) - ProjectSidebar: bg-sky-600/[0.08] → bg-accent/[0.08] (match main) - Added --color-accent to match main branch pattern
# Conflicts: # src/components/Context1MCheckbox.tsx # src/components/Messages/ChatBarrier/StreamingBarrier.tsx # src/components/ProjectSidebar.tsx # src/components/RightSidebar/CodeReview/FileTree.tsx # src/components/RightSidebar/CodeReview/ReviewControls.tsx # src/components/RightSidebar/CodeReview/ReviewPanel.tsx # src/components/RightSidebar/ConsumerBreakdown.tsx # src/components/RightSidebar/CostsTab.tsx # src/components/RightSidebar/VerticalTokenMeter.tsx # src/components/SecretsModal.tsx # src/components/Tooltip.tsx # src/styles/globals.css
# Conflicts: # src/components/Context1MCheckbox.tsx # src/components/NewWorkspaceModal.tsx # src/components/ThinkingSlider.tsx # src/components/WorkspaceListItem.tsx # src/components/tools/FileReadToolCall.tsx
# Conflicts: # src/components/tools/ProposePlanToolCall.tsx
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.
Reduced custom CSS variables from 146 to 31 (79% reduction) by migrating to Tailwind's native color system.
Changes
Removed (115 variables):
gray-100throughgray-950sky-{400,500,600,700,800}Kept (31 semantic variables):
Files Updated:
globals.css: -152 lines (replacedvar()with@applyandtheme())text-muted→text-gray-500text-foreground→text-gray-200bg-dark→bg-gray-950border-border→border-gray-800text-accent→text-sky-600Benefits
Testing
Generated with
cmux