Utilização de cores

O Web Framework permite a utilização de cores predefinidas que se adaptam automaticamente ao modo claro/escuro do sistema e que atendem as necessidades mínimas de contraste quando aplicadas em textos.
Para isso é necessário atribuir à propriedade CSS do elemento uma das seguintes variáveis CSS disponibilizadas:

Cores relacionadas a categorização:

Essas cores devem ser utilizadas em casos que há necessidade de ter cores diferentes, mas que a cor específica não é relevante e que pode ser alterada, como por exemplo, as cores de um gráfico, ou em legendas com vários itens com mesma categorização.

A categoria não deve ser selecionada com base em sua cor corrente, pois esta poderá ser alterada.

• –wfd-color-category-01 e –wfd-color-on-category-01
• –wfd-color-category-02 e –wfd-color-on-category-02
• –wfd-color-category-03 e –wfd-color-on-category-03
• –wfd-color-category-04 e –wfd-color-on-category-04
• –wfd-color-category-05 e –wfd-color-on-category-05
• –wfd-color-category-06 e –wfd-color-on-category-06
• –wfd-color-category-07 e –wfd-color-on-category-07
• –wfd-color-category-08 e –wfd-color-on-category-08
• –wfd-color-category-09 e –wfd-color-on-category-09
• –wfd-color-category-10 e –wfd-color-on-category-10
• –wfd-color-category-11 e –wfd-color-on-category-11
• –wfd-color-category-12 e –wfd-color-on-category-12
• –wfd-color-category-13 e –wfd-color-on-category-13
• –wfd-color-category-14 e –wfd-color-on-category-14
• –wfd-color-category-15 e –wfd-color-on-category-15
• –wfd-color-category-16 e –wfd-color-on-category-16
• –wfd-color-category-17 e –wfd-color-on-category-17
• –wfd-color-category-18 e –wfd-color-on-category-18
• –wfd-color-category-19 e –wfd-color-on-category-19
• –wfd-color-category-20 e –wfd-color-on-category-20

Cores relacionadas a níveis de notificação

Essas cores devem ser utilizadas em casos que há necessidade de sinalizar um nível de severidade, prioridade ou notificação, como por exemplo a prioridade de atendimento, ou o resultado de uma notificação.

Essas cores não variam.

• –wfd-color-unknown
• –wfd-color-info
• –wfd-color-warn
• –wfd-color-alert
• –wfd-color-error
• –wfd-color-success

Cores relacionadas a ações

Essas cores devem ser utilizadas em casos que devam sinalizar ou diferenciar ações, como por exemplo, legenda de exclusão, alteração ou inserção de um registro.

Essas cores não variam.

• –wfd-color-no-change
• –wfd-color-change
• –wfd-color-add
• –wfd-color-remove

Cores relacionadas ao tema corrente do sistema

Essas cores devem ser utilizadas em casos que se deseja manter uma coerência visual com o tema corrente do usuário, como por exemplo, a cor de fundo ou cor de texto de um botão, link ou componente personalizado.

Essas cores irão variar de acordo com o tema do usuário.

• –wfd-color-primary
• –wfd-color-on-primary
• –wfd-color-surface
• –wfd-color-on-surface
• –wfd-color-outline
• –wfd-color-outline-variant

O resultado visual de cada uma dessas variáveis pode ser visualizado em “Menu > Desenvolvimento > Web Framework > Componentes > Cores”.

Exemplos de uso

Seção HTML que adotará a cor primária do sistema como cor de fundo e a respectiva cor de texto sobre a cor primária.

.custom-class {
    background-color: var(--wfd-color-primary);
    color: var(--wfd-color-on-primary);
}

<div class="custom-class">...</div>

Label do sistema que será apresentado com cor de alerta

const label = process.label('alert', 'Atenção ao uso correto das variáveis');
label.color = 'var(--wfd-color-warn)';
label.write();