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/_posts.scss
+26 -26
View File
@@ -10,8 +10,8 @@ body.template-topic [component="topic/stats"] {
body.template-topic .topic-info .badge,
body.template-topic [component="topic/stats"] .badge {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -27,7 +27,7 @@ ul[component="topic"].posts::before {
bottom: 1.5rem;
left: 1.55rem;
width: 1px;
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07));
background: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.18), rgba(var(--wg-gold-rgb), 0.07));
pointer-events: none;
}
@@ -37,7 +37,7 @@ li[component="post"] {
li[component="post"] .post-container-parent > .bg-body {
background: var(--wg-bg) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(194, 163, 90, 0.18) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(var(--wg-gold-rgb), 0.18) !important;
}
li[component="post"] .post-container {
@@ -48,7 +48,7 @@ li[component="post"] .post-container {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.32) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
@@ -60,13 +60,13 @@ li[component="post"] .post-container::before {
right: 1rem;
left: 1rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.16), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="post"].topic-owner-post .post-container,
li[component="post"].self-post .post-container {
border-left-color: rgba(194, 163, 90, 0.46) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.46) !important;
}
li[component="post"] .post-header {
@@ -111,7 +111,7 @@ li[component="post"] .content .wg-mobile-table-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -134,8 +134,8 @@ li[component="post"] .content h4 {
// re-inked for the dark ledger.
li[component="post"] .content code,
.composer .preview code {
background: rgba(8, 7, 10, 0.45);
border: 1px solid rgba(194, 163, 90, 0.12);
background: rgba(var(--wg-bg-deepest-rgb), 0.45);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 4px;
padding: 0.1em 0.35em;
color: var(--wg-text);
@@ -145,12 +145,12 @@ li[component="post"] .content code,
li[component="post"] .content pre,
.composer .preview pre {
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82)) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 6px;
padding: 0.85rem 1rem;
color: var(--wg-text-soft) !important;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -178,7 +178,7 @@ li[component="post"] .content pre code.hljs,
.hljs-selector-tag,
.hljs-literal,
.hljs-tag {
color: #e0c878;
color: var(--wg-gold-lit);
}
.hljs-string,
@@ -225,29 +225,29 @@ li[component="post"] .content pre code.hljs,
}
li[component="post"] .content blockquote {
background: rgba(42, 18, 34, 0.4);
border: 1px solid rgba(194, 163, 90, 0.14);
background: rgba(var(--wg-plum-rgb), 0.4);
border: 1px solid rgba(var(--wg-gold-rgb), 0.14);
border-radius: 6px;
padding: 0.75rem 1rem;
}
li[component="post"] .post-footer {
border-bottom: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.095);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.095);
padding-top: 0.55rem;
}
li[component="post"] [component="post/actions"] .btn,
li[component="post"] [component="post/reply-count"] {
color: var(--wg-text-muted) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
li[component="post"] [component="post/actions"] .btn:hover,
li[component="post"] [component="post/reply-count"]:hover {
color: var(--wg-text) !important;
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
}
@media (min-width: 992px) {
@@ -293,7 +293,7 @@ li[component="post"] [component="post/downvote"] {
// Font Awesome 7: fa-heart-crack (fa-heart-broken alias)
--fa: "\f7a9";
font-size: 0.95rem;
color: rgba(194, 163, 90, 0.82);
color: rgba(var(--wg-gold-rgb), 0.82);
}
&.downvoted {
@@ -319,7 +319,7 @@ li[component="post"] [component="post/downvote"] {
.topic-sidebar-tools .btn:not(.btn-primary),
[component="topic/navigator"] {
background: rgba(255, 255, 255, 0.018) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
color: var(--wg-text-soft) !important;
}
@@ -363,7 +363,7 @@ li[component="post"] [component="post/downvote"] {
}
body.template-topic .sticky-top hr {
border-color: rgba(194, 163, 90, 0.12);
border-color: rgba(var(--wg-gold-rgb), 0.12);
}
textarea[component="topic/quickreply/text"],
@@ -381,7 +381,7 @@ textarea[component="topic/quickreply/text"],
textarea[component="topic/quickreply/text"]:focus,
.quick-reply textarea:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow: none !important;
}
@@ -395,7 +395,7 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-body,
[component="topic/quickreply/container"] .card-body {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.05) calc(100% - 1px)),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important;
@@ -405,8 +405,8 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-header,
[component="topic/quickreply/container"] .card-header {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}