Color utilities

Basic background, border, gradient and text color utilities for the color variables.

Overview (anchor)

The color utilities are all optional, they use the color variable tokens so if used also require the variables to be included. The background colors and gradient utilities include the background and text color values, the default colors used have all been tested using axe Devtools for sufficient contrast-ratios so will require re-testing if the default colors are customized.

Background colors (anchor)

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

.bg-blue

<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):

.bg-blue-1

.bg-blue-2

.bg-blue-3

.bg-blue-4

.bg-blue-5

.bg-blue-6

.bg-blue-7

.bg-blue-8

.bg-blue-9

.bg-blue-10

.bg-blue-11

Example HTML

<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)

The border colors only include the border-color values, the optional border utilities included with StyleMods can be used (as shown below with the .bd class) but as modifier classes they can be used with any other custom border styles or utilities.

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

.bd-blue

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

Or utility classes for the entire palette can be included:

.bd-blue-1

.bd-blue-2

.bd-blue-3

.bd-blue-4

.bd-blue-5

.bd-blue/.bd-blue-6

.bd-blue-7

.bd-blue-8

.bd-blue-9

.bd-blue-10

.bd-blue-11

Example HTML

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

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.

.gradient-blue

No gradient

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

.bg-blue-1

.bg-blue-2

.bg-blue-3

.bg-blue-4

.bg-blue-5

.bg-blue/.bg-blue-6

.bg-blue-7

.bg-blue-8

.bg-blue-9

.bg-blue-10

.bg-blue-11

Example HTML

<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):

.text-blue-1

.text-blue-2

.text-blue-3

.text-blue-4

.text-blue-5

.text-blue-6

.text-blue-7

.text-blue-8

.text-blue-9

.text-blue-10

.text-blue-11

Using the modules (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:

custom.scss

@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:

custom.scss

@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:

custom.scss

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

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

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:

overrides.scss

@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:

overrides.scss

@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:

custom.scss

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

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and framework use the same methods for customizing. For demonstrative purposes only the source code for blue is included but all the individual primary color documents use the same method.

blue.scss

// ---------------------------------------------------------- 
// Blue
// ----------------------------------------------------------
$blue:                #005ce6 !default;
$blue-1:              color-mix(in srgb, var(--blue) 28%, #fff) !default;
$blue-2:              color-mix(in srgb, var(--blue) 41%, #fff) !default;
$blue-3:              color-mix(in srgb, var(--blue) 58%, #fff) !default;
$blue-4:              color-mix(in srgb, var(--blue) 72%, #fff) !default;
$blue-5:              color-mix(in srgb, var(--blue) 87%, #fff) !default;
$blue-6:              var(--blue) !default;
$blue-7:              color-mix(in srgb, var(--blue) 85%, #000) !default;
$blue-8:              color-mix(in srgb, var(--blue) 72%, #000) !default;
$blue-9:              color-mix(in srgb, var(--blue) 60%, #000) !default;
$blue-10:             color-mix(in srgb, var(--blue) 50%, #000) !default;
$blue-11:             color-mix(in srgb, var(--blue) 44%, #000) !default;

$blue-tokens:         ':where(html)' !default;

$blue-bg-text:        #fff !default;
$blue-bg:             var(--blue) !default;
$blue-bg-dark:        var(--blue-7) !default;
$blue-bg-light:       var(--blue-5) !default;

$blue-gradient:       linear-gradient(180deg, $blue-bg-light, $blue-bg, $blue-bg-dark) !default;

$blue-color-values:
  "blue"    $blue #fff,
  "blue-1"  $blue-1 #000,
  "blue-2"  $blue-2 #000,
  "blue-3"  $blue-3 #000,
  "blue-4"  $blue-4 #000,
  "blue-5"  $blue-5 #fff,
  "blue-6"  $blue-6 #fff,
  "blue-7"  $blue-7 #fff,
  "blue-8"  $blue-8 #fff,
  "blue-9"  $blue-9 #fff,
  "blue-10" $blue-10 #fff,
  "blue-11" $blue-11 #fff,
!default;

mixins/blue.scss

// ---------------------------------------------------------- 
// Blue mixins
// ----------------------------------------------------------
@use "modifiers" as *;
@use "../blue" as *;

// ---------------------------------------------------------- 
// Variables
// ----------------------------------------------------------
@mixin blue-variables {
  @each $name, $color in $blue-color-values {
    --#{$name}: #{$color};
  }
}

@mixin blue-variables-css {
  #{$blue-tokens} {
    @include blue-variables;
  }
}

// ---------------------------------------------------------- 
// Utilities
// ----------------------------------------------------------
@mixin backgrounds-blue-css {
  @each $name, $color, $text in $blue-color-values {
    .bg-#{$name} {
      color: $text;
      background-color: var(--#{$name});
    }
  }
}

@mixin borders-blue-css {
  @each $name, $color in $blue-color-values {
    .bd-#{$name} {
      border-color: var(--#{$name});
    }
  }
}

@mixin gradient-blue-css {
  .gradient-blue {
    color: $blue-bg-text;
    background-image: $blue-gradient;
  }
}

@mixin text-blue-css {
  @each $name, $color in $blue-color-values {
    .text-#{$name} {
      color: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Icons modifiers
// ----------------------------------------------------------
@mixin icons-blue-css {
  @each $name, $color in $blue-color-values {
    .ico-#{$name} {
      --ico: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Component modifiers
// ----------------------------------------------------------
@mixin accordion-blue-css {
  .accordion-blue {
    @include accordion-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light);
  }
}

@mixin alert-blue-css {
  .alert-blue {
    @include alert-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

@mixin badge-blue-css {
  .badge-blue {
    @include badge-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

@mixin button-blue-css {
  .btn-blue {
    @include button-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  }
}

@mixin card-blue-css {
  .card-blue {
    @include card-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  }
}

@mixin dialog-blue-css {
  .dialog-blue {
    @include dialog-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  } 
}

@mixin dropdown-blue-css {
  .dropdown-blue {
    @include dropdown-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light, $blue-bg-light);
  } 
}

@mixin list-group-blue-css {
  .list-group-blue {
    @include list-group-color-values($blue-bg-text, $blue-bg, $blue-bg-dark, $blue-bg-light);
  }
}

@mixin popover-blue-css {
  .popover-blue {
    @include popover-color-values($blue-bg-text, $blue-bg, $blue-bg-light);
  }
}

// ---------------------------------------------------------- 
// Combined mixins
// ----------------------------------------------------------
@mixin blue-utilities-css {
  @include backgrounds-blue-css;
  @include borders-blue-css;
  @include gradient-blue-css;
  @include text-blue-css;
}

@mixin blue-modifiers-css {
  @include icons-blue-css;
  @include accordion-blue-css;
  @include alert-blue-css;
  @include badge-blue-css;
  @include button-blue-css;
  @include card-blue-css;
  @include dialog-blue-css;
  @include dropdown-blue-css;
  @include list-group-blue-css;
  @include popover-blue-css;
}

@mixin blue-module-css {
  @include blue-variables-css;
  @include blue-utilities-css;
  @include blue-modifiers-css;
}

To view the source code for all the colors please see the color directory of the StyleMods Github repository.