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

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.45",
+  "version": "0.1.0-beta.47",
   "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/components/_card.scss

@@ -476,6 +476,11 @@ $config: (
       }
     }
   }
+  #{ $prefix }--fill {
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
 
   @if (get("horizontal-breakpoint")) {
     @include breakpoint.min(get("horizontal-breakpoint")) {