@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/styles/06-components/_components.atomix-glass.scss

@@ -1,72 +1,249 @@
-.atomix-glass {
-  &__layer {
-    pointer-events: none;
+// Component: AtomixGlass
+// =============================================================================
+
+.c-atomix-glass {
+  position: relative;
+
+  // CSS custom property defaults
+  --atomix-glass-radius: var(--atomix-radius-md, 16px);
+  --atomix-glass-transform: none;
+  --atomix-glass-transition: opacity var(--atomix-transition-duration, 0.2s) ease-out;
+  --atomix-glass-position: absolute;
+  --atomix-glass-container-width: 100%;
+  --atomix-glass-container-height: 100%;
+  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
+
+  // Base layer styles for all effect layers (hover, border, overlay)
+  &__hover-1,
+  &__hover-2,
+  &__hover-3,
+  &__base,
+  &__overlay {
     position: absolute;
     inset: 0;
-    border-radius: inherit;
-    transform: inherit;
-    transition: inherit;
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+  }
+
+  // Interactive hover effects
+  &__hover-1,
+  &__hover-2,
+  &__hover-3 {
+    mix-blend-mode: overlay;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-hover-1-opacity, 0);
+    background: var(--atomix-glass-hover-1-gradient, none);
+  }
+
+  &__hover-1 {
+    transition: opacity 0.2s ease-out;
+    opacity: var(--atomix-glass-hover-1-opacity, 0);
+    background: var(--atomix-glass-hover-1-gradient, none);
+  }
+
+  &__hover-2 {
+    transition: opacity 0.4s ease-out;
+    opacity: var(--atomix-glass-hover-2-opacity, 0);
+    background: var(--atomix-glass-hover-2-gradient, none);
+  }
+
+  &__hover-3 {
+    transition: opacity 0.6s ease-out;
+    opacity: var(--atomix-glass-hover-3-opacity, 0);
+    background: var(--atomix-glass-hover-3-gradient, none);
+  }
+
+  // Base and overlay layers for over-light mode
+  &__base {
+    mix-blend-mode: soft-light;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-base-opacity, 0);
+    background: var(--atomix-glass-base-gradient, none);
   }
 
+  &__overlay {
+    mix-blend-mode: overlay;
+    // Dynamic opacity and background are set via inline styles using CSS variables
+    opacity: var(--atomix-glass-overlay-opacity, 0);
+    background: var(--atomix-glass-overlay-gradient, none);
+  }
+
+  &__overlay-highlight {
+    position: absolute;
+    inset: var(--atomix-spacing-0-5, 0.125rem);
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+    mix-blend-mode: screen;
+    // Dynamic opacity and background are set via inline styles
+    // Opacity is calculated: opacityValues.over * OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER
+    // Background gradient uses constants for positioning
+  }
+
+  // Border effect layers - matching old version exactly
   &__border-1,
   &__border-2 {
-    @extend .atomix-glass__layer;
+    // Static styles
+    padding: var(--atomix-glass-border-width);
     box-sizing: border-box;
-    padding: 1.5px;
-    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    overflow: hidden;
+    pointer-events: none;
+    -webkit-mask:
+      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
+      linear-gradient(var(--atomix-black, #000000) 0 0);
     -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
+      linear-gradient(var(--atomix-black, #000000) 0 0);
     mask-composite: exclude;
-    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35);
-    transition-property: transform;
+    
+    // Dynamic values set via inline styles using CSS variables
+    position: var(--atomix-glass-position);
+    top: var(--atomix-glass-top);
+    left: var(--atomix-glass-left);
+    width: var(--atomix-glass-width);
+    height: var(--atomix-glass-height);
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
   }
 
   &__border-1 {
-    z-index: 5;
-    opacity: 0.3;
+    opacity: var(--atomix-opacity-20, 0.2);
     mix-blend-mode: screen;
+    z-index: var(--atomix-z-index-5, 5);
+    // Dynamic gradient background set via CSS variable
+    background: var(--atomix-glass-border-gradient-1, none);
+    // Note: Box-shadow rgba values use CSS custom properties for colors via CSS variables
+    // These are set dynamically in TypeScript component via --atomix-glass-border-shadow
+    box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
   }
 
   &__border-2 {
-    z-index: 6;
+    mix-blend-mode: overlay;
+    z-index: var(--atomix-z-index-6, 6);
+    // Dynamic gradient background set via CSS variable
+    background: var(--atomix-glass-border-gradient-2, none);
+    // Note: Box-shadow rgba values use CSS custom properties for colors via CSS variables
+    // These are set dynamically in TypeScript component via --atomix-glass-border-shadow
+    box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
   }
 
-  &__hover-1,
-  &__hover-2,
-  &__hover-3 {
+  // Container styles
+  &__container {
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
+    position: relative;
+    border-radius: var(--atomix-glass-radius);
+    transition: border-radius 0.25s ease-out;
+  }
+
+  &__inner {
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
+    position: relative;
+    // Padding and border-radius are set dynamically via inline styles
+    border-radius: var(--atomix-glass-radius);
+  }
+
+  &__filter {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     pointer-events: none;
-    border-radius: inherit;
-    transform: inherit;
-    transition: inherit;
-    transition-property: transform, opacity;
   }
 
-  &__hover-1 {
-    opacity: 0;
+  &__filter-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
   }
 
-  &__hover-2 {
-    overflow: hidden;
-    opacity: 0;
+  &__filter-shadow {
+    position: absolute;
+    inset: var(--atomix-glass-border-width);
+    pointer-events: none;
   }
 
-  &__hover-3 {
-    opacity: 0;
+  &__content {
+    position: relative;
+    width: var(--atomix-glass-container-width);
+    height: var(--atomix-glass-container-height);
   }
 
-  &__base {
-    @extend .atomix-glass__layer;
+  // Background layers for over-light mode
+  &__background-layer {
+    position: absolute;
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
     will-change: transform;
-    transition-property: transform, opacity;
-    opacity: 0;
+    // Dynamic values: position, width, height are set via inline styles
+    // Position comes from positionStyles, width/height from adjustedSize
+
+    // Dark background variant
+    &--dark {
+      background-color: var(--atomix-gray-9, #1f2937);
+    }
+
+    // Black background variant
+    &--black {
+      background-color: var(--atomix-black, #000000);
+      mix-blend-mode: overlay;
+    }
+
+    // Over-light state modifier (50% opacity for dark, 25% for black)
+    // When both --dark and --over-light modifiers are present
+    &--dark#{&}--over-light {
+      opacity: var(--atomix-opacity-50, 0.5);
+    }
+
+    &--black#{&}--over-light {
+      opacity: var(--atomix-opacity-25, 0.25);
+    }
+
+    // Hidden state modifier
+    &--hidden {
+      opacity: var(--atomix-opacity-0, 0);
+    }
   }
 
-  &__overlay {
-    @extend .atomix-glass__layer;
-    mix-blend-mode: overlay;
-    will-change: transform;
-    transition-property: transform, opacity;
-    opacity: 0;
+  // State modifiers
+  &--reduced-motion {
+    --atomix-glass-transition: none;
+
+    * {
+      transition: none !important;
+    }
+  }
+
+  &--high-contrast {
+    border: var(--atomix-spacing-0-5, 2px) solid currentColor;
+    outline: var(--atomix-spacing-0-5, 2px) solid transparent;
+    outline-offset: var(--atomix-spacing-0-5, 2px);
+  }
+
+  &--disabled-effects {
+    --atomix-glass-transform: none;
+    --atomix-glass-transition: none;
+  }
+
+  // Responsive and accessibility
+  @media (prefers-reduced-motion: reduce) {
+    --atomix-glass-transition: none;
+
+    * {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: high) {
+    border-width: var(--atomix-spacing-0-5, 0.125rem);
   }
 }

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

@@ -51,14 +51,13 @@
     );
     border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 90%, 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),
 
-      // // 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);
+    // Subtle highlight on top edge
+    // 0 -1px 0 rgba(255, 255, 255, 0.1);
   }
 
   @each $color, $value in maps.$theme-colors {
@@ -81,4 +80,3 @@
     }
   }
 }
-

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

@@ -135,11 +135,16 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{config.$prefix}btn-bg), $background-transparency-enable: true);
+    @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);
+      @include dynamic-background(
+        var(--#{config.$prefix}btn-hover-bg),
+        $background-transparency-enable: true
+      );
     }
-
   }
 }

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

@@ -139,20 +139,8 @@
   }
 
   &--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;
-    }
+    max-width: none;
+    @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
   }
 }