@ulu/frontend 0.1.0-beta.12 → 0.1.0-beta.121

package/scss/_color.scss

@@ -16,43 +16,49 @@
 /// @type map  
 
 $palette: (
-  "black"                   : black,
-  "white"                   : white,
-  "type"                    : black,
-  "type-secondary"          : rgb(82, 82, 82),
-  "type-tertiary"           : rgb(157, 157, 157),
-  "headline"                : inherit,
-  "background"              : white,
-  "background-gray"         : #F7F8F7,
-  "focus"                   : blue,
-  "accent"                  : orange,
-  "info"                    : #00bde3,
-  "success"                 : #00a91c,
-  "warning"                 : #ffbe2e,  
-  "danger"                  : #d54309,  
-  "info-background"         : #e7f6f8,
-  "success-background"      : #ecf3ec,
-  "warning-background"      : #faf3d1,
-  "danger-background"       : #f4e3db,
-  "selected"                : green,
-  "box-shadow"              : rgba(0, 0, 0, 0.349),
-  "box-shadow-hover"        : rgba(0, 0, 0, 0.5),
-  "rule"                    : gray,
-  "rule-light"              : lightgray,
-  "link"                    : blue,
-  "link-hover"              : darkblue,
-  "link-active"             : darkblue,
-  "link-visited"            : purple,
-  "bullet"                  : inherit,
-  "control"                 : white,
-  "control-hover"           : white,
-  "control-active"           : white,
-  "control-border"          : purple,
-  "control-border-hover"       : blue,
-  "control-border-active"       : orange,
-  "control-background"      : purple,
-  "control-background-hover": blue,
-  "control-background-active": orange,
+  "black":                      black,
+  "white":                      white,
+  "type":                       black,
+  "type-secondary":             rgb(82, 82, 82),
+  "type-tertiary":              rgb(125, 125, 125),
+  "type-disabled":              rgb(160, 160, 160),
+  "headline":                   inherit,
+  "background":                 white,
+  "background-gray":            #fafafa,
+  "focus":                      blue,
+  "accent":                     orange,
+  "info":                       #00bde3,
+  "success":                    #00a91c,
+  "warning":                    #ffbe2e,
+  "danger":                     #d54309,
+  "info-background":            #e7f6f8,
+  "success-background":         #ecf3ec,
+  "warning-background":         #faf3d1,
+  "danger-background":          #f4e3db,
+  // Used for background of elements that are placeholder or that have no value (think charts)
+  "placeholder-background":     #e2e2e2,
+  "placeholder-background-alt": #bababa,
+  "selected":                   green,
+  "box-shadow":                 rgba(0, 0, 0, 0.349),
+  "box-shadow-hover":           rgba(0, 0, 0, 0.5),
+  "rule":                       gray,
+  "rule-light":                 lightgray,
+  "link":                       blue,
+  "link-hover":                 darkblue,
+  "link-active":                darkblue,
+  "link-visited":               purple,
+  "bullet":                     inherit,
+  "control":                    white,
+  "control-hover":              white,
+  "control-active":             white,
+  "control-border":             purple,
+  "control-border-hover":       blue,
+  "control-border-active":      orange,
+  "control-background":         purple,
+  "control-background-hover":   blue,
+  "control-background-active":  orange,
+  // Like accent indicator like things in ui (progress, etc)
+  "indicator" :                 #5050ab, 
 ) !default;
 
 /// Pairs of background-color and color definitions
