cozy-sharing 13.3.1 → 14.0.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@13.3.1...cozy-sharing@14.0.0) (2024-05-28)
+
+
+### Features
+
+* Replace deprecated buttons by actual ones ([6be1c73](https://github.com/cozy/cozy-libs/commit/6be1c734cc4fcb13ffc2dd1137edec064c0c842e))
+* Replace direct import of palette by colors or variables colors ([4dc9eb7](https://github.com/cozy/cozy-libs/commit/4dc9eb7d56b875acb156eeef037b252237c2cfa5))
+* **sharing:** Replace var colors by semantic var colors ([79c2e70](https://github.com/cozy/cozy-libs/commit/79c2e70430f64973e38d40ea215a23be2ca3a2a0))
+* **sharing:** Upgrade cozy-ui 105.3.1 to 106.8.0 ([b731089](https://github.com/cozy/cozy-libs/commit/b731089dc71325bb80d9cb2687583516596f2b8a))
+
+
+### BREAKING CHANGES
+
+* **sharing:** you must have `cozy-ui >= 106.8.0`
+
+
+
+
+
 ## [13.3.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@13.3.0...cozy-sharing@13.3.1) (2024-05-27)
 
 

package/dist/components/Recipient/RecipientConfirm.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from 'cozy-ui/transpiled/react/deprecated/Button';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 var modalStyles = {
   "share-modal-content": "share__share-modal-content___1iqEq",
@@ -45,7 +45,7 @@ var RecipientConfirm = function RecipientConfirm(_ref) {
       position: 'initial'
     } // fix z-index bug on iOS when under a BottomDrawer due to relative position
     ,
-    theme: "text",
+    variant: "text",
     className: modalStyles['aligned-dropdown-button'],
     onClick: verify,
     label: t("Share.twoStepsConfirmation.verify")

package/dist/components/ShareAutosuggest.js

@@ -6,7 +6,6 @@ import Autosuggest from 'react-autosuggest';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Chip from 'cozy-ui/transpiled/react/Chips';
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner';
-import palette from 'cozy-ui/transpiled/react/palette';
 import { GroupAvatar } from './Avatar/GroupAvatar';
 import ContactSuggestion from './ContactSuggestion';
 import { extractEmails, validateEmail } from '../helpers/email';
@@ -176,7 +175,7 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
       onKeyPress: onKeyPress,
       onKeyUp: onKeyUp
     })), loading && isLoadingDisplayed ? /*#__PURE__*/React.createElement(Spinner, {
-      color: palette.dodgerBlue
+      color: "var(--primaryColor)"
     }) : null);
   };
 

package/dist/components/ShareButton.js

@@ -5,9 +5,9 @@ var _excluded = ["label", "onClick", "className"],
     _excluded3 = ["label", "onClick", "className"];
 import classNames from 'classnames';
 import React from 'react';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
-import { Button } from 'cozy-ui/transpiled/react/deprecated/Button';
 var styles = {
   "coz-btn-shared": "button__coz-btn-shared___9MFbY",
   "coz-btn-sharedWithMe": "button__coz-btn-sharedWithMe___25PBh"
@@ -20,12 +20,12 @@ export var ShareButton = function ShareButton(_ref) {
 
   return /*#__PURE__*/React.createElement(Button, _extends({
     "data-test-id": "share-button",
-    theme: "secondary",
+    variant: "secondary",
     className: className,
     onClick: function onClick() {
       return _onClick();
     },
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
       icon: ShareIcon
     }),
     label: label
@@ -60,7 +60,7 @@ export var SharedWithMeButton = function SharedWithMeButton(_ref3) {
     onClick: function onClick() {
       return _onClick3();
     },
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
       icon: ShareIcon
     }),
     label: label

package/dist/components/ShareDialogTwoStepsConfirmationContainer.js

@@ -2,9 +2,9 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useState } from 'react';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
-import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { useSafeState } from '../helpers/hooks';
 /**
@@ -43,11 +43,11 @@ var ConfirmRecipientActions = function ConfirmRecipientActions(_ref) {
       t = _useI18n2.t;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    theme: "danger-outline",
+    variant: "secondary",
+    color: "error",
     label: t("Share.twoStepsConfirmation.reject"),
     onClick: reject
   }), /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
     label: t("Share.twoStepsConfirmation.confirm"),
     onClick: confirm
   }));
@@ -83,11 +83,10 @@ var RejectRecipientActions = function RejectRecipientActions(_ref3) {
       t = _useI18n4.t;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    theme: "secondary",
+    variant: "secondary",
     label: t("Share.twoStepsConfirmation.cancel"),
     onClick: cancel
   }), /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
     label: t("Share.twoStepsConfirmation.reject"),
     onClick: reject
   }));

package/dist/components/SharedBadge.js

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import React from 'react';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
-import palette from 'cozy-ui/transpiled/react/palette';
 var styles = {
   "shared-badge": "badge__shared-badge___2jGsy",
   "--small": "badge__--small___2VMyY",
@@ -22,7 +21,7 @@ var SharedBadge = function SharedBadge(_ref) {
     className: classNames(styles['shared-badge'], className, _defineProperty({}, styles['--small'], small), _defineProperty({}, styles['--xsmall'], xsmall), styles[byMe ? '--by-me' : '--with-me'])
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ShareIcon,
-    color: palette.white,
+    color: "var(--primaryContrastTextColor)",
     className: styles['shared-badge-icon']
   }));
 };

package/dist/components/SharedStatus.js

@@ -1,6 +1,5 @@
 import cx from 'classnames';
 import React from 'react';
-import palette from 'cozy-ui/transpiled/react/palette';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { SharingTooltip, TooltipRecipientList } from './Tooltip';
 
@@ -51,7 +50,7 @@ export var SharedStatus = function SharedStatus(_ref) {
     })
   })), link && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkIcon, {
     style: {
-      fill: palette.coolGrey
+      fill: 'var(--iconTextColor)'
     },
     "data-tip": true,
     "data-for": "linkfor".concat(docId)

package/dist/components/Sharesubmit.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button } from 'cozy-ui/transpiled/react/deprecated/Button';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 
 var ShareSubmit = function ShareSubmit(props) {
   return /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       props.onSubmit();
     },
+    size: "large",
     busy: props.loading,
     label: props.label,
     disabled: props.disabled

package/dist/components/Sharetypeselect.js

@@ -11,7 +11,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
 import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom';
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check';
 import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox';
-import palette from 'cozy-ui/transpiled/react/palette';
 import logger from '../logger';
 var styles = {
   "share-modal-content": "share__share-modal-content___1iqEq",
@@ -40,7 +39,7 @@ var styles = {
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Icon, {
     icon: BottomIcon,
-    color: palette.coolGrey
+    color: "var(--iconTextColor)"
   }));
 };
 
@@ -49,7 +48,7 @@ var Option = function Option(props) {
     className: cx(styles['select-option'])
   }, props.isSelected && /*#__PURE__*/React.createElement(Icon, {
     icon: CheckIcon,
-    color: palette.dodgerBlue
+    color: "var(--primaryColor)"
   }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: styles['select-option-label']
   }, props.label), /*#__PURE__*/React.createElement("div", {
@@ -60,16 +59,17 @@ var Option = function Option(props) {
 var customStyles = {
   option: function option(base, state) {
     return _objectSpread(_objectSpread({}, base), {}, {
-      color: 'black',
-      backgroundColor: state.isFocused ? palette.paleGrey : null,
+      color: 'var(--primaryTextColor)',
+      backgroundColor: state.isFocused ? 'var(--actionColorHover)' : null,
       padding: 0,
       borderBottom: state.options.findIndex(function (o) {
         return o.value === state.value;
-      }) === 0 ? "1px solid ".concat(palette.silver) : null
+      }) === 0 ? '1px solid var(--borderMainColor)' : null
     });
   },
   menu: function menu(base) {
     return _objectSpread(_objectSpread({}, base), {}, {
+      backgroundColor: 'var(--paperBackgroundColor)',
       width: '204%'
     });
   }

package/dist/components/SharingBanner/components/PublicBanner.js

@@ -3,7 +3,7 @@ import React from 'react';
 import snarkdown from 'snarkdown';
 import { useClient } from 'cozy-client';
 import Banner from 'cozy-ui/transpiled/react/Banner';
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import CozyHomeLinkIcon from './CozyHomeLinkIcon';
 var styles = {
@@ -84,13 +84,13 @@ var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
       sharing: sharing
     }),
     buttonOne: /*#__PURE__*/React.createElement(Button, {
-      theme: "text",
+      variant: "text",
       label: buttonOne.label,
       icon: buttonOne.icon,
       onClick: buttonOne.action
     }),
     buttonTwo: /*#__PURE__*/React.createElement(Button, {
-      theme: "text",
+      variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
     }),
@@ -125,14 +125,15 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
   return /*#__PURE__*/React.createElement(Banner, {
     bgcolor: "var(--defaultBackgroundColor)",
     text: /*#__PURE__*/React.createElement(SharingBannerByLinkText, null),
-    buttonOne: /*#__PURE__*/React.createElement(ButtonLink, {
-      theme: "text",
+    buttonOne: /*#__PURE__*/React.createElement(Button, {
+      component: "a",
+      variant: "text",
       label: t('Share.create-cozy'),
       icon: CozyHomeLinkIcon,
       href: HOME_LINK_HREF
     }),
     buttonTwo: /*#__PURE__*/React.createElement(Button, {
-      theme: "text",
+      variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
     }),

package/dist/styles/actionmenu.styl

@@ -1,4 +1,4 @@
 .fil-mobileactionmenu
-    color      var(--charcoalGrey)
+    color      var(--secondaryTextColor)
     hr
         margin-top 0

package/dist/styles/autosuggest.styl

@@ -11,7 +11,7 @@
     overflow hidden
     box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)
     border-radius .5rem
-    background var(--white)
+    background var(--paperBackgroundColor)
     display none
 
 .suggestionsContainerOpen
@@ -42,7 +42,7 @@
     overflow auto
 
     &:hover
-        border 1px solid var(--coolGrey)
+        border 1px solid var(--borderMainColor)
 
     &:focus-within
         border 1px solid var(--primaryColor)

package/dist/styles/badge.styl

@@ -1,5 +1,3 @@
-palette=json('settings/palette.json', { hash: true })
-
 .shared-badge
     display flex
     align-items center
@@ -8,8 +6,8 @@ palette=json('settings/palette.json', { hash: true })
     background-clip padding-box
 
     &.--small
-        border .125rem solid 
-        border-color: palette['white']
+        border .125rem solid
+        border-color: var(--primaryContrastTextColor)
         width 1.5rem
         height 1.5rem
 
@@ -18,8 +16,8 @@ palette=json('settings/palette.json', { hash: true })
             height .75rem
 
     &.--xsmall
-        border .0625rem solid 
-        border-color: palette['white']
+        border .0625rem solid
+        border-color: var(--primaryContrastTextColor)
         width .75rem
         height .75rem
 
@@ -28,7 +26,7 @@ palette=json('settings/palette.json', { hash: true })
             height .375rem
 
     &.--by-me
-        background-color: palette['emerald']
+        background-color: var(--emerald)
 
     &.--with-me
-        background-color: palette['portage']
+        background-color: #9169F2

package/dist/styles/button.styl

@@ -1,22 +1,21 @@
-palette=json('settings/palette.json', { hash: true })
 .coz-btn-shared
-    border-color: palette['emerald']
-    background-color: palette['emerald']
-    color: palette['white']
+    border-color: var(--emerald)
+    background-color: var(--emerald)
+    color: var(--primaryContrastTextColor)
     transition all .2s ease-out
 
     &:focus
     &:not([disabled]):not([aria-disabled=true]):hover
-        border-color: palette['malachite']
-        background-color: palette['malachite']
+        border-color: var(--malachite)
+        background-color: var(--malachite)
 
 .coz-btn-sharedWithMe
-    border-color: palette['lightishPurple']
-    background-color: palette['lightishPurple']
-    color: palette['white']
+    border-color: #B449E7
+    background-color: #B449E7
+    color: var(--primaryContrastTextColor)
     transition all .2s ease-out
 
     &:focus
     &:not([disabled]):not([aria-disabled=true]):hover
-        border-color: palette['barney']
-        background-color: palette['barney']
+        border-color: #922BC2
+        background-color: #922BC2

package/dist/styles/recipient.styl

@@ -2,8 +2,8 @@
 @require 'settings/breakpoints.styl'
 
 :root
-  --genericRecipientBackground: var(--slateGrey)
-  --genericRecipientColor: var(--white)
+  --genericRecipientBackground: var(--secondaryColor)
+  --genericRecipientColor: var(--secondaryContrastTextColor)
 
 .recipient
     display flex
@@ -41,7 +41,7 @@
 
 .recipient-details
     font-size .875rem
-    color var(--coolGrey)
+    color var(--secondaryTextColor)
 
 .avatar
     display flex

package/dist/styles/share.styl

@@ -3,7 +3,7 @@
 @require 'settings/breakpoints.styl'
 
 .share-byemail-onlybylink
-    background var(--paleGrey)
+    background var(--defaultBackgroundColor)
     padding 1rem 2rem
     margin -1.5rem -2rem 1rem
 
@@ -36,7 +36,7 @@
         margin 0
 
     .coz-form-desc
-        color var(--coolGrey)
+        color var(--secondaryTextColor)
 
 .share-type-control
     display flex
@@ -64,7 +64,7 @@
         .select-option-desc
             line-height 1.5
             font-size   .8125rem
-            color var(--coolGrey)
+            color var(--secondaryTextColor)
 
 
 
@@ -75,7 +75,7 @@
 :global
     // dirty hack for react-select: its API doesn't allow to make change to active styles
     .react-select__option:active
-        background-color var(--paleGrey) !important
+        background-color var(--defaultBackgroundColor) !important
 
 input[type=text]
     width 100%
@@ -100,4 +100,4 @@ input[type=text]
     margin        0 0 0.5rem 3.5rem
     padding-left  1.5rem
     line-height   1.5
-    color         var(--coolGrey)
+    color         var(--secondaryTextColor)

package/dist/stylesheet.css

@@ -91,8 +91,8 @@
 @media (pointer: coarse) {
 }
 :root {
-  --genericRecipientBackground: var(--slateGrey);
-  --genericRecipientColor: var(--white);
+  --genericRecipientBackground: var(--secondaryColor);
+  --genericRecipientColor: var(--secondaryContrastTextColor);
 }
 .recipient__recipient___2DmZI {
   display: flex;
@@ -131,7 +131,7 @@
 }
 .recipient__recipient-details___2fZfc {
   font-size: 0.875rem;
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
 }
 .recipient__avatar___2LnIV {
   display: flex;
@@ -188,7 +188,7 @@
 }
 .share__share-modal-content___1iqEq .share__coz-form___1ICST a,
 .share__share-modal-content___1iqEq .share__coz-form___1ICST a:visited {
-  color: var(--dodgerBlue);
+  color: var(--primaryColor);
   text-decoration: none;
 }
 .share__share-modal-content___1iqEq .share__coz-form___1ICST a:hover,
@@ -208,17 +208,17 @@
 .share__share-modal-content___1iqEq .share__coz-form-label___bogBw {
   display: block;
   text-transform: uppercase;
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
   font-size: 0.75rem;
   padding: 0.563rem 0;
   margin-top: 1rem;
 }
 .share__share-modal-content___1iqEq .share__coz-form-label--error___3YPkf {
   display: none;
-  color: var(--pomegranate);
+  color: var(--errorColor);
 }
 .share__share-modal-content___1iqEq .share__coz-form-errors___2xYRz {
-  color: var(--pomegranate);
+  color: var(--errorColor);
 }
 .share__share-modal-content___1iqEq .share__coz-form-controls___H8kGc {
   display: flex;
@@ -260,42 +260,42 @@
   padding: 0.875rem 0.75rem 0.75rem 0.875rem;
   box-sizing: border-box;
   border-radius: 0.125rem;
-  background: var(--white);
-  border: 0.063rem solid var(--dividerColor);
-  color: var(--black);
+  background: var(--paperBackgroundColor);
+  border: 0.063rem solid var(--borderMainColor);
+  color: var(--primaryTextColor);
 }
 .share__share-modal-content___1iqEq input[type=text]::placeholder,
 .share__share-modal-content___1iqEq input[type=password]::placeholder,
 .share__share-modal-content___1iqEq input[type=email]::placeholder,
 .share__share-modal-content___1iqEq input[type=url]::placeholder {
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
   font-size: 1rem;
 }
 .share__share-modal-content___1iqEq input[type=text]:focus,
 .share__share-modal-content___1iqEq input[type=password]:focus,
 .share__share-modal-content___1iqEq input[type=email]:focus,
 .share__share-modal-content___1iqEq input[type=url]:focus {
-  border: 0.063rem solid var(--dodgerBlue);
+  border: 0.063rem solid var(--primaryColor);
   outline: 0;
 }
 .share__share-modal-content___1iqEq input[type=text]:hover,
 .share__share-modal-content___1iqEq input[type=password]:hover,
 .share__share-modal-content___1iqEq input[type=email]:hover,
 .share__share-modal-content___1iqEq input[type=url]:hover {
-  border: 0.063rem solid var(--coolGrey);
+  border: 0.063rem solid var(--hintTextColor);
 }
 .share__share-modal-content___1iqEq input[type=text].share__error___pwqPO,
 .share__share-modal-content___1iqEq input[type=password].share__error___pwqPO,
 .share__share-modal-content___1iqEq input[type=email].share__error___pwqPO,
 .share__share-modal-content___1iqEq input[type=url].share__error___pwqPO {
-  border: 0.063rem solid var(--pomegranate);
+  border: 0.063rem solid var(--errorColor);
 }
 @media (max-width: 48rem) {
 }
 @media (max-width: 48rem) {
 }
 .share__share-byemail-onlybylink___29W-t {
-  background: var(--paleGrey);
+  background: var(--defaultBackgroundColor);
   padding: 1rem 2rem;
   margin: -1.5rem -2rem 1rem;
 }
@@ -327,7 +327,7 @@
   margin: 0;
 }
 .share__coz-form-group___VsQp7 .share__coz-form-desc___2mYN4 {
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
 }
 .share__share-type-control___1YoRr {
   display: flex;
@@ -354,14 +354,14 @@
 .share__share-type-control___1YoRr .share__select-wrapper___3XBKC .share__select-option-desc___3jOnr {
   line-height: 1.5;
   font-size: 0.8125rem;
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
 }
 .share__share-type-control___1YoRr button {
   flex: 0 0 49%;
   margin: 0;
 }
 .react-select__option:active {
-  background-color: var(--paleGrey) !important;
+  background-color: var(--defaultBackgroundColor) !important;
 }
 input[type=text] {
   width: 100%;
@@ -386,7 +386,7 @@ input[type=text] {
   margin: 0 0 0.5rem 3.5rem;
   padding-left: 1.5rem;
   line-height: 1.5;
-  color: var(--coolGrey);
+  color: var(--secondaryTextColor);
 }
 /*  imported from autosuggest.styl  */
 
@@ -403,7 +403,7 @@ input[type=text] {
   overflow: hidden;
   box-shadow: 0px 0px 0px 0.5px rgba(29,33,42,0.12), 0px 2px 4px rgba(29,33,42,0.079), 0px 4px 16px rgba(29,33,42,0.06);
   border-radius: 0.5rem;
-  background: var(--white);
+  background: var(--paperBackgroundColor);
   display: none;
 }
 .autosuggest__suggestionsContainerOpen___35OCI {
@@ -434,7 +434,7 @@ input[type=text] {
   overflow: auto;
 }
 .autosuggest__recipientsContainer___1JYxA:hover {
-  border: 1px solid var(--coolGrey);
+  border: 1px solid var(--borderMainColor);
 }
 .autosuggest__recipientsContainer___1JYxA:focus-within {
   border: 1px solid var(--primaryColor);
@@ -459,20 +459,20 @@ input[type=text] {
 /*  imported from button.styl  */
 
 .button__coz-btn-shared___9MFbY {
-  border-color: #35ce68;
-  background-color: #35ce68;
-  color: var(--white);
+  border-color: var(--emerald);
+  background-color: var(--emerald);
+  color: var(--primaryContrastTextColor);
   transition: all 0.2s ease-out;
 }
 .button__coz-btn-shared___9MFbY:focus,
 .button__coz-btn-shared___9MFbY:not([disabled]):not([aria-disabled=true]):hover {
-  border-color: #08b442;
-  background-color: #08b442;
+  border-color: var(--malachite);
+  background-color: var(--malachite);
 }
 .button__coz-btn-sharedWithMe___25PBh {
   border-color: #b449e7;
   background-color: #b449e7;
-  color: var(--white);
+  color: var(--primaryContrastTextColor);
   transition: all 0.2s ease-out;
 }
 .button__coz-btn-sharedWithMe___25PBh:focus,
@@ -491,7 +491,7 @@ input[type=text] {
 }
 .badge__shared-badge___2jGsy.badge__--small___2VMyY {
   border: 0.125rem solid;
-  border-color: var(--white);
+  border-color: var(--primaryContrastTextColor);
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -501,7 +501,7 @@ input[type=text] {
 }
 .badge__shared-badge___2jGsy.badge__--xsmall___2cEGG {
   border: 0.0625rem solid;
-  border-color: var(--white);
+  border-color: var(--primaryContrastTextColor);
   width: 0.75rem;
   height: 0.75rem;
 }
@@ -510,7 +510,7 @@ input[type=text] {
   height: 0.375rem;
 }
 .badge__shared-badge___2jGsy.badge__--by-me___3aTHb {
-  background-color: #35ce68;
+  background-color: var(--emerald);
 }
 .badge__shared-badge___2jGsy.badge__--with-me___3jW7R {
   background-color: #9169f2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "13.3.1",
+  "version": "14.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -50,7 +50,7 @@
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
     "cozy-client": "46.1.0",
-    "cozy-ui": "105.3.1",
+    "cozy-ui": "106.8.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -63,7 +63,7 @@
   "peerDependencies": {
     "cozy-client": ">=46.1.0",
     "cozy-realtime": "^3.11.0",
-    "cozy-ui": ">=105.3.1",
+    "cozy-ui": ">=106.8.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-router": "^5.0.1"
@@ -71,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "e3d4b47af3dabff895386dbc237ab5b81963d1f6"
+  "gitHead": "077aefb7a6fc6037a5b9acb957eae5558cba4ae0"
 }

package/src/components/Recipient/RecipientConfirm.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import modalStyles from '../../styles/share.styl'
@@ -19,7 +19,7 @@ const RecipientConfirm = ({ recipientConfirmationData, verifyRecipient }) => {
   return (
     <Button
       style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
-      theme="text"
+      variant="text"
       className={modalStyles['aligned-dropdown-button']}
       onClick={verify}
       label={t(`Share.twoStepsConfirmation.verify`)}

package/src/components/ShareAutosuggest.jsx

@@ -5,7 +5,6 @@ import Autosuggest from 'react-autosuggest'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Chip from 'cozy-ui/transpiled/react/Chips'
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
-import palette from 'cozy-ui/transpiled/react/palette'
 
 import { GroupAvatar } from './Avatar/GroupAvatar'
 import ContactSuggestion from './ContactSuggestion'
@@ -165,7 +164,7 @@ const ShareAutocomplete = ({
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
       {loading && isLoadingDisplayed ? (
-        <Spinner color={palette.dodgerBlue} />
+        <Spinner color="var(--primaryColor)" />
       ) : null}
     </div>
   )

package/src/components/ShareButton.jsx

@@ -1,19 +1,19 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
-import { Button } from 'cozy-ui/transpiled/react/deprecated/Button'
 
 import styles from '../styles/button.styl'
 
 export const ShareButton = ({ label, onClick, className, ...props }) => (
   <Button
     data-test-id="share-button"
-    theme="secondary"
+    variant="secondary"
     className={className}
     onClick={() => onClick()}
-    icon={<Icon icon={ShareIcon} />}
+    startIcon={<Icon icon={ShareIcon} />}
     label={label}
     {...props}
   />
@@ -34,7 +34,7 @@ export const SharedWithMeButton = ({ label, onClick, className, ...props }) => (
   <Button
     className={classNames(styles['coz-btn-sharedWithMe'], className)}
     onClick={() => onClick()}
-    icon={<Icon icon={ShareIcon} />}
+    startIcon={<Icon icon={ShareIcon} />}
     label={label}
     {...props}
   />

package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { useSafeState } from '../helpers/hooks'
@@ -36,12 +36,12 @@ const ConfirmRecipientActions = ({ confirm, reject }) => {
   return (
     <>
       <Button
-        theme="danger-outline"
+        variant="secondary"
+        color="error"
         label={t(`Share.twoStepsConfirmation.reject`)}
         onClick={reject}
       />
       <Button
-        theme="primary"
         label={t(`Share.twoStepsConfirmation.confirm`)}
         onClick={confirm}
       />
@@ -73,15 +73,11 @@ const RejectRecipientActions = ({ reject, cancel }) => {
   return (
     <>
       <Button
-        theme="secondary"
+        variant="secondary"
         label={t(`Share.twoStepsConfirmation.cancel`)}
         onClick={cancel}
       />
-      <Button
-        theme="primary"
-        label={t(`Share.twoStepsConfirmation.reject`)}
-        onClick={reject}
-      />
+      <Button label={t(`Share.twoStepsConfirmation.reject`)} onClick={reject} />
     </>
   )
 }

package/src/components/SharedBadge.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
-import palette from 'cozy-ui/transpiled/react/palette'
 
 import styles from '../styles/badge.styl'
 
@@ -19,7 +18,7 @@ const SharedBadge = ({ byMe, className, small, xsmall }) => (
   >
     <Icon
       icon={ShareIcon}
-      color={palette.white}
+      color="var(--primaryContrastTextColor)"
       className={styles['shared-badge-icon']}
     />
   </div>

package/src/components/SharedStatus.jsx

@@ -1,7 +1,6 @@
 import cx from 'classnames'
 import React from 'react'
 
-import palette from 'cozy-ui/transpiled/react/palette'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { SharingTooltip, TooltipRecipientList } from './Tooltip'
@@ -34,7 +33,7 @@ export const SharedStatus = ({ className, docId, recipients, link }) => {
       {link && (
         <>
           <LinkIcon
-            style={{ fill: palette.coolGrey }}
+            style={{ fill: 'var(--iconTextColor)' }}
             data-tip
             data-for={`linkfor${docId}`}
           />

package/src/components/Sharesubmit.jsx

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { Button } from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 
 const ShareSubmit = props => (
   <Button
     onClick={() => {
       props.onSubmit()
     }}
+    size="large"
     busy={props.loading}
     label={props.label}
     disabled={props.disabled}

package/src/components/Sharetypeselect.jsx

@@ -6,20 +6,22 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox'
-import palette from 'cozy-ui/transpiled/react/palette'
 
 import logger from '../logger'
 import styles from '../styles/share.styl'
 
 const DropdownIndicator = props => (
   <components.DropdownIndicator {...props}>
-    <Icon icon={BottomIcon} color={palette.coolGrey} />
+    <Icon icon={BottomIcon} color="var(--iconTextColor)" />
   </components.DropdownIndicator>
 )
+
 const Option = props => (
   <components.Option {...props}>
     <div className={cx(styles['select-option'])}>
-      {props.isSelected && <Icon icon={CheckIcon} color={palette.dodgerBlue} />}
+      {props.isSelected && (
+        <Icon icon={CheckIcon} color="var(--primaryColor)" />
+      )}
       <div>
         <div className={styles['select-option-label']}>{props.label}</div>
         <div className={styles['select-option-desc']}>{props.data.desc}</div>
@@ -27,22 +29,25 @@ const Option = props => (
     </div>
   </components.Option>
 )
+
 const customStyles = {
   option: (base, state) => ({
     ...base,
-    color: 'black',
-    backgroundColor: state.isFocused ? palette.paleGrey : null,
+    color: 'var(--primaryTextColor)',
+    backgroundColor: state.isFocused ? 'var(--actionColorHover)' : null,
     padding: 0,
     borderBottom:
       state.options.findIndex(o => o.value === state.value) === 0
-        ? `1px solid ${palette.silver}`
+        ? '1px solid var(--borderMainColor)'
         : null
   }),
   menu: base => ({
     ...base,
+    backgroundColor: 'var(--paperBackgroundColor)',
     width: '204%'
   })
 }
+
 const ShareTypeSelect = ({ options, onChange }) => (
   <div className={styles['select-wrapper']}>
     <SelectBox

package/src/components/SharingBanner/components/PublicBanner.jsx

@@ -4,7 +4,7 @@ import snarkdown from 'snarkdown'
 
 import { useClient } from 'cozy-client'
 import Banner from 'cozy-ui/transpiled/react/Banner'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import CozyHomeLinkIcon from './CozyHomeLinkIcon'
@@ -97,7 +97,7 @@ const SharingBannerCozyToCozy = ({
       }
       buttonOne={
         <Button
-          theme="text"
+          variant="text"
           label={buttonOne.label}
           icon={buttonOne.icon}
           onClick={buttonOne.action}
@@ -105,7 +105,7 @@ const SharingBannerCozyToCozy = ({
       }
       buttonTwo={
         <Button
-          theme="text"
+          variant="text"
           label={t('Share.banner.close')}
           onClick={onClose}
         />
@@ -142,8 +142,9 @@ const SharingBannerByLink = ({ onClose }) => {
       bgcolor="var(--defaultBackgroundColor)"
       text={<SharingBannerByLinkText />}
       buttonOne={
-        <ButtonLink
-          theme="text"
+        <Button
+          component="a"
+          variant="text"
           label={t('Share.create-cozy')}
           icon={CozyHomeLinkIcon}
           href={HOME_LINK_HREF}
@@ -151,7 +152,7 @@ const SharingBannerByLink = ({ onClose }) => {
       }
       buttonTwo={
         <Button
-          theme="text"
+          variant="text"
           label={t('Share.banner.close')}
           onClick={onClose}
         />

package/src/components/__snapshots__/SharedStatus.spec.js.snap

@@ -15,7 +15,7 @@ exports[`SharedStatus component should display the link if there is a link 1`] =
       height="16"
       style={
         Object {
-          "fill": "var(--coolGrey)",
+          "fill": "var(--iconTextColor)",
         }
       }
       viewBox="0 0 16 16"
@@ -29,7 +29,7 @@ exports[`SharedStatus component should display the link if there is a link 1`] =
         height="16"
         style={
           Object {
-            "fill": "var(--coolGrey)",
+            "fill": "var(--iconTextColor)",
           }
         }
         viewBox="0 0 16 16"

package/src/styles/actionmenu.styl

@@ -1,4 +1,4 @@
 .fil-mobileactionmenu
-    color      var(--charcoalGrey)
+    color      var(--secondaryTextColor)
     hr
         margin-top 0

package/src/styles/autosuggest.styl

@@ -11,7 +11,7 @@
     overflow hidden
     box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)
     border-radius .5rem
-    background var(--white)
+    background var(--paperBackgroundColor)
     display none
 
 .suggestionsContainerOpen
@@ -42,7 +42,7 @@
     overflow auto
 
     &:hover
-        border 1px solid var(--coolGrey)
+        border 1px solid var(--borderMainColor)
 
     &:focus-within
         border 1px solid var(--primaryColor)

package/src/styles/badge.styl

@@ -1,5 +1,3 @@
-palette=json('settings/palette.json', { hash: true })
-
 .shared-badge
     display flex
     align-items center
@@ -8,8 +6,8 @@ palette=json('settings/palette.json', { hash: true })
     background-clip padding-box
 
     &.--small
-        border .125rem solid 
-        border-color: palette['white']
+        border .125rem solid
+        border-color: var(--primaryContrastTextColor)
         width 1.5rem
         height 1.5rem
 
@@ -18,8 +16,8 @@ palette=json('settings/palette.json', { hash: true })
             height .75rem
 
     &.--xsmall
-        border .0625rem solid 
-        border-color: palette['white']
+        border .0625rem solid
+        border-color: var(--primaryContrastTextColor)
         width .75rem
         height .75rem
 
@@ -28,7 +26,7 @@ palette=json('settings/palette.json', { hash: true })
             height .375rem
 
     &.--by-me
-        background-color: palette['emerald']
+        background-color: var(--emerald)
 
     &.--with-me
-        background-color: palette['portage']
+        background-color: #9169F2

package/src/styles/button.styl

@@ -1,22 +1,21 @@
-palette=json('settings/palette.json', { hash: true })
 .coz-btn-shared
-    border-color: palette['emerald']
-    background-color: palette['emerald']
-    color: palette['white']
+    border-color: var(--emerald)
+    background-color: var(--emerald)
+    color: var(--primaryContrastTextColor)
     transition all .2s ease-out
 
     &:focus
     &:not([disabled]):not([aria-disabled=true]):hover
-        border-color: palette['malachite']
-        background-color: palette['malachite']
+        border-color: var(--malachite)
+        background-color: var(--malachite)
 
 .coz-btn-sharedWithMe
-    border-color: palette['lightishPurple']
-    background-color: palette['lightishPurple']
-    color: palette['white']
+    border-color: #B449E7
+    background-color: #B449E7
+    color: var(--primaryContrastTextColor)
     transition all .2s ease-out
 
     &:focus
     &:not([disabled]):not([aria-disabled=true]):hover
-        border-color: palette['barney']
-        background-color: palette['barney']
+        border-color: #922BC2
+        background-color: #922BC2

package/src/styles/recipient.styl

@@ -2,8 +2,8 @@
 @require 'settings/breakpoints.styl'
 
 :root
-  --genericRecipientBackground: var(--slateGrey)
-  --genericRecipientColor: var(--white)
+  --genericRecipientBackground: var(--secondaryColor)
+  --genericRecipientColor: var(--secondaryContrastTextColor)
 
 .recipient
     display flex
@@ -41,7 +41,7 @@
 
 .recipient-details
     font-size .875rem
-    color var(--coolGrey)
+    color var(--secondaryTextColor)
 
 .avatar
     display flex

package/src/styles/share.styl

@@ -3,7 +3,7 @@
 @require 'settings/breakpoints.styl'
 
 .share-byemail-onlybylink
-    background var(--paleGrey)
+    background var(--defaultBackgroundColor)
     padding 1rem 2rem
     margin -1.5rem -2rem 1rem
 
@@ -36,7 +36,7 @@
         margin 0
 
     .coz-form-desc
-        color var(--coolGrey)
+        color var(--secondaryTextColor)
 
 .share-type-control
     display flex
@@ -64,7 +64,7 @@
         .select-option-desc
             line-height 1.5
             font-size   .8125rem
-            color var(--coolGrey)
+            color var(--secondaryTextColor)
 
 
 
@@ -75,7 +75,7 @@
 :global
     // dirty hack for react-select: its API doesn't allow to make change to active styles
     .react-select__option:active
-        background-color var(--paleGrey) !important
+        background-color var(--defaultBackgroundColor) !important
 
 input[type=text]
     width 100%
@@ -100,4 +100,4 @@ input[type=text]
     margin        0 0 0.5rem 3.5rem
     padding-left  1.5rem
     line-height   1.5
-    color         var(--coolGrey)
+    color         var(--secondaryTextColor)