unit.gl 0.0.1

package/src/scss/_reset.scss

@@ -0,0 +1,186 @@
+// Copyright 2023 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.
+
+
+// ============================================================================
+// Base | Reset
+// ============================================================================
+
+
+@mixin reset_bleed {
+  margin:               0;
+  margin-block-start:   0;
+  margin-block-end:     0;
+  margin-inline-start:  0;
+  margin-inline-end:    0;
+  padding:              0;
+}
+
+a,
+abbr,
+acronym,
+address,
+applet,
+area,
+article,
+aside,
+audio,
+b,
+base,
+basefont,
+bb,
+bdo,
+big,
+blockquote,
+body,
+br,
+button,
+canvas,
+caption,
+center,
+cite,
+code,
+col,
+colgroup,
+command,
+datalist,
+dd,
+del,
+details,
+dfn,
+dialog,
+dir,
+div,
+dl,
+dt,
+em,
+embed,
+eventsource,
+fieldset,
+figcaption,
+figure,
+font,
+footer,
+form,
+frame,
+frameset,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+head,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+input,
+ins,
+isindex,
+kbd,
+keygen,
+label,
+legend,
+li,
+link,
+map,
+mark,
+menu,
+meta,
+meter,
+nav,
+noframes,
+noscript,
+object,
+ol,
+optgroup,
+option,
+output,
+p,
+param,
+pre,
+progress,
+q,
+rp,
+rt,
+ruby,
+s,
+samp,
+script,
+section,
+select,
+small,
+source,
+span, 
+strike,
+strong,
+style,
+sub,
+sup,
+table,
+tbody,
+td,
+textarea,
+tfoot,
+th,
+thead,
+time,
+title,
+tr,
+track,
+tt,
+u,
+ul,
+var,
+video,
+wbr 
+{ 
+  @include reset_bleed;
+}
+
+// *{
+//     padding: 0px;
+//     margin: 0px;
+// }
+
+// html, body, div, span, applet, object, iframe,
+// h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+// a, abbr, acronym, address, big, cite, code,
+// del, dfn, em, img, ins, kbd, q, s, samp,
+// small, strike, strong, sub, sup, tt, var,
+// b, u, i, center,
+// dl, dt, dd, ol, ul, li,
+// fieldset, form, label, legend,
+// table, caption, tbody, tfoot, thead, tr, th, td,
+// article, aside, canvas, details, embed,
+// figure, figcaption, footer, header, hgroup,
+// menu, nav, output, ruby, section, summary,
+// time, mark, audio, video {
+//   margin: 0;
+//   padding: 0;
+//   border: 0;
+//   font-size: 100%;
+//   font: inherit;
+//   vertical-align: baseline;
+// }
+
+// /* HTML5 display-role reset for older browsers */
+// article, aside, details, figcaption, figure,
+// footer, header, hgroup, menu, nav, section, main {
+//   display: block;
+// }

package/src/scss/_scale.scss

