feat(design): simplify color theme settings - #134
Conversation
- Remove visible color family grid from theme settings - Consolidate color palettes into a single curated companion palette - Update dark mode to Catppuccin-inspired surfaces with lavender/pink accents - Update light mode to white/neutral surfaces with dark slate text and lavender accent - Migrate legacy theme families and concrete theme values to the new Companion palette - Remove visible live status chip from top toolbar, keeping it screen-reader-only - Clarify that routine `Updated`/`Ready` text stays out of the visible top line This change simplifies the user experience for color theme selection by reducing complexity in the settings. It also refines the visual language for both dark and light modes, aligning with a more modern aesthetic. The removal of the visible live status chip reduces visual clutter while maintaining accessibility for screen readers.
|
Warning Review limit reached
More reviews will be available in 34 minutes and 46 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThe companion app's theme system is consolidated from multiple families (solarized, dracula, catppuccin, github, gruvbox, nord) down to a single ChangesCompanion Theme Consolidation and Settings Rework
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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.
Reviewed commit: 20b83a1f3e
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
DESIGN.md (1)
5-5:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate stale “Last refreshed” metadata.
Line 5 says
Last refreshed: 2026-06-21, but this doc includes revisions through 2026-06-23 (Lines 131-136). Please bump the refresh date to match the latest applied change date.🤖 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 `@DESIGN.md` at line 5, The "Last refreshed" metadata on line 5 of DESIGN.md is outdated and shows 2026-06-21, but the document contains revisions through 2026-06-23 as noted in lines 131-136. Update the refresh date value in the "Last refreshed" line to 2026-06-23 to reflect the actual latest revision date in the document.
🤖 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 `@apps/companion/src/styles/chrome.css`:
- Around line 64-74: The `.toolbar-status-sr` utility class uses the deprecated
`clip` CSS property which should be replaced with the modern `clip-path`
standard. In the chrome.css file, replace the line `clip: rect(0 0 0 0);` with
`clip-path: inset(50%);` in the `.toolbar-status-sr` class definition.
Additionally, update the test file app-shell.test.tsx where line 87 explicitly
asserts the presence of the deprecated `clip` property to instead assert for the
new `clip-path: inset(50%)` property to ensure the test passes after this
change.
---
Outside diff comments:
In `@DESIGN.md`:
- Line 5: The "Last refreshed" metadata on line 5 of DESIGN.md is outdated and
shows 2026-06-21, but the document contains revisions through 2026-06-23 as
noted in lines 131-136. Update the refresh date value in the "Last refreshed"
line to 2026-06-23 to reflect the actual latest revision date in the document.
🪄 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
Run ID: d468500f-33ea-405e-bb56-b5314ee130bf
📒 Files selected for processing (15)
DESIGN.mdapps/companion/src/App.tsxapps/companion/src/application/preferences.tsapps/companion/src/application/themePreferences.tsapps/companion/src/application/useCompanionSettings.tsapps/companion/src/styles/base.cssapps/companion/src/styles/chrome.cssapps/companion/src/styles/settings.cssapps/companion/src/styles/themes.cssapps/companion/src/ui/AppToolbar.tsxapps/companion/src/ui/SettingsPanel.tsxapps/companion/src/ui/SettingsView.tsxapps/companion/tests/app-shell.test.tsxapps/companion/tests/preferences.test.tsapps/companion/tests/settings-panel.test.tsx
💤 Files with no reviewable changes (1)
- apps/companion/src/styles/settings.css
- Update `DESIGN.md` to reflect new error display strategy - Introduce `StatusAlert` component to show visible error messages - Refactor `App` component to manage `visibleError` state - Modify status handling to differentiate between routine updates and visible errors - Move `AppSummary` component to its own file - Add styling for `.app-error` to `chrome.css` This change ensures that critical operation failures, such as refresh, action, or preference errors, are visibly displayed to the user as an alert row, while routine "Ready" or "Updated" statuses remain screen-reader-only. This improves user feedback for actionable errors.
1 participant
Updated/Readytext stays out of the visible top lineThis change simplifies the user experience for color theme selection by reducing complexity in the settings. It also refines the visual language for both dark and light modes, aligning with a more modern aesthetic. The removal of the visible live status chip reduces visual clutter while maintaining accessibility for screen readers.
Summary by CodeRabbit
Release Notes
New Features
Improvements
Changes