Zustand

In ChatGPT öffnen

State-Tokens definieren, wie Komponenten visuell auf Benutzerinteraktionen reagieren, wie beispielsweise, wenn sie deaktiviert oder fokussiert sind. Diese Variablen helfen, ein konsistentes Verhalten und Styling über alle UI-Elemente hinweg sicherzustellen und können leicht an Ihr Designsystem angepasst werden.

Deaktivierter Zustand

Die Eigenschaften des deaktivierten Zustands werden verwendet, um ein Element visuell inaktiv und nicht interaktiv erscheinen zu lassen.

Die Opazität passt sich dem aktuellen Thema für optimale Sichtbarkeit in hellen und dunklen Modi an.

Beispiel

input:disabled {
  opacity: var(--dwc-disabled-opacity);
  cursor: var(--dwc-disabled-cursor);
}

Variablen

Variable	Standardwert	Beschreibung
--dwc-disabled-opacity	Passt sich dem Licht-/Dunkel-Modus an	Reduzierte Opazität für deaktivierte Elemente
--dwc-disabled-cursor	var(--dwc-cursor-disabled)

---

Fokuszustand

Wenn eine Komponente den Fokus erhält, wird ein Fokusring darum angezeigt, um ihren aktiven Zustand anzuzeigen. Der Fokusring verwendet ein Gap-Ring-Muster mit einem oberflächenfarbigen inneren Abstand und einem farbigen äußeren Ring.

Variablen

Variable	Standardwert	Beschreibung
--dwc-focus-ring-a	0.75	Alpha-Opazität des Fokusrings
--dwc-focus-ring-width	2px	Dicke des Fokusrings
--dwc-focus-ring-gap	2px	Abstand zwischen dem Komponentenkante und dem Ring

Jede Farbpalette generiert ihre eigene Fokusring-Variable:

Variable-Muster	Beschreibung
--dwc-focus-ring-{name}	Fokusring-Schatten, der mit der Farbpalette getönt ist.

Wo {name} einer der folgenden ist: primary, success, warning, danger, info, gray, default. Siehe Komponententhemen für Details.

---

Skalen

Skalentransformationen werden für Druck-/Klickrückmeldungsanimationen bei interaktiven Elementen verwendet.

Variable	Standardwert	Beschreibung
--dwc-scale-press	0.97	Standard-Druckskalierung (3% Schrumpfen)
--dwc-scale-press-deep	0.93	Tiefe Druckskalierung (7% Schrumpfen)