Color utilities

Overview (anchor)

The color utilities depend on the associated color variable tokens being included. The text colors used for the backgrounds and gradients have been tested using axe Devtools for sufficient contrast-ratios so will require re-testing if the colors are customized. For demonstrative purposes only the blue utilities are shown below.

Background colors (anchor)

Each color can be included as a single background utility class for the base primary color only:

<div class="bg-blue">.bg-blue</div>

Or utility classes for the entire palette can be included (see the color variables page to view all the colors):

<div class="bg-blue-1">.bg-blue-1</div>
<div class="bg-blue-2">.bg-blue-2</div>
<div class="bg-blue-3">.bg-blue-3</div>
<div class="bg-blue-4">.bg-blue-4</div>
<div class="bg-blue-5">.bg-blue-5</div>
<div class="bg-blue-6">.bg-blue-6</div>
<div class="bg-blue-7">.bg-blue-7</div>
<div class="bg-blue-8">.bg-blue-8</div>
<div class="bg-blue-9">.bg-blue-9</div>
<div class="bg-blue-10">.bg-blue-10</div>
<div class="bg-blue-11">.bg-blue-11</div>

Border colors (anchor)

Includes the border-color values only, the border utilities used in the examples are included separately.

Each color can be included as a single border utility class for the base primary color only:

<div class="border bd-blue">blue</div>

Or utility classes for the entire palette can be included:

<div class="border bd-blue-1">blue-1</div>
<div class="border bd-blue-2">blue-2</div>
<div class="border bd-blue-3">blue-3</div>
<div class="border bd-blue-4">blue-4</div>
<div class="border bd-blue-5">blue-5</div>
<div class="border bd-blue-6">blue-6/blue</div>
<div class="border bd-blue-7">blue-7</div>
<div class="border bd-blue-8">blue-8</div>
<div class="border bd-blue-9">blue-9</div>
<div class="border bd-blue-10">blue-10</div>
<div class="border bd-blue-11">blue-11</div>

NOTE: Future changes The border color utility names will eventually be updated to reflect to v1.5.0 name change of the border utilities from .bd to .border.

Gradient (anchor)

A solid linear three step gradient utility class for each base color includes text color values tested using axe Devtools for sufficient color contrast-ratios.

Alternatively the gradients utilities provide overlay gradient classes that can be used with any background color:

<div class="bg-blue-1 gradient-heavy">.bg-blue-1</div>
<div class="bg-blue-2 gradient-heavy">.bg-blue-2</div>
<div class="bg-blue-3 gradient-heavy">.bg-blue-3</div>
<div class="bg-blue-4 gradient-heavy">.bg-blue-4</div>
<div class="bg-blue-5 gradient">.bg-blue-5</div>
<div class="bg-blue-6 gradient">.bg-blue/.bg-blue-6</div>
<div class="bg-blue-7 gradient">.bg-blue-7</div>
<div class="bg-blue-8 gradient-light">.bg-blue-8</div>
<div class="bg-blue-9 gradient-light">.bg-blue-9</div>
<div class="bg-blue-10 gradient-light">.bg-blue-10</div>
<div class="bg-blue-11 gradient-light">.bg-blue-11</div>

Text colors (anchor)

Text utilities for the individual palette colors (mono backgrounds used for demo only):

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below. The color utilities rely on the associated color variables being enabled to function as demonstrated.

The utilities can be included individually:

@use "stylemods/scss" as *;
@include blue-variables-css;
@include backgrounds-blue-css;
@include borders-blue-css;
@include gradient-blue-css;
@include text-blue-css;

Or as a group using a single mixin:

@use "stylemods/scss" as *;
@include blue-variables-css;
@include blue-utilities-css;

You can also include all the color utilities and variable tokens using a single mixin for each:

@use "stylemods/scss" as *;
@include all-primary-colors-variables-css;
@include all-primary-utilities-css;

See the using modules page for more information.

Using the framework (anchor)

Enable the required color tokens as shown below, enable the associated component or utility as documented on the individual style pages (see links above).

Using the recommended custom setup enable the styles in an overrides document:

@use "stylemods/scss/configuration" as *;
$enable-blue-variables:     true;
$enable-blue-backgrounds:   true;
$enable-blue-borders:       true;
$enable-blue-gradient:      true;
$enable-blue-text:          true;

If required you can also enable all utilities for specific colors:

@use "stylemods/scss/configuration" as *;
$enable-blue-variables:     true;
$enable-blue-utilities:     true;

Include the overrides and the framework styles with your custom document for compiling the framework:

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The color utilities, variables and modifiers are all compiled from the same individual documents for each primary color, you can view the source code for each from the latest release (v1.5.0) via the Github links below.

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.