unit.gl 0.0.1

package/src/scss/_view.scss

@@ -0,0 +1,117 @@
+// 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.
+
+
+// ============================================================================
+// Media | Screen
+// ============================================================================
+
+// 320px — 480px: Mobile devices
+// 481px — 768px: iPads, Tablets
+// 769px — 1024px: Small screens, laptops
+// 1025px — 1200px: Desktops, large screens
+// 1201px and more —  Extra large screens, TV
+
+
+$base_screen_unit: 16px !default; // Base unit size (16px)
+
+
+@function calc_breakpoint($multiplier) {
+    @return $base_screen_unit * $multiplier;
+}
+
+
+// Define breakpoints using the function
+$breakpoints: (
+    xs: calc_breakpoint(20),   //  320px - Extra small devices (Mobile)
+    sm: calc_breakpoint(30),   //  480px - Small devices (Tablets)
+    md: calc_breakpoint(48),   //  768px - Medium devices (Laptops)
+    lg: calc_breakpoint(64),   // 1024px - Large devices (Desktops)
+    xl: calc_breakpoint(80),   // 1280px - Extra large devices (TV)
+    sl: calc_breakpoint(90),   // 1440px - Super large devices (Large TV)
+) !default;
+
+
+// Expose individual breakpoints for easier direct access
+$media_xs: map-get($breakpoints, xs) !default;
+$media_sm: map-get($breakpoints, sm) !default;
+$media_md: map-get($breakpoints, md) !default;
+$media_lg: map-get($breakpoints, lg) !default;
+$media_xl: map-get($breakpoints, xl) !default;
+$media_sl: map-get($breakpoints, sl) !default;
+
+$media_dif: calc($media_sl - $media_xs);
+
+// $media_min: 320px !default;  // Mobile
+// $media_med: 640px !default;  // Tablet
+// $media_max: 960px !default;  // 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/src/scss/display/_device.scss

@@ -0,0 +1,106 @@
+// 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.
+
+
+
+
+
+// Device Attribute Map
+$devices: (
+    // iPhones
+    // ------------------------------------------------------------------------
+    "iphone-5":         ("min-width":  320px, "max-width":  568px, "pixel-ratio": 2),
+    "iphone-6-7-8":     ("min-width":  375px, "max-width":  667px, "pixel-ratio": 2),
+    "iphone-x":         ("min-width":  375px, "max-width":  812px, "pixel-ratio": 3),
+    "iphone-11":        ("min-width":  414px, "max-width":  896px, "pixel-ratio": 2),
+    "iphone-12":        ("min-width":  390px, "max-width":  844px, "pixel-ratio": 3),
+    "iphone-13":        ("min-width":  428px, "max-width":  926px, "pixel-ratio": 3),
+    
+    // iPads
+    // ------------------------------------------------------------------------
+    "ipad":             ("min-width":  768px, "max-width": 1024px, "pixel-ratio": 2),
+    "ipad-pro":         ("min-width": 1024px, "max-width": 1366px, "pixel-ratio": 2),
+    "ipad-mini":        ("min-width":  768px, "max-width": 1024px, "pixel-ratio": 2),
+    "ipad-air":         ("min-width":  820px, "max-width": 1180px, "pixel-ratio": 2),
+
+    // Samsung Galaxy
+    // ------------------------------------------------------------------------
+    "samsung-s10":      ("min-width":  360px, "max-width":  760px, "pixel-ratio": 3),
+    "samsung-s20":      ("min-width":  320px, "max-width":  720px, "pixel-ratio": 4),
+    "samsung-s21":      ("min-width":  320px, "max-width":  780px, "pixel-ratio": 3),
+
+    // Google Pixel
+    // ------------------------------------------------------------------------
+    "google-pixel":     ("min-width":  411px, "max-width":  731px, "pixel-ratio": 2.6),
+    "google-pixel-5":   ("min-width":  393px, "max-width":  851px, "pixel-ratio": 3),
+
+    // Microsoft Surface
+    // ------------------------------------------------------------------------
+    "surface-duo":      ("min-width":  540px, "max-width":  720px, "pixel-ratio": 2.5),
+    "surface-pro":      ("min-width":  768px, "max-width": 1366px, "pixel-ratio": 2),
+
+    // Samsung Galaxy Fold
+    // ------------------------------------------------------------------------
+    "galaxy-fold":      ("min-width":  280px, "max-width":  653px, "pixel-ratio": 3),
+
+    // Other Tablets and Laptops
+    // ------------------------------------------------------------------------
+    "amazon-fire-hd":    ("min-width":  800px, "max-width": 1280px, "pixel-ratio": 1.5),
+    "microsoft-laptop": ("min-width": 1504px, "max-width": 2256px, "pixel-ratio": 1.5),
+
+    // Desktops
+    // ------------------------------------------------------------------------
+    "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)
+
+    // Additional Devices
+    // ------------------------------------------------------------------------
+    "lg-g6":            ("min-width":  360px, "max-width":  720px, "pixel-ratio": 4),
+    "oneplus-7t":       ("min-width":  412px, "max-width":  732px, "pixel-ratio": 2.5),
+    "sony-xperia-1":    ("min-width":  384px, "max-width":  643px, "pixel-ratio": 3),
+    "huawei-p30":       ("min-width":  360px, "max-width":  780px, "pixel-ratio": 3),
+    "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)
+
+);
+
+
+/// 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/src/scss/display/_display_orientation.scss

