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:
2
backend/Cargo.lock
generated
2
backend/Cargo.lock
generated
@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
|
||||
|
||||
[[package]]
|
||||
name = "mangalord"
|
||||
version = "0.114.0"
|
||||
version = "0.114.1"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"argon2",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "mangalord"
|
||||
version = "0.114.0"
|
||||
version = "0.114.1"
|
||||
edition = "2021"
|
||||
default-run = "mangalord"
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mangalord-frontend",
|
||||
"version": "0.114.0",
|
||||
"version": "0.114.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -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;
|
||||
|
||||
32
frontend/src/lib/styles/tokens.test.ts
Normal file
32
frontend/src/lib/styles/tokens.test.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user