Skip to content

Refactor collapsible colors into theme constants with day/night palettes - #106

Merged
mdlew merged 1 commit into
mainfrom
copilot/refactor-collapsible-element-css
Oct 8, 2026
Merged

mdlew merged 1 commit into
mainfrom
copilot/refactor-collapsible-element-css

Conversation

Copilot AI commented Oct 8, 2026 •

Copy link
Copy Markdown
Contributor

The collapsible element used hard-coded colors (#8A3B12, #59230B, white) that sat outside the text/accent theme system, and its readability depended on the page's time-of-day gradient. This PR moves those colors into explicit constants so the element matches the page palette and stays legible at all hours.

  • New constants in src/ssr.ts, set alongside textColor/accentColor/focusColor:
    • collapsibleBg
    • collapsibleHoverBg
    • collapsibleText
  • Day/night variants use the existing hour branch (day is 07:00–17:59):
    • Night: dark warm brown #2B1D12, hover #4A3220, text #fff4cc (same cream as the night accent).
    • Day: cream #FFF1D6, hover #FFDFA3, text #2B1D12.
  • Applied to:
    • .collapsible
    • .active and :hover
    • the :after +/− icon
    • .content
  • Contrast: the colors are opaque, so they don't depend on the gradient or the containerBg overlay. By my estimate, text contrast is roughly 10–14:1 in both states, including hover. This has not been measured with a tool.
let collapsibleBg = "#2B1D12";
let collapsibleHoverBg = "#4A3220";
let collapsibleText = "#fff4cc";
// day branch overrides: "#FFF1D6" / "#FFDFA3" / "#2B1D12"

The focus ring colors are unchanged and still contrast with the new backgrounds (white at night, black by day). Not checked in a browser.

Co-authored-by: mdlew <47911000+mdlew@users.noreply.github.com>
Copilot AI changed the title Refactor collapsible colors into theme constants Refactor collapsible colors into theme constants with day/night palettes Oct 8, 2026
Copilot AI requested a review from mdlew October 8, 2026 01:00
@mdlew
mdlew marked this pull request as ready for review October 8, 2026 01:09
Copilot AI balanced review requested due to automatic review settings October 8, 2026 01:09
@mdlew
mdlew merged commit 3a4786a into main Oct 8, 2026
5 checks passed
@mdlew
mdlew deleted the copilot/refactor-collapsible-element-css branch October 8, 2026 01:11

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The styling is consistently applied and all foreground/background combinations exceed WCAG contrast requirements.

0 open findings

What changed in this PR

Refactors collapsible styling into day/night theme colors for consistent readability.

Changes:

  • Adds theme-specific collapsible background, hover, and text colors.
  • Applies the palette to buttons, icons, and expanded content.
  • Maintains accessible contrast across all states.
File Description
src/​ssr.ts Defines and applies day/night collapsible palettes.

🧠 Review effort: Balanced


Give feedback about Copilot approvals in this survey to enter a drawing for a $150 gift card.

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.

3 participants