enhancement
major
minor
defect
critical
major
minor
major
#30000
Design-System-UI-Durchlauf, Teil 1: ein Auswahlformular; „surface-interactive-selected“ wird zu „surface-interactive-strong“
Fortsetzung von #29914 (Welle 5d). Da die Wellen 0–5 auf dem Master-Zweig liegen, enthält das Design-System-Paket nun alle React-Steuerelemente. Durch die UI-Überarbeitung sieht TopLogic nun ansprechend aus und bietet ein gutes Benutzererlebnis. Teil 1 ist in fünf Änderungen unterteilt: dieses Ticket (Auswahl), #30227 (Tabellen mit Tiefe), #30228 (Spaltenausrichtung), #30229 (Gruppenwerte über Spalten hinweg), #30230 (Filtervoreinstellungen).
Problem
- „Ausgewählt“ und „Hover“ sind zwei fast identische Grautöne; eine ausgewählte Zeile lässt sich ohne Fokus oder Mauszeiger nicht unterscheiden. Baumansicht, Navigation, Karten, Kalender und Symbolauswahl stellen den Status „Ausgewählt“ jeweils unterschiedlich dar.
- Das Token „surface-interactive-selected“ hat zwei Aufgaben: die Auswahl und die neutrale, kräftige Füllung von Fortschrittsbalken, Skeletten, Avataren, Pillen, Feldschaltflächen und Drop-Zielen.
Lösung
- Ein einheitliches Erscheinungsbild für alle auswählbaren Elemente: Markentönung plus ein eingezogener Rand am Anfang (surface-selected, surface-selected-hover, border-selected), in Tabellen, Baumstrukturen, Seitenleisten-Navigation (aria-current), unteren Leisten, Symbolauswahl, Kalendern und TL-Item-Karten (Karten behalten Ring und Häkchen in Markentönen bei). Text, Hilfetext und Links auf der Auswahl behalten in beiden Modi das Verhältnis 4,5:1 bei (neue Primitive „blue-8“ und „blue-72“).
- Die neutrale starke Füllung wird in „surface-interactive-strong“ umbenannt; ihre Lesebereiche behalten ihr Grau.
- Auswahl: Die Tastaturposition zeigt den zentralen Fokusring auf der kräftigen Füllung an.
- „derive“ berechnet die Auswahlrollen für Kundenthemen; MUI-Themen leiten den ausgewählten Zustand von MUI an „surface-selected“ weiter.
Migration
Umbenannte Rolle: --tl-surface-interactive-selected → --tl-surface-interactive-strong (neutrales Grau, keine Auswahl mehr). Es gibt keinen Alias. Stylesheets und MUI-Themes, die eine Auswahl mit dem alten Namen gezeichnet haben, lesen stattdessen die neuen Auswahlrollen:
| = Alt = | = Neu = |
| --tl-surface-interactive-selected (neutrale, kräftige Füllung: Track, Skeleton, Pill, Avatar, Drop-Target, Feld-Button-Hover) | --tl-surface-interactive-strong |
| --tl-surface-interactive-selected (ausgewählte Zeile, Knoten, Element) | --tl-surface-selected, Hover --tl-surface-selected-hover, Rand --tl-border-selected |
Neue Rollen: surface-selected, surface-selected-hover, border-selected. Die vollständige Tabelle befindet sich im Repository des Designsystems unter docs/migration/altlast.md.
Sichtbare Änderungen: Ausgewählte Zeilen, Knoten und Elemente werden in der Markenfarbe dargestellt und weisen am Anfang eine Umrandung auf.