Using the framework

The StyleMods framework is setup to enable selectively including over 500 different style modules using simple true or false statements in a configuration document.

Quickstart (anchor)

The recommended way to use the framework is in custom setup similar to the following that enables what's required in an overrides document that can also be used to customize the default styles leaving all the source files unchanged:

/styles/
 - custom.scss
 - overrides.scss
 /stylemods/

overrides.scss

@use 'stylemods/scss/configuration' with (
  $enable-typography: true,
  $enable-forms-buttons: true,
  $enable-vis-hidden: true,
);

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

Editing the source files (anchor)

If preferred you can also enable elements directly in the configuration.scss document provided you make backups of any changes made when updating StyleMods.

configuration.scss

// Content
$enable-typography:             true !default;
$enable-forms-buttons:          true !default;
$enable-tables:                 false !default;
$enable-smooth-scroll:          false !default;
$enable-view-transition:        false !default;
$enable-vis-hidden:             true !default;

Please note the configuration.scss document (see source below) includes 500+ options for enabling which depending on what you're using might make it impractical to update manually when new releases include new options.

Cascade layers (anchor)

If required the styles can be compiled using cascade layers that can be customized to project specifications. For demonstrative purposes the default values are used below to explain how they work, it's recommended if using layers to configure them as described above.

The default names used for the enabled layers:

configuration.scss

$color-layer:         color !default;
$content-layer:       content !default;
$components-layer:    components !default;
$utilities-layer:     utilities !default;
$layout-layer:        layout !default;
$icons-layer:         icons !default;

The layer order can be re-arranged and/or expanded to include custom layers:

configuration.scss

$layer-order: 'color, content, components, utilities, layout, icons' !default;

The layers are enabled individually if required:

configuration.scss

$enable-layer-order:        false !default;
$enable-color-layer:        false !default;
$enable-content-layer:      false !default;
$enable-components-layer:   false !default;
$enable-utilities-layer:    false !default;
$enable-layout-layer:       false !default;
$enable-icons-layer:        false !default;

If required utility and layout breakpoint modifiers (see below) are also enabled individually:

configuration.scss

$enable-utilities-layer-xxl:    false !default;
$enable-utilities-layer-xl:     false !default;
$enable-utilities-layer-lg:     false !default;
$enable-utilities-layer-md:     false !default;
$enable-utilities-layer-sm:     false !default;
$enable-utilities-layer-xs:     false !default;
$enable-utilities-layer-xxs:    false !default;
$enable-layout-layer-xxl:       false !default;
$enable-layout-layer-xl:        false !default;
$enable-layout-layer-lg:        false !default;
$enable-layout-layer-md:        false !default;
$enable-layout-layer-sm:        false !default;
$enable-layout-layer-xs:        false !default;
$enable-layout-layer-xxs:       false !default;

Breakpoints (anchor)

The breakpoints provided for responsive modifier classes, included with the borders, opacity and text utilities and the majority of the layout utilities, can be customized to your own values and the media query changed to suit your own preferences for design.

configuration.scss

$breakpoint-query:  'width <=' !default;
$breakpoint-xxl:    1920px !default;
$breakpoint-xl:     1600px !default;
$breakpoint-lg:     1280px !default;
$breakpoint-md:     1024px !default;
$breakpoint-sm:     768px !default;
$breakpoint-xs:     480px !default;
$breakpoint-xxs:    360px !default;

The breakpoints for the individual modules are enabled individually as required:

configuration.scss

$enable-text:       true !default;
$enable-gaps:       true !default;
$enable-text-sm:    true !default;
$enable-gaps-sm:    true !default;

Source code (anchor)

The framework is compiled from the following three documents, it uses the same Sass mixin method as using modules but wraps the individual mixins in Sass @if rules for enabling using 'true' statements as documented above.

configuration.scss

// ---------------------------------------------------------- 
// StyleMods framework configuration
// ----------------------------------------------------------
// Global variables token container
$variables-tokens:              ':where(html)' !default;

// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
$color-layer:                   color !default;
$content-layer:                 content !default;
$components-layer:              components !default;
$utilities-layer:               utilities !default;
$layout-layer:                  layout !default;
$icons-layer:                   icons !default;
$layer-order:                   'color, content, components, utilities, layout, icons' !default;

$enable-layer-order:            false !default;
$enable-color-layer:            false !default;
$enable-content-layer:          false !default;
$enable-components-layer:       false !default;
$enable-utilities-layer:        false !default;
$enable-layout-layer:           false !default;
$enable-icons-layer:            false !default;

$enable-utilities-layer-xxl:    false !default;
$enable-utilities-layer-xl:     false !default;
$enable-utilities-layer-lg:     false !default;
$enable-utilities-layer-md:     false !default;
$enable-utilities-layer-sm:     false !default;
$enable-utilities-layer-xs:     false !default;
$enable-utilities-layer-xxs:    false !default;
$enable-layout-layer-xxl:       false !default;
$enable-layout-layer-xl:        false !default;
$enable-layout-layer-lg:        false !default;
$enable-layout-layer-md:        false !default;
$enable-layout-layer-sm:        false !default;
$enable-layout-layer-xs:        false !default;
$enable-layout-layer-xxs:       false !default;

// ----------------------------------------------------------
// Breakpoints for enabled responsive modifiers
// ----------------------------------------------------------
$breakpoint-query:              'width &lt;=' !default;
$breakpoint-xxl:                1920px !default;
$breakpoint-xl:                 1600px !default;
$breakpoint-lg:                 1280px !default;
$breakpoint-md:                 1024px !default;
$breakpoint-sm:                 768px !default;
$breakpoint-xs:                 480px !default;
$breakpoint-xxs:                360px !default;

// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
$enable-typography:             false !default;
$enable-forms-buttons:          false !default;
$enable-tables:                 false !default;
$enable-vis-hidden:             false !default;
$enable-smooth-scroll:          false !default;
$enable-view-transition:        false !default;

// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
$enable-accordions:             false !default;
$enable-alerts:                 false !default;
$enable-badges:                 false !default;
$enable-buttons:                false !default;
$enable-cards:                  false !default;
$enable-dialogs:                false !default;
$enable-dialogs-transition:     false !default;
$enable-dropdowns:              false !default;
$enable-list-groups:            false !default;
$enable-popovers:               false !default;
$enable-popovers-transition:    false !default;

// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
$enable-backgrounds:            false !default;
$enable-borders:                false !default;
$enable-gradients:              false !default;
$enable-images:                 false !default;
$enable-lists:                  false !default;
$enable-opacity:                false !default;
$enable-shadows:                false !default;
$enable-text:                   false !default;

// ---------------------------------------------------------- 
// Colors
// ----------------------------------------------------------
// Color variables
$enable-surface:                false !default;
$enable-gray:                   false !default;
$enable-blue:                   false !default;
$enable-red:                    false !default;
$enable-green:                  false !default;
$enable-orange:                 false !default;
$enable-cyan:                   false !default;
$enable-yellow:                 false !default;
$enable-purple:                 false !default;
$enable-pink:                   false !default;
$enable-olive:                  false !default;
$enable-tan:                    false !default;
$enable-rosewood:               false !default;
$enable-steelblue:              false !default;

// Theme color variables
$enable-theme-surface:          false !default;
$enable-theme-typography:       false !default;
$enable-theme-forms-buttons:    false !default;
$enable-theme-tables:           false !default;
$enable-theme-accordions:       false !default;
$enable-theme-alerts:           false !default;
$enable-theme-badges:           false !default;
$enable-theme-borders:          false !default;
$enable-theme-dialogs:          false !default;
$enable-theme-cards:            false !default;
$enable-theme-list-groups:      false !default;
$enable-theme-popovers:         false !default;

// Theme switch
$enable-theme-switch:           false !default;

// Grouped color utilities
$enable-gray-utilities:         false !default;
$enable-blue-utilities:         false !default;
$enable-red-utilities:          false !default;
$enable-green-utilities:        false !default;
$enable-orange-utilities:       false !default;
$enable-cyan-utilities:         false !default;
$enable-yellow-utilities:       false !default;
$enable-purple-utilities:       false !default;
$enable-pink-utilities:         false !default;
$enable-olive-utilities:        false !default;
$enable-tan-utilities:          false !default;
$enable-rosewood-utilities:     false !default;
$enable-steelblue-utilities:    false !default;

// Individual color utilities
$enable-gray-accordions:        false !default;
$enable-gray-alerts:            false !default;
$enable-gray-badges:            false !default;
$enable-gray-backgrounds:       false !default;
$enable-gray-buttons:           false !default;
$enable-gray-borders:           false !default;
$enable-gray-dialogs:           false !default;
$enable-gray-cards:             false !default;
$enable-gray-list-groups:       false !default;
$enable-gray-popovers:          false !default;

$enable-blue-accordions:        false !default;
$enable-blue-alerts:            false !default;
$enable-blue-badges:            false !default;
$enable-blue-backgrounds:       false !default;
$enable-blue-buttons:           false !default;
$enable-blue-borders:           false !default;
$enable-blue-dialogs:           false !default;
$enable-blue-cards:             false !default;
$enable-blue-list-groups:       false !default;
$enable-blue-popovers:          false !default;

$enable-red-accordions:         false !default;
$enable-red-alerts:             false !default;
$enable-red-badges:             false !default;
$enable-red-backgrounds:        false !default;
$enable-red-buttons:            false !default;
$enable-red-borders:            false !default;
$enable-red-dialogs:            false !default;
$enable-red-cards:              false !default;
$enable-red-list-groups:        false !default;
$enable-red-popovers:           false !default;

$enable-green-accordions:       false !default;
$enable-green-alerts:           false !default;
$enable-green-badges:           false !default;
$enable-green-backgrounds:      false !default;
$enable-green-buttons:          false !default;
$enable-green-borders:          false !default;
$enable-green-dialogs:          false !default;
$enable-green-cards:            false !default;
$enable-green-list-groups:      false !default;
$enable-green-popovers:         false !default;

$enable-orange-accordions:      false !default;
$enable-orange-alerts:          false !default;
$enable-orange-badges:          false !default;
$enable-orange-backgrounds:     false !default;
$enable-orange-buttons:         false !default;
$enable-orange-borders:         false !default;
$enable-orange-dialogs:         false !default;
$enable-orange-cards:           false !default;
$enable-orange-list-groups:     false !default;
$enable-orange-popovers:        false !default;

$enable-cyan-accordions:        false !default;
$enable-cyan-alerts:            false !default;
$enable-cyan-badges:            false !default;
$enable-cyan-backgrounds:       false !default;
$enable-cyan-buttons:           false !default;
$enable-cyan-borders:           false !default;
$enable-cyan-dialogs:           false !default;
$enable-cyan-cards:             false !default;
$enable-cyan-list-groups:       false !default;
$enable-cyan-popovers:          false !default;

$enable-yellow-accordions:      false !default;
$enable-yellow-alerts:          false !default;
$enable-yellow-badges:          false !default;
$enable-yellow-backgrounds:     false !default;
$enable-yellow-buttons:         false !default;
$enable-yellow-borders:         false !default;
$enable-yellow-dialogs:         false !default;
$enable-yellow-cards:           false !default;
$enable-yellow-list-groups:     false !default;
$enable-yellow-popovers:        false !default;

$enable-purple-accordions:      false !default;
$enable-purple-alerts:          false !default;
$enable-purple-badges:          false !default;
$enable-purple-backgrounds:     false !default;
$enable-purple-buttons:         false !default;
$enable-purple-borders:         false !default;
$enable-purple-dialogs:         false !default;
$enable-purple-cards:           false !default;
$enable-purple-list-groups:     false !default;
$enable-purple-popovers:        false !default;

$enable-pink-accordions:        false !default;
$enable-pink-alerts:            false !default;
$enable-pink-badges:            false !default;
$enable-pink-backgrounds:       false !default;
$enable-pink-buttons:           false !default;
$enable-pink-borders:           false !default;
$enable-pink-dialogs:           false !default;
$enable-pink-cards:             false !default;
$enable-pink-list-groups:       false !default;
$enable-pink-popovers:          false !default;

$enable-olive-accordions:       false !default;
$enable-olive-alerts:           false !default;
$enable-olive-badges:           false !default;
$enable-olive-backgrounds:      false !default;
$enable-olive-buttons:          false !default;
$enable-olive-borders:          false !default;
$enable-olive-dialogs:          false !default;
$enable-olive-cards:            false !default;
$enable-olive-list-groups:      false !default;
$enable-olive-popovers:         false !default;

$enable-tan-accordions:         false !default;
$enable-tan-alerts:             false !default;
$enable-tan-badges:             false !default;
$enable-tan-backgrounds:        false !default;
$enable-tan-buttons:            false !default;
$enable-tan-borders:            false !default;
$enable-tan-dialogs:            false !default;
$enable-tan-cards:              false !default;
$enable-tan-list-groups:        false !default;
$enable-tan-popovers:           false !default;

$enable-rosewood-accordions:    false !default;
$enable-rosewood-alerts:        false !default;
$enable-rosewood-badges:        false !default;
$enable-rosewood-backgrounds:   false !default;
$enable-rosewood-buttons:       false !default;
$enable-rosewood-borders:       false !default;
$enable-rosewood-dialogs:       false !default;
$enable-rosewood-cards:         false !default;
$enable-rosewood-list-groups:   false !default;
$enable-rosewood-popovers:      false !default;

$enable-steelblue-accordions:   false !default;
$enable-steelblue-alerts:       false !default;
$enable-steelblue-badges:       false !default;
$enable-steelblue-backgrounds:  false !default;
$enable-steelblue-buttons:      false !default;
$enable-steelblue-borders:      false !default;
$enable-steelblue-dialogs:      false !default;
$enable-steelblue-cards:        false !default;
$enable-steelblue-list-groups:  false !default;
$enable-steelblue-popovers:     false !default;

// ---------------------------------------------------------- 
// Layouts
// ----------------------------------------------------------
$enable-align:                  false !default;
$enable-aspect-ratio:           false !default;
$enable-block:                  false !default;
$enable-columns:                false !default;
$enable-containers:             false !default;
$enable-display:                false !default;
$enable-flex:                   false !default;
$enable-grid:                   false !default;
$enable-inset:                  false !default;
$enable-justify:                false !default;
$enable-object-fit:             false !default;
$enable-order:                  false !default;
$enable-overflow:               false !default;
$enable-overscroll:             false !default;
$enable-place:                  false !default;
$enable-position:               false !default;
$enable-scrollbars:             false !default;
$enable-sizes:                  false !default;
$enable-z-index:                false !default;

// Spacing
$enable-gaps:                   false !default;
$enable-margins:                false !default;
$enable-padding:                false !default;

// Grid columns and rows
$enable-grid-layouts:           false !default;

// Grid templates
$enable-grid-utility:           false !default;
$enable-grid-fractions:         false !default;
$enable-grid-auto:              false !default;

// ----------------------------------------------------------
// XXL breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-xxl:            false !default;
$enable-opacity-xxl:            false !default;
$enable-text-xxl:               false !default;

// Layout
$enable-align-xxl:              false !default;
$enable-aspect-ratio-xxl:       false !default;
$enable-block-xxl:              false !default;
$enable-columns-xxl:            false !default;
$enable-display-xxl:            false !default;
$enable-flex-xxl:               false !default;
$enable-grid-xxl:               false !default;
$enable-inset-xxl:              false !default;
$enable-justify-xxl:            false !default;
$enable-object-fit-xxl:         false !default;
$enable-order-xxl:              false !default;
$enable-overflow-xxl:           false !default;
$enable-overscroll-xxl:         false !default;
$enable-place-xxl:              false !default;
$enable-position-xxl:           false !default;
$enable-scrollbars-xxl:         false !default;
$enable-sizes-xxl:              false !default;
$enable-z-index-xxl:            false !default;

// Spacing
$enable-gaps-xxl:               false !default;
$enable-margins-xxl:            false !default;
$enable-padding-xxl:            false !default;

// Grid columns and rows
$enable-grid-layouts-xxl:       false !default;

// Grid templates
$enable-grid-utility-xxl:       false !default;
$enable-grid-fractions-xxl:     false !default;
$enable-grid-auto-xxl:          false !default;

// ----------------------------------------------------------
// XL breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-xl:             false !default;
$enable-opacity-xl:             false !default;
$enable-text-xl:                false !default;

// Layout
$enable-align-xl:               false !default;
$enable-aspect-ratio-xl:        false !default;
$enable-block-xl:               false !default;
$enable-columns-xl:             false !default;
$enable-display-xl:             false !default;
$enable-flex-xl:                false !default;
$enable-grid-xl:                false !default;
$enable-inset-xl:               false !default;
$enable-justify-xl:             false !default;
$enable-object-fit-xl:          false !default;
$enable-order-xl:               false !default;
$enable-overflow-xl:            false !default;
$enable-overscroll-xl:          false !default;
$enable-place-xl:               false !default;
$enable-position-xl:            false !default;
$enable-scrollbars-xl:          false !default;
$enable-sizes-xl:               false !default;
$enable-z-index-xl:             false !default;

