Theme utilities

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

Examples

The theme utilities are integrated modules that leverage the CSS variables within SassMods styles and the theme colors variable tokens to create fixed light and dark color modifiers for the following components and utilities.

Accordions

Summary

Body text

Summary

Body text

Summary

Body text

Summary

Body text

Summary

Body text

Summary

Body text

Example HTML 
<div class="accordion accordion-light">
<details name="accordion-light-demo" open>
<summary>Summary</summary>
<div>
<p>Body text</p>
</div>
</details>

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

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

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

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

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

Alerts

Basic alert!

Dismissable alert!

Basic alert!

Dismissable alert!
Example HTML 
<div class="alert alert-light">
<p>Basic alert!</p>
</div>

<dialog class="alert alert-light" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>

<div class="alert alert-dark">
<p>Basic alert!</p>
</div>

<dialog class="alert alert-dark" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>

Backgrounds

Light background
Dark background
Example HTML 
<div class="bg bg-light">Light background</div>
<div class="bg bg-dark">Dark background</div>

Badges

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New

Paragraph New

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New

Paragraph New

Example HTML 
<div>
<h1>Heading 1 <span class="badge badge-light">New</span></h1>
<h2>Heading 2 <span class="badge badge-light">New</span></h2>
<h3>Heading 3 <span class="badge badge-light">New</span></h3>
<h4>Heading 4 <span class="badge badge-light">New</span></h4>
<h5>Heading 5 <span class="badge badge-light">New</span></h5>
<h6>Heading 6 <span class="badge badge-light">New</span></h6>
<p>Paragraph <span class="badge badge-light">New</span><p>
<button class="btn-light">Button <span class="badge badge-light">New</span></button>
</div>
<div>
<h1>Heading 1 <span class="badge badge-dark">New</span></h1>
<h2>Heading 2 <span class="badge badge-dark">New</span></h2>
<h3>Heading 3 <span class="badge badge-dark">New</span></h3>
<h4>Heading 4 <span class="badge badge-dark">New</span></h4>
<h5>Heading 5 <span class="badge badge-dark">New</span></h5>
<h6>Heading 6 <span class="badge badge-dark">New</span></h6>
<p>Paragraph <span class="badge badge-dark">New</span><p>
<button class="btn-dark">Button <span class="badge badge-dark">New</span></button>
</div>

Buttons

Link button Link button

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

Cards

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

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-light">
  <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-light">
  <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>

<div class="card card-dark">
  <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-dark">
  <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

Light dialog

The quick brown fox jumps over the lazy dog.

Dark dialog

The quick brown fox jumps over the lazy dog.
Example HTML 
<button data-dialog="#dialog-light" class="btn-light">Light dialog</button>
<dialog id="dialog-light" class="dialog-light">
  <h2>Light dialog</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog btn-light">Close</button>
  <div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-dark" class="btn-dark">Dark dialog</button>
<dialog id="dialog-dark" class="dialog-dark">
  <h2>Dark dialog</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog btn-dark">Close</button>
  <div class="close-dialog"></div>
</dialog>

List groups

  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
  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-light">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol class="list-group list-group-light">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

<dl class="list-group list-group-light">
<dt>Term</dt>
<dd>Description</dd>
<dd>Description</dd>
</dl>

<ul class="list-links list-group-light">
<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-light">
<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-light">
<dt>Term</dt>
<dd><a href="#">Description link</a></dd>
<dd><a href="#">Description link</a></dd>
</dl>

<ul class="list-group list-group-dark">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol class="list-group list-group-dark">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

<dl class="list-group list-group-dark">
<dt>Term</dt>
<dd>Description</dd>
<dd>Description</dd>
</dl>

<ul class="list-links list-group-dark">
<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-dark">
<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-dark">
<dt>Term</dt>
<dd><a href="#">Description link</a></dd>
<dd><a href="#">Description link</a></dd>
</dl>

Popovers

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Example HTML 
<button popovertarget="popover-light" class="btn-light">Light popover</button>
<div class="popover-light" id="popover-light" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="popover-dark" class="btn-dark">Dark popover</button>
<div class="popover-dark" id="popover-dark" 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:

custom.scss 
@use "sassmods/scss/sassmods" as *;
@include accordion-light-css;
@include alert-light-css;
@include background-light-css;
@include badge-light-css;
@include button-light-css;
@include card-light-css;
@include dialog-light-css;
@include list-group-light-css;
@include popover-light-css;
  
@include accordion-dark-css;
@include alert-dark-css;
@include background-dark-css;
@include badge-dark-css;
@include button-dark-css;
@include card-dark-css;
@include dialog-dark-css;
@include list-group-dark-css;
@include popover-dark-css;

Each set can be included using grouped mixins:

custom.scss 
@use "sassmods/scss/sassmods" as *;
@include light-utilities-css;
@include dark-utilities-css;

