Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 10056

8.1.1.1 Background Color Tint

Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.
ClassesEffect
.bg_(color)-0, .bg_(color)pure color
.bg_(color)-1color with 15% white mixed in
.bg_(color)-2color with 37% white mixed in
.bg_(color)-3color with 60% white mixed in
.bg_(color)-4color with 78% white mixed in
.bg_(color)-5color with 90% white mixed in
.bg_(color)-n1color with 10% black mixed in
.bg_(color)-n2color with 25% black mixed in
.bg_(color)-n3color with 45% black mixed in
.bg_(color)-n4color with 58% black mixed in
.bg_(color)-n5color with 75% black mixed in

Example s

bg_primary

background using primary color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_secondary

background using secondary color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_shade

background using shade color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_alert

background using alert color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_warning

background using warning color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_success

background using success color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_info

background using info color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black

bg_highlight

background using highlight color

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black
<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="[modifier class]-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="[modifier class]-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="[modifier class]-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="[modifier class]-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="[modifier class]-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="[modifier class]-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="[modifier class]-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="[modifier class]-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="[modifier class]-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="[modifier class]-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="[modifier class]-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>
Copy Code