@ulu/frontend 0.0.23 → 0.1.0-beta.1

package/scss/components/_callout.scss

@@ -0,0 +1,175 @@
+////
+/// @group callout
+/// A container for content that highlights important information, provides context, or guides user attention within an interface
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+
+@use "../utils";
+@use "../selector";
+@use "../element";
+
+// 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"
+  )
+);
+
+/// 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 {Boolean} border-radius [true] The border radius 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 {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,
+  "box-shadow" : none,
+  "left-cap" : false,
+  "left-cap-color" : green,
+  "left-cap-width" : 0.5rem,
+  "margin" : 2rem,
+  "padding" : 1.5rem,
+) !default;
+
+$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
+  ),
+  "warning" : (
+    "background-color" : #faf3d1,
+    "left-cap-color" : #ffbe2e,
+    "left-cap" : true,
+    "left-cap-width": 0.5rem
+  ),
+  "success" : (
+    "background-color" : #ecf3ec,
+    "left-cap-color" : #00a91c,
+    "left-cap" : true,
+    "left-cap-width": 0.5rem
+  ),
+  "danger" : (
+    "background-color" : #f4e3db,
+    "left-cap-color" : #d54309,
+    "left-cap" : true,
+    "left-cap-width": 0.5rem
+  ),
+  "emergency" : (
+    "background-color" : #9c3d10,
+    "left-cap-color" : #9c3d10,
+    "left-cap" : true,
+    "color" : white,
+    "left-cap-width": 0.5rem
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-callout-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-callout-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "callout [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// 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]
+/// @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;
+  }
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-callout-styles();
+
+@mixin styles {
+  $prefix: selector.class("callout");
+
+  #{ $prefix } {
+    background-color: get("background-color");
+    padding: get("padding");
+    border: get("border");
+    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();
+    }
+  }
+  @each $name, $style in $styles {
+    #{ $prefix }--#{ $name } {
+      background-color: map.get($style, "background-color"); 
+      color: map.get($style, "color"); 
+      border: map.get($style, "border"); 
+      border-radius: map.get($style, "border-radius"); 
+      border-color: 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"));
+      }
+    }
+  }
+}

package/scss/components/_captioned-figure.scss

@@ -0,0 +1,173 @@
+////
+/// @group captioned-figure
+////
+/// Figure with caption layout (to position caption)
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../element";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow-raised"
+  ),
+  "margin-bottom" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "margin"
+  ),
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+
+$config: (
+  "text-alignment-matches" : false,
+  "text-alignment-matches-center-only" : true,
+  "background-color" : white,
+  "box-shadow" : true,
+  "margin-bottom" : true,
+  "line-height" : true,
+  "caption-padding" :  0.5em,
+  "color" : null,
+  "type-size" : "small",
+  "caption-max-width" : min(100%, 15em),
+  "caption-background-color" : rgba(255,255,255,0.7),
+  "caption-backdrop-filter" : blur(2px),
+  "traditional-caption-color" : null,
+  "traditional-caption-background-color" : transparent,
+  "traditional-caption-padding" : 0.5em,
+  "traditional-caption-max-width" : 35em,
+  "traditional-caption-text-align" : right,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-captioned-figure-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-captioned-figure-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "captioned-figure [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+/// @example
+///  @include ulu.component-captioned-figure-styles();
+
+@mixin styles {
+  $prefix: selector.class("captioned-figure");
+  $set-aligns: get("text-alignment-matches");
+  $aligns-center-only: get("text-alignment-matches-center-only");
+
+  #{ $prefix } {
+    display: block;
+    position: relative;
+    margin-bottom: get("margin-bottom");
+    background-color: get("background-color");
+    > img {
+      width: 100%;
+      height: auto;
+      margin: 0;
+    }
+  }
+  a#{ $prefix },
+  button#{ $prefix } {
+    display: block;
+    @if (get("box-shadow")) {
+      &:hover,
+      &:focus {
+        box-shadow: get("box-shadow");
+      }
+    }
+  }
+  #{ $prefix }__caption {
+    position: absolute;
+    color: 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");
+    padding: get("caption-padding");
+    backdrop-filter: get("caption-backdrop-filter");
+  }
+  #{ $prefix }--traditional {
+    #{ $prefix }__caption {
+      position: static;
+      color: get("traditional-caption-color");
+      max-width: get("traditional-caption-max-width");
+      background-color: get("traditional-caption-background-color");
+      padding: get("traditional-caption-padding");
+      text-align: get("traditional-caption-text-align");
+      @if (get("traditional-caption-text-align") == right) {
+        margin-left: auto;
+      }
+      @if (get("traditional-caption-text-align") == center) {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+  #{ $prefix }--left {
+    #{ $prefix }__caption {
+      left: 0;
+      @if ($set-aligns and not $aligns-center-only) {
+        text-align: left;
+      }
+    }
+  }
+  #{ $prefix }--right {
+    #{ $prefix }__caption {
+      right: 0;
+      @if ($set-aligns and not $aligns-center-only) {
+        text-align: right;
+      }
+    }
+  }
+  #{ $prefix }--bottom {
+    #{ $prefix }__caption {
+      bottom: 0;
+    }
+  }
+  #{ $prefix }--top {
+    #{ $prefix }__caption {
+      top: 0;
+    }
+  }
+  #{ $prefix }--bottom#{ $prefix }--center,
+  #{ $prefix }--top#{ $prefix }--center {
+    #{ $prefix }__caption {
+      left: 50%;
+      transform: translateX(-50%);
+      @if ($set-aligns or $aligns-center-only) {
+        text-align: center;
+      }
+    }
+  }
+  #{ $prefix }--left#{ $prefix }--center,
+  #{ $prefix }--right#{ $prefix }--center {
+    #{ $prefix }__caption {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}

package/scss/components/_card-grid.scss

@@ -0,0 +1,75 @@
+////
+/// @group card-grid
+/// Lightweight CSS Grid setup for card components
+////
+
+@use "sass:map";
+
+@use "../breakpoint";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} compact-template-columns [1fr 1fr 1fr] The template-columns of the card-grid--compact.
+/// @prop {Dimension} compact-gap [1rem] The grid gap of the card-grid--compact.
+/// @prop {Dimension} gap [2rem] The grid gap of the card-grid.
+/// @prop {CssValue} template-columns [1fr 1fr] The template-columns of the card-grid.
+
+$config: (
+  "gap" : 2rem,
+  "template-columns" : 1fr 1fr,
+  "compact-gap" : 1rem,
+  "compact-template-columns" : 1fr 1fr 1fr,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-card-grid-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-card-grid-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "card-grid [config]");
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-card-grid-styles();
+
+@mixin styles {
+  $prefix: selector.class("card-grid");
+  $prefix-card: selector.class("card");
+  
+  #{ $prefix } {
+    display: grid;
+    grid-template-columns:  get("template-columns");
+    grid-auto-rows: 1fr;
+    gap: get("gap");
+    margin: get("gap") 0;
+    #{ $prefix-card } {
+      max-width: none;
+      margin: 0;
+      &:not(#{ $prefix-card }--overlay) {
+        height: 100%;
+      }
+    }
+  }
+  #{ $prefix }--compact {
+    grid-template-columns: get("compact-template-columns");
+    gap: get("compact-gap");
+  }
+  @include breakpoint.max("small") {
+    #{ $prefix } {
+      grid-template-columns: 1fr;
+    }
+  }
+}