ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

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

Browse Source 
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:
archvillainette
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
Download Patch File Download Diff File Expand all files Collapse all files
scss/westgate/_topbar.scss
+24 -24
View File
@@ -9,7 +9,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
z-index: 1020;
color: var(--wg-text-soft);
background: rgb(24, 20, 29);
border-bottom: 1px solid rgba(194, 163, 90, 0.2);
border-bottom: 1px solid rgba(var(--wg-gold-rgb), 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.04),
0 12px 32px rgba(0, 0, 0, 0.34);
@@ -47,14 +47,14 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.3rem;
height: 2.3rem;
border: 1px solid rgba(194, 163, 90, 0.36);
border: 1px solid rgba(var(--wg-gold-rgb), 0.36);
border-radius: 50%;
color: var(--wg-gold);
background:
radial-gradient(circle at 38% 24%, rgba(255, 238, 190, 0.2), transparent 30%),
linear-gradient(145deg, rgba(58, 24, 48, 0.7), rgba(10, 9, 13, 0.98));
box-shadow:
inset 0 0 0 1px rgba(9, 8, 11, 0.66),
inset 0 0 0 1px rgba(var(--wg-bg-deep-rgb), 0.66),
0 8px 18px rgba(0, 0, 0, 0.35);
font-family: var(--wg-font-display);
font-weight: 700;
@@ -105,8 +105,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .nav-item.active > .nav-link,
.wg-topbar .nav-item.active > .navigation-link {
color: #f3ede4;
border-color: rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.075);
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
@@ -137,8 +137,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__utility-list [component$="/count"],
.wg-topbar__drawer-actions [component$="/count"],
.wg-topbar [component="navigation/count"] {
background: linear-gradient(to bottom, rgba(142, 52, 56, 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(216, 194, 138, 0.26);
background: linear-gradient(to bottom, rgba(var(--wg-red-rgb), 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26);
color: #fff0dc;
}
@@ -159,7 +159,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .user-dropdown {
min-width: min(22rem, calc(100vw - 1.5rem));
max-width: calc(100vw - 1.5rem);
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 8px !important;
color: var(--wg-text-soft) !important;
background:
@@ -210,7 +210,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register {
border: 1px solid var(--wg-gold-soft) !important;
color: #f0e6d8 !important;
background: linear-gradient(to bottom, #5a4a1a, #473914) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate), var(--wg-gold-plate-deep)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
@@ -221,8 +221,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register:hover,
.wg-topbar__register:focus {
border-color: var(--wg-gold) !important;
color: #fff4dd !important;
background: linear-gradient(to bottom, #6a5720, #53431a) !important;
color: var(--wg-gold-hi) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate-hover), var(--wg-gold-plate-mid)) !important;
}
.wg-topbar__login,
@@ -241,15 +241,15 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__login {
color: var(--wg-text-soft);
border: 1px solid rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.055);
border: 1px solid rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__login:hover,
.wg-topbar__login:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.3);
background: rgba(194, 163, 90, 0.1);
border-color: rgba(var(--wg-gold-rgb), 0.3);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__burger {
@@ -258,21 +258,21 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid rgba(194, 163, 90, 0.22);
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 6px;
color: var(--wg-text-soft);
background: rgba(194, 163, 90, 0.055);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__burger:hover,
.wg-topbar__burger:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__drawer {
display: none;
border-top: 1px solid rgba(194, 163, 90, 0.12);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.12);
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%),
$wg-topbar-panel-bg;
@@ -294,10 +294,10 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
display: flex;
align-items: center;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.18);
border: 1px solid rgba(var(--wg-gold-rgb), 0.18);
border-radius: 8px;
padding: 0.5rem 0.65rem;
background: rgba(9, 8, 11, 0.45);
background: rgba(var(--wg-bg-deep-rgb), 0.45);
}
.wg-topbar__drawer-search input {
@@ -311,7 +311,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
// The input's own outline is off; put the visible focus ring on its wrapper.
.wg-topbar__drawer-search:focus-within {
border-color: rgba(194, 163, 90, 0.5);
border-color: rgba(var(--wg-gold-rgb), 0.5);
box-shadow: 0 0 0 1px var(--wg-focus);
}
@@ -328,7 +328,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
align-items: center;
justify-content: space-between;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 7px;
padding: 0.62rem 0.7rem;
color: var(--wg-text-soft);
@@ -341,7 +341,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__drawer-actions a:hover,
.wg-topbar__drawer-actions a:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.22);
border-color: rgba(var(--wg-gold-rgb), 0.22);
background: var(--wg-border-soft);
}