@shohojdhara/atomix 0.3.15 → 0.4.0

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

@@ -121,20 +121,24 @@
     mix-blend-mode: screen;
     z-index: var(--atomix-z-index-5, 5);
     background: var(--atomix-glass-border-gradient-1, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
     z-index: var(--atomix-z-index-6, 6);
     background: var(--atomix-glass-border-gradient-2, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   // Container styles
@@ -254,4 +258,4 @@
   @media (prefers-contrast: high) {
     border-width: var(--atomix-spacing-0-5, 0.125rem);
   }
-}
+}

package/src/styles/06-components/_components.button.scss

@@ -149,15 +149,27 @@
   }
 
   &--active {
-    --#{config.$prefix}btn-bg: var(--#{config.$prefix}btn-active-bg, var(--#{config.$prefix}btn-hover-bg));
-    --#{config.$prefix}btn-color: var(--#{config.$prefix}btn-active-color, var(--#{config.$prefix}btn-hover-color));
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}btn-active-border-color, var(--#{config.$prefix}btn-hover-border-color));
+    --#{config.$prefix}btn-bg: var(
+      --#{config.$prefix}btn-active-bg,
+      var(--#{config.$prefix}btn-hover-bg)
+    );
+    --#{config.$prefix}btn-color: var(
+      --#{config.$prefix}btn-active-color,
+      var(--#{config.$prefix}btn-hover-color)
+    );
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}btn-active-border-color,
+      var(--#{config.$prefix}btn-hover-border-color)
+    );
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   &--selected {
     --#{config.$prefix}btn-border-width: 2px;
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}brand-border-subtle, var(--#{config.$prefix}primary));
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}brand-border-subtle,
+      var(--#{config.$prefix}primary)
+    );
     box-shadow: 0 0 0 2px rgba(var(--#{config.$prefix}primary-rgb, 124, 58, 237), 0.2);
   }
 

package/src/styles/06-components/_components.callout.scss

@@ -43,9 +43,13 @@
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
   @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
-  border: var(--#{config.$prefix}callout-border-witdh) solid var(--#{config.$prefix}callout-border-color);
-  transition: opacity var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing),
-  transform var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing);
+  border: var(--#{config.$prefix}callout-border-witdh) solid
+    var(--#{config.$prefix}callout-border-color);
+  transition:
+    opacity var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing),
+    transform var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing);
 
   &__content {
     width: 100%;
@@ -135,7 +139,8 @@
     position: relative;
     max-width: rem.rem(350px);
     width: 100%;
-    padding: var(--#{config.$prefix}callout-tost-padding-y) var(--#{config.$prefix}callout-tost-padding-x);
+    padding: var(--#{config.$prefix}callout-tost-padding-y)
+      var(--#{config.$prefix}callout-tost-padding-x);
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
@@ -151,7 +156,9 @@
       }
 
       &__actions {
-        padding-left: calc(var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer));
+        padding-left: calc(
+          var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer)
+        );
         margin-top: var(--#{config.$prefix}callout-actions-spacer-y);
       }
 
@@ -170,29 +177,23 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}brand-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}brand-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}brand-text-emphasis);
-      }
-
-      @else if($color =='light') {
+      } @else if($color == 'light') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-text-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}tertiary-text-emphasis);
-      }
-
-      @else if($color =='dark') {
+      } @else if($color == 'dark') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}#{$color}-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}#{$color}-text-emphasis);
@@ -212,12 +213,15 @@
       justify-content: center;
       align-items: center;
       padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-      border: var(--#{config.$prefix}callout-border-width) solid color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
+      border: var(--#{config.$prefix}callout-border-width) solid
+        color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
       max-width: var(--#{config.$prefix}callout-width);
       border-radius: var(--#{config.$prefix}callout-border-radius);
       width: 100%;
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
     }
 
     // Adjust text colors for glass effect
@@ -231,8 +235,10 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -311,4 +317,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

package/src/styles/06-components/_components.card.scss

@@ -199,8 +199,6 @@
     }
   }
 
-
-
   &--sm {
     --#{$prefix}card-spacer-y: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
     --#{$prefix}card-spacer-x: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
@@ -222,7 +220,6 @@
     @include dynamic-background(var(--#{$prefix}card-bg));
   }
 
-
   &--glass {
     max-width: none;
     @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
@@ -350,16 +347,14 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{$prefix}card-bg: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
         --#{$prefix}card-title-color: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-bg: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-color: var(--#{$prefix}brand-bg-subtle);
-      }
-
-      @else if ($color =='dark') {
+      } @else if ($color == 'dark') {
         --#{$prefix}card-bg: var(--#{$prefix}dark);
         --#{$prefix}card-bg-hover: var(--#{$prefix}dark-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}dark);
@@ -367,9 +362,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}light);
         --#{$prefix}card-icon-bg: var(--#{$prefix}light);
         --#{$prefix}card-icon-color: var(--#{$prefix}dark);
-      }
-
-      @else if ($color =='light') {
+      } @else if ($color == 'light') {
         --#{$prefix}card-bg: var(--#{$prefix}light);
         --#{$prefix}card-bg-hover: var(--#{$prefix}light-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}light);
@@ -377,9 +370,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}dark);
         --#{$prefix}card-icon-bg: var(--#{$prefix}dark);
         --#{$prefix}card-icon-color: var(--#{$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{$prefix}card-bg: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}#{$color}-border-subtle);
