@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

package/docs-dev/sass/core/element/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -5106,21 +5166,6 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-
-                    <li><a href="#variable-rule-styles">$rule-styles</a>
-            		</li>
-
-                    <li><a href="#variable-rule-margins">$rule-margins</a>
-            		</li>
-                </ol>
-            		</li>
-
                     <li><a href="#mixins">Mixins</a>
             
                 <ol>
@@ -5178,6 +5223,21 @@
 
                     <li><a href="#function-get-rule-margin">get-rule-margin()</a>
             		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#variables">Variables</a>
+            
+                <ol>
+                    
+                    <li><a href="#variable-config">$config</a>
+            		</li>
+
+                    <li><a href="#variable-rule-styles">$rule-styles</a>
+            		</li>
+
+                    <li><a href="#variable-rule-margins">$rule-margins</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5194,307 +5254,144 @@
       <h1 id="element" tabindex="-1">Element</h1>
 <div class="type-large">
 </div>
-<h2 id="variables" tabindex="-1">Variables</h2>
+<h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
+<h3 id="mixin-set" tabindex="-1">set()</h3>
   <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"backdrop-blur"</span><span class="pjs-token pjs-punctuation">:</span>                    4px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"backdrop-color"</span><span class="pjs-token pjs-punctuation">:</span>                   <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>73<span class="pjs-token pjs-punctuation">,</span> 73<span class="pjs-token pjs-punctuation">,</span> 73<span class="pjs-token pjs-punctuation">,</span> 0.459<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"list-item-indent"</span> <span class="pjs-token pjs-punctuation">:</span>                1.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"text-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                      0 1px 4px <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span>0<span class="pjs-token pjs-punctuation">,</span>0<span class="pjs-token pjs-punctuation">,</span>0.3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-radius"</span><span class="pjs-token pjs-punctuation">:</span>                    6px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-radius-small"</span><span class="pjs-token pjs-punctuation">:</span>              3px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-radius-large"</span><span class="pjs-token pjs-punctuation">:</span>              12px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                       0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow-above"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 20px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow-hover"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow-hover'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow-inset"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow-raised"</span><span class="pjs-token pjs-punctuation">:</span>                0 1px 12px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration"</span><span class="pjs-token pjs-punctuation">:</span>             underline<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-color"</span><span class="pjs-token pjs-punctuation">:</span>       initial<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-default"</span><span class="pjs-token pjs-punctuation">:</span>     none<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-underline-offset"</span> <span class="pjs-token pjs-punctuation">:</span>     auto<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-style"</span><span class="pjs-token pjs-punctuation">:</span>       dotted<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-style-hover"</span><span class="pjs-token pjs-punctuation">:</span> solid<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-text-decoration-thickness"</span><span class="pjs-token pjs-punctuation">:</span>   0.1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin"</span><span class="pjs-token pjs-punctuation">:</span>                           1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-small"</span><span class="pjs-token pjs-punctuation">:</span>                     0.65em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-large"</span><span class="pjs-token pjs-punctuation">:</span>                     2em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ol-list-style-type"</span><span class="pjs-token pjs-punctuation">:</span>               decimal<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ol-list-style-type-2"</span><span class="pjs-token pjs-punctuation">:</span>             lower-alpha<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ol-list-style-type-3"</span><span class="pjs-token pjs-punctuation">:</span>             lower-roman<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ul-list-style-type"</span><span class="pjs-token pjs-punctuation">:</span>               disc<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ul-list-style-type-2"</span><span class="pjs-token pjs-punctuation">:</span>             circle<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"ul-list-style-type-3"</span><span class="pjs-token pjs-punctuation">:</span>             square<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"cap-color"</span> <span class="pjs-token pjs-punctuation">:</span>                       <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"cap-size"</span> <span class="pjs-token pjs-punctuation">:</span>                        5px
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<p>Change modules $config</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 10-40</li>
-<li><strong>Lines (code):</strong> 42-74</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 94-96</li>
+<li><strong>Lines (code):</strong> 98-100</li>
 </ul>
 </details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<h4 id="parameters" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
 <th style="text-align:left">Name</th>
 <th style="text-align:left">Type</th>
 <th style="text-align:left">Description</th>
