kifutraining 1.3.0 — Material 2 Dark

Viertes Release von kifutraining, live auf ki-fu.ch. Dieses Release ändert keine Fähigkeit der Anwendung — es ändert, wie sie aussieht. Das Farbsystem folgt jetzt der Dunkel-Fassung von Material Design 2.

Eine Fläche, zehn Höhen

Der Grund ist ein grün getöntes Dunkelgrau (#101613). Höhe entsteht nicht mehr durch eine zweite Farbe, sondern durch ein weisses Overlay auf eben dieser Fläche: Karte, Block im Trainingsteil, Kopfleiste, Menü, Meldung und Dialog stehen als Stufen einer Leiter übereinander. Schatten trägt nur noch, was wirklich schwebt.

• Neuer Akzent: Lila (#bb86fc) löst das Signalorange ab. Auf gefüllten Knöpfen steht die Schrift schwarz — der auffälligste Unterschied zum bisherigen Bild.
• Zwei Schriften statt drei: Geist trägt alles Gelesene, Geist Mono alles Gezählte — Dauern, Wechsel, Beschriftungen, Plaketten. Anton, Source Serif und Space Mono entfallen.
• Zustände nach einer Regel: Überfahren, Fokussieren und Drücken legen eine halbtransparente Ebene in der Farbe des Inhalts auf, mit fest vorgegebener Deckung. Der Tastaturfokus zeigt sich zusätzlich als Ring.

Form statt Fülle

• Alterskategorien sind nur noch umrandet. Sieben gefüllte Farbflecken nebeneinander waren ein Flickenteppich und standen in Konkurrenz zu jedem gefüllten Knopf daneben. Auf Papier bleiben sie gefüllt — eine helle Kontur verschwände dort.
• Statusplaketten lesen sich umgekehrt: gefüllt heisst still (Entwurf), umrandet heisst gilt (Öffentlich, Varianten).
• Eine Farbe für Hinweise. Der nicht blockierende Befund — etwa eine Gruppe, die zwei Übungen im selben Wechsel belegt — trug bisher Bernstein und trägt jetzt dasselbe Rot wie eine abgewiesene Eingabe. Die beiden unterscheiden sich im Verhalten, nicht im Bild: der Befund lässt speichern.
• Meldungen und Leerzustände sind neue, einheitliche Bausteine: Fehler und Erfolg als Kontur statt als getönte Fläche, leere Seiten als gestricheltes Feld.

Unverändert

Die Feld-Diagramme. Rasen, Figuren und Symbole gehören zum Abgebildeten wie ein Foto und folgen der Palette nicht. Der Ausdruck bleibt hell und tintensparend; die Akzentfarbe wird dort ein dunkles Violett.

Unter der Haube

Die Palette gibt es zweimal — als CSS für den Browser und als TypeScript für die Rechnung. Ein Prüfskript (npm run check:farben) hält beide gleich, rechnet die Overlay-Leiter nach, misst jeden Kontrast gegen WCAG auf jeder Höhenstufe und wacht über Altlasten; es läuft bei jedem Pull Request mit. Der Styleguide unter /styleguide ist neu geschrieben und rechnet seine Zahlen beim Rendern aus, statt sie zu behaupten.