Fix dark card visibility, Quarto $secondary, and expand contrast matrix#26
Merged
Merged
Conversation
Follow-up to #25 addressing review findings: - **Dark mode card surfaces visible.** `--card`/`--popover`/`--muted` bumped from #131820 (1.08:1 vs --background) to #1A2030 (1.19:1), and `--border`/`--input` bumped from #1E293B (1.32:1 / 1.11:1 on card) to #334155 (1.87:1 / 1.57:1). Cards and their borders are now distinguishable at glance instead of nearly invisible. - **Quarto `$secondary` fixed.** Was resolving to `--secondary-foreground` (#101828, near-black). Bootstrap's `$secondary` is a fill color, so paper renders previously got a near-black .btn-secondary background. Now uses `--secondary` (#F2F4F7), the light gray surface. - **Contrast matrix coverage.** Added pairs for: `--ring` on `--background` light + dark (WCAG SC 1.4.11 non-text 3:1 for focus indicators), dark `--primary-foreground` on `--primary`, dark `--destructive-foreground` on `--destructive`, and the default link color (teal-600) on background. - **`pretest` hook.** `bun run test` now regenerates `tokens.css` / `quarto.scss` before vitest runs, so token edits without an explicit `bun run generate-tokens` no longer surface as a misleading drift failure. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The pretest hook (added in this PR) silently regenerates tokens.css before
vitest runs, masking the drift test it was added to make less annoying. The
test was specifically designed to catch hand-edits to the generated CSS;
under pretest, those edits get clobbered before the assertion runs and CI
goes green on drift. The error message ("run \`bun run generate-tokens\`")
is already directive, so revert the hook and trust the existing UX.
Also fix the inaccurate "1.11:1 on card" claim in the dark-mode --border
comment — the actual ratio of #1E293B on #131820 is 1.22:1, and add a note
next to the light-mode --ring documenting the SC 1.4.11 dependency
(currently 3.51:1 on white, only ~0.5 above the 3:1 floor).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Round-2 review caught that the dark-card-visibility changelog fragment still claimed the old --border was "1.11:1 vs card" — the same number that was wrong in tokens.ts and got fixed there last commit but missed here. The actual #1E293B-on-#131820 ratio is 1.22:1. Tracking issue for the related --input SC 1.4.11 fail filed as #27. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #25 addressing review findings.
--card/--popover/--mutedbumped from#131820(1.08:1 vs--background— visually invisible) to#1A2030(1.19:1).--border/--inputbumped from#1E293B(1.32:1 vs bg, 1.11:1 vs card — also invisible) to#334155(1.87:1 / 1.57:1). Cards and their borders are now distinguishable at glance.$secondaryfill fixed. Was resolving to--secondary-foreground(#101828, near-black). Bootstrap's$secondaryis a fill color, so paper renders previously got a near-black.btn-secondarybackground where Bootstrap expects a light gray. Now uses--secondary(#F2F4F7), matching the dashboard's secondary surface.--ringon--background(light + dark, WCAG SC 1.4.11 non-text 3:1 for focus indicators)--primary-foregroundon--primary--destructive-foregroundon--destructivepretesthook.bun run testnow regeneratestokens.css/quarto.scssbefore vitest runs, so token edits withoutbun run generate-tokensno longer surface as a misleading drift failure.Test plan
bun run typecheckbun run test— 22 files, 219 tests pass (incl. expanded contrast matrix + drift check)bun run build— clean🤖 Generated with Claude Code