Neste artigo veremos como definir um sistema de cores no CSS e quais são as práticas recomendadas para garantir que o sistema seja fácil de usar como também, manter. Veja abaixo:
1. Variáveis de cores
A criação de um sistema de cores é 10% sobre codificação e 90% sobre semântica. Ao trabalhar no seu arquivo CSS você deve ter em mente os seguintes objetivos:
- As variáveis de cor precisam ser fáceis de lembrar, para assim você não precisar verificar o arquivo global sempre que precisar escolher uma cor.
- O sistema tem que ser fácil de atualizar, pois você irá adicionar, remover e renomear cores. Certifique-se de que isso não seja complicado.
- O sistema deve incluir apenas as cores essenciais, pois sempre acabamos com mais cores do que precisamos. A chave de sucesso real de um sistema de design é remover tudo o que não é necessário (cores incluídas).
2. Cores Semânticas x Declarativas
Quando se trata de definir as variáveis de cor, existem duas abordagens principais: as cores semântica e declarativa. Escolher aquele que atenda às suas necessidades depende de muitos fatores (por exemplo, tamanho do projeto, relevância das cores da marca, etc.).
Por exemplo, mesmo que a abordagem declarativa fosse a mais fácil de usar, teria que misturá-la com a abordagem semântica para obter um sistema que também fosse fácil de manter.
3. Paleta de cores essencial
O primeiro passo é declarar o número mínimo de cores necessárias para criar os componentes da web. Em geral, a paleta de cores essencial é composta de:
- A cor principal / primária: usada para os links, a cor de fundo do botão, etc. Em geral, é a cor principal da frase de chamariz.
- A cor de realce: usada para destacar algo importante na página. Não deve ser uma variação da cor primária, mas sim uma cor complementar.
- Uma escala de cores neutras: geralmente, é uma escala de tons de escala de cinza, a ser usada para elementos de texto, elementos sutis, bordas etc.
- Cores de feedback – sucesso, erro, aviso.
Algumas dessas cores precisam de uma variação (versão mais escura / mais clara), geralmente usada para destacar a interatividade (por exemplo, hover /: active states). As variações das cores primária e de destaque são geradas usando funções de cor.
Essa abordagem é útil se você tiver um arquivo demo.html, para que você possa ajustar os valores das funções até ficar satisfeito com as cores obtidas.
3. Tema
Assim que der para usar variáveis CSS sem depender de plugins, criar temas de cores será mais simples. Há a opção de estar atualizando as variáveis CSS de qualquer maneira. Os navegadores que não suportam variáveis mostrarão o tema de cor “padrão”, mas isso não é um problema desde que o conteúdo esteja acessível.
Por exemplo, você tem um tema de cores padrão: fundo branco e cor de texto preto e um fundo de texto. Então você cria dois componentes, um com o tema padrão, o outro com o tema “.dark”. Se os dois componentes com o tema padrão não afetarem a experiência do usuário, você poderá considerar o tema .dark como um aprimoramento (opcional). Nesse caso, faz sentido atualizar as variáveis para criar temas diferentes, mesmo que não sejam suportados em todos os lugares.
