unit.gl 0.1.3 → 0.1.9

package/scss/{variables → maps}/_device.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Device Variables Module
@@ -20,13 +16,12 @@
 /// @access public
 ///
 /// @example scss - Usage Example
-///   @media (min-width: map-get($devices, "iphone-x")["min-width"]) {
+///   @media (min-width: map.get($devices, "iphone_x")["min-width"]) {
 ///       // Styles specific to iPhone X
 ///   }
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -54,125 +49,130 @@
 /// @property iPhones - iPhones with varying screen sizes and pixel densities.
 ///
 /// @example scss - Usage Example
-///     @media (min-width: map-get($devices, "iphone-x")["min-width"]) {
+///     @media (min-width: map.get($devices, "iphone_x")["min-width"]) {
 ///         // Styles specific to iPhone X
 ///     }
 ///
-$devices: (
+$device_map: (
     // Phones
     // ========================================================================
     // iPhones
     // ------------------------------------------------------------------------
     /// iPhones
     /// iPhones with varying screen sizes and pixel densities.
-    "iphone-5": (
+    "iphone_5":
+        (
             "min-width": 320px,
             "max-width": 568px,
-            "pixel-ratio": 2,
+            "pixel-ratio": 2
         ),
-    "iphone-6": (
+    "iphone_6": (
         "min-width": 375px,
         "max-width": 667px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "iphone-7": (
+    "iphone_7": (
         "min-width": 375px,
         "max-width": 667px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "iphone-8": (
+    "iphone_8": (
         "min-width": 375px,
         "max-width": 667px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "iphone-x": (
+    "iphone_x": (
         "min-width": 375px,
         "max-width": 812px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
-    "iphone-11": (
+    "iphone_11": (
         "min-width": 414px,
         "max-width": 896px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "iphone-12": (
+    "iphone_12": (
         "min-width": 390px,
         "max-width": 844px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
-    "iphone-13": (
+    "iphone_13": (
         "min-width": 428px,
         "max-width": 926px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
     // Samsung Galaxy
     // ------------------------------------------------------------------------
     /// iPhones
     /// iPhones with varying screen sizes and pixel densities.
-    "samsung-s10": (
+    "samsung_s10":
+        (
             "min-width": 360px,
             "max-width": 760px,
-            "pixel-ratio": 3,
+            "pixel-ratio": 3
         ),
-    "samsung-s20": (
+    "samsung_s20": (
         "min-width": 320px,
         "max-width": 720px,
-        "pixel-ratio": 4,
+        "pixel-ratio": 4
     ),
-    "samsung-s21": (
+    "samsung_s21": (
         "min-width": 320px,
         "max-width": 780px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
     // Samsung Galaxy Fold
     // ------------------------------------------------------------------------
     /// Samsung Galaxy Fold
     /// Samsung Galaxy Fold devices with foldable screens.
-    "galaxy-fold": (
+    "galaxy_fold":
+        (
             "min-width": 280px,
             "max-width": 653px,
-            "pixel-ratio": 3,
+            "pixel-ratio": 3
         ),
     // Google Pixel
     // ------------------------------------------------------------------------
     /// Google Pixel
     /// Google Pixel devices with varying screen sizes and pixel densities.
-    "google-pixel": (
+    "google_pixel":
+        (
             "min-width": 411px,
             "max-width": 731px,
-            "pixel-ratio": 2.6,
+            "pixel-ratio": 2.6
         ),
-    "google-pixel-5": (
+    "google_pixel_5": (
         "min-width": 393px,
         "max-width": 851px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
     /// Other Smartphones
     /// Other popular smartphones with varying screen sizes and pixel densities.
-    "lg-g6": (
+    "lg_g6":
+        (
             "min-width": 360px,
             "max-width": 720px,
-            "pixel-ratio": 4,
+            "pixel-ratio": 4
         ),
-    "oneplus-7t": (
+    "oneplus_7t": (
         "min-width": 412px,
         "max-width": 732px,
-        "pixel-ratio": 2.5,
+        "pixel-ratio": 2.5
     ),
-    "sony-xperia-1": (
+    "sony_xperia_1": (
         "min-width": 384px,
         "max-width": 643px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
-    "huawei-p30": (
+    "huawei_p30": (
         "min-width": 360px,
         "max-width": 780px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
-    "xiaomi-mi9": (
+    "xiaomi_mi9": (
         "min-width": 393px,
         "max-width": 851px,
-        "pixel-ratio": 3,
+        "pixel-ratio": 3
     ),
     // Tablets
     // ========================================================================
@@ -180,39 +180,41 @@ $devices: (
     // ------------------------------------------------------------------------
     /// iPads
     /// Various models of Apple"s iPad, including iPad, iPad Pro, iPad Mini, and iPad Air.
-    "ipad": (
+    "ipad":
+        (
             "min-width": 768px,
             "max-width": 1024px,
-            "pixel-ratio": 2,
+            "pixel-ratio": 2
         ),
-    "ipad-pro": (
+    "ipad_pro": (
         "min-width": 1024px,
         "max-width": 1366px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "ipad-mini": (
+    "ipad_mini": (
         "min-width": 768px,
         "max-width": 1024px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "ipad-air": (
+    "ipad_air": (
         "min-width": 820px,
         "max-width": 1180px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
     // Microsoft Surface
     // ------------------------------------------------------------------------
     /// Microsoft Surface
     /// Microsoft"s Surface devices, including Surface Duo and Surface Pro.
-    "surface-duo": (
+    "surface_duo":
+        (
             "min-width": 540px,
             "max-width": 720px,
-            "pixel-ratio": 2.5,
+            "pixel-ratio": 2.5
         ),
-    "surface-pro": (
+    "surface_pro": (
         "min-width": 768px,
         "max-width": 1366px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
     // Desktops & Laptops
     // ========================================================================
@@ -220,34 +222,36 @@ $devices: (
     // ------------------------------------------------------------------------
     /// Desktops & Larger Tablets
     /// Larger devices like desktops and large tablets.
-    "amazon-fire-hd": (
+    "amazon-fire-hd":
+        (
             "min-width": 800px,
             "max-width": 1280px,
-            "pixel-ratio": 1.5,
+            "pixel-ratio": 1.5
         ),
-    "microsoft-laptop": (
+    "microsoft_laptop": (
         "min-width": 1504px,
         "max-width": 2256px,
-        "pixel-ratio": 1.5,
+        "pixel-ratio": 1.5
     ),
     // Mac Devices
     // ------------------------------------------------------------------------
     /// Mac Devices
     /// Various Apple Mac devices, including MacBook Air, MacBook Pro, and iMac.
-    "macbook-air": (
+    "macbook_air":
+        (
             "min-width": 1440px,
             "max-width": 2560px,
-            "pixel-ratio": 2,
+            "pixel-ratio": 2
         ),
-    "macbook-pro": (
+    "macbook_pro": (
         "min-width": 1680px,
         "max-width": 3072px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
     "imac": (
         "min-width": 1920px,
         "max-width": 5120px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
 
     // Additional Devices
@@ -255,19 +259,20 @@ $devices: (
     /// Other Laptops
     /// Other popular laptops, including Surface Book, Dell XPS,
     /// and Lenovo ThinkPad.
-    "surface-book": (
+    "surface_book":
+        (
             "min-width": 1500px,
             "max-width": 2000px,
-            "pixel-ratio": 2,
+            "pixel-ratio": 2
         ),
-    "dell-xps": (
+    "dell_xps": (
         "min-width": 1920px,
         "max-width": 3840px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     ),
-    "lenovo-thinkpad": (
+    "lenovo_thinkpad": (
         "min-width": 1440px,
         "max-width": 2560px,
-        "pixel-ratio": 2,
+        "pixel-ratio": 2
     )
 );

package/scss/maps/_index.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Maps Module
@@ -24,4 +20,39 @@
 // Forward
 // ============================================================================
 
-@forward "color";
+///
+/// Forwards maps defining paper sizes etc.
+///
+@forward "paper";
+
+///
+/// Forwards device-specific configurations that aid in creating responsive
+/// designs tailored to various devices.
+///
+@forward "device"; // Device-specific responsive design maps
+
+///
+/// Forwards maps related to layout layers and z-indexing, ensuring
+/// consistent layering and stacking order throughout the project.
+///
+@forward "layer"; // Layout layers and z-index maps
+
+///
+/// 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
+
+///
+/// Forwards interval configurations that ensure responsive elements
+/// maintain their intended proportions across different devices and viewports.
+///
+@forward "interval"; // interval configurations for responsive elements
+
+@forward "scale";

package/scss/{variables/_ratio.scss → maps/_interval.scss}

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Ratio Variables Module
@@ -16,7 +12,6 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -108,7 +103,7 @@
 /// @prop {Number} parthenon_ratio [1.618] - Ratio used in the architecture of the Parthenon.
 /// @prop {Number} le_corbusier [1.618] - Le Corbusier’s modulor ratio, used in modernist architecture.
 /// @prop {Number} vesica_piscis [1.732] - Ratio derived from the vesica piscis shape, often used in sacred geometry.
-$ratio_map: (
+$interval_map: (
     // Musical Intervals
     // ========================================================================
     // Commonly used in creating harmonious designs based on musical theory.

package/scss/{variables → maps}/_layer.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// Layer Variables Module
@@ -16,17 +12,14 @@
 ///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Variables
 // ============================================================================
 
-
 ///
 /// Z-Index Layer Map
 /// ---------------------------------------------------------------------------
@@ -56,31 +49,30 @@
 ///
 /// @todo Add more layers as needed, ensuring consistent and clear naming.
 ///
-$layers: (
-
+$layer_map: (
     // ========================================================================
-    // Guides
+    // Guides & Development Overlays
     // ========================================================================
-
+    ///
     /// High-priority guide overlays for design and debugging.
     /// @name guides
     /// @type Number
+    ///
     "guides": 9998,
 
     /// Baseline guide used for text alignment and visual rhythm.
     /// @name guide_baseline
     /// @type Number
-    "guide_baseline": 3000,
+    "guide_baseline": 9998,
 
     /// Graphical guides, such as grid overlays, used in design.
     /// @name guide_graph
     /// @type Number
-    "guide_graph": 3100,
+    "guide_graph": 9998,
 
     // ========================================================================
     // Overlays
     // ========================================================================
-
     /// Z-index for modals and dialog boxes, ensuring they appear above other
     /// content.
     /// @name modal
@@ -90,26 +82,30 @@ $layers: (
     // ========================================================================
     // Interface Elements
     // ========================================================================
-
+    ///
     /// Z-index for top ribbons and banners that overlay other UI elements.
     /// @name ribbon
     /// @type Number
+    ///
     "ribbon": 5000,
 
+    ///
     /// General interface elements like headers, footers, and sidebars.
     /// @name interface
     /// @type Number
+    ///
     "interface": 4000,
 
+    ///
     /// Controls like buttons, sliders, and other interactive elements.
     /// @name control
     /// @type Number
+    ///
     "control": 3000,
 
     // ========================================================================
     // Content
     // ========================================================================
-
     /// Main content area, typically stacked below UI elements.
     /// @name content
     /// @type Number
@@ -118,7 +114,6 @@ $layers: (
     // ========================================================================
     // Background Layers
     // ========================================================================
-
     /// Background canvas or base layer, typically the lowest layer.
     /// @name canvas
     /// @type Number
@@ -127,20 +122,29 @@ $layers: (
     // ========================================================================
     // Special Values
     // ========================================================================
-
+    ///
     /// Maximum possible z-index value.
+    /// Highest layer (use sparingly)
+    ///
     /// @name max
     /// @type Number
+    ///
     "max": 9999,
 
+    ///
     /// Default, baseline z-index value.
+    ///
     /// @name mid
     /// @type Number
+    ///
     "mid": 0,
 
+    ///
     /// Minimum possible z-index value.
+    /// Forcefully behind everything
+    ///
     /// @name min
     /// @type Number
-    "min": -9999,
-
+    ///
+    "min": -9999
 ) !default;