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

The utilities are modifier classes only so the examples below all assume the inclusion of the associated style modules shown above (e.g. accordions, alerts). The individual and grouped options also assume the color variable tokens are included, see using the modules on the color variables page for information.

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) required. For demonstrative purposes only the blue utilities are shown but all the colors follow the same naming convention.

Each of the modifier 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;

Or grouped together in a single mixin:

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

If required you can include the utilities for the entire color palette with a single mixin:

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

Variables and utilities (anchor)

The option for including both the color variable tokens and the utilities is also included:

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;

Customizing on the color variables page and the customizing page both provided information about using the Sass variables to customize the colors. Alternatively there's also no reason why the modifiers can't be adapted to using a different set of color variable tokens if preferred or required.

Source code (anchor)

The individual primary color files include both the color utilities and color variables. For convenience only the blue.scss is included to demonstrate but each individual color follows the same method.

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 each individual color please see the color directory of the StyleMods Github repository.