Color utilities

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

Examples (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.

Accordions View docs

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 View docs

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 View docs

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

Badges View docs

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>

Buttons View docs

Link button

Example HTML

The <button> uses the variables from the forms and buttons styles, the link button uses the button utility class from the view docs link above.

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

Cards View docs

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="#2">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="#3">Link to action</a>
</div>

Dialogs View docs

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>

List groups View docs

  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 View docs

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

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) as demonstrated below. For demo purposes the example only includes the blue variables and color modifier utilities.

custom.scss 
@use "stylemods/scss" as *;
@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 list-group-blue-css;
@include popover-blue-css;

If all the utilities are required they can instead be included grouped together in a single mixin:

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

The entire module with both the variables and utilities can also be included with a single mixin:

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

See customizing for information about using the Sass variables in the source code to customize the colors.

Source code (anchor)

Each color is an individual Sass document that contains the utilities above and color variables, view the source code for each in the color directory of the StyleMods Github repository.