mirror of
https://github.com/kuhyx/testsAndMisc.git
synced 2026-11-15 05:10:51 +01:00
kcd2_dice_solver: warm-tint the unified-design-system palette, fix design audit violations
Fixes every violation in DESIGN_AUDIT_TODO.md's kcd2_dice_solver section: 15px root font-size (root cause of both the sub-16px body-text floor and the off-grid rem spacing scale), 2 hardcoded tier colors bypassing the custom-property system (also separates their brightness from --accent/ --good, and removes an accidental cool tint from tier-silver), the largest text widening tracking instead of tightening it, near-invisible border contrast (~1.4:1 -> >=3:1 against both bg and panel), inconsistent ad-hoc border-radii collapsed into a 2-step scale with nested elements using the smaller radius, and two off-ratio button paddings corrected to an exact 2x. Verified: lint clean, 210/210 tests at 100% coverage, production build, re-verified identical in an isolated worktree at HEAD (narrowly staged around this monorepo's unrelated dirty state), and pixel-checked via a real `vite preview` production build through a headless-Chrome screenshot. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
7f2c1e19df
commit
517fbe5d3b
@ -0,0 +1,49 @@
|
||||
{
|
||||
"intent": "Retint kcd2_dice_solver/src/index.css to the frozen unified-design-system palette and fix every violation in the repo's own DESIGN_AUDIT_TODO.md entry for this app.",
|
||||
"scope": [
|
||||
"kcd2_dice_solver/src/index.css"
|
||||
],
|
||||
"changes": [
|
||||
"Root font-size 15px -> 16px (fixes body-text floor and straightens the rem-based spacing grid onto clean 4px multiples in one change, per the audit's own root-cause note)",
|
||||
"New --tier-tin/--tier-silver custom properties replace hardcoded #a8a196/#cfd4da hex; tier-tin also darkened (was clustering within 2 L* points of --accent/--good) and tier-silver re-tinted warm (was the one cool-leaning hex in an otherwise all-warm palette)",
|
||||
"--line darkened-neutral -> #736750 (was ~1.4:1 against bg/panel, now >=3:1 against both, computed)",
|
||||
"header h1 letter-spacing 0.02em -> -0.01em (largest text was widening tracking instead of tightening it)",
|
||||
"New --radius-sm(3px)/--radius-md(8px) tokens replace the ad-hoc 3/4/6/8px radii; nested elements (.search, .die-list, .die-main, .die-tag, .stepper-value, .stats div) now use the smaller radius since they sit well inside an 8px-radius, 16px-padding outer panel (nesting should trend toward 0, not stay equal to the outer radius)",
|
||||
".search and .clear/.stepper-button padding corrected to an exact 2x horizontal:vertical ratio (0.5rem 1rem); was 1.5x and 1.75x respectively",
|
||||
".hint font-size 0.85rem -> 1rem (flagged reading-content text under the 16px floor)"
|
||||
],
|
||||
"verification": [
|
||||
{
|
||||
"command": "pnpm run lint",
|
||||
"result": "pass",
|
||||
"evidence": "tsc --noEmit && eslint src clean"
|
||||
},
|
||||
{
|
||||
"command": "pnpm run coverage",
|
||||
"result": "pass",
|
||||
"evidence": "14 test files, 210 tests passed; 100% statements/branches/functions/lines"
|
||||
},
|
||||
{
|
||||
"command": "pnpm run build",
|
||||
"result": "pass",
|
||||
"evidence": "vite build succeeded, dist/ regenerated"
|
||||
},
|
||||
{
|
||||
"command": "isolated git worktree re-run of lint+coverage+build at the commit's parent HEAD",
|
||||
"result": "pass",
|
||||
"evidence": "identical results to the dirty-tree run"
|
||||
},
|
||||
{
|
||||
"command": "pnpm run preview + headless-Chrome screenshot of the real production build",
|
||||
"result": "pass",
|
||||
"evidence": "visually reviewed: crisp visible borders on search/die-list/panels, tighter title tracking, distinct tin/silver/gold tier colors, no layout breakage"
|
||||
}
|
||||
],
|
||||
"risks": [
|
||||
"No deploy target for this repo (local dev tool) — verification ceiling is the production build + preview, not a live check",
|
||||
"Exact L*/contrast values were hand-computed with the standard sRGB->linear approximation (not the WCAG piecewise formula), same caveat the original audit itself carries; margins were kept generous (>=3.1:1 vs the 3:1 floor) to absorb the approximation error"
|
||||
],
|
||||
"rollback": [
|
||||
"git revert this commit — the change is a single CSS file, no other files coupled to it"
|
||||
]
|
||||
}
|
||||
@ -2,16 +2,20 @@
|
||||
--bg: #17150f;
|
||||
--panel: #201d16;
|
||||
--panel-2: #2a261d;
|
||||
--line: #3a3428;
|
||||
--line: #736750;
|
||||
--text: #e8e0cf;
|
||||
--muted: #9d947f;
|
||||
--accent: #c8a24a;
|
||||
--good: #7fb069;
|
||||
--bad: #c96b5b;
|
||||
--tier-tin: #8a8175;
|
||||
--tier-silver: #d4cfc2;
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 8px;
|
||||
|
||||
color-scheme: dark;
|
||||
font-family: "Iosevka", "Cascadia Code", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -34,7 +38,7 @@ header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@ -60,7 +64,7 @@ section.inventory,
|
||||
.caveats {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@ -82,10 +86,10 @@ section.inventory,
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
}
|
||||
@ -105,11 +109,11 @@ section.inventory,
|
||||
.stepper-button {
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0.4rem 0.7rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.clear:disabled,
|
||||
@ -125,7 +129,7 @@ section.inventory,
|
||||
|
||||
.hint {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
font-size: 1rem;
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
@ -145,7 +149,7 @@ section.inventory,
|
||||
max-height: 46vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.die-row {
|
||||
@ -176,7 +180,7 @@ section.inventory,
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
padding: 0.35rem;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@ -235,7 +239,7 @@ section.inventory,
|
||||
font-size: 0.7rem;
|
||||
color: var(--bg);
|
||||
background: var(--accent);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
|
||||
@ -253,7 +257,7 @@ section.inventory,
|
||||
text-align: center;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
}
|
||||
@ -268,10 +272,10 @@ section.inventory,
|
||||
}
|
||||
|
||||
.tier-tin {
|
||||
color: #a8a196;
|
||||
color: var(--tier-tin);
|
||||
}
|
||||
.tier-silver {
|
||||
color: #cfd4da;
|
||||
color: var(--tier-silver);
|
||||
}
|
||||
.tier-gold {
|
||||
color: var(--accent);
|
||||
@ -334,7 +338,7 @@ section.inventory,
|
||||
|
||||
.stats div {
|
||||
background: var(--panel-2);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user