-<th style="text-align:left">Default</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">backdrop-blur</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Backdrop blur amount used on elements/components</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">backdrop-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left">Backdrop color (modal overlays, etc)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">list-item-indent</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left"></td>
-<td style="text-align:left">1.5em</td>
-</tr>
-<tr>
-<td style="text-align:left">text-shadow</td>
-<td style="text-align:left">List</td>
-<td style="text-align:left">Common text shadow</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">border-radius</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element border radius</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
 </tr>
 <tr>
-<td style="text-align:left">border-radius-large</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element border radius (large)</td>
+<td style="text-align:left">@include ulu.element-set(( &quot;property&quot; : value ));</td>
 <td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">border-radius-small</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element border radius (small)</td>
 <td style="text-align:left"></td>
 </tr>
+</tbody>
+</table>
+<h4 id="require" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-set-rule-styles" tabindex="-1">set-rule-styles()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Sets rule styles</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 110-111</li>
+<li><strong>Lines (code):</strong> 113-115</li>
+</ul>
+</details>
+<h4 id="parameters-1" tabindex="-1">Parameters</h4>
+<table>
+<thead>
 <tr>
-<td style="text-align:left">box-shadow</td>
-<td style="text-align:left">List</td>
-<td style="text-align:left">Box-shadow definition for elements that are on top of page</td>
-<td style="text-align:left"></td>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
 </tr>
+</thead>
+<tbody>
 <tr>
-<td style="text-align:left">box-shadow-above</td>
-<td style="text-align:left">List</td>
-<td style="text-align:left">Box-shadow definition for elements that are above the page (fixed items, etc)</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
 </tr>
+</tbody>
+</table>
+<h4 id="require-1" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/element/#variable-rule-styles">$rule-styles</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-set-rule-margins" tabindex="-1">set-rule-margins()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Sets rule margins</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 117-118</li>
+<li><strong>Lines (code):</strong> 120-122</li>
+</ul>
+</details>
+<h4 id="parameters-2" tabindex="-1">Parameters</h4>
+<table>
+<thead>
 <tr>
-<td style="text-align:left">box-shadow-hover</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left"></td>
-<td style="text-align:left">0 1px 5px color.get('box-shadow-hover')</td>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
 </tr>
+</thead>
+<tbody>
 <tr>
-<td style="text-align:left">box-shadow-inset</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left"></td>
-<td style="text-align:left">0 1px 5px color.get('box-shadow')</td>
-</tr>
-<tr>
-<td style="text-align:left">box-shadow-raised</td>
-<td style="text-align:left">List</td>
-<td style="text-align:left">Box-shadow definition for elements that are raised off of the page (dropdowns, etc)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-default</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">Whether links use underline, remember that removing underline will create an accessibility issue (not relying on color)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-color-hover</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-underline-offset</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-style</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-style-hover</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">link-text-decoration-thickness</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">margin</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element margin</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">margin-large</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element margin (large)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">margin-small</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Common element margin (small) (default for lists)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ol-list-style-type</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">Ordered list type (level 1)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ol-list-style-type-2</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">Ordered list type (level 2)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ol-list-style-type-3</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">Ordered list type (level 3)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ul-list-style-type</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ul-list-style-type-2</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">ul-list-style-type-3</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
 </tr>
 </tbody>
 </table>
-<div class="sassdoc-item-header">
-<h3 id="variable-rule-styles" tabindex="-1">$rule-styles</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</div>
-<p>Rule style map, redefine defaults or add to</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$rule-styles</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"default"</span><span class="pjs-token pjs-punctuation">:</span> 1px solid color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"light"</span><span class="pjs-token pjs-punctuation">:</span>   1px solid color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _element.scss</li>
-<li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 76-77</li>
-<li><strong>Lines (code):</strong> 79-82</li>
-</ul>
-</details>
-<div class="sassdoc-item-header">
-<h3 id="variable-rule-margins" tabindex="-1">$rule-margins</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</div>
-<p>Common rule margins (space between rule and type)</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$rule-margins</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"smallest"</span><span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span>    1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">:</span>   2rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">:</span>    3rem
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
+<h4 id="require-2" tabindex="-1">Require</h4>
 <ul>
-<li><strong>File:</strong> _element.scss</li>
-<li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 84-85</li>
-<li><strong>Lines (code):</strong> 87-92</li>
+<li><a href="/frontend/sass/core/element/#variable-rule-margins">$rule-margins</a></li>
 </ul>
