@ulu/frontend 0.1.0-beta.44 → 0.1.0-beta.46

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## Version 0.1.0-beta.46
+
+- **scss/color**
+  - **css-tint, css-shade** Add two new functions for tinting/shading in the browser (to support custom properties). In the future these may replace sass only tint/shade functions once they are more widely supported.
+
+## Version 0.1.0-beta.45
+
+- **scss/units > set()**
+  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)
+- **scss/element > set-rule-margins()**
+  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)
+
 ## Version 0.1.0-beta.44
 
 - **scss/components/card**

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.45">Version 0.1.0-beta.45</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.44">Version 0.1.0-beta.44</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.43">Version 0.1.0-beta.43</a>
             		</li>
 
@@ -5352,6 +5358,28 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.45" tabindex="-1">Version 0.1.0-beta.45</h2>
+<ul>
+<li><strong>scss/units &gt; set()</strong>
+<ul>
+<li>Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)</li>
+</ul>
+</li>
+<li><strong>scss/element &gt; set-rule-margins()</strong>
+<ul>
+<li>Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.44" tabindex="-1">Version 0.1.0-beta.44</h2>
+<ul>
+<li><strong>scss/components/card</strong>
+<ul>
+<li>Fix card body from shrinking when max-width is larger than body content</li>
+<li>Add card--horizontal-center modifier to center body of card</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.43" tabindex="-1">Version 0.1.0-beta.43</h2>
 <ul>
 <li><strong>scss/components/card</strong>

package/docs-dev/demos/card/index.html

@@ -5184,60 +5184,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-9" name="title" checked="">
-<label for="live-demo-id-9">
+  <input type="checkbox" id="live-demo-id-65" name="title" checked="">
+<label for="live-demo-id-65">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-10" name="body" checked="">
-<label for="live-demo-id-10">
+  <input type="checkbox" id="live-demo-id-66" name="body" checked="">
+<label for="live-demo-id-66">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-11" name="content" checked="">
-<label for="live-demo-id-11">
+  <input type="checkbox" id="live-demo-id-67" name="content" checked="">
+<label for="live-demo-id-67">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
-<label for="live-demo-id-12">
+  <input type="checkbox" id="live-demo-id-68" name="aside" checked="">
+<label for="live-demo-id-68">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
-<label for="live-demo-id-13">
+  <input type="checkbox" id="live-demo-id-69" name="footer" checked="">
+<label for="live-demo-id-69">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-14">
+<label for="live-demo-id-70">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-14" name="action">
+  <select id="live-demo-id-70" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-15">
+<label for="live-demo-id-71">
   Media
 </label>  
-  <select id="live-demo-id-15" name="media">
+  <select id="live-demo-id-71" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-16">
+<label for="live-demo-id-72">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-16" name="layout">
+  <select id="live-demo-id-72" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

package/docs-dev/demos/data-table/index.html

