cozy-ui 117.3.0 → 119.0.0

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

@@ -1,4 +1,5 @@
 palette=json('../../../theme/palette.json', { hash: true })
+paletteTwake=json('../../theme/palette_twake.json', { hash: true })
 
 // @stylint off
 
@@ -92,4 +93,94 @@ palette=json('../../../theme/palette.json', { hash: true })
     --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
     --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
 
+.TwakeTheme--light-inverted
+    --primaryTextColor paletteTwake.Common['white']
+    --secondaryTextColor alpha(paletteTwake.Common['white'], 0.64)
+    --disabledTextColor alpha(paletteTwake.Common['white'], 0.4)
+    --hintTextColor alpha(paletteTwake.Common['white'], 0.4)
+    --iconTextColor paletteTwake.Common['white']
+
+    --actionColorActive paletteTwake.Common['white']
+    --actionColorHover alpha(paletteTwake.Common['white'], 0.08)
+    --actionColorSelected alpha(paletteTwake.Common['white'], 0.16)
+    --actionColorDisabled alpha(paletteTwake.Common['white'], 0.32)
+    --actionColorDisabledBackground alpha(paletteTwake.Common['white'], 0.12)
+    --actionColorFocus alpha(paletteTwake.Common['white'], 0.24)
+    --actionColorGhost alpha(paletteTwake.Common['white'], 0.08)
+    --actionColorHoverGhost alpha(paletteTwake.Common['white'], 0.16)
+
+    --dividerColor alpha(paletteTwake.Common['white'], 0.16)
+
+    --borderMainColor alpha(paletteTwake.Common['white'], 0.24)
+    --borderDisabledColor alpha(paletteTwake.Common['white'], 0.12)
+    --borderGhostColor alpha(paletteTwake.Common['white'], 0.48)
+    --borderGhostDisabledColor alpha(paletteTwake.Common['white'], 0.24)
+
+    --paperBackgroundColor paletteTwake.Grey['A400']
+    --defaultBackgroundColor paletteTwake.Grey['A400']
+    --contrastBackgroundColor alpha(paletteTwake.Common['white'], 0.12)
+
+    --primaryColorLight paletteTwake.Common['white']
+    --primaryColor paletteTwake.Common['white']
+    --primaryColorDark paletteTwake.Primary['100']
+    --primaryContrastTextColor paletteTwake.Grey['A400']
+    --primaryBackground alpha(paletteTwake.Common['white'], 0.24) // only for deprecated Info & Alerter
+
+    --secondaryColorLight paletteTwake.Secondary['200']
+    --secondaryColor paletteTwake.Secondary['600']
+    --secondaryColorDark paletteTwake.Secondary['700']
+    --secondaryContrastTextColor paletteTwake.Common['white']
+    --secondaryBackground alpha(paletteTwake.Secondary['600'], 0.12) // only for deprecated Info & Alerter
+
+    --errorColorLight paletteTwake.Error['100']
+    --errorColor paletteTwake.Error['200']
+    --errorColorDark paletteTwake.Error['300']
+    --errorColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+    --errorBackground paletteTwake.Error['700']
+    --errorBackground alpha(paletteTwake.Error['200'], 0.24) // only for deprecated Info & Alerter
+
+    --warningColorLight paletteTwake.Warning['100']
+    --warningColor paletteTwake.Warning['200']
+    --warningColorDark paletteTwake.Warning['300']
+    --warningColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+
+    --successColorLight paletteTwake.Success['100']
+    --successColor paletteTwake.Success['200']
+    --successColorDark paletteTwake.Success['300']
+    --successColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+    --successBackground alpha(paletteTwake.Success['200'], 0.24) // only for deprecated Info & Alerter
+
+    --infoColorLight paletteTwake.Info['100']
+    --infoColor paletteTwake.Info['200']
+    --infoColorDark paletteTwake.Info['300']
+    --infoColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+
+    $shadowColor = paletteTwake.Common['black']
+    --shadow0 none
+    --shadow1 0px 2px 4px 0px alpha($shadowColor, 0.08), 0px 4px 16px 0px alpha($shadowColor, 0.06), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow2 0px 3px 5px 0px alpha($shadowColor, 0.09), 0px 4px 17px 0px alpha($shadowColor, 0.07), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow3 0px 3px 5px -1px alpha($shadowColor, 0.09), 0px 5px 19px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow4 0px 3px 6px -1px alpha($shadowColor, 0.1), 0px 5px 20px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow5 0px 4px 6px -1px alpha($shadowColor, 0.11), 0px 5px 22px 1px alpha($shadowColor, 0.09), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow6 0px 4px 7px -2px alpha($shadowColor, 0.11), 0px 6px 23px 2px alpha($shadowColor, 0.10), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow7 0px 5px 7px -2px alpha($shadowColor, 0.12), 0px 6px 24px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow8 0px 5px 8px -2px alpha($shadowColor, 0.13), 0px 6px 26px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow9 0px 5px 8px -3px alpha($shadowColor, 0.14), 0px 7px 27px 3px alpha($shadowColor, 0.12), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow10 0px 6px 9px -3px alpha($shadowColor, 0.14), 0px 7px 29px 3px alpha($shadowColor, 0.13), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow11 0px 6px 9px -3px alpha($shadowColor, 0.15), 0px 7px 30px 3px alpha($shadowColor, 0.14), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow12 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 31px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow13 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 33px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow14 0px 8px 11px -5px alpha($shadowColor, 0.17), 0px 9px 34px 5px alpha($shadowColor, 0.16), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow15 0px 8px 11px -5px alpha($shadowColor, 0.18), 0px 9px 35px 5px alpha($shadowColor, 0.17), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow16 0px 9px 12px -5px alpha($shadowColor, 0.18), 0px 9px 37px 5px alpha($shadowColor, 0.18), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow17 0px 9px 12px -6px alpha($shadowColor, 0.19), 0px 10px 38px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow18 0px 9px 13px -6px alpha($shadowColor, 0.2), 0px 10px 40px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow19 0px 10px 13px -6px alpha($shadowColor, 0.21), 0px 10px 41px 6px alpha($shadowColor, 0.2), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow20 0px 10px 14px -7px alpha($shadowColor, 0.21), 0px 11px 42px 7px alpha($shadowColor, 0.21), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow21 0px 11px 14px -7px alpha($shadowColor, 0.22), 0px 11px 44px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow22 0px 11px 15px -7px alpha($shadowColor, 0.23), 0px 11px 45px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow23 0px 12px 15px -8px alpha($shadowColor, 0.23), 0px 12px 47px 8px alpha($shadowColor, 0.23), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
+
 // @stylint on

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

