Color modifiers

Color modifier classes designed for the StyleMods components and icons styles.

Overview (anchor)

The color modifiers are all optional, they use the color variable tokens so if used also require the variables to be included. The modifiers leverage the CSS variables within StyleMods icons and component styles to create colored options for each of the color palettes. For demonstrative purposes only the blue modifiers have been compiled.

Icons (anchor)

Modifier classes for the optional Icons.

Example HTML 
<div class="ico ico-blue-1 house"></div>
<div class="ico ico-blue-2 house"></div>
<div class="ico ico-blue-3 house"></div>
<div class="ico ico-blue-4 house"></div>
<div class="ico ico-blue-5 house"></div>
<div class="ico ico-blue-6 house"></div>
<div class="ico ico-blue-7 house"></div>
<div class="ico ico-blue-8 house"></div>
<div class="ico ico-blue-9 house"></div>
<div class="ico ico-blue-10 house"></div>
<div class="ico ico-blue-11 house"></div>

Components (anchor)

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>

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>

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)

As modifier classes they rely on the associated color variables and module (see links above) both being included 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 modifiers can be included individually:

custom.scss 
@use "stylemods/scss" as *;
@include icons-blue-css;
@include accordion-blue-css;
@include alert-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;

Or you can include all the modifiers for a specific color together with a single mixin:

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

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

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

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document.

As 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:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-blue-variables:     true;
$enable-accordions:         true;
$enable-blue-accordions:    true;

The modifiers can all be enabled seperately:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-blue-icons:         true;
$enable-blue-accordions:    true;
$enable-blue-alerts:        true;
$enable-blue-badges:        true;
$enable-blue-buttons:       true;
$enable-blue-borders:       true;
$enable-blue-dialogs:       true;
$enable-blue-dropdowns:     true;
$enable-blue-cards:         true;
$enable-blue-list-groups:   true;
$enable-blue-popovers:      true;

Or you can enabled all modifiers for a single color:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-blue-modifiers:     true;

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)

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

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

Using these you can create custom modifier classes using your own preferred colors and names:

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);
}

Using the framework you can still enable the components with overrides and setup custom modifiers in a separate document to include with your framework for compiling:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-badges:   true;
modifiers.scss 
@use "stylemods/scss" as *;
.badge-primary {
  @include badge-color-values(#fff, blue, darkblue);
}
.badge-danger {
  @include badge-color-values(#fff, red, darkred);
}
custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";
@use "modifiers";

See the modifiers.scss source code below to view all the mixins available.

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.

blue.scss 
// ---------------------------------------------------------- 
// Blue
// ----------------------------------------------------------
$blue:                #005ce6 !default;
$blue-1:              color-mix(in srgb, var(--blue) 28%, #fff) !default;
$blue-2:              color-mix(in srgb, var(--blue) 41%, #fff) !default;
$blue-3:              color-mix(in srgb, var(--blue) 58%, #fff) !default;
$blue-4:              color-mix(in srgb, var(--blue) 72%, #fff) !default;
$blue-5:              color-mix(in srgb, var(--blue) 87%, #fff) !default;
$blue-6:              var(--blue) !default;
$blue-7:              color-mix(in srgb, var(--blue) 85%, #000) !default;
$blue-8:              color-mix(in srgb, var(--blue) 72%, #000) !default;
$blue-9:              color-mix(in srgb, var(--blue) 60%, #000) !default;
$blue-10:             color-mix(in srgb, var(--blue) 50%, #000) !default;
$blue-11:             color-mix(in srgb, var(--blue) 44%, #000) !default;

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

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

$blue-gradient:       linear-gradient(180deg, $blue-bg-light, $blue-bg, $blue-bg-dark) !default;

$blue-color-values:
  "blue"    $blue #fff,
  "blue-1"  $blue-1 #000,
  "blue-2"  $blue-2 #000,
  "blue-3"  $blue-3 #000,
  "blue-4"  $blue-4 #000,
  "blue-5"  $blue-5 #fff,
  "blue-6"  $blue-6 #fff,
  "blue-7"  $blue-7 #fff,
  "blue-8"  $blue-8 #fff,
  "blue-9"  $blue-9 #fff,
  "blue-10" $blue-10 #fff,
  "blue-11" $blue-11 #fff,
!default;
mixins/blue.scss 
// ---------------------------------------------------------- 
// Blue mixins
// ----------------------------------------------------------
@use "modifiers" as *;
@use "../blue" as *;

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

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

// ---------------------------------------------------------- 
// Utilities
// ----------------------------------------------------------
@mixin backgrounds-blue-css {
  @each $name, $color, $text in $blue-color-values {
    .bg-#{$name} {
      color: $text;
      background-color: var(--#{$name});
    }
  }
}

@mixin borders-blue-css {
  @each $name, $color in $blue-color-values {
    .bd-#{$name} {
      border-color: var(--#{$name});
    }
  }
}

@mixin gradient-blue-css {
  .gradient-blue {
    color: $blue-bg-text;
    background-image: $blue-gradient;
  }
}

@mixin text-blue-css {
  @each $name, $color in $blue-color-values {
    .text-#{$name} {
      color: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Icons modifiers
// ----------------------------------------------------------
@mixin icons-blue-css {
  @each $name, $color in $blue-color-values {
    .ico-#{$name} {
      --ico: var(--#{$name});
    }
  }
}

// ---------------------------------------------------------- 
// Component modifiers
// ----------------------------------------------------------
@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 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 backgrounds-blue-css;
  @include borders-blue-css;
  @include gradient-blue-css;
  @include text-blue-css;
}

@mixin blue-modifiers-css {
  @include icons-blue-css;
  @include accordion-blue-css;
  @include alert-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-module-css {
  @include blue-variables-css;
  @include blue-utilities-css;
  @include blue-modifiers-css;
}
mixins/modifiers.scss 
// ---------------------------------------------------------- 
// Color modifiers
// ----------------------------------------------------------
@mixin accordion-color-values($color, $background, $focus, $border) {
  --summary-text: #{$color};
  --ico: #{$color};
  --summary-bg: #{$background};
  --summary-focus: #{$focus};
  --accordion-bd-color: #{$border};
}

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

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

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

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

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

@mixin dropdown-color-values($color, $background, $hover, $focus, $border) {
  --dropdown-text: #{$color};
  --dropdown-btn-text: #{$color};
  --dropdown-ico: #{$color};
  --ico: #{$color};
  --link: #{$color};
  --visited: #{$color};
  --hover: #{$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($color, $background, $hover, $border) {
  --list-group-text: #{$color};
  --ico: #{$color};
  --link: #{$color};
  --visited: #{$color};
  --hover: #{$color};
  --list-group-bg: #{$background};
  --list-group-dt-bg: #{$background};
  --list-group-hover: #{$hover};
  --list-group-bd-color: #{$border};
}

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

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