@ulu/frontend 0.0.3 → 0.0.6

package/trash/scss-old-2/_breakpoint.scss

@@ -1,139 +0,0 @@
-////
-/// @group breakpoint
-////
-
-@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-2/_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-2/_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 });
-}

package/trash/scss-old-2/_color.scss

@@ -1,202 +0,0 @@
-////
-/// @group color
-////
-
-@use "sass:map";
-@use "sass:meta";
-@use "utils";
-@use "selector";
-
-/// The color palette map, can be extended or modified with set() and accessed with get()
-/// @type map  
-
-$palette: (
-  "black":        black,
-  "white":        white,
-  "type":         black,
-  "focus":        blue,
-  "error":        red,
-  "accent":       orange,
-  "selected" :    green,
-  "box-shadow":   rgba(0, 0, 0, 0.349),
-  "box-shadow:hover" : rgba(0, 0, 0, 0.5),
-  "rule":         gray,
-  "rule-light":   lightgray,
-  "link":         blue,
-  "link:hover":   darkblue,
-  "link:active":  darkblue,
-  "link:visited": purple,
-  "bullet":       inherit
-) !default;
-
-/// Pairs of background-color and color definitions
-/// @type map
-/// @prop {Number|String} $contexts.name.background-color Color value or name of color in $palette
-/// @prop {Number|String} $contexts.name.color Color value or name of color in $palette
-/// @prop {Boolean} $contexts.name.base-class Print this value in the base module as a class (if base prints)
-
-$contexts: (
-  "dark" : (
-    "background-color" : "black",
-    "color" : "white",
-    "base-class" : true
-  ),
-  "light" : (
-    "background-color" : "white",
-    "color" : "black",
-    "base-class" : true
-  ),
-);
-
-/// Palette entries that are output as classes when using all-color-class-styles
-$color-classes: (
-  "black" : true,
-  "white" : true,
-  "type": true
-) !default;
-
-/// Used to override or extend the color palette
-/// @param {Map} $changes A map to merge into the color palette
-/// @example scss Setting the error and type color
-///   @include color.set((
-///     "type" : #444,
-///     "error" : orange,
-///   ));
-
-@mixin set($changes) {
-  $palette: map.merge($palette, $changes) !global;
-}
-
-/// Get a color from the palette by name
-/// @param {String} $name Name of color to get
-/// @return {Color}
-
-@function get($name) {
-  // Allow non lookup if the value is already a color (helps with code flow)
-  @if (meta.type-of($name) == "color") {
-    @return $name;
-  } @else if ($name == "inherit") {
-    @return $name;
-  } @else {
-    @return utils.require-map-get($palette, $name, 'color');
-  }
-}
-
-/// Set ouput classes for all-color-class-styles
-/// @param {Map} $changes Map of changes (you can disable defaults this way)
-
-@mixin set-color-classes($changes) {
-  $color-classes: map.merge($color-classes, $changes) !global;
-}
-
-@function exists($name) {
-  $color: map.get($palette, $name);
-  @return if($color != null, true, false);
-}
-
-/// Set color contexts
-/// @param {Map} $changes A map to merge 
-/// @param {Map} $deep Use deep merge
-/// @param {Map} $overwrite Overwrite the completly (cannot be used with deep)
-/// @example scss Overwriting contexts
-///   @include color.set-contexts((
-///     "dark" : (
-///       "background-color" : red,
-///       "color" : white,
-///     )
-///   ), false, true);
-
-@mixin set-contexts($changes, $deep: false, $overwrite: false) {
-  $contexts: utils.map-merge-or-overwrite($contexts, $changes, $deep, $overwrite) !global;
-}
-
-/// Get a context by name
-/// @param {String} $name Name of context
-/// @return {Map}
-
-@function get-context($name) {
-  @return utils.require-map-get($contexts, $name, 'context');
-}
-
-/// Get a context's value'
-/// @param {String} $name Name of context
-/// @param {String} $prop The property to get
-/// @return {Color}
-
-@function get-context-value($name, $prop) {
-  $context: get-context($name);
-  $value: map.get($context, $prop);
-  // Get from pallete by name
-  @if (meta.type-of($value) == "string") {
-    $value: get($value);
-  }
-  @return $value;
-}
-
-/// Prints contexts styles
-/// @param {String} $name Name of context
-
-@mixin context-styles($name) {
-  $context: get-context($name);
-  background-color: get-context-value($name, "background-color");
-  background: map.get($context, "background"); // Allow gradients/images
-  background-image: map.get($context, "background-image"); // Allow gradients/images
-  color: get-context-value($name, "color");
-}
-
-/// Lighten a color using the default white by a percentage
-/// @param {Color, String} $color Color/palette color name to apply to tint
-/// @param {Number} $percentage Percentage
-/// @return {Color}
-/// @author 
-/// @link https://css-tricks.com/snippets/sass/tint-shade-functions/ Modified from source (CSS Tricks, Kitty Giraudel)
-
-@function tint($color, $percentage) {
-  @return mix(get("white"), get($color), $percentage);
-}
-
-/// Darken a color with the default black by a percentage
-/// @param {Color, String} $color Color/palette color name to shade
-/// @param {Number} $percentage Percentage to shade
-/// @return {Color}
-/// @author Kitty Giraudel
-/// @link https://css-tricks.com/snippets/sass/tint-shade-functions/ Modified from source (CSS Tricks, Kitty Giraudel)
-
-@function shade($color, $percentage) {
-  @return mix(get("black"), get($color), $percentage);
-}
-
-/// Prints all context styles 
-/// @param {String} $with-prop Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)
-/// @example scss
-///  @include ulu.all-context-styles();
-/// @example raw Example of a color-context
-///  <div class="color-context-dark" style="padding: 1rem">
-////   Some text in dark context
-//// </div>
-@mixin all-context-styles($with-prop: null) {
-  $prefix: selector.class("color-context");
-  @each $name, $context in $contexts {
-    @if (not $with-prop or map.get($context, $with-prop)) {
-      #{ $prefix }-#{ $name } {
-        @include context-styles($name);
-      }
-    }
-  }
-}
-
-/// Outputs all color classes
-/// @example scss
-///  @include ulu.all-color-class-styles();
-/// @example raw Example of a color-context
-///  <span class="color-name">Some text</span>
-@mixin all-color-class-styles() {
-  $prefix: selector.class("color");
-  @each $name, $output in $color-classes {
-    @if ($output) {
-      #{ $prefix }-#{ $name } {
-        color: get($name);
-      }
-    }
-  }
-}