@ulu/frontend 0.1.0-beta.94 → 0.1.0-beta.95

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

@@ -706,6 +706,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1950,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -3432,6 +3462,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4676,6 +4721,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">

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

@@ -706,6 +706,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1950,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -3432,6 +3462,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4676,6 +4721,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">

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

@@ -706,6 +706,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1950,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -3432,6 +3462,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4676,6 +4721,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">

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

@@ -706,6 +706,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1950,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -3432,6 +3462,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4676,6 +4721,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">

package/docs-dev/sass/index.html

@@ -706,6 +706,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1950,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -3432,6 +3462,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4676,6 +4721,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.94",
+  "version": "0.1.0-beta.95",
   "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

@@ -21,6 +21,7 @@ $palette: (
   "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,

package/scss/base/_keyframes.scss

@@ -184,4 +184,9 @@
     96% { transform: rotate(-2deg); }
     100% { transform: rotate(0deg); }
   }
+  @keyframes UluPulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
 }

package/scss/components/_index.scss

@@ -43,6 +43,7 @@
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
+@forward "skeleton" as skeleton-*;
 @forward "skip-link" as skip-link-*;
 @forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
@@ -100,6 +101,7 @@
 @use "ratio-box";
 @use "rule";
 @use "scroll-slider";
+@use "skeleton";
 @use "skip-link";
 @use "sticky-list";
 @use "slider";
@@ -156,6 +158,7 @@ $all-includes: (
   "ratio-box",
   "rule",
   "scroll-slider",
+  "skeleton",
   "skip-link",
   "sticky-list",
   "slider",
@@ -331,6 +334,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "scroll-slider")) {
     @include scroll-slider.styles;
   }
+  @if (list.index($includes, "skeleton")) {
+    @include skeleton.styles;
+  }
   @if (list.index($includes, "skip-link")) {
     @include skip-link.styles;
   }

package/scss/components/_skeleton.scss

@@ -0,0 +1,117 @@
+////
+/// @group skeleton
+/// Placeholder component for skeleton (ie. loading state
+////
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} animation [pulse 2s cubic-bezier(0.4,0,0.6,1) infinite] The animation applied to skeleton elements.
+/// @prop {Color} color [type-disabled] The base color for skeleton elements.
+/// @prop {Color} background-color [#cbcbcb] The primary background color for skeleton elements.
+/// @prop {Color} background-color-alt [#aeaeae] An alternative background color for skeleton elements, used for variations.
+/// @prop {Dimension} border-radius [true] The border-radius for skeleton blocks and text. If set to true, uses the element.scss property for "border-radius".
+/// @prop {Dimension} inline-margin [0.35em] The margin between inline skeleton text elements.
+/// @prop {Number} media-ratio [(4/3)] The aspect ratio for skeleton media blocks (width/height).
+/// @prop {Dimension} text-border-radius [3em] The border-radius for skeleton text lines.
+/// @prop {Map} text-sizes [Map] A map defining various width percentages for skeleton text lines.
+$config: (
+  "animation" : UluPulse 2s cubic-bezier(0.4,0,0.6,1) infinite,
+  "color" : "type-disabled",
+  "background-color" : #e2e2e2,
+  "background-color-alt" : #cecece,
+  "border-radius": true,
+  "inline-margin" : 0.35em,
+  "media-ratio" : list.slash(4, 3),
+  "text-border-radius" : 3em,
+  "text-sizes": (
+    "small-xxx" : 10%,
+    "small-xx" : 20%,
+    "small-x" : 30%,
+    "small" : 40%,
+    "large" : 70%,
+    "large-x" : 85%,
+    "large-xx" : 100%
+  ),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-skeleton-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-skeleton-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "skeleton [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo skeleton
+/// @example scss
+///  @include ulu.component-skeleton-styles();
+
+@mixin styles {
+  $prefix: selector.class("skeleton");
+
+  #{ $prefix } {
+    animation: get("animation") ;
+    color: color.get(get("color"));
+  }
+  #{ $prefix }__background-color {
+    background-color: color.get(get("background-color")) !important;
+  }
+  #{ $prefix }__block,
+  #{ $prefix }__text {
+    background-color: color.get(get("background-color")) !important;
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }__alt {
+    background-color: color.get(get("background-color-alt"));
+  }
+  #{ $prefix }__block--media {
+    aspect-ratio: 4/3;
+  }
+  #{ $prefix }__text {
+    height: 1em;
+    width: 60%;
+    border-radius: get("text-border-radius");
+  }
+  #{ $prefix }__text--inline {
+    display: inline-block;
+    & + & {
+      margin-left: get("inline-margin");
+    }
+  }
+  @each $name, $value in get("text-sizes") {
+    #{ $prefix }__text--#{ $name } {
+      width: $value;
+    }
+  }
+}

package/scss/helpers/_utilities.scss

@@ -60,7 +60,7 @@
     margin-right: auto;
   }
   #{ $prefix-margin }-left-auto {
-        margin-left: auto;
+    margin-left: auto;
   }
   #{ $prefix-margin }-right-auto {
     margin-right: auto;