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)

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>

See Accordions for more information.

Alerts (anchor)

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>

See Alerts for more information.

Backgrounds (anchor)

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

See Backgrounds for more information.

Badges (anchor)

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>

See Badges for more information.

Buttons (anchor)

Link button

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

The button color modifiers will work on both the buttons included with the forms and buttons content styles as well as with the button component utilities.

Cards (anchor)

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>

See Cards for more information.

Dialogs (anchor)

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>

See Dialogs for more information.

List groups (anchor)

  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>

See List groups for more information.

Popovers (anchor)

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>

See Popovers for more information.

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 detailed under using the framework on the color variables page, enable the associated component or utility as documented on the individual style pages (see links above).

Enable color utilities individually using overrides or in the configuration.scss document:

overrides.scss 
@use 'stylemods/scss/configuration' with (
  $enable-blue-buttons: true,
  $enable-red-buttons: true,
  $enable-green-buttons: true,
);
configuration.scss 
$enable-blue-buttons:  true !default;
$enable-red-buttons:   true !default;
$enable-green-buttons: true !default;

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

overrides.scss 
@use 'stylemods/scss/configuration' with (
  $enable-blue-utilities: true,
  $enable-red-utilities: true,
  $enable-green-utilities: true,
);
configuration.scss 
$enable-blue-utilities: true !default;
$enable-red-utilities: true !default;
$enable-green-utilities: true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and framework use the same methods for customizing. The primary colors source code includes the color utilities and color variables, for demonstrative purposes only the blue source code is included below.

blue.scss 
// ---------------------------------------------------------- 
// Blue
// ----------------------------------------------------------
// Variable colors
$blue:      #0066ff !default;
$blue-1:    color-mix(in srgb, var(--blue) 40%, white) !default;
$blue-2:    color-mix(in srgb, var(--blue) 50%, white) !default;
$blue-3:    color-mix(in srgb, var(--blue) 60%, white) !default;
$blue-4:    color-mix(in srgb, var(--blue) 70%, white) !default;
$blue-5:    color-mix(in srgb, var(--blue) 80%, white) !default;
$blue-6:    var(--blue) !default;  
$blue-7:    color-mix(in srgb, var(--blue) 80%, black) !default;
$blue-8:    color-mix(in srgb, var(--blue) 70%, black) !default;
$blue-9:    color-mix(in srgb, var(--blue) 60%, black) !default;
$blue-10:   color-mix(in srgb, var(--blue) 50%, black) !default;
$blue-11:   color-mix(in srgb, var(--blue) 44%, black) !default;

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

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

// Variables tokens map
$blue-token-values: (
  "blue": $blue,
  "blue-1": $blue-1,
  "blue-2": $blue-2,
  "blue-3": $blue-3,
  "blue-4": $blue-4,
  "blue-5": $blue-5,
  "blue-6": $blue-6,
  "blue-7": $blue-7,
  "blue-8": $blue-8,
  "blue-9": $blue-9,
  "blue-10": $blue-10,
  "blue-11": $blue-11,
) !default;

// Utility maps
$accordion-blue: (
  "summary-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "summary-bg": $blue-bg,
  "summary-focus": $blue-bg-dark,
  "accordion-bd-color": $blue-bg-light,
) !default;

$alert-blue: (
  "alert-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "alert-bg": $blue-bg,
  "alert-bd-color": $blue-bg-light,
) !default;

$background-blue: (
  "bg-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "bg-col": $blue-bg,
) !default;

$badge-blue: (
  "badge-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "badge-bg": $blue-bg,
  "badge-bd-color": $blue-bg-light,
) !default;

$button-blue: (
  "btn-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "btn-bg": $blue-bg,
  "btn-bd-color": $blue-bg-light,
  "btn-hover": $blue-bg-dark,
  "focus-color": $blue-bg-light,
) !default;

$card-blue: (
  "card-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "card-bg": $blue-bg,
  "card-text-hover": $blue-bg-text,
  "card-hover": $blue-bg-dark,
  "card-bd-color": $blue-bg-light,
  "card-focus-color": $blue-bg-light,
  "card-title-bg": $blue-bg,
) !default;

$dialog-blue: (
  "dialog-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "dialog-bg": $blue-bg,
  "dialog-bd-color": $blue-bg-light,
  "dialog-title-bg": $blue-bg,
) !default;

$dropdown-blue: (
  "dropdown-text": $blue-bg-text,
  "dropdown-btn-text": $blue-bg-text,
  "dropdown-ico": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "dropdown-bg": $blue-bg,
  "dropdown-btn-bg": $blue-bg,
  "dropdown-link-hover": $blue-bg-dark,
  "dropdown-btn-hover": $blue-bg-dark,
  "dropdown-bd-color": $blue-bg-light,
  "dropdown-focus-color": $blue-bg-light,
) !default;

$list-group-blue: (
  "list-group-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "list-group-bg": $blue-bg,
  "list-group-dt-bg": $blue-bg,
  "list-group-hover": $blue-bg-dark,
  "list-group-bd-color": $blue-bg-light,
) !default;

$popover-blue: (
  "popover-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "popover-bg": $blue-bg,
  "popover-bd-color": $blue-bg-light,
) !default;

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

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

// Utility mixins
@mixin accordion-blue-css {
  .accordion-blue {
    @each $name, $value in $accordion-blue {
      --#{$name}: #{$value};
    }  
  }
}

@mixin alert-blue-css {
  .alert-blue {
    @each $name, $value in $alert-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin background-blue-css {
  .bg-blue {
    @each $name, $value in $background-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin badge-blue-css {
  .badge-blue {
    @each $name, $value in $badge-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin button-blue-css {
  .btn-blue {
    @each $name, $value in $button-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin card-blue-css {
  .card-blue {
    @each $name, $value in $card-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin dialog-blue-css {
  .dialog-blue {
    @each $name, $value in $dialog-blue {
      --#{$name}: #{$value};
    }
  } 
}

@mixin dropdown-blue-css {
  .dropdown-blue {
    @each $name, $value in $dropdown-blue {
      --#{$name}: #{$value};
    }
  } 
}

@mixin list-group-blue-css {
  .list-group-blue {
    @each $name, $value in $list-group-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin popover-blue-css {
  .popover-blue {
    @each $name, $value in $popover-blue {
      --#{$name}: #{$value};
    }
  }
}

// Combined mixins
@mixin blue-module-css {
  @include blue-variables-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;
}

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