cozy-ui 122.14.1 → 123.0.0

package/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.js

@@ -1,65 +0,0 @@
-import merge from 'lodash/merge'
-
-import { makeLightNormalTwakeOverrides } from './makeLightNormalOverrides'
-
-export const makeLightInvertedTwakeOverrides = theme => {
-  const makeOverridesForInvertedTheme = theme => ({
-    MuiLinearProgress: {
-      colorPrimary: {
-        backgroundColor: 'rgba(255,255,255,0.2)'
-      },
-      colorSecondary: {
-        backgroundColor: 'rgba(255,255,255,0.2)'
-      }
-    },
-    MuiSnackbarContent: {
-      root: {
-        backgroundColor: theme.palette.grey[200]
-      }
-    },
-    MuiTabs: {
-      root: {
-        '&.segmented': {
-          '& $indicator': {
-            backgroundColor: theme.palette.primary.main
-          }
-        }
-      }
-    },
-    MuiTab: {
-      root: {
-        '&.segmented': {
-          '&$selected': {
-            color: theme.palette.primary.contrastText
-          }
-        }
-      }
-    },
-    MuiSwitch: {
-      switchBase: {
-        color: theme.palette.grey[100]
-      },
-      colorPrimary: {
-        '&$checked': {
-          '& + $track': {
-            backgroundColor: theme.palette.success.dark
-          }
-        }
-      },
-      colorSecondary: {
-        '&$checked': {
-          '& + $track': {
-            backgroundColor: theme.palette.success.dark
-          }
-        }
-      }
-    }
-  })
-
-  const invertedOverrides = merge(
-    makeLightNormalTwakeOverrides(theme),
-    makeOverridesForInvertedTheme(theme)
-  )
-
-  return invertedOverrides
-}

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -1,245 +0,0 @@
-import merge from 'lodash/merge'
-
-import { alpha, darken } from '../../../styles'
-import { makeLightNormalOverrides } from '../makeLightNormalOverrides'
-
-export const makeLightNormalTwakeOverrides = theme => {
-  const makeOverridesForTwakeTheme = theme => ({
-    MuiCheckbox: {
-      root: {
-        padding: 8
-      }
-    },
-    MuiSwitch: {
-      root: {
-        width: 50,
-        height: 40,
-        padding: '6px 1px'
-      },
-      switchBase: {
-        padding: 5,
-        top: 5,
-        color: theme.palette.text.icon,
-        '& .cozySwitchThumb': {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 20,
-          height: 20,
-          borderRadius: '50%',
-          boxShadow: theme.shadows[1],
-          backgroundColor: theme.palette.common.white
-        }
-      },
-      track: {
-        width: 44,
-        height: '100%',
-        borderRadius: 100
-      },
-      thumb: {
-        width: 20,
-        height: 20
-      },
-      colorPrimary: {
-        '&$disabled + $track': {
-          opacity: 1,
-          backgroundColor: theme.palette.action.disabledBackground
-        }
-      },
-      colorSecondary: {
-        '&$checked': {
-          color: theme.palette.success.main
-        },
-        '&$disabled + $track': {
-          opacity: 1,
-          backgroundColor: theme.palette.action.disabledBackground
-        }
-      },
-      disabled: {
-        '&$checked + $track': {
-          backgroundColor: theme.palette.action.disabledBackground
-        },
-        '& .cozySwitchThumb': {
-          backgroundColor: theme.palette.background.default
-        }
-      }
-    },
-    MuiLinearProgress: {
-      root: {
-        height: 3
-      },
-      colorPrimary: {
-        backgroundColor: theme.palette.divider
-      }
-    },
-    MuiButton: {
-      root: {
-        borderRadius: 100,
-        padding: '10px 24px',
-        '&.ghost': {
-          border: 0,
-          '&:hover': {
-            border: 0
-          }
-        }
-      },
-      sizeSmall: {
-        padding: '10px 16px',
-        '&.customSize': {
-          '&-default': {
-            height: '2.25rem'
-          },
-          '&-auto': {
-            minHeight: '2.25rem'
-          }
-        },
-        '&$text': {
-          padding: '8px 16px'
-        }
-      },
-      sizeLarge: {
-        padding: '14px 32px'
-      },
-      text: {
-        padding: '10px 8px'
-      },
-      outlined: {
-        '&:not($disabled)': {
-          '&.ghost': {
-            backgroundColor: theme.palette.background.default,
-            '&:hover': {
-              backgroundColor: darken(theme.palette.background.default, 0.05),
-              '@media (hover: none)': {
-                backgroundColor: darken(theme.palette.background.default, 0.05)
-              }
-            }
-          },
-          '&.customColor': {
-            '&-primary': {
-              color: theme.palette.primary.main,
-              borderColor: theme.palette.primary.main,
-              '&:hover': {
-                backgroundColor: alpha(
-                  theme.palette.primary.main,
-                  theme.palette.action.hoverOpacity
-                )
-              },
-              '&.ghost': {
-                color: theme.palette.text.primary,
-                borderColor: theme.palette.background.default
-              }
-            }
-          }
-        }
-      }
-    },
-    MuiIconButton: {
-      root: {
-        '&.small': {
-          padding: 8
-        },
-        '&.xlarge': {
-          padding: 20
-        }
-      }
-    },
-    MuiTooltip: {
-      tooltip: {
-        backgroundColor: alpha(theme.palette.grey[800], 0.9),
-        borderRadius: '4px',
-        padding: '8px 12px'
-      }
-    },
-    MuiFab: {
-      root: {
-        borderRadius: 28,
-        width: 96,
-        height: 96
-      },
-      primary: {
-        color: theme.palette.primary.dark,
-        backgroundColor: theme.palette.primary.light,
-        '&:hover': {
-          backgroundColor: darken(theme.palette.primary.light, 0.05),
-          '@media (hover: none)': {
-            backgroundColor: theme.palette.primary.light
-          }
-        }
-      },
-      extended: {
-        borderRadius: 16,
-        '&$sizeSmall': {
-          borderRadius: 16,
-          height: 42,
-          minWidth: 42
-        },
-        '&$sizeMedium': {
-          borderRadius: 16
-        }
-      },
-      sizeSmall: {
-        borderRadius: 12
-      },
-      sizeMedium: {
-        borderRadius: 16,
-        width: 56,
-        height: 56
-      }
-    },
-    MuiAvatarGroup: {
-      root: {
-        '& > div:last-child': {
-          boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.main}`
-        }
-      }
-    },
-    MuiAvatar: {
-      root: {
-        '&.size': {
-          '&-xs': {
-            '& svg': {
-              width: 10,
-              height: 10
-            }
-          },
-          '&-s': {
-            fontSize: 11,
-            '& svg': {
-              width: 16,
-              height: 16
-            }
-          },
-          '&-m': {
-            '& svg': {
-              width: 20,
-              height: 20
-            }
-          },
-          '&-l': {
-            '& svg': {
-              width: 28,
-              height: 28
-            }
-          },
-          '&-xl': {
-            '& svg': {
-              width: 36,
-              height: 36
-            }
-          }
-        }
-      },
-      colorDefault: {
-        backgroundColor: theme.palette.background.paper,
-        color: theme.palette.text.secondary
-      }
-    }
-  })
-
-  const twakeOverrides = merge(
-    makeLightNormalOverrides(theme),
-    makeOverridesForTwakeTheme(theme)
-  )
-
-  return twakeOverrides
-}

package/react/SquareAppIcon/styles_twake.styl

@@ -1,141 +0,0 @@
-@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
-    border-radius 100%
-    height $iconSize
-    width $iconSize
-    transition transform 300ms, border-radius 300ms
-
-    +small-screen()
-        height $mobileIconSize
-        width $mobileIconSize
-
-    &--light
-        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 251, 254, 0.80)
-
-    &--dark
-        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), #2C3039
-
-.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/helpers/isTwakeTheme.js

@@ -1,11 +0,0 @@
-/**
- * Forced to `true`, we don't want to use Cozy theme anymore
- * @returns {boolean}
- */
-export const isTwakeTheme = () => {
-  if (process.env.NODE_ENV === 'test') {
-    return false
-  }
-
-  return true
-}

package/scripts/generate-svgr-icon-twake.sh

@@ -1,29 +0,0 @@
-#!/usr/bin/env bash
-
-set -euo pipefail
-
-streamEditor=$([[ $(uname -s) == "Linux" ]] && echo sed || echo gsed)
-
-createSvgr()
-{
-  svgFileFullPath=$1
-  svgFilename=`basename $svgFileFullPath`
-  jsFilename=`echo $svgFilename | $streamEditor -E 's/^([a-z])/\U\1/g; s/-([a-z])/\U\1/g; s/svg$/jsx/g'`
-  jsFileFullPath="react/Icons/${jsFilename}"
-
-  echo $svgFileFullPath
-
-  node_modules/.bin/svgr $svgFileFullPath \
-    --no-dimensions \
-    --template scripts/svgr-template-twake.js > $jsFileFullPath
-  node_modules/.bin/eslint --fix $jsFileFullPath
-}
-
-if [ -d "$1" ]; then
-  for i in "$1"/*.svg
-  do
-    createSvgr $i
-  done
-else
-  createSvgr $1
-fi

package/scripts/svgr-template-twake.js

@@ -1,47 +0,0 @@
-function defaultTemplate(
-  { template },
-  opts,
-  { imports, interfaces, componentName, props, jsx, exports }
-) {
-  const plugins = ['jsx']
-  if (opts.typescript) {
-    plugins.push('typescript')
-  }
-  const typeScriptTpl = template.smart({ plugins, preserveComments: true })
-  const twakeFileName =
-    opts.state.filePath.replace(/^.*[\\/]/, '').split('.svg')[0] + '_twake'
-  const capTwakeFileName =
-    twakeFileName.charAt(0).toUpperCase() + twakeFileName.slice(1)
-  const TwakeComponentName = componentName.name + 'Twake'
-
-  const header = `// Automatically created, please run \`scripts/generate-svgr-icon.sh ${opts.state.filePath}\` to regenerate
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
-import ${TwakeComponentName} from './${capTwakeFileName}'`
-
-  for (let imp of imports) {
-    if (imp.source.value !== 'react') {
-      continue
-    }
-    for (let specifier of imp.specifiers) {
-      if (
-        specifier.type === 'ImportNamespaceSpecifier' &&
-        specifier.local.name === 'React'
-      ) {
-        specifier.type = 'ImportDefaultSpecifier'
-      }
-    }
-  }
-
-  return typeScriptTpl.ast`${header}
-
-${imports}
-${interfaces}
-function ${componentName}(${props}) {
-  if (isTwakeTheme()) return ${TwakeComponentName}(${props})
-
-  return ${jsx};
-}
-${exports}
-  `
-}
-module.exports = defaultTemplate

package/theme/palette_twake.json

@@ -1,106 +0,0 @@
-{
-  "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": "#fffbfe",
-   "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"
-   }
-}