Skip to content

Convert design token colors from hex to oklch #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amyrlam merged 1 commit into from
Jul 24, 2026
Merged

Convert design token colors from hex to oklch #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
name: youthphase.dev
description: Amy Lam's personal site — a living sky with real stars, and a life in polaroids
colors:
sky-top-midnight: '#0a1030'
sky-bottom-midnight: '#1e2c60'
ink-default: '#f1eefb'
chip-bg-fallback: '#141a3d'
polaroid-ivory: '#f7f4ed'
polaroid-ink: '#2a2620'
moonlight: '#f4f7ff'
moonlight-low: '#ffeecf'
starlight: '#f0f4ff'
backdrop-night: '#05060c'
sky-top-midnight: 'oklch(19.04% 0.064 271.04)'
sky-bottom-midnight: 'oklch(31.28% 0.094 269.05)'
ink-default: 'oklch(95.52% 0.0176 296.63)'
chip-bg-fallback: 'oklch(23.43% 0.067 272.85)'
polaroid-ivory: 'oklch(96.75% 0.0098 87.47)'
polaroid-ink: 'oklch(27.09% 0.0123 78.08)'
moonlight: 'oklch(97.62% 0.0111 269.55)'
moonlight-low: 'oklch(95.47% 0.0445 82.61)'
starlight: 'oklch(96.73% 0.0153 269.99)'
backdrop-night: 'oklch(12.42% 0.0152 274.63)'
typography:
display:
fontFamily: 'Space Grotesk Variable, system-ui, sans-serif'
Expand Down Expand Up @@ -90,18 +90,18 @@ The palette is an engine, not a swatch list — `src/scripts/sky.ts` computes ev

### Primary

- **The Sky Gradient** (`--sky-top` / `--sky-bottom`, defaults #0a1030 / #1e2c60): the page background, deep midnight blue at night through pink and peach at golden hour to moody slate at midday. Never hardcode a color that's meant to track the sky; use the variables.
- **Computed Ink** (`--ink`, default #f1eefb): all body text, chosen per frame for ≥4.5:1 against the mid-gradient band.
- **The Chip Surface** (`--card-bg` / `--chip-ink`, fallback #141a3d): the guaranteed-7:1 background used by `.sky-chip`, `.sky-card`, `.sky-caption`, and the horizon band.
- **The Sky Gradient** (`--sky-top` / `--sky-bottom`, defaults oklch(19.04% 0.064 271.04) / oklch(31.28% 0.094 269.05)): the page background, deep midnight blue at night through pink and peach at golden hour to moody slate at midday. Never hardcode a color that's meant to track the sky; use the variables.
- **Computed Ink** (`--ink`, default oklch(95.52% 0.0176 296.63)): all body text, chosen per frame for ≥4.5:1 against the mid-gradient band.
- **The Chip Surface** (`--card-bg` / `--chip-ink`, fallback oklch(23.43% 0.067 272.85)): the guaranteed-7:1 background used by `.sky-chip`, `.sky-card`, `.sky-caption`, and the horizon band.

### Secondary

- **Polaroid Ivory** (#f7f4ed) with **Polaroid Ink** (#2a2620): the one deliberately sky-independent surface — the expanded photo card in the lightbox, warm like a real print.
- **Polaroid Ivory** (oklch(96.75% 0.0098 87.47)) with **Polaroid Ink** (oklch(27.09% 0.0123 78.08)): the one deliberately sky-independent surface — the expanded photo card in the lightbox, warm like a real print.

### Neutral

- **Moonlight** (#f4f7ff, warming to #ffeecf when the moon rides low): the moon's core and halo family.
- **Starlight** (#f0f4ff): stars, shooting stars.
- **Moonlight** (oklch(97.62% 0.0111 269.55), warming to oklch(95.47% 0.0445 82.61) when the moon rides low): the moon's core and halo family.
- **Starlight** (oklch(96.73% 0.0153 269.99)): stars, shooting stars.
- **Night Backdrop** (rgba(5, 6, 12, 0.82) over the page): the lightbox dimming layer.

### Named Rules
Expand Down Expand Up @@ -171,7 +171,7 @@ Shape and spacing are also `@theme` tokens: `rounded-card` (1rem) and `rounded-p

### The Polaroid (signature component)

The expanded photo view: ivory card (#f7f4ed), 1rem padding with a deeper 1.25rem bottom margin, 0.25rem radius, caption written in the bottom margin in Polaroid Ink. Emoji-only captions render at 1.75rem (jumbomoji). On touch phones, it swipes like a physical print — drag-follow with resistance and a capped ±3° tilt, toss-off past 40px, settle-back under it — with Instagram-style position dots below.
The expanded photo view: ivory card (oklch(96.75% 0.0098 87.47)), 1rem padding with a deeper 1.25rem bottom margin, 0.25rem radius, caption written in the bottom margin in Polaroid Ink. Emoji-only captions render at 1.75rem (jumbomoji). On touch phones, it swipes like a physical print — drag-follow with resistance and a capped ±3° tilt, toss-off past 40px, settle-back under it — with Instagram-style position dots below.

### Navigation

Expand Down
28 changes: 14 additions & 14 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@
version of the same values). Tailwind v4 turns each of these into a
real CSS custom property, so they're usable both as utility classes
(rounded-card, text-headline, p-card-pad) and as var(--color-...)
inside plain <style> blocks like Lightbox.astro's — one source of
inside plain \3c style> blocks like Lightbox.astro's — one source of
truth for the site's fixed accents instead of hex literals scattered
per component. The sky's own live-computed colors (--sky-top,
--ink, --card-bg, etc.) stay a separate runtime layer below; they
change every frame and can't be static theme tokens. */
@theme {
--color-sky-top-midnight: #0a1030;
--color-sky-bottom-midnight: #1e2c60;
--color-ink-default: #f1eefb;
--color-chip-bg-fallback: #141a3d;
--color-polaroid-ivory: #f7f4ed;
--color-polaroid-ink: #2a2620;
--color-moonlight: #f4f7ff;
--color-moonlight-low: #ffeecf;
--color-starlight: #f0f4ff;
--color-backdrop-night: #05060c;
--color-sky-top-midnight: oklch(19.04% 0.064 271.04deg);
--color-sky-bottom-midnight: oklch(31.28% 0.094 269.05deg);
--color-ink-default: oklch(95.52% 0.0176 296.63deg);
--color-chip-bg-fallback: oklch(23.43% 0.067 272.85deg);
--color-polaroid-ivory: oklch(96.75% 0.0098 87.47deg);
--color-polaroid-ink: oklch(27.09% 0.0123 78.08deg);
--color-moonlight: oklch(97.62% 0.0111 269.55deg);
--color-moonlight-low: oklch(95.47% 0.0445 82.61deg);
--color-starlight: oklch(96.73% 0.0153 269.99deg);
--color-backdrop-night: oklch(12.42% 0.0152 274.63deg);

--text-display: clamp(3.75rem, 8vw, 6rem);
--text-display--font-weight: 500;
Expand Down Expand Up @@ -52,19 +52,19 @@
@property --sky-top {
syntax: '<color>';
inherits: true;
initial-value: #0a1030;
initial-value: oklch(19.04% 0.064 271.04deg);
}

@property --sky-bottom {
syntax: '<color>';
inherits: true;
initial-value: #1e2c60;
initial-value: oklch(31.28% 0.094 269.05deg);
}

@property --ink {
syntax: '<color>';
inherits: true;
initial-value: #f1eefb;
initial-value: oklch(95.52% 0.0176 296.63deg);
}

html {
Expand Down
Loading