component

Color Helpers

The following color helper classes are bonded to it respective color variable available at the customize color section. You can use your custom colors pallete for interact with the CSS properties color and background-color using their respective prefix: is-color-<color> for the color property and has-background-<color> when you want to set a background-color to an element.

Contrast Colors

Color Contrast
150 140 130 120 110 100 90 80 70 60 50 40 30 20 10 5
Primary
150 140 130 120 110 100 90 80 70 60 50 40 30 20 10 5
Class Color
<prefix>-contrast-150
<prefix>-contrast-140
<prefix>-contrast-130
<prefix>-contrast-120
<prefix>-contrast-110
<prefix>-contrast-100
<prefix>-contrast-90
<prefix>-contrast-80
<prefix>-contrast-70
<prefix>-contrast-60
<prefix>-contrast-50
<prefix>-contrast-40
<prefix>-contrast-30
<prefix>-contrast-20
<prefix>-contrast-10
<prefix>-contrast-5

Primary Colors

Class Color
<prefix>-primary-dark
<prefix>-primary
<prefix>-primary-light
<prefix>-primary-lighter

Secondary Colors

Class Color
<prefix>-secondary-dark
<prefix>-secondary
<prefix>-secondary-light
<prefix>-secondary-lighter

Accent Colors

Class Color
<prefix>-accent-dark
<prefix>-accent
<prefix>-accent-light
<prefix>-accent-lighter

Danger Colors

Class Color
<prefix>-danger
<prefix>-danger-light
<prefix>-danger-background

Warning Colors

Class Color
<prefix>-warning
<prefix>-warning-light
<prefix>-warning-background

Success Colors

Class Color
<prefix>-success
<prefix>-success-light
<prefix>-success-background

Info Colors

Class Color
<prefix>-info
<prefix>-info-light
<prefix>-info-background