@shohojdhara/atomix 0.2.2 → 0.2.3

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

@@ -10,6 +10,7 @@
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
+  $background-transparency-enable: $background-transparency-enable,
   $blur: $background-blur,
   $use-backdrop-filter: $background-enable-backdrop-filter
 ) {
@@ -22,10 +23,11 @@
     @error 'Blur value must be non-negative, got #{$blur}px';
   }
 
-  @if $transparency > 0 {
+  // Apply background based on transparency settings
+  @if $background-transparency-enable and $transparency > 0 {
     @if $background-enable-gradient-overlay {
       background:
-    // Top highlight layer
+        // Top highlight layer
         linear-gradient(
           135deg,
           rgba(255, 255, 255, 0.15) 0%,
@@ -46,7 +48,6 @@
             color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.3)}, transparent) 0%,
             transparent 70%
           );
-          
     } @else {
       background-color: color-mix(
         in srgb,
@@ -57,29 +58,30 @@
   } @else {
     background-color: $color;
   }
-  // Apply backdrop filter with browser support
-  @if $blur > 0 or $use-backdrop-filter {
-    backdrop-filter:  blur(#{$blur}px) saturate(1.5) contrast(1.2) brightness(1.1);
-    -webkit-backdrop-filter: blur(#{$blur}px) saturate(1.2) contrast(1.2) brightness(1.1);;
+
+  // Apply backdrop filter effects based on settings
+  @if $background-enable-backdrop-filter and ($blur > 0 or $use-backdrop-filter) {
+    backdrop-filter: blur(#{$blur}px) saturate(1.5) contrast(1.2) brightness(1.1);
+    -webkit-backdrop-filter: blur(#{$blur}px) saturate(1.2) contrast(1.2) brightness(1.1);
+  }
+
+  @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),
+      // 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 8px 20px color-mix(in srgb, #{$color} 20%, transparent),
       0 1px 2px rgba(0, 0, 0, 0.1);
   }
 }

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

@@ -0,0 +1 @@
+

package/src/styles/03-generic/_generic.root.scss

@@ -8,6 +8,7 @@
 @use '../01-settings/settings.box-shadow' as box-shadow;
 @use '../01-settings/settings.typography' as typography;
 @use 'sass:meta';
+@use 'sass:map';
 
 
 :root,
@@ -56,7 +57,7 @@
     --#{config.$prefix}#{$color}-gradient: #{$value};
   }
 
-  --#{config.$prefix}gradient: #{map-get(color-maps.$gradient-colors, light)};
+  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, light)};
 
   // Fonts
 
@@ -171,7 +172,7 @@
       --#{config.$prefix}#{$color}-gradient: #{$value};
     }
 
-  --#{config.$prefix}gradient: #{map-get(color-maps.$gradient-colors, dark)};
+  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
 
     --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
     --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};

package/src/styles/04-elements/_elements.body.scss

@@ -18,22 +18,4 @@ body {
     overflow: hidden;
   }
 
-  @if ($background-enable-backdrop-filter) {
-    background: url('https://plus.unsplash.com/premium_photo-1685082778205-8665f65e8c2c?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-
-    &::after {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.7;
-      z-index: -1;
-      background: var(--#{config.$prefix}gradient) ;
-    }
-  }
 }

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

@@ -112,4 +112,20 @@
     --#{config.$prefix}accordion-body-color: var(--#{config.$prefix}accordion-disable-color);
     --#{config.$prefix}accordion-icon-color: var(--#{config.$prefix}accordion-disable-color);
   }
+
+  &--glass {
+    border-color: transparent;
+    #{$root}__header {
+      @include dynamic-background(
+        var(--#{config.$prefix}accordion-header-bg),
+        $background-transparency-enable: true
+      );
+    }
+    #{$root}__body {
+      @include dynamic-background(
+        var(--#{config.$prefix}accordion-header-bg),
+        $background-transparency-enable: true
+      );
+    }
+  }
 }

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

@@ -43,6 +43,24 @@
     --#{$prefix}tag-padding-y: #{$badge-padding-y-lg};
   }
 
+  &--glass {
+    @include dynamic-background(
+      var(--#{$prefix}tag-bg-color),
+      $background-transparency-enable: true,
+      $transparency: 0.8
+    );
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 20%, transparent);
+
+
+      // // Outer depth and glass effect
+      // 0 1px 3px rgba(0, 0, 0, 0.2),
+      // 0 2px 8px rgba(0, 0, 0, 0.15),
+      // 0 4px 16px rgba(0, 0, 0, 0.1),
+      
+      // Subtle highlight on top edge
+      // 0 -1px 0 rgba(255, 255, 255, 0.1);
+  }
+
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
       @if ($color == 'primary') {
@@ -51,9 +69,11 @@
       } @else if ($color == 'dark') {
         --#{$prefix}tag-bg-color: var(--#{$prefix}dark);
         --#{$prefix}tag-color: var(--#{$prefix}light);
+        border: 1px solid var(--#{$prefix}dark);
       } @else if ($color == 'light') {
         --#{$prefix}tag-bg-color: var(--#{$prefix}light);
         --#{$prefix}tag-color: var(--#{$prefix}dark);
+        border: 1px solid var(--#{$prefix}light);
       } @else {
         --#{$prefix}tag-bg-color: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}tag-color: var(--#{$prefix}#{$color}-text-emphasis);
@@ -61,3 +81,17 @@
     }
   }
 }