Both can also be included using a single mixin:

custom.scss 
@use "sassmods/scss/sassmods" as *;
@include light-dark-utilities-css;

Source

The theme utilities source codes shares the same document as the theme colors.

theme-colors.scss 
// ---------------------------------------------------------- 
// Theme colors
// ----------------------------------------------------------
// Light typography
$text-light:            #000 !default;
$link-light:            #1c3db5 !default;
$link-visited-light:    #4f6fe3 !default;
$link-hover-light:      #385de0 !default;
$background-light:      #eaecee !default;

// Dark typography
$text-dark:             #fff !default;
$link-dark:             #9fbfdf !default;
$link-visited-dark:     #b3cce6 !default;
$link-hover-dark:       #c6d8ec !default;
$background-dark:       #1f2428 !default;

// Theme typography
$theme-text:            light-dark(var(--text-light), var(--text-dark)) !default;
$theme-background:      light-dark(var(--background-light), var(--background-dark)) !default;
$theme-link:            light-dark(var(--link-light), var(--link-dark)) !default;
$theme-link-visited:    light-dark(var(--visited-light), var(--visited-dark)) !default;
$theme-link-hover:      light-dark(var(--hover-light), var(--hover-dark)) !default;

// Theme surfaces
$theme-surface:         var(--background) !default;
$theme-surface-1:       var(--surf-1) !default;
$theme-surface-2:       var(--surf-2) !default;
$theme-surface-3:       var(--surf-3) !default;
$theme-surface-4:       var(--surf-4) !default;
$theme-surface-tint-1:  color-mix(in srgb, var(--surf-1) 30%, var(--background)) !default;
$theme-surface-tint-2:  color-mix(in srgb, var(--surf-1) 50%, var(--background)) !default;

// Light surfaces
$surface-1-light:        color-mix(in srgb, black 4%, var(--background-light)) !default;
$surface-2-light:        color-mix(in srgb, black 8%, var(--background-light)) !default;
$surface-3-light:        color-mix(in srgb, black 15%, var(--background-light)) !default;
$surface-4-light:        color-mix(in srgb, black 22%, var(--background-light)) !default;

// Dark surfaces
$surface-1-dark:        color-mix(in srgb, white 4%, var(--background-dark)) !default;
$surface-2-dark:        color-mix(in srgb, white 8%, var(--background-dark)) !default;
$surface-3-dark:        color-mix(in srgb, white 15%, var(--background-dark)) !default;
$surface-4-dark:        color-mix(in srgb, white 22%, var(--background-dark)) !default;

// Light utility colors
$light-text:            var(--text-light) !default;
$light-link:            var(--link-light) !default;
$light-visited:         var(--visited-light) !default;
$light-hover:           var(--hover-light) !default;
$light-bg-1:            var(--surf-1-light) !default;
$light-bg-2:            var(--surf-2-light) !default;
$light-bg-3:            var(--surf-3-light) !default;
$light-bg-4:            var(--surf-4-light) !default;

// Dark utility colors
$dark-text:             var(--text-dark) !default;
$dark-link:             var(--link-dark) !default;
$dark-visited:          var(--visited-dark) !default;
$dark-hover:            var(--hover-dark) !default;
$dark-bg-1:             var(--surf-1-dark) !default;
$dark-bg-2:             var(--surf-2-dark) !default;
$dark-bg-3:             var(--surf-3-dark) !default;
$dark-bg-4:             var(--surf-4-dark) !default;

// Variables maps
$light-theme-colors: (
  "text-light": $text-light,
  "link-light": $link-light,
  "visited-light": $link-visited-light,
  "hover-light": $link-hover-light,
  "background-light": $background-light,
  "surf-1-light": $surface-1-light,
  "surf-2-light": $surface-2-light,
  "surf-3-light": $surface-3-light,
  "surf-4-light": $surface-4-light,
) !default;
  
$dark-theme-colors: (  
  "text-dark": $text-dark,
  "link-dark": $link-dark,
  "visited-dark": $link-visited-dark,
  "hover-dark": $link-hover-dark,
  "background-dark": $background-dark,
  "surf-1-dark": $surface-1-dark,
  "surf-2-dark": $surface-2-dark,
  "surf-3-dark": $surface-3-dark,
  "surf-4-dark": $surface-4-dark,
) !default;

$theme-surface-color: (
  "surface": $theme-surface,
) !default;

$theme-typography: (
  "text": $theme-text,
  "background": $theme-background,
  "link": $theme-link,
  "visited": $theme-link-visited,
  "hover": $theme-link-hover,
  "kbd-bg": $theme-surface-2,
  "pre-bd-color": $theme-surface-3,
  "pre-bg": $theme-surface-1,
  "blockquote-bd-color": $theme-surface-3,
) !default;

