Skip to content

Commit dbf11b6

Browse files
garronejgarronej
committed
Adapt MUI grid to DSFR
1 parent a19063e commit dbf11b6

File tree

3 files changed

+95
-78
lines changed

3 files changed

+95
-78
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@codegouvfr/react-dsfr",
3-
"version": "0.0.70",
3+
"version": "0.0.71",
44
"description": "French State Design System React integration library",
55
"repository": {
66
"type": "git",

‎src/mui.tsx‎

Lines changed: 93 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { id } from "tsafe/id";
1919
function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
2020
const { isDark } = params;
2121

22+
const { options, decisions } = getColors(isDark);
23+
2224
const muiTheme = createTheme({
2325
"shape": {
2426
"borderRadius": 0
@@ -27,82 +29,63 @@ function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
2729
"unit": breakpointValuesUnit,
2830
"values": breakpointValues
2931
},
30-
"palette": (() => {
31-
const { options } = getColors(isDark);
32-
33-
return {
34-
"mode": isDark ? "dark" : "light",
35-
"primary": {
36-
"main": options.blueFrance.sun113_625.default,
37-
"light": options.blueFrance.sun113_625.active,
38-
"dark": options.blueFrance.sun113_625.hover,
39-
"contrastText": options.blueFrance._975sun113.default
40-
},
41-
"secondary": {
42-
"main": options.blueFrance._950_100.default,
43-
"light": options.blueFrance._950_100.active,
44-
"dark": options.blueFrance._950_100.hover,
45-
"contrastText": options.blueFrance.sun113_625.default
46-
/*
47-
"main": options.blueFrance._850_200.default,
48-
"light": options.blueFrance._850_200.active,
49-
"dark": options.blueFrance._850_200.hover,
50-
"contrastText": options.blueFrance.sun113_625.default,
51-
*/
52-
},
53-
54-
"error": {
55-
"light": options.error._425_625.active,
56-
"main": options.error._425_625.default,
57-
"dark": options.error._425_625.hover,
58-
"contrastText": options.grey._1000_50.default
59-
},
60-
"warning": {
61-
"light": options.warning._425_625.default,
62-
"main": options.warning._425_625.default,
63-
"dark": options.warning._425_625.hover,
64-
"contrastText": options.grey._1000_50.default
65-
},
66-
"info": {
67-
"light": options.info._425_625.active,
68-
"main": options.info._425_625.default,
69-
"dark": options.info._425_625.hover,
70-
"contrastText": options.grey._1000_50.default
71-
},
72-
"success": {
73-
"light": options.success._425_625.active,
74-
"main": options.success._425_625.default,
75-
"dark": options.success._425_625.hover,
76-
"contrastText": options.grey._1000_50.default
77-
},
78-
"text": {
79-
"primary": options.grey._50_1000.default,
80-
"secondary": options.grey._200_850.default,
81-
"disabled": options.grey._625_425.default,
82-
"hint": options.grey._425_625.default
83-
},
84-
"divider": options.grey._900_175.default,
85-
"action": {
86-
"default": options.grey._200_850.default,
87-
"background": options.blueFrance._925_125.default,
88-
"active": options.grey._200_850.default,
89-
"hover": options.grey._975_100.default,
90-
"selected": options.blueFrance._925_125.active,
91-
"disabled": options.grey._625_425.default,
92-
"disabledBackground": options.grey._925_125.default,
93-
"focus": options.blueFrance.sun113_625.active
94-
},
95-
96-
"background": {
97-
"default": options.grey._1000_50.default,
98-
"paper": options.grey._1000_100.default,
99-
"paperHover": options.grey._975_75.hover
100-
},
101-
"getContrastText": () => {
102-
return "cyan";
103-
}
104-
} as const;
105-
})(),
32+
"palette": {
33+
"mode": isDark ? "dark" : "light",
34+
"primary": {
35+
"main": options.blueFrance.sun113_625.default,
36+
"light": options.blueFrance.sun113_625.active,
37+
"dark": options.blueFrance.sun113_625.hover,
38+
"contrastText": options.blueFrance._975sun113.default
39+
},
40+
"secondary": {
41+
"main": options.blueFrance._950_100.default,
42+
"light": options.blueFrance._950_100.active,
43+
"dark": options.blueFrance._950_100.hover,
44+
"contrastText": options.blueFrance.sun113_625.default
45+
},
46+
"error": {
47+
"light": options.error._425_625.active,
48+
"main": options.error._425_625.default,
49+
"dark": options.error._425_625.hover,
50+
"contrastText": options.grey._1000_50.default
51+
},
52+
"warning": {
53+
"light": options.warning._425_625.default,
54+
"main": options.warning._425_625.default,
55+
"dark": options.warning._425_625.hover,
56+
"contrastText": options.grey._1000_50.default
57+
},
58+
"info": {
59+
"light": options.info._425_625.active,
60+
"main": options.info._425_625.default,
61+
"dark": options.info._425_625.hover,
62+
"contrastText": options.grey._1000_50.default
63+
},
64+
"success": {
65+
"light": options.success._425_625.active,
66+
"main": options.success._425_625.default,
67+
"dark": options.success._425_625.hover,
68+
"contrastText": options.grey._1000_50.default
69+
},
70+
"text": {
71+
"primary": options.grey._50_1000.default,
72+
"secondary": options.grey._200_850.default,
73+
"disabled": options.grey._625_425.default
74+
},
75+
"divider": options.grey._900_175.default,
76+
"action": {
77+
"active": options.grey._200_850.default,
78+
"hover": options.grey._975_100.default,
79+
"selected": options.blueFrance._925_125.active,
80+
"disabled": options.grey._625_425.default,
81+
"disabledBackground": options.grey._925_125.default,
82+
"focus": options.blueFrance.sun113_625.active
83+
},
84+
"background": {
85+
"default": options.grey._1000_50.default,
86+
"paper": options.grey._1000_100.default
87+
}
88+
} as const,
10689
"typography": (() => {
10790
const getBySelector = (selector: typeof typography[number]["selector"]) => {
10891
const variant = typography.find(variant => variant.selector === selector);
@@ -196,7 +179,40 @@ function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
196179
"fill": getColors(true).decisions.text.title.grey.default
197180
}
198181
}
199-
}
182+
},
183+
...(() => {
184+
const nonTypedMuiComponents = {
185+
"MuiDataGrid": {
186+
"styleOverrides": {
187+
"columnHeaders": {
188+
"backgroundColor": decisions.background.contrast.grey.default,
189+
"borderColor": decisions.border.plain.grey.default,
190+
"borderPosition": "bottom",
191+
"borderWidth": 2
192+
},
193+
"row": {
194+
"&:nth-child(2n)": {
195+
"backgroundColor": decisions.background.contrast.grey.default,
196+
"&:hover": {
197+
"backgroundColor": decisions.background.contrast.grey.hover
198+
}
199+
},
200+
"&:nth-child(2n+1)": {
201+
"backgroundColor": decisions.background.alt.grey.default,
202+
"&:hover": {
203+
"backgroundColor": decisions.background.alt.grey.hover
204+
}
205+
}
206+
},
207+
"columnSeparator": {
208+
"display": "none"
209+
}
210+
}
211+
}
212+
};
213+
214+
return nonTypedMuiComponents as any as {};
215+
})()
200216
}
201217
});
202218

‎test/integration/next/pages/mui.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ const muiDefaultLightTheme = createTheme({
8080
}
8181
});
8282

83+
8384
export default function Mui() {
8485

8586
const { isDark, setIsDark } = useIsDark();

0 commit comments

Comments
 (0)