@@ -9,33 +9,35 @@ import { useIsDark } from "./lib/darkMode";
9
9
import { typography } from "./lib/generatedFromCss/typography" ;
10
10
import { spacingTokenByValue } from "./lib/generatedFromCss/spacing" ;
11
11
import type { ColorTheme } from "./lib/colors" ;
12
- import { memoize } from "./lib/tools/memoize" ;
13
12
import type { Theme as NonAugmentedMuiTheme } from "./lib/tools/@mui/material/styles/createTheme" ;
13
+ import { assert } from "tsafe/assert" ;
14
+ import { objectKeys } from "tsafe/objectKeys" ;
14
15
15
- const createMuiDsfrTheme = memoize (
16
- ( isDark : boolean ) : MuiTheme => {
17
- const muiTheme = createTheme ( {
18
- "shape" : {
19
- "borderRadius" : 0
20
- } ,
21
- "breakpoints" : {
22
- "unit" : breakpointValuesUnit ,
23
- "values" : breakpointValues
24
- } ,
25
- "palette" : ( ( ) => {
26
- const { decisions } = getColors ( isDark ) ;
27
-
28
- return {
29
- "mode" : isDark ? "dark" : "light" ,
30
- "primary" : {
31
- "main" : decisions . background . actionHigh . blueFrance . default ,
32
- "light" : decisions . background . actionLow . blueFrance . default
33
- } ,
34
- "secondary" : {
35
- "main" : decisions . background . actionHigh . redMarianne . default ,
36
- "light" : decisions . background . actionLow . redMarianne . default
37
- }
38
- /*
16
+ function createMuiDsfrTheme ( params : { isDark : boolean } ) : MuiTheme {
17
+ const { isDark } = params ;
18
+
19
+ const muiTheme = createTheme ( {
20
+ "shape" : {
21
+ "borderRadius" : 0
22
+ } ,
23
+ "breakpoints" : {
24
+ "unit" : breakpointValuesUnit ,
25
+ "values" : breakpointValues
26
+ } ,
27
+ "palette" : ( ( ) => {
28
+ const { decisions } = getColors ( isDark ) ;
29
+
30
+ return {
31
+ "mode" : isDark ? "dark" : "light" ,
32
+ "primary" : {
33
+ "main" : decisions . background . actionHigh . blueFrance . default ,
34
+ "light" : decisions . background . actionLow . blueFrance . default
35
+ } ,
36
+ "secondary" : {
37
+ "main" : decisions . background . actionHigh . redMarianne . default ,
38
+ "light" : decisions . background . actionLow . redMarianne . default
39
+ }
40
+ /*
39
41
"primary": {
40
42
"900": colorOptions.blueFrance._925_125.default,
41
43
"800": colorOptions.blueFrance._850_200.default,
@@ -45,73 +47,99 @@ const createMuiDsfrTheme = memoize(
45
47
"light": colorDecisions.background.actionLow.redMarianne.default,
46
48
},
47
49
*/
48
- } as const ;
49
- } ) ( ) ,
50
- "typography" : {
50
+ } as const ;
51
+ } ) ( ) ,
52
+ "typography" : ( ( ) => {
53
+ const getBySelector = ( selector : typeof typography [ number ] [ "selector" ] ) => {
54
+ const variant = typography . find ( variant => variant . selector === selector ) ;
55
+ assert ( variant !== undefined ) ;
56
+
57
+ const style = { ...variant . style } ;
58
+
59
+ //TODO: Investigate why we need to do that.
60
+ delete ( style as any ) . margin ;
61
+
62
+ return style ;
63
+ } ;
64
+
65
+ return {
51
66
"fontFamily" : '"Marianne", arial, sans-serif' ,
52
- "h1" : typography . find ( ( { selector } ) => selector === "h1" ) ! . style ,
53
- "h2" : typography . find ( ( { selector } ) => selector === "h2" ) ! . style ,
54
- "h3" : typography . find ( ( { selector } ) => selector === "h3" ) ! . style ,
55
- "h4" : typography . find ( ( { selector } ) => selector === "h4" ) ! . style ,
56
- "h5" : typography . find ( ( { selector } ) => selector === "h5" ) ! . style ,
57
- "h6" : typography . find ( ( { selector } ) => selector === "h6" ) ! . style ,
67
+ "h1" : getBySelector ( "h1" ) ,
68
+ "h2" : getBySelector ( "h2" ) ,
69
+ "h3" : getBySelector ( "h3" ) ,
70
+ "h4" : getBySelector ( "h4" ) ,
71
+ "h5" : getBySelector ( "h5" ) ,
72
+ "h6" : getBySelector ( "h6" ) ,
58
73
//"subtitle1":
59
74
//"subtitle2":
60
- "body1" : typography . find ( ( { selector } ) => selector === "p" ) ! . style
75
+ "body1" : getBySelector ( "p" )
61
76
//"body2": {},
62
77
//"caption": {},
63
78
//"button": {},
64
79
//"overline": {}
65
- } ,
66
- "spacing" : ( ( ) => {
67
- //NOTE: The properties are declared sorted in the object.
68
- const values = Object . values ( spacingTokenByValue ) ;
69
-
70
- return ( abs : string | number ) =>
71
- typeof abs === "string"
72
- ? abs
73
- : abs === 0
74
- ? 0
75
- : ( ( ) => {
76
- const value = values [ abs - 1 ] ;
77
- return value === undefined ? abs : value ;
78
- } ) ( ) ;
79
- } ) ( )
80
- } ) ;
81
-
82
- return muiTheme ;
83
- } ,
84
- { "max" : 1 }
85
- ) ;
86
-
87
- export type MuiDsfrThemeProviderProps = {
88
- children : ReactNode ;
89
- /** If you have implemented theme augmentation */
90
- augmentMuiTheme ?: ( params : {
80
+ } ;
81
+ } ) ( ) ,
82
+ "spacing" : ( ( ) => {
83
+ const values : string [ ] = [ ] ;
84
+
85
+ //NOTE: The properties are declared sorted in the object.
86
+ objectKeys ( spacingTokenByValue ) . forEach ( key => {
87
+ if ( key . endsWith ( "w" ) ) {
88
+ values . push ( spacingTokenByValue [ key ] ) ;
89
+ }
90
+ } ) ;
91
+
92
+ return ( abs : string | number ) =>
93
+ typeof abs === "string"
94
+ ? abs
95
+ : abs === 0
96
+ ? 0
97
+ : ( ( ) => {
98
+ const value = values [ abs - 1 ] ;
99
+ return value === undefined ? abs : value ;
100
+ } ) ( ) ;
101
+ } ) ( )
102
+ } ) ;
103
+
104
+ return muiTheme ;
105
+ }
106
+
107
+ export function createMuiDsfrThemeProvider ( params : {
108
+ augmentMuiTheme : ( params : {
91
109
nonAugmentedMuiTheme : NonAugmentedMuiTheme ;
92
110
frColorTheme : ColorTheme ;
93
111
} ) => MuiTheme ;
94
- } ;
112
+ } ) {
113
+ const { augmentMuiTheme } = params ;
95
114
96
- export function MuiDsfrThemeProvider ( props : MuiDsfrThemeProviderProps ) {
97
- const { children, augmentMuiTheme } = props ;
115
+ type Props = {
116
+ children : ReactNode ;
117
+ /** If you have implemented theme augmentation */
118
+ } ;
98
119
99
- const { isDark } = useIsDark ( ) ;
120
+ function MuiDsfrThemeProvider ( props : Props ) {
121
+ const { children } = props ;
100
122
101
- const theme = useMemo ( ( ) => {
102
- const theme = createMuiDsfrTheme ( isDark ) ;
123
+ const { isDark } = useIsDark ( ) ;
103
124
104
- if ( augmentMuiTheme === undefined ) {
105
- return theme ;
106
- }
125
+ const theme = useMemo (
126
+ ( ) =>
127
+ augmentMuiTheme ( {
128
+ "frColorTheme" : getColors ( isDark ) ,
129
+ "nonAugmentedMuiTheme" : createMuiDsfrTheme ( { isDark } )
130
+ } ) ,
131
+ [ isDark ]
132
+ ) ;
133
+
134
+ return < MuiThemeProvider theme = { theme } > { children } </ MuiThemeProvider > ;
135
+ }
107
136
108
- return augmentMuiTheme ( {
109
- "frColorTheme" : getColors ( isDark ) ,
110
- "nonAugmentedMuiTheme" : theme
111
- } ) ;
112
- } , [ isDark , augmentMuiTheme ] ) ;
137
+ return { MuiDsfrThemeProvider } ;
138
+ }
113
139
114
- return < MuiThemeProvider theme = { theme } > { children } </ MuiThemeProvider > ;
140
+ export function noAugmentation ( params : { nonAugmentedMuiTheme : MuiTheme } ) {
141
+ const { nonAugmentedMuiTheme } = params ;
142
+ return nonAugmentedMuiTheme ;
115
143
}
116
144
117
145
/*
0 commit comments