@ulu/frontend 0.0.3

package/scss/_units.scss

@@ -0,0 +1,47 @@
+////
+/// @group units
+////
+
+@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/scss/_utility.scss

@@ -0,0 +1,12 @@
+////
+/// @group utility
+////
+
+@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/scss/_utils.scss

@@ -0,0 +1,209 @@
+////
+/// @group utils
+////
+
+@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.';
+  }
+}
+
+/// 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 type 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);
+  }
+}
+
+/// Utility for providing fallbacks, the first truthy value (non false or null) will be returned
+/// @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;
+}
+
+/// 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/scss/base/_color.scss

@@ -0,0 +1,13 @@
+////
+/// @group color
+////
+
+@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");
+}

package/scss/base/_elements.scss

@@ -0,0 +1,188 @@
+////
+/// @group elements
+////
+
+@use "sass:map";
+
+@use "../utils";
+@use "../color";
+@use "../element";
+@use "../typography";
+@use "../breakpoint";
+@use "../button";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.links-state-styling Just color/defaults vs hover/visited/active
+
+$config: (
+  "link" : true,
+  "link:hover" : true,
+  "link:visited" : false
+) !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 utils.require-map-get($config, $name, "element [config]");
+}
+
+/// Prints elements base styles
+/// @name base-elements-styles
+/// @example scss
+///  @include ulu.base-elements-styles();
+
+@mixin styles {
+
+  @include utils.file-header('base', 'elements');
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+  body {
+    color: color.get('type');
+    background-color: color.get("background");
+    font-family: typography.get("font-family");
+    margin: 0;
+    // Note we are using relative units here instead of setting a 
+    // pixel base like we use to on the HTML
+    // This will allow the user preference in font size
+    // Useful for accessibility
+    @include typography.size("base");
+    @include breakpoint.embed-for-scripts();
+  }
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6, 
+  ul, 
+  ol, 
+  li,
+  pre, 
+  code,
+  p { 
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    border-width: 0;
+    border-style: solid;
+    font-weight: inherit;
+  }
+  p {
+    $margin-top: typography.get("margin-top");
+    margin-top: if($margin-top, $margin-top, 0);
+    margin-bottom: typography.get("margin-bottom"); 
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  small { 
+    @include typography.size("small", ("line-height" : typography.get("line-height-dense"))); 
+  }
+  sub { 
+    bottom: -0.25em; 
+  }
+  sup { 
+    top: -0.5em; 
+  }
+  b, 
+  strong { 
+    font-weight: bold; 
+  }
+  form {
+    width: 100%;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: typography.get("font-family-monospace");
+  }
+  hr {
+    height: 0;
+    border: 0;
+    box-sizing: content-box;
+    overflow: visible;
+    margin: element.get("margin") 0;
+    border-bottom: element.get-rule-style();
+  }
+  iframe {
+    border: 0;
+    outline: 0;
+  }
+  figure {
+    margin: 0;
+  }
+  img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    border-style: none;
+  }
+  // Not styling ordered lists because they are used in navigation and other UI components
+  ul { 
+    list-style: none; 
+  }
+  // Style ordered lists since we don't use them much in the UI components
+  ol {
+    list-style: none; 
+  }
+  
+  a {
+    // User can disable link styling if they want to add more specific styling
+    // and omit this in element base
+    @if (get("link")) {
+      @include element.link-defaults(
+        $hover: get("link:hover"),
+        $visited: get("link:visited"),
+      );
+    }
+  }
+  // button,
+  // [type="button"],
+  // [type="reset"],
+  // [type="submit"] {
+  //   @include button.reset();
+  // }
+  // For accessible tabs
+  [role="tab"] {
+    cursor: pointer;
+  }
+  dt { 
+    font-weight: bold;
+  }
+  [hidden], 
+  template {
+    display: none;
+  }
+  blockquote {
+    margin: 0;
+  }
+}

package/scss/base/_index.scss

@@ -0,0 +1,62 @@
+////
+/// @group all
+////
+
+@forward "normalize" as normalize-*;
+@forward "elements" as elements-*;
+@forward "keyframes" as keyframes-*;
+@forward "typography" as typography-*;
+@forward "layout" as layout-*;
+
+@use "sass:map";
+@use "../utils";
+@use "normalize";
+@use "typography";
+@use "elements";
+@use "color";
+@use "keyframes";
+@use "layout";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "normalize" : true, 
+  "elements" : true, 
+  "keyframes" : true, 
+  "typography" : true,
+  "color" : true,
+  "layout" : true
+);
+
+/// Prints all Base styles
+/// @name base-styles
+/// @param {List} $includes A list of changes to this module's includes
+/// @example scss
+///  @include ulu.base-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("base");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "normalize")) {
+    @include normalize.styles;
+  }
+  @if (map.get($-all-includes, "elements")) {
+    @include elements.styles;
+  }
+  @if (map.get($-all-includes, "keyframes")) {
+    @include keyframes.styles;
+  }
+  @if (map.get( $-all-includes, "typography")) {
+    @include typography.styles;
+  }
+  @if (map.get($-all-includes, "color")) {
+    @include color.styles;
+  }
+  @if (map.get($-all-includes, "layout")) {
+    @include layout.styles;
+  }
+}
+

package/scss/base/_keyframes.scss

@@ -0,0 +1,78 @@
+////
+/// @group keyframes
+////
+
+@use "../utils";
+
+/// Prints CSS keyframes
+/// @example scss
+///  @include ulu.base-keyframes-styles();
+
+@mixin styles {
+  @include utils.file-header('base', 'keyframes');
+  @keyframes fadeIn {
+    0% {
+      opacity: 0; 
+    }
+    100% {
+      opacity: 1; 
+    }
+  }
+  @keyframes FadeDownIn {
+    0% {
+      opacity: 0; 
+      transform: translateY(-10px);
+    }
+    100%  {
+      opacity: 1; 
+      transform: translateY(0);
+    }
+  }
+  @keyframes fadeInLeft {
+    0% {
+      opacity: 0; 
+      transform: translatex(-10px);
+    }
+    100% {
+      opacity: 1; 
+      transform: translatex(0);
+    }
+  }
+  @keyframes fadeInZoom {
+    // Delay
+    0% {
+      opacity: 0; 
+      transform: scale(0);
+    }
+    // Start
+    50% {
+      opacity: 0; 
+      transform: scale(0);
+    }
+    100%  {
+      opacity: 1; 
+      transform: scale(1);
+    }
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100%  {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spin {
+    from {
+      transform:rotate(0deg);
+    }
+    to {
+      transform:rotate(360deg);
+    }
+  }
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

package/scss/base/_layout.scss

@@ -0,0 +1,100 @@
+////
+/// @group layout
+////
+
+@use "sass:map";
+@use "../layout";
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+
+$config: (
+  "containers" : true,
+  "container-nested-no-padding" : false,
+  "layout-flex" : 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 utils.require-map-get($config, $name, "base layout [config]");
+}
+
+/// Output Styles 
+
+@mixin styles {
+
+  @if (get("containers")) {
+    @each $name, $values in layout.$containers {
+      $class: selector.class($name);
+      #{ $class } {
+        @include layout.container-styles($name);
+      }
+    }
+  }
+  @if (get("container-nested-no-padding")) {
+    $prefix: selector.class("container", $name-only: true);
+    [class|="#{ $prefix }"] {
+      [class|="#{ $prefix }"] {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+
+  @if (get("layout-flex")) {
+    $prefix: selector.class("layout-flex");
+
+    #{ $prefix } {
+      display: flex;
+    }
+    #{ $prefix }-justified {
+      display: flex;
+      justify-content: space-between;
+    }
+    #{ $prefix }-center {
+      display: flex;
+      align-items: center;
+    }
+    #{ $prefix }-center-all {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    #{ $prefix }-justify-end {
+      display: flex;
+      justify-content: flex-end;
+    }
+    #{ $prefix }-baseline {
+      display: flex;
+      align-items: baseline;
+    }
+    #{ $prefix }-end {
+      display: flex;
+      align-items: flex-end;
+    }
+    #{ $prefix }-column {
+      display: flex;
+      flex-direction: column;
+    }
+    #{ $prefix }-column-center {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+}