cozy-ui 121.6.0 → 121.8.0

package/react/Icon/Readme.md

@@ -111,6 +111,7 @@ import Clock from 'cozy-ui/transpiled/react/Icons/Clock'
 import ClockOutline from 'cozy-ui/transpiled/react/Icons/ClockOutline'
 import Cloud from 'cozy-ui/transpiled/react/Icons/Cloud'
 import CloudHappy from 'cozy-ui/transpiled/react/Icons/CloudHappy'
+import CloudRainbow from 'cozy-ui/transpiled/react/Icons/CloudRainbow'
 import CloudPlusOutlined from 'cozy-ui/transpiled/react/Icons/CloudPlusOutlined'
 import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync'
 import Cocktail from 'cozy-ui/transpiled/react/Icons/Cocktail'
@@ -222,6 +223,7 @@ import Magnet from 'cozy-ui/transpiled/react/Icons/Magnet'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 import Merge from 'cozy-ui/transpiled/react/Icons/Merge'
 import Moped from 'cozy-ui/transpiled/react/Icons/Moped'
+import Mosaic from 'cozy-ui/transpiled/react/Icons/Mosaic'
 import MosaicMin from 'cozy-ui/transpiled/react/Icons/MosaicMin'
 import Motorcycle from 'cozy-ui/transpiled/react/Icons/Motorcycle'
 import Mountain from 'cozy-ui/transpiled/react/Icons/Mountain'
@@ -248,6 +250,7 @@ import Pen from 'cozy-ui/transpiled/react/Icons/Pen'
 import People from 'cozy-ui/transpiled/react/Icons/People'
 import Percent from 'cozy-ui/transpiled/react/Icons/Percent'
 import PercentCircle from 'cozy-ui/transpiled/react/Icons/PercentCircle'
+import PersonAdd from 'cozy-ui/transpiled/react/Icons/PersonAdd'
 import PersonalData from 'cozy-ui/transpiled/react/Icons/PersonalData'
 import Phone from 'cozy-ui/transpiled/react/Icons/Phone'
 import PhoneDownload from 'cozy-ui/transpiled/react/Icons/PhoneDownload'
