unit.gl 0.0.29 → 0.0.32

package/scss/classes/_paper.scss

@@ -0,0 +1,97 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// Paper Module
+// ============================================================================
+
+
+@use "../variables" as *;
+
+  
+// Usage
+// ============================================================================
+
+// .paper {
+
+//     // Q Series
+//     // ------------------------------------------------------------------------
+//     &.q0    { @include set_paper_size("q0"); }
+//     &.q1    { @include set_paper_size("q1"); }
+//     &.q2    { @include set_paper_size("q2"); }
+//     &.q3    { @include set_paper_size("q3"); }
+//     &.q4    { @include set_paper_size("q4"); }
+//     &.q5    { @include set_paper_size("q5"); }
+//     &.q6    { @include set_paper_size("q6"); }
+//     &.q7    { @include set_paper_size("q7"); }
+//     &.q8    { @include set_paper_size("q8"); }
+//     &.q9    { @include set_paper_size("q9"); }
+//     &.q10   { @include set_paper_size("q10"); }
+
+//     // ISO A Series
+//     // ------------------------------------------------------------------------
+//     &.iso_a0    { @include set_paper_size("iso_a0"); }
+//     &.iso_a1    { @include set_paper_size("iso_a1"); }
+//     &.iso_a2    { @include set_paper_size("iso_a2"); }
+//     &.iso_a3    { @include set_paper_size("iso_a3"); }
+//     &.iso_a4    { @include set_paper_size("iso_a4"); }
+//     &.iso_a5    { @include set_paper_size("iso_a5"); }
+//     &.iso_a6    { @include set_paper_size("iso_a6"); }
+//     &.iso_a7    { @include set_paper_size("iso_a7"); }
+//     &.iso_a8    { @include set_paper_size("iso_a8"); }
+//     &.iso_a9    { @include set_paper_size("iso_a9"); }
+//     &.iso_a10   { @include set_paper_size("iso_a10"); }
+
+// }
+
+// Function to calculate ISO paper sizes
+// @function iso-paper-size($number) {
+//     $base-width:   841mm;
+//     $base-height: 1189mm;
+
+//     @for $i from 0 through $number {
+//         $base-width: $base-width / if($i > 0, 2, 1);
+//         $base-height: $base-height / if($i > 0 and $i % 2 == 0, 2, 1);
+//     }
+
+//     @return (width: $base-width, height: $base-height);
+// }
+
+
+// Function to calculate ISO B-series paper sizes
+// @function iso-paper-size-b($number) {
+//     $base-width: 1000mm; // Approximate base width for B0
+//     $base-height: 1414mm; // Approximate base height for B0
+  
+//     @for $i from 0 through $number {
+//       $base-width: $base-width / if($i > 0, sqrt(2), 1);
+//       $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
+//     }
+  
+//     @return (width: $base-width, height: $base-height);
+//   }
+
+// Function to calculate ISO C-series paper sizes
+// @function iso-paper-size-c($number) {
+//     $base-width: 917mm; // Approximate base width for C0
+//     $base-height: 1297mm; // Approximate base height for C0
+  
+//     @for $i from 0 through $number {
+//       $base-width: $base-width / if($i > 0, sqrt(2), 1);
+//       $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
+//     }
+  
+//     @return (width: $base-width, height: $base-height);
+//   }

