@ulu/frontend 0.0.23 → 0.1.0-beta.1

package/scss/components/_tag.scss

@@ -0,0 +1,156 @@
+////
+/// @group tag
+/// A small, lightweight label used to categorize, classify, or identify items within an interface
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} font-weight [normal] Font weight for the tag text.
+/// @prop {String} font-family [true] Font family for the tag text.
+/// @prop {CssValue} box-shadow [none] Box shadow for the tag.
+/// @prop {Dimension} padding [(0.4em 0.75em)] Inner padding for the tag.
+/// @prop {CssValue} vertical-align [baseline] Vertical alignment of tag text.
+/// @prop {Dimension} margin-between [0.5em] Margin between tags.
+/// @prop {Dimension} margin-between-tags [0] @joe-check 
+/// @prop {Number} line-height [1] Line height for the tag text.
+/// @prop {String} type-size ["small"] Font size for the tag text.
+/// @prop {Color} background-color [#eaeaea] Background color of the tag.
+/// @prop {Dimension} border-radius [1.25em] Border radius of the tag.
+/// @prop {Color} border-color [transparent] Border color for the tag.
+/// @prop {Dimension} border-width [1px] Border width of the tag.
+/// @prop {String} color ["type-tertiary"] Color of the tag text.
+
+$config: (
+  "font-weight" : normal,
+  "font-family" : true,
+  "box-shadow" : none,
+  "padding" : (0.4em 0.75em),
+  "vertical-align" : baseline,
+  "margin-between" : 0.5em,
+  "margin-between-tags" : 0,
+  "line-height" : 1,
+  "type-size" : "small",
+  "background-color" : #eaeaea,
+  "border-radius" : 1.25em,
+  "border-color" : transparent,
+  "border-width" : 1px,
+  "color": "type-tertiary",
+) !default;
+
+/// Style Map (alternate tag styles)
+
+$styles: (
+  "success" : (
+    "color" : rgb(37, 73, 37),
+    "background-color" : rgb(190, 220, 190),
+  ),
+  "danger" : (
+    "color" : rgb(78, 24, 24),
+    "background-color" : rgb(235, 179, 179),
+  ),
+  "outline" : (
+    "background-color" : transparent,
+    "border-color" : #ccc
+  )
+) !default;
+
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tag-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set tag styles 
+/// @param {Map} $changes Map of changes
+/// @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;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-tag-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "tag [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-tag-styles();
+
+@mixin styles {
+  $prefix: selector.class("tag");
+
+  #{ $prefix } {
+    border-radius: get("border-radius"); 
+    display: inline-block;
+    padding: get("padding");
+    font-weight: get("font-weight");
+    vertical-align: get("vertical-align");
+    font-style: normal;
+    text-overflow: ellipsis;
+    text-align: center;
+    white-space: nowrap;
+    border: get("border-width") solid color.get(get("border-color"));
+    background-color: color.get(get("background-color"));
+    color: color.get(get("color"));
+    font-family: get("font-family");
+    @if (typography.has-size(get("type-size"))) {
+      @include typography.size(get("type-size"), $only-font-size: true);
+    }
+    line-height: get("line-height");
+    &:not(:last-child) {
+      margin-right: get("margin-between");
+    }
+    &:not(:first-child) {
+      margin-left: get("margin-between");
+    }
+    & + & {
+      margin-left: get("margin-between-tags");
+    }
+  }
+
+  @each $name, $style in $styles {
+    $type-size: map.get($style, "type-size");
+    #{ $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")); 
+      border-width: color.get(map.get($style, "border-width")); 
+      box-shadow: map.get($style, "box-shadow"); 
+      padding: map.get($style, "padding");  
+      @if (typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      }
+      line-height: map.get($style, "line-height");
+    }
+  }
+}

package/scss/components/_tile-button.scss

