cozy-ui 84.2.0 → 85.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/package.json +1 -1
- package/react/MuiCozyTheme/makeShadows.js +24 -24
- package/react/SquareAppIcon/Readme.md +1 -1
- package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap +359 -323
- package/react/SquareAppIcon/constants.json +1 -2
- package/react/SquareAppIcon/index.jsx +107 -78
- package/react/SquareAppIcon/styles.styl +4 -5
- package/transpiled/react/MuiCozyTheme/makeShadows.js +1 -1
- package/transpiled/react/SquareAppIcon/index.js +21 -18
- package/transpiled/react/stylesheet.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# [85.0.0](https://github.com/cozy/cozy-ui/compare/v84.3.0...v85.0.0) (2023-05-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* Update SquareAppIcon tests snapshots ([360d29a](https://github.com/cozy/cozy-ui/commit/360d29a))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Apply shadow to SquareAppIcon title only on inverted theme ([8c16952](https://github.com/cozy/cozy-ui/commit/8c16952))
|
|
12
|
+
* Blend ghost SquareAppIcon with `luminosity` in normal theme ([9374e9b](https://github.com/cozy/cozy-ui/commit/9374e9b))
|
|
13
|
+
* Force `normal` theme on SquareAppIcon badge (except for ghost/add) ([c15ea7c](https://github.com/cozy/cozy-ui/commit/c15ea7c))
|
|
14
|
+
* Make SquareAppIcon ghost and add variants adapt to CozyTheme ([43364e7](https://github.com/cozy/cozy-ui/commit/43364e7))
|
|
15
|
+
* Make SquareAppIcon shortcut's letter always white ([317a2fd](https://github.com/cozy/cozy-ui/commit/317a2fd))
|
|
16
|
+
* Make SquareAppIcon's title adapt to CozyTheme ([620623c](https://github.com/cozy/cozy-ui/commit/620623c))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### BREAKING CHANGES
|
|
20
|
+
|
|
21
|
+
* To keep previous SquareAppIcon render, you should
|
|
22
|
+
display it inside of an inverted Cozy Theme
|
|
23
|
+
```js
|
|
24
|
+
import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
|
|
25
|
+
|
|
26
|
+
<CozyTheme variant="inverted">
|
|
27
|
+
<SquareAppIcon /* ... */ />
|
|
28
|
+
</CozyTheme>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
# [84.3.0](https://github.com/cozy/cozy-ui/compare/v84.2.0...v84.3.0) (2023-05-12)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### Features
|
|
35
|
+
|
|
36
|
+
* Use CSS vars for shadows ([13ef786](https://github.com/cozy/cozy-ui/commit/13ef786))
|
|
37
|
+
|
|
1
38
|
# [84.2.0](https://github.com/cozy/cozy-ui/compare/v84.1.6...v84.2.0) (2023-05-11)
|
|
2
39
|
|
|
3
40
|
|
package/package.json
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
export const makeShadows = () => [
|
|
2
2
|
'none',
|
|
3
|
-
'rgba(29, 33, 42, 0.08) 0px 2px 4px 0px, rgba(29, 33, 42, 0.06) 0px 4px 16px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
4
|
-
'rgba(29, 33, 42, 0.08) 0px 3px 5px 0px, rgba(29, 33, 42, 0.06) 0px 4px 17px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
5
|
-
'rgba(29, 33, 42, 0.09) 0px 4px 6px 0px, rgba(29, 33, 42, 0.07) 0px 5px 19px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
6
|
-
'rgba(29, 33, 42, 0.09) 0px 5px 8px 1px, rgba(29, 33, 42, 0.07) 0px 5px 20px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
7
|
-
'rgba(29, 33, 42, 0.09) 0px 6px 9px 1px, rgba(29, 33, 42, 0.07) 0px 5px 22px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
8
|
-
'rgba(29, 33, 42, 0.1) 0px 7px 10px 1px, rgba(29, 33, 42, 0.07) 0px 6px 23px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
9
|
-
'rgba(29, 33, 42, 0.1) 0px 8px 11px 1px, rgba(29, 33, 42, 0.08) 0px 6px 24px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
10
|
-
'rgba(29, 33, 42, 0.1) 0px 9px 13px 1px, rgba(29, 33, 42, 0.08) 0px 6px 26px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
11
|
-
'rgba(29, 33, 42, 0.11) 0px 10px 14px 1px, rgba(29, 33, 42, 0.08) 0px 7px 27px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
12
|
-
'rgba(29, 33, 42, 0.11) 0px 11px 15px 2px, rgba(29, 33, 42, 0.08) 0px 7px 29px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
13
|
-
'rgba(29, 33, 42, 0.11) 0px 12px 16px 2px, rgba(29, 33, 42, 0.09) 0px 7px 30px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
14
|
-
'rgba(29, 33, 42, 0.12) 0px 13px 17px 2px, rgba(29, 33, 42, 0.09) 0px 8px 31px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
15
|
-
'rgba(29, 33, 42, 0.12) 0px 13px 19px 2px, rgba(29, 33, 42, 0.09) 0px 8px 33px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
16
|
-
'rgba(29, 33, 42, 0.13) 0px 14px 20px 2px, rgba(29, 33, 42, 0.09) 0px 9px 34px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
17
|
-
'rgba(29, 33, 42, 0.13) 0px 15px 21px 2px, rgba(29, 33, 42, 0.1) 0px 9px 35px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
18
|
-
'rgba(29, 33, 42, 0.13) 0px 16px 22px 3px, rgba(29, 33, 42, 0.1) 0px 9px 37px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
19
|
-
'rgba(29, 33, 42, 0.14) 0px 17px 23px 3px, rgba(29, 33, 42, 0.1) 0px 10px 38px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
20
|
-
'rgba(29, 33, 42, 0.14) 0px 18px 25px 3px, rgba(29, 33, 42, 0.1) 0px 10px 40px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
21
|
-
'rgba(29, 33, 42, 0.14) 0px 19px 26px 3px, rgba(29, 33, 42, 0.11) 0px 10px 41px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
22
|
-
'rgba(29, 33, 42, 0.15) 0px 20px 27px 3px, rgba(29, 33, 42, 0.11) 0px 11px 42px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
23
|
-
'rgba(29, 33, 42, 0.15) 0px 21px 28px 3px, rgba(29, 33, 42, 0.11) 0px 11px 44px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
24
|
-
'rgba(29, 33, 42, 0.15) 0px 22px 30px 4px, rgba(29, 33, 42, 0.11) 0px 11px 45px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
25
|
-
'rgba(29, 33, 42, 0.16) 0px 23px 31px 4px, rgba(29, 33, 42, 0.12) 0px 12px 47px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px',
|
|
26
|
-
'rgba(29, 33, 42, 0.16) 0px 24px 32px 4px, rgba(29, 33, 42, 0.12) 0px 12px 48px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px'
|
|
3
|
+
'var(--shadow1, rgba(29, 33, 42, 0.08) 0px 2px 4px 0px, rgba(29, 33, 42, 0.06) 0px 4px 16px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
4
|
+
'var(--shadow2, rgba(29, 33, 42, 0.08) 0px 3px 5px 0px, rgba(29, 33, 42, 0.06) 0px 4px 17px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
5
|
+
'var(--shadow3, rgba(29, 33, 42, 0.09) 0px 4px 6px 0px, rgba(29, 33, 42, 0.07) 0px 5px 19px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
6
|
+
'var(--shadow4, rgba(29, 33, 42, 0.09) 0px 5px 8px 1px, rgba(29, 33, 42, 0.07) 0px 5px 20px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
7
|
+
'var(--shadow5, rgba(29, 33, 42, 0.09) 0px 6px 9px 1px, rgba(29, 33, 42, 0.07) 0px 5px 22px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
8
|
+
'var(--shadow6, rgba(29, 33, 42, 0.1) 0px 7px 10px 1px, rgba(29, 33, 42, 0.07) 0px 6px 23px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
9
|
+
'var(--shadow7, rgba(29, 33, 42, 0.1) 0px 8px 11px 1px, rgba(29, 33, 42, 0.08) 0px 6px 24px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
10
|
+
'var(--shadow8, rgba(29, 33, 42, 0.1) 0px 9px 13px 1px, rgba(29, 33, 42, 0.08) 0px 6px 26px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
11
|
+
'var(--shadow9, rgba(29, 33, 42, 0.11) 0px 10px 14px 1px, rgba(29, 33, 42, 0.08) 0px 7px 27px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
12
|
+
'var(--shadow10, rgba(29, 33, 42, 0.11) 0px 11px 15px 2px, rgba(29, 33, 42, 0.08) 0px 7px 29px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
13
|
+
'var(--shadow11, rgba(29, 33, 42, 0.11) 0px 12px 16px 2px, rgba(29, 33, 42, 0.09) 0px 7px 30px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
14
|
+
'var(--shadow12, rgba(29, 33, 42, 0.12) 0px 13px 17px 2px, rgba(29, 33, 42, 0.09) 0px 8px 31px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
15
|
+
'var(--shadow13, rgba(29, 33, 42, 0.12) 0px 13px 19px 2px, rgba(29, 33, 42, 0.09) 0px 8px 33px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
16
|
+
'var(--shadow14, rgba(29, 33, 42, 0.13) 0px 14px 20px 2px, rgba(29, 33, 42, 0.09) 0px 9px 34px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
17
|
+
'var(--shadow15, rgba(29, 33, 42, 0.13) 0px 15px 21px 2px, rgba(29, 33, 42, 0.1) 0px 9px 35px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
18
|
+
'var(--shadow16, rgba(29, 33, 42, 0.13) 0px 16px 22px 3px, rgba(29, 33, 42, 0.1) 0px 9px 37px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
19
|
+
'var(--shadow17, rgba(29, 33, 42, 0.14) 0px 17px 23px 3px, rgba(29, 33, 42, 0.1) 0px 10px 38px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
20
|
+
'var(--shadow18, rgba(29, 33, 42, 0.14) 0px 18px 25px 3px, rgba(29, 33, 42, 0.1) 0px 10px 40px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
21
|
+
'var(--shadow19, rgba(29, 33, 42, 0.14) 0px 19px 26px 3px, rgba(29, 33, 42, 0.11) 0px 10px 41px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
22
|
+
'var(--shadow20, rgba(29, 33, 42, 0.15) 0px 20px 27px 3px, rgba(29, 33, 42, 0.11) 0px 11px 42px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
23
|
+
'var(--shadow21, rgba(29, 33, 42, 0.15) 0px 21px 28px 3px, rgba(29, 33, 42, 0.11) 0px 11px 44px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
24
|
+
'var(--shadow22, rgba(29, 33, 42, 0.15) 0px 22px 30px 4px, rgba(29, 33, 42, 0.11) 0px 11px 45px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
25
|
+
'var(--shadow23, rgba(29, 33, 42, 0.16) 0px 23px 31px 4px, rgba(29, 33, 42, 0.12) 0px 12px 47px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)',
|
|
26
|
+
'var(--shadow24, rgba(29, 33, 42, 0.16) 0px 24px 32px 4px, rgba(29, 33, 42, 0.12) 0px 12px 48px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)'
|
|
27
27
|
]
|
|
@@ -23,7 +23,7 @@ const [isError, setIsError] = React.useState(false)
|
|
|
23
23
|
<Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
|
|
24
24
|
<Button className="u-mb-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
|
|
25
25
|
|
|
26
|
-
<Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
|
|
26
|
+
<Grid container spacing={1} style={{ background: theme === 'inverted' ? `center / cover no-repeat url(${cloudWallpaper})` : 'white' }}
|
|
27
27
|
>
|
|
28
28
|
<Grid item>
|
|
29
29
|
<SquareAppIcon app={app} name="Normal" />
|