// Spacing
$enable-gaps-xl:                false !default;
$enable-margins-xl:             false !default;
$enable-padding-xl:             false !default;

// Grid columns and rows
$enable-grid-layouts-xl:        false !default;

// Grid templates
$enable-grid-utility-xl:        false !default;
$enable-grid-fractions-xl:      false !default;
$enable-grid-auto-xl:           false !default;

// ----------------------------------------------------------
// LG breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-lg:             false !default;
$enable-opacity-lg:             false !default;
$enable-text-lg:                false !default;

// Layout
$enable-align-lg:               false !default;
$enable-aspect-ratio-lg:        false !default;
$enable-block-lg:               false !default;
$enable-columns-lg:             false !default;
$enable-display-lg:             false !default;
$enable-flex-lg:                false !default;
$enable-grid-lg:                false !default;
$enable-inset-lg:               false !default;
$enable-justify-lg:             false !default;
$enable-object-fit-lg:          false !default;
$enable-order-lg:               false !default;
$enable-overflow-lg:            false !default;
$enable-overscroll-lg:          false !default;
$enable-place-lg:               false !default;
$enable-position-lg:            false !default;
$enable-scrollbars-lg:          false !default;
$enable-sizes-lg:               false !default;
$enable-z-index-lg:             false !default;

// Spacing
$enable-gaps-lg:                false !default;
$enable-margins-lg:             false !default;
$enable-padding-lg:             false !default;

// Grid columns and rows
$enable-grid-layouts-lg:        false !default;

// Grid templates
$enable-grid-utility-lg:        false !default;
$enable-grid-fractions-lg:      false !default;
$enable-grid-auto-lg:           false !default;

// ----------------------------------------------------------
// MD breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-md:             false !default;
$enable-opacity-md:             false !default;
$enable-text-md:                false !default;

// Layout
$enable-align-md:               false !default;
$enable-aspect-ratio-md:        false !default;
$enable-block-md:               false !default;
$enable-columns-md:             false !default;
$enable-display-md:             false !default;
$enable-flex-md:                false !default;
$enable-grid-md:                false !default;
$enable-inset-md:               false !default;
$enable-justify-md:             false !default;
$enable-object-fit-md:          false !default;
$enable-order-md:               false !default;
$enable-overflow-md:            false !default;
$enable-overscroll-md:          false !default;
$enable-place-md:               false !default;
$enable-position-md:            false !default;
$enable-scrollbars-md:          false !default;
$enable-sizes-md:               false !default;
$enable-z-index-md:             false !default;

// Spacing
$enable-gaps-md:                false !default;
$enable-margins-md:             false !default;
$enable-padding-md:             false !default;

// Grid columns and rows
$enable-grid-layouts-md:        false !default;

// Grid templates
$enable-grid-utility-md:        false !default;
$enable-grid-fractions-md:      false !default;
$enable-grid-auto-md:           false !default;

// ----------------------------------------------------------
// SM breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-sm:             false !default;
$enable-opacity-sm:             false !default;
$enable-text-sm:                false !default;

// Layout
$enable-align-sm:               false !default;
$enable-aspect-ratio-sm:        false !default;
$enable-block-sm:               false !default;
$enable-columns-sm:             false !default;
$enable-display-sm:             false !default;
$enable-flex-sm:                false !default;
$enable-grid-sm:                false !default;
$enable-inset-sm:               false !default;
$enable-justify-sm:             false !default;
$enable-object-fit-sm:          false !default;
$enable-order-sm:               false !default;
$enable-overflow-sm:            false !default;
$enable-overscroll-sm:          false !default;
$enable-place-sm:               false !default;
$enable-position-sm:            false !default;
$enable-scrollbars-sm:          false !default;
$enable-sizes-sm:               false !default;
$enable-z-index-sm:             false !default;

// Spacing
$enable-gaps-sm:                false !default;
$enable-margins-sm:             false !default;
$enable-padding-sm:             false !default;

// Grid columns and rows
$enable-grid-layouts-sm:        false !default;

// Grid templates
$enable-grid-utility-sm:        false !default;
$enable-grid-fractions-sm:      false !default;
$enable-grid-auto-sm:           false !default;

// ----------------------------------------------------------
// XS breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-xs:             false !default;
$enable-opacity-xs:             false !default;
$enable-text-xs:                false !default;

// Layout
$enable-align-xs:               false !default;
$enable-aspect-ratio-xs:        false !default;
$enable-block-xs:               false !default;
$enable-columns-xs:             false !default;
$enable-display-xs:             false !default;
$enable-flex-xs:                false !default;
$enable-grid-xs:                false !default;
$enable-inset-xs:               false !default;
$enable-justify-xs:             false !default;
$enable-object-fit-xs:          false !default;
$enable-order-xs:               false !default;
$enable-overflow-xs:            false !default;
$enable-overscroll-xs:          false !default;
$enable-place-xs:               false !default;
$enable-position-xs:            false !default;
$enable-scrollbars-xs:          false !default;
$enable-sizes-xs:               false !default;
$enable-z-index-xs:             false !default;

// Spacing
$enable-gaps-xs:                false !default;
$enable-margins-xs:             false !default;
$enable-padding-xs:             false !default;

// Grid columns and rows
$enable-grid-layouts-xs:        false !default;

// Grid templates
$enable-grid-utility-xs:        false !default;
$enable-grid-fractions-xs:      false !default;
$enable-grid-auto-xs:           false !default;

// ----------------------------------------------------------
// XXS breakpoints
// ----------------------------------------------------------
// Utilities
$enable-borders-xxs:            false !default;
$enable-opacity-xxs:            false !default;
$enable-text-xxs:               false !default;

// Layout
$enable-align-xxs:              false !default;
$enable-aspect-ratio-xxs:       false !default;
$enable-block-xxs:              false !default;
$enable-columns-xxs:            false !default;
$enable-display-xxs:            false !default;
$enable-flex-xxs:               false !default;
$enable-grid-xxs:               false !default;
$enable-inset-xxs:              false !default;
$enable-justify-xxs:            false !default;
$enable-object-fit-xxs:         false !default;
$enable-order-xxs:              false !default;
$enable-overflow-xxs:           false !default;
$enable-overscroll-xxs:         false !default;
$enable-place-xxs:              false !default;
$enable-position-xxs:           false !default;
$enable-scrollbars-xxs:         false !default;
$enable-sizes-xxs:              false !default;
$enable-z-index-xxs:            false !default;

// Spacing
$enable-gaps-xxs:               false !default;
$enable-margins-xxs:            false !default;
$enable-padding-xxs:            false !default;

// Grid columns and rows
$enable-grid-layouts-xxs:       false !default;

// Grid templates
$enable-grid-utility-xxs:       false !default;
$enable-grid-fractions-xxs:     false !default;
$enable-grid-auto-xxs:          false !default;

// ---------------------------------------------------------- 
// Icons
// ----------------------------------------------------------
// Icon utilities
$enable-icon-utilities-css:         false !default;
$enable-icon-links-css:             false !default;
$enable-icon-buttons-css:           false !default;

// Default icons
$enable-house-svg:                  false !default;
$enable-email-svg:                  false !default;
$enable-bars-svg:                   false !default;
$enable-dots-horizontal-svg:        false !default;
$enable-dots-vertical-svg:          false !default;
$enable-plus-svg:                   false !default;
$enable-minus-svg:                  false !default;
$enable-close-svg:                  false !default;
$enable-search-svg:                 false !default;
$enable-download-svg:               false !default;
$enable-info-box-svg:               false !default;
$enable-info-box-fill-svg:          false !default;
$enable-info-circle-svg:            false !default;
$enable-info-circle-fill-svg:       false !default;
$enable-question-circle-svg:        false !default;
$enable-question-circle-fill-svg:   false !default;
$enable-question-box-svg:           false !default;
$enable-question-box-fill-svg:      false !default;
$enable-box-svg:                    false !default;
$enable-pen-box-svg:                false !default;
$enable-close-box-svg:              false !default;
$enable-close-box-fill-svg:         false !default;
$enable-tick-box-svg:               false !default;
$enable-ext-link-svg:               false !default;
$enable-pg-link-svg:                false !default;
$enable-sun-svg:                    false !default;
$enable-moon-svg:                   false !default;
$enable-caret-down-svg:             false !default;
$enable-caret-up-svg:               false !default;
$enable-caret-left-svg:             false !default;
$enable-caret-right-svg:            false !default;
$enable-user-svg:                   false !default;
$enable-circle-svg:                 false !default;
$enable-circle-fill-svg:            false !default;
$enable-circle-inner-svg:           false !default;
$enable-circle-half-svg:            false !default;
$enable-circle-sm-svg:              false !default;
$enable-circle-fill-sm-svg:         false !default;
$enable-circle-inner-sm-svg:        false !default;
$enable-circle-half-sm-svg:         false !default;
$enable-image-svg:                  false !default;
$enable-image-fill-svg:             false !default;

