@shohojdhara/atomix 0.1.30 → 0.2.2

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;

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

@@ -0,0 +1,274 @@
+// ============================================================================
+// SLIDER COMPONENT
+// ============================================================================
+
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.slider' as slider;
+@use '../01-settings/settings.colors' as colors;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.background' as *;
+
+.c-slider {
+  --#{config.$prefix}slider-speed: #{slider.$slider-speed};
+  --#{config.$prefix}slider-easing: #{slider.$slider-easing};
+  --#{config.$prefix}slider-nav-size: #{slider.$slider-nav-size};
+  --#{config.$prefix}slider-nav-offset: #{slider.$slider-nav-offset};
+  --#{config.$prefix}slider-pagination-offset: #{slider.$slider-pagination-offset};
+  --#{config.$prefix}slider-content-padding: #{slider.$slider-content-padding};
+
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  z-index: slider.$slider-z-index-base;
+
+  &--grab-cursor {
+    cursor: grab;
+  }
+
+  &--grabbing {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  &--vertical .c-slider__wrapper {
+    flex-direction: column;
+  }
+
+  &--loop {
+    .c-slider__slide--duplicate {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    .c-slider__wrapper {
+      will-change: transform;
+
+      &.transitioning {
+        transition: transform var(--#{config.$prefix}slider-speed)
+          var(--#{config.$prefix}slider-easing);
+      }
+
+      &.repositioning {
+        transition: none !important;
+        pointer-events: none;
+      }
+    }
+
+    .c-slider__navigation-prev,
+    .c-slider__navigation-next {
+      &:disabled {
+        opacity: 1 !important;
+        cursor: pointer !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    .c-slider__slide--active {
+      z-index: slider.$slider-z-index-slide-active;
+    }
+  }
+
+  &--empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include dynamic-background(slider.$slider-empty-background);
+    border: slider.$slider-empty-border;
+    border-radius: slider.$slider-empty-border-radius;
+  }
+}
+
+.c-slider__wrapper {
+  position: relative;
+  z-index: slider.$slider-z-index-base;
+  display: flex;
+  box-sizing: content-box;
+  will-change: transform;
+}
+
+.c-slider__slide {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  &--active {
+    z-index: slider.$slider-z-index-slide-active;
+  }
+}
+
+.c-slider__navigation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: slider.$slider-z-index-controls;
+}
+
+.c-slider__navigation-prev,
+.c-slider__navigation-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--#{config.$prefix}slider-nav-size);
+  height: var(--#{config.$prefix}slider-nav-size);
+  border: none;
+  border-radius: slider.$slider-nav-border-radius;
+  @include dynamic-background(slider.$slider-nav-background);
+  color: slider.$slider-nav-color;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: slider.$slider-z-index-controls;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: slider.$slider-nav-transition;
+  box-shadow: slider.$slider-nav-shadow;
+
+  &:hover {
+    @include dynamic-background(slider.$slider-nav-background-hover);
+    transform: translateY(-50%) scale(1.05);
+    box-shadow: slider.$slider-nav-shadow-hover;
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: translateY(-50%);
+  }
+
+  &::before {
+    content: '';
+    width: rem(8px);
+    height: rem(8px);
+    border-top: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+  }
+}
+
+.c-slider__navigation-prev {
+  left: var(--#{config.$prefix}slider-nav-offset);
+
+  &::before {
+    transform: rotate(-135deg);
+    margin-left: rem(2px);
+  }
+}
+
+.c-slider__navigation-next {
+  right: var(--#{config.$prefix}slider-nav-offset);
+
+  &::before {
+    transform: rotate(45deg);
+    margin-right: rem(2px);
+  }
+}
+
+.c-slider__pagination {
+  position: absolute;
+  bottom: var(--#{config.$prefix}slider-pagination-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: slider.$slider-pagination-bullet-gap;
+  z-index: slider.$slider-z-index-controls;
+  pointer-events: none;
+}
+
+.c-slider__pagination-bullet {
+  width: slider.$slider-pagination-bullet-size;
+  height: slider.$slider-pagination-bullet-size;
+  border-radius: slider.$slider-pagination-bullet-border-radius;
+  border: none;
+  @include dynamic-background(slider.$slider-pagination-bullet-background);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: slider.$slider-pagination-transition;
+
+  &:hover {
+    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
+    transform: scale(1.2);
+  }
+
+  &:active {
+    transform: scale(1.1);
+  }
+
+  &--active {
+    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
+    transform: scale(1.2);
+  }
+}
+
+.c-slider__empty-message {
+  color: slider.$slider-empty-message-color;
+  font-size: rem(16px);
+  text-align: center;
+  padding: rem(32px);
+}
+
+@include media-breakpoint-down(md) {
+  .c-slider {
+    --#{config.$prefix}slider-nav-size: #{slider.$slider-nav-size-mobile};
+    --#{config.$prefix}slider-nav-offset: #{slider.$slider-nav-offset-mobile};
+    --#{config.$prefix}slider-pagination-offset: #{slider.$slider-pagination-offset-mobile};
+    --#{config.$prefix}slider-content-padding: #{slider.$slider-content-padding-mobile};
+  }
+
+  .c-slider__navigation-prev,
+  .c-slider__navigation-next {
+    &::before {
+      width: rem(6px);
+      height: rem(6px);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-slider {
+    --#{config.$prefix}slider-speed: 0ms;
+    --#{config.$prefix}slider-easing: none;
+  }
+
+  .c-slider__wrapper,
+  .c-slider__navigation-prev,
+  .c-slider__navigation-next,
+  .c-slider__pagination-bullet {
+    transition: none !important;
+  }
+}
+
+@media print {
+  .c-slider {
+    overflow: visible;
+    height: auto;
+  }
+
+  .c-slider__wrapper {
+    display: block;
+  }
+
+  .c-slider__slide {
+    display: block;
+    width: 100%;
+    height: auto;
+    page-break-inside: avoid;
+    margin-bottom: rem(16px);
+  }
+
+  .c-slider__navigation,
+  .c-slider__pagination {
+    display: none;
+  }
+}

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

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.spinner' as spinner;
 @use '../02-tools/tools.rem' as rem;
 @use '../02-tools/tools.size' as size;
+@use '../02-tools/tools.background' as *;
 @use 'sass:map';
 
 @keyframes spinner {

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

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.hidden' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-steps {
   $root: &;
@@ -53,12 +54,13 @@
   &__line {
     width: var(--#{$prefix}steps-line-width);
     height: var(--#{$prefix}steps-line-height);
-    background-color: var(--#{$prefix}steps-item-bg);
+    @include dynamic-background(var(--#{$prefix}steps-item-bg));
     transition: 1s;
   }
 
   &__content {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--#{$prefix}steps-item-content-gap);
   }
@@ -69,7 +71,7 @@
     @include square(var(--#{$prefix}steps-item-number-size));
     color: var(--#{$prefix}steps-item-number-color);
     font-size: var(--#{$prefix}steps-item-number-font-size);
-    background-color: var(--#{$prefix}steps-item-number-bg);
+    @include dynamic-background(var(--#{$prefix}steps-item-number-bg));
     border-radius: var(--#{$prefix}steps-item-number-border-radius);
   }
 

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

@@ -4,6 +4,7 @@
 @use '../02-tools/tools.transition' as *;
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-tabs {
   $root: &;
@@ -67,7 +68,7 @@
     border: var(--#{$prefix}tabs-nav-btn-border-width) solid transparent;
     border-bottom: var(--#{$prefix}tabs-nav-btn-border-width) solid
       var(--#{$prefix}tabs-nav-btn-border-color);
-    background-color: var(--#{$prefix}tabs-nav-btn-bg);
+    @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg));
     @include basic-transition();
 
     &:active,
@@ -78,7 +79,7 @@
     }
 
     &:hover {
-      background-color: var(--#{$prefix}tabs-nav-btn-bg-hover);
+      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-hover));
     }
 
     &:disabled,
@@ -88,7 +89,7 @@
       );
 
       color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
-      background-color: var(--#{$prefix}tabs-nav-btn-bg-disabled);
+      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-disabled));
       pointer-events: none;
     }
 

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

@@ -1,6 +1,7 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.testimonials' as *;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-testimonial {
   --#{$prefix}testimonial-width: #{$testimonial-width};
@@ -22,7 +23,7 @@
   width: 100%;
   max-width: var(--#{$prefix}testimonial-width);
   padding: var(--#{$prefix}testimonial-padding-y) var(--#{$prefix}testimonial-padding-x);
-  background: var(--#{$prefix}testimonial-bg);
+  @include dynamic-background(var(--#{$prefix}testimonial-bg));
 
   &__quote {
     color: var(--#{$prefix}testimonial-quote-color);

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

@@ -3,6 +3,7 @@
 @use '../01-settings/settings.colors' as colors;
 @use '../02-tools/tools.color-functions' as *;
 @use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.background' as *;
 
 // Component: Todo
 // Description: Styles for the Todo component
@@ -26,7 +27,7 @@
   margin-bottom: todo.$todo-margin-bottom;
   border: 1px solid var(--#{config.$prefix}todo-border-color);
   border-radius: var(--#{config.$prefix}todo-border-radius);
-  background-color: var(--#{config.$prefix}todo-bg);
+  @include dynamic-background(var(--#{config.$prefix}todo-bg));
   color: var(--#{config.$prefix}todo-color);
   padding: todo.$todo-padding;
 
@@ -79,7 +80,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: var(--#{config.$prefix}todo-item-hover-bg);
+      @include dynamic-background(var(--#{config.$prefix}todo-item-hover-bg));
     }
 
     &--completed {