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/_surfaces.scss
+16 -16
View File
@@ -7,7 +7,7 @@ body {
body {
--bs-link-color: var(--wg-gold);
--bs-link-color-rgb: 194, 163, 90;
--bs-link-hover-color: #e0c878;
--bs-link-hover-color: var(--wg-gold-lit);
--bs-link-hover-color-rgb: 224, 200, 120;
font-family: var(--wg-font-text);
-webkit-font-smoothing: antialiased;
@@ -34,7 +34,7 @@ a {
&:hover,
&:focus {
color: #e0c878;
color: var(--wg-gold-lit);
}
}
@@ -73,7 +73,7 @@ li[component="categories/category"]:hover,
li[component="category/topic"]:hover,
li[component="post"] .post-container:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -142,13 +142,13 @@ samp,
.alert {
background: var(--wg-border-soft);
border-color: rgba(194, 163, 90, 0.18);
border-color: rgba(var(--wg-gold-rgb), 0.18);
color: var(--wg-text-soft);
}
.alert-danger {
background: rgba(142, 52, 56, 0.16);
border-color: rgba(142, 52, 56, 0.32);
background: rgba(var(--wg-red-rgb), 0.16);
border-color: rgba(var(--wg-red-rgb), 0.32);
color: #d8b1b1;
}
@@ -157,7 +157,7 @@ samp,
.user-icon,
.avatar-tooltip .avatar,
.avatar-tooltip img {
border: 1px solid rgba(216, 194, 138, 0.32);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 242, 204, 0.2),
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
@@ -196,7 +196,7 @@ li[component="category/topic"] .user-icon {
.status {
box-shadow:
0 0 0 2px var(--wg-status-ring),
0 0 0 3px rgba(216, 194, 138, 0.14),
0 0 0 3px rgba(var(--wg-ledger-ink-rgb), 0.14),
0 0 12px rgba(0, 0, 0, 0.34);
&.online {
@@ -255,7 +255,7 @@ li[component="category/topic"] .user-icon {
@mixin wg-velvet-cover {
background-image:
radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
linear-gradient(100deg, var(--wg-plum), var(--wg-panel-2) 55%, var(--wg-bg-deep)) !important;
}
// replace core's grey-triangle default cover with the velvet material
@@ -288,7 +288,7 @@ li[component="category/topic"] .user-icon {
linear-gradient(
to bottom,
rgba(255, 241, 196, 0.018),
rgba(8, 7, 10, 0.08)
rgba(var(--wg-bg-deepest-rgb), 0.08)
),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border) !important;
@@ -318,7 +318,7 @@ li[component="category/topic"] .user-icon {
.notifications-list .mark-read,
.chats-dropdown .mark-read,
.chats-list .mark-read {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 6px !important;
background: linear-gradient(
to bottom,
@@ -341,7 +341,7 @@ li[component="category/topic"] .user-icon {
.chats-dropdown .chat-room-btn,
.chats-list .chat-room-btn,
[component="chat/public/room"] {
border: 1px solid rgba(194, 163, 90, 0.12) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.12) !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
@@ -353,7 +353,7 @@ li[component="category/topic"] .user-icon {
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
color: var(--wg-text) !important;
}
@@ -384,7 +384,7 @@ li[component="category/topic"] .user-icon {
.chats-list .badge.bg-light {
background: linear-gradient(
to bottom,
rgba(216, 194, 138, 0.13),
rgba(var(--wg-ledger-ink-rgb), 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid var(--wg-focus) !important;
@@ -403,13 +403,13 @@ li[component="category/topic"] .user-icon {
}
.page-flags [component="flags/filters"] {
border-bottom-color: rgba(194, 163, 90, 0.12) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
// table variables shared with notification/post tables live in _controls.scss
.page-flags [component="flags/list"] :where(th, td) {
color: var(--wg-text-soft) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
.page-flags [component="flags/list"] thead :where(th, td) {