unit.gl 0.1.3 → 0.1.9

package/scss/mixins/_ratio.scss

@@ -1,19 +1,24 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// 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.
+/// Provides mixins and utility classes for maintaining consistent aspect ratios
+/// across devices. Includes native CSS `aspect-ratio` support with a fallback
+/// using `padding-top` for broader browser compatibility.
+///
+/// Built from a shared `$ratio-map`, this module auto-generates both semantic
+/// mixins (e.g. `aspect_ratio_16x9`) and utility classes (e.g. `.ratio_16x9`).
+///
+/// @file _ratio.scss
+/// @title Ratio Mixins Module
+/// @version 0.1.0
+/// @description Provides utility mixins for maintaining consistent aspect ratios
+///              across devices. Supports modern `aspect-ratio` CSS as well as
+///              padding-based fallbacks for broader browser compatibility.
 ///
-/// There are two approaches provided: one using the `aspect-ratio` CSS
-/// property, and another using padding percentages for broader browser
-/// support.
+///              Includes predefined common ratios (e.g., 1:1, 16:9) as mixins and
+///              utility classes, enabling both declarative and semantic usage.
 ///
 /// @group Ratio
 /// @author Scape Agency
@@ -28,6 +33,8 @@
 // Use
 // ============================================================================
 
+@use "sass:math";
+
 @use "../functions" as *;
 @use "../variables" as *;
 @use "../maps" as *;
@@ -36,249 +43,83 @@
 // Mixins
 // ============================================================================
 