@@ -101,8 +107,11 @@ $color-classes: (
 @function get($name) {
   // Allow non lookup if the value is already a color (helps with code flow)
   @if (meta.type-of($name) == "string") {
+    $is-keyword: $name == "inherit" or $name == "transparent" or $name == "currentColor";
+    $is-cssvar: string.index($name, "var(") == 1;
+    $is-color-mix: string.index($name, "color-mix(") == 1;
     // Allow custom-properties and keyword inherit/transparent to pass through
-    @if ($name == "inherit" or $name == "transparent" or $name == "currentColor" or string.index($name, "var(") == 1) {
+    @if ($is-keyword or $is-cssvar or $is-color-mix) {
       @return $name;
     // Else look up the color from the palette
     } @else {
@@ -178,7 +187,7 @@ $color-classes: (
   color: get-context-value($name, "color");
 }
 
-/// Lighten a color using the default white by a percentage
+/// Tint (add white) a color using the default white by a percentage
 /// @param {Color, String} $color Color/palette color name to apply to tint
 /// @param {Number} $percentage Percentage
 /// @return {Color}
@@ -189,7 +198,18 @@ $color-classes: (
   @return color.mix(get("white"), get($color), $percentage);
 }
 
-/// Darken a color with the default black by a percentage
+/// Tint (add white) a color using the default white by a percentage (Using color-mix)
+/// - This only works in modern browsers (as of June 2025)
+/// - These match ulu.color-tint() and are designed to accept the same arguments with the same results
+/// @param {Color, String} $color Color or custom property to apply mix to
+/// @param {Number} $percentage Percentage
+/// @return {Color}
+
+@function css-tint($color, $percentage) {
+  @return color-mix(in srgb, get("white") $percentage, get($color) calc(100% - $percentage));
+}
+
+/// Shade (add black) a color with the default black by a percentage
 /// @param {Color, String} $color Color/palette color name to shade
 /// @param {Number} $percentage Percentage to shade
 /// @return {Color}
@@ -200,6 +220,17 @@ $color-classes: (
   @return color.mix(get("black"), get($color), $percentage);
 }
 
+/// Shade (add black) a color using the default white by a percentage (Using color-mix)
+/// - This only works in modern browsers (as of June 2025)
+/// - These match ulu.color-shade() and are designed to accept the same arguments with the same results
+/// @param {Color, String} $color Color or custom property to apply mix to
+/// @param {Number} $percentage Percentage
+/// @return {Color}
+
+@function css-shade($color, $percentage) {
+  @return color-mix(in srgb, get("black") $percentage, get($color) calc(100% - $percentage));
+}
+
 /// Prints all context styles 
 /// @param {String} $with-prop Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)
 /// @example scss

package/scss/_element.scss

@@ -69,6 +69,8 @@ $config: (
   "ul-list-style-type":               disc,
   "ul-list-style-type-2":             circle,
   "ul-list-style-type-3":             square,
+  "cap-color" :                       "accent",
+  "cap-size" :                        5px
 ) !default;
 
 /// Rule style map, redefine defaults or add to
@@ -114,18 +116,35 @@ $rule-margins: (
 
 /// Sets rule margins
 /// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
-@mixin set-rule-margins($changes) {
-  $rule-margins: map.merge($rule-margins, $changes) !global;
+@mixin set-rule-margins($changes, $merge-mode: null) {
+  $rule-margins: utils.map-merge($rule-margins, $changes, $merge-mode) !global;
 }
 
 /// Get a rule style
 /// @param {Map} $changes Map of changes
+/// @return {CssValue} Rule style (css border value)
 
 @function get-rule-style($name: "default") {
   @return utils.require-map-get($rule-styles, $name, "element [rule style]");
 }
 
+/// Get an optional rule style (which is a border)
+/// - If the value is a string we return the rule style, else we return the value
+/// - Used for things where configuration for say a border can be a user defined border or a string (they want an existing rule-style)
+/// - Except when passing "none"/none this will return as-is (since it's a border property)
+/// @param {*} $value The value to check
+/// @return {*} Rule style if string, else value
+
+@function get-optional-rule-style($value) {
+  @if (meta.type-of($value) == "string") {
+    @return get-rule-style($value);
+  } @else {
+    @return $value;
+  }
+}
+
 /// Sets rule margin
 /// @param {Map} $changes Map of changes
 
@@ -290,4 +309,107 @@ $rule-margins: (
     white-space: normal;
     width: auto;
   }
+}
+
+
+/// Layout utility to add a colored bar (cap) to an element's edge, positioned over the element and its border
+/// - You need to set position (relative, fixed) on parent
+/// @param {String} $side The side to place the cap (top, bottom, left, right)
+/// @param {Map} $options Options for the appearance of the cap
+/// @param {Color} $options.color [$config.cap-color] The color for the end cap
+/// @param {Number} $options.size [$config.cap-size] The width/height of the cap
+/// @param {Number} $options.offset [0] A positive number of the amount the cap should extend outside the box (to account for border-width) 
+/// @param {Number} $options.border-radius [null] An optional border-radius to apply to the outward-facing edges of the cap (used to match parent)
+/// @param {Boolean} $before [true] Whether or not to use the ::before element (if not uses :after)
+
+@mixin cap(
+  $side,
+  $options: (),
+  $before: true,
+) {
+  $defaults: (
+    "color" : get("cap-color"), 
+    "size" : get("cap-size"), 
+    "offset" : 0, 
+    "color-hover" : null,
+    "border-radius" : null,
+    "padding-adjust" : null,
+  );
+  $config: map.merge($defaults, $options);
+  $element: if($before, "::before", "::after");
+
+  &#{ $element } {
+    content: "";
+    position: absolute;
+    display: block;
+  }
+
+  @include cap-appearance($side, $config, $before);
+}
+
+
+
+/// Provides the appearance styles for a given cap
+/// - If an option is not provided it won't be output
+/// - This is used to update the caps styling (states, modifiers, etc)
+/// @param {String} $side The side to place the cap (top, bottom, left, right)
+/// @param {Map} $options Options for the appearance of the cap (see options from element.cap)
+/// @param {Boolean} $before Whether or not to use the ::before element (if not uses :after)
+
+@mixin cap-appearance(
+  $side,
+  $options: (),
+  $before: true
+) {
+  $element: if($before, "::before", "::after");
+  $size: map.get($options, "size");
+  $offset: map.get($options, "offset");
+  $border-radius: map.get($options, "border-radius");
+  $padding-adjust: map.get($options, "padding-adjust");
+  
+  $end: $side == "top" or $side == "bottom";
+  $position: if($offset, 0 - $offset, null);
+
+  @if ($padding-adjust and $size) {
+    padding-#{ $side }: calc($padding-adjust + $size);
+  }
+
+  &#{ $element } {
+    background-color: color.get(map.get($options, "color"));
+    #{ $side }: $position;
+
+    @if $end {
+      left: $position;
+      right: $position;
+      height: $size;
+    } @else {
+      top: $position;
+      bottom: $position;
+      width: $size;
+    }
+    
+    @if $border-radius {
+      @if $end {
+        border-#{ $side }-left-radius: $border-radius;
+        border-#{ $side }-right-radius: $border-radius;
+      } @else {
+        border-top-#{ $side }-radius: $border-radius;
+        border-bottom-#{ $side }-radius: $border-radius;
+      }
+    }
+  }
+}
+
+/// Add backdrop-filter blur
+/// @param {CssUnit} $amount [get("backdrop-blur")] Amount to blur
+/// 
+@mixin backdrop-filter-blur($amount: get("backdrop-blur")) {
+  backdrop-filter: blur($amount);
+}
+
+/// Accessibly hide focus ring while keeping it when it's required
+@mixin focus-ring-required-only() {
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
 }

package/scss/_layout.scss

@@ -7,6 +7,7 @@
 @use "sass:meta";
 @use "utils";
 @use "breakpoint";
+@use "color";
 
 /// Module Settings
 /// @type Map
@@ -215,10 +216,7 @@ $containers: (
   $breakpoints: map.get($container, "breakpoints");
   
   $width: map.get($container, "width");
-  // @debug $specific-breakpoint;
-  // @if $specific-breakpoint {
-  //   @debug $container;
-  // }
+
   @if ($width == null) {
     $width: 100%;
   }
@@ -243,14 +241,14 @@ $containers: (
 /// Prints clearfix styles
 
 @mixin clearfix() {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     display: table;
     flex-basis: 0; // Flexbox, clear fix for pseudo elements in Safari
     order: 1;
   }
-  &:after { 
+  &::after { 
     clear: both; 
   }
 }
@@ -267,6 +265,7 @@ $containers: (
 /// Layout utility for absolute (zero on all sides)
 /// - Probably helpful for gzip if we use this when these exact styles are needed
 ///   so they are identical for compression
+/// @param {Boolean} $set-size [false] Whether or not to use sizes to fill the space (height/width 100%) versus setting bottom and right to 0)
 @mixin absolute-fill($set-size: false) {
   position: absolute;
   top: 0;
@@ -278,4 +277,4 @@ $containers: (
     width: 100%;
     height: 100%;
   }
-}
+}

package/scss/_typography.scss

@@ -35,6 +35,7 @@
 /// @prop {Number} line-height-dense [1.3] Default dense line height
 /// @prop {Number} line-height-densest [1.1]
 /// @prop {Number} line-height-spaced [1.75]
+/// @prop {CssUnit} space-size [0.38em] The size of a space for the site's typography (used when creating faux spaces, like for .flow-inline utility)
 
 $config: (
   "letter-spacing-uppercase": 0.04em,
@@ -61,6 +62,7 @@ $config: (
   "max-width":                60em,
   "max-width-large":          75em,
   "max-width-small":          45em,
+  "space-size":               0.38em
 ) !default;
 
 /// Change modules $config
@@ -304,6 +306,19 @@ $sizes: get-default-sizes() !default;
   font-size: calc(#{ $font-size } + #{ $amount });
 }
 
+
+/// Output an optional typography size
+/// - If $name is not a string (ie. null, etc) no size will be output
+/// - If the size is not defined no size will be output
+/// @param {*} $name Size name
+/// @param {*} $args... All args are passed as-is to size() mixin
+
+@mixin optional-size($name, $changes: false, $only-font-size: null) {
+  @if (meta.type-of($name) == "string" and has-size($name)) {
+    @include size($name, $changes, $only-font-size);
+  }
+}
+
 /// Print a typography size (font-size, line-height)
 /// @param {String} $nameOrMap Name to retrieve from sizes map or a unique size map that follows the API
 /// @param {Map} $changes Modifications to be merged into size before output

package/scss/_units.scss

@@ -27,13 +27,14 @@ $config: (
 
 /// Update the units config
 /// @param {Map} $changes A map to merge into the color palette
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 /// @example scss Setting the error and type color
 ///   @include ulu.units-set((
 ///     "default" : 1.5em
 ///   ));
 
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
+@mixin set($changes, $merge-mode: null) {
+  $config: utils.map-merge($config, $changes, $merge-mode) !global;
 }
 
 /// Get a unit by name (preset) or number (multiplier of base)