Color utilities

Color modifier mixins designed to extend StyleMods styles, components and utilities.

Overview (anchor)

Integrated modules that leverage the CSS variables within StyleMods styles and the color variable tokens to create color modifiers for the following components and utilities.

Examples (anchor)

For demonstrative purposes only the blue modifiers have been compiled.

Accordions (anchor)

Modifier classes for the optional Accordions component.

Summary

Body text

Summary

Body text

Summary

Body text

Example HTML 
<div class="accordion accordion-blue mb-3">
<details name="accordion-blue-demo" open>
<summary>Summary</summary>
<div>
<p>Body text</p>
</div>
</details>

<details name="accordion-blue-demo">
<summary>Summary</summary>
<div>
<p>Body text</p>
</div>
</details>

<details name="accordion-blue-demo">
<summary>Summary</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>

Alerts (anchor)

Modifier classes for the optional Alerts component.

Basic alert!

Dismissable alert!
Example HTML 
<div class="alert alert-blue">
<p>Basic alert!</p>
</div>

<dialog class="alert alert-blue" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>

Backgrounds (anchor)

Modifier classes for the optional Backgrounds utilities.

Blue background
Example HTML 
<div class="bg bg-blue p-3 mb-3">Blue background</div>

Background utility classes for the entire palette. These are not modifier classes so work independently.

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

Badges (anchor)

Modifier classes for the optional Badges component.

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New

Paragraph New

Example HTML 
<h1>Heading 1 <span class="badge badge-blue">New</span></h1>
<h2>Heading 2 <span class="badge badge-blue">New</span></h2>
<h3>Heading 3 <span class="badge badge-blue">New</span></h3>
<h4>Heading 4 <span class="badge badge-blue">New</span></h4>
<h5>Heading 5 <span class="badge badge-blue">New</span></h5>
<h6>Heading 6 <span class="badge badge-blue">New</span></h6>
<p>Paragraph <span class="badge badge-blue">New</span><p>
<button class="btn-blue">Button <span class="badge badge-blue">New</span></button>

Borders (anchor)

Modifier classes for border colors, can be used with the optional Borders utilities and/or any general border styles.

.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

Buttons (anchor)

Modifier classes for the forms and buttons content styles and optional Buttons components.

Link button

Example HTML 
<button class="btn-blue">HTML button</button> 
<a href="#" class="btn btn-blue">Link button</a>

Cards (anchor)

Modifier classes for the optional Cards component.

Card title

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Link to action

Link card

The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.

Link to action
Example HTML 
<div class="card card-blue">
  <h2>Card title</h2>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
</div>

<div class="card-link card-blue">
  <h2>Link card</h2>
  <p>The quick brown fox jumps over the lazy dog followed by the five boxing wizards jumping quickly.</p>
  <a href="#">Link to action</a>
</div>

Dialogs (anchor)

Modifier classes for the optional Dialogs components.

Dialog

The quick brown fox jumps over the lazy dog.
Example HTML 
<button data-dialog="#dialog-light-dismiss" class="btn-blue mb-3">Dialog (with light-dismiss)</button>
<dialog id="dialog-light-dismiss" class="dialog-blue">
  <h2>Dialog</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog btn-blue">Close</button>
  <div class="close-dialog"></div>
</dialog>

Modifier classes for the optional Dropdowns component.

Default
Action Another action Longer action text
Example HTML 
<details class="dropdown-blue mb-3" name="dropdown-demo">
<summary class="dropdown-btn">Default</summary>
<div class="dropdown">
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Longer action text</a>
</div>
<div class="close-dropdown"></div>
</details>

List groups (anchor)

Modifier classes for the optional List groups component.

  1. List item
  2. List item
  3. List item
Term
Description
Description
  1. List item link
  2. List item link
  3. List item link
Term
Description link
Description link
Example HTML 
<ul class="list-group list-group-blue">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol class="list-group list-group-blue">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

<dl class="list-group list-group-blue">
<dt>Term</dt>
<dd>Description</dd>
<dd>Description</dd>
</dl>

<ul class="list-links list-group-blue">
<li><a href="#">List item link</a></li>
<li><a href="#">List item link</a></li>
<li><a href="#">List item link</a></li>
</ul>

<ol class="list-links list-group-blue">
<li><a href="#">List item link</a></li>
<li><a href="#">List item link</a></li>
<li><a href="#">List item link</a></li>
</ol>

<dl class="list-links list-group-blue">
<dt>Term</dt>
<dd><a href="#">Description link</a></dd>
<dd><a href="#">Description link</a></dd>
</dl>

Popovers (anchor)

Modifier classes for the optional Popovers components.

The quick brown fox jumps over the lazy dog.

Example HTML 
<button popovertarget="popover-blue" class="btn-blue mb-3">Popover</button>
<div class="popover-blue" id="popover-blue" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

