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

package/scss/components/_captioned-figure.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../element";
 @use "../typography";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -52,7 +53,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-captioned-figure-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -61,7 +62,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-captioned-figure-get("property");
 
 @function get($name) {
@@ -71,7 +72,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example
 ///  @include ulu.component-captioned-figure-styles();
 
 @mixin styles {
@@ -83,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;
@@ -102,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-grid.scss

@@ -25,7 +25,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-card-grid-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -34,7 +34,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-card-grid-get("property");
 
 @function get($name) {
@@ -51,7 +51,7 @@ $config: (
   
   #{ $prefix } {
     display: grid;
-    grid-template-columns:  get("template-columns");
+    grid-template-columns: get("template-columns");
     grid-auto-rows: 1fr;
     gap: get("gap");
     margin: get("gap") 0;

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
@@ -18,7 +19,6 @@
 /// @prop {Dimension} padding [2rem] The padding for the image icon
 /// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
 /// @prop {Dimension} border-radius [5rem] The border radius of the card.
-/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
 /// @prop {CssValue} box-shadow [null] The box-shadow for the card.
 /// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
 /// @prop {Color} color [null] The type color of the card.
@@ -57,8 +57,10 @@
 /// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
 /// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
 /// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
+/// @prop {List} image-icon-max-width [30rem] Max width for image when using the modifier on the .card__image--icon
 /// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-
+/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
+/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
 
 
 $config: (
@@ -78,6 +80,8 @@ $config: (
   "footer-padding-y" : 0.25rem,
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
+  "horizontal-image-width" : 33%,
+  "horizontal-body-max-width" : 80rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -85,6 +89,7 @@ $config: (
   "image-border" : null, // For when you have a margin
   "image-filter-hover" : null,
   "image-margin" : null,
+  "image-icon-max-width" : 30rem,
   "image-transform-hover" : null,
   "image-transition-duration" :    350ms,
   "image-transition-enabled" : true,
@@ -109,11 +114,11 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  ) !default;
+) !default;
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-card-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -122,7 +127,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-card-get(( "property" : value ));
 
 @function get($name) {
@@ -131,6 +136,9 @@ $config: (
 
 /// Mixin styles for card when it has proxy click enabled and is being interacted with (hover/focus)
 /// @param {Boolean} $hover [false] Apply styles when the card is being hover/focused within, else applies styles to rest state of a clickable card (one who has a proxy click setup)
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-card-styles();
 
 @mixin when-clickable($hover: false) {
   $prefix: selector.class("card");
@@ -164,8 +172,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");
@@ -175,34 +183,31 @@ $config: (
     flex-direction: column;
     justify-content: flex-end;
     max-width: get("max-width");
-  }
-  @if (get("border") or get("border-hover") or get("overlay-background-color-hover")) {
-    @include when-clickable($hover: false) {
-      &:after {
-        position: absolute;
-        content: if(get("border"), "", false);
-        top: 0; 
-        bottom: 0; 
-        right: 0; 
-        left: 0;
-        border: get("border");
-        border-radius: get("border-radius");
-        z-index: 4;
-        pointer-events: none;
-      }
+    // Border is on pseudo so that it's on top of image/etc
+    &:after {
+      position: absolute;
+      content: if(get("border"), "", null);
+      top: 0; 
+      bottom: 0; 
+      right: 0; 
+      left: 0;
+      border: get("border");
+      border-radius: get("border-radius");
+      z-index: 4;
+      pointer-events: none;
     }
   }
 
   @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"));
       }
     }
   }
@@ -219,14 +224,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 {
@@ -236,7 +241,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"));
       }
     }
   }
@@ -254,7 +259,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");
@@ -299,7 +304,7 @@ $config: (
     img {
       position: static;
       display: block;
-      max-width: 30rem;
+      max-width: get("image-icon-max-width");
       height: auto;
       top: auto;
       left: auto;
@@ -337,11 +342,15 @@ $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");
+      &:not(:has(~ #{ $prefix }__footer)) {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
       @if (get("overlay-shading")) {
         margin-top: 4rem;
         &::before {
@@ -356,11 +365,20 @@ $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"));
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+    #{ $prefix }__body,
+    #{ $prefix }__footer {
+      &:last-child {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
     }
     #{ $prefix }__title {
-      color: get("color-overlay");
+      color: color.get(get("color-overlay"));
     }
     #{ $prefix }__image {
       position: absolute;
@@ -370,7 +388,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 {      
@@ -400,8 +418,8 @@ $config: (
         justify-content: center;
         align-items: center;
         #{ $prefix }__image {
-          width: 33%;
-          flex: 0 1 33%;
+          width: get("horizontal-image-width");
+          flex: 0 1 get("horizontal-image-width");
           // max-width: 30rem;
           min-height: 28rem;
           // padding-top: 0;
@@ -411,7 +429,7 @@ $config: (
           flex: 1;
           flex-direction: column;
           justify-content: center;
-          max-width: 80rem;
+          max-width: get("horizontal-body-max-width");
         }
       }
     }

package/scss/components/_css-icon.scss

@@ -17,6 +17,7 @@
 
 @use "sass:map";
 @use "sass:math";
+@use "../color";
 
 @use "../utils";
 
@@ -29,6 +30,7 @@
 /// @prop {Dimension} size [1.1em] The width, height and font size of the css-icon.
 /// @prop {Dimension} stroke-border-radius [1px] The rounding of the strokes for css-icon.
 /// @prop {Dimension} stroke-width [0.15em] The stroke width of the css-icon.
+/// @prop {Dimension} drag-gap-multiplier [0.75] Multiplier used to adjust the space between drag-x/drag-y icons (used for all stroke sizes)
 /// @prop {Dimension} text-offset [0.05em] When using an icon with text, adds a margin to match the text height.
 /// @prop {Dimension} text-size [1em] font-size of the icon when using text.
 /// @prop {Dimension} vertical-align [-0.2em] Vertical-align for css-icon 
@@ -44,6 +46,7 @@ $config: (
   "size" : 1.15em,
   "stroke-border-radius" : null,
   "stroke-width" : 3px,
+  "drag-gap-multiplier" : 0.75,
   "text-offset" : 0.05em,
   "text-size" : 1em,
   "vertical-align" : -0.25em,
@@ -59,7 +62,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-css-icon-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -68,7 +71,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-css-icon-get("property");
 
 @function get($name) {
@@ -100,7 +103,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 +133,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 +161,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 +195,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 +225,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"] {
@@ -309,21 +312,23 @@ $config: (
     &::before {
       content: "";
       // Make up for margin-top by default
-      margin-top: -($stroke-width + $stroke-width);
+      margin-top: -(($stroke-width + $stroke-width) * get("drag-gap-multiplier"));
     }
     &::after {
       content: "";
-      margin-top: $stroke-width;
+      margin-top: $stroke-width * get("drag-gap-multiplier");
     }
   }
 
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    // $drag-gap-multiplier: map.get($props, "drag-gap-multiplier");
+    // $drag-gap-multiplier: if($drag-gap-multiplier, $drag-gap-multiplier, 0);
     &[class*="css-icon--drag"] {
       &::before {
-        margin-top: -($alt-width + $alt-width);
+        margin-top: -(($alt-width + $alt-width) * get("drag-gap-multiplier"));
       }
       &::after {
-        margin-top: $alt-width;
+        margin-top: $alt-width * get("drag-gap-multiplier");
       }
     }
   }
@@ -344,7 +349,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 +357,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/_data-grid.scss

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

package/scss/components/_data-table.scss

@@ -30,10 +30,11 @@ $config: (
   "text-align" : left,
   "type-size" : "small",
   "background-color" : white,
-  "header-background-color" : #eeeeee,
+  "header-background-color" : #f5f4f4,
   "body-background-color" : white,
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
+  "header-color" : "headline",
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -46,15 +47,18 @@ $config: (
   "highlighted-row-border-color" : null,
   "large-header-cell-padding-y" : 1em,
   "caption-type-size" : "large",
+  "caption-background-color" : null,
   "caption-font-weight" : bold,
-  "caption-margin" : (0 0 1em 0),
-  "caption-padding" : (0,),
+  "caption-border-bottom" : null,
+  "caption-margin" : (0,),
+  "caption-padding" : (0.65em 0),
+  "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-data-table-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -63,7 +67,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-data-table-get("property");
 
 @function get($name) {
@@ -107,9 +111,11 @@ $config: (
         @include typography.size(get("caption-type-size"));
       }
       font-weight: get("caption-font-weight");
-      text-align: left;
+      text-align: get("caption-text-align");
       margin: get("caption-margin");
       padding: get("caption-padding");
+      background-color: get("caption-background-color");
+      border-bottom: get("caption-border-bottom");
     }
     th,
     tr,
@@ -133,6 +139,9 @@ $config: (
     thead tr {
       background-color: color.get(get("header-background-color"));
     }
+    thead th {
+      color: color.get(get("header-color"));
+    }
     tbody tr {
       background-color: color.get(get("body-background-color"));
     }

package/scss/components/_flipcard-grid.scss

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

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";
 
@@ -61,7 +62,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-flipcard-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -78,7 +79,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-flipcard-get("property");
 
 @function get($name) {
@@ -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"] & {