LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Light mode: status dropdown no longer renders dark (#19)
Lint / PHP (phpcs PSR-12) (push) Successful in 23s
Details
Lint / JS (eslint) (push) Successful in 11s
Details
Lint / PHP requirements (version + extensions) (push) Successful in 22s
Details
Lint / Notify on failure (push) Skipped
Details
Security / PHP Security (semgrep) (push) Successful in 1m11s
Details
Lint / Deploy (push) Successful in 2s
Details

Browse Source 
Two separate causes, both light-mode-only:

1. base.css `.lt-select` sets `color-scheme: dark` on the element itself, which
   outranks the `color-scheme: light` the light theme sets on <html>, so the
   native dropdown popup kept dark chrome. The option list is also hardcoded
   #0d1117/#c9d1d9 with no light override. Fixed with light overrides for both
   (synced from web_template, where the same fix landed as 378a8cd).

2. ticket.css coloured the status select with var(--lt-success), --lt-amber,
   --lt-cyan and --lt-danger — none of which are defined anywhere in the
   project, so all four always fell through to hardcoded neon fallbacks. Now
   uses the --accent-* tokens, which carry the same hues and are redefined for
   light mode. The selectors also lead with .lt-select: at two classes they lost
   to base.css's `html[data-theme="light"] .lt-select` (0,2,1) and every status
   was repainted near-black in light mode.

Verified with computed styles in headless chromium — all four statuses in both
themes (8/8), plus the popup colour-scheme and option colours.
This commit is contained in:
jared
2026-08-07 22:51:16 -04:00
parent 1d03800ab2
commit a5b0655623
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+19
View File
@@ -3737,6 +3737,25 @@ html[data-theme="light"] .lt-textarea:focus-visible {
border-color: var(--accent-cyan);
box-shadow: var(--box-glow-cyan);
}
/* Native <select> popup in light mode.
`.lt-select` sets `color-scheme: dark` on the element itself, which beats the
`color-scheme: light` declared on <html>, so the browser drew the dropdown with
dark chrome even in light mode. Reset it per element, and re-tint the option
list, which is otherwise hardcoded to #0d1117 for the dark theme. */
html[data-theme="light"] .lt-select { color-scheme: light; }
html[data-theme="light"] .lt-select option,
html[data-theme="light"] select option {
background: var(--bg-input);
color: var(--text-primary);
}
html[data-theme="light"] .lt-select option:hover,
html[data-theme="light"] .lt-select option:focus,
html[data-theme="light"] .lt-select option:checked,
html[data-theme="light"] select option:checked {
background: var(--accent-orange-dim);
color: var(--accent-orange);
}
html[data-theme="light"] .lt-label { color: var(--text-muted); }
/* — Buttons — */
assets/css/ticket.css
+12 -4
View File
@@ -54,10 +54,18 @@ body.edit-mode .editable-metadata {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lt-status-select.lt-status-open { color: var(--lt-success, #00ff41); border-color: var(--lt-success, #00ff41); }
.lt-status-select.lt-status-pending { color: var(--lt-amber, #ffb000); border-color: var(--lt-amber, #ffb000); }
.lt-status-select.lt-status-in-progress { color: var(--lt-cyan, #00ffff); border-color: var(--lt-cyan, #00ffff); }
.lt-status-select.lt-status-closed { color: var(--lt-danger, #ff4d4d); border-color: var(--lt-danger, #ff4d4d); }
/* --lt-success / --lt-amber / --lt-cyan / --lt-danger are not defined anywhere,
so these always fell through to the hardcoded neon fallbacks — unreadable on
the light theme's white input background. The --accent-* tokens carry the same
hues and are redefined for light mode in base.css.
The leading .lt-select is needed for specificity: base.css's
`html[data-theme="light"] .lt-select` (0,2,1) would otherwise outrank a plain
two-class selector and repaint every status the same near-black. */
.lt-select.lt-status-select.lt-status-open { color: var(--accent-green); border-color: var(--accent-green); }
.lt-select.lt-status-select.lt-status-pending { color: var(--accent-amber); border-color: var(--accent-amber); }
.lt-select.lt-status-select.lt-status-in-progress { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.lt-select.lt-status-select.lt-status-closed { color: var(--accent-red); border-color: var(--accent-red); }
/* ── Ticket meta KV grid ─────────────────────────────────────── */
.ticket-meta-grid {