@shohojdhara/atomix 0.2.1 → 0.2.3

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

@@ -7,6 +7,7 @@
 @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};
@@ -73,7 +74,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: slider.$slider-empty-background;
+    @include dynamic-background(slider.$slider-empty-background);
     border: slider.$slider-empty-border;
     border-radius: slider.$slider-empty-border-radius;
   }
@@ -119,7 +120,7 @@
   height: var(--#{config.$prefix}slider-nav-size);
   border: none;
   border-radius: slider.$slider-nav-border-radius;
-  background: slider.$slider-nav-background;
+  @include dynamic-background(slider.$slider-nav-background);
   color: slider.$slider-nav-color;
   cursor: pointer;
   pointer-events: auto;
@@ -131,7 +132,7 @@
   box-shadow: slider.$slider-nav-shadow;
 
   &:hover {
-    background: slider.$slider-nav-background-hover;
+    @include dynamic-background(slider.$slider-nav-background-hover);
     transform: translateY(-50%) scale(1.05);
     box-shadow: slider.$slider-nav-shadow-hover;
   }
@@ -190,13 +191,13 @@
   height: slider.$slider-pagination-bullet-size;
   border-radius: slider.$slider-pagination-bullet-border-radius;
   border: none;
-  background: slider.$slider-pagination-bullet-background;
+  @include dynamic-background(slider.$slider-pagination-bullet-background);
   cursor: pointer;
   pointer-events: auto;
   transition: slider.$slider-pagination-transition;
 
   &:hover {
-    background: slider.$slider-pagination-bullet-background-hover;
+    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
     transform: scale(1.2);
   }
 
@@ -205,7 +206,7 @@
   }
 
   &--active {
-    background: slider.$slider-pagination-bullet-background-active;
+    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
     transform: scale(1.2);
   }
 }

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,7 +54,7 @@
   &__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;
   }
 
