@ulu/frontend 0.1.0-beta.106 → 0.1.0-beta.108

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

@@ -661,6 +661,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -1935,6 +1950,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -3462,6 +3507,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -4736,6 +4796,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">

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

@@ -661,6 +661,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -1935,6 +1950,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -3462,6 +3507,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -4736,6 +4796,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">

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

@@ -661,6 +661,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -1935,6 +1950,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -3462,6 +3507,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -4736,6 +4796,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -5717,7 +5807,7 @@
 <li><strong>Group:</strong> utilities</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 11-14</li>
-<li><strong>Lines (code):</strong> 16-130</li>
+<li><strong>Lines (code):</strong> 16-136</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>

package/docs-dev/sass/index.html

@@ -661,6 +661,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -1935,6 +1950,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -3462,6 +3507,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -4736,6 +4796,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.106",
+  "version": "0.1.0-beta.108",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_color.scss

@@ -16,44 +16,49 @@
 /// @type map  
 
 $palette: (
-  "black"                   : black,
-  "white"                   : white,
-  "type"                    : black,
-  "type-secondary"          : rgb(82, 82, 82),
-  "type-tertiary"           : rgb(125, 125, 125),
-  "type-disabled"           : rgb(160, 160, 160),
-  "headline"                : inherit,
-  "background"              : white,
-  "background-gray"         : #fafafa,
-  "focus"                   : blue,
-  "accent"                  : orange,
-  "info"                    : #00bde3,
-  "success"                 : #00a91c,
-  "warning"                 : #ffbe2e,  
-  "danger"                  : #d54309,  
-  "info-background"         : #e7f6f8,
-  "success-background"      : #ecf3ec,
-  "warning-background"      : #faf3d1,
-  "danger-background"       : #f4e3db,
-  "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,
-  "control"                 : white,
-  "control-hover"           : white,
-  "control-active"          : white,
-  "control-border"          : purple,
-  "control-border-hover"    : blue,
-  "control-border-active"   : orange,
-  "control-background"      : purple,
-  "control-background-hover": blue,
-  "control-background-active": orange,
+  "black":                      black,
+  "white":                      white,
+  "type":                       black,
+  "type-secondary":             rgb(82, 82, 82),
+  "type-tertiary":              rgb(125, 125, 125),
+  "type-disabled":              rgb(160, 160, 160),
+  "headline":                   inherit,
+  "background":                 white,
+  "background-gray":            #fafafa,
+  "focus":                      blue,
+  "accent":                     orange,
+  "info":                       #00bde3,
+  "success":                    #00a91c,
+  "warning":                    #ffbe2e,
+  "danger":                     #d54309,
+  "info-background":            #e7f6f8,
+  "success-background":         #ecf3ec,
+  "warning-background":         #faf3d1,
+  "danger-background":          #f4e3db,
+  // Used for background of elements that are placeholder or that have no value (think charts)
+  "placeholder-background":     #e2e2e2,
+  "placeholder-background-alt": #bababa,
+  "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,
+  "control":                    white,
+  "control-hover":              white,
+  "control-active":             white,
+  "control-border":             purple,
+  "control-border-hover":       blue,
+  "control-border-active":      orange,
+  "control-background":         purple,
+  "control-background-hover":   blue,
+  "control-background-active":  orange,
+  // Like accent indicator like things in ui (progress, etc)
+  "indicator" :                 #5050ab, 
 ) !default;
 
 /// Pairs of background-color and color definitions

package/scss/components/_index.scss

@@ -41,6 +41,7 @@
 @forward "pull-quote" as pull-quote-*;
 @forward "popover" as popover-*;
 @forward "progress-bar" as progress-bar-*;
+@forward "progress-circle" as progress-circle-*;
 @forward "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
@@ -100,6 +101,7 @@
 @use "placeholder-block";
 @use "popover";
 @use "progress-bar";
+@use "progress-circle";
 @use "pull-quote";
 @use "rail";
 @use "ratio-box";
@@ -160,6 +162,8 @@ $all-includes: (
   "panel",
   "popover",
   "progress-bar",
+  "progress-circle",
+  "pull-quote",
   "rail",
   "ratio-box",
   "rule",
@@ -331,6 +335,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "progress-bar")) {
     @include progress-bar.styles;
   }
+  @if (list.index($includes, "progress-circle")) {
+    @include progress-circle.styles;
+  }
   @if (list.index($includes, "pull-quote")) {
     @include pull-quote.styles;
   }

package/scss/components/_progress-bar.scss

@@ -27,7 +27,6 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} max-width [20rem] Max-width of the progress bar.
 /// @prop {List} margin [(0 0 0.5em 0)] Margin for the progress bar.
 /// @prop {Boolean} line-height [true] Line height for the progress bar. If true, falls back to typography's `line-height-dense`.
 /// @prop {Color} value-color ["type-tertiary"] Color of the value text.
@@ -50,7 +49,6 @@ $-fallbacks: (
 /// @prop {Time} animation-indeterminate-duration [2.5s] Duration of the indeterminate loading animation.
 
 $config: (
-  "max-width" : 20rem,
   "margin" : (0 0 0.5em 0),
   "line-height" : true,
   "value-color" : "type-tertiary",
@@ -59,12 +57,12 @@ $config: (
   "value-margin-deficit" : 0.3em,
   "value-color-deficit" : "danger",
   "bar-height" : 12px,
-  "bar-color" : rgb(80, 80, 171),
+  "bar-color" : "indicator",
   "bar-color-deficit" : "danger",
   "icon-margin" : 0.25em,
   "icon-color" : "type-tertiary",
   "icon-color-deficit" : "danger",
-  "track-color" : #ccc,
+  "track-color" : "placeholder-background-alt",
   "track-margin" : (0.1em 0),
   "animation-duration" : 200ms,
   "animation-timing" : ease,
@@ -132,7 +130,6 @@ $styles: (
   $prefix: selector.class("progress-bar");
   
   #{ $prefix } {
-    max-width: get("max-width");
     line-height: get("line-height");
     margin: get("margin");
   }