@shohojdhara/atomix 0.5.2 → 0.5.5

package/src/styles/01-settings/_settings.background.scss

@@ -1,7 +1,36 @@
 // Global effect toggles
-$background-enable-gradient-overlay: false !default;
-$background-transparency-enable: false !default;
-$background-enable-with-shadow: false !default;
+$background-enable-gradient-overlay: true !default;
+$background-transparency-enable: true !default;
+$background-enable-with-shadow: true !default;
+$background-enable-mesh-gradient: false !default;
+$background-enable-noise-texture: false !default;
+$background-enable-shimmer: false !default;
 
-// Core transparency levels (used in dynamic-background-core defaults)
-$background-transparency: 0.5 !default;
+// Core transparency levels
+$background-transparency: 0.65 !default;
+$background-transparency-hover: 0.8 !default;
+$background-transparency-active: 0.9 !default;
+
+// Gradient configuration
+$background-gradient-angle: 135deg !default;
+$background-gradient-stops: 4 !default;
+$background-gradient-intensity: 1.2 !default;
+
+// Shadow configuration
+$background-shadow-layers: 3 !default;
+$background-shadow-intensity: 0.2 !default;
+$background-shadow-blur-base: 8px !default;
+$background-shadow-spread: 2px !default;
+
+// Border configuration
+$background-border-width: 1px !default;
+$background-border-opacity: 0.2 !default;
+$background-border-gradient-enable: true !default;
+
+// Noise texture (for glass-like grain)
+$background-noise-opacity: 0.03 !default;
+$background-noise-scale: 200 !default;
+
+// Shimmer effect
+$background-shimmer-duration: 3s !default;
+$background-shimmer-intensity: 0.15 !default;

package/src/styles/02-tools/_tools.background.scss

@@ -3,73 +3,351 @@
 @use 'sass:math';
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:list';
 @use '../01-settings/settings.background' as *;
 @use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.colors' as *;
 @use '../02-tools/tools.to-rgb' as *;
 
