Skip to content

Commit 8477d9c

Browse files
JF-CozyJF-Cozy
committed
fix(Theme): Shadows are now relative to the theme
1 parent ec0bae6 commit 8477d9c

File tree

8 files changed

+129
-59
lines changed

8 files changed

+129
-59
lines changed

‎react/MuiCozyTheme/helpers.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { alpha } from '../styles'
2+
import { getCssVariableValue } from '../utils/color'
23

34
export const makeAlertBackgroundColor = ({ theme, severity }) => ({
45
standard: alpha(
@@ -203,3 +204,13 @@ export const makeContainedButtonStyle = (theme, color) => ({
203204
*/
204205
export const getFlagshipCssVar = position =>
205206
`var(--flagship-${position}-height, 0px)`
207+
208+
/**
209+
* @param {string} type - Type of the theme
210+
* @param {string} variant - Variant of the theme
211+
* @returns {array} Array of Mui shadows
212+
*/
213+
export const makeShadows = (type, variant) =>
214+
[...Array(25)].map((_, index) =>
215+
getCssVariableValue(`shadow${index}`, type, variant)
216+
)

‎react/MuiCozyTheme/makePalette.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import merge from 'lodash/merge'
22

3-
import { getCssVariableValue, createNodeWithThemeCssVars } from '../utils/color'
3+
import { getCssVariableValue } from '../utils/color'
44

55
const opacityByTheme = {
66
light: {
@@ -82,9 +82,6 @@ const opacityByTheme = {
8282
}
8383

8484
export const makePalette = (type, variant) => {
85-
// to hold the values of css variables, recoverable by getCssVariableValue()
86-
createNodeWithThemeCssVars(type, variant)
87-
8885
const paletteByTheme = {
8986
type,
9087
variant: variant,

‎react/MuiCozyTheme/makeShadows.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎react/MuiCozyTheme/makeTheme.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { createTheme } from '../styles'
22
import isTesting from '../helpers/isTesting'
3+
import { createNodeWithThemeCssVars } from '../utils/color'
4+
5+
import { makeShadows } from './helpers'
36
import { makePalette } from './makePalette'
47
import { makeTypography } from './makeTypography'
5-
import { makeShadows } from './makeShadows'
68
import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides'
79
import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides'
810
import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides'
@@ -39,15 +41,18 @@ const themesCommonConfig = {
3941
'none',
4042
'0px 2px 8px rgba(29, 33, 42, 0.16), 0px 0px 1px rgba(29, 33, 42, 0.48)'
4143
],
42-
shadows: makeShadows(), // Shadow ar not linked to themes
4344
...(isTesting() && { transitions: { create: () => 'none' } })
4445
}
4546

4647
export const makeTheme = (type, variant) => {
48+
// to hold the values of css variables, recoverable by getCssVariableValue()
49+
createNodeWithThemeCssVars(type, variant)
50+
4751
const palette = makePalette(type, variant)
4852
const theme = createTheme({
4953
...themesCommonConfig,
5054
typography: makeTypography(palette),
55+
shadows: makeShadows(type, variant),
5156
palette
5257
})
5358
const overrides = makeOverridesByTheme(theme)[type][variant]

‎stylus/settings/themes/dark-inverted.styl‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,32 @@ palette=json('../../../theme/palette.json', { hash: true })
6060
--infoColorDark palette.Info['A400']
6161
--infoColorContrastText palette.Common['white']
6262

63+
$shadowColor = palette.Common['black']
64+
--shadow0 none
65+
--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)
66+
--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)
67+
--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)
68+
--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)
69+
--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)
70+
--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)
71+
--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)
72+
--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)
73+
--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)
74+
--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)
75+
--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)
76+
--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)
77+
--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)
78+
--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)
79+
--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)
80+
--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)
81+
--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)
82+
--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)
83+
--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)
84+
--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)
85+
--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)
86+
--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)
87+
--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)
88+
--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)
89+
--shadow25 0px 1px 4px alpha($shadowColor, 0.04)
90+
6391
// @stylint on

‎stylus/settings/themes/dark-normal.styl‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,32 @@ palette=json('../../../theme/palette.json', { hash: true })
6060
--infoColorDark palette.Info['500']
6161
--infoColorContrastText alpha(palette.Grey['900'], 0.9)
6262

63+
$shadowColor = palette.Common['black']
64+
--shadow0 none
65+
--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)
66+
--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)
67+
--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)
68+
--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)
69+
--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)
70+
--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)
71+
--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)
72+
--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)
73+
--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)
74+
--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)
75+
--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)
76+
--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)
77+
--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)
78+
--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)
79+
--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)
80+
--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)
81+
--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)
82+
--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)
83+
--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)
84+
--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)
85+
--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)
86+
--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)
87+
--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)
88+
--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)
89+
--shadow25 0px 1px 4px alpha($shadowColor, 0.04)
90+
6391
// @stylint on

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,32 @@ palette=json('../../../theme/palette.json', { hash: true })
6060
--infoColorDark palette.Info['300']
6161
--infoColorContrastText alpha(palette.Grey['900'], 0.9)
6262

63+
$shadowColor = palette.Common['black']
64+
--shadow0 none
65+
--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)
66+
--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)
67+
--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)
68+
--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)
69+
--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)
70+
--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)
71+
--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)
72+
--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)
73+
--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)
74+
--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)
75+
--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)
76+
--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)
77+
--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)
78+
--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)
79+
--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)
80+
--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)
81+
--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)
82+
--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)
83+
--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)
84+
--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)
85+
--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)
86+
--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)
87+
--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)
88+
--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)
89+
--shadow25 0px 1px 4px alpha($shadowColor, 0.04)
90+
6391
// @stylint on

0 commit comments

Comments
 (0)