Commentary
These are common color helpers that decorate text and HTML elements. Element color helpers also decorate element borders and are typically used by buttons.
Light and dark versions for the element colours are also available. These are typically used to show hover states or can be used for clicked states or any other feedback indications.
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 |
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-tertiary | has-bg-tertiary | has-bg-tertiary-light | is-tertiary | is-tertiary-light | is-tertiary-dark |
| has-text-link | has-bg-link | has-bg-link-light | is-link | is-link-light | is-link-dark |
| has-text-success | has-bg-success | has-bg-success-light | is-success | is-success-light | is-success-dark |
| has-text-warning | has-bg-warning | has-bg-warning-light | is-warning | is-warning-light | is-warning-dark |
| has-text-danger | has-bg-danger | has-bg-danger-light | is-danger | is-danger-light | is-danger-dark |
| has-text-dark | has-bg-dark | is-dark | |||
| has-text-grey | has-bg-grey | is-grey | |||
| has-text-white | has-bg-white | is-white |