-</details>
-<h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
-<h3 id="mixin-set" tabindex="-1">set()</h3>
+<h3 id="mixin-rule" tabindex="-1">rule()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Change modules $config</p>
+<p>Get full rule CSS (style and margin)</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 94-96</li>
-<li><strong>Lines (code):</strong> 98-100</li>
+<li><strong>Lines (comments):</strong> 138-139</li>
+<li><strong>Lines (code):</strong> 141-147</li>
 </ul>
 </details>
-<h4 id="parameters" tabindex="-1">Parameters</h4>
+<h4 id="parameters-3" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5509,111 +5406,118 @@
 <td style="text-align:left"><code>Map</code></td>
 <td style="text-align:left">Map of changes</td>
 </tr>
-<tr>
-<td style="text-align:left">@include ulu.element-set(( &quot;property&quot; : value ));</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
 </tbody>
 </table>
-<h4 id="require" tabindex="-1">Require</h4>
+<h4 id="require-3" tabindex="-1">Require</h4>
 <ul>
-<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
+<li><a href="/frontend/sass/core/element/#mixin-rule-style">rule-style()</a></li>
+<li><a href="/frontend/sass/core/element/#mixin-rule-margin">rule-margin()</a></li>
 </ul>
 <div class="sassdoc-item-header">
-<h3 id="mixin-set-rule-styles" tabindex="-1">set-rule-styles()</h3>
+<h3 id="mixin-rule-style" tabindex="-1">rule-style()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Sets rule styles</p>
+<p>Output CSS for a rule's style (not margins</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 110-111</li>
-<li><strong>Lines (code):</strong> 113-115</li>
+<li><strong>Lines (comments):</strong> 149-150</li>
+<li><strong>Lines (code):</strong> 152-154</li>
 </ul>
 </details>
-<h4 id="parameters-1" tabindex="-1">Parameters</h4>
+<h4 id="parameters-4" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
 <th style="text-align:left">Name</th>
 <th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
 <th style="text-align:left">Description</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">$changes</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Map of changes</td>
+<td style="text-align:left">$name</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">&quot;default&quot;</td>
+<td style="text-align:left">name of rule style</td>
 </tr>
 </tbody>
 </table>
-<h4 id="require-1" tabindex="-1">Require</h4>
+<h4 id="require-4" tabindex="-1">Require</h4>
 <ul>
-<li><a href="/frontend/sass/core/element/#variable-rule-styles">$rule-styles</a></li>
+<li><a href="/frontend/sass/core/element/#function-get-rule-style">get-rule-style()</a></li>
 </ul>
 <div class="sassdoc-item-header">
-<h3 id="mixin-set-rule-margins" tabindex="-1">set-rule-margins()</h3>
+<h3 id="mixin-rule-margin" tabindex="-1">rule-margin()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Sets rule margins</p>
+<p>Output CSS for a rule's margin</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 117-118</li>
-<li><strong>Lines (code):</strong> 120-122</li>
+<li><strong>Lines (comments):</strong> 156-157</li>
+<li><strong>Lines (code):</strong> 159-163</li>
 </ul>
 </details>
-<h4 id="parameters-2" tabindex="-1">Parameters</h4>
+<h4 id="parameters-5" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
 <th style="text-align:left">Name</th>
 <th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
 <th style="text-align:left">Description</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">$changes</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Map of changes</td>
+<td style="text-align:left">$name</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">&quot;default&quot;</td>
+<td style="text-align:left">name of rule style</td>
 </tr>
 </tbody>
 </table>
-<h4 id="require-2" tabindex="-1">Require</h4>
+<h4 id="require-5" tabindex="-1">Require</h4>
 <ul>
-<li><a href="/frontend/sass/core/element/#variable-rule-margins">$rule-margins</a></li>
+<li><a href="/frontend/sass/core/element/#function-get-rule-margin">get-rule-margin()</a></li>
+<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
 <div class="sassdoc-item-header">
-<h3 id="mixin-rule" tabindex="-1">rule()</h3>
+<h3 id="mixin-link-defaults" tabindex="-1">link-defaults()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Get full rule CSS (style and margin)</p>
+<p>Print the default link styling (no hover and focus styles)</p>
+<ul>
+<li>Default link styling just sets the color and the link-text-decoration-default</li>
+<li>This is usually output at the top of the stylesheet to style the general <a> element</a></li>
+<li>Use link() mixin to print the full link styling (when used in content/text) which includes the full
+styling (text-decoration, etc)</li>
+</ul>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 138-139</li>
-<li><strong>Lines (code):</strong> 141-147</li>
+<li><strong>Lines (comments):</strong> 165-171</li>
+<li><strong>Lines (code):</strong> 173-186</li>
 </ul>
 </details>
