prototype(#53): palette candidates as runtime token swaps

Throwaway. Tokenises the theme's literal colours so candidate palettes can be
swapped in the browser, adds three candidates (Plum Noir one-metal, two-metal
pewter, two-metal plus a champagne inset), a WCAG checker, a seeder and the
screenshots they are judged on.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-31 16:31:41 +02:00
co-authored by Claude Opus 5
parent cfef363107
commit ea36116e62
48 changed files with 743 additions and 393 deletions
+13 -13
View File
@@ -192,33 +192,33 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border-radius: 6px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
transition: background 0.2s, border-color 0.2s;
&:hover,
&:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(216, 194, 138, 0.44);
background: rgba(var(--wg-gold-rgb), 0.075);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
}
// Matches the theme's .btn-primary dark gold plate (see _controls.scss).
&.primary {
color: #f0e6d8;
background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
border-color: #a8893f;
background: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
border-color: var(--wg-gold-soft);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
&:hover,
&:focus {
color: #fff4dd;
background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
border-color: #c2a35a;
color: var(--wg-gold-hi);
background: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
border-color: var(--wg-gold);
}
}
}
@@ -434,7 +434,7 @@ a.sow-card:hover {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(9, 8, 11, 0.55) 0%, rgba(9, 8, 11, 0.25) 38%, rgba(9, 8, 11, 0.82) 86%, var(--wg-bg) 100%);
background: linear-gradient(180deg, rgba(var(--wg-bg-deep-rgb), 0.55) 0%, rgba(var(--wg-bg-deep-rgb), 0.25) 38%, rgba(var(--wg-bg-deep-rgb), 0.82) 86%, var(--wg-bg) 100%);
}
.sow-home-hero-inner {
@@ -672,7 +672,7 @@ a.sow-card:hover {
line-height: 1.7;
background: var(--wg-ledger-panel);
border: 1px solid var(--wg-ledger-border);
border-left-color: rgba(194, 163, 90, 0.32);
border-left-color: rgba(var(--wg-gold-rgb), 0.32);
border-radius: 6px;
box-shadow: var(--wg-ledger-shadow);
@@ -1000,9 +1000,9 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
border-radius: 6px;
}