@box/blueprint-web 14.16.1 → 14.17.0

package/dist/lib-esm/avatar/avatar.js

@@ -4,6 +4,7 @@ import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useState, useEffect } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import { getContrastTextColor } from '../utils/getContrastTextColor.js';
 import styles from './avatar.module.js';
 import { colors, iconSizes } from './consts.js';
 
@@ -32,6 +33,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     setImageHasError(false);
   }, [src]);
   const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
+  const foregroundColor = getContrastTextColor(backgroundColor);
   const iconSize = iconSizes[size];
   const imageIsLoading = !!src && !icon && !imageIsLoaded;
   const shouldShowIcon = !anonymous && icon && (!src || !imageIsLoaded);
@@ -47,12 +49,14 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: /*#__PURE__*/React__default.cloneElement(icon, {
         width: iconSize,
         height: iconSize,
+        color: icon.props.color ?? foregroundColor,
         role: 'presentation'
       })
     }), shouldShowText && jsx("div", {
       className: clsx(styles.text, styles[`length-${text.length}`]),
       style: {
-        backgroundColor
+        backgroundColor,
+        color: foregroundColor
       },
       children: text
     }), shouldShowAnonymousAvatar && jsx("div", {

package/dist/lib-esm/avatar/consts.js

@@ -1,4 +1,4 @@
-import { Size9, Size7, Size5, Size4, Size3, Size2, Grimace50, Orange50, PurpleRain50, WatermelonRed50, LightBlue50, Yellorange50, GreenLight50, Yellow50, DarkBlue50, BoxBlue50 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size9, Size7, Size5, Size4, Size3, Size2, Grimace50, Orange50, PurpleRain50, WatermelonRed50, LightBlue50, Yellorange50, GreenLight50, Yellow50, DarkBlue100, BoxBlue50 } from '@box/blueprint-web-assets/tokens/tokens';
 
 const iconSizes = {
   xsmall: Size2,
@@ -10,7 +10,7 @@ const iconSizes = {
 };
 const colorsMap = {
   BoxBlue50,
-  DarkBlue50,
+  DarkBlue100,
   Yellow50,
   GreenLight50,
   Yellorange50,

package/dist/lib-esm/avatar/types.d.ts

@@ -1,9 +1,9 @@
-import { type BoxBlue50, type DarkBlue50, type GreenLight50, type Grimace50, type LightBlue50, type Orange50, type PurpleRain50, type WatermelonRed50, type Yellorange50, type Yellow50 } from '@box/blueprint-web-assets/tokens/tokens';
+import { type BoxBlue50, type DarkBlue100, type GreenLight50, type Grimace50, type LightBlue50, type Orange50, type PurpleRain50, type WatermelonRed50, type Yellorange50, type Yellow50 } from '@box/blueprint-web-assets/tokens/tokens';
 import { type ReactElement, type SVGProps } from 'react';
 import { type RequireAllOrNone, type RequireExactlyOne } from 'type-fest';
 import { type AvatarSizes } from './consts';
 export type AvatarSize = (typeof AvatarSizes)[number];
-export type Color = typeof BoxBlue50 | typeof DarkBlue50 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
+export type Color = typeof BoxBlue50 | typeof DarkBlue100 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
 export interface Image {
     /** The image to display. When the image is loading or if it fails to load, fallbacks are displayed in order:
      * icon (if provided) → text (if provided) → anonymous user image.

package/dist/lib-esm/utils/getContrastTextColor.d.ts

@@ -0,0 +1,14 @@
+export interface ContrastTextColorOptions {
+    textOnLight?: string;
+    textOnDark?: string;
+}
+/**
+ * Returns the text color with the highest contrast against the background.
+ *
+ * @param backgroundColor - The background color in any CSS-compatible format (hex, rgb, hsl, etc.)
+ * @param options (optional)
+ *  - textOnLight: Text color to use on light backgrounds (defaults to GrayBlack)
+ *  - textOnDark: Text color to use on dark backgrounds (defaults to GrayWhite)
+ * @returns The text color with higher contrast
+ */
+export declare function getContrastTextColor(backgroundColor: string, options?: ContrastTextColorOptions): string;

package/dist/lib-esm/utils/getContrastTextColor.js

@@ -0,0 +1,29 @@
+import { GrayWhite, GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
+import Color from 'color';
+
+/**
+ * Returns the text color with the highest contrast against the background.
+ *
+ * @param backgroundColor - The background color in any CSS-compatible format (hex, rgb, hsl, etc.)
+ * @param options (optional)
+ *  - textOnLight: Text color to use on light backgrounds (defaults to GrayBlack)
+ *  - textOnDark: Text color to use on dark backgrounds (defaults to GrayWhite)
+ * @returns The text color with higher contrast
+ */
+function getContrastTextColor(backgroundColor, options = {}) {
+  const {
+    textOnLight = GrayBlack,
+    textOnDark = GrayWhite
+  } = options;
+  try {
+    const bgColor = Color(backgroundColor);
+    const onLightContrast = bgColor.contrast(Color(textOnLight));
+    const onDarkContrast = bgColor.contrast(Color(textOnDark));
+    return onLightContrast > onDarkContrast ? textOnLight : textOnDark;
+  } catch {
+    // If any colors are invalid, fallback to text on light
+    return textOnLight;
+  }
+}
+
+export { getContrastTextColor };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.16.1",
+    "version": "14.17.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.115.1",
+        "@box/blueprint-web-assets": "^4.115.3",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.18.1",
+        "@box/storybook-utils": "^0.18.3",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",