unit.gl 0.1.13 → 0.3.1

package/scss/mixins/_utilities.scss

@@ -0,0 +1,303 @@
+////
+///
+/// Utilities Mixin Module
+/// ===========================================================================
+///
+/// Mixins for generating granular utility classes based on q() units.
+/// These mixins provide a systematic way to generate spacing, sizing,
+/// positioning, and border utility classes using the curated q_steps scale.
+///
+/// @group Mixins
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:map";
+@use "sass:list";
+@use "../maps" as maps;
+@use "../variables" as variables;
+
+// ============================================================================
+// Mixin: Padding Utilities
+// ============================================================================
+
+/// Generate padding utility classes
+/// @mixin padding-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @param {List} $breakpoints - Optional breakpoints for responsive variants
+/// @example
+///   @include padding-utilities($q_steps);
+///   @include padding-utilities($q_steps, (md, lg));
+///
+@mixin padding-utilities($steps: maps.$q_steps, $breakpoints: null) {
+    @each $key, $value in $steps {
+        .p_q#{$key} {
+            padding: variables.q($value);
+        }
+        .pt_q#{$key} {
+            padding-top: variables.q($value);
+        }
+        .pr_q#{$key} {
+            padding-right: variables.q($value);
+        }
+        .pb_q#{$key} {
+            padding-bottom: variables.q($value);
+        }
+        .pl_q#{$key} {
+            padding-left: variables.q($value);
+        }
+        .px_q#{$key} {
+            padding-left: variables.q($value);
+            padding-right: variables.q($value);
+        }
+        .py_q#{$key} {
+            padding-top: variables.q($value);
+            padding-bottom: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Margin Utilities
+// ============================================================================
+
+/// Generate margin utility classes
+/// @mixin margin-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @param {List} $breakpoints - Optional breakpoints for responsive variants
+/// @example
+///   @include margin-utilities($q_steps);
+///   @include margin-utilities($q_steps, (md, lg));
+///
+@mixin margin-utilities($steps: maps.$q_steps, $breakpoints: null) {
+    @each $key, $value in $steps {
+        .m_q#{$key} {
+            margin: variables.q($value);
+        }
+        .mt_q#{$key} {
+            margin-top: variables.q($value);
+        }
+        .mr_q#{$key} {
+            margin-right: variables.q($value);
+        }
+        .mb_q#{$key} {
+            margin-bottom: variables.q($value);
+        }
+        .ml_q#{$key} {
+            margin-left: variables.q($value);
+        }
+        .mx_q#{$key} {
+            margin-left: variables.q($value);
+            margin-right: variables.q($value);
+        }
+        .my_q#{$key} {
+            margin-top: variables.q($value);
+            margin-bottom: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Gap Utilities
+// ============================================================================
+
+/// Generate gap utility classes for grid/flex
+/// @mixin gap-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include gap-utilities($q_steps);
+///
+@mixin gap-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .gap_q#{$key} {
+            gap: variables.q($value);
+        }
+        .gap_col_q#{$key} {
+            column-gap: variables.q($value);
+        }
+        .gap_row_q#{$key} {
+            row-gap: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Width Utilities
+// ============================================================================
+
+/// Generate width utility classes
+/// @mixin width-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include width-utilities($q_steps);
+///
+@mixin width-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .w_q#{$key} {
+            width: variables.q($value);
+        }
+        .min_w_q#{$key} {
+            min-width: variables.q($value);
+        }
+        .max_w_q#{$key} {
+            max-width: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Height Utilities
+// ============================================================================
+
+/// Generate height utility classes
+/// @mixin height-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include height-utilities($q_steps);
+///
+@mixin height-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .h_q#{$key} {
+            height: variables.q($value);
+        }
+        .min_h_q#{$key} {
+            min-height: variables.q($value);
+        }
+        .max_h_q#{$key} {
+            max-height: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Inset Utilities (Positioning)
+// ============================================================================
+
+/// Generate inset (top/right/bottom/left) utility classes
+/// @mixin inset-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include inset-utilities($q_steps);
+///
+@mixin inset-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .inset_q#{$key} {
+            top: variables.q($value);
+            right: variables.q($value);
+            bottom: variables.q($value);
+            left: variables.q($value);
+        }
+        .top_q#{$key} {
+            top: variables.q($value);
+        }
+        .right_q#{$key} {
+            right: variables.q($value);
+        }
+        .bottom_q#{$key} {
+            bottom: variables.q($value);
+        }
+        .left_q#{$key} {
+            left: variables.q($value);
+        }
+        .inset_x_q#{$key} {
+            left: variables.q($value);
+            right: variables.q($value);
+        }
+        .inset_y_q#{$key} {
+            top: variables.q($value);
+            bottom: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Border Width Utilities
+// ============================================================================
+
+/// Generate border-width utility classes
+/// @mixin border-width-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include border-width-utilities($q_steps);
+///
+@mixin border-width-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .border_q#{$key} {
+            border-width: variables.q($value);
+        }
+        .border_t_q#{$key} {
+            border-top-width: variables.q($value);
+        }
+        .border_r_q#{$key} {
+            border-right-width: variables.q($value);
+        }
+        .border_b_q#{$key} {
+            border-bottom-width: variables.q($value);
+        }
+        .border_l_q#{$key} {
+            border-left-width: variables.q($value);
+        }
+        .border_x_q#{$key} {
+            border-left-width: variables.q($value);
+            border-right-width: variables.q($value);
+        }
+        .border_y_q#{$key} {
+            border-top-width: variables.q($value);
+            border-bottom-width: variables.q($value);
+        }
+    }
+}
+
+// ============================================================================
+// Mixin: Border Radius Utilities
+// ============================================================================
+
+/// Generate border-radius utility classes
+/// @mixin border-radius-utilities
+/// @param {Map} $steps - Map of step name to multiplier value
+/// @example
+///   @include border-radius-utilities($q_steps);
+///
+@mixin border-radius-utilities($steps: maps.$q_steps) {
+    @each $key, $value in $steps {
+        .rounded_q#{$key} {
+            border-radius: variables.q($value);
+        }
+        .rounded_t_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-top-right-radius: variables.q($value);
+        }
+        .rounded_r_q#{$key} {
+            border-top-right-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .rounded_b_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+            border-bottom-right-radius: variables.q($value);
+        }
+        .rounded_l_q#{$key} {
+            border-top-left-radius: variables.q($value);
+            border-bottom-left-radius: variables.q($value);
+        }
+        .rounded_tl_q#{$key} {
+            border-top-left-radius: variables.q($value);
+        }
+        .rounded_tr_q#{$key} {
+            border-top-right-radius: variables.q($value);
+        }
+        .rounded_br_q#{$key} {
+            border-bottom-right-radius: variables.q($value);
+        }
+        .rounded_bl_q#{$key} {
+            border-bottom-left-radius: variables.q($value);
+        }
+    }
+}

