Components

## Color Utility

Convey meaning through color with a handful of color utility classes. This utilities to quickly style the text and background of any element.

#### Background Color

A set of solid background utilities classes. Use `.bg-{color}` classs in element to set background color.

##### Theme Color

primary
secondary
dark
gray
success
danger
warning
info

##### Theme Pale Color

primary
secondary
dark
gray
success
danger
warning
info

##### Theme Lighten Color

light
lighter
white

##### Additional Color

blue
azure
indigo
purple
pink
orange
teal

##### Additional Pale Color

blue
azure
indigo
purple
pink
orange
teal

Class Reference | Theme/Color
--- | ---
`.bg-{theme}` | primary | secondary | success | info | warning | danger | dark | gray
`.bg-{theme}-dim` | Use for pale/dim color and `{theme}` same as above
`.bg-{color}` | blue | azure | indigo | purple | pink | orange | teal
`.bg-{color}-dim` | Use for pale/dim color and `{color}` same as above
`.bg-light` | Use for light background
`.bg-lighter` | Use for extra light background
`.bg-white` | Use for white background
`.bg-transparent` | Use for transparent background

Uses Example

    <div class="bg-primary"> ... </div>
    <div class="bg-primary is-dim"> ... </div>

#### Gray & Dark Color

A set of shade color of gray and dark classes. Use `.bg-gray-{value}` classs in element to set background color.

100
200
300
400
500
600
700
800
900

Class Reference | Value
--- | ---
`.bg-gray-{value}` | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Uses Example

    <div class="bg-gray-200"> ... </div>

#### Text Color

A set of text color utilities classes. Use `.text-{theme|color}` classs in element to set text color.

Class Reference | Preview
--- | ---
`.text-primary` | Text in primary color
`.text-secondary` | Text in secondary color
`.text-success` | Text in success color
`.text-danger` | Text in danger color
`.text-warning` | Text in warning color
`.text-info` | Text in info color
`.text-body` | Text in body color
`.text-dark` | Text in dark color
`.text-base` | Text in base color
`.text-soft` | Text in soft color
`.text-black-50` | Text in black 50% color
`.text-light` | Text in light color
`.text-lighter` | Text in lighter color
`.text-white` | Text in white color
`.text-{theme}` `.text-{theme}-dim` | Use for text color & `-dim` user for pale color. `{theme}` use as `primary, secondary, success, info, warning, danger, dark, gray`
`.text-{color}` `.text-{color}-dim` | Use for text color & `-dim` user for pale color. `{color}` use as `blue, azure, indigo, purple, pink, orange, teal`

Uses Example

    <p class="text-primary"> ... </p>
    <span class="text-primary"> ... </span>