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/_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;
}