Color utilities

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

Examples

Integrated modules that leverage the CSS variables within SassMods 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" open>
<summary>Summary</summary>
<div>
<p>Body text</p>
</div>
</details>

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

Alerts View docs

Basic 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

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

List item
List item
List item

List item
List item
List item

Term: Description; Description

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

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

Each color utility is a Sass @mixin to include in custom SCSS as shown below. For demo purposes the example only includes the blue variables and color modifier utilities.

custom.scss

@use "sassmods/scss/sassmods" 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 "sassmods/scss/sassmods" 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 "sassmods/scss/sassmods" 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

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 SassMods Github repository.