@ulu/frontend 0.1.0-beta.5 → 0.1.0-beta.7

package/scss/components/_modal.scss

@@ -60,6 +60,7 @@ $-fallbacks: (
 /// @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.
@@ -97,6 +98,7 @@ $config: (
   "resizer-width":                  1rem,
   "title-color":                    white,
   "title-font-weight":              bold,
+  "title-font-family" :             null,
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
   "title-text-transform" :          null,
@@ -159,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] {
@@ -168,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");
     }
@@ -180,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;
@@ -194,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);
@@ -208,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 {
@@ -227,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;
@@ -354,7 +357,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

@@ -75,7 +75,9 @@ $config: (
 
 @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

package/scss/components/_overlay-section.scss

@@ -8,6 +8,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../breakpoint";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -95,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

@@ -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

@@ -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

@@ -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/_rule.scss

@@ -5,7 +5,6 @@
 @use "sass:map";
 @use "../utils";
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Module Settings

package/scss/components/_scroll-slider.scss

@@ -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");

package/scss/components/_slider.scss

@@ -43,11 +43,11 @@ $config: (
   "button-height": 2.5rem,
   "button-width": 2.5rem,
   "dot-background-color" : transparent,
-  "dot-background-color-hover" : color.get("link"),
-  "dot-background-color-selected" : color.get("link"),
-  "dot-border-color" : color.get("link"),
-  "dot-border-color-hover" : color.get("link"),
-  "dot-border-color-selected" : color.get("link"),
+  "dot-background-color-hover" : "link",
+  "dot-background-color-selected" : "link",
+  "dot-border-color" : "link",
+  "dot-border-color-hover" : "link",
+  "dot-border-color-selected" : "link",
   "dot-border-radius" : 50%,
   "dot-border-width" : 2px,
   "dot-size" :  1rem,
@@ -83,7 +83,7 @@ $config: (
   $slide-padding-x: get("button-width") + get("button-margin");
   #{ $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 }__track,
@@ -114,17 +114,17 @@ $config: (
     display: block;
     width: get("dot-size");
     height: get("dot-size");
-    background-color: get("dot-background-color");
-    border: get("dot-border-width") solid get("dot-border-color");
+    background-color: color.get(get("dot-background-color"));
+    border: get("dot-border-width") solid color.get(get("dot-border-color"));
     border-radius: get("dot-border-radius");
     &:hover {
-      background-color: get("dot-background-color-hover");
+      background-color: color.get(get("dot-background-color-hover"));
     }
   }
   #{ $prefix-plugin }__nav-button--active,
   #{ $prefix-plugin }__nav-button--active:hover {
-    background-color: get("dot-background-color-selected");
-    border-color: get("dot-border-color-selected");
+    background-color: color.get(get("dot-background-color-selected"));
+    border-color: color.get(get("dot-border-color-selected"));
   }
   #{ $prefix-plugin }__control-button,
   #{ $prefix-plugin }__nav-button {

package/scss/components/_tabs.scss

@@ -157,7 +157,7 @@ $config: (
       z-index: 1;
       padding: get("tabpanel-padding");
       overflow: hidden;
-      background-color: get("tabpanel-background-color");
+      background-color: color.get(get("tabpanel-background-color"));
     }
   }
   // For images, etc that should fill tabpanel

package/scss/components/_tag.scss

@@ -144,7 +144,7 @@ $styles: (
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
       border-color: color.get(map.get($style, "border-color")); 
-      border-width: color.get(map.get($style, "border-width")); 
+      border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding");  
       @if (typography.has-size($type-size)) {