+/// Dynamic background mixin with glass morphism effects
+/// @param {Color} $color - Base color for the background
+/// @param {Number} $transparency [0.65] - Transparency level (0-1)
+/// @param {Boolean} $enable-transparency [true] - Enable transparency effects
+/// @param {Boolean} $enable-gradient [true] - Enable gradient overlay
+/// @param {Boolean} $enable-shadow [true] - Enable shadow layers
+/// @param {Boolean} $enable-border [false] - Enable border gradient
+/// @param {Boolean} $enable-noise [false] - Enable noise texture
+/// @param {String} $variant ['glass'] - Variant: 'glass', 'solid', 'mesh', 'shimmer'
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
-  $background-transparency-enable: $background-transparency-enable
+  $enable-transparency: $background-transparency-enable,
+  $enable-gradient: $background-enable-gradient-overlay,
+  $enable-shadow: $background-enable-with-shadow,
+  $enable-border: false,
+  $enable-noise: $background-enable-noise-texture,
+  $variant: 'glass'
 ) {
-  // Validate inputs
-  @if $transparency < 0 or $transparency > 1 {
-    @error 'Transparency must be between 0 and 1, got #{$transparency}';
-  }
+  // Base positioning for pseudo-elements
+  position: relative;
+  isolation: isolate;
 
-  // Apply background based on transparency settings
-  @if $background-transparency-enable and $transparency > 0 {
-    @if $background-enable-gradient-overlay {
-      background:
-        // Top highlight layer
-        linear-gradient(
-          135deg,
-          rgba(255, 255, 255, 0.15) 0%,
-          rgba(255, 255, 255, 0.05) 25%,
-          transparent 50%
-        ),
-        // Main liquid glass layer
-        linear-gradient(
-            to bottom,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.2)}, transparent) 0%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency)}, transparent) 35%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.8)}, transparent) 65%,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.1)}, transparent) 100%
+  // ─── Glass Variant (Default) ────────────────────────────────────────────────
+  @if $variant == 'glass' {
+    @if $enable-transparency {
+      @if $enable-gradient {
+        background:
+          // Shimmer highlight
+          linear-gradient(
+            110deg,
+            transparent 0%,
+            rgba(255, 255, 255, 0.08) 45%,
+            rgba(255, 255, 255, 0.12) 50%,
+            rgba(255, 255, 255, 0.08) 55%,
+            transparent 100%
+          ),
+          // Top edge highlight
+          linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.15) 0%,
+            rgba(255, 255, 255, 0.05) 15%,
+            transparent 30%
+          ),
+          // Main glass layer with depth
+          linear-gradient(
+            $background-gradient-angle,
+            color-mix(in srgb, #{$color} 78%, transparent) 0%,
+            color-mix(in srgb, #{$color} 65%, transparent) 40%,
+            color-mix(in srgb, #{$color} 55%, transparent) 70%,
+            color-mix(in srgb, #{$color} 68%, transparent) 100%
           ),
-        // Bottom shadow layer
-        radial-gradient(
-            ellipse at bottom,
-            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.3)}, transparent) 0%,
-            transparent 70%
+          // Bottom ambient shadow
+          radial-gradient(
+            ellipse 120% 80% at 50% 120%,
+            color-mix(in srgb, #{$color} 26%, transparent) 0%,
+            transparent 60%
           );
+        backdrop-filter: blur(12px) saturate(1.4);
+        -webkit-backdrop-filter: blur(12px) saturate(1.4);
+      } @else {
+        background-color: color-mix(
+          in srgb,
+          #{$color} 65%,
+          transparent
+        );
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+      }
     } @else {
-      background-color: color-mix(
-        in srgb,
-        #{$color} #{math.percentage($transparency)},
-        transparent
-      );
+      background-color: $color;
+    }
+
+    // Glass border gradient
+    @if $enable-border {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        padding: $background-border-width;
+        background: linear-gradient(
+          $background-gradient-angle,
+          rgba(255, 255, 255, $background-border-opacity * 1.2) 0%,
+          rgba(255, 255, 255, $background-border-opacity * 0.6) 50%,
+          rgba(255, 255, 255, $background-border-opacity * 0.3) 100%
+        );
+        -webkit-mask:
+          linear-gradient(#fff 0 0) content-box,
+          linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        pointer-events: none;
+        z-index: 1;
+      }
     }
-  } @else {
+
+    // Noise texture overlay
+    @if $enable-noise {
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        opacity: $background-noise-opacity;
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 #{$background-noise-scale} #{$background-noise-scale}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");
+        background-size: #{$background-noise-scale}px;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+        z-index: 2;
+      }
+    }
+  }
+
+  // ─── Solid Variant ──────────────────────────────────────────────────────────
+  @else if $variant == 'solid' {
     background-color: $color;
+    @if $enable-gradient {
+      background: linear-gradient(
+        $background-gradient-angle,
+        color.adjust($color, $lightness: 5%) 0%,
+        $color 50%,
+        color.adjust($color, $lightness: -5%) 100%
+      );
+    }
+  }
+
+  // ─── Mesh Gradient Variant ──────────────────────────────────────────────────
+  @else if $variant == 'mesh' {
+    background:
+      radial-gradient(
+        circle at 20% 30%,
+        color-mix(in srgb, #{$color} 40%, transparent) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 80% 70%,
+        color-mix(in srgb, #{$color} 35%, transparent) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #{$color} 65%, transparent) 0%,
+        color-mix(in srgb, #{$color} 39%, transparent) 100%
+      );
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  // ─── Shimmer Variant ────────────────────────────────────────────────────────
+  @else if $variant == 'shimmer' {
+    background: color-mix(
+      in srgb,
+      #{$color} 75%,
+      transparent
+    );
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        110deg,
+        transparent 0%,
+        rgba(255, 255, 255, $background-shimmer-intensity) 50%,
+        transparent 100%
+      );
+      transform: translateX(-100%);
+      animation: shimmer $background-shimmer-duration infinite;
+      pointer-events: none;
+    }
+  }
+
+  // ─── Shadow Layers ──────────────────────────────────────────────────────────
+  @if $enable-shadow {
+    $shadow-list: ();
+    
+    // Inner glow
+    $shadow-list: list.append(
+      $shadow-list,
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      comma
+    );
+    
+    // Layered outer shadows
+    @for $i from 1 through $background-shadow-layers {
+      $blur: $background-shadow-blur-base * $i;
+      $spread: if($i == 1, $background-shadow-spread, 0);
+      $opacity: math.div($background-shadow-intensity, $i);
+      
+      $shadow-list: list.append(
+        $shadow-list,
+        0 #{$blur} #{$blur * 2} #{$spread} color-mix(in srgb, #{$color} #{math.percentage($opacity * 100)}, transparent),
+        comma
+      );
+    }
+    
+    // Ambient shadow
+    $shadow-list: list.append(
+      $shadow-list,
+      0 2px 4px rgba(0, 0, 0, 0.05),
+      comma
+    );
+    
+    box-shadow: $shadow-list;
+  }
+
+  // ─── Hover & Active States ──────────────────────────────────────────────────
+  transition:
+    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  @media (hover: hover) {
+    &:hover {
+      @if $variant == 'glass' and $enable-transparency {
+        & {
+          background:
+            linear-gradient(
+              110deg,
+              transparent 0%,
+              rgba(255, 255, 255, 0.1) 45%,
+              rgba(255, 255, 255, 0.15) 50%,
+              rgba(255, 255, 255, 0.1) 55%,
+              transparent 100%
+            ),
+            linear-gradient(
+              180deg,
+              rgba(255, 255, 255, 0.18) 0%,
+              rgba(255, 255, 255, 0.08) 15%,
+              transparent 30%
+            ),
+            linear-gradient(
+              $background-gradient-angle,
+              color-mix(in srgb, #{$color} 96%, transparent) 0%,
+              color-mix(in srgb, #{$color} 80%, transparent) 40%,
+              color-mix(in srgb, #{$color} 68%, transparent) 70%,
+              color-mix(in srgb, #{$color} 84%, transparent) 100%
+            ),
+            radial-gradient(
+              ellipse 120% 80% at 50% 120%,
+              color-mix(in srgb, #{$color} 40%, transparent) 0%,
+              transparent 60%
+            );
+        }
+      }
+      
+      @if $enable-shadow {
+        & {
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.15),
+            0 #{$background-shadow-blur-base * 1.5} #{$background-shadow-blur-base * 3} #{$background-shadow-spread} color-mix(in srgb, #{$color} #{math.percentage($background-shadow-intensity * 150)}, transparent),
+            0 #{$background-shadow-blur-base * 2.5} #{$background-shadow-blur-base * 5} 0 color-mix(in srgb, #{$color} #{math.percentage($background-shadow-intensity * 100)}, transparent),
+            0 2px 4px rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+  }
+
+  &:active {
+    @if $variant == 'glass' and $enable-transparency {
+      & {
+        background:
+          linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.12) 0%,
+            rgba(255, 255, 255, 0.05) 20%,
+            transparent 40%
+          ),
+          linear-gradient(
+            $background-gradient-angle,
+            color-mix(in srgb, #{$color} 108%, transparent) 0%,
+            color-mix(in srgb, #{$color} 90%, transparent) 50%,
+            color-mix(in srgb, #{$color} 81%, transparent) 100%
+          );
+      }
+    }
+    & {
+      transform: scale(0.98);
+    }
   }
+}
 
-  @if $background-enable-with-shadow {
-    box-shadow:
-      var(--atomix-box-shadow-inset),
-      // Inner glow
-      // inset
-      //   0
-      //   1px
-      //   0
-      //   rgba(255, 255, 255, 0.25),
-      // inset 0 -1px 0 color-mix(in srgb, #{$color} 10%, transparent),
-      // Outer depth
-      4px
-        8px
-        32px
-        color-mix(in srgb, #{$color} 20%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.1),
-      0 8px 20px color-mix(in srgb, #{$color} 20%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.1);
+// ─── Shimmer Animation ──────────────────────────────────────────────────────
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
   }
 }
+
+/// Simplified dynamic background for quick usage
+/// @param {Color} $color - Base color
+/// @param {Number} $transparency [0.65] - Transparency level
+@mixin glass-background($color, $transparency: $background-transparency) {
+  @include dynamic-background(
+    $color: $color,
+    $transparency: $transparency,
+    $enable-transparency: true,
+    $enable-gradient: true,
+    $enable-shadow: true,
+    $variant: 'glass'
+  );
+}
+
+/// Solid background with subtle gradient
+/// @param {Color} $color - Base color
+@mixin solid-background($color) {
+  @include dynamic-background(
+    $color: $color,
+    $variant: 'solid',
+    $enable-gradient: true,
+    $enable-shadow: false
+  );
+}
+
+/// Mesh gradient background
+/// @param {Color} $color - Base color
+/// @param {Number} $transparency [0.65] - Transparency level
+@mixin mesh-background($color, $transparency: $background-transparency) {
+  @include dynamic-background(
+    $color: $color,
+    $transparency: $transparency,
+    $variant: 'mesh',
+    $enable-shadow: true
+  );
+}
+
+/// Shimmer effect background
+/// @param {Color} $color - Base color
+/// @param {Number} $transparency [0.65] - Transparency level
+@mixin shimmer-background($color, $transparency: $background-transparency) {
+  @include dynamic-background(
+    $color: $color,
+    $transparency: $transparency,
+    $variant: 'shimmer',
+    $enable-shadow: false
+  );
+}

package/src/styles/05-objects/_objects.masonry-grid.scss

@@ -131,12 +131,12 @@
       opacity: 0;
       // CSS @property for smoother opacity transitions
       @supports (property: opacity) and (animation-timeline: view()) {
+        opacity: var(--masonry-img-opacity);
         @property --masonry-img-opacity {
           syntax: '<number>';
           inherits: false;
           initial-value: 0;
         }
-        opacity: var(--masonry-img-opacity);
       }
     }
   }
@@ -149,13 +149,13 @@
       
       // CSS @property for precise opacity control
       @supports (property: opacity) and (animation-timeline: view()) {
+        opacity: var(--masonry-img-opacity);
+        animation: masonry-item-fade-in-advanced masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
         @property --masonry-img-opacity {
           syntax: '<number>';
           inherits: false;
           initial-value: 0;
         }
-        opacity: var(--masonry-img-opacity);
-        animation: masonry-item-fade-in-advanced masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
       }
     }
   }

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

@@ -146,13 +146,13 @@
       #{$root}__header {
         @include dynamic-background(
           var(--#{config.$prefix}accordion-header-bg),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
       }
       #{$root}__body {
         @include dynamic-background(
           var(--#{config.$prefix}accordion-header-bg),
-          $background-transparency-enable: true
+          $enable-transparency: true
         );
       }
     }

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

@@ -46,7 +46,7 @@
   &--glass {
     @include dynamic-background(
       var(--#{$prefix}tag-bg-color),
-      $background-transparency-enable: true,
+      $enable-transparency: true,
       $transparency: 0.2
     );
     border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);

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

@@ -231,13 +231,13 @@
   &--glass {
     @include dynamic-background(
       var(--#{config.$prefix}btn-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
 
     &:hover {
       @include dynamic-background(
         var(--#{config.$prefix}btn-hover-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
     }
   }

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

@@ -220,7 +220,7 @@
       width: 100%;
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
     }
 
@@ -237,7 +237,7 @@
     &#{$root}--toast {
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),

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

@@ -222,7 +222,7 @@
 
   &--glass {
     max-width: none;
-    @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
+    @include dynamic-background(var(--#{$prefix}card-bg), $enable-transparency: true);
   }
 
   &--outlined {

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

@@ -194,7 +194,7 @@
     &--glass {
       @include dynamic-background(
         var(--#{$prefix}dropdown-bg),
-        $background-transparency-enable: true
+        $enable-transparency: true
       );
       box-shadow: var(--#{$prefix}dropdown-box-shadow);
     }

package/src/styles/06-components/_components.dynamic-background.scss

@@ -0,0 +1,69 @@
+@use '../../styles/01-settings/settings.colors' as *;
+@use '../../styles/01-settings/settings.background' as *;
+@use '../../styles/02-tools/tools.background' as *;
+
+.c-dynamic-background {
+  // Base styles
+  min-height: 200px;
+  border-radius: 16px;
+  
+  // Glass variant (default)
+  &--glass {
+    @include glass-background($primary-6, $background-transparency);
+  }
+  
+  // Solid variant
+  &--solid {
+    @include solid-background($primary-6);
+  }
+  
+  // Mesh variant
+  &--mesh {
+    @include mesh-background($primary-6, $background-transparency);
+  }
+  
+  // Shimmer variant
+  &--shimmer {
+    @include shimmer-background($primary-6, $background-transparency);
+  }
+  
+  // Border modifier
+  &--with-border {
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: $background-border-width;
+      background: linear-gradient(
+        $background-gradient-angle,
+        rgba(255, 255, 255, $background-border-opacity * 1.2) 0%,
+        rgba(255, 255, 255, $background-border-opacity * 0.6) 50%,
+        rgba(255, 255, 255, $background-border-opacity * 0.3) 100%
+      );
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+  
+  // Noise modifier
+  &--with-noise {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      opacity: $background-noise-opacity;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 #{$background-noise-scale} #{$background-noise-scale}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");
+      background-size: #{$background-noise-scale}px;
+      pointer-events: none;
+      mix-blend-mode: overlay;
+      z-index: 2;
+    }
+  }
+}

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

@@ -373,7 +373,7 @@
     transition: opacity 0.3s ease;
     @include dynamic-background(
       var(--#{$prefix}edge-panel-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
   }
 
@@ -406,7 +406,7 @@
   .c-edge-panel__backdrop {
     @include dynamic-background(
       var(--#{$prefix}edge-panel-backdrop-bg),
-      $background-transparency-enable: true
+      $enable-transparency: true
     );
     animation: fadeIn 0.3s ease forwards;
     z-index: map.get($z-layers, 1);

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

@@ -108,7 +108,7 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+    @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
     box-shadow:
       0 8px 32px rgba(0, 0, 0, 0.1),
       0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -118,7 +118,7 @@
     &:hover {
       @include dynamic-background(
         var(--#{$prefix}input-bg),
-        $background-transparency-enable: true,
+        $enable-transparency: true,
         $transparency: 0.9
       );
     }
@@ -130,7 +130,7 @@
     // Glass disabled state
     &:disabled,
     &.is-disabled {
-      @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+      @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
       opacity: 0.6;
     }
   }