Harlekin
d49edeed18
„Zwischen der Auswahl und dem Text ist kaum Platz" - und das stimmte überall, nicht nur an der einen Stelle. Der Grund war messbar: der Abstand zur Beschriftung betrug 8 px, die Polsterung innerhalb des Feldes 11,2 px. Das Wort stand also näher am Rahmen als der Inhalt des Rahmens an demselben Rahmen, und genau daran erkennt das Auge einen zu engen Satz. Die Regel heisst jetzt: der Abstand nach aussen ist grösser als die Polsterung nach innen. Sie steht einmal in globals.css als .field-label, .field-row und .field-hint - vorher war sie ein Dutzend Mal als mt-1, mt-1.5 oder gap-2 an den Aufrufstellen verteilt, mit drei verschiedenen Werten, von denen keiner reichte. 33 Stellen umgestellt. Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von .field aus dem CSS und verlangt, dass beide Abstände darüber liegen. Gegengeprobt mit einem zu kleinen Wert, dann schlägt er an. Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px Innenpolsterung, 13,6 px waagerecht gegen 11,2 px.
84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { readFileSync } from 'node:fs'
|
|
import { join } from 'node:path'
|
|
|
|
const css = readFileSync(join(process.cwd(), 'app/globals.css'), 'utf8')
|
|
|
|
describe('Design-Tokens', () => {
|
|
it('enthaelt die Grundpalette aus dem Design-System', () => {
|
|
for (const hex of ['#15181a', '#1d2124', '#262b2f', '#3a4147', '#e4e7e4', '#939c99', '#7a97a6']) {
|
|
expect(css).toContain(hex)
|
|
}
|
|
})
|
|
|
|
it('enthaelt alle sechs Klassifizierungsfarben', () => {
|
|
for (const hex of ['#8a918d', '#6d8a9c', '#4e8f72', '#b08637', '#b4543c', '#7e5e96']) {
|
|
expect(css).toContain(hex)
|
|
}
|
|
})
|
|
|
|
it('haelt Flaechen eckig und Bedienelemente rund', () => {
|
|
// Die Flaechenradien bleiben bei 2 px: eine Akte ist ein Blatt.
|
|
const flaechen = [...css.matchAll(/--radius-(?!field|control)[\w-]+:\s*([^;]+);/g)].map((m) =>
|
|
m[1]!.trim(),
|
|
)
|
|
expect(flaechen.length).toBeGreaterThan(0)
|
|
for (const value of flaechen) expect(['0px', '2px']).toContain(value)
|
|
|
|
// Und daneben genau zwei Radien fuer Bedienelemente.
|
|
expect(css).toMatch(/--radius-field:\s*10px;/)
|
|
expect(css).toMatch(/--radius-control:\s*999px;/)
|
|
})
|
|
|
|
it('gibt jedem Knopf Rahmen, Ueberfahren und Druckrueckmeldung', () => {
|
|
const knopf = css.slice(css.indexOf('.btn {'), css.indexOf('.btn-primary'))
|
|
expect(knopf).toContain('border: 1px solid var(--color-line)')
|
|
expect(knopf).toContain('border-radius: var(--radius-control)')
|
|
|
|
// Ueberfahren und Druecken sind beide beschrieben ...
|
|
expect(css).toMatch(/\.btn:hover/)
|
|
expect(css).toMatch(/\.btn:active/)
|
|
|
|
// ... und der Druck setzt ohne Verzoegerung ein, sonst bliebe ein
|
|
// schneller Klick unsichtbar.
|
|
const gedrueckt = css.slice(css.indexOf('.btn:active'))
|
|
expect(gedrueckt.slice(0, 400)).toContain('transition-duration: 0ms')
|
|
expect(gedrueckt.slice(0, 400)).toContain('inset 0 0 0')
|
|
})
|
|
|
|
it('haelt Beschriftungen weiter weg als die Polsterung des Feldes', () => {
|
|
// Die Regel, aus der die Zahlen folgen: eine Beschriftung, die naeher am
|
|
// Rahmen steht als der Inhalt des Rahmens an demselben Rahmen, wirkt
|
|
// angeklebt. Also muss der Abstand nach aussen groesser sein als die
|
|
// Polsterung nach innen. Geprueft wird die Regel, nicht der Wert — wer die
|
|
// Polsterung aendert, faellt hier auf.
|
|
const feld = css.slice(css.indexOf('.field {'), css.indexOf('.field:hover'))
|
|
const polsterung = /padding:\s*([\d.]+)rem\s+([\d.]+)rem/.exec(feld)
|
|
expect(polsterung, feld).not.toBeNull()
|
|
const [innenSenkrecht, innenWaagerecht] = [
|
|
Number(polsterung![1]),
|
|
Number(polsterung![2]),
|
|
]
|
|
|
|
const label = css.slice(css.indexOf('.field-label {'))
|
|
const unten = /margin-block-end:\s*([\d.]+)rem/.exec(label.slice(0, 300))
|
|
expect(unten, label.slice(0, 300)).not.toBeNull()
|
|
expect(Number(unten![1])).toBeGreaterThan(innenSenkrecht)
|
|
|
|
const reihe = css.slice(css.indexOf('.field-row {'))
|
|
const abstand = /gap:\s*([\d.]+)rem/.exec(reihe.slice(0, 300))
|
|
expect(abstand, reihe.slice(0, 300)).not.toBeNull()
|
|
expect(Number(abstand![1])).toBeGreaterThan(innenWaagerecht)
|
|
})
|
|
|
|
it('kennt keine Schatten ausser dem Fokusring', () => {
|
|
const shadows = [...css.matchAll(/--shadow-[\w-]+:\s*([^;]+);/g)].map((m) => m[1]!.trim())
|
|
expect(shadows.length).toBeGreaterThan(0)
|
|
for (const value of shadows) expect(value).toBe('none')
|
|
})
|
|
|
|
it('respektiert prefers-reduced-motion bei der Schwaerzung', () => {
|
|
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)/)
|
|
})
|
|
})
|