@@ -0,0 +1,272 @@
+// Copyright 2020 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.00 (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
+
+// 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.
+
+
+
+
+
+
+
+
+
+
+$rhythm_base: q(4);
+
+$line_height_ratio: 1.5;
+
+$font_size_scalar:  4;
+$line_height_scalar:  calc($line_height_ratio * $font_size_scalar);
+
+
+
+$font_size_base:    calc($font_size_scalar * $rhythm_base); // Base font size
+$line_height_base:  calc($line_height_scalar * $rhythm_base); // Base line height (1.5 times the font size is a good start)
+
+
+
+$basepoint: (
+    1:  basepoint( 1),
+    2:  basepoint( 2),
+    3:  basepoint( 3),
+    4:  basepoint( 4),
+    5:  basepoint( 5),
+    6:  basepoint( 6),
+    7:  basepoint( 7),
+    8:  basepoint( 8),
+    9:  basepoint( 9),
+    10: basepoint(10),
+    11: basepoint(11),
+    12: basepoint(12),
+) !default;
+
+
+// Typography ladder map
+$typographic_scale: (
+    1:  q( 4),
+    2:  q( 6), // +2
+    3:  q( 8), // +2
+    4:  q(10), // +2
+    5:  q(12), // +2
+    6:  q(14), // +2
+    7:  q(16), // +2
+    8:  q(20), // +4
+    9:  q(24), // +4
+    10: q(28), // +4
+    11: q(32), // +4
+    12: q(36), // +4
+    13: q(40), // +4
+    14: q(48), // +8
+    15: q(56), // +8
+    16: q(64), // +8
+    17: q(72), // +8
+) !default;
+
+//     'display': $q-base * 96,  // For large display text
+//     'h1': $q-base * 48,       // For primary headings
+//     'h2': $q-base * 36,       // For secondary headings
+//     'h3': $q-base * 24,       // For tertiary headings
+//     'h4': $q-base * 20,       // For quaternary headings
+//     'h5': $q-base * 18,       // For quinary headings
+//     'h6': $q-base * 16,       // For senary headings
+//     'body-large': $q-base * 14, // For large body text
+//     'body': $q-base * 12,     // For main body text
+//     'body-small': $q-base * 10, // For small body text
+//     'caption': $q-base * 8,   // For captions and overlines
+//     'overline': $q-base * 6   // For the smallest size, like legal text
+// ) !default;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// point_base
+
+// $rhythm_base: 4;
+
+
+
+
+
+
+
+// Vertical Rhythm Function
+// Functions to maintain consistent vertical rhythm (spacing and heights) across your layout.
+
+
+
+// $base-font-size: 16px; // Base font size
+// $line-height: 24px; // Base line height
+
+// @function rhythm($lines: 1) {
+//   @return $lines * $line-height;
+// }
+
+// @function font-size-to-line-height($font-size) {
+//   @return floor($font-size / $line-height) * $line-height;
+// }
+
+
+
+//   @mixin heading-baseline($font-size) {
+//     font-size: $font-size;
+//     line-height: baseline-grid($font-size);
+//   }
+
+// // Typography Ladder Definition
+// $typography-ladder: (
+//     'h1': (font-size: 2.5rem, line-height: 1.2),
+//     'h2': (font-size: 2rem, line-height: 1.3),
+//     'h3': (font-size: 1.75rem, line-height: 1.4),
+//     'h4': (font-size: 1.5rem, line-height: 1.4),
+//     'h5': (font-size: 1.25rem, line-height: 1.5),
+//     'h6': (font-size: 1rem, line-height: 1.6),
+//     'body-large': (font-size: 1.125rem, line-height: 1.6),
+//     'body': (font-size: 1rem, line-height: 1.6),
+//     'body-small': (font-size: 0.875rem, line-height: 1.7),
+//     'caption': (font-size: 0.75rem, line-height: 1.8)
+// ) !default;
+
+
+// Calculate dynamic font size
+$font_size: calc(($q_unit / $q_base) * $q) !default;
+
+// Corresponding minimum and maximum font sizes
+$font_min: calc(($q_unit / $q) * $q_min) !default;
+$font_max: calc(($q_unit / $q) * $q_max) !default;
+
+
+
+
+// Apply
+// ============================================================================
+
+// Apply Fluid Typography
+html {
+    font-size: $font_size_base;
+    line-height: $line_height_base;
+    // font-size: $font_size;
+}
+
+
+
+
+
+$basepoint_scale: 4;
+
+@function basepoint($value) {
+  @return calc($q * $value * $basepoint_scale);
+}
+
+$basepoint_01: basepoint( 1) !default;
+$basepoint_02: basepoint( 2) !default;
+$basepoint_03: basepoint( 3) !default;
+$basepoint_04: basepoint( 4) !default;
+$basepoint_05: basepoint( 5) !default;
+$basepoint_06: basepoint( 6) !default;
+$basepoint_07: basepoint( 7) !default;
+$basepoint_08: basepoint( 8) !default;
+$basepoint_09: basepoint( 9) !default;
+$basepoint_10: basepoint(10) !default;
+$basepoint_11: basepoint(11) !default;
+$basepoint_12: basepoint(12) !default;
+
+$basepoint: (
+    1:  basepoint( 1),
+    2:  basepoint( 2),
+    3:  basepoint( 3),
+    4:  basepoint( 4),
+    5:  basepoint( 5),
+    6:  basepoint( 6),
+    7:  basepoint( 7),
+    8:  basepoint( 8),
+    9:  basepoint( 9),
+    10: basepoint(10),
+    11: basepoint(11),
+    12: basepoint(12),
+) !default;
+
+
+// Kyu Baseline Scale
+// ----------------------------------------------------------------------------
+
+$baseline_scale: 5;
+
+@function baseline($value) {
+  @return calc($q * $value * $baseline_scale);
+}
+
+$baseline_00: baseline( 1) !default;
+$baseline_01: baseline( 1) !default;
+$baseline_02: baseline( 2) !default;
+$baseline_03: baseline( 3) !default;
+$baseline_04: baseline( 4) !default;
+$baseline_05: baseline( 5) !default;
+$baseline_06: baseline( 6) !default;
+$baseline_07: baseline( 7) !default;
+$baseline_08: baseline( 8) !default;
+$baseline_09: baseline( 9) !default;
+$baseline_10: baseline(10) !default;
+$baseline_11: baseline(11) !default;
+$baseline_12: baseline(12) !default;
+
+$baseline: (
+    1:  baseline( 1),
+    2:  baseline( 2),
+    3:  baseline( 3),
+    4:  baseline( 4),
+    5:  baseline( 5),
+    6:  baseline( 6),
+    7:  baseline( 7),
+    8:  baseline( 8),
+    9:  baseline( 9),
+    10: baseline(10),
+    11: baseline(11),
+    12: baseline(12),
+) !default;
+
+
+
+
+
+
+
+
+
+// @function baseline-grid($font-size, $line-height: $base-line-height) {
+//     @return ceil($font-size / $line-height) * $line-height;
+//   }
+
+  

