Skip to content

fix(web): update pills use readable theme foregrounds - #5938

Merged
maria-rcks merged 2 commits into
pingdotgg:mainfrom
chrisdeeming:fix/update-pill-contrast
Aug 10, 2026
Merged

fix(web): update pills use readable theme foregrounds#5938
maria-rcks merged 2 commits into
pingdotgg:mainfrom
chrisdeeming:fix/update-pill-contrast

Conversation

@chrisdeeming

@chrisdeeming chrisdeeming commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

What Changed

  • Use the dedicated updateForeground token for sidebar update-pill content.
  • Give T3 Code Dark a lighter update foreground with AA-compliant contrast.
  • Apply the foreground token consistently to desktop and provider update pills.
  • Add a regression test for the T3 Code Dark palette contrast.

Why

Update pills used the stronger update accent as text over updateSurface, producing insufficient contrast across most built-in themes.

Using the existing semantic foreground role fixes the named themes without changing their palettes. T3 Code Dark also needed a distinct updateForeground, changed from #366ffb to #5c86ff.

WCAG 2.2 AA requires at least 4.5:1 contrast for this 12px normal text. Before this change, the update label passed in only 1 of the 12 built-in theme/mode combinations; the other 11 ranged from 2.04:1 to 4.30:1. Using updateForeground raises every named theme to AA, while the dedicated T3 Code Dark adjustment raises its remaining failure from 3.88:1 to 5.08:1.

Theme Before After
T3 Code Dark 3.88:1 — Fail 5.08:1 — Pass AA
T3 Chat Light 3.17:1 — Fail 5.50:1 — Pass AA
T3 Chat Dark 2.04:1 — Fail 11.72:1 — Pass AA

UI Changes

Theme Before After
T3 Code Dark before-t3-code-dark after-t3-code-dark
T3 Chat Light before-t3-chat-light after-t3-chat-light
T3 Chat Dark before-t3-chat-dark after-t3-chat-dark

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes — Not applicable; no motion or interaction changed.

Note

Low Risk
Visual token and class changes only; no behavior, data, or security surface.

Overview
Fixes low-contrast text on sidebar update pills by using the semantic updateForeground role instead of the strong update accent for labels and icons.

Desktop and provider update pills now apply text-update-foreground (and the dismiss control matches). Dark default tokens remap --update-foreground from primary blue to var(--color-blue-400), and T3 Code Dark sets updateForeground to #51a2ff so small text on updateSurface meets WCAG AA against the tinted pill background.

Reviewed by Cursor Bugbot for commit 13c0b81. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Fix pill text colors to use readable update-foreground theme tokens

Updates sidebar update pills to use the text-update-foreground color token instead of text-update for text and icons. Also remaps --update-foreground to --color-blue-400 in index.css and updates the T3 Code dark theme palette in themePalette.ts to a lighter blue value.

Macroscope summarized 13c0b81.

@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7d63d4a3-b518-414a-9688-ffc736839f13

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Aug 10, 2026
@chrisdeeming chrisdeeming changed the title Fix/update pill contrast fix(web): update pills use readable theme foregrounds Aug 10, 2026
Comment thread apps/web/src/themePalette.ts Outdated
@macroscopeapp

macroscopeapp Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved 13c0b81

Purely cosmetic styling changes that update CSS class names and color values to improve text readability in sidebar pills. No runtime behavior impact beyond visual appearance.

You can customize Macroscope's approvability policy. Learn more.

@chrisdeeming
chrisdeeming force-pushed the fix/update-pill-contrast branch from e13cf36 to 7fe63f1 Compare August 10, 2026 02:28
@github-actions github-actions Bot added size:S 10-29 changed lines (additions + deletions). and removed size:XS 0-9 changed lines (additions + deletions). labels Aug 10, 2026
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 10, 2026
@chrisdeeming
chrisdeeming force-pushed the fix/update-pill-contrast branch from 7fe63f1 to abce8da Compare August 10, 2026 02:38
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 10, 2026 02:38

Dismissing prior approval to re-evaluate abce8da

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 10, 2026
@chrisdeeming
chrisdeeming force-pushed the fix/update-pill-contrast branch from abce8da to ff94f17 Compare August 10, 2026 02:56
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 10, 2026 02:56

Dismissing prior approval to re-evaluate ff94f17

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ff94f17. Configure here.

Comment thread apps/web/src/index.css Outdated
@chrisdeeming
chrisdeeming force-pushed the fix/update-pill-contrast branch from ff94f17 to 13c0b81 Compare August 10, 2026 03:15
@maria-rcks
maria-rcks merged commit 3d74474 into pingdotgg:main Aug 10, 2026
17 checks passed
github-actions Bot added a commit to omarcresp/t3code-flake that referenced this pull request Aug 10, 2026
## What's Changed
* Move project settings to contextual project routes by @juliusmarminge in pingdotgg/t3code#5923
* Retain thread sidebar data when navigating to /settings so back navigation is instant by @juliusmarminge in pingdotgg/t3code#5930
* Automate production mobile EAS releases by @juliusmarminge in pingdotgg/t3code#5609
* Add settings and usage breadcrumbs by @juliusmarminge in pingdotgg/t3code#5929
* fix(web): correct model picker trigger padding by @Chrono-byte in pingdotgg/t3code#5935
* fix(web): show worktree icon in sidebar v2 by @tris203 in pingdotgg/t3code#5909
* fix(web): enable restore defaults after theme mix changes by @Lucenx9 in pingdotgg/t3code#5928
* fix(web): trait menu closes after you pick a level by @t3dotgg in pingdotgg/t3code#5879
* fix(web): align project name with headline by @carterwsmith in pingdotgg/t3code#5864
* fix(web): update pills use readable theme foregrounds by @chrisdeeming in pingdotgg/t3code#5938

## New Contributors
* @carterwsmith made their first contribution in pingdotgg/t3code#5864

**Full Changelog**: pingdotgg/t3code@v0.0.33-nightly.20260810.1054...v0.0.33-nightly.20260810.1055

Upstream release: https://github.com/pingdotgg/t3code/releases/tag/v0.0.33-nightly.20260810.1055
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants