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

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 {      

package/scss/components/_css-icon.scss

@@ -17,6 +17,7 @@
 
 @use "sass:map";
 @use "sass:math";
+@use "../color";
 
 @use "../utils";
 
@@ -100,7 +101,7 @@ $config: (
 ///  @include ulu.component-css-icon-styles();
 
 @mixin styles {
-  $border: get("stroke-width") solid get("color");
+  $border: get("stroke-width") solid color.get(get("color"));
   $size: get("size");
   $stroke-width: get("stroke-width");
   $half-height: math.div(get("size"), 2);
@@ -130,7 +131,7 @@ $config: (
       height: $stroke-width;
       top: 50%;
       left: 50%;
-      background-color: get("color"); 
+      background-color: color.get(get("color")); 
       transform: translateX(-50%);
       margin-top: -($half-stroke-width);
       border-radius: get("stroke-border-radius");
@@ -158,7 +159,7 @@ $config: (
   // Solid icons
   [class*="css-icon--circle"],
   [class*="css-icon--square"] {
-    background-color: get("color");
+    background-color: color.get(get("color"));
   }
   [class*="css-icon--circle"] {
     border-radius: 50%;
@@ -192,7 +193,7 @@ $config: (
       font-family: get("font-family");
       font-weight: bold;
       margin-top: get("text-offset");
-      color: get("color");
+      color: color.get(get("color"));
       height: auto;
       left: 0;
       right: 0;
@@ -222,7 +223,7 @@ $config: (
   // Arrow uses same equilateral triangle
   [class*="css-icon--triangle"],
   [class*="css-icon--arrow"]::after {
-    background-color: get("color");
+    background-color: color.get(get("color"));
     clip-path: polygon(10% 10%, 90% 50%, 10% 90%);
   }
   [class*="css-icon--arrow"] {
@@ -344,7 +345,7 @@ $config: (
       margin-top: 0;
     }
     &::before {
-      box-shadow: 0px ($stroke-width * 2 + 1px) get("color");
+      box-shadow: 0px ($stroke-width * 2 + 1px) color.get(get("color"));
       margin-bottom: ($stroke-width * 3) + 2px;
     }
   }
@@ -352,7 +353,7 @@ $config: (
     &.css-icon--menu,
     &.css-icon--menu-to-close {
       &::before {
-        box-shadow: 0px ($alt-width * 2 + 1px) get("color");
+        box-shadow: 0px ($alt-width * 2 + 1px) color.get(get("color"));
         margin-bottom: ($alt-width * 3) + 2px;
       }
     }

package/scss/components/_flipcard.scss

@@ -5,6 +5,7 @@
 /// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
 
 @use "sass:map";
+@use "../color";
 @use "../utils";
 @use "../selector";
 
@@ -90,14 +91,14 @@ $config: (
 
   #{ $prefix } {
     height: 100%;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     line-height: 1.4;
     overflow: hidden;
     position: relative;
     border: get("border");
     border-radius: get("border-radius");
     &#{ $prefix }:hover {
-      border-color: get("border-color-hover");
+      border-color: color.get(get("border-color-hover"));
     }
     #{ $prefix }__control-button:focus {
       border: get("control-button-border-focus");
@@ -123,10 +124,10 @@ $config: (
         transform: scale(1.15);
       }
       #{ $prefix }__front-content {
-        color: get("title-color-hover");
+        color: color.get(get("title-color-hover"));
       }
       #{ $prefix }__icon {
-        color: get("icon-color-hover");
+        color: color.get(get("icon-color-hover"));
       }
     }
     @media (prefers-reduced-motion: no-preference) {
@@ -140,14 +141,14 @@ $config: (
     }
   }
   #{ $prefix }--w-image {
-    background-color: get("background-color-image");
+    background-color: color.get(get("background-color-image"));
 
     &:hover {
       #{ $prefix }__front-content {
-        color: get("title-color-image-hover");
+        color: color.get(get("title-color-image-hover"));
       }
       #{ $prefix }__icon {
-        color: get("icon-color-image-hover");
+        color: color.get(get("icon-color-image-hover"));
       }
     }
   }
@@ -168,7 +169,7 @@ $config: (
     }
   }
   #{ $prefix }__icon {
-    color: get('icon-color');
+    color: color.get(get('icon-color'));
     display: block;
     margin-top: 0.5rem;
   }
@@ -177,7 +178,7 @@ $config: (
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    color: get("title-color");
+    color: color.get(get("title-color"));
     position: relative;
     z-index: 2;
     padding: get('padding');
@@ -186,10 +187,10 @@ $config: (
   }
   #{ $prefix }--w-image {
     #{ $prefix }__icon {
-      color: get("icon-color-image");
+      color: color.get(get("icon-color-image"));
     }
     #{ $prefix }__front-content {
-      color: get("title-color-image");
+      color: color.get(get("title-color-image"));
       @if(get("bottom-shadow")) {
         // bottom position includes padding so that the shadow 
         &:after {
@@ -207,7 +208,7 @@ $config: (
     }
   }
   #{ $prefix }__back {
-    background-color: get("background-color-back");
+    background-color: color.get(get("background-color-back"));
     padding: get('padding');
     justify-content: flex-end;
     [data-flipcard-state="open"] & {

package/scss/components/_form-theme.scss

@@ -258,7 +258,7 @@ $config: (
   textarea,
   label,
   legend {
-    color: get("color");
+    color: color.get(get("color"));
     font-size: 1em;
     max-width: 100%;
     line-height: typography.get("line-height-dense");
@@ -291,7 +291,7 @@ $config: (
   [type="password"],
   [type="file"] {
     padding: get("input-padding-y") get("input-padding-x");
-    background-color: get("input-background-color");
+    background-color: color.get(get("input-background-color"));
     border-radius: get("input-border-radius");
     transition: border linear 0.2s;
     border: get("input-border");
@@ -307,7 +307,7 @@ $config: (
     font-weight: get("font-weight-select");
     border: get("select-border");
     border-radius: get("select-border-radius");
-    background-color: get("select-background-color");
+    background-color: color.get(get("select-background-color"));
     padding: -fallback("select-padding-y", "input-padding-y") -fallback("select-padding-x", "input-padding-x");
     border: -fallback("select-border", "input-border");
     @if get("select-image") {
@@ -365,39 +365,39 @@ $config: (
       opacity: 0;
       transform: rotate(45deg);
       transition: opacity ease-out 150ms;
-      border: get("check-input-radio-size") solid get("check-input-mark-color");
+      border: get("check-input-radio-size") solid color.get(get("check-input-mark-color"));
       border-radius: 50%;
     }
     &:focus {
-      background-color: get("check-input-touch-color-focus");
+      background-color: color.get(get("check-input-touch-color-focus"));
       &:before {
-        border-color: get("check-input-border-color-focus");
+        border-color: color.get(get("check-input-border-color-focus"));
         outline: get("check-input-outline-focus");
       }
       &:after {
-        border-color: get("check-input-mark-color-focus");
+        border-color: color.get(get("check-input-mark-color-focus"));
       }
     }
     &:hover {
-      background-color: get("check-input-touch-color-hover");
+      background-color: color.get(get("check-input-touch-color-hover"));
       &:before {
         outline: get("check-input-outline-hover");
-        background-color: get("check-input-background-color-hover");
-        border-color: get("check-input-border-color-hover");
+        background-color: color.get(get("check-input-background-color-hover"));
+        border-color: color.get(get("check-input-border-color-hover"));
       }
       &:after {
-        border-color: get("check-input-mark-color-hover");
+        border-color: color.get(get("check-input-mark-color-hover"));
       }
     }
     &:checked {
       &:before {
-        background-color: get("check-input-background-color-checked");
-        border-color: get("check-input-border-color-checked");
+        background-color: color.get(get("check-input-background-color-checked"));
+        border-color: color.get(get("check-input-border-color-checked"));
         outline: get("check-input-outline-checked");
       }
       &:after {
         opacity: 1;
-        border-color: get("check-input-mark-color-checked");
+        border-color: color.get(get("check-input-mark-color-checked"));
       }
     }
     
@@ -428,15 +428,15 @@ $config: (
     &:indeterminate,
     &[aria-checked=mixed] {
       &:before {
-        background-color: get("check-input-background-color-indeterminate");
-        border-color: get("check-input-border-color-indeterminate");
+        background-color: color.get(get("check-input-background-color-indeterminate"));
+        border-color: color.get(get("check-input-border-color-indeterminate"));
       }
       &:after {
         border-right: none;
         transform: translatey(50%);
         opacity: 1;
         height: get("check-input-checkmark-stroke-size");
-        border-color: get("check-input-mark-color-indeterminate");
+        border-color: color.get(get("check-input-mark-color-indeterminate"));
       }
     }
   }
@@ -449,7 +449,7 @@ $config: (
     margin-top: get("fieldset-margin-top");
     margin-bottom: get("fieldset-margin-bottom");
     border: get("fieldset-border");
-    background-color: get("fieldset-background");
+    background-color: color.get(get("fieldset-background"));
     border-radius: get("fieldset-border-radius");
     padding: get("fieldset-padding");
     
@@ -467,7 +467,7 @@ $config: (
         padding-bottom: 0.5em;
         padding-top: 0.5em;
         border-bottom: get("fieldset-legend-border-bottom");
-        color: get("fieldset-legend-color");
+        color: color.get(get("fieldset-legend-color"));
       }
       & ~ * {
         clear: left;
@@ -475,12 +475,12 @@ $config: (
     }
     &#{ $selectError } {
       > legend {
-        color: $errorColor;
+        color: color.get($errorColor);
       }
     }
     &#{ $selectWarning } {
       > legend {
-        color: $warningColor;
+        color: color.get($warningColor);
       }
     }
   }
@@ -502,7 +502,7 @@ $config: (
   font-style: italic;
   @include typography.size("small", null, true);
   max-width: get("description-max-width");
-  color: get("description-color");
+  color: color.get(get("description-color"));
 }
 
 /// Styles for form item that should have label as block and text input
@@ -550,8 +550,8 @@ $config: (
     margin-bottom: get("input-margin-y");
     border-radius: get("item-border-radius");
     flex-shrink: 0; // Cannot be smaller than content within
-    @include -form-item-state($selectError, $errorColor, get("error-highlight-color"));
-    @include -form-item-state($selectWarning, $warningColor, get("warning-highlight-color"));
+    @include -form-item-state($selectError, $errorColor, color.get(get("error-highlight-color")));
+    @include -form-item-state($selectWarning, $warningColor, color.get(get("warning-highlight-color")));
   }
   #{ $prefix }__item--align-top {
     align-items: flex-start;
@@ -578,10 +578,10 @@ $config: (
     }
   }
   #{ $prefix }__error {
-    color: $errorColor;
+    color: color.get($errorColor);
   }
   #{ $prefix }__warning {
-    color: $warningColor;
+    color: color.get($warningColor);
   }
 }
 
@@ -622,12 +622,12 @@ $config: (
     // outline: get("item-outline-width") solid $highlightColor;
     box-shadow: 0 0 0 get("item-highlight-width") $highlightColor;
     label {
-      color: $color;
+      color: color.get($color);
     }
     select,
     textarea,
     input:not([type="checkbox"]):not([type="radio"]) {
-      border-color: $color;
+      border-color: color.get($color);
     }
   }
 }

package/scss/components/_index.scss

@@ -22,6 +22,7 @@
 @forward "image-grid" as image-grid-*;
 @forward "links" as links-*;
 @forward "list-lines" as list-lines-*;
+@forward "list-inline" as list-inline-*;
 @forward "list-ordered" as list-ordered-*;
 @forward "list-unordered" as list-unordered-*;
 @forward "menu-stack" as menu-stack-*;
@@ -69,6 +70,7 @@
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
+@use "list-inline";
 @use "list-ordered";
 @use "list-unordered";
 @use "links";
@@ -119,6 +121,7 @@ $all-includes: (
   "image-grid",
   "links",
   "list-lines",
+  "list-inline",
   "list-ordered",
   "list-unordered",
   "menu-stack",
@@ -241,6 +244,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "list-lines")) {
     @include list-lines.styles;
   }
+  @if (list.index($includes, "list-inline")) {
+    @include list-inline.styles;
+  }
   @if (list.index($includes, "list-unordered")) {
     @include list-unordered.styles;
   }

package/scss/components/_list-inline.scss

@@ -0,0 +1,80 @@
+////
+/// @group list-inline
+////
+
+@use "sass:map";
+
+@use "../element";
+@use "../selector";
+@use "../utils";
+
+/// Module Config
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
+/// @prop {Dimension} margin-top [0] Top margin of list.
+/// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
+/// @prop {Dimension} space-between [1em] Gap between item and dividers
+/// @prop {Dimension} space-between-large [1em] Gap between item and dividers when using large-gap modifier
+
+$config: (
+  "rule-style" : "light",
+  "margin-top": 0,
+  "margin-bottom": 1em,
+  "space-between" : 1em,
+  "space-between-large" : 2em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-list-inline-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-list-inline-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "list-inline [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-inline-styles();
+
+@mixin styles {
+  $prefix: selector.class("list-inline");
+  $border: element.get-rule-style(get("rule-style"));
+  
+  ul#{ $prefix },
+  #{ $prefix } ul {
+    list-style: none;
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix } {
+    li {
+      // Not using flex gap because we would need to position
+      // pseudo for divider, so we would still need to use math
+      // So custom properties couldn't be used (no benefit)
+      padding-right: get("space-between");
+      margin-right: get("space-between");
+      border-right: $border;
+      &:last-child {
+        border-right: none;
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+  }
+  #{ $prefix }--large-gap {
+    li {
+      padding-right: get("space-between-large");
+      margin-right: get("space-between-large");
+    }
+  }
+}

package/scss/components/_list-lines.scss

@@ -3,25 +3,40 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 
 @use "../element";
-@use "../color";
 @use "../typography";
+@use "../selector";
 @use "../utils";
 
+// Used for function fallback
+$-fallbacks: (
+  "dense-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
 /// Module Config
 /// @prop {Boolean} border-first [true] If enabled, adds a top border to the first item in list-lines.
 /// @prop {Boolean} border-last [true] If enabled, adds a bottom border to the last item in list-lines.
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
 /// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
 /// @prop {Dimension} margin-top [0] Top margin of list.
 /// @prop {Dimension} padding-between [1em] Padding between items in list.
+/// @prop {Dimension} padding-between [1em] Padding between items in list when using dense modifier
+/// @prop {Dimension} line-height-dense [true] Line height when list lines has dense modifier (defaults to typography line-height-dense)
 
 $config: (
   "border-first" : true,
   "border-last" : true,
   "margin-bottom": 1em,
   "margin-top": 0,
-  "padding-between" : 1em
+  "rule-style" : "light",
+  "padding-between" : 1em,
+  "dense-padding-between" : 0.65em,
+  "dense-line-height" : true
 ) !default;
 
 /// Change modules $config
@@ -39,31 +54,8 @@ $config: (
 ///   @include ulu.component-list-lines-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "grid [config]");
-}
-
-/// Output component styles
-
-@mixin inner-styles {
-  $border: element.get-rule-style("light") !default;
-  list-style: none;
-  margin: get("margin-top") 0 get("margin-bottom") 0;
-  padding: 0;
-  @if (get("border-first")) {
-    border-top: $border;
-  }
-  >li {
-    border-bottom: $border;
-    padding: get("padding-between") 0;
-    >*:last-child {
-      margin-bottom: 0;
-    }
-    @if (not get("border-last")) {
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
-  }
+  $value: utils.require-map-get($config, $name, "list-lines [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output component stylesheet
@@ -71,14 +63,33 @@ $config: (
 ///  @include ulu.component-list-lines-styles();
 
 @mixin styles {
-  
-  .list-lines {
-    @include inner-styles;
+  $prefix: selector.class("list-lines");
+  $border: element.get-rule-style(get("rule-style"));
+
+  #{ $prefix } {
+    list-style: none;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+    padding: 0;
+    @if (get("border-first")) {
+      border-top: $border;
+    }
+    >li {
+      border-bottom: $border;
+      padding: get("padding-between") 0;
+      >*:last-child {
+        margin-bottom: 0;
+      }
+      @if (not get("border-last")) {
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+    }
   }
-  .list-lines--dense {
+  #{ $prefix }--dense {
     >li {
-      padding: 0.5em 0;
-      line-height: typography.get("line-height-dense");
+      padding: get("dense-padding-between") 0;
+      line-height: get("dense-line-height");
     }
   }
 }

package/scss/components/_list-ordered.scss

@@ -3,7 +3,6 @@
 ////
 
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Output component stylesheet