Kundenansicht neu P1: Tokens und Basis-CSS im weißen Stil

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

test/knHuelleCss.test.js

@@ -0,0 +1,36 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { lies, da, handyTeil } from './support/knHuelle.js'
+
+const tokens = (css) => Object.fromEntries([...css.matchAll(/(--kn-[\w-]+)\s*:\s*([^;]+);/g)].map((m) => [m[1], m[2].trim()]))
+
+test('tokens.css: Werte wörtlich aus der Übersicht und global.css:7-51', () => {
+  const t = tokens(lies('tokens.css'))
+  const soll = {
+    '--kn-bg': '#fff', '--kn-bg-hover': '#f6f8fa', '--kn-bg-subtle': '#f8f9fb',
+    '--kn-text': '#1a1f36', '--kn-text-2': '#5e6678', '--kn-text-3': '#8a93a3',
+    '--kn-line': '#ebeef1', '--kn-line-strong': '#d8dde3', '--kn-accent': '#111',
+    '--kn-grau-bg': '#ebeef1', '--kn-grau-fg': '#414552', '--kn-blau-bg': '#e0f2fe', '--kn-blau-fg': '#075985',
+    '--kn-orange-bg': '#fcedb9', '--kn-orange-fg': '#a82c00', '--kn-violett-bg': '#efeafe', '--kn-violett-fg': '#5b21b6',
+    '--kn-gruen-bg': '#d7f7c2', '--kn-gruen-fg': '#006908', '--kn-rot-bg': '#ffe7f2', '--kn-rot-fg': '#b3093c',
+    '--kn-danger': '#c0123c', '--kn-radius': '6px', '--kn-radius-lg': '12px', '--kn-sidebar-w': '232px',
+    '--kn-ring': '0 0 0 1px rgba(60,66,87,.16), 0 1px 1px rgba(0,0,0,.06)',
+    '--kn-font': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  }
+  for (const [name, wert] of Object.entries(soll)) assert.equal(t[name], wert, name)
+})
+
+const VERBOTEN = [/gradient\(/i, /backdrop-filter/i, /filter:\s*blur/i, /prefers-color-scheme/i, /#9d3dfe|#d4b4ff|rgba\(157/i, /font-weight:\s*[89]00/, /dot-pattern|aurora/i]
+test('keine verbotenen Muster (Verläufe, Glas, Dunkelmodus, Lila, Gewicht 800)', () => {
+  for (const datei of ['tokens.css', 'basis.css', 'huelle.css'].filter(da)) for (const m of VERBOTEN) assert.doesNotMatch(lies(datei), m, `${datei} ${m}`)
+})
+
+test('basis.css: Bausteine, Maße des Ticketsystems, 44 px und 16 px am Handy', () => {
+  const css = lies('basis.css')
+  for (const k of ['.kn-knopf', '.kn-knopf-primaer', '.kn-knopf-zweit', '.kn-textknopf', '.kn-link-danger', '.kn-feld', '.kn-input', '.kn-select', '.kn-textarea', '.kn-check', '.kn-reiter-t', '.kn-pille-gruen', '.kn-liste', '.kn-zeile-link', '.kn-ueberlagerung', '.kn-dialog', '.kn-sheet', '.kn-leer', '.kn-meldung-warn', '.kn-fehler', '.kn-titel', '.kn-abschnitt']) assert.ok(css.includes(k), k)
+  assert.match(css, /\.kn-pille\s*\{(?=[^}]*height:\s*20px)(?=[^}]*border-radius:\s*4px)/s)
+  assert.match(css, /\.kn-titel\s*\{(?=[^}]*font-size:\s*28px)(?=[^}]*line-height:\s*34px)(?=[^}]*font-weight:\s*700)/s)
+  assert.match(css, /:focus-visible\s*\{(?=[^}]*outline:\s*2px solid #111)(?=[^}]*outline-offset:\s*2px)/s)
+  assert.match(css, /:disabled[^{]*\{[^}]*opacity:\s*\.55/s)
+  assert.match(handyTeil(css), /min-height:\s*44px/); assert.match(handyTeil(css), /font-size:\s*16px/)
+})

test/support/knHuelle.js

@@ -0,0 +1,23 @@
+// Testhilfen der Kundenansicht-Hülle (P1): Quelltext aus public/neu/ lesen, ohne Browser.
+import { existsSync, readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const NEU = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', '..', 'public', 'neu')
+
+// Die Handy-Abfrage steht im CSS genau so (und in JS einmal als HANDY_ABFRAGE in leiste.js).
+export const HANDY = '@media (max-width: 880px), (pointer: coarse) and (max-height: 500px)'
+
+export function lies(datei) {
+  return readFileSync(path.join(NEU, datei), 'utf8')
+}
+
+export function da(datei) {
+  return existsSync(path.join(NEU, datei))
+}
+
+// Text ab der ersten Handy-Abfrage, sonst ''.
+export function handyTeil(css) {
+  const i = css.indexOf(HANDY)
+  return i === -1 ? '' : css.slice(i)
+}