@@ -382,6 +385,7 @@ const icons = [
   ClockOutline,
   Cloud,
   CloudHappy,
+  ...(isTwakeTheme() ? [CloudRainbow] : []),
   CloudPlusOutlined,
   CloudSync,
   Cocktail,
@@ -493,6 +497,7 @@ const icons = [
   Magnifier,
   Merge,
   Moped,
+  ...(isTwakeTheme() ? [Mosaic] : []),
   MosaicMin,
   Motorcycle,
   Mountain,
@@ -519,6 +524,7 @@ const icons = [
   People,
   Percent,
   PercentCircle,
+  ...(isTwakeTheme() ? [PersonAdd] : []),
   PersonalData,
   PhoneDownload,
   PhoneUpload,
@@ -942,7 +948,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','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-plus-outlined','cloud','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','debit','desktop-download','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','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','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','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','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','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','select-all','server','setting','share-circle','share','shield','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','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','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','debit','desktop-download','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','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','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','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','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','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','select-all','server','setting','share-circle','share','shield','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']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icons/CloudRainbow.jsx

@@ -0,0 +1,63 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cloud-rainbow.svg` to regenerate;
+import React from 'react'
+
+function SvgCloudRainbow(props) {
+  return (
+    <svg viewBox="0 0 16 11" {...props}>
+      <path
+        d="M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z"
+        fill="#fff"
+      />
+      <path
+        d="M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z"
+        fill="url(#cloud-rainbow_svg__paint0_linear_11512_6354)"
+      />
+      <path
+        d="M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z"
+        fill="url(#cloud-rainbow_svg__paint1_linear_11512_6354)"
+      />
+      <path
+        d="M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z"
+        fill="url(#cloud-rainbow_svg__paint2_linear_11512_6354)"
+      />
+      <defs>
+        <linearGradient
+          id="cloud-rainbow_svg__paint0_linear_11512_6354"
+          x1={16}
+          y1={6.222}
+          x2={0}
+          y2={6.222}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.13} stopColor="#A033FF" />
+          <stop offset={0.61} stopColor="#0094FF" />
+          <stop offset={1} stopColor="#4FB500" />
+        </linearGradient>
+        <linearGradient
+          id="cloud-rainbow_svg__paint1_linear_11512_6354"
+          x1={7.333}
+          y1={3.333}
+          x2={4.833}
+          y2={10.833}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFD600" stopOpacity={0} />
+          <stop offset={0.563} stopColor="#FFC700" />
+        </linearGradient>
+        <linearGradient
+          id="cloud-rainbow_svg__paint2_linear_11512_6354"
+          x1={8.667}
+          y1={6.222}
+          x2={12.079}
+          y2={11.642}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.03} stopColor="#FF3B30" stopOpacity={0} />
+          <stop offset={0.843} stopColor="#E73B2D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgCloudRainbow

package/react/Icons/Mosaic.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/mosaic.svg` to regenerate;
+import React from 'react'
+
+function SvgMosaic(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.289 1.92l.02-.02.737-.737.02-.02c.241-.24.454-.453.645-.615a2.11 2.11 0 01.718-.426c.418-.136.87-.136 1.288 0 .286.093.515.253.718.426.191.162.404.374.644.615l.02.02.738.737.02.02c.24.241.454.454.615.645.173.203.333.432.426.718.136.419.136.87 0 1.288a2.117 2.117 0 01-.426.718c-.162.191-.374.404-.615.644l-.02.02-.737.738-.02.02c-.241.24-.454.454-.645.615a2.118 2.118 0 01-.718.426c-.418.136-.87.136-1.288 0a2.117 2.117 0 01-.718-.426 10.947 10.947 0 01-.644-.615l-.02-.02-.738-.737-.02-.02c-.24-.241-.454-.454-.615-.645a2.118 2.118 0 01-.426-.718 2.084 2.084 0 010-1.288 2.11 2.11 0 01.426-.718c.161-.191.374-.404.615-.644zm.576 1.657c-.11.129-.126.177-.13.189a.521.521 0 000 .322c.004.012.02.06.13.19.116.136.283.303.55.57l.737.737c.267.267.434.434.57.55.13.11.178.126.19.13a.521.521 0 00.322 0c.011-.004.06-.02.19-.13.136-.116.303-.283.57-.55l.737-.737c.267-.267.434-.434.55-.57.11-.13.126-.178.13-.19a.521.521 0 000-.322c-.004-.012-.02-.06-.13-.19a11.036 11.036 0 00-.55-.57l-.737-.737a10.98 10.98 0 00-.57-.55c-.13-.11-.178-.126-.19-.13a.521.521 0 00-.322 0c-.012.004-.06.02-.19.13a10.98 10.98 0 00-.57.55l-.737.737c-.267.267-.434.434-.55.57zM3.91 7.314h.028c.34 0 .641 0 .89-.02a2.12 2.12 0 00.81-.207c.392-.2.71-.519.91-.91a2.12 2.12 0 00.207-.81c.02-.249.02-.55.02-.89V3.376c0-.34 0-.64-.02-.89a2.119 2.119 0 00-.206-.808 2.085 2.085 0 00-.911-.911 2.118 2.118 0 00-.81-.207c-.249-.02-.55-.02-.89-.02H2.837c-.34 0-.64 0-.89.02a2.12 2.12 0 00-.809.207c-.392.2-.71.519-.91.91a2.118 2.118 0 00-.208.81c-.02.249-.02.55-.02.89v1.101c0 .34 0 .64.02.89.022.265.07.54.207.808.2.392.519.711.911.911.268.137.543.185.809.207.25.02.55.02.89.02H3.91zm1.018-1.62c-.011.006-.057.028-.226.042a11.01 11.01 0 01-.792.015H2.866c-.377 0-.614 0-.792-.015-.169-.014-.215-.036-.226-.042a.521.521 0 01-.228-.228c-.005-.01-.028-.057-.041-.226a10.986 10.986 0 01-.016-.792V3.406c0-.378.001-.614.016-.792.013-.17.036-.216.041-.226a.521.521 0 01.228-.228c.01-.006.057-.028.226-.042.178-.014.415-.015.792-.015H3.91c.377 0 .614 0 .792.015.169.014.215.036.226.042.098.05.178.13.228.228.005.01.027.057.041.226.015.178.015.414.015.792v1.042c0 .378 0 .614-.015.792-.014.17-.036.216-.041.226a.521.521 0 01-.228.228zM3.909 16h.028c.34 0 .642 0 .89-.02a2.12 2.12 0 00.81-.207c.392-.2.71-.519.91-.911.137-.268.186-.543.207-.809.02-.25.02-.55.02-.89v-1.101c0-.34 0-.64-.02-.89a2.119 2.119 0 00-.206-.809 2.085 2.085 0 00-.911-.91 2.117 2.117 0 00-.81-.207c-.248-.02-.55-.02-.89-.02H2.838c-.34 0-.64 0-.89.02-.266.021-.54.07-.809.206-.392.2-.71.52-.91.911a2.118 2.118 0 00-.208.81c-.02.248-.02.55-.02.89v1.099c0 .34 0 .64.02.89.022.266.07.54.207.809.2.392.519.71.911.91.268.137.543.186.809.208.25.02.55.02.89.02H3.91zm1.018-1.62c-.011.005-.057.028-.226.041a10.95 10.95 0 01-.792.016H2.866c-.377 0-.614-.001-.792-.016-.169-.013-.215-.036-.226-.041a.521.521 0 01-.228-.228c-.005-.01-.028-.057-.041-.226a10.985 10.985 0 01-.016-.792V12.09c0-.377.001-.614.016-.792.013-.168.036-.215.041-.226a.521.521 0 01.228-.228c.01-.005.057-.027.226-.041.178-.015.415-.015.792-.015H3.91c.377 0 .614 0 .792.015.169.014.215.036.226.041.098.05.178.13.228.228.005.01.027.057.041.226.015.178.015.415.015.793v1.042c0 .377 0 .614-.015.792-.014.169-.036.215-.041.226a.521.521 0 01-.228.228zM12.594 16h.03c.34 0 .64 0 .89-.02.265-.022.54-.07.808-.207.392-.2.711-.519.911-.911a2.12 2.12 0 00.207-.809c.02-.25.02-.55.02-.89v-1.101c0-.34 0-.64-.02-.89a2.12 2.12 0 00-.207-.809 2.085 2.085 0 00-.91-.91 2.117 2.117 0 00-.81-.207c-.249-.02-.55-.02-.89-.02h-1.101c-.34 0-.64 0-.89.02-.265.021-.54.07-.808.206-.392.2-.711.52-.911.911a2.118 2.118 0 00-.207.81c-.02.248-.02.55-.02.89v1.099c0 .34 0 .64.02.89.022.266.07.54.207.809.2.392.519.71.91.91.269.137.544.186.81.208.249.02.55.02.89.02h1.071zm1.018-1.62c-.01.005-.057.028-.226.041a10.6 10.6 0 01-.792.016h-1.042a10.6 10.6 0 01-.792-.016c-.17-.013-.216-.036-.226-.041a.521.521 0 01-.228-.228c-.006-.01-.028-.057-.042-.226a11.009 11.009 0 01-.015-.792V12.09c0-.377 0-.614.015-.792.014-.168.036-.215.042-.226a.521.521 0 01.228-.228c.01-.005.057-.027.226-.041.178-.015.414-.015.792-.015h1.042c.378 0 .614 0 .792.015.17.014.216.036.226.041.098.05.178.13.228.228.006.01.028.057.042.226.014.178.015.415.015.793v1.042c0 .377 0 .614-.015.792-.014.169-.036.215-.042.226a.521.521 0 01-.228.228z"
+      />
+    </svg>
+  )
+}
+
+export default SvgMosaic

package/react/Icons/PersonAdd.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/person-add.svg` to regenerate;
+import React from 'react'
+
+function SvgPersonAdd(props) {
+  return (
+    <svg viewBox="0 0 16 13" {...props}>
+      <path d="M12.768 5.398h-.905a.753.753 0 01-.553-.222.745.745 0 01-.223-.55.76.76 0 01.223-.554.746.746 0 01.553-.226h.905v-.904c0-.22.073-.404.221-.553a.745.745 0 01.55-.223.76.76 0 01.555.223c.15.149.226.333.226.553v.904h.904c.22 0 .404.074.553.222a.745.745 0 01.223.55.76.76 0 01-.223.554.746.746 0 01-.553.226h-.904v.905a.75.75 0 01-.222.552.745.745 0 01-.55.224.759.759 0 01-.554-.224.746.746 0 01-.226-.552v-.905zm-6.706.825c-.868 0-1.604-.302-2.208-.906-.604-.604-.906-1.34-.906-2.208 0-.868.302-1.603.906-2.205C4.458.3 5.194 0 6.062 0 6.93 0 7.665.301 8.27.904c.604.602.906 1.337.906 2.205 0 .868-.302 1.604-.906 2.208-.604.604-1.34.906-2.208.906zM0 10.753v-.36c0-.383.094-.734.281-1.055.188-.32.446-.576.774-.766.76-.44 1.563-.778 2.409-1.013a9.646 9.646 0 012.598-.353c.893 0 1.762.117 2.607.35.846.234 1.646.57 2.4 1.01.328.191.586.446.773.765.188.32.282.673.282 1.061v.36c0 .471-.166.872-.497 1.203a1.64 1.64 0 01-1.203.497h-8.73c-.472 0-.871-.166-1.2-.497A1.643 1.643 0 010 10.753z" />
+    </svg>
+  )
+}
+
+export default SvgPersonAdd

package/react/InfosBadge/index.jsx

@@ -2,29 +2,32 @@ import cx from 'classnames'
 import React from 'react'
 
 import Badge from '../Badge'
-import { withStyles } from '../styles'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+import { makeStyles } from '../styles'
 
-const customStyles = () => ({
+const useStyles = makeStyles({
   qualifier: {
-    height: '1.125rem', // compensation of the specific border size
-    minWidth: '1.125rem',
+    height: isTwakeTheme() ? '24px' : '1.125rem', // compensation of the specific border size
+    minWidth: isTwakeTheme() ? '24px' : '1.125rem',
     backgroundColor: 'var(--paperBackgroundColor)',
     color: 'var(--iconTextColor)',
-    border: '1px solid var(--borderMainColor)'
+    border: isTwakeTheme() ? undefined : '1px solid var(--borderMainColor)',
+    boxShadow: isTwakeTheme() ? 'var(--shadow3)' : undefined
   }
 })
 
-const InfosBadge = withStyles(customStyles)(({ classes, ...props }) => {
-  const { qualifier, ...customClasses } = classes
+const InfosBadge = ({ classes, ...props }) => {
+  const _classes = useStyles()
+
   return (
     <Badge
       classes={{
-        badge: cx(qualifier, customClasses)
+        badge: cx(_classes.qualifier, classes)
       }}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       {...props}
     />
   )
-})
+}
 
 export default InfosBadge

package/react/MuiCozyTheme/makeTheme.jsx

@@ -71,6 +71,8 @@ export const makeTheme = (type, variant) => {
     typography:
       uiThemeName === 'Cozy' ? makeTypography(palette) : makeTwakeTypography(),
     shadows: makeShadows(type, variant),
+    type,
+    variant,
     palette
   })
 

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -885,6 +885,7 @@ export const makeLightNormalOverrides = theme => ({
     badge: {
       boxSizing: 'content-box',
       padding: 0,
+      borderRadius: '100%',
       '&.badgeBorder': {
         border: `2px solid ${theme.palette.background.paper}`
       },

package/react/SquareAppIcon/Readme.md

@@ -7,6 +7,7 @@ import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 
@@ -18,7 +19,7 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
-<>
+<BreakpointsProvider>
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
   <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
@@ -44,10 +45,10 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
       <SquareAppIcon name="Shortcut" variant="shortcut" hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
-      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
+      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size={isTwakeTheme() ? 32 : 48} />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
     </Grid>
     <Grid item>
-      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isError ? 'error' : 'loading'} />
+      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size={isTwakeTheme() ? 32 : 48} />} name="Loading" variant={isError ? 'error' : 'loading'} />
     </Grid>
     <Grid item>
       <SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
@@ -63,7 +64,7 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
             />} hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
-      <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
+      <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size={isTwakeTheme() ? 32 : 48} />} />
     </Grid>
     <Grid item>
       <SquareAppIcon name="Icon Grid" IconContent={(
@@ -84,7 +85,7 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
       )} />
     </Grid>
   </Grid>
-</>
+</BreakpointsProvider>
 ```
 
 ### Using the "detailed" display mode
@@ -98,6 +99,7 @@ import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 
@@ -109,7 +111,7 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
-<>
+<BreakpointsProvider>
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
     <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
@@ -179,5 +181,5 @@ const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
         IconContent={<Icon icon={CozyIcon} size="48" />} />
     </Grid>
   </Grid>
-</>
+</BreakpointsProvider>
 ```

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -37,7 +37,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
         />
       </span>
       <span
-        class="MuiBadge-badge-43 Component-qualifier-41 MuiBadge-anchorOriginBottomRightRectangular-51 MuiBadge-invisible-64"
+        class="MuiBadge-badge-43 makeStyles-qualifier-41 MuiBadge-anchorOriginBottomRightRectangular-51 MuiBadge-invisible-64"
       />
     </span>
   </div>
@@ -86,7 +86,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
         />
       </span>
       <span
-        class="MuiBadge-badge-11 Component-qualifier-9 MuiBadge-anchorOriginBottomRightRectangular-19 MuiBadge-invisible-32"
+        class="MuiBadge-badge-11 makeStyles-qualifier-9 MuiBadge-anchorOriginBottomRightRectangular-19 MuiBadge-invisible-32"
       />
     </span>
   </div>
@@ -135,7 +135,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
         />
       </span>
       <span
-        class="MuiBadge-badge-75 Component-qualifier-73 MuiBadge-anchorOriginBottomRightRectangular-83 MuiBadge-invisible-96"
+        class="MuiBadge-badge-75 makeStyles-qualifier-73 MuiBadge-anchorOriginBottomRightRectangular-83 MuiBadge-invisible-96"
       />
     </span>
   </div>
@@ -191,7 +191,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
         />
       </span>
       <span
-        class="MuiBadge-badge-203 Component-qualifier-201 MuiBadge-anchorOriginBottomRightRectangular-211 MuiBadge-invisible-224"
+        class="MuiBadge-badge-203 makeStyles-qualifier-201 MuiBadge-anchorOriginBottomRightRectangular-211 MuiBadge-invisible-224"
       />
     </span>
   </div>
@@ -250,7 +250,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
         </span>
       </span>
       <span
-        class="MuiBadge-badge-171 Component-qualifier-169 MuiBadge-anchorOriginBottomRightRectangular-179 MuiBadge-invisible-192"
+        class="MuiBadge-badge-171 makeStyles-qualifier-169 MuiBadge-anchorOriginBottomRightRectangular-179 MuiBadge-invisible-192"
       />
     </span>
   </div>
@@ -299,7 +299,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
         />
       </span>
       <span
-        class="MuiBadge-badge-139 Component-qualifier-137 MuiBadge-anchorOriginBottomRightRectangular-147 MuiBadge-invisible-160"
+        class="MuiBadge-badge-139 makeStyles-qualifier-137 MuiBadge-anchorOriginBottomRightRectangular-147 MuiBadge-invisible-160"
       />
     </span>
   </div>
@@ -348,7 +348,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
         />
       </span>
       <span
-        class="MuiBadge-badge-107 Component-qualifier-105 MuiBadge-anchorOriginBottomRightRectangular-115 MuiBadge-invisible-128"
+        class="MuiBadge-badge-107 makeStyles-qualifier-105 MuiBadge-anchorOriginBottomRightRectangular-115 MuiBadge-invisible-128"
       />
     </span>
   </div>
@@ -385,7 +385,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
         />
       </span>
       <span
-        class="MuiBadge-badge-235 Component-qualifier-233 MuiBadge-anchorOriginBottomRightRectangular-243"
+        class="MuiBadge-badge-235 makeStyles-qualifier-233 MuiBadge-anchorOriginBottomRightRectangular-243"
       >
         <svg
           class="styles__icon___23x3R"
@@ -447,7 +447,7 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
         />
       </span>
       <span
-        class="MuiBadge-badge-329 Component-qualifier-327 MuiBadge-anchorOriginBottomRightRectangular-337 MuiBadge-invisible-350"
+        class="MuiBadge-badge-329 makeStyles-qualifier-327 MuiBadge-anchorOriginBottomRightRectangular-337 MuiBadge-invisible-350"
       />
     </span>
   </div>

package/react/SquareAppIcon/index.jsx

@@ -5,7 +5,8 @@ import React, { useEffect, useState } from 'react'
 
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
-import styles from './styles.styl'
+import stylesCozy from './styles.styl'
+import stylesTwake from './styles_twake.styl'
 import AppIcon from '../AppIcon'
 import Badge from '../Badge'
 import Icon from '../Icon'
@@ -17,17 +18,31 @@ import iconWarning from '../Icons/WarningCircle'
 import InfosBadge from '../InfosBadge'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import { nameToColor } from '../legacy/Avatar/helpers'
+import { useBreakpoints } from '../providers/Breakpoints'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { alpha, makeStyles } from '../styles'
 
+const styles = isTwakeTheme() ? stylesTwake : stylesCozy
+
+const makeTwakeColor = theme =>
+  theme.variant === 'inverted' || theme.type === 'dark'
+    ? 'var(--white)'
+    : 'var(--black)'
+
 const useStyles = makeStyles(theme => ({
   name: {
-    color: 'var(--primaryTextColor)',
+    color: isTwakeTheme() ? makeTwakeColor(theme) : 'var(--primaryTextColor)',
+    textShadow: isTwakeTheme()
+      ? theme.variant === 'inverted' || theme.type === 'dark'
+        ? '0px 0px 10px rgba(0, 0, 0, 0.10), 0px 0px 2px rgba(0, 0, 0, 0.20), 0.5px 0.5px 1px rgba(0, 0, 0, 0.50)'
+        : undefined
+      : undefined,
     width: '5.5rem',
     textAlign: 'center',
-    fontSize: '0.875rem',
-    lineHeight: '1.188rem',
+    fontSize: isTwakeTheme() ? undefined : '0.875rem',
+    lineHeight: isTwakeTheme() ? undefined : '1.188rem',
     margin: '0.5rem 0.25rem 0 0.25rem',
     lineClamp: '2',
     boxOrient: 'vertical',
@@ -35,8 +50,8 @@ const useStyles = makeStyles(theme => ({
     height: '2.375rem',
     [theme.breakpoints.down('sm')]: {
       width: '3.75rem',
-      fontSize: '0.6875rem',
-      lineHeight: '1rem',
+      fontSize: isTwakeTheme() ? undefined : '0.6875rem',
+      lineHeight: isTwakeTheme() ? undefined : '1rem',
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }
@@ -59,7 +74,7 @@ const useStyles = makeStyles(theme => ({
     margin: 'auto'
   },
   shadow: {
-    boxShadow: theme.shadows[1]
+    boxShadow: isTwakeTheme() ? undefined : theme.shadows[1]
   },
   errorIcon: {
     fill: 'var(--errorColor)',
@@ -71,9 +86,9 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    width: '6rem',
+    minWidth: '6rem',
     [theme.breakpoints.down('sm')]: {
-      width: '4.25rem'
+      minWidth: '4.25rem'
     }
   },
   detailedTileWrapper: {
@@ -104,6 +119,7 @@ export const SquareAppIcon = ({
   ...appIconProps
 }) => {
   const { variant: themeVariant } = useCozyTheme()
+  const { isMobile } = useBreakpoints()
   const classes = useStyles()
   const appName =
     name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || ''
@@ -126,7 +142,9 @@ export const SquareAppIcon = ({
     prevVariant.current = variant
   }, [variant])
 
-  const squareTheme = ['add', 'ghost'].includes(variant)
+  const exceptionVariant = [isTwakeTheme() ? 'ghost' : 'add', 'ghost']
+
+  const squareTheme = exceptionVariant.includes(variant)
     ? themeVariant
     : 'normal'
 
@@ -157,16 +175,15 @@ export const SquareAppIcon = ({
               styles['SquareAppIcon-wrapper'],
               styles[`SquareAppIcon-wrapper-${variant}`],
               {
-                [classes.squareAppIconGhost]: ['ghost', 'add'].includes(
-                  variant
-                ),
-                [classes.shadow]: !['add', 'ghost'].includes(variant)
+                [classes.squareAppIconGhost]:
+                  exceptionVariant.includes(variant),
+                [classes.shadow]: !exceptionVariant.includes(variant)
               }
             )}
             badgeContent={
               variant === 'error' ? (
                 <Icon
-                  size="16"
+                  size={16}
                   className={cx(classes.errorIcon)}
                   icon={iconWarning}
                 />
@@ -180,7 +197,10 @@ export const SquareAppIcon = ({
             overlap="rectangular"
             style={
               variant === 'shortcut' && !IconContent
-                ? { backgroundColor: nameToColor(name) }
+                ? {
+                    [isTwakeTheme() ? 'background' : 'backgroundColor']:
+                      nameToColor(name)
+                  }
                 : null
             }
           >
@@ -209,7 +229,7 @@ export const SquareAppIcon = ({
                 >
                   {animationState && (
                     <Icon
-                      size="32"
+                      size={32}
                       icon={
                         animationState === 'success'
                           ? IconCheckAnimated
@@ -223,6 +243,10 @@ export const SquareAppIcon = ({
                   <Icon icon={iconPlus} color="var(--primaryColor)" />
                 ) : IconContent ? (
                   IconContent
+                ) : isTwakeTheme() ? (
+                  <div className="u-w-1-half-s u-h-1-half-s u-w-2 u-h-2">
+                    <AppIcon {...appIconProps} />
+                  </div>
                 ) : (
                   <AppIcon {...appIconProps} />
                 )}
@@ -240,7 +264,7 @@ export const SquareAppIcon = ({
             { [classes.nameInverted]: themeVariant === 'inverted' },
             'u-spacellipsis'
           )}
-          variant="h6"
+          variant={isTwakeTheme() ? (isMobile ? 'overline' : 'h6') : 'h6'}
           align="center"
         >
           {appName}

package/react/SquareAppIcon/styles.styl

@@ -5,7 +5,6 @@ $iconSize = constants['iconSize']
 $iconPadding = constants['iconPadding']
 $mobileIconSize = constants['mobileIconSize']
 $mobileIconPadding = constants['mobileIconPadding']
-$color = constants['color'] // hard-coded color, because the component is currently only used in the Home
 
 .SquareAppIcon-wrapper
     box-sizing border-box
@@ -26,30 +25,37 @@ $color = constants['color'] // hard-coded color, because the component is curren
     padding $iconPadding
     border-radius rem(12)
     width 100%
+
     +small-screen()
         padding $mobileIconPadding
+
     svg, img
         width 100%
 
 .SquareAppIcon-wrapper-ghost
     .SquareAppIcon-icon-container
         mix-blend-mode screen
+
         svg, img
             filter saturate(0%)
+
     .SquareAppIcon-icon-container-normal
         mix-blend-mode luminosity
+
         svg, img
             opacity .5
 
 .SquareAppIcon-wrapper-maintenance
     .SquareAppIcon-icon-container
         mix-blend-mode luminosity
+
         svg, img
             opacity .5
 
 .SquareAppIcon-wrapper-loading
     border-radius 50%
     transform scale(0.875)
+
     +small-screen()
         transform scale(0.8334)