Campo de Cor

O campo color armazena um valor de cor controlado dentro de uma linha de repeater.

Ideal para

• cores de crachás
• amostras de cor de destaque
• valores da legenda do gráfico
• tokens visuais simples por item

Exemplo de Esquema

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

Uso no Modelo

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

Exemplo de variante:

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

Quando Usar

Use color quando cada item repetido precisar de um valor visual leve que os editores possam controlar com segurança.

Quando Não Usar

Não use color quando:

• a cor deva ser aplicada globalmente por tokens de design
• o valor deva ser escolhido a partir de um pequeno conjunto nomeado em vez de uma entrada de cor livre

Use select ou um sistema de estilização compartilhado em vez disso.

Notas Técnicas

• mantenha color dentro de estruturas repetidas controladas, não como um substituto para tokens de design globais
• use-o quando a variação ao nível do item for intencional e limitada
• prefira variantes nomeadas através de select quando a consistência importar mais do que a escolha livre de cor
• avalie o impacto na acessibilidade antes de confiar apenas na cor para transmitir significado

Relacionado

• Repetidor
• Seleção
• Intervalo