cozy-ui 140.2.0 → 140.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [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)
+
+
+### Features
+
+* Add ColorList component ([ade8132](https://github.com/cozy/cozy-ui/commit/ade8132))
+* Reexport ImageList, ImageListItem and ImageListItemBar ([7480e4b](https://github.com/cozy/cozy-ui/commit/7480e4b))
+
 # [140.2.0](https://github.com/cozy/cozy-ui/compare/v140.1.2...v140.2.0) (2026-07-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "140.2.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/react/ColorList/Readme.md

@@ -0,0 +1,37 @@
+```jsx
+import { useState } from 'react'
+import ColorList from 'cozy-ui/transpiled/react/ColorList'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const initialVariants = [{ medium: false }]
+
+const ColorPickerDemo = ({ variant }) => {
+  const { isMobile } = useBreakpoints()
+  const [selectedColor, setSelectedColor] = useState('')
+
+  return (
+    <div style={{ width: (variant.medium || isMobile) ? '100%' : 180 }}>
+      <ColorList
+        size={variant.medium ? 'medium' : undefined}
+        selectedColor={selectedColor}
+        onClick={color => {
+          console.info('color :', color)
+          setSelectedColor(color)
+        }}
+      />
+    </div>
+  )
+}
+
+;
+
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <ColorPickerDemo variant={variant}/>
+    )}
+  </Variants>
+</DemoProvider>
+```

package/react/ColorList/helpers.js

@@ -0,0 +1,22 @@
+export const COLORS = [
+  '#273891',
+  '#7E57E3',
+  '#9E83E8',
+  '#91CEF6',
+  '#2D83FF', // file-folder color, don't remove it
+  '#006BD8',
+  '#038199',
+  '#51B588',
+  '#457D6C',
+  '#1EBBCC',
+  '#E0465C',
+  '#ED20A4',
+  '#ED768D',
+  '#B85B17',
+  '#EDA91D',
+  '#BA8144',
+  '#ED916B',
+  '#EDC661',
+  '#131326',
+  '#646580'
+]

package/react/ColorList/index.jsx

@@ -0,0 +1,60 @@
+import { Icon, Check } from '@linagora/twake-icons'
+import propTypes from 'prop-types'
+import React from 'react'
+
+import { COLORS } from './helpers'
+import Avatar from '../Avatar'
+import ButtonBase from '../ButtonBase'
+import ImageList from '../ImageList'
+import ImageListItem from '../ImageListItem'
+import { useBreakpoints } from '../providers/Breakpoints'
+
+const sizeToPx = {
+  small: 21,
+  medium: 41
+}
+
+const ColorList = ({ size, selectedColor, onClick }) => {
+  const { isMobile } = useBreakpoints()
+  const _size = size || (isMobile ? 'medium' : 'small')
+
+  return (
+    <ImageList
+      cols={_size === 'medium' ? 5 : 7}
+      rowHeight={sizeToPx[_size]}
+      gap={_size === 'medium' ? 16 : 5}
+    >
+      {COLORS.map(color => (
+        <ImageListItem
+          key={color}
+          className="u-ta-center"
+          classes={{ item: 'u-ov-visible' }}
+        >
+          <ButtonBase
+            className="u-bdrs-circle"
+            component="div"
+            onClick={() => onClick?.(color)}
+          >
+            <Avatar color={color} size={sizeToPx[_size]}>
+              {selectedColor?.toUpperCase() === color ? (
+                <Icon icon={Check} size={_size === 'medium' ? 19 : 10} />
+              ) : (
+                ' '
+              )}
+            </Avatar>
+          </ButtonBase>
+        </ImageListItem>
+      ))}
+    </ImageList>
+  )
+}
+
+ColorList.propTypes = {
+  size: propTypes.oneOf(['small', 'medium']),
+  selectedColor: propTypes.string,
+  onClick: propTypes.func
+}
+
+export { COLORS }
+
+export default ColorList

package/react/ImageList/index.js

@@ -0,0 +1,3 @@
+import MuiImageList from '@material-ui/core/ImageList'
+
+export default MuiImageList

package/react/ImageListItem/index.js

@@ -0,0 +1,3 @@
+import MuiImageListItem from '@material-ui/core/ImageListItem'
+
+export default MuiImageListItem

package/react/ImageListItemBar/index.js

@@ -0,0 +1,3 @@
+import MuiImageListItemBar from '@material-ui/core/ImageListItemBar'
+
+export default MuiImageListItemBar

package/react/index.js

@@ -13,6 +13,7 @@ export {
 } from './Nav'
 export { default as ListItemText } from './ListItemText'
 export { default as Spinner } from './Spinner'
+export { default as ColorList } from './ColorList'
 export { default as Accordion } from './Accordion'
 export { default as AccordionSummary } from './AccordionSummary'
 export { default as AccordionDetails } from './AccordionDetails'

package/skills/cozy-ui-reference/SKILL.md

@@ -25,7 +25,7 @@ import 'cozy-ui/transpiled/react/stylesheet.css'
 
 ## What This Skill Provides
 
-* 90+ React components with examples and extracted props.
+* 91+ React components with examples and extracted props.
 * CSS utility classes for spacing, typography, colors, layout, and component-specific classes.
 * Cozy theming conventions built on Material-UI v4.
 * Import patterns for `cozy-ui/transpiled/react` and `cozy-ui/dist`.

package/skills/cozy-ui-reference/references/components.md

@@ -17,7 +17,7 @@ Generated reference for React components available in cozy-ui. Use this file to
 - **Utils**: [DropdownText](#dropdowntext), [MuiCozyTheme](#muicozytheme)
 - **Hooks & Providers**: [Breakpoints (providers/Breakpoints)](#breakpoints-providers-breakpoints), [ConfirmDialog (providers/ConfirmDialog)](#confirmdialog-providers-confirmdialog), [CozyTheme (providers/CozyTheme)](#cozytheme-providers-cozytheme), [Selection (providers/Selection)](#selection-providers-selection), [useConfirmExit (hooks/useConfirmExit)](#useconfirmexit-hooks-useconfirmexit)
 - **Labs**: [IconGrid (Labs/IconGrid)](#icongrid-labs-icongrid), [Labs](#labs), [PasswordInput (Labs/PasswordInput)](#passwordinput-labs-passwordinput)
-- **Other**: [Autocomplete](#autocomplete), [BottomSheet](#bottomsheet), [ColorPickerCustom](#colorpickercustom), [providers](#providers)
+- **Other**: [Autocomplete](#autocomplete), [BottomSheet](#bottomsheet), [ColorList](#colorlist), [ColorPickerCustom](#colorpickercustom), [providers](#providers)
 
 ## Buttons
 
@@ -1824,6 +1824,13 @@ import BottomSheet from 'cozy-ui/transpiled/react/BottomSheet'
 ```
 
 
+### ColorList
+
+```jsx
+import ColorList from 'cozy-ui/transpiled/react/ColorList'
+```
+
+
 ### ColorPickerCustom
 
 With saturation, hue and hex input for manual input or copy/paste.

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;

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

@@ -0,0 +1 @@
+export const COLORS: string[];

package/transpiled/react/ColorList/helpers.js

@@ -0,0 +1,2 @@
+export var COLORS = ['#273891', '#7E57E3', '#9E83E8', '#91CEF6', '#2D83FF', // file-folder color, don't remove it
+'#006BD8', '#038199', '#51B588', '#457D6C', '#1EBBCC', '#E0465C', '#ED20A4', '#ED768D', '#B85B17', '#EDA91D', '#BA8144', '#ED916B', '#EDC661', '#131326', '#646580'];

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

@@ -0,0 +1,16 @@
+export { COLORS };
+export default ColorList;
+import { COLORS } from "./helpers";
+declare function ColorList({ size, selectedColor, onClick }: {
+    size: any;
+    selectedColor: any;
+    onClick: any;
+}): JSX.Element;
+declare namespace ColorList {
+    namespace propTypes {
+        const size: propTypes.Requireable<string>;
+        const selectedColor: propTypes.Requireable<string>;
+        const onClick: propTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import propTypes_1 from "prop-types";

package/transpiled/react/ColorList/index.js

@@ -0,0 +1,58 @@
+import { Icon, Check } from '@linagora/twake-icons';
+import propTypes from 'prop-types';
+import React from 'react';
+import { COLORS } from "cozy-ui/transpiled/react/ColorList/helpers";
+import Avatar from "cozy-ui/transpiled/react/Avatar";
+import ButtonBase from "cozy-ui/transpiled/react/ButtonBase";
+import ImageList from "cozy-ui/transpiled/react/ImageList";
+import ImageListItem from "cozy-ui/transpiled/react/ImageListItem";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
+var sizeToPx = {
+  small: 21,
+  medium: 41
+};
+
+var ColorList = function ColorList(_ref) {
+  var size = _ref.size,
+      selectedColor = _ref.selectedColor,
+      _onClick = _ref.onClick;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _size = size || (isMobile ? 'medium' : 'small');
+
+  return /*#__PURE__*/React.createElement(ImageList, {
+    cols: _size === 'medium' ? 5 : 7,
+    rowHeight: sizeToPx[_size],
+    gap: _size === 'medium' ? 16 : 5
+  }, COLORS.map(function (color) {
+    return /*#__PURE__*/React.createElement(ImageListItem, {
+      key: color,
+      className: "u-ta-center",
+      classes: {
+        item: 'u-ov-visible'
+      }
+    }, /*#__PURE__*/React.createElement(ButtonBase, {
+      className: "u-bdrs-circle",
+      component: "div",
+      onClick: function onClick() {
+        return _onClick === null || _onClick === void 0 ? void 0 : _onClick(color);
+      }
+    }, /*#__PURE__*/React.createElement(Avatar, {
+      color: color,
+      size: sizeToPx[_size]
+    }, (selectedColor === null || selectedColor === void 0 ? void 0 : selectedColor.toUpperCase()) === color ? /*#__PURE__*/React.createElement(Icon, {
+      icon: Check,
+      size: _size === 'medium' ? 19 : 10
+    }) : ' ')));
+  }));
+};
+
+ColorList.propTypes = {
+  size: propTypes.oneOf(['small', 'medium']),
+  selectedColor: propTypes.string,
+  onClick: propTypes.func
+};
+export { COLORS };
+export default ColorList;

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

@@ -0,0 +1,2 @@
+export default MuiImageList;
+import MuiImageList from "@material-ui/core/ImageList";

package/transpiled/react/ImageList/index.js

@@ -0,0 +1,2 @@
+import MuiImageList from '@material-ui/core/ImageList';
+export default MuiImageList;

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

@@ -0,0 +1,2 @@
+export default MuiImageListItem;
+import MuiImageListItem from "@material-ui/core/ImageListItem";

package/transpiled/react/ImageListItem/index.js

@@ -0,0 +1,2 @@
+import MuiImageListItem from '@material-ui/core/ImageListItem';
+export default MuiImageListItem;

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

@@ -0,0 +1,2 @@
+export default MuiImageListItemBar;
+import MuiImageListItemBar from "@material-ui/core/ImageListItemBar";

package/transpiled/react/ImageListItemBar/index.js

@@ -0,0 +1,2 @@
+import MuiImageListItemBar from '@material-ui/core/ImageListItemBar';
+export default MuiImageListItemBar;

package/transpiled/react/index.d.ts

@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
 export { default as Sidebar } from "./Sidebar";
 export { default as ListItemText } from "./ListItemText";
 export { default as Spinner } from "./Spinner";
+export { default as ColorList } from "./ColorList";
 export { default as Accordion } from "./Accordion";
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AccordionDetails } from "./AccordionDetails";

package/transpiled/react/index.js

@@ -5,6 +5,7 @@ export { default as Sidebar } from './Sidebar';
 export { default as Nav, NavItem, NavIcon, NavText, NavDesktopLimiter, NavLink, genNavLink } from './Nav';
 export { default as ListItemText } from './ListItemText';
 export { default as Spinner } from './Spinner';
+export { default as ColorList } from './ColorList';
 export { default as Accordion } from './Accordion';
 export { default as AccordionSummary } from './AccordionSummary';
 export { default as AccordionDetails } from './AccordionDetails';