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:

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

Cores relacionadas a notificação

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

Cores relacionadas a ações

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

Cores relacionadas ao tema corrente do sistema

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

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();