cozy-ui 121.7.0 → 121.9.0

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)
 

package/react/SquareAppIcon/styles_twake.styl

@@ -0,0 +1,136 @@
+@require 'settings/breakpoints.styl'
+constants=json('constants.json', { hash: true })
+
+$iconSize = constants['iconSize']
+$iconPadding = constants['iconPadding']
+$mobileIconSize = constants['mobileIconSize']
+$mobileIconPadding = constants['mobileIconPadding']
+
+.SquareAppIcon-wrapper
+    box-sizing border-box
+    background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 251, 254, 0.80) // we don't want to be theme responsive
+    border-radius 100%
+    height $iconSize
+    width $iconSize
+    transition transform 300ms, border-radius 300ms
+
+    +small-screen()
+        height $mobileIconSize
+        width $mobileIconSize
+
+.SquareAppIcon-icon-container
+    display flex
+    align-items center
+    justify-content center
+    padding $iconPadding
+    border-radius 100%
+    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)
+
+.SquareAppIcon-spinner
+    margin 0 !important
+
+    svg
+        position absolute
+        height 100%
+        width 100%
+
+animation-duration = 1.50s
+icon-duration = 0.2s
+icon-start = 0.2s
+border-radius-start = 50%
+border-radius-end = 100%
+opacity-start = 0
+opacity-end = 1
+
+.onEnd
+    align-items center
+    border-radius border-radius-start
+    display flex
+    height 100%
+    opacity opacity-start
+    position absolute
+    width 100%
+    z-index 1
+
+    svg
+        fill transparent !important
+
+        path
+            animation-duration icon-duration !important
+
+        path:first-of-type
+            animation-delay icon-start !important
+
+        // The second path is a part of the cross,
+        // since it has its own hardcoded animation delay we need to add it again (.16s)
+        path+path
+            animation-delay icon-start + .16s !important
+
+        *
+            stroke var(--white) !important
+
+.onEnd.isFailed
+    --animationColor var(--errorColor)
+
+.onEnd.isSuccess
+    --animationColor var(--successColor)
+
+.isSuccess
+.isFailed
+    animation end-animation animation-duration forwards
+
+@keyframes end-animation {
+  0% {
+    background-color transparent
+    border-radius border-radius-start
+    opacity opacity-start
+  }
+  13.33% {
+    background-color var(--animationColor)
+    border-radius border-radius-end
+    opacity opacity-end
+  }
+  66.67% {
+    background-color var(--animationColor)
+    border-radius border-radius-end
+    opacity opacity-end
+  }
+  100% {
+    border-radius border-radius-end
+    opacity opacity-start
+    background-color transparent
+  }
+}

package/react/Typography/Readme.md