-<h4 id="parameters-3" tabindex="-1">Parameters</h4>
+<h4 id="parameters-6" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5624,154 +5528,28 @@
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">$changes</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Map of changes</td>
+<td style="text-align:left">$visited</td>
+<td style="text-align:left"><code>Boolean</code></td>
+<td style="text-align:left">Include visited style</td>
+</tr>
+<tr>
+<td style="text-align:left">$active</td>
+<td style="text-align:left"><code>Boolean</code></td>
+<td style="text-align:left">Include active style</td>
 </tr>
 </tbody>
 </table>
-<h4 id="require-3" tabindex="-1">Require</h4>
+<h4 id="require-6" tabindex="-1">Require</h4>
 <ul>
-<li><a href="/frontend/sass/core/element/#mixin-rule-style">rule-style()</a></li>
-<li><a href="/frontend/sass/core/element/#mixin-rule-margin">rule-margin()</a></li>
+<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
 <div class="sassdoc-item-header">
-<h3 id="mixin-rule-style" tabindex="-1">rule-style()</h3>
+<h3 id="mixin-link" tabindex="-1">link()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Output CSS for a rule's style (not margins</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _element.scss</li>
-<li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 149-150</li>
-<li><strong>Lines (code):</strong> 152-154</li>
-</ul>
-</details>
-<h4 id="parameters-4" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$name</td>
-<td style="text-align:left"><code>String</code></td>
-<td style="text-align:left">&quot;default&quot;</td>
-<td style="text-align:left">name of rule style</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require-4" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/core/element/#function-get-rule-style">get-rule-style()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-rule-margin" tabindex="-1">rule-margin()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Output CSS for a rule's margin</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _element.scss</li>
-<li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 156-157</li>
-<li><strong>Lines (code):</strong> 159-163</li>
-</ul>
-</details>
-<h4 id="parameters-5" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$name</td>
-<td style="text-align:left"><code>String</code></td>
-<td style="text-align:left">&quot;default&quot;</td>
-<td style="text-align:left">name of rule style</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require-5" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/core/element/#function-get-rule-margin">get-rule-margin()</a></li>
-<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-link-defaults" tabindex="-1">link-defaults()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Print the default link styling (no hover and focus styles)</p>
-<ul>
-<li>Default link styling just sets the color and the link-text-decoration-default</li>
-<li>This is usually output at the top of the stylesheet to style the general <a> element</a></li>
-<li>Use link() mixin to print the full link styling (when used in content/text) which includes the full
-styling (text-decoration, etc)</li>
-</ul>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _element.scss</li>
-<li><strong>Group:</strong> element</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 165-171</li>
-<li><strong>Lines (code):</strong> 173-186</li>
-</ul>
-</details>
-<h4 id="parameters-6" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$visited</td>
-<td style="text-align:left"><code>Boolean</code></td>
-<td style="text-align:left">Include visited style</td>
-</tr>
-<tr>
-<td style="text-align:left">$active</td>
-<td style="text-align:left"><code>Boolean</code></td>
-<td style="text-align:left">Include active style</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require-6" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-link" tabindex="-1">link()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Output link CSS styles (this is the full link styling when used in content/text)</p>
+<p>Output link CSS styles (this is the full link styling when used in content/text)</p>
 <details>
   <summary>File Information</summary>
 <ul>
