unit.gl 0.0.40 → 0.1.1

package/scss/functions/_view.scss

@@ -3,38 +3,35 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// View Functions Module
 /// ===========================================================================
-/// 
+///
 /// @group View
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Functions
 // ============================================================================
 
-
-/// 
+///
 /// A function to calculate breakpoints based on a multiplier of the base
 /// screen unit.
-/// 
+///
 /// @name calc_breakpoint
 /// @param {Number} $multiplier - The multiplier to apply to the base unit.
 /// @return {Length} The calculated breakpoint value in pixels.
-/// 
+///
 @function calc_breakpoint($base_screen_unit, $multiplier) {
     @return $base_screen_unit * $multiplier;
 }

package/scss/functions/math/_arithmetic.scss

@@ -3,57 +3,51 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Math Functions Module
 /// ===========================================================================
-/// 
-/// These functions allow for arithmetic operations on values with or without 
-/// units, ensuring compatibility and proper handling of CSS units. When units 
+///
+/// These functions allow for arithmetic operations on values with or without
+/// units, ensuring compatibility and proper handling of CSS units. When units
 /// are mismatched, a warning is issued, and the operation returns null.
 ///
 /// Functions:
 /// - add: Adds two values, handling units appropriately.
 /// - subtract: Subtracts one value from another, with unit handling.
-/// 
+///
 /// @group Math
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Functions
 // ============================================================================
 
-
-/// 
+///
 /// Adds two values, handling units appropriately.
-/// 
+///
 /// This function performs arithmetic addition on two values, ensuring that
 /// units are properly handled. If both values are unitless, they are added
 /// directly.
-/// If one value has a unit and the other is unitless, the unitless value is 
-/// treated as having the same unit as the other value. If both values have 
-/// units, they must be the same unit; otherwise, a warning is issued and 
+/// If one value has a unit and the other is unitless, the unitless value is
+/// treated as having the same unit as the other value. If both values have
+/// units, they must be the same unit; otherwise, a warning is issued and
 /// `null` is returned.
-/// 
+///
 /// @param {Number} $value1 - The first value, which may or may not include units.
 /// @param {Number} $value2 - The second value, which may or may not include units.
 /// @return {Number} - The sum of the two values, or null if the units are incompatible.
-/// 
-@function add(
-    $value1,
-    $value2
-) {
+///
+@function add($value1, $value2) {
     @if unitless($value1) and unitless($value2) {
         @return $value1 + $value2;
     } @else if unitless($value1) {
@@ -70,23 +64,20 @@
 
 ///
 /// Subtracts one value from another, handling units appropriately.
-/// 
+///
 /// This function performs arithmetic subtraction on two values, ensuring that
 /// units are properly handled. If both values are unitless, they are
 /// subtracted directly.
-/// If one value has a unit and the other is unitless, the unitless value is 
-/// treated as having the same unit as the other value. If both values have 
-/// units, they must be the same unit; otherwise, a warning is issued and 
+/// If one value has a unit and the other is unitless, the unitless value is
+/// treated as having the same unit as the other value. If both values have
+/// units, they must be the same unit; otherwise, a warning is issued and
 /// `null` is returned.
-/// 
+///
 /// @param {Number} $value1 - The first value, which may or may not include units.
 /// @param {Number} $value2 - The second value, which may or may not include units.
 /// @return {Number} - The difference between the two values, or null if the units are incompatible.
-/// 
-@function subtract(
-    $value1,
-    $value2
-) {
+///
+@function subtract($value1, $value2) {
     @if unitless($value1) and unitless($value2) {
         @return $value1 - $value2;
     } @else if unitless($value1) {

package/scss/functions/math/_index.scss

@@ -3,28 +3,25 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Math Functions Module
 /// ===========================================================================
-/// 
+///
 /// @group Math
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Forward
 // ============================================================================
 
-
-@forward "arithmetic";        // Basic arithmetic operations
+@forward "arithmetic"; // Basic arithmetic operations

package/scss/functions/unit/_index.scss

@@ -3,28 +3,29 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Unit Functions Module
 /// ===========================================================================
-/// 
+///
 /// @group Unit
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Forward
 // ============================================================================
 
-@forward "unit_conversion";   // Unit conversion functions
-@forward "unit_functions";    // Additional utility functions for units
+// Unit conversion functions
+@forward "unit_conversion";
+
+// Additional utility functions for units
+@forward "unit_functions";

package/scss/functions/unit/_unit_conversion.scss

@@ -3,61 +3,68 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Unit Functions Module
 /// ===========================================================================
-/// 
+///
 /// @group Unit
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
 
+/// Base font-size for the document
+$base-font-size: 16px !default;
+
+
 // ============================================================================
 // Functions
 // ============================================================================
 
-
-
-
-
 /// Unit Conversion Functions
 /// ---------------------------------------------------------------------------
 /// Create functions to convert between different measurement units, such as
 /// pixels to rem, em to pixels, etc.
 
-@function px_to_rem($size, $base: 16px) {
+@function px_to_rem(
+    $size,
+    $base: 16px
+) {
     @return $size / $base * 1rem;
 }
 
-@function rem_to_px($size, $base: 16px) {
+@function rem_to_px(
+    $size,
+    $base: 16px
+) {
     @return $size * $base;
 }
 
-@function em_to_px($size, $context: 16px) {
+@function em_to_px(
+    $size,
+    $context: 16px
+) {
     @return $size * $context;
 }
 
-@function px_to_em($size, $context: 16px) {
+@function px_to_em(
+    $size,
+    $context: 16px
+) {
     @return $size / $context * 1em;
 }
 
-
-/// Base font-size for the document
-$base-font-size: 16px !default;
-
 /// Validate that the input is a pixel value
-@function validate-px($value) {
-    @if unit($value) != 'px' {
+@function validate_px($value) {
+    @if unit($value) != "px" {
         @error "Expected a pixel value, but got `#{$value}`.";
     }
     @return $value;
@@ -65,30 +72,36 @@ $base-font-size: 16px !default;
 
 /// Convert pixels to rem
 @function px_to_rem($size) {
-    $validated-size: validate-px($size);
-    @return $validated-size / $base-font-size * 1rem;
+    $validated_size: validate_px($size);
+    @return $validated_size / $base-font-size * 1rem;
 }
 
 /// Convert rem to pixels
 @function rem_to_px($size) {
-    @if unit($size) != 'rem' {
+    @if unit($size) != "rem" {
         @error "Expected a rem value, but got `#{$size}`.";
     }
     @return $size * $base-font-size;
 }
 
 /// Convert em to pixels
-@function em_to_px($size, $context: $base-font-size) {
-    $validated-context: validate-px($context);
-    @if unit($size) != 'em' {
+@function em_to_px(
+    $size,
+    $context: $base-font-size
+) {
+    $validated_context: validate_px($context);
+    @if unit($size) != "em" {
         @error "Expected an em value, but got `#{$size}`.";
     }
-    @return $size * $validated-context;
+    @return $size * $validated_context;
 }
 
 /// Convert pixels to em
-@function px_to_em($size, $context: $base-font-size) {
-    $validated-size: validate-px($size);
-    $validated-context: validate-px($context);
-    @return $validated-size / $validated-context * 1em;
+@function px_to_em(
+    $size,
+    $context: $base-font-size
+) {
+    $validated_size: validate_px($size);
+    $validated_context: validate_px($context);
+    @return $validated_size / $validated_context * 1em;
 }

package/scss/functions/unit/_unit_functions.scss

@@ -3,83 +3,96 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Unit Functions Module
 /// ===========================================================================
-/// 
+///
 /// @group Unit
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
+@use "sass:meta";
+@use "sass:math";
+@use "sass:string";
 
 // ============================================================================
 // Functions
 // ============================================================================
 
-
-/// 
+///
 /// Strip Unit Function
 /// ---------------------------------------------------------------------------
-/// 
+///
 /// Removes the unit from a numerical value, ensuring compatibility with various SCSS versions.
-/// 
+///
 /// @param {Number} $value - The numerical value with or without a unit.
 /// @return {Number} - The raw numerical value without its unit, or the original value if unitless or non-numerical.
-/// 
+///
 @function unit_strip($value) {
     // Check if the input is a number with a unit
-    @if type-of($value) == "number" and not unitless($value) {
+    @if meta.type-of($value)=="number" and not math.is-unitless($value) {
+
         // Convert the value to a string
-        $value-str: inspect($value);
+        // $value-str: inspect($value);
+        $value-str: meta.inspect($value);
+
         // Remove the unit part from the string
-        $value-no-unit: str-slice(
+        $value-no-unit: string.slice(
             $value-str,
             1,
-            str-index($value-str, unit($value)) - 1
+            string.index($value-str, math.unit($value)) - 1
         );
+
         // Return the number without its unit
         @return $value-no-unit;
+
     } @else if type-of($value) != "number" {
+
         // Handle non-number inputs gracefully
         // @warn "Input `#{$value}` is not a number. Returning value as-is.";
         @return $value;
     }
+
     // Return the value as-is for unitless numbers or non-number inputs
     @return $value;
 }
 
-
 ///
 /// Linear Interpolation Function
 /// ---------------------------------------------------------------------------
-/// 
+///
 /// Interpolates linearly between two values across a range, useful for
 /// fluid scaling.
-/// 
+///
 /// @param {Number} $start - Starting value at the lower bound (can include units).
 /// @param {Number} $end - Ending value at the upper bound (can include units).
 /// @param {Number} $min - Lower bound for interpolation (must be unitless or in 'px').
 /// @param {Number} $max - Upper bound for interpolation (must be unitless or in 'px').
 /// @param {Number} $actual - Current value to interpolate (default is 100vw).
 /// @return {Number} - Interpolated value (in the same units as $start and $end).
-/// 
-@function linear_interpolation($start, $end, $min, $max, $actual: 100vw) {
+///
+@function linear_interpolation(
+    $start,
+    $end,
+    $min,
+    $max,
+    $actual: 100vw
+) {
 
     // Validate parameters
-    @if unitless($min) == false and unit($min) != 'px' {
+    @if unitless($min) == false and unit($min) != "px" {
         @error "Parameter `$min` must be unitless or in 'px'.";
     }
-    @if unitless($max) == false and unit($max) != 'px' {
+    @if unitless($max) == false and unit($max) != "px" {
         @error "Parameter `$max` must be unitless or in 'px'.";
     }
     @if $max <= $min {
@@ -106,27 +119,25 @@
 
     // Return the `calc` expression
     @return $value;
-
 }
 
-
 ///
 ///  Clamp-based Responsive Typography Function
 /// ---------------------------------------------------------------------------
-/// 
+///
 /// Calculates font size using clamp-based responsive typography.
-/// 
+///
 /// @param {Number} $_font_size_min - Minimum font size.
 /// @param {Number} $_font_size_max - Maximum font size.
 /// @param {Number} $_viewport_width_min - Minimum viewport width where scaling starts.
 /// @param {Number} $_viewport_width_max - Maximum viewport width where scaling stops.
 /// @return {Number} - Calculated size using clamp.
-/// 
+///
 @function scale_dynamic_clamp(
     $_viewport_width_min,
     $_viewport_width_max,
     $_font_size_min,
-    $_font_size_max,
+    $_font_size_max
 ) {
     @return clamp(
         $_font_size_min,
@@ -140,8 +151,6 @@
     );
 }
 
-
-
 /// Fluid Typography Mixin
 /// ---------------------------------------------------------------------------
 /// Mixin: fluid_type
@@ -189,28 +198,27 @@
 //     }
 // }
 
-
 ///
 /// Dynamic Scaling Function
 /// ---------------------------------------------------------------------------
-/// 
+///
 /// Calculates font size dynamically based on viewport width, allowing for
 /// fluid scaling.
-/// 
+///
 /// @param {Number} $_viewport_width_min - Minimum viewport width where scaling starts.
 /// @param {Number} $_viewport_width_max - Maximum viewport width where scaling stops.
 /// @param {Number} $_font_size_min - Minimum font size.
 /// @param {Number} $_font_size_max - Maximum font size.
 /// @param {Number} $_current_width - Current viewport width.
 /// @return {Number} - The calculated font size based on the current width, or null if units are inconsistent.
-/// 
+///
 @function scale_dynamic(
     $_viewport_width_min,
     $_viewport_width_max,
     $_font_size_min,
     $_font_size_max,
-    $_current_width,
-    ) {
+    $_current_width
+) {
     // Ensure the units are consistent
     // $u1: unit($_viewport_width_min);
     // $u2: unit($_viewport_width_max);
@@ -224,15 +232,19 @@
     // Validate unit consistency
     @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
         // Check if the current width is within the specified range
-        @if $_current_width >= $_viewport_width_min and $_current_width <= $_viewport_width_max {
-        // Calculate and return the interpolated font size
-        @return linear_interpolation(
-            $_font_size_min,
-            $_font_size_max,
-            $_viewport_width_min,
-            $_viewport_width_max,
-            100vw
-        );
+        @if $_current_width >=
+            $_viewport_width_min and
+            $_current_width <=
+            $_viewport_width_max
+        {
+            // Calculate and return the interpolated font size
+            @return linear_interpolation(
+                $_font_size_min,
+                $_font_size_max,
+                $_viewport_width_min,
+                $_viewport_width_max,
+                100vw
+            );
         } @else if $_current_width < $_viewport_width_min {
             // Return the minimum font size
             @return $_font_size_min;

package/scss/index.scss

@@ -3,7 +3,6 @@
 @use "sass:math";
 
 @forward "reset";
-@forward "global";
 
 @forward "functions";
 @forward "variables";

package/scss/maps/_color.scss

@@ -3,28 +3,28 @@
 // ============================================================================
 
 ////
-/// 
-/// Color Variables Module
+///
+/// Color Maps Module
 /// ===========================================================================
-/// 
-/// These colors are used for visual guides such as grid overlays, baselines, 
-/// and alignment guides. The colors are defined with varying levels of opacity 
+///
+/// These colors are used for visual guides such as grid overlays, baselines,
+/// and alignment guides. The colors are defined with varying levels of opacity
 /// to ensure they are visible yet non-intrusive on the design.
-/// 
+///
 /// @group Color
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
+@use "../variables" as *;
 
 // ============================================================================
 // Maps
@@ -32,12 +32,12 @@
 
 /// Color Set for Easy Adjustments
 /// ---------------------------------------------------------------------------
-/// 
+///
 $guide_colors: (
-    "primary":    $guide_color_primary,
-    "secondary":  $guide_color_secondary,
-    "tertiary":   $guide_color_tertiary,
+    "primary": $guide_color_primary,
+    "secondary": $guide_color_secondary,
+    "tertiary": $guide_color_tertiary,
     "quaternary": $guide_color_quaternary,
-    "light":      $guide_color_light,
-    "dark":       $guide_color_dark,
+    "light": $guide_color_light,
+    "dark": $guide_color_dark
 );

package/scss/maps/_index.scss

@@ -1 +1,27 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+///
+/// Maps Module
+/// ===========================================================================
+///
+///
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+// ============================================================================
+// Use
+// ============================================================================
+
+// ============================================================================
+// Forward
+// ============================================================================
+
 @forward "color";