Semantic colors
Customizable semantic color variables to use with StyleMods components and utilities.
Overview (anchor)
The semantic colors are a subset set of variable tokens with function based names plus optional color modifier classes for the StyleMods utilities and components. They provide an alternative to using the color variables and/or color utilities and can be compiled individually or together as required.
Variables (anchor)
The following colors and function based names for the variable tokens are used:
--primary-light
--primary
--primary-dark
--info-light
--info
--info-dark
--success-light
--success
--success-dark
--warning-light
--warning
--warning-dark
--danger-light
--danger
--danger-dark
--secondary-light
--secondary
--secondary-dark
The colors use the default StyleMods color values but can be customized as required. They work without the default variable tokens being compiled so can be used as a basic alternative to the named color system.
Utilities (anchor)
The optional utilities use the variables above to create color modifier classes for the following components and utilities by leveraging the default CSS variables used within StyleMods styles in the same way as the color utilities.
Accordions (anchor)
See the Accordions page for usage information and to view the source code.
Primary
Body text
Primary
Body text
Primary
Body text
Info
Body text
Info
Body text
Info
Body text
Success
Body text
Success
Body text
Success
Body text
Warning
Body text
Warning
Body text
Warning
Body text
Danger
Body text
Danger
Body text
Danger
Body text
Secondary
Body text
Secondary
Body text
Secondary
Body text
Example HTML
<div class="accordion accordion-primary">
<details name="accordion-primary-demo" open>
<summary>Primary</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-primary-demo">
<summary>Primary</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-primary-demo">
<summary>Primary</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>
<div class="accordion accordion-info">
<details name="accordion-info-demo" open>
<summary>Info</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-info-demo">
<summary>Info</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-info-demo">
<summary>Info</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>
<div class="accordion accordion-success">
<details name="accordion-success-demo" open>
<summary>Success</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-success-demo">
<summary>Success</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-success-demo">
<summary>Success</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>
<div class="accordion accordion-warning">
<details name="accordion-warning-demo" open>
<summary>Warning</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-warning-demo">
<summary>Warning</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-warning-demo">
<summary>Warning</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>
<div class="accordion accordion-danger">
<details name="accordion-danger-demo" open>
<summary>Danger</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-danger-demo">
<summary>Danger</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-danger-demo">
<summary>Danger</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>
<div class="accordion accordion-secondary">
<details name="accordion-secondary-demo" open>
<summary>Secondary</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-secondary-demo">
<summary>Secondary</summary>
<div>
<p>Body text</p>
</div>
</details>
<details name="accordion-secondary-demo">
<summary>Secondary</summary>
<div>
<p>Body text</p>
</div>
</details>
</div>Alerts (anchor)
See the Alerts page for usage information and to view the source code.
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<div class="alert alert-primary">
<p>Primary</p>
</div>
<dialog class="alert alert-primary" open>
<p>Primary</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>
<div class="alert alert-info">
<p>Info</p>
</div>
<dialog class="alert alert-info" open>
<p>Info</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>
<div class="alert alert-success">
<p>Success</p>
</div>
<dialog class="alert alert-success" open>
<p>Success</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>
<div class="alert alert-warning">
<p>Warning</p>
</div>
<dialog class="alert alert-warning" open>
<p>Warning</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>
<div class="alert alert-danger">
<p>Danger</p>
</div>
<dialog class="alert alert-danger" open>
<p>Danger</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>
<div class="alert alert-secondary">
<p>Secondary</p>
</div>
<dialog class="alert alert-secondary" open>
<p>Secondary</p>
<form method="dialog">
<button><span>Close</span></button>
</form>
</dialog>Backgrounds (anchor)
See the Backgrounds page for usage information and to view the source code.
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<div class="bg bg-primary p-3">Primary</div>
<div class="bg bg-info p-3">Info</div>
<div class="bg bg-success p-3">Success</div>
<div class="bg bg-warning p-3">Warning</div>
<div class="bg bg-danger p-3">Danger</div>
<div class="bg bg-secondary p-3">Secondary</div>Badges (anchor)
See the Badges page for usage information and to view the source code.
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<span class="badge badge-primary">Primary</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-secondary">Secondary</span>Buttons (anchor)
The modifiers work on the buttons included with the forms and buttons content styles and button component utilities, see the pages for usage information and to view the source code for each.
Example HTML
<button class="btn-primary">Primary</button>
<button class="btn-info">Info</button>
<button class="btn-success">Success</button>
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
<button class="btn-secondary">Secondary</button>Cards (anchor)
See the Cards page for usage information and to view the source code.
Example HTML
<div class="card card-primary">
<h4>Primary</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-primary">
<h4>Primary link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card card-info">
<h4>Info</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-info">
<h4>Info link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card card-success">
<h4>Success</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-success">
<h4>Success link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card card-warning">
<h4>Warning</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-warning">
<h4>Warning link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card card-danger">
<h4>Danger</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-danger">
<h4>Danger link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card card-secondary">
<h4>Secondary</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>
<div class="card-link card-secondary">
<h4>Secondary link</h4>
<p>The quick brown fox jumps over the lazy dog.</p>
<a href="#">Link to action</a>
</div>Dialogs (anchor)
See the Dialogs page for usage information and to view the source code.
Example HTML
<button data-dialog="#dialog-primary" class="btn-primary mb-3">Primary</button>
<dialog id="dialog-primary" class="dialog-primary">
<h2>Primary</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-primary">Close</button>
<div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-info" class="btn-info mb-3">Info</button>
<dialog id="dialog-info" class="dialog-info">
<h2>Info</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-info">Close</button>
<div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-success" class="btn-success mb-3">Success</button>
<dialog id="dialog-success" class="dialog-success">
<h2>Success</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-success">Close</button>
<div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-warning" class="btn-warning mb-3">Warning</button>
<dialog id="dialog-warning" class="dialog-warning">
<h2>Warning</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-warning">Close</button>
<div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-danger" class="btn-danger mb-3">Danger</button>
<dialog id="dialog-danger" class="dialog-danger">
<h2>Danger</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-danger">Close</button>
<div class="close-dialog"></div>
</dialog>
<button data-dialog="#dialog-secondary" class="btn-secondary mb-3">Secondary</button>
<dialog id="dialog-secondary" class="dialog-secondary">
<h2>Secondary</h2>
<p>The quick brown fox jumps over the lazy dog.</p>
<button class="close-dialog btn-secondary">Close</button>
<div class="close-dialog"></div>
</dialog>Dropdowns (anchor)
See the Dropdowns page for usage information and to view the source code.
Primary
Success
Warning
Secondary
Example HTML
<details class="dropdown-primary" name="dropdown-demo">
<summary class="dropdown-btn">Primary</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>
<details class="dropdown-info" name="dropdown-demo">
<summary class="dropdown-btn">Info</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>
<details class="dropdown-success" name="dropdown-demo">
<summary class="dropdown-btn">Success</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>
<details class="dropdown-warning" name="dropdown-demo">
<summary class="dropdown-btn">Warning</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>
<details class="dropdown-danger" name="dropdown-demo">
<summary class="dropdown-btn">Danger</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>
<details class="dropdown-secondary" name="dropdown-demo">
<summary class="dropdown-btn">Secondary</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)
See the List groups page for usage information and to view the source code, and to view the <ol> and <dl> list group styles not demonstrated below.
- Primary
- Primary
- Primary
- Info
- Info
- Info
- Success
- Success
- Success
- Warning
- Warning
- Warning
- Danger
- Danger
- Danger
- Secondary
- Secondary
- Secondary
Example HTML
<ul class="list-group list-group-primary">
<li>Primary</li>
<li>Primary</li>
<li>Primary</li>
</ul>
<ul class="list-links list-group-primary">
<li><a href="#">Primary link</a></li>
<li><a href="#">Primary link</a></li>
<li><a href="#">Primary link</a></li>
</ul>
<ul class="list-group list-group-info">
<li>Info</li>
<li>Info</li>
<li>Info</li>
</ul>
<ul class="list-links list-group-info">
<li><a href="#">Info link</a></li>
<li><a href="#">Info link</a></li>
<li><a href="#">Info link</a></li>
</ul>
<ul class="list-group list-group-success">
<li>Success</li>
<li>Success</li>
<li>Success</li>
</ul>
<ul class="list-links list-group-success">
<li><a href="#">Success link</a></li>
<li><a href="#">Success link</a></li>
<li><a href="#">Success link</a></li>
</ul>
<ul class="list-group list-group-warning">
<li>Warning</li>
<li>Warning</li>
<li>Warning</li>
</ul>
<ul class="list-links list-group-warning">
<li><a href="#">Warning link</a></li>
<li><a href="#">Warning link</a></li>
<li><a href="#">Warning link</a></li>
</ul>
<ul class="list-group list-group-danger">
<li>Danger</li>
<li>Danger</li>
<li>Danger</li>
</ul>
<ul class="list-links list-group-danger">
<li><a href="#">Danger link</a></li>
<li><a href="#">Danger link</a></li>
<li><a href="#">Danger link</a></li>
</ul>
<ul class="list-group list-group-secondary">
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul>
<ul class="list-links list-group-secondary">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Secondary link</a></li>
<li><a href="#">Secondary link</a></li>
</ul>Popovers (anchor)
See Popovers for more information.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Example HTML
<button popovertarget="popover-primary" class="btn-primary">Primary</button>
<div class="popover-primary" id="popover-primary" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<button popovertarget="popover-info" class="btn-info">Info</button>
<div class="popover-info" id="popover-info" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<button popovertarget="popover-success" class="btn-success">Success</button>
<div class="popover-success" id="popover-success" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<button popovertarget="popover-warning" class="btn-warning">Warning</button>
<div class="popover-warning" id="popover-warning" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<button popovertarget="popover-danger" class="btn-danger">Danger</button>
<div class="popover-danger" id="popover-danger" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<button popovertarget="popover-secondary" class="btn-secondary">Secondary</button>
<div class="popover-secondary" id="popover-secondary" popover>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>Using the module (anchor)
Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.
Variables (anchor)
The variables are included by default within a :where(html) pseudo-class wrapper but can be customized with overrides to use :root or your preferred tokens style.
custom.scss
@use "stylemods/scss" as *;
@include semantic-variables-css;You can also bring the variables by themselves to include with others (above or below) within the same wrapper:
custom.scss
@use "stylemods/scss" as *;
:where(html) {
@include semantic-variables;
<-- other variables -->
}You can also include the variables as above in your preferred wrapper styles without customizing the default values.
Utilities (anchor)
All can be included with a single mixin:
custom.scss
@use "stylemods/scss" as *;
@include semantic-utilities-css;Or grouped individually:
custom.scss
@use "stylemods/scss" as *;
@include primary-utilities-css;
@include success-utilities-css;
@include danger-utilities-css;Or as semantic modifier groups:
custom.scss
@use "stylemods/scss" as *;
@include semantic-buttons-css;
@include semantic-dialogs-css;
@include semantic-popopvers-css;Or as individual modifiers:
custom.scss
@use "stylemods/scss" as *;
@include button-primary-css;
@include button-success-css;
@include button-danger-css;Combined (anchor)
You can also include both the variables and all the utility modifiers using one mixin:
custom.scss
@use "stylemods/scss" as *;
@include semantic-module;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:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-semantic: true; // variable tokens
$enable-semantic-utilities: true;The modifiers can be included as specific groups:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-semantic: true,
$enable-semantic-buttons: true;
$enable-semantic-dialogs: true;
$enable-semantic-popovers: true;Or as individual modifiers for specific elements:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-semantic: true,
$enable-primary-buttons: true;
$enable-success-buttons: true;
$enable-danger-buttons: 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.
Source code (anchor)
The modules and the framework follow the same methods for customizing the default values, the utilities use the same mixins to generate the modifiers as the color utilities.
color/semantic.scss
// ----------------------------------------------------------
// Semantic variables
// ----------------------------------------------------------
@use "blue" as *;
@use "green" as *;
@use "red" as *;
@use "orange" as *;
@use "cyan" as *;
// Base values
$primary: $blue !default;
$info: $cyan !default;
$success: $green !default;
$warning: $orange !default;
$danger: $red !default;
$secondary: #d3d3d3 !default; // HEX equivalent of $gray-2
// Light accents
$primary-light: color-mix(in srgb, var(--primary) 80%, white) !default;
$info-light: color-mix(in srgb, var(--info) 60%, white) !default;
$success-light: color-mix(in srgb, var(--success) 80%, white) !default;
$warning-light: color-mix(in srgb, var(--warning) 85%, white) !default;
$danger-light: color-mix(in srgb, var(--danger) 80%, white) !default;
$secondary-light: color-mix(in srgb, var(--secondary) 80%, white) !default;
// Dark accents
$primary-dark: color-mix(in srgb, var(--primary) 80%, black) !default;
$info-dark: color-mix(in srgb, var(--info) 82%, black) !default;
$success-dark: color-mix(in srgb, var(--success) 80%, black) !default;
$warning-dark: color-mix(in srgb, var(--warning) 82%, black) !default;
$danger-dark: color-mix(in srgb, var(--danger) 70%, black) !default;
$secondary-dark: color-mix(in srgb, var(--secondary) 80%, black) !default;
// Tokens style
$semantic-tokens: ':where(html)' !default;
// ----------------------------------------------------------
// Token names and values
// ----------------------------------------------------------
$base-semantic-token-values: (
"primary": $primary,
"info": $info,
"success": $success,
"warning": $warning,
"danger": $danger,
"secondary": $secondary,
"primary-light": $primary-light,
"info-light": $info-light,
"success-light": $success-light,
"warning-light": $warning-light,
"danger-light": $danger-light,
"secondary-light": $secondary-light,
"primary-dark": $primary-dark,
"info-dark": $info-dark,
"success-dark": $success-dark,
"warning-dark": $warning-dark,
"danger-dark": $danger-dark,
"secondary-dark": $secondary-dark,
) !default;
// ----------------------------------------------------------
// Variable mixins
// ----------------------------------------------------------
@mixin semantic-variables {
@each $name, $value in $base-semantic-token-values {
--#{$name}: #{$value};
}
}
@mixin semantic-variables-css {
#{$semantic-tokens} {
@include semantic-variables;
}
}color/utilities/semantic.scss
// ----------------------------------------------------------
// Semantic utilities
// ----------------------------------------------------------
@use "color-mixins" as *;
// Background colors
$primary-bg: var(--primary) !default;
$info-bg: var(--info) !default;
$success-bg: var(--success) !default;
$warning-bg: var(--warning) !default;
$danger-bg: var(--danger) !default;
$secondary-bg: var(--secondary) !default;
// Text colors
$primary-bg-text: #fff !default;
$info-bg-text: #000 !default;
$success-bg-text: #fff !default;
$warning-bg-text: #000 !default;
$danger-bg-text: #fff !default;
$secondary-bg-text: #000 !default;
// Light accents
$primary-bg-light: var(--primary-light) !default;
$info-bg-light: var(--info-light) !default;
$success-bg-light: var(--success-light) !default;
$warning-bg-light: var(--warning-light) !default;
$danger-bg-light: var(--danger-light) !default;
$secondary-bg-light: var(--secondary-light) !default;
// Dark accents
$primary-bg-dark: var(--primary-dark) !default;
$info-bg-dark: var(--info-dark) !default;
$success-bg-dark: var(--success-dark) !default;
$warning-bg-dark: var(--warning-dark) !default;
$danger-bg-dark: var(--danger-dark) !default;
$secondary-bg-dark: var(--secondary-dark) !default;
// ----------------------------------------------------------
// Primary mixins
// ----------------------------------------------------------
@mixin accordion-primary-css {
.accordion-primary {
@include accordion-color-values($primary-bg-text, $primary-bg, $primary-bg-dark, $primary-bg-light);
}
}
@mixin alert-primary-css {
.alert-primary {
@include alert-color-values($primary-bg-text, $primary-bg, $primary-bg-light);
}
}
@mixin background-primary-css {
.bg-primary {
@include background-color-values($primary-bg-text, $primary-bg);
}
}
@mixin badge-primary-css {
.badge-primary {
@include badge-color-values($primary-bg-text, $primary-bg, $primary-bg-light);
}
}
@mixin button-primary-css {
.btn-primary {
@include button-color-values($primary-bg-text, $primary-bg, $primary-bg-dark, $primary-bg-light, $primary-bg-light);
}
}
@mixin card-primary-css {
.card-primary {
@include card-color-values($primary-bg-text, $primary-bg, $primary-bg-dark, $primary-bg-light, $primary-bg-light);
}
}
@mixin dialog-primary-css {
.dialog-primary {
@include dialog-color-values($primary-bg-text, $primary-bg, $primary-bg-light);
}
}
@mixin dropdown-primary-css {
.dropdown-primary {
@include dropdown-color-values($primary-bg-text, $primary-bg, $primary-bg-dark, $primary-bg-light, $primary-bg-light);
}
}
@mixin list-group-primary-css {
.list-group-primary {
@include list-group-color-values($primary-bg-text, $primary-bg, $primary-bg-dark, $primary-bg-light);
}
}
@mixin popover-primary-css {
.popover-primary {
@include popover-color-values($primary-bg-text, $primary-bg, $primary-bg-light);
}
}
// ----------------------------------------------------------
// Info mixins
// ----------------------------------------------------------
@mixin accordion-info-css {
.accordion-info {
@include accordion-color-values($info-bg-text, $info-bg, $info-bg-dark, $info-bg-light);
}
}
@mixin alert-info-css {
.alert-info {
@include alert-color-values($info-bg-text, $info-bg, $info-bg-light);
}
}
@mixin background-info-css {
.bg-info {
@include background-color-values($info-bg-text, $info-bg);
}
}
@mixin badge-info-css {
.badge-info {
@include badge-color-values($info-bg-text, $info-bg, $info-bg-light);
}
}
@mixin button-info-css {
.btn-info {
@include button-color-values($info-bg-text, $info-bg, $info-bg-dark, $info-bg-light, $info-bg-dark);
}
}
@mixin card-info-css {
.card-info {
@include card-color-values($info-bg-text, $info-bg, $info-bg-dark, $info-bg-light, $info-bg-light);
}
}
@mixin dialog-info-css {
.dialog-info {
@include dialog-color-values($info-bg-text, $info-bg, $info-bg-light);
}
}
@mixin dropdown-info-css {
.dropdown-info {
@include dropdown-color-values($info-bg-text, $info-bg, $info-bg-dark, $info-bg-light, $info-bg-light);
}
}
@mixin list-group-info-css {
.list-group-info {
@include list-group-color-values($info-bg-text, $info-bg, $info-bg-dark, $info-bg-light);
}
}
@mixin popover-info-css {
.popover-info {
@include popover-color-values($info-bg-text, $info-bg, $info-bg-light);
}
}
// ----------------------------------------------------------
// Success mixins
// ----------------------------------------------------------
@mixin accordion-success-css {
.accordion-success {
@include accordion-color-values($success-bg-text, $success-bg, $success-bg-dark, $success-bg-light);
}
}
@mixin alert-success-css {
.alert-success {
@include alert-color-values($success-bg-text, $success-bg, $success-bg-light);
}
}
@mixin background-success-css {
.bg-success {
@include background-color-values($success-bg-text, $success-bg);
}
}
@mixin badge-success-css {
.badge-success {
@include badge-color-values($success-bg-text, $success-bg, $success-bg-light);
}
}
@mixin button-success-css {
.btn-success {
@include button-color-values($success-bg-text, $success-bg, $success-bg-dark, $success-bg-light, $success-bg-light);
}
}
@mixin card-success-css {
.card-success {
@include card-color-values($success-bg-text, $success-bg, $success-bg-dark, $success-bg-light, $success-bg-light);
}
}
@mixin dialog-success-css {
.dialog-success {
@include dialog-color-values($success-bg-text, $success-bg, $success-bg-light);
}
}
@mixin dropdown-success-css {
.dropdown-success {
@include dropdown-color-values($success-bg-text, $success-bg, $success-bg-dark, $success-bg-light, $success-bg-light);
}
}
@mixin list-group-success-css {
.list-group-success {
@include list-group-color-values($success-bg-text, $success-bg, $success-bg-dark, $success-bg-light);
}
}
@mixin popover-success-css {
.popover-success {
@include popover-color-values($success-bg-text, $success-bg, $success-bg-light);
}
}
// ----------------------------------------------------------
// Warning mixins
// ----------------------------------------------------------
@mixin accordion-warning-css {
.accordion-warning {
@include accordion-color-values($warning-bg-text, $warning-bg, $warning-bg-dark, $warning-bg-light);
}
}
@mixin alert-warning-css {
.alert-warning {
@include alert-color-values($warning-bg-text, $warning-bg, $warning-bg-light);
}
}
@mixin background-warning-css {
.bg-warning {
@include background-color-values($warning-bg-text, $warning-bg);
}
}
@mixin badge-warning-css {
.badge-warning {
@include badge-color-values($warning-bg-text, $warning-bg, $warning-bg-light);
}
}
@mixin button-warning-css {
.btn-warning {
@include button-color-values($warning-bg-text, $warning-bg, $warning-bg-dark, $warning-bg-light, $warning-bg-dark);
}
}
@mixin card-warning-css {
.card-warning {
@include card-color-values($warning-bg-text, $warning-bg, $warning-bg-dark, $warning-bg-light, $warning-bg-light);
}
}
@mixin dialog-warning-css {
.dialog-warning {
@include dialog-color-values($warning-bg-text, $warning-bg, $warning-bg-light);
}
}
@mixin dropdown-warning-css {
.dropdown-warning {
@include dropdown-color-values($warning-bg-text, $warning-bg, $warning-bg-dark, $warning-bg-light, $warning-bg-light);
}
}
@mixin list-group-warning-css {
.list-group-warning {
@include list-group-color-values($warning-bg-text, $warning-bg, $warning-bg-dark, $warning-bg-light);
}
}
@mixin popover-warning-css {
.popover-warning {
@include popover-color-values($warning-bg-text, $warning-bg, $warning-bg-light);
}
}
// ----------------------------------------------------------
// Danger mixins
// ----------------------------------------------------------
@mixin accordion-danger-css {
.accordion-danger {
@include accordion-color-values($danger-bg-text, $danger-bg, $danger-bg-dark, $danger-bg-light);
}
}
@mixin alert-danger-css {
.alert-danger {
@include alert-color-values($danger-bg-text, $danger-bg, $danger-bg-light);
}
}
@mixin background-danger-css {
.bg-danger {
@include background-color-values($danger-bg-text, $danger-bg);
}
}
@mixin badge-danger-css {
.badge-danger {
@include badge-color-values($danger-bg-text, $danger-bg, $danger-bg-light);
}
}
@mixin button-danger-css {
.btn-danger {
@include button-color-values($danger-bg-text, $danger-bg, $danger-bg-dark, $danger-bg-light, $danger-bg-light);
}
}
@mixin card-danger-css {
.card-danger {
@include card-color-values($danger-bg-text, $danger-bg, $danger-bg-dark, $danger-bg-light, $danger-bg-light);
}
}
@mixin dialog-danger-css {
.dialog-danger {
@include dialog-color-values($danger-bg-text, $danger-bg, $danger-bg-light);
}
}
@mixin dropdown-danger-css {
.dropdown-danger {
@include dropdown-color-values($danger-bg-text, $danger-bg, $danger-bg-dark, $danger-bg-light, $danger-bg-light);
}
}
@mixin list-group-danger-css {
.list-group-danger {
@include list-group-color-values($danger-bg-text, $danger-bg, $danger-bg-dark, $danger-bg-light);
}
}
@mixin popover-danger-css {
.popover-danger {
@include popover-color-values($danger-bg-text, $danger-bg, $danger-bg-light);
}
}
// ----------------------------------------------------------
// Secondary mixins
// ----------------------------------------------------------
@mixin accordion-secondary-css {
.accordion-secondary {
@include accordion-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-dark, $secondary-bg-light);
}
}
@mixin alert-secondary-css {
.alert-secondary {
@include alert-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-light);
}
}
@mixin background-secondary-css {
.bg-secondary {
@include background-color-values($secondary-bg-text, $secondary-bg);
}
}
@mixin badge-secondary-css {
.badge-secondary {
@include badge-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-light);
}
}
@mixin button-secondary-css {
.btn-secondary {
@include button-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-dark, $secondary-bg-light, $secondary-bg-light);
}
}
@mixin card-secondary-css {
.card-secondary {
@include card-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-dark, $secondary-bg-light, $secondary-bg-light);
}
}
@mixin dialog-secondary-css {
.dialog-secondary {
@include dialog-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-light);
}
}
@mixin dropdown-secondary-css {
.dropdown-secondary {
@include dropdown-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-dark, $secondary-bg-light, $secondary-bg-light);
}
}
@mixin list-group-secondary-css {
.list-group-secondary {
@include list-group-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-dark, $secondary-bg-light);
}
}
@mixin popover-secondary-css {
.popover-secondary {
@include popover-color-values($secondary-bg-text, $secondary-bg, $secondary-bg-light);
}
}
// ----------------------------------------------------------
// Grouped mixins
// ----------------------------------------------------------
@mixin primary-utilities-css {
@include accordion-primary-css;
@include alert-primary-css;
@include background-primary-css;
@include badge-primary-css;
@include button-primary-css;
@include card-primary-css;
@include dialog-primary-css;
@include dropdown-primary-css;
@include list-group-primary-css;
@include popover-primary-css;
}
@mixin info-utilities-css {
@include accordion-info-css;
@include alert-info-css;
@include background-info-css;
@include badge-info-css;
@include button-info-css;
@include card-info-css;
@include dialog-info-css;
@include dropdown-info-css;
@include list-group-info-css;
@include popover-info-css;
}
@mixin success-utilities-css {
@include accordion-success-css;
@include alert-success-css;
@include background-success-css;
@include badge-success-css;
@include button-success-css;
@include card-success-css;
@include dialog-success-css;
@include dropdown-success-css;
@include list-group-success-css;
@include popover-success-css;
}
@mixin warning-utilities-css {
@include accordion-warning-css;
@include alert-warning-css;
@include background-warning-css;
@include badge-warning-css;
@include button-warning-css;
@include card-warning-css;
@include dialog-warning-css;
@include dropdown-warning-css;
@include list-group-warning-css;
@include popover-warning-css;
}
@mixin danger-utilities-css {
@include accordion-danger-css;
@include alert-danger-css;
@include background-danger-css;
@include badge-danger-css;
@include button-danger-css;
@include card-danger-css;
@include dialog-danger-css;
@include dropdown-danger-css;
@include list-group-danger-css;
@include popover-danger-css;
}
@mixin secondary-utilities-css {
@include accordion-secondary-css;
@include alert-secondary-css;
@include background-secondary-css;
@include badge-secondary-css;
@include button-secondary-css;
@include card-secondary-css;
@include dialog-secondary-css;
@include dropdown-secondary-css;
@include list-group-secondary-css;
@include popover-secondary-css;
}
@mixin semantic-accordions-css {
@include accordion-primary-css;
@include accordion-info-css;
@include accordion-success-css;
@include accordion-warning-css;
@include accordion-danger-css;
@include accordion-secondary-css;
}
@mixin semantic-alerts-css {
@include alert-primary-css;
@include alert-info-css;
@include alert-success-css;
@include alert-warning-css;
@include alert-danger-css;
@include alert-secondary-css;
}
@mixin semantic-backgrounds-css {
@include background-primary-css;
@include background-info-css;
@include background-success-css;
@include background-warning-css;
@include background-danger-css;
@include background-secondary-css;
}
@mixin semantic-badges-css {
@include badge-primary-css;
@include badge-info-css;
@include badge-success-css;
@include badge-warning-css;
@include badge-danger-css;
@include badge-secondary-css;
}
@mixin semantic-buttons-css {
@include button-primary-css;
@include button-info-css;
@include button-success-css;
@include button-warning-css;
@include button-danger-css;
@include button-secondary-css;
}
@mixin semantic-cards-css {
@include card-primary-css;
@include card-info-css;
@include card-success-css;
@include card-warning-css;
@include card-danger-css;
@include card-secondary-css;
}
@mixin semantic-dialogs-css {
@include dialog-primary-css;
@include dialog-info-css;
@include dialog-success-css;
@include dialog-warning-css;
@include dialog-danger-css;
@include dialog-secondary-css;
}
@mixin semantic-dropdowns-css {
@include dropdown-primary-css;
@include dropdown-info-css;
@include dropdown-success-css;
@include dropdown-warning-css;
@include dropdown-danger-css;
@include dropdown-secondary-css;
}
@mixin semantic-list-groups-css {
@include list-group-primary-css;
@include list-group-info-css;
@include list-group-success-css;
@include list-group-warning-css;
@include list-group-danger-css;
@include list-group-secondary-css;
}
@mixin semantic-popovers-css {
@include popover-primary-css;
@include popover-info-css;
@include popover-success-css;
@include popover-warning-css;
@include popover-danger-css;
@include popover-secondary-css;
}
@mixin semantic-utilities-css {
@include primary-utilities-css;
@include info-utilities-css;
@include success-utilities-css;
@include warning-utilities-css;
@include danger-utilities-css;
@include secondary-utilities-css;
}color/utilities/color-mixins.scss
// ----------------------------------------------------------
// Color mixins
// ----------------------------------------------------------
@mixin accordion-color-values($text-color, $background, $focus, $border) {
--summary-text: #{$text-color};
--ico: #{$text-color};
--summary-bg: #{$background};
--summary-focus: #{$focus};
--accordion-bd-color: #{$border};
}
@mixin alert-color-values($text-color, $background, $border) {
--alert-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--alert-bg: #{$background};
--alert-bd-color: #{$border};
}
@mixin background-color-values($text-color, $background) {
--bg-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--bg-col: #{$background};
}
@mixin badge-color-values($text-color, $background, $border) {
--badge-text: #{$text-color};
--ico: #{$text-color};
--badge-bg: #{$background};
--badge-bd-color: #{$border};
}
@mixin button-color-values($text-color, $background, $hover, $focus, $border) {
--btn-text: #{$text-color};
--ico: #{$text-color};
--btn-bg: #{$background};
--btn-bd-color: #{$border};
--btn-hover: #{$hover};
--focus-color: #{$focus};
}
@mixin card-color-values($text-color, $background, $hover, $focus, $border) {
--card-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--card-bg: #{$background};
--card-text-hover: #{$text-color};
--card-hover: #{$hover};
--card-bd-color: #{$border};
--card-focus-color: #{$focus};
--card-title-bg: #{$background};
}
@mixin dialog-color-values($text-color, $background, $border) {
--dialog-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--dialog-bg: #{$background};
--dialog-bd-color: #{$border};
--dialog-title-bg: #{$background};
}
@mixin dropdown-color-values($text-color, $background, $hover, $focus, $border) {
--dropdown-text: #{$text-color};
--dropdown-btn-text: #{$text-color};
--dropdown-ico: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-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($text-color, $background, $hover, $border) {
--list-group-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--list-group-bg: #{$background};
--list-group-dt-bg: #{$background};
--list-group-hover: #{$hover};
--list-group-bd-color: #{$border};
}
@mixin popover-color-values($text-color, $background, $border) {
--popover-text: #{$text-color};
--ico: #{$text-color};
--link: #{$text-color};
--visited: #{$text-color};
--hover: #{$text-color};
--popover-bg: #{$background};
--popover-bd-color: #{$border};
}