fix(overlay): WCAG token fixes, semantic palette, health colors, critical button#48
Merged
DevanshuNEU merged 2 commits intoApr 22, 2026
Conversation
…ical button filled [GET-15]
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughUpdated overlay UI styling and health status visualization: adjusted CSS variable opacity and color values for improved contrast, introduced health dot indicator in the collapsed overlay header, modified collapsed pill to display session total cost and health status, and added critical-state styling for the start button. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui/overlay-styles.ts`:
- Around line 251-253: The health label text classes
(.lco-health-label--healthy, .lco-health-label--degrading,
.lco-health-label--critical) use the same bright indicator colors as small
(10px) text and fail contrast in light/dark surfaces; replace those hardcoded
hex values with accessible text color tokens or higher-contrast shades (e.g.,
define --text-color-health-healthy/degrading/critical) and apply them to those
classes, and ensure theme-aware variants (light vs dark) or use
media/query-based overrides so each label meets WCAG contrast for 10px text.
- Around line 296-311: The critical button (.lco-start-fresh--critical)
currently uses color: rgba(255, 255, 255, 0.92) which lacks sufficient contrast
on the `#c15f3c` background; change the color declaration in
.lco-start-fresh--critical to fully opaque white (color: `#ffffff` or color:
white) to meet contrast for the 10px text, and ensure any related states
(.lco-start-fresh--critical:hover and .lco-start-fresh--critical:active) either
inherit that white color or explicitly set the same opaque white so hover/active
text contrast remains consistent.
- Around line 21-25: The CSS comments next to the overlay custom properties
(e.g., --lco-bg, --lco-bg-hover, --lco-text, --lco-muted, --lco-border) use em
dashes; update those comments to remove em dashes and instead use colons,
semicolons, or a rewritten phrase (for example "was .82: prevents muted text
failing on light page content bleedthrough" or split into two sentences) so they
conform to the "No emdashes" style rule; apply the same replacement to the other
occurrences of these comments elsewhere in the file.
In `@ui/overlay.ts`:
- Line 84: Replace the em dash characters in the three new comments in
ui/overlay.ts (the comment text "Health dot shown in collapsed pill — sole
health signal when minimized." and the two additional occurrences) with a colon,
semicolon, or a rewritten sentence that does not use em dashes to satisfy the
project style rule; locate the comments by searching for the phrase "Health dot
shown in collapsed pill" (and its two other occurrences) and update them to
something like "Health dot shown in collapsed pill: sole health signal when
minimized." or an equivalent punctuation rewrite.
- Around line 409-411: The collapsed cost pill (elCostMini) is not cleared when
state.session.requestCount becomes 0, so it still shows the previous session
total; update the logic that currently only sets elCostMini.textContent when
requestCount > 0 (the branch using elCostMini, state.session.requestCount,
fmtCost and state.session.totalCost) to explicitly clear or reset
elCostMini.textContent (e.g., set to empty string or a default) when
requestCount === 0 so the mini pill is blank after a session reset.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4dd2d37a-d509-4b02-b39d-e9aba8507bb2
📒 Files selected for processing (2)
ui/overlay-styles.tsui/overlay.ts
12 tasks
7 tasks
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.
Summary
Six categories of approved design-system fixes for the overlay widget, derived from a full design review session on 2026-04-21. Addresses three confirmed WCAG AA failures, health-state color inaccuracies (neon green / coral instead of warm sage / real red), a brand-ghost blue in nudge info, and adds a filled critical-state button variant.
Type of Change
fix— Bug fixWhat Was Changed
ui/overlay-styles.ts--lco-bgopacity 0.82 → 0.92 (muted text failed on light page content bleedthrough at 18%);--lco-muted#71717a → #8a8a93 (bumped from WCAG cliff to ~5.8:1);--lco-border0.06 → 0.12 opacity (was invisible on claude.ai dark panels); bg-hover and border-hover adjusted proportionally.--lco-bgopacity 0.85 → 0.92 (parity with dark floor);--lco-muted#a1a1aa → #6b7280 (hard WCAG fail ~3.2:1 on warm cream → ~4.8:1 AA);--lco-border0.06 → 0.08; border-hover 0.12 → 0.14.--lco-warn-fill); critical #f87171 → #ef4444 (real red, not coral). Applied to dot classes, label classes, bar-fill classes, andlco-dot-pulsekeyframe..lco-start-fresh--critical: filled #c15f3c background, white text, terra cotta glow shadow with deepening hover/active states.ui/overlay.tselHealthDotMinito the collapsed header DOM — the sole health signal when the widget is minimized. Class mirrors the expanded dot on every render.elCostMininow shows session total cost (state.session.totalCost) instead of last-reply cost. Cost color stays terra cotta regardless of health state per the design spec (documented in comment).render()applies.lco-start-fresh--criticalwhenhealth.level === 'critical'and removes it otherwise.How to Test
.output/chrome-mv3/in Chrome.Checklist
bun run test) — 1464/1464bun run compile)bun run build)feat:,fix:,refactor:,test:,chore:)Related Issues
Closes #15
Notes for Reviewer
The MINOR pipeline note: when the widget first appears due to a draft estimate only (before any request completes), collapsing the pill shows no cost in the mini display. This is harmless — the expanded draft row already surfaces the draft cost, and the collapsed state is only meaningful once real requests have completed.
Summary by CodeRabbit
New Features
Style