@@ -0,0 +1,93 @@
+// 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.
+
+
+
+
+
+
+
+
+// Mixins for Media Queries Based on Device Orientation
+// ============================================================================
+// These mixins provide a convenient way to apply styles based on the orientation of the device.
+// Useful for responsive designs that need to adapt to landscape or portrait modes, especially on tablets and smartphones.
+
+/// Mixin for landscape orientation with optional breakpoint
+/// Use this mixin to apply styles when the device is in landscape mode.
+/// @param $min-width (optional) - The minimum width at which the styles should apply
+/// Example usage:
+/// @include orientation-landscape(1024px) { /* styles */ }
+@mixin orientation-landscape($min-width: null) {
+    @if $min-width {
+        @media (orientation: landscape) and (min-width: $min-width) {
+            @content;
+        }
+    } @else {
+        @media (orientation: landscape) {
+            @content; // The styles inside this mixin are applied in landscape mode
+        }
+    }
+}
+
+/// Mixin for portrait orientation with optional breakpoint
+/// Use this mixin to apply styles when the device is in portrait mode.
+/// @param $min-width (optional) - The minimum width at which the styles should apply
+/// Example usage:
+/// @include orientation-portrait { /* styles */ }
+@mixin orientation-portrait($min-width: null) {
+    @if $min-width {
+        @media (orientation: portrait) and (min-width: $min-width) {
+            @content;
+        }
+    } @else {
+        @media (orientation: portrait) {
+            @content;
+        }
+    }
+}
+
+
+
+/// 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 for High-Density (Retina) Displays
+// ============================================================================
+/// This mixin targets high-density displays like Retina screens.
+/// It covers various methods to detect high pixel density to ensure broad compatibility.
+/// Usage: 
+/// @include retina { /* styles for retina displays */ }
+@mixin 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
+    }
+}

package/src/scss/index.scss

@@ -0,0 +1,51 @@
+// 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.
+
+
+@charset "utf-8";
+
+/**
+* unit.gl
+*
+* @description     Unit System
+* @author          Scape Agency (https://www.scape.agency)
+* @version         v1.0.0
+* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
+* @website         https://www.unit.gl/
+* @repository      https://github.com/scape-agency/unit.gl/
+* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
+*/
+
+@use "sass:math";
+
+@import "_reset";
+@import "_layer";
+
+
+@import "_paper";
+
+
+@import "_view";
+
+@import "_unit_functions";
+@import "_unit";
+
+
+@import "_scale";
+
+@import "_helper";
+@import "_guide";
+
+
+// @import "base/base";

package/src/scss/math/_math_arithmetic.scss

@@ -0,0 +1,64 @@
+// 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.
+
+
+// Unitless Arithmetic Functions
+// ============================================================================
+// Functions to perform arithmetic operations while ensuring correct handling of units.
+
+/// Adds two values, handling units.
+/// @param $value1 - First value
+/// @param $value2 - Second value
+/// @return - Sum of the two values
+@function add($value1, $value2) {
+    @if unitless($value1) and unitless($value2) {
+        // Both values are unitless, return simple addition
+        @return $value1 + $value2;
+    } @else if unitless($value1) {
+        // First value is unitless, convert it to the unit of the second value
+        @return $value1 + unit-strip($value2);
+    } @else if unitless($value2) {
+        // Second value is unitless, convert it to the unit of the first value
+        @return unit-strip($value1) + $value2;
+    } @else if unit($value1) == unit($value2) {
+        // Both values have the same unit
+        @return $value1 + $value2;
+    }
+    // Mismatched units, return a warning
+    @warn "Cannot add values with different units: #{$value1} and #{$value2}";
+    @return null;
+}
+
+/// Subtracts one value from another, handling units.
+/// @param $value1 - First value
+/// @param $value2 - Second value
+/// @return - Difference of the two values
+@function subtract($value1, $value2) {
+    @if unitless($value1) and unitless($value2) {
+        // Both values are unitless, return simple subtraction
+        @return $value1 - $value2;
+    } @else if unitless($value1) {
+        // First value is unitless, convert it to the unit of the second value
+        @return $value1 - unit-strip($value2);
+    } @else if unitless($value2) {
+        // Second value is unitless, convert it to the unit of the first value
+        @return unit-strip($value1) - $value2;
+    } @else if unit($value1) == unit($value2) {
+        // Both values have the same unit
+        @return $value1 - $value2;
+    }
+    // Mismatched units, return a warning
+    @warn "Cannot subtract values with different units: #{$value1} and #{$value2}";
+    @return null;
+}

