@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/_element.scss

@@ -9,66 +9,69 @@
 
 /// 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
+/// @prop {Number} backdrop-blur Backdrop blur amount used on elements/components
+/// @prop {Color} backdrop-color Backdrop color (modal overlays, etc)
+/// @prop {Dimension} list-item-indent [1.5em]
+/// @prop {List} text-shadow Common text shadow
+/// @prop {Number} border-radius Common element border radius
+/// @prop {Number} border-radius-large Common element border radius (large)
+/// @prop {Number} border-radius-small Common element border radius (small)
+/// @prop {List} box-shadow Box-shadow definition for elements that are on top of page
+/// @prop {List} box-shadow-above Box-shadow definition for elements that are above the page (fixed items, etc)
+/// @prop {CssValue} box-shadow-hover [0 1px 5px color.get('box-shadow-hover')]
+/// @prop {CssValue} box-shadow-inset [0 1px 5px color.get('box-shadow')]
+/// @prop {List} box-shadow-raised Box-shadow definition for elements that are raised off of the page (dropdowns, etc)
+/// @prop {String} link-text-decoration
+/// @prop {Color} link-text-decoration-color
+/// @prop {String} link-text-decoration-default Whether links use underline, remember that removing underline will create an accessibility issue (not relying on color)
+/// @prop {Color} link-text-decoration-color-hover
+/// @prop {Number} link-text-underline-offset
+/// @prop {String} link-text-decoration-style
+/// @prop {String} link-text-decoration-style-hover
+/// @prop {Number} link-text-decoration-thickness
+/// @prop {Number} margin Common element margin
+/// @prop {Number} margin-large Common element margin (large)
+/// @prop {Number} margin-small Common element margin (small) (default for lists)
+/// @prop {String} ol-list-style-type Ordered list type (level 1)
+/// @prop {String} ol-list-style-type-2 Ordered list type (level 2)
+/// @prop {String} ol-list-style-type-3 Ordered list type (level 3)
+/// @prop {String} ul-list-style-type
+/// @prop {String} ul-list-style-type-2
+/// @prop {String} ul-list-style-type-3
 
 $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'),
+  "list-item-indent" :                1.5em,
+  "text-shadow":                      0 1px 4px rgba(0,0,0,0.3),
   "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,
+  "box-shadow":                       0 1px 5px color.get('box-shadow'),
+  "box-shadow-above":                 0 1px 20px color.get('box-shadow'),
+  "box-shadow-hover":                 0 1px 5px color.get('box-shadow-hover'),
+  "box-shadow-inset":                 0 1px 5px color.get('box-shadow'),
+  "box-shadow-raised":                0 1px 12px color.get('box-shadow'),
+  "link-text-decoration":             underline,
+  "link-text-decoration-color":       initial,
+  "link-text-decoration-color-hover": false,
+  "link-text-decoration-default":     none,
+  "link-text-underline-offset" :     auto,
+  "link-text-decoration-style":       dotted,
+  "link-text-decoration-style-hover": solid,
+  "link-text-decoration-thickness":   0.1em,
   "margin":                           1em,
+  "margin-small":                     0.65em,
   "margin-large":                     2em,
-  "list-item-indent" :                1.5em,
   "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
+/// Rule style map, redefine defaults or add to
 /// @type Map
 
 $rule-styles: (
@@ -88,14 +91,15 @@ $rule-margins: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-///   @include module-name.set(( "property" : value ));
+///   @include ulu.element-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");
+///   @include ulu.element-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "element [config]");
@@ -139,16 +143,47 @@ $rule-margins: (
   @include rule-style($style-name);
   @include rule-margin($margin-name);
 }
+
+/// Output CSS for a rule's style (not margins
+/// @param {String} $name ["default"] name of rule style
+
 @mixin rule-style($name: "default") {
   border-bottom: get-rule-style($name);
 }
+
+/// Output CSS for a rule's margin
+/// @param {String} $name ["default"] name of rule style
+
 @mixin rule-margin($name:  null) {
   $margin: if($name, get-rule-margin($name), get("margin"));
   margin-top: $margin;
   margin-bottom: $margin;
 }
 
-/// Print link styles
+/// Print the default link styling (no hover and focus styles)
+/// - Default link styling just sets the color and the link-text-decoration-default
+/// - This is usually output at the top of the stylesheet to style the general <a> element
+/// - Use link() mixin to print the full link styling (when used in content/text) which includes the full 
+///   styling (text-decoration, etc)
+/// @param {Boolean} $visited Include visited style
+/// @param {Boolean} $active Include active style
+
+@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");
+    }
+  }
+}
+
+/// Output link CSS styles (this is the full link styling when used in content/text)
 /// @param {Boolean} $visited Include visited style
 /// @param {Boolean} $active Include active style
 
