@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/styles/01-settings/_settings.atomix-glass.scss

@@ -0,0 +1,174 @@
+// AtomixGlass Settings
+// =============================================================================
+// Default values for glass component styling
+// These can be overridden at any level via CSS custom properties
+
+@use 'sass:map';
+@use 'settings.spacing' as *;
+@use 'settings.config' as config;
+@use 'settings.border-radius' as *;
+
+// ============================================================================
+// Border Radius
+// ============================================================================
+$glass-radius: var(#{config.$prefix}radius-md, 0.75rem) !default;
+
+// ============================================================================
+// Position
+// ============================================================================
+$glass-position: absolute !default;
+
+// ============================================================================
+// Border Width
+// ============================================================================
+$glass-border-width: var(#{config.$prefix}spacing-0-5, 0.125rem) !default;
+
+// ============================================================================
+// Z-Index Layers
+// ============================================================================
+$glass-base-z-index: 0 !default;
+$glass-z-index-background: 0 !default;
+$glass-z-index-overlay: 1 !default;
+$glass-z-index-content: 2 !default;
+
+// ============================================================================
+// Opacity Values
+// ============================================================================
+$glass-hover-1-opacity: 0 !default;
+$glass-hover-2-opacity: 0 !default;
+$glass-hover-3-opacity: 0 !default;
+$glass-base-opacity: 0.6 !default;
+$glass-overlay-opacity: 0.35 !default;
+$glass-overlay-highlight-opacity: 0.25 !default;
+
+// ============================================================================
+// Border Opacity
+// ============================================================================
+$glass-border-1-opacity: 0.18 !default;
+
+// ============================================================================
+// Over-Light Mode Opacity
+// ============================================================================
+$glass-over-light-dark-opacity: 0.5 !default;
+$glass-over-light-black-opacity: 0.25 !default;
+
+// ============================================================================
+// Gradient Colors - Hover 1 (White mode)
+// ============================================================================
+$glass-hover-1-start-color: rgba(255, 255, 255, 0.18) !default;
+$glass-hover-1-end-color: rgba(255, 255, 255, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 1 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-1-black-start: 0.12 !default;
+$glass-hover-1-black-mid: 0.06 !default;
+$glass-hover-1-black-stop: 60% !default;
+$glass-hover-1-black-end: 100% !default;
+
+// ============================================================================
+// Gradient Colors - Hover 2 (White mode)
+// ============================================================================
+$glass-hover-2-start-color: rgba(0, 0, 0, 0.12) !default;
+$glass-hover-2-end-color: rgba(0, 0, 0, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 2 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-2-black-start: 0.08 !default;
+$glass-hover-2-black-mid: 0.04 !default;
+$glass-hover-2-black-stop: 60% !default;
+$glass-hover-2-black-end: 100% !default;
+
+// ============================================================================
+// Gradient Colors - Hover 3 (White mode)
+// ============================================================================
+$glass-hover-3-start-color: rgba(255, 255, 255, 0.06) !default;
+$glass-hover-3-end-color: rgba(255, 255, 255, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 3 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-3-black-start: 0.06 !default;
+$glass-hover-3-black-mid: 0.03 !default;
+$glass-hover-3-black-stop: 60% !default;
+$glass-hover-3-black-end: 100% !default;
+
+// ============================================================================
+// Base Layer (White mode)
+// ============================================================================
+$glass-base-start-color: rgba(255, 255, 255, 0.08) !default;
+$glass-base-end-color: rgba(255, 255, 255, 0.02) !default;
+$glass-base-white-opacity: 0.08 !default;
+
+// ============================================================================
+// Base Layer (Dark/Over-light mode)
+// ============================================================================
+$glass-base-black-start: 0.08 !default;
+$glass-base-black-mid: 0.06 !default;
+$glass-base-black-end: 0.02 !default;
+
+// ============================================================================
+// Overlay Layer (White mode)
+// ============================================================================
+$glass-overlay-start-color: rgba(255, 255, 255, 0.12) !default;
+$glass-overlay-end-color: rgba(255, 255, 255, 0) !default;
+$glass-overlay-white-opacity: 0.12 !default;
+
+// ============================================================================
+// Overlay Layer (Dark/Over-light mode)
+// ============================================================================
+$glass-overlay-black-start: 0.1 !default;
+$glass-overlay-black-mid: 0.05 !default;
+$glass-overlay-black-stop: 40% !default;
+$glass-overlay-black-end: 0 !default;
+
+// ============================================================================
+// Overlay Highlight
+// ============================================================================
+$glass-highlight-start-color: rgba(255, 255, 255, 0.24) !default;
+$glass-highlight-end-color: rgba(255, 255, 255, 0) !default;
+$glass-highlight-opacity-multiplier: 1.1 !default;
+
+// ============================================================================
+// Border Shadow
+// ============================================================================
+$glass-border-color: rgba(255, 255, 255, 0.45) !default;
+$glass-inner-shadow-color: rgba(255, 255, 255, 0.18) !default;
+$glass-outer-shadow-color: rgba(0, 0, 0, 0.28) !default;
+
+// ============================================================================
+// Backdrop Filter
+// ============================================================================
+$glass-backdrop-filter: blur(30px) saturate(140%) brightness(110%) !default;
+
+// ============================================================================
+// Transition
+// ============================================================================
+$glass-transition: var(#{config.$prefix}transition-base) !default;
+$glass-transition-duration: 0.3s !default;
+$glass-easing: cubic-bezier(0.23, 1, 0.32, 1) !default;
+
+// ============================================================================
+// Blend Modes
+// ============================================================================
+$glass-hover-blend-mode: overlay !default;
+$glass-base-blend-mode: soft-light !default;
+$glass-overlay-blend-mode: overlay !default;
+$glass-overlay-highlight-blend-mode: screen !default;
+$glass-border-backdrop-blend-mode: overlay !default;
+$glass-border-1-blend-mode: screen !default;
+$glass-border-2-blend-mode: overlay !default;
+
+// ============================================================================
+// Background Layer Colors
+// ============================================================================
+$glass-background-dark-color: var(#{config.$prefix}gray-9, #1f2937) !default;
+$glass-background-black-color: var(#{config.$prefix}black, #000000) !default;
+
+// ============================================================================
+// Border Backdrop
+// ============================================================================
+$glass-border-backdrop-blur: 30px !default;
+$glass-border-backdrop-saturate: 140% !default;
+$glass-border-backdrop-brightness: 110% !default;

package/src/styles/01-settings/_settings.masonry-grid.scss

@@ -1,17 +1,53 @@
 @use 'settings.config' as config;
 @use 'settings.breakpoints' as breakpoints;
+@use 'settings.design-tokens' as tokens;
+@use 'settings.colors' as colors;
 
-// Define all masonry grid variables with !default flag for overriding
-$masonry-grid-gap: 16px !default;
-$masonry-grid-gap-sm: 8px !default;
-$masonry-grid-gap-lg: 24px !default;
+// === MASONRY GRID DESIGN TOKENS ===
+// Integrated with Atomix design system using CSS custom properties
+
+// Core spacing and layout tokens
+$masonry-grid-gap: var(--#{config.$prefix}spacing-16) !default;
+$masonry-grid-gap-sm: var(--#{config.$prefix}spacing-8) !default;
+$masonry-grid-gap-lg: var(--#{config.$prefix}spacing-24) !default;
+$masonry-grid-gap-xl: var(--#{config.$prefix}spacing-32) !default;
+
+// Responsive column configuration using design system breakpoints
 $masonry-grid-columns-xs: 1 !default;
 $masonry-grid-columns-sm: 2 !default;
 $masonry-grid-columns-md: 3 !default;
 $masonry-grid-columns-lg: 4 !default;
 $masonry-grid-columns-xl: 4 !default;
 $masonry-grid-columns-xxl: 5 !default;
-$masonry-grid-item-transition: all 0.3s ease-in-out !default;
 
-// Define dark mode variables if needed
+// Animation and transition tokens
+$masonry-grid-item-transition: 
+  opacity var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base),
+  top var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base),
+  left var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base) !default;
+
+$masonry-grid-item-animation-duration: var(--#{config.$prefix}transition-duration-base) !default;
+$masonry-grid-item-animation-timing: var(--#{config.$prefix}transition-timing-base) !default;
+
+// Loading state tokens
+$masonry-grid-loading-indicator-size: var(--#{config.$prefix}spacing-24) !default;
+$masonry-grid-loading-indicator-border-width: var(--#{config.$prefix}border-width-2) !default;
+$masonry-grid-loading-indicator-color: var(--#{config.$prefix}brand-border-subtle) !default;
+
+// Dark mode specific tokens (will automatically switch with design system)
 $masonry-grid-item-bg-dark: var(--#{config.$prefix}gray-9) !default;
+$masonry-grid-loading-overlay-dark: var(--#{config.$prefix}gray-20) !default;
+
+// Accessibility and focus management
+$masonry-grid-focus-ring-width: var(--#{config.$prefix}focus-ring-width) !default;
+$masonry-grid-focus-ring-color: var(--#{config.$prefix}focus-ring-color) !default;
+$masonry-grid-focus-ring-offset: var(--#{config.$prefix}focus-ring-offset) !default;
+
+// Mobile-first responsive design tokens
+$masonry-grid-min-height-mobile: var(--#{config.$prefix}spacing-200) !default;
+$masonry-grid-min-height-desktop: var(--#{config.$prefix}spacing-100) !default;
+
+// Z-index layering
+$masonry-grid-z-index-base: var(--#{config.$prefix}z-index-1) !default;
+$masonry-grid-z-index-loading: var(--#{config.$prefix}z-index-10) !default;
+$masonry-grid-z-index-focus: var(--#{config.$prefix}z-index-5) !default;

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

@@ -0,0 +1,6 @@
+// AtomixGlass Tools
+// =============================================================================
+// Glass-specific mixins and utilities
+// Note: Focus ring and other general mixins are available in tools.component
+
+@use 'tools.component' as *;

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

@@ -1,41 +1,116 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.masonry-grid' as masonry;
 @use '../01-settings/settings.breakpoints' as breakpoints;
+@use '../01-settings/settings.design-tokens' as tokens;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.media-queries' as mq;
 @use 'sass:math';
 
+// === MODERN CSS GRID FALLBACK IMPLEMENTATION ===
+// Provides graceful degradation when JavaScript is disabled
+.o-masonry-grid--css-fallback {
+  display: grid;
+  gap: masonry.$masonry-grid-gap;
+  // Use auto-fit with minmax for responsive columns
+  grid-template-columns: repeat(auto-fit, minmax(var(--atomix-masonry-min-column-width, 250px), 1fr));
+  
+  // Mobile-first responsive adjustments
+  @include mq.media-up('sm') {
+    gap: masonry.$masonry-grid-gap-sm;
+  }
+  
+  @include mq.media-up('md') {
+    gap: masonry.$masonry-grid-gap;
+  }
+  
+  @include mq.media-up('lg') {
+    gap: masonry.$masonry-grid-gap-lg;
+  }
+  
+  .o-masonry-grid__item {
+    // CSS Grid items don't need position: absolute
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    width: 100%;
+    
+    // Enhanced accessibility for CSS Grid
+    &:focus {
+      outline: masonry.$masonry-grid-focus-ring-width solid masonry.$masonry-grid-focus-ring-color;
+      outline-offset: masonry.$masonry-grid-focus-ring-offset;
+      z-index: masonry.$masonry-grid-z-index-focus;
+    }
+  }
+}
+
 .o-masonry-grid {
   $root: &;
 
-  // Base styles
+  // Mobile-first base styles with design system tokens
   position: relative;
   width: 100%;
-  min-height: 100px; // Minimum height to prevent layout shift
+  min-height: masonry.$masonry-grid-min-height-mobile;
 
-  // Animation variant
+  // Enhanced focus management for accessibility
+  &:focus-within {
+    .o-masonry-grid__item:focus {
+      outline: masonry.$masonry-grid-focus-ring-width solid masonry.$masonry-grid-focus-ring-color;
+      outline-offset: masonry.$masonry-grid-focus-ring-offset;
+      z-index: masonry.$masonry-grid-z-index-focus;
+    }
+  }
+
+  // Animation variant using design system transitions
   &--animate {
     .o-masonry-grid__item {
-      transition:
-        opacity 0.3s ease,
-        top 0.3s ease,
-        left 0.3s ease;
+      transition: masonry.$masonry-grid-item-transition;
+      // Modern CSS custom property for fine-grained animation control
+      @supports (transition-behavior: allow-discrete) {
+        transition-behavior: allow-discrete;
+      }
     }
   }
 
-  // Item styles
+  // Item styles with enhanced accessibility and design system integration
   &__item {
     box-sizing: border-box;
     width: 100%;
+    // Design system color tokens for background
+    background-color: var(--#{config.$prefix}body-bg);
+    
+    // Enhanced focus states with design system tokens
+    &:focus {
+      outline: masonry.$masonry-grid-focus-ring-width solid masonry.$masonry-grid-focus-ring-color;
+      outline-offset: masonry.$masonry-grid-focus-ring-offset;
+      z-index: masonry.$masonry-grid-z-index-focus;
+      
+      // Subtle scale effect for better visual feedback
+      transform: scale(1.02);
+      transition: transform var(--#{config.$prefix}transition-duration-fast) var(--#{config.$prefix}transition-timing-base);
+    }
+
+    // High contrast mode support
+    @media (prefers-contrast: high) {
+      &:focus {
+        outline-width: calc(#{masonry.$masonry-grid-focus-ring-width} * 2);
+      }
+    }
 
     // Prevent FOUC (Flash of Unstyled Content)
     &:not([style*='position: absolute']) {
       opacity: 0;
       visibility: hidden;
+      // Use CSS Custom Property for progressive enhancement
+      @supports (view-transition-name: masonry-item) {
+        view-transition-name: masonry-item;
+      }
     }
   }
 
-  // Loading states for items
+  // Loading states with modern design system colors
   &__item-loading {
+    position: relative;
+    
     &::before {
       content: '';
       position: absolute;
@@ -43,54 +118,117 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--#{config.$prefix}gray-10);
-      z-index: 1;
-      border-radius: 4px;
+      // Design system loading state background
+      background: var(--#{config.$prefix}gray-10);
+      z-index: masonry.$masonry-grid-z-index-loading;
+      border-radius: var(--#{config.$prefix}border-radius-sm);
+      
+      // Smooth fade-in animation
+      animation: masonry-loading-fade-in 0.5s ease-out forwards;
     }
 
     img {
       opacity: 0;
+      // CSS @property for smoother opacity transitions
+      @supports (property: opacity) and (animation-timeline: view()) {
+        @property --masonry-img-opacity {
+          syntax: '<number>';
+          inherits: false;
+          initial-value: 0;
+        }
+        opacity: var(--masonry-img-opacity);
+      }
     }
   }
 
-  // Loaded state with fade-in animation
-  &__item-loaded img {
-    animation: masonry-item-fade-in 0.3s ease forwards;
+  // Enhanced loaded state with modern CSS features
+  &__item-loaded {
+    img {
+      // Modern CSS animation with design system tokens
+      animation: masonry-item-fade-in masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
+      
+      // CSS @property for precise opacity control
+      @supports (property: opacity) and (animation-timeline: view()) {
+        @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;
+      }
+    }
   }
 
-  // Progressive loading indicator
+  // Modern progressive loading indicator
   &--loading-images {
     position: relative;
 
     &::after {
       content: '';
       position: absolute;
-      bottom: 16px;
-      right: 16px;
-      width: 24px;
-      height: 24px;
-      border: 2px solid rgba(0, 0, 0, 0.1);
+      bottom: var(--#{config.$prefix}spacing-16);
+      right: var(--#{config.$prefix}spacing-16);
+      width: masonry.$masonry-grid-loading-indicator-size;
+      height: masonry.$masonry-grid-loading-indicator-size;
+      border: masonry.$masonry-grid-loading-indicator-border-width solid rgba(0, 0, 0, 0.1);
       border-radius: 50%;
-      border-top-color: var(--#{config.$prefix}brand-border-subtle);
+      border-top-color: masonry.$masonry-grid-loading-indicator-color;
       animation: masonry-spinner 0.8s linear infinite;
-      z-index: 1000;
+      z-index: masonry.$masonry-grid-z-index-loading;
       pointer-events: none;
+      
+      // Dark mode support
+      @media (prefers-color-scheme: dark) {
+        border-color: rgba(255, 255, 255, 0.1);
+        border-top-color: var(--#{config.$prefix}brand-border-subtle-dark);
+      }
     }
   }
 
-  // Animations
+  // Responsive adjustments for desktop
+  @include mq.media-up('md') {
+    min-height: masonry.$masonry-grid-min-height-desktop;
+  }
+
+  // Modern animations with CSS custom properties
   @keyframes masonry-spinner {
     to {
       transform: rotate(360deg);
     }
   }
 
+  @keyframes masonry-loading-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
   @keyframes masonry-item-fade-in {
     from {
       opacity: 0;
+      transform: translateY(20px);
     }
     to {
       opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  // Advanced animation with CSS @property for smooth transitions
+  @keyframes masonry-item-fade-in-advanced {
+    from {
+      --masonry-img-opacity: 0;
+      transform: translateY(20px) scale(0.95);
+    }
+    to {
+      --masonry-img-opacity: 1;
+      transform: translateY(0) scale(1);
     }
   }
 }