package/src/scss/math/_math_ratio.scss

@@ -0,0 +1,172 @@
+// 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.
+
+
+// ============================================================================
+// Math | Ratio's
+// ============================================================================
+
+
+
+
+// Modular Scale Ratios Map
+// This map contains common ratios used in modular scale calculations.
+$ratio: (
+
+    // Musical Minor Interval
+    // ------------------------------------------------------------------------
+    "minor_second":         1.067,  // Minor second interval
+    "minor_third":          1.2,    // Minor third interval
+    "minor_fourth":         1.334,  // Minor fourth interval (also known as diminished fifth)
+    "minor_fifth":           1.5,    // Minor fifth interval
+    "minor_sixth":          1.6,    // Minor sixth interval
+    "minor_seventh":        1.778,  // Minor seventh interval
+    "minor_octave":         2,      // Minor octave interval
+
+    // Musical Major Interval
+    // ------------------------------------------------------------------------
+    "major_second":         1.125,  // Major second interval
+    "major_third":          1.25,   // Major third interval
+    "major_fourth":         1.333,  // Major fourth interval (perfect fourth)
+    "major_fifth":           1.5,    // Major fifth interval (perfect fifth)
+    "major_sixth":          1.667,  // Major sixth interval
+    "major_seventh":        1.875,  // Major seventh interval
+    "major_octave":         2,      // Major octave interval (perfect octave)
+
+    // Musical Perfect Interval
+    // ------------------------------------------------------------------------
+    "perfect_unison":       1,      // Perfect unison, the same note
+    "perfect_second":       1.125,  // Perfect second interval
+    "perfect_third":        1.25,   // Perfect third interval
+    "perfect_fourth":       1.333,  // Perfect fourth interval
+    "perfect_fifth":         1.5,    // Perfect fifth interval
+    "perfect_sixth":        1.667,  // Perfect sixth interval
+    "perfect_seventh":      1.875,  // Perfect seventh interval
+    "perfect_octave":       2,      // Perfect octave, double the frequency
+    "perfect_ninth":        2.25,   // Perfect ninth interval
+    "perfect_tenth":        2.5,    // Perfect tenth interval
+    "perfect_eleventh":     2.667,  // Perfect eleventh interval
+    "perfect_twelfth":      3,      // Perfect twelfth interval
+    "perfect_thirteenth":   3.333,  // Perfect thirteenth interval
+    "perfect_fourteenth":   3.667,  // Perfect fourteenth interval
+    "perfect_fifteenth":     4,      // Perfect fifteenth interval, double octave
+    "double_octave":        4,      // Twice the frequency of the perfect octave
+    "triple_octave":        8,      // Three times the frequency of the perfect octave
+
+    // Musical Augmented Interval
+    // ------------------------------------------------------------------------
+    "augmented_unison":     1.059,  // Slightly higher than perfect unison
+    "augmented_second":     1.122,  // Slightly higher than major second
+    "augmented_third":      1.189,  // Slightly higher than major third
+    "augmented_fourth":     1.414,  // Augmented fourth, also known as tritone
+    "augmented_fifth":       1.587,  // Slightly higher than perfect fifth
+    "augmented_sixth":      1.682,  // Slightly higher than major sixth
+    "augmented_seventh":    1.782,  // Slightly higher than major seventh
+    "augmented_octave":     2.059,  // Slightly higher than perfect octave
+
+    // Musical Diminished Interval
+    // ------------------------------------------------------------------------
+    "diminished_unison":    0.943,  // A diminished unison, slightly less than a perfect unison
+    "diminished_second":    1.053,  // Diminished second interval, slightly less than a minor second
+    "diminished_third":     1.122,  // Diminished third interval, slightly less than a minor third
+    "diminished_fourth":    1.260,  // Diminished fourth, slightly less than a perfect fourth
+    "diminished_fifth":      1.414,  // Tritone, halfway between a perfect fourth and perfect fifth
+    "diminished_sixth":     1.587,  // Diminished sixth interval, slightly less than a major sixth
+    "diminished_seventh":   1.782,  // Diminished seventh interval, slightly less than a major seventh
+    "diminished_octave":    1.961,  // A diminished octave, slightly less than a perfect octave
+
+    // Root
+    // ------------------------------------------------------------------------
+    "root_two":             1.414,  // Square root of 2
+    "root_three":           1.732,  // Square root of 3
+    "root_four":            2,      // Square root of 4
+    "root_five":             2.236,  // Square root of 5
+
+    // Special
+    // ------------------------------------------------------------------------
+    "golden_ratio":         1.618,
+    "silver_ratio":         2.414,  // Analogous to the golden ratio
+    "bronze_ratio":         1.927,  // Analogous to silver and golden ratios
+    "pythagorean":          1.732,  // Pythagorean constant, square root of 3
+    "phi":                  1.618,  // Another name for the golden ratio
+    "pi":                   3.142,  // Mathematical Pi value
+    "euler":                2.718,  // Euler's number
+    "square":               1.414,  // Square root of 2
+    "fibonacci":             1.618,  // Fibonacci sequence ratio
+    "plastic_number":       1.324,  // Plastic constant, another unique irrational number
+    "feigenbaum":           4.669,  // Feigenbaum constant in chaos theory
+    "apollonian":           1.306,  // Apollonian gasket, related to circle packing
+    "cosmic_ratio":         1.273,  // Based on cosmic geometry
+    "parthenon_ratio":      1.618,  // Ratio used in the Parthenon's architecture
+    "le_corbusier":         1.618,  // Le Corbusier's modulor ratio
+    "vesica_piscis":        1.732,  // Ratio from the vesica piscis shape
+    "egyptian_fraction":    1.571,  // Ancient Egyptian architecture ratio
+    "harmonic_mean":        1.455,  // Harmonic mean, a type of average
+    "gauss_constant":       0.834,  // Gauss's constant related to the arithmetic-geometric mean
+    "super_golden":         2.058,  // Super golden ratio, a higher order of the golden ratio
+
+) !default;
+
+
+/// Golden Ratio Function
+/// A simple function to calculate sizes using the golden ratio, which can be
+/// used for spacing, sizing elements, etc.
+@function golden-ratio($size, $increment: 1) {
+    $golden-ratio: 1.618;
+    @return $size * pow($golden-ratio, $increment);
+}
+
+
+
+
+// Modular Scale Function
+/// Calculates sizes (like font-size, spacing) based on a modular scale.
+/// This is useful for maintaining harmonious proportions in typography and layout.
+/// @param $increment - The step on the scale, can be positive or negative.
+/// @param $base - The base value to scale from, defaults to 1em (typographic base size).
+/// @param $ratio - The ratio to use for scaling, defaults to the Golden Ratio.
+/// @return - The calculated value based on the modular scale.
+@function modular-scale($increment: 1, $base: 1em, $ratio: 1.618) {
+    // Validate inputs
+    @if type-of($increment) != 'number' {
+        @error "Step must be a number.";
+    }
+  
+    @if type-of($base) != 'number' and not unitless($base) {
+        @error "Base must be a number with or without units.";
+    }
+  
+    @if type-of($ratio) != 'number' or $ratio <= 0 {
+        @error "Ratio must be a positive number.";
+    }
+  
+    // Calculate the modular scale value
+    @return $base * pow($ratio, $increment);
+  }
+  
+  $ratio: map-get($ratio, $ratio-name);
+  
+  
+  // body {
+  //   font-size: modular-scale(0); // Equal to the base size, 1em
+  // }
+  
+  // h1 {
+  //   font-size: modular-scale(2); // Larger than the base size
+  // }
+  
+  // .small-text {
+  //   font-size: modular-scale(-1); // Smaller than the base size
+  // }
+  

