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:
+13
-13
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user