@shohojdhara/atomix 0.5.0 → 0.5.2

package/atomix.config.ts

@@ -109,6 +109,18 @@ export default defineConfig({
         anonymize: true
     },
 
+    /**
+     * CLI component generator defaults (`atomix generate component`).
+     * CLI flags override these values.
+     */
+    // generator: {
+    //     outputPath: './src/components',
+    //     framework: 'react',
+    //     features: { storybook: true, hook: true, styles: true, tests: false },
+    //     hookOutputDir: 'src/lib/composables',
+    //     storybookCssImport: '@shohojdhara/atomix/scss',
+    // },
+
     /**
      * Theme Customization
      * 

package/build-tools/webpack-loader.js

@@ -110,11 +110,12 @@ export function getAtomixConfig(context) {
 
     return require(configPath);
   } catch {
+    // Return default config matching AtomixConfig interface
     return {
-      theme: 'default',
-      optimize: true,
-      includeAtoms: false,
-      components: [],
+      prefix: 'atomix',
+      theme: {
+        extend: {}
+      }
     };
   }
 }

package/dist/atomix.css

@@ -1409,22 +1409,85 @@ a, a:hover {
     margin-left: 91.6666666667%;
   }
 }
+.o-masonry-grid--css-fallback {
+  display: grid;
+  grid-gap: var(--atomix-spacing-16);
+  gap: var(--atomix-spacing-16);
+  grid-template-columns: repeat(auto-fit, minmax(var(--atomix-masonry-min-column-width, 250px), 1fr));
+}
+@media (min-width: 576px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-8);
+  }
+}
+@media (min-width: 768px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-16);
+  }
+}
+@media (min-width: 992px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-24);
+  }
+}
+.o-masonry-grid--css-fallback .o-masonry-grid__item {
+  position: static;
+  opacity: 1;
+  visibility: visible;
+  width: 100%;
+}
+.o-masonry-grid--css-fallback .o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
+}
 .o-masonry-grid {
   position: relative;
   width: 100%;
-  min-height: 100px;
+  min-height: var(--atomix-spacing-200);
+}
+.o-masonry-grid:focus-within .o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
 }
 .o-masonry-grid--animate .o-masonry-grid__item {
-  transition: opacity 0.3s ease, top 0.3s ease, left 0.3s ease;
+  transition: opacity var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), top var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), left var(--atomix-transition-duration-base) var(--atomix-transition-timing-base);
+}
+@supports (transition-behavior: allow-discrete) {
+  .o-masonry-grid--animate .o-masonry-grid__item {
+    transition-behavior: allow-discrete;
+  }
 }
 .o-masonry-grid__item {
   box-sizing: border-box;
   width: 100%;
+  background-color: var(--atomix-body-bg);
+}
+.o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
+  transform: scale(1.02);
+  transition: transform var(--atomix-transition-duration-fast) var(--atomix-transition-timing-base);
+}
+@media (prefers-contrast: high) {
+  .o-masonry-grid__item:focus {
+    outline-width: calc(var(--atomix-focus-ring-width) * 2);
+  }
 }
 .o-masonry-grid__item:not([style*="position: absolute"]) {
   opacity: 0;
   visibility: hidden;
 }
+@supports (view-transition-name: masonry-item) {
+  .o-masonry-grid__item:not([style*="position: absolute"]) {
+    view-transition-name: masonry-item;
+  }
+}
+.o-masonry-grid__item-loading {
+  position: relative;
+}
 .o-masonry-grid__item-loading::before {
   content: "";
   position: absolute;
@@ -1432,15 +1495,41 @@ a, a:hover {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--atomix-gray-10);
-  z-index: 1;
-  border-radius: 4px;
+  background: var(--atomix-gray-10);
+  z-index: var(--atomix-z-index-10);
+  border-radius: var(--atomix-border-radius-sm);
+  animation: masonry-loading-fade-in 0.5s ease-out forwards;
 }
 .o-masonry-grid__item-loading img {
   opacity: 0;
 }
+@supports (property: opacity) and (animation-timeline: view()) {
+  .o-masonry-grid__item-loading img {
+    opacity: var(--masonry-img-opacity);
+  }
+  @property --masonry-img-opacity {
+    .o-masonry-grid__item-loading img {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+  }
+}
 .o-masonry-grid__item-loaded img {
-  animation: masonry-item-fade-in 0.3s ease forwards;
+  animation: masonry-item-fade-in var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
+}
+@supports (property: opacity) and (animation-timeline: view()) {
+  .o-masonry-grid__item-loaded img {
+    opacity: var(--masonry-img-opacity);
+    animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
+  }
+  @property --masonry-img-opacity {
+    .o-masonry-grid__item-loaded img {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+  }
 }
 .o-masonry-grid--loading-images {
   position: relative;
@@ -1448,28 +1537,61 @@ a, a:hover {
 .o-masonry-grid--loading-images::after {
   content: "";
   position: absolute;
-  bottom: 16px;
-  right: 16px;
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  bottom: var(--atomix-spacing-16);
+  right: var(--atomix-spacing-16);
+  width: var(--atomix-spacing-24);
+  height: var(--atomix-spacing-24);
+  border: var(--atomix-border-width-2) solid rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   border-top-color: var(--atomix-brand-border-subtle);
   animation: masonry-spinner 0.8s linear infinite;
-  z-index: 1000;
+  z-index: var(--atomix-z-index-10);
   pointer-events: none;
 }
+@media (prefers-color-scheme: dark) {
+  .o-masonry-grid--loading-images::after {
+    border-color: rgba(255, 255, 255, 0.1);
+    border-top-color: var(--atomix-brand-border-subtle-dark);
+  }
+}
+@media (min-width: 768px) {
+  .o-masonry-grid {
+    min-height: var(--atomix-spacing-100);
+  }
+}
 @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);
+  }
+}
+@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);
   }
 }
 .o-block {
@@ -1896,81 +2018,95 @@ a, a:hover {
 }
 .c-atomix-glass {
   position: relative;
-  --atomix-glass-transition: all 0.15s ease;
+  --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
+  --_glass-transform: var(--atomix-glass-transform, translateZ(0));
   --atomix-glass-position: absolute;
-  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
-  --atomix-glass-base-z-index: 0;
-  --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
-  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
-  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
-  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
-  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
-  --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
-  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
-  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
-  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
-  position: relative;
-}
-.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
+  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
+  --atomix-glass-top: 0;
+  --atomix-glass-left: 0;
+  --atomix-glass-right: auto;
+  --atomix-glass-bottom: auto;
+  --_glass-transition: var(--atomix-transition-base);
+  --atomix-glass-base-z-index: var(--atomix-z-index-base, 0);
+  --_glass-z-background: calc(
+    var(--atomix-glass-base-z-index) + var(--atomix-z-index-background, 0)
+  );
+  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-overlay-highlight: calc(
+    var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1)
+  );
+  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
+  --_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));
+}
+.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
   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);
   pointer-events: none;
-  border-radius: var(--atomix-glass-radius);
-  transform: var(--atomix-glass-transform);
-  transition: var(--atomix-glass-transition);
+  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 {
-  pointer-events: none;
-  border-radius: var(--atomix-glass-radius);
-  transform: var(--atomix-glass-transform);
-  transition: var(--atomix-glass-transition);
   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;
-  opacity: var(--atomix-glass-hover-1-opacity, 0);
-  background: var(--atomix-glass-hover-1-gradient, none);
 }
 .c-atomix-glass__hover-1 {
-  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
   opacity: var(--atomix-glass-hover-1-opacity, 0);
-  background: var(--atomix-glass-hover-1-gradient, none);
+  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%));
 }
 .c-atomix-glass__hover-2 {
-  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
   opacity: var(--atomix-glass-hover-2-opacity, 0);
-  background: var(--atomix-glass-hover-2-gradient, none);
+  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%));
 }
 .c-atomix-glass__hover-3 {
-  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: var(--_glass-transition);
   opacity: var(--atomix-glass-hover-3-opacity, 0);
-  background: var(--atomix-glass-hover-3-gradient, none);
+  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%));
 }
 .c-atomix-glass__base {
   mix-blend-mode: soft-light;
-  opacity: var(--atomix-glass-base-opacity, 0);
-  background: var(--atomix-glass-base-gradient, none);
+  opacity: var(--atomix-glass-base-opacity, 0.6);
+  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);
-  background: var(--atomix-glass-overlay-gradient, none);
+  opacity: var(--atomix-glass-overlay-opacity, 0.35);
+  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 {
   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);
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: var(--_glass-transition);
   mix-blend-mode: screen;
   z-index: var(--_glass-z-overlay-highlight);
-  opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
-  background: var(--atomix-glass-overlay-highlight-bg, none);
+  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%));
 }
-.c-atomix-glass__border-1, .c-atomix-glass__border-2 {
+.c-atomix-glass__border-backdrop, .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
   padding: var(--atomix-glass-border-width);
   box-sizing: border-box;
   overflow: hidden;
@@ -1986,41 +2122,48 @@ a, a:hover {
   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(--atomix-glass-radius);
-  transform: var(--atomix-glass-transform);
-  transition: var(--atomix-glass-transition);
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: var(--_glass-transition);
+}
+.c-atomix-glass__border-backdrop {
+  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%);
+  box-shadow: var(--atomix-glass-border-shadow);
 }
 .c-atomix-glass__border-1 {
-  opacity: var(--atomix-opacity-20, 0.2);
+  opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
   mix-blend-mode: screen;
-  z-index: var(--_glass-z-border-1);
+  z-index: var(--_glass-z-border-2);
   background: var(--atomix-glass-border-gradient-1, none);
-  box-shadow: var(--atomix-glass-border-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));
 }
 .c-atomix-glass__border-2 {
   mix-blend-mode: overlay;
-  z-index: var(--_glass-z-border-2);
+  z-index: var(--_glass-z-border-3);
   background: var(--atomix-glass-border-gradient-2, none);
-  box-shadow: var(--atomix-glass-border-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));
 }
 .c-atomix-glass__container {
-  position: var(--atomix-glass-position);
+  position: relative;
   top: var(--atomix-glass-top);
   left: var(--atomix-glass-left);
-  border-radius: var(--atomix-glass-radius);
-  transition: var(--atomix-glass-transition);
-  transform: var(--atomix-glass-transform);
+  right: var(--atomix-glass-right);
+  bottom: var(--atomix-glass-bottom);
+  border-radius: var(--_glass-radius);
+  transition: var(--_glass-transition);
+  transform: var(--_glass-transform);
   z-index: var(--_glass-z-container);
 }
 .c-atomix-glass__inner {
   width: 100%;
   height: 100%;
   position: relative;
-  border-radius: var(--atomix-glass-radius);
-  padding: var(--atomix-glass-container-padding);
-  box-shadow: var(--atomix-glass-container-box-shadow);
+  border-radius: var(--_glass-radius);
 }
 .c-atomix-glass__filter {
   position: absolute;
@@ -2032,43 +2175,46 @@ a, a:hover {
   z-index: var(--_glass-z-filter);
 }
 .c-atomix-glass__filter svg {
-  border-radius: var(--atomix-glass-radius);
+  border-radius: var(--_glass-radius);
 }
 .c-atomix-glass__filter-overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border-radius: var(--atomix-glass-container-radius);
-  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
-          backdrop-filter: var(--atomix-glass-container-backdrop);
+  border-radius: var(--_glass-radius);
+  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
+          backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
 }
 .c-atomix-glass__filter-shadow {
   position: absolute;
   inset: var(--atomix-glass-border-width);
   pointer-events: none;
-  border-radius: var(--atomix-glass-container-radius);
+  border-radius: var(--_glass-radius);
   box-shadow: var(--atomix-glass-container-shadow);
   opacity: var(--atomix-glass-container-shadow-opacity);
   background: var(--atomix-glass-container-bg);
 }
 .c-atomix-glass__content {
   position: relative;
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
-  border-radius: var(--atomix-glass-radius);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
+  border-radius: var(--_glass-radius);
   z-index: var(--_glass-z-content);
   text-shadow: var(--atomix-glass-container-text-shadow);
+  box-shadow: var(--atomix-glass-container-box-shadow);
 }
 .c-atomix-glass__background-layer {
   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);
   pointer-events: none;
-  border-radius: var(--atomix-glass-radius);
-  transform: var(--atomix-glass-transform);
-  transition: var(--atomix-glass-transition);
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: var(--_glass-transition);
   z-index: var(--_glass-z-background);
 }
 .c-atomix-glass__background-layer--dark {
@@ -2079,24 +2225,25 @@ a, a:hover {
   mix-blend-mode: overlay;
 }
 .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
-  opacity: var(--atomix-opacity-50, 0.5);
+  opacity: var(--atomix-glass-over-light-dark-opacity, var(--atomix-opacity-50, 0.5));
 }
 .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
-  opacity: var(--atomix-opacity-25, 0.25);
+  opacity: var(--atomix-glass-over-light-black-opacity, var(--atomix-opacity-25, 0.25));
 }
 .c-atomix-glass__background-layer--hidden {
   opacity: var(--atomix-opacity-0, 0);
 }
 .c-atomix-glass--reduced-motion {
   --atomix-glass-transition: none;
+  --_glass-transition: none;
 }
 .c-atomix-glass--reduced-motion * {
   transition: none !important;
 }
 .c-atomix-glass--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);
+  border: var(--atomix-spacing-0-5) solid currentColor;
+  outline: var(--atomix-spacing-0-5) solid transparent;
+  outline-offset: var(--atomix-spacing-0-5);
 }
 .c-atomix-glass--disabled-effects {
   --atomix-glass-transform: none;