@@ -5222,178 +5222,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-5">
+<table class="data-table data-table--striped" id="dt-33">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-5-type" rowspan="2">Type</th>
-      <th id="dt-5-group" colspan="2">Group</th>
-      <th id="dt-5-details" colspan="2">Details</th>
-      <th id="dt-5-id" rowspan="2">Id</th>
+      <th id="dt-33-type" rowspan="2">Type</th>
+      <th id="dt-33-group" colspan="2">Group</th>
+      <th id="dt-33-details" colspan="2">Details</th>
+      <th id="dt-33-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-5-group" id="dt-5-primary">Primary</th>
-      <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
-      <th headers="dt-5-details" id="dt-5-before">Before Task</th>
-      <th headers="dt-5-details" id="dt-5-after">After Task</th>
+      <th headers="dt-33-group" id="dt-33-primary">Primary</th>
+      <th headers="dt-33-group" id="dt-33-secondary">Secondary</th>
+      <th headers="dt-33-details" id="dt-33-before">Before Task</th>
+      <th headers="dt-33-details" id="dt-33-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-33-type dt-33-r1" id="dt-33-r1">Default</th>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
-      <td headers="dt-5-id">OL-53-GHSLE</td>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-6">
+<table class="data-table data-table--large-first" id="dt-34">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-6-type" rowspan="2">Type</th>
-      <th id="dt-6-group" colspan="2">Group</th>
-      <th id="dt-6-details" colspan="2">Details</th>
-      <th id="dt-6-id" rowspan="2">Id</th>
+      <th id="dt-34-type" rowspan="2">Type</th>
+      <th id="dt-34-group" colspan="2">Group</th>
+      <th id="dt-34-details" colspan="2">Details</th>
+      <th id="dt-34-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-6-group" id="dt-6-primary">Primary</th>
-      <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
-      <th headers="dt-6-details" id="dt-6-before">Before Task</th>
-      <th headers="dt-6-details" id="dt-6-after">After Task</th>
+      <th headers="dt-34-group" id="dt-34-primary">Primary</th>
+      <th headers="dt-34-group" id="dt-34-secondary">Secondary</th>
+      <th headers="dt-34-details" id="dt-34-before">Before Task</th>
+      <th headers="dt-34-details" id="dt-34-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-34-type dt-34-r1" id="dt-34-r1">Default</th>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
-      <td headers="dt-6-id">OL-53-GHSLE</td>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-7">
+<table class="data-table data-table--large-header" id="dt-35">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-7-type" rowspan="2">Type</th>
-      <th id="dt-7-group" colspan="2">Group</th>
-      <th id="dt-7-details" colspan="2">Details</th>
-      <th id="dt-7-id" rowspan="2">Id</th>
+      <th id="dt-35-type" rowspan="2">Type</th>
+      <th id="dt-35-group" colspan="2">Group</th>
+      <th id="dt-35-details" colspan="2">Details</th>
+      <th id="dt-35-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-7-group" id="dt-7-primary">Primary</th>
-      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
-      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
-      <th headers="dt-7-details" id="dt-7-after">After Task</th>
+      <th headers="dt-35-group" id="dt-35-primary">Primary</th>
+      <th headers="dt-35-group" id="dt-35-secondary">Secondary</th>
+      <th headers="dt-35-details" id="dt-35-before">Before Task</th>
+      <th headers="dt-35-details" id="dt-35-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-35-type dt-35-r1" id="dt-35-r1">Default</th>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
-      <td headers="dt-7-id">OL-53-GHSLE</td>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-8">
+<table class="data-table data-table--no-border" id="dt-36">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-8-type" rowspan="2">Type</th>
-      <th id="dt-8-group" colspan="2">Group</th>
-      <th id="dt-8-details" colspan="2">Details</th>
-      <th id="dt-8-id" rowspan="2">Id</th>
+      <th id="dt-36-type" rowspan="2">Type</th>
+      <th id="dt-36-group" colspan="2">Group</th>
+      <th id="dt-36-details" colspan="2">Details</th>
+      <th id="dt-36-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-8-group" id="dt-8-primary">Primary</th>
-      <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
-      <th headers="dt-8-details" id="dt-8-before">Before Task</th>
-      <th headers="dt-8-details" id="dt-8-after">After Task</th>
+      <th headers="dt-36-group" id="dt-36-primary">Primary</th>
+      <th headers="dt-36-group" id="dt-36-secondary">Secondary</th>
+      <th headers="dt-36-details" id="dt-36-before">Before Task</th>
+      <th headers="dt-36-details" id="dt-36-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-36-type dt-36-r1" id="dt-36-r1">Default</th>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
-      <td headers="dt-8-id">OL-53-GHSLE</td>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/sass/components/card/index.html

@@ -5239,9 +5239,9 @@
   <span class="pjs-token pjs-string">"footer-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 2.5rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"horizontal-breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"horizontal-image-width"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">min</span><span class="pjs-token pjs-punctuation">(</span>33%<span class="pjs-token pjs-punctuation">,</span> 20rem<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"horizontal-body-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 80rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"horizontal-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 10rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"horizontal-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-body-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 20rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"horizontal-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 80rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> 56.25%<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"image-aspect-ratio"</span><span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>5<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5726,7 +5726,7 @@
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 197-201</li>
-<li><strong>Lines (code):</strong> 203-485</li>
+<li><strong>Lines (code):</strong> 203-487</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

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

@@ -5224,8 +5224,14 @@
                     <li><a href="#function-tint">tint()</a>
             		</li>
 
+                    <li><a href="#function-css-tint">css-tint()</a>
+            		</li>
+
                     <li><a href="#function-shade">shade()</a>
             		</li>
