Color
Control the color of your text elements using the color utility classes.
Color background #
| CSS Class | Description |
|---|---|
c{p}olor-bg-darker |
color: var(--color-bg-darker); |
c{p}olor-bg-dark |
color: var(--color-bg-dark); |
c{p}olor-bg |
color: var(--color-bg); |
c{p}olor-bg-light |
color: var(--color-bg-light); |
c{p}olor-bg-lighter |
color: var(--color-bg-lighter); |
Color contrasts #
| CSS Class | Description |
|---|---|
c{p}olor-contrast-lower |
color: var(--color-contrast-lower); |
c{p}olor-contrast-low |
color: var(--color-contrast-low); |
c{p}olor-contrast-medium |
color: var(--color-contrast-medium); |
c{p}olor-contrast-high |
color: var(--color-contrast-high); |
c{p}olor-contrast-higher |
color: var(--color-contrast-higher); |
Color primary #
| CSS Class | Description |
|---|---|
c{p}olor-primary-darker |
color: var(--color-primary-darker); |
c{p}olor-primary-dark |
color: var(--color-primary-dark); |
c{p}olor-primary |
color: var(--color-primary); |
c{p}olor-primary-light |
color: var(--color-primary-light); |
c{p}olor-primary-lighter |
color: var(--color-primary-lighter); |
Color accent #
| CSS Class | Description |
|---|---|
c{p}olor-accent-darker |
color: var(--color-accent-darker); |
c{p}olor-accent-dark |
color: var(--color-accent-dark); |
c{p}olor-accent |
color: var(--color-accent); |
c{p}olor-accent-light |
color: var(--color-accent-light); |
c{p}olor-accent-lighter |
color: var(--color-accent-lighter); |
Feedback colors #
| CSS Class | Description |
|---|---|
c{p}olor-success-darker |
color: var(--color-success-darker); |
c{p}olor-success-dark |
color: var(--color-success-dark); |
c{p}olor-success |
color: var(--color-success); |
c{p}olor-success-light |
color: var(--color-success-light); |
c{p}olor-success-lighter |
color: var(--color-success-lighter); |
c{p}olor-warning-darker |
color: var(--color-warning-darker); |
c{p}olor-warning-dark |
color: var(--color-warning-dark); |
c{p}olor-warning |
color: var(--color-warning); |
c{p}olor-warning-light |
color: var(--color-warning-light); |
c{p}olor-warning-lighter |
color: var(--color-warning-lighter); |
c{p}olor-error-darker |
color: var(--color-error-darker); |
c{p}olor-error-dark |
color: var(--color-error-dark); |
c{p}olor-error |
color: var(--color-error); |
c{p}olor-error-light |
color: var(--color-error-light); |
c{p}olor-error-lighter |
color: var(--color-error-lighter); |
Black & white #
| CSS Class | Description |
|---|---|
c{p}olor-white |
color: var(--color-white); |
c{p}olor-black |
color: var(--color-black); |
Misc #
| CSS Class | Description |
|---|---|
c{p}olor-inherit |
color: inherit; |
Color opacity #
If you use a color utility class, you can modify the color opacity using one of the following classes:
| CSS Class | Description |
|---|---|
c{p}olor-opacity-0 |
color opacity 0% |
c{p}olor-opacity-5% |
color opacity 5% |
c{p}olor-opacity-10% |
color opacity 10% |
c{p}olor-opacity-15% |
color opacity 15% |
c{p}olor-opacity-20% |
color opacity 20% |
c{p}olor-opacity-25% |
color opacity 25% |
c{p}olor-opacity-30% |
color opacity 30% |
c{p}olor-opacity-40% |
color opacity 40% |
c{p}olor-opacity-50% |
color opacity 50% |
c{p}olor-opacity-60% |
color opacity 60% |
c{p}olor-opacity-70% |
color opacity 70% |
c{p}olor-opacity-75% |
color opacity 75% |
c{p}olor-opacity-80% |
color opacity 80% |
c{p}olor-opacity-85% |
color opacity 85% |
c{p}olor-opacity-90% |
color opacity 90% |
c{p}olor-opacity-95% |
color opacity 95% |
Example:
<p class="color-primary color-opacity-50%">Nothing is cheap</p>Color gradients #
If you've added a gradient to your color palette (e.g., gradient 'primary'), you can use the following classes:
| CSS Class | Description |
|---|---|
c{p}olor-gradient-primary-top-left |
linear gradient to top-left |
c{p}olor-gradient-primary-top |
linear gradient to top |
c{p}olor-gradient-primary-top-right |
linear gradient to top-right |
c{p}olor-gradient-primary-right |
linear gradient to right |
c{p}olor-gradient-primary-bottom-right |
linear gradient to bottom-right |
c{p}olor-gradient-primary-bottom |
linear gradient to bottom |
c{p}olor-gradient-primary-bottom-left |
linear gradient to bottom-left |
c{p}olor-gradient-primary-left |
linear gradient to left |
<h1 class="color-gradient-primary-right">Gradients</h1>