// Brand icons
$enable-stylemods-svg:              false !default;
$enable-sass-svg:                   false !default;
$enable-github-svg:                 false !default;
$enable-twitter-svg:                false !default;
$enable-mastodon-svg:               false !default;
$enable-tiktok-svg:                 false !default;
$enable-facebook-svg:               false !default;
$enable-instagram-svg:              false !default;
$enable-pinterest-svg:              false !default;
$enable-codepen-svg:                false !default;
$enable-reddit-svg:                 false !default;
$enable-youtube-svg:                false !default;
$enable-rss-svg:                    false !default;

framework.scss

// ----------------------------------------------------------
// StyleMods framework styles
// ----------------------------------------------------------
@use "configuration" as *;
@use "index" as *;
@use "version" as *;
@include version;

// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
@mixin cascade-layers {
  @layer #{$layer-order};
}

// ---------------------------------------------------------- 
// Color variable tokens
// ----------------------------------------------------------
@mixin color-framework {
  #{$variables-tokens} {
    @if $enable-surface { @include surface-variables; }
    @if $enable-gray { @include gray-variables; }
    @if $enable-blue { @include blue-variables; }
    @if $enable-red { @include red-variables; }
    @if $enable-green { @include green-variables; }
    @if $enable-orange { @include orange-variables; }
    @if $enable-cyan { @include cyan-variables; }
    @if $enable-yellow { @include yellow-variables; }
    @if $enable-purple { @include purple-variables; }
    @if $enable-pink { @include pink-variables; }
    @if $enable-olive { @include olive-variables; }
    @if $enable-tan { @include tan-variables; }
    @if $enable-rosewood { @include rosewood-variables; }
    @if $enable-steelblue { @include steelblue-variables; }
    @if $enable-theme-surface { @include theme-surface-variables; }
    @if $enable-theme-typography { @include theme-typography-variables; }
    @if $enable-theme-forms-buttons { @include theme-forms-buttons-variables; }
    @if $enable-theme-tables { @include theme-tables-variables; }
    @if $enable-theme-accordions { @include theme-accordions-variables; }
    @if $enable-theme-alerts { @include theme-alert-variables; }
    @if $enable-theme-badges { @include theme-badge-variables; }
    @if $enable-theme-borders { @include theme-border-variables; }
    @if $enable-theme-dialogs { @include theme-dialog-variables; }
    @if $enable-theme-cards { @include theme-card-variables; }
    @if $enable-theme-list-groups { @include theme-list-group-variables; }
    @if $enable-theme-popovers { @include theme-popover-variables; }
  }
}

// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
@mixin content-framework {
  @if $enable-typography { @include typography-css; }
  @if $enable-forms-buttons { @include forms-buttons-css; }
  @if $enable-tables { @include tables-css; }
  @if $enable-vis-hidden { @include vis-hidden-css; }
  @media (prefers-reduced-motion: no-preference) { 
    @if $enable-smooth-scroll { @include smooth-scroll-css; }
    @if $enable-view-transition { @include view-transition-css; }
  }
}

// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
@mixin components-framework {
  @if $enable-accordions { @include accordions-css; }
  @if $enable-alerts { @include alerts-css; }
  @if $enable-badges { @include badges-css; }
  @if $enable-buttons { @include buttons-css; }
  @if $enable-cards { @include cards-css; }
  @if $enable-dialogs { @include dialog-styles-css; }
  @if $enable-dialogs-transition { @include dialog-transition-css; }
  @if $enable-dropdowns { @include dropdowns-css; }
  @if $enable-list-groups { @include list-groups-css; }
  @if $enable-popovers { @include popover-styles-css; }
  @if $enable-popovers-transition { @include popover-transition-css; }
  @if $enable-theme-switch { @include theme-switch-css; }
}

// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
@mixin utilities-framework {
  @if $enable-backgrounds { @include background-css; }
  @if $enable-borders { @include borders-css; }
  @if $enable-gradients { @include gradients-css; }
  @if $enable-images { @include images-css; }
  @if $enable-lists { @include lists-css; }
  @if $enable-opacity { @include opacity-css; }
  @if $enable-shadows { @include shadows-css; }
  @if $enable-text { @include text-css; }

  // Color utilities grouped
  @if $enable-gray-utilities { @include gray-utilities-css; }
  @if $enable-blue-utilities { @include blue-utilities-css; }
  @if $enable-red-utilities { @include red-utilities-css; }
  @if $enable-green-utilities { @include green-utilities-css; }
  @if $enable-orange-utilities { @include orange-utilities-css; }
  @if $enable-cyan-utilities { @include cyan-utilities-css; }
  @if $enable-yellow-utilities { @include yellow-utilities-css; }
  @if $enable-purple-utilities { @include purple-utilities-css; }
  @if $enable-pink-utilities { @include pink-utilities-css; }
  @if $enable-olive-utilities { @include olive-utilities-css; }
  @if $enable-tan-utilities { @include tan-utilities-css; }
  @if $enable-rosewood-utilities { @include rosewood-utilities-css; }
  @if $enable-steelblue-utilities { @include steelblue-utilities-css; }
  
  // Color utilities individual
  // Gray
  @if $enable-gray-accordions { @include accordion-gray-css; }
  @if $enable-gray-alerts { @include alert-gray-css; }
  @if $enable-gray-backgrounds { @include background-gray-css; }
  @if $enable-gray-badges { @include badge-gray-css; }
  @if $enable-gray-buttons { @include button-gray-css; }
  @if $enable-gray-cards { @include card-gray-css; }
  @if $enable-gray-dialogs { @include dialog-gray-css; }
  @if $enable-gray-list-groups { @include list-group-gray-css; }
  @if $enable-gray-popovers { @include popover-gray-css; }
  
  // Blue
  @if $enable-blue-accordions { @include accordion-blue-css; }
  @if $enable-blue-alerts { @include alert-blue-css; }
  @if $enable-blue-backgrounds { @include background-blue-css; }
  @if $enable-blue-badges { @include badge-blue-css; }
  @if $enable-blue-buttons { @include button-blue-css; }
  @if $enable-blue-cards { @include card-blue-css; }
  @if $enable-blue-dialogs { @include dialog-blue-css; }
  @if $enable-blue-list-groups { @include list-group-blue-css; }
  @if $enable-blue-popovers { @include popover-blue-css; }
  
  // Red
  @if $enable-red-accordions { @include accordion-red-css; }
  @if $enable-red-alerts { @include alert-red-css; }
  @if $enable-red-backgrounds { @include background-red-css; }
  @if $enable-red-badges { @include badge-red-css; }
  @if $enable-red-buttons { @include button-red-css; }
  @if $enable-red-cards { @include card-red-css; }
  @if $enable-red-dialogs { @include dialog-red-css; }
  @if $enable-red-list-groups { @include list-group-red-css; }
  @if $enable-red-popovers { @include popover-red-css; }
  
  // Green
  @if $enable-green-accordions { @include accordion-green-css; }
  @if $enable-green-alerts { @include alert-green-css; }
  @if $enable-green-backgrounds { @include background-green-css; }
  @if $enable-green-badges { @include badge-green-css; }
  @if $enable-green-buttons { @include button-green-css; }
  @if $enable-green-cards { @include card-green-css; }
  @if $enable-green-dialogs { @include dialog-green-css; }
  @if $enable-green-list-groups { @include list-group-green-css; }
  @if $enable-green-popovers { @include popover-green-css; }
  
  // Orange
  @if $enable-orange-accordions { @include accordion-orange-css; }
  @if $enable-orange-alerts { @include alert-orange-css; }
  @if $enable-orange-backgrounds { @include background-orange-css; }
  @if $enable-orange-badges { @include badge-orange-css; }
  @if $enable-orange-buttons { @include button-orange-css; }
  @if $enable-orange-cards { @include card-orange-css; }
  @if $enable-orange-dialogs { @include dialog-orange-css; }
  @if $enable-orange-list-groups { @include list-group-orange-css; }
  @if $enable-orange-popovers { @include popover-orange-css; }
  
  // Cyan
  @if $enable-cyan-accordions { @include accordion-cyan-css; }
  @if $enable-cyan-alerts { @include alert-cyan-css; }
  @if $enable-cyan-backgrounds { @include background-cyan-css; }
  @if $enable-cyan-badges { @include badge-cyan-css; }
  @if $enable-cyan-buttons { @include button-cyan-css; }
  @if $enable-cyan-cards { @include card-cyan-css; }
  @if $enable-cyan-dialogs { @include dialog-cyan-css; }
  @if $enable-cyan-list-groups { @include list-group-cyan-css; }
  @if $enable-cyan-popovers { @include popover-cyan-css; }
  
  // Yellow
  @if $enable-yellow-accordions { @include accordion-yellow-css; }
  @if $enable-yellow-alerts { @include alert-yellow-css; }
  @if $enable-yellow-backgrounds { @include background-yellow-css; }
  @if $enable-yellow-badges { @include badge-yellow-css; }
  @if $enable-yellow-buttons { @include button-yellow-css; }
  @if $enable-yellow-cards { @include card-yellow-css; }
  @if $enable-yellow-dialogs { @include dialog-yellow-css; }
  @if $enable-yellow-list-groups { @include list-group-yellow-css; }
  @if $enable-yellow-popovers { @include popover-yellow-css; }
  
  // Purple
  @if $enable-purple-accordions { @include accordion-purple-css; }
  @if $enable-purple-alerts { @include alert-purple-css; }
  @if $enable-purple-backgrounds { @include background-purple-css; }
  @if $enable-purple-badges { @include badge-purple-css; }
  @if $enable-purple-buttons { @include button-purple-css; }
  @if $enable-purple-cards { @include card-purple-css; }
  @if $enable-purple-dialogs { @include dialog-purple-css; }
  @if $enable-purple-list-groups { @include list-group-purple-css; }
  @if $enable-purple-popovers { @include popover-purple-css; }
  
  // Pink
  @if $enable-pink-accordions { @include accordion-pink-css; }
  @if $enable-pink-alerts { @include alert-pink-css; }
  @if $enable-pink-backgrounds { @include background-pink-css; }
  @if $enable-pink-badges { @include badge-pink-css; }
  @if $enable-pink-buttons { @include button-pink-css; }
  @if $enable-pink-cards { @include card-pink-css; }
  @if $enable-pink-dialogs { @include dialog-pink-css; }
  @if $enable-pink-list-groups { @include list-group-pink-css; }
  @if $enable-pink-popovers { @include popover-pink-css; }
  
  // Olive
  @if $enable-olive-accordions { @include accordion-olive-css; }
  @if $enable-olive-alerts { @include alert-olive-css; }
  @if $enable-olive-backgrounds { @include background-olive-css; }
  @if $enable-olive-badges { @include badge-olive-css; }
  @if $enable-olive-buttons { @include button-olive-css; }
  @if $enable-olive-cards { @include card-olive-css; }
  @if $enable-olive-dialogs { @include dialog-olive-css; }
  @if $enable-olive-list-groups { @include list-group-olive-css; }
  @if $enable-olive-popovers { @include popover-olive-css; }
  
  // Tan
  @if $enable-tan-accordions { @include accordion-tan-css; }
  @if $enable-tan-alerts { @include alert-tan-css; }
  @if $enable-tan-backgrounds { @include background-tan-css; }
  @if $enable-tan-badges { @include badge-tan-css; }
  @if $enable-tan-buttons { @include button-tan-css; }
  @if $enable-tan-cards { @include card-tan-css; }
  @if $enable-tan-dialogs { @include dialog-tan-css; }
  @if $enable-tan-list-groups { @include list-group-tan-css; }
  @if $enable-tan-popovers { @include popover-tan-css; }
  
  // Rosewood
  @if $enable-rosewood-accordions { @include accordion-rosewood-css; }
  @if $enable-rosewood-alerts { @include alert-rosewood-css; }
  @if $enable-rosewood-backgrounds { @include background-rosewood-css; }
  @if $enable-rosewood-badges { @include badge-rosewood-css; }
  @if $enable-rosewood-buttons { @include button-rosewood-css; }
  @if $enable-rosewood-cards { @include card-rosewood-css; }
  @if $enable-rosewood-dialogs { @include dialog-rosewood-css; }
  @if $enable-rosewood-list-groups { @include list-group-rosewood-css; }
  @if $enable-rosewood-popovers { @include popover-rosewood-css; }
  
  // Steelblue
  @if $enable-steelblue-accordions { @include accordion-steelblue-css; }
  @if $enable-steelblue-alerts { @include alert-steelblue-css; }
  @if $enable-steelblue-backgrounds { @include background-steelblue-css; }
  @if $enable-steelblue-badges { @include badge-steelblue-css; }
  @if $enable-steelblue-buttons { @include button-steelblue-css; }
  @if $enable-steelblue-cards { @include card-steelblue-css; }
  @if $enable-steelblue-dialogs { @include dialog-steelblue-css; }
  @if $enable-steelblue-list-groups { @include list-group-steelblue-css; }
  @if $enable-steelblue-popovers { @include popover-steelblue-css; }
} // end-utilities

// ---------------------------------------------------------- 
// Layouts
// ----------------------------------------------------------
@mixin layout-framework {
// Grids
  #{$variables-tokens} { 
    @if $enable-grid-fractions { @include fraction-grid-variables; }
    @if $enable-grid-auto { @include auto-grid-variables; }
  }
  @if $enable-grid-utility { @include grid-utilities-css; }
  @if $enable-grid-fractions { @include fraction-grid-css; }
  @if $enable-grid-auto { @include auto-grid-css; }
  @if $enable-grid-layouts { @include grid-layouts-css; }
  
// Layout
  @if $enable-align { @include align-css; }
  @if $enable-aspect-ratio { @include aspect-ratio-css; }
  @if $enable-block { @include block-css; }
  @if $enable-columns { @include columns-css; }
  @if $enable-containers { @include containers-css; }
  @if $enable-display { @include display-css; }
  @if $enable-flex { @include flex-css; }
  @if $enable-grid { @include grid-css; }
  @if $enable-inset { @include inset-css; }
  @if $enable-justify { @include justify-css; }
  @if $enable-object-fit { @include object-fit-css; }
  @if $enable-order { @include order-css; }
  @if $enable-overflow { @include overflow-css; }
  @if $enable-overscroll { @include overscroll-css; }
  @if $enable-place { @include place-css; }
  @if $enable-position { @include position-css; }
  @if $enable-scrollbars { @include scrollbars-css; }
  @if $enable-sizes { @include sizes-css; }
  @if $enable-z-index { @include z-index-css; }
  
  // Spacing
  @if $enable-gaps { @include gaps-css; }
  @if $enable-margins { @include margins-css; }
  @if $enable-padding { @include padding-css; }
}

