Seven custom properties are used in app.css but never defined in theme.css: --on-primary, --on-surface, --on-surface-variant, --outline-variant, --outline-low, --outline-faint, --surface-text-muted. Ten uses have no fallback.
With no value, border: 1px solid var(--outline-variant) falls back to currentColor - the bright text colour instead of a subtle outline - and color: var(--on-primary) silently inherits.
Visible in:
ExportDialog's date fields (.export-range input[type=datetime-local], app.css ~6005/6008)
.history-gap (~1288), .voice-play (~3749, play icon on a blue button), .voice-speed.changed (~3833)
Fix: define each as an alias of an existing token in theme.css (e.g. --on-primary: var(--primary-text)), and add a check that every var(--x) used in the CSS is defined.
Part of the v1.0 UI pass.
Seven custom properties are used in `app.css` but never defined in `theme.css`: `--on-primary`, `--on-surface`, `--on-surface-variant`, `--outline-variant`, `--outline-low`, `--outline-faint`, `--surface-text-muted`. Ten uses have no fallback.
With no value, `border: 1px solid var(--outline-variant)` falls back to `currentColor` - the bright text colour instead of a subtle outline - and `color: var(--on-primary)` silently inherits.
Visible in:
- ExportDialog's date fields (`.export-range input[type=datetime-local]`, app.css ~6005/6008)
- `.emoji-jump` (~5812), `.kick-points` (~5873), `.emoji-body` (~7614), `.emoji-footer` (~7677), `.search-filters` (~1248)
- `.history-gap` (~1288), `.voice-play` (~3749, play icon on a blue button), `.voice-speed.changed` (~3833)
**Fix:** define each as an alias of an existing token in `theme.css` (e.g. `--on-primary: var(--primary-text)`), and add a check that every `var(--x)` used in the CSS is defined.
_Part of the v1.0 UI pass._
Salastil
added this to the v1.0 milestone 2026-10-07 20:42:52 -04:00
Salastil
added the bug label 2026-10-07 20:42:52 -04:00
Before and after, captured by scripts/ui-shots.mjs from an isolated copy of the app (before = 88375ba, after = 3cdfe37). The fix is commit 9db25c8.
Export dialog, "A range" selected
The date fields' border: 1px solid var(--outline-variant) used an undefined property, which makes the whole declaration invalid, so they had no border at all before. They now draw the medium outline. The picture is subtle on purpose: the bug was a missing border, not a wrong colour. The focus ring on the radio also changed from the browser's default to the app's blue ring (a #282 change).
Every other use of the seven undefined properties (the emoji picker, history gap, voice play button, search filters, Kick points) is fixed the same way, and src/renderer/src/styles.test.ts now fails if the stylesheet ever uses an undefined property again.
Before and after, captured by `scripts/ui-shots.mjs` from an isolated copy of the app (before = `88375ba`, after = `3cdfe37`). The fix is commit `9db25c8`.
**Export dialog, "A range" selected**
The date fields' `border: 1px solid var(--outline-variant)` used an undefined property, which makes the whole declaration invalid, so they had no border at all before. They now draw the medium outline. The picture is subtle on purpose: the bug was a missing border, not a wrong colour. The focus ring on the radio also changed from the browser's default to the app's blue ring (a #282 change).
Every other use of the seven undefined properties (the emoji picker, history gap, voice play button, search filters, Kick points) is fixed the same way, and `src/renderer/src/styles.test.ts` now fails if the stylesheet ever uses an undefined property again.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Seven custom properties are used in
app.cssbut never defined intheme.css:--on-primary,--on-surface,--on-surface-variant,--outline-variant,--outline-low,--outline-faint,--surface-text-muted. Ten uses have no fallback.With no value,
border: 1px solid var(--outline-variant)falls back tocurrentColor- the bright text colour instead of a subtle outline - andcolor: var(--on-primary)silently inherits.Visible in:
.export-range input[type=datetime-local], app.css ~6005/6008).emoji-jump(~5812),.kick-points(~5873),.emoji-body(~7614),.emoji-footer(~7677),.search-filters(~1248).history-gap(~1288),.voice-play(~3749, play icon on a blue button),.voice-speed.changed(~3833)Fix: define each as an alias of an existing token in
theme.css(e.g.--on-primary: var(--primary-text)), and add a check that everyvar(--x)used in the CSS is defined.Part of the v1.0 UI pass.
Before and after, captured by
scripts/ui-shots.mjsfrom an isolated copy of the app (before =88375ba, after =3cdfe37). The fix is commit9db25c8.Export dialog, "A range" selected
The date fields'
border: 1px solid var(--outline-variant)used an undefined property, which makes the whole declaration invalid, so they had no border at all before. They now draw the medium outline. The picture is subtle on purpose: the bug was a missing border, not a wrong colour. The focus ring on the radio also changed from the browser's default to the app's blue ring (a #282 change).Every other use of the seven undefined properties (the emoji picker, history gap, voice play button, search filters, Kick points) is fixed the same way, and
src/renderer/src/styles.test.tsnow fails if the stylesheet ever uses an undefined property again.Finished: 9db25c8. Before/after above.