@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -2,11 +2,12 @@
 
 // Define utilities for display
 $utilities-display: (
-  "display": (
+  'display': (
     responsive: true,
     print: true,
     property: display,
     class: u-d,
-    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
-  )
-);
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
+      none,
+  ),
+);

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

@@ -7,14 +7,14 @@ $utilities-flex: (
     property: flex,
     class: u-flex,
     values: (
-      fill: 1 1 auto
-    )
+      fill: 1 1 auto,
+    ),
   ),
   'flex-direction': (
     responsive: true,
     property: flex-direction,
     class: u-flex,
-    values: row column row-reverse column-reverse
+    values: row column row-reverse column-reverse,
   ),
   'flex-grow': (
     responsive: true,
@@ -22,8 +22,8 @@ $utilities-flex: (
     class: u-flex,
     values: (
       grow-0: 0,
-      grow-1: 1
-    )
+      grow-1: 1,
+    ),
   ),
   'flex-shrink': (
     responsive: true,
@@ -31,14 +31,14 @@ $utilities-flex: (
     class: u-flex,
     values: (
       shrink-0: 0,
-      shrink-1: 1
-    )
+      shrink-1: 1,
+    ),
   ),
   'flex-wrap': (
     responsive: true,
     property: flex-wrap,
     class: u-flex,
-    values: wrap nowrap wrap-reverse
+    values: wrap nowrap wrap-reverse,
   ),
   'justify-content': (
     responsive: true,
@@ -50,8 +50,8 @@ $utilities-flex: (
       center: center,
       between: space-between,
       around: space-around,
-      evenly: space-evenly
-    )
+      evenly: space-evenly,
+    ),
   ),
   'align-items': (
     responsive: true,
@@ -62,8 +62,8 @@ $utilities-flex: (
       end: flex-end,
       center: center,
       baseline: baseline,
-      stretch: stretch
-    )
+      stretch: stretch,
+    ),
   ),
   'align-content': (
     responsive: true,
@@ -75,8 +75,8 @@ $utilities-flex: (
       center: center,
       between: space-between,
       around: space-around,
-      stretch: stretch
-    )
+      stretch: stretch,
+    ),
   ),
   'align-self': (
     responsive: true,
@@ -88,8 +88,8 @@ $utilities-flex: (
       end: flex-end,
       center: center,
       baseline: baseline,
-      stretch: stretch
-    )
+      stretch: stretch,
+    ),
   ),
   'order': (
     responsive: true,
@@ -103,7 +103,7 @@ $utilities-flex: (
       3: 3,
       4: 4,
       5: 5,
-      last: 6
-    )
-  )
+      last: 6,
+    ),
+  ),
 );

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

@@ -1,58 +1,61 @@
 @use 'sass:map';
-@use "../01-settings/settings.maps" as color-maps;
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.colors" as colors;
-@use "../02-tools/tools.to-rgb" as *;
-@use "../02-tools/tools.color-functions" as *;
+@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.colors' as colors;
+@use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.color-functions' as *;
 
 // Define utilities for links
 $utilities-link: (
-  "link-opacity": (
+  'link-opacity': (
     css-var: true,
     class: u-link-opacity,
     state: hover,
     values: (
-      10: .1,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1
-    )
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
   ),
-  "link-offset": (
+  'link-offset': (
     property: text-underline-offset,
     class: u-link-offset,
     state: hover,
     values: (
-      1: .125em,
-      2: .25em,
-      3: .375em,
-    )
+      1: 0.125em,
+      2: 0.25em,
+      3: 0.375em,
+    ),
   ),
-  "link-underline": (
+  'link-underline': (
     property: text-decoration-color,
     class: u-link-underline,
     local-vars: (
-      "link-underline-opacity": 1
+      'link-underline-opacity': 1,
     ),
     values: map.merge(
-      color-maps.$utilities-links-underline,
-      (
-        null: rgba(var(--#{config.$prefix}link-color-rgb), var(--#{config.$prefix}u-link-underline-opacity, 1)),
-      )
-    )
+        color-maps.$utilities-links-underline,
+        (
+          null: rgba(
+              var(--#{config.$prefix}link-color-rgb),
+              var(--#{config.$prefix}u-link-underline-opacity, 1)
+            ),
+        )
+      ),
   ),
-  "link-underline-opacity": (
+  'link-underline-opacity': (
     css-var: true,
     class: u-link-underline-opacity,
     state: hover,
     values: (
       0: 0,
-      10: .1,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
     ),
   ),
 );
@@ -64,15 +67,29 @@ $link-shade-percentage: 15% !default;
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in color-maps.$theme-colors {
   .u-link-#{$color} {
-    color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+    color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
+      if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(
+        var(--#{config.$prefix}#{$color}-rgb),
+        var(--#{config.$prefix}u-link-underline-opacity, 1)
+      )
+      if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        $hover-color: if(colors.$color-contrast-dark == "white", shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        $hover-color: if(
+          colors.$color-contrast-dark == 'white',
+          shade-color($value, $link-shade-percentage),
+          tint-color($value, $link-shade-percentage)
+        );
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
+          if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(
+            #{to-rgb($hover-color)},
+            var(--#{config.$prefix}u-link-underline-opacity, 1)
+          )
+          if($enable-important-utilities, !important, null);
       }
     }
   }

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

@@ -2,7 +2,7 @@
 
 // Define utilities for object-fit
 $utilities-object-fit: (
-  "object-fit": (
+  'object-fit': (
     responsive: true,
     property: object-fit,
     class: u-object-fit,
@@ -12,6 +12,6 @@ $utilities-object-fit: (
       fill: fill,
       scale: scale-down,
       none: none,
-    )
+    ),
   ),
-);
+);

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

@@ -2,15 +2,15 @@
 
 // Define utilities for opacity
 $utilities-opacity: (
-  "opacity": (
+  'opacity': (
     property: opacity,
     class: u-opacity,
     values: (
       0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
       100: 1,
-    )
+    ),
   ),
-);
+);

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

@@ -5,16 +5,16 @@ $utilities-overflow: (
   'overflow': (
     property: overflow,
     class: u-overflow,
-    values: auto hidden visible scroll
+    values: auto hidden visible scroll,
   ),
   'overflow-x': (
     property: overflow-x,
     class: u-overflow-x,
-    values: auto hidden visible scroll
+    values: auto hidden visible scroll,
   ),
   'overflow-y': (
     property: overflow-y,
     class: u-overflow-y,
-    values: auto hidden visible scroll
-  )
+    values: auto hidden visible scroll,
+  ),
 );

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

@@ -6,27 +6,27 @@ $utilities-position: (
   'position': (
     property: position,
     class: u-position,
-    values: static relative absolute fixed sticky
+    values: static relative absolute fixed sticky,
   ),
   'top': (
     property: top,
     class: u-top,
-    values: $position-values
+    values: $position-values,
   ),
   'bottom': (
     property: bottom,
     class: u-bottom,
-    values: $position-values
+    values: $position-values,
   ),
   'start': (
     property: left,
     class: u-start,
-    values: $position-values
+    values: $position-values,
   ),
   'end': (
     property: right,
     class: u-end,
-    values: $position-values
+    values: $position-values,
   ),
   'translate-middle': (
     property: transform,
@@ -34,7 +34,7 @@ $utilities-position: (
     values: (
       null: translate(-50%, -50%),
       x: translateX(-50%),
-      y: translateY(-50%)
-    )
-  )
+      y: translateY(-50%),
+    ),
+  ),
 );

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

@@ -1,19 +1,19 @@
 @use 'sass:map';
-@use "../01-settings/settings.config" as config;
+@use '../01-settings/settings.config' as config;
 
 // Define utilities for shadows
 $utilities-shadow: (
-  "shadow": (
-      property: box-shadow,
-      class: u-shadow,
-      values: (
-        null: var(--#{config.$prefix}box-shadow),
-        xs: var(--#{config.$prefix}box-shadow-xs),
-        sm: var(--#{config.$prefix}box-shadow-sm),
-        lg: var(--#{config.$prefix}box-shadow-lg),
-        xl: var(--#{config.$prefix}box-shadow-xl),
-        inset: var(--#{config.$prefix}box-shadow-inset),
-        none: none
-      )
+  'shadow': (
+    property: box-shadow,
+    class: u-shadow,
+    values: (
+      null: var(--#{config.$prefix}box-shadow),
+      xs: var(--#{config.$prefix}box-shadow-xs),
+      sm: var(--#{config.$prefix}box-shadow-sm),
+      lg: var(--#{config.$prefix}box-shadow-lg),
+      xl: var(--#{config.$prefix}box-shadow-xl),
+      inset: var(--#{config.$prefix}box-shadow-inset),
+      none: none,
     ),
+  ),
 );

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

@@ -13,32 +13,32 @@ $utilities-sizes: (
       50: 50%,
       75: 75%,
       100: 100%,
-      auto: auto
-    )
+      auto: auto,
+    ),
   ),
   'max-width': (
     responsive: true,
     property: max-width,
     class: u-mw,
     values: (
-      100: 100%
-    )
+      100: 100%,
+    ),
   ),
   'viewport-width': (
     responsive: true,
     property: width,
     class: u-vw,
     values: (
-      100: 100vw
-    )
+      100: 100vw,
+    ),
   ),
   'min-viewport-width': (
     responsive: true,
     property: min-width,
     class: u-min-vw,
     values: (
-      100: 100vw
-    )
+      100: 100vw,
+    ),
   ),
   'height': (
     responsive: true,
@@ -51,31 +51,31 @@ $utilities-sizes: (
       50: 50%,
       75: 75%,
       100: 100%,
-      auto: auto
-    )
+      auto: auto,
+    ),
   ),
   'max-height': (
     responsive: true,
     property: max-height,
     class: u-mh,
     values: (
-      100: 100%
-    )
+      100: 100%,
+    ),
   ),
   'viewport-height': (
     responsive: true,
     property: height,
     class: u-vh,
     values: (
-      100: 100vh
-    )
+      100: 100vh,
+    ),
   ),
   'min-viewport-height': (
     responsive: true,
     property: min-height,
     class: u-min-vh,
     values: (
-      100: 100vh
-    )
-  )
+      100: 100vh,
+    ),
+  ),
 );

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

@@ -7,147 +7,182 @@ $utilities-spacing: (
     responsive: true,
     property: margin,
     class: u-m,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-x': (
     responsive: true,
     property: margin-right margin-left,
     class: u-mx,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: u-my,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-top': (
     responsive: true,
     property: margin-top,
     class: u-mt,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-end': (
     responsive: true,
     property: margin-right,
     class: u-me,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: u-mb,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   'margin-start': (
     responsive: true,
     property: margin-left,
     class: u-ms,
-    values: map.merge($spacing-sizes, (auto: auto))
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
   ),
   // Negative margin utilities
   'negative-margin': (
-    responsive: true,
-    property: margin,
-    class: u-m,
-    values: $negative-spacers
-  ),
+      responsive: true,
+      property: margin,
+      class: u-m,
+      values: $negative-spacers,
+    ),
   'negative-margin-x': (
     responsive: true,
     property: margin-right margin-left,
     class: u-mx,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   'negative-margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: u-my,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   'negative-margin-top': (
     responsive: true,
     property: margin-top,
     class: u-mt,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   'negative-margin-end': (
     responsive: true,
     property: margin-right,
     class: u-me,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   'negative-margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: u-mb,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   'negative-margin-start': (
     responsive: true,
     property: margin-left,
     class: u-ms,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   // Padding utilities
   'padding': (
-    responsive: true,
-    property: padding,
-    class: u-p,
-    values: $spacing-sizes
-  ),
+      responsive: true,
+      property: padding,
+      class: u-p,
+      values: $spacing-sizes,
+    ),
   'padding-x': (
     responsive: true,
     property: padding-right padding-left,
     class: u-px,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'padding-y': (
     responsive: true,
     property: padding-top padding-bottom,
     class: u-py,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'padding-top': (
     responsive: true,
     property: padding-top,
     class: u-pt,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'padding-end': (
     responsive: true,
     property: padding-right,
     class: u-pe,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'padding-bottom': (
     responsive: true,
     property: padding-bottom,
     class: u-pb,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'padding-start': (
     responsive: true,
     property: padding-left,
     class: u-ps,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   // Gap utility
   'gap': (
-    responsive: true,
-    property: gap,
-    class: u-gap,
-    values: $spacing-sizes
-  ),
+      responsive: true,
+      property: gap,
+      class: u-gap,
+      values: $spacing-sizes,
+    ),
   'row-gap': (
     responsive: true,
     property: row-gap,
     class: u-row-gap,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
   'column-gap': (
     responsive: true,
     property: column-gap,
     class: u-column-gap,
-    values: $spacing-sizes
+    values: $spacing-sizes,
   ),
-);
+);