fix(frontend): pin the check-in badge typography to the reference values

The badge inherited AKSRT's modern system font stack (--font-body) and the
html reset's antialiased/optimizeLegibility rendering, while the reference
theme renders its body in bootstrap's "Helvetica Neue", Helvetica, Arial,
sans-serif with browser defaults. Same 14px size but a different typeface
and smoothing, so the badge text still read as off-theme after the gradient
fix.

Pin font-family, -webkit-font-smoothing and text-rendering to the reference
body values on the existing scoped badge rule (alongside the line-height
pin) and extend the contract test.
This commit is contained in:
kate522 committed 2026-10-17 12:40:42 +08:00
1 parent cff3083a91
commit 008e63524d
3 files changed
+30 -4

No files matched your search

@@ -43,6 +43,27 @@ test('main.css still owns the reference .jb-yellow gradient', () => {
assert.doesNotMatch(main, staleHexes)
})
test('the badge typography is pinned to the reference bootstrap body values', () => {
const main = read('assets/css/main.css')
const start = main.indexOf('.user-card .card-content .img-badge')
assert.notEqual(start, -1, 'missing the user-card img-badge adaptation rule')
const block = main.slice(start, main.indexOf('}', start))
assert.match(block, /line-height:\s*1\.42857143/)
// Reference body font stack (zibll bootstrap.min.css; zibll main.css does not
// override it), while AKSRT's reset imposes the modern --font-body stack.
assert.match(block, /font-family:\s*"Helvetica Neue", Helvetica, Arial, sans-serif/)
// The AKSRT html reset forces antialiased + optimizeLegibility; the badge
// restores the browser defaults the reference renders with.
assert.match(block, /-webkit-font-smoothing:\s*auto/)
assert.match(block, /text-rendering:\s*auto/)
const min = read('assets/css/main.min.css')
assert.match(
min,
/\.user-card \.card-content \.img-badge\{line-height:1\.42857143;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:auto\}/
)
})
test('the user-card check-in badge renders without the dead is-done class and bare span', () => {
const userbox = read('inc/helpers/aksrt-header-userbox.php')
const fnStart = userbox.indexOf('function aksrt_header_user_checkin_btn')