@ulu/frontend 0.0.3 → 0.0.6

package/trash/scss-old/_utils.scss

@@ -1,186 +0,0 @@
-////
-/// @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 ($value != null) {
-    @return $value;
-  } @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 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-old/base/_color.scss

@@ -1,13 +0,0 @@
-////
-/// @group base-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/trash/scss-old/base/_elements.scss

@@ -1,183 +0,0 @@
-////
-/// @group base-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: (
-  "links-state-styling" : 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: white;
-    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 {
-    @if (get("links-state-styling")) {
-      @include element.link();
-    } @else {
-      @include element.link-defaults();
-    }
-  }
-  // 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/trash/scss-old/base/_index.scss

@@ -1,62 +0,0 @@
-////
-/// @group base (import 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/trash/scss-old/base/_keyframes.scss

@@ -1,74 +0,0 @@
-////
-/// @group base-keyframes
-////
-
-@use "../utils";
-
-/// Prints CSS keyframes
-/// @name base-keyframes-styles
-/// @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);
-    }
-  }
-}

package/trash/scss-old/base/_layout.scss

@@ -1,81 +0,0 @@
-////
-/// @group base-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]");
-}
-
-@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 }-column {
-      display: flex;
-      flex-direction: column;
-    }
-    #{ $prefix }-column-center {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-  }
-}