@ulu/frontend 0.1.0-beta.5 → 0.1.0-beta.7

package/docs-dev/sass/helpers/typography/index.html

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/docs-dev/sass/helpers/units/index.html

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/docs-dev/sass/helpers/utilities/index.html

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/docs-dev/sass/index.html

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.5", 
+  "version": "0.1.0-beta.7", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_color.scss

@@ -23,6 +23,7 @@ $palette: (
   "type-tertiary"           : rgb(157, 157, 157),
   "headline"                : inherit,
   "background"              : white,
+  "background-gray"         : #F7F8F7,
   "focus"                   : blue,
   "error"                   : red,
   "warning"                 : orange,

package/scss/components/_accordion.scss

@@ -13,8 +13,8 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Color}  background-color  [white] This is the background color of the accordion before it is expanded. 
-/// @prop {Color}  background-color-open  [#F7F8F7] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
+/// @prop {Color}  background-color  [accordion-background] This is the background color of the accordion before it is expanded. 
+/// @prop {Color}  background-color-open  [accordion-background-open] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
 /// @prop {String} border-color ["rule"]
 /// @prop {Number} border-radius  [0] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
 /// @prop {Dimension} border-width  [1px] The width of the borders of the accordions
@@ -41,8 +41,8 @@
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
 
 $config: (
-  "background-color":            white,
-  "background-color-open":       #F7F8F7,
+  "background-color":            "background",
+  "background-color-open":       "background-gray",
   "border-color":                "rule",
   "border-radius":               0,
   "border-width":                1px,
@@ -59,7 +59,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    white,
+  "summary-background-color":    "white",
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -107,7 +107,7 @@ $config: (
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-shadow: get("box-shadow");
     &:first-of-type {
       border-top-left-radius: get("border-radius");
@@ -124,7 +124,7 @@ $config: (
     }
     &[open], 
     &.is-active  {
-      background-color: get("background-color-open");
+      background-color: color.get(get("background-color-open"));
       padding-bottom: get("padding-y");
       z-index: 2; // Above child details
       > #{ $prefix }__summary {
@@ -136,8 +136,8 @@ $config: (
     }
   }
   #{ $prefix }__summary {
-    background-color: get("summary-background-color");
-    color: get("summary-color");
+    background-color: color.get(get("summary-background-color"));
+    color: color.get(get("summary-color"));
     margin-left: -(get("padding-x"));
     margin-right: -(get("padding-x"));
     line-height: get("summary-line-height");
@@ -161,10 +161,10 @@ $config: (
       @include typography.size(get("summary-type-size"));
     }
     &:hover {
-      background-color: get("summary-background-color-hover");
-      color: get("summary-color-hover");
+      background-color: color.get(get("summary-background-color-hover"));
+      color: color.get(get("summary-color-hover"));
       #{ $prefix }__icon {
-        background-color: get("icon-background-color-hover");
+        background-color: color.get(get("icon-background-color-hover"));
         color: color.get(get("icon-color-hover"));
       }
     }
@@ -174,7 +174,7 @@ $config: (
     color: color.get(get("icon-color"));
     margin-left: 0.5em;
     order: 3;
-    background-color: get("icon-background-color");
+    background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");

package/scss/components/_badge.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -94,8 +95,8 @@ $config: (
     &:hover,
     &:focus,
     &:visited {
-      background-color: get("background-color");
-      color: get("color");
+      background-color: color.get(get("background-color"));
+      color: color.get(get("color"));
     }
   }
   #{ $prefix }--clickable {

package/scss/components/_button-verbose.scss

@@ -102,7 +102,7 @@ $config: (
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding-y") get("padding-x");
     padding-right: (get("padding-x") * 2) + 1em;
     color: color.get(get("color"));
@@ -126,7 +126,7 @@ $config: (
     right: get("padding-x");
     transform: translateY(-50%);
     font-size: get("icon-font-size");
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
   }
   .button-verbose--inline {
     display: inline-block;

package/scss/components/_callout.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../selector";
 @use "../element";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -133,7 +134,7 @@ $styles: (
     top: 0;
     bottom: 0;
     width: $width;
-    background-color: $color;
+    background-color: color.get($color);
   }
 }
 
@@ -145,7 +146,7 @@ $styles: (
   $prefix: selector.class("callout");
 
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding");
     border: get("border");
     margin-bottom: get("margin");
@@ -160,11 +161,11 @@ $styles: (
   }
   @each $name, $style in $styles {
     #{ $prefix }--#{ $name } {
-      background-color: map.get($style, "background-color"); 
-      color: map.get($style, "color"); 
+      background-color: color.get(map.get($style, "background-color")); 
+      color: color.get(map.get($style, "color")); 
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
-      border-color: map.get($style, "border-color"); 
+      border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
       @if map.get($style, "left-cap") {

package/scss/components/_captioned-figure.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../element";
 @use "../typography";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -82,7 +83,7 @@ $config: (
     display: block;
     position: relative;
     margin-bottom: get("margin-bottom");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     > img {
       width: 100%;
       height: auto;
@@ -101,20 +102,20 @@ $config: (
   }
   #{ $prefix }__caption {
     position: absolute;
-    color: get("color");
+    color: color.get(get("color"));
     @include typography.size(get("type-size"), $only-font-size: true);
     line-height: get("line-height");
     max-width: get("caption-max-width");
-    background-color: get("caption-background-color");
+    background-color: color.get(get("caption-background-color"));
     padding: get("caption-padding");
     backdrop-filter: get("caption-backdrop-filter");
   }
   #{ $prefix }--traditional {
     #{ $prefix }__caption {
       position: static;
-      color: get("traditional-caption-color");
+      color: color.get(get("traditional-caption-color"));
       max-width: get("traditional-caption-max-width");
-      background-color: get("traditional-caption-background-color");
+      background-color: color.get(get("traditional-caption-background-color"));
       padding: get("traditional-caption-padding");
       text-align: get("traditional-caption-text-align");
       @if (get("traditional-caption-text-align") == right) {