Using the modules (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below. As the color utilities are modifier classes they rely on the associated color variables and module (see links above) both being enabled to function, so if a blue accordion was required the following would need to be included:

custom.scss 
@use "stylemods/scss" as *;
@include blue-variables-css;
@include accordions-css;
@include accordion-blue-css;

The color utilities can be included individually:

custom.scss 
@use "stylemods/scss" as *;
@include accordion-blue-css;
@include alert-blue-css;
@include background-blue-css;
@include badge-blue-css;
@include button-blue-css;
@include card-blue-css;
@include dialog-blue-css;
@include list-group-blue-css;
@include popover-blue-css;

If required you can include all the utilities for a specific color together in a single mixin:

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

You can also include all the utilities for all the colors with a single mixin:

custom.scss 
@use "stylemods/scss" as *;
@include all-color-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.

Combined variable token and utility modifiers (anchor)

You can also include both the variable tokens and all the modifier utilities for each color with a single mixin

custom.scss 
@use "stylemods/scss" as *;
@include blue-module-css;
@include red-module-css;
@include green-module-css;

Or again the entire color palette can be included with a single mixin:

custom.scss 
@use "stylemods/scss" as *;
@include all-color-modules-css;

Whilst easy to use these options are useful primarily for prototyping as the variables and the utilities are included together so can't be compiled separately in your styles, including not being able to compile them in different cascade layers.

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-buttons:   true;
$enable-red-buttons:    true;
$enable-green-buttons:  true;

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

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-blue-utilities:   true !default;
$enable-red-utilities:    true !default;
$enable-green-utilities:  true !default;

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.

Creating custom modifiers (anchor)

New in v1.3.1

The color modifier classes are now generated by mixins as demonstrated below with the badge utilities:

color-mixins.scss (badge values) 
@mixin badge-color-values($text-color, $background, $border) {
  --badge-text: #{$text-color};
  --ico: #{$text-color};
  --badge-bg: #{$background};
  --badge-bd-color: #{$border};
}

Using these mixins you can now create custom modifier classes using your own colors and use them instead of the default modifiers, and if required also naming them as preferred:

custom.scss 
@use "stylemods/scss" as *;
@include badges-css;
.badge-primary {
  @include badge-color-values(#fff, blue, darkblue);
}
.badge-danger {
  @include badge-color-values(#fff, red, darkred);
}

If compiling using the framework you can still enable the components/utilities in your configuration and setup custom modifiers in a separate document to include with your framwork for compiling:

custom-color-utilities.scss 
@use "stylemods/scss" as *;
.badge-primary {
  @include badge-color-values(#fff, blue, darkblue);
}
.badge-danger {
  @include badge-color-values(#fff, red, darkred);
}
custom-framework.scss 
@use "framework-overrides";
@use "stylemods/scss/stylemods";
@use "custom-color-utilities";

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.

color-mixins.scss 
// ---------------------------------------------------------- 
// Color mixins
// ----------------------------------------------------------
@mixin accordion-color-values($text-color, $background, $focus, $border) {
  --summary-text: #{$text-color};
  --ico: #{$text-color};
  --summary-bg: #{$background};
  --summary-focus: #{$focus};
  --accordion-bd-color: #{$border};
}

@mixin alert-color-values($text-color, $background, $border) {
  --alert-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --alert-bg: #{$background};
  --alert-bd-color: #{$border};
}

@mixin background-color-values($text-color, $background) {
  --bg-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --bg-col: #{$background};
}

@mixin badge-color-values($text-color, $background, $border) {
  --badge-text: #{$text-color};
  --ico: #{$text-color};
  --badge-bg: #{$background};
  --badge-bd-color: #{$border};
}

@mixin button-color-values($text-color, $background, $hover, $focus, $border) {
  --btn-text: #{$text-color};
  --ico: #{$text-color};
  --btn-bg: #{$background};
  --btn-bd-color: #{$border};
  --btn-hover: #{$hover};
  --focus-color: #{$focus};
}

@mixin card-color-values($text-color, $background, $hover, $focus, $border) {
  --card-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --card-bg: #{$background};
  --card-text-hover: #{$text-color};
  --card-hover: #{$hover};
  --card-bd-color: #{$border};
  --card-focus-color: #{$focus};
  --card-title-bg: #{$background};
}

@mixin dialog-color-values($text-color, $background, $border) {
  --dialog-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --dialog-bg: #{$background};
  --dialog-bd-color: #{$border};
  --dialog-title-bg: #{$background};
}

@mixin dropdown-color-values($text-color, $background, $hover, $focus, $border) {
  --dropdown-text: #{$text-color};
  --dropdown-btn-text: #{$text-color};
  --dropdown-ico: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --dropdown-bg: #{$background};
  --dropdown-btn-bg: #{$background};
  --dropdown-link-hover: #{$hover};
  --dropdown-btn-hover: #{$hover};
  --dropdown-bd-color: #{$border};
  --dropdown-focus-color: #{$focus};
}

@mixin list-group-color-values($text-color, $background, $hover, $border) {
  --list-group-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --list-group-bg: #{$background};
  --list-group-dt-bg: #{$background};
  --list-group-hover: #{$hover};
  --list-group-bd-color: #{$border};
}

@mixin popover-color-values($text-color, $background, $border) {
  --popover-text: #{$text-color};
  --ico: #{$text-color};
  --link: #{$text-color};
  --visited: #{$text-color};
  --hover: #{$text-color};
  --popover-bg: #{$background};
  --popover-bd-color: #{$border};
}
blue.scss 
// ---------------------------------------------------------- 
// Blue utilities
// ----------------------------------------------------------
@use "color-mixins" as *;

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

// Utility mixins
@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 background-blue-css {
  .bg-blue {
    @include background-color-values($blue-bg-text, $blue-bg);
  }
}

@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 accordion-blue-css;
  @include alert-blue-css;
  @include background-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;
}

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