Background Colors
Dialtone provides both fill and gradient background classes. Most components have a background color set. These are to be used to override a component or for one-off designs.
Fills
Slate
Ash
Bright Blue
Navy
Bright Emerald
Emerald
Sunflower
Wildberry
Crimson
Berry
Rose
White / Transparent
Background Opacity
The ability to control a background color is only provided as a class. We do not provide variables to control this. This class must be paired with a .d-bgc-[color] class to work properly. The background-color opacity class resets the background color's alpha channel CSS variable value.
Starting in v5.9.0, Dialtone began providing immutable background-color classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.
| Class | Output |
|---|---|
| .d-bgo0 | --bgo: 0 !important; |
| .d-bgo10 | --bgo: 10 !important; |
| .d-bgo25 | --bgo: 25 !important; |
| .d-bgo50 | --bgo: 50 !important; |
| .d-bgo75 | --bgo: 75 !important; |
| .d-bgo90 | --bgo: 90 !important; |
| .d-bgo95 | --bgo: 95 !important; |
| .d-bgo99 | --bgo: 99 !important; |
| .d-bgo100 | --bgo: 100 !important; |
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
<p class="d-bgc-blue d-bgo0">…</p>
<p class="d-bgc-blue d-bgo10">…</p>
<p class="d-bgc-blue d-bgo25">…</p>
<p class="d-bgc-blue d-bgo50">…</p>
<p class="d-bgc-blue d-bgo75">…</p>
<p class="d-bgc-blue d-bgo90">…</p>
<p class="d-bgc-blue d-bgo95">…</p>
<p class="d-bgc-blue d-bgo99">…</p>
<p class="d-bgc-blue d-bgo100">…</p>