@@ -160,35 +195,18 @@ $rule-margins: (
   text-decoration-thickness: get("link-text-decoration-thickness");
   text-underline-offset: get("link-text-underline-offset");
   &:hover {
-    color: color.get("link: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");
+      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");
+      color: color.get("link-active");
     }
   }
 }
@@ -235,7 +253,6 @@ $rule-margins: (
     }
   }
   ul {
-    // margin: get("margin-small") 0;
     list-style-type: get("ul-list-style-type-2") ;
   }
    ul ul {

package/scss/_index.scss

@@ -14,15 +14,12 @@
 @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 "grid" as grid-*;
 @forward "base" as base-*;
 @forward "components" as component-*;
 @forward "helpers" as helper-*;

package/scss/_layout.scss

@@ -6,30 +6,27 @@
 @use "sass:list";
 @use "sass:meta";
 @use "utils";
-@use "calculate";
 @use "breakpoint";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} $config.max-width Common max-width for site
-/// @prop {Number} $config.margin Common margin for site
-/// @prop {Number} $config.z-index-fixed Common z-index, above everything
-/// @prop {Number} $config.z-index-sticky Common z-index for sticky or stuck items
-/// @prop {Number} $config.z-index-above Common z-index, below sticky
+/// @prop {Number} margin [2rem] Common margin for site
+/// @prop {Number} max-width [90rem] Common max-width for site
+/// @prop {Number} z-index-above [1000] Common z-index, below sticky
+/// @prop {Number} z-index-fixed [100] Common z-index, above everything
+/// @prop {Number} z-index-sticky [450] Common z-index for sticky or stuck items
 
 $config: (
-  "max-width":         90rem,
   "margin":            2rem,
-  "z-index-sticky":    100,
+  "max-width":         90rem,
   "z-index-above":     450,
-  "z-index-fixed":     1000
+  "z-index-fixed":     1000,
+  "z-index-sticky":    100,
 ) !default;
 
-
-
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-///   @include module-name.set(( "property" : value ));
+///   @include ulu.layout-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -37,7 +34,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-///   @include module-name.get("property");
+///   @include ulu.layout-get("property");
 @function get($name) {
   @return utils.require-map-get($config, $name, "layout [config]");
 }
