fix: widget inputs text color too close to background

[dem-extra1]

Closes #51

WIP — opened up front to claim the issue; implementing now.

[github-actions]

Claude finished review — View run

---

Review: PR #52 — fix: widget inputs text color too close to background

Scope: Pure CSS/SCSS change (styles.css + styles-reveal.scss, +89/-0 total), no .qmd, R, or build-config changes. Fixes #51 (widget slider number/text/select inputs becoming illegible against the light .widget-panel background when the site's quarto-dark theme or the reveal.js qwt-dark toggle is active).

Verification performed

• Confirmed body.quarto-dark and body.qwt-dark are real, pre-existing selectors already used elsewhere in both files (not hallucinated) — styles.css:63-206, styles-reveal.scss:8-30.
• Confirmed .widget-panel is a real class applied via inline style on three OJS figure panels (_subfiles/linear-algebra/_fig-tilt-a-plane.qmd, _subfiles/vector-calc/_fig-linear-approx.qmd, _subfiles/vector-calc/_fig-gradient-explorer.qmd), each setting background-color:#fbfbfb; color:#222; color-scheme:light; inline — consistent with the rationale in the new CSS comments.
• Compiled styles-reveal.scss with sass (dart-sass 1.105.1): compiles cleanly, braces balanced, no syntax errors.
• Confirmed the Bootstrap custom properties used (--bs-table-color, --bs-table-bg, --bs-table-border-color, --bs-table-striped-color, --bs-table-striped-bg) are real Bootstrap 5 table variables, not invented.
• Checked all three current .widget-panel usages in the repo: none render an OJS/HTML <table> (all three panels are Inputs.range/Inputs.radio sliders plus md/Plot.plot output). So the new .widget-panel table, .widget-panel table thead tr th, .widget-panel table th/td rules (styles.css:253-276, styles-reveal.scss:106-126) currently have no matching element anywhere in the site — they're speculative/forward-looking CSS, not exercised by anything the PR (or the repo) currently renders.
• Confirmed .qmd/.R/.md-scoped CI checks (non-standard-chars, spell-check) don't apply to .css/.scss, and the diff itself contains no non-ASCII punctuation.
• No R code touched, so .lintr.R doesn't apply.

Findings

1. Speculative/unused CSS for table styling (styles.css:253-276, styles-reveal.scss:106-126) — moderate, non-blocking.
   The PR adds ~24 lines per file (roughly half the diff) targeting .widget-panel table even though no current widget panel renders a table. The second commit message ("...and tables in widget panels remain legible") shows this was a deliberate scope extension, not an oversight, but per CLAUDE.md "Things to avoid" / "Don't design for hypothetical future requirements," and the UCD-SERG lab manual's emphasis on scoped changes, this is code that can't be visually verified against any real content in this repo today — if the exact Bootstrap variable assumptions (e.g., the claimed div.observablehq table thead tr th { background-color: var(--bs-body-bg); } rule from Quarto's dark theme, which I could not independently confirm from Quarto's upstream source) turn out to be wrong, nothing in CI or a PR preview would catch it, since no page exercises the selector. Suggest either dropping the table rules until a widget panel actually uses a table, or noting in the PR description that they're anticipatory and should be spot-checked against a real OJS table before being relied on.

2. Fix not visually verified in the PR — suggestion, non-blocking.
   The PR body is still "WIP" with no before/after screenshots for either the website dark-mode toggle or the reveal.js qwt-dark toggle. A PR preview link is posted (https://Morrison-Lab.github.io/mds/pr-preview/pr-52/); recommend the author confirm both dark-mode input legibility and (if feasible) a constructed test table before merge, since I could not render Quarto/OJS in this environment to check visually myself.

Everything else — selector scoping, dark/light guard conditions, media-query breakpoint, color contrast (#222 on #fff/transparent), SCSS syntax/nesting, and consistency with the project's existing dual-stylesheet (HTML vs. reveal.js) dark-mode pattern — checks out.

Verdict

Ready for merge — no blocking issues; the two items above are suggestions for the author to consider, not required changes.

Structured Review Data (JSON)

{
  "schema_version": "1.1",
  "reviewer": "claude",
  "commit_sha": "92e6fac107bac850c7cca945a7ba608578334464",
  "verdict": "CLEAN",
  "findings": [],
  "detailed_assessment": "styles.css and styles-reveal.scss add widget-panel table rules with no current qmd content rendering a table, so that portion of the diff is unexercised and unverifiable via preview.",
  "holistic_assessment": "The dark-mode input-legibility fix for issue 51 is correctly scoped to existing selectors and passes sass compilation, satisfying the regression and integration requirements for this small CSS-only PR."
}

Reviewed commit: 92e6fac

[github-actions]

💰 Cost: $0.8089 (review) — run

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-09-30 14:09 PDT