package/scss/mixins/_view.scss

@@ -21,6 +21,7 @@
 // ============================================================================
 // Use
 // ============================================================================
+@use "sass:map";
 
 @use "../variables" as *;
 
@@ -43,7 +44,7 @@
 ///   }
 ///
 @mixin breakpoint($size) {
-    @if map-has-key($breakpoints, $size) {
+    @if map.has-key($breakpoints, $size) {
         @media (min-width: map.get($breakpoints, $size)) {
             @content;
         }
@@ -53,7 +54,37 @@
 }
 
 ///
-/// Applies styles for extra-small devices and up (min-width: 320px).
+/// Applies styles for ultra-small devices and up (min-width: 240px).
+///
+/// @name media_us
+/// @example scss - Usage
+///     @include media_us {
+///         // Styles for ultra-small devices and up
+///     }
+///
+@mixin media_us {
+    @media (min-width: $media_us) {
+        @content;
+    }
+}
+
+///
+/// Applies styles for super-small devices and up (min-width: 360px).
+///
+/// @name media_ss
+/// @example scss - Usage
+///     @include media_ss {
+///         // Styles for super-small devices and up
+///     }
+///
+@mixin media_ss {
+    @media (min-width: $media_ss) {
+        @content;
+    }
+}
+
+///
+/// Applies styles for extra-small devices and up (min-width: 540px).
 ///
 /// @name media_xs
 /// @example scss - Usage
@@ -68,7 +99,7 @@
 }
 
 ///
-/// Applies styles for small devices and up (min-width: 480px).
+/// Applies styles for small devices and up (min-width: 720px).
 ///
 /// @name media_sm
 /// @example scss - Usage
@@ -83,7 +114,7 @@
 }
 
 ///
-/// Applies styles for medium devices and up (min-width: 768px).
+/// Applies styles for medium devices and up (min-width: 1440px).
 ///
 /// @name media_md
 ///
@@ -99,7 +130,7 @@
 }
 
 ///
-/// Applies styles for large devices and up (min-width: 1024px).
+/// Applies styles for large devices and up (min-width: 2160px).
 ///
 /// @name media_lg
 ///
@@ -115,7 +146,7 @@
 }
 
 ///
-/// Applies styles for extra-large devices and up (min-width: 1280px).
+/// Applies styles for extra-large devices and up (min-width: 2880px).
 ///
 /// @name media_xl
 ///
@@ -131,17 +162,17 @@
 }
 
 ///
-/// Applies styles for super-large devices and up (min-width: 1440px).
+/// Applies styles for ultra-large devices and up (min-width: 4320px).
 ///
-/// @name media_sl
+/// @name media_ul
 ///
 /// @example scss - Usage
-///   @include media_sl {
-///     // Styles for super-large devices and up
+///   @include media_ul {
+///     // Styles for ultra-large devices and up
 ///   }
 ///
-@mixin media_sl {
-    @media (min-width: $media_sl) {
+@mixin media_ul {
+    @media (min-width: $media_ul) {
         @content;
     }
 }

package/scss/tags/_global.scss

@@ -1,3 +1,21 @@
+////
+///
+/// Global Tags Module
+/// =========================================================================
+///
+/// Base element resets and global defaults for `html`, `body`, and
+/// universal selectors. Provides consistent box-sizing, text adjustments,
+/// and baseline resets that apply across the application.
+///
+/// @group Tags
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
 // Base | Body
 // ============================================================================
 
@@ -16,9 +34,6 @@ html {
 body {
     min-height: 100%;
     margin: 0;
-    position: absolute;
-    height: 100vh;
-    width: 100vw;
 }
 
 html,

package/scss/tags/_unit.scss

@@ -12,7 +12,6 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -20,12 +19,11 @@
 @use "../variables" as *;
 @use "../mixins" as *;
 
-
 // ============================================================================
 // Classes
 // ============================================================================
 
 // Example usage of fluid typography for the html element
 html {
-    @include fluid_type($media_xs, $media_sl, $font_min, $font_max);
+    @include fluid_type($media_ss, $media_ul, $font_min, $font_max);
 }

package/scss/test.scss

@@ -0,0 +1,17 @@
+////
+///
+/// Test Styles Module
+/// =========================================================================
+///
+/// Placeholder for ad-hoc style tests and experiments. Not included in
+/// production builds; used locally to validate mixins, functions, and
+/// variables during development.
+///
+/// @group Dev
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo Replace with targeted component/style demos when needed
+/// @access private
+///
+////

package/scss/utilities.scss

@@ -0,0 +1,20 @@
+////
+///
+/// unit.gl/utilities
+/// ===========================================================================
+///
+/// Modular entrypoint for utility class generation.
+/// Use this when you only need the Tailwind-like q() utility classes.
+///
+/// @example scss - Usage
+///   @use "unit.gl/utilities";
+///
+/// @group Utilities
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.3.0
+/// @access public
+///
+////
+
+@forward "classes/utilities";

package/scss/variables/_color.scss

@@ -19,6 +19,7 @@
 // ============================================================================
 // Use
 // ============================================================================
+@use "sass:color";
 
 // ============================================================================
 // Variables
@@ -29,10 +30,9 @@ $guide--baseline_secondary: rgb(125, 181, 203);
 
 $guide--color: rgb(0, 200, 255);
 
-$guide--graph_primary: rgba(111, 124, 126, 0.483);
-
-$guide--bleed_primary: rgba(178, 51, 170, 0.5);
+$guide--graph_primary: color.change(rgb(111, 124, 126), $alpha: 0.483);
 
+$guide--bleed_primary: color.change(rgb(178, 51, 170), $alpha: 0.5);
 
 ///
 /// Primary Guide Color
@@ -40,7 +40,7 @@ $guide--bleed_primary: rgba(178, 51, 170, 0.5);
 ///
 /// Neutral gray for general guide overlays
 ///
-$guide--color_primary: rgba(50, 50, 50, 0.25);
+$guide--color_primary: color.change(rgb(50, 50, 50), $alpha: 0.25);
 
 ///
 /// Secondary Guide Color
@@ -48,7 +48,7 @@ $guide--color_primary: rgba(50, 50, 50, 0.25);
 ///
 /// Highlight color for key guides or emphasis
 ///
-$guide--color_secondary: rgba(178, 51, 170, 0.5);
+$guide--color_secondary: color.change(rgb(178, 51, 170), $alpha: 0.5);
 
 ///
 /// Tertiary Guide Color (Extended)
@@ -56,7 +56,7 @@ $guide--color_secondary: rgba(178, 51, 170, 0.5);
 ///
 /// A warm orange for alternate guide markings
 ///
-$guide--color_tertiary: rgba(255, 102, 0, 0.3);
+$guide--color_tertiary: color.change(rgb(255, 102, 0), $alpha: 0.3);
 
 ///
 /// Quaternary Guide Color (Extended)
@@ -64,7 +64,7 @@ $guide--color_tertiary: rgba(255, 102, 0, 0.3);
 ///
 /// A cool blue for additional grid or alignment lines
 ///
-$guide--color_quaternary: rgba(0, 102, 255, 0.3);
+$guide--color_quaternary: color.change(rgb(0, 102, 255), $alpha: 0.3);
 
 ///
 /// Light Guide Color (Extended)
@@ -72,7 +72,7 @@ $guide--color_quaternary: rgba(0, 102, 255, 0.3);
 ///
 /// Light color for subtle or background guides
 ///
-$guide--color_light: rgba(255, 255, 255, 0.2);
+$guide--color_light: color.change(rgb(255, 255, 255), $alpha: 0.2);
 
 ///
 /// Dark Guide Color (Extended)
@@ -80,4 +80,4 @@ $guide--color_light: rgba(255, 255, 255, 0.2);
 ///
 /// Dark color for use on lighter backgrounds
 ///
-$guide--color_dark: rgba(0, 0, 0, 0.2);
+$guide--color_dark: color.change(rgb(0, 0, 0), $alpha: 0.2);

package/scss/variables/_format.scss

@@ -0,0 +1,80 @@
+////
+///
+/// Format Variables
+/// ===========================================================================
+///
+/// A curated, user-extensible page/print format map.
+///
+/// Users can extend formats via Sass module configuration:
+///   @use "unit.gl" with (
+///     $format_overrides: (
+///       "my-format": (100mm, 200mm)
+///     )
+///   );
+///
+/// @group Format
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.3.0
+/// @access public
+///
+////
+
+@use "sass:map";
+
+///
+/// Format map.
+///
+/// Keys are lowercase strings (e.g. "a4", "letter", "q00", "q00+", "q10").
+/// Values are 2-item lists: (width, height) in any CSS length units.
+///
+/// Q-series values are based on the resources in `res/`.
+///
+$format_defaults: (
+    // ISO A series (portrait)
+    "a0": (841mm, 1189mm),
+    "a1": (594mm, 841mm),
+    "a2": (420mm, 594mm),
+    "a3": (297mm, 420mm),
+    "a4": (210mm, 297mm),
+    "a5": (148mm, 210mm),
+    "a6": (105mm, 148mm),
+    // US common sizes (portrait)
+    "letter": (216mm, 279mm),
+    "legal": (216mm, 356mm),
+    "tabloid": (279mm, 432mm),
+    // Q series (portrait) — Q00..Q12
+    // (width, height) in millimeters
+    "q00": (720mm, 1080mm),
+    "q0": (720mm, 1080mm),
+    "q01": (540mm, 720mm),
+    "q1": (540mm, 720mm),
+    "q02": (360mm, 540mm),
+    "q2": (360mm, 540mm),
+    "q03": (270mm, 360mm),
+    "q3": (270mm, 360mm),
+    "q04": (180mm, 270mm),
+    "q4": (180mm, 270mm),
+    "q05": (135mm, 180mm),
+    "q5": (135mm, 180mm),
+    "q06": (90mm, 135mm),
+    "q6": (90mm, 135mm),
+    "q07": (62.5mm, 90mm),
+    "q7": (62.5mm, 90mm),
+    "q08": (45mm, 62.5mm),
+    "q8": (45mm, 62.5mm),
+    "q09": (31.25mm, 45mm),
+    "q9": (31.25mm, 45mm),
+    "q10": (22.5mm, 31.25mm),
+    "q11": (15.625mm, 22.5mm),
+    "q12": (11.25mm, 15.625mm),
+    // Q00 variants
+    "q00+": (1080mm, 1440mm),
+    "q00++": (1440mm, 2160mm)
+);
+
+/// User overrides/extensions for $format_defaults.
+$format_overrides: () !default;
+
+/// Final, user-extensible format map.
+$format_map: map.merge($format_defaults, $format_overrides) !default;

package/scss/variables/_guide.scss

@@ -0,0 +1,17 @@
+////
+///
+/// Guide Variables Module
+/// =========================================================================
+///
+/// Reserved for variables related to visual guides (grid overlays,
+/// baselines, alignment helpers). Centralizing guide-specific variables
+/// here keeps concerns separated from general color or layout variables.
+///
+/// @group Variables
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo Populate with guide-specific tokens as they are formalized
+/// @access public
+///
+////

package/scss/variables/_index.scss

@@ -61,6 +61,10 @@
 ///
 @forward "unit"; // Measurement units and spacing
 
+///
+/// Forwards page/print formats used by the `format()` mixin.
+///
+@forward "format";
 
 //////
 /// Forwards variables that define layout layers and z-indexing to manage the