Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Accessibility
When using .text-* and .bg-* utilities, contrasts are locked to ensure they meet WCAG 2.0 accessibility standards for color contrast, by defining color and background-color altogether. Please refer to our theme colors to have a full preview of Boosted color palette’s reached WCAG level.
Colors
Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.
.text-primary
.text-secondary
.text-light
.text-body
.text-muted
.text-white
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-light">.text-light</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.
Sass
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Variables
Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.
Boosted supersedes Bootstrap color variables with Orange brand color.
// Boosted mod
//// Core colors
$accessible-orange: #f16e00;
$brand-orange: #ff7900;
//// Functional colors
$functional-green: #32c832;
$functional-blue: #527edb;
$functional-yellow: #fc0;
$functional-red: #cd3c14;
//// Supporting colors
$supporting-blue: #4bb4e6;
$supporting-yellow: #ffd200;
$supporting-green: #50be87;
$supporting-purple: #a885d8;
$supporting-pink: #ffb4e6;
$blue: $functional-blue;
$indigo: $supporting-purple;
$purple: $supporting-purple;
$pink: $supporting-pink;
$red: $functional-red;
$orange: $brand-orange;
$yellow: $functional-yellow;
$green: $functional-green;
$teal: $supporting-green;
$cyan: $supporting-blue;
$primary: $orange;
$secondary: $black;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $gray-500;
$dark: $black;
Grayscale colors are also available, but only a subset are used to generate any utilities.
$white: #fff;
$gray-100: #fafafa;
$gray-200: #f6f6f6;
$gray-300: #eee;
$gray-400: #ddd;
$gray-500: #ccc;
$gray-600: #999;
$gray-700: #666;
$gray-800: #595959;
$gray-900: #333;
$black: #000;
Map
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Utilities API
Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"color": (
property: color,
class: text,
values: (
"primary": $accessible-orange,
"light": $gray-500,
"white": $white,
"body": $body-color,
"muted": $text-muted,
"reset": inherit,
)
),