@ulu/frontend 0.1.0-beta.47 → 0.1.0-beta.48

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Version 0.1.0-beta.48
+
+- **scss/color**
+  - **css-tint, css-shade** Make sure colors (base white/black) use color.get()
+
 ## Version 0.1.0-beta.47
 
 - **scss/components/card**

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,15 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.48">Version 0.1.0-beta.48</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.47">Version 0.1.0-beta.47</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.46">Version 0.1.0-beta.46</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.45">Version 0.1.0-beta.45</a>
             		</li>
 
@@ -5358,6 +5367,30 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.48" tabindex="-1">Version 0.1.0-beta.48</h2>
+<ul>
+<li><strong>scss/color</strong>
+<ul>
+<li><strong>css-tint, css-shade</strong> Make sure colors (base white/black) use color.get()</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.47" tabindex="-1">Version 0.1.0-beta.47</h2>
+<ul>
+<li><strong>scss/components/card</strong>
+<ul>
+<li>Add card--fill modifier (expands to fit whatever element it's within). This was intended for use with data-grid but could be used this way for many layouts.</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.46" tabindex="-1">Version 0.1.0-beta.46</h2>
+<ul>
+<li><strong>scss/color</strong>
+<ul>
+<li><strong>css-tint, css-shade</strong> 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.</li>
+</ul>
+</li>
+</ul>
 <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>

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-65" name="title" checked="">
-<label for="live-demo-id-65">
+  <input type="checkbox" id="live-demo-id-25" name="title" checked="">
+<label for="live-demo-id-25">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-66" name="body" checked="">
-<label for="live-demo-id-66">
+  <input type="checkbox" id="live-demo-id-26" name="body" checked="">
+<label for="live-demo-id-26">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-67" name="content" checked="">
-<label for="live-demo-id-67">
+  <input type="checkbox" id="live-demo-id-27" name="content" checked="">
+<label for="live-demo-id-27">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-68" name="aside" checked="">
-<label for="live-demo-id-68">
+  <input type="checkbox" id="live-demo-id-28" name="aside" checked="">
+<label for="live-demo-id-28">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-69" name="footer" checked="">
-<label for="live-demo-id-69">
+  <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
+<label for="live-demo-id-29">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-70">
+<label for="live-demo-id-30">
   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-70" name="action">
+  <select id="live-demo-id-30" 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-71">
+<label for="live-demo-id-31">
   Media
 </label>  
-  <select id="live-demo-id-71" name="media">
+  <select id="live-demo-id-31" 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-72">
+<label for="live-demo-id-32">
   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-72" name="layout">
+  <select id="live-demo-id-32" 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-33">
+<table class="data-table data-table--striped" id="dt-13">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <th id="dt-13-type" rowspan="2">Type</th>
+      <th id="dt-13-group" colspan="2">Group</th>
+      <th id="dt-13-details" colspan="2">Details</th>
+      <th id="dt-13-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <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>
+      <th headers="dt-13-group" id="dt-13-primary">Primary</th>
+      <th headers="dt-13-group" id="dt-13-secondary">Secondary</th>
+      <th headers="dt-13-details" id="dt-13-before">Before Task</th>
+      <th headers="dt-13-details" id="dt-13-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <th rowspan="3" headers="dt-13-type dt-13-r1" id="dt-13-r1">Default</th>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-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-34">
+<table class="data-table data-table--large-first" id="dt-14">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <th id="dt-14-type" rowspan="2">Type</th>
+      <th id="dt-14-group" colspan="2">Group</th>
+      <th id="dt-14-details" colspan="2">Details</th>
+      <th id="dt-14-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <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>
+      <th headers="dt-14-group" id="dt-14-primary">Primary</th>
+      <th headers="dt-14-group" id="dt-14-secondary">Secondary</th>
+      <th headers="dt-14-details" id="dt-14-before">Before Task</th>
+      <th headers="dt-14-details" id="dt-14-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <th rowspan="3" headers="dt-14-type dt-14-r1" id="dt-14-r1">Default</th>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-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-35">
+<table class="data-table data-table--large-header" id="dt-15">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <th id="dt-15-type" rowspan="2">Type</th>
+      <th id="dt-15-group" colspan="2">Group</th>
+      <th id="dt-15-details" colspan="2">Details</th>
+      <th id="dt-15-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <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>
+      <th headers="dt-15-group" id="dt-15-primary">Primary</th>
+      <th headers="dt-15-group" id="dt-15-secondary">Secondary</th>
+      <th headers="dt-15-details" id="dt-15-before">Before Task</th>
+      <th headers="dt-15-details" id="dt-15-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <th rowspan="3" headers="dt-15-type dt-15-r1" id="dt-15-r1">Default</th>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-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-36">
+<table class="data-table data-table--no-border" id="dt-16">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <th id="dt-16-type" rowspan="2">Type</th>
+      <th id="dt-16-group" colspan="2">Group</th>
+      <th id="dt-16-details" colspan="2">Details</th>
+      <th id="dt-16-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <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>
+      <th headers="dt-16-group" id="dt-16-primary">Primary</th>
+      <th headers="dt-16-group" id="dt-16-secondary">Secondary</th>
+      <th headers="dt-16-details" id="dt-16-before">Before Task</th>
+      <th headers="dt-16-details" id="dt-16-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <th rowspan="3" headers="dt-16-type dt-16-r1" id="dt-16-r1">Default</th>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <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>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -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-487</li>
+<li><strong>Lines (code):</strong> 203-492</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">

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

@@ -5583,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> 223-230</li>
-<li><strong>Lines (code):</strong> 232-241</li>
+<li><strong>Lines (comments):</strong> 225-232</li>
+<li><strong>Lines (code):</strong> 234-243</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -5636,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> 243-247</li>
-<li><strong>Lines (code):</strong> 249-258</li>
+<li><strong>Lines (comments):</strong> 245-249</li>
+<li><strong>Lines (code):</strong> 251-260</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>
@@ -5910,6 +5910,7 @@
 <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>
+<li>These match ulu.color-tint() and are designed to accept the same arguments with the same results</li>
 </ul>
 <details>
   <summary>File Information</summary>
@@ -5917,8 +5918,8 @@
 <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>
+<li><strong>Lines (comments):</strong> 192-197</li>
+<li><strong>Lines (code):</strong> 199-201</li>
 </ul>
 </details>
 <h4 id="parameters-9" tabindex="-1">Parameters</h4>
@@ -5956,6 +5957,10 @@
 </tr>
 </tbody>
 </table>
+<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-shade" tabindex="-1">shade()</h3>
   <div class="sassdoc-item-header__labels">
@@ -5969,8 +5974,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 202-207</li>
-<li><strong>Lines (code):</strong> 209-211</li>
+<li><strong>Lines (comments):</strong> 203-208</li>
+<li><strong>Lines (code):</strong> 210-212</li>
 <li><strong>Author:</strong> Kitty Giraudel</li>
 </ul>
 </details>
@@ -6013,7 +6018,7 @@
 <ul>
 <li><a href="https://css-tricks.com/snippets/sass/tint-shade-functions/">Modified from source (CSS Tricks, Kitty Giraudel)</a></li>
 </ul>
-<h4 id="require-11" tabindex="-1">Require</h4>
+<h4 id="require-12" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
@@ -6026,6 +6031,7 @@
 <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>
+<li>These match ulu.color-shade() and are designed to accept the same arguments with the same results</li>
 </ul>
 <details>
   <summary>File Information</summary>
@@ -6033,8 +6039,8 @@
 <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>
+<li><strong>Lines (comments):</strong> 214-219</li>
+<li><strong>Lines (code):</strong> 221-223</li>
 </ul>
 </details>
 <h4 id="parameters-11" tabindex="-1">Parameters</h4>
@@ -6072,7 +6078,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-12" tabindex="-1">Require</h4>
+<h4 id="require-13" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>

package/package.json

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

package/scss/_color.scss

@@ -197,7 +197,7 @@ $color-classes: (
 /// @return {Color}
 
 @function css-tint($color, $percentage) {
-  @return color-mix(in srgb, white $percentage, $color calc(100% - $percentage));
+  @return color-mix(in srgb, get("white") $percentage, get($color) calc(100% - $percentage));
 }
 
 /// Shade (add black) a color with the default black by a percentage
@@ -219,7 +219,7 @@ $color-classes: (
 /// @return {Color}
 
 @function css-shade($color, $percentage) {
-  @return color-mix(in srgb, get("black") $percentage, $color calc(100% - $percentage));
+  @return color-mix(in srgb, get("black") $percentage, get($color) calc(100% - $percentage));
 }
 
 /// Prints all context styles