-// Aspect Ratio Box:
-// Creates a container with a specific aspect ratio.
-// @mixin aspect-ratio($width, $height) {
-//   position: relative;
-//   &:before {
-//       content: "";
-//       display: block;
-//       padding-top: calc(($height / $width) * 100%);
-//   }
-//   > * {
-//       position: absolute;
-//       top: 0;
-//       left: 0;
-//       right: 0;
-//       bottom: 0;
-//   }
-// }
-
-// .ratio-box {
-//   @include aspect-ratio(16, 9);
-// }
-
-@mixin ratio($val01, $val02) {
-    aspect-ratio: calc($val01 / $val02);
-    width: 100%;
+///
+/// @mixin aspect_ratio
+/// Creates a responsive container that maintains a specific aspect ratio.
+/// Uses the native `aspect-ratio` property where supported,
+/// with a `padding-top` fallback for broader browser compatibility.
+///
+/// @param {Number} $width - The horizontal component of the aspect ratio.
+/// @param {Number} $height - The vertical component of the aspect ratio.
+///
+/// @example scss - 16:9 container
+///   .video-wrapper {
+///     @include aspect_ratio(16, 9);
+///   }
+///
+@mixin aspect_ratio($width, $height) {
     position: relative;
-    overflow: hidden;
-    display: inline-block;
-    // 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) {
-    padding-bottom: $val01;
     width: 100%;
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
-    // vertical-align: top;
+    aspect-ratio: math.div($width, $height); // Native CSS support
+
+    // Fallback for legacy browsers
+    &::before {
+        content: "";
+        display: block;
+        padding-top: calc((#{$height} / #{$width}) * 100%);
+    }
+
+    > * {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
-@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%);
-}
+// ============================================================================
+// Semantic Mixins
+// ============================================================================
 
-.ratio_p_1x1 {
-    @include ratio_p_1x1;
+@mixin aspect_ratio_1x1 {
+    @include aspect_ratio(1, 1);
 }
-.ratio_p_1x2 {
-    @include ratio_p_1x2;
+@mixin aspect_ratio_1x2 {
+    @include aspect_ratio(1, 2);
 }
-.ratio_p_2x1 {
-    @include ratio_p_2x1;
+@mixin aspect_ratio_2x1 {
+    @include aspect_ratio(2, 1);
 }
-.ratio_p_1x3 {
-    @include ratio_p_1x3;
+@mixin aspect_ratio_1x3 {
+    @include aspect_ratio(1, 3);
 }
-.ratio_p_3x1 {
-    @include ratio_p_3x1;
+@mixin aspect_ratio_3x1 {
+    @include aspect_ratio(3, 1);
 }
-.ratio_p_1x4 {
-    @include ratio_p_1x4;
+@mixin aspect_ratio_1x4 {
+    @include aspect_ratio(1, 4);
 }
-.ratio_p_4x1 {
-    @include ratio_p_4x1;
+@mixin aspect_ratio_4x1 {
+    @include aspect_ratio(4, 1);
 }
-.ratio_p_3x2 {
-    @include ratio_p_3x2;
+@mixin aspect_ratio_3x2 {
+    @include aspect_ratio(3, 2);
 }
-.ratio_p_2x3 {
-    @include ratio_p_2x3;
+@mixin aspect_ratio_2x3 {
+    @include aspect_ratio(2, 3);
 }
-.ratio_p_4x3 {
-    @include ratio_p_4x3;
+@mixin aspect_ratio_4x3 {
+    @include aspect_ratio(4, 3);
 }
-.ratio_p_3x4 {
-    @include ratio_p_3x4;
+@mixin aspect_ratio_3x4 {
+    @include aspect_ratio(3, 4);
 }
-.ratio_p_16x9 {
-    @include ratio_p_16x9;
+@mixin aspect_ratio_16x9 {
+    @include aspect_ratio(16, 9);
 }
-.ratio_p_16x10 {
-    @include ratio_p_16x10;
+@mixin aspect_ratio_16x10 {
+    @include aspect_ratio(16, 10);
 }
-
-// https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-// .ratio {
-//     position: relative;
-//     width: 100%;
-
-//     &::before {
-//         display: block;
-//         padding-top: var(--#{$prefix}aspect-ratio);
-//         content: "";
-//     }
-
-//     > * {
-//         position: absolute;
-//         top: 0;
-//         left: 0;
-//         width: 100%;
-//         height: 100%;
-//     }
-// }
-
-// @each $key, $ratio in $aspect-ratios {
-//     .ratio-#{$key} {
-//         --#{$prefix}aspect-ratio: #{$ratio};
-//     }
-// }
-
-// @mixin aspect-ratio($width, $height) {
-//     position: relative;
-
-//     &::before {
-//         display: block;
-//         content: "";
-//         width: 100%;
-//         padding-top: calc((#{$height} / #{$width}) * 100%);
-//     }
-
-//     > * {
-//         position: absolute;
-//         top: 0;
-//         right: 0;
-//         bottom: 0;
-//         left: 0;
-//     }
-// }

package/scss/mixins/_unit.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Device Mixins Module
@@ -61,12 +57,7 @@
 ///     @include fluid_type(320px, 1440px, 1rem, 2rem);
 ///   }
 ///
-@mixin fluid_type(
-    $min_vw,
-    $max_vw,
-    $min_font_size,
-    $max_font_size,
-) {
+@mixin fluid_type($min_vw, $max_vw, $min_font_size, $max_font_size) {
     // $u1: unit($min_vw);
     // $u2: unit($max_vw);
     // $u3: unit($min_font_size);

package/scss/mixins/_view.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// View Mixins Module
@@ -48,7 +44,7 @@
 ///
 @mixin breakpoint($size) {
     @if map-has-key($breakpoints, $size) {
-        @media (min-width: map-get($breakpoints, $size)) {
+        @media (min-width: map.get($breakpoints, $size)) {
             @content;
         }
     } @else {

package/scss/tags/_index.scss

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

package/scss/tags/_unit.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Ratio Class Module

package/scss/variables/_color.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Color Variables Module
@@ -20,7 +16,6 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -29,9 +24,14 @@
 // Variables
 // ============================================================================
 
-$guide_color: rgba(50, 50, 50, 0.25);
-$guide_color_2: rgba(178, 51, 170, 0.5);
+$guide_baseline_primary: rgb(0, 200, 255);
+$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);
 ///
 /// Primary Guide Color
 /// ---------------------------------------------------------------------------

package/scss/variables/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Variables Module
@@ -31,68 +27,38 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Forward
 // ============================================================================
 
-
-///
-/// Forwards variables related to layout layers and z-indexing, ensuring
-/// consistent layering and stacking order throughout the project.
-///
-@forward "layer";  // Layout layers and z-index variables
-
-
-///
-/// Forwards variables defining paper sizes etc.
-///
-@forward "paper";
-
-
 ///
 /// Forwards variables managing scaling factors for typography and responsive
 /// elements, ensuring that elements scale proportionally across different
 /// viewports.
 ///
-@forward "scale";  // Typography scaling and responsive element sizing
-
+@forward "scale"; // Typography scaling and responsive element sizing
 
 ///
 /// Forwards viewport-specific variables, such as breakpoints, to facilitate
 /// responsive design practices.
 ///
-@forward "view";  // Viewport-specific variables and breakpoints
-
-
-///
-/// Forwards device-specific configurations that aid in creating responsive
-/// designs tailored to various devices.
-///
-@forward "device";  // Device-specific responsive design variables
-
+@forward "view"; // Viewport-specific variables and breakpoints
 
 ///
 /// Forwards centralized color definitions, providing a consistent color scheme
 /// across the project.
 ///
-@forward "color";  // Centralized color definitions for the project
-
-
-///
-/// Forwards aspect ratio configurations that ensure responsive elements
-/// maintain their intended proportions across different devices and viewports.
-///
-@forward "ratio";  // Aspect ratio configurations for responsive elements
+@forward "color"; // Centralized color definitions for the project
 
 ///
 /// Forwards variables related to measurement units, spacing, and size
 /// definitions. Useful for maintaining consistent sizing across different
 /// components.
 ///
-@forward "unit";  // Measurement units and spacing
+@forward "unit"; // Measurement units and spacing
+
+@forward "guide";

package/scss/variables/_scale.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Scale Variables Module
@@ -22,7 +18,6 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -125,7 +120,8 @@ $typographic_scale: (
     // +8 units
     16: q(64),
     // +8 units
-    17: q(72), // +8 units
+    17: q(72),
+    // +8 units
 ) !default;
 
 ///
@@ -168,7 +164,7 @@ $basepoint: (
     9: basepoint(9),
     10: basepoint(10),
     11: basepoint(11),
-    12: basepoint(12),
+    12: basepoint(12)
 ) !default;
 
 ///
@@ -213,86 +209,5 @@ $baseline: (
     9: baseline(9),
     10: baseline(10),
     11: baseline(11),
-    12: baseline(12),
-) !default;
-
-///
-/// 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)
+    12: baseline(12)
 ) !default;

package/scss/variables/_unit.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Unit Variables Module
@@ -25,7 +21,6 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -60,6 +55,7 @@ $q_min: 0.75px !default;
 ///
 /// @type Length
 /// @name $q_max
+///
 $q_max: 1.5px !default;
 
 ///
@@ -77,6 +73,7 @@ $font_min: calc((1rem / $q) * $q_min) !default;
 ///
 /// @type Length
 /// @name $font_max
+///
 $font_max: calc((1rem / $q) * $q_max) !default;
 
 ///