Skip to content

fix(web): web colors come from theme tokens - #13371

Merged
juliusmarminge merged 1 commit into
lint/unknown-and-staticfrom
lint/raw-colors
Sep 24, 2026
Merged

juliusmarminge merged 1 commit into
lint/unknown-and-staticfrom
lint/raw-colors

Conversation

@juliusmarminge

@juliusmarminge juliusmarminge commented Sep 24, 2026 •

Copy link
Copy Markdown
Member

Turns on @shadcn/lint no-raw-colors as an error for all of apps/web/src. Findings go from 267 to 0, and no theme tokens are added.

Exemption: Icons.tsx and JetBrainsIcons.tsx. Third-party marks must keep their exact colours. Three copied marks move into Icons.tsx so the exemption covers them: the macOS Screen Recording and Accessibility panes, and Codex's Computer Use icon.

Status colours use the theme's warning / success / info / error tokens, so they follow custom themes. In dark mode the old -300 text shades become the tokens' -400.

  • Warning: Sidebar drafts and wake, toasts, the PR changed/truncated/error states and code-tab glyphs, the Usage warning, the attachment badge, the Connections pairing dot, and Diagnostics.
  • Success: toasts, resolved comments, the legacy sidebar port link, the terminal chip, and the Diagnostics healthy dots.
  • Info: the snooze divider, the device inspector overlay, and the thread search "You:" label.
  • Error: the Sidebar thread error, the toast failure icon, and the preview recording dot.

One-offs moved to the nearest token (worth a look):

Where Was Now
Favourite model star yellow warning
Artifact template sparkle fuchsia primary
"Waiting for input" toast icon indigo info
CLI sign-in eyebrow blue primary
Add-provider option hover zinc-50 accent
⌘Q quit overlay pill fixed dark inverted theme colours

Also worth a look:

  • The resource telemetry series and category dots now use status tokens. They aren't statuses, so a proper chart palette may be better later.
  • Known blind spot: the rule does not check colours stored in objects. The PR state colours in pullRequestIcons.tsx are an example (merged = violet), so those stay raw and unreported.

Before / after

Before (main) After
Favourite model star Favourite star before, yellow Favourite star after, amber warning
⌘Q quit pill, light Quit pill before, light mode Quit pill after, light mode
⌘Q quit pill, dark Quit pill before, dark mode Quit pill after, dark mode
Diagnostics resource timeline Resource timeline before, sky I/O reads Resource timeline after, blue info I/O reads

Merged-PR violet is unchanged (the rule cannot see colours kept in objects): Sidebar rows with merged, open and draft PR badges

Claude Opus 5.5 via Claude Code.

🤖 Generated with Claude Code

Enable shadcn/no-raw-colors as an error for all of apps/web/src, including
components/ui (it had no findings there). 267 findings -> 0.

Status colors move onto the tokens the theme already declares, so they follow
custom themes and each light/dark pair collapses into one class:
- amber -> warning / warning-foreground / warning-surface
- emerald -> success / success-foreground
- sky, blue -> info / info-foreground
- red -> destructive / destructive-foreground
The Diagnostics I/O read/write series (sky/amber) and process category dots
use info/warning/success too, the nearest tokens, not status meanings.

One-offs go to the nearest existing token: the favorite model star (yellow)
uses warning, the artifact template sparkle badge (fuchsia) uses primary, the
"waiting for input" toast icon (indigo) uses info-foreground, the CLI auth
eyebrow (blue) uses primary, the provider driver option hover (zinc-50) uses
accent, and the quit overlay pill (neutral-700 + white) inverts with
foreground/background.

SVG strokes in ContextWindowMeter and DesktopUpdateStatusIcon use stroke
utilities with the existing tokens instead of inline color-mix().

No new tokens.

