Varianten-Swatch — ui.swatch
Farb-/Bild-Kachel für Produktvarianten. Die Produktfarbe ist ein CONTENT-Datum (Prop), kein Design-Token — Auswahl-Ring und Maße kommen aus Tokens
UI Elementv1.0.1Commerceweb.documentweb.applicationbuilder.preview
Beispiele
Farbe, ausgewählt
Farbe, nicht ausgewählt
Ohne Farbwert (Platzhalter-Fläche)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
label * | string | — |
color | string | "" |
imageUrl | string | "" |
active | boolean | false |
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--swatch-border-strong | var(--color-border-strong) |
--swatch-focus-ring-color | var(--focus-ring-color) |
--swatch-focus-ring-offset | var(--focus-ring-offset) |
--swatch-focus-ring-width | var(--focus-ring-width) |
--swatch-radius-full | var(--radius-full) |
--swatch-surface-sunken | var(--color-surface-sunken) |
--swatch-text-default | var(--color-text-default) |
Genutzte Design-Tokens
border.hairline color.border.strong color.surface.sunken color.text.default focus.ring-color focus.ring-offset focus.ring-width radius.full size.10