@ulu/frontend 0.0.3 → 0.0.5

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

@@ -1,211 +0,0 @@
-////
-/// @group color
-////
-/// @todo Finish Documentation
-
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "utils";
-@use "selector";
-
-/// The color palette map, can be extended or modified with set() and accessed with get()
-/// Note do not use names that start with "--" as those are reserved for custom-properties (pass through) also "inherit" is reserved.
-/// @type map  
-
-$palette: (
-  "black":        black,
-  "white":        white,
-  "type":         black,
-  "background":   white,
-  "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} Note if non-string value is passed it is sent back through, along with custom properties and keyword inherit
-
-@function get($name) {
-  // Allow non lookup if the value is already a color (helps with code flow)
-  @if (meta.type-of($name) == "string") {
-    // Allow custom-properties and keyword inherit to pass through
-    @if ($name == "inherit" or string.index($name, "var(") == 1) {
-      @return $name;
-    // Else look up the color from the palette
-    } @else {
-      @return utils.require-map-get($palette, $name, 'color');
-    }
-  }
-  // Allow everything other than strings to pass through
-  // - color, null, false, etc (so they can not output)
-  @return $name;
-}
-
-/// 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);
-      }
-    }
-  }
-}

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

@@ -1,116 +0,0 @@
-////
-/// @group cssvar
-////
-/// Provides support for custom-properties implementations
-
-@use "sass:meta";
-@use "sass:map";
-@use "sass:string";
-@use "utils";
-@use "breakpoint";
-
-/// Module Settings
-/// @type Map
-/// @prop {String} prefix [""] Default prefix, will be added to all custom properties when using mixin or functions, unless overriden, set to empty quotes to disable
-
-$config: (
-  "prefix" : ""
-) !default;
-
-/// Change modules $config
-/// @example scss Setting the prefix to 'ulu'
-///   @include cssvar.set(( "prefix" : "ulu" ));
-/// @param {Map} $changes Map of changes
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @example scss Getting the config value for prefix
-///   $prefix: cssvar.get("prefix");
-/// @param {String} $name Name of property
-/// @return {*} Map property value
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "css-vars [config]");
-}
-
-/// Get a custom property name (with optional prefix)
-/// @example scss Getting a custom property name
-///   #{ cssvar.name("base-color") } { ... }
-/// @param {String} $name Name of custom property 
-/// @param {String} $prefix [$config.prefix] Override default prefix
-/// @return {String} The formatted property name (unquoted string)
-
-@function name($name, $prefix: get("prefix")) {
-  @if (string.length($prefix) > 0) {
-    @return string.unquote("--#{ $prefix }-#{ $name }");
-  } @else {
-    @return string.unquote("--#{ $name }");
-  }
-}
-
-/// Function to use a custom property within a declartion value 
-/// @example scss Print an custom property as a value
-///   .test {
-///     color: cssvar.use("base-color");
-///   }
-/// @param {String} $name Name of custom property 
-/// @param {String} $prefix [$config.prefix] Override default prefix
-/// @return {String} Formatted custom propety for use in property value (ie. var(...))
-
-@function use($name, $prefix: get("prefix")) {
-  @return var(name($name, $prefix));
-}
-
-/// Outputs a single custom property declaration
-/// @example scss Declare a custom property
-///   :root {
-///     @include cssvar.declare("base-color", red);
-///   }
-/// @param {String} $name Name of property
-/// @param {*} $value The properties value to declare
-/// @param {String} $prefix [$config.prefix] Override default prefix
-
-@mixin declare($name, $value, $prefix: get("prefix")) {
-  #{ name($name, $prefix) } : #{ $value };
-}
-
-/// Outputs a map as custom properties
-/// @example scss Declare each property in a map as a custom property
-///   :root {
-///     @include cssvar.declare($colors);
-///   }
-/// @param {Map} $props Properties to declare
-/// @param {String} $prefix [$config.prefix] Override default prefix
-
-@mixin declare-all($props, $prefix: get("prefix")) {
-  @each $name, $value in $props {
-    @include declare($name, $value, $prefix);
-  }
-}
-
-/// Declare a custom property for current breakpoint
-/// @example scss Declare each property in a map as a custom property
-///   :root {
-///     @include cssvar.declare-breakpoint();
-///   }
-/// @param {Map} $breakpoints [breakpoint.get-sizes()] Breakpoints to declare
-/// @param {String} $name ["breakpoint"] Name to use for custom property
-/// @param {Map} $initial [breakpoint.get("null-name")] The value for the custom property when not within breakpoint
-/// @param {String} $prefix [$config.prefix] Override default prefix
-
-@mixin declare-breakpoint(
-  $breakpoints: breakpoint.get-sizes(), 
-  $name: "breakpoint",
-  $initial: breakpoint.get("null-name"),
-  $prefix: get("prefix")
-) {
-  @include declare($name, $initial, $prefix);
-  @each $size, $value in $breakpoints {
-    @include breakpoint.min($size) {
-      @include declare($name, $size, $prefix);
-    }
-  }
-}

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