@@ -14,6 +14,7 @@ const variants = [
   'h3',
   'h4',
   'h5',
+  'h6',
   'button',
   'overline',
   'subtitle1',

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -36,6 +36,7 @@ const DumbCozyTheme = ({
       value={{
         type: selfThemeType,
         variant: selfThemeVariant,
+        name: uiThemeName,
         isLight: selfThemeType === 'light'
       }}
     >

package/react/providers/CozyTheme/index.jsx

@@ -10,7 +10,7 @@ import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 export const CozyThemeContext = createContext()
 
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
  */
 export const useCozyTheme = () => {
   const context = useContext(CozyThemeContext)
@@ -21,7 +21,12 @@ export const useCozyTheme = () => {
       '`CozyThemeContext` is missing. `useCozyTheme()` must be used within a `<CozyTheme>`. `light normal` is returned as fallback value.'
     )
 
-    return { type: 'light', variant: 'normal', isLight: true }
+    return {
+      type: 'light',
+      variant: 'normal',
+      isLight: true,
+      name: 'Cozy'
+    }
   }
 
   return context

package/stylus/settings/shadows.styl

@@ -1,3 +1,6 @@
+$elevation-0
+    box-shadow none !important // @stylint ignore
+
 box-shadow-12=0 4px 12px 0 rgba(0, 0, 0, .08)
 
 $elevation-1

package/stylus/settings/themes/light-normal.styl

@@ -243,8 +243,6 @@ html,
     --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
 
 .TwakeTheme--light-normal
-    --primaryFont Inter
-
     --primaryColorLightest paletteTwake.Primary['100']
     --primaryColorLight paletteTwake.Primary['200']
     --primaryColor paletteTwake.Primary['600']

package/stylus/utilities/bgcolor.styl

@@ -8,3 +8,6 @@ for color in utility_colors
         background-color: json_colors[color] !important // @stylint ignore
 
     global('.u-bg-' + color, '$bg-color-' + color)
+
+.u-bg-transparent
+    background-color transparent !important // @stylint ignore

package/stylus/utilities/elevation.styl

@@ -1,4 +1,7 @@
 @require '../settings/shadows'
 
+.u-elevation-0
+    @extend $elevation-0
+
 .u-elevation-1
     @extend $elevation-1

package/theme/palette_twake.json

@@ -28,7 +28,7 @@
   },
 
   "Error": {
-   "50": "#fffbf9",
+   "50": "#fffbfe",
    "100": "#fceeee",
    "200": "#ffd2d7",
    "300": "#ff939d",

package/transpiled/react/InfosBadge/index.js

@@ -1,40 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classes"],
-    _excluded2 = ["qualifier"];
+var _excluded = ["classes"];
 import cx from 'classnames';
 import React from 'react';
 import Badge from "cozy-ui/transpiled/react/Badge";
-import { withStyles } from "cozy-ui/transpiled/react/styles";
-
-var customStyles = function customStyles() {
-  return {
-    qualifier: {
-      height: '1.125rem',
-      // compensation of the specific border size
-      minWidth: '1.125rem',
-      backgroundColor: 'var(--paperBackgroundColor)',
-      color: 'var(--iconTextColor)',
-      border: '1px solid var(--borderMainColor)'
-    }
-  };
-};
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  qualifier: {
+    height: isTwakeTheme() ? '24px' : '1.125rem',
+    // compensation of the specific border size
+    minWidth: isTwakeTheme() ? '24px' : '1.125rem',
+    backgroundColor: 'var(--paperBackgroundColor)',
+    color: 'var(--iconTextColor)',
+    border: isTwakeTheme() ? undefined : '1px solid var(--borderMainColor)',
+    boxShadow: isTwakeTheme() ? 'var(--shadow3)' : undefined
+  }
+});
 
-var InfosBadge = withStyles(customStyles)(function (_ref) {
+var InfosBadge = function InfosBadge(_ref) {
   var classes = _ref.classes,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var qualifier = classes.qualifier,
-      customClasses = _objectWithoutProperties(classes, _excluded2);
+  var _classes = useStyles();
 
   return /*#__PURE__*/React.createElement(Badge, _extends({
     classes: {
-      badge: cx(qualifier, customClasses)
+      badge: cx(_classes.qualifier, classes)
     },
     anchorOrigin: {
       vertical: 'bottom',
       horizontal: 'right'
     }
   }, props));
-});
+};
+
 export default InfosBadge;

package/transpiled/react/MuiCozyTheme/makeTheme.js

@@ -80,6 +80,8 @@ export var makeTheme = function makeTheme(type, variant) {
   var theme = createTheme(_objectSpread(_objectSpread({}, themesCommonConfig), {}, {
     typography: uiThemeName === 'Cozy' ? makeTypography(palette) : makeTwakeTypography(),
     shadows: makeShadows(type, variant),
+    type: type,
+    variant: variant,
     palette: palette
   }));
   var overrides = uiThemeName === 'Cozy' ? makeOverridesByTheme(theme)[type][variant] : makeTwakeOverridesByTheme(theme)[type][variant];

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkInvertedOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkNormalOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeLightInvertedOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };