Colors

Text

The following text colors are available:

primary
info
danger
success
warning
default
secondary
grey
blue
green
orange
purple
pink
brown
yellow
dark
white

html

<span class="text-primary"> Hello! </span>

👉 You can modify their values, add new colors or remove a color by modifying $text-colors in scss/_variables.scss

Darker and Lighter

You can lighten or darken them using the following variations:

d1 to d4 for darker colors
m1 to m3 for medium colors
l1 to l5 for lighter colors

html

<span class="text-primary-d3"> Darker </span>
<span class="text-primary-m2"> Medium Light </span>
<span class="text-primary-l4"> Very Light </span>

👉 You can change the number of light/dark/medium colors and their intensity (lightness/darkness) in scss/_colors-text.scss and scss/_functions.scss

In _colors-text.scss change $dark-text-color-count etc for number of available light or dark variations
In _functions.scss Change values of $dark-text-color-contrasts or $medium-text-color-contrasts to increase or decrease lightness.

Inside Ace's SCSS files, you can set an element's color using the following function:

SCSS

.my-element1 {
  color: text-color('primary') //will be same color az text-primary
}
.my-element2 {
  color: text-color('success', 'd1') //will be same color az text-success-d1
}

Opacity

Dark and white text colors are also available with some transparency options:

text-white-tp1 to text-white-tp4 for transparent white text
text-dark-tp1 to text-dark-tp5 for transparent dark text
opacity-1 to opacity-5 for opacity

html

<span class="text-white-tp1"> White with transparency </span>
<span class="text-dark-tp2"> Dark with transparency </span>
<span class="text-danger opacity-2"> Danger with opacity </span>

More classes

.text-body applies body text color to an element.

Background

The following background colors are available with bgc- prefix:

primary
info
success
danger
warning
default
secondary
purple
pink
brown
yellow
dark
white
light
grey
lightgrey
blue
green
red
orange

html

<div class="bgc-success text-white"> Hello! </div>

👉 You can modify their values or add new colors or remove a color by modifying $background-colors in scss/_variables.scss

Darker, Lighter, Transparent

You can lighten or darken background colors using the following variations:

d1 to d3 for darker colors
m1 to m4 for medium colors
l1 to l5 for lighter colors
tp1 to tp4 for more transparency

html

<div class="bgc-primary-d2"> Darker </div>
<div class="bgc-primary-m2"> Medium Light </div>
<div class="bgc-primary-l3"> Very Light </div>
<div class="bgc-primary-tp2"> With transparency </div>

You can change the number of light/dark/medium colors and their intensity (lightness/darkness) in scss/_colors-background.scss and scss/_functions.scss

In _colors-background.scss change $light-color-count , $medium-color-count, etc for number of available light or dark variations
In _functions.scss Change values of $_lights, $_mediums , $_lightnesses to increase or decrease lightness.

Inside Ace's SCSS files, you can set an element's color using the following function:

SCSS

background-color: bgc-color('success', 'l1')

White and Dark Transparency

For white and dark colors you can use -tp1 to -tp10 for more transparency. For black there is also tp11

html

<div class="bgc-black-tp11"> Very Light Black Background </div>
<div class="bgc-white-tp5"> Transparent White Background </div>

Background on Hover

Light background colors can be applied on hover using bgc-h-* class name:

html

<div class="bgc-h-yellow-l2"> Light yellow background on hover </div>
<div class="bgc-h-blue-l1"> Light blue background on hover </div>
<div class="bgc-h-black-tp2"> Transparent Black Background on Hover</div>

Gradient

The following three gradient backgrounds are available:

bgc-dark-grad
bgc-light-grad
bgc-white-grad

html

<div class="bgc-dark-grad"> Dark gradient background </div>

Other

bg-none sets background image value to none
bgc-current sets background color to current text color
brc-current sets border color to current text color
brc-inherit inherits border color from parent
bgc-current inherits background color from parent

Custom colors

You can have custom background colors for an element by using existing classes:

html

<div class="bgc-blue pos-rel">
    <div class="bgc-purple-tp4 opacity-4 position-tl h-100 w-100">
        <!-- An empty purple overlay element with `position: absolute` on `top:0; left: 0;` and `width: 100%; height: 100%` -->
        <!-- It has transparency and mixes with background (blue) color to make a new color -->
    </div>

    <div class="pos-rel">
        <!-- Content inside a `.pos-rel` element to appear above overlay -->
    </div>
</div>

Border

Border colors are similar to background colors but the prefix is brc- (short for border-color).
For example:

html

<div class="brc-grey-m4 border-1"> Lighter Grey Border </div>
<div class="brc-danger-tp3 border-t-2"> Transparent Danger Border on Top (2px) </div>

Border on Hover

Medium border colors can be applied on hover using brc-h-* class name:

html

<div class="border-1 brc-h-yellow-m2"> Medium light yellow border color on hover </div>
<div class="border-t-3 brc-h-blue-m1"> Medium 3px top blue border color on hover </div>