+
+.c-badge-glass {
+  box-shadow:
+    // Inner glow
+    inset 1px 2px 3px rgba(255, 255, 255, 0.1),
+    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
+    // 0 1px 3px rgba(0, 0, 0, 0.2),
+    // 0 2px 8px rgba(0, 0, 0, 0.15),
+    // 0 4px 16px rgba(0, 0, 0, 0.1),
+    // Subtle highlight on top edge
+    // 0 -1px 0 rgba(255, 255, 255, 0.1);
+    border-radius: 999px;
+
+}

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

@@ -132,4 +132,14 @@
     border-color: var(--#{config.$prefix}btn-disabled-border-color);
     opacity: var(--#{config.$prefix}btn-disabled-opacity);
   }
+
+  // Glass morphism effect styles
+  &--glass {
+    @include dynamic-background(var(--#{config.$prefix}btn-bg), $background-transparency-enable: true);
+
+    &:hover {
+      @include dynamic-background(var(--#{config.$prefix}btn-hover-bg), $background-transparency-enable: true);
+    }
+
+  }
 }

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

@@ -90,9 +90,9 @@
   &__actions {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: var(--#{config.$prefix}callout-actions-spacer);
     margin-left: auto;
+    margin-right: 10px;
   }
 
   &__close-btn {
@@ -191,7 +191,7 @@
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
-        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
+        --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
       } @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
@@ -201,6 +201,45 @@
     }
   }
 
+  // Glass morphism effect styles
+  &--glass {
+    @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+    padding: 0;
+    border: none;
+    display: block;
+
+    #{$root}__glass-content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
+      border: var(--#{config.$prefix}callout-border-witdh) solid
+        var(--#{config.$prefix}callout-border-color);
+      max-width: var(--#{config.$prefix}callout-width);
+      border-radius: var(--#{config.$prefix}callout-border-radius);
+      width: 100%;
+    }
+
+    // Adjust text colors for glass effect
+    #{$root}__title {
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    #{$root}__text {
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    // Glass effect for toast variant
+    &#{$root}--toast {
+      @include dynamic-background(var(--#{config.$prefix}callout-bg), $background-transparency-enable: true);
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+    }
+
+
+  }
+
   &.is-hide {
     opacity: 0;
     transform: translateY(-10px);

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

@@ -137,6 +137,23 @@
       padding-top: 0;
     }
   }
+
+  &--glass {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+    display: block;
+    border-radius: 0;
+
+    #{$root}__glass-content {
+      padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+      max-width: var(--#{$prefix}card-width);
+      border-radius: var(--#{$prefix}card-border-radius);
+      width: 100%;
+      @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
+      background-blend-mode: overlay;
+    }
+  }
 }
 
 // Elevation effect for ElevationCard

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

@@ -2021,7 +2021,7 @@
 
 // Focus management for keyboard navigation
 .c-chart:focus-within {
-  &__data-point:focus {
+  .c-chart__data-point:focus {
     outline: 2px solid var(--#{$prefix}primary-6);
     outline-offset: 2px;
     z-index: 10;

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

@@ -161,6 +161,24 @@
     &--right-end {
       bottom: 0;
     }
+
+    &--glass {
+      z-index: unset;
+      box-shadow: none;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  &__glass-content {
+    z-index: unset;
+    box-shadow: none;
+    border: none;
+    border-radius: var(--#{$prefix}datepicker-border-radius);
+    padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
+    background: color-mix(in srgb, var(--#{$prefix}datepicker-bg) 50%, transparent 0%);
   }
 
   // Inline mode

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

@@ -84,7 +84,7 @@
   &__menu-wrapper {
     position: absolute;
     left: 0;
-    z-index: 99;
+    // z-index: 99;
     display: flex;
     opacity: 0;
     visibility: hidden;
@@ -177,10 +177,16 @@
     padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
     list-style: none;
     @include mb(0);
+        border: 1px solid rgba(255, 255, 255, 0.08);
     @include dynamic-background(var(--#{$prefix}dropdown-bg));
     border-radius: var(--#{$prefix}dropdown-border-radius);
     box-shadow: var(--#{$prefix}dropdown-box-shadow);
     overflow: hidden;
+
+    &--glass {
+      @include dynamic-background(var(--#{$prefix}dropdown-bg), $background-transparency-enable: true);
+      box-shadow: var(--#{$prefix}dropdown-box-shadow);
+    }
   }
 
   &__menu-item {

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

@@ -60,12 +60,11 @@
     inset: 0;
     @include dynamic-background(var(--#{$prefix}hero-overlay));
     opacity: var(--#{$prefix}hero-overlay-opacity);
-    z-index: 1;
+    z-index: 0;
   }
 
   &__container {
     position: relative;
-    z-index: 2;
   }
 
   &__grid {

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

@@ -105,4 +105,34 @@
     --#{$prefix}input-bg: #{$input-disabled-bg};
     pointer-events: none;
   }
-}
+
+  // Glass morphism effect styles
+  &--glass {
+    @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.1),
+      0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+
+    &:focus,
+    &:hover {
+      @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+      box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.15),
+        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
+        0 0 0 2px rgba(var(--#{$prefix}primary-rgb, 122, 255, 215), 0.3);
+    }
+
+
+
+    &#{$root}--textarea {
+      resize: vertical;
+    }
+
+    // Glass disabled state
+    &:disabled,
+    &.is-disabled {
+      @include dynamic-background(var(--#{$prefix}input-bg), $background-transparency-enable: true);
+      opacity: 0.6;
+    }
+  }
+}

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

@@ -8,31 +8,31 @@
 @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%;
@@ -128,7 +128,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    @include dynamic-background(linear-gradient(transparent, rgba(0, 0, 0, 0.8)));
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
     padding: 1.25rem 1rem 1rem;
     opacity: 0;
     visibility: hidden;
@@ -573,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';

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;
+  }
+}