Contextual color
We have a series of colors that are used by default and you can use these helper classes for most components
| State | Postfix |
| Primary | *-primary |
| Secondary | *-secondary |
| Success | *-success |
| Info | *-info |
| Warning | *-warning |
| Danger | *-danger |
| Light | *-light |
| Dark | *-dark |
For each color has its functionality in application as main color of application (primary) or warnings to user (warning)
Button examples
Apply color classes to any component such as button
Contrast level
You can change color or background contrast by applying these helper classes
| Level | Preview | Class |
| Level 1 | Text Level 1 BG Level 1 | .text-level-1, .bg-level-1 |
| Level 2 | Text Level 2 BG Level 2 | .text-level-2, .bg-level-2 |
| Level 3 | Text Level 3 BG Level 3 | .text-level-3, .bg-level-3 |
| Level 4 | Text Level 4 BG Level 4 | .text-level-4, .bg-level-4 |
Examples
Text
Use text-{color} to applying contextual color to text
Background
Use bg-{color} to applying contextual color to background