@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/01-settings/_settings.upload.scss

@@ -1,77 +1,70 @@
-@use "settings.config" as config;
-@use "settings.typography" as typography;
-@use "settings.border-radius" as borderRadius;
-
-$upload-width:                              500px !default;
-$upload-width-sm:                           400px !default;
-$upload-width-large:                        700px !default;
-
-$upload-padding-x:                          0px !default;
-$upload-padding-y:                          0px !default;
-
-$upload-inner-padding-x:                    12px !default;
-$upload-inner-padding-y:                    12px !default;
-
-$upload-large-inner-padding-x:              20px !default;
-$upload-large-inner-padding-y:              22px !default;
-
-$upload-border-radius:                      borderRadius.$border-radius !default;
-$upload-border-width:                       1px !default;
-$upload-border-color:                       var(--#{config.$prefix}primary-border-subtle) !default;
-$upload-bg:                                 var(--#{config.$prefix}body-bg) !default;
-$upload-hover-bg:                           null !default;
-
-
-$upload-icon-size:                          32px !default;
-$upload-icon-padding:                       0px !default;
-$upload-icon-bg:                            var(--#{config.$prefix}body-bg) !default;
-
-
-$upload-title-font-size:                    typography.$font-size-lg !default;
-$upload-title-font-weight:                  typography.$headings-font-weight !default;
-$upload-title-color:                        var(--#{config.$prefix}body-color) !default;
-$upload-title-margin-top:                   8px !default;
-
-
-$upload-text-font-size:                     typography.$font-size-sm !default;
-$upload-text-font-weight:                   typography.$font-weight-normal !default;
-$upload-text-color:                         var(--#{config.$prefix}body-color) !default;
-$upload-text-margin-top:                    4px !default;
-
-
-$upload-btn-margin-top:                     20px !default;
-$upload-btn-margin-left:                    16px !default;
-
-$upload-content-margin-left:                16px !default;
-
-
-$upload-helper-text-font-size:              typography.$font-size-sm !default;
-$upload-helper-text-font-weight:            typography.$font-weight-normal !default;
-$upload-helper-text-color:                  var(--#{config.$prefix}body-color) !default;
-$upload-helper-text-margin-top:             8px !default;
-
-
-$upload-disabled-opacity:                   0.5 !default;
-
-
-$upload-loader-padding-x:                   12px !default;
-$upload-loader-padding-y:                   12px !default;
-$upload-loader-bg-opacity:                  1 !default;
-$upload-loader-border-radius:               $upload-border-radius !default;
-$upload-loader-border-width:                $upload-border-width !default;
-$upload-loader-border-color:                $upload-border-color !default;
-$upload-loader-margin-top:                  20px !default;
-$upload-loader-title-color:                 var(--#{config.$prefix}body-color) !default;
-$upload-loader-title-font-size:             typography.$font-size-sm !default;
-$upload-loader-title-font-weight:           typography.$font-weight-normal !default;
-$upload-loader-text-color:                  var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$upload-loader-text-font-size:              typography.$font-size-sm !default;
-$upload-loader-text-margin-top:             5px !default;
-$upload-loader-bar-height:                  10px !default;
-$upload-loader-bar-margin-top:              10px !default;
-$upload-loader-control-icon-size:           20px !default;
-$upload-loader-contorl-color:               var(--#{config.$prefix}body-color) !default;
- 
-$upload-loader-progress-color:              var(--#{config.$prefix}primary) !default; 
-$upload-loader-success-color:               var(--#{config.$prefix}success) !default; 
-$upload-loader-error-color:                 var(--#{config.$prefix}error) !default;
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as borderRadius;
+
+$upload-width: 500px !default;
+$upload-width-sm: 400px !default;
+$upload-width-large: 700px !default;
+
+$upload-padding-x: 0px !default;
+$upload-padding-y: 0px !default;
+
+$upload-inner-padding-x: 12px !default;
+$upload-inner-padding-y: 12px !default;
+
+$upload-large-inner-padding-x: 20px !default;
+$upload-large-inner-padding-y: 22px !default;
+
+$upload-border-radius: borderRadius.$border-radius !default;
+$upload-border-width: 1px !default;
+$upload-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$upload-bg: var(--#{config.$prefix}body-bg) !default;
+$upload-hover-bg: null !default;
+
+$upload-icon-size: 32px !default;
+$upload-icon-padding: 0px !default;
+$upload-icon-bg: var(--#{config.$prefix}body-bg) !default;
+
+$upload-title-font-size: typography.$font-size-lg !default;
+$upload-title-font-weight: typography.$headings-font-weight !default;
+$upload-title-color: var(--#{config.$prefix}body-color) !default;
+$upload-title-margin-top: 8px !default;
+
+$upload-text-font-size: typography.$font-size-sm !default;
+$upload-text-font-weight: typography.$font-weight-normal !default;
+$upload-text-color: var(--#{config.$prefix}body-color) !default;
+$upload-text-margin-top: 4px !default;
+
+$upload-btn-margin-top: 20px !default;
+$upload-btn-margin-left: 16px !default;
+
+$upload-content-margin-left: 16px !default;
+
+$upload-helper-text-font-size: typography.$font-size-sm !default;
+$upload-helper-text-font-weight: typography.$font-weight-normal !default;
+$upload-helper-text-color: var(--#{config.$prefix}body-color) !default;
+$upload-helper-text-margin-top: 8px !default;
+
+$upload-disabled-opacity: 0.5 !default;
+
+$upload-loader-padding-x: 12px !default;
+$upload-loader-padding-y: 12px !default;
+$upload-loader-bg-opacity: 1 !default;
+$upload-loader-border-radius: $upload-border-radius !default;
+$upload-loader-border-width: $upload-border-width !default;
+$upload-loader-border-color: $upload-border-color !default;
+$upload-loader-margin-top: 20px !default;
+$upload-loader-title-color: var(--#{config.$prefix}body-color) !default;
+$upload-loader-title-font-size: typography.$font-size-sm !default;
+$upload-loader-title-font-weight: typography.$font-weight-normal !default;
+$upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$upload-loader-text-font-size: typography.$font-size-sm !default;
+$upload-loader-text-margin-top: 5px !default;
+$upload-loader-bar-height: 10px !default;
+$upload-loader-bar-margin-top: 10px !default;
+$upload-loader-control-icon-size: 20px !default;
+$upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
+
+$upload-loader-progress-color: var(--#{config.$prefix}primary) !default;
+$upload-loader-success-color: var(--#{config.$prefix}success) !default;
+$upload-loader-error-color: var(--#{config.$prefix}error) !default;

package/src/styles/01-settings/_settings.z-layers.scss

@@ -5,5 +5,5 @@ $z-layers: (
   2: 2,
   3: 3,
   4: 4,
-  5: 5
+  5: 5,
 );

package/src/styles/02-tools/_index.scss

@@ -1,20 +1,20 @@
 // Forward all tool files
-@forward "tools.animations";
-@forward "tools.border-radius";
-@forward "tools.button";
-@forward "tools.breakpoints";
-@forward "tools.clearfix";
-@forward "tools.color-mode";
-@forward "tools.event";
-@forward "tools.grid";
-@forward "tools.hidden-visually";
-@forward "tools.object-fit";
-@forward "tools.placeholder";
-@forward "tools.rem";
-@forward "tools.size";
-@forward "tools.spacing";
-@forward "tools.to-rgb";
-@forward "tools.transition" as transition-*;
-@forward "tools.map-loop";
-@forward "tools.utility-api";
-@forward "tools.utilities";
+@forward 'tools.animations';
+@forward 'tools.border-radius';
+@forward 'tools.button';
+@forward 'tools.breakpoints';
+@forward 'tools.clearfix';
+@forward 'tools.color-mode';
+@forward 'tools.event';
+@forward 'tools.grid';
+@forward 'tools.hidden-visually';
+@forward 'tools.object-fit';
+@forward 'tools.placeholder';
+@forward 'tools.rem';
+@forward 'tools.size';
+@forward 'tools.spacing';
+@forward 'tools.to-rgb';
+@forward 'tools.transition' as transition-*;
+@forward 'tools.map-loop';
+@forward 'tools.utility-api';
+@forward 'tools.utilities';

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

@@ -10,10 +10,10 @@
 
 @keyframes #{config.$prefix}-skeleton-loading {
   0% {
-      background-position: 100% 50%;
+    background-position: 100% 50%;
   }
-  
+
   100% {
-      background-position: 0 50%;
+    background-position: 0 50%;
   }
-}
+}

package/src/styles/02-tools/_tools.border-radius.scss

@@ -1,5 +1,5 @@
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.border-radius" as *;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.border-radius' as *;
 @use 'sass:meta';
 @use 'sass:list';
 
@@ -20,8 +20,7 @@
 @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: valid-radius($radius);
-  }
-  @else if $fallback-border-radius != false {
+  } @else if $fallback-border-radius != false {
     border-radius: $fallback-border-radius;
   }
 }
@@ -76,4 +75,4 @@
   @if $enable-rounded {
     border-bottom-left-radius: valid-radius($radius);
   }
-}
+}

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

@@ -5,45 +5,44 @@
 @use 'sass:map';
 @use 'sass:list';
 
-
 // Breakpoint viewport sizes and media queries.
 @mixin media-breakpoint-up($name, $breakpoints: breakpoints.$grid-breakpoints) {
-    $min: map.get($breakpoints, $name);
-    @if $min {
-      @media (min-width: $min) {
-        @content;
-      }
-    } @else {
+  $min: map.get($breakpoints, $name);
+  @if $min {
+    @media (min-width: $min) {
       @content;
     }
+  } @else {
+    @content;
   }
-  
-  // Media of at most the maximum breakpoint width
-  @mixin media-breakpoint-down($name, $breakpoints: breakpoints.$grid-breakpoints) {
-    // Get the next breakpoint
-    $breakpoint-names: map.keys($breakpoints);
-    $breakpoint-index: list.index($breakpoint-names, $name);
-    
-    // If not the largest breakpoint
-    @if $breakpoint-index < list.length($breakpoint-names) {
-      $next-breakpoint: list.nth($breakpoint-names, $breakpoint-index + 1);
-      $next-value: map.get($breakpoints, $next-breakpoint);
-      
-      @media (max-width: ($next-value - 0.02)) {
-        @content;
-      }
-    } @else {
+}
+
+// Media of at most the maximum breakpoint width
+@mixin media-breakpoint-down($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  // Get the next breakpoint
+  $breakpoint-names: map.keys($breakpoints);
+  $breakpoint-index: list.index($breakpoint-names, $name);
+
+  // If not the largest breakpoint
+  @if $breakpoint-index < list.length($breakpoint-names) {
+    $next-breakpoint: list.nth($breakpoint-names, $breakpoint-index + 1);
+    $next-value: map.get($breakpoints, $next-breakpoint);
+
+    @media (max-width: ($next-value - 0.02)) {
       @content;
     }
+  } @else {
+    @content;
   }
-  
-  // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
-  @function breakpoint-infix($name, $breakpoints: breakpoints.$grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-  }
-  
-  // Returns the minimum breakpoint width.
-  @function breakpoint-min($name, $breakpoints: breakpoints.$grid-breakpoints) {
-    $min: map.get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-  }
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+@function breakpoint-infix($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Returns the minimum breakpoint width.
+@function breakpoint-min($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}

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

@@ -1,10 +1,10 @@
-@use "sass:color";
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.button" as button;
-@use "../01-settings/settings.colors" as colors;
-@use "../01-settings/settings.border-radius" as *;
-@use "tools.to-rgb" as *;
-@use "tools.border-radius" as *;
+@use 'sass:color';
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.button' as button;
+@use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.border-radius' as *;
+@use 'tools.to-rgb' as *;
+@use 'tools.border-radius' as *;
 
 // Button variant mixin
 @mixin btn-variant(
@@ -16,15 +16,39 @@
   $active-background: null,
   $active-border: null
 ) {
-  --#{config.$prefix}btn-color: #{colors.$white};
+  $btn-text-color: colors.$white;
+  $btn-text-hover-color: colors.$white;
+
+  @if ($color == 'light') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+  }
+
+  --#{config.$prefix}btn-color: #{$btn-text-color};
   --#{config.$prefix}btn-bg: #{$background};
   --#{config.$prefix}btn-border-color: #{$border};
-  --#{config.$prefix}btn-hover-color: #{colors.$white};
-  --#{config.$prefix}btn-hover-bg: #{if($hover-background, $hover-background, color.scale($background, $lightness: -15%))};
-  --#{config.$prefix}btn-hover-border-color: #{if($hover-border, $hover-border, color.scale($border, $lightness: -10%))};
+  --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
+  --#{config.$prefix}btn-hover-bg: #{if(
+      $hover-background,
+      $hover-background,
+      color.scale($background, $lightness: -15%)
+    )};
+  --#{config.$prefix}btn-hover-border-color: #{if(
+      $hover-border,
+      $hover-border,
+      color.scale($border, $lightness: -10%)
+    )};
   --#{config.$prefix}btn-active-color: #{colors.$white};
-  --#{config.$prefix}btn-active-bg: #{if($active-background, $active-background, color.scale($background, $lightness: -20%))};
-  --#{config.$prefix}btn-active-border-color: #{if($active-border, $active-border, color.scale($border, $lightness: -25%))};
+  --#{config.$prefix}btn-active-bg: #{if(
+      $active-background,
+      $active-background,
+      color.scale($background, $lightness: -20%)
+    )};
+  --#{config.$prefix}btn-active-border-color: #{if(
+      $active-border,
+      $active-border,
+      color.scale($border, $lightness: -25%)
+    )};
   --#{config.$prefix}btn-disabled-color: #{colors.$white};
   --#{config.$prefix}btn-disabled-bg: #{$background};
   --#{config.$prefix}btn-disabled-border-color: #{$background};
@@ -33,41 +57,41 @@
 // Button outline variant mixin
 @mixin btn-outline-variant(
   $color,
-  $color-hover: colors.$white,
+  $color-hover: 'light',
   $hover-background: $color,
   $hover-border: $color,
   $active-background: $color,
   $active-border: $color
 ) {
-  @if ($hover-background == "primary") {
-    $hover-background: 'secondary';
+  @if ($hover-background == 'primary') {
+    $hover-background: 'primary';
   }
 
-  @if ($hover-background == "light") {
+  @if ($hover-background == 'light') {
     $hover-background: 'secondary';
   }
 
-  @if ($hover-background == "dark") {
+  @if ($hover-background == 'dark') {
     $hover-background: 'secondary';
   }
 
   $btn-color: $color;
 
-  @if($color == "secondary") {
-    $btn-color: "invert";
+  @if ($color == 'secondary') {
+    $btn-color: 'invert';
     $color-hover: 'invert';
   }
 
-  @if($color == "dark") {
-    $btn-color: "invert";
+  @if ($color == 'dark') {
+    $btn-color: 'invert';
     $color-hover: 'invert';
   }
 
-  @if($color == "light") {
-    $btn-color: "invert";
+  @if ($color == 'light') {
+    $btn-color: 'invert';
     $color-hover: 'invert';
   }
-  
+
   --#{config.$prefix}btn-color: var(--#{config.$prefix}#{$btn-color});
   --#{config.$prefix}btn-bg: transparent;
   --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color});

package/src/styles/02-tools/_tools.color-mode.scss

@@ -2,21 +2,21 @@
 @use '../01-settings/settings.config' as config;
 
 @mixin color-mode($mode: light, $root: false) {
-    @if color-mode.$color-mode-type == "media-query" {
-      @if $root == true {
-        @media (prefers-color-scheme: $mode) {
-          :root {
-            @content;
-          }
-        }
-      } @else {
-        @media (prefers-color-scheme: $mode) {
+  @if color-mode.$color-mode-type == 'media-query' {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
           @content;
         }
       }
     } @else {
-      [data-#{config.$prefix}theme="#{$mode}"] {
+      @media (prefers-color-scheme: $mode) {
         @content;
       }
     }
-  }
+  } @else {
+    [data-#{config.$prefix}theme='#{$mode}'] {
+      @content;
+    }
+  }
+}

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

@@ -19,4 +19,4 @@
       @content;
     }
   }
-} 
+}

package/src/styles/02-tools/_tools.hidden-visually.scss

@@ -29,4 +29,4 @@
   &:not(:focus):not(:focus-within) {
     @include visually-hidden;
   }
-}
+}

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

@@ -1,2 +1,2 @@
 // Forward the visually-hidden mixins
-@forward "tools.hidden-visually"; 
+@forward 'tools.hidden-visually';

package/src/styles/02-tools/_tools.map-loop.scss

@@ -1,17 +1,17 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:color";
-@use "../02-tools/tools.to-rgb" as to-rgb;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use '../02-tools/tools.to-rgb' as to-rgb;
 
 /// Calls `$function` for each pair in `$map`, passing the value of `$key` and `$value` as arguments.
 /// Returns a new map with the same keys and the result of `$function` as values.
-@function map-loop($map, $function-name, $key: "$key", $value: "$value") {
+@function map-loop($map, $function-name, $key: '$key', $value: '$value') {
   $result: ();
   @each $k, $v in $map {
     $function-result: null;
-    
+
     // Handle the to-rgb function specifically since it's commonly used
-    @if $function-name == "to-rgb" {
+    @if $function-name == 'to-rgb' {
       $function-result: to-rgb.to-rgb($v);
     } @else {
       // For unsupported functions, return the original value
@@ -19,11 +19,11 @@
       @warn "Function #{$function-name} not supported by map-loop, returning original value";
       $function-result: $v;
     }
-    
+
     $result: map.merge(
       $result,
       (
-         $k: $function-result
+        $k: $function-result,
       )
     );
   }

package/src/styles/02-tools/_tools.media-queries.scss

@@ -27,7 +27,9 @@
 
 // Media Between - Min-width and Max-width
 @mixin media-between($lower, $upper) {
-  @if map.has-key(breakpoints.$grid-breakpoints, $lower) and map.has-key(breakpoints.$grid-breakpoints, $upper) {
+  @if map.has-key(breakpoints.$grid-breakpoints, $lower) and
+    map.has-key(breakpoints.$grid-breakpoints, $upper)
+  {
     $min: map.get(breakpoints.$grid-breakpoints, $lower);
     $max: map.get(breakpoints.$grid-breakpoints, $upper);
     @media (min-width: $min) and (max-width: ($max - 0.02px)) {
@@ -43,7 +45,7 @@
   @if map.has-key(breakpoints.$grid-breakpoints, $breakpoint) {
     $lower: $breakpoint;
     $upper: 'xl';
-    
+
     @if $breakpoint == 'xs' {
       $upper: 'sm';
     } @else if $breakpoint == 'sm' {
@@ -64,4 +66,4 @@
   } @else {
     @warn "Unknown breakpoint `#{$breakpoint}` in $breakpoints";
   }
-} 
+}

package/src/styles/02-tools/_tools.object-fit.scss

@@ -1,4 +1,4 @@
 @mixin object-fit($f: contain, $p: center) {
-    object-fit: $f;
-    object-position: $p;
-}
+  object-fit: $f;
+  object-position: $p;
+}

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

@@ -1,4 +1,3 @@
-
 @mixin placeholder-color($color: #000) {
   ::-webkit-input-placeholder {
     color: $color;

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 @function rem($pixels) {
   @return math.div($pixels, 16px) * 1rem;

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

@@ -58,34 +58,24 @@ $spacing-important: false !default;
   @if ($size == 'auto') {
     margin-left: auto #{if($spacing-important, '!important', '')};
   } @else {
-    margin-left: map.get($spacing-sizes, $size)
-      #{if($spacing-important, '!important', '')};
+    margin-left: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
   }
 }
 
 @mixin mt($size: 1) {
-  margin-top: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  margin-top: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }
 
 @mixin mr($size: 1) {
   @if ($size == 'auto') {
     margin-right: auto #{if($spacing-important, '!important', '')};
   } @else {
-    margin-right: map.get($spacing-sizes, $size)
-      #{if($spacing-important, '!important', '')};
+    margin-right: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
   }
 }
 
 @mixin mb($size: 1) {
-  margin-bottom: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  margin-bottom: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }
 
 @mixin p($t: 1, $r: null, $b: null, $l: null) {
@@ -134,33 +124,17 @@ $spacing-important: false !default;
 }
 
 @mixin pl($size: 1) {
-  padding-left: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  padding-left: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }
 
 @mixin pt($size: 1) {
-  padding-top: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  padding-top: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }
 
 @mixin pr($size: 1) {
-  padding-right: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  padding-right: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }
 
 @mixin pb($size: 1) {
-  padding-bottom: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
+  padding-bottom: map.get($spacing-sizes, $size) #{if($spacing-important, '!important', '')};
 }