@shohojdhara/atomix 0.6.3 → 0.6.5

package/dist/atomix.css

@@ -1951,12 +1951,29 @@ a, a:hover {
   margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
   z-index: 1;
 }
+@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;
   --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
   --_glass-transform: var(--atomix-glass-transform, translateZ(0));
+  --_glass-backdrop: blur(40px) saturate(180%) brightness(102%);
   --atomix-glass-position: absolute;
-  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
+  --atomix-glass-border-width: max(0.5px, 0.03125rem);
+  --atomix-glass-border-backdrop-filter: blur(40px) saturate(180%) brightness(102%);
   --atomix-glass-top: 0;
   --atomix-glass-left: 0;
   --atomix-glass-right: auto;
@@ -1978,11 +1995,11 @@ a, a:hover {
   --_glass-z-border-3: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
   --_glass-z-content: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
   --atomix-glass-border-shadow:
-    0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.45)) inset,
-    0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.18)) inset,
-    0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.28));
+    0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.28)) inset,
+    0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.3)) inset,
+    0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.18));
 }
-.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
+.c-atomix-glass__base, .c-atomix-glass__overlay {
   position: var(--atomix-glass-position);
   top: var(--atomix-glass-top);
   left: var(--atomix-glass-left);
@@ -1994,36 +2011,40 @@ a, a:hover {
   border-radius: var(--_glass-radius);
   transform: var(--_glass-transform);
   transition: var(--_glass-transition);
-}
-.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
-  z-index: var(--_glass-z-hover);
-}
-.c-atomix-glass__base, .c-atomix-glass__overlay {
   z-index: var(--_glass-z-effect);
 }
 .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
-  mix-blend-mode: overlay;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: var(--_glass-z-hover);
 }
 .c-atomix-glass__hover-1 {
   opacity: var(--atomix-glass-hover-1-opacity, 0);
-  background: var(--atomix-glass-hover-1-gradient, radial-gradient(60% 60% at 50% 0%, var(--atomix-glass-hover-1-start-color, rgba(255, 255, 255, 0.18)) 0%, var(--atomix-glass-hover-1-end-color, rgba(255, 255, 255, 0)) 60%));
+  mix-blend-mode: overlay;
+  background: var(--atomix-glass-hover-1-gradient, radial-gradient(65% 55% at 50% 30%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%));
 }
 .c-atomix-glass__hover-2 {
   opacity: var(--atomix-glass-hover-2-opacity, 0);
-  background: var(--atomix-glass-hover-2-gradient, radial-gradient(80% 80% at 50% 100%, var(--atomix-glass-hover-2-start-color, rgba(0, 0, 0, 0.12)) 0%, var(--atomix-glass-hover-2-end-color, rgba(0, 0, 0, 0)) 60%));
+  mix-blend-mode: multiply;
+  background: var(--atomix-glass-hover-2-gradient, radial-gradient(70% 60% at 50% 60%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 72%));
 }
 .c-atomix-glass__hover-3 {
   opacity: var(--atomix-glass-hover-3-opacity, 0);
-  background: var(--atomix-glass-hover-3-gradient, linear-gradient(180deg, var(--atomix-glass-hover-3-start-color, rgba(255, 255, 255, 0.06)) 0%, var(--atomix-glass-hover-3-end-color, rgba(255, 255, 255, 0)) 100%));
+  mix-blend-mode: soft-light;
+  background: var(--atomix-glass-hover-3-gradient, linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0) 100%));
 }
 .c-atomix-glass__base {
   mix-blend-mode: soft-light;
-  opacity: var(--atomix-glass-base-opacity, 0.6);
+  opacity: var(--atomix-glass-base-opacity, 0.35);
   background: var(--atomix-glass-base-gradient, linear-gradient(180deg, var(--atomix-glass-base-start-color, rgba(255, 255, 255, 0.08)) 0%, var(--atomix-glass-base-end-color, rgba(255, 255, 255, 0.02)) 100%));
 }
 .c-atomix-glass__overlay {
   mix-blend-mode: overlay;
-  opacity: var(--atomix-glass-overlay-opacity, 0.35);
+  opacity: var(--atomix-glass-overlay-opacity, 0.2);
   background: var(--atomix-glass-overlay-gradient, radial-gradient(120% 120% at 50% -10%, var(--atomix-glass-overlay-start-color, rgba(255, 255, 255, 0.12)) 0%, var(--atomix-glass-overlay-end-color, rgba(255, 255, 255, 0)) 40%));
 }
 .c-atomix-glass__overlay-highlight {
@@ -2035,22 +2056,13 @@ a, a:hover {
   transition: var(--_glass-transition);
   mix-blend-mode: screen;
   z-index: var(--_glass-z-overlay-highlight);
-  opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
-  background: var(--atomix-glass-overlay-highlight-bg, linear-gradient(180deg, var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.24)) 0%, var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 60%));
+  opacity: var(--atomix-glass-overlay-highlight-opacity, 0.18);
+  background: var(--atomix-glass-overlay-highlight-bg, radial-gradient(90% 55% at 50% 0%, var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.18)) 0%, var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 72%));
 }
-.c-atomix-glass__border-backdrop, .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
-  padding: var(--atomix-glass-border-width);
+.c-atomix-glass__border-backdrop {
+  display: block;
   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);
@@ -2061,23 +2073,75 @@ a, a:hover {
   border-radius: var(--_glass-radius);
   transform: var(--_glass-transform);
   transition: var(--_glass-transition);
-}
-.c-atomix-glass__border-backdrop {
+  padding: var(--atomix-glass-border-width, max(0.5px, 0.03125rem));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
   mix-blend-mode: overlay;
   z-index: var(--_glass-z-border-1);
-  -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(110%);
-          backdrop-filter: blur(30px) saturate(140%) brightness(110%);
+  -webkit-backdrop-filter: var(--atomix-glass-border-backdrop-filter, blur(40px) saturate(180%) brightness(102%));
+          backdrop-filter: var(--atomix-glass-border-backdrop-filter, blur(40px) saturate(180%) brightness(102%));
+  box-shadow: var(--atomix-glass-border-shadow);
 }
 .c-atomix-glass__border-1 {
-  opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
+  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);
+  padding: var(--atomix-glass-border-width, max(0.5px, 0.03125rem));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--atomix-glass-border-gradient-1, 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));
+  opacity: var(--atomix-glass-border-1-opacity, 0.08);
   mix-blend-mode: screen;
   z-index: var(--_glass-z-border-2);
-  background: var(--atomix-glass-border-gradient-1, none);
 }
 .c-atomix-glass__border-2 {
+  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);
+  padding: var(--atomix-glass-border-width, max(0.5px, 0.03125rem));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--atomix-glass-border-gradient-2, linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 55%));
   mix-blend-mode: overlay;
   z-index: var(--_glass-z-border-3);
-  background: var(--atomix-glass-border-gradient-2, none);
+}
+.c-atomix-glass:has(.c-atomix-glass__container--over-light) .c-atomix-glass__border-1 {
+  background: var(--atomix-glass-border-gradient-1, 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));
+}
+.c-atomix-glass:has(.c-atomix-glass__container--over-light) .c-atomix-glass__border-2 {
+  background: var(--atomix-glass-border-gradient-2, linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0) 55%));
 }
 .c-atomix-glass__container {
   position: relative;
@@ -2120,7 +2184,7 @@ a, a:hover {
   position: absolute;
   inset: var(--atomix-glass-border-width);
   pointer-events: none;
-  border-radius: var(--_glass-radius);
+  border-radius: max(0px, 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);
@@ -2149,10 +2213,10 @@ a, a:hover {
   z-index: var(--_glass-z-background);
 }
 .c-atomix-glass__background-layer--dark {
-  background-color: var(atomix-gray-9, #1f2937);
+  background-color: var(--atomix-gray-9, #1f2937);
 }
 .c-atomix-glass__background-layer--black {
-  background-color: var(atomix-black, #000000);
+  background-color: var(--atomix-black, #000000);
   mix-blend-mode: overlay;
 }
 .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
@@ -2179,15 +2243,28 @@ a, a:hover {
 .c-atomix-glass--disabled-effects {
   --atomix-glass-transform: none;
   --atomix-glass-transition: none;
+  --_glass-transition: none;
+}
+.c-atomix-glass[role=button], .c-atomix-glass[tabindex]:not([tabindex="-1"]) {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .c-atomix-glass[role=button]:focus-visible, .c-atomix-glass[tabindex]:not([tabindex="-1"]):focus-visible {
   outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
   box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
+.c-atomix-glass[role=button]:active > .c-atomix-glass__container, .c-atomix-glass[tabindex]:not([tabindex="-1"]):active > .c-atomix-glass__container {
+  transform: scale(0.985);
+  transition: transform 0.06s cubic-bezier(0.4, 0, 1, 1);
+}
 @media (prefers-reduced-motion: reduce) {
   .c-atomix-glass {
     --atomix-glass-transition: none;
+    --_glass-transition: none;
   }
   .c-atomix-glass * {
     transition: none !important;
@@ -2195,7 +2272,9 @@ a, a:hover {
 }
 @media (prefers-contrast: high) {
   .c-atomix-glass {
-    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);
   }
 }
 .c-badge {