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

.d-bgc-slate
.d-bgc-slate-light
.d-bgc-slate-lighter
.d-bgc-slate-lightest

Ash

.d-bgc-ash-darkest
.d-bgc-ash-darker
.d-bgc-ash-dark
.d-bgc-ash

Bright Blue

.d-bgc-blue-dark
.d-bgc-blue
.d-bgc-blue-light
.d-bgc-blue-lighter

Navy

.d-bgc-navy
.d-bgc-navy-light
.d-bgc-navy-lighter
.d-bgc-navy-lightest

Bright Emerald

.d-bgc-bright-emerald-dark
.d-bgc-bright-emerald
.d-bgc-bright-emerald-light
.d-bgc-bright-emerald-lighter

Emerald

.d-bgc-emerald-darker
.d-bgc-emerald-dark
.d-bgc-emerald
.d-bgc-emerald-light
.d-bgc-emerald-lighter

Sunflower

.d-bgc-sunflower-dark
.d-bgc-sunflower
.d-bgc-sunflower-light
.d-bgc-sunflower-lighter

Wildberry

.d-bgc-wildberry-dark
.d-bgc-wildberry
.d-bgc-wildberry-light
.d-bgc-wildberry-lighter

Crimson

.d-bgc-crimson-dark
.d-bgc-crimson
.d-bgc-crimson-light
.d-bgc-crimson-lighter

Berry

.d-bgc-berry-dark
.d-bgc-berry
.d-bgc-berry-light
.d-bgc-berry-lighter

Rose

.d-bgc-rose-darker
.d-bgc-rose-dark
.d-bgc-rose
.d-bgc-rose-light

White / Transparent

.d-bgc-white
.d-bgc-transparent
.d-bgc-unset

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;
.d-bgc-blue .d-bgo0

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo10

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo25

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo50

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo75

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo90

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo95

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo99

The quick brown fox jumped over the lazy dog.

.d-bgc-blue .d-bgo100

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>