Skip to content

Commit e3b98ff

Browse files
JF-CozyJF-Cozy
committed
feat(CSS): Rename CozyTheme--xxx classe into CozyTheme--light-xxx
BREAKING CHANGE: if you want to get or override css var, you need to do it on new classes, see below: `CozyTheme--normal` -> `CozyTheme--light-normal` `CozyTheme--inverted` -> `CozyTheme--light-inverted`
1 parent 2c51cf6 commit e3b98ff

File tree

10 files changed

+156
-150
lines changed

10 files changed

+156
-150
lines changed

‎docs/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ When renaming or moving a Cozy-UI component, it may cause a breaking change. In
105105
* Use material UI whenever possible
106106
* Override material UI components inside `makeOverrides.js` when necessary
107107
* Avoid stylus to style new components based on MUI and prefer `/helpers/makeStyles`
108-
* Use semantic variables for colors from `stylus/settings/palette.styl`, or color from `theme` objects in `makeStyles`
108+
* Use semantic variables for colors from `stylus/settings/palettes.styl`, or color from `theme` objects in `makeStyles`
109109
110110
### Add an icon
111111

‎react/Dialog/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Dialog = props => {
99

1010
useDialogEffects(props.open, props.fullScreen)
1111

12-
return <MUIDialog className={`CozyTheme--${cozyTheme}`} {...props} />
12+
return <MUIDialog className={`CozyTheme--light-${cozyTheme}`} {...props} />
1313
}
1414
export default Dialog
1515

‎react/Viewer/ViewerContainer.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const ViewerContainerWrapper = ({ disableModal, ...props }) => {
135135
}
136136