package/scss/{math/_math_arithmetic.scss → functions/_arithmetic.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

package/scss/functions/_index.scss

@@ -0,0 +1,13 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.

package/scss/{math/_math_ratio.scss → functions/_ratio.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

package/scss/{math/_math_scale.scss → functions/_scale.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

package/scss/{math/_math_sequence.scss → functions/_sequence.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

package/scss/index.scss

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -13,7 +13,6 @@
 // limitations under the License.
 
 
-
 /**
 * unit.gl
 *
@@ -30,22 +29,10 @@
 
 @use "sass:math";
 
+@forward "variables";
+@forward "mixins";
 
-@import "_reset";
-@import "_global";
-@import "_layer";
-
-@import "_paper";
-
-@import "_view";
-
-@import "_unit_conversion";
-@import "_unit_functions";
-@import "_unit";
-
-
-@import "_ratio";
-@import "_scale";
+@forward "reset";
+@forward "global";
 
-@import "_helper";
-@import "_guide";
+@forward "classes";

package/scss/mixins/_device.scss

@@ -0,0 +1,42 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+@use "../variables" as *;
+
+/// Generalized Media Query Mixin
+/// Creates a media query based on device attributes defined in $devices map.
+/// @param $device - The key name of the device in the $devices map.
+/// Usage Example:
+/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8}
+@mixin device-media-query($device) {
+    // Retrieve the device attributes from the map
+    $attributes: map-get($devices, $device);
+    
+    // Extract individual attributes with default fallbacks
+    $min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null);
+    $max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null);
+    $pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1
+
+    // Construct the media query string
+    $media-query: "only screen";
+    $media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query);
+    $media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query);
+    $media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query);
+
+    // Apply the media query
+    @media #{$media-query} {
+        @content;
+    }
+}

package/scss/{display/_display_orientation.scss → mixins/_display.scss}

@@ -1,10 +1,10 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
-// Licensed under the Apache License, Version 2.00 (the "License");
+// Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 
-// http://www.apache.org/licenses/LICENSE-2.00
+// http://www.apache.org/licenses/LICENSE-2.0
 
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
@@ -13,8 +13,7 @@
 // limitations under the License.
 
 
-
-
+@use "../variables" as *;
 
 
 
@@ -63,14 +62,11 @@
 /// Mixin for targeting specific aspect ratios
 /// @param $width - Width of the aspect ratio
 /// @param $height - Height of the aspect ratio
-@mixin aspect-ratio($width, $height) {
-    @media (aspect-ratio: #{$width}/#{$height}) {
-        @content;
-    }
-}
-
-
-
+// @mixin aspect-ratio($width, $height) {
+//     @media (aspect-ratio: #{$width}/#{$height}) {
+//         @content;
+//     }
+// }
 
 
 

package/scss/{_guide.scss → mixins/_guide.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -13,6 +13,8 @@
 // limitations under the License.
 
 
+@use "../variables" as *;
+
 // ============================================================================
 // Utilities | Guides
 // ============================================================================

package/scss/{_helper.scss → mixins/_helper.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -13,9 +13,7 @@
 // limitations under the License.
 
 
-// Shorthand helper mixins
-
-
+@use "../variables" as *;
 
 
 

package/scss/mixins/_index.scss

@@ -0,0 +1,23 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+
+@forward "paper";
+@forward "view";
+@forward "ratio";
+@forward "device";
+@forward "display";
+@forward "guide";
+@forward "helper";

package/scss/mixins/_paper.scss

@@ -0,0 +1,35 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// Paper Module
+// ============================================================================
+
+@use "../variables" as *;
+
+// Apply Function
+// ============================================================================
+
+@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);
+    } @else {
+        @warn "Invalid paper size: #{$size}.";
+    }
+}
+
+

package/scss/mixins/_ratio.scss

@@ -0,0 +1,171 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@use "../variables" as *;
+
+
+// ============================================================================
+// Layout | Ratio
+// ============================================================================
+
+// 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%;
+    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;
+}
+
+@mixin ratio_p_1x1   { @include ratio_p(100.00%); }
+@mixin ratio_p_1x2   { @include ratio_p(200.00%); }
+@mixin ratio_p_2x1   { @include ratio_p( 50.00%); }
+@mixin ratio_p_1x3   { @include ratio_p(300.00%); }
+@mixin ratio_p_3x1   { @include ratio_p( 33.33%); }
+@mixin ratio_p_1x4   { @include ratio_p(400.00%); }
+@mixin ratio_p_4x1   { @include ratio_p( 25.00%); }
+@mixin ratio_p_2x3   { @include ratio_p(150.00%); }
+@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.00%); }
+@mixin ratio_p_16x9  { @include ratio_p( 56.25%); }
+@mixin ratio_p_16x10 { @include ratio_p( 62.50%); }
+
+.ratio_p_1x1   { @include ratio_p_1x1; }
+.ratio_p_1x2   { @include ratio_p_1x2; }
+.ratio_p_2x1   { @include ratio_p_2x1; }
+.ratio_p_1x3   { @include ratio_p_1x3; }
+.ratio_p_3x1   { @include ratio_p_3x1; }
+.ratio_p_1x4   { @include ratio_p_1x4; }
+.ratio_p_4x1   { @include ratio_p_4x1; }
+.ratio_p_3x2   { @include ratio_p_3x2; }
+.ratio_p_2x3   { @include ratio_p_2x3; }
+.ratio_p_4x3   { @include ratio_p_4x3; }
+.ratio_p_3x4   { @include ratio_p_3x4; }
+.ratio_p_16x9  { @include ratio_p_16x9; }
+.ratio_p_16x10 { @include ratio_p_16x10; }
+
+
+
+
+  // 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/_view.scss

@@ -0,0 +1,79 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+@use "../variables" as *;
+
+// ============================================================================
+// Media | Screen
+// ============================================================================
+
+// Media Query Mixins
+// ============================================================================
+
+@mixin breakpoint($size) {
+    @if map-has-key($breakpoints, $size) {
+        @media (min-width: map-get($breakpoints, $size)) {
+            @content;
+        }
+    } @else {
+        @warn "Invalid breakpoint: #{$size}.";
+    }
+}
+
+@mixin media_xs {
+    @media (min-width: $media_xs) { @content; }
+}
+  
+@mixin media_sm {
+    @media (min-width: $media_sm) { @content; }
+}
+
+
+@mixin media_md {
+    @media (min-width: $media_md) { @content; }
+}
+  
+@mixin media_lg {
+    @media (min-width: $media_lg) { @content; }
+}
+  
+
+@mixin media_xl {
+    @media (min-width: $media_xl) { @content; }
+}
+  
+@mixin media_sl {
+    @media (min-width: $media_sl) { @content; }
+}
+  
+
+// Example
+// @include breakpoint(md) {
+//     // Styles for medium screens and up
+// }
+  
+
+// Syntax
+// @media media type and (condition: breakpoint) {
+//   // CSS rules
+// }
+
+// @media screen, print {
+//     /* … */
+//   }
+
+// @media (min-width: 30em) and (orientation: landscape) {
+//     /* … */
+//   }

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

@@ -1,10 +1,10 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
-// Licensed under the Apache License, Version 2.00 (the "License");
+// Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 
-// http://www.apache.org/licenses/LICENSE-2.00
+// http://www.apache.org/licenses/LICENSE-2.0
 
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
@@ -15,7 +15,6 @@
 
 
 
-
 // Device Attribute Map
 $devices: (
     // iPhones
@@ -63,7 +62,7 @@ $devices: (
     // ------------------------------------------------------------------------
     "macbook-air":      ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
     "macbook-pro":      ("min-width": 1680px, "max-width": 3072px, "pixel-ratio": 2),
-    "imac":             ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2)
+    "imac":             ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2),
 
     // Additional Devices
     // ------------------------------------------------------------------------
@@ -74,33 +73,8 @@ $devices: (
     "xiaomi-mi9":       ("min-width":  393px, "max-width":  851px, "pixel-ratio": 3),
     "surface-book":     ("min-width": 1500px, "max-width": 2000px, "pixel-ratio": 2),
     "dell-xps":         ("min-width": 1920px, "max-width": 3840px, "pixel-ratio": 2),
-    "lenovo-thinkpad":  ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2)
+    "lenovo-thinkpad":  ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
 
 );
 
 
-/// Generalized Media Query Mixin
-/// Creates a media query based on device attributes defined in $devices map.
-/// @param $device - The key name of the device in the $devices map.
-/// Usage Example:
-/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8}
-@mixin device-media-query($device) {
-    // Retrieve the device attributes from the map
-    $attributes: map-get($devices, $device);
-    
-    // Extract individual attributes with default fallbacks
-    $min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null);
-    $max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null);
-    $pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1
-
-    // Construct the media query string
-    $media-query: "only screen";
-    $media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query);
-    $media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query);
-    $media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query);
-
-    // Apply the media query
-    @media #{$media-query} {
-        @content;
-    }
-}