cozy-ui 121.7.0 → 121.8.0

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

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

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

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

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts

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

package/transpiled/react/SquareAppIcon/index.js

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-var styles = {
+var stylesCozy = {
   "SquareAppIcon-wrapper": "styles__SquareAppIcon-wrapper___2SEuM",
   "SquareAppIcon-icon-container": "styles__SquareAppIcon-icon-container___39MRl",
   "SquareAppIcon-wrapper-ghost": "styles__SquareAppIcon-wrapper-ghost___1ZALZ",
@@ -20,6 +20,19 @@ var styles = {
   "isSuccess": "styles__isSuccess___I6nFq",
   "end-animation": "styles__end-animation___1O0b3"
 };
+var stylesTwake = {
+  "SquareAppIcon-wrapper": "styles_twake__SquareAppIcon-wrapper___4P3Cx",
+  "SquareAppIcon-icon-container": "styles_twake__SquareAppIcon-icon-container___grFij",
+  "SquareAppIcon-wrapper-ghost": "styles_twake__SquareAppIcon-wrapper-ghost___3xelE",
+  "SquareAppIcon-icon-container-normal": "styles_twake__SquareAppIcon-icon-container-normal___1O1bk",
+  "SquareAppIcon-wrapper-maintenance": "styles_twake__SquareAppIcon-wrapper-maintenance___hoMUk",
+  "SquareAppIcon-wrapper-loading": "styles_twake__SquareAppIcon-wrapper-loading___AoTRM",
+  "SquareAppIcon-spinner": "styles_twake__SquareAppIcon-spinner___UOK0n",
+  "onEnd": "styles_twake__onEnd___GkZzo",
+  "isFailed": "styles_twake__isFailed___CO_WC",
+  "isSuccess": "styles_twake__isSuccess___sH4pb",
+  "end-animation": "styles_twake__end-animation___26Lyd"
+};
 import AppIcon from "cozy-ui/transpiled/react/AppIcon";
 import Badge from "cozy-ui/transpiled/react/Badge";
 import Icon from "cozy-ui/transpiled/react/Icon";
@@ -31,17 +44,26 @@ import iconWarning from "cozy-ui/transpiled/react/Icons/WarningCircle";
 import InfosBadge from "cozy-ui/transpiled/react/InfosBadge";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
 import Typography from "cozy-ui/transpiled/react/Typography";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
 import { nameToColor } from "cozy-ui/transpiled/react/legacy/Avatar/helpers";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
 import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
+var styles = isTwakeTheme() ? stylesTwake : stylesCozy;
+
+var makeTwakeColor = function makeTwakeColor(theme) {
+  return theme.variant === 'inverted' || theme.type === 'dark' ? 'var(--white)' : 'var(--black)';
+};
+
 var useStyles = makeStyles(function (theme) {
   return {
     name: _defineProperty({
-      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',
@@ -49,8 +71,8 @@ var useStyles = makeStyles(function (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'
     }),
@@ -66,7 +88,7 @@ var useStyles = makeStyles(function (theme) {
       margin: 'auto'
     },
     shadow: {
-      boxShadow: theme.shadows[1]
+      boxShadow: isTwakeTheme() ? undefined : theme.shadows[1]
     },
     errorIcon: {
       fill: 'var(--errorColor)',
@@ -79,9 +101,9 @@ var useStyles = makeStyles(function (theme) {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      width: '6rem'
+      minWidth: '6rem'
     }, theme.breakpoints.down('sm'), {
-      width: '4.25rem'
+      minWidth: '4.25rem'
     }),
     detailedTileWrapper: {
       flexDirection: 'row',
@@ -122,6 +144,9 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
   var _useCozyTheme = useCozyTheme(),
       themeVariant = _useCozyTheme.variant;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var classes = useStyles();
   var appName = name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || '';
   var letter = appName[0] || '';
@@ -142,7 +167,8 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
     prevVariant.current = variant;
   }, [variant]);
-  var squareTheme = ['add', 'ghost'].includes(variant) ? themeVariant : 'normal';
+  var exceptionVariant = [isTwakeTheme() ? 'ghost' : 'add', 'ghost'];
+  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "square-app-icon",
     className: cx(classes.tileWrapper, _defineProperty({}, classes.detailedTileWrapper, display === 'detailed'))
@@ -160,9 +186,9 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     variant: variant,
     animationState: animationState
   }), /*#__PURE__*/React.createElement(Badge, {
-    className: cx(styles['SquareAppIcon-wrapper'], styles["SquareAppIcon-wrapper-".concat(variant)], (_cx3 = {}, _defineProperty(_cx3, classes.squareAppIconGhost, ['ghost', 'add'].includes(variant)), _defineProperty(_cx3, classes.shadow, !['add', 'ghost'].includes(variant)), _cx3)),
+    className: cx(styles['SquareAppIcon-wrapper'], styles["SquareAppIcon-wrapper-".concat(variant)], (_cx3 = {}, _defineProperty(_cx3, classes.squareAppIconGhost, exceptionVariant.includes(variant)), _defineProperty(_cx3, classes.shadow, !exceptionVariant.includes(variant)), _cx3)),
     badgeContent: variant === 'error' ? /*#__PURE__*/React.createElement(Icon, {
-      size: "16",
+      size: 16,
       className: cx(classes.errorIcon),
       icon: iconWarning
     }) : '',
@@ -170,9 +196,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     withBorder: false,
     size: "large",
     overlap: "rectangular",
-    style: variant === 'shortcut' && !IconContent ? {
-      backgroundColor: nameToColor(name)
-    } : null
+    style: variant === 'shortcut' && !IconContent ? _defineProperty({}, isTwakeTheme() ? 'background' : 'backgroundColor', nameToColor(name)) : null
   }, variant === 'shortcut' && !IconContent ? /*#__PURE__*/React.createElement(Typography, {
     className: classes.letter,
     variant: "h2",
@@ -183,17 +207,19 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     className: cx(styles['onEnd'], _defineProperty({}, styles['isSuccess'], animationState === 'success'), _defineProperty({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
   }, animationState && /*#__PURE__*/React.createElement(Icon, {
-    size: "32",
+    size: 32,
     icon: animationState === 'success' ? IconCheckAnimated : SvgIconCrossAnimated
   })), variant === 'add' ? /*#__PURE__*/React.createElement(Icon, {
     icon: iconPlus,
     color: "var(--primaryColor)"
-  }) : IconContent ? IconContent : /*#__PURE__*/React.createElement(AppIcon, appIconProps))))), display === 'detailed' ? /*#__PURE__*/React.createElement(ListItemText, {
+  }) : IconContent ? IconContent : isTwakeTheme() ? /*#__PURE__*/React.createElement("div", {
+    className: "u-w-1-half-s u-h-1-half-s u-w-2 u-h-2"
+  }, /*#__PURE__*/React.createElement(AppIcon, appIconProps)) : /*#__PURE__*/React.createElement(AppIcon, appIconProps))))), display === 'detailed' ? /*#__PURE__*/React.createElement(ListItemText, {
     primary: appName,
     secondary: description
   }) : /*#__PURE__*/React.createElement(Typography, {
     className: cx(classes.name, _defineProperty({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
-    variant: "h6",
+    variant: isTwakeTheme() ? isMobile ? 'overline' : 'h6' : 'h6',
     align: "center"
   }, appName));
 };

package/transpiled/react/providers/CozyTheme/DumbCozyTheme.js

@@ -28,6 +28,7 @@ var DumbCozyTheme = function DumbCozyTheme(_ref) {
     value: {
       type: selfThemeType,
       variant: selfThemeVariant,
+      name: uiThemeName,
       isLight: selfThemeType === 'light'
     }
   }, /*#__PURE__*/React.createElement(MuiCozyTheme, {

package/transpiled/react/providers/CozyTheme/index.d.ts

@@ -3,6 +3,7 @@ export function useCozyTheme(): {
     type: 'light' | 'dark';
     variant: 'normal' | 'inverted';
     isLight: boolean;
+    name: 'Twake' | 'Cozy';
 };
 export default CozyTheme;
 import React from "react";

package/transpiled/react/providers/CozyTheme/index.js

@@ -8,7 +8,7 @@ import DumbCozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme/DumbCozy
 import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
  */
 
 export var useCozyTheme = function useCozyTheme() {
@@ -19,7 +19,8 @@ export var useCozyTheme = function useCozyTheme() {
     return {
       type: 'light',
       variant: 'normal',
-      isLight: true
+      isLight: true,
+      name: 'Cozy'
     };
   }