@shohojdhara/atomix 0.6.3 → 0.6.5

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

@@ -11,7 +11,7 @@
 // ============================================================================
 // Border Radius
 // ============================================================================
-$glass-radius: var(#{config.$prefix}radius-md, 0.75rem) !default;
+$glass-radius: var(--#{config.$prefix}radius-md, 0.75rem) !default;
 
 // ============================================================================
 // Position
@@ -19,9 +19,61 @@ $glass-radius: var(#{config.$prefix}radius-md, 0.75rem) !default;
 $glass-position: absolute !default;
 
 // ============================================================================
-// Border Width
-// ============================================================================
-$glass-border-width: var(#{config.$prefix}spacing-0-5, 0.125rem) !default;
+// Border (liquid glass rim)
+// ============================================================================
+// Hairline refractive edge — Apple liquid glass (~0.5px physical)
+$glass-border-width: max(0.5px, 0.03125rem) !default;
+
+// Layer opacity (static fallback when JS gradients are off)
+$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;
+
+// Border-only backdrop (ring sampling)
+$glass-border-backdrop-blur: 40px !default;
+$glass-border-backdrop-saturate: 180% !default;
+$glass-border-backdrop-brightness: 102% !default;
+$glass-border-backdrop-filter: blur($glass-border-backdrop-blur) saturate($glass-border-backdrop-saturate)
+  brightness($glass-border-backdrop-brightness) !default;
+
+// Static gradient fallbacks (dark chrome)
+$glass-border-fallback-rim: conic-gradient(
+  from 225deg at 50% 50%,
+  rgba(255, 255, 255, 0) 0deg,
+  rgba(255, 255, 255, 0.28) 52deg,
+  rgba(255, 255, 255, 0.1) 120deg,
+  rgba(255, 255, 255, 0.22) 200deg,
+  rgba(255, 255, 255, 0.06) 280deg,
+  rgba(255, 255, 255, 0) 360deg
+) !default;
+
+$glass-border-fallback-inner-highlight: linear-gradient(
+  135deg,
+  rgba(255, 255, 255, 0.22) 0%,
+  rgba(255, 255, 255, 0.06) 28%,
+  rgba(255, 255, 255, 0) 55%
+) !default;
+
+// Over-light: darker rim + softer inner catch on bright backdrops
+$glass-border-fallback-rim-over-light: conic-gradient(
+  from 225deg at 50% 50%,
+  rgba(0, 0, 0, 0) 0deg,
+  rgba(0, 0, 0, 0.22) 52deg,
+  rgba(0, 0, 0, 0.08) 120deg,
+  rgba(0, 0, 0, 0.18) 200deg,
+  rgba(0, 0, 0, 0.05) 280deg,
+  rgba(0, 0, 0, 0) 360deg
+) !default;
+
+$glass-border-fallback-inner-over-light: linear-gradient(
+  135deg,
+  rgba(255, 255, 255, 0.35) 0%,
+  rgba(255, 255, 255, 0.12) 30%,
+  rgba(255, 255, 255, 0) 55%
+) !default;
 
 // ============================================================================
 // Z-Index Layers
@@ -37,14 +89,10 @@ $glass-z-index-content: 2 !default;
 $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;
+// Subtle translucency — Apple liquid glass is nearly invisible on its own
+$glass-base-opacity: 0.35 !default;
+$glass-overlay-opacity: 0.20 !default;
+$glass-overlay-highlight-opacity: 0.18 !default;
 
 // ============================================================================
 // Over-Light Mode Opacity
@@ -126,26 +174,22 @@ $glass-overlay-black-end: 0 !default;
 // ============================================================================
 // Overlay Highlight
 // ============================================================================
-$glass-highlight-start-color: rgba(255, 255, 255, 0.24) !default;
+// Softer top-center specular (Apple positions the light catch at the top)
+$glass-highlight-start-color: rgba(255, 255, 255, 0.18) !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;
+$glass-highlight-opacity-multiplier: 0.9 !default;
 
 // ============================================================================
 // Backdrop Filter
 // ============================================================================
-$glass-backdrop-filter: blur(30px) saturate(140%) brightness(110%) !default;
+// Deep frosting with near-neutral brightness — colour comes from the backdrop
+$glass-backdrop-filter: blur(40px) saturate(180%) brightness(102%) !default;
 
 // ============================================================================
 // Transition
 // ============================================================================
-$glass-transition: var(#{config.$prefix}transition-base) !default;
+// Duration aligned with the global $transition-base token (0.3s).
+// Easing matches the Atomix system easing — fast-start, slow-finish.
 $glass-transition-duration: 0.3s !default;
 $glass-easing: cubic-bezier(0.23, 1, 0.32, 1) !default;
 
@@ -163,12 +207,6 @@ $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;
+$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/02-tools/_tools.glass.scss

@@ -1,6 +1,48 @@
 // AtomixGlass Tools
 // =============================================================================
-// Glass-specific mixins and utilities
-// Note: Focus ring and other general mixins are available in tools.component
+// Liquid glass border ring mixins
 
-@use 'tools.component' as *;
+@use '../01-settings/settings.atomix-glass' as *;
+
+/// Shared geometry for border effect layers (backdrop + gradient rings).
+@mixin liquid-glass-border-layer {
+  display: block;
+  box-sizing: border-box;
+  pointer-events: none;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
+  right: var(--atomix-glass-right);
+  bottom: var(--atomix-glass-bottom);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: var(--_glass-transition);
+}
+
+/// Hollow ring mask — clips content to the border band only (padding-box XOR border-box).
+/// Do not set overflow: hidden here; it breaks mask-composite at rounded corners.
+@mixin liquid-glass-border-ring-mask {
+  padding: var(--atomix-glass-border-width, #{$glass-border-width});
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+/// Gradient / painted rim — mask ring + background (conic or JS linear-gradient).
+@mixin liquid-glass-border-painted-ring {
+  @include liquid-glass-border-layer;
+  @include liquid-glass-border-ring-mask;
+}
+
+/// Backdrop sampling ring — same mask geometry, backdrop-filter on the band only.
+@mixin liquid-glass-border-backdrop-ring {
+  @include liquid-glass-border-layer;
+  @include liquid-glass-border-ring-mask;
+}

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

@@ -3,6 +3,28 @@
 
 @use '../01-settings/settings.atomix-glass' as *;
 @use '../02-tools/tools.component' as *;
+@use '../02-tools/tools.glass' as glass;
+
+// ─── @property registrations ─────────────────────────────────────────────────
+// Typed custom properties let the browser interpolate these values in
+// CSS transitions without needing JS class-toggling.
+@property --atomix-glass-hover-1-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --atomix-glass-hover-2-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --atomix-glass-hover-3-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
 
 .c-atomix-glass {
   position: relative;
@@ -10,9 +32,11 @@
   // Local, sane defaults (kept minimal)
   --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
   --_glass-transform: var(--atomix-glass-transform, translateZ(0));
+  --_glass-backdrop: #{$glass-backdrop-filter};
 
   --atomix-glass-position: absolute;
-  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
+  --atomix-glass-border-width: #{$glass-border-width};
+  --atomix-glass-border-backdrop-filter: #{$glass-border-backdrop-filter};
   --atomix-glass-top: 0;
   --atomix-glass-left: 0;
   --atomix-glass-right: auto;
@@ -55,10 +79,9 @@
     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});
 
-  // Base layer styles for effect layers
-  &__hover-1,
-  &__hover-2,
-  &__hover-3,
+  // ── Over-light decorative layers (base, overlay) ─────────────────────────
+  // These use var-based positioning so they correctly follow the container in
+  // fixed / sticky layouts where the container may have explicit pixel offsets.
   &__base,
   &__overlay {
     position: var(--atomix-glass-position);
@@ -72,65 +95,74 @@
     border-radius: var(--_glass-radius);
     transform: var(--_glass-transform);
     transition: var(--_glass-transition);
-  }
-
-  &__hover-1,
-  &__hover-2,
-  &__hover-3 {
-    z-index: var(--_glass-z-hover);
-  }
-
-  &__base,
-  &__overlay {
     z-index: var(--_glass-z-effect);
   }
 
-  // Interactive hover effects
+  // ── Interactive hover / press layers ─────────────────────────────────────
+  // Always fill the glass surface with inset: 0.  Move in sync with the
+  // elastic spring via the shared --atomix-glass-transform var.
+  // Opacity is driven via typed @property vars so CSS transitions interpolate.
   &__hover-1,
   &__hover-2,
   &__hover-3 {
-    mix-blend-mode: overlay;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    // Opacity transition — works because @property declares the var as <number>
+    transition:
+      opacity #{$glass-transition-duration} #{$glass-easing},
+      border-radius #{$glass-transition-duration} #{$glass-easing};
+    z-index: var(--_glass-z-hover);
   }
 
+  // hover-1: ambient cursor-tracking highlight (white overlay glow)
   &__hover-1 {
     opacity: var(--atomix-glass-hover-1-opacity, 0);
+    mix-blend-mode: overlay;
     background: var(
       --atomix-glass-hover-1-gradient,
       radial-gradient(
-        60% 60% at 50% 0%,
-        var(--atomix-glass-hover-1-start-color, #{$glass-hover-1-start-color}) 0%,
-        var(--atomix-glass-hover-1-end-color, #{$glass-hover-1-end-color}) 60%
+        65% 55% at 50% 30%,
+        rgba(255, 255, 255, 0.22) 0%,
+        rgba(255, 255, 255, 0) 72%
       )
     );
   }
 
+  // hover-2: press depth — subtle shadow at the press point (darken only on active)
   &__hover-2 {
     opacity: var(--atomix-glass-hover-2-opacity, 0);
+    mix-blend-mode: multiply;
     background: var(
       --atomix-glass-hover-2-gradient,
       radial-gradient(
-        80% 80% at 50% 100%,
-        var(--atomix-glass-hover-2-start-color, #{$glass-hover-2-start-color}) 0%,
-        var(--atomix-glass-hover-2-end-color, #{$glass-hover-2-end-color}) 60%
+        70% 60% at 50% 60%,
+        rgba(0, 0, 0, 0.18) 0%,
+        rgba(0, 0, 0, 0) 72%
       )
     );
   }
 
+  // hover-3: global soft-light tint shift — full surface brightness on hover/press
   &__hover-3 {
     opacity: var(--atomix-glass-hover-3-opacity, 0);
+    mix-blend-mode: soft-light;
     background: var(
       --atomix-glass-hover-3-gradient,
       linear-gradient(
-        180deg,
-        var(--atomix-glass-hover-3-start-color, #{$glass-hover-3-start-color}) 0%,
-        var(--atomix-glass-hover-3-end-color, #{$glass-hover-3-end-color}) 100%
+        160deg,
+        rgba(255, 255, 255, 0.12) 0%,
+        rgba(255, 255, 255, 0.04) 55%,
+        rgba(255, 255, 255, 0) 100%
       )
     );
   }
 
   &__base {
     mix-blend-mode: soft-light;
-    opacity: var(--atomix-glass-base-opacity, 0.6);
+    opacity: var(--atomix-glass-base-opacity, #{$glass-base-opacity});
     background: var(
       --atomix-glass-base-gradient,
       linear-gradient(
@@ -143,7 +175,7 @@
 
   &__overlay {
     mix-blend-mode: overlay;
-    opacity: var(--atomix-glass-overlay-opacity, 0.35);
+    opacity: var(--atomix-glass-overlay-opacity, #{$glass-overlay-opacity});
     background: var(
       --atomix-glass-overlay-gradient,
       radial-gradient(
@@ -164,69 +196,59 @@
     transition: var(--_glass-transition);
     mix-blend-mode: screen;
     z-index: var(--_glass-z-overlay-highlight);
-    opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
+    opacity: var(--atomix-glass-overlay-highlight-opacity, #{$glass-overlay-highlight-opacity});
     background: var(
       --atomix-glass-overlay-highlight-bg,
-      linear-gradient(
-        180deg,
+      radial-gradient(
+        90% 55% at 50% 0%,
         var(--atomix-glass-highlight-start-color, #{$glass-highlight-start-color}) 0%,
-        var(--atomix-glass-highlight-end-color, #{$glass-highlight-end-color}) 60%
+        var(--atomix-glass-highlight-end-color, #{$glass-highlight-end-color}) 72%
       )
     );
   }
 
-  // Border effect layers - matching old version exactly
-  &__border-backdrop,
-  &__border-1,
-  &__border-2 {
-    // Static styles
-    padding: var(--atomix-glass-border-width);
-    box-sizing: border-box;
-    overflow: hidden;
-    pointer-events: none;
-    /* autoprefixer: ignore next */
-    -webkit-mask:
-      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
-      linear-gradient(var(--atomix-black, #000000) 0 0);
-    /* autoprefixer: ignore next */
-    -webkit-mask-composite: xor;
-    /* autoprefixer: ignore next */
-    mask:
-      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
-      linear-gradient(var(--atomix-black, #000000) 0 0);
-    /* autoprefixer: ignore next */
-    mask-composite: exclude;
-
-    position: var(--atomix-glass-position);
-    top: var(--atomix-glass-top);
-    left: var(--atomix-glass-left);
-    right: var(--atomix-glass-right);
-    bottom: var(--atomix-glass-bottom);
-    width: var(--atomix-glass-width);
-    height: var(--atomix-glass-height);
-    border-radius: var(--_glass-radius);
-    transform: var(--_glass-transform);
-    transition: var(--_glass-transition);
-  }
-
+  // Border effect layers — liquid glass rim (see tools.glass mixins)
   &__border-backdrop {
-    mix-blend-mode: overlay;
+    @include glass.liquid-glass-border-backdrop-ring;
+
+    mix-blend-mode: #{$glass-border-backdrop-blend-mode};
     z-index: var(--_glass-z-border-1);
-    backdrop-filter: #{$glass-backdrop-filter};
-    // box-shadow: var(--atomix-glass-border-shadow);
+    backdrop-filter: var(--atomix-glass-border-backdrop-filter, #{$glass-border-backdrop-filter});
+    box-shadow: var(--atomix-glass-border-shadow);
   }
 
   &__border-1 {
-    opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
-    mix-blend-mode: screen;
+    @include glass.liquid-glass-border-painted-ring;
+
+    background: var(--atomix-glass-border-gradient-1, #{$glass-border-fallback-rim});
+    opacity: var(--atomix-glass-border-1-opacity, #{$glass-border-1-opacity});
+    mix-blend-mode: #{$glass-border-1-blend-mode};
     z-index: var(--_glass-z-border-2);
-    background: var(--atomix-glass-border-gradient-1, none);
   }
 
   &__border-2 {
-    mix-blend-mode: overlay;
+    @include glass.liquid-glass-border-painted-ring;
+
+    background: var(--atomix-glass-border-gradient-2, #{$glass-border-fallback-inner-highlight});
+    mix-blend-mode: #{$glass-border-2-blend-mode};
     z-index: var(--_glass-z-border-3);
-    background: var(--atomix-glass-border-gradient-2, none);
+  }
+
+  // Over-light: darker conic rim + brighter top-left inner catch
+  &:has(.c-atomix-glass__container--over-light) {
+    .c-atomix-glass__border-1 {
+      background: var(
+        --atomix-glass-border-gradient-1,
+        #{$glass-border-fallback-rim-over-light}
+      );
+    }
+
+    .c-atomix-glass__border-2 {
+      background: var(
+        --atomix-glass-border-gradient-2,
+        #{$glass-border-fallback-inner-over-light}
+      );
+    }
   }
 
   &__container {
@@ -274,7 +296,7 @@
     position: absolute;
     inset: var(--atomix-glass-border-width);
     pointer-events: none;
-    border-radius: var(--_glass-radius);
+    border-radius: max(0px, calc(var(--_glass-radius) - var(--atomix-glass-border-width)));
     box-shadow: var(--atomix-glass-container-shadow);
     opacity: var(--atomix-glass-container-shadow-opacity);
     background: var(--atomix-glass-container-bg);
@@ -345,17 +367,30 @@
   &--disabled-effects {
     --atomix-glass-transform: none;
     --atomix-glass-transition: none;
+    --_glass-transition: none;
   }
 
-  // Focus ring for interactive elements (when onClick is provided)
+  // ── Interactive glass (onClick provided) ─────────────────────────────────
   &[role='button'],
   &[tabindex]:not([tabindex='-1']) {
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
     @include focus-ring;
+
+    // CSS-level press scale fires instantly on :active (before the JS spring
+    // takes over) for zero-latency tactile feedback.
+    &:active > .c-atomix-glass__container {
+      transform: scale(0.985);
+      transition: transform 0.06s cubic-bezier(0.4, 0, 1, 1);
+    }
   }
 
   // Responsive and accessibility
   @media (prefers-reduced-motion: reduce) {
     --atomix-glass-transition: none;
+    --_glass-transition: none;
 
     * {
       transition: none !important;
@@ -363,6 +398,8 @@
   }
 
   @media (prefers-contrast: high) {
-    border-width: var(--atomix-spacing-0-5, 0.125rem);
+    border: var(--atomix-spacing-0-5, 0.125rem) solid currentColor;
+    outline: var(--atomix-spacing-0-5, 0.125rem) solid transparent;
+    outline-offset: var(--atomix-spacing-0-5, 0.125rem);
   }
 }