@@ -0,0 +1,131 @@
+////
+/// @group tile-button
+/// Button to be used within tile-grid. Used in combination with button component classes.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../element";
+@use "../typography";
+@use "../utils";
+@use "../button";
+
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-densest"
+  ),
+  "transition-duration" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "transition-duration"
+  ),
+  "transition-properties" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "transition-properties"
+  ),
+  "transition-enabled" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "transition-enabled"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} border-radius [true] The border radius of the tile button. If set to true, will use the element.scss property for "border-radius".
+/// @prop {String} description-size [small-x] The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss.
+/// @prop {Dimension} line-height [true] The line-height of the tile-button. If set to true, will use the typography.scss property for "line-height-densest".
+/// @prop {Dimension} padding [(1em 0.5em)] The padding of the tile button
+/// @prop {Dimension} row-margin [0.5em] The margin between rows.
+/// @prop {Dimension} icon-font-size [1.5em] The font size of the icon.
+/// @prop {Dimension} icon-margin [1em] The margin for the icon.
+/// @prop {Number} icon-opacity [0.5] The opacity of the icon.
+
+$config: (
+  "border-radius" : true,
+  "description-size" : "small-x",
+  "line-height" : true,
+  "padding" : (1em 0.5em),
+  "row-margin" : 0.5em,
+  "icon-font-size" : 1.5em,
+  "icon-margin" : 1em,
+  "icon-opacity" : 0.5,
+  "transition-enabled" : true,
+  "transition-duration" : true,
+  "transition-properties" : true
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tile-button-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-tile-button-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "component-tile-button [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-tile-button-styles();
+
+@mixin styles {
+  $prefix: selector.class("tile-button");
+
+  #{ $prefix } {
+    white-space: normal;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: get("padding");
+    border-radius: get("border-radius");
+    line-height: get("line-height");
+    @if get("transition-enabled") {
+      transition-duration: get("transition-duration");
+      transition-property: get("transition-properties");
+    }
+  }
+  #{ $prefix }__row {
+    
+    & + & {
+      margin-top: get("row-margin");
+    }
+  }
+
+  $desc-size: get("description-size");
+
+  @if ($desc-size and typography.has-size($desc-size)) {
+    #{ $prefix }__row--description {
+      @include typography.size($desc-size, $only-font-size: true);
+    }
+  }
+  // Special row style for icons (optionally transparent)
+  #{ $prefix }__row--icon {
+    margin: 0 auto;
+    opacity: get("icon-opacity");
+    font-size: get("icon-font-size");
+    & + #{ $prefix }__row {
+      margin-top: get("icon-margin");
+    }
+  }
+}
+

package/scss/components/_tile-grid-overlay.scss

@@ -0,0 +1,132 @@
+////
+/// @group tile-grid-overlay
+/// Provides styles to use tile-grid over the top of image
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../layout";
+@use "../breakpoint";
+
+/// Module Settings
+/// @type Map
+
+$config: (
+  "button-background-color": #ce97e6dc,
+  "button-background-color-hover": #b882cf,
+  "button-background-color-striped": #b397e6cc,
+  "button-background-color-active": #868dece4,
+  "background-image-filter" : (grayscale(1) contrast(0.6) brightness(1.5)),
+  "breakpoint-even-columns-min" : "small",
+  "breakpoint-even-columns-max" : "medium",
+  "wide-breakpoint-even-columns-min" : "small"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tile-grid-overlay-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-tile-grid-overlay-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "tile-grid-overlay [config]");
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-tile-grid-overlay-styles();
+
+@mixin styles {
+
+  $prefix: selector.class("tile-grid-overlay");
+
+  #{ $prefix } {
+    position: relative;
+  }
+  #{ $prefix }__background-image {
+    @include layout.absolute-fill();
+    filter: get("background-image-filter");
+  }
+  #{ $prefix }__grid {
+    position: relative;
+    @media print {
+      display: block;
+    }
+  }
+  #{ $prefix }__button {
+    background-color: color.get(get("button-background-color"));
+    border-radius: 0;
+    padding-left: 1em;
+    padding-right: 1em;
+    &:hover,
+    &:focus {
+      // Competes with striping
+      background-color: color.get(get("button-background-color-hover")) !important; 
+    }
+    &.is-active {
+      // Competes with striping
+      background-color: color.get(get("button-background-color-active")) !important; 
+    }
+    @media print {
+      display: block;
+      text-align: left;
+      height: auto;
+      aspect-ratio: auto;
+      padding-left: 0;
+    }
+  }
+
+  // Striping
+  #{ $prefix }__item {
+    &:nth-child(even) #{ $prefix }__button {
+      background-color: color.get(get("button-background-color-striped"));
+    }
+    // They want it to alternate when 2 column, so it has to flip flop
+    // Then when it returns to above or below this 2 column area odd works like before
+    @include breakpoint.min-max(
+      get("breakpoint-even-columns-min"), 
+      get("breakpoint-even-columns-max")
+    ) {
+      @include -two-column-striping($prefix);
+    }
+  }
+
+  // When 2 columns needs the same styles as between small/medium on standard layout
+  // no way to reuse because it's inside different media queries
+  #{ $prefix }__grid--wide {
+    #{ $prefix }__item {
+      @include breakpoint.min(get("wide-breakpoint-even-columns-min")) {
+        @include -two-column-striping($prefix);
+      }
+    }
+  }
+}
+
+// Since we can't reuse this at least rules will match for compression using mixin
+// Needs to correspond with breakpoints for static tile-grid
+@mixin -two-column-striping($prefix) {
+  &:nth-child(4n + 1) #{ $prefix }__button {
+    background-color: color.get(get("button-background-color"));
+  }
+  &:nth-child(4n + 2) #{ $prefix }__button {
+    background-color: color.get(get("button-background-color-striped"));
+  }
+  &:nth-child(4n + 3) #{ $prefix }__button {
+    background-color: color.get(get("button-background-color-striped"));
+  }
+  &:nth-child(4n + 4) #{ $prefix }__button {
+    background-color: color.get(get("button-background-color"));
+  }
+}

