Commentary
This page shows some of the main theme colours that are available. These are derived from the full theme colour pallete.
These are common color helpers that decorate text and HTML elements. Backgrounds only fill in the parent background colour. Element color helpers also decorate element borders and set the text colour inside the element. The element helpers adjust the text colour to be WCAG compliant. Light and dark versions for the element and background colours are also available. See Theme Control.
Usage
| Classes: | |
|---|---|
| CSS Labels | Defined in table below. |
| Dependencies: | |
|---|---|
| File: | element-colors.css, backgrounds.css, typography.css |
| Variables: | all color variables defined in file initial-colors.css |
| Layer: | layout |
Examples
| Text | Background | Background Light | Element | Element Light | Element Dark |
|---|---|---|---|---|---|
| has-text-primary | has-bg-primary | has-bg-primary-light | is-primary | is-primary-light | is-primary-dark |
| has-text-secondary | has-bg-secondary | has-bg-secondary-light | is-secondary | is-secondary-light | is-secondary-dark |
| has-text-complement | has-bg-complement | has-bg-complement-light | is-complement | is-complement-light | is-complement-dark |
| has-text-link | has-bg-link | has-bg-link-light | is-link | is-link-light | is-link-dark |
| has-bg-success | has-bg-success-light | is-success | is-success-light | is-success-dark | |
| has-bg-warning | has-bg-warning-light | is-warning | is-warning-light | is-warning-dark | |
| has-bg-danger | has-bg-danger-light | is-danger | is-danger-light | is-danger-dark | |
| .has-text-black | has-bg-dark | is-dark | |||
| has-text-grey | has-bg-grey | is-grey | |||
| has-text-white | has-bg-white | is-white |