Skip to content

style(theme): align light and dark palettes with Dreamcoder OS tokens - #116

Merged
Dreamcoder08 merged 1 commit into
mainfrom
style/theme-dreamcoder-palette
Oct 27, 2026
Merged

Dreamcoder08 merged 1 commit into
mainfrom
style/theme-dreamcoder-palette

Conversation

@Dreamcoder08

@Dreamcoder08 Dreamcoder08 commented Oct 27, 2026 •

Copy link
Copy Markdown
Owner

Summary

  • Dark mode now maps to the Dreamcoder Dark palette: OLED surface ladder, neutral text ramp, indigo accent with violet hover/pressed steps.
  • Light mode accent moves to dreamcoder's burnt sienna (#824f16); surfaces and ink already matched the light tokens, and the pressed steps stay darker so the state contract holds.
  • Borders are deliberately untouched: hairline weight is a design decision, not a palette one.

Changes

File Change
src/styles/global/01-theme-tokens.css Dark @theme palette remapped to Dreamcoder Dark tokens
src/styles/global/02-theme-modes.css Light accent, focus alias and danger aligned
src/styles/portfolio/18-interaction-states.css Ratio citations refreshed for the new palette
README.md Palette line updated

Palette mapping

Role Before (dark) After (dark) Source
surface-alt / elevated / hover / active #0d0d10 / #17171c / #1e1e24 / #26262e #0b0b0b / #0d0d0f / #1f1f1f / #2e2e2e surface0–surface3
text #ededeb #e6e6e6 text
secondary / tertiary #b7b8b3 / #96978f unchanged kept for the press-state contract
accent / hover / active #ff7a18 / #ff8f42 / #ffa25e #a5b4fc / #d4b5fd / #ddd6fe accent / accent_2
on-accent #0a0a0a #000000 on_accent
danger #ff6b6b #fb8585 error
Light accent / hover / active #8a4e26 / #7a4522 / #6b3c1c #824f16 / #6f4211 / #5f380e accent + darker pressed steps
Light danger #b3261e #842f24 error

Test plan

  • pnpm test:unit — 196/196 (A1 key parity, A2 categories, A7 contrast floors, A8 state ordering, A9 focus alias)
  • pnpm run check (astro sync + tsc)
  • pnpm run check:size
  • astro dev render check: no ff7a18 / ff8f42 / ffa25e left in the served HTML, new tokens present
  • CI on this PR (gitleaks, build, Lighthouse)

Notes

The tests/theme-state contract requires every hover/press to keep at least its own at-rest ratio. That is why dark keeps its tuned #b7b8b3 / #96978f text ramp instead of dreamcoder's brighter #c7c7c7 muted (a brighter rest label leaves no room for a press step), and why the light accent steps darken rather than follow link_hover.

Local pnpm build fails at prerender with Named export 'parseCookie' not found, because the hoisted root node_modules/cookie resolves to 0.7.2 (from @lhci/cli → express) while Astro needs 2.0.1. Reproduced on a stashed baseline, and CI on main is green, so it is a local install artifact, not this change.

Risk: none.

@Dreamcoder08
Dreamcoder08 force-pushed the style/theme-dreamcoder-palette branch from 91937c8 to e240aee Compare October 27, 2026 06:41
Palette values map to dreamcoder-dots/DreamcoderThemes/dreamcoder/tokens.json.

- Dark: OLED surface ladder (#0b0b0b / #0d0d0f / #1f1f1f / #2e2e2e), text
  #e6e6e6, indigo accent #a5b4fc with violet hover #d4b5fd and pressed
  #ddd6fe, on-accent #000, danger #fb8585.
- Light: accent from #8a4e26 to dreamcoder's #824f16, with pressed steps that
  stay darker (#6f4211 / #5f380e) so the state contract in
  tests/theme-state keeps its "a state never drops below its at-rest ratio"
  rule. Danger #842f24.
- Secondary and tertiary keep the repo's legibility-tuned #b7b8b3 / #96978f:
  dreamcoder's brighter #c7c7c7 secondary leaves no room for a press step that
  still clears that rule.
- Borders are untouched on purpose: the minted hairlines are a weight decision,
  not a palette one.
- Refresh the ratio citations in 18-interaction-states.css and the palette line
  in README.md so no comment keeps quoting the retired colours.

Verified: pnpm test:unit 204/204 (A1/A2/A7/A8/A9 token contract), pnpm run check,
pnpm run check:size.
@Dreamcoder08
Dreamcoder08 force-pushed the style/theme-dreamcoder-palette branch from e240aee to f50f0da Compare October 27, 2026 06:48
@Dreamcoder08
Dreamcoder08 merged commit 67eb7fc into main Oct 27, 2026
2 checks passed
@Dreamcoder08
Dreamcoder08 deleted the style/theme-dreamcoder-palette branch October 27, 2026 06:54
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.

1 participant