@@ -70,14 +67,32 @@ $containers: (
 /// @param {Map} $name Container name
 /// @param {String} $breakpoint Return only the properties for a specific breakpoint for the container
 
-@function get-container($name, $breakpoint: false) {
-  $container: utils.require-map-get($containers, $name, "Layout [get-container]");
-  $breakpoints: map.get($container, "breakpoints");
-  @if ($breakpoint) {
-    @return utils.require-map-get($breakpoints, $breakpoint, "[container breakpoint]");
+@function get-container($name, $breakpoint: false, $required: true) {
+  $container: null;
+  @if ($required) {
+    $container: utils.require-map-get($containers, $name, "Layout [get-container]");
   } @else {
-    @return $container;
+    $container: map.get($containers, $name);
   }
+
+  @if ($container and $breakpoint) {
+    $breakpoints: map.get($container, "breakpoints");
+    @if ($required) {
+      @if ($breakpoints) {
+        @return utils.require-map-get($breakpoints, $breakpoint, "[container breakpoint]");
+      } @else {
+        @error 'ULU: No container breakpoints for container "#{ $name }", requested breakpoint #{ $breakpoint }';
+      }
+    } @else {
+      @if ($breakpoints) {
+        @return map.get($breakpoints, $breakpoint);
+      } @else {
+        @return null;
+      }
+    }
+  }
+
+  @return $container;
 }
 
 /// Returns padding to another property including breakpoints
@@ -103,8 +118,8 @@ $containers: (
 /// For a given property for every breakpoint in a given container
 /// creates a css calc value that will match the containers side margin
 /// The margin is created via empty space when the container hits the max-width
-/// If passing inlude padding it would be the containers
-/// side (x) + the padding. This accounts for the containers max-width to give an absoute value
+/// If passing include padding it would be the containers
+/// side (x) + the padding. This accounts for the containers max-width to give an absolute value
 /// @param {String} $property Property name to apply the margin value to
 /// @param {String} $name The container name
 /// @param {Boolean} $include-padding [true] Include the containers padding in the margin calculation
@@ -152,16 +167,16 @@ $containers: (
   $responsive: map.get($container, "responsive");
   $x: get-container-padding-x($name, $specific-breakpoint);
   $y: get-container-padding-y($name, $specific-breakpoint);
-  $resp-amount: if(meta.type-of($responsive) == number, $responsive, calculate.get("responsive-change"));
+  $resp-amount: if(meta.type-of($responsive) == number, $responsive, utils.get("responsive-change"));
   
   @if $responsive {
     @if $sides {
-      @include calculate.responsive-property("padding-left", $x, $resp-amount);
-      @include calculate.responsive-property("padding-right", $x, $resp-amount);
+      @include utils.responsive-property("padding-left", $x, $resp-amount);
+      @include utils.responsive-property("padding-right", $x, $resp-amount);
     }
     @if $ends {
-      @include calculate.responsive-property("padding-top", $y, $resp-amount);
-      @include calculate.responsive-property("padding-bottom", $y, $resp-amount);
+      @include utils.responsive-property("padding-top", $y, $resp-amount);
+      @include utils.responsive-property("padding-bottom", $y, $resp-amount);
     }
   } @else {
     @if $sides {
@@ -247,4 +262,20 @@ $containers: (
   &::-webkit-scrollbar {
     display: none; /* for Chrome, Safari, and Opera */
   }
+}
+
+/// Layout utility for absolute (zero on all sides)
+/// - Probably helpful for gzip if we use this when these exact styles are needed
+///   so they are identical for compression
+@mixin absolute-fill($set-size: false) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  @if not $set-size {
+    right: 0;
+    bottom: 0;
+  } @else {
+    width: 100%;
+    height: 100%;
+  }
 }

package/scss/_path.scss

@@ -22,7 +22,7 @@ $aliases: (
   $aliases: map.merge($aliases, $changes) !global;
 }
 
-/// Get an aliase's path
+/// Get an aliases path
 /// @param {String} Name Name of alias
 
 @function get-alias($name) {
@@ -35,7 +35,7 @@ $aliases: (
 /// - Aliases work by starting with "#", Since it's an illegal uri character, needs to be escaped if used as literal, we felt that it was the safest way to mix aliases in with real URLs (so that a dev of a module using path.resolve can always pass paths through (user input unknown if alias)
 /// @example scss
 ///   .img {
-///     background-image: url(path.resolve("#Images/branding/logo"));
+///     background-image: url(ulu.path-resolve("#Images/branding/logo"));
 ///   }
 ///
 

package/scss/_selector.scss

@@ -1,5 +1,6 @@
 ////
 /// @group selector
+/// This module is used to alter selectors for components
 ////
 
 @use "sass:string";
@@ -7,10 +8,8 @@
 @use "utils";
 
 /// Module Settings
-/// - This module can be used for dynamic classnames (used in base and some components). Some components selectors are too complex or coupled for dynamic classnames. 
-/// @todo See about documenting when a component doesn't run through the selecotr module to get it's base classname
 /// @type Map
-/// @prop {String} $config.prefix Global prefix for selectors (would be used for classname prefix for example)
+/// @prop {String} prefix [""] Global prefix for selectors (would be used for classname prefix for example)
 
 $config: (
   "prefix" : ""
@@ -18,27 +17,35 @@ $config: (
 
 // Map to store class overrides ("button" : "site-button") for example
 $-class-overrides: ();
+
+// Map that stores wildcard entries
 $-class-wildcards: ();
 
 /// 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 ));
+/// @example scss - General example
+///   @include ulu.selector-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");
+/// @example scss - General example
+///   @include ulu.selector-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "selector [config]");
 }
 
 /// Set the class selector overrides
-/// @param {Map} $changes Changes to merge
+/// - When a component or user module that is using selector module requests a classname any changes passed here will override the default selector
+/// @param {Map} $changes Changes to merge map of classnames to classname change
+/// @example scss - Changing the color-context classname to background and all typography base/utility classes to 'text' using wildcard
+///   @include ulu.selector-set-class-overrides((
+///     "color-context" : "background",
+///     "type*" : "text"
+///   ));
 
 @mixin set-class-overrides($changes) {
   @each $key, $prop in $changes {
@@ -54,11 +61,11 @@ $-class-wildcards: ();
 
 /// Used to allow global prefixing of classes, and also the ability to 
 /// Change a class used in the system (ie. like a component for example)
-/// @param {String} $class The classname to set
+/// @param {String} $class The base classname to get (which is then returned modified if the user has adjusted that specific classname
 
 @function class($class, $name-only: false) {
   // Check if it's a wildcard
-  $wildcard: get-class-wildcard($class);
+  $wildcard: -get-class-wildcard($class);
   $override: map.get($-class-overrides, $class);
   $updated: if($override, $override, if($wildcard, $wildcard, $class));
   $name: "#{ get("prefix") }#{ $updated }";
@@ -69,7 +76,9 @@ $-class-wildcards: ();
   }
 }
 
-@function get-class-wildcard($class) {
+// Internal function to check all wildcards entries for passed class
+
+@function -get-class-wildcard($class) {
   $change: $class;
   @each $key, $prop in $-class-wildcards {
     $index: string.index($class, $key);