@ulu/frontend 0.0.3 → 0.0.5

package/trash/scss-before-cqc-update/_typography.scss

@@ -1,322 +0,0 @@
-////
-/// @group typography
-////
-/// @todo Finish Documentation 
-/// @todo Idea: Should the maps value be processes when using the set-sizes, set? Instead of recalculated each time get-size is or get is used.
-//// @version 1.0.2
-////
-
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-@use "color";
-@use "utils";
-@use "utility";
-@use "calculate";
-@use "breakpoint";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.font-size Default font size (use pixels, converted, is used for rem base)
-/// @prop {Number} $config.font-family Default font family
-/// @prop {Number} $config.font-family-monospace Base font-family for monospace
-/// @prop {Number} $config.line-height Default line height
-/// @prop {Number} $config.line-height-dense Default dense line height
-/// @prop {Number} $config.size-ratio Font size scale when using preset sizes, ratio mixin)
-/// @prop {Number} $config.size-line-height-ratio Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desrireable
-/// @prop {Number} $config.responsive-change Amount to scale typography by browser's width (use viewport units)
-/// @prop {Number} $config.margin Default margin for typography (like paragraphs)
-
-$config: (
-  "font-size" : 16px, 
-  "font-family" : (ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif),
-  "font-family-sans" : (ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif),
-  "font-family-serif" : (Cambria, Georgia, serif),
-  "font-family-monospace" : (Menlo, Consolas, Monaco, monospace),
-  "font-weight" : inherit,
-  "font-weight-headline" : bold,
-  "font-weight-light" : 300,
-  "font-weight-normal" : normal,
-  "font-weight-semibold" : 600,
-  "font-weight-bold" : bold,
-  "line-height" : 1.5,
-  "line-height-dense": 1.3,
-  "line-height-spaced": 1.75,
-  "size-ratio": 2,
-  "size-line-height-ratio": 0.97,
-  "scale-steps": 5,
-  "responsive-change": 0.05vw, 
-  "margin-bottom":  1em,
-  "margin-top":  false,
-  "letter-spacing-uppercase" : 0.04em,
-  "max-width" : 60rem,
-  "max-width-small" : 50rem
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-///   @include typography.set-options(( "font-size" : 14px ));
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $changes Map of changes
-///   @include typography.set-options(( "font-size" : 14px ));
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, 'typography [config]');
-}
-
-/// Get scale of the base font-size
-/// @param {Number} $step Current size in the scale you want to calculate
-/// @return {Number} Scaled value
-
-@function scale($step) {
-  @return calculate.ratio-scale-size(get("font-size"), get("size-ratio"), get("scale-steps"), $step);
-}
-
-/// Get scale of the line-height
-/// @param {Number} $step Current size in the scale you want to calculate
-/// @return {Number} Scaled value
-/// @todo Setup breakpoints
-
-@function scale-line-height($step) {
-  @return calculate.ratio-scale-size(get("line-height"), get("size-line-height-ratio"), get("scale-steps"), $step);
-}
-
-/// Convert pixel value to rem value based on typography $font-size
-/// @param {Number} $pixels Pixel value to convert from
-/// @return {Number} Rem value
-
-@function rem($pixels) {
-  @if math.unit($pixels) == "px"  {
-    @return math.div($pixels, get("font-size")) * 1rem;
-  } @else {
-    @return $pixels + 1rem;
-  }
-}
-
-/// Changes pixels to em
-/// @param {Number} $value Pixel value to convert from
-/// @param {Number} $base Conversion base (defaults to font-size)
-/// @return {Number} Rem value
-
-@function em($value, $base: null) {
-  @if (math.unit($value) == "px") {
-    $base: if($base, $base, get("font-size"));
-    @return math.div($base, $value) * 1em;
-  } @else  {
-    @return $value;
-  }
-}
-
-/// Break word stradegy
-/// @param {Boolean} $force Force words to break (will have unusual breaks)
-
-@mixin word-break($force: false) {
-  word-break: if($force, break-all, normal);
-  word-break: break-word;
-  hyphens: auto;
-}
-
-/// Creates a size map 
-/// - This is just an accelerator for creating a size map
-/// - You can pass your own size maps using set-sizes()
-/// @param {Number} $font-size Font size
-/// @param {Number} $line-height Line height
-/// @param {Boolean} $is-headline Is a headline
-
-@function new-size($font-size, $line-height: true, $is-headline: false) {
-  @return (
-    "font-size": $font-size,
-    "font-weight" : if($is-headline, get("font-weight-headline"), null), 
-    "line-height": $line-height,
-    "responsive" : true,
-    "helper-class" : if($is-headline, false, true),
-    "helper-class-prefixed" : true,
-    "base-class" : if($is-headline, true, false),
-    "base-class-prefixed" : false
-  );
-}
-
-/// Default size presets
-/// @type Map
-/// @prop {Number} $size.name Name of size
-/// @prop {Number} $size.name.font-size Font size in rems or pixels
-/// @prop {Number} $size.name.line-height Line height (unitless)
-/// @prop {Number} $size.name.responsive Apply responsive sizes
-/// @prop {Boolean} $size.name.base-class This style should be included in the base (top can be overriden)
-/// @prop {Boolean} $size.name.helper-class This style should be included in the helpers (overrides)
-/// @todo Add adaptive and use a map of breakpoints and whether it's up or down
-/// @todo Add headlines
-
-$sizes: (
-  "small-x" :       new-size(scale(-2)),
-  "small" :         new-size(scale(-1)),
-  "base" :          new-size(scale(0)),
-  "large" :         new-size(scale(1),   scale-line-height(1)),
-  "large-x" :       new-size(scale(2),   scale-line-height(2)),
-  "large-xx" :      new-size(scale(3),   scale-line-height(3)),
-  "large-xxx" :     new-size(scale(4),   scale-line-height(4)),
-  "h1" :            new-size(scale(6),   scale-line-height(6),   true),
-  "h2" :            new-size(scale(5),   scale-line-height(5),   true),
-  "h3" :            new-size(scale(4),   scale-line-height(4),   true),
-  "h4" :            new-size(scale(3),   scale-line-height(3),   true),
-  "h5" :            new-size(scale(2),   scale-line-height(2),   true),
-  "h6" :            new-size(scale(1),   scale-line-height(1),   true)
-) !default;
-
-/// Update the typography presets map
-/// @param {Map} $changes A map to merge into the color palette
-/// @param {Map} $deep Use deep merge
-/// @param {Map} $overwrite Overwrite the presets completly (cannot be used with deep)
-/// @example scss Setting the error and type color
-///   @include typography.set((
-///     "small" : 0.8rem
-///   ));
-
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
-}
-
-/// Get a size's map
-/// @param {String} $name Name of size
-/// @return {Map} 
-
-@function get-size($name) {
-  @return utils.require-map-get($sizes, $name, 'typography [size]');
-}
-
-/// Print a font-size for a given size
-/// @todo Remove doesn't work for breakpoints or responsive 
-/// @param {String} $value Size name
-
-@function font-size($name: null) {
-  $size: get-size($name);
-  $font-size: map.get($size, "font-size");
-  @return rem($font-size);
-}
-
-/// Forces conversion to unitless line-height
-/// @param {Number} $line-height Line height size in px, em, or rem
-/// @param {Number} $font-size Font size in px, em, or rem
-
-@function unitless-line-height($line-height, $font-size) {
-  // Font size is rems, line-height is unkown
-  @if (math.is-unitless($line-height)) {
-    @return $line-height;
-  }
-  $unit: math.unit($line-height);
-  @if ($unit == "em") {
-    @return utility.strip-unit($line-height);
-  } @else if ($unit == "pixels" or $unit == "rem") {
-    $calc: math.div(rem($line-height), rem($font-size));
-    @return utility.strip-unit($calc);
-  } @else {
-    @error "ULU: Unable to convert to unitless line-height for: #{ $line-height }";
-  }
-}
-/// Print a value from the size and convert it (to appropriate unit for framework)
-/// @param {Map} $size Size's map 
-/// @param {String} $props The property to get
-
-@function get-size-converted-value($size, $prop) {
-  // Font size is calculated differently
-  $value: map.get($size, $prop);
-  $font-size: map.get($size, "font-size");
-  $type: meta.type-of($value);
-  
-  @if ($value == false or $value == null) {
-    @return null;
-  // Numbers and true (default) need to be converted
-  } @else if ($value == true or $type == number) {
-    // Get default value
-    @if ($value == true)  {
-      $value: get($prop);
-    }
-    // Force line-height to be unitless
-    @if ($prop == "line-height") {
-      @return unitless-line-height($value, $font-size);
-    }
-    // Convert to REM
-    @if (math.unit($value) == "px") {
-      $value: rem($value);
-    }
-    @return $value;
-  } @else {
-    @return $value;
-  }
-}
-
-
-/// Get a sizes property value that doesn't need conversion 
-/// - Reason: Will map to default if user set's size prop to true
-/// @param {Map} $size Size's map 
-/// @param {String} $props The property to get
-
-@function get-size-value($size, $prop) {
-  $value: map.get($size, $prop);
-  // Default
-  @if ($value == true) {
-    $value: get($prop);
-  }
-  @return $value;
-}
-
-/// Print's the responsive type formula
-/// @param {String} $font-size Name to retrieve from sizes map or a unique size map that follows the API
-/// @param {Map} $changes Modifications to be merged into size before using
-
-@mixin font-size-responsive($font-size, $amount: get("responsive-change")) {
-  font-size: calc(#{ $font-size } + #{ $amount });
-}
-
-/// Print a typography size (font-size, line-height)
-/// @param {String} $nameOrMap Name to retrieve from sizes map or a unique size map that follows the API
-/// @param {Map} $changes Modifications to be merged into size before using
-
-@mixin size($name, $changes: false, $only-font-size: null) {
-  $size: $name;
-  // Allow custom maps
-  @if (meta.type-of($name) == "string") {
-    $size: get-size($name);
-  }
-  @if ($changes) {
-    $size: map.merge($size, $changes);
-  }
-  $font-size: get-size-converted-value($size, "font-size");
-  $breakpoints: map.get($size, "breakpoints");
-  $responsive: map.get($size, "responsive");
-  $color: map.get($size, "color");
-
-  font-size: $font-size;
-  @if ($responsive) {
-    @if (meta.type-of($responsive) == "number") {
-      @include font-size-responsive($font-size, $responsive);
-    } @else {
-      @include font-size-responsive($font-size);
-    }
-  }
-  @if (not $only-font-size) {
-    font-weight: get-size-value($size, "font-weight");
-    font-family: get-size-value($size, "font-family");
-    line-height: get-size-converted-value($size, "line-height");
-    margin-top: get-size-converted-value($size, "margin-top");
-    margin-bottom: get-size-converted-value($size, "margin-bottom");
-    color: if($color, color.get($color), null);
-  }
-
-  // If they have breakpoints, process them
-  @if $breakpoints {
-    @each $name, $breakpoint in $breakpoints {
-      $direction: map.get($breakpoint, "direction");
-      @include breakpoint.from($name, $direction) {
-        @include size($breakpoint, null, $only-font-size);
-      }
-    }
-  }
-}

package/trash/scss-before-cqc-update/_units.scss

@@ -1,48 +0,0 @@
-////
-/// @group units
-////
-/// @todo Finish Documentation
-
-@use "sass:meta";
-@use "sass:map";
-@use "utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} small-x 
-/// @prop {Number} small 
-/// @prop {Number} default Base unit of measurent
-/// @prop {Number} large 
-/// @prop {Number} large-x 
-/// @prop {Number} large-xx 
-
-$config: (
-  "small-x" : 1rem * 0.5,
-  "small" : 1rem * 0.75,
-  "default" : 1rem,
-  "large" : 1rem * 2,
-  "large-x" : 1rem * 3,
-  "large-xx" : 1rem * 4
-) !default;
-
-/// Update the units config
-/// @param {Map} $changes A map to merge into the color palette
-/// @example scss Setting the error and type color
-///   @include units.set((
-///     "default" : 1.5em
-///   ));
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a unit by name (preset) or number (multiplier of base)
-/// @param {Number|String} $value if a number is passed it is used as a multiplier of the base, if a string is passed it is used to lookup a value from unit presets @see $config
-/// @return {Number}
-
-@function get($value: 1) {
-  @if (meta.type-of($value) == string) {
-    @return utils.require-map-get($config, $value, 'unit [config]');
-  }
-  @return get("default") * $value;
-}

package/trash/scss-before-cqc-update/_utility.scss

@@ -1,13 +0,0 @@
-////
-/// @group utility
-////
-/// @todo Finish Documentation
-
-@use "sass:math";
-
-/// Strips the unit from the number
-/// @link https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass/12335841#12335841 Orginal source (Miriam Suzanne)
-
-@function strip-unit($value) {
-  @return math.div($value, ($value * 0 + 1));
-}

package/trash/scss-before-cqc-update/_utils.scss

@@ -1,211 +0,0 @@
-////
-/// @group utils
-////
-/// @todo Finish Documentation
-
-@use "sass:map";
-@use "sass:meta";
-@use "sass:math";
-@use "sass:list";
-@use "sass:string";
-
-/// Module Settings
-/// @type Map
-/// @prop {Boolean} $config.debug-maps Debugs include map print outs
-/// @prop {Boolean} $config.file-header-comments Remove comment headers if you'd like
-
-$config: (
-  "debug-maps": true,
-  "file-header-comments": true
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.set(( "property" : value ));
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $name Name of property
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.get("property");
-
-@function get($name) {
-  @return require-map-get($config, $name, 'utils');
-}
-
-/// Get a required value from a map, throw an error if not found
-/// - Remeber that that maps cannot intentionally use null (use false instead, if trying to avoid output if unconfigured)
-/// @param {Map} $map The map to get the value from
-/// @param {String} $key The key in the map to get value from
-/// @param {String} $context The context of using this function for debugging help
-/// @return {*} The value from the map
-
-@function require-map-get($map, $key, $context: "unknown") {
-  // $value: map.get($map, $key);
-  @if (map.has-key($map, $key)) {
-    @return map.get($map, $key);
-  } @else {
-    @if (get("debug-maps")) {
-      @debug $map;
-    }
-    @error 'ULU: Unable to find  "#{ $key }" in #{ $context } map.';
-  }
-}
-
-/// Utility for providing fallbacks, the first truthy value (non false or null) will be returned
-/// @param {*} $args... Any number of arguments 
-/// @return {*} The first truthy value
-
-@function fallback($args...) {
-  @each $arg in $args {
-    @if ($arg) {
-      @return $arg;
-    }
-  }
-  @return null;
-}
-
-/// Provides fallback values from the same map
-@function map-fallback($map, $properties...) {
-  @each $prop in $properties {
-    $value: map.get($map, $prop);
-    @if ($value) {
-      @return $value;
-    }
-  }
-  @return null;
-}
-
-/// Ensure a value is present in the list, throw an error if not found
-/// @param {List} $list The map to get the value from
-/// @param {String} $value The value to search for in the list
-/// @param {String} $context The context of using this function for debugging help
-
-@mixin require-list-has($list, $value, $context: "unknown") {
-  $index: list.index($list, $value) != null;
-  @if ($index == null) {
-    @error 'ULU: Unable to find item "#{ $value }" in #{ $context } list.';
-  }
-}
-
-/// Require that the list only is only made up of allowed items
-/// @param {List} $allowed The list of allowed items
-/// @param {String} $list The list to test allowed against
-
-@mixin require-list-contains($allowed, $list, $context: "unknown") {
-  @each $item in $list {
-    @include require-list-has($allowed, $item, $context);
-  }
-}
-
-/// Returns true if we should include something (map of booleans)
-/// @param {String} $name Name of item to see if it's included
-/// @param {Map} $includes Map of includes
-
-@function included($name, $includes) {
-  $value: map.get($includes, $name);
-  @return $value == true;
-}
-
-/// Returns true if we should include something (used for output checking)
-/// @param {List} $context The root area of the framework this file comes from
-/// @param {List} $name The name of the specific area/file (optional)
-
-@mixin file-header($context, $name: "") {
-  @if ("file-header-comments") {
-/* 
-=============================================================================
-#{ $context }:#{ $name }
-============================================================================= 
-*/
-  }
-}
-
-// Provide a default when value typpe is not correct
-/// @param {String} $type type of value it should be
-/// @param {String} $value the value to provide if it is that type
-/// @param {String} $fallback the fallback value
-
-@function if-type($type, $value, $fallback) {
-  @if meta.type-of($value) == $type {
-    @return $value;
-  } @else {
-    @return $fallback;
-  }
-}
-
-// Returns number unit info, and strips the unit
-/// @param {String} $number Number to get meta info for
-/// @return {Map} With properties (unit, value)
-
-@function number-info($number) {
-  $is-number: meta.type-of($number) != 'number';
-  $is-unitless: math.is-unitless($number);
-  @if ($is-unitless or not $is-number) {
-    @return (
-      "unit": null,
-      "value": $number 
-    );
-  } @else {
-    @return (
-      "unit" : math.unit($value), 
-      "value": math.div($number, ($number * 0 + 1))
-    );
-  }
-}
-
-/// Repeatable pattern in core
-
-@function map-merge-or-overwrite($original, $changes, $deep: false, $overwrite: false) {
-  @if $deep {
-    @return map.deep-merge($original, $changes);
-  } @else if $overwrite {
-    @return $changes;
-  } @else {
-    @return map.merge($original, $changes);
-  }
-}
-
-/// Helps in providing a dynamic fallback for modules whose defaults should come from another
-/// @param {String} $prop Property trying to get fallback for
-/// @param {*} $value The value that may need the fallback
-/// @param {Map} $lookup Map of properties to functions (use sass:meta > meta.get-function to populate)
-/// @return {*} The user's original value, or if the value is true get the default value from the provided function
-
-@function function-fallback($prop, $value, $lookup) {
-  // If there was already a value return it else resolve through passed function
-  @if ($value == true)  {
-    $fn: map.get($lookup, $prop);
-    @if ($fn) {
-      @return meta.call($fn, $prop);
-    } 
-  }
-  @return $value;
-}
-
-/// Replaces all or one occurence of a string within a string
-/// @param {String} $string String to operate on
-/// @param {String} $find String to find within string
-/// @param {String} $replace String to replace found strings
-/// @param {Boolean} $all Default true replace all matches, if false replace only first
-
-@function string-replace($string, $find, $replace, $all: true) {
-
-  $index: string.index($string, $find);
-  
-  @if ($index) {
-    $start: if($index == 1, "", string.slice($string, 1, string.length($find) - 1));
-    $end: string.slice($string, $index + string.length($find));
-    $new: $start + $replace;
-    @if ($all) {
-      @return $new + string-replace($end, $find, $replace);
-    } @else {
-      @return $new + $end;
-    }
-  } @else {
-    @return $string;
-  }
-}

package/trash/scss-before-cqc-update/base/_color.scss

@@ -1,14 +0,0 @@
-////
-/// @group color
-////
-/// @todo Finish Documentation
-
-@use "../utils";
-@use "../color";
-
-/// Prints color-context styles as base classes (top of stylesheet)
-
-@mixin styles {
-  @include utils.file-header('base', 'color');
-  @include color.all-context-styles("base-class");
-}