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

Apply remaining audit fixes; document radii and code palette in DESIGN.md

Browse Source 
- Token sweep: exact-value gold literals now use --wg-border /
  --wg-border-soft / --wg-focus
- Topbar: drop invalid role="menuitem" (no parent role="menu")
- topics_list: topic-select icons get role="checkbox", tabindex,
  aria-label; client.js makes them keyboard-operable and syncs
  aria-checked
- category.tpl: copy-handle link gets an accessible name, "View
  Original" moved to i18n, external-link icon aria-hidden, stretched
  link inside aria-hidden alert removed from tab order
- Footer: all copy moved to [[westgate:footer.*]] keys; year injected
  via filter:middleware.renderFooter instead of hard-coded 2026
- client.js: batch table measurements before writes (no interleaved
  reflow), .catch on the category class map so search results never
  hang, category selector match uses fw-bold class instead of inline
  style
- Forced-colors focus fallback: transparent outline alongside the
  box-shadow focus ring
- DESIGN.md: real radius scale (3/4/6/8px), code-block palette,
  motion & modes section, placeholder alpha

Verified against the sow-nodebb dev container: themed code blocks
render in posts, footer i18n + year, checkbox roles in served HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archvillainette
2026-07-16 15:40:52 +02:00
co-authored by Claude Fable 5
parent b91b142448
commit 7add4bf2e6
18 changed files with 160 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/westgate/_controls.scss
+11 -7
View File
@@ -216,8 +216,12 @@ input[type="number"].form-control::-webkit-outer-spin-button {
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
0 0 0 1px var(--wg-focus) !important;
color: var(--wg-text) !important;
// invisible normally; forced-colors mode paints transparent outlines in the
// system highlight color, so box-shadow-only focus stays visible there
outline: 2px solid transparent;
outline-offset: 1px;
}
input[type="password"].form-control,
@@ -318,7 +322,7 @@ table[component="notification/table"] a[data-type]:focus {
background-size:
100% 1.65rem,
auto;
border-color: rgba(194, 163, 90, 0.28) !important;
border-color: var(--wg-focus) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 0 0 1px rgba(0, 0, 0, 0.28) !important;
@@ -427,7 +431,7 @@ table[component="notification/table"] a[data-type]:focus {
border-radius: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
0 0 0 1px var(--wg-focus) !important;
}
.composer .title-container {
@@ -461,7 +465,7 @@ table[component="notification/table"] a[data-type]:focus {
[component="composer"] .btn:hover,
.quick-reply .btn:hover,
[component="topic/quickreply/container"] .btn:hover {
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
color: var(--wg-text) !important;
}
@@ -521,14 +525,14 @@ table[component="notification/table"] a[data-type]:focus {
color: var(--wg-gold) !important;
}
.dropdown-item.active {
background-color: rgba(194, 163, 90, 0.08) !important;
background-color: var(--wg-border-soft) !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link:focus {
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
color: var(--wg-text) !important;
}
@@ -602,7 +606,7 @@ table[component="notification/table"] a[data-type]:focus {
[component="sidebar/right"] .nav-link:focus,
.bottombar-nav .nav-link:hover,
.bottombar-nav .nav-link:focus {
background: rgba(194, 163, 90, 0.08);
background: var(--wg-border-soft);
color: var(--wg-text) !important;
}
scss/westgate/_pages.scss
+2 -2
View File
@@ -136,7 +136,7 @@ a.sow-card:hover {
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wg-gold);
background: rgba(194, 163, 90, 0.08);
background: var(--wg-border-soft);
border: 1px solid var(--wg-gold-soft);
border-radius: 4px;
padding: 3px 9px;
@@ -654,7 +654,7 @@ a.sow-card:hover {
margin-top: var(--wg-space-md);
padding: 3px 9px;
color: var(--wg-gold);
background: rgba(194, 163, 90, 0.08);
background: var(--wg-border-soft);
border: 1px solid var(--wg-gold-soft);
border-radius: 4px;
}
scss/westgate/_posts.scss
+2 -2
View File
@@ -245,7 +245,7 @@ li[component="post"] [component="post/reply-count"] {
li[component="post"] [component="post/actions"] .btn:hover,
li[component="post"] [component="post/reply-count"]:hover {
color: var(--wg-text) !important;
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
}
@@ -334,7 +334,7 @@ li[component="post"] [component="post/downvote"] {
.pagination-block {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-border-soft) calc(100% - 1px)),
rgba(18, 15, 22, 0.96) !important;
background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important;
scss/westgate/_surfaces.scss
+5 -5
View File
@@ -141,7 +141,7 @@ samp,
}
.alert {
background: rgba(194, 163, 90, 0.08);
background: var(--wg-border-soft);
border-color: rgba(194, 163, 90, 0.18);
color: var(--wg-text-soft);
}
@@ -291,7 +291,7 @@ li[component="category/topic"] .user-icon {
rgba(8, 7, 10, 0.08)
),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.14) !important;
border: 1px solid var(--wg-border) !important;
border-radius: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.028),
@@ -335,7 +335,7 @@ li[component="category/topic"] .user-icon {
.chats-dropdown .mark-read:focus,
.chats-list .mark-read:hover,
.chats-list .mark-read:focus {
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
}
.chats-dropdown .chat-room-btn,
@@ -352,7 +352,7 @@ li[component="category/topic"] .user-icon {
[component="chat/public/room"]:hover,
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
color: var(--wg-text) !important;
}
@@ -387,7 +387,7 @@ li[component="category/topic"] .user-icon {
rgba(216, 194, 138, 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid rgba(194, 163, 90, 0.28) !important;
border: 1px solid var(--wg-focus) !important;
color: var(--wg-ledger-ink) !important;
}
scss/westgate/_topbar.scss
+2 -2
View File
@@ -189,7 +189,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .btn.btn-light:hover,
.wg-topbar .btn.btn-light:focus {
color: var(--wg-text) !important;
background: rgba(194, 163, 90, 0.08) !important;
background: var(--wg-border-soft) !important;
}
// one primary vocabulary: the dark gold plate from _controls.scss
@@ -329,7 +329,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__drawer-actions a:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.22);
background: rgba(194, 163, 90, 0.08);
background: var(--wg-border-soft);
}
@media (max-width: 1199.98px) {
scss/westgate/_topics.scss
+4 -4
View File
@@ -28,7 +28,7 @@ body.template-category .category-header .description {
.topic-list-header .btn {
background: transparent !important;
border-color: rgba(194, 163, 90, 0.14) !important;
border-color: var(--wg-border) !important;
color: var(--wg-text-soft) !important;
font-family: var(--wg-font-ui);
}
@@ -57,7 +57,7 @@ li[component="category/topic"] {
overflow: hidden;
background:
linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem),
linear-gradient(to right, var(--wg-border-soft), transparent 5.25rem),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
border: 1px solid var(--wg-ledger-border) !important;
@@ -89,7 +89,7 @@ li[component="category/topic"]::after {
right: 0;
left: 0;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.28), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
pointer-events: none;
}
@@ -133,7 +133,7 @@ li[component="category/topic"].pinned:not(.unread) {
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-left-color: rgba(194, 163, 90, 0.28) !important;
border-left-color: var(--wg-focus) !important;
}
li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) {
scss/westgate/_widgets.scss
+6 -6
View File
@@ -56,7 +56,7 @@
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
var(--wg-velvet-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow);
}
@@ -81,7 +81,7 @@
[data-widget-area] .card-header {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.08), rgba(42, 18, 34, 0.2), transparent),
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;
color: var(--wg-ledger-ink) !important;
@@ -97,7 +97,7 @@
}
[data-widget-area] .card-header + .card-body {
border-top: 1px solid rgba(194, 163, 90, 0.08);
border-top: 1px solid var(--wg-border-soft);
}
[data-widget-area] .alert {
@@ -135,7 +135,7 @@
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.28) !important;
border-color: var(--wg-focus) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
color: #e0cea2 !important;
}
@@ -184,7 +184,7 @@
[data-widget-area] .list-group-item {
background: rgba(255, 255, 255, 0.014) !important;
border-color: rgba(194, 163, 90, 0.08) !important;
border-color: var(--wg-border-soft) !important;
color: var(--wg-text-soft) !important;
}
@@ -234,7 +234,7 @@
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow);
}
scss/westgate/_wiki-prose.scss
+22 -22
View File
@@ -83,7 +83,7 @@
--wiki-prose-footnote-popover-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 14px 30px rgba(0, 0, 0, 0.46);
--wiki-prose-footnote-target-bg: rgba(194, 163, 90, 0.08);
--wiki-prose-footnote-target-bg: var(--wg-border-soft);
--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
--wiki-prose-image-padding: 0;
@@ -102,7 +102,7 @@
--wiki-compose-editable-focus-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.3),
0 0 18px rgba(194, 163, 90, 0.08);
0 0 18px var(--wg-border-soft);
--wiki-ck-base-background: #18141d;
--wiki-ck-base-foreground: #1e1824;
@@ -121,7 +121,7 @@
--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
--wiki-ck-button-bg: transparent;
--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-button-active-bg: rgba(194, 163, 90, 0.14);
--wiki-ck-button-active-bg: var(--wg-border);
--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
@@ -244,7 +244,7 @@
font-family: var(--wg-font-ui);
font-weight: 100;
line-height: 1;
text-shadow: 0 0 10px rgba(194, 163, 90, 0.28);
text-shadow: 0 0 10px var(--wg-focus);
}
.westgate-wiki .wiki-article-prose .wiki-callout::after,
@@ -333,9 +333,9 @@
linear-gradient(
90deg,
transparent,
rgba(194, 163, 90, 0.28) 22%,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(194, 163, 90, 0.28) 78%,
var(--wg-focus) 78%,
transparent
)
);
@@ -385,9 +385,9 @@
linear-gradient(
90deg,
transparent,
rgba(194, 163, 90, 0.28) 22%,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(194, 163, 90, 0.28) 78%,
var(--wg-focus) 78%,
transparent
)
);
@@ -553,7 +553,7 @@
}
.westgate-wiki .wiki-sidebar-disclosure__summary:focus {
box-shadow: inset 0 0 0 2px rgba(194, 163, 90, 0.28) !important;
box-shadow: inset 0 0 0 2px var(--wg-focus) !important;
}
.westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
@@ -662,8 +662,8 @@
.westgate-wiki .wiki-index-jump-link:focus,
.westgate-wiki .wiki-index-jump-link.is-active {
background:
linear-gradient(180deg, rgba(194, 163, 90, 0.14), rgba(81, 25, 61, 0.12)),
rgba(194, 163, 90, 0.08) !important;
linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
var(--wg-border-soft) !important;
border-color: rgba(216, 194, 138, 0.36) !important;
color: #fff4dd !important;
transform: translateY(-1px);
@@ -694,7 +694,7 @@
}
.westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
background: radial-gradient(circle, #e0c878 0 30%, rgba(194, 163, 90, 0.28) 31% 58%, transparent 59%);
background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
block-size: 0.42rem;
content: "";
inline-size: 0.42rem;
@@ -725,7 +725,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
block-size: 1.18rem;
content: "";
inline-size: 1px;
@@ -793,7 +793,7 @@
}
.westgate-wiki .wiki-topic-list__item--subpage::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color));
block-size: 0.44em;
content: "";
inline-size: 1px;
@@ -871,7 +871,7 @@
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::before {
background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), rgba(194, 163, 90, 0.08));
background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), var(--wg-border-soft));
block-size: 1px;
content: "";
inline-size: 0.7rem;
@@ -942,7 +942,7 @@
.westgate-wiki .wiki-index-entry-badge {
background: rgba(194, 163, 90, 0.055) !important;
border-color: rgba(194, 163, 90, 0.14) !important;
border-color: var(--wg-border) !important;
}
.westgate-wiki .wiki-fab-dock--floating {
@@ -1088,7 +1088,7 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button:focus-visible {
outline: 2px solid rgba(194, 163, 90, 0.28) !important;
outline: 2px solid var(--wg-focus) !important;
outline-offset: 1px;
}
@@ -1200,7 +1200,7 @@
.westgate-wiki .wiki-article-prose :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table) {
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 7px;
box-shadow:
inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
@@ -1263,7 +1263,7 @@
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck-code-block-language-label {
background: rgba(194, 163, 90, 0.14) !important;
background: var(--wg-border) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border-radius: 0 0 0 5px !important;
color: var(--wg-text-soft) !important;
@@ -1372,7 +1372,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-co
body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button:not(.ck-color-grid__tile).ck-on,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile).ck-on {
background: var(--wiki-ck-button-on-bg) !important;
border-color: rgba(194, 163, 90, 0.28) !important;
border-color: var(--wg-focus) !important;
color: var(--wiki-ck-button-on-color) !important;
}
@@ -1542,7 +1542,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
background: rgba(194, 163, 90, 0.28) !important;
background: var(--wg-focus) !important;
border-color: rgba(246, 223, 163, 0.64) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.08),
@@ -1582,7 +1582,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
0 0 0 1px var(--wg-focus) !important;
outline: none !important;
}