@@ -456,4 +447,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

package/src/styles/06-components/_components.chart.scss

@@ -31,7 +31,7 @@
   border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}chart-border-color);
   border-radius: var(--#{$prefix}chart-border-radius);
   overflow: hidden;
-  box-shadow: 
+  box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 2px rgba(0, 0, 0, 0.24),
     0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.05);
@@ -48,7 +48,7 @@
     content: '';
     position: absolute;
     inset: 0;
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -85,9 +85,13 @@
       rgba(var(--#{$prefix}secondary-rgb), 0.05),
       transparent
     );
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -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:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     mask-composite: exclude;
     pointer-events: none;
     z-index: 2;
@@ -96,7 +100,7 @@
   }
 
   &:hover {
-    box-shadow: 
+    box-shadow:
       0 8px 24px rgba(0, 0, 0, 0.12),
       0 4px 8px rgba(0, 0, 0, 0.16),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -143,14 +147,14 @@
     background: var(--#{$prefix}body-bg);
   }
   &--elevated {
-    box-shadow: 
+    box-shadow:
       0 12px 32px rgba(0, 0, 0, 0.15),
       0 6px 12px rgba(0, 0, 0, 0.2),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
       0 0 60px rgba(var(--#{$prefix}primary-rgb), 0.12);
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 16px 40px rgba(0, 0, 0, 0.18),
         0 8px 16px rgba(0, 0, 0, 0.24),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.15),
@@ -190,12 +194,12 @@
 
   &--selected {
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.3);
-    box-shadow: 
+    box-shadow:
       0 4px 16px rgba(0, 0, 0, 0.1),
       0 2px 4px rgba(0, 0, 0, 0.12),
       0 0 0 2px rgba(var(--#{$prefix}primary-rgb), 0.2),
       0 0 30px rgba(var(--#{$prefix}primary-rgb), 0.15);
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -213,7 +217,7 @@
     cursor: pointer;
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.12),
         0 4px 8px rgba(0, 0, 0, 0.16),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -222,7 +226,7 @@
     }
 
     &:active {
-      box-shadow: 
+      box-shadow:
         0 2px 8px rgba(0, 0, 0, 0.1),
         0 1px 2px rgba(0, 0, 0, 0.12);
     }
@@ -601,14 +605,13 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: 
-        linear-gradient(
-          180deg,
-          rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
-          transparent 30%,
-          transparent 70%,
-          rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
-        );
+      background: linear-gradient(
+        180deg,
+        rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
+        transparent 30%,
+        transparent 70%,
+        rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
+      );
       pointer-events: none;
       z-index: 1;
     }

package/src/styles/06-components/_components.checkbox.scss

@@ -61,7 +61,9 @@
       content: '';
       transform: scale(0);
       opacity: 0;
-      transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
+      transition:
+        transform 120ms ease-in-out,
+        opacity 120ms ease-in-out;
       font-size: 0.65em;
       line-height: 1;
       font-family: 'Lux Icon';

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -12,7 +12,9 @@
   cursor: pointer;
   padding: rem(8px);
   border-radius: 50%;
-  transition: background-color 0.2s ease, opacity 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
   color: var(--#{$prefix}body-color);
 
   &:hover:not(:disabled) {

package/src/styles/06-components/_components.edge-panel.scss

@@ -36,7 +36,6 @@
     position: absolute;
     inset: 0;
     @include dynamic-background(var(--#{$prefix}edge-panel-backdrop-bg));
-    backdrop-filter: blur(var(--#{$prefix}edge-panel-backdrop-blur));
     opacity: 0;
     z-index: map.get($z-layers, 1);
     transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
@@ -378,6 +377,10 @@
     padding: 0;
     border-radius: inherit;
     transition: opacity 0.3s ease;
+    @include dynamic-background(
+      var(--#{$prefix}edge-panel-bg),
+      $background-transparency-enable: true
+    );
   }
 
   .c-edge-panel__header {
@@ -407,6 +410,10 @@
   }
 
   .c-edge-panel__backdrop {
+    @include dynamic-background(
+      var(--#{$prefix}edge-panel-backdrop-bg),
+      $background-transparency-enable: true
+    );
     animation: fadeIn 0.3s ease forwards;
     z-index: 0;
 
@@ -432,7 +439,7 @@
     }
   }
 
-  &.c-edge-panel--top .c-edge-panel__glass-content{
+  &.c-edge-panel--top .c-edge-panel__glass-content {
     animation: slideInTop 0.3s ease forwards;
   }
 

package/src/styles/06-components/_components.footer.scss

@@ -45,7 +45,7 @@
     border-radius: 0;
     box-shadow: none;
     background: transparent;
-    
+
     #{$root}__glass {
       @include dynamic-background(rgba(var(--#{$prefix}footer-bg-rgb), 0.5, true));
       color: var(--#{$prefix}footer-color);

package/src/styles/06-components/_components.side-menu.scss

@@ -81,7 +81,7 @@
     font-weight: var(--#{config.$prefix}side-menu-title-font-weight);
     margin: 0;
     margin-bottom: var(--#{config.$prefix}side-menu-title-spacer-y);
-    
+
     // When title is inside toggler, remove bottom margin
     #{$root}__toggler & {
       margin-bottom: 0;
@@ -256,7 +256,7 @@
       transform: rotate(90deg);
     }
   }
-  
+
   // Nested wrapper open state (when nested toggler is open)
   &__toggler--nested.is-open + #{$root}__nested-wrapper {
     height: auto;
@@ -281,16 +281,16 @@
     #{$root}__toggler-icon {
       transition: none;
     }
-    
+
     #{$root}__toggler:active {
       transform: none;
     }
-    
+
     #{$root}__link:active {
       transform: none;
     }
   }
-  
+
   // High contrast mode support
   @media (prefers-contrast: high) {
     #{$root}__toggler:focus-visible,

package/src/styles/06-components/_components.toggle.scss

@@ -98,4 +98,22 @@
       }
     }
   }
+
+  // Glass morphism effect styles
+  &--glass {
+    --#{$prefix}toggle-switch-bg: transparent;
+
+    #{$root}__switch {
+      @include dynamic-background(
+        var(--#{$prefix}toggle-switch-bg),
+        $background-transparency-enable: true
+      );
+
+      &::before {
+        opacity: 0.5;
+        backdrop-filter: var(--#{$prefix}-glass-container-backdrop);
+      }
+    }
+  }
 }
+

package/src/styles/06-components/_index.scss

@@ -51,4 +51,4 @@
 @forward 'components.upload';
 @forward 'components.video-player';
 @forward 'components.photoviewer';
-@forward 'components.image-gallery';
+@forward 'components.image-gallery';

package/src/styles/06-components/old.chart.styles.scss

@@ -2354,7 +2354,6 @@ $chart-gradients: (
     font-size: $font-size-xs;
   }
 
-
   .pie-slice:hover,
   .donut-slice:hover {
     transform: scale(1.02);
@@ -2724,7 +2723,6 @@ $chart-gradients: (
   }
 }
 
-
 // CSS Grid support for complex layouts
 .c-chart--grid {
   display: grid;