Aside from the main brand colors, ACSS provides you with the following contextual colors:
- Warning (alert, caution)
- Info (general information)
- Success (safe, correct)
- Danger (error, wrong)
These follow the contextual color standard set by Bootstrap many years ago, providing you with colors that indicate a specific "notice" for the user and that [typically] have nothing to do with a website's brand palette.
Configuring Contextual Colors
Contextual colors are preconfigured, but you can easily adjust them via the Palette tab of the ACSS dashboard:
Contextual Color Shades
Along with the main color value for each contextual color, ACSS also gives you access to the following shade variations:
- Light
- Dark
- Hover
These options give you tremendous flexibility over how you use contextual colors in your design:
- Light background with dark text
- Dark background with light text
- Main color background with light or dark text
- Any color background with light or dark border
- Link with contextual hover
Contextual Color Classes
The following groups of classes have access to the contextual colors by default:
.text--.bg--.link--
The class naming convention is the same as with all other colors in ACSS. Append {color} or {color-shade} to the above classes on the desired element (e.g. .text--warning-light)
Contextual Color Variables
Along with classes, you also get access to contextual color variables and contextual color partial variables. These variables allow you to reference contextual colors or parts of contextual colors when creating custom classes or within custom CSS.
The naming conventions for contextual colors are the same as all the other colors in the ACSS system: var(--{name}) and var(--{name}-{shade}.
The following partials are available for each contextual color:
{color}-hex{color}-hsl{color}-h{color}-s{color}-l{color}-rgb{color}-r{color}-g{color}-b
These partials remove all limitations from the contextual color system, allowing you to make custom shades, transparencies, hovers, and more.