@ulu/frontend 0.1.0-beta.4 → 0.1.0-beta.6

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log
 
-## Version 0.1.0-beta.3
+## Version 0.1.0-beta.6
+
+- Add "title-font-family" to scss/components/modal
+
+## Version 0.1.0-beta.5
+
+- scss/components/nav-strip - Adjust rule style so the rule is not a border on parent (so child can overlap if desired), Adjust all colors to run through color.get(), Convert to gap instead of margins
+
+## Version 0.1.0-beta.3 - 0.1.0-beta.4
 
 - scss/components/tabs - Add breakpoint to vertical tabs (to go to horizontal)
 

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

@@ -4638,46 +4638,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-3">
+<table class="data-table" id="dt-62">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-3-type" rowspan="2">Type</th>
-      <th id="dt-3-group" colspan="2">Group</th>
-      <th id="dt-3-details" colspan="2">Details</th>
-      <th id="dt-3-id" rowspan="2">Id</th>
+      <th id="dt-62-type" rowspan="2">Type</th>
+      <th id="dt-62-group" colspan="2">Group</th>
+      <th id="dt-62-details" colspan="2">Details</th>
+      <th id="dt-62-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
-      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
-      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
-      <th headers="dt-3-details" id="dt-3-after">After Task</th>
+      <th headers="dt-62-group" id="dt-62-primary">Primary</th>
+      <th headers="dt-62-group" id="dt-62-secondary">Secondary</th>
+      <th headers="dt-62-details" id="dt-62-before">Before Task</th>
+      <th headers="dt-62-details" id="dt-62-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-62-type dt-62-r1" id="dt-62-r1">Default</th>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-62-group dt-62-primary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-group dt-62-secondary dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-before dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-details dt-62-after dt-62-r1">Lorem Ipsum</td>
+      <td headers="dt-62-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/nav-strip/index.html

@@ -4601,27 +4601,19 @@
 <div class="nav-strip">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4631,23 +4623,19 @@
 <div class="nav-strip nav-strip--auto">
   <ul>
   <li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 1
         </a>
       </li><li>
-        <a href="#" class="
-          is-active">
+        <a href="#" class="is-active">
           Link Number 2
         </a>
       </li><li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 3
         </a>
       </li><li>
-        <a href="#" class="
-          ">
+        <a href="#" class="">
           Link Number 4
         </a>
       </li>
@@ -4657,27 +4645,19 @@
 <div class="nav-strip nav-strip--center">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4687,27 +4667,19 @@
 <div class="nav-strip nav-strip--right">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>
@@ -4717,27 +4689,19 @@
 <div class="nav-strip nav-strip--rule">
   <ul class="nav-strip__list">
   <li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 1
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        is-active">
+      <a href="#" class="nav-strip__link is-active">
         Link Number 2
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 3
       </a>
     </li><li class="nav-strip__item">
-      <a href="#" class="
-        nav-strip__link
-        ">
+      <a href="#" class="nav-strip__link ">
         Link Number 4
       </a>
     </li>

package/docs-dev/sass/components/nav-strip/index.html

@@ -4650,11 +4650,11 @@ current page or section, is visually emphasized with an underline.</p>
   <span class="pjs-token pjs-string">"padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 0.3em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"padding-y-ruled"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"nowrap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"rule-color"</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-string">"rule-offset"</span> <span class="pjs-token pjs-punctuation">:</span> -3px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-color"</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-string">"rule-offset"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"underline-color"</span> <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"underline-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> gray<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"underline-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"selected"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"underline-color-hover"</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-string">"underline-size"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
@@ -4831,7 +4831,7 @@ current page or section, is visually emphasized with an underline.</p>
 <li><strong>Group:</strong> nav-strip</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 72-74</li>
-<li><strong>Lines (code):</strong> 76-148</li>
+<li><strong>Lines (code):</strong> 76-153</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/package.json

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

package/scss/_color.scss

@@ -23,6 +23,7 @@ $palette: (
   "type-tertiary"           : rgb(157, 157, 157),
   "headline"                : inherit,
   "background"              : white,
+  "background-gray"         : #F7F8F7,
   "focus"                   : blue,
   "error"                   : red,
   "warning"                 : orange,

package/scss/components/_accordion.scss

@@ -13,8 +13,8 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Color}  background-color  [white] This is the background color of the accordion before it is expanded. 
-/// @prop {Color}  background-color-open  [#F7F8F7] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
+/// @prop {Color}  background-color  [accordion-background] This is the background color of the accordion before it is expanded. 
+/// @prop {Color}  background-color-open  [accordion-background-open] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
 /// @prop {String} border-color ["rule"]
 /// @prop {Number} border-radius  [0] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
 /// @prop {Dimension} border-width  [1px] The width of the borders of the accordions
