mirror of
https://github.com/kuhyx/testsAndMisc-archive.git
synced 2026-11-10 20:27:04 +01:00
Fixes every violation in DESIGN_AUDIT_TODO.md's bucket_catch frontend section. The app previously had no shared tokens at all (index.css was a 12-line reset) and 19 hardcoded hex colors duplicated independently across 6 *.module.css files. New :root token block in index.css: bg gradient stops, a drag-state gradient, the indigo/pink accent pair collapsed to one canonical --gradient-accent direction, text/surface colors, success/error, 2 consolidated muted-gray roles (down from 4 unrelated shades), a 4px spacing scale, and a radius scale. All 6 component files migrated onto it. Fixes the real reversed-gradient-stop bug the audit named (PuzzleResult.module.css .grade was pink->indigo vs every other heading's indigo->pink) plus a second instance of the same bug the audit's prose didn't cite by line number (ModeSelect.module.css .puzzleStart button) -- both now reference --gradient-accent so this class of bug can't recur. Also fixes: .preset's border contrast (was under 3:1), cardDesc's sub-16px font-size, 4 buttons' off-ratio padding (now exact 2x), 2 large icons' full-contrast rendering next to muted text (now dimmed), the explicitly-cited off-grid spacing values, and ModeSelect's gridInput background color which had drifted from its DropZone sibling's. Verified: 145/145 tests at 100% coverage (CSS-only, confirms no functional regression), a real vite build succeeds, re-verified identical in an isolated worktree at HEAD, and pixel-checked the production build via a headless-Chrome screenshot (gradient direction now matches between heading and button; preset chip borders clearly visible). `npm run lint` (tsc -b + eslint) was already broken on a clean checkout before this change (1 pre-existing tsc error in vite.config.ts, 46 pre-existing eslint errors in untouched test/lib files) -- confirmed via an isolated worktree at the parent commit, left alone as out of scope. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
26 lines
390 B
CSS
26 lines
390 B
CSS
.wrapper {
|
|
position: relative;
|
|
width: 100dvw;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
|
|
.canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hint {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: rgba(var(--color-pink-rgb), 0.7);
|
|
font-size: 0.9rem;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|