137137
return (
138-
<Modal {...modalProps} className={`CozyTheme--${cozyTheme}`}>
138+
<Modal {...modalProps} className={`CozyTheme--light-${cozyTheme}`}>
139139
{/* This div is needed for the Modal ref */}
140140
<div>
141141
<ViewerContainer {...props} />

‎react/providers/CozyTheme/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const CozyTheme = ({ variant, className, ignoreItself, children }) => (
2828
<MuiCozyTheme variant={variant}>
2929
<div
3030
className={cx(className, {
31-
[`CozyTheme--${variant}`]: Boolean(variant),
31+
[`CozyTheme--light-${variant}`]: Boolean(variant),
3232
'u-dc': ignoreItself
3333
})}
3434
>

‎react/utils/color.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const realGetCssVariableValue = memoize(variableName =>
1010
)
1111

1212
const realGetInvertedCssVariableValue = variableName => {
13-
const className = 'CozyTheme--inverted'
13+
const className = 'CozyTheme--light-inverted'
1414
let node = document.getElementsByClassName(className)[0]
1515

1616
if (!node) {

‎stylus/cozy-ui/utils.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
CSS utility classes only
33
\*------------------------------------*/
44
@require '../utilities/*'
5-
@require '../settings/palette.styl'
5+
@require '../settings/palettes.styl'
66
@require '../settings/z-index.styl'

‎stylus/settings/palettes.styl‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@require './themes/light-normal'
2+
@require './themes/light-inverted'
3+
palette=json('../../theme/palette.json', { hash: true })
4+
5+
// @stylint off
6+
/*------------------------------------*\
7+
Palette
8+
=====
9+
\*------------------------------------*/
10+
/*
11+
Settings
12+
13+
Weight: -10
14+
15+
Styleguide Settings
16+
*/
17+
18+
/*
19+
Colors
20+
21+
Colors used in the user interface.
22+
23+
ℹ️ In general, you are advised to use [theme colors](#kssref-settings-theme) when
24+
building your components: this will ensure your components react correctly when
25+
changing the theme.
26+
27+
If you need to access an absolute color that is not semantic, you can use
28+
29+
```
30+
import palette from 'cozy-ui/transpiled/react/palette'
31+
<div style={{ backgroundColor: palette.melon }} />
32+
```
33+
34+
Styleguide Settings.colors
35+
*/
36+
html
37+
/*
38+
Grey
39+
40+
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
41+
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
42+
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
43+
Stylus: grey200 - #eceff1, CSS: var(--grey200)
44+
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
45+
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
46+
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
47+
Stylus: grey600 - #7c8086, CSS: var(--grey600)
48+
Stylus: grey700 - #5d6169, CSS: var(--grey700)
49+
Stylus: grey800 - #3e424a, CSS: var(--grey800)
50+
Stylus: grey900 - #1d212a, CSS: var(--grey900)
51+
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
52+
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
53+
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
54+
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
55+
Stylus: white - #FFFFFF, CSS: var(--white)
56+
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
57+
Stylus: silver - #D6D8Da, CSS: var(--silver)
58+
Stylus: coolGrey - #95999D, CSS: var(--coolGrey)
59+
Stylus: slateGrey - #5D6165, CSS: var(--slateGrey)
60+
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
61+
Stylus: black - #000000, CSS: var(--black)
62+
63+
Styleguide Settings.colors.grey
64+
*/
65+
--grey0 palette.Common['white']
66+
--grey50 palette.Grey['50']
67+
--grey100 palette.Grey['100']
68+
--grey200 palette.Grey['200']
69+
--grey300 palette.Grey['300']
70+
--grey400 palette.Grey['400']
71+
--grey500 palette.Grey['500']
72+
--grey600 palette.Grey['600']
73+
--grey700 palette.Grey['700']
74+
--grey800 palette.Grey['800']
75+
--grey900 palette.Grey['900']
76+
--greyA100 palette.Grey['A100']
77+
--greyA200 palette.Grey['A200']
78+
--greyA400 palette.Grey['A400']
79+
--greyA700 palette.Grey['A700']
80+
--white palette.Common['white']
81+
--paleGrey #F5F6F7
82+
--silver #D6D8Da
83+
--coolGrey #95999D
84+
--slateGrey #5D6165
85+
--charcoalGrey #32363F
86+
--black palette.Common['black']
87+
--overlay rgba(50, 54, 63, .5)
88+
89+
/*
90+
Blue
91+
92+
Stylus: zircon - #F5FAFF, CSS: var(--zircon)
93+
Stylus: dodgerBlue - #297EF2, CSS: var(--dodgerBlue)
94+
Stylus: scienceBlue - #0B61D6, CSS: var(--scienceBlue)
95+
96+
Styleguide Settings.colors.blue
97+
*/
98+
--zircon #F5FAFF
99+
--dodgerBlue #297EF2
100+
--scienceBlue #0B61D6
101+
102+
/*
103+
Green
104+
105+
Stylus: weirdGreen - #40DE8E, CSS: var(--weirdGreen)
106+
Stylus: emerald - #35CE68, CSS: var(--emerald)
107+
Stylus: malachite - #08b442, CSS: var(--malachite)
108+
109+
Styleguide Settings.colors.green
110+
*/
111+
--weirdGreen #40DE8E
112+
--emerald #35CE68
113+
--malachite #08b442
114+
115+
/*
116+
Orange
117+
118+
Stylus: mango - #FF962F, CSS: var(--mango)
119+
120+
Styleguide Settings.colors.orange
121+
*/
122+
--mango #FF962F
123+
124+
/*
125+
Red
126+
127+
Stylus: chablis - #FFF2F2, CSS: var(--chablis)
128+
Stylus: yourPink - #FDCBCB, CSS: var(--yourPink)
129+
Stylus: fuchsia - #FC4C83, CSS: var(--fuchsia)
130+
Stylus: pomegranate - #F52D2D, CSS: var(--pomegranate)
131+
Stylus: monza - #DD0505, CSS: var(--monza)
132+
133+
Styleguide Settings.colors.red
134+
*/
135+
--chablis #FFF2F2
136+
--yourPink #FDCBCB
137+
--fuchsia #FC4C83
138+
--pomegranate #F52D2D
139+
--monza #DD0505
140+
// @stylint on

stylus/settings/themes/inverted.styl renamed to stylus/settings/themes/light-inverted.styl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
palette=json('../../../theme/palette.json', { hash: true })
32

43
// @stylint off
@@ -9,7 +8,7 @@ palette=json('../../../theme/palette.json', { hash: true })
98
--invertedBackgroundColor palette.Primary['600']
109
--invertedContrastTextColor palette.Common['white']
1110

12-
.CozyTheme--inverted
11+
.CozyTheme--light-inverted
1312
--primaryTextColor palette.Common['white']
1413
--secondaryTextColor alpha(palette.Common['white'], 0.64)
1514
--disabledTextColor alpha(palette.Common['white'], 0.4)

stylus/settings/palette.styl renamed to stylus/settings/themes/light-normal.styl

Lines changed: 4 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,7 @@
1-
@require '../tools/mixins'
2-
@require './themes/inverted'
1+
@require '../../tools/mixins'
32
palette=json('../../theme/palette.json', { hash: true })
43

54
// @stylint off
6-
/*------------------------------------*\
7-
Palette
8-
=====
9-
\*------------------------------------*/
10-
/*
11-
Settings
12-
13-
Weight: -10
14-
15-
Styleguide Settings
16-
*/
17-
18-
/*
19-
Colors
20-
21-
Colors used in the user interface.
22-
23-
ℹ️ In general, you are advised to use [theme colors](#kssref-settings-theme) when
24-
building your components: this will ensure your components react correctly when
25-
changing the theme.
26-
27-
If you need to access an absolute color that is not semantic, you can use
28-
29-
```
30-
import palette from 'cozy-ui/transpiled/react/palette'
31-
<div style={{ backgroundColor: palette.melon }} />
32-
```
33-
34-
Styleguide Settings.colors
35-
*/
36-
html
37-
/*
38-
Grey
39-
40-
Stylus: grey0 - #FFFFFF, CSS: var(--grey0)
41-
Stylus: grey50 - #f9fafb, CSS: var(--grey50)
42-
Stylus: grey100 - #f4f5f6, CSS: var(--grey100)
43-
Stylus: grey200 - #eceff1, CSS: var(--grey200)
44-
Stylus: grey300 - #dde0e3, CSS: var(--grey300)
45-
Stylus: grey400 - #bfc3c7, CSS: var(--grey400)
46-
Stylus: grey500 - #9da2a6, CSS: var(--grey500)
47-
Stylus: grey600 - #7c8086, CSS: var(--grey600)
48-
Stylus: grey700 - #5d6169, CSS: var(--grey700)
49-
Stylus: grey800 - #3e424a, CSS: var(--grey800)
50-
Stylus: grey900 - #1d212a, CSS: var(--grey900)
51-
Stylus: greyA100 - #d3d6d8, CSS: var(--greyA100)
52-
Stylus: greyA200 - #a7abaf, CSS: var(--greyA200)
53-
Stylus: greyA400 - #2c3039, CSS: var(--greyA400)
54-
Stylus: greyA700 - #5d6169, CSS: var(--greyA700)
55-
Stylus: white - #FFFFFF, CSS: var(--white)
56-
Stylus: paleGrey - #F5F6F7, CSS: var(--paleGrey)
57-
Stylus: silver - #D6D8Da, CSS: var(--silver)
58-
Stylus: coolGrey - #95999D, CSS: var(--coolGrey)
59-
Stylus: slateGrey - #5D6165, CSS: var(--slateGrey)
60-
Stylus: charcoalGrey - #32363F, CSS: var(--charcoalGrey)
61-
Stylus: black - #000000, CSS: var(--black)
62-
63-
Styleguide Settings.colors.grey
64-
*/
65-
--grey0 palette.Common['white']
66-
--grey50 palette.Grey['50']
67-
--grey100 palette.Grey['100']
68-
--grey200 palette.Grey['200']
69-
--grey300 palette.Grey['300']
70-
--grey400 palette.Grey['400']
71-
--grey500 palette.Grey['500']
72-
--grey600 palette.Grey['600']
73-
--grey700 palette.Grey['700']
74-
--grey800 palette.Grey['800']
75-
--grey900 palette.Grey['900']
76-
--greyA100 palette.Grey['A100']
77-
--greyA200 palette.Grey['A200']
78-
--greyA400 palette.Grey['A400']
79-
--greyA700 palette.Grey['A700']
80-
--white palette.Common['white']
81-
--paleGrey #F5F6F7
82-
--silver #D6D8Da
83-
--coolGrey #95999D
84-
--slateGrey #5D6165
85-
--charcoalGrey #32363F
86-
--black palette.Common['black']
87-
--overlay rgba(50, 54, 63, .5)
88-
89-
/*
90-
Blue
91-
92-
Stylus: zircon - #F5FAFF, CSS: var(--zircon)
93-
Stylus: dodgerBlue - #297EF2, CSS: var(--dodgerBlue)
94-
Stylus: scienceBlue - #0B61D6, CSS: var(--scienceBlue)
95-
96-
Styleguide Settings.colors.blue
97-
*/
98-
--zircon #F5FAFF
99-
--dodgerBlue #297EF2
100-
--scienceBlue #0B61D6
101-
102-
/*
103-
Green
104-
105-
Stylus: weirdGreen - #40DE8E, CSS: var(--weirdGreen)
106-
Stylus: emerald - #35CE68, CSS: var(--emerald)
107-
Stylus: malachite - #08b442, CSS: var(--malachite)
108-
109-
Styleguide Settings.colors.green
110-
*/
111-
--weirdGreen #40DE8E
112-
--emerald #35CE68
113-
--malachite #08b442
114-
115-
/*
116-
Orange
117-
118-
Stylus: mango - #FF962F, CSS: var(--mango)
119-
120-
Styleguide Settings.colors.orange
121-
*/
122-
--mango #FF962F
123-
124-
/*
125-
Red
126-
127-
Stylus: chablis - #FFF2F2, CSS: var(--chablis)
128-
Stylus: yourPink - #FDCBCB, CSS: var(--yourPink)
129-
Stylus: fuchsia - #FC4C83, CSS: var(--fuchsia)
130-
Stylus: pomegranate - #F52D2D, CSS: var(--pomegranate)
131-
Stylus: monza - #DD0505, CSS: var(--monza)
132-
133-
Styleguide Settings.colors.red
134-
*/
135-
--chablis #FFF2F2
136-
--yourPink #FDCBCB
137-
--fuchsia #FC4C83
138-
--pomegranate #F52D2D
139-
--monza #DD0505
140-
1415
/*
1426
Theme
1437
@@ -151,7 +15,8 @@ html
15115
15216
Styleguide Settings.theme
15317
*/
154-
html, .CozyTheme--normal
18+
19+
html, .CozyTheme--light-normal,
15520
/*
15621
Primary colors
15722
@@ -419,4 +284,4 @@ html, .CozyTheme--normal
419284

420285
--alertInfoColor #fff
421286
--alertInfoBackgroundColor var(--slateGrey)
422-
// @stylint on
287+
// @stylint on

‎stylus/tools/mixins.styl‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
This file contains mixins:
66
- hide()
77
- reset()
8+
- rem()
9+
- visually-hide()
10+
- global()
11+
- cssModulesUtils()
12+
- nativeUtils()
813
\*------------------------------------*/
914
/*
1015
Tools
@@ -20,9 +25,6 @@
2025
2126
Styleguide Tools.mixins
2227
*/
23-
// @stylint off
24-
use('../scripts/deprecate.js')
25-
// @stylint on
2628

2729
// Default Font-size
2830
$basefont ?= 16px

0 commit comments

Comments
 (0)