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/_topics.scss
+48 -48
View File
@@ -35,8 +35,8 @@ body.template-category .category-header .description {
.topic-list-header .btn:hover,
.topic-list-header .btn:focus {
background: rgba(194, 163, 90, 0.075) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
}
@@ -61,7 +61,7 @@ li[component="category/topic"] {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.34) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
@@ -69,11 +69,11 @@ li[component="category/topic"] {
li[component="category/topic"]:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.024), transparent 5.25rem),
linear-gradient(100deg, rgba(24, 17, 25, 0.28) 0%, rgba(14, 13, 18, 0.91) 42%, rgba(9, 8, 12, 0.95) 100%) !important;
border-color: rgba(194, 163, 90, 0.085) !important;
border-left-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.085) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014), inset 0 -1px 0 rgba(0, 0, 0, 0.36) !important;
}
@@ -89,50 +89,50 @@ li[component="category/topic"]::after {
right: 0;
left: 0;
height: 1px;
background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, var(--wg-focus), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="category/topic"].unread:nth-child(even) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.09), transparent 5.25rem),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
}
li[component="category/topic"]:hover {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 0 16px rgba(120, 36, 84, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}
li[component="category/topic"].unread {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.085), transparent 5.65rem),
var(--wg-ledger-panel) !important;
border-color: rgba(216, 194, 138, 0.17) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.17) !important;
border-left-color: var(--wg-ledger-ink) !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
li[component="category/topic"].pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.075), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-left-color: rgba(216, 194, 138, 0.44) !important;
border-left-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
box-shadow:
var(--wg-ledger-shadow),
inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important;
inset 0 -1px 0 rgba(var(--wg-ledger-ink-rgb), 0.055) !important;
}
li[component="category/topic"].pinned:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.036) calc(100% - 1px)),
linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem),
linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
border-left-color: var(--wg-focus) !important;
}
@@ -147,7 +147,7 @@ li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.
right: 0.25rem;
height: 1px;
background:
linear-gradient(to right, transparent, rgba(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent);
linear-gradient(to right, transparent, rgba(var(--wg-ledger-ink-rgb), 0.22), rgba(var(--wg-red-rgb), 0.1), transparent);
}
li[component="category/topic"].locked {
@@ -155,11 +155,11 @@ li[component="category/topic"].locked {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.04) calc(100% - 1px)),
linear-gradient(90deg, rgba(93, 47, 54, 0.11), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.18) !important;
border-left-color: rgba(168, 74, 78, 0.42) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.18) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.42) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 12px rgba(142, 52, 56, 0.09) !important;
0 0 12px rgba(var(--wg-red-rgb), 0.09) !important;
}
li[component="category/topic"].locked:not(.unread) {
@@ -167,19 +167,19 @@ li[component="category/topic"].locked:not(.unread) {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.034) calc(100% - 1px)),
linear-gradient(90deg, rgba(82, 39, 46, 0.1), transparent 5.75rem),
linear-gradient(100deg, rgba(24, 16, 21, 0.38), rgba(11, 10, 14, 0.95)) !important;
border-color: rgba(168, 74, 78, 0.14) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.14) !important;
}
li[component="category/topic"].locked.pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-stamp-rgb), 0.1), rgba(var(--wg-gold-rgb), 0.065) 4.4rem, transparent 7rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.2) !important;
border-left-color: rgba(168, 74, 78, 0.58) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.58) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 14px rgba(142, 52, 56, 0.085) !important;
0 0 14px rgba(var(--wg-red-rgb), 0.085) !important;
}
li[component="category/topic"].pinned::after,
@@ -189,13 +189,13 @@ li[component="category/topic"].locked::after {
li[component="category/topic"].pinned [component="topic/pinned"] {
background: rgba(93, 78, 32, 0.34) !important;
border-color: rgba(216, 194, 138, 0.28) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.28) !important;
color: var(--wg-ledger-ink) !important;
}
li[component="category/topic"].locked [component="topic/locked"] {
background: rgba(72, 31, 38, 0.38) !important;
border-color: rgba(168, 74, 78, 0.32) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.32) !important;
color: #d7aaa5 !important;
}
@@ -215,7 +215,7 @@ li[component="category/topic"] .title {
ul.topics-list li[component="category/topic"].unread .title,
ul[component="category"] li[component="category/topic"].unread .title {
color: #f0e7da !important;
text-shadow: 0 0 7px rgba(216, 194, 138, 0.045);
text-shadow: 0 0 7px rgba(var(--wg-ledger-ink-rgb), 0.045);
}
ul.topics-list li[component="category/topic"]:not(.unread) .title,
@@ -242,8 +242,8 @@ li[component="category/topic"] .badge,
a[component="topic/category"] {
position: relative;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.055),
@@ -284,20 +284,20 @@ li[component="category/topic"] [component="topic/labels"] .badge i {
}
li[component="category/topic"] [component="topic/watched"] {
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(143, 166, 100, 0.22) !important;
color: #b7c59d !important;
}
li[component="category/topic"] [component="topic/ignored"],
li[component="category/topic"] [component="topic/moved"] {
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(8, 7, 10, 0.18)) !important;
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(var(--wg-bg-deepest-rgb), 0.18)) !important;
border-color: rgba(169, 157, 143, 0.16) !important;
color: #aaa095 !important;
}
li[component="category/topic"] [component="topic/scheduled"] {
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(160, 135, 190, 0.2) !important;
color: #c0aed0 !important;
}
@@ -306,9 +306,9 @@ li[component="category/topic"] .tag,
li[component="category/topic"] .tag-item,
.tag-list .tag {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-left: 1px solid rgba(216, 194, 138, 0.32) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
border-left: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32) !important;
color: #cdbb8b !important;
display: inline-flex;
align-items: center;
@@ -326,7 +326,7 @@ li[component="category/topic"] .tag-item,
li[component="category/topic"] .tag i,
li[component="category/topic"] .tag-item i,
.tag-list .tag i {
color: #d8c28a;
color: var(--wg-ledger-ink);
font-size: 0.68rem;
opacity: 0.88;
}
@@ -348,8 +348,8 @@ li[component="category/topic"] [component="topic/select"] {
align-items: center;
justify-content: center;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(8, 7, 10, 0.28));
border: 1px solid rgba(194, 163, 90, 0.22);
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(var(--wg-bg-deepest-rgb), 0.28));
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.06),
@@ -360,7 +360,7 @@ li[component="category/topic"] [component="topic/select"] {
li[component="category/topic"] [component="topic/select"]:hover,
li[component="category/topic"] [component="topic/select"]:focus {
border-color: rgba(216, 194, 138, 0.42);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.42);
color: var(--wg-ledger-ink) !important;
}
@@ -368,7 +368,7 @@ li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
@@ -394,7 +394,7 @@ li[component="category/topic"] .meta.stats .text-muted {
li[component="category/topic"] [component="topic/teaser"] .lastpost {
background: transparent !important;
border-left-color: rgba(194, 163, 90, 0.42) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.42) !important;
color: var(--wg-ledger-ink-muted);
}
@@ -417,5 +417,5 @@ li[component="category/topic"] [component="topic/teaser"] .timeago {
.topic-thumbs .topic-thumb {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
}