Cores

Os tokens de cores definem as cores a serem usadas para construir nossas interfaces, com base em nossa paleta.

Exemplos

API

Temos algumas classes disponíveis de cores no nosso Design System, respeitando as nossas paletas de cores principas - primary, green, orange, red, gray - onde o primary sempre segue a cor do nosso ThemeProvider e os estados de hover, active e focus.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

<p class="c-text-primary">The quick brown fox jumps over the lazy dog</p> <p class="c-bg-primary" style="width: 400px; height: 50px;">The quick brown fox jumps over the lazy dog</p> <p class="c-border-primary" style="border-width: 1px;">The quick brown fox jumps over the lazy dog</p> <button class="hover:c-bg-primary active:c-bg-green">Veja o hover e no active!</button><br/><br/> <input class="focus:c-bg-primary c-border-primary" placeholder="No focus!" style="border-width: 1px" />

<p class="c-text-primary">The quick brown fox jumps over the lazy dog</p>
<p class="c-bg-primary" style="width: 400px; height: 50px;">The quick brown fox jumps over the lazy dog</p>
<p class="c-border-primary" style="border-width: 1px;">The quick brown fox jumps over the lazy dog</p>
<button class="hover:c-bg-primary active:c-bg-green">Veja o hover e no active!</button><br/><br/>
<input class="focus:c-bg-primary c-border-primary" placeholder="No focus!" style="border-width: 1px" />

O mesmo pode ser feito utilizando variáveis no CSS, seguindo o exemplo modelo:

.paragrafo-1 {
  color: var(--c-color-primary);
}

API

Para usar as classes de cor é preciso primeiro importar o estilos.

import '@estrategiahq/coruja-web-ui/dist/coruja-web-ui.css'

Classes de cores disponíveis

Temos as seguintes variações de classes disponíveis, seguindo o formato abaixo:

{estado}.c-{variacão}-{paleta de cor}-{tonalidade (opcional)}

estado	variações	paleta de cores	tonalidades
hover	text	primary	100
focus	bg	green	200
active	border	orange	300
		red	400
		gray	500

Para colocamos uma cor de border da paleta red no focus, fazemos:

hover:c-border-red

E para usar uma tonalidade específica:

hover:c-border-red-400

Variáveis de CSS

Temos as seguintes variáveis de CSS disponíveis no formato abaixo:

var(--c-color-{paleta}-{tonalidade (opcional)})

Assim, para definir o background por CSS de um elemento com a paleta de cores green e com uma tonalidade especifica fazemos:

.my-button {
  background-color: var(--c-color-green); // default 300
  background-color: var(--c-color-green-400);
}