@ulu/frontend 0.1.0-beta.1 → 0.1.0-beta.10

package/scss/components/_modal.scss

@@ -28,8 +28,6 @@ $-fallbacks: (
   )
 );
 
-// todo [joe-check] for config options should items like 'dark-background-color' be 'background-color-dark' instead? Line 94
-
 /// Module Settings
 /// @type Map
 /// @prop {CssValue} backdrop-blur [4px] Determines the blur of the backdrop.
@@ -51,22 +49,18 @@ $-fallbacks: (
 /// @prop {Dimension} close-font-size [1.2rem] Font-siz of of the modal close icon font size.
 /// @prop {Dimension} close-margin [0.5rem] The margin for the modal close icon.
 /// @prop {Dimension} close-size [2.5rem] Size of the modal close icon.
-/// @prop {} dark-background-color [false] @joe-check unused
-/// @prop {} dark-color [white] @joe-check unused
-/// @prop {} dark-header-background-color [false] @joe-check unused
-/// @prop {} dark-header-border-bottom [false] @joe-check unused
-/// @prop {} dark-header-color [false] @joe-check unused
 /// @prop {Color} header-background-color [black] Background color for the header.
 /// @prop {CssValue} header-border-bottom [none] Bottom-border on the modal header.
 /// @prop {Color} header-color [white] Type color of the header.
 /// @prop {Dimension} header-padding [1rem] The padding of the modal header.
 /// @prop {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
-/// @prop {Color} resizer-background-color-hover [rgb(66, 66, 66)] The background color of the resizer when hovered or focused.
-/// @prop {Color} resizer-color [black] The type color of the resizer.
+/// @prop {Color} resizer-background-color-hover [rgb(192, 192, 192)] The background color of the resizer when hovered or focused.
+/// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
 /// @prop {Color} resizer-color-hover [black] The type color of the resizer when hovered or focused.
 /// @prop {Dimension} resizer-width [1rem] The width of the resizer.
 /// @prop {Color} title-color [white] Type color of the title.
 /// @prop {CssValue} title-font-weight [bold] Font weight of the title.
+/// @prop {CssValue} title-font-family [null] Font family for title
 /// @prop {Dimension} title-icon-margin [0.5em] The margin of the title icon
 /// @prop {String} title-size [large] The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
 /// @prop {CssValue} title-text-transform [null] Transform option for the title.
@@ -82,7 +76,7 @@ $config: (
   "height":                         340px,
   "height-no-header":               100px,
   "width":                          60rem,
-  
+  "width-left-right" :              30rem,
   "animation-duration" :            300ms,
   "animation-duration-exit" :       150ms,
   "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
@@ -93,22 +87,18 @@ $config: (
   "close-font-size":                1.2rem,
   "close-margin":                   0.5rem,
   "close-size":                     2.5rem,
-  "dark-background-color" :         false,
-  "dark-color" :                   white,
-  "dark-header-border-bottom" :     false,
-  "dark-header-background-color" :  false,
-  "dark-header-color" :             false,
   "header-background-color":        black,
   "header-border-bottom":           none,
   "header-color":                   white,
   "header-padding":                 1rem,
   "resizer-background-color":       rgb(221, 221, 221),
-  "resizer-background-color-hover": rgb(66, 66, 66),
-  "resizer-color":                  black,
+  "resizer-background-color-hover": rgb(192, 192, 192),
+  "resizer-color":                  rgb(99, 99, 99),
   "resizer-color-hover":            black,
-  "resizer-width":                  1rem,
+  "resizer-width":                  1.25rem,
   "title-color":                    white,
   "title-font-weight":              bold,
+  "title-font-family" :             null,
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
   "title-text-transform" :          null,
@@ -121,7 +111,6 @@ $config: (
 /// Change modules $config
 /// @param {Map} $changes Map of changes
 /// @example scss 
-/// @example
 ///   @include ulu.component-modal-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -130,7 +119,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-modal-get("property");
 
 @function get($name) {
@@ -172,7 +161,7 @@ $config: (
     box-sizing: border-box;
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-sizing: border-box;
     animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
     &[open] {
@@ -181,7 +170,7 @@ $config: (
       flex-direction: column;
     }
     &::backdrop {
-      background: get("backdrop-color");
+      background: color.get(get("backdrop-color"));
       backdrop-filter: blur(get("backdrop-blur"));
       animation: uluModalBackdropIn get("animation-duration") get("animation-timing-function");
     }
@@ -193,8 +182,8 @@ $config: (
     flex: 0;
     padding: get("header-padding");
     border-bottom: get("header-border-bottom");
-    background-color: get("header-background-color");
-    color: get("header-color");
+    background-color: color.get(get("header-background-color"));
+    color: color.get(get("header-color"));
   }
   #{ $prefix }__body {
     flex: 1;
@@ -207,6 +196,7 @@ $config: (
     margin: 0;
     color: color.get(get("title-color"));
     font-weight: get("title-font-weight");
+    font-family: get("title-font-family");
     text-transform: get("title-text-transform");
     @if (get("title-size")) {
       @include typography.size(get("title-size"), $only-font-size: true);
@@ -221,15 +211,15 @@ $config: (
     font-size: get("close-font-size");
     width: get("close-size");
     height: get("close-size");
-    background-color: get("close-background-color");
+    background-color: color.get(get("close-background-color"));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: get("close-color");
+    color: color.get(get("close-color"));
     &:hover {
-      background-color: get("close-background-color-hover");
-      color: get("close-color-hover");
+      background-color: color.get(get("close-background-color-hover"));
+      color: color.get(get("close-color-hover"));
     }
   }
   #{ $prefix }__resizer {
@@ -240,17 +230,17 @@ $config: (
     width: get("resizer-width");
     display: block;
     cursor: col-resize;
-    background-color: get("resizer-background-color");
+    background-color: color.get(get("resizer-background-color"));
     display: flex;
     align-items: center;
     justify-content: center;
     transition-property: background-color, color;
     transition-duration: 300ms;
     transition-delay: 100ms; 
-    color: get("resizer-color");
+    color: color.get(get("resizer-color"));
     &:hover {
-      color: get("resizer-color-hover");
-      background-color: get("resizer-background-color-hover");
+      color: color.get(get("resizer-color-hover"));
+      background-color: color.get(get("resizer-background-color-hover"));
     }
     #{ $prefix }--left & {
       left: auto;
@@ -274,6 +264,7 @@ $config: (
   #{ $prefix }--left {
     border-radius: 0;
     height: 100vh;
+    width: get("width-left-right");
     top: 0;
     bottom: 0;
     transform: none;
@@ -367,7 +358,7 @@ $config: (
       backdrop-filter: blur(0);
     }
     100% {
-      background-color: get("backdrop-color");
+      background-color: color.get(get("backdrop-color"));
       backdrop-filter: blur(get("backdrop-blur"));
     }
   }

package/scss/components/_nav-strip.scss

@@ -42,18 +42,18 @@ $config: (
   "padding-y" : 0.3em,
   "padding-y-ruled" : null,
   "nowrap" : true,
-  "rule-color" : "rule",
-  "rule-offset" : -3px,
+  "rule-color" : "rule-light",
+  "rule-offset" : 0,
   "rule-size" : 3px,
-  "underline-color" : orange,
-  "underline-color-hover" : gray,
+  "underline-color" : "selected",
+  "underline-color-hover" : "rule",
   "underline-size" : 3px,
 ) !default;
 
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -62,7 +62,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-get("property");
 
 @function get($name) {
@@ -70,12 +70,14 @@ $config: (
 }
 
 /// Prints component styles
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-styles();
 
 @mixin styles {
   $prefix: selector.class("nav-strip");
-
+  #{ $prefix } {
+    max-width: 100%; // So ul will overflow
+  }
   // Original thought to not limit to direct child
   // auto is for when we don't have control over markup
   // The list descendants will be selected that way but the list is
@@ -83,24 +85,22 @@ $config: (
   #{ $prefix }__list,
   #{ $prefix }--auto ul {
     display: flex;
+    overflow-x: auto;
     line-height: typography.get("line-height-dense");
+    gap: get("margin-between");
   }
   #{ $prefix }__item,
   #{ $prefix }--auto li {
-    margin-right: get("margin-between");
     // layout flex since items inside may not be the same height
     display: flex;
     align-items: flex-end;
-    &:last-child {
-      margin-right: 0;
-    }
   }
   
   #{ $prefix }__link,
   #{ $prefix }--auto li > a,
   #{ $prefix }--auto li > button {
     display: block;
-    color: get("color");
+    color: color.get(get("color"));
     padding: get("padding-y") get("padding-x");
     border-top: get("underline-size") solid transparent;
     border-bottom: get("underline-size") solid transparent;
@@ -110,12 +110,12 @@ $config: (
     }
     &:hover,
     &:focus {
-      border-bottom-color: get("underline-color-hover");
-      color: get("color-hover");
+      border-bottom-color: color.get(get("underline-color-hover"));
+      color: color.get(get("color-hover"));
     }
     #{ get("activeSelector") } {
-      border-bottom-color: get("underline-color");
-      color: get("color-active");
+      border-bottom-color: color.get(get("underline-color"));
+      color: color.get(get("color-active"));
     }
   }
   
@@ -133,13 +133,20 @@ $config: (
     }
   }
   #{ $prefix }--rule {
-    #{ $prefix }__list,
-    &#{ $prefix }--auto ul {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
       border-bottom: get("rule-size") solid color.get(get("rule-color"));
     }
     #{ $prefix }__link,
     &#{ $prefix }--auto li > a,
     &#{ $prefix }--auto li > button {
+      position: relative;
+      z-index: 2;
       margin-bottom: get("rule-offset");
       padding-top: get("padding-y-ruled");
       padding-bottom: get("padding-y-ruled");

package/scss/components/_overlay-section.scss

@@ -8,6 +8,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../breakpoint";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -41,7 +42,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -50,7 +51,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-get("property");
 
 @function get($name) {
@@ -59,7 +60,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example scss
 ///  @include ulu.component-overlay-section-styles();
 
 @mixin styles {
@@ -96,7 +96,7 @@ $config: (
   .overlay-section__content {
     position: relative;
     z-index: 2;
-    background-color: get("content-background-color");
+    background-color: color.get(get("content-background-color"));
     border: get("content-border");
     flex: 0 1 get("content-width");
     padding: get("content-padding");

package/scss/components/_pager.scss

@@ -15,9 +15,9 @@
 /// Module Settings
 /// @type Map
 /// @prop {String} background-color [link] The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} background-color-hover [linkhover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} background-color-hover [link-hover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {String} border-color [link] The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} border-color-hover [linkhover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} border-color-hover [link-hover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Dimension} border-radius [50%] The border radius of the pager item.
 /// @prop {Dimension} border-width [1px] The border width of the pager item.
 /// @prop {Color} color [white] The type color of the pager item.
@@ -32,7 +32,7 @@
 /// @prop {Color} active-color [type] The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {CssValue} active-font-weight [bold] The font weight of the pager when focused or hovered.
 /// @prop {String} action-background-color [link] The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} action-background-color-hover [linkhover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} action-background-color-hover [link-hover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-border-color [transparent] The border color of the action options of the pager.
 /// @prop {String} action-border-color-hover [link] The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-color [white] The type color of the actions options of the pager.
@@ -72,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -81,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-get("property");
 
 
@@ -120,9 +120,9 @@ $config: (
       border-radius: get("border-radius");
       border: get("border-width") solid color.get(get("border-color"));
       background-color: color.get(get("background-color"));
-      color: get("color");
+      color: color.get(get("color"));
       &:hover {
-        color: get("color-hover");
+        color: color.get(get("color-hover"));
         border-color: color.get(get("border-color-hover"));
         background-color: color.get(get("background-color-hover"));
       }
@@ -134,8 +134,8 @@ $config: (
       span {
         font-weight: get("font-weight");
         color: color.get(get("active-color"));
-        background-color: get("active-background-color");
-        border-color: get("active-border-color");
+        background-color: color.get(get("active-background-color"));
+        border-color: color.get(get("active-border-color"));
       }
     }
   }
@@ -148,14 +148,14 @@ $config: (
       height: get("action-width");
       line-height: get("action-width");
       background-color: color.get(get("action-background-color"));
-      color: get("action-color");
+      color: color.get(get("action-color"));
       font-size: 1.2rem;
       line-height: 2.8rem;
       font-weight: bold;
       &:hover {
         border-color: color.get(get("action-border-color-hover"));
         background-color: color.get(get("action-background-color-hover"));
-        color: get("action-color-hover");
+        color: color.get(get("action-color-hover"));
       }
     }
   }

package/scss/components/_placeholder-block.scss

@@ -67,7 +67,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -76,7 +76,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-get("property");
 
 @function get($name) {
@@ -92,20 +92,20 @@ $config: (
   $prefix: selector.class("placeholder-block");
 
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: get("padding");
-    color: get("color");
-    border: get("border-width") get("border-style") get("border-color");
+    color: color.get(get("color"));
+    border: get("border-width") get("border-style") color.get(get("border-color"));
     margin-bottom: get("margin-bottom");
     border-radius: get("border-radius");
   }
   #{ $prefix }__icon {
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
     display: block;
     margin: 0 auto get("icon-margin") auto;
     font-size: get("icon-font-size");

package/scss/components/_popover.scss

@@ -94,7 +94,7 @@ $config: (
   
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-popover-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -103,7 +103,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-popover-get("property");
 
 @function get($name) {
@@ -156,8 +156,8 @@ $config: (
     display: none;
     position: absolute;
     z-index: get("z-index") + 1;
-    background-color: get("background-color");
-    color: get("color");
+    background-color: color.get(get("background-color"));
+    color: color.get(get("color"));
     width: get("width");
     max-width: get("max-width");
     box-shadow: get("box-shadow");
@@ -189,18 +189,18 @@ $config: (
   #{ $prefix }__header {
     overflow: hidden;
     padding: get("header-padding-y") get("padding");
-    color: get("header-color");
-    background-color: get("header-background-color");
+    color: color.get(get("header-color"));
+    background-color: color.get(get("header-background-color"));
   }
   #{ $prefix }__header--media {
     padding: 0;
-    background-color: get("header-media-background-color");
+    background-color: color.get(get("header-media-background-color"));
   }
   #{ $prefix }__footer {
     box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
     padding: get("footer-padding-y") get("padding");
-    color: get("footer-color");
-    background-color: get("footer-background-color");
+    color: color.get(get("footer-color"));
+    background-color: color.get(get("footer-background-color"));
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -215,8 +215,8 @@ $config: (
   #{ $prefix }--tooltip {
     width: get("tooltip-width");
     max-width: min(get("max-width"), get("tooltip-max-width"));
-    color: get("tooltip-color");
-    background-color: get("tooltip-background-color");
+    color: color.get(get("tooltip-color"));
+    background-color: color.get(get("tooltip-background-color"));
     pointer-events: none;
     #{ $prefix }__inner {
       padding: get("tooltip-padding");

package/scss/components/_pull-quote.scss

@@ -52,7 +52,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-pull-quote-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -61,7 +61,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-pull-quote-get("property");
 
 @function get($name) {

package/scss/components/_ratio-box.scss

@@ -22,7 +22,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-ratio-box-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -31,7 +31,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-ratio-box-get("property");
 
 @function get($name) {

package/scss/components/_rule.scss

@@ -5,14 +5,13 @@
 @use "sass:map";
 @use "../utils";
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} short-border-width [4px] Short rule width of border
-/// @prop {Number} short-modifiers [false] @joe-check
-/// @prop {Number} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
+/// @prop {Dimension} short-border-width [4px] Short rule width of border
+/// @prop {Object} short-modifiers [false] Objects to adjust the styles of different short rule styles.
+/// @prop {Dimension} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
 
 $config: (
   "short-border-width" : 4px,
@@ -22,7 +21,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-rule-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -31,7 +30,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-rule-get("property");
 
 @function get($name) {

package/scss/components/_scroll-slider.scss

@@ -64,7 +64,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-scroll-slider-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -73,7 +73,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example
+/// @example scss 
 ///   @include ulu.component-scroll-slider-get("property");
 
 @function get($name) {
@@ -89,7 +89,7 @@ $config: (
   
   #{ $prefix } {
     position: relative; // for controls
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     margin: get("margin-top") 0 get("margin-bottom") 0;
   }
   #{ $prefix }--cards {

package/scss/components/_skip-link.scss

@@ -7,6 +7,7 @@
 @use "sass:meta";
 
 @use "../element";
+@use "../color";
 @use "../layout";
 @use "../selector";
 @use "../utils";
@@ -83,7 +84,7 @@ $config: (
     left: 50%;
     transform: translateX(-50%);
     padding: get("padding");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     font-weight: bold;
     box-shadow: get("box-shadow");
     border-bottom-left-radius: get("border-radius");