cozy-ui 135.2.0 → 135.4.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [135.4.0](https://github.com/cozy/cozy-ui/compare/v135.3.0...v135.4.0) (2026-01-21)
+
+
+### Features
+
+* Add article icon :sparkles: ([9bd502a](https://github.com/cozy/cozy-ui/commit/9bd502a))
+
+# [135.3.0](https://github.com/cozy/cozy-ui/compare/v135.2.0...v135.3.0) (2026-01-16)
+
+
+### Bug Fixes
+
+* Remove fill attribute from cross-circle icon ([b949f88](https://github.com/cozy/cozy-ui/commit/b949f88))
+
+
+### Features
+
+* Allow to customize icon in ActionsBar ([20788b7](https://github.com/cozy/cozy-ui/commit/20788b7))
+* Allow to set color in ActionsBar and AppBar ([33721f0](https://github.com/cozy/cozy-ui/commit/33721f0))
+
 # [135.2.0](https://github.com/cozy/cozy-ui/compare/v135.1.0...v135.2.0) (2026-01-14)
 
 

package/assets/icons/ui/article.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.611 0c1.588 0 2.351.147 3.144.572.72.384 1.289.953 1.673 1.673.425.793.572 1.556.572 3.144v5.222c0 1.588-.147 2.351-.572 3.144a4.032 4.032 0 0 1-1.673 1.673c-.793.425-1.556.572-3.144.572H5.39c-1.588 0-2.351-.147-3.144-.572a4.032 4.032 0 0 1-1.673-1.673C.147 12.962 0 12.2 0 10.611V5.39C0 3.8.147 3.038.572 2.245A4.031 4.031 0 0 1 2.245.572C3.038.147 3.8 0 5.389 0h5.222Zm0 1.455H5.39c-1.368 0-1.905.103-2.458.4-.466.248-.828.61-1.077 1.076-.296.553-.4 1.09-.4 2.458v5.222c0 1.368.104 1.905.4 2.458.25.466.61.828 1.077 1.077.553.296 1.09.4 2.458.4h5.222c1.368 0 1.905-.104 2.458-.4.466-.25.828-.61 1.077-1.077.296-.553.4-1.09.4-2.458V5.39c0-1.368-.104-1.905-.4-2.458a2.577 2.577 0 0 0-1.077-1.077c-.553-.296-1.09-.4-2.458-.4Zm-3.338 9.09a.727.727 0 1 1 0 1.455h-2.91a.727.727 0 1 1 0-1.454h2.91Zm4.363-3.272a.727.727 0 0 1 0 1.454H4.364a.727.727 0 1 1 0-1.454h7.272Zm0-3.273a.727.727 0 0 1 0 1.455H4.364a.727.727 0 0 1 0-1.455h7.272Z" fill="#424244"/></svg>

package/assets/icons/ui/cross-circle.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.12 12 8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12ZM8 16a7.79 7.79 0 0 1-3.12-.63 8.079 8.079 0 0 1-2.54-1.71 8.08 8.08 0 0 1-1.71-2.54A7.79 7.79 0 0 1 0 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 0 1 4.88.63 7.79 7.79 0 0 1 8 0a7.79 7.79 0 0 1 3.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 0 1-.63 3.12 8.08 8.08 0 0 1-1.71 2.54 8.08 8.08 0 0 1-2.54 1.71A7.79 7.79 0 0 1 8 16Z" fill="#5F6368"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.12 12 8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12ZM8 16a7.79 7.79 0 0 1-3.12-.63 8.079 8.079 0 0 1-2.54-1.71 8.08 8.08 0 0 1-1.71-2.54A7.79 7.79 0 0 1 0 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 0 1 4.88.63 7.79 7.79 0 0 1 8 0a7.79 7.79 0 0 1 3.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 0 1-.63 3.12 8.08 8.08 0 0 1-1.71 2.54 8.08 8.08 0 0 1-2.54 1.71A7.79 7.79 0 0 1 8 16Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "135.2.0",
+  "version": "135.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -203,6 +203,5 @@
   },
   "browserslist": [
     "extends browserslist-config-cozy"
-  ],
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  ]
 }

package/react/ActionsBar/Readme.md

@@ -1,18 +1,22 @@
 Use same actions as `<ActionsMenu />`.
 
+### Demo
+
+This demo showcases all ActionsBar features:
+
+* **Selection management**: Add/remove selected documents
+* **Color customization**: The `color` prop allows customizing the background color (supports `default`, `inherit`, `primary`, `secondary`, `transparent`, `error`, `warning`, `info`, `success`)
+* **Icon customization**: The `IconComponent` prop allows replacing the entire icon component displayed next to the selection count on desktop. It receives no props and should render a complete React component (defaults to `<Icon icon={CheckCircleIcon} />`)
+
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
-import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
-import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { makeActions, modify, emailTo, download, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
-
-const selectedItem = {
-    _id: 1,
-    type: 'file'
-}
+import StarIcon from 'cozy-ui/transpiled/react/Icons/Star'
+import FlagIcon from 'cozy-ui/transpiled/react/Icons/FlagOutlined'
 
 const doc = {
   _id: 'id01',
@@ -21,7 +25,11 @@ const doc = {
   email: [{ address: 'johndoe@cozy.cc' }],
 }
 
-initialState = { selected: isTesting() ? [doc, doc] : [] }
+initialState = {
+  selected: isTesting() ? [doc, doc] : [],
+  color: 'default',
+  icon: 'default'
+}
 
 const addSelected = () => setState(previousState => {
     const arr = previousState.selected
@@ -37,16 +45,58 @@ const removeSelected = () => setState(previousState => {
 
 const actions = makeActions([ modify, call, download, smsTo, emailTo ])
 
+const colors = ['default', 'inherit', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
+
+const StarIconComponent = () => <Icon className="u-mr-1" icon={StarIcon} />
+const FlagIconComponent = () => <Icon className="u-mr-1" icon={FlagIcon} />
+
+const icons = {
+  default: undefined,
+  star: StarIconComponent,
+  flag: FlagIconComponent
+}
+
 ;
 
 <DemoProvider>
-  <Buttons label="Add a selected document" className="u-mb-1-s u-mr-1" onClick={addSelected} />
-  <Buttons label="Remove a selected document" onClick={removeSelected} />
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Selection</Typography>
+    <Buttons label="Add a selected document" className="u-mr-1" onClick={addSelected} />
+    <Buttons label="Remove a selected document" onClick={removeSelected} />
+  </div>
+
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Color</Typography>
+    {colors.map(color => (
+      <Buttons
+        key={color}
+        label={color}
+        className="u-mr-half u-mb-half"
+        variant={state.color === color ? 'primary' : 'secondary'}
+        onClick={() => setState({ color })}
+      />
+    ))}
+  </div>
+
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Icon (desktop only)</Typography>
+    {Object.keys(icons).map(iconName => (
+      <Buttons
+        key={iconName}
+        label={iconName}
+        className="u-mr-half"
+        variant={state.icon === iconName ? 'primary' : 'secondary'}
+        onClick={() => setState({ icon: iconName })}
+      />
+    ))}
+  </div>
 
   {state.selected.length > 0 && (
     <ActionsBar
       actions={actions}
       docs={state.selected}
+      color={state.color}
+      IconComponent={icons[state.icon]}
       onClose={() => setState({selected: []})}
     />
   )}

package/react/ActionsBar/ResponsiveAction.jsx

@@ -42,14 +42,12 @@ const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
     <Button
       ref={ref}
       classes={styles}
-      variant="secondary"
+      variant="text"
+      color="inherit"
       startIcon={<Icon icon={action.icon} />}
       label={
         isMobile ? (
-          <Typography
-            variant="caption"
-            color={disabled ? 'inherit' : 'textPrimary'}
-          >
+          <Typography variant="caption" color="inherit">
             {action.label}
           </Typography>
         ) : (

package/react/ActionsBar/index.jsx

@@ -19,7 +19,6 @@ import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
-import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
@@ -70,17 +69,20 @@ const useStyles = makeStyles({
   })
 })
 
-const SelectedCount = ({ docs, onClose }) => {
+const DefaultIcon = () => <Icon className="u-mr-1" icon={CheckCircleIcon} />
+
+const SelectedCount = ({ docs, onClose, IconComponent }) => {
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
+  const SelectedIcon = IconComponent || DefaultIcon
 
   if (isMobile)
     return (
       <Box
         className="u-flex u-flex-items-center u-h-100 u-pr-1"
         borderRadius="15px 0 0 0"
-        bgcolor="primary.main"
-        color="primary.contrastText"
+        bgcolor="background.paper"
+        color="text.primary"
       >
         <IconButton color="inherit" onClick={onClose}>
           <Icon icon={CrossCircleIcon} />
@@ -91,12 +93,8 @@ const SelectedCount = ({ docs, onClose }) => {
 
   return (
     <div className="u-flex u-flex-items-center u-h-100 u-ph-1">
-      <Icon
-        className="u-mr-1"
-        icon={CheckCircleIcon}
-        color="var(--iconTextColor)"
-      />
-      <Typography variant="body1" component="span">
+      <SelectedIcon />
+      <Typography variant="body1" component="span" color="inherit">
         {t('selected_light', docs.length)}
       </Typography>
     </div>
@@ -108,10 +106,11 @@ const ActionsBar = ({
   docs,
   autoClose,
   maxDesktopActions,
-  onClose
+  onClose,
+  color,
+  IconComponent
 }) => {
   const { isMobile } = useBreakpoints()
-  const { type } = useCozyTheme()
   const anchorRef = useRef()
   const [showMenu, setShowMenu] = useState(false)
   const styles = useStyles({ isMobile })
@@ -138,65 +137,75 @@ const ActionsBar = ({
   }
 
   return (
-    <CozyTheme type={type} variant="inverted">
-      <AppBar className={styles.appBar} position="fixed" color="inherit">
-        <Toolbar
-          className={styles.toolbar}
-          variant={isMobile ? 'regular' : 'dense'}
-          disableGutters
-        >
-          {showDesktopCloseButton && (
-            <IconButton className={styles.desktopCloseButton} onClick={onClose}>
-              <Icon icon={CrossIcon} />
-            </IconButton>
-          )}
-          <SelectedCount docs={docs} onClose={onClose} />
-          <div className={styles.actionsContainer}>
-            {/* actions displayed in the bar itself */}
-            <ActionsItems
-              docs={docs}
-              component={ResponsiveAction}
-              actions={barActions}
-              onClick={handleClick}
-            />
-
-            {/* actions displayed in ActionsMenu */}
-            {menuActions.length > 0 && (
-              <>
-                {isMobile ? (
-                  <ActionsItems
-                    docs={docs}
-                    component={ResponsiveAction}
-                    actions={otherAction}
-                    onClick={() => setShowMenu(true)}
-                  />
-                ) : (
-                  <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
-                    <Icon icon={DotsIcon} />
-                  </IconButton>
-                )}
-                <ActionsMenu
-                  ref={anchorRef}
-                  open={showMenu}
+    <AppBar className={styles.appBar} position="fixed" color={color}>
+      <Toolbar
+        className={styles.toolbar}
+        variant={isMobile ? 'regular' : 'dense'}
+        disableGutters
+      >
+        {showDesktopCloseButton && (
+          <IconButton
+            className={styles.desktopCloseButton}
+            onClick={onClose}
+            color="inherit"
+          >
+            <Icon icon={CrossIcon} />
+          </IconButton>
+        )}
+        <SelectedCount
+          docs={docs}
+          onClose={onClose}
+          IconComponent={IconComponent}
+        />
+        <div className={styles.actionsContainer}>
+          {/* actions displayed in the bar itself */}
+          <ActionsItems
+            docs={docs}
+            component={ResponsiveAction}
+            actions={barActions}
+            onClick={handleClick}
+          />
+
+          {/* actions displayed in ActionsMenu */}
+          {menuActions.length > 0 && (
+            <>
+              {isMobile ? (
+                <ActionsItems
                   docs={docs}
-                  actions={menuActions}
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left'
-                  }}
-                  componentsProps={{
-                    actionsItems: {
-                      onClick: handleClick
-                    }
-                  }}
-                  onClose={() => setShowMenu(false)}
+                  component={ResponsiveAction}
+                  actions={otherAction}
+                  onClick={() => setShowMenu(true)}
                 />
-              </>
-            )}
-          </div>
-        </Toolbar>
-      </AppBar>
-    </CozyTheme>
+              ) : (
+                <IconButton
+                  color="inherit"
+                  ref={anchorRef}
+                  onClick={() => setShowMenu(true)}
+                >
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              )}
+              <ActionsMenu
+                ref={anchorRef}
+                open={showMenu}
+                docs={docs}
+                actions={menuActions}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                componentsProps={{
+                  actionsItems: {
+                    onClick: handleClick
+                  }
+                }}
+                onClose={() => setShowMenu(false)}
+              />
+            </>
+          )}
+        </div>
+      </Toolbar>
+    </AppBar>
   )
 }
 
@@ -207,12 +216,30 @@ ActionsBar.propTypes = {
    * Only works on desktop since maximum number is forced in mobile
    */
   maxDesktopActions: PropTypes.number,
-  autoClose: PropTypes.bool
+  autoClose: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'transparent',
+    'error',
+    'warning',
+    'info',
+    'success'
+  ]),
+  /**
+   * Custom React component to replace the default Icon with CheckCircleIcon
+   * displayed next to the selection count on desktop.
+   * The component will be rendered as-is, giving full control over the icon styling.
+   */
+  IconComponent: PropTypes.elementType
 }
 
 ActionsBar.defaultProps = {
   maxDesktopActions: 5,
-  autoClose: true
+  autoClose: true,
+  color: 'default'
 }
 
 export default withActionsLocales(ActionsBar)

package/react/AppBar/index.js

@@ -1,3 +1,68 @@
 import MuiAppBar from '@material-ui/core/AppBar'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-export default MuiAppBar
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles(theme => ({
+  colorError: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText
+  },
+  colorWarning: {
+    backgroundColor: theme.palette.warning.main,
+    color: theme.palette.warning.contrastText
+  },
+  colorInfo: {
+    backgroundColor: theme.palette.info.main,
+    color: theme.palette.info.contrastText
+  },
+  colorSuccess: {
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText
+  }
+}))
+
+const CUSTOM_COLOR_CLASSES = {
+  error: 'colorError',
+  warning: 'colorWarning',
+  info: 'colorInfo',
+  success: 'colorSuccess'
+}
+
+const AppBar = React.forwardRef(({ color, className, ...props }, ref) => {
+  const styles = useStyles()
+  const appBarColor = CUSTOM_COLOR_CLASSES[color] ? 'default' : color
+  const customColorClass = CUSTOM_COLOR_CLASSES[color]
+    ? styles[CUSTOM_COLOR_CLASSES[color]]
+    : undefined
+
+  return (
+    <MuiAppBar
+      {...props}
+      ref={ref}
+      color={appBarColor}
+      className={`${className || ''} ${customColorClass || ''}`}
+    />
+  )
+})
+
+AppBar.propTypes = {
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'transparent',
+    'error',
+    'warning',
+    'info',
+    'success'
+  ])
+}
+
+AppBar.defaultProps = {
+  color: 'default'
+}
+
+export default AppBar

package/react/Icon/Readme.md

@@ -71,6 +71,7 @@ import Answer from 'cozy-ui/transpiled/react/Icons/Answer'
 import Apple from 'cozy-ui/transpiled/react/Icons/Apple'
 import Archive from 'cozy-ui/transpiled/react/Icons/Archive'
 import ArrowUp from 'cozy-ui/transpiled/react/Icons/ArrowUp'
+import Article from 'cozy-ui/transpiled/react/Icons/Article'
 import AssignAdmin from 'cozy-ui/transpiled/react/Icons/AssignAdmin'
 import AssignModerator from 'cozy-ui/transpiled/react/Icons/AssignModerator'
 import Assistant from 'cozy-ui/transpiled/react/Icons/Assistant'
@@ -361,6 +362,7 @@ const icons = [
   Apple,
   Archive,
   ArrowUp,
+  Article,
   AssignAdmin,
   AssignModerator,
   Assistant,
@@ -1010,7 +1012,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expert','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','shield','shield-infected','shield-clean','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp', 'article', 'assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expert','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','shield','shield-infected','shield-clean','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/Article.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/article.svg` to regenerate;
+import React from 'react'
+
+function SvgArticle(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M10.611 0c1.588 0 2.351.147 3.144.572.72.384 1.289.953 1.673 1.673.425.793.572 1.556.572 3.144v5.222c0 1.588-.147 2.351-.572 3.144a4.032 4.032 0 01-1.673 1.673c-.793.425-1.556.572-3.144.572H5.39c-1.588 0-2.351-.147-3.144-.572a4.032 4.032 0 01-1.673-1.673C.147 12.962 0 12.2 0 10.611V5.39C0 3.8.147 3.038.572 2.245A4.031 4.031 0 012.245.572C3.038.147 3.8 0 5.389 0h5.222zm0 1.455H5.39c-1.368 0-1.905.103-2.458.4a2.57 2.57 0 00-1.077 1.076c-.296.553-.4 1.09-.4 2.458v5.222c0 1.368.104 1.905.4 2.458.25.466.61.828 1.077 1.077.553.296 1.09.4 2.458.4h5.222c1.368 0 1.905-.104 2.458-.4.466-.25.828-.61 1.077-1.077.296-.553.4-1.09.4-2.458V5.39c0-1.368-.104-1.905-.4-2.458a2.577 2.577 0 00-1.077-1.077c-.553-.296-1.09-.4-2.458-.4zm-3.338 9.09a.727.727 0 110 1.455h-2.91a.727.727 0 110-1.454h2.91zm4.363-3.272a.727.727 0 010 1.454H4.364a.727.727 0 110-1.454h7.272zm0-3.273a.727.727 0 010 1.455H4.364a.727.727 0 010-1.455h7.272z" />
+    </svg>
+  )
+}
+
+export default SvgArticle

package/react/Icons/CrossCircle.jsx

@@ -4,10 +4,7 @@ import React from 'react'
 function SvgCrossCircle(props) {
   return (
     <svg viewBox="0 0 16 16" {...props}>
-      <path
-        d="M5.12 12L8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12zM8 16a7.79 7.79 0 01-3.12-.63 8.079 8.079 0 01-2.54-1.71 8.08 8.08 0 01-1.71-2.54A7.79 7.79 0 010 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 014.88.63 7.79 7.79 0 018 0a7.79 7.79 0 013.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 01-.63 3.12 8.08 8.08 0 01-1.71 2.54 8.08 8.08 0 01-2.54 1.71A7.79 7.79 0 018 16z"
-        fill="#5F6368"
-      />
+      <path d="M5.12 12L8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12zM8 16a7.79 7.79 0 01-3.12-.63 8.079 8.079 0 01-2.54-1.71 8.08 8.08 0 01-1.71-2.54A7.79 7.79 0 010 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 014.88.63 7.79 7.79 0 018 0a7.79 7.79 0 013.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 01-.63 3.12 8.08 8.08 0 01-1.71 2.54 8.08 8.08 0 01-2.54 1.71A7.79 7.79 0 018 16z" />
     </svg>
   )
 }

package/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.js

@@ -1,5 +1,20 @@
+import merge from 'lodash/merge'
+
 import { makeLightNormalOverrides } from './makeLightNormalOverrides'
 
 export const makeDarkNormalOverrides = theme => {
-  return makeLightNormalOverrides(theme)
+  const makeOverridesForDarkTheme = theme => ({
+    MuiAppBar: {
+      colorDefault: {
+        backgroundColor: theme.palette.primary.main
+      }
+    }
+  })
+
+  const DarkNormalOverrides = merge(
+    makeLightNormalOverrides(theme),
+    makeOverridesForDarkTheme(theme)
+  )
+
+  return DarkNormalOverrides
 }

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -9,6 +9,12 @@ import {
 } from '../helpers'
 
 export const makeLightNormalOverrides = theme => ({
+  MuiAppBar: {
+    colorDefault: {
+      backgroundColor: theme.palette.grey.A400,
+      color: theme.palette.primary.contrastText
+    }
+  },
   MuiSelect: {
     iconOutlined: {
       top: 'auto',

package/transpiled/react/ActionsBar/ResponsiveAction.js

@@ -46,13 +46,14 @@ var ResponsiveAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     classes: styles,
-    variant: "secondary",
+    variant: "text",
+    color: "inherit",
     startIcon: /*#__PURE__*/React.createElement(Icon, {
       icon: action.icon
     }),
     label: isMobile ? /*#__PURE__*/React.createElement(Typography, {
       variant: "caption",
-      color: disabled ? 'inherit' : 'textPrimary'
+      color: "inherit"
     }, action.label) : action.label,
     disabled: disabled,
     onClick: onClick