@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.81

package/scss/components/_callout.scss

@@ -14,10 +14,6 @@
 
 // Used for function fallback
 $-fallbacks: (
-  "border" : (
-    "function" : meta.get-function("get-rule-style", false, "element"),
-    "property" : "light"
-  ),
   "border-radius" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "border-radius"
@@ -27,69 +23,56 @@ $-fallbacks: (
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(240, 240, 240)] The background color of the Callout.
-/// @prop {Boolean} border [true] The border of the Callout.
+/// @prop {Color} border-color ["rule-light"] The border color of the Callout.
 /// @prop {Boolean} border-radius [true] The border radius of the Callout.
+/// @prop {Dimension} border-width [1px] The border width of the Callout.
 /// @prop {CssValue} box-shadow [none] The box-shadow of the Callout.
-/// @prop {Boolean} left-cap [false] Toggles the use of left caps in styled callouts.
-/// @prop {Color} left-cap-color [green] Color of the left cap.
-/// @prop {Dimension} left-cap-width [0.5rem] Width of the left cap.
+/// @prop {Boolean} caps-disabled [false] If set will not output any cap styles for both base and styles
+/// @prop {Boolean} cap [false] Toggles the use of caps on default callout
+/// @prop {Boolean} cap-side ["left"] The side that gets the cap
+/// @prop {Number} cap-match-radius [true] The cap should have be rounded to match the parent's border radius
+/// @prop {Map} cap-options The options for cap (see element.cap for options)
 /// @prop {Dimension} margin [2rem] Bottom margin of the Callout.
 /// @prop {Dimension} padding [1.5rem] Padding of the Callout.
 
 $config: (
   "background-color" : rgb(240, 240, 240),
-  "border" : true,
-  "border-radius" :  true,
+  "border-color" : "rule-light",
+  "border-radius" :  6px,
+  "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : false,
-  "left-cap-color" : green,
-  "left-cap-width" : 0.5rem,
+  "caps-disabled" : false,
+  "cap" : false,
+  "cap-side" : "left",
+  "cap-match-radius" : false,
+  "cap-options" : (
+    "color" : rgb(160, 160, 160),
+    "size" : 0.5rem,
+  ),
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
+/// Styles Map (for unique variations/modifiers)
+/// - Adjust this with set-styles
+/// @type Map
+
 $styles: (
-  "background-dark" : (
-    "background-color" : rgb(240, 240, 240)
-  ),
   "outline" : (
     "background-color": transparent
   ),
-  "light" : (
-    "background-color" : white,
-    "border-color" : gray
-  ),
-  "informative" : (
-    "background-color" : #e7f6f8,
-    "left-cap-color" : #00bde3,
-    "left-cap" : true,
-    "left-cap-width": 0.5rem
+  "info" : (
+    "background-color" : "info-background",
   ),
   "warning" : (
-    "background-color" : #faf3d1,
-    "left-cap-color" : #ffbe2e,
-    "left-cap" : true,
-    "left-cap-width": 0.5rem
+    "background-color" : "info-background",
   ),
   "success" : (
-    "background-color" : #ecf3ec,
-    "left-cap-color" : #00a91c,
-    "left-cap" : true,
-    "left-cap-width": 0.5rem
+    "background-color" : "success-background",
   ),
   "danger" : (
-    "background-color" : #f4e3db,
-    "left-cap-color" : #d54309,
-    "left-cap" : true,
-    "left-cap-width": 0.5rem
+    "background-color" : "danger-background",
   ),
-  "emergency" : (
-    "background-color" : #9c3d10,
-    "left-cap-color" : #9c3d10,
-    "left-cap" : true,
-    "color" : white,
-    "left-cap-width": 0.5rem
-  )
 ) !default;
 
 /// Change modules $config
@@ -112,64 +95,128 @@ $styles: (
 }
 
 /// Set callout style variations
-/// @param {Map} $changes Map of changes (options for style include [background-color, color, border, border-radius, border-color, box-shadow, padding, left-cap, left-cap-width, left-cap-color]
+/// - Styles that modify padding when using mix-match caps on/off should be included last
+/// @param {Map} $changes Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]
 /// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
 @mixin set-styles($changes, $merge-mode: null) {
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
-/// Output styling for a callout that adds a left cap
-/// @param {Dimension} $width The width of the left cap
-/// @param {Color} $color The left cap color
-
-@mixin left-cap($width: get("left-cap-width"), $color: get("left-cap-color")) {
-  position: relative; 
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  &::before {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: $width;
-    background-color: color.get($color);
-  }
-}
-
 /// Output component stylesheet
 /// @example scss
 ///  @include ulu.component-callout-styles();
 
 @mixin styles {
-  $prefix: selector.class("callout");
+  $prefix: selector.class("callout");  
+  $padding: get("padding");
+  $padding-info: utils.get-spacing($padding);
+  $cap-options: get("cap-options");
+  $cap-size: map.get($cap-options, "size");
+  $cap-side: get("cap-side");
 
   #{ $prefix } {
+    position: relative; // For cap
     background-color: color.get(get("background-color"));
-    padding: get("padding");
-    border: get("border");
+    padding: $padding;
+    border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
     & >:first-child {
       margin-top: 0;
     }
-    @if get("left-cap") {
-      @include left-cap();
+
+    // If we have left cap on default we reuse this for all
+    // Else we will print it out manually for each unique style
+    @if (not get("caps-disabled")) {   
+      $cap-defaults: (
+        "offset" : get("border-width"),
+        "border-radius" : if(get("cap-match-radius"), get("border-radius"), null),
+        // "padding-adjust" : map.get($padding-info, $cap-side)
+      );
+      @include element.cap(
+        $side: $cap-side,
+        $options: map.merge($cap-defaults, $cap-options)
+      );
+    }
+      
+    // If the left cap is disabled we still include it's CSS but we hide it
+    // so that other styles of callouts can use it
+    @if (not get("cap")) {
+      &::before {
+        content: none;
+      }
+    // Since this is hidden and reused we need to not use padding adjust unless it
+    // was visible
+    } @else if ($cap-size) {
+      padding-#{ $cap-side }: calc(map.get($padding-info, $cap-side) + $cap-size);
     }
   }
+
+  @include -output-style-modifiers();
+}
+
+// Output Each Style Modifier
+// - Note if cap is not disabled this will just update appearance values of cap styling
+@mixin -output-style-modifiers() {
+  $prefix: selector.class("callout");  
+  $caps-enabled: not get("caps-disabled");
+  $cap-side: get("cap-side");
+
   @each $name, $style in $styles {
+    $cap: map.get($style, "cap");
+    $padding: map.get($style, "padding");
+    $border-radius: map.get($style, "border-radius");
+    $background-color: map.get($style, "background-color");
+    $color: map.get($style, "color");
+    $border-color: map.get($style, "border-color");
+    $border-width: map.get($style, "border-width");
+    $box-shadow: map.get($style, "box-shadow");
+    $cap-match-radius: map.get($style, "cap-match-radius");
+
     #{ $prefix }--#{ $name } {
-      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: 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") {
-        @include left-cap( map.get($style, "left-cap-width"), map.get($style, "left-cap-color"));
+      background-color: color.get($background-color); 
+      color: color.get($color); 
+      border-radius: $border-radius; 
+      border-color: color.get($border-color); 
+      border-width: $border-width; 
+      box-shadow: $box-shadow; 
+      padding: $padding; 
+
+      @if ($cap and $caps-enabled) {
+        $match-radius: utils.if-type("bool", $cap-match-radius, get("cap-match-radius"));
+        // Padding adjust always has to be set (since size could change or padding)
+        $padding-info: utils.get-spacing(if($padding, $padding, get("padding")));
+        $cap-radius: utils.if-type("number", $border-radius, get("border-radius"));
+        $cap-options: utils.ensure-map(map.get($style, "cap-options"));
+        $cap-defaults: (
+          "size" : map.get(get("cap-options"), "size"),
+          "padding-adjust" : map.get($padding-info, $cap-side),
+          "offset" : $border-width,
+          "border-radius" : if($match-radius, $cap-radius, null)
+        );
+
+        @include element.cap-appearance(
+          $side: $cap-side,
+          $options: map.merge($cap-defaults, $cap-options),
+          $before: true
+        );
+
+        // Because the main callout's cap may not be visible
+        &::before {
+          content: "";
+        }
+      // If set to false remove the cap (if enabled) and reset default cap padding adjust
+      } @else if ($cap == false and $caps-enabled) {
+        // if this style doesn't set padding
+        @if (not $padding) {
+          $padding-info: utils.get-spacing(get("padding"));
+          padding-#{ $cap-side }: map.get($padding-info, $cap-side);
+        }
+        &::before {
+          content: none;
+        }
       }
     }
   }

package/scss/components/_captioned-figure.scss

@@ -30,6 +30,23 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Boolean} text-alignment-matches [false] Toggles matching alignment.
+/// @prop {Boolean} text-alignment-matches-center-only [true] Toggles matching alignment, but only if center.
+/// @prop {Color} background-color [white] Background color of the component.
+/// @prop {CssValue} box-shadow [true] Box shadow the captioned figure.
+/// @prop {Dimension} margin-bottom [true] Bottom margin of the captioned figure.
+/// @prop {Number} line-height [true] Line height of the captioned figure caption.
+/// @prop {Dimension} caption-padding [0.5em] Padding of the captioned figure caption. 
+/// @prop {Color} color [null] Font color of the captioned figure caption. 
+/// @prop {String} type-size ["small"] Font size of the captioned figure caption. 
+/// @prop {Dimension} caption-max-width [min(100%, 15em)] Max width of the captioned figure caption. 
+/// @prop {Color} caption-background-color [rgba(255,255,255,0.7)] background color of the captioned figure caption. 
+/// @prop {CssValue} caption-backdrop-filter [blur(2px)] Filter of the backdrop of the captioned figure.
+/// @prop {Color} traditional-caption-color [null] Traditional style for font color.
+/// @prop {Color} traditional-caption-background-color [transparent] Traditional style for caption background color.
+/// @prop {Dimension} traditional-caption-padding [0.5em] Traditional style for caption padding.
+/// @prop {Dimension} traditional-caption-max-width [35em] Traditional style for caption max width.
+/// @prop {CssValue} traditional-caption-text-align [right] Traditional style for caption text-align.
 
 $config: (
   "text-alignment-matches" : false,

package/scss/components/_card-grid.scss

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