cozy-ui 121.6.0 → 121.8.0

package/react/SquareAppIcon/styles_twake.styl

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

package/react/Typography/Readme.md

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

package/react/providers/CozyTheme/DumbCozyTheme.jsx

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

package/react/providers/CozyTheme/index.jsx

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

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

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

package/theme/palette_twake.json

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