Fix v5 tool-detail dark mode#23
Conversation
The .tool-detail page defined a private, light-only --td-* palette and hardcoded light literals, so dark mode rendered light cards on a dark page. Route the scattered literals through the --td-* palette and add a dark override (both [data-theme="dark"] and prefers-color-scheme: dark). Light mode is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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: f85f1c94a2
ℹ️ 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".
| .td-condition-warn { | ||
| background: var(--td-warning-soft); | ||
| color: #8c5c00; | ||
| color: var(--td-warning); |
There was a problem hiding this comment.
In light mode this resolves to #b56b00 on the --td-warning-soft chip background (#fff7e8), which is only about 3.9:1 contrast for the 12px condition text; the previous #8c5c00 was about 5.4:1. This makes warning conditions such as “Service Soon” harder to read and falls below normal-text contrast expectations, so keep a darker light-mode ink token for warning text while still overriding it for dark mode.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Tokenizes the .tool-detail palette so the detail-page CSS responds to dark mode. Adds new semantic --td-* tokens, replaces ~40 hardcoded light hex literals with token references, and introduces dark overrides for both :root[data-theme="dark"] and the system prefers-color-scheme: dark triggers (matching the global theme switching mechanism). Also swaps the light hero-image sheen for a subtle dark one in dark mode.
Changes:
- Add new semantic tokens (
--td-ink-2,--td-line-soft,--td-surface-3, plus*-ink/*-line/*-softfor danger/success/warning/sop/info/violet) to the.tool-detaillight palette. - Replace remaining hardcoded light hex literals across
.td-*rules withvar(--td-*)references. - Add dark palette overrides (and a dark hero-image background) under both
:root[data-theme="dark"]and@media (prefers-color-scheme: dark) :root:not([data-theme="light"]).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Fills test gaps from PRs that merged before the suite branch was cut, and documents v5 for agents: - ChatFab tests for <cite> tag stripping (#22): tags removed, cited prose kept, multi-tag and no-tag cases. Plus pending tool-call status labels (get_unit_details / report_issue / generic) and the photo-upload flow (upload → removable preview → [Attached photos: …] hint on send, and the upload-error path). ChatFab statement coverage 54% → 81%; overall 87.5% → 92%. - Dark-mode E2E (#23): tool-detail page resolves the dark design tokens when the dark theme is active, and the choice persists across reload. - v5/AGENTS.md: scoped agent guide (stack, Notion data layer, key files, conventions, how to run the test suite) with an explicit note that the root CLAUDE.md is v4/AirTable and does not apply to v5. - Install @vitest/coverage-v8 so `npm run test:coverage` works (the config referenced the provider but it was never added). test:all green: 232 Vitest + 17 Playwright, lint + tsc clean. Co-authored-by: Isaac S <philosophercode@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Problem
The
.tool-detailpage defined its own light-only--td-*palette and used~40 hardcoded light hex literals, so in dark mode the page rendered light cards
(white panels, pale chips/badges) on the dark app background. The gallery/main
page dark mode was already correct.
Fix
--td-*palette (new semantictokens:
--td-ink-2,--td-line-soft,--td-surface-3, danger/success/warning/sop/info/violet line + soft + ink variants).
the global theme:
:root[data-theme="dark"] .tool-detailand@media (prefers-color-scheme: dark) :root:not([data-theme="light"]) .tool-detail.Light mode is unchanged (palette light values are the original literals).
Verification
Reproduced the tokenized result on the live tool page (DOM-injected the dark
palette + rule overrides): every card, panel, chip, badge, table, and the
Safety section render dark with legible text — no white patches.
Could not run
npm run lintlocally (eslint not installed in this workspace);relying on CI.
🤖 Generated with Claude Code