Campo de color

El campo color almacena un valor de color controlado dentro de una fila de repeater.

Ideal para

• colores de insignias
• tonos de acento
• valores de la leyenda de gráficos
• tokens visuales simples por elemento

Ejemplo de esquema

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

Uso en plantillas

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

Ejemplo de variante:

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

Úselo cuando

Usa color cuando cada elemento repetido necesite un valor visual ligero que los editores puedan controlar de forma segura.

No lo uses cuando

No lo uses cuando:

• el color deba imponerse globalmente mediante tokens de diseño
• el valor deba elegirse entre un pequeño conjunto nombrado en lugar de una entrada de color libre

Usa select o un sistema de estilos compartido en su lugar.

Notas técnicas

• mantener color dentro de estructuras repetidas controladas, no como sustituto de los tokens de diseño globales
• usarlo cuando la variación a nivel de elemento sea intencional y limitada
• preferir variantes nombradas mediante select cuando la consistencia sea más importante que la elección libre de color
• revisar el impacto en accesibilidad antes de confiar únicamente en el color para transmitir significado

Relacionado

• Repetidor
• Selector
• Rango