package/src/scss/_unit.scss

@@ -0,0 +1,60 @@
+// Copyright 2020 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.
+
+
+// ============================================================================
+// Base | Unit
+// ============================================================================
+
+@use "sass:math";
+
+
+
+// Kyū Measurement System for Responsive Typography
+// Defines a base size and provides a mixin for fluid typography.
+
+
+// Kyū base size definition (A Kyū is 1/16th of a Rem).
+// 1rem equals the font size of the html element, which for most browsers has
+// a default value of 16px.
+$q_base: 0.0625rem !default;  // 1px, or 0.25mm
+$q_unit: 1.0000rem !default;
+
+
+// Minimum and maximum Kyū sizes
+$q_min: 0.75px !default;
+$q_max: 1.50px !default;
+
+
+
+
+
+// Calculate dynamic Kyū size using clamp function
+// $q_size: scale_dynamic_clamp($media_xs, $media_sl, $q_min, $q_max);
+$q: scale_dynamic_clamp($media_xs, $media_sl, $q_min, $q_max);
+
+// Function to calculate multiples of 'q'
+@function q($multiplier) {
+    @return calc($q * $multiplier);
+}
+
+// Mixin to apply multiples of 'q'
+@mixin q($multiplier, $property) {
+    #{$property}: q($multiplier);
+}
+
+// Root custom properties for Kyū sizes
+:root {
+    --q: $q;
+}

package/src/scss/_unit_conversion.scss

@@ -0,0 +1,77 @@
+// Copyright 2020 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.
+
+
+
+
+// Unit Conversion Functions
+// Create functions to convert between different measurement units, such as pixels to rem, em to pixels, etc.
+
+@function px-to-rem($size, $base: 16px) {
+    @return $size / $base * 1rem;
+}
+
+@function rem-to-px($size, $base: 16px) {
+    @return $size * $base;
+}
+
+@function em-to-px($size, $context: 16px) {
+    @return $size * $context;
+}
+
+@function px-to-em($size, $context: 16px) {
+    @return $size / $context * 1em;
+}
+
+
+// Base font-size for the document
+$base-font-size: 16px !default;
+
+// Validate that the input is a pixel value
+@function validate-px($value) {
+    @if unit($value) != 'px' {
+        @error "Expected a pixel value, but got `#{$value}`.";
+    }
+    @return $value;
+}
+
+// Convert pixels to rem
+@function px-to-rem($size) {
+    $validated-size: validate-px($size);
+    @return $validated-size / $base-font-size * 1rem;
+}
+
+// Convert rem to pixels
+@function rem-to-px($size) {
+    @if unit($size) != 'rem' {
+        @error "Expected a rem value, but got `#{$size}`.";
+    }
+    @return $size * $base-font-size;
+}
+
+// Convert em to pixels
+@function em-to-px($size, $context: $base-font-size) {
+    $validated-context: validate-px($context);
+    @if unit($size) != 'em' {
+        @error "Expected an em value, but got `#{$size}`.";
+    }
+    @return $size * $validated-context;
+}
+
+// Convert pixels to em
+@function px-to-em($size, $context: $base-font-size) {
+    $validated-size: validate-px($size);
+    $validated-context: validate-px($context);
+    @return $validated-size / $validated-context * 1em;
+}

