Skip to content

Commit e8afa05

Browse files
committed
Implement Marc Humfmit changes
1 parent df1b784 commit e8afa05

File tree

4 files changed

+191
-103
lines changed

4 files changed

+191
-103
lines changed

src/mui.tsx

Lines changed: 57 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -25,28 +25,75 @@ function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
2525
"values": breakpointValues
2626
},
2727
"palette": (() => {
28-
const { decisions } = getColors(isDark);
28+
const { options, decisions } = getColors(isDark);
2929

3030
return {
3131
"mode": isDark ? "dark" : "light",
3232
"primary": {
33+
/*
34+
"main": options.blueFrance._850_200.default,
35+
"light": options.blueFrance._850_200.default,
36+
"dark": options.blueFrance.sun113_625.default,
37+
"contrastText": options.blueFrance._975sun113.default
38+
*/
3339
"main": decisions.background.actionHigh.blueFrance.default,
3440
"light": decisions.background.actionLow.blueFrance.default
3541
},
3642
"secondary": {
43+
/*
44+
"main": options.redMarianne.main472.default,
45+
"light": options.redMarianne._850_200.default,
46+
"dark": options.redMarianne._425_625.default,
47+
"contrastText": options.redMarianne._975_75.default
48+
*/
3749
"main": decisions.background.actionHigh.redMarianne.default,
3850
"light": decisions.background.actionLow.redMarianne.default
39-
}
40-
/*
41-
"primary": {
42-
"900": colorOptions.blueFrance._925_125.default,
43-
"800": colorOptions.blueFrance._850_200.default,
4451
},
45-
"secondary": {
46-
"main": colorDecisions.background.actionHigh.redMarianne.default,
47-
"light": colorDecisions.background.actionLow.redMarianne.default,
52+
"error": {
53+
"light": options.error._950_100.default,
54+
"main": options.error._425_625.default,
55+
"dark": options.error._425_625.default,
56+
"contrastText": options.grey._1000_50.default
57+
},
58+
"warning": {
59+
"light": options.warning._950_100.default,
60+
"main": options.warning._425_625.default,
61+
"dark": options.warning._425_625.default,
62+
"contrastText": options.grey._1000_50.default
63+
},
64+
"info": {
65+
"light": options.info._950_100.default,
66+
"main": options.info._425_625.default,
67+
"dark": options.info._425_625.default,
68+
"contrastText": options.grey._1000_50.default
4869
},
49-
*/
70+
"success": {
71+
"light": options.success._950_100.default,
72+
"main": options.success._425_625.default,
73+
"dark": options.success._425_625.default,
74+
"contrastText": options.grey._1000_50.default
75+
},
76+
"text": {
77+
"primary": options.grey._50_1000.default,
78+
"secondary": options.grey._200_850.default,
79+
"disabled": options.grey._625_425.default,
80+
"hint": options.grey._425_625.default
81+
},
82+
"divider": options.grey._900_175.default,
83+
"action": {
84+
"default": options.blueFrance.sun113_625.default,
85+
"active": options.blueFrance.sun113_625.active,
86+
"hover": options.blueFrance.sun113_625.hover,
87+
"selected": options.blueFrance.sun113_625.active,
88+
"disabled": options.grey._625_425.default,
89+
"disabledBackground": options.grey._925_125.default,
90+
"focus": options.blueFrance.sun113_625.active
91+
},
92+
"background": {
93+
"default": options.grey._1000_50.default,
94+
"paper": options.grey._975_75.default,
95+
"paperHover": options.grey._975_75.hover
96+
}
5097
} as const;
5198
})(),
5299
"typography": (() => {
@@ -141,43 +188,3 @@ export function noAugmentation(params: { nonAugmentedMuiTheme: MuiTheme }) {
141188
const { nonAugmentedMuiTheme } = params;
142189
return nonAugmentedMuiTheme;
143190
}
144-
145-
/*
146-
const muiTheme = createMuiTheme({
147-
"shape": {
148-
"borderRadius": 0
149-
},
150-
"breakpoints": {
151-
"unit": "em",
152-
"values": {
153-
"xs": 0,
154-
"sm": number,
155-
"md": number,
156-
"lg": number,
157-
"xl": number,
158-
},
159-
},
160-
"typography": {
161-
"h1": {
162-
"color": "red",
163-
[breakpoints.up("md")]: {
164-
"color": "pink"
165-
}
166-
167-
}
168-
}
169-
"palette": createMuiPaletteOptions({
170-
isDarkModeEnabled,
171-
palette,
172-
useCases,
173-
}),
174-
spacing,
175-
"components": {
176-
"MuiLink": {
177-
"defaultProps": {
178-
"underline": "hover",
179-
},
180-
},
181-
},
182-
});
183-
*/

test/integration/cra/src/Mui.tsx

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,11 +240,38 @@ const { ComboBox } = (() => {
240240

241241
function BasicButtons() {
242242
return (
243-
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
244-
<Button variant="text">Text</Button>
245-
<Button variant="contained">Contained</Button>
246-
<Button variant="outlined">Outlined</Button>
247-
</Stack>
243+
<>
244+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
245+
<Button variant="text">Text</Button>
246+
<Button variant="contained">Contained</Button>
247+
<Button variant="outlined">Outlined</Button>
248+
</Stack>
249+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
250+
<Button color="secondary">Secondary</Button>
251+
<Button color="secondary" variant="contained">Secondary contained</Button>
252+
<Button color="secondary" variant="outlined">Secondary contained</Button>
253+
</Stack>
254+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
255+
<Button color="success">Success</Button>
256+
<Button color="success" variant="contained">Success contained</Button>
257+
<Button color="success" variant="outlined">Success contained</Button>
258+
</Stack>
259+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
260+
<Button color="info">Info</Button>
261+
<Button color="info" variant="contained">Info contained</Button>
262+
<Button color="info" variant="outlined">Info contained</Button>
263+
</Stack>
264+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
265+
<Button color="warning">Warning</Button>
266+
<Button color="warning" variant="contained">Warning contained</Button>
267+
<Button color="warning" variant="outlined">Warning contained</Button>
268+
</Stack>
269+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
270+
<Button color="error">Error</Button>
271+
<Button color="error" variant="contained">Error contained</Button>
272+
<Button color="error" variant="outlined">Error contained</Button>
273+
</Stack>
274+
</>
248275
);
249276
}
250277

test/integration/next/pages/mui.tsx

Lines changed: 70 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -241,11 +241,38 @@ const { ComboBox } = (() => {
241241

242242
function BasicButtons() {
243243
return (
244-
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
245-
<Button variant="text">Text</Button>
246-
<Button variant="contained">Contained</Button>
247-
<Button variant="outlined">Outlined</Button>
248-
</Stack>
244+
<>
245+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
246+
<Button variant="text">Text</Button>
247+
<Button variant="contained">Contained</Button>
248+
<Button variant="outlined">Outlined</Button>
249+
</Stack>
250+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
251+
<Button color="secondary">Secondary</Button>
252+
<Button color="secondary" variant="contained">Secondary contained</Button>
253+
<Button color="secondary" variant="outlined">Secondary contained</Button>
254+
</Stack>
255+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
256+
<Button color="success">Success</Button>
257+
<Button color="success" variant="contained">Success contained</Button>
258+
<Button color="success" variant="outlined">Success contained</Button>
259+
</Stack>
260+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
261+
<Button color="info">Info</Button>
262+
<Button color="info" variant="contained">Info contained</Button>
263+
<Button color="info" variant="outlined">Info contained</Button>
264+
</Stack>
265+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
266+
<Button color="warning">Warning</Button>
267+
<Button color="warning" variant="contained">Warning contained</Button>
268+
<Button color="warning" variant="outlined">Warning contained</Button>
269+
</Stack>
270+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
271+
<Button color="error">Error</Button>
272+
<Button color="error" variant="contained">Error contained</Button>
273+
<Button color="error" variant="outlined">Error contained</Button>
274+
</Stack>
275+
</>
249276
);
250277
}
251278

@@ -303,44 +330,44 @@ function IconMenu() {
303330
}
304331

305332
function MaterialUIPickers() {
306-
const [value, setValue] = React.useState<Dayjs | null>(
307-
dayjs('2014-08-18T21:11:54'),
308-
);
333+
const [value, setValue] = React.useState<Dayjs | null>(
334+
dayjs('2014-08-18T21:11:54'),
335+
);
309336

310-
const handleChange = (newValue: Dayjs | null) => {
311-
setValue(newValue);
312-
};
337+
const handleChange = (newValue: Dayjs | null) => {
338+
setValue(newValue);
339+
};
313340

314-
return (
315-
<LocalizationProvider dateAdapter={AdapterDayjs}>
316-
<Stack spacing={3} sx={{ mt: 7 }}>
317-
<DesktopDatePicker
318-
label="Date desktop"
319-
inputFormat="MM/DD/YYYY"
320-
value={value}
321-
onChange={handleChange}
322-
renderInput={(params) => <TextField {...params} />}
323-
/>
324-
<MobileDatePicker
325-
label="Date mobile"
326-
inputFormat="MM/DD/YYYY"
327-
value={value}
328-
onChange={handleChange}
329-
renderInput={(params) => <TextField {...params} />}
330-
/>
331-
<TimePicker
332-
label="Time"
333-
value={value}
334-
onChange={handleChange}
335-
renderInput={(params) => <TextField {...params} />}
336-
/>
337-
<DateTimePicker
338-
label="Date&Time picker"
339-
value={value}
340-
onChange={handleChange}
341-
renderInput={(params) => <TextField {...params} />}
342-
/>
343-
</Stack>
344-
</LocalizationProvider>
345-
);
341+
return (
342+
<LocalizationProvider dateAdapter={AdapterDayjs}>
343+
<Stack spacing={3} sx={{ mt: 7 }}>
344+
<DesktopDatePicker
345+
label="Date desktop"
346+
inputFormat="MM/DD/YYYY"
347+
value={value}
348+
onChange={handleChange}
349+
renderInput={(params) => <TextField {...params} />}
350+
/>
351+
<MobileDatePicker
352+
label="Date mobile"
353+
inputFormat="MM/DD/YYYY"
354+
value={value}
355+
onChange={handleChange}
356+
renderInput={(params) => <TextField {...params} />}
357+
/>
358+
<TimePicker
359+
label="Time"
360+
value={value}
361+
onChange={handleChange}
362+
renderInput={(params) => <TextField {...params} />}
363+
/>
364+
<DateTimePicker
365+
label="Date&Time picker"
366+
value={value}
367+
onChange={handleChange}
368+
renderInput={(params) => <TextField {...params} />}
369+
/>
370+
</Stack>
371+
</LocalizationProvider>
372+
);
346373
}

test/integration/vite/src/Mui.tsx

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,11 +240,38 @@ const { ComboBox } = (() => {
240240

241241
function BasicButtons() {
242242
return (
243-
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
244-
<Button variant="text">Text</Button>
245-
<Button variant="contained">Contained</Button>
246-
<Button variant="outlined">Outlined</Button>
247-
</Stack>
243+
<>
244+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
245+
<Button variant="text">Text</Button>
246+
<Button variant="contained">Contained</Button>
247+
<Button variant="outlined">Outlined</Button>
248+
</Stack>
249+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
250+
<Button color="secondary">Secondary</Button>
251+
<Button color="secondary" variant="contained">Secondary contained</Button>
252+
<Button color="secondary" variant="outlined">Secondary contained</Button>
253+
</Stack>
254+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
255+
<Button color="success">Success</Button>
256+
<Button color="success" variant="contained">Success contained</Button>
257+
<Button color="success" variant="outlined">Success contained</Button>
258+
</Stack>
259+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
260+
<Button color="info">Info</Button>
261+
<Button color="info" variant="contained">Info contained</Button>
262+
<Button color="info" variant="outlined">Info contained</Button>
263+
</Stack>
264+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
265+
<Button color="warning">Warning</Button>
266+
<Button color="warning" variant="contained">Warning contained</Button>
267+
<Button color="warning" variant="outlined">Warning contained</Button>
268+
</Stack>
269+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
270+
<Button color="error">Error</Button>
271+
<Button color="error" variant="contained">Error contained</Button>
272+
<Button color="error" variant="outlined">Error contained</Button>
273+
</Stack>
274+
</>
248275
);
249276
}
250277

0 commit comments

Comments
 (0)