fix: define missing --font-md and --success-soft-bg tokens

Both were referenced by components (RecommendationShelf, the manga detail
page) but never declared, so var() fell through to inherited/fallback
values. Adds --font-md (1rem, on the xs/sm/md/lg scale) and
--success-soft-bg in both the light and dark theme blocks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-06 19:44:43 +02:00
parent 3364ea52c9
commit 7bdbe3ce5b
5 changed files with 40 additions and 3 deletions

2
backend/Cargo.lock generated
View File

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
[[package]]
name = "mangalord"
version = "0.114.0"
version = "0.114.1"
dependencies = [
"anyhow",
"argon2",

View File

@@ -1,6 +1,6 @@
[package]
name = "mangalord"
version = "0.114.0"
version = "0.114.1"
edition = "2021"
default-run = "mangalord"

View File

@@ -1,6 +1,6 @@
{
"name": "mangalord-frontend",
"version": "0.114.0",
"version": "0.114.1",
"private": true,
"type": "module",
"scripts": {

View File

@@ -16,6 +16,7 @@
--danger: #b00020;
--danger-soft-bg: #fff5f5;
--success: #0a7d2c;
--success-soft-bg: #eaf7ee;
--warning-soft-bg: #fff5d6;
--warning-border: #d6a800;
--focus-ring: #2563eb;
@@ -28,6 +29,9 @@
--font-xs: 0.75rem;
--font-sm: 0.875rem;
/* Alias of --font-base at the body size; named on the xs/sm/md/lg/xl
scale that some components reach for. */
--font-md: 1rem;
--font-base: 1rem;
--font-lg: 1.125rem;
--font-xl: 1.5rem;
@@ -117,6 +121,7 @@
--danger: #f87171;
--danger-soft-bg: #3a1620;
--success: #4ade80;
--success-soft-bg: #12301c;
--warning-soft-bg: #3a2e10;
--warning-border: #a37800;
--focus-ring: #60a5fa;

View File

@@ -0,0 +1,32 @@
import { describe, it, expect } from 'vitest';
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
// Guards against components referencing design tokens that were never
// declared. `var(--x)` with no declaration silently falls through to the
// inherited/initial value, so a typo'd or missing token degrades quietly
// rather than failing loudly. These two were referenced by components
// (RecommendationShelf, the manga detail page) but absent from tokens.css.
const TOKENS = readFileSync(resolve(process.cwd(), 'src/lib/styles/tokens.css'), 'utf8');
// Every design token must be declared at least once (in :root and/or a theme
// override). We only assert declaration, not value.
function declares(name: string): boolean {
return new RegExp(`${name}\\s*:`).test(TOKENS);
}
describe('design tokens', () => {
it('declares --font-md (referenced by RecommendationShelf)', () => {
expect(declares('--font-md')).toBe(true);
});
it('declares --success-soft-bg (referenced by the manga detail page)', () => {
expect(declares('--success-soft-bg')).toBe(true);
});
it('declares --success-soft-bg in the dark theme override too', () => {
const darkBlock = TOKENS.slice(TOKENS.indexOf("[data-theme='dark']"));
expect(/--success-soft-bg\s*:/.test(darkBlock)).toBe(true);
});
});