@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.border-radius' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-checkbox {
   $root: &;
@@ -32,7 +33,7 @@
   &__input {
     position: relative;
     appearance: none;
-    background-color: var(--#{$prefix}checkbox-bg);
+    @include dynamic-background(var(--#{$prefix}checkbox-bg));
     width: var(--#{$prefix}checkbox-width);
     height: var(--#{$prefix}checkbox-height);
     color: currentColor;

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.colors' as colors;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-color-mode-toggle {
   display: inline-flex;
@@ -15,7 +16,7 @@
   color: var(--#{$prefix}body-color);
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    @include dynamic-background(rgba(0, 0, 0, 0.05));
   }
 
   &:focus {
@@ -30,7 +31,7 @@
 
   [data-#{$prefix}theme='dark'] & {
     &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      @include dynamic-background(rgba(255, 255, 255, 0.1));
     }
   }
 }

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

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.countdown' as *;
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-countdown {
   $root: &;
@@ -51,7 +52,7 @@
         align-items: center;
         padding: var(--#{$prefix}countdown-item-padding-y) var(--#{$prefix}countdown-item-padding-x);
         border-radius: var(--#{$prefix}countdown-focused-border-radius);
-        background-color: var(--#{$prefix}countdown-focused-bg);
+        @include dynamic-background(var(--#{$prefix}countdown-focused-bg));
       }
 
       &__time-label {

package/src/styles/06-components/_components.data-table.scss

@@ -2,6 +2,7 @@
 @use '../01-settings/settings.data-table' as data-table;
 @use '../02-tools/tools.color-functions' as *;
 @use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.background' as *;
 
 // Component: DataTable
 // Description: Styles for the DataTable component
@@ -32,12 +33,12 @@
   width: 100%;
   margin-bottom: 0;
   color: var(--#{config.$prefix}data-table-color);
-  background-color: var(--#{config.$prefix}data-table-bg);
+  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
   border-collapse: collapse;
 
   // Header
   &__header {
-    background-color: var(--#{config.$prefix}data-table-header-bg);
+    @include dynamic-background(var(--#{config.$prefix}data-table-header-bg));
   }
 
   &__header-cell {
@@ -54,7 +55,7 @@
       user-select: none;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        @include dynamic-background(rgba(0, 0, 0, 0.05));
       }
     }
   }
@@ -85,10 +86,10 @@
 
   // Rows
   &__row {
-    background-color: var(--#{config.$prefix}data-table-bg);
+    @include dynamic-background(var(--#{config.$prefix}data-table-bg));
 
     &:hover {
-      background-color: var(--#{config.$prefix}data-table-hover-bg);
+      @include dynamic-background(var(--#{config.$prefix}data-table-hover-bg));
     }
 
     &[role='button'] {
@@ -116,7 +117,7 @@
   // Variants
   &--striped {
     tbody tr:nth-of-type(odd) {
-      background-color: var(--#{config.$prefix}data-table-striped-bg);
+      @include dynamic-background(var(--#{config.$prefix}data-table-striped-bg));
     }
   }
 

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

@@ -6,6 +6,7 @@
 @use '../02-tools/_tools.rem' as *;
 @use '../02-tools/_tools.animations' as *;
 @use '../01-settings/_settings.z-layers' as *;
+@use '../02-tools/tools.background' as *;
 
 // DatePicker base component
 // --------------------------------------------------
@@ -105,7 +106,7 @@
     z-index: map.get($z-layers, 5);
     width: var(--#{$prefix}datepicker-width);
     padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
-    background-color: var(--#{$prefix}datepicker-bg);
+    @include dynamic-background(var(--#{$prefix}datepicker-bg));
     border-radius: var(--#{$prefix}datepicker-border-radius);
     box-shadow: var(--#{$prefix}datepicker-box-shadow);
     margin-top: rem(4px);

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

@@ -3,6 +3,7 @@
 @use '../02-tools/_tools.rem' as *;
 @use '../02-tools/_tools.animations' as *;
 @use '../02-tools/_tools.spacing' as *;
+@use '../02-tools/tools.background' as *;
 
 // Add keyframe animations for dropdown
 @keyframes #{$prefix}dropdown-fade-in {
@@ -176,7 +177,7 @@
     padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
     list-style: none;
     @include mb(0);
-    background-color: var(--#{$prefix}dropdown-bg);
+    @include dynamic-background(var(--#{$prefix}dropdown-bg));
     border-radius: var(--#{$prefix}dropdown-border-radius);
     box-shadow: var(--#{$prefix}dropdown-box-shadow);
     overflow: hidden;
@@ -199,14 +200,14 @@
     &:hover,
     &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
-      background-color: var(--#{$prefix}dropdown-link-hover-bg);
+      @include dynamic-background(var(--#{$prefix}dropdown-link-hover-bg));
       outline: none;
       padding-left: calc(var(--#{$prefix}dropdown-item-padding-x) + 3px);
     }
 
     &.is-active {
       color: var(--#{$prefix}dropdown-active-color);
-      background-color: var(--#{$prefix}dropdown-active-bg);
+      @include dynamic-background(var(--#{$prefix}dropdown-active-bg));
     }
 
     &.is-disabled {

package/src/styles/06-components/_components.edge-panel.scss

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.z-layers' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 // EdgePanel SCSS Styling
 .c-edge-panel {
@@ -34,7 +35,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: var(--#{$prefix}edge-panel-backdrop-bg);
+    @include dynamic-background(var(--#{$prefix}edge-panel-backdrop-bg));
     backdrop-filter: blur(var(--#{$prefix}edge-panel-backdrop-blur));
     opacity: 0;
     z-index: map.get($z-layers, 1);
@@ -56,7 +57,7 @@
     color: var(--#{$prefix}edge-panel-color);
     width: var(--#{$prefix}edge-panel-width);
     height: 100%;
-    background-color: var(--#{$prefix}edge-panel-bg);
+    @include dynamic-background(var(--#{$prefix}edge-panel-bg));
     box-shadow: var(--#{$prefix}edge-panel-shadow);
     z-index: map.get($z-layers, 2);
     overflow: hidden;
@@ -97,7 +98,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      @include dynamic-background(rgba(0, 0, 0, 0.05));
     }
 
     &:focus-visible {