Exemption: Icons.tsx and JetBrainsIcons.tsx have the rule off. They hold
third-party marks that must keep their exact colors (brand logos, and now
also the macOS Screen Recording / Accessibility pane marks from the SnapShot
setup dialog and Codex's Computer Use mark from the work log, moved there
from their feature files for that reason).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@juliusmarminge
juliusmarminge added this pull request to stack #13372 September 24, 2026 07:31
@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Sep 24, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider Metric Main baseline This PR Impact PR ceiling
Codex Total thread wire — 13.5 KiB — 15.1 KiB ✅
Codex Thread snapshot wire — 7.1 KiB — 7.3 KiB ✅
Codex Live turn WebSocket wire — 6.5 KiB — 7.8 KiB ✅
Codex Live turn WebSocket decoded — 56.3 KiB — 66.4 KiB ✅
Codex Live turn messages — 10 — 21 ✅
Claude Total thread wire — 13.5 KiB — 15.1 KiB ✅
Claude Thread snapshot wire — 7.1 KiB — 7.3 KiB ✅
Claude Live turn WebSocket wire — 6.4 KiB — 7.8 KiB ✅
Claude Live turn WebSocket decoded — 57.0 KiB — 66.4 KiB ✅
Claude Live turn messages — 9 — 21 ✅

Baseline: unavailable · PR result: 3e8da02 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

  • Codex decoded thread snapshot: 114.0 KiB
  • Claude decoded thread snapshot: 114.7 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

@macroscopeapp

macroscopeapp Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is largely a mechanical, presentation-focused migration from raw colors to theme tokens, with existing icon rendering preserved. It also adds a file-scoped override disabling the raw-color lint rule, which warrants human review.

You can add or adjust custom eligibility rules. Learn more.

@coderabbitai

coderabbitai Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: f75d20f0-b30d-4837-b763-a3a9724b69d7

📥 Commits

Reviewing files that changed from the base of the PR and between c5aa11f and 3e8da02.

📒 Files selected for processing (28)
  • apps/web/src/components/ChatMarkdown.tsx
  • apps/web/src/components/Icons.tsx
  • apps/web/src/components/LegacySidebar.tsx
  • apps/web/src/components/QuitHoldOverlay.tsx
  • apps/web/src/components/Sidebar.tsx
  • apps/web/src/components/ThreadNotificationCoordinator.tsx
  • apps/web/src/components/ThreadSearchMatch.tsx
  • apps/web/src/components/chat/ChatComposer.tsx
  • apps/web/src/components/chat/ContextWindowMeter.tsx
  • apps/web/src/components/chat/MessagesTimeline.tsx
  • apps/web/src/components/chat/ModelListRow.tsx
  • apps/web/src/components/chat/TerminalContextInlineChip.tsx
  • apps/web/src/components/cloud/ConnectCliAuthSurface.tsx
  • apps/web/src/components/device/DeviceStreamView.tsx
  • apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
  • apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
  • apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
  • apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
  • apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
  • apps/web/src/components/settings/AddProviderInstanceDialog.tsx
  • apps/web/src/components/settings/ConnectionsSettings.tsx
  • apps/web/src/components/settings/DiagnosticsSettings.tsx
  • apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
  • apps/web/src/components/settings/SnapShotSetupDialog.tsx
  • apps/web/src/components/sidebar/DesktopUpdateStatusIcon.tsx
  • apps/web/src/components/usage/UsagePage.tsx
  • apps/web/src/routes/_chat.pull-requests.tsx
  • vite.config.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.


📝 Walkthrough

Walkthrough

The web UI replaces fixed color classes and inline color values with semantic theme tokens. The change also adds three shared SVG icons, replaces two local icon implementations with shared components, and enables raw-color linting for web source.

Changes

Web UI theme and icons

