diff --git a/CLAUDE.md b/CLAUDE.md index 552532a..2eae25a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -37,6 +37,8 @@ All colors are CSS variables in `src/app.css`. Never use hardcoded Tailwind colo | `--success-bg/text` | warm greens | Success states | | `--card-shadow` | `2px 2px 0px` | Hard-offset retro shadow (no blur) | | `--card-shadow-hover` | `3px 3px 0px` | Hover shadow in primary gold | +| `--accent-check` | `var(--primary)` (light) / `#c8a44a` (dark) | Checkbox accent color — dimmed gold in dark mode so a long done-list doesn't shout | +| `--hover-wash` | `var(--border)` (light) / `#ece3d3` (dark) | Tint source for hover/active washes (`bg-[var(--hover-wash)]/N`) — kept cream in dark mode since `--border`'s mid-grey is invisible at low opacity | Note colors for cards are defined in `src/lib/utils/colors.ts`. @@ -83,7 +85,7 @@ together. - **Borders**: Default card borders use `--border-subtle`. `--border` is for strong emphasis (editor, login card). Hover borders use `--primary`. - **Animations**: Crisp and fast (150ms `ease-out`). No spring physics, no bounce. The retro feel comes from snappy transitions. - **Background texture**: A subtle 4px pixel grid overlay at 3% opacity (defined in `body::before`). -- **Checkboxes**: Use `accent-color: var(--primary)` globally — gold checkboxes match the theme. +- **Checkboxes**: Use `accent-color: var(--accent-check)` globally — resolves to `--primary` in light mode and to a dimmed gold (`#c8a44a`) in dark mode so a long done-list doesn't shout. - **Icons**: Lucide icons throughout. Keep at 16-20px size. - **Hover actions**: Never use `hidden group-hover:block` for action buttons — they're invisible on mobile (no hover). Use the opacity pattern instead: `max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100`. This keeps actions always visible on touch devices and hover-revealed on desktop. diff --git a/docs/FEATURES.md b/docs/FEATURES.md index 85a2551..0223249 100644 --- a/docs/FEATURES.md +++ b/docs/FEATURES.md @@ -71,7 +71,7 @@ ### Dark Mode - Three-way theme toggle: System / Light / Dark (in Settings > Preferences) -- Dark mode uses a warm parchment variant — retro aesthetic preserved in both themes +- Dark mode uses near-neutral warm ink surfaces (not a sepia-tinted parchment) — retro aesthetic preserved in both themes - Respects system `prefers-color-scheme` preference by default - FOUC-free: theme applied before first paint via a blocking inline script diff --git a/docs/superpowers/specs/2026-07-31-dark-palette-design.md b/docs/superpowers/specs/2026-07-31-dark-palette-design.md index b643b45..3701882 100644 --- a/docs/superpowers/specs/2026-07-31-dark-palette-design.md +++ b/docs/superpowers/specs/2026-07-31-dark-palette-design.md @@ -144,8 +144,10 @@ export function getNoteChip(color: NoteColor, isDark: boolean): string { ``` `default` and `chalk` stay deliberately neutral (grey and off-white) — they are the "no colour" -slots. Every chip clears 4:1 against the chrome; the closest pair (`fog`/`storm`) is separated by an -RGB distance of 33, which is comfortably tellable apart at 28px. +slots. Chips are non-text UI, so WCAG's bar is 3:1, not 4:1; every chip clears that comfortably +against `--bg-surface`, with the lowest at `coral` 3.95:1 (`storm` 4.02:1, `blossom` 4.10:1). The +closest pair (`fog`/`storm`) is separated by an RGB distance of 33, which is comfortably tellable +apart at 28px. `ColorPicker.svelte` switches from `getNoteColor` to `getNoteChip`. Nothing else uses chips — cards, the editor and the public share page keep calling `getNoteColor`. diff --git a/src/app.css b/src/app.css index 2859fe6..69e0366 100644 --- a/src/app.css +++ b/src/app.css @@ -22,6 +22,10 @@ --card-shadow-hover: 3px 3px 0px var(--primary); --grid-dot: #1a1a2e; --accent-check: var(--primary); + /* Tint source for hover/active washes. Light mode reuses the ink border, so + light styling is byte-identical; dark mode keeps the cream that --border + used to supply, because a mid-grey wash is invisible on a dark surface. */ + --hover-wash: var(--border); } [data-theme="dark"] { @@ -44,6 +48,7 @@ --grid-dot: #ece3d3; /* Dimmed so a long done-list of gold checkboxes doesn't shout. */ --accent-check: #c8a44a; + --hover-wash: #ece3d3; } html, body { diff --git a/src/lib/components/FormattingToolbar.svelte b/src/lib/components/FormattingToolbar.svelte index 74bc39d..44c4a82 100644 --- a/src/lib/components/FormattingToolbar.svelte +++ b/src/lib/components/FormattingToolbar.svelte @@ -121,15 +121,15 @@ const chevronSize = 14; function btnClass(active: boolean = false, disabled: boolean = false): string { - return `shrink-0 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''} ${disabled ? 'opacity-30' : ''}`; + return `shrink-0 rounded p-1.5 text-[var(--text)] hover:bg-[var(--hover-wash)]/10 ${active ? 'text-[var(--primary)] bg-[var(--hover-wash)]/10' : ''} ${disabled ? 'opacity-30' : ''}`; } function dropdownBtnClass(active: boolean = false): string { - return `shrink-0 flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''}`; + return `shrink-0 flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--hover-wash)]/10 ${active ? 'text-[var(--primary)] bg-[var(--hover-wash)]/10' : ''}`; } function dropdownItemClass(active: boolean = false): string { - return `flex w-full items-center gap-2 rounded px-3 py-1.5 text-sm text-[var(--text)] hover:bg-[var(--border)]/5 ${active ? 'bg-[var(--border)]/5' : ''}`; + return `flex w-full items-center gap-2 rounded px-3 py-1.5 text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/5 ${active ? 'bg-[var(--hover-wash)]/5' : ''}`; } function handlePointerDown(event: PointerEvent) { @@ -442,7 +442,7 @@ diff --git a/src/lib/components/ShareDialog.svelte b/src/lib/components/ShareDialog.svelte index d23cada..cdd4f73 100644 --- a/src/lib/components/ShareDialog.svelte +++ b/src/lib/components/ShareDialog.svelte @@ -168,7 +168,7 @@

Share note