UI-Politur: Kontrast, Abstaende, Typografie, Bewegung

Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage
sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie,
Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin
aus Hue.

Behobene Maengel (messbar, nicht Geschmack):
- Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt
  4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 /
  text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei
  jedem Lauf nach, statt sie zu behaupten.
- SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne
  Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird
  Vorlesehilfen als Zustand gemeldet (Semantics.selected).
- mini_player.dart: Expanded UM eine feste Hoehe herum — zwei
  widerspruechliche Angaben. Entschaerft.
- Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten
  Icon) entfernt.

Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion,
Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges
textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars,
Fortschritt, Trenner.

318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
This commit is contained in:
Hermes (Server)
2026-08-21 12:40:25 +02:00
co-authored by Claude Opus 5
parent 2df85e650e
commit bc861f6087
23 changed files with 773 additions and 184 deletions
+54
View File
@@ -5,6 +5,60 @@ Format angelehnt an [Keep a Changelog](https://keepachangelog.com/de/1.0.0/).
## [Unreleased]
### ✨ UI-Politur: Kontrast, Abstände, Typografie, Bewegung (2026-08-21)
Kein neues Design — dasselbe Melo in sauber. Schwarz/Rot, die vier Tabs und
Lieder/Kategorie bleiben unverändert.
- 🔍 **Behoben: blasse Schrift war nicht mehr lesbar.** An 17 Stellen stand
Text in `white38`. Nachgerechnet sind das **3,4:1** Kontrast — die
Barrierefreiheits-Grenze liegt bei **4,5:1**. Betroffen waren unter anderem
Metadaten, Equalizer und Wiedergabelisten. Alle Textfarben laufen jetzt über
drei benannte Stufen, und ein Test **rechnet die Kontraste bei jedem Lauf
nach** (WCAG 2.1) — behauptet wird nichts mehr.
| Stufe | Wofür | Kontrast |
|---|---|---|
| `text1` | Titel | 15,9:1 |
| `text2` | Künstler, Untertitel | 8,8:1 |
| `text3` | Anzahl, Zeit, Hinweis | 4,9:1 |
- 👆 **Behoben: die Reiter waren zu klein zum Treffen.** *Lieder · Kategorie ·
Künstler* waren nur ~38 dp hoch — Android verlangt **48 dp**, sonst tippt
man im Gehen daneben. Jetzt volle 48 dp, mit spürbarer Rückmeldung beim
Antippen (vorher gab es keine) und weichem Übergang statt hartem Sprung.
Vorlesehilfen bekommen die Auswahl jetzt als Zustand gemeldet, nicht nur
als weiße Farbe.
- 📏 **Abstände nach festem Raster.** Vorher standen überall Einzelwerte
(12, 9, 10, 18 …). Jetzt fünf benannte Stufen auf einem 8er-Raster —
deshalb wirken Listen und Karten ruhiger, ohne dass etwas verschoben wurde.
- 🔤 **Eine Schriftgrößen-Skala statt 52 Einzelangaben.** Sieben Stufen von
der Bildschirm-Überschrift bis zum Beiwerk, mit passender Zeilenhöhe. Kein
Text ist kleiner als 12.
- 🎛️ **Mini-Player überarbeitet.** Der Abspiel-Knopf ist jetzt rot gefüllt
und volle 48 dp groß — der wichtigste Knopf der Leiste lässt sich ohne
Hinsehen treffen. Die Leiste blendet sich ein und aus, statt aufzupoppen,
und ist durch eine Haarlinie vom Inhalt getrennt.
🐛 Nebenbei ein Layout-Fehler entschärft: die Zeile lag in einem `Expanded`
**um** eine feste Höhe herum — zwei widersprüchliche Angaben.
- 🖼️ **Karten und Cover bekommen einen Umriss** statt eines Schattens. Auf
Schwarz ist ein Schatten unsichtbar; eine Haarlinie trennt sauber.
- 🚫 **Emoji raus aus Bedienelementen.** In den Einstellungen stand
„🌐 Navidrome", „🌟 Favoriten-Sync" — jeweils direkt neben einem echten
Symbol. Emoji werden von Vorlesehilfen vorgelesen („Globus mit Meridianen")
und sehen auf jedem Gerät anders aus. Die Symbole bleiben, die Emoji sind weg.
- 🔧 **Details für Technikinteressierte:**
- Neu in `shared/theme.dart`: `MeloSpace`, `MeloRadius`, `MeloMotion`,
Textstufen `text1/2/3`, `border`, `hairline`, `minTouchTarget` sowie ein
vollständiges `textTheme` und Themes für Listen, Sheets, Snackbars,
Fortschritt und Trenner.
- Neu: `test/shared/theme_kontrast_test.dart` (rechnet WCAG-Kontraste,
Raster und Typo-Skala nach) und `test/shared/sub_tabs_test.dart`
(48 dp, Rückmeldung, Semantik, Übergang).
- Grundlage: Regeln aus **ui-ux-pro-max** (Priorität 1 Barrierefreiheit,
2 Touch, 6 Typografie/Farbe, 7 Bewegung), **ui-design/mobile-android**
(Material 3: 48 dp, Theme über `context`) und die Token-Disziplin aus
**Hue** (Primitives → benannte Rollen).
-**Getestet:** 318 Tests grün (23 neue), `flutter analyze` ohne Befund.
### 📋 Backlog-Datei angelegt (2026-08-21)
- Neu: `BACKLOG.md` — bewusst zurückgestellte Punkte an einer Stelle, damit
nichts stillschweigend liegen bleibt. Drin stehen aktuell der übersprungene