Utilitário
Color
Classes utilitárias para a cor de elementos de texto, com opacidade e gradientes.
Cor
Background
| Classe CSS | Descrição |
|---|---|
.color-bg-darker | color: var(--color-bg-darker); |
.color-bg-dark | color: var(--color-bg-dark); |
.color-bg | color: var(--color-bg); |
.color-bg-light | color: var(--color-bg-light); |
.color-bg-lighter | color: var(--color-bg-lighter); |
Contraste
| Classe CSS | Descrição |
|---|---|
.color-contrast-lower | color: var(--color-contrast-lower); |
.color-contrast-low | color: var(--color-contrast-low); |
.color-contrast-medium | color: var(--color-contrast-medium); |
.color-contrast-high | color: var(--color-contrast-high); |
.color-contrast-higher | color: var(--color-contrast-higher); |
Primary
| Classe CSS | Descrição |
|---|---|
.color-primary-darker | color: var(--color-primary-darker); |
.color-primary-dark | color: var(--color-primary-dark); |
.color-primary | color: var(--color-primary); |
.color-primary-light | color: var(--color-primary-light); |
.color-primary-lighter | color: var(--color-primary-lighter); |
Accent
| Classe CSS | Descrição |
|---|---|
.color-accent-darker | color: var(--color-accent-darker); |
.color-accent-dark | color: var(--color-accent-dark); |
.color-accent | color: var(--color-accent); |
.color-accent-light | color: var(--color-accent-light); |
.color-accent-lighter | color: var(--color-accent-lighter); |
Feedback
| Classe CSS | Descrição |
|---|---|
.color-success-darker | color: var(--color-success-darker); |
.color-success-dark | color: var(--color-success-dark); |
.color-success | color: var(--color-success); |
.color-success-light | color: var(--color-success-light); |
.color-success-lighter | color: var(--color-success-lighter); |
.color-warning-darker | color: var(--color-warning-darker); |
.color-warning-dark | color: var(--color-warning-dark); |
.color-warning | color: var(--color-warning); |
.color-warning-light | color: var(--color-warning-light); |
.color-warning-lighter | color: var(--color-warning-lighter); |
.color-error-darker | color: var(--color-error-darker); |
.color-error-dark | color: var(--color-error-dark); |
.color-error | color: var(--color-error); |
.color-error-light | color: var(--color-error-light); |
.color-error-lighter | color: var(--color-error-lighter); |
Preto & branco
| Classe CSS | Descrição |
|---|---|
.color-white | color: var(--color-white); |
.color-black | color: var(--color-black); |
Misc
| Classe CSS | Descrição |
|---|---|
.color-inherit | color: inherit; |
Opacidade
Combine uma classe de opacidade com qualquer utilitário de cor para ajustar a transparência do texto:
| Classe CSS | Descrição |
|---|---|
.color-opacity-0 | opacidade da cor 0% |
.color-opacity-5% | opacidade da cor 5% |
.color-opacity-10% | opacidade da cor 10% |
.color-opacity-15% | opacidade da cor 15% |
.color-opacity-20% | opacidade da cor 20% |
.color-opacity-25% | opacidade da cor 25% |
.color-opacity-30% | opacidade da cor 30% |
.color-opacity-40% | opacidade da cor 40% |
.color-opacity-50% | opacidade da cor 50% |
.color-opacity-60% | opacidade da cor 60% |
.color-opacity-70% | opacidade da cor 70% |
.color-opacity-75% | opacidade da cor 75% |
.color-opacity-80% | opacidade da cor 80% |
.color-opacity-85% | opacidade da cor 85% |
.color-opacity-90% | opacidade da cor 90% |
.color-opacity-95% | opacidade da cor 95% |
<p class="color-primary color-opacity-50%">Nada é barato</p>Gradientes
Se você adicionou um gradiente à paleta (ex.: gradiente primary),
pode aplicá-lo diretamente ao texto:
| Classe CSS | Descrição |
|---|---|
.color-gradient-primary-top-left | gradiente linear para topo-esquerda |
.color-gradient-primary-top | gradiente linear para o topo |
.color-gradient-primary-top-right | gradiente linear para topo-direita |
.color-gradient-primary-right | gradiente linear para a direita |
.color-gradient-primary-bottom-right | gradiente linear para baixo-direita |
.color-gradient-primary-bottom | gradiente linear para baixo |
.color-gradient-primary-bottom-left | gradiente linear para baixo-esquerda |
.color-gradient-primary-left | gradiente linear para a esquerda |
<h1 class="color-gradient-primary-right">Gradients</h1>