+
+                    <li><a href="#function-css-shade">css-shade()</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5577,8 +5583,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 203-210</li>
-<li><strong>Lines (code):</strong> 212-221</li>
+<li><strong>Lines (comments):</strong> 223-230</li>
+<li><strong>Lines (code):</strong> 232-241</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -5630,8 +5636,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 223-227</li>
-<li><strong>Lines (code):</strong> 229-238</li>
+<li><strong>Lines (comments):</strong> 243-247</li>
+<li><strong>Lines (code):</strong> 249-258</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>
@@ -5840,7 +5846,7 @@
     <span class="tag tag--primary"><strong>Function</strong></span>
   </div>
 </div>
-<p>Lighten a color using the default white by a percentage</p>
+<p>Tint (add white) a color using the default white by a percentage</p>
 <details>
   <summary>File Information</summary>
 <ul>
@@ -5896,24 +5902,79 @@
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
 <div class="sassdoc-item-header">
+<h3 id="function-css-tint" tabindex="-1">css-tint()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Function</strong></span>
+  </div>
+</div>
+<p>Tint (add white) a color using the default white by a percentage (Using color-mix)</p>
+<ul>
+<li>This only works in modern browsers (as of June 2025)</li>
+</ul>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _color.scss</li>
+<li><strong>Group:</strong> color</li>
+<li><strong>Type:</strong> function</li>
+<li><strong>Lines (comments):</strong> 192-196</li>
+<li><strong>Lines (code):</strong> 198-200</li>
+</ul>
+</details>
+<h4 id="parameters-9" 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">$color</td>
+<td style="text-align:left"><code>Color, String</code></td>
+<td style="text-align:left">Color or custom property to apply mix to</td>
+</tr>
+<tr>
+<td style="text-align:left">$percentage</td>
+<td style="text-align:left"><code>Number</code></td>
+<td style="text-align:left">Percentage</td>
+</tr>
+</tbody>
+</table>
+<h4 id="returns-4" tabindex="-1">Returns</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Type</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">Color</td>
+</tr>
+</tbody>
+</table>
+<div class="sassdoc-item-header">
 <h3 id="function-shade" tabindex="-1">shade()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Function</strong></span>
   </div>
 </div>
-<p>Darken a color with the default black by a percentage</p>
+<p>Shade (add black) a color with the default black by a percentage</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 192-197</li>
-<li><strong>Lines (code):</strong> 199-201</li>
+<li><strong>Lines (comments):</strong> 202-207</li>
+<li><strong>Lines (code):</strong> 209-211</li>
 <li><strong>Author:</strong> Kitty Giraudel</li>
 </ul>
 </details>
-<h4 id="parameters-9" tabindex="-1">Parameters</h4>
+<h4 id="parameters-10" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5935,7 +5996,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="returns-4" tabindex="-1">Returns</h4>
+<h4 id="returns-5" tabindex="-1">Returns</h4>
 <table>
 <thead>
 <tr>
@@ -5955,6 +6016,65 @@
 <h4 id="require-11" 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="function-css-shade" tabindex="-1">css-shade()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Function</strong></span>
+  </div>
+</div>
+<p>Shade (add black) a color using the default white by a percentage (Using color-mix)</p>
+<ul>
+<li>This only works in modern browsers (as of June 2025)</li>
+</ul>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _color.scss</li>
+<li><strong>Group:</strong> color</li>
+<li><strong>Type:</strong> function</li>
+<li><strong>Lines (comments):</strong> 213-217</li>
+<li><strong>Lines (code):</strong> 219-221</li>
+</ul>
+</details>
+<h4 id="parameters-11" 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">$color</td>
+<td style="text-align:left"><code>Color, String</code></td>
+<td style="text-align:left">Color or custom property to apply mix to</td>
+</tr>
+<tr>
+<td style="text-align:left">$percentage</td>
+<td style="text-align:left"><code>Number</code></td>
+<td style="text-align:left">Percentage</td>
+</tr>
+</tbody>
+</table>
+<h4 id="returns-6" tabindex="-1">Returns</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Type</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">Color</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-12" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
 
     </div>

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

@@ -5631,8 +5631,8 @@
 <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> 117-119</li>
+<li><strong>Lines (code):</strong> 121-123</li>
 </ul>
 </details>
 <h4 id="parameters-2" tabindex="-1">Parameters</h4>