@@ -41,8 +41,8 @@
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
 
 $config: (
-  "background-color":            white,
-  "background-color-open":       #F7F8F7,
+  "background-color":            "background",
+  "background-color-open":       "background-gray",
   "border-color":                "rule",
   "border-radius":               0,
   "border-width":                1px,
@@ -59,7 +59,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    white,
+  "summary-background-color":    "white",
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -107,7 +107,7 @@ $config: (
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-shadow: get("box-shadow");
     &:first-of-type {
       border-top-left-radius: get("border-radius");
@@ -124,7 +124,7 @@ $config: (
     }
     &[open], 
     &.is-active  {
-      background-color: get("background-color-open");
+      background-color: color.get(get("background-color-open"));
       padding-bottom: get("padding-y");
       z-index: 2; // Above child details
       > #{ $prefix }__summary {
@@ -136,8 +136,8 @@ $config: (
     }
   }
   #{ $prefix }__summary {
-    background-color: get("summary-background-color");
-    color: get("summary-color");
+    background-color: color.get(get("summary-background-color"));
+    color: color.get(get("summary-color"));
     margin-left: -(get("padding-x"));
     margin-right: -(get("padding-x"));
     line-height: get("summary-line-height");
@@ -161,10 +161,10 @@ $config: (
       @include typography.size(get("summary-type-size"));
     }
     &:hover {
-      background-color: get("summary-background-color-hover");
-      color: get("summary-color-hover");
+      background-color: color.get(get("summary-background-color-hover"));
+      color: color.get(get("summary-color-hover"));
       #{ $prefix }__icon {
-        background-color: get("icon-background-color-hover");
+        background-color: color.get(get("icon-background-color-hover"));
         color: color.get(get("icon-color-hover"));
       }
     }
@@ -174,7 +174,7 @@ $config: (
     color: color.get(get("icon-color"));
     margin-left: 0.5em;
     order: 3;
-    background-color: get("icon-background-color");
+    background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");

package/scss/components/_badge.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -94,8 +95,8 @@ $config: (
     &:hover,
     &:focus,
     &:visited {
-      background-color: get("background-color");
-      color: get("color");
+      background-color: color.get(get("background-color"));
+      color: color.get(get("color"));
     }
   }
   #{ $prefix }--clickable {

package/scss/components/_button-verbose.scss

@@ -102,7 +102,7 @@ $config: (
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding-y") get("padding-x");
     padding-right: (get("padding-x") * 2) + 1em;
     color: color.get(get("color"));
@@ -126,7 +126,7 @@ $config: (
     right: get("padding-x");
     transform: translateY(-50%);
     font-size: get("icon-font-size");
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
   }
   .button-verbose--inline {
     display: inline-block;

package/scss/components/_callout.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../selector";
 @use "../element";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -133,7 +134,7 @@ $styles: (
     top: 0;
     bottom: 0;
     width: $width;
-    background-color: $color;
+    background-color: color.get($color);
   }
 }
 
@@ -145,7 +146,7 @@ $styles: (
   $prefix: selector.class("callout");
 
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding");
     border: get("border");
     margin-bottom: get("margin");
@@ -160,11 +161,11 @@ $styles: (
   }
   @each $name, $style in $styles {
     #{ $prefix }--#{ $name } {
-      background-color: map.get($style, "background-color"); 
-      color: map.get($style, "color"); 
+      background-color: color.get(map.get($style, "background-color")); 
+      color: color.get(map.get($style, "color")); 
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
-      border-color: map.get($style, "border-color"); 
+      border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
       @if map.get($style, "left-cap") {

package/scss/components/_captioned-figure.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../element";
 @use "../typography";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -82,7 +83,7 @@ $config: (
     display: block;
     position: relative;
     margin-bottom: get("margin-bottom");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     > img {
       width: 100%;
       height: auto;
@@ -101,20 +102,20 @@ $config: (
   }
   #{ $prefix }__caption {
     position: absolute;
-    color: get("color");
+    color: color.get(get("color"));
     @include typography.size(get("type-size"), $only-font-size: true);
     line-height: get("line-height");
     max-width: get("caption-max-width");
-    background-color: get("caption-background-color");
+    background-color: color.get(get("caption-background-color"));
     padding: get("caption-padding");
     backdrop-filter: get("caption-backdrop-filter");
   }
   #{ $prefix }--traditional {
     #{ $prefix }__caption {
       position: static;
-      color: get("traditional-caption-color");
+      color: color.get(get("traditional-caption-color"));
       max-width: get("traditional-caption-max-width");
-      background-color: get("traditional-caption-background-color");
+      background-color: color.get(get("traditional-caption-background-color"));
       padding: get("traditional-caption-padding");
       text-align: get("traditional-caption-text-align");
       @if (get("traditional-caption-text-align") == right) {

package/scss/components/_card.scss

@@ -9,6 +9,7 @@
 @use "../breakpoint";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 // todo
 // sass color adjust for smooth transition. Add a comment for this if we can’t get to this
@@ -167,8 +168,8 @@ $config: (
   $prefix: selector.class("card");
 
   #{ $prefix } {
-    color: get("color");
-    background-color: get("background-color");
+    color: color.get(get("color"));
+    background-color: color.get(get("background-color"));
     border-radius: get("border-radius");
     box-shadow: get("box-shadow");
     margin-top: get("margin-y");
@@ -197,15 +198,15 @@ $config: (
   }
 
   @include when-clickable($hover: true) {
-    background-color: get("background-color-hover");
-    color: get("color-hover");
+    background-color: color.get(get("background-color-hover"));
+    color: color.get(get("color-hover"));
     box-shadow: get("box-shadow-hover");
     
     @if (get("border-hover") or get("overlay-background-color-hover")) {
       &:after {
         content: "";
         border: get("border-hover");
-        background-color: get("overlay-background-color-hover");
+        background-color: color.get(get("overlay-background-color-hover"));
       }
     }
   }
@@ -222,14 +223,14 @@ $config: (
   } 
 
   #{ $prefix }__title {
-    color: get("title-color");
+    color: color.get(get("title-color"));
     margin-bottom: get("title-margin");
     display: block;
     font-weight: get("title-font-weight");
     @if get("title-color-hover") {
       &:hover,
       &:focus {
-        color: get("title-color-hover");
+        color: color.get(get("title-color-hover"));
       }
     }
     #{ $prefix }__title-link {
@@ -239,7 +240,7 @@ $config: (
   @if get("title-color-hover") {
     @include when-clickable($hover: true) {
       #{ $prefix }__title {
-        color: get("title-color-hover");
+        color: color.get(get("title-color-hover"));
       }
     }
   }
@@ -257,7 +258,7 @@ $config: (
     // padding-top: get("image-ratio"); // 9:16
     margin: get("image-margin");
     border: get("image-border");
-    background-color: get("image-background-color");
+    background-color: color.get(get("image-background-color"));
     border-top-right-radius: get("border-radius");
     border-top-left-radius: get("border-radius");
     aspect-ratio: get("image-aspect-ratio");
@@ -340,8 +341,8 @@ $config: (
       position: relative;
       flex-grow: 0;
       z-index: 2;
-      color: get("color-overlay");
-      background-color: get("overlay-background-color");
+      color: color.get(get("color-overlay"));
+      background-color: color.get(get("overlay-background-color"));
       min-height: 0;
       padding-top: get("overlay-body-padding-y");
       padding-bottom: get("overlay-body-padding-y");
@@ -359,11 +360,11 @@ $config: (
       }
     }
     #{ $prefix }__footer {
-      background-color: get("overlay-background-color");
-      color: get("color-overlay");
+      background-color: color.get(get("overlay-background-color"));
+      color: color.get(get("color-overlay"));
     }
     #{ $prefix }__title {
-      color: get("color-overlay");
+      color: color.get(get("color-overlay"));
     }
     #{ $prefix }__image {
       position: absolute;
@@ -373,7 +374,7 @@ $config: (
       right: 0;
       overflow: hidden;
       padding-top: 0;
-      background-color: rgb(255, 255, 255);
+      background-color: color.get(rgb(255, 255, 255));
       border-radius: get("border-radius");
       aspect-ratio: auto;
       img {