fix(web): invisible toggles and focus rings from imported themes

[flamboh]

Note

🤖 Fable 5.1 on behalf of Oliver

Problem

Importing Catppuccin Mocha made every toggle in Settings disappear. The theme sets input.border to fully transparent, which the importer flattened onto the editor background, so the input role became the canvas color. That role is the unchecked switch track and the border of every text input.

An audit of 47 published themes and the VS Code defaults found three more cases of the same shape: a transparent or canvas-colored focusBorder yields an invisible focus ring and accent (all five Vitesse themes, One Dark Pro Flat), the placeholder color was validated against the canvas instead of the raised surface inputs render on (Light+), and names that slug to dark or light (Dark+, Light+) hit a reserved id and fail to import at all.

Fix

The importer now treats a workbench color as usable only when it does the job the role needs:

• The input role tries input.background first, then input.border, and accepts a candidate only if it stands apart from both the canvas and the checked-switch color. Otherwise it keeps the derived value. dropdown.border is no longer a candidate; it turns an edge color into a fill.
• The accent seed skips a focusBorder that flattens into the canvas and moves on to the next accent key, falling back to the standard palette accent instead of the canvas.
• Placeholder readability is checked against the resolved raised surface.
• A generated id that collides with a reserved id gets a -vscode suffix. The label is unchanged.

Built-in themes and the CSS token mapping are untouched. Already imported themes keep their stored colors, so a re-import is needed to pick up the change.

UI changes

Before

After

Focus ring before

Focus ring after

Verification

• Added 6 focused cases for input candidate selection, checked-state separation, transparent focus borders, placeholder readability on the raised surface, and reserved ids
• vp test run apps/web/src/vscodeThemeImport.test.ts, 22 tests passed
• vp lint <changed files> --report-unused-disable-directives
• vp fmt --check <changed files>
• vp run --filter @t3tools/web typecheck
• git diff --check origin/main...HEAD

Changes prepared by Claude Fable 5.1 through Claude Code in T3 Code, with a GPT-5.6 Sol subagent auditing the theme corpus and implementing the importer changes to spec.

Note

[!NOTE]

Fix VS Code theme import to keep switches and focus rings visible

• parseVsCodeThemeFile in vscodeThemeImport.ts now rejects accent, focus, and input candidates that are transparent or lack minimum contrast against the canvas, falling back to a standard visible accent when none qualify.
• Input background and border candidates must also be distinct from the action color, so unchecked switches stay visually separated from checked ones.
• Placeholder readability is now validated against the resolved raised surface rather than only the canvas.
• Generated theme ids that collide with reserved names receive a VS Code-specific suffix.
• Risk: imported themes that previously relied on transparent or low-contrast accent/input values will now resolve to different colors via the fallback logic in parseVsCodeThemeFile.

^{Macroscope summarized c438a65.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a well-scoped fix to VS Code theme import rendering, with focused coverage for transparent controls, focus colors, placeholders, and reserved IDs. It also changes the default colors selected for imported themes lacking usable accent values, so the resulting product behavior should receive human review.

^{You can add or adjust custom eligibility rules. Learn more.}