@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -26,6 +26,7 @@
   --#{$prefix}checkbox-border-color-hover: #{$checkbox-border-color-hover};
   --#{$prefix}checkbox-border-color-disabled: #{$checkbox-border-color-disabled};
   --#{$prefix}checkbox-border-color-error: #{$checkbox-border-color-error};
+  --#{$prefix}checkbox-checked-border-color: #{$checkbox-checked-bg};
 
   display: flex;
   gap: var(--#{$prefix}checkbox-spacer);
@@ -48,16 +49,24 @@
 
     &::before {
       position: absolute;
-      top: -7px;
-      left: -4px;
-      font-family: 'Lux Icon';
-      color: var(--#{$prefix}checkbox-checked-bg);
-      content: '\ef10';
-      font-size: rem(26px);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--#{$prefix}checkbox-checked-text-color);
+      background: var(--#{$prefix}checkbox-checked-bg);
+      content: '';
       transform: scale(0);
-      display: block;
-      transform-origin: center;
-      transition: 120ms transform ease-in-out;
+      opacity: 0;
+      transition:
+        transform 120ms ease-in-out,
+        opacity 120ms ease-in-out;
+      font-size: 0.65em;
+      line-height: 1;
+      font-family: 'Lux Icon';
     }
 
     &:hover {
@@ -65,23 +74,21 @@
     }
 
     &:checked {
-      border-color: var(--#{$prefix}checkbox-checked-bg);
+      border-color: var(--#{$prefix}checkbox-checked-border-color);
 
       &::before {
+        content: '\ef10';
         transform: scale(1);
+        opacity: 1;
       }
 
       &:hover {
         border-color: var(--#{$prefix}checkbox-checked-bg-hover);
 
         &::before {
-          color: var(--#{$prefix}checkbox-checked-bg-hover);
+          background: var(--#{$prefix}checkbox-checked-bg-hover);
         }
       }
-
-      & + #{$root} {
-        color: red;
-      }
     }
 
     &:focus-visible {
@@ -93,7 +100,7 @@
       cursor: not-allowed;
 
       &::before {
-        color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
+        background: var(--#{$prefix}checkbox-checked-bg-disabled) !important;
       }
     }
   }
@@ -112,7 +119,7 @@
         cursor: not-allowed;
 
         &::before {
-          color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
+          background: var(--#{$prefix}checkbox-checked-bg-disabled) !important;
         }
       }
     }
@@ -130,6 +137,7 @@
     #{$root} {
       &__input::before {
         content: '\f0d6';
+        background: var(--#{$prefix}checkbox-checked-bg);
       }
     }
   }

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;

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

@@ -5,6 +5,7 @@
 @forward 'utilities.display';
 @forward 'utilities.flex';
 @forward 'utilities.glass-fixes';
+@forward 'utilities.gradient';
 @forward 'utilities.link';
 @forward 'utilities.object-fit';
 @forward 'utilities.opacity';
@@ -14,6 +15,7 @@
 @forward 'utilities.sizes';
 @forward 'utilities.spacing';
 @forward 'utilities.text';
+@forward 'utilities.text-gradient';
 @forward 'utilities.visibility';
 @forward 'utilities.visually-hidden';
 @forward 'utilities.z-index';

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

@@ -19,6 +19,7 @@
 @use 'utilities.sizes' as sizes;
 @use 'utilities.spacing' as spacing;
 @use 'utilities.text' as text;
+@use 'utilities.text-gradient' as textGradient;
 @use 'utilities.visibility' as visibility;
 @use 'utilities.z-index' as z-index;
 
@@ -40,6 +41,7 @@ $utilities: map.merge($utilities, spacing.$utilities-spacing);
 $utilities: map.merge($utilities, text.$utilities-text);
 $utilities: map.merge($utilities, visibility.$utilities-visibility);
 $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);

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%,
     ),
   ),