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, utilities and modifier classes with function based names, they provide a lightweight alternative to using the color variables, color utilities and color modifiers.
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 can be customized as required.
Utilities (anchor)
Backgrounds (anchor)
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<div class="bg-primary p-3">Primary</div>
<div class="bg-info p-3">Info</div>
<div class="bg-success p-3">Success</div>
<div class="bg-warning p-3">Warning</div>
<div class="bg-danger p-3">Danger</div>
<div class="bg-secondary p-3">Secondary</div>Borders (anchor)
Border color utilities that can be used with the borders utilities or any border styles.
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<div class="bd bd-primary p-3">Primary</div>
<div class="bd bd-info p-3">Info</div>
<div class="bd bd-success p-3">Success</div>
<div class="bd bd-warning p-3">Warning</div>
<div class="bd bd-danger p-3">Danger</div>
<div class="bd bd-secondary p-3">Secondary</div>Gradients (anchor)
Primary
Info
Success
Warning
Danger
Secondary
Example HTML
<div class="gradient-primary p-3">Primary</div>
<div class="gradient-info p-3">Info</div>
<div class="gradient-success p-3">Success</div>
<div class="gradient-warning p-3">Warning</div>
<div class="gradient-danger p-3">Danger</div>
<div class="gradient-secondary p-3">Secondary</div>Modifiers (anchor)
The modifiers use the variables above to create color modifier classes for the following components by leveraging the default CSS variables used within StyleMods styles.
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>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 include the variable tokens only in your preferred wrapper to include them with other variables:
custom.scss
@use "stylemods/scss" as *;
:where(html) {
@include semantic-variables;
<-- other variables -->
}Utilities (anchor)
All can be included with a single mixin:
custom.scss
@use "stylemods/scss" as *;
@include semantic-variables-css;
@include semantic-utilities-css;Or individually:
custom.scss
@use "stylemods/scss" as *;
@include semantic-variables-css;
@include semantic-backgrounds-css;
@include semantic-borders-css;
@include semantic-gradients-css;Modifiers (anchor)
The modifiers can be included with a single mixin:
custom.scss
@use "stylemods/scss" as *;
@include semantic-variables-css;
@include semantic-modifiers-css;Or individually:
custom.scss
@use "stylemods/scss" as *;
@include semantic-variables-css;
@include semantic-accordions-css;
@include semantic-alerts-css;
@include semantic-badges-css;
@include semantic-buttons-css;
@include semantic-cards-css;
@include semantic-dialogs-css;
@include semantic-dropdowns-css;
@include semantic-list-groups-css;
@include semantic-popovers-css;Combined (anchor)
You can also include the variables, utilities and modifiers using a single mixin:
custom.scss
@use "stylemods/scss" as *;
@include semantic-colors-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:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-semantic-variables: true;
$enable-semantic-utilities: true;
$enable-semantic-modifiers: true;The utilities and modifiers can also be enabled individually:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-semantic-variables: true;
// Individual utilities
$enable-semantic-backgrounds: true;
$enable-semantic-borders: true;
$enable-semantic-gradients: true;
// Individual modifiers
$enable-semantic-accordions: true;
$enable-semantic-alerts: true;
$enable-semantic-badges: true;
$enable-semantic-buttons: true;
$enable-semantic-dialogs: true;
$enable-semantic-dropdowns: true;
$enable-semantic-cards: true;
$enable-semantic-list-groups: true;
$enable-semantic-popovers: 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.
color/semantic.scss
// ----------------------------------------------------------
// Semantic variables
// ----------------------------------------------------------
@use "blue" as *;
@use "green" as *;
@use "red" as *;
@use "orange" as *;
@use "cyan" as *;
$semantic-tokens: ':where(html)' !default;
$primary: $blue !default;
$info: $cyan !default;
$success: $green !default;
$warning: $orange !default;
$danger: $red !default;
$secondary: #d3d3d3 !default; // HEX equivalent of $gray-2
$primary-light: color-mix(in srgb, var(--primary) 78%, #fff) !default;
$info-light: color-mix(in srgb, var(--info) 50%, #fff) !default;
$success-light: color-mix(in srgb, var(--success) 80%, #fff) !default;
$warning-light: color-mix(in srgb, var(--warning) 75%, #fff) !default;
$danger-light: color-mix(in srgb, var(--danger) 82%, #fff) !default;
$secondary-light: color-mix(in srgb, var(--secondary) 80%, #fff) !default;
$primary-dark: color-mix(in srgb, var(--primary) 78%, #000) !default;
$info-dark: color-mix(in srgb, var(--info) 82%, #000) !default;
$success-dark: color-mix(in srgb, var(--success) 80%, #000) !default;
$warning-dark: color-mix(in srgb, var(--warning) 87%, #000) !default;
$danger-dark: color-mix(in srgb, var(--danger) 84%, #000) !default;
$secondary-dark: color-mix(in srgb, var(--secondary) 80%, #000) !default;
$primary-gradient: linear-gradient(180deg, var(--primary-light), var(--primary), var(--primary-dark)) !default;
$info-gradient: linear-gradient(180deg, var(--info-light), var(--info), var(--info-dark)) !default;
$success-gradient: linear-gradient(180deg, var(--success-light), var(--success), var(--success-dark)) !default;
$warning-gradient: linear-gradient(180deg, var(--warning-light), var(--warning), var(--warning-dark)) !default;
$danger-gradient: linear-gradient(180deg, var(--danger-light), var(--danger), var(--danger-dark)) !default;
$secondary-gradient: linear-gradient(180deg, var(--secondary-light), var(--secondary), var(--secondary-dark)) !default;
$semantic-color-values:
"primary" #fff var(--primary) var(--primary-dark) var(--primary-light) $primary-gradient,
"info" #000 var(--info) var(--info-dark) var(--info-light) $info-gradient,
"success" #fff var(--success) var(--success-dark) var(--success-light) $success-gradient,
"warning" #000 var(--warning) var(--warning-dark) var(--warning-light) $warning-gradient,
"danger" #fff var(--danger) var(--danger-dark) var(--danger-light) $danger-gradient,
"secondary" #000 var(--secondary) var(--secondary-dark) var(--secondary-light) $secondary-gradient,
!default;
$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;color/mixins/semantic.scss
// ----------------------------------------------------------
// Semantic utilities
// ----------------------------------------------------------
@use "../semantic" as *;
// ----------------------------------------------------------
// Variables
// ----------------------------------------------------------
@mixin semantic-variables {
@each $name, $color in $semantic-token-values {
--#{$name}: #{$color};
}
}
@mixin semantic-variables-css {
#{$semantic-tokens} {
@include semantic-variables;
}
}
// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
@mixin semantic-backgrounds-css {
@each $name, $text, $background in $semantic-color-values {
.bg-#{$name} {
color: $text;
background-color: $background;
}
}
}
@mixin semantic-borders-css {
@each $name, $color in $semantic-color-values {
.bd-#{$name} {
border-color: var(--#{$name});
}
}
}
@mixin semantic-gradients-css {
@each $name, $text, $background, $darken, $lighten, $gradient in $semantic-color-values {
.gradient-#{$name} {
color: $text;
background-image: $gradient;
}
}
}
// ----------------------------------------------------------
// Modifiers
// ----------------------------------------------------------
@mixin semantic-accordions-css {
@each $name, $color, $background, $focus, $border in $semantic-color-values {
.accordion-#{$name} {
--summary-text: #{$color};
--ico: #{$color};
--summary-bg: #{$background};
--summary-focus: #{$focus};
--accordion-bd-color: #{$border};
}
}
}
@mixin semantic-alerts-css {
@each $name, $color, $background, $border in $semantic-color-values {
.alert-#{$name} {
--alert-text: #{$color};
--ico: #{$color};
--link: #{$color};
--visited: #{$color};
--hover: #{$color};
--alert-bg: #{$background};
--alert-bd-color: #{$border};
}
}
}
@mixin semantic-badges-css {
@each $name, $color, $background, $border in $semantic-color-values {
.badge-#{$name} {
--badge-text: #{$color};
--ico: #{$color};
--badge-bg: #{$background};
--badge-bd-color: #{$border};
}
}
}
@mixin semantic-buttons-css {
@each $name, $color, $background, $hover, $border in $semantic-color-values {
.btn-#{$name} {
--btn-text: #{$color};
--ico: #{$color};
--btn-bg: #{$background};
--btn-bd-color: #{$border};
--btn-hover: #{$hover};
--focus-color: #{$border};
}
}
}
@mixin semantic-cards-css {
@each $name, $color, $background, $hover, $border in $semantic-color-values {
.card-#{$name} {
--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: #{$border};
--card-title-bg: #{$background};
}
}
}
@mixin semantic-dialogs-css {
@each $name, $color, $background, $border in $semantic-color-values {
.dialog-#{$name} {
--dialog-text: #{$color};
--ico: #{$color};
--link: #{$color};
--visited: #{$color};
--hover: #{$color};
--dialog-bg: #{$background};
--dialog-bd-color: #{$border};
--dialog-title-bg: #{$background};
}
}
}
@mixin semantic-dropdowns-css {
@each $name, $color, $background, $hover, $border in $semantic-color-values {
.dropdown-#{$name} {
--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: #{$border};
}
}
}
@mixin semantic-list-groups-css {
@each $name, $color, $background, $hover, $border in $semantic-color-values {
.list-group-#{$name} {
--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 semantic-popovers-css {
@each $name, $color, $background, $border in $semantic-color-values {
.popover-#{$name} {
--popover-text: #{$color};
--ico: #{$color};
--link: #{$color};
--visited: #{$color};
--hover: #{$color};
--popover-bg: #{$background};
--popover-bd-color: #{$border};
}
}
}
// Grouped mixins
@mixin semantic-utilities-css {
@include semantic-backgrounds-css;
@include semantic-borders-css;
@include semantic-gradients-css;
}
@mixin semantic-modifiers-css {
@include semantic-accordions-css;
@include semantic-alerts-css;
@include semantic-badges-css;
@include semantic-buttons-css;
@include semantic-cards-css;
@include semantic-dialogs-css;
@include semantic-dropdowns-css;
@include semantic-list-groups-css;
@include semantic-popovers-css;
}
// All
@mixin semantic-colors-css {
@include semantic-variables-css;
@include semantic-utilities-css;
@include semantic-modifiers-css;
}