@ulu/frontend 0.0.3 → 0.0.6

package/trash/logo.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198 203">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #fff;
-      }
-
-      .cls-2 {
-        fill: #925f93;
-      }
-    </style>
-  </defs>
-  <circle class="cls-2" cx="99" cy="101.5" r="98.98"/>
-  <path class="cls-1" d="m62,60.46h-12.6v-7.94h34.8v7.94h-12.6v52.75c0,6.98,1.37,13.15,4.24,17.67,4.52,6.99,12.74,10.83,23.15,10.83s18.91-3.98,23.15-11.23c2.74-4.66,4.25-10.55,4.25-17.54v-52.48h-12.61v-7.94h34.8v7.94h-12.61v52.88c0,8.91-2.19,16.99-6.16,22.75-6.3,9.32-17.54,14.39-30.83,14.39s-24.93-5.21-31.1-14.52c-4.11-6.03-5.9-13.57-5.9-22.61v-52.88Z"/>
-</svg>

package/trash/scss-before-cqc-update/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. Stylesheets - Entry points for users to print entire stylesheet
-   - 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-before-cqc-update/_breakpoint.scss

@@ -1,190 +0,0 @@
-////
-/// @group breakpoint
-////
-
-@use "sass:map";
-@use "calculate";
-@use "utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} base  [16px] 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} gap  [0.01em] The amount to offset min from max media queries incase you are using both (ie prevent overlap)
-/// @prop {String} null-name ["none"] 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} default ["small"] 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
-/// @example scss Change default name
-///   @include breakpoint.set(( "default" : "mini" ));
-/// @param {Map} $changes Map of changes
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @example scss Get default breakpoint name
-///   $default: breakpoint.get("default");
-/// @param {Map} $name Name of property
-/// @return {*} Property Value
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, 'breakpoint [config]');
-}
-
-
-/// The default breakpoint sizes (targets are not precise, using em's)
-/// - Map of breakpoints
-/// - Each property is the breakpoints name
-/// - Each value is that breakpoints point (set in em)
-/// @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
-/// @example scss Changing the medium breakpoint and adding jumbo
-///   @include breakpoints.set((
-///     "medium" : 50em,
-///     "jumbo" : 100em
-///   ));
-/// @param {Map} $changes A map to merge into the breakpoints map
-/// @param {Map} $deep [false] Deep map merge (doesn't apply here)
-/// @param {Map} $overwrite [false] Overwrite the sizes, instead of merging changes
-
-@mixin set-sizes($changes, $deep: false, $overwrite: false) {
-  $sizes: utils.map-merge-or-overwrite($sizes, $changes, $deep, $overwrite) !global;
-}
-
-/// Get all breakpoint sizes (ie. $sizes)
-@function get-sizes() {
-  @return $sizes;
-}
-
-/// Geta a specific size
-/// @param {String} $size The name of the size to get
-/// @return {Number} The sizes value
- 
-@function get-size($size) {
-  @return utils.require-map-get($sizes, $size, "breakpoint size");
-}
-
-/// Check if a specific size exist
-/// @param {String} $name The breakpoint size to check if exists
-/// @return {Boolean} 
-
-@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
-/// @example scss
-///   @include breakpoints.min("small") {
-///     // Your styles
-///   }
-/// @example css
-///   @media screen and (min-width: 42.5em) {
-///      // Your Styles
-///   }
-/// @param {String} $size The name of the breakpoint size
-
-@mixin min($size) {
-  // Adding the small fraction to prevent overlap
-  $min: get-size($size); 
-  @media screen and (min-width: $min) {
-    @content;
-  }
-}
-
-/// Create a media query that matches the max-width for a given size
-/// @example scss
-///   @include breakpoints.max("medium") {
-///     // Your styles
-///   }
-/// @example css
-///   @media screen and (max-width: 42.4em) {
-///      // Your Styles
-///   }
-/// @param {Number} $size The name of the breakpoint size
-
-@mixin max($size) {
-  // Adding the small fraction to prevent overlap
-  $max: get-size($size) - get("gap"); 
-  @media screen and (max-width: $max) {
-    @content;
-  }
-}
-
-/// Create a media query that matches between two breakpoint sizes
-/// @example scss
-///   @include breakpoints.min-max("small", "medium") {
-///     // Your styles
-///   }
-/// @example css
-///   @media screen and (min-width: 42.5) and (max-width: 75em) {
-///      // Your Styles
-///   }
-/// @param {String} $size-min The name of the smallest breakpoint size
-/// @param {String} $size-max The name of the largest breakpoint size
-
-@mixin min-max($size-min, $size-max) {
-  // Adding the small fraction to prevent overlap
-  $min: get-size($size-min); 
-  $max: get-size($size-max); 
-  @media screen and (min-width: $min) and (max-width: $max) {
-    @content;
-  }
-}
-
-/// Create a media query from a specific size in either direction 
-/// - This is for mostly programmatic usage, so that a user could pass a breakpoint confiuration in either direction
-/// - This way you don't need to repeat conditions (ie if min ... else ...)
-/// @example scss
-///   $size: map.get($user-breakpoint, "size");
-///   $dir: map.get($user-breakpoint, "direction");
-///   @include breakpoints.from($size, $dir) {
-///     // Your styles
-///   }
-/// @param {String} $name The name of the breakpoint size
-/// @param {String} $direction The direction the media query should target (min|up, max|down)
-
-@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
-/// - Note you can also use cssvar.declare-breakpoints to get a similiar implementation with css custom-properties
-/// - Use with ulu/js/breakpoints. Breakpoints always min-width (upwards) for javascript setup
-
-@mixin embed-for-scripts() {
-  &:before {
-    display: none;
-    content: get("null-name");
-    @each $size, $breakpoint in $sizes {
-      @include min($size) {
-        content: $size;
-      }
-    }
-  }
-}

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

@@ -1,229 +0,0 @@
-////
-/// @group button
-////
-/// @todo Finish Documentation
-
-/// Version:        1.0.2
-
-@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,
-  "white-space" :            nowrap,
-  "font-weight":             bold,
-  "line-height":             1.1,
-  "letter-spacing":          0.02em,
-  "text-transform":          none,
-  "text-shadow":             none,
-  "font-size":               "base",
-  "color":                   white,
-  "color-hover":            white,
-  "color-active":            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();
-  }
-  appearance: none; // If used with select for example
-  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");
-  @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");
-  white-space: get("white-space");
-  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,
-  &:focus {
-    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,
-  &:focus {
-    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-before-cqc-update/_calculate.scss

@@ -1,65 +0,0 @@
-////
-/// @group calculate
-////
-/// @todo Finish Documentation
-
-@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 });
-}