package/src/scss/math/_math_scale.scss

@@ -0,0 +1,58 @@
+// 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.
+
+
+// ============================================================================
+// Math | Scales
+// ============================================================================
+
+
+$scale_musical: (
+    "monotonic":    1,
+    "ditonic":      2,
+    "tritonic":     3,
+    "tetratonic":   4,
+    "pentatonic":   5,
+    "hexatonic":    6,
+    "peptatonic":   7,
+    "octatonic":    8,
+    "nonatonic":    9,
+    "dodecatonic": 12,
+) !default;
+
+
+/// Classic Typographic Scale
+/// Design software, such as Adobe InDesig, usually has such a scale.
+/// This scale has historical significance — used by typographers of the early
+/// Renaissance; it has remained unchanged for 400 years.
+$typographic_scale_classic: (
+    1:  q( 6),
+    2:  q( 7), // +1
+    3:  q( 8), // +1
+    4:  q( 9), // +1
+    5:  q(10), // +1
+    6:  q(11), // +1
+    7:  q(12), // +1
+    8:  q(14), // +2
+    9:  q(16), // +2
+    10: q(18), // +2
+    11: q(21), // +3
+    12: q(24), // +3
+    13: q(36), // +12
+    14: q(48), // +12
+    15: q(60), // +12
+    16: q(72), // +12
+    17: q(84), // +12
+    18: q(96), // +12
+) !default;