@@ -6178,6 +5956,288 @@ styling (text-decoration, etc)</li>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/element/#variable-rule-margins">$rule-margins</a></li>
 </ul>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"backdrop-blur"</span><span class="pjs-token pjs-punctuation">:</span>                    4px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"backdrop-color"</span><span class="pjs-token pjs-punctuation">:</span>                   <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>73<span class="pjs-token pjs-punctuation">,</span> 73<span class="pjs-token pjs-punctuation">,</span> 73<span class="pjs-token pjs-punctuation">,</span> 0.459<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"list-item-indent"</span> <span class="pjs-token pjs-punctuation">:</span>                1.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"text-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                      0 1px 4px <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span>0<span class="pjs-token pjs-punctuation">,</span>0<span class="pjs-token pjs-punctuation">,</span>0.3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-radius"</span><span class="pjs-token pjs-punctuation">:</span>                    6px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-radius-small"</span><span class="pjs-token pjs-punctuation">:</span>              3px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-radius-large"</span><span class="pjs-token pjs-punctuation">:</span>              12px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                       0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow-above"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 20px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow-hover"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow-hover'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow-inset"</span><span class="pjs-token pjs-punctuation">:</span>                 0 1px 5px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow-raised"</span><span class="pjs-token pjs-punctuation">:</span>                0 1px 12px color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">'box-shadow'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration"</span><span class="pjs-token pjs-punctuation">:</span>             underline<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-color"</span><span class="pjs-token pjs-punctuation">:</span>       initial<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-default"</span><span class="pjs-token pjs-punctuation">:</span>     none<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-underline-offset"</span> <span class="pjs-token pjs-punctuation">:</span>     auto<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-style"</span><span class="pjs-token pjs-punctuation">:</span>       dotted<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-style-hover"</span><span class="pjs-token pjs-punctuation">:</span> solid<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-text-decoration-thickness"</span><span class="pjs-token pjs-punctuation">:</span>   0.1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin"</span><span class="pjs-token pjs-punctuation">:</span>                           1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-small"</span><span class="pjs-token pjs-punctuation">:</span>                     0.65em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-large"</span><span class="pjs-token pjs-punctuation">:</span>                     2em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ol-list-style-type"</span><span class="pjs-token pjs-punctuation">:</span>               decimal<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ol-list-style-type-2"</span><span class="pjs-token pjs-punctuation">:</span>             lower-alpha<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ol-list-style-type-3"</span><span class="pjs-token pjs-punctuation">:</span>             lower-roman<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ul-list-style-type"</span><span class="pjs-token pjs-punctuation">:</span>               disc<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ul-list-style-type-2"</span><span class="pjs-token pjs-punctuation">:</span>             circle<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"ul-list-style-type-3"</span><span class="pjs-token pjs-punctuation">:</span>             square<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-color"</span> <span class="pjs-token pjs-punctuation">:</span>                       <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-size"</span> <span class="pjs-token pjs-punctuation">:</span>                        5px
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 10-40</li>
+<li><strong>Lines (code):</strong> 42-74</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+<th style="text-align:left">Default</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">backdrop-blur</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Backdrop blur amount used on elements/components</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">backdrop-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">Backdrop color (modal overlays, etc)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">list-item-indent</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">1.5em</td>
+</tr>
+<tr>
+<td style="text-align:left">text-shadow</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left">Common text shadow</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">border-radius</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element border radius</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">border-radius-large</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element border radius (large)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">border-radius-small</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element border radius (small)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left">Box-shadow definition for elements that are on top of page</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow-above</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left">Box-shadow definition for elements that are above the page (fixed items, etc)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow-hover</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">0 1px 5px color.get('box-shadow-hover')</td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow-inset</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">0 1px 5px color.get('box-shadow')</td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow-raised</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left">Box-shadow definition for elements that are raised off of the page (dropdowns, etc)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-default</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">Whether links use underline, remember that removing underline will create an accessibility issue (not relying on color)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-color-hover</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-underline-offset</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-style</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-style-hover</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">link-text-decoration-thickness</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">margin</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element margin</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">margin-large</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element margin (large)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">margin-small</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Common element margin (small) (default for lists)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ol-list-style-type</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">Ordered list type (level 1)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ol-list-style-type-2</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">Ordered list type (level 2)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ol-list-style-type-3</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">Ordered list type (level 3)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ul-list-style-type</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ul-list-style-type-2</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">ul-list-style-type-3</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left"></td>
+<td style="text-align:left"></td>
+</tr>
+</tbody>
+</table>
+<div class="sassdoc-item-header">
+<h3 id="variable-rule-styles" tabindex="-1">$rule-styles</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Rule style map, redefine defaults or add to</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$rule-styles</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"default"</span><span class="pjs-token pjs-punctuation">:</span> 1px solid color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"light"</span><span class="pjs-token pjs-punctuation">:</span>   1px solid color.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 76-77</li>
+<li><strong>Lines (code):</strong> 79-82</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="variable-rule-margins" tabindex="-1">$rule-margins</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Common rule margins (space between rule and type)</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$rule-margins</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"smallest"</span><span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span>    1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">:</span>   2rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">:</span>    3rem
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _element.scss</li>
+<li><strong>Group:</strong> element</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 84-85</li>
+<li><strong>Lines (code):</strong> 87-92</li>
+</ul>
+</details>
 
     </div>
   </div>