package/src/scss/_unit_functions.scss

@@ -0,0 +1,104 @@
+
+// ============================================================================
+// Unit | Functions
+// ============================================================================
+
+
+/// Strip Unit Function
+/// Function to remove the unit from a numerical value
+/// Ensures compatibility with various SCSS versions
+/// @param $value - The numerical value with or without a unit
+/// @return - The raw numerical value without its unit
+@function unit_strip($value) {
+    // Check if the input is a number with a unit
+    @if type-of($value) == "number" and not unitless($value) {
+        // Convert the value to a string
+        $value-str: inspect($value);
+        // Remove the unit part from the string
+        $value-no-unit: str-slice(
+            $value-str,
+            1,
+            str-index($value-str, unit($value)) - 1
+        );
+        // Return the number without its unit
+        @return $value-no-unit;
+    } @else if type-of($value) != "number" {
+        // Handle non-number inputs gracefully
+        // @warn "Input `#{$value}` is not a number. Returning value as-is.";
+        @return $value;
+    }
+    // Return the value as-is for unitless numbers or non-number inputs
+    @return $value;
+}
+
+
+/// Linear Interpolation Function
+/// Interpolates linearly between two values across a range, useful for
+/// fluid scaling.
+/// @param $start - Starting value at the lower bound (can include units)
+/// @param $end - Ending value at the upper bound (can include units)
+/// @param $min - Lower bound for interpolation (must be unitless or in 'px')
+/// @param $max - Upper bound for interpolation (must be unitless or in 'px')
+/// @param $actual - Current value to interpolate (default is 100vw)
+/// @return - Interpolated value (in the same units as $start and $end)
+@function linear_interpolation($start, $end, $min, $max, $actual: 100vw) {
+
+    // Validate parameters
+    @if unitless($min) == false and unit($min) != 'px' {
+        @error "Parameter `$min` must be unitless or in 'px'.";
+    }
+    @if unitless($max) == false and unit($max) != 'px' {
+        @error "Parameter `$max` must be unitless or in 'px'.";
+    }
+    @if $max <= $min {
+        @error "Parameter `$max` must be greater than `$min`.";
+    }
+
+    // Convert all values to a common unit for calculation
+    $unit: 1#{unit($start)};
+
+    // Convert coordinate values to unitless for calculations
+    $x0: #{unit_strip($min)};
+    $x1: #{unit_strip($max)};
+    $y0: #{unit_strip($start)};
+    $y1: #{unit_strip($end)};
+
+    // Calculate the slope of the line
+    $slope: #{calc(($y1 - $y0) / ($x1 - $x0))};
+
+    // Calculate the interval
+    $interval: calc($actual - $min);
+
+    // Calculate and return the interpolated value
+    $value: calc($start + $slope * $interval);
+
+    // Return the `calc` expression
+    @return $value;
+
+}
+
+
+/// Function: scale_dynamic_clamp
+/// Calculates font size using clamp-based responsive typography
+/// @param $_font_size_min - Minimum font size
+/// @param $_font_size_max - Maximum font size
+/// @param $_viewport_width_min - Minimum viewport width where scaling starts
+/// @param $_viewport_width_max - Maximum viewport width where scaling stops
+/// @return - Calculated size using clamp
+@function scale_dynamic_clamp(
+    $_viewport_width_min,
+    $_viewport_width_max,
+    $_font_size_min,
+    $_font_size_max,
+) {
+    @return clamp(
+        $_font_size_min,
+        linear_interpolation(
+            $_font_size_min,
+            $_font_size_max,
+            $_viewport_width_min,
+            $_viewport_width_max
+        ),
+        $_font_size_max
+    );
+}