Skip to content

fix(ui): make delete-project dialog readable under the paper theme - #28

Merged
LZH-YS1998 merged 1 commit into
HKUDS:mainfrom
CatJuly:fix/paper-theme-dialog-contrast
Aug 6, 2026
Merged

fix(ui): make delete-project dialog readable under the paper theme#28
LZH-YS1998 merged 1 commit into
HKUDS:mainfrom
CatJuly:fix/paper-theme-dialog-contrast

Conversation

@CatJuly

@CatJuly CatJuly commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Switching to the paper theme and clicking delete on a project produced an unreadable confirmation dialog — the title and body text were invisible against the panel.

Root cause

ProjectSelector.tsx painted the dialog panel with:

background: 'var(--bg-surface, #1e1e2e)'

--bg-surface is not defined by any stylesheet in the project — a scan of every var(--token) reference against every theme block confirms it, along with --bg-primary, are the only two undefined tokens. So all seven themes fell through to the hardcoded dark #1e1e2e and the panel never tracked the active palette.

This stayed invisible under the six dark themes, whose --text is light and therefore still contrasted fine against a dark panel. The paper theme is the only light palette — its --text is #1e293b, which put dark text on the dark panel at roughly 1.05:1 contrast.

It also explains the exact shape of the symptom: Cancel stayed faintly legible because .pill-btn uses --text-secondary, and Delete stayed fully legible because it hardcodes color: #fff over a red fill. Only the title and body, which inherit --text, disappeared.

Fix

  • Panel background → var(--bg-elevated), so it follows the active theme (#ffffff under paper, #141b2b under midnight, etc.)
  • Title and body get explicit --text / --text-secondary instead of inherited color plus opacity: 0.7 — dimming by opacity is equally unreliable over a light surface
  • Added a --border outline so the now-white panel still reads as a distinct layer above the scrim

Fixing the token rather than adding a .theme-paper override keeps the next light theme from hitting the same trap.

Effect on other themes

All seven themes now resolve the panel from their own palette. The six dark themes shift only slightly (#1e1e2e to e.g. #141b2b) since they were already close to the hardcoded value — they go from coincidentally readable to consistently themed.

Testing

Note

There is a second instance of this token class not touched here: kanban/kanban.css:922 uses color-mix(in srgb, var(--bg-primary) 80%, transparent) where --bg-primary is undefined and has no fallback, so that whole background declaration is dropped at compute time. Left out to keep this PR scoped to the reported bug — happy to send it separately.

… readable

The confirm dialog painted its panel with `var(--bg-surface, #1e1e2e)`, but
`--bg-surface` is not defined by any stylesheet in the project. Every theme
therefore fell through to the hardcoded dark `#1e1e2e`.

That went unnoticed under the six dark themes, whose `--text` is light and so
still contrasted against the dark panel. The paper theme is the only light
palette: its `--text` is `#1e293b`, which put dark text on the dark panel at
roughly 1.05:1 contrast and made the title and body invisible.

Point the panel at `--bg-elevated` so it tracks the active palette, and give
the title and body explicit `--text` / `--text-secondary` colors instead of
relying on inherited color plus `opacity: 0.7`, which is equally unreliable
over a light surface. Add a `--border` outline so the now-white panel still
reads as a distinct layer above the scrim.

Verified by hand across all seven themes.
@CatJuly
CatJuly force-pushed the fix/paper-theme-dialog-contrast branch from 4b9c090 to 2584c45 Compare August 5, 2026 09:27
@LZH-YS1998
LZH-YS1998 merged commit a3503e6 into HKUDS:main Aug 6, 2026
0 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants