unit.gl 0.1.3 → 0.1.9

package/scss/maps/_ratio.scss

@@ -0,0 +1,76 @@
+////
+///
+/// Ratio Maps Module
+/// ===========================================================================
+///
+/// Defines a map of commonly used aspect ratios, used to generate both
+/// mixins and utility classes. Each key is a string representing the ratio,
+/// and each value is a 2-item list of width and height values.
+///
+/// @group Ratio
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+// ============================================================================
+// Maps
+// ============================================================================
+
+$ratio_map: (
+    1x1: (
+        1,
+        1
+    ),
+    1x2: (
+        1,
+        2
+    ),
+    2x1: (
+        2,
+        1
+    ),
+    1x3: (
+        1,
+        3
+    ),
+    3x1: (
+        3,
+        1
+    ),
+    1x4: (
+        1,
+        4
+    ),
+    4x1: (
+        4,
+        1
+    ),
+    3x2: (
+        3,
+        2
+    ),
+    2x3: (
+        2,
+        3
+    ),
+    4x3: (
+        4,
+        3
+    ),
+    3x4: (
+        3,
+        4
+    ),
+    16x9: (
+        16,
+        9
+    ),
+    16x10: (
+        16,
+        10
+    )
+) !default;

package/scss/maps/_scale.scss

@@ -0,0 +1,82 @@
+///
+/// Musical Scales Map
+/// ---------------------------------------------------------------------------
+///
+/// A map representing various musical scales by their degree.
+/// These scales can be used to inform design decisions, such as rhythm-based
+/// spacing or modular scale ratios in typography.
+///
+/// @name scale_musical
+/// @type Map
+///
+$scale_musical: (
+    "monotonic": 1,
+    // Single tone scale
+    "ditonic": 2,
+    // Two-tone scale
+    "tritonic": 3,
+    // Three-tone scale
+    "tetratonic": 4,
+    // Four-tone scale
+    "pentatonic": 5,
+    // Five-tone scale, commonly used in music
+    "hexatonic": 6,
+    // Six-tone scale
+    "peptatonic": 7,
+    // Seven-tone scale
+    "octatonic": 8,
+    // Eight-tone scale
+    "nonatonic": 9,
+    // Nine-tone scale
+    "dodecatonic": 12,
+    // Twelve-tone scale, covers all semitones in an octave
+) !default;
+
+/// Classic Typographic Scale
+/// ---------------------------------------------------------------------------
+///
+/// A classic typographic scale that has historical significance,
+/// often used in design software and by typographers since the Renaissance.
+/// This scale ensures harmonious and aesthetically pleasing text sizing.
+///
+/// @name typographic_scale_classic
+/// @type Map
+///
+$typographic_scale_classic: (
+    1: q(6),
+    // 6q
+    2: q(7),
+    // 7q  (+1)
+    3: q(8),
+    // 8q  (+1)
+    4: q(9),
+    // 9q  (+1)
+    5: q(10),
+    // 10q (+1)
+    6: q(11),
+    // 11q (+1)
+    7: q(12),
+    // 12q (+1)
+    8: q(14),
+    // 14q (+2)
+    9: q(16),
+    // 16q (+2)
+    10: q(18),
+    // 18q (+2)
+    11: q(21),
+    // 21q (+3)
+    12: q(24),
+    // 24q (+3)
+    13: q(36),
+    // 36q (+12)
+    14: q(48),
+    // 48q (+12)
+    15: q(60),
+    // 60q (+12)
+    16: q(72),
+    // 72q (+12)
+    17: q(84),
+    // 84q (+12)
+    18: q(96),
+    // 96q (+12)
+) !default;

package/scss/mixins/_device.scss

@@ -1,12 +1,15 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Device Mixins Module
 /// ===========================================================================
 ///
+/// @file _device.scss
+/// @title Device Mixins Module
+/// @version 0.1.0
+/// @description Provides responsive media query mixins based on device profiles.
+///              These mixins simplify writing device-specific styles using a
+///              centralized configuration map.
+///
 /// @group Device
 /// @author Scape Agency
 /// @link https://unit.gl
@@ -43,7 +46,7 @@
 ///
 @mixin device_media_query($device) {
     // Retrieve the device attributes from the $devices map
-    $attributes: map-get($devices, $device);
+    $attributes: map.get($devices, $device);
 
     // Validate that the device exists in the $devices map
     @if $attributes == null {
@@ -52,9 +55,9 @@
     }
 
     // Extract individual attributes with default fallbacks
-    $min-width: map-get($attributes, "min-width");
-    $max-width: map-get($attributes, "max-width");
-    $pixel-ratio: map-get($attributes, "pixel-ratio", 1); // Default to 1
+    $min-width: map.get($attributes, "min-width");
+    $max-width: map.get($attributes, "max-width");
+    $pixel-ratio: map.get($attributes, "pixel-ratio", 1); // Default to 1
 
     // Construct the media query string
     $media-query: "only screen";

package/scss/mixins/_display.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Display Mixins Module
@@ -35,16 +31,14 @@
 // ============================================================================
 
 ///
-/// Applies styles when the device is in landscape mode. An optional
-/// minimum width can be specified to target specific breakpoints.
+/// Applies styles in landscape orientation, optionally above a min-width.
 ///
-/// @name display-orientation-landscape
-/// @param {Length} $min-width (optional) - The minimum width at which the styles should apply.
+/// @param {Length|null} $min-width - Optional breakpoint to combine with orientation
 ///
-/// @example scss - Usage
-///     @include display-orientation-landscape(1024px) {
-///         // Styles for landscape orientation and min-width 1024px
-///     }
+/// @example scss
+///   @include display_orientation_landscape(1024px) {
+///     // styles for landscape on screens wider than 1024px
+///   }
 ///
 @mixin display_orientation_landscape($min-width: null) {
     @if $min-width {
@@ -53,26 +47,20 @@
         }
     } @else {
         @media (orientation: landscape) {
-            // The styles inside this mixin are applied in landscape mode
             @content;
         }
     }
 }
 
 ///
-/// Mixin for portrait orientation with optional breakpoint
-/// ---------------------------------------------------------------------------
+/// Applies styles in portrait orientation, optionally above a min-width.
 ///
-/// Applies styles when the device is in portrait mode. An optional
-/// minimum width can be specified to target specific breakpoints.
+/// @param {Length|null} $min-width - Optional breakpoint to combine with orientation
 ///
-/// @name display-orientation-portrait
-/// @param {Length} $min-width (optional) - The minimum width at which the styles should apply.
-///
-/// @example scss - Usage
-///     @include display-orientation-portrait(768px) {
-///         // Styles for portrait orientation and min-width 768px
-///     }
+/// @example scss
+///   @include display_orientation_portrait(768px) {
+///     // styles for portrait on screens wider than 768px
+///   }
 ///
 @mixin display_orientation_portrait($min-width: null) {
     @if $min-width {
@@ -87,60 +75,35 @@
 }
 
 ///
-/// Mixin for High-Density (Retina) Displays
-/// ---------------------------------------------------------------------------
-///
-/// Targets high-density displays, such as Retina screens, using various
-/// methods to ensure broad compatibility across devices.
-///
-/// @name display_retina
+/// Applies styles on high-density (Retina) displays.
+/// Targets modern and older syntax for broad support.
 ///
-/// @example scss - Usage
-///   @include display-retina {
-///     // Styles for high-density displays
+/// @example scss
+///   @include display_retina {
+///     // high-resolution styles
 ///   }
 ///
-// @mixin display_retina {
-//     // Webkit-based browsers
-//     @media only screen and (-webkit-min-device-pixel-ratio: 2),
-//         // Standard way to target high-resolution displays only screen and (min-resolution: 192dpi),
-//         // For devices with a high-resolution in dots per inch only screen and (min-resolution: 2dppx) {
-//         @content; // Styles for high-density displays
-//     }
-// }
+@mixin display_retina {
+    @media (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 192dpi),
+        (min-resolution: 2dppx) {
+        @content;
+    }
+}
 
 ///
-/// Mixin for targeting specific aspect ratios
-/// ---------------------------------------------------------------------------
+/// Applies styles when the screen matches a specific aspect ratio.
 ///
-/// Applies styles based on a specific aspect ratio. This mixin is
-/// useful for targeting devices or elements that have a particular
-/// aspect ratio, ensuring that your design adapts perfectly to
-/// screens of varying shapes and sizes.
+/// @param {Number} $width - The horizontal component of the aspect ratio
+/// @param {Number} $height - The vertical component of the aspect ratio
 ///
-/// @name display_ratio
-/// @param {Number} $width - The width component of the aspect ratio.
-/// @param {Number} $height - The height component of the aspect ratio.
-///
-/// @example scss - Basic Usage
-///   @include aspect_ratio(16, 9) {
-///     // Styles for devices with a 16:9 aspect ratio
-///     .video {
-///       max-width: 100%;
-///     }
+/// @example scss
+///   @include display_ratio(16, 9) {
+///     // styles for 16:9 screens
 ///   }
 ///
-/// @example scss - Complex Usage
-///   // Apply styles for both 16:9 and 4:3 aspect ratios
-///   @include aspect_ratio(16, 9), aspect_ratio(4, 3) {
-///     // Styles for devices with either a 16:9 or 4:3 aspect ratio
-///     .content {
-///       padding: 20px;
-///     }
-///   }
-///
-// @mixin display_ratio($width, $height) {
-//     @media (aspect-ratio: #{$width} / #{$height}) {
-//         @content;
-//     }
-// }
+@mixin display_ratio($width, $height) {
+    @media (aspect-ratio: #{ $width / $height }) {
+        @content;
+    }
+}

package/scss/mixins/_guide.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Guide Mixins Module
@@ -24,6 +20,9 @@
 // Use
 // ============================================================================
 
+@use "sass:map";
+@use "sass:meta";
+
 @use "../functions" as *;
 @use "../variables" as *;
 @use "../maps" as *;
@@ -47,18 +46,52 @@
 ///   }
 ///
 @mixin guide {
-    z-index: z("guides");
-    // @mixin guide($z-index: 9999) {
-    //     z-index: $z-index;
+    z-index: if(meta.function-exists("z"), z("guides"), 9999);
+    // z-index: z("guides");
     position: absolute;
+    // position: fixed;
     top: 0;
     left: 0;
+    // width: 100vw;
+    // height: 100vh;
     width: 100%;
     height: 100%;
     margin: 0;
     pointer-events: none;
-    opacity: 100%;
-    // background-size: $baseline_04 $baseline_04;
+    opacity: 1;
+
+    background-attachment: local;
+
+    &.is-hidden {
+        display: none !important;
+    }
+}
+
+///
+/// Centered Guide Mixin
+/// ---------------------------------------------------------------------------
+///
+/// Creates a centered guide box useful for ensuring elements are
+/// aligned to the center of the viewport.
+///
+/// @name guide_centered
+/// @param {Length} $width - The width of the centered guide box.
+/// @param {Length} $height - The height of the centered guide box.
+/// @param {Color} $color - The color of the guide box border. Defaults to red.
+///
+/// @example scss - Usage
+///   .guide_centered {
+///     @include guide_centered(100px, 100px, red);
+///   }
+///
+@mixin guide_centered($width, $height, $color: red) {
+    @include guide;
+    width: $width;
+    height: $height;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 2px solid $color;
 }
 
 ///
@@ -77,17 +110,103 @@
 ///         @include guide_graph(10px, #ccc);
 ///     }
 ///
-@mixin guide_graph($size, $color: $guide_color) {
+@mixin guide_graph(
+    $column_width: baseline(4),
+    $row_height: baseline(4),
+    $column_color: $guide_graph_primary,
+    $baseline_color: $guide_graph_primary
+) {
     @include guide;
-    background-size: $size $size;
+
+    background-repeat: repeat;
+    background-size: $column_width $row_height;
+
     background-image: repeating-linear-gradient(
+            to right,
+            $column_color 0,
+            $column_color 1px,
+            transparent 1px,
+            transparent $column_width
+        ),
+        repeating-linear-gradient(
             to bottom,
-            $color 0 1px,
-            transparent 1px 100%
+            $baseline_color 0,
+            $baseline_color 1px,
+            transparent 1px,
+            transparent $row_height
+        );
+}
+
+@mixin guide_graph_centered(
+    $columns: 12,
+    $column_width: baseline(4),
+    $row_height: baseline(4),
+    $column_color: $guide_graph_primary,
+    $baseline_color: $guide_graph_primary
+) {
+    @include guide;
+
+    background-repeat: repeat;
+    background-size: $column_width $row_height;
+
+    // Offset grid so center column lands in center of screen
+    $total_grid_width: $columns * $column_width;
+    $half_offset: calc(50% - (#{$total_grid_width} / 2));
+
+    background-position: $half_offset 0;
+
+    background-image: repeating-linear-gradient(
+            to right,
+            $column_color 0,
+            $column_color 1px,
+            transparent 1px,
+            transparent $column_width
         ),
-        repeating-linear-gradient(to right, $color 0 1px, transparent 1px 100%);
+        repeating-linear-gradient(
+            to bottom,
+            $baseline_color 0,
+            $baseline_color 1px,
+            transparent 1px,
+            transparent $row_height
+        );
 }
 
+// @mixin guide_graph_centered(
+//     $content_width: 200%,
+//     $column_width: baseline(4),
+//     $row_height: baseline(4),
+//     $column_color: $guide_graph_primary,
+//     $baseline_color: $guide_graph_primary
+// ) {
+//     @include guide;
+
+//     // Centered horizontal layout
+//     width: $content_width;
+//     max-width: none;
+//     left: 50%;
+//     transform: translateX(-50%);
+
+//     // Let JavaScript dynamically adjust full height
+//     min-height: 100vh;
+//     background-repeat: repeat;
+//     background-size: $column_width $row_height;
+
+//     background-image: repeating-linear-gradient(
+//             to right,
+//             $column_color 0,
+//             $column_color 1px,
+//             transparent 1px,
+//             transparent $column_width
+//         ),
+//         repeating-linear-gradient(
+//             to bottom,
+//             $baseline_color 0,
+//             $baseline_color 1px,
+//             transparent 1px,
+//             transparent $row_height
+//         );
+// }
+
 ///
 /// Guide Baseline Mixin
 /// ---------------------------------------------------------------------------
@@ -104,9 +223,11 @@
 ///     @include guide_baseline(20px, cyan);
 ///   }
 ///
-@mixin guide_baseline($size, $color: $guide_color) {
+@mixin guide_baseline($size: baseline(4), $color: $guide_baseline_primary) {
     @include guide;
+    background-repeat: repeat;
     background-size: 100% $size;
+
     background-image: repeating-linear-gradient(
         to bottom,
         $color 0 1px,
@@ -114,6 +235,20 @@
     );
 }
 
+// @mixin guide_baseline {
+//     @include guide;
+//     // background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
+//     // background: repeating-linear-gradient(transparent, transparent 20px, transparent 20px, transparent 25px);
+//     // background-repeat: repeat-y;
+//     background-repeat: repeat;
+
+//     background-size: map.get($baseline, 4) map.get($baseline, 4);
+//     @include guide;
+//     background-image: repeating-linear-gradient(
+//         cyan 0 1px,
+//         transparent 1px 100%
+//     );
+// }
 ///
 /// Baseline Grid Mixin
 /// ---------------------------------------------------------------------------
@@ -133,7 +268,7 @@
 ///     @include guide_baseline(60px, 20px);
 ///   }
 ///
-@mixin guide_baseline(
+@mixin grid_baseline(
     $column_width,
     $baseline_height,
     $column_color: rgba(200, 0, 0, 0.2),
@@ -154,33 +289,6 @@
         100% $baseline_height;
 }
 
-///
-/// Centered Guide Mixin
-/// ---------------------------------------------------------------------------
-///
-/// Creates a centered guide box useful for ensuring elements are
-/// aligned to the center of the viewport.
-///
-/// @name guide_centered
-/// @param {Length} $width - The width of the centered guide box.
-/// @param {Length} $height - The height of the centered guide box.
-/// @param {Color} $color - The color of the guide box border. Defaults to red.
-///
-/// @example scss - Usage
-///   .guide_centered {
-///     @include guide_centered(100px, 100px, red);
-///   }
-///
-@mixin guide_centered($width, $height, $color: red) {
-    @include guide;
-    width: $width;
-    height: $height;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: 2px solid $color;
-}
-
 ///
 /// Margin Guide Mixin
 /// ---------------------------------------------------------------------------

package/scss/mixins/_helper.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Helper Mixins Module
@@ -84,7 +80,7 @@
 ///     @include set_font-size(16px);
 ///   }
 ///
-@mixin set_font-size($value) {
+@mixin set_font_size($value) {
     @include q($value, font-size);
 }
 
@@ -116,7 +112,7 @@
 ///     @include set_letter-spacing(0.1em);
 ///   }
 ///
-@mixin set_letter-spacing($value) {
+@mixin set_letter_spacing($value) {
     @include q($value, letter-spacing);
 }
 

package/scss/mixins/_index.scss

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

package/scss/mixins/_paper.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Paper Mixins Module
@@ -46,9 +42,9 @@
 ///
 @mixin set_paper_size($size) {
     @if map-has-key($paper-sizes, $size) {
-        $size-map: map-get($paper-sizes, $size);
-        width: map-get($size-map, width);
-        height: map-get($size-map, height);
+        $size-map: map.get($paper-sizes, $size);
+        width: map.get($size-map, width);
+        height: map.get($size-map, height);
     } @else {
         @warn "Invalid paper size: #{$size}. Available sizes are: #{map-keys($paper-sizes)}.";
     }