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/_widgets.scss
+23 -23
View File
@@ -53,7 +53,7 @@
) {
padding: var(--wg-space-md);
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
var(--wg-velvet-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-border);
@@ -71,9 +71,9 @@
[data-widget-area] .westgate-widget-card,
[data-widget-area] .wg-widget-card {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.15) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.15) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
@@ -81,9 +81,9 @@
[data-widget-area] .card-header {
background:
linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
rgba(8, 7, 10, 0.24) !important;
border-color: rgba(194, 163, 90, 0.13) !important;
linear-gradient(to right, var(--wg-border-soft), rgba(var(--wg-plum-rgb), 0.2), transparent),
rgba(var(--wg-bg-deepest-rgb), 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-display);
font-weight: 600;
@@ -102,9 +102,9 @@
[data-widget-area] .alert {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.055), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.055), transparent 5rem),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-width: 2px !important;
border-radius: 8px;
box-shadow:
@@ -124,28 +124,28 @@
[data-widget-area] .alert-info {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.07), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.07), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-left-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.5) !important;
color: var(--wg-text-soft) !important;
}
[data-widget-area] .alert-warning {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: var(--wg-focus) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.62) !important;
color: #e0cea2 !important;
}
[data-widget-area] .alert-danger {
background:
linear-gradient(to right, rgba(142, 52, 56, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-red-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(142, 52, 56, 0.32) !important;
border-left-color: rgba(142, 52, 56, 0.62) !important;
border-color: rgba(var(--wg-red-rgb), 0.32) !important;
border-left-color: rgba(var(--wg-red-rgb), 0.62) !important;
color: #d8b1b1 !important;
}
@@ -171,13 +171,13 @@
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):hover,
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):focus {
color: #e0c878;
color: var(--wg-gold-lit);
text-decoration: underline;
}
[data-widget-area] .list-group {
background: transparent !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 8px;
overflow: hidden;
}
@@ -190,8 +190,8 @@
[data-widget-area] .badge {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border: 1px solid 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: 1px solid rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -204,7 +204,7 @@
[data-widget-area] :where(.forum-stats, .stats-card) > .d-flex,
[data-widget-area] :where(.stats-card, .stats) :where(.card, .card-header) {
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;
}
@@ -232,7 +232,7 @@
margin: 0 0 var(--wg-space-sm);
padding: 0.6rem;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border);
border-radius: 8px;
@@ -250,7 +250,7 @@
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:hover,
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:focus {
background: rgba(194, 163, 90, 0.06) !important;
background: rgba(var(--wg-gold-rgb), 0.06) !important;
background-image: none !important;
color: var(--wg-text) !important;
text-decoration: none;