diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index 5d2248e..ef2e538 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -451,15 +451,63 @@ } .westgate-wiki .wiki-breadcrumb-trail { - color: var(--wg-text-muted); - font-family: var(--wg-font-ui); - font-weight: 600; - letter-spacing: 0.08em; + color: #b9b2a6; + font-family: var(--wg-font-display); + font-size: 0.875rem; + gap: 0; + font-weight: 500; + letter-spacing: 0; + text-transform: none; } +.westgate-wiki .wiki-breadcrumb-trail__list { + gap: 0; +} + +.westgate-wiki .wiki-breadcrumb-trail__item { + gap: 0; +} + +.westgate-wiki .wiki-breadcrumb-trail__item:not(:last-child)::after { + content: none; +} + +.westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item { + padding-left: 12px; +} + +.westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item::before, +.westgate-wiki .wiki-breadcrumb-trail__action::before { + color: var(--wg-gold-soft); + content: "→"; + font-family: var(--wg-font-ui); + font-weight: 500; + padding-right: 12px; +} + +.westgate-wiki .wiki-breadcrumb-trail__link, +.westgate-wiki .wiki-breadcrumb-trail__text, .westgate-wiki .wiki-breadcrumb-trail__text--current, .westgate-wiki .wiki-breadcrumb-trail__action { - color: var(--wg-text); + color: var(--wiki-breadcrumb-color); + font-family: var(--wg-font-display); +} + +.westgate-wiki .wiki-breadcrumb-trail__link:hover, +.westgate-wiki .wiki-breadcrumb-trail__link:focus { + color: #e0c878; + text-decoration: underline; +} + +.westgate-wiki .wiki-breadcrumb-trail__action { + display: inline-flex; + letter-spacing: 0; + text-transform: none; +} + +.westgate-wiki .wiki-breadcrumb-trail__action::before { + margin-right: 0; + opacity: 1; } .westgate-wiki :where(.wiki-card h2, .wiki-topic-card h2, .wiki-section-heading h2, .wiki-subsection-card h3) { diff --git a/tests/wiki-breadcrumb-parity.test.js b/tests/wiki-breadcrumb-parity.test.js new file mode 100644 index 0000000..06d38a0 --- /dev/null +++ b/tests/wiki-breadcrumb-parity.test.js @@ -0,0 +1,67 @@ +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const stylesheet = fs.readFileSync( + path.join(__dirname, "..", "scss", "westgate", "_wiki-prose.scss"), + "utf8" +); + +function ruleHasDeclaration(selector, declaration) { + const rulePattern = /([^{}]+)\{([^{}]*)\}/g; + let match; + while ((match = rulePattern.exec(stylesheet)) !== null) { + const selectors = match[1].split(",").map(value => value.trim()); + const body = match[2]; + if (selectors.includes(selector) && body.includes(declaration)) { + return true; + } + } + return false; +} + +[ + "--wiki-breadcrumb-color: color-mix(in srgb, var(--wg-text-muted) 68%, transparent)", + "font-family: var(--wg-font-display)", + "font-size: 0.875rem", + "gap: 0", + "font-weight: 600", + "letter-spacing: 0", + "text-transform: none", +].forEach(declaration => { + assert( + ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail", declaration), + `Wiki breadcrumbs should inherit regular forum breadcrumb typography: ${declaration}` + ); +}); + +assert( + ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__list", "gap: 0"), + "Wiki breadcrumbs should use Bootstrap breadcrumb spacing instead of a custom flex gap" +); + +assert( + ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__item:not(:last-child)::after", "content: none"), + "Wiki breadcrumbs should suppress the plugin slash divider" +); + +assert( + ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item::before", "content: \"→\""), + "Wiki breadcrumbs should use the same arrow divider as regular forum breadcrumbs" +); + +[ + ".westgate-wiki .wiki-breadcrumb-trail__link", + ".westgate-wiki .wiki-breadcrumb-trail__text", + ".westgate-wiki .wiki-breadcrumb-trail__text--current", + ".westgate-wiki .wiki-breadcrumb-trail__action", +].forEach(selector => { + assert( + ruleHasDeclaration(selector, "color: var(--wiki-breadcrumb-color)"), + `${selector} should use the dimmed forum breadcrumb color` + ); + assert( + ruleHasDeclaration(selector, "font-family: var(--wg-font-display)"), + `${selector} should explicitly use the forum breadcrumb display font` + ); +});