@@ -1,275 +0,0 @@
-////
-/// @group element
-////
-/// @todo Finish Documentation
-
-@use "sass:map";
-@use "sass:meta";
-@use "color";
-@use "utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {Number} $config.backdrop-blur Backdrop blur amount used on elements/components
-/// @prop {Color} $config.backdrop-color Backdrop color (modal overlays, etc)
-/// @prop {List} $config.box-shadow Box-shadow definition for elements that are on top of page
-/// @prop {List} $config.box-shadow-raised Box-shadow definition for elements that are raised off of the page (dropdowns, etc)
-/// @prop {List} $config.box-shadow-above Box-shadow definition for elements that are above the page (fixed items, etc)
-/// @prop {Number} $config.border-radius Common element border radius
-/// @prop {Number} $config.border-radius-small Common element border radius (small)
-/// @prop {Number} $config.border-radius-large Common element border radius (large)
-/// @prop {List} $config.text-shadow Common text shadow
-/// @prop {Number} $config.margin-small Common element margin (small) (default for lists)
-/// @prop {Number} $config.margin Common element margin
-/// @prop {Number} $config.margin-large Common element margin (large)
-/// @prop {String} $config.ol-list-style-type Ordered list type (level 1)
-/// @prop {String} $config.ol-list-style-type-2 Ordered list type (level 2)
-/// @prop {String} $config.ol-list-style-type-3 Ordered list type (level 3)
-/// @prop {String} $config.ul-list-style-type
-/// @prop {String} $config.ul-list-style-type-2
-/// @prop {String} $config.ul-list-style-type-3
-/// @prop {String} $config.link-text-decoration-default Whether links use underline, remember that removing underline will create an accessiblity issue (not relying on color)
-/// @prop {String} $config.link-text-decoration
-/// @prop {String} $config.link-text-decoration-style
-/// @prop {Color} $config.link-text-decoration-color
-/// @prop {String} $config.link-text-decoration-style-hover
-/// @prop {Color} $config.link-text-decoration-color-hover
-/// @prop {Number} $config.link-text-decoration-thickness
-/// @prop {Number} $config.link-text-underline-offset
-
-$config: (
-  "backdrop-blur":                    4px,
-  "backdrop-color":                   rgba(73, 73, 73, 0.459),
-  "box-shadow":                       0 1px 5px color.get('box-shadow'),
-  "box-shadow:hover":                 0 1px 5px color.get('box-shadow:hover'),
-  "box-shadow-raised":                0 1px 12px color.get('box-shadow'),
-  "box-shadow-above":                 0 1px 20px color.get('box-shadow'),
-  "box-shadow-inset":                 0 1px 5px color.get('box-shadow'),
-  "border-radius":                    6px,
-  "border-radius-small":              3px,
-  "border-radius-large":              12px,
-  "text-shadow":                      0 1px 4px rgba(0,0,0,0.3),
-  "margin-small":                     0.65em,
-  "margin":                           1em,
-  "margin-large":                     2em,
-  "ol-list-style-type":               decimal,
-  "ol-list-style-type-2":             lower-alpha,
-  "ol-list-style-type-3":             lower-roman,
-  "ul-list-style-type":               disc,
-  "ul-list-style-type-2":             circle,
-  "ul-list-style-type-3":             square,
-  "link-text-decoration-default":     none,
-  "link-text-decoration":             underline,
-  "link-text-decoration-style":       dotted,
-  "link-text-decoration-color":       initial,
-  "link-text-decoration-style-hover": solid,
-  "link-text-decoration-color-hover": false,
-  "link-text-decoration-thickness":   0.1em,
-  "link-text-underline-offset" :     auto
-) !default;
-
-/// Rule style map, redifine defaults or add to
-/// @type Map
-
-$rule-styles: (
-  "default": 1px solid color.get("rule"),
-  "light":   1px solid color.get("rule-light"),
-) !default;
-
-/// Common rule margins (space between rule and type)
-/// @type Map
-
-$rule-margins: (
-  "smallest": 0.5rem,
-  "small":    1rem,
-  "medium":   2rem,
-  "large":    3rem
-) !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, "element [config]");
-}
-
-/// Sets rule styles
-/// @param {Map} $changes Map of changes
-
-@mixin set-rule-styles($changes) {
-  $rule-styles: map.merge($rule-styles, $changes) !global;
-}
-
-/// Sets rule margins
-/// @param {Map} $changes Map of changes
-
-@mixin set-rule-margins($changes) {
-  $rule-margins: map.merge($rule-margins, $changes) !global;
-}
-
-/// Get a rule style
-/// @param {Map} $changes Map of changes
-
-@function get-rule-style($name: "default") {
-  @return utils.require-map-get($rule-styles, $name, "element [rule style]");
-}
-
-/// Sets rule margin
-/// @param {Map} $changes Map of changes
-
-@function get-rule-margin($name) {
-  @return utils.require-map-get($rule-margins, $name, "element [rule style]");
-}
-
-/// Get full rule CSS (style and margin)
-/// @param {Map} $changes Map of changes
-
-@mixin rule(
-  $style-name: "default", 
-  $margin-name: null
-) {
-  @include rule-style($style-name);
-  @include rule-margin($margin-name);
-}
-@mixin rule-style($name: "default") {
-  border-bottom: get-rule-style($name);
-}
-@mixin rule-margin($name:  null) {
-  $margin: if($name, get-rule-margin($name), get("margin"));
-  margin-top: $margin;
-  margin-bottom: $margin;
-}
-
-/// Print link styles
-/// @param {Boolean} $visited Include visited style
-/// @param {Boolean} $active Include active style
-
-@mixin link($visited: false, $active: false) {
-  color: color.get("link");
-  text-decoration: get("link-text-decoration");
-  text-decoration-style: get("link-text-decoration-style");
-  text-decoration-color: get("link-text-decoration-color");
-  text-decoration-thickness: get("link-text-decoration-thickness");
-  text-underline-offset: get("link-text-underline-offset");
-  &:hover {
-    color: color.get("link:hover");
-    text-decoration-style: get("link-text-decoration-style-hover");
-    text-decoration-color: get("link-text-decoration-color-hover");
-  }
-  @if ($visited) {
-    &:visited {
-      color: color.get("link:visited");
-    }
-  }
-  @if ($active) {
-    &:active {
-      color: color.get("link:active");
-    }
-  }
-}
-
-/// Print the defautl link styling (no hover and focus styles)
-
-@mixin link-defaults($hover: true, $visited: false) {
-  color: color.get("link");
-  text-decoration: get("link-text-decoration-default");
-  @if ($hover) {
-    &:hover {
-      color: color.get("link:hover");
-    }
-  }
-  @if ($visited) {
-    &:visited {
-      color: color.get("link:visited");
-    }
-  }
-}
-
-/// Print the ordered list items styling
-/// @param {Boolean} $bullet-color Optional bullet color (defaults to palette 'bullet')
-
-@mixin styles-ordered-list($bullet-color: "bullet") {
-  margin-bottom: get("margin");
-  list-style: get("ol-list-style-type") outside;
-  li {
-    margin-bottom: get("margin-small");
-    margin-left: 1em;
-  }
-  > li {
-    &::marker {
-      color: color.get($bullet-color);
-    }
-  }
-  ol {
-    margin: get("margin-small") 0 0 get("margin-small");
-    list-style: get("ol-list-style-type-2");
-    ol { 
-      list-style-type: get("ol-list-style-type-3");
-    }
-  }
-  ul,
-  ol {
-    margin-top: get("margin-small");
-    margin-bottom: get("margin-small");
-  }
-}
-
-/// Print the unordered list items styling
-/// @param {Boolean} $bullet-color Optional bullet color
-
-@mixin styles-unordered-list($bullet-color: "bullet") {
-  list-style: get("ul-list-style-type") outside;
-  > li {
-    margin-left: 1.5em;
-    margin-bottom: get("margin-small");
-    &::marker {
-      color: color.get($bullet-color);
-    }
-  }
-  ul {
-    list-style-type: get("ul-list-style-type-2");
-  }
-   ul ul {
-    list-style-type: get("ul-list-style-type-3");
-  }
-  ul,
-  ol {
-    margin-top: get("margin-small");
-    margin-bottom: get("margin-small");
-  }
-}
-
-/// Hide text for assistive devices
-/// @param {Boolean} $hidden Defaults to true, pass false to override the hidden css (ie. on focus)
-/// @example scss
-///   @include ulu.layout-hidden-visually()
-///   // Reset styling
-///   @include ulu.layout-hidden-visually(false)
-
-@mixin hidden-visually($hidden: true) {
-  @if $hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  } @else {
-    clip: auto;
-    clip-path: none;
-    height: auto;
-    overflow: visible;
-    position: static;
-    white-space: normal;
-    width: auto;
-  }
-}

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

@@ -1,29 +0,0 @@
-////
-/// @group index
-////
-/// @todo Finish Documentation
-/// Main entry for library as single module use
-/// - All modules get namespaced
-/// @example scss - Example of color modules
-///   // Namespaced
-///   ulu.color-get();
-///   // Versus
-///   color.get();
-///
-
-@forward "path" as path-*;
-@forward "cssvar" as cssvar-*;
-@forward "color" as color-*;
-@forward "units" as units-*;
-@forward "calculate" as calculate-*;
-@forward "breakpoint" as breakpoint-*;
-@forward "selector" as selector-*;
-@forward "element" as element-*;
-@forward "typography" as typography-*;
-@forward "button" as button-*;
-@forward "utility" as utility-*;
-@forward "layout" as layout-*;
-@forward "base" as base-*;
-@forward "components" as component-*;
-@forward "helpers" as helper-*;
-@forward "utils" as utils-*;