@@ -70,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 {

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

@@ -4,6 +4,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.hidden' as *;
 @use '../02-tools/tools.transition' as transition;
+@use '../02-tools/tools.background' as *;
 
 .c-toggle {
   $root: &;
@@ -34,7 +35,7 @@
     flex: 0 0 var(--#{$prefix}toggle-switch-width);
     width: var(--#{$prefix}toggle-switch-width);
     height: var(--#{$prefix}toggle-switch-height);
-    background-color: var(--#{$prefix}toggle-switch-bg);
+    @include dynamic-background(var(--#{$prefix}toggle-switch-bg));
     border-radius: var(--#{$prefix}toggle-switch-border-radius);
     user-select: none;
     cursor: pointer;
@@ -47,7 +48,7 @@
       width: var(--#{$prefix}toggle-switch-handle-width);
       height: var(--#{$prefix}toggle-switch-handle-height);
       margin: var(--#{$prefix}toggle-switch-handle-margin);
-      background: var(--#{$prefix}toggle-switch-handle-bg);
+      @include dynamic-background(var(--#{$prefix}toggle-switch-handle-bg));
       border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
 
       @include transition.basic-transition();
@@ -80,7 +81,7 @@
     pointer-events: none;
 
     #{$root}__switch {
-      background: var(--#{$prefix}toggle-switch-disabled-bg);
+      @include dynamic-background(var(--#{$prefix}toggle-switch-disabled-bg));
     }
   }
 
@@ -92,7 +93,7 @@
         content: '';
         position: absolute;
         inset: 0;
-        background: colors.$overlay-2;
+        @include dynamic-background(colors.$overlay-2);
         border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
       }
     }

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

@@ -2,6 +2,7 @@
 @use '../01-settings/settings.tooltip' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-tooltip {
   $root: &;
@@ -35,7 +36,7 @@
     font-size: var(--#{$prefix}tooltip-font-size);
     font-weight: var(--#{$prefix}tooltip-font-weight);
     padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-    background-color: var(--#{$prefix}tooltip-bg);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     border-radius: var(--#{$prefix}tooltip-border-radius);
     z-index: 2;
     opacity: 0;
@@ -55,7 +56,7 @@
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
     @include square(var(--#{$prefix}tooltip-arrow-size));
-    background-color: var(--#{$prefix}tooltip-bg);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
   }
 

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

@@ -5,6 +5,7 @@
 @use '../02-tools/tools.transition' as *;
 @use '../02-tools/tools.hidden-visually' as *;
 @use '../02-tools/tools.border-radius' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-upload {
   $root: &;
@@ -61,13 +62,13 @@
   width: 100%;
   max-width: var(--#{$prefix}upload-width);
   padding: var(--#{$prefix}upload-padding-y) var(--#{$prefix}upload-padding-x);
-  background-color: var(--#{$prefix}upload-bg);
+  @include dynamic-background(var(--#{$prefix}upload-bg));
   border-radius: var(--#{$prefix}upload-border-radius);
 
   @include basic-transition();
 
   &:hover {
-    background-color: var(--#{$prefix}upload-hover-bg);
+    @include dynamic-background(var(--#{$prefix}upload-hover-bg));
   }
 
   &__inner {
@@ -82,7 +83,7 @@
   &__icon {
     font-size: var(--#{$prefix}upload-icon-size);
     padding: var(--#{$prefix}upload-icon-padding);
-    background-color: var(--#{$prefix}upload-icon-bg);
+    @include dynamic-background(var(--#{$prefix}upload-icon-bg));
 
     @include border-radius($border-radius-pill);
   }

package/src/styles/06-components/_components.video-player.scss

@@ -5,37 +5,38 @@
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.video-player' as *;
 @use '../01-settings/settings.colors' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-video-player {
-  --atomix-video-player-bg: #{$video-player-bg};
-  --atomix-video-player-border-radius: #{$video-player-border-radius};
-  --atomix-video-player-controls-padding: #{$video-player-controls-padding};
-  --atomix-video-player-progress-height: #{$video-player-progress-height};
-  --atomix-video-player-button-size: #{$video-player-button-size};
-  --atomix-video-player-font-size: #{$video-player-font-size};
-  --atomix-video-player-transition: #{$video-player-transition};
-  --atomix-video-player-volume-width: #{$video-player-volume-width};
-  --atomix-video-player-volume-width-mobile: #{$video-player-volume-width-mobile};
-  --atomix-video-player-volume-height: #{$video-player-volume-height};
-  --atomix-video-player-volume-height-hover: #{$video-player-volume-height-hover};
-  --atomix-video-player-volume-thumb-size: #{$video-player-volume-thumb-size};
-  --atomix-video-player-volume-bg: #{$video-player-volume-bg};
-  --atomix-video-player-volume-bg-hover: #{$video-player-volume-bg-hover};
-  --atomix-video-player-volume-fill: #{$video-player-volume-fill};
-  --atomix-video-player-volume-fill-hover: #{$video-player-volume-fill-hover};
-  --atomix-video-player-volume-fill-active: #{$video-player-volume-fill-active};
-  --atomix-video-player-subtitle-bg: #{$video-player-subtitle-bg};
-  --atomix-video-player-subtitle-color: #{$video-player-subtitle-color};
-  --atomix-video-player-subtitle-font-size: #{$video-player-subtitle-font-size};
-  --atomix-video-player-subtitle-font-weight: #{$video-player-subtitle-font-weight};
-  --atomix-video-player-subtitle-line-height: #{$video-player-subtitle-line-height};
-  --atomix-video-player-subtitle-border-radius: #{$video-player-subtitle-border-radius};
-  --atomix-video-player-subtitle-text-shadow: #{$video-player-subtitle-text-shadow};
-  --atomix-video-player-subtitle-box-shadow: #{$video-player-subtitle-box-shadow};
+  --#{$prefix}-video-player-bg: #{$video-player-bg};
+  --#{$prefix}-video-player-border-radius: #{$video-player-border-radius};
+  --#{$prefix}-video-player-controls-padding: #{$video-player-controls-padding};
+  --#{$prefix}-video-player-progress-height: #{$video-player-progress-height};
+  --#{$prefix}-video-player-button-size: #{$video-player-button-size};
+  --#{$prefix}-video-player-font-size: #{$video-player-font-size};
+  --#{$prefix}-video-player-transition: #{$video-player-transition};
+  --#{$prefix}-video-player-volume-width: #{$video-player-volume-width};
+  --#{$prefix}-video-player-volume-width-mobile: #{$video-player-volume-width-mobile};
+  --#{$prefix}-video-player-volume-height: #{$video-player-volume-height};
+  --#{$prefix}-video-player-volume-height-hover: #{$video-player-volume-height-hover};
+  --#{$prefix}-video-player-volume-thumb-size: #{$video-player-volume-thumb-size};
+  --#{$prefix}-video-player-volume-bg: #{$video-player-volume-bg};
+  --#{$prefix}-video-player-volume-bg-hover: #{$video-player-volume-bg-hover};
+  --#{$prefix}-video-player-volume-fill: #{$video-player-volume-fill};
+  --#{$prefix}-video-player-volume-fill-hover: #{$video-player-volume-fill-hover};
+  --#{$prefix}-video-player-volume-fill-active: #{$video-player-volume-fill-active};
+  --#{$prefix}-video-player-subtitle-bg: #{$video-player-subtitle-bg};
+  --#{$prefix}-video-player-subtitle-color: #{$video-player-subtitle-color};
+  --#{$prefix}-video-player-subtitle-font-size: #{$video-player-subtitle-font-size};
+  --#{$prefix}-video-player-subtitle-font-weight: #{$video-player-subtitle-font-weight};
+  --#{$prefix}-video-player-subtitle-line-height: #{$video-player-subtitle-line-height};
+  --#{$prefix}-video-player-subtitle-border-radius: #{$video-player-subtitle-border-radius};
+  --#{$prefix}-video-player-subtitle-text-shadow: #{$video-player-subtitle-text-shadow};
+  --#{$prefix}-video-player-subtitle-box-shadow: #{$video-player-subtitle-box-shadow};
 
   position: relative;
   width: 100%;
-  background: var(--#{$prefix}-video-player-bg, #000);
+  @include dynamic-background(var(--#{$prefix}-video-player-bg, #000));
   border-radius: var(--#{$prefix}-video-player-border-radius, 0.5rem);
   overflow: hidden;
   font-family: var(--#{$prefix}-font-family-base);
@@ -351,7 +352,7 @@
     bottom: 3.125rem;
     right: 0;
     min-width: 12.5rem;
-    background: rgba(var(--#{$prefix}primary-rgb), 0.7);
+    @include dynamic-background(rgba(var(--#{$prefix}primary-rgb), 0.7));
     border-radius: 0.5rem;
     padding: 0.5rem;
     backdrop-filter: blur(10px);
@@ -572,6 +573,28 @@
     display: block;
   }
 
+  // Glass morphism variant
+  &--glass {
+    position: relative;
+  }
+
+  &__glass-overlay {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: var(--#{$prefix}-video-player-border-radius, 0.5rem);
+  }
+
+  &__glass-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: auto;
+  }
+
   // Subtitle track styling (fallback for browsers that don't support ::cue)
   &__subtitles {
     position: absolute;

package/src/styles/06-components/_index.scss

@@ -2,6 +2,7 @@
 @forward 'components.accordion';
 @forward 'components.avatar';
 @forward 'components.avatar-group';
+@forward 'components.atomix-glass';
 @forward 'components.badge';
 @forward 'components.breadcrumb';
 @forward 'components.btn-group';
@@ -16,6 +17,7 @@
 @forward 'components.data-table';
 @forward 'components.dropdown';
 @forward 'components.edge-panel';
+@forward 'components.footer';
 @forward 'components.form';
 @forward 'components.hero';
 @forward 'components.form-group';

package/src/styles/99-utilities/_utilities.glass-fixes.scss

@@ -0,0 +1,48 @@
+// =============================================================================
+// GLASS EFFECT UTILITIES
+// =============================================================================
+// Minimal utilities that don't duplicate React component inline styles
+
+// =============================================================================
+// BACKDROP FILTER FIXES
+// =============================================================================
+
+// Remove problematic properties that break backdrop-filter
+.u-glass-clean-root {
+  isolation: initial !important;
+  contain: none !important;
+  transform-style: flat !important;
+  will-change: auto !important;
+  transform: none !important;
+}
+
+// =============================================================================
+// DEBUG UTILITIES
+// =============================================================================
+
+.u-glass-debug {
+  outline: 2px dashed red !important;
+
+  &::after {
+    content: 'Glass Debug';
+    position: absolute;
+    top: -20px;
+    left: 0;
+    background: red;
+    color: white;
+    font-size: 10px;
+    padding: 2px 4px;
+    z-index: 9999;
+  }
+}
+
+// =============================================================================
+// ACCESSIBILITY
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .u-glass-no-motion {
+    transition: none !important;
+    animation: none !important;
+  }
+}