unit.gl 0.0.40 → 0.1.2

package/scss/mixins/_ratio.scss

@@ -3,10 +3,10 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Ratio Mixins Module
 /// ===========================================================================
-/// 
+///
 /// This module provides mixins for creating aspect ratio containers.
 /// These containers maintain a specific width-to-height ratio, ensuring
 /// that elements scale proportionally across different screen sizes.
@@ -14,35 +14,34 @@
 /// There are two approaches provided: one using the `aspect-ratio` CSS
 /// property, and another using padding percentages for broader browser
 /// support.
-/// 
+///
 /// @group Ratio
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
+@use "../functions" as *;
 @use "../variables" as *;
-
+@use "../maps" as *;
 
 // ============================================================================
 // Mixins
 // ============================================================================
 
-
 // Aspect Ratio Box:
 // Creates a container with a specific aspect ratio.
 // @mixin aspect-ratio($width, $height) {
 //   position: relative;
 //   &:before {
-//       content: '';
+//       content: "";
 //       display: block;
 //       padding-top: calc(($height / $width) * 100%);
 //   }
@@ -59,8 +58,7 @@
 //   @include aspect-ratio(16, 9);
 // }
 
-
-@mixin ratio ($val01, $val02) {
+@mixin ratio($val01, $val02) {
     aspect-ratio: calc($val01 / $val02);
     width: 100%;
     position: relative;
@@ -69,37 +67,87 @@
     // vertical-align: top;
 }
 
-@mixin ratio_1x1   { @include ratio(1, 1); }
-@mixin ratio_1x2   { @include ratio(1, 2); }
-@mixin ratio_2x1   { @include ratio(2, 1); }
-@mixin ratio_1x3   { @include ratio(1, 3); }
-@mixin ratio_3x1   { @include ratio(3, 1); }
-@mixin ratio_1x4   { @include ratio(1, 4); }
-@mixin ratio_4x1   { @include ratio(4, 1); }
-@mixin ratio_3x2   { @include ratio(3, 2); }
-@mixin ratio_2x3   { @include ratio(2, 3); }
-@mixin ratio_4x3   { @include ratio(4, 3); }
-@mixin ratio_3x4   { @include ratio(3, 4); }
-@mixin ratio_16x9  { @include ratio(16, 9); }
-@mixin ratio_16x10 { @include ratio(16, 10); }
-
-.ratio_1x1   { @include ratio_1x1; }
-.ratio_1x2   { @include ratio_1x2; }
-.ratio_2x1   { @include ratio_2x1; }
-.ratio_1x3   { @include ratio_1x3; }
-.ratio_3x1   { @include ratio_3x1; }
-.ratio_1x4   { @include ratio_1x4; }
-.ratio_4x1   { @include ratio_4x1; }
-.ratio_3x2   { @include ratio_3x2; }
-.ratio_2x3   { @include ratio_2x3; }
-.ratio_4x3   { @include ratio_4x3; }
-.ratio_3x4   { @include ratio_3x4; }
-.ratio_16x9  { @include ratio_16x9; }
-.ratio_16x10 { @include ratio_16x10; }
-
-
-
-@mixin ratio_p ($val01) {
+@mixin ratio_1x1 {
+    @include ratio(1, 1);
+}
+@mixin ratio_1x2 {
+    @include ratio(1, 2);
+}
+@mixin ratio_2x1 {
+    @include ratio(2, 1);
+}
+@mixin ratio_1x3 {
+    @include ratio(1, 3);
+}
+@mixin ratio_3x1 {
+    @include ratio(3, 1);
+}
+@mixin ratio_1x4 {
+    @include ratio(1, 4);
+}
+@mixin ratio_4x1 {
+    @include ratio(4, 1);
+}
+@mixin ratio_3x2 {
+    @include ratio(3, 2);
+}
+@mixin ratio_2x3 {
+    @include ratio(2, 3);
+}
+@mixin ratio_4x3 {
+    @include ratio(4, 3);
+}
+@mixin ratio_3x4 {
+    @include ratio(3, 4);
+}
+@mixin ratio_16x9 {
+    @include ratio(16, 9);
+}
+@mixin ratio_16x10 {
+    @include ratio(16, 10);
+}
+
+.ratio_1x1 {
+    @include ratio_1x1;
+}
+.ratio_1x2 {
+    @include ratio_1x2;
+}
+.ratio_2x1 {
+    @include ratio_2x1;
+}
+.ratio_1x3 {
+    @include ratio_1x3;
+}
+.ratio_3x1 {
+    @include ratio_3x1;
+}
+.ratio_1x4 {
+    @include ratio_1x4;
+}
+.ratio_4x1 {
+    @include ratio_4x1;
+}
+.ratio_3x2 {
+    @include ratio_3x2;
+}
+.ratio_2x3 {
+    @include ratio_2x3;
+}
+.ratio_4x3 {
+    @include ratio_4x3;
+}
+.ratio_3x4 {
+    @include ratio_3x4;
+}
+.ratio_16x9 {
+    @include ratio_16x9;
+}
+.ratio_16x10 {
+    @include ratio_16x10;
+}
+
+@mixin ratio_p($val01) {
     padding-bottom: $val01;
     width: 100%;
     position: relative;
@@ -108,39 +156,88 @@
     // vertical-align: top;
 }
 
-@mixin ratio_p_1x1   { @include ratio_p(100.00%); }
-@mixin ratio_p_1x2   { @include ratio_p(200.00%); }
-@mixin ratio_p_2x1   { @include ratio_p( 50.00%); }
-@mixin ratio_p_1x3   { @include ratio_p(300.00%); }
-@mixin ratio_p_3x1   { @include ratio_p( 33.33%); }
-@mixin ratio_p_1x4   { @include ratio_p(400.00%); }
-@mixin ratio_p_4x1   { @include ratio_p( 25.00%); }
-@mixin ratio_p_2x3   { @include ratio_p(150.00%); }
-@mixin ratio_p_3x2   { @include ratio_p( 66.67%); }
-@mixin ratio_p_3x4   { @include ratio_p(133.33%); }
-@mixin ratio_p_4x3   { @include ratio_p( 75.00%); }
-@mixin ratio_p_16x9  { @include ratio_p( 56.25%); }
-@mixin ratio_p_16x10 { @include ratio_p( 62.50%); }
-
-.ratio_p_1x1   { @include ratio_p_1x1; }
-.ratio_p_1x2   { @include ratio_p_1x2; }
-.ratio_p_2x1   { @include ratio_p_2x1; }
-.ratio_p_1x3   { @include ratio_p_1x3; }
-.ratio_p_3x1   { @include ratio_p_3x1; }
-.ratio_p_1x4   { @include ratio_p_1x4; }
-.ratio_p_4x1   { @include ratio_p_4x1; }
-.ratio_p_3x2   { @include ratio_p_3x2; }
-.ratio_p_2x3   { @include ratio_p_2x3; }
-.ratio_p_4x3   { @include ratio_p_4x3; }
-.ratio_p_3x4   { @include ratio_p_3x4; }
-.ratio_p_16x9  { @include ratio_p_16x9; }
-.ratio_p_16x10 { @include ratio_p_16x10; }
-
-
-
-
-  // https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss
-  // Credit: Nicolas Gallagher and SUIT CSS.
+@mixin ratio_p_1x1 {
+    @include ratio_p(100%);
+}
+@mixin ratio_p_1x2 {
+    @include ratio_p(200%);
+}
+@mixin ratio_p_2x1 {
+    @include ratio_p(50%);
+}
+@mixin ratio_p_1x3 {
+    @include ratio_p(300%);
+}
+@mixin ratio_p_3x1 {
+    @include ratio_p(33.33%);
+}
+@mixin ratio_p_1x4 {
+    @include ratio_p(400%);
+}
+@mixin ratio_p_4x1 {
+    @include ratio_p(25%);
+}
+@mixin ratio_p_2x3 {
+    @include ratio_p(150%);
+}
+@mixin ratio_p_3x2 {
+    @include ratio_p(66.67%);
+}
+@mixin ratio_p_3x4 {
+    @include ratio_p(133.33%);
+}
+@mixin ratio_p_4x3 {
+    @include ratio_p(75%);
+}
+@mixin ratio_p_16x9 {
+    @include ratio_p(56.25%);
+}
+@mixin ratio_p_16x10 {
+    @include ratio_p(62.5%);
+}
+
+.ratio_p_1x1 {
+    @include ratio_p_1x1;
+}
+.ratio_p_1x2 {
+    @include ratio_p_1x2;
+}
+.ratio_p_2x1 {
+    @include ratio_p_2x1;
+}
+.ratio_p_1x3 {
+    @include ratio_p_1x3;
+}
+.ratio_p_3x1 {
+    @include ratio_p_3x1;
+}
+.ratio_p_1x4 {
+    @include ratio_p_1x4;
+}
+.ratio_p_4x1 {
+    @include ratio_p_4x1;
+}
+.ratio_p_3x2 {
+    @include ratio_p_3x2;
+}
+.ratio_p_2x3 {
+    @include ratio_p_2x3;
+}
+.ratio_p_4x3 {
+    @include ratio_p_4x3;
+}
+.ratio_p_3x4 {
+    @include ratio_p_3x4;
+}
+.ratio_p_16x9 {
+    @include ratio_p_16x9;
+}
+.ratio_p_16x10 {
+    @include ratio_p_16x10;
+}
+
+// https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss
+// Credit: Nicolas Gallagher and SUIT CSS.
 
 // .ratio {
 //     position: relative;
@@ -167,7 +264,6 @@
 //     }
 // }
 
-
 // @mixin aspect-ratio($width, $height) {
 //     position: relative;
 
@@ -185,4 +281,4 @@
 //         bottom: 0;
 //         left: 0;
 //     }
-// }
+// }

package/scss/mixins/_unit.scss

@@ -3,76 +3,79 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Device Mixins Module
 /// ===========================================================================
-/// 
+///
 /// @group Unit
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-@use "../variables" as *;
-@use "../functions" as *;
+@use "sass:math";
 
+@use "../functions" as *;
+@use "../variables" as *;
+@use "../maps" as *;
 
 // ============================================================================
 // Mixins
 // ============================================================================
 
-
-/// 
+///
 /// This mixin applies a CSS property with a value calculated in Kyū units.
-/// 
+///
 /// @name q
 /// @param {Number} $multiplier - The multiplier to apply to the base Kyū unit.
 /// @param {String} $property - The CSS property to which the calculated value is applied.
-/// 
+///
 /// @example scss - Usage
 ///   .element {
-///     @include q(4, 'padding');  // Applies padding using 4 times the base Kyū unit
+///     @include q(4, "padding");  // Applies padding using 4 times the base Kyū unit
 ///   }
-/// 
+///
 @mixin q($multiplier, $property) {
     #{$property}: q($multiplier);
 }
 
-
-/// 
+///
 /// A mixin for fluid typography that scales font sizes between a specified
 /// minimum and maximum viewport width, ensuring a smooth transition.
-/// 
+///
 /// @name fluid_type
 /// @param {Length} $min_vw - The minimum viewport width where the fluid scaling starts.
 /// @param {Length} $max_vw - The maximum viewport width where the fluid scaling ends.
 /// @param {Length} $min_font_size - The minimum font size for the smallest viewport.
 /// @param {Length} $max_font_size - The maximum font size for the largest viewport.
-/// 
+///
 /// @example scss - Usage
 ///   html {
 ///     @include fluid_type(320px, 1440px, 1rem, 2rem);
 ///   }
-/// 
+///
 @mixin fluid_type(
     $min_vw,
     $max_vw,
     $min_font_size,
-    $max_font_size
+    $max_font_size,
 ) {
+    // $u1: unit($min_vw);
+    // $u2: unit($max_vw);
+    // $u3: unit($min_font_size);
+    // $u4: unit($max_font_size);
 
-    $u1: unit($min_vw);
-    $u2: unit($max_vw);
-    $u3: unit($min_font_size);
-    $u4: unit($max_font_size);
+    $u1: math.unit($min_vw);
+    $u2: math.unit($max_vw);
+    $u3: math.unit($min_font_size);
+    $u4: math.unit($max_font_size);
 
     @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
         & {
@@ -80,7 +83,14 @@
 
             @media screen and (min-width: $min_vw) {
                 font-size: calc(
-                    #{$min_font_size} + #{unit_strip($max_font_size - $min_font_size)} * ((100vw - #{$min_vw}) / #{unit_strip($max_vw - $min_vw)})
+                    #{$min_font_size} + #{unit_strip(
+                            $max_font_size - $min_font_size
+                        )} *
+                        (
+                            (100vw - #{$min_vw}) / #{unit_strip(
+                                    $max_vw - $min_vw
+                                )}
+                        )
                 );
             }
 

package/scss/mixins/_view.scss

@@ -3,12 +3,12 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// View Mixins Module
 /// ===========================================================================
-/// 
+///
 /// This module provides a set of mixins for applying media queries based on
-/// predefined breakpoints. These mixins allow for a clean, semantic way to 
+/// predefined breakpoints. These mixins allow for a clean, semantic way to
 /// handle responsive design across different screen sizes.
 ///
 /// @group View
@@ -16,37 +16,36 @@
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
-/// @require "../variables" - for access to the $breakpoints map and related variables.
+/// @require "../variables" - for access to the $breakpoints map and related
+/// variables.
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
 @use "../variables" as *;
 
-
 // ============================================================================
 // Mixins
 // ============================================================================
 
-
-/// 
-/// Applies styles for the specified breakpoint. If the breakpoint 
+///
+/// Applies styles for the specified breakpoint. If the breakpoint
 /// is not found, a warning is issued.
-/// 
+///
 /// @name breakpoint
-/// @param {String} $size - The name of the breakpoint as defined in the $breakpoints map.
+/// @param {String} $size - The name of the breakpoint as defined in the
+/// $breakpoints map.
 /// @content
-/// 
+///
 /// @example scss - Usage
 ///   @include breakpoint(md) {
 ///     // Styles for medium screens and up
 ///   }
-/// 
+///
 @mixin breakpoint($size) {
     @if map-has-key($breakpoints, $size) {
         @media (min-width: map-get($breakpoints, $size)) {
@@ -57,102 +56,96 @@
     }
 }
 
-
-/// 
+///
 /// Applies styles for extra-small devices and up (min-width: 320px).
-/// 
+///
 /// @name media_xs
 /// @example scss - Usage
 ///     @include media_xs {
 ///         // Styles for extra-small devices and up
 ///     }
-/// 
+///
 @mixin media_xs {
-    @media (min-width: $media_xs) { 
-        @content; 
+    @media (min-width: $media_xs) {
+        @content;
     }
 }
 
-
-/// 
+///
 /// Applies styles for small devices and up (min-width: 480px).
-/// 
+///
 /// @name media_sm
 /// @example scss - Usage
 ///   @include media_sm {
 ///     // Styles for small devices and up
 ///   }
-/// 
+///
 @mixin media_sm {
-    @media (min-width: $media_sm) { 
-        @content; 
+    @media (min-width: $media_sm) {
+        @content;
     }
 }
 
-
-/// 
+///
 /// Applies styles for medium devices and up (min-width: 768px).
-/// 
+///
 /// @name media_md
-/// 
+///
 /// @example scss - Usage
 ///   @include media_md {
 ///     // Styles for medium devices and up
 ///   }
-/// 
+///
 @mixin media_md {
-    @media (min-width: $media_md) { 
-        @content; 
+    @media (min-width: $media_md) {
+        @content;
     }
 }
 
-
-/// 
+///
 /// Applies styles for large devices and up (min-width: 1024px).
-/// 
+///
 /// @name media_lg
-/// 
+///
 /// @example scss - Usage
 ///   @include media_lg {
 ///     // Styles for large devices and up
 ///   }
-/// 
+///
 @mixin media_lg {
-    @media (min-width: $media_lg) { 
-        @content; 
+    @media (min-width: $media_lg) {
+        @content;
     }
 }
 
-
-/// 
+///
 /// Applies styles for extra-large devices and up (min-width: 1280px).
-/// 
+///
 /// @name media_xl
-/// 
+///
 /// @example scss - Usage
 ///   @include media_xl {
 ///     // Styles for extra-large devices and up
 ///   }
-/// 
+///
 @mixin media_xl {
-    @media (min-width: $media_xl) { 
-        @content; 
+    @media (min-width: $media_xl) {
+        @content;
     }
 }
 
-
-/// 
+///
 /// Applies styles for super-large devices and up (min-width: 1440px).
-/// 
+///
 /// @name media_sl
-/// 
+///
 /// @example scss - Usage
 ///   @include media_sl {
 ///     // Styles for super-large devices and up
 ///   }
-/// 
+///
 @mixin media_sl {
-    @media (min-width: $media_sl) { 
-        @content; 
+    @media (min-width: $media_sl) {
+        @content;
     }
 }