@jobber/components 6.110.3 → 6.110.4

package/dist/Avatar-cjs.js

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var Color = require('color');
 var Icon = require('./Icon-cjs.js');
 
-var styles = {"avatar":"QJpdGzG71k8-","large":"bexrcoi1lZk-","small":"xytAyzEap3U-","isDark":"E0Pgej0H3YA-","initials":"_85roPa-UvXQ-","smallInitials":"meLH-BCeXWU-","hasBorder":"OsEsZnEnjLc-","spinning":"VkgQaQlBDig-"};
+var styles = {"avatar":"QJpdGzG71k8-","large":"bexrcoi1lZk-","small":"xytAyzEap3U-","isDark":"E0Pgej0H3YA-","initials":"_85roPa-UvXQ-","hasCustomColor":"ym1UO0hxjD8-","smallInitials":"meLH-BCeXWU-","hasBorder":"OsEsZnEnjLc-","spinning":"VkgQaQlBDig-"};
 
 function isDark(colorToCheck) {
     if (colorToCheck == undefined) {
@@ -47,12 +47,19 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
         style.backgroundImage = `url(${imageUrl})`;
     }
     const shouldBeDark = color == undefined || isDark(color);
+    const hasCustomColor = color != undefined;
     const className = classnames(styles.avatar, size !== "base" && styles[size], {
         [styles.hasBorder]: imageUrl && color,
         [styles.isDark]: shouldBeDark,
+        [styles.hasCustomColor]: hasCustomColor,
     });
+    const iconColor = hasCustomColor
+        ? shouldBeDark
+            ? "white"
+            : "text"
+        : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size, UNSAFE_className: {
+    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {
@@ -60,9 +67,9 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
             fallbackIcon: UNSAFE_style.fallbackIcon,
         } }))));
 }
-function Initials({ initials, dark = false, iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
+function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
     if (!initials) {
-        return (React.createElement(Icon.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
+        return (React.createElement(Icon.Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
         [styles.smallInitials]: initials.length > 2,

package/dist/Avatar-es.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import Color from 'color';
 import { I as Icon } from './Icon-es.js';
 
-var styles = {"avatar":"QJpdGzG71k8-","large":"bexrcoi1lZk-","small":"xytAyzEap3U-","isDark":"E0Pgej0H3YA-","initials":"_85roPa-UvXQ-","smallInitials":"meLH-BCeXWU-","hasBorder":"OsEsZnEnjLc-","spinning":"VkgQaQlBDig-"};
+var styles = {"avatar":"QJpdGzG71k8-","large":"bexrcoi1lZk-","small":"xytAyzEap3U-","isDark":"E0Pgej0H3YA-","initials":"_85roPa-UvXQ-","hasCustomColor":"ym1UO0hxjD8-","smallInitials":"meLH-BCeXWU-","hasBorder":"OsEsZnEnjLc-","spinning":"VkgQaQlBDig-"};
 
 function isDark(colorToCheck) {
     if (colorToCheck == undefined) {
@@ -45,12 +45,19 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
         style.backgroundImage = `url(${imageUrl})`;
     }
     const shouldBeDark = color == undefined || isDark(color);
+    const hasCustomColor = color != undefined;
     const className = classnames(styles.avatar, size !== "base" && styles[size], {
         [styles.hasBorder]: imageUrl && color,
         [styles.isDark]: shouldBeDark,
+        [styles.hasCustomColor]: hasCustomColor,
     });
+    const iconColor = hasCustomColor
+        ? shouldBeDark
+            ? "white"
+            : "text"
+        : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size, UNSAFE_className: {
+    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {
@@ -58,9 +65,9 @@ function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_classNa
             fallbackIcon: UNSAFE_style.fallbackIcon,
         } }))));
 }
-function Initials({ initials, dark = false, iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
+function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
     if (!initials) {
-        return (React__default.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
+        return (React__default.createElement(Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
         [styles.smallInitials]: initials.length > 2,

package/dist/styles.css

@@ -2011,6 +2011,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .QJpdGzG71k8- {
   --avatar-size: var(--public--avatar-size);
   --avatar-border-size: var(--border-base);
+  --avatar-initials-size: var(--typography--fontSize-small);
 
   display: -ms-flexbox;
 
@@ -2034,9 +2035,20 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   font-size: 32px;
   font-size: var(--avatar-size);
   -webkit-font-smoothing: antialiased;
-  background: no-repeat center center hsl(197, 15%, 43%);
-  background: no-repeat center center var(--color-base-blue--600);
+  background: no-repeat center center hsl(198, 35%, 21%);
+  background: no-repeat center center var(--color-interactive--subtle);
   background-size: cover;
+  transition: box-shadow 100ms ease-out;
+  transition: box-shadow var(--timing-quick) ease-out;
+}
+
+.QJpdGzG71k8-:hover {
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  background-color: hsl(197, 90%, 12%);
+  background-color: var(--color-interactive--subtle--hover);
+  transition: box-shadow 100ms ease-in;
+  transition: box-shadow var(--timing-quick) ease-in;
 }
 
 .QJpdGzG71k8-:focus {
@@ -2048,10 +2060,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .bexrcoi1lZk- {
   --avatar-size: 72px;
   --avatar-border-size: var(--border-thick);
+  --avatar-initials-size: 28px;
 }
 
 .xytAyzEap3U- {
   --avatar-size: 24px;
+  --avatar-initials-size: 9px;
 }
 
 /* isDark is dynamic and applies only when background is dark */
@@ -2062,12 +2076,26 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 ._85roPa-UvXQ- {
-  font-size: calc(var(--avatar-size) / 2);
+  color: rgba(255, 255, 255, 1);
+  color: var(--color-text--reverse);
+  font-family: Inter, Helvetica, Arial, sans-serif;
+  font-family: var(--typography--fontFamily-normal);
+  font-size: var(--avatar-initials-size);
   text-transform: uppercase;
 }
 
+.QJpdGzG71k8-.ym1UO0hxjD8-.E0Pgej0H3YA- ._85roPa-UvXQ- {
+  color: rgba(255, 255, 255, 1);
+  color: var(--color-base-white);
+}
+
+.QJpdGzG71k8-.ym1UO0hxjD8-:not(.E0Pgej0H3YA-) ._85roPa-UvXQ- {
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+}
+
 .meLH-BCeXWU- {
-  font-size: calc(var(--avatar-size) / 2.25);
+  font-size: calc(var(--avatar-initials-size) * 0.83);
 }
 
 .OsEsZnEnjLc- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.110.3",
+  "version": "6.110.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "48dbbb2378f14bdc572c0d1857312cf83eeb6fbb"
+  "gitHead": "da1c6df6c8957db8c84633605ea433e42172dcfc"
 }