package/scss/components/_tile-grid.scss

@@ -0,0 +1,172 @@
+////
+/// @group tile-grid
+/// Creates a CSS grid with items that have matching aspect ratios. Reflows to fit as many items as can be fit withing current grid's width by default. Allows passing static styles to create fixed number of columns per row. Static styles are set adaptively and can adjust the number of columns at different breakpoints.
+////
+
+@use "sass:map";
+@use "sass:list";
+
+@use "../selector";
+@use "../breakpoint";
+@use "../utils";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} aspect-ratio [list.slash(4, 3)]
+/// @prop {Number} gap [1rem] The gap for the tile grid.
+/// @prop {Number} width [10em]
+
+$config: (
+  "aspect-ratio" : list.slash(4, 3),
+  "gap" : 1rem,
+  "width" : 10em,
+) !default;
+
+/// Alternate Sizes for reflowable grid
+/// - Map of preferred width for columns and optional aspect-ratio for item
+/// @type Map
+
+$sizes: (
+  "large" : (
+    "width" : 20em,
+  )
+) !default;
+
+/// Static grid width styles
+/// @type Map
+
+$static-sizes: (
+  "static" : (
+    "default" : (
+      "columns" : 1,
+      "gap" : null,
+      "aspect-ratio" : list.slash(4, 3)
+    ),
+    "small" : (
+      "direction" : "min",
+      "columns" : 2,
+      "gap" : null,
+    ),
+    "medium" : (
+      "direction" : "min",
+      "columns" : 3,
+      "gap" : null,
+    ),
+  ),
+  "static-wide" : (
+    "default" : (
+      "columns" : 1,
+      "gap" : null,
+      "aspect-ratio" : list.slash(4, 3)
+    ),
+    "small" : (
+      "direction" : "min",
+      "columns" : 2,
+      "gap" : null,
+    ),
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tile-grid-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set fixed sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-static($changes, $merge-mode: null) {
+  $static-sizes: utils.map-merge($static-sizes, $changes, $merge-mode) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-tile-grid-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "component-tile-grid [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-tile-grid-styles();
+
+@mixin styles {
+  $prefix: selector.class("tile-grid");
+
+  #{ $prefix } {
+    display: grid;
+    gap: get("gap");
+    grid-template-columns: repeat(auto-fit, minmax(get("width"), 1fr));
+    grid-auto-rows: 1fr;
+  }
+  #{ $prefix }__item {
+    aspect-ratio: get("aspect-ratio");
+  }
+  // Use with fill-context, creates the space for images/etc
+  #{ $prefix }--expanded {
+    #{ $prefix }__item {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  // Print out reflowable sizes modifiers
+  @each $modifier, $props in $sizes {
+    $width: map.get($props, "width");
+    $gap: map.get($props, "gap");
+    $aspect-ratio: map.get($props, "aspect-ratio");
+    
+    @if ($width or $gap) {
+      #{ $prefix }--#{ $modifier } {
+        @if utils.map-has($props, "width") {
+          grid-template-columns: repeat(auto-fit, minmax($width, 1fr));
+        }
+        gap: $gap;
+      }
+    }
+    @if $aspect-ratio {
+      #{ $prefix }--#{ $modifier } #{ $prefix }__item {
+        aspect-ratio: $aspect-ratio;
+      }
+    }
+  }
+
+  // Print out the static column styles
+  // - Adaptive column count per breakpoint, equal widths
+  @each $modifier, $breakpoints in $static-sizes {
+    @include breakpoint.from-each($breakpoints) using ($props) {
+      #{ $prefix }--#{ $modifier } {
+        grid-template-columns: repeat(map.get($props, "columns"), 1fr);
+        gap: map.get($props, "gap");
+      }
+      @if utils.map-contains-any($props, ("aspect-ratio",)) {
+        #{ $prefix }__item {
+          aspect-ratio: map.get($props, "aspect-ratio");
+        }
+      }
+    }
+  }
+
+  // Modifier to force no gap on grid
+  #{ $prefix }--no-gap {
+    gap: 0 !important;
+  }
+}
+

package/scss/components/_vignette.scss

@@ -0,0 +1,65 @@
+
+////
+/// @group vignette
+/// Create a vignette effect around image/video/etc
+////
+
+@use 'sass:color';
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [rgb(0,0,0)] Color used for the fade-in of the vignette. Must be actual color not color module palette name
+
+$config: (
+  "background-color" : rgb(0,0,0),
+  "image-filter" : saturate(85%)
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-vignette-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-vignette-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "vignette [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-vignette-styles();
+
+@mixin styles {
+  $prefix: selector.class("vignette");
+
+  #{ $prefix } {
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(0deg,color.change(get("background-color"), $alpha: 0.8),color.change(get("background-color"), $alpha: 0) 45%);
+      pointer-events: none;
+    }
+    @if get("image-filter") {
+      img {
+        filter: get("image-filter");
+      }
+    }
+  }
+}