# Cores

> A biblioteca de Cores: as dez cores nomeadas do sistema com os valores e os endereços delas, as suas próprias amostras, o inspetor, criar e editar uma cor, sobrepor uma cor do sistema, e onde uma cor é usada.

**Colors** é a terceira categoria sob a raiz Assets: a paleta fixa que o produto entrega e as amostras que você acrescenta, cada uma um nome com um valor `#RRGGBB`. O painel tem o título "Cores", com a frase "Cores #RRGGBB nomeadas, devolvidas por variáveis com saída de cor. As cores do operador têm preferência sobre uma cor de sistema no mesmo endereço." e a pílula de contagem. Lê-la exige **Ver a lógica**; criar, editar e excluir as suas cores exigem **Configurar a lógica**.

## A paleta do sistema {#the-system-palette}

| Nome | Endereço | Valor |
| --- | --- | --- |
| Brand | `Assets.Colors.Brand` | `#0369A1` |
| Brand light | `Assets.Colors.Brand_light` | `#38BDF8` |
| Brand tint | `Assets.Colors.Brand_tint` | `#E0F2FE` |
| Red | `Assets.Colors.Red` | `#C42B1C` |
| Amber | `Assets.Colors.Amber` | `#C19C00` |
| Green | `Assets.Colors.Green` | `#0F7B0F` |
| Blue | `Assets.Colors.Blue` | `#005FB8` |
| Gray | `Assets.Colors.Gray` | `#8A8A8A` |
| Black | `Assets.Colors.Black` | `#000000` |
| White | `Assets.Colors.White` | `#FFFFFF` |

O nome de uma cor é o endereço dela, então ele fica em inglês em toda cultura: traduzir `Red` mudaria `Assets.Colors.Red`. Uma cor tem um valor, usado como está no tema claro e no escuro; a paleta não troca com o tema.

## O catálogo e o inspetor {#the-catalog-and-the-inspector}

As suas cores são listadas primeiro, depois a paleta; filtros: **Origem** e **Por página**. Um cartão mostra a amostra, o nome, o hexadecimal e a origem. O inspetor mostra a amostra em corpo grande com o hexadecimal dela, o nome, e Endereço, Origem (Paleta do sistema, ou Minha biblioteca) e Formato (`#RRGGBB`). Uma cor da paleta mostra "As cores de sistema são somente leitura."; as suas oferecem **Editar** e **Excluir** a um papel que configura.

## Nova cor {#new-color}

O verbo sobre a linha Colors abre "Nova cor" no lugar da grade ("Escolha um endereço estável e o valor RGB de seis dígitos dele.").

| Campo | O que é | Valores / padrão | Efeito |
| --- | --- | --- | --- |
| Nome | O nome de exibição; o segmento dele é o endereço. | Obrigatório. | O endereço que as variáveis guardam. O Editar renomeia depois, e toda referência ao endereço antigo vai junto. Um nome cujo segmento é igual ao de uma cor da paleta substitui aquela cor no endereço e na lista. |
| Seletor | O seletor de cor do navegador. | Começa em `#0369A1`. | Escreve no campo hexadecimal. |
| Hexadecimal | O valor como texto. | Exatamente `#RRGGBB`; `#0369A1` por padrão. | Qualquer outra coisa mostra "Use exatamente #RRGGBB."; o valor é guardado em maiúsculas. |

A prévia à direita mostra a amostra e o hexadecimal normalizado. "É preciso dar um nome." e "Use exatamente #RRGGBB." mantêm o **Criar cor** esmaecido; o **Cancelar** ou o **Voltar** sai sem criar. Quando dá certo, o cartão é revelado e o feed diz "Cor criada."

## Editar e Excluir {#edit-and-delete}

O **Editar** abre "Editar `<name>`" ("A renomeação é salva com Enter ou quando o foco sai do campo e leva as referências junto; mudanças válidas de cor são salvas automaticamente."): um campo **Nome** que é um campo de renomeação, com o seletor e o hexadecimal abaixo dele. Enquanto você digita um nome, uma linha mostra a prévia do impacto ("Renomear atualiza os 2 locais que leem este endereço.", "Nenhuma referência usa o endereço atual.", ou "O endereço efetivo não muda; nenhuma referência precisa ser atualizada."). Enter, ou sair do campo, confirma: a cor mantém o id e o valor dela, toda referência enraizada ao endereço antigo é reescrita, e o feed diz "Cor renomeada e N referências atualizadas." Um nome já ocupado é recusado no lugar, abaixo do campo. Uma mudança válida de valor é salva meio segundo depois da última edição ("Cor salva."). O **Excluir** pergunta "Excluir 'X'? As referências ao endereço dela ficarão sem resolução. Isso não pode ser desfeito." e, quando a cor sobrepunha uma entrada da paleta, descobre aquela entrada de novo.

## Onde uma cor é usada {#where-a-color-is-used}

Uma [variável](logic-variables#output-types) de saída Cor devolve `Assets.Colors.<name>` (`Variables.Level.Value > 50 ? Assets.Colors.Red : Assets.Colors.Green`) e o componente vinculado a ela desenha aquela cor; as entradas Cor de preenchimento e Cor de traço de um [símbolo](assets-symbols) recebem um recurso de cor ou uma variável de cor; o [editor de dashboard](view-editor) oferece esses endereços onde quer que uma propriedade receba uma cor.

## O que a biblioteca não faz {#what-the-library-does-not-do}

Ela não aceita alfa, cores de três dígitos nem cores nomeadas, não edita a paleta, e não guarda variante por tema.