@@ -5650,10 +5650,16 @@
 <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">$merge-mode</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">Merge mode see utils.map-merge() [null</td>
+</tr>
 </tbody>
 </table>
 <h4 id="require-2" tabindex="-1">Require</h4>
 <ul>
+<li>map-merge()</li>
 <li><a href="/frontend/sass/core/element/#variable-rule-margins">$rule-margins</a></li>
 </ul>
 <div class="sassdoc-item-header">
@@ -5669,8 +5675,8 @@
 <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> 139-140</li>
+<li><strong>Lines (code):</strong> 142-148</li>
 </ul>
 </details>
 <h4 id="parameters-3" tabindex="-1">Parameters</h4>
@@ -5708,8 +5714,8 @@
 <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>
+<li><strong>Lines (comments):</strong> 150-151</li>
+<li><strong>Lines (code):</strong> 153-155</li>
 </ul>
 </details>
 <h4 id="parameters-4" tabindex="-1">Parameters</h4>
@@ -5748,8 +5754,8 @@
 <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>
+<li><strong>Lines (comments):</strong> 157-158</li>
+<li><strong>Lines (code):</strong> 160-164</li>
 </ul>
 </details>
 <h4 id="parameters-5" tabindex="-1">Parameters</h4>
@@ -5795,8 +5801,8 @@ styling (text-decoration, etc)</li>
 <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>
+<li><strong>Lines (comments):</strong> 166-172</li>
+<li><strong>Lines (code):</strong> 174-187</li>
 </ul>
 </details>
 <h4 id="parameters-6" tabindex="-1">Parameters</h4>
@@ -5838,8 +5844,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 188-190</li>
-<li><strong>Lines (code):</strong> 192-214</li>
+<li><strong>Lines (comments):</strong> 189-191</li>
+<li><strong>Lines (code):</strong> 193-215</li>
 </ul>
 </details>
 <h4 id="parameters-7" tabindex="-1">Parameters</h4>
@@ -5881,8 +5887,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 216-217</li>
-<li><strong>Lines (code):</strong> 219-243</li>
+<li><strong>Lines (comments):</strong> 217-218</li>
+<li><strong>Lines (code):</strong> 220-244</li>
 </ul>
 </details>
 <h4 id="parameters-8" tabindex="-1">Parameters</h4>
@@ -5919,8 +5925,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 245-246</li>
-<li><strong>Lines (code):</strong> 248-268</li>
+<li><strong>Lines (comments):</strong> 246-247</li>
+<li><strong>Lines (code):</strong> 249-269</li>
 </ul>
 </details>
 <h4 id="parameters-9" tabindex="-1">Parameters</h4>
@@ -5957,8 +5963,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 270-275</li>
-<li><strong>Lines (code):</strong> 277-295</li>
+<li><strong>Lines (comments):</strong> 271-276</li>
+<li><strong>Lines (code):</strong> 278-296</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5998,8 +6004,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 298-306</li>
-<li><strong>Lines (code):</strong> 308-331</li>
+<li><strong>Lines (comments):</strong> 299-307</li>
+<li><strong>Lines (code):</strong> 309-332</li>
 </ul>
 </details>
 <h4 id="parameters-11" tabindex="-1">Parameters</h4>
@@ -6080,8 +6086,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 335-340</li>
-<li><strong>Lines (code):</strong> 342-384</li>
+<li><strong>Lines (comments):</strong> 336-341</li>
+<li><strong>Lines (code):</strong> 343-385</li>
 </ul>
 </details>
 <h4 id="parameters-12" tabindex="-1">Parameters</h4>
@@ -6173,8 +6179,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 124-125</li>
-<li><strong>Lines (code):</strong> 127-129</li>
+<li><strong>Lines (comments):</strong> 125-126</li>
+<li><strong>Lines (code):</strong> 128-130</li>
 </ul>
 </details>
 <h4 id="parameters-14" tabindex="-1">Parameters</h4>
@@ -6212,8 +6218,8 @@ styling (text-decoration, etc)</li>
 <li><strong>File:</strong> _element.scss</li>
 <li><strong>Group:</strong> element</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 131-132</li>
-<li><strong>Lines (code):</strong> 134-136</li>
+<li><strong>Lines (comments):</strong> 132-133</li>
+<li><strong>Lines (code):</strong> 135-137</li>
 </ul>
 </details>
 <h4 id="parameters-15" tabindex="-1">Parameters</h4>

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

@@ -5296,8 +5296,8 @@
 <li><strong>File:</strong> _units.scss</li>
 <li><strong>Group:</strong> units</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 28-33</li>
-<li><strong>Lines (code):</strong> 35-37</li>
+<li><strong>Lines (comments):</strong> 28-34</li>
+<li><strong>Lines (code):</strong> 36-38</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5320,10 +5320,16 @@
 <td style="text-align:left"><code>Map</code></td>
 <td style="text-align:left">A map to merge into the color palette</td>
 </tr>
+<tr>
+<td style="text-align:left">$merge-mode</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">Merge mode see utils.map-merge() [null</td>
+</tr>
 </tbody>
 </table>
 <h4 id="require" tabindex="-1">Require</h4>
 <ul>
+<li>map-merge()</li>
 <li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
 </ul>
 <h2 id="functions" tabindex="-1">Functions</h2>
@@ -5340,8 +5346,8 @@
 <li><strong>File:</strong> _units.scss</li>
 <li><strong>Group:</strong> units</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 39-41</li>
-<li><strong>Lines (code):</strong> 43-48</li>
+<li><strong>Lines (comments):</strong> 40-42</li>
+<li><strong>Lines (code):</strong> 44-49</li>
 </ul>
 </details>
 <h4 id="parameters-1" tabindex="-1">Parameters</h4>

package/package.json

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

package/scss/_color.scss

@@ -178,7 +178,7 @@ $color-classes: (
   color: get-context-value($name, "color");
 }
 
-/// Lighten a color using the default white by a percentage
+/// Tint (add white) a color using the default white by a percentage
 /// @param {Color, String} $color Color/palette color name to apply to tint
 /// @param {Number} $percentage Percentage
 /// @return {Color}
@@ -189,7 +189,18 @@ $color-classes: (
   @return color.mix(get("white"), get($color), $percentage);
 }
 
-/// Darken a color with the default black by a percentage
+/// Tint (add white) a color using the default white by a percentage (Using color-mix)
+/// - This only works in modern browsers (as of June 2025)
+/// - These match ulu.color-tint() and are designed to accept the same arguments with the same results
+/// @param {Color, String} $color Color or custom property to apply mix to
+/// @param {Number} $percentage Percentage
+/// @return {Color}
+
+@function css-tint($color, $percentage) {
+  @return color-mix(in srgb, white $percentage, $color calc(100% - $percentage));
+}
+
+/// Shade (add black) a color with the default black by a percentage
 /// @param {Color, String} $color Color/palette color name to shade
 /// @param {Number} $percentage Percentage to shade
 /// @return {Color}
@@ -200,6 +211,17 @@ $color-classes: (
   @return color.mix(get("black"), get($color), $percentage);
 }
 
+/// Shade (add black) a color using the default white by a percentage (Using color-mix)
+/// - This only works in modern browsers (as of June 2025)
+/// - These match ulu.color-shade() and are designed to accept the same arguments with the same results
+/// @param {Color, String} $color Color or custom property to apply mix to
+/// @param {Number} $percentage Percentage
+/// @return {Color}
+
+@function css-shade($color, $percentage) {
+  @return color-mix(in srgb, get("black") $percentage, $color calc(100% - $percentage));
+}
+
 /// Prints all context styles 
 /// @param {String} $with-prop Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)
 /// @example scss

package/scss/_element.scss

@@ -116,9 +116,10 @@ $rule-margins: (
 
 /// Sets rule margins
 /// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
-@mixin set-rule-margins($changes) {
-  $rule-margins: map.merge($rule-margins, $changes) !global;
+@mixin set-rule-margins($changes, $merge-mode: null) {
+  $rule-margins: utils.map-merge($rule-margins, $changes, $merge-mode) !global;
 }
 
 /// Get a rule style

package/scss/_units.scss

@@ -27,13 +27,14 @@ $config: (
 
 /// Update the units config
 /// @param {Map} $changes A map to merge into the color palette
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 /// @example scss Setting the error and type color
 ///   @include ulu.units-set((
 ///     "default" : 1.5em
 ///   ));
 
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
+@mixin set($changes, $merge-mode: null) {
+  $config: utils.map-merge($config, $changes, $merge-mode) !global;
 }
 
 /// Get a unit by name (preset) or number (multiplier of base)