unit.gl 0.1.3 → 0.1.9

package/scss/classes/_guide.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Guide Class Module
@@ -42,9 +38,6 @@
 .guide {
     @include guide;
 }
-.guide_overlay {
-    @include guide;
-}
 
 ///
 /// Applies a grid overlay with a customizable grid size and color.
@@ -55,7 +48,10 @@
 ///   <div class="guide_graph"></div>
 ///
 .guide_graph {
-    @include guide_graph($rhythm_base); // Default size, customize as needed
+    @include guide_graph;
+}
+.guide_graph_centered {
+    @include guide_graph_centered;
 }
 
 ///
@@ -67,55 +63,61 @@
 ///   <div class="guide_baseline"></div>
 ///
 .guide_baseline {
-    @include guide_baseline(
-        $line_height_base
-    ); // Default size, customize as needed
+    @include guide_baseline; // Default size, customize as needed
 }
 
-///
-/// Applies a full baseline grid with both vertical and horizontal lines.
-///
-/// @name baseline_grid
-///
-/// @example HTML
-///   <div class="baseline-grid"></div>
-///
-.baseline_grid {
-    @include baseline_grid(60px, 24px); // Default sizes, customize as needed
+html,
+body {
+    height: 100%;
 }
+// #baseline-guide {
+//     @include guide_baseline; // uses default size & color
+// }
 
-///
-/// Creates a centered guide box for alignment checks.
-///
-/// @name guide_centered
-///
-/// @example HTML
-///   <div class="guide_centered"></div>
-///
-.guide_centered {
-    @include guide_centered(200px, 200px); // Default size, customize as needed
-}
+// ///
+// /// Applies a full baseline grid with both vertical and horizontal lines.
+// ///
+// /// @name baseline_grid
+// ///
+// /// @example HTML
+// ///   <div class="baseline_grid"></div>
+// ///
+// .baseline_grid {
+//     @include baseline_grid(60px, 24px); // Default sizes, customize as needed
+// }
 
-///
-/// Visualizes the margin area around content.
-///
-/// @name guide_margin
-///
-/// @example HTML
-///   <div class="guide_margin"></div>
-///
-.guide_margin {
-    @include guide_margin(20px); // Default margin size, customize as needed
-}
+// ///
+// /// Creates a centered guide box for alignment checks.
+// ///
+// /// @name guide_centered
+// ///
+// /// @example HTML
+// ///   <div class="guide_centered"></div>
+// ///
+// .guide_centered {
+//     @include guide_centered(200px, 200px); // Default size, customize as needed
+// }
 
-///
-/// Visualizes a larger margin area around content.
-///
-/// @name guide_margin)_wide
-///
-/// @example HTML
-///   <div class="guide_margin_wide"></div>
-///
-.guide_margin_wide {
-    @include guide_margin(40px); // Wider margin size, customize as needed
-}
+// ///
+// /// Visualizes the margin area around content.
+// ///
+// /// @name guide_margin
+// ///
+// /// @example HTML
+// ///   <div class="guide_margin"></div>
+// ///
+// .guide_margin {
+//     @include guide_margin(20px); // Default margin size, customize as needed
+// }
+
+// ///
+// /// Visualizes a larger margin area around content.
+// ///
+// /// @name guide_margin)_wide
+// ///
+// /// @example HTML
+// ///   <div class="guide_margin_wide"></div>
+// ///
+// .guide_margin_wide {
+//     @include guide_margin(40px); // Wider margin size, customize as needed
+// }

package/scss/classes/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Class Module
@@ -26,4 +22,4 @@
 
 /// Forwarding modules for global access
 @forward "ratio";
-// @forward "guide";
+@forward "guide";

package/scss/classes/_ratio.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Ratio Class Module
@@ -20,9 +16,63 @@
 // Use
 // ============================================================================
 
-@use "../variables" as *;
-@use "../mixins" as *;
+@use "sass:list";
+@use "sass:map";
+
+@use "../variables" as vars;
+@use "../maps" as maps;
+@use "../mixins" as mixins;
 
 // ============================================================================
 // Classes
 // ============================================================================
+
+// ============================================================================
+// Utility Classes (declarative usage)
+// ============================================================================
+
+@each $name, $ratio in maps.$ratio_map {
+    .ratio_#{$name} {
+        @include mixins.aspect_ratio(list.nth($ratio, 1), list.nth($ratio, 2));
+    }
+}
+
+// .ratio_1x1 {
+//     @include aspect_ratio_1x1;
+// }
+// .ratio_1x2 {
+//     @include aspect_ratio_1x2;
+// }
+// .ratio_2x1 {
+//     @include aspect_ratio_2x1;
+// }
+// .ratio_1x3 {
+//     @include aspect_ratio_1x3;
+// }
+// .ratio_3x1 {
+//     @include aspect_ratio_3x1;
+// }
+// .ratio_1x4 {
+//     @include aspect_ratio_1x4;
+// }
+// .ratio_4x1 {
+//     @include aspect_ratio_4x1;
+// }
+// .ratio_3x2 {
+//     @include aspect_ratio_3x2;
+// }
+// .ratio_2x3 {
+//     @include aspect_ratio_2x3;
+// }
+// .ratio_4x3 {
+//     @include aspect_ratio_4x3;
+// }
+// .ratio_3x4 {
+//     @include aspect_ratio_3x4;
+// }
+// .ratio_16x9 {
+//     @include aspect_ratio_16x9;
+// }
+// .ratio_16x10 {
+//     @include aspect_ratio_16x10;
+// }

package/scss/dev/_banner.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Dev Functions Module

package/scss/functions/_color.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Color Variables Module
@@ -33,5 +29,5 @@
 /// ---------------------------------------------------------------------------
 ///
 @function guide_color($name) {
-    @return map-get($guide_colors, $name);
+    @return map.get($guide_color_map, $name);
 }

package/scss/functions/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Functions Module

package/scss/functions/_layer.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Layer Functions Module
@@ -33,12 +29,13 @@
 ///
 /// @name z
 /// @param {String} $layer - The name of the layer to retrieve the z-index for.
-/// @return {Number | Null} - The z-index value associated with the layer, or null if not found.
+/// @return {Number | Null} - The z-index value associated with the layer,
+/// or null if not found.
 ///
 @function z($layer) {
     @if not map-has-key($layers, $layer) {
         @warn "Layer `#{$layer}` not found in the $layers map. z-index property omitted.";
         @return null;
     }
-    @return map-get($layers, $layer);
+    @return map.get($layers, $layer);
 }

package/scss/functions/_ratio.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Ratio Functions Module
@@ -38,7 +34,8 @@
 ///
 /// @name ratio_golden
 /// @param {Number} $size - The base size to scale.
-/// @param {Number} $increment - The exponent applied to the golden ratio, default is 1.
+/// @param {Number} $increment - The exponent applied to the golden ratio,
+/// default is 1.
 /// @return {Number} - The calculated size based on the golden ratio.
 ///
 /// @example scss - Usage Example

package/scss/functions/_scale.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Scale Functions Module
@@ -37,18 +33,16 @@
 /// scale. This helps maintain harmonious proportions across a design.
 ///
 /// @name modular_scale
-/// @param {Number} $increment - The step on the scale, can be positive or negative.
-/// @param {Number} $base - The base value to scale from, defaults to 1em (typographic base size).
-/// @param {Number} $ratio - The ratio to use for scaling, defaults to the Golden Ratio (1.618).
+/// @param {Number} $increment - The step on the scale, can be positive or
+/// negative.
+/// @param {Number} $base - The base value to scale from, defaults to 1em
+/// (typographic base size).
+/// @param {Number} $ratio - The ratio to use for scaling, defaults to the
+/// olden Ratio (1.618).
 /// @return {Number} - The calculated value based on the modular scale.
 ///
-@function modular_scale(
-    $increment: 1,
-    $base: 1em,
-    $ratio: 1.618
-) {
-
-        // Validate inputs
+@function modular_scale($increment: 1, $base: 1em, $ratio: 1.618) {
+    // Validate inputs
     @if type-of($increment) != "number" {
         @error "Step must be a number.";
     }

package/scss/functions/_sequence.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Sequence Functions Module
@@ -277,7 +273,6 @@
     }
     @return 2 * $n * $n - $n;
 }
-
 ///
 /// Cube Number Sequence
 /// ---------------------------------------------------------------------------

package/scss/functions/_view.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// View Functions Module

package/scss/functions/math/_arithmetic.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Math Functions Module
@@ -43,9 +39,12 @@
 /// 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.
+/// @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) {
     @if unitless($value1) and unitless($value2) {
@@ -73,9 +72,12 @@
 /// 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.
+/// @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) {
     @if unitless($value1) and unitless($value2) {

package/scss/functions/math/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Math Functions Module

package/scss/functions/unit/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Unit Functions Module

package/scss/functions/unit/_unit_conversion.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Unit Functions Module
@@ -20,11 +16,9 @@
 // Use
 // ============================================================================
 
-
 /// Base font-size for the document
 $base-font-size: 16px !default;
 
-
 // ============================================================================
 // Functions
 // ============================================================================
@@ -34,31 +28,19 @@ $base-font-size: 16px !default;
 /// 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;
 }
 
@@ -85,10 +67,7 @@ $base-font-size: 16px !default;
 }
 
 /// Convert em to pixels
-@function em_to_px(
-    $size,
-    $context: $base-font-size
-) {
+@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}`.";
@@ -97,10 +76,7 @@ $base-font-size: 16px !default;
 }
 
 /// Convert pixels to em
-@function px_to_em(
-    $size,
-    $context: $base-font-size
-) {
+@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

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Unit Functions Module
@@ -39,8 +35,7 @@
 ///
 @function unit_strip($value) {
     // Check if the input is a number with a unit
-    @if meta.type-of($value)=="number" and not math.is-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: meta.inspect($value);
@@ -54,9 +49,7 @@
 
         // 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;
@@ -80,14 +73,7 @@
 /// @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" {
         @error "Parameter `$min` must be unitless or in 'px'.";

package/scss/index.scss

@@ -1,5 +1,16 @@
+////
+///
+/// Unit.gl
+/// ===========================================================================
+///
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
 @charset "utf-8";
-
 @use "sass:math";
 
 @forward "reset";

package/scss/maps/_color.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Color Maps Module
@@ -33,7 +29,7 @@
 /// Color Set for Easy Adjustments
 /// ---------------------------------------------------------------------------
 ///
-$guide_colors: (
+$guide_color_map: (
     "primary": $guide_color_primary,
     "secondary": $guide_color_secondary,
     "tertiary": $guide_color_tertiary,