@@ -1,5 +1,6 @@
 @require '../../tools/mixins'
 palette=json('../../theme/palette.json', { hash: true })
+paletteTwake=json('../../theme/palette_twake.json', { hash: true })
 
 // @stylint off
 /*
@@ -241,4 +242,99 @@ html,
     --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
     --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']
+    --primaryColorDark paletteTwake.Primary['700']
+    --primaryContrastTextColor paletteTwake.Common['white']
+    --primaryBackground alpha(paletteTwake.Primary['600'], 0.12) // only for deprecated Info & Alerter
+
+    --secondaryColorLightest paletteTwake.Secondary['100']
+    --secondaryColorLight paletteTwake.Secondary['200']
+    --secondaryColor paletteTwake.Secondary['600']
+    --secondaryColorDark paletteTwake.Secondary['700']
+    --secondaryContrastTextColor paletteTwake.Common['white']
+    --secondaryBackground alpha(paletteTwake.Secondary['600'], 0.12) // only for deprecated Info & Alerter
+
+    --primaryBackgroundLight paletteTwake.Primary['50']
+    --paperBackgroundColor paletteTwake.Common['white']
+    --defaultBackgroundColor paletteTwake.Grey['100']
+    --contrastBackgroundColor alpha(paletteTwake.Grey['900'], 0.048)
+
+    --primaryTextColor alpha(paletteTwake.Grey['900'], 0.9)
+    --secondaryTextColor alpha(paletteTwake.Grey['900'], 0.64)
+    --disabledTextColor alpha(paletteTwake.Grey['900'], 0.32)
+    --hintTextColor alpha(paletteTwake.Grey['900'], 0.32)
+    --iconTextColor alpha(paletteTwake.Grey['900'], 0.72)
+
+    --actionColorActive alpha(paletteTwake.Grey['900'], 0.56)
+    --actionColorHover alpha(paletteTwake.Grey['900'], 0.04)
+    --actionColorSelected alpha(paletteTwake.Grey['900'], 0.08)
+    --actionColorDisabled alpha(paletteTwake.Grey['900'], 0.24)
+    --actionColorDisabledBackground alpha(paletteTwake.Grey['900'], 0.12)
+    --actionColorFocus alpha(paletteTwake.Grey['900'], 0.12)
+    --actionColorGhost alpha(paletteTwake.Grey['900'], 0.08)
+    --actionColorHoverGhost alpha(paletteTwake.Grey['900'], 0.16)
+
+    --borderMainColor alpha(paletteTwake.Grey['900'], 0.16)
+    --borderDisabledColor alpha(paletteTwake.Grey['900'], 0.08)
+    --borderGhostColor alpha(paletteTwake.Grey['900'], 0.48)
+    --borderGhostDisabledColor alpha(paletteTwake.Grey['900'], 0.16)
+
+    --dividerColor alpha(paletteTwake.Grey['900'], 0.12)
+
+    --successColorLight paletteTwake.Success['200']
+    --successColor paletteTwake.Success['600']
+    --successColorDark paletteTwake.Success['700']
+    --successColorContrastText paletteTwake.Common['white']
+    --successBackground alpha(paletteTwake.Success['600'], 0.12) // only for deprecated Info & Alerter
+
+    --warningColorLight paletteTwake.Warning['200']
+    --warningColor paletteTwake.Warning['600']
+    --warningColorDark paletteTwake.Warning['700']
+    --warningColorContrastText paletteTwake.Common['white']
+
+    --errorColorLightest paletteTwake.Error['100']
+    --errorColorLight paletteTwake.Error['200']
+    --errorColor paletteTwake.Error['600']
+    --errorColorDark paletteTwake.Error['700']
+    --errorBackground alpha(paletteTwake.Error['600'], 0.12)
+    --errorColorContrastText paletteTwake.Common['white']
+
+    --infoColorLight paletteTwake.Info['200']
+    --infoColor paletteTwake.Info['600']
+    --infoColorDark paletteTwake.Info['700']
+    --infoColorContrastText paletteTwake.Common['white']
+
+    $shadowColor = paletteTwake.Grey['900']
+    --shadow0 none
+    --shadow1 0px 2px 4px 0px alpha($shadowColor, 0.08), 0px 4px 16px 0px alpha($shadowColor, 0.06), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow2 0px 3px 5px 0px alpha($shadowColor, 0.09), 0px 4px 17px 0px alpha($shadowColor, 0.07), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow3 0px 3px 5px -1px alpha($shadowColor, 0.09), 0px 5px 19px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow4 0px 3px 6px -1px alpha($shadowColor, 0.1), 0px 5px 20px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow5 0px 4px 6px -1px alpha($shadowColor, 0.11), 0px 5px 22px 1px alpha($shadowColor, 0.09), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow6 0px 4px 7px -2px alpha($shadowColor, 0.11), 0px 6px 23px 2px alpha($shadowColor, 0.10), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow7 0px 5px 7px -2px alpha($shadowColor, 0.12), 0px 6px 24px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow8 0px 5px 8px -2px alpha($shadowColor, 0.13), 0px 6px 26px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow9 0px 5px 8px -3px alpha($shadowColor, 0.14), 0px 7px 27px 3px alpha($shadowColor, 0.12), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow10 0px 6px 9px -3px alpha($shadowColor, 0.14), 0px 7px 29px 3px alpha($shadowColor, 0.13), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow11 0px 6px 9px -3px alpha($shadowColor, 0.15), 0px 7px 30px 3px alpha($shadowColor, 0.14), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow12 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 31px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow13 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 33px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow14 0px 8px 11px -5px alpha($shadowColor, 0.17), 0px 9px 34px 5px alpha($shadowColor, 0.16), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow15 0px 8px 11px -5px alpha($shadowColor, 0.18), 0px 9px 35px 5px alpha($shadowColor, 0.17), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow16 0px 9px 12px -5px alpha($shadowColor, 0.18), 0px 9px 37px 5px alpha($shadowColor, 0.18), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow17 0px 9px 12px -6px alpha($shadowColor, 0.19), 0px 10px 38px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow18 0px 9px 13px -6px alpha($shadowColor, 0.2), 0px 10px 40px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow19 0px 10px 13px -6px alpha($shadowColor, 0.21), 0px 10px 41px 6px alpha($shadowColor, 0.2), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow20 0px 10px 14px -7px alpha($shadowColor, 0.21), 0px 11px 42px 7px alpha($shadowColor, 0.21), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow21 0px 11px 14px -7px alpha($shadowColor, 0.22), 0px 11px 44px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow22 0px 11px 15px -7px alpha($shadowColor, 0.23), 0px 11px 45px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow23 0px 12px 15px -8px alpha($shadowColor, 0.23), 0px 12px 47px 8px alpha($shadowColor, 0.23), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
+
 // @stylint on

package/theme/palette_twake.json

@@ -0,0 +1,106 @@
+{
+  "Primary": {
+   "50": "#f6fbff",
+   "100": "#e3f1ff",
+   "200": "#d2e9ff",
+   "300": "#bfdfff",
+   "400": "#7bbdff",
+   "500": "#46a2ff",
+   "600": "#0a84ff",
+   "700": "#006bd8",
+   "800": "#0157ad",
+   "900": "#082139",
+   "ContrastText": "#fff"
+  },
+
+  "Secondary": {
+   "50": "#f1f5fa",
+   "100": "#e8f0fa",
+   "200": "#d1e0f2",
+   "300": "#b5d1f1",
+   "400": "#96bce8",
+   "500": "#85b5ec",
+   "600": "#5c9ce6",
+   "700": "#5085c3",
+   "800": "#243b55",
+   "900": "#081f39",
+   "ContrastText": "#fff"
+  },
+
+  "Error": {
+   "50": "#fffbf9",
+   "100": "#fceeee",
+   "200": "#ffd2d7",
+   "300": "#ff939d",
+   "400": "#ff7a87",
+   "500": "#ff4d5e",
+   "600": "#ff3347",
+   "700": "#d32c3c",
+   "800": "#b52c39",
+   "900": "#7a1e27",
+   "ContrastText": "#fff"
+  },
+
+  "Warning": {
+   "50": "#fff8e1",
+   "100": "#ffecb3",
+   "200": "#ffe082",
+   "300": "#ffd54f",
+   "400": "#ffca28",
+   "500": "#ffb300",
+   "600": "#ff8f00",
+   "700": "#ff6f00",
+   "800": "#b5672c",
+   "900": "#281c07",
+   "ContrastText": "#fff"
+  },
+
+  "Success": {
+   "50": "#f3fff5",
+   "100": "#e3ffe7",
+   "200": "#b9f6ca",
+   "300": "#97eca1",
+   "400": "#66e475",
+   "500": "#38c949",
+   "600": "#00c853",
+   "700": "#00ad48",
+   "800": "#245538",
+   "900": "#08250b",
+   "ContrastText": "#fff"
+  },
+
+  "Info": {
+    "50": "#edffff",
+    "100": "#d4feff",
+    "200": "#affdff",
+    "300": "#86f5f7",
+    "400": "#4ee2e5",
+    "500": "#1de9b6",
+    "600": "#00bfa5",
+    "700": "#00796b",
+    "800": "#004345",
+    "900": "#002526"
+   },
+
+  "Grey": {
+   "50": "#FBFDFF",
+   "100": "#F3F6F9",
+   "200": "#EDF2F7",
+   "300": "#E1E3E6",
+   "400": "#C5C7CA",
+   "500": "#AAACAE",
+   "600": "#909294",
+   "700": "#757779",
+   "800": "#4E5052",
+   "900": "#424244",
+   "A100": "#FCFCFC",
+   "A200": "#E5ECF3",
+   "A400": "#2C3039",
+   "A700": "#5D6169"
+  },
+
+  "Common": {
+    "white": "#fff",
+    "black": "#000"
+   }
+}

package/transpiled/react/ActionsBar/index.js

@@ -11,21 +11,28 @@ import AppBar from "cozy-ui/transpiled/react/AppBar";
 import Box from "cozy-ui/transpiled/react/Box";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
+import CheckCircleIcon from "cozy-ui/transpiled/react/Icons/CheckCircle";
 import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
 import CrossCircleIcon from "cozy-ui/transpiled/react/Icons/CrossCircle";
 import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import Toolbar from "cozy-ui/transpiled/react/Toolbar";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
   appBar: function appBar(_ref) {
     var isMobile = _ref.isMobile;
     return {
+      width: isTwakeTheme() && !isMobile ? 'calc(100% - 44px)' : '100%',
+      right: isTwakeTheme() && !isMobile ? '22px' : '0',
       height: isMobile ? '4rem' : '3rem',
       top: isMobile ? 'auto' : 0,
       bottom: isMobile ? 0 : undefined,
       zIndex: 'var(--zIndex-selection)',
+      borderRadius: isTwakeTheme() ? isMobile ? '16px 16px 0 0' : '0 0 16px 16px' : 'initial',
       boxShadow: isMobile ? 'var(--shadow8)' : 'var(--shadow1)'
     };
   },
@@ -59,21 +66,23 @@ var useStyles = makeStyles({
     position: 'absolute',
     right: 0
   },
-  actionsContainer: {
-    display: 'flex',
-    height: '100%',
-    flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
+  actionsContainer: function actionsContainer(_ref3) {
+    var isMobile = _ref3.isMobile;
+    return {
+      display: 'flex',
+      height: '100%',
+      flexGrow: 1,
+      paddingRight: isTwakeTheme() && !isMobile ? 48 : 0,
+      alignItems: 'center',
+      justifyContent: isTwakeTheme() && !isMobile ? 'end' : 'center'
+    };
   }
 });
 
-var ActionsBar = function ActionsBar(_ref3) {
-  var actions = _ref3.actions,
-      docs = _ref3.docs,
-      autoClose = _ref3.autoClose,
-      maxDesktopActions = _ref3.maxDesktopActions,
-      onClose = _ref3.onClose;
+var SelectedCount = function SelectedCount(_ref4) {
+  var styles = _ref4.styles,
+      docs = _ref4.docs,
+      onClose = _ref4.onClose;
 
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
@@ -81,6 +90,55 @@ var ActionsBar = function ActionsBar(_ref3) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var showMobileCloseButton = !!onClose && isMobile;
+
+  if (isTwakeTheme()) {
+    if (isMobile) return /*#__PURE__*/React.createElement(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"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      color: "inherit",
+      onClick: onClose
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: CrossCircleIcon
+    })), docs.length);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "u-flex u-flex-items-center u-h-100 u-ph-1"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "u-mr-1",
+      icon: CheckCircleIcon,
+      color: "var(--iconTextColor)"
+    }), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1",
+      component: "span"
+    }, t('selected_light', docs.length)));
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    className: styles.selectedCount,
+    padding: showMobileCloseButton ? '0 1rem 0 0' : '0 1rem',
+    color: "primary.contrastText",
+    bgcolor: "primary.main"
+  }, showMobileCloseButton && /*#__PURE__*/React.createElement(IconButton, {
+    color: "inherit",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: CrossCircleIcon
+  })), /*#__PURE__*/React.createElement("div", null, isMobile ? docs.length : t('selected', docs.length)));
+};
+
+var ActionsBar = function ActionsBar(_ref5) {
+  var actions = _ref5.actions,
+      docs = _ref5.docs,
+      autoClose = _ref5.autoClose,
+      maxDesktopActions = _ref5.maxDesktopActions,
+      onClose = _ref5.onClose;
+
+  var _useBreakpoints2 = useBreakpoints(),
+      isMobile = _useBreakpoints2.isMobile;
+
   var anchorRef = useRef();
 
   var _useState = useState(false),
@@ -91,7 +149,6 @@ var ActionsBar = function ActionsBar(_ref3) {
   var styles = useStyles({
     isMobile: isMobile
   });
-  var showMobileCloseButton = !!onClose && isMobile;
   var showDesktopCloseButton = !!onClose && !isMobile;
   var maxActionsDisplayed = isMobile ? 4 : maxDesktopActions;
   var cleanedActions = useMemo(function () {
@@ -107,7 +164,9 @@ var ActionsBar = function ActionsBar(_ref3) {
     autoClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
   };
 
-  return /*#__PURE__*/React.createElement(AppBar, {
+  return /*#__PURE__*/React.createElement(CozyTheme, {
+    variant: isTwakeTheme() ? 'inverted' : 'normal'
+  }, /*#__PURE__*/React.createElement(AppBar, {
     className: styles.appBar,
     position: "fixed",
     color: "inherit"
@@ -120,17 +179,11 @@ var ActionsBar = function ActionsBar(_ref3) {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: CrossIcon
-  })), /*#__PURE__*/React.createElement(Box, {
-    className: styles.selectedCount,
-    padding: showMobileCloseButton ? '0 1rem 0 0' : '0 1rem',
-    color: "primary.contrastText",
-    bgcolor: "primary.main"
-  }, showMobileCloseButton && /*#__PURE__*/React.createElement(IconButton, {
-    color: "inherit",
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: CrossCircleIcon
-  })), /*#__PURE__*/React.createElement("div", null, isMobile ? docs.length : t('selected', docs.length))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(SelectedCount, {
+    styles: styles,
+    docs: docs,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles.actionsContainer
   }, /*#__PURE__*/React.createElement(ActionsItems, {
     docs: docs,
@@ -168,7 +221,7 @@ var ActionsBar = function ActionsBar(_ref3) {
     onClose: function onClose() {
       return setShowMenu(false);
     }
-  })))));
+  }))))));
 };
 
 ActionsBar.propTypes = {

package/transpiled/react/ActionsBar/locales/withActionsLocales.js

@@ -1,8 +1,10 @@
 var en = {
-  selected: "%{smart_count} item selected |||| %{smart_count} items selected"
+  selected: "%{smart_count} item selected |||| %{smart_count} items selected",
+  selected_light: "%{smart_count} item |||| %{smart_count} items"
 };
 var fr = {
-  selected: "%{smart_count} \xE9l\xE9ment s\xE9lectionn\xE9 |||| %{smart_count} \xE9l\xE9ments s\xE9lectionn\xE9s"
+  selected: "%{smart_count} \xE9l\xE9ment s\xE9lectionn\xE9 |||| %{smart_count} \xE9l\xE9ments s\xE9lectionn\xE9s",
+  selected_light: "%{smart_count} \xE9l\xE9ment |||| %{smart_count} \xE9l\xE9ments"
 };
 import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
 export var locales = {

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

@@ -1 +1,34 @@
-export function nameToColor(name?: string): string;
+export namespace sizeToFontSize {
+    const xs: number;
+    const s: number;
+    const m: number;
+    const l: number;
+    const xl: number;
+}
+export namespace sizeToNb {
+    const xs_1: number;
+    export { xs_1 as xs };
+    const s_1: number;
+    export { s_1 as s };
+    const m_1: number;
+    export { m_1 as m };
+    const l_1: number;
+    export { l_1 as l };
+    const xl_1: number;
+    export { xl_1 as xl };
+}
+export const supportedColors: string[];
+export namespace colorMapping {
+    const sunrise: string;
+    const downy: string;
+    const sugarCoral: string;
+    const pinkBonnet: string;
+    const blueMana: string;
+    const nightBlue: string;
+    const snowPea: string;
+    const pluviophile: string;
+    const cornflower: string;
+    const paleGreen: string;
+    const moonBlue: string;
+    const undefined: string;
+}

package/transpiled/react/Avatar/helpers.js

@@ -1,11 +1,30 @@
-import palette from "cozy-ui/transpiled/react/palette";
-export var nameToColor = function nameToColor() {
-  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var colors = [palette['azure'], palette['melon'], palette['blazeOrange'], palette['pomegranate'], palette['mango'], palette['pumpkinOrange'], palette['darkPeriwinkle'], palette['purpley'], palette['lightishPurple'], palette['weirdGreen'], palette['puertoRico'], palette['emerald'], palette['seafoamGreen'], palette['lavender'], palette['brightSun'], palette['fuchsia']];
-  var key = Array.from(name.toUpperCase()).map(function (letter) {
-    return letter.charCodeAt(0);
-  }).reduce(function (sum, number) {
-    return sum + number;
-  }, 0) % colors.length;
-  return colors[key];
+export var sizeToFontSize = {
+  xs: 8,
+  s: 11,
+  m: 16,
+  l: 24,
+  xl: 32
+};
+export var sizeToNb = {
+  xs: 16,
+  s: 24,
+  m: 32,
+  l: 48,
+  xl: 64
+};
+export var supportedColors = ['sunrise', 'downy', 'sugarCoral', 'pinkBonnet', 'blueMana', 'nightBlue', 'snowPea', 'pluviophile', 'cornflower', 'paleGreen', 'moonBlue']; // light color could be generated with "h-16 s-18 b+3" from hsb dark color
+
+export var colorMapping = {
+  sunrise: 'linear-gradient(136deg, #F8D280 14.84%, #F2AC69 96.03%)',
+  downy: 'linear-gradient(136deg, #81EAD4 14.84%, #62C6B7 96.03%)',
+  sugarCoral: 'linear-gradient(136deg, #F19E86 14.84%, #F95967 96.03%)',
+  pinkBonnet: 'linear-gradient(136deg, #E4ABF0 14.84%, #D96EED 96.03%)',
+  blueMana: 'linear-gradient(136deg, #85D9FD 14.84%, #2A9EFC 96.03%)',
+  nightBlue: 'linear-gradient(136deg, #80AEFF 39.32%, #883DFE 96.03%)',
+  snowPea: 'linear-gradient(136deg, #BDF4A1 14.84%, #52CE64 96.03%)',
+  pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
+  cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
+  paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
+  undefined: ''
 };