@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/02-tools/_tools.to-rgb.scss

@@ -1,8 +1,8 @@
-@use "sass:color";
-@use "sass:meta";
+@use 'sass:color';
+@use 'sass:meta';
 
 @function to-rgb($color) {
-  @if meta.type-of($color) == "color" {
+  @if meta.type-of($color) == 'color' {
     @return "#{color.channel($color, 'red', $space: rgb)}, #{color.channel($color, 'green', $space: rgb)}, #{color.channel($color, 'blue', $space: rgb)}";
   }
   @return $color; // Pass through CSS variable or string

package/src/styles/02-tools/_tools.transition.scss

@@ -47,4 +47,4 @@
   transition-duration: $durations;
   transition-timing-function: $timings;
   transition-delay: $delays;
-} 
+}

package/src/styles/02-tools/_tools.utility-api.scss

@@ -20,7 +20,7 @@ $utility-defaults: (
   class: null,
   state: null,
   local-vars: (),
-  rtl: true
+  rtl: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -38,7 +38,11 @@ $utility-defaults: (
     $property-class: if($property-class, $property-class, list.nth($properties, 1));
 
     // Multiple properties are possible, like with borders or shadows
-    $property-class: if(meta.type-of($property-class) == 'list', list.nth($property-class, 1), $property-class);
+    $property-class: if(
+      meta.type-of($property-class) == 'list',
+      list.nth($property-class, 1),
+      $property-class
+    );
 
     // State variants (hover, focus, active, etc.)
     $state: map.get($utility, state);
@@ -70,7 +74,7 @@ $utility-defaults: (
   @if $responsive {
     @each $breakpoint in map.keys($breakpoints) {
       $infix: call($breakpoint-infix-generator, $breakpoint);
-      
+
       @include media-breakpoint-up($breakpoint) {
         @include generate-utility($utility, $infix);
       }
@@ -81,7 +85,11 @@ $utility-defaults: (
 }
 
 // Main mixin to generate all utilities
-@mixin generate-utilities($utilities, $breakpoints: $grid-breakpoints, $breakpoint-infix-generator: null) {
+@mixin generate-utilities(
+  $utilities,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-infix-generator: null
+) {
   // Set default breakpoint infix generator if not provided
   $breakpoint-infix-generator: if(
     $breakpoint-infix-generator,
@@ -92,38 +100,45 @@ $utility-defaults: (
   @each $utility, $config in $utilities {
     // Merge default config
     $config: map.merge($utility-defaults, $config);
-    
+
     // Only process if the utility is not explicitly set to false
-    @if map.get($config, generated) != false {      
+    @if map.get($config, generated) != false {
       $utility-map: (
         property: map.get($config, property),
         values: map.get($config, values),
         class: map.get($config, class),
         state: map.get($config, state),
-        rtl: map.get($config, rtl)
+        rtl: map.get($config, rtl),
       );
 
-      @include generate-responsive-utilities($utility-map, $breakpoints, $breakpoint-infix-generator);
+      @include generate-responsive-utilities(
+        $utility-map,
+        $breakpoints,
+        $breakpoint-infix-generator
+      );
     }
   }
 }
 
 // Helper function to get breakpoint infix
 @function get-breakpoint-infix($breakpoint) {
-  @return if($breakpoint == null, "", "-#{$breakpoint}");
+  @return if($breakpoint == null, '', '-#{$breakpoint}');
 }
 
 // Helper function to create value lists
 @function zip($keys, $values) {
   $result: ();
   $index: 1;
-  
+
   @each $key in $keys {
-    $result: map.merge($result, (
-      $key: if($index <= list.length($values), list.nth($values, $index), null)
-    ));
+    $result: map.merge(
+      $result,
+      (
+        $key: if($index <= list.length($values), list.nth($values, $index), null),
+      )
+    );
     $index: $index + 1;
   }
-  
+
   @return $result;
 }

package/src/styles/03-generic/_generic.fonts.scss

@@ -21,5 +21,4 @@
 // @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBold', $font-weight-bold, normal);
 // @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBlack', $font-weight-black, normal);
 
-
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

package/src/styles/03-generic/_generic.reset.scss

@@ -35,7 +35,12 @@ body {
 
 // Typography
 // Headings
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 0;
   margin-bottom: var(--#{config.$prefix}headings-margin-bottom);
   font-family: var(--#{config.$prefix}headings-font-family);
@@ -110,7 +115,7 @@ dt {
 }
 
 dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-left: 0;
 }
 
@@ -283,7 +288,7 @@ select {
 }
 
 // Set the cursor for non-`<button>` buttons
-[role="button"] {
+[role='button'] {
   cursor: pointer;
 }
 
@@ -303,12 +308,12 @@ progress {
 }
 
 // Correct styling of number inputs in Safari
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-[type="search"] {
+[type='search'] {
   outline-offset: -2px; // Safari
 }
 
@@ -353,7 +358,7 @@ summary {
   }
 
   abbr[title]::after {
-    content: " (" attr(title) ")";
+    content: ' (' attr(title) ')';
   }
 
   pre {
@@ -394,4 +399,4 @@ summary {
   .container {
     min-width: 992px !important;
   }
-} 
+}

package/src/styles/03-generic/_generic.root.scss

@@ -12,7 +12,7 @@
 $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !default;
 
 :root,
-[data-#{config.$prefix}theme="light"] {
+[data-#{config.$prefix}theme='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -102,7 +102,9 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
   --#{config.$prefix}border-radius-lg: #{border-radius.$border-radius-lg};
   --#{config.$prefix}border-radius-xl: #{border-radius.$border-radius-xl};
   --#{config.$prefix}border-radius-xxl: #{border-radius.$border-radius-xxl};
-  --#{config.$prefix}border-radius-2xl: var(--#{config.$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{config.$prefix}border-radius-2xl: var(
+    --#{config.$prefix}border-radius-xxl
+  ); // Deprecated in v5.3.0 for consistency
   --#{config.$prefix}border-radius-3xl: #{border-radius.$border-radius-3xl};
   --#{config.$prefix}border-radius-4xl: #{border-radius.$border-radius-4xl};
   --#{config.$prefix}border-radius-pill: #{border-radius.$border-radius-pill};
@@ -167,15 +169,13 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
     --#{config.$prefix}link-color-rgb: #{to-rgb(colors.$link-color-dark)};
     --#{config.$prefix}link-hover-color: #{colors.$link-hover-color-dark};
 
-
     --#{config.$prefix}code-color: #{colors.$code-color-dark};
-    
+
     --#{config.$prefix}border-color: #{border.$border-color-dark};
     --#{config.$prefix}border-color-translucent: #{colors.$border-color-translucent-dark};
 
     --#{config.$prefix}focus-border-color: #{colors.$focus-border-color-dark};
 
-
     --#{config.$prefix}form-valid-color: #{colors.$form-valid-color-dark};
     --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color-dark};
     --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color-dark};

package/src/styles/03-generic/_index.scss

@@ -1,5 +1,5 @@
 // Forward all generic files
-@forward "generic.reset";
-@forward "generic.root";
-@forward "generic.selection";
-@forward "generic.fonts";
+@forward 'generic.reset';
+@forward 'generic.root';
+@forward 'generic.selection';
+@forward 'generic.fonts';

package/src/styles/04-elements/_elements.all.scss

@@ -6,11 +6,11 @@
   box-sizing: border-box;
 }
 
-img{
+img {
   max-width: 100%;
   height: auto;
 }
 
 .docs-story {
   background: var(--#{config.$prefix}body-bg) !important;
-}
+}

package/src/styles/04-elements/_elements.body.scss

@@ -9,8 +9,7 @@ body {
   line-height: typography.$line-height-base;
 
   &.is-blocked,
-  &.is-modal-open{
+  &.is-modal-open {
     overflow: hidden;
   }
-
 }

package/src/styles/04-elements/_elements.heading.scss

@@ -1,38 +1,54 @@
 @use '../01-settings/settings.typography' as typography;
 
-h1, .h1 {
-    font-size: typography.$h1-font-size;
-    letter-spacing: typography.$h1-letter-spaceing;
+h1,
+.h1 {
+  font-size: typography.$h1-font-size;
+  letter-spacing: typography.$h1-letter-spaceing;
 }
 
-h2, .h2 {
-    font-size: typography.$h2-font-size;
-    letter-spacing: typography.$h2-letter-spaceing;
+h2,
+.h2 {
+  font-size: typography.$h2-font-size;
+  letter-spacing: typography.$h2-letter-spaceing;
 }
 
-h3, .h3 {
-    font-size: typography.$h3-font-size;
-    letter-spacing: typography.$h3-letter-spaceing;
+h3,
+.h3 {
+  font-size: typography.$h3-font-size;
+  letter-spacing: typography.$h3-letter-spaceing;
 }
 
-h4, .h4 {
-    font-size: typography.$h4-font-size;
-    letter-spacing: typography.$h4-letter-spaceing;
+h4,
+.h4 {
+  font-size: typography.$h4-font-size;
+  letter-spacing: typography.$h4-letter-spaceing;
 }
 
-h5, .h5 { 
-    font-size: typography.$h5-font-size;
-    letter-spacing: typography.$h5-letter-spaceing;
+h5,
+.h5 {
+  font-size: typography.$h5-font-size;
+  letter-spacing: typography.$h5-letter-spaceing;
 }
 
-h6, .h6 {
-    font-size: typography.$h6-font-size;
-    letter-spacing: typography.$h6-letter-spaceing;
+h6,
+.h6 {
+  font-size: typography.$h6-font-size;
+  letter-spacing: typography.$h6-letter-spaceing;
 }
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   font-family: typography.$headings-font-family;
   font-weight: typography.$headings-font-weight;
   line-height: typography.$headings-line-height;
-} 
+}

package/src/styles/04-elements/_elements.links.scss

@@ -1,7 +1,6 @@
 @use '../01-settings/settings.config' as config;
 @use '../02-tools/tools.animations' as animations;
 
-
 a {
   color: rgba(var(--#{config.$prefix}link-color-rgb), var(--#{config.$prefix}u-link-opacity, 1));
   @include animations.basic-transition(color);

package/src/styles/04-elements/_index.scss

@@ -1,6 +1,6 @@
 // Forward all elements files
-@forward "elements.all";
-@forward "elements.body";
-@forward "elements.heading";
-@forward "elements.html";
-@forward "elements.links";
+@forward 'elements.all';
+@forward 'elements.body';
+@forward 'elements.heading';
+@forward 'elements.html';
+@forward 'elements.links';

package/src/styles/05-objects/_index.scss

@@ -1,4 +1,4 @@
 // Forward all objects files
-@forward "objects.container";
-@forward "objects.grid";
-@forward "objects.masonry-grid";
+@forward 'objects.container';
+@forward 'objects.grid';
+@forward 'objects.masonry-grid';

package/src/styles/05-objects/_objects.container.scss

@@ -4,15 +4,16 @@
 @use '../02-tools/tools.breakpoints' as *;
 @use '../02-tools/tools.grid' as *;
 
-.o-container,  .o-container-fluid {
-  @include make-container(); 
+.o-container,
+.o-container-fluid {
+  @include make-container();
 }
 
 @each $breakpoint, $container-max-width in grid.$container-max-widths {
   .o-container-#{$breakpoint} {
     @extend .o-container-fluid;
   }
-  
+
   @include media-breakpoint-up($breakpoint, breakpoints.$grid-breakpoints) {
     %responsive-container-#{$breakpoint} {
       max-width: $container-max-width;
@@ -22,7 +23,7 @@
 
     @each $name, $width in breakpoints.$grid-breakpoints {
       @if ($extend-breakpoint) {
-         .o-container#{breakpoint-infix($name, breakpoints.$grid-breakpoints)} {
+        .o-container#{breakpoint-infix($name, breakpoints.$grid-breakpoints)} {
           @extend %responsive-container-#{$breakpoint};
         }
 

package/src/styles/05-objects/_objects.grid.scss

@@ -4,22 +4,22 @@
 @use '../02-tools/tools.breakpoints' as *;
 
 .o-grid {
-    --#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
-    @include make-row();
+  --#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
+  @include make-row();
 
-    &__col {
-        @include make-col-ready();
-    }
+  &__col {
+    @include make-col-ready();
+  }
 
-    &--no-gutters {
-       margin-right: 0;
-       margin-left: 0;
+  &--no-gutters {
+    margin-right: 0;
+    margin-left: 0;
 
-       .o-grid__col {
-           padding-right: 0;
-           padding-left: 0;
-       }
+    .o-grid__col {
+      padding-right: 0;
+      padding-left: 0;
     }
+  }
 }
 
 @include grid-columns();

package/src/styles/05-objects/_objects.masonry-grid.scss

@@ -5,86 +5,92 @@
 @use 'sass:math';
 
 .o-masonry-grid {
-    $root: &;
-    
-    
-    // Base styles
-    position: relative;
+  $root: &;
+
+  // Base styles
+  position: relative;
+  width: 100%;
+  min-height: 100px; // Minimum height to prevent layout shift
+
+  // Animation variant
+  &--animate {
+    .o-masonry-grid__item {
+      transition:
+        opacity 0.3s ease,
+        top 0.3s ease,
+        left 0.3s ease;
+    }
+  }
+
+  // Item styles
+  &__item {
+    box-sizing: border-box;
     width: 100%;
-    min-height: 100px; // Minimum height to prevent layout shift
-    
-    // Animation variant
-    &--animate {
-        .o-masonry-grid__item {
-            transition: opacity 0.3s ease, top 0.3s ease, left 0.3s ease;
-        }
+
+    // Prevent FOUC (Flash of Unstyled Content)
+    &:not([style*='position: absolute']) {
+      opacity: 0;
+      visibility: hidden;
     }
-    
-    // Item styles
-    &__item {
-        box-sizing: border-box;
-        width: 100%;
-        
-        // Prevent FOUC (Flash of Unstyled Content)
-        &:not([style*="position: absolute"]) {
-            opacity: 0;
-            visibility: hidden;
-        }
+  }
+
+  // Loading states for items
+  &__item-loading {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--#{config.$prefix}gray-10);
+      z-index: 1;
+      border-radius: 4px;
     }
-    
-    // Loading states for items
-    &__item-loading {
-        
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--#{config.$prefix}gray-10);
-            z-index: 1;
-            border-radius: 4px;
-        }
-        
-        img {
-            opacity: 0;
-        }
+
+    img {
+      opacity: 0;
     }
-    
-    // Loaded state with fade-in animation
-    &__item-loaded img {
-        animation: masonry-item-fade-in 0.3s ease forwards;
+  }
+
+  // Loaded state with fade-in animation
+  &__item-loaded img {
+    animation: masonry-item-fade-in 0.3s ease forwards;
+  }
+
+  // Progressive loading indicator
+  &--loading-images {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      width: 24px;
+      height: 24px;
+      border: 2px solid rgba(0, 0, 0, 0.1);
+      border-radius: 50%;
+      border-top-color: var(--#{config.$prefix}brand-border-subtle);
+      animation: masonry-spinner 0.8s linear infinite;
+      z-index: 1000;
+      pointer-events: none;
     }
-    
-    // Progressive loading indicator
-    &--loading-images {
-        position: relative;
-        
-        &::after {
-            content: '';
-            position: absolute;
-            bottom: 16px;
-            right: 16px;
-            width: 24px;
-            height: 24px;
-            border: 2px solid rgba(0, 0, 0, 0.1);
-            border-radius: 50%;
-            border-top-color: var(--#{config.$prefix}brand-border-subtle);
-            animation: masonry-spinner 0.8s linear infinite;
-            z-index: 1000;
-            pointer-events: none;
-        }
+  }
+
+  // Animations
+  @keyframes masonry-spinner {
+    to {
+      transform: rotate(360deg);
     }
-    
-    // Animations
-    @keyframes masonry-spinner {
-        to { transform: rotate(360deg); }
+  }
+
+  @keyframes masonry-item-fade-in {
+    from {
+      opacity: 0;
     }
-    
-    @keyframes masonry-item-fade-in {
-        from { opacity: 0; }
-        to { opacity: 1; }
+    to {
+      opacity: 1;
     }
-    
+  }
 }

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

@@ -27,14 +27,16 @@
 
   width: 100%;
   max-width: var(--#{config.$prefix}accordion-width);
-  border: var(--#{config.$prefix}accordion-border-width) solid var(--#{config.$prefix}accordion-border-color);
+  border: var(--#{config.$prefix}accordion-border-width) solid
+    var(--#{config.$prefix}accordion-border-color);
 
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: var(--#{config.$prefix}accordion-header-color);
-    padding: var(--#{config.$prefix}accordion-header-padding-y) var(--#{config.$prefix}accordion-header-padding-x);
+    padding: var(--#{config.$prefix}accordion-header-padding-y)
+      var(--#{config.$prefix}accordion-header-padding-x);
     background-color: var(--#{config.$prefix}accordion-header-bg);
     border-radius: var(--#{config.$prefix}accordion-border-radius);
     border: none;
@@ -74,12 +76,15 @@
 
   &__body {
     color: var(--#{config.$prefix}accordion-body-color);
-    padding: var(--#{config.$prefix}accordion-body-padding-y) var(--#{config.$prefix}accordion-body-padding-x);
+    padding: var(--#{config.$prefix}accordion-body-padding-y)
+      var(--#{config.$prefix}accordion-body-padding-x);
     background-color: var(--#{config.$prefix}accordion-body-bg);
-    border-radius: 0 0 var(--#{config.$prefix}accordion-border-radius) var(--#{config.$prefix}accordion-border-radius);
+    border-radius: 0 0 var(--#{config.$prefix}accordion-border-radius)
+      var(--#{config.$prefix}accordion-border-radius);
   }
 
-  &:focus, &.is-focused {
+  &:focus,
+  &.is-focused {
     --#{config.$prefix}accordion-border-color: var(--#{config.$prefix}focus-border-color);
   }
 
@@ -89,7 +94,8 @@
     }
 
     #{$root}__header {
-      border-radius: var(--#{config.$prefix}accordion-border-radius)  var(--#{config.$prefix}accordion-border-radius) 0 0;
+      border-radius: var(--#{config.$prefix}accordion-border-radius)
+        var(--#{config.$prefix}accordion-border-radius) 0 0;
     }
   }