@shohojdhara/atomix 0.6.5 → 0.6.7

package/src/lib/composables/useAtomixGlass.ts

@@ -10,13 +10,11 @@ import { ATOMIX_GLASS } from '../constants/components';
 import { globalMouseTracker } from './shared-mouse-tracker';
 import {
   calculateElementCenter,
-  calculateMouseInfluence,
   extractBorderRadiusFromChildren,
   extractBorderRadiusFromDOMElement,
-  validateGlassSize,
+  getInteractionIntensity,
   lerp,
   calculateSpring,
-  calculateVelocity,
   smoothstep,
 } from '../../components/AtomixGlass/glass-utils';
 import {
@@ -24,13 +22,6 @@ import {
   type ResolvedGlassBorderConfig,
 } from '../../components/AtomixGlass/glass-border-styles';
 import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
-// Phase 1: Time-Based Animation System
-import {
-  createAnimationLoop,
-  createFBMEngine,
-  getFBMConfigForQuality,
-  liquidGlassWithTime,
-} from '../../components/AtomixGlass/animation-system';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
@@ -157,13 +148,7 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
   priority?: number; // Priority for z-index ordering
-  // Phase 1: Time-Based Animation System
   withLiquidBlur?: boolean;
-  animationQuality?: 'low' | 'medium' | 'high';
-  timeSpeed?: number;
-  noiseAmplitude?: number;
-  noiseFrequency?: number;
-  displacementStrength?: number;
 }
 
 interface UseAtomixGlassReturn {
@@ -198,10 +183,6 @@ interface UseAtomixGlassReturn {
   /** Resolved liquid glass rim configuration */
   resolvedBorder: ResolvedGlassBorderConfig;
 
-  // Phase 1: Animation System - Shader time control
-  getShaderTime: () => number;
-  applyTimeBasedDistortion: (uv: { x: number; y: number }) => { x: number; y: number };
-
   // Event handlers
   handleMouseEnter: () => void;
   handleMouseLeave: () => void;
@@ -241,14 +222,6 @@ export function useAtomixGlass({
   withLiquidBlur,
   isFixedOrSticky = false,
   priority = 1, // Default priority
-  // Phase 1: Animation System Props
-  withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION,
-  animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED,
-  withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION,
-  distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES,
-  distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY,
-  distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN,
-  distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY,
 }: UseAtomixGlassOptions): UseAtomixGlassReturn {
   // State
   const [isHovered, setIsHovered] = useState(false);
@@ -281,46 +254,12 @@ export function useAtomixGlass({
   const elasticVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
   const directionalScaleRef = useRef<{ x: number; y: number }>({ x: 1, y: 1 });
   const scaleVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-  const lastMouseTimeRef = useRef<number>(0);
   const mouseVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
 
   const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
   const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
   const [detectedOverLight, setDetectedOverLight] = useState(false);
 
-  // ============================================================================
-  // Phase 1: Time-Based Animation System (Feature 1.1)
-  // ============================================================================
-
-  // Animation state refs
-  const animationFrameIdRef = useRef<number | null>(null);
-  const animationStartTimeRef = useRef<number>(0);
-  const elapsedTimeRef = useRef<number>(0);
-  const shaderTimeRef = useRef<number>(0);
-
-  /**
-   * Get FBM configuration based on quality preset or custom values
-   */
-  const fbmConfig = useMemo(() => {
-    // If quality preset is provided, use it as base
-    const preset = getFBMConfigForQuality(distortionQuality);
-
-    // Override with custom values if provided
-    return {
-      octaves: distortionOctaves ?? preset.octaves,
-      lacunarity: distortionLacunarity ?? preset.lacunarity,
-      gain: distortionGain ?? preset.gain,
-    };
-  }, [distortionQuality, distortionOctaves, distortionLacunarity, distortionGain]);
-
-  /**
-   * Create FBM engine for multi-layer distortion
-   */
-  const fbmEngine = useMemo(() => {
-    if (!withMultiLayerDistortion) return null;
-    return createFBMEngine(fbmConfig);
-  }, [withMultiLayerDistortion, fbmConfig]);
-
   /**
    * Determine effective animation settings
    */
@@ -329,74 +268,6 @@ export function useAtomixGlass({
     [reducedMotion, userPrefersReducedMotion]
   );
 
-  const effectiveWithTimeAnimation = useMemo(() => {
-    return withTimeAnimation && !effectiveReducedMotion;
-  }, [withTimeAnimation, effectiveReducedMotion]);
-
-  /**
-   * Animation loop for time-based effects
-   */
-  useEffect(() => {
-    if (!effectiveWithTimeAnimation || typeof window === 'undefined') {
-      return undefined;
-    }
-
-    let lastFrameTime = performance.now();
-
-    /**
-     * Animation frame handler
-     */
-    const animate = (currentTime: number) => {
-      // Calculate delta time
-      const deltaTime = currentTime - lastFrameTime;
-      lastFrameTime = currentTime;
-
-      // Apply animation speed multiplier
-      const scaledDelta = deltaTime * animationSpeed;
-      elapsedTimeRef.current += scaledDelta;
-      shaderTimeRef.current = elapsedTimeRef.current;
-
-      // Continue animation loop
-      animationFrameIdRef.current = requestAnimationFrame(animate);
-    };
-
-    // Start animation
-    animationStartTimeRef.current = performance.now();
-    animationFrameIdRef.current = requestAnimationFrame(animate);
-
-    // Cleanup
-    return () => {
-      if (animationFrameIdRef.current !== null) {
-        cancelAnimationFrame(animationFrameIdRef.current);
-        animationFrameIdRef.current = null;
-      }
-    };
-  }, [effectiveWithTimeAnimation, animationSpeed]);
-
-  /**
-   * Get current shader time for animations
-   */
-  const getShaderTime = useCallback(() => {
-    return shaderTimeRef.current;
-  }, []);
-
-  /**
-   * Apply time-based distortion to UV coordinates
-   */
-  const applyTimeBasedDistortion = useCallback(
-    (uv: { x: number; y: number }): { x: number; y: number } => {
-      if (!effectiveWithTimeAnimation || !fbmEngine) {
-        return uv;
-      }
-
-      const time = shaderTimeRef.current;
-
-      // Apply liquid glass distortion with time
-      return liquidGlassWithTime(uv, time, fbmConfig);
-    },
-    [effectiveWithTimeAnimation, fbmEngine, fbmConfig]
-  );
-
   // Memoized derived values
   const effectiveBorderRadius = useMemo(() => {
     if (borderRadius !== undefined) {
@@ -680,8 +551,7 @@ export function useAtomixGlass({
 
   const overLightConfig = useMemo(() => {
     const isOverLight = getEffectiveOverLight();
-    const hoverIntensity = isHovered ? 1.4 : 1;
-    const activeIntensity = isActive ? 1.6 : 1;
+    const { hoverIntensity, activeIntensity } = getInteractionIntensity(isHovered, isActive);
 
     // More robust overlight configuration with better defaults and clamping
     const baseOpacity = isOverLight
@@ -1223,8 +1093,6 @@ export function useAtomixGlass({
     overLightConfig,
     resolvedBorder,
     transformStyle,
-    getShaderTime,
-    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -5,6 +5,7 @@ import {
 } from '../../components/AtomixGlass/glass-border-styles';
 import {
   calculateMouseInfluence,
+  getInteractionIntensity,
   validateGlassSize,
   clampBlur,
   smoothstep,
@@ -84,8 +85,7 @@ export const updateAtomixGlassStyles = (
 
   // Calculate mouse influence
   const mouseInfluence = calculateMouseInfluence(mouseOffset);
-  const hoverIntensity = isHovered ? 1.4 : 1;
-  const activeIntensity = isActive ? 1.6 : 1;
+  const { hoverIntensity, activeIntensity } = getInteractionIntensity(isHovered, isActive);
 
   // Calculate dynamic OverLight config
   const overLightConfig = {
@@ -360,7 +360,7 @@ export const updateAtomixGlassStyles = (
       '--atomix-glass-container-box-shadow',
       isOverLight
         ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
-        : '0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)'
+        : '0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)'
     );
   }
 };

package/src/lib/composables/usePerformanceMonitor.ts

@@ -385,69 +385,3 @@ export function usePerformanceMonitor(
     toggleMonitoring,
   };
 }
-
-/**
- * Debug Overlay Component (Optional)
- * 
- * Shows real-time performance metrics on screen.
- * Only rendered when showOverlay is enabled.
- */
-export function PerformanceOverlay({ metrics }: { metrics: PerformanceMetrics }) {
-  if (typeof window === 'undefined') return null;
-
-  const overlayStyle: React.CSSProperties = {
-    position: 'fixed',
-    top: '10px',
-    right: '10px',
-    padding: '10px',
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    color: '#fff',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-    borderRadius: '4px',
-    zIndex: 9999,
-    pointerEvents: 'none',
-    minWidth: '150px',
-  };
-
-  const getFpsColor = (fps: number) => {
-    if (fps >= 58) return '#4ade80'; // Green
-    if (fps >= 45) return '#fbbf24'; // Yellow
-    return '#ef4444'; // Red
-  };
-
-  // Performance overlay removed - will be implemented as separate component
-  return null;
-}
-
-/**
- * Utility to get quality multipliers for glass parameters
- */
-export function getQualityMultipliers(quality: 'low' | 'medium' | 'high') {
-  switch (quality) {
-    case 'low':
-      return {
-        distortionOctaves: 2,
-        displacementScale: 0.6,
-        blurAmount: 0.7,
-        animationSpeed: 0.8,
-        chromaticIntensity: 0.5,
-      };
-    case 'medium':
-      return {
-        distortionOctaves: 4,
-        displacementScale: 0.85,
-        blurAmount: 0.9,
-        animationSpeed: 0.95,
-        chromaticIntensity: 0.75,
-      };
-    case 'high':
-      return {
-        distortionOctaves: 5,
-        displacementScale: 1.0,
-        blurAmount: 1.0,
-        animationSpeed: 1.0,
-        chromaticIntensity: 1.0,
-      };
-  }
-}

package/src/lib/constants/components.ts

@@ -2015,6 +2015,11 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
+    // Interaction intensity multipliers shared by the hook and the imperative style updater
+    INTERACTION: {
+      HOVER_INTENSITY: 1.4,
+      ACTIVE_INTENSITY: 1.6,
+    },
     // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
     ELASTICITY_TRANSLATION_FACTOR: 0.06, // Subtler elastic shift (was 0.1)
     ELASTICITY_DISTANCE_THRESHOLD: 200,
@@ -2131,7 +2136,7 @@ export const ATOMIX_GLASS = {
     // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
     CONTAINER_SHADOW: {
       LIGHT:
-        'inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)',
+        'inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)',
     },
 
     // Phase 1: Animation System Constants

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

@@ -29,8 +29,8 @@ $glass-border-1-opacity: 0.08 !default;
 
 // Rim shadow tokens (inset hairline + inner catch + outer lift)
 $glass-border-color: rgba(255, 255, 255, 0.28) !default;
-$glass-inner-shadow-color: rgba(255, 255, 255, 0.30) !default;
-$glass-outer-shadow-color: rgba(0, 0, 0, 0.18) !default;
+$glass-inner-shadow-color: rgba(255, 255, 255, 0.20) !default;
+$glass-outer-shadow-color: rgba(0, 0, 0, 0.08) !default;
 
 // Border-only backdrop (ring sampling)
 $glass-border-backdrop-blur: 40px !default;

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

@@ -11,81 +11,81 @@ $black: #000000 !default;
 $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
-// Primitives Primary Colors (Purple Scale)
-$primary-1: #f5f3ff !default;
-$primary-2: #ede9fe !default;
-$primary-3: #ddd6fe !default;
-$primary-4: #c4b5fd !default;
-$primary-5: #a78bfa !default;
-$primary-6: #8b5cf6 !default; // Balanced primary - main brand color (WCAG AA compliant)
-$primary-7: #7c3aed !default;
-$primary-8: #6d28d9 !default;
-$primary-9: #5b21b6 !default;
-$primary-10: #4c1d95 !default;
-
-// Primitives Red Colors
-$red-1: #fef2f2 !default;
-$red-2: #fee2e2 !default;
-$red-3: #fecaca !default;
-$red-4: #fca5a5 !default;
-$red-5: #f87171 !default;
-$red-6: #ef4444 !default; // Vibrant, accessible red
-$red-7: #dc2626 !default;
-$red-8: #b91c1c !default;
-$red-9: #991b1b !default;
-$red-10: #7f1d1d !default;
-
-// Primitives Green Colors
-$green-1: #f0fdf4 !default;
-$green-2: #dcfce7 !default;
-$green-3: #bbf7d0 !default;
-$green-4: #86efac !default;
-$green-5: #4ade80 !default;
-$green-6: #22c55e !default; // Balanced, accessible green
-$green-7: #16a34a !default;
-$green-8: #15803d !default;
-$green-9: #166534 !default;
-$green-10: #14532d !default;
-
-// Primitives Yellow Colors
-$yellow-1: #fefce8 !default;
-$yellow-2: #fef9c3 !default;
-$yellow-3: #fef08a !default;
-$yellow-4: #fde047 !default;
-$yellow-5: #facc15 !default;
-$yellow-6: #eab308 !default; // Accessible, high-visibility yellow
-$yellow-7: #ca8a04 !default;
-$yellow-8: #a16207 !default;
-$yellow-9: #854d0e !default;
-$yellow-10: #713f12 !default;
-
-// Primitives Blue Colors
-$blue-1: #eff6ff !default;
-$blue-2: #dbeafe !default;
-$blue-3: #bfdbfe !default;
-$blue-4: #93c5fd !default;
-$blue-5: #60a5fa !default;
-$blue-6: #3b82f6 !default; // Balanced, accessible blue
-$blue-7: #2563eb !default;
-$blue-8: #1d4ed8 !default;
-$blue-9: #1e40af !default;
-$blue-10: #1e3a8a !default;
-
-// Primitives Gray Colors
-$gray-1: #f9fafb !default;
-$gray-2: #f3f4f6 !default;
-$gray-3: #e5e7eb !default;
-$gray-4: #d1d5db !default;
-$gray-5: #9ca3af !default;
-$gray-6: #6b7280 !default;
-$gray-7: #4b5563 !default;
-$gray-8: #374151 !default;
-$gray-9: #1f2937 !default;
-$gray-10: #111827 !default;
+// Primitives Primary Colors (Premium Violet Scale)
+$primary-1: #f6f4ff !default;
+$primary-2: #ece7ff !default;
+$primary-3: #dccfff !default;
+$primary-4: #c1aafd !default;
+$primary-5: #a07ff9 !default;
+$primary-6: #7c4dff !default; // Premium brand violet - rich, refined main brand color
+$primary-7: #6b3ae8 !default;
+$primary-8: #5a2bc9 !default;
+$primary-9: #47209f !default;
+$primary-10: #341776 !default;
+
+// Primitives Red Colors (Premium Rose Scale)
+$red-1: #fff1f2 !default;
+$red-2: #ffe4e6 !default;
+$red-3: #fecdd3 !default;
+$red-4: #fda4af !default;
+$red-5: #fb7185 !default;
+$red-6: #f43f5e !default; // Refined, accessible rose-red
+$red-7: #e11d48 !default;
+$red-8: #be123c !default;
+$red-9: #9f1239 !default;
+$red-10: #881337 !default;
+
+// Primitives Green Colors (Premium Emerald Scale)
+$green-1: #ecfdf5 !default;
+$green-2: #d1fae5 !default;
+$green-3: #a7f3d0 !default;
+$green-4: #6ee7b7 !default;
+$green-5: #34d399 !default;
+$green-6: #10b981 !default; // Refined, accessible emerald
+$green-7: #059669 !default;
+$green-8: #047857 !default;
+$green-9: #065f46 !default;
+$green-10: #064e3b !default;
+
+// Primitives Yellow Colors (Premium Amber Scale)
+$yellow-1: #fffbeb !default;
+$yellow-2: #fef3c7 !default;
+$yellow-3: #fde68a !default;
+$yellow-4: #fcd34d !default;
+$yellow-5: #fbbf24 !default;
+$yellow-6: #f59e0b !default; // Warm, accessible amber
+$yellow-7: #d97706 !default;
+$yellow-8: #b45309 !default;
+$yellow-9: #92400e !default;
+$yellow-10: #78350f !default;
+
+// Primitives Blue Colors (Premium Azure Scale)
+$blue-1: #eff8ff !default;
+$blue-2: #d8edff !default;
+$blue-3: #b6ddff !default;
+$blue-4: #84c5ff !default;
+$blue-5: #52a6fa !default;
+$blue-6: #2f80ed !default; // Refined, accessible azure blue
+$blue-7: #1f66d4 !default;
+$blue-8: #1a4fad !default;
+$blue-9: #1a428a !default;
+$blue-10: #173770 !default;
+
+// Primitives Gray Colors (Premium Cool Slate Scale)
+$gray-1: #f8fafc !default;
+$gray-2: #f1f5f9 !default;
+$gray-3: #e2e8f0 !default;
+$gray-4: #cbd5e1 !default;
+$gray-5: #94a3b8 !default;
+$gray-6: #64748b !default;
+$gray-7: #475569 !default;
+$gray-8: #334155 !default;
+$gray-9: #1e293b !default;
+$gray-10: #0f172a !default;
 
 // Primitives Overlay
-$overlay-1: rgba(20, 20, 20, 0.302) !default;
-$overlay-2: rgba($gray-6, 0.6) !default;
+$overlay-1: rgba($gray-10, 0.32) !default;
+$overlay-2: rgba($gray-9, 0.6) !default;
 
 //Text colors emphasis
 $primary-text: $gray-10 !default;

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

@@ -65,54 +65,63 @@
   $active-border: null
 ) {
   $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
-  $btn-hover-color: if(
-    $color-hover,
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
-    var(--#{config.$prefix}white, #{colors.$white})
+  $btn-hover-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-hover-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)}
   );
-  $btn-hover-bg: if(
-    $hover-background,
-    var(
-      --#{config.$prefix}#{$hover-background},
-      #{map.get(tokens.$theme-colors, $hover-background)}
-    ),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)}
-    )
+  $btn-hover-border: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)}
   );
-  $btn-hover-border: if(
-    $hover-border,
-    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)}
-    )
+  $btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-active-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)}
   );
-  $btn-active-color: if(
-    $color-hover,
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
-    var(--#{config.$prefix}white, #{colors.$white})
+  $btn-active-border: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)}
   );
-  $btn-active-bg: if(
-    $active-background,
-    var(
+
+  @if $color-hover {
+    $btn-hover-color: var(
+      --#{config.$prefix}#{$color-hover},
+      #{map.get(tokens.$theme-colors, $color-hover)}
+    );
+    $btn-active-color: var(
+      --#{config.$prefix}#{$color-hover},
+      #{map.get(tokens.$theme-colors, $color-hover)}
+    );
+  }
+
+  @if $hover-background {
+    $btn-hover-bg: var(
+      --#{config.$prefix}#{$hover-background},
+      #{map.get(tokens.$theme-colors, $hover-background)}
+    );
+  }
+
+  @if $hover-border {
+    $btn-hover-border: var(
+      --#{config.$prefix}#{$hover-border},
+      #{map.get(tokens.$theme-colors, $hover-border)}
+    );
+  }
+
+  @if $active-background {
+    $btn-active-bg: var(
       --#{config.$prefix}#{$active-background},
       #{map.get(tokens.$theme-colors, $active-background)}
-    ),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)}
-    )
-  );
-  $btn-active-border: if(
-    $active-border,
-    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)}
-    )
-  );
+    );
+  }
+
+  @if $active-border {
+    $btn-active-border: var(
+      --#{config.$prefix}#{$active-border},
+      #{map.get(tokens.$theme-colors, $active-border)}
+    );
+  }
 
   --#{config.$prefix}btn-color: #{$btn-color};
   --#{config.$prefix}btn-bg: transparent;

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

@@ -2,16 +2,19 @@
 @use '../01-settings/settings.grid' as grid;
 @use '../02-tools/tools.grid' as *;
 @use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.rem' as *;
 
 .o-grid {
-  --#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
+  --#{config.$prefix}gutter-y: #{rem(grid.$grid-gutter-width)};
   @include make-row();
+  row-gap: var(--#{config.$prefix}gutter-y);
 
   &__col {
     @include make-col-ready();
   }
 
   &--no-gutters {
+    --#{config.$prefix}gutter-y: 0;
     margin-right: 0;
     margin-left: 0;
 

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

@@ -76,8 +76,8 @@
 
   --atomix-glass-border-shadow:
     0 0 0 0.5px var(--atomix-glass-border-color, #{$glass-border-color}) inset,
-    0 1px 2px var(--atomix-glass-inner-shadow-color, #{$glass-inner-shadow-color}) inset,
-    0 2px 6px var(--atomix-glass-outer-shadow-color, #{$glass-outer-shadow-color});
+    0 1px 1px var(--atomix-glass-inner-shadow-color, #{$glass-inner-shadow-color}) inset,
+    0 1px 3px var(--atomix-glass-outer-shadow-color, #{$glass-outer-shadow-color});
 
   // ── Over-light decorative layers (base, overlay) ─────────────────────────
   // These use var-based positioning so they correctly follow the container in