Layer / File(s) Summary
Add and adopt shared SVG icons
apps/web/src/components/Icons.tsx, apps/web/src/components/settings/SnapShotSetupDialog.tsx, apps/web/src/components/chat/MessagesTimeline.tsx
Adds shared macOS screen-recording, macOS accessibility, and computer-use icons. The permission dialog and chat timeline use the shared icons instead of local SVG implementations.
Replace fixed UI colors with theme tokens
apps/web/src/components/*, apps/web/src/components/chat/*, apps/web/src/components/cloud/*, apps/web/src/components/device/*, apps/web/src/components/preview/*, apps/web/src/components/pullRequest/*, apps/web/src/components/settings/*, apps/web/src/components/sidebar/*, apps/web/src/components/usage/*, apps/web/src/routes/_chat.pull-requests.tsx, vite.config.ts
UI components replace fixed colors and inline color values with semantic theme classes. The web lint configuration reports raw colors as errors, with exceptions for Icons.tsx and JetBrainsIcons.tsx.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Bug fix

Suggested reviewers: maria-rcks, bil0000

Merge Risk: ⚪ Minimal · up to 3e8da

This change standardizes web colors and reuses shared icons; no concrete user-facing failure is supported, so it is ready to merge after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 22.22% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 36 functions across 28 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly summarizes the primary change: replacing raw web colors with theme tokens.
Description check ✅ Passed The description explains the scope, rationale, exemptions, affected UI areas, known limitation, and includes before-and-after screenshots. It does not reproduce the template headings or checklist, but…
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

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

@juliusmarminge
juliusmarminge merged commit 315fcca into main Sep 24, 2026
24 of 26 checks passed
@juliusmarminge
juliusmarminge deleted the lint/raw-colors branch September 24, 2026 17:49
sheehanmunim added a commit to munimtechnologies/mtcode that referenced this pull request Sep 24, 2026
Conflicts, resolved onto the fork's versions:
- theme-token restyle (pingdotgg#13371, pingdotgg#13397): re-applied upstream's token edits
  (text-2xs, rounded-sm, bg-(--terminal-background), dropped panel max-h and
  heading tracking) onto the fork's restructured CommandPalette, composer
  chip, terminal drawer and settings panels.
- sidebar stage art: followed upstream in dropping the focus-ring offset
  helper; its fork test is gone and the compact-crop test now checks the
  new data-stage-art marker.
- review diff index (pingdotgg#12613): took upstream's rounded-down index mtime,
  which supersedes the fork's same-second copy.
- preview broker tests: kept the fork's profile-routing tests beside
  upstream's live-tab-owner tests.
- mobile environment row (pingdotgg#13302): kept the fork's rename button and added
  upstream's opensDetails chevron and switch alignment; the new environment
  detail screen now passes onRename too.
- AgentAwarenessRelay test: upstream's new ServerEnvironment mock gains the
  fork's setEnvironmentLabel.
- pnpm-lock.yaml regenerated from the merged manifests.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
github-actions Bot added a commit to omarcresp/t3code-flake that referenced this pull request Sep 25, 2026
## What's Changed
* lint/unknown and static by @juliusmarminge in pingdotgg/t3code#13366
* fix(web): web colors come from theme tokens by @juliusmarminge in pingdotgg/t3code#13371
* fix(web): appearance classes use theme tokens and scale values by @juliusmarminge in pingdotgg/t3code#13397
* fix(server): keep Codex's reset answer when the re-probe fails by @juliusmarminge in pingdotgg/t3code#13363
* fix(mobile): branch search finds remote and space-typed branches by @Bil0000 in pingdotgg/t3code#13454
* chore(ci): use GPT 6 Sol Max for check agents by @juliusmarminge in pingdotgg/t3code#13473
* feat(server): show and redeem Claude banked resets by @Bil0000 in pingdotgg/t3code#13118
* fix(observability): a malformed OTEL_RESOURCE_ATTRIBUTES no longer stops startup by @yordis in pingdotgg/t3code#13469
* fix(antigravity): let Stop end commands that outlived their turn by @juliusmarminge in pingdotgg/t3code#13388
* fix(web,mobile): drop the baked-in tile from the Antigravity icon by @flamboh in pingdotgg/t3code#13373
* fix(marketing): use the official OpenCode and Antigravity logos by @flamboh in pingdotgg/t3code#13365
* fix(acp): keep one answer when a running tool reports progress by @juliusmarminge in pingdotgg/t3code#13386
* feat(web): run shell commands from chat in the thread terminal by @Bil0000 in pingdotgg/t3code#13060
* fix(antigravity): keep Windows runtime unpacking under MAX_PATH by @juliusmarminge in pingdotgg/t3code#13389
* fix(codex): the protocol generator runs again on Effect rc.115 by @juliusmarminge in pingdotgg/t3code#13480
* feat(codex): require Codex 0.156 and regenerate its protocol by @juliusmarminge in pingdotgg/t3code#13481
* feat(threads): add per-thread auto-settle switch by @t3dotgg in pingdotgg/t3code#11846
* fix(web): working and monitoring threads fade in the sidebar again by @t3dotgg in pingdotgg/t3code#13506
* fix(server): streamed section titles wait for the text under them by @t3dotgg in pingdotgg/t3code#13504
* fix(web): normalize disabled control opacity by @t3-code[bot] in pingdotgg/t3code#11441


**Full Changelog**: pingdotgg/t3code@v0.0.43-nightly.20260924.2213...v0.0.43-nightly.20260924.2223

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

Labels

size:L 100-499 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.

1 participant