// ---------------------------------------------------------- 
// Icons
// ----------------------------------------------------------
@mixin icons-framework {
  // SVG variable tokens
  #{$variables-tokens} {
    // Default icons
    @if $enable-house-svg {--house: #{$house};}
    @if $enable-email-svg {--email: #{$email};}
    @if $enable-bars-svg {--bars: #{$bars};}
    @if $enable-dots-horizontal-svg {--dots-h: #{$dots-h};}
    @if $enable-dots-vertical-svg {--dots-v: #{$dots-v};}
    @if $enable-plus-svg {--plus: #{$plus};}
    @if $enable-minus-svg {--minus: #{$minus};}
    @if $enable-close-svg {--close: #{$close};}
    @if $enable-search-svg {--search: #{$search};}
    @if $enable-download-svg {--download: #{$download};}
    @if $enable-info-box-svg {--info-box: #{$info-box};}
    @if $enable-info-box-fill-svg {--info-box-fill: #{$info-box-fill};}
    @if $enable-info-circle-svg {--info-circle: #{$info-circle};}
    @if $enable-info-circle-fill-svg {--info-circle-fill: #{$info-circle-fill};}
    @if $enable-question-circle-svg {--question-circle: #{$question-circle};}
    @if $enable-question-circle-fill-svg {--question-circle-fill: #{$question-circle-fill};}
    @if $enable-question-box-svg {--question-box: #{$question-box};}
    @if $enable-question-box-fill-svg {--question-box-fill: #{$question-box-fill};}
    @if $enable-box-svg {--box: #{$box};}
    @if $enable-pen-box-svg {--pen-box: #{$pen-box};}
    @if $enable-close-box-svg {--close-box: #{$close-box};}
    @if $enable-close-box-fill-svg {--close-box-fill: #{$close-box-fill};}
    @if $enable-tick-box-svg {--tick-box: #{$tick-box};}
    @if $enable-ext-link-svg {--ext-link: #{$ext-link};}
    @if $enable-pg-link-svg {--pg-link: #{$pg-link};}
    @if $enable-sun-svg {--sun: #{$sun};}
    @if $enable-moon-svg {--moon: #{$moon};}
    @if $enable-caret-down-svg {--caret-down: #{$caret-down};}
    @if $enable-caret-up-svg {--caret-up: #{$caret-up};}
    @if $enable-caret-left-svg {--caret-left: #{$caret-left};}
    @if $enable-caret-right-svg {--caret-right: #{$caret-right};}
    @if $enable-user-svg {--user: #{$user};}
    @if $enable-circle-svg {--circle: #{$circle};}
    @if $enable-circle-fill-svg {--circle-fill: #{$circle-fill};}
    @if $enable-circle-inner-svg {--circle-inner: #{$circle-inner};}
    @if $enable-circle-half-svg {--circle-half: #{$circle-half};}
    @if $enable-circle-sm-svg {--circle-sm: #{$circle-sm};}
    @if $enable-circle-fill-sm-svg {--circle-fill-sm: #{$circle-fill-sm};}
    @if $enable-circle-inner-sm-svg {--circle-inner-sm: #{$circle-inner-sm};}
    @if $enable-circle-half-sm-svg {--circle-half-sm: #{$circle-half-sm};}
    @if $enable-image-svg {--image: #{$image};}
    @if $enable-image-fill-svg {--image-fill: #{$image-fill};}
    
    // Brand icons
    @if $enable-rss-svg {--rss: #{$rss};}
    @if $enable-stylemods-svg {--stylemods: #{$stylemods};}
    @if $enable-sass-svg {--sass: #{$sass};}
    @if $enable-github-svg {--github: #{$github};}
    @if $enable-twitter-svg {--twitter: #{$twitter};}
    @if $enable-mastodon-svg {--mastodon: #{$mastodon};}
    @if $enable-tiktok-svg {--tiktok: #{$tiktok};}
    @if $enable-facebook-svg {--facebook: #{$facebook};}
    @if $enable-instagram-svg {--instagram: #{$instagram};}
    @if $enable-pinterest-svg {--pinterest: #{$pinterest};}
    @if $enable-codepen-svg {--codepen: #{$codepen};}
    @if $enable-reddit-svg {--reddit: #{$reddit};}
    @if $enable-youtube-svg {--youtube: #{$youtube};}
  }

  // Icon utility classes
  @if $enable-icon-utilities-css { @include icon-utilities-css; }
  @if $enable-icon-links-css { @include icon-links-css; }
  @if $enable-icon-buttons-css { @include icon-buttons-css; }
  
  // SVG classes
  // Default icons
  @if $enable-house-svg {.house {--svg: var(--house);}}
  @if $enable-email-svg {.email {--svg: var(--email);}}
  @if $enable-bars-svg {.bars {--svg: var(--bars);}}
  @if $enable-dots-horizontal-svg {.dots-h {--svg: var(--dots-h);}}
  @if $enable-dots-vertical-svg {.dots-v {--svg: var(--dots-v);}}
  @if $enable-plus-svg {.plus {--svg: var(--plus);}}
  @if $enable-minus-svg {.minus {--svg: var(--minus);}}
  @if $enable-close-svg {.close {--svg: var(--close);}}
  @if $enable-search-svg {.search {--svg: var(--search);}}
  @if $enable-download-svg {.download {--svg: var(--download);}}
  @if $enable-info-box-svg {.info-box {--svg: var(--info-box);}}
  @if $enable-info-box-fill-svg {.info-box-fill {--svg: var(--info-box-fill);}}
  @if $enable-info-circle-svg {.info-circle {--svg: var(--info-circle);}}
  @if $enable-info-circle-fill-svg {.info-circle-fill {--svg: var(--info-circle-fill);}}
  @if $enable-question-circle-svg {.question-circle {--svg: var(--question-circle);}}
  @if $enable-question-circle-fill-svg {.question-circle-fill {--svg: var(--question-circle-fill);}}
  @if $enable-question-box-svg {.question-box {--svg: var(--question-box);}}
  @if $enable-question-box-fill-svg {.question-box-fill {--svg: var(--question-box-fill);}}
  @if $enable-box-svg {.box {--svg: var(--box);}}
  @if $enable-pen-box-svg {.pen-box {--svg: var(--pen-box);}}
  @if $enable-close-box-svg {.close-box {--svg: var(--close-box);}}
  @if $enable-close-box-fill-svg {.close-box-fill {--svg: var(--close-box-fill);}}
  @if $enable-tick-box-svg {.tick-box {--svg: var(--tick-box);}}
  @if $enable-ext-link-svg {.ext-link {--svg: var(--ext-link);}}
  @if $enable-pg-link-svg {.pg-link {--svg: var(--pg-link);}}
  @if $enable-sun-svg {.sun {--svg: var(--sun);}}
  @if $enable-moon-svg {.moon {--svg: var(--moon);}}
  @if $enable-caret-down-svg {.caret-down {--svg: var(--caret-down);}}
  @if $enable-caret-up-svg {.caret-up {--svg: var(--caret-up);}}
  @if $enable-caret-left-svg {.caret-left {--svg: var(--caret-left);}}
  @if $enable-caret-right-svg {.caret-right {--svg: var(--caret-right);}}
  @if $enable-user-svg {.user {--svg: var(--user);}}
  @if $enable-circle-svg {.circle {--svg: var(--circle);}}
  @if $enable-circle-fill-svg {.circle-fill {--svg: var(--circle-fill);}}
  @if $enable-circle-inner-svg {.circle-inner {--svg: var(--circle-inner);}}
  @if $enable-circle-half-svg {.circle-half {--svg: var(--circle-half);}}
  @if $enable-circle-sm-svg {.circle-sm {--svg: var(--circle-sm);}}
  @if $enable-circle-fill-sm-svg {.circle-fill-sm {--svg: var(--circle-fill-sm);}}
  @if $enable-circle-inner-sm-svg {.circle-inner-sm {--svg: var(--circle-inner-sm);}}
  @if $enable-circle-half-sm-svg {.circle-half-sm {--svg: var(--circle-half-sm);}}
  @if $enable-image-svg {.image {--svg: var(--image);}}
  @if $enable-image-fill-svg {.image-fill {--svg: var(--image-fill);}}
  
  // Brand icons
  @if $enable-rss-svg {.rss {--svg: var(--rss);}}
  @if $enable-stylemods-svg {.stylemods {--svg: var(--stylemods);}}
  @if $enable-sass-svg {.sass {--svg: var(--sass);}}
  @if $enable-github-svg {.github {--svg: var(--github);}}
  @if $enable-twitter-svg {.twitter {--svg: var(--twitter);}}
  @if $enable-mastodon-svg {.mastodon {--svg: var(--mastodon);}}
  @if $enable-tiktok-svg {.tiktok {--svg: var(--tiktok);}}
  @if $enable-facebook-svg {.facebook {--svg: var(--facebook);}}
  @if $enable-instagram-svg {.instagram {--svg: var(--instagram);}}
  @if $enable-pinterest-svg {.pinterest {--svg: var(--pinterest);}}
  @if $enable-codepen-svg {.codepen {--svg: var(--codepen);}}
  @if $enable-reddit-svg {.reddit {--svg: var(--reddit);}}
  @if $enable-youtube-svg {.youtube {--svg: var(--youtube);}}
}

// ----------------------------------------------------------
// XXL breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xxl {
  @if $enable-borders-xxl { @include borders-xxl-css; }
  @if $enable-opacity-xxl { @include opacity-xxl-css; }
  @if $enable-text-xxl { @include text-xxl-css; }
}

@mixin layout-framework-xxl {
  // Grids
  @if $enable-grid-utility-xxl { @include grid-utilities-xxl-css; }
  @if $enable-grid-fractions-xxl { @include fraction-grid-xxl-css; }
  @if $enable-grid-auto-xxl { @include auto-grid-xxl-css; }
  @if $enable-grid-layouts-xxl { @include grid-layouts-xxl-css; }
  
  // Layout
  @if $enable-align-xxl { @include align-xxl-css; }
  @if $enable-aspect-ratio-xxl { @include aspect-ratio-xxl-css; }
  @if $enable-block-xxl { @include block-xxl-css; }
  @if $enable-columns-xxl { @include columns-xxl-css; }
  @if $enable-display-xxl { @include display-xxl-css; }
  @if $enable-flex-xxl { @include flex-xxl-css; }
  @if $enable-grid-xxl { @include grid-xxl-css; }
  @if $enable-inset-xxl { @include inset-xxl-css; }
  @if $enable-justify-xxl { @include justify-xxl-css; }
  @if $enable-object-fit-xxl { @include object-fit-xxl-css; }
  @if $enable-order-xxl { @include order-xxl-css; }
  @if $enable-overflow-xxl { @include overflow-xxl-css; }
  @if $enable-overscroll-xxl { @include overscroll-xxl-css; }
  @if $enable-place-xxl { @include place-xxl-css; }
  @if $enable-position-xxl { @include position-xxl-css; }
  @if $enable-scrollbars-xxl { @include scrollbars-xxl-css; }
  @if $enable-sizes-xxl { @include sizes-xxl-css; }
  @if $enable-z-index-xxl { @include z-index-xxl-css; }
  
  // Spacing
  @if $enable-gaps-xxl { @include gaps-xxl-css; }
  @if $enable-margins-xxl { @include margins-xxl-css; }
  @if $enable-padding-xxl { @include padding-xxl-css; }
}

// ----------------------------------------------------------
// XL breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xl {
  @if $enable-borders-xl { @include borders-xl-css; }
  @if $enable-opacity-xl { @include opacity-xl-css; }
  @if $enable-text-xl { @include text-xl-css; }
}

@mixin layout-framework-xl {
  // Grids
  @if $enable-grid-utility-xl { @include grid-utilities-xl-css; }
  @if $enable-grid-fractions-xl { @include fraction-grid-xl-css; }
  @if $enable-grid-auto-xl { @include auto-grid-xl-css; }
  @if $enable-grid-layouts-xl { @include grid-layouts-xl-css; }
  
  // Layout
  @if $enable-align-xl { @include align-xl-css; }
  @if $enable-aspect-ratio-xl { @include aspect-ratio-xl-css; }
  @if $enable-block-xl { @include block-xl-css; }
  @if $enable-columns-xl { @include columns-xl-css; }
  @if $enable-display-xl { @include display-xl-css; }
  @if $enable-flex-xl { @include flex-xl-css; }
  @if $enable-grid-xl { @include grid-xl-css; }
  @if $enable-inset-xl { @include inset-xl-css; }
  @if $enable-justify-xl { @include justify-xl-css; }
  @if $enable-object-fit-xl { @include object-fit-xl-css; }
  @if $enable-order-xl { @include order-xl-css; }
  @if $enable-overflow-xl { @include overflow-xl-css; }
  @if $enable-overscroll-xl { @include overscroll-xl-css; }
  @if $enable-place-xl { @include place-xl-css; }
  @if $enable-position-xl { @include position-xl-css; }
  @if $enable-scrollbars-xl { @include scrollbars-xl-css; }
  @if $enable-sizes-xl { @include sizes-xl-css; }
  @if $enable-z-index-xl { @include z-index-xl-css; }
  
  // Spacing
  @if $enable-gaps-xl { @include gaps-xl-css; }
  @if $enable-margins-xl { @include margins-xl-css; }
  @if $enable-padding-xl { @include padding-xl-css; }
}

// ----------------------------------------------------------
// LG breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-lg {
  @if $enable-borders-lg { @include borders-lg-css; }
  @if $enable-opacity-lg { @include opacity-lg-css; }
  @if $enable-text-lg { @include text-lg-css; }
}

@mixin layout-framework-lg {
  // Grids
  @if $enable-grid-utility-lg { @include grid-utilities-lg-css; }
  @if $enable-grid-fractions-lg { @include fraction-grid-lg-css; }
  @if $enable-grid-auto-lg { @include auto-grid-lg-css; }
  @if $enable-grid-layouts-lg { @include grid-layouts-lg-css; }
  
  // Layout
  @if $enable-align-lg { @include align-lg-css; }
  @if $enable-aspect-ratio-lg { @include aspect-ratio-lg-css; }
  @if $enable-block-lg { @include block-lg-css; }
  @if $enable-columns-lg { @include columns-lg-css; }
  @if $enable-display-lg { @include display-lg-css; }
  @if $enable-flex-lg { @include flex-lg-css; }
  @if $enable-grid-lg { @include grid-lg-css; }
  @if $enable-inset-lg { @include inset-lg-css; }
  @if $enable-justify-lg { @include justify-lg-css; }
  @if $enable-object-fit-lg { @include object-fit-lg-css; }
  @if $enable-order-lg { @include order-lg-css; }
  @if $enable-overflow-lg { @include overflow-lg-css; }
  @if $enable-overscroll-lg { @include overscroll-lg-css; }
  @if $enable-place-lg { @include place-lg-css; }
  @if $enable-position-lg { @include position-lg-css; }
  @if $enable-scrollbars-lg { @include scrollbars-lg-css; }
  @if $enable-sizes-lg { @include sizes-lg-css; }
  @if $enable-z-index-lg { @include z-index-lg-css; }
  
  // Spacing
  @if $enable-gaps-lg { @include gaps-lg-css; }
  @if $enable-margins-lg { @include margins-lg-css; }
  @if $enable-padding-lg { @include padding-lg-css; }
}

// ----------------------------------------------------------
// MD breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-md {
  @if $enable-borders-md { @include borders-md-css; }
  @if $enable-opacity-md { @include opacity-md-css; }
  @if $enable-text-md { @include text-md-css; }
}

@mixin layout-framework-md {
  // Grids
  @if $enable-grid-utility-md { @include grid-utilities-md-css; }
  @if $enable-grid-fractions-md { @include fraction-grid-md-css; }
  @if $enable-grid-auto-md { @include auto-grid-md-css; }
  @if $enable-grid-layouts-md { @include grid-layouts-md-css; }
  
  // Layout
  @if $enable-align-md { @include align-md-css; }
  @if $enable-aspect-ratio-md { @include aspect-ratio-md-css; }
  @if $enable-block-md { @include block-md-css; }
  @if $enable-columns-md { @include columns-md-css; }
  @if $enable-display-md { @include display-md-css; }
  @if $enable-flex-md { @include flex-md-css; }
  @if $enable-grid-md { @include grid-md-css; }
  @if $enable-inset-md { @include inset-md-css; }
  @if $enable-justify-md { @include justify-md-css; }
  @if $enable-object-fit-md { @include object-fit-md-css; }
  @if $enable-order-md { @include order-md-css; }
  @if $enable-overflow-md { @include overflow-md-css; }
  @if $enable-overscroll-md { @include overscroll-md-css; }
  @if $enable-place-md { @include place-md-css; }
  @if $enable-position-md { @include position-md-css; }
  @if $enable-scrollbars-md { @include scrollbars-md-css; }
  @if $enable-sizes-md { @include sizes-md-css; }
  @if $enable-z-index-md { @include z-index-md-css; }
  
  // Spacing
  @if $enable-gaps-md { @include gaps-md-css; }
  @if $enable-margins-md { @include margins-md-css; }
  @if $enable-padding-md { @include padding-md-css; }
}

// ----------------------------------------------------------
// SM breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-sm {
  @if $enable-borders-sm { @include borders-sm-css; }
  @if $enable-opacity-sm { @include opacity-sm-css; }
  @if $enable-text-sm { @include text-sm-css; }
}

@mixin layout-framework-sm {
  // Grids
  @if $enable-grid-utility-sm { @include grid-utilities-sm-css; }
  @if $enable-grid-fractions-sm { @include fraction-grid-sm-css; }
  @if $enable-grid-auto-sm { @include auto-grid-sm-css; }
  @if $enable-grid-layouts-sm { @include grid-layouts-sm-css; }
  
  // Layout
  @if $enable-align-sm { @include align-sm-css; }
  @if $enable-aspect-ratio-sm { @include aspect-ratio-sm-css; }
  @if $enable-block-sm { @include block-sm-css; }
  @if $enable-columns-sm { @include columns-sm-css; }
  @if $enable-display-sm { @include display-sm-css; }
  @if $enable-flex-sm { @include flex-sm-css; }
  @if $enable-grid-sm { @include grid-sm-css; }
  @if $enable-inset-sm { @include inset-sm-css; }
  @if $enable-justify-sm { @include justify-sm-css; }
  @if $enable-object-fit-sm { @include object-fit-sm-css; }
  @if $enable-order-sm { @include order-sm-css; }
  @if $enable-overflow-sm { @include overflow-sm-css; }
  @if $enable-overscroll-sm { @include overscroll-sm-css; }
  @if $enable-place-sm { @include place-sm-css; }
  @if $enable-position-sm { @include position-sm-css; }
  @if $enable-scrollbars-sm { @include scrollbars-sm-css; }
  @if $enable-sizes-sm { @include sizes-sm-css; }
  @if $enable-z-index-sm { @include z-index-sm-css; }
  
  // Spacing
  @if $enable-gaps-sm { @include gaps-sm-css; }
  @if $enable-margins-sm { @include margins-sm-css; }
  @if $enable-padding-sm { @include padding-sm-css; }
}

// ----------------------------------------------------------
// XS breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xs {
  @if $enable-borders-xs { @include borders-xs-css; }
  @if $enable-opacity-xs { @include opacity-xs-css; }
  @if $enable-text-xs { @include text-xs-css; }
}

@mixin layout-framework-xs {
  // Grids
  @if $enable-grid-utility-xs { @include grid-utilities-xs-css; }
  @if $enable-grid-fractions-xs { @include fraction-grid-xs-css; }
  @if $enable-grid-auto-xs { @include auto-grid-xs-css; }
  @if $enable-grid-layouts-xs { @include grid-layouts-xs-css; }
  
  // Layout
  @if $enable-align-xs { @include align-xs-css; }
  @if $enable-aspect-ratio-xs { @include aspect-ratio-xs-css; }
  @if $enable-block-xs { @include block-xs-css; }
  @if $enable-columns-xs { @include columns-xs-css; }
  @if $enable-display-xs { @include display-xs-css; }
  @if $enable-flex-xs { @include flex-xs-css; }
  @if $enable-grid-xs { @include grid-xs-css; }
  @if $enable-inset-xs { @include inset-xs-css; }
  @if $enable-justify-xs { @include justify-xs-css; }
  @if $enable-object-fit-xs { @include object-fit-xs-css; }
  @if $enable-order-xs { @include order-xs-css; }
  @if $enable-overflow-xs { @include overflow-xs-css; }
  @if $enable-overscroll-xs { @include overscroll-xs-css; }
  @if $enable-place-xs { @include place-xs-css; }
  @if $enable-position-xs { @include position-xs-css; }
  @if $enable-scrollbars-xs { @include scrollbars-xs-css; }
  @if $enable-sizes-xs { @include sizes-xs-css; }
  @if $enable-z-index-xs { @include z-index-xs-css; }
  
  // Spacing
  @if $enable-gaps-xs { @include gaps-xs-css; }
  @if $enable-margins-xs { @include margins-xs-css; }
  @if $enable-padding-xs { @include padding-xs-css; }
}

// ----------------------------------------------------------
// XXS breakpoints
// ----------------------------------------------------------
@mixin utilities-framework-xxs {
  @if $enable-borders-xxs { @include borders-xxs-css; }
  @if $enable-opacity-xxs { @include opacity-xxs-css; }
  @if $enable-text-xxs { @include text-xxs-css; }
}

@mixin layout-framework-xxs {
  // Grids
  @if $enable-grid-utility-xxs { @include grid-utilities-xxs-css; }
  @if $enable-grid-fractions-xxs { @include fraction-grid-xxs-css; }
  @if $enable-grid-auto-xxs { @include auto-grid-xxs-css; }
  @if $enable-grid-layouts-xxs { @include grid-layouts-xxs-css; }
  
  // Layout
  @if $enable-align-xxs { @include align-xxs-css; }
  @if $enable-aspect-ratio-xxs { @include aspect-ratio-xxs-css; }
  @if $enable-block-xxs { @include block-xxs-css; }
  @if $enable-columns-xxs { @include columns-xxs-css; }
  @if $enable-display-xxs { @include display-xxs-css; }
  @if $enable-flex-xxs { @include flex-xxs-css; }
  @if $enable-grid-xxs { @include grid-xxs-css; }
  @if $enable-inset-xxs { @include inset-xxs-css; }
  @if $enable-justify-xxs { @include justify-xxs-css; }
  @if $enable-object-fit-xxs { @include object-fit-xxs-css; }
  @if $enable-order-xxs { @include order-xxs-css; }
  @if $enable-overflow-xxs { @include overflow-xxs-css; }
  @if $enable-overscroll-xxs { @include overscroll-xxs-css; }
  @if $enable-place-xxs { @include place-xxs-css; }
  @if $enable-position-xxs { @include position-xxs-css; }
  @if $enable-scrollbars-xxs { @include scrollbars-xxs-css; }
  @if $enable-sizes-xxs { @include sizes-xxs-css; }
  @if $enable-z-index-xxs { @include z-index-xxs-css; }
  
  // Spacing
  @if $enable-gaps-xxs { @include gaps-xxs-css; }
  @if $enable-margins-xxs { @include margins-xxs-css; }
  @if $enable-padding-xxs { @include padding-xxs-css; }
}

stylemods.scss

// ----------------------------------------------------------
// StyleMods framework
// ----------------------------------------------------------
@use "configuration" as *;
@use "framework" as *;

// ----------------------------------------------------------
// Cascade layers
// ----------------------------------------------------------
@if $enable-layer-order {
  @include cascade-layers;
}

// ----------------------------------------------------------
// Color variable tokens
// ----------------------------------------------------------
@if $enable-color-layer {
  @layer #{$color-layer} {
    @include color-framework;
  }
}
@else {
  @include color-framework;
}

// ----------------------------------------------------------
// Content
// ----------------------------------------------------------
@if $enable-content-layer {
  @layer #{$content-layer} {
    @include content-framework;
  }
}
@else {
  @include content-framework;
}

// ----------------------------------------------------------
// Components
// ----------------------------------------------------------
@if $enable-components-layer {
  @layer #{$components-layer} {
    @include components-framework;
  }
}
@else {
  @include components-framework;
}

// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------
@if $enable-utilities-layer {
  @layer #{$utilities-layer} {
    @include utilities-framework;
  }
}
@else {
  @include utilities-framework;
}

// ----------------------------------------------------------
// Layout
// ----------------------------------------------------------
@if $enable-layout-layer {
  @layer #{$layout-layer} {
    @include layout-framework;
  }
}
@else {
  @include layout-framework;
}

// ----------------------------------------------------------
// XXL breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xxl}) {
  @if $enable-utilities-layer-xxl {
    @layer #{$utilities-layer} {
      @include utilities-framework-xxl;
    }
  }
  @if $enable-layout-layer-xxl {
    @layer #{$layout-layer} {
      @include layout-framework-xxl;
    }
  }
  @else {
    @include utilities-framework-xxl;
    @include layout-framework-xxl;
  }
}

// ----------------------------------------------------------
// XL breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xl}) {
  @if $enable-utilities-layer-xl {
    @layer #{$utilities-layer} {
      @include utilities-framework-xl;
    }
  }
  @if $enable-layout-layer-xl {
    @layer #{$layout-layer} {
      @include layout-framework-xl;
    }
  }
  @else {
    @include utilities-framework-xl;
    @include layout-framework-xl;
  }
}

// ----------------------------------------------------------
// LG breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-lg}) {
  @if $enable-utilities-layer-lg {
    @layer #{$utilities-layer} {
      @include utilities-framework-lg;
    }
  }
  @if $enable-layout-layer-lg {
    @layer #{$layout-layer} {
      @include layout-framework-lg;
    }
  }
  @else {
    @include utilities-framework-lg;
    @include layout-framework-lg;
  }
}

// ----------------------------------------------------------
// MD breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-md}) {
  @if $enable-utilities-layer-md {
    @layer #{$utilities-layer} {
      @include utilities-framework-md;
    }
  }
  @if $enable-layout-layer-md {
    @layer #{$layout-layer} {
      @include layout-framework-md;
    }
  }
  @else {
    @include utilities-framework-md;
    @include layout-framework-md;
  }
}

// ----------------------------------------------------------
// SM breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-sm}) {
  @if $enable-utilities-layer-sm {
    @layer #{$utilities-layer} {
      @include utilities-framework-sm;
    }
  }
  @if $enable-layout-layer-sm {
    @layer #{$layout-layer} {
      @include layout-framework-sm;
    }
  }
  @else {
    @include utilities-framework-sm;
    @include layout-framework-sm;
  }
}

// ----------------------------------------------------------
// XS breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xs}) {
  @if $enable-utilities-layer-xs {
    @layer #{$utilities-layer} {
      @include utilities-framework-xs;
    }
  }
  @if $enable-layout-layer-xs {
    @layer #{$layout-layer} {
      @include layout-framework-xs;
    }
  }
  @else {
    @include utilities-framework-xs;
    @include layout-framework-xs;
  }
}

// ----------------------------------------------------------
// XXS breakpoints
// ----------------------------------------------------------
@media (#{$breakpoint-query} #{$breakpoint-xxs}) {
  @if $enable-utilities-layer-xxs {
    @layer #{$utilities-layer} {
      @include utilities-framework-xxs;
    }
  }
  @if $enable-layout-layer-xxs {
    @layer #{$layout-layer} {
      @include layout-framework-xxs;
    }
  }
  @else {
    @include utilities-framework-xxs;
    @include layout-framework-xxs;
  }
}

// ----------------------------------------------------------
// Icons
// ----------------------------------------------------------
@if $enable-icons-layer {
  @layer #{$icons-layer} {
    @include icons-framework;
  }
}
@else {
  @include icons-framework;
}