@shohojdhara/atomix 0.2.1 → 0.2.2

package/src/styles/06-components/_components.form-group.scss

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.form-group' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-form-group {
   $root: &;

package/src/styles/06-components/_components.hero.scss

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-hero {
   $root: &;
@@ -35,7 +36,7 @@
   display: grid;
   place-items: center;
   padding: var(--#{$prefix}hero-padding-y) var(--#{$prefix}hero-padding-x);
-  background-color: var(--#{$prefix}hero-bg);
+  @include dynamic-background(var(--#{$prefix}hero-bg));
   overflow: hidden;
 
   &__bg {
@@ -57,7 +58,7 @@
   &__overlay {
     position: absolute;
     inset: 0;
-    background: var(--#{$prefix}hero-overlay);
+    @include dynamic-background(var(--#{$prefix}hero-overlay));
     opacity: var(--#{$prefix}hero-overlay-opacity);
     z-index: 1;
   }

package/src/styles/06-components/_components.image-gallery.scss

@@ -5,6 +5,7 @@
 @use '../01-settings/settings.spacing' as *;
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.background' as *;
 
 .c-image-gallery {
   width: 100%;

package/src/styles/06-components/_components.input.scss

@@ -4,6 +4,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.placeholder' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-input {
   $root: &;
@@ -30,7 +31,7 @@
   border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
   border-radius: var(--#{$prefix}input-border-radius);
   outline: none;
-  background-color: var(--#{$prefix}input-bg);
+  @include dynamic-background(var(--#{$prefix}input-bg));
   @include basic-transition();
 
   &:focus,

package/src/styles/06-components/_components.list-group.scss

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.colors' as *;
 @use '../01-settings/settings.maps' as maps;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-list-group {
   --#{config.$prefix}list-group-width: #{$list-group-width};
@@ -24,7 +25,7 @@
   list-style: none;
   width: 100%;
   max-width: var(--#{config.$prefix}list-group-width);
-  background: var(--#{config.$prefix}list-group-bg);
+  @include dynamic-background(var(--#{config.$prefix}list-group-bg));
 
   &__item {
     padding: var(--#{config.$prefix}list-group-item-padding-y)
@@ -33,7 +34,7 @@
     color: var(--#{config.$prefix}list-group-item-color);
     border-bottom: var(--#{config.$prefix}list-group-item-border-width) solid
       var(--#{config.$prefix}list-group-item-border-color);
-    background: var(--#{config.$prefix}list-group-item-bg);
+    @include dynamic-background(var(--#{config.$prefix}list-group-item-bg));
 
     @each $state in map.keys(maps.$theme-colors) {
       &--#{$state} {

package/src/styles/06-components/_components.list.scss

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.maps' as maps;
 @use '../01-settings/settings.list' as list;
 @use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.background' as *;
 
 .c-list {
   $root: &;
@@ -41,7 +42,7 @@
         left: 0;
         width: var(--#{config.$prefix}list-item-dash-width);
         height: var(--#{config.$prefix}list-item-dash-height);
-        background: var(--#{config.$prefix}list-color);
+        @include dynamic-background(var(--#{config.$prefix}list-color));
         transform: translateY(-50%);
       }
     }

package/src/styles/06-components/_components.menu.scss

@@ -5,6 +5,7 @@
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.animations' as animations;
 @use '../02-tools/tools.color-mode' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-menu {
   $root: &;
@@ -40,7 +41,7 @@
   display: inline-block;
   min-width: var(--#{config.$prefix}menu-min-width);
   padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
-  background-color: var(--#{config.$prefix}menu-bg);
+  @include dynamic-background(var(--#{config.$prefix}menu-bg));
   border-radius: var(--#{config.$prefix}menu-border-radius);
   box-shadow: var(--#{config.$prefix}menu-box-shadow);
   z-index: 5;
@@ -95,20 +96,20 @@
     color: var(--#{config.$prefix}menu-item-color);
     font-size: var(--#{config.$prefix}menu-item-font-size);
     font-weight: var(--#{config.$prefix}menu-item-font-weight);
-    background-color: var(--#{config.$prefix}menu-item-bg);
+    @include dynamic-background(var(--#{config.$prefix}menu-item-bg));
     border-radius: var(--#{config.$prefix}menu-border-radius);
     cursor: pointer;
     @include animations.basic-transition();
 
     &:hover {
       color: var(--#{config.$prefix}menu-item-color);
-      background-color: var(--#{config.$prefix}menu-item-bg-hover);
+      @include dynamic-background(var(--#{config.$prefix}menu-item-bg-hover));
     }
 
     &:focus,
     &:active,
     &.is-active {
-      background-color: var(--#{config.$prefix}menu-item-bg-active);
+      @include dynamic-background(var(--#{config.$prefix}menu-item-bg-active));
     }
   }
 

package/src/styles/06-components/_components.messages.scss

@@ -9,6 +9,7 @@
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.color-mode' as *;
 @use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-messages {
   $root: &;
@@ -75,7 +76,7 @@
   border-radius: var(--#{config.$prefix}messages-border-radius);
   border: var(--#{config.$prefix}messages-border-width) solid
     var(--#{config.$prefix}messages-border-color);
-  background-color: var(--#{config.$prefix}messages-bg);
+  @include dynamic-background(var(--#{config.$prefix}messages-bg));
 
   &__body {
     max-height: var(--#{config.$prefix}messages-body-height);
@@ -140,7 +141,7 @@
     font-size: var(--#{config.$prefix}messages-text-font-size);
     padding: var(--#{config.$prefix}messages-text-padding-y)
       var(--#{config.$prefix}messages-text-padding-x);
-    background-color: var(--#{config.$prefix}messages-text-bg);
+    @include dynamic-background(var(--#{config.$prefix}messages-text-bg));
     border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
       var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
   }
@@ -152,7 +153,7 @@
       var(--#{config.$prefix}messages-file-padding-x);
     border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius)
       var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm;
-    background: var(--#{config.$prefix}messages-file-bg);
+    @include dynamic-background(var(--#{config.$prefix}messages-file-bg));
   }
 
   &__file-icon {
@@ -162,7 +163,7 @@
     @include square(var(--#{config.$prefix}messages-file-icon-size));
     color: var(--#{config.$prefix}tertiary-text-emphasis);
     margin-right: var(--#{config.$prefix}messages-file-icon-margin-right);
-    background-color: var(--#{config.$prefix}body-bg);
+    @include dynamic-background(var(--#{config.$prefix}body-bg));
     border-radius: border.$border-radius-pill;
   }
 
@@ -240,7 +241,7 @@
 
       &__file-icon {
         color: var(--#{config.$prefix}invert-text-emphasis);
-        background-color: var(--#{config.$prefix}messages-file-icon-bg);
+        @include dynamic-background(var(--#{config.$prefix}messages-file-icon-bg));
 
         @include color-mode('dark') {
           --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
@@ -293,7 +294,7 @@
     border: var(--#{config.$prefix}messages-input-border-width) solid
       var(--#{config.$prefix}messages-input-border-color);
     border-radius: var(--#{config.$prefix}messages-input-border-radius);
-    background-color: var(--#{config.$prefix}messages-bg);
+    @include dynamic-background(var(--#{config.$prefix}messages-bg));
     resize: none;
 
     &::placeholder {
@@ -312,7 +313,7 @@
     place-items: center;
     align-self: flex-end;
     padding: rem.rem(10px);
-    background-color: var(--#{config.$prefix}brand-bg-subtle);
+    @include dynamic-background(var(--#{config.$prefix}brand-bg-subtle));
     color: var(--#{config.$prefix}invert-text-emphasis);
     border-radius: border.$border-radius-pill;
     cursor: pointer;

package/src/styles/06-components/_components.modal.scss

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.spacing' as *;
 @use '../01-settings/settings.z-layers' as *;
+@use '../02-tools/tools.background' as *;
 @use 'sass:map';
 
 .c-modal {
@@ -48,7 +49,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background-color: var(--#{config.$prefix}modal-backdrop-bg);
+    @include dynamic-background(var(--#{config.$prefix}modal-backdrop-bg));
     opacity: 0;
     transition: 0.3s;
   }
@@ -77,7 +78,7 @@
     width: 100%;
     max-height: 100%;
     padding: var(--#{config.$prefix}modal-inner-padding);
-    background-color: var(--#{config.$prefix}modal-content-bg);
+    @include dynamic-background(var(--#{config.$prefix}modal-content-bg));
     box-shadow: var(--#{config.$prefix}modal-content-box-shadow);
     border-radius: var(--#{config.$prefix}modal-content-border-radius);
     overflow: hidden;

package/src/styles/06-components/_components.nav.scss

@@ -4,6 +4,7 @@
 @use '../02-tools/tools.transition' as transition;
 @use '../02-tools/tools.event' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-nav {
   $root: &;
@@ -64,7 +65,7 @@
     }
 
     @include on-event() {
-      background-color: var(--#{$prefix}nav-link-hover-bg);
+      @include dynamic-background(var(--#{$prefix}nav-link-hover-bg));
     }
 
     &--disabled {
@@ -75,7 +76,7 @@
     &:focus,
     &:active,
     &.is-active {
-      background-color: var(--#{$prefix}brand-bg-subtle);
+      @include dynamic-background(var(--#{$prefix}brand-bg-subtle));
     }
   }
 
@@ -131,7 +132,7 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
-    background: var(--#{$prefix}body-bg);
+    @include dynamic-background(var(--#{$prefix}body-bg));
     border: 1px solid var(--#{$prefix}border-color);
     border-radius: $border-radius-pill;
     box-shadow: var(--#{$prefix}box-shadow-lg);
@@ -139,7 +140,7 @@
     backdrop-filter: blur(10px);
 
     // Add subtle background transparency
-    background: rgba(var(--#{$prefix}body-bg-rgb), 0.95);
+    @include dynamic-background(rgba(var(--#{$prefix}body-bg-rgb), 0.95));
 
     // Ensure items are properly spaced in float mode
     #{$root}__item {
@@ -157,7 +158,7 @@
       &:focus,
       &:active,
       &.is-active {
-        background-color: var(--#{$prefix}brand-bg-subtle);
+        @include dynamic-background(var(--#{$prefix}brand-bg-subtle));
       }
     }
   }

package/src/styles/06-components/_components.navbar.scss

@@ -4,6 +4,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.media-queries' as media;
 @use '../01-settings/settings.maps' as maps;
+@use '../02-tools/tools.background' as *;
 
 .c-navbar {
   $root: &;
@@ -36,7 +37,7 @@
   position: relative;
   padding: var(--#{$prefix}navbar-padding-y) 0;
   border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
-  background-color: var(--#{$prefix}navbar-bg);
+  @include dynamic-background(var(--#{$prefix}navbar-bg));
   z-index: var(--#{$prefix}navbar-z-index);
 
   &__container {
@@ -77,7 +78,7 @@
     width: var(--#{$prefix}navbar-toggler-size);
     height: var(--#{$prefix}navbar-toggler-size);
     padding: 0;
-    background-color: var(--#{$prefix}navbar-toggler-bg);
+    @include dynamic-background(var(--#{$prefix}navbar-toggler-bg));
     border: var(--#{$prefix}navbar-toggler-border);
     border-radius: var(--#{$prefix}navbar-toggler-border-radius);
     cursor: pointer;
@@ -144,7 +145,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--#{$prefix}navbar-backdrop-bg);
+    @include dynamic-background(var(--#{$prefix}navbar-backdrop-bg));
     z-index: var(--#{$prefix}navbar-backdrop-z-index);
     opacity: 0;
     visibility: hidden;

package/src/styles/06-components/_components.pagination.scss

@@ -2,6 +2,7 @@
 @use '../01-settings/settings.pagination' as pagination;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as size;
+@use '../02-tools/tools.background' as *;
 
 .c-pagination {
   $root: &;
@@ -81,7 +82,7 @@
     font-size: var(--#{config.$prefix}pagination-font-size);
     padding: var(--#{config.$prefix}pagination-padding-y)
       var(--#{config.$prefix}pagination-padding-x);
-    background-color: var(--#{config.$prefix}pagination-bg);
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
     border-radius: var(--#{config.$prefix}pagination-border-radius);
     border: none;
     cursor: pointer;

package/src/styles/06-components/_components.photoviewer.scss

@@ -7,6 +7,7 @@
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.spacing' as *;
+@use '../02-tools/tools.background' as *;
 
 // Common mixins
 %flex-center {
@@ -25,7 +26,7 @@
 
 // Modern panel styles
 %panel-base {
-  background: $photoviewer-component-background-color;
+  @include dynamic-background($photoviewer-component-background-color);
   border: 1px solid $photoviewer-component-border-color;
   border-radius: $photoviewer-image-container-border-radius;
   box-shadow: $photoviewer-info-panel-shadow;
@@ -102,7 +103,7 @@
   border: 2px solid transparent;
   border-radius: $photoviewer-thumbnail-border-radius;
   padding: 0;
-  background: transparent;
+  @include dynamic-background(transparent);
   cursor: pointer;
   overflow: hidden;
   position: relative;
@@ -175,7 +176,7 @@ body.is-open-photoviewer {
   width: 100vw;
   height: 100vh;
   z-index: 1000;
-  background: transparent;
+  @include dynamic-background(transparent);
   opacity: 1;
   transition-property: opacity;
 

package/src/styles/06-components/_components.popover.scss

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.popover' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-popover {
   $root: &;
@@ -37,7 +38,7 @@
     flex-direction: column;
     gap: var(--#{$prefix}popover-inner-gap-y) var(--#{$prefix}popover-inner-gap-x);
     padding: var(--#{$prefix}popover-padding-y) var(--#{$prefix}popover-padding-x);
-    background: var(--#{$prefix}popover-bg);
+    @include dynamic-background(var(--#{$prefix}popover-bg));
     border-radius: var(--#{$prefix}popover-border-radius);
     box-shadow: var(--#{$prefix}popover-box-shadow);
   }
@@ -46,7 +47,7 @@
     position: absolute;
     width: var(--#{$prefix}popover-arrow-size);
     height: var(--#{$prefix}popover-arrow-size);
-    background: var(--#{$prefix}popover-bg);
+    @include dynamic-background(var(--#{$prefix}popover-bg));
     box-shadow: var(--#{$prefix}popover-box-shadow);
     z-index: 1;
     transform-origin: center;

package/src/styles/06-components/_components.product-review.scss

@@ -5,6 +5,7 @@
 @use '../02-tools/tools.size' as size;
 @use '../02-tools/tools.grid' as *;
 @use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-product-review {
   $root: &;
@@ -21,7 +22,7 @@
 
   padding: var(--#{config.$prefix}product-review-padding);
   border-radius: var(--#{config.$prefix}product-review-border-radius);
-  background-color: var(--#{config.$prefix}product-review-bg);
+  @include dynamic-background(var(--#{config.$prefix}product-review-bg));
   border: 1px solid var(--#{config.$prefix}product-review-border-color);
   width: 100%;
   max-width: rem.rem(600px);
@@ -89,7 +90,7 @@
     padding: rem.rem(12px);
     border: 1px solid var(--#{config.$prefix}product-review-border-color);
     border-radius: var(--#{config.$prefix}border-radius);
-    background-color: var(--#{config.$prefix}body-bg);
+    @include dynamic-background(var(--#{config.$prefix}body-bg));
     color: var(--#{config.$prefix}body-color);
     font-family: inherit;
     resize: vertical;

package/src/styles/06-components/_components.progress.scss

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.maps' as maps;
 @use '../01-settings/settings.progress' as progress;
 @use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.background' as *;
 
 .c-progress {
   --#{config.$prefix}progress-width: #{progress.$progress-width};
@@ -21,7 +22,7 @@
   width: 100%;
   max-width: var(--#{config.$prefix}progress-width);
   height: var(--#{config.$prefix}progress-bar-height);
-  background-color: var(--#{config.$prefix}progress-bg);
+  @include dynamic-background(var(--#{config.$prefix}progress-bg));
   border-radius: var(--#{config.$prefix}progress-border-radius);
   overflow: hidden;
 
@@ -29,7 +30,7 @@
     width: var(--#{config.$prefix}progress-bar-width);
     height: var(--#{config.$prefix}progress-bar-height);
     color: var(--#{config.$prefix}progress-bar-color);
-    background-color: var(--#{config.$prefix}progress-bar-bg);
+    @include dynamic-background(var(--#{config.$prefix}progress-bar-bg));
     border-radius: var(--#{config.$prefix}progress-border-radius);
     transition: var(--#{config.$prefix}progress-bar-transition)
       var(--#{config.$prefix}progress-bar-easing);

package/src/styles/06-components/_components.river.scss

@@ -5,6 +5,7 @@
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as grid;
+@use '../02-tools/tools.background' as *;
 
 .c-river {
   $root: &;
@@ -41,7 +42,7 @@
   max-width: var(--#{config.$prefix}river-width);
   padding: var(--#{config.$prefix}river-padding-y) var(--#{config.$prefix}river-padding-x);
   border-radius: var(--#{config.$prefix}river-border-radius);
-  background-color: var(--#{config.$prefix}river-bg);
+  @include dynamic-background(var(--#{config.$prefix}river-bg));
 
   &__bg {
     position: absolute;
@@ -59,7 +60,7 @@
   &__overlay {
     position: absolute;
     inset: 0;
-    background: var(--#{config.$prefix}river-overlay);
+    @include dynamic-background(var(--#{config.$prefix}river-overlay));
     opacity: var(--#{config.$prefix}river-overlay-opacity);
     border-radius: var(--#{config.$prefix}river-border-radius);
   }

package/src/styles/06-components/_components.sectionintro.scss

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-sectionintro {
   $root: &;
@@ -116,7 +117,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--#{$prefix}sectionintro-overlay-bg-color);
+    @include dynamic-background(var(--#{$prefix}sectionintro-overlay-bg-color));
     opacity: var(--#{$prefix}sectionintro-overlay-opacity);
   }
 

package/src/styles/06-components/_components.select.scss

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.transition' as transition;
 @use '../02-tools/tools.hidden-visually' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-select {
   $root: &;
@@ -48,7 +49,7 @@
     padding: var(--#{$prefix}select-padding-x) var(--#{$prefix}select-padding-y);
     color: var(--#{$prefix}select-placeholder-color);
     font-size: var(--#{$prefix}select-font-size);
-    background-color: var(--#{$prefix}select-bg);
+    @include dynamic-background(var(--#{$prefix}select-bg));
     border: 1px solid var(--#{$prefix}select-border-color);
     border-radius: var(--#{$prefix}select-border-radius);
     cursor: pointer;
@@ -77,7 +78,7 @@
     height: 0px;
     top: calc(100% + var(--#{$prefix}select-panel-spacer-y));
     left: 0;
-    background-color: var(--#{$prefix}select-panel-bg);
+    @include dynamic-background(var(--#{$prefix}select-panel-bg));
     border-radius: var(--#{$prefix}select-panel-border-radius);
     box-shadow: var(--#{$prefix}select-panel-box-shadow);
     overflow: hidden;
@@ -98,7 +99,7 @@
   &__item {
     padding: var(--#{$prefix}select-item-padding-x) var(--#{$prefix}select-item-padding-y);
     color: var(--#{$prefix}select-item-color);
-    background-color: var(--#{$prefix}select-item-bg);
+    @include dynamic-background(var(--#{$prefix}select-item-bg));
     border-radius: var(--#{$prefix}select-item-border-radius);
     @include transition.basic-transition;
 
@@ -108,7 +109,7 @@
     }
 
     &:hover {
-      background-color: var(--#{$prefix}select-item-bg-hover);
+      @include dynamic-background(var(--#{$prefix}select-item-bg-hover));
     }
   }
 

package/src/styles/06-components/_components.side-menu.scss

@@ -5,6 +5,7 @@
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as grid;
 @use '../02-tools/tools.transition' as transition;
+@use '../02-tools/tools.background' as *;
 
 .c-side-menu {
   $root: &;
@@ -50,7 +51,7 @@
   // 2. Base Component Styles
   width: 100%;
   padding: var(--#{config.$prefix}side-menu-padding-y) var(--#{config.$prefix}side-menu-padding-x);
-  background: var(--#{config.$prefix}side-menu-bg);
+  @include dynamic-background(var(--#{config.$prefix}side-menu-bg));
   border-radius: var(--#{config.$prefix}side-menu-border-radius);
   border: var(--#{config.$prefix}side-menu-border-width) solid
     var(--#{config.$prefix}side-menu-border-color);
@@ -92,7 +93,7 @@
     width: 100%;
     padding: var(--#{config.$prefix}side-menu-toggler-padding-y)
       var(--#{config.$prefix}side-menu-toggler-padding-x);
-    background: var(--#{config.$prefix}side-menu-toggler-bg);
+    @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-toggler-border-radius);
     cursor: pointer;
@@ -105,7 +106,7 @@
     }
 
     &:hover {
-      background: var(--#{config.$prefix}side-menu-toggler-hover-bg);
+      @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-hover-bg));
     }
 
     &:focus {
@@ -156,7 +157,7 @@
     color: var(--#{config.$prefix}side-menu-item-color);
     font-size: var(--#{config.$prefix}side-menu-item-font-size);
     font-weight: var(--#{config.$prefix}side-menu-item-font-weight);
-    background: var(--#{config.$prefix}side-menu-item-bg);
+    @include dynamic-background(var(--#{config.$prefix}side-menu-item-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-item-border-radius);
     text-decoration: none;
@@ -165,7 +166,7 @@
 
     &:hover {
       color: var(--#{config.$prefix}side-menu-item-hover-color);
-      background: var(--#{config.$prefix}side-menu-item-hover-bg);
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-hover-bg));
       text-decoration: none;
     }
 
@@ -181,14 +182,14 @@
     // 5. State Classes
     &.is-active {
       color: var(--#{config.$prefix}side-menu-item-active-color);
-      background: var(--#{config.$prefix}side-menu-item-active-bg);
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-active-bg));
       font-weight: typography.$font-weight-medium;
     }
 
     &.is-disabled,
     &[aria-disabled='true'] {
       color: var(--#{config.$prefix}side-menu-item-disabled-color);
-      background: var(--#{config.$prefix}side-menu-item-disabled-bg);
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-disabled-bg));
       cursor: not-allowed;
       pointer-events: none;
       opacity: 0.6;

package/src/styles/06-components/_components.skeleton.scss

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.skeleton' as *;
 @use '../01-settings/settings.border-radius' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-skeleton {
   $root: &;
@@ -16,12 +17,12 @@
   display: inline-block;
   width: var(--#{$prefix}skeleton-width);
   min-height: var(--#{$prefix}skeleton-height);
-  background: linear-gradient(
+  @include dynamic-background(linear-gradient(
     90deg,
     var(--#{$prefix}skeleton-gradient-from-color) 25%,
     var(--#{$prefix}skeleton-gradient-to-color) 37%,
     var(--#{$prefix}skeleton-gradient-from-color) 63%
-  );
+  ));
   background-size: 400% 100%;
   border-radius: var(--#{$prefix}skeleton-border-radius);
   animation-name: #{$prefix}-skeleton-loading;