cozy-ui 140.3.0 → 140.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [140.4.0](https://github.com/cozy/cozy-ui/compare/v140.3.0...v140.4.0) (2026-07-16)
+
+
+### Features
+
+* **Avatar:** Add colorToGradient func ([1b1c442](https://github.com/cozy/cozy-ui/commit/1b1c442))
+
 # [140.3.0](https://github.com/cozy/cozy-ui/compare/v140.2.0...v140.3.0) (2026-07-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "140.3.0",
+  "version": "140.4.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/Avatar/helpers.js

@@ -1,3 +1,5 @@
+import { darken, lighten, rgbToHex } from '@material-ui/core/styles'
+
 export const sizeToFontSize = {
   xs: 8,
   s: 11,
@@ -58,3 +60,18 @@ export const nameToColor = (name = '') => {
   const key = makeKey(colors, name)
   return colors[key]
 }
+
+/**
+ * Transorms a color to a css gradient to be used as background color
+ * @param {string} color - Color to be transformed
+ * @returns {string} css linear-gradient
+ */
+export const colorToGradient = color => {
+  if (!/^#[0-9A-Fa-f]{6}$/.test(color)) {
+    throw new Error('Color must be an 6-HEX color')
+  }
+
+  return `linear-gradient(136deg, ${rgbToHex(
+    lighten(color, 0.17)
+  )} 14.84%, ${rgbToHex(darken(color, 0.15))} 96.03%)`
+}

package/react/Avatar/index.jsx

@@ -3,7 +3,12 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { colorMapping, supportedColors, nameToColor } from './helpers'
+import {
+  colorMapping,
+  supportedColors,
+  nameToColor,
+  colorToGradient
+} from './helpers'
 import { makeStyles } from '../styles'
 import { capitalize } from '../utils/index'
 
@@ -77,4 +82,6 @@ Avatar.defaultProps = {
   size: 'm'
 }
 
+export { colorToGradient }
+
 export default Avatar

package/transpiled/react/Avatar/helpers.d.ts

@@ -32,3 +32,4 @@ export namespace colorMapping {
     const moonBlue: string;
 }
 export function nameToColor(name?: string): string;
+export function colorToGradient(color: string): string;

package/transpiled/react/Avatar/helpers.js

@@ -1,3 +1,4 @@
+import { darken, lighten, rgbToHex } from '@material-ui/core/styles';
 export var sizeToFontSize = {
   xs: 8,
   s: 11,
@@ -46,4 +47,17 @@ export var nameToColor = function nameToColor() {
   var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var key = makeKey(colors, name);
   return colors[key];
+};
+/**
+ * Transorms a color to a css gradient to be used as background color
+ * @param {string} color - Color to be transformed
+ * @returns {string} css linear-gradient
+ */
+
+export var colorToGradient = function colorToGradient(color) {
+  if (!/^#[0-9A-Fa-f]{6}$/.test(color)) {
+    throw new Error('Color must be an 6-HEX color');
+  }
+
+  return "linear-gradient(136deg, ".concat(rgbToHex(lighten(color, 0.17)), " 14.84%, ").concat(rgbToHex(darken(color, 0.15)), " 96.03%)");
 };

package/transpiled/react/Avatar/index.d.ts

@@ -1,4 +1,6 @@
+export { colorToGradient };
 export default Avatar;
+import { colorToGradient } from "./helpers";
 declare function Avatar({ className, color, size, border, innerBorder, disabled, display, textColor, ...props }: {
     [x: string]: any;
     className: any;

package/transpiled/react/Avatar/index.js

@@ -7,7 +7,7 @@ import AvatarMui from '@material-ui/core/Avatar';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { colorMapping, supportedColors, nameToColor } from "cozy-ui/transpiled/react/Avatar/helpers";
+import { colorMapping, supportedColors, nameToColor, colorToGradient } from "cozy-ui/transpiled/react/Avatar/helpers";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 import { capitalize } from "cozy-ui/transpiled/react/utils/index";
 var useStyles = makeStyles(function (theme) {
@@ -80,4 +80,5 @@ Avatar.defaultProps = {
   display: 'initial',
   size: 'm'
 };
+export { colorToGradient };
 export default Avatar;