@ulu/frontend 0.0.3 → 0.0.6

package/trash/scss-before-cqc-update/helpers/_utilities.scss

@@ -1,88 +0,0 @@
-////
-/// @group utilities
-////
-/// @todo Finish Documentation
-
-@use "../utils";
-@use "../utility";
-@use "../layout";
-
-/// Print utilities helper styles
-/// @example scss
-///  @include ulu.helper-utilities-styles();
-
-@mixin styles {
-
-  @include utils.file-header('helpers', 'utilities');
-  
-  // Consider removing
-  .no-scroll-y { 
-    overflow-y: hidden; 
-  }
-  .no-scroll-x { 
-    overflow-x: hidden; 
-  }
-  .full-height {
-    height: 100%;
-  }
-  .full-width {
-    width: 100%;
-  }
-  .flex-basis-full {
-    flex-basis: 100%;
-  }
-  .full-min-height {
-    min-height: 100%;
-  }
-  .image-fill {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .image-full-width img,
-  .image-full-width {
-    width: 100%;
-    height: auto;
-  }
-  .margin-auto,
-  .center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .margin-left-auto {
-    margin-left: auto;
-  }
-  .margin-right-auto {
-    margin-right: auto;
-  }
-  .no-margin {
-    margin: 0;
-  }
-  .no-margin-top {
-    margin-top: 0;
-  }
-  .no-margin-bottom {
-    margin-bottom: 0;
-  }
-  .no-margin-left {
-    margin-left: 0;
-  }
-  .no-margin-right {
-    margin-right: 0;
-  }
-  .no-padding {
-    padding: 0;
-  }
-  .no-padding-top {
-    padding-top: 0;
-  }
-  .no-padding-bottom {
-    padding-bottom: 0;
-  }
-  .no-padding-left {
-    padding-left: 0;
-  }
-  .no-padding-right {
-    padding-right: 0;
-  }
-}

package/trash/scss-before-cqc-update/stylesheets/README.md

@@ -1,3 +0,0 @@
-# About Packages
-
-Packages are imports than bring in certain sets of stylesheets or libraries.

package/trash/scss-before-cqc-update/stylesheets/full.scss

@@ -1,17 +0,0 @@
-////
-/// @group stylesheet
-////
-/// Stylesheet includes everything user just imports it
-/// - Note: Not configurable as far as output of styles (use minimal)
-/// @todo Finish Documentation
-
-@forward "../";
-
-@use "../base";
-@use "../components";
-@use "../helpers";
-
-// Output all stylesheets
-@include base.styles();
-@include components.styles();
-@include helpers.styles();

package/trash/scss-old/README.md

@@ -1,58 +0,0 @@
-
-### Directory Contents/Structure
-
-1. Base - The area for the base styles (normalize, html elements)
-2. Components - The area for reusable ui/layout components
-3. Helpers - The place for stylesheets that provide overriding/atomic styles (accessibility, type classes, etc)
-4. Lib - The modules that are used throughout the system and on the user's side
-5. Packages - Entry points for users with preset imports 
-   - Note: User's will need to add a namespace like `ulu` when importing a package
-
-### Important Goals
-
-1. You should be able get access to anything from the user's side
-   - Mixins, Functions, Variables
-   - Styles - Things should be able to be 
-     - Extended into a pre-existing system (when you have little selector control)
-     - Mixing in styles when needed
-       - Use placeholders as a more flexible selector system
-2. Namespacing
-   - Should you be able to namespace the library (selectors not modules)?
-     - Would create a log of interpolation which makes the codebase harder to maintain
-     - Bigger barrier if someone else works into this
-     - Probably important with certain components
-     - If it's within a module/component (interpolation) it's probably not a huge deal
-
-### Rules
-
-- Leverage default parameters in mixin and functions over config defaults that rely on other module's configuration
-  - Testing shows that these are evaluated when the function is called, which makes sense because if not these may have all the same references (thinking JS has the parameter scope and is evaluated on call)
-- No changing vars (aka with)
-- No extending (not supported, only within the same module for convenience)
-- No relying on use of @use > with to configure, it's too complicated for user (and me). 
-  - Use mixin to set vars (kind of a pain but we should probably rely more on maps so there isn't so much repetition)
-- Kabab case will be used for everything, @see "Module Prefixes" below, works better with kabab case
-- Modules use simple variable, mixins and function names relative to their module
-- Forwards will make namespacing in the overall ulu packaged module
-- **Module Prefixes:** Modules all get prefixed by parent module ie lib will transform color.set() to color-set(), adding the modules namespace for users that are importing the whole library. It also matches the core modules `map-get()` and when @used `map.get()`
-
-### Writing Docs
-
-- Should be written from the user's point of view
-  - Use prefixes @see "Module Prefixes" in member names. This will avoid confusion about normal use case. For advanced user importing specific parts would already be familiar with this pattern. 
-
-### Ideas
-
-- How to solve the inability to use standard vars (avoid with)
-  - Use maps (reduce code repetition, just need boiler plate get/set (may be able to contain this in utils and extend the module not sure if you can add functions to a namespace dynamically?))
-    - Issue: You can't use it for grandchild deps defaults, aka if another dep has .get() then it will get the unconfigured value
-      - The issue is that these things are not references or there is no way to easily poin
-      - Think how do we solve this in JS?
-      - Could this be solved by some standardized lifecycle?
-        - Fuzzy but something that the user has to call to initialize? (don't like this)
-      - Could this be solved by tokens? Like the color library (actual value is set when requested, versus variables (on module init))
-    - Note: This is one reason the element system ("_element()") mixin could be handy across the board. It still has the same issue though in terms of references changing (maps being cloned and they aren't references)
-    - Could use a global config/theme and allow that to be set with "with"
-    - Or allow the user to configure the modules and not try and group modules
-      - One flat list
-    - Needs more thought

package/trash/scss-old/_breakpoint.scss

@@ -1,140 +0,0 @@
-////
-/// @group breakpoint
-/// Breakpoint Utility Functions
-////
-
-@use "sass:map";
-@use "calculate";
-@use "utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.base  Assumed pixel base, can change based on users font settings so this is just o get us in the ballpark). Note this is not the base font size but the user agent's or user's browser preferernce. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)
-/// @prop {Number} $config.gap  The amount to offset min from max media queries incase you are using both (ie prevent overlap)
-/// @prop {String} $config.null-name The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property
-/// @prop {String} $config.default the name of the breakpont that is considered the major change (ie desktop to mobile) used by other modules/components
-
-$config: (
-  "base":      16px,
-  "gap":       0.01em,
-  "null-name": "none",
-  "default" :  "small"
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-///   @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
-///   @include module-name.get("property");
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, 'breakpoint [config]');
-}
-
-
-/// The default breakpoint sizes (targets are not precise, using em's)
-/// @type Map
-
-$sizes: (
-  "small"  : calculate.pixel-to-em(680px, get("base")),
-  "medium" : calculate.pixel-to-em(1200px, get("base")),
-  "large"  : calculate.pixel-to-em(1500px, get("base"))
-) !default;
-
-/// Update the breakpoint sizes map
-/// @param {Map} $changes A map to merge into the breakpoints map
-/// @example scss Changing the medium breakpoint and adding jumbo
-///   @include breakpoints.set((
-///     "medium" : 50em,
-///     "jumbo" : 100em
-///   ));
-
-@mixin set($changes) {
-  $sizes: map.merge($sizes, $changes) !global;
-}
-
-@function exists($name) {
-  $size: map.get($sizes, $name);
-  @return if($size != null, true, false);
-}
-
-/// Create a media query that matches the min-width for a given size
-/// @param {Number} $size The name of the breakpoint bsize
-/// @example scss
-///   @include breakpoints.min("small") {
-///     // Your styles
-///   }
-
-@mixin min($size) {
-  // Adding the small fraction to prevent overlap
-  $min: utils.require-map-get($sizes, $size, "breakpoints"); 
-  @media screen and (min-width: $min) {
-    @content;
-  }
-}
-
-/// Create a media query that matches the max-width for a given size
-/// @param {Number} $size The name of the breakpoint size
-/// @example scss
-///   @include breakpoints.max("medium") {
-///     // Your styles
-///   }
-
-@mixin max($size) {
-  // Adding the small fraction to prevent overlap
-  $max: utils.require-map-get($sizes, $size) - get("gap"); 
-  @media screen and (max-width: $max) {
-    @content;
-  }
-}
-
-/// Create a media query that matches the min-width and max-width sizes
-/// @param {Number} $size The name of the breakpoint size
-/// @example scss
-///   @include breakpoints.min-max("small", "medium") {
-///     // Your styles
-///   }
-
-@mixin min-max($size-min, $size-max) {
-  // Adding the small fraction to prevent overlap
-  $min: utils.require-map-get($sizes, $size-min, "breakpoints"); 
-  $max: utils.require-map-get($sizes, $size-max, "breakpoints") - get("gap"); 
-  @media screen and (min-width: $min) and (max-width: $max) {
-    @content;
-  }
-}
-
-@mixin from($name, $direction: "min") {
-  @if ($direction == "min" or $direction == "up") {
-    @include min($name) {
-      @content;
-    }
-  } @else if ($direction == "max" or $direction == "down") {
-    @include max($name) {
-      @content;
-    }
-  } @else {
-    @error "ULU: Mixin error (breakpoint.from), incorrect argument '$direction' use either (min, max, up, down)";
-  }
-
-}
-
-/// Attaches breakpoints to an element psuedo content for access via script
-/// Use with ulu/js/breakpoints. Breakpoints always min-width (upwards)
-
-@mixin embed-for-scripts() {
-  &:before {
-    display: none;
-    content: get("null-name");
-    @each $size, $breakpoint in $sizes {
-      @include min($size) {
-        content: $size;
-      }
-    }
-  }
-}

package/trash/scss-old/_button.scss

@@ -1,223 +0,0 @@
-////
-/// @group button
-////
-
-/// Version:        1.0.1
-
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-
-@use "color";
-@use "element";
-@use "typography";
-@use "utils";
-
-// Used for function fallback
-$-element-get: meta.get-function("get", false, "element");
-$-fallbacks: (
-  "box-shadow" : $-element-get
-);
-
-/// Module Settings
-/// @type Map
-
-$config: (
-  "padding":                 (0.75em 1.5em),
-  "background-color":        color.tint(black, 30%),
-  "background-color-hover": black,
-  "font-family":             inherit,
-  "font-weight":             bold,
-  "line-height":             1.1,
-  "letter-spacing":          0.02em,
-  "text-transform":          normal,
-  "text-shadow":             none,
-  "font-size":               "base",
-  "color":                   white,
-  "color-hover":            white,
-  "box-shadow":              true,
-  "border-radius":           2rem,
-  "border-width":            0,
-  "border-color":            transparent,
-  "border-color-hover":     transparent,
-  "margin":                  (0.45em 0.5em 0.45em 0),
-  "min-width":               9rem,
-  "icon-size":               2.5rem,
-  "icon-font-size":          1.38rem,
-  "icon-border-radius":      50%,
-  "text-decoration" :        none
-) !default;
-
-/// Button sizes
-/// @type Map
-
-$sizes: (
-  "small" : (
-    "padding":        (0.35em 1.5em),
-    "min-width":      0,
-    "icon-size":      2rem,
-    "icon-font-size": 1rem
-  ),
-  "large" : (
-    "padding":   (1em 2em),
-    "min-width": 11rem,
-    "icon-size": 3.5rem
-  )
-) !default;
-
-/// Button styles
-/// @type Map
-
-$styles: (
-  "transparent" : (
-    "background-color" : transparent,
-    "color" : "type",
-    "border-color" : transparent,
-    "box-shadow" : none,
-    "hover" : (
-      "background-color" : "white",
-      "color" : inherit,
-      "border-color" : transparent,
-    )
-  ),
-  "outline" : (
-    "background-color" : transparent,
-    "color" : "type",
-    "border-color" : "rule",
-    "box-shadow" : none,
-    "hover" : (
-      "background-color" : "white",
-    )
-  ),
-) !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) {
-  $value: utils.require-map-get($config, $name, "button [config]");
-  @return utils.function-fallback($name, $value, $-fallbacks);
-}
-
-@mixin set-styles($changes, $deep: false, $overwrite: false) {
-  $styles: utils.map-merge-or-overwrite($styles, $changes, $deep, $overwrite) !global;
-}
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
-}
-
-@mixin reset() {
-  text-transform: none;
-  text-align: inherit;
-  background-color: transparent;
-  border: transparent;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  appearance: none; 
-  color: inherit; 
-  cursor: pointer;
-}
-@mixin default($with-reset: false) {
-  $font-size: get("font-size");
-  @if ($with-reset) {
-    @include reset();
-  }
-  display: inline-block;
-  text-transform: get("text-transform");
-  text-align: center;
-  text-shadow: get("text-shadow");
-  vertical-align: middle;
-  font-family: get("font-family");
-  font-weight: get("font-weight");
-  font-size: if(get("font-size"), typography.font-size(get("font-size")), null);
-  @if ($font-size) {
-    @include typography.size($font-size, null, true);
-  }
-  border-radius: get("border-radius");
-  background-clip: padding-box;
-  padding: get("padding");
-  line-height: get("line-height");
-  letter-spacing: get("letter-spacing");
-  box-shadow: get("box-shadow");
-  margin: get("margin");
-  min-width: get("min-width");
-  max-width: 100%; // Questionable, not sure if it's needed
-  // Should override link visted coloring
-  &,
-  &:visited {
-    color: color.get(get("color"));
-    border: get("border-width") solid get("border-color");
-    background-color: get("background-color");
-    text-decoration: get("text-decoration");
-  }
-  &:last-child {
-    margin-right: 0;
-  }
-  &:hover {
-    color: get("color-hover");
-    background-color: get("background-color-hover");
-    border-color: get("border-color-hover");
-    text-decoration: get("text-decoration");
-  }
-}
-
-@mixin size($name) {
-  $size: utils.require-map-get($sizes, $name, 'button [size]');
-  $font-size: map.get($size, "font-size");
-  padding: map.get($size, "padding");
-  border-radius: map.get($size, "border-radius");
-  border-width: map.get($size, "border-width");
-  min-width: map.get($size, "min-width");
-  @if $font-size {
-    @include typography.size($font-size)
-  }
-}
-
-@function get-style-value($name, $prop, $for-hover: false) {
-  $is-color-prop: string.index($prop, "color");
-  $style: utils.require-map-get($styles, $name, 'button [color value]');
-  $hover: map.get($style, "hover");
-  $hover: if($hover, $hover, ());
-  $from: if($for-hover, $hover, $style);
-  $value: map.get($from, $prop);
-  $value: if($value, $value, map.get($style, $prop)); // Fallback to parent (if hover)
-
-  @if (meta.type-of($value) == "string" and $is-color-prop and $value != "inherit" and $value != "transparent") {
-    @return color.get($value);
-  } @else {
-    @return $value;
-  }
-}
-
-@mixin style($name) {
-  &,
-  &:visited {
-    background-color: get-style-value($name, "background-color", false);
-    color: get-style-value($name, "color", false);
-    border-color: get-style-value($name, "border-color", false);
-    border-width: get-style-value($name, "border-width", false);
-    box-shadow: get-style-value($name, "box-shadow", false);
-    text-decoration: get-style-value($name, "text-decoration", false);
-    font-weight: get-style-value($name, "font-weight", false);
-  }
-  &:hover {
-    background-color: get-style-value($name, "background-color", true);
-    color: get-style-value($name, "color", true);
-    border-color: get-style-value($name, "border-color", true);
-    box-shadow: get-style-value($name, "box-shadow", true);
-    text-decoration: get-style-value($name, "text-decoration", true);
-  }
-}

package/trash/scss-old/_calculate.scss

@@ -1,64 +0,0 @@
-////
-/// @group calculate
-////
-
-@use "sass:math";
-@use "sass:map";
-@use "utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.responsive-change Default responsive amount to modify items using responsive-property mixin
-
-$config: (
-  "responsive-change": 0.5vw
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-///   @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
-///   @include module-name.get("property");
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "calculate [config]");
-}
-
-/// Calculate the size of something at a given scale (percentage/exponential)
-/// @param {Number} $base The number the scale starts at
-/// @param {Number} $ratio The amount the scale changes over one set
-/// @param {Number} $sizes The number of steps in the scale
-/// @param {Number} $size The step you are trying to calculate
-/// @return {Number}
-
-@function ratio-scale-size($base, $ratio, $sizes, $size) {
-  @return $base * math.pow($ratio, math.div($size, $sizes));
-}
-
-/// Convert from pixel to em
-/// @param {Number} $pixels The number the scale starts at
-/// @param {Number} $base How many pixels equal 1em
-/// @return {Number} Em Conversion
-
-@function pixel-to-em($pixels, $base: 16px) {
-  @return math.div($pixels, $base) + 1em;
-}
-
-/// Provides user with a fallback for a calc that's just an enhancement
-/// @param {String} $property The CSS property to set
-/// @param {*} $value The value to set on the property
-/// @param {Css} $responsive-change The amount to change (vw or vh units) (combined with unit past)
-
-@mixin responsive-property(
-  $property, 
-  $value, 
-  $responsive-change: get("responsive-change")
-) {
-  #{ $property } : $value;
-  #{ $property } : calc(#{ $value } + #{ $responsive-change });
-}