Crie seu sistema de design, parte 3: cores

Neste artigo, veremos como definir um sistema de cores em CSS e quais são as práticas recomendadas para garantir que o sistema seja fácil de usar e manter.

Este artigo é parte de uma série de sistemas de design inspirados em nossa biblioteca de componentes da web. A biblioteca conta com um sólido sistema de CSS globais. Portanto, somos nós que compartilhamos o que aprendemos definindo o estilo global da nossa biblioteca!

Série do artigo:
- Parte 1: Tipografia
- Parte 2: Grade e layout
- Parte 3: Cores
- Parte 4: Espaçamento
- Parte 5: Ícones
- Parte 6: Botões

Lançamos o Editor de cores! Uma ferramenta de design da web que gera paletas de cores e temas compatíveis com o CodyHouse Framework.

Variáveis ​​de cor 101

Ao contrário de outras globais CSS, a criação de um sistema de cores é de 10% sobre codificação e 90% sobre semântica. Enquanto estiver trabalhando no seu arquivo _colors.scss, lembre-se dos seguintes objetivos:

  1. As variáveis ​​de cores devem ser fáceis de lembrar → Você não deseja verificar o arquivo global sempre que precisar escolher uma cor.
  2. O sistema deve ser fácil de atualizar → Você adicionará, removerá e renomeará as cores. Certifique-se de que não seja complicado.
  3. O sistema deve incluir apenas as cores essenciais → já ouvimos isso tantas vezes ... mas sempre acabamos com mais cores do que precisamos! A verdadeira chave do sucesso de um sistema de design é remover tudo o que não é necessário (cores incluídas).

Cores semânticas vs declarativas

Quando se trata de definir as variáveis ​​de cores, há duas abordagens principais: cores semânticas e declarativas.

A abordagem semântica se parece com:

Enquanto aqui está um exemplo de uma abordagem declarativa:

Nenhum deles está errado. A escolha daquele que atenda às suas necessidades depende de muitos fatores (por exemplo, tamanho do projeto, relevância das cores da marca etc.).

Enquanto trabalhava no arquivo _colors.scss da nossa estrutura, tive que levar em conta que os usuários o editariam (100%). Isso significa que, mesmo que a abordagem declarativa fosse a mais fácil de usar, eu tive que misturá-la com a abordagem semântica para obter um sistema que também fosse fácil de manter.

A paleta de cores essencial

A etapa número um foi declarar o número mínimo de cores necessário para criar os componentes da web. Em geral, a paleta de cores essencial é composta por:

  1. A cor principal / principal → usada para os links, a cor de fundo do botão etc. Em geral, é a cor principal da frase de chamariz.
  2. A cor de destaque → usada para destacar algo importante na página. Não deve ser uma variação da cor primária, mas uma cor complementar.
  3. Uma escala de cores neutras → Geralmente, é uma escala de tons de cinza, a ser usada para elementos de texto, elementos sutis, bordas etc.
  4. 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,: pairar /: estados ativos).

Em CSS, isso se traduz em:

* observação: estamos usando o plug-in postcss-color-mod-function para converter as funções de cores em código RGBA compatível com todos os navegadores.

O trecho acima representa a paleta de cores: todas as cores usadas no projeto.

As variações das cores primárias e de destaque são geradas usando as funções de cores. Essa abordagem é útil se você tiver um arquivo demo.html (e o fazemos em nossa estrutura) para que você possa ajustar os valores das funções até ficar satisfeito com as cores obtidas. As cores de tons (ou neutros) são geradas usando chroma.js. Nesse caso, o uso das funções não era o ideal, porque geralmente você tem duas cores opostas (preto e branco) e precisa gerar uma escala de valores com base nessas duas cores.

Adicionando cores semânticas à mistura

Quando a paleta de cores estiver pronta, podemos adicionar cores semânticas. Criar cores semânticas não significa aumentar o número de cores, mas distribuir as cores usando referências semânticas.

Por que acho que essa é uma boa abordagem

Primeiro de tudo, este sistema conta com duas cores essenciais: cores primárias e de destaque. Isso significa que, quando você precisar usar as variáveis ​​de cores, não será difícil lembrar o que essas variáveis ​​representam (mesmo se você não estiver usando nomes declarativos como "azul" e "vermelho").

Talvez seu sistema precise incluir mais cores (por exemplo, uma cor secundária). Você ainda está lidando com apenas três cores. O gerenciamento de um sistema baseado em mais de 10 cores principais seria difícil, independentemente da abordagem que você está usando, portanto, você pode simplificá-lo.

As cores da escala de cinza usam uma convenção de nomenclatura diferente: quanto maior o número no final da variável, mais escura a cor.
Essa abordagem se torna útil quando você não tem certeza da cor neutra que deseja aplicar. Se o cinza-2 parecer muito sutil, tente o cinza-3. Você deve ter notado que alguns tons estão faltando (por exemplo, cinza-5). Eles não eram essenciais no nosso caso (nunca os usamos durante a criação dos componentes da Web); portanto, os removemos da paleta de cores.

As cores semânticas são adicionadas à mistura por três razões principais:

  1. O arquivo _colors.scss se torna a fonte da verdade sempre que você precisar modificar uma cor. Você acha que os elementos do cabeçalho do texto devem estar mais escuros? Abra o arquivo _colors.scss e edite a variável de cabeçalho de texto em cores.
  2. Se você definir uma borda de cor, por exemplo, não precisará procurar qual cor cinza está usando em outros componentes na próxima vez que criar um elemento de borda. O mesmo conceito se aplica a muitos elementos, não apenas às bordas.
  3. Torna um pedaço de bolo criar e manter diferentes temas.

Theming

Assim que pudermos usar variáveis ​​CSS sem precisar depender de plugins ou polyfill, a criação de temas de cores será super simples *! Isso significa que não podemos criar temas hoje? Não, nós podemos. Temos duas opções.

* Em nossa estrutura, usamos o plug-in postcss-css-variables para compilar variáveis ​​CSS. Atualmente, ele não suporta a atualização de variáveis ​​em uma classe CSS.

A opção 1 está atualizando as variáveis ​​CSS de qualquer maneira. Os navegadores que não suportam variáveis ​​exibirão o tema de cores "padrão". Isso não é um problema, desde que o conteúdo esteja acessível.

Por exemplo, você tem um tema de cor padrão → fundo branco e cor de texto em preto e um tema escuro - tema → fundo preto e cor de texto em branco. Em seguida, você cria dois componentes, um com o tema padrão e outro com o tema .dark. Se os dois componentes com o tema padrão não afetarem a experiência do usuário, considere o tema .dark como um aprimoramento (opcional). Nesse caso, faz sentido atualizar as variáveis ​​para criar temas diferentes, mesmo que eles não sejam suportados em todos os lugares.

É assim que você cria um novo tema atualizando algumas variáveis-chave do CSS:

Adoro esta solução porque ela abstrai a correção de cores e permite que você mantenha seus temas de cores em um único arquivo. Ao fazer isso, podemos potencialmente alterar o estado de cada componente (do tema-a para o tema-b) simplesmente aplicando uma classe CSS.

A opção 2 seria direcionada a todos os elementos cuja aparência é afetada pelo tema. A vantagem desse método é que ele é suportado por todos os navegadores. No entanto, não é tão fácil de manter em comparação com o baseado inteiramente em variáveis ​​CSS.

Aqui está um exemplo da opção 2 em ação:

Agora você sabe como planejamos lidar com cores em nossa estrutura! Se você tiver comentários / sugestões, informe-nos no comentário!

Espero que tenham gostado do artigo! Para mais pepitas de web design, siga-nos aqui no Medium ou no Twitter.