@ulu/frontend 0.6.13 → 0.6.15

package/lib/scss/_button.scss

@@ -28,6 +28,7 @@ $-fallbacks: (
 /// @prop {Dimension} min-width [9rem] The smallest width for all buttons
 /// @prop {Dimension} padding [(0.75em 1.5em)] Button inner padding value, pass space separated list
 /// @prop {CssValue} white-space [nowrap] Adjust button line wrapping, by default line's are not wrapped
+/// @prop {Dimension} gap [0.5em] Gap to use between items within the button
 /// @prop {String} border-color ["control-border"] The border color for the button, usually if there is no border we set this to match the background color so if a button with no borders is adjacent a style that has borders the heights will match.
 /// @prop {String} border-color-hover ["control-border-hover"] Color of border when button is hovered
 /// @prop {String} border-color-active ["control-border-active"] Color of border when a button has active class

package/lib/scss/components/_badge.scss

@@ -20,25 +20,35 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} background-color [gray] Background color (if no image)
+/// @prop {Color} background-color [gray] Background color (if no image)
+/// @prop {Color} background-color-hover [null] Optional background color for hover when using badge--clickable modifier
 /// @prop {Number} border-radius [50%] Border radius of badge
-/// @prop {Number} color [black] Type color
+/// @prop {Color} color [black] Type color
+/// @prop {Color} color-hover [null] Optional color for hover when using badge--clickable modifier
+/// @prop {CssValue} box-shadow [null] Optional box-shadow
+/// @prop {CssValue} box-shadow-hover [null] Optional box-shadow for hover when using badge--clickable modifier
 /// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Number} font-weight [bold] Font weight
-/// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
+/// @prop {Keyword} font-weight [bold] Font weight
+/// @prop {String} font-family [true] Specify font family, defaults to typography font-family-sans
 /// @prop {Number} width [10rem] Width of badge (default size)
+/// @prop {Time} transition-duration [110ms] Transition duration amount for transitioned properties
 /// @prop {Number} hover-scale [1.2] Scale of badge (if clickable) on hover (enlarges badge)
 /// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
-  "background-color":    gray,
+  "background-color":    rgb(205, 205, 205),
+  "background-color-hover": null,
   "border-radius":       50%,
   "color":               black,
+  "color-hover":         null,
+  "box-shadow" :         null,
+  "box-shadow-hover" :   null,
   "font-size":           1.5rem,
   "font-weight":         bold,
   "font-family":         true,
   "width":               7rem,
   "hover-scale":         1.2,
+  "transition-duration" : 110ms,
   "sizes" : (
     "small" : (
       "font-size" : 1.2rem,
@@ -109,8 +119,11 @@ $config: (
     background-position: center center;
     text-align: center;
     border-radius: get("border-radius");
-    transition: transform 100ms ease-in-out;
-    // Incase this is used as a link or router-link
+    transition-property: transform, color, box-shadow, background-color;
+    transition-duration: get("transition-duration");
+    transition-timing-function: ease-in-out;
+    box-shadow: get("box-shadow");
+    // In case this is used as a link or router-link
     &,
     &:hover,
     &:focus,
@@ -125,6 +138,9 @@ $config: (
     &:hover,
     &:focus {
       #{ $prefix }__inner {
+        color: color.get(get("color-hover"));
+        background-color: color.get(get("background-color-hover"));
+        box-shadow: get("box-shadow-hover");
         transform: scale(get("hover-scale"));
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [