Skip to content

Convert design token colors from hex to oklch - #57

Merged
amyrlam merged 1 commit into
mainfrom
claude/design-tokens-color-format-a5ba6f
Jul 24, 2026
Merged

Convert design token colors from hex to oklch#57
amyrlam merged 1 commit into
mainfrom
claude/design-tokens-color-format-a5ba6f

Conversation

@amyrlam

@amyrlam amyrlam commented Jul 24, 2026

Copy link
Copy Markdown
Owner

Summary

  • Converts the fixed accent color tokens in @theme (global.css) and the mirrored @property initial-values from hex to oklch(), plus the matching values documented in DESIGN.md's frontmatter and prose.
  • Values are exact conversions (same sRGB colors, different notation) — no visual change. OKLCH keeps lightness perceptually uniform across hues, which is what this repo's build-enforced AAA contrast check (check:contrast) already relies on being true.
  • Left sky.ts's live sun/moon interpolation in RGB (that's the format it needs for its mix() math) and left the SVG fill="#0a1030" literal in Layout.astro and the Impeccable-generated .impeccable/design.json snapshot untouched — out of scope for a token-format change.

Test plan

  • pnpm run check:contrast — AAA holds at every sun altitude
  • pnpm run lint:css — clean (stylelint enforces deg units on oklch hue, auto-fixed)
  • pnpm run format:check — clean
  • Verified in browser: homepage and /design-system swatches render pixel-identical before/after

🤖 Generated with Claude Code

Hex can't express lightness/hue relationships or be interpolated without
parsing; OKLCH keeps lightness perceptually uniform across hues, which
lines up with the build-enforced AAA contrast checks in check-contrast.ts.
Values are exact conversions, so rendering is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
youthphase Ready Ready Preview, Comment Jul 24, 2026 6:37am

amyrlam added a commit that referenced this pull request Jul 24, 2026
Feedback-driven revision: the first draft was long and token-centric.
This one covers the site's full story (the geo lookup and "borrowed
sky" honesty, real stars, quarter-hour hops, the secret shows, the
static-plus-one-function deploy) while cutting overall length ~20%.
The tokens shrink to one section, with color-format-agnostic wording
plus an oklch mention so the prose survives PR #57's hex-to-oklch
conversion. New "objects under the sky" section names the two print
mountings (lightbox polaroids vs. the taped dinghy print) as one
deliberate family rather than an inconsistency.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@amyrlam
amyrlam merged commit bd49ecd into main Jul 24, 2026
8 checks passed
@amyrlam
amyrlam deleted the claude/design-tokens-color-format-a5ba6f branch July 24, 2026 06:47
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