$theme-forms-buttons: (
  "btn-bd-color": $theme-surface-3,
  "btn-bg": $theme-surface-1,
  "btn-hover": $theme-surface-2,
  "form-bd-color": $theme-surface-3,
  "form-bg": $theme-surface,
  "form-accent": $theme-link,
  "focus-color": $theme-surface-3,
) !default;

$theme-tables: (
  "table-bg": $theme-surface,
  "thead-bg": $theme-surface-1,
  "table-bd-color": $theme-surface-3,
  "table-stripes": $theme-surface-tint-1,
  "table-hover": $theme-surface-tint-2,
) !default;

$theme-accordion: (
  "summary-bg": $theme-surface-1,
  "summary-focus": $theme-surface-2,
  "accordion-bd-color": $theme-surface-3,
) !default;

$theme-alert: (
  "alert-bg": $theme-surface-1,
  "alert-bd-color": $theme-surface-3,
) !default;

$theme-badge: (
  "badge-bg": $theme-surface-1,
  "badge-bd-color": $theme-surface-3,
) !default;

$theme-border: (
  "bd-color": $theme-surface-3,
) !default;

$theme-card: (
  "card-bd-color": $theme-surface-3,
  "card-hover": $theme-surface-1,
  "card-focus-color": $theme-surface-4,
) !default;

$theme-dialog: (
  "dialog-bg": $theme-surface-1,
  "dialog-bd-color": $theme-surface-3,
) !default;

$theme-list-group: (
  "list-group-dt-bg": $theme-surface-2,
  "list-group-hover": $theme-surface-1,
  "list-group-bd-color": $theme-surface-3,
) !default;

$theme-popover: (
  "popover-bg": $theme-surface-1,
  "popover-bd-color": $theme-surface-3,
) !default;


// Light utility maps
$accordion-light: (
  "summary-text": $light-text,
  "ico": $light-text,
  "summary-bg": $light-bg-1,
  "summary-focus": $light-bg-2,
  "accordion-bd-color": $light-bg-3,
) !default;

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

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

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

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

$card-light: (
  "card-text": $light-text,
  "ico": $light-text,
  "link": $light-link,
  "visited": $light-visited,
  "hover": $light-hover,
  "card-bg": $light-bg-1,
  "card-text-hover": $light-text,
  "card-hover": $light-bg-2,
  "card-bd-color": $light-bg-3,
  "card-focus-color": $light-bg-3,
) !default;

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

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

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

// Dark utility maps
$accordion-dark: (
  "summary-text": $dark-text,
  "ico": $dark-text,
  "summary-bg": $dark-bg-1,
  "summary-focus": $dark-bg-2,
  "accordion-bd-color": $dark-bg-3,
) !default;

$alert-dark: (
  "alert-text": $dark-text,
  "ico": $dark-text,
  "link": $dark-link,
  "visited": $dark-visited,
  "hover": $dark-hover,
  "alert-bg": $dark-bg-1,
  "alert-bd-color": $dark-bg-3,
) !default;

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

$badge-dark: (
  "badge-text": $dark-text,
  "ico": $dark-text,
  "badge-bg": $dark-bg-1,
  "badge-bd-color": $dark-bg-3,
) !default;

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

$card-dark: (
  "card-text": $dark-text,
  "ico": $dark-text,
  "link": $dark-link,
  "visited": $dark-visited,
  "hover": $dark-hover,
  "card-bg": $dark-bg-1,
  "card-text-hover": $dark-text,
  "card-hover": $dark-bg-2,
  "card-bd-color": $dark-bg-3,
  "card-focus-color": $dark-bg-3,
) !default;

$dialog-dark: (
  "dialog-text": $dark-text,
  "ico": $dark-text,
  "link": $dark-link,
  "visited": $dark-visited,
  "hover": $dark-hover,
  "dialog-bg": $dark-bg-1,
  "dialog-bd-color": $dark-bg-3,
) !default;

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

$popover-dark: (
  "popover-text": $dark-text,
  "ico": $dark-text,
  "link": $dark-link,
  "visited": $dark-visited,
  "hover": $dark-hover,
  "popover-bg": $dark-bg-1,
  "popover-bd-color": $dark-bg-3,
) !default;

// Light and dark color variable tokens
@mixin light-theme-variables {
  @each $name, $value in $light-theme-colors {
    --#{$name}: #{$value};
  }
}

@mixin dark-theme-variables {
  @each $name, $value in $dark-theme-colors {
    --#{$name}: #{$value};
  }
}

@mixin light-theme-variables-css {
  :where(html) {
    @include light-theme-variables;
  }
}

@mixin dark-theme-variables-css {
  :where(html) {
    @include dark-theme-variables;
  }
}

@mixin light-dark-theme-variables-css {
  :where(html) {
    @include light-theme-variables;
    @include dark-theme-variables;
  }
}

// Surface color variable token
@mixin theme-surface-variable {
  @each $name, $value in $theme-surface-color {
    --#{$name}: #{$value};
  }
}

@mixin theme-surface-css {
  :where(html) {
    @include theme-surface-variable;
  }
}

// Style and utility variable tokens
@mixin theme-typography-variables {
  @each $name, $value in $theme-typography {
    --#{$name}: #{$value};
  }
}

@mixin theme-typography-css {
  :where(html) {
    @include theme-typography-variables;
  }
}

@mixin theme-forms-buttons-variables {
  @each $name, $value in $theme-forms-buttons {
    --#{$name}: #{$value};
  }
}

@mixin theme-forms-buttons-css {
  :where(html) {
    @include theme-forms-buttons-variables;
  }
}

@mixin theme-tables-variables {
  @each $name, $value in $theme-tables {
    --#{$name}: #{$value};
  }
}

@mixin theme-tables-css {
  :where(html) {
    @include theme-tables-variables;
  }
}

@mixin theme-accordion-variables {
  @each $name, $value in $theme-accordion {
    --#{$name}: #{$value};
  }
}

@mixin theme-accordions-css {
  :where(html) {
    @include theme-accordions-variables;
  }
}

@mixin theme-alert-variables {
  @each $name, $value in $theme-alert {
    --#{$name}: #{$value};
  }
}

@mixin theme-alert-css {
  :where(html) {
    @include theme-alert-variables;
  }
}

@mixin theme-badge-variables {
  @each $name, $value in $theme-badge {
    --#{$name}: #{$value};
  }
}

@mixin theme-badge-css {
  :where(html) {
    @include theme-badge-variables;
  }
}

@mixin theme-border-variables {
  @each $name, $value in $theme-border {
    --#{$name}: #{$value};
  }
}

@mixin theme-border-css {
  :where(html) {
    @include theme-border-variables;
  }
}

@mixin theme-card-variables {
  @each $name, $value in $theme-card {
    --#{$name}: #{$value};
  }
}

@mixin theme-card-css {
  :where(html) {
    @include theme-card-variables;
  }
}

@mixin theme-dialog-variables {
  @each $name, $value in $theme-dialog {
    --#{$name}: #{$value};
  }
}

@mixin theme-dialog-css {
  :where(html) {
    @include theme-dialog-variables;
  }
}

@mixin theme-list-group-variables {
  @each $name, $value in $theme-list-group {
    --#{$name}: #{$value};
  }
}

@mixin theme-list-group-css {
  :where(html) {
    @include theme-dialog-list-group;
  }
}

@mixin theme-popover-variables {
  @each $name, $value in $theme-popover {
    --#{$name}: #{$value};
  }
}

@mixin theme-popover-css {
  :where(html) {
    @include theme-popover-variables;
  }
}


@mixin light-dark-theme-variables-css {
  :where(html) {
    @include light-theme-variables;
    @include dark-theme-variables;
  }
}

// Grouped variable mixins
@mixin theme-variables {
  @include light-theme-variables;
  @include dark-theme-variables;
  @include theme-typography-variables;
  @include theme-forms-buttons-variables;
  @include theme-tables-variables;
  @include theme-accordion-variables;
  @include theme-alert-variables;
  @include theme-badge-variables;
  @include theme-border-variables;
  @include theme-dialog-variables;
  @include theme-card-variables;
  @include theme-list-group-variables;
  @include theme-popover-variables;
}

@mixin theme-variables-css {
  :where(html) {
    @include theme-surface-variable;
    @include theme-variables;
  }
}

@mixin theme-variables-nosurface-css {
  :where(html) {
    @include theme-variables;
  }
}

// Light utility mixins
@mixin accordion-light-css {
  .accordion-light {
    @each $name, $value in $accordion-light {
      --#{$name}: #{$value};
    }  
  }
}

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

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

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

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

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

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

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

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

// Dark utility mixins
@mixin accordion-dark-css {
  .accordion-dark {
    @each $name, $value in $accordion-dark {
      --#{$name}: #{$value};
    }  
  }
}

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

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

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

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

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

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

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

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

// Combined utility mixins
@mixin light-utilities-css {
  @include accordion-light-css;
  @include alert-light-css;
  @include background-light-css;
  @include badge-light-css;
  @include button-light-css;
  @include card-light-css;
  @include dialog-light-css;
  @include list-group-light-css;
  @include popover-light-css;
}

@mixin dark-utilities-css {
  @include accordion-dark-css;
  @include alert-dark-css;
  @include background-dark-css;
  @include badge-dark-css;
  @include button-dark-css;
  @include card-dark-css;
  @include dialog-dark-css;
  @include list-group-dark-css;
  @include popover-dark-css;
}

@mixin light-dark-utilities-css {
  @include light-utilities-css;
  @include dark-utilities-css;
}