Color-Feld

Das color-Feld speichert einen kontrollierten Farbwert innerhalb einer repeater-Zeile.

Am besten für

• Badge-Farben
• Akzent-Farbfelder
• Diagrammlegendenwerte
• einfache visuelle Kennzeichnungen pro Element

Schema-Beispiel

{ "name": "accentColor", "label": "Accent Color", "type": "color" }

Template-Verwendung

{{#each stats as="item"}}
  <span class="stat-dot" style="background-color: {{ item.accentColor }};"></span>
{{/each}}

Beispiel (Variante):

{{#each badges as="item"}}
  <span class="badge" style="border-color: {{ item.accentColor }};">
    {{ item.label }}
  </span>
{{/each}}

Wann verwenden

Verwenden Sie color, wenn jedes wiederholte Element einen leichtgewichtigen visuellen Wert benötigt, den Redakteure sicher steuern können.

Nicht verwenden, wenn

Verwenden Sie es nicht, wenn:

• die Farbe global durch Design-Token durchgesetzt werden sollte
• der Wert aus einer kleinen benannten Auswahl statt über eine freie Farbeingabe gewählt werden soll

Verwenden Sie stattdessen select oder ein gemeinsames Styling-System.

Technische Hinweise

• Verwenden Sie color innerhalb kontrollierter wiederholter Strukturen, nicht als Ersatz für globale Design-Token
• Verwenden Sie es, wenn Variation auf Elementebene beabsichtigt und begrenzt ist
• Bevorzugen Sie benannte Varianten über select, wenn Konsistenz wichtiger ist als freie Farbauswahl
• Überprüfen Sie die Auswirkungen auf die Barrierefreiheit, bevor Sie sich darauf verlassen, Bedeutung ausschließlich über Farbe zu vermitteln

Verwandt

• Repeater
• Select
• Range