@shohojdhara/atomix 0.3.15 → 0.4.1

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;

package/src/styles/99-utilities/_utilities.border.scss

@@ -5,62 +5,96 @@
 
 // Define utilities for borders
 $utilities-border: (
-  'border': (property: border,
+  'border': (
+    property: border,
     class: u-border,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-top': (property: border-top,
+  'border-top': (
+    property: border-top,
     class: u-border-t,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-end': (property: border-inline-end,
+  'border-end': (
+    property: border-inline-end,
     class: u-border-e,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-bottom': (property: border-bottom,
+  'border-bottom': (
+    property: border-bottom,
     class: u-border-b,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-start': (property: border-inline-start,
+  'border-start': (
+    property: border-inline-start,
     class: u-border-s,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-color': (property: border-color,
+  'border-color': (
+    property: border-color,
     class: u-border,
-    local-vars: ('border-opacity': 1,
+    local-vars: (
+      'border-opacity': 1,
     ),
     values: color-maps.$utilities-border-colors,
   ),
-  'subtle-border-color': (property: border-color,
+  'subtle-border-color': (
+    property: border-color,
     class: u-border,
     values: color-maps.$utilities-border-subtle,
   ),
-  'border-width': (property: border-width,
+  'border-width': (
+    property: border-width,
     class: u-border,
     values: border.$border-widths,
   ),
-  'border-opacity': (css-var: true,
+  'border-style': (
+    property: border-style,
+    class: u-border,
+    values: (
+      solid: solid,
+      dashed: dashed,
+      dotted: dotted,
+      double: double,
+      none: none,
+    ),
+  ),
+  'border-opacity': (
+    css-var: true,
     class: u-border-opacity,
-    values: (10: 0.1,
+    values: (
+      10: 0.1,
       25: 0.25,
       50: 0.5,
       75: 0.75,
       100: 1,
     ),
   ),
-  'rounded': (property: border-radius,
+  'rounded': (
+    property: border-radius,
     class: u-rounded,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -71,9 +105,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-top': (property: border-start-start-radius border-start-end-radius,
+  'rounded-top': (
+    property: border-start-start-radius border-start-end-radius,
     class: u-rounded-top,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -84,9 +120,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-end': (property: border-start-end-radius border-end-end-radius,
+  'rounded-end': (
+    property: border-start-end-radius border-end-end-radius,
     class: u-rounded-end,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -97,9 +135,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-bottom': (property: border-end-end-radius border-end-start-radius,
+  'rounded-bottom': (
+    property: border-end-end-radius border-end-start-radius,
     class: u-rounded-bottom,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -110,9 +150,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-start': (property: border-end-start-radius border-start-start-radius,
+  'rounded-start': (
+    property: border-end-start-radius border-start-start-radius,
     class: u-rounded-start,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -123,4 +165,4 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-);
+);

package/src/styles/99-utilities/_utilities.display.scss

@@ -9,7 +9,7 @@ $utilities-display: (
     class: u,
     values: (
       inline: inline,
-      'inline-block': inline-block, 
+      'inline-block': inline-block,
       block: block,
       grid: grid,
       'inline-grid': inline-grid,

package/src/styles/99-utilities/_utilities.opacity.scss

@@ -7,9 +7,19 @@ $utilities-opacity: (
     class: u-opacity,
     values: (
       0: 0,
+      5: 0.05,
+      10: 0.1,
+      20: 0.2,
       25: 0.25,
+      30: 0.3,
+      40: 0.4,
       50: 0.5,
+      60: 0.6,
+      70: 0.7,
       75: 0.75,
+      80: 0.8,
+      90: 0.9,
+      95: 0.95,
       100: 1,
     ),
   ),

package/src/styles/99-utilities/_utilities.position.scss

@@ -3,31 +3,38 @@
 
 // Define utilities for position
 $utilities-position: (
-  'position': (property: position,
-    class: u-position,
+  'position': (
+    property: position,
+    class: u,
     values: static relative absolute fixed sticky,
   ),
-  'top': (property: top,
+  'top': (
+    property: top,
     class: u-top,
     values: $position-values,
   ),
-  'bottom': (property: bottom,
+  'bottom': (
+    property: bottom,
     class: u-bottom,
     values: $position-values,
   ),
-  'start': (property: inset-inline-start,
+  'start': (
+    property: inset-inline-start,
     class: u-start,
     values: $position-values,
   ),
-  'end': (property: inset-inline-end,
+  'end': (
+    property: inset-inline-end,
     class: u-end,
     values: $position-values,
   ),
-  'translate-middle': (property: transform,
+  'translate-middle': (
+    property: transform,
     class: u-translate-middle,
-    values: (null: translate(-50%, -50%),
+    values: (
+      null: translate(-50%, -50%),
       x: translateX(-50%),
       y: translateY(-50%),
     ),
   ),
-);
+);

package/src/styles/99-utilities/_utilities.scss

@@ -44,4 +44,4 @@ $utilities: map.merge($utilities, z-index.$utilities-z-index);
 $utilities: map.merge($utilities, textGradient.$utilities-text-gradient);
 
 // Generate all utility classes
-@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);
+@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);

package/src/styles/99-utilities/_utilities.sizes.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../01-settings/settings.spacing' as *;
 
 // Define utilities for sizes
 $utilities-sizes: (
@@ -6,22 +7,37 @@ $utilities-sizes: (
     responsive: true,
     property: width,
     class: u-w,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          5: 5%,
+          10: 10%,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          full: 100%,
+          auto: auto,
+        )
+      ),
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: u-max-w,
     values: (
-      5: 5%,
-      10: 10%,
-      25: 25%,
-      50: 50%,
-      75: 75%,
       100: 100%,
-      auto: auto,
+      full: 100%,
     ),
   ),
-  'max-width': (
+  'min-width': (
     responsive: true,
-    property: max-width,
-    class: u-mw,
+    property: min-width,
+    class: u-min-w,
     values: (
+      0: 0,
       100: 100%,
+      full: 100%,
     ),
   ),
   'viewport-width': (
@@ -44,21 +60,34 @@ $utilities-sizes: (
     responsive: true,
     property: height,
     class: u-h,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          5: 5%,
+          10: 10%,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          full: 100%,
+          auto: auto,
+        )
+      ),
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: u-max-h,
     values: (
-      5: 5%,
-      10: 10%,
-      25: 25%,
-      50: 50%,
-      75: 75%,
       100: 100%,
-      auto: auto,
     ),
   ),
-  'max-height': (
+  'min-height': (
     responsive: true,
-    property: max-height,
-    class: u-mh,
+    property: min-height,
+    class: u-min-h,
     values: (
+      0: 0,
       100: 100%,
     ),
   ),