Funções de cores CSS e propriedades personalizadas

Sei que estou muito atrasado para a festa, mas finalmente entendi por que as pessoas acham funções de cor como hsl(), hwb()ou lab()tão atraentes.

Há muitos motivos, mas um deles é que, em combinação com propriedades personalizadas, trabalhar com funções de cores é muito mais fácil, limpo e compreensível em comparação com trabalhar com cores hexadecimais ou rbg().

Aqui está um exemplo. Digamos que temos um componente de status simples.

[role="status"] {
  --background-color: rgb(211 232 248);
  
  background-color: var(--background-color);
  padding: 1rem;
  margin-block-end: 1em;
}

<div role="status">
  <strong>Information:</strong> You're logged in as “Tyler Durden”.
</div>

Informação: Você está logado como “Tyler Durden”.

Se eu quisesse adicionar uma borda ao componente com uma variação um pouco mais escura da cor de fundo, normalmente usaria o seletor de cores nas ferramentas de desenvolvimento e escolheria uma cor mais escura aleatória.

[role="status"] {
  --border-color: rgb(122 186 235);

  border: 2px solid var(--border-color);
}

Informação: Você está logado como “Tyler Durden”.

Tudo bem, mas hsl()é muito mais intuitivo. Em vez de escolher uma cor aleatória, eu uso a cor de fundo e apenas reduzo o lvalor (luminosidade) de 90% para 70%.

[role="status"] {
  --background-color: hsl(206deg 74% 90%);
  --border-color: hsl(206deg 74% 70%);
  
  background-color: var(--background-color);
  border: 2px solid var(--border-color);

  padding: 1rem;
  margin-block-end: 1em;
}

Informação: Você está logado como “Tyler Durden”.

Para evitar a repetição, armazeno o valor h(matiz) e s(saturação) em propriedades personalizadas.

[role="status"] {
  --h: 206deg;
  --s: 74%;
  
  --background-color: hsl(var(--h) var(--s) 90%);
  --border-color: hsl(var(--h) var(--s) 70%);
}

O que é ótimo nisso é que agora é super fácil criar variações desse componente em cores diferentes. Só preciso alterar o hvalor.

.warning {
  --h: 40deg;
}

.error {
  --h: 0deg;
}

<div role="status" class="warning">
  <strong>Warning:</strong> Your free trial is ending in 4 days.
</div>

<div role="status" class="error">
  <strong>Error:</strong> Your username and password don't match.
</div>

Aviso: sua avaliação gratuita termina em 4 dias.

Erro: Seu nome de usuário e senha não correspondem.

Teoricamente, você nem precisa das aulas.

<div role="status" style="--h: 40deg;">
  <strong>Warning:</strong> Your free trial is ending in 4 days.
</div>

<div role="status" style="--h: 0deg;">
  <strong>Error:</strong> Your username and password don't match.
</div>

Aqui está o código CSS final.

[role="status"] {
  --h: 206deg;
  --s: 74%;
  
  --background-color: hsl(var(--h) var(--s) 90%);
  --border-color: hsl(var(--h) var(--s) 70%);
  
  background-color: var(--background-color);
  border: 2px solid var(--border-color);

  padding: 1rem;
  margin-block-end: 1em;
}

.warning {
  --h: 40deg;
}

.error {
  --h: 0deg;
}