@groupeactual/design-tokens 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.mjs +1 -1
- package/dist/es/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/css/form/autoCompleteCss.ts +105 -96
- package/src/css/form/datePickerCss.ts +19 -13
- package/src/css/form/selectCss.ts +82 -70
- package/src/css/form/textFieldCss.ts +56 -54
|
@@ -1,54 +1,65 @@
|
|
|
1
1
|
const AutoCompleteCss = (
|
|
2
|
-
muiTokens: Record<string, string | number | any
|
|
2
|
+
muiTokens: Record<string, string | number | any>,
|
|
3
3
|
): Record<string, unknown> => {
|
|
4
4
|
return {
|
|
5
5
|
'&.MuiFormControl-root': {
|
|
6
6
|
zIndex: 1,
|
|
7
|
+
'.MuiInputBase-root': {
|
|
8
|
+
backgroundColor: muiTokens.palette.white,
|
|
9
|
+
height: '44px',
|
|
10
|
+
padding: 0 + ' !important',
|
|
11
|
+
},
|
|
12
|
+
'.Mui-disabled': {
|
|
13
|
+
'.MuiOutlinedInput-notchedOutline': {
|
|
14
|
+
borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
'.MuiFormLabel-root.Mui-focused': {
|
|
18
|
+
transform: 'translate(14px, -7px) scale(0.75) !important',
|
|
19
|
+
},
|
|
20
|
+
'.MuiFormLabel-filled': {
|
|
21
|
+
transform: 'translate(14px, -7px) scale(0.75) !important',
|
|
22
|
+
},
|
|
23
|
+
'.MuiFormLabel-root.Mui-Input-filled': {
|
|
24
|
+
transform: 'translate(14px, -7px) scale(0.75) !important',
|
|
25
|
+
},
|
|
7
26
|
'.MuiOutlinedInput-root': {
|
|
8
27
|
height: '22px',
|
|
9
28
|
},
|
|
10
29
|
'.MuiChip-deleteIcon .MuiSvgIcon-root': {
|
|
11
|
-
color: muiTokens.palette.blueClickable
|
|
30
|
+
color: muiTokens.palette.blueClickable,
|
|
31
|
+
},
|
|
32
|
+
'.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
33
|
+
borderWidth: '1px',
|
|
34
|
+
borderColor: muiTokens.palette.blueClickable + ' !important',
|
|
12
35
|
},
|
|
13
|
-
'
|
|
36
|
+
'&:hover': {
|
|
14
37
|
'.MuiOutlinedInput-notchedOutline': {
|
|
15
|
-
borderColor: muiTokens.palette.
|
|
16
|
-
}
|
|
38
|
+
borderColor: muiTokens.palette.greyDark,
|
|
39
|
+
},
|
|
17
40
|
},
|
|
18
41
|
'.MuiOutlinedInput-notchedOutline': {
|
|
19
42
|
borderColor: muiTokens.palette.greyLightDefaultBorder,
|
|
20
43
|
borderWidth: '1px !important',
|
|
21
|
-
fontSize: '16px !important'
|
|
44
|
+
fontSize: '16px !important',
|
|
22
45
|
},
|
|
23
|
-
'
|
|
46
|
+
'&.Mui-disabled': {
|
|
24
47
|
'.MuiAutocomplete-endAdornment .SelectIcon': {
|
|
25
|
-
color: `${muiTokens.palette.greyMediumInactive} !important
|
|
48
|
+
color: `${muiTokens.palette.greyMediumInactive} !important`,
|
|
26
49
|
},
|
|
27
|
-
|
|
50
|
+
input: {
|
|
28
51
|
backgroundColor: muiTokens.palette.greyXLight,
|
|
29
52
|
color: muiTokens.palette.greyDark,
|
|
30
53
|
borderColor: muiTokens.palette.greyLightDefaultBorder,
|
|
31
|
-
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
54
|
+
WebkitTextFillColor: muiTokens.palette.greyDark,
|
|
32
55
|
},
|
|
33
|
-
|
|
56
|
+
label: {
|
|
34
57
|
background: 'transparent',
|
|
35
58
|
backgroundColor: 'transparent !important',
|
|
36
|
-
color:
|
|
59
|
+
color: muiTokens.palette.greyDark + ' !important',
|
|
60
|
+
'-webkit-text-fill-color': muiTokens.palette.greyDark,
|
|
37
61
|
},
|
|
38
|
-
color: muiTokens.palette.greyDark
|
|
39
|
-
},
|
|
40
|
-
'.MuiInputBase-root': {
|
|
41
|
-
height: '44px',
|
|
42
|
-
padding: 0 + ' !important'
|
|
43
|
-
},
|
|
44
|
-
'.MuiFormLabel-root.Mui-focused': {
|
|
45
|
-
transform: 'translate(14px, -7px) scale(0.75) !important'
|
|
46
|
-
},
|
|
47
|
-
'.MuiFormLabel-filled': {
|
|
48
|
-
transform: 'translate(14px, -7px) scale(0.75) !important'
|
|
49
|
-
},
|
|
50
|
-
'.MuiFormLabel-root.Mui-Input-filled': {
|
|
51
|
-
transform: 'translate(14px, -7px) scale(0.75) !important'
|
|
62
|
+
color: muiTokens.palette.greyDark,
|
|
52
63
|
},
|
|
53
64
|
'.MuiInputLabel-root': {
|
|
54
65
|
lineHeight: '16px',
|
|
@@ -58,10 +69,10 @@ const AutoCompleteCss = (
|
|
|
58
69
|
transform: 'translate(8px, 16px) scale(1)',
|
|
59
70
|
color: muiTokens.palette.greyXDark,
|
|
60
71
|
'&.Mui-error': {
|
|
61
|
-
color: `${muiTokens.palette.redError} !important
|
|
72
|
+
color: `${muiTokens.palette.redError} !important`,
|
|
62
73
|
},
|
|
63
74
|
'&.Mui-success': {
|
|
64
|
-
color: `${muiTokens.palette.greenSuccess} !important
|
|
75
|
+
color: `${muiTokens.palette.greenSuccess} !important`,
|
|
65
76
|
},
|
|
66
77
|
'&.Mui-focused': {
|
|
67
78
|
lineHeight: '16px',
|
|
@@ -69,101 +80,101 @@ const AutoCompleteCss = (
|
|
|
69
80
|
fontSize: '16px',
|
|
70
81
|
color: `${muiTokens.palette.blueClickable}`,
|
|
71
82
|
'&.Mui-error': {
|
|
72
|
-
color: `${muiTokens.palette.redError} !important
|
|
83
|
+
color: `${muiTokens.palette.redError} !important`,
|
|
73
84
|
},
|
|
74
85
|
'&.Mui-success': {
|
|
75
|
-
color: muiTokens.palette.greenSuccess
|
|
76
|
-
}
|
|
77
|
-
}
|
|
86
|
+
color: muiTokens.palette.greenSuccess,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
78
89
|
},
|
|
79
90
|
'.MuiFormHelperText-root': {
|
|
80
91
|
color: muiTokens.palette.greyDark,
|
|
81
92
|
marginTop: '8px',
|
|
82
93
|
marginLeft: '8px',
|
|
83
94
|
'&.Mui-error': {
|
|
84
|
-
color: muiTokens.palette.redError
|
|
85
|
-
}
|
|
95
|
+
color: muiTokens.palette.redError,
|
|
96
|
+
},
|
|
86
97
|
},
|
|
87
98
|
'.MuiAutocomplete-clearIndicator': {
|
|
88
|
-
backgroundColor: 'transparent'
|
|
99
|
+
backgroundColor: 'transparent',
|
|
89
100
|
},
|
|
90
101
|
'.MuiAutocomplete-popupIndicator': {
|
|
91
|
-
backgroundColor: 'transparent'
|
|
102
|
+
backgroundColor: 'transparent',
|
|
92
103
|
},
|
|
93
104
|
'.clear': {
|
|
94
105
|
alignSelf: 'center',
|
|
95
|
-
position: 'relative'
|
|
106
|
+
position: 'relative',
|
|
96
107
|
},
|
|
97
108
|
'&.MuiAutocomplete-listbox': {
|
|
98
109
|
'.clear': {
|
|
99
|
-
visibility: 'visible'
|
|
100
|
-
}
|
|
110
|
+
visibility: 'visible',
|
|
111
|
+
},
|
|
101
112
|
},
|
|
102
113
|
'&.MuiMenuItem-root': {
|
|
103
|
-
border: '1px solid green'
|
|
114
|
+
border: '1px solid green',
|
|
104
115
|
},
|
|
105
116
|
'& .Mui-focused': {
|
|
106
|
-
borderColor: muiTokens.palette.blueClickable
|
|
117
|
+
borderColor: muiTokens.palette.blueClickable,
|
|
107
118
|
},
|
|
108
119
|
'& .Mui-hover': {
|
|
109
|
-
borderColor: muiTokens.palette.greyDark
|
|
120
|
+
borderColor: muiTokens.palette.greyDark,
|
|
110
121
|
},
|
|
111
122
|
'& .MuiMenuItem-root': {
|
|
112
|
-
border: '1px solid green'
|
|
123
|
+
border: '1px solid green',
|
|
113
124
|
},
|
|
114
125
|
'.MuiMenuItem-root': {
|
|
115
|
-
border: '1px solid green'
|
|
126
|
+
border: '1px solid green',
|
|
116
127
|
},
|
|
117
128
|
'&.Mui-filled': {
|
|
118
129
|
'.MuiAutocomplete-popupIndicator': {
|
|
119
|
-
backgroundColor: 'transparent'
|
|
130
|
+
backgroundColor: 'transparent',
|
|
120
131
|
},
|
|
121
132
|
'.Mui-success': {
|
|
122
133
|
'& button[title="Close"].MuiAutocomplete-popupIndicator': {
|
|
123
134
|
'& span': {
|
|
124
135
|
position: 'relative',
|
|
125
|
-
transform: 'none'
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
136
|
+
transform: 'none',
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
},
|
|
129
140
|
},
|
|
130
141
|
'.Mui-error': {
|
|
131
142
|
color: muiTokens.palette.redError,
|
|
132
143
|
'& fieldset': {
|
|
133
|
-
borderColor: muiTokens.palette.redError
|
|
134
|
-
}
|
|
144
|
+
borderColor: muiTokens.palette.redError,
|
|
145
|
+
},
|
|
135
146
|
},
|
|
136
147
|
'.Mui-success': {
|
|
137
148
|
color: muiTokens.palette.greenSuccess,
|
|
138
149
|
'& fieldset': {
|
|
139
|
-
borderColor: muiTokens.palette.greenSuccess
|
|
150
|
+
borderColor: muiTokens.palette.greenSuccess,
|
|
140
151
|
},
|
|
141
152
|
'& span': {
|
|
142
153
|
color: muiTokens.palette.greenSuccess,
|
|
143
|
-
transform: 'none'
|
|
154
|
+
transform: 'none',
|
|
144
155
|
},
|
|
145
156
|
'& .MuiChip-label': {
|
|
146
|
-
color: 'unset'
|
|
157
|
+
color: 'unset',
|
|
147
158
|
},
|
|
148
159
|
'& .clear': {
|
|
149
160
|
'& span': {
|
|
150
|
-
color: muiTokens.palette.blueClickable
|
|
151
|
-
}
|
|
161
|
+
color: muiTokens.palette.blueClickable,
|
|
162
|
+
},
|
|
152
163
|
},
|
|
153
164
|
'& .MuiAutocomplete-popupIndicatorOpen': {
|
|
154
|
-
transform: 'none'
|
|
165
|
+
transform: 'none',
|
|
155
166
|
},
|
|
156
167
|
'& button[title="Close"].MuiAutocomplete-popupIndicator': {
|
|
157
168
|
'& span': {
|
|
158
169
|
position: 'relative',
|
|
159
|
-
transform: 'none'
|
|
160
|
-
}
|
|
161
|
-
}
|
|
170
|
+
transform: 'none',
|
|
171
|
+
},
|
|
172
|
+
},
|
|
162
173
|
},
|
|
163
174
|
'.labelClassic': {
|
|
164
175
|
'.MuiFormLabel-root': {
|
|
165
|
-
transform: 'translate(14px, -7px) scale(0.75) !important'
|
|
166
|
-
}
|
|
176
|
+
transform: 'translate(14px, -7px) scale(0.75) !important',
|
|
177
|
+
},
|
|
167
178
|
},
|
|
168
179
|
'.labelCustom': {
|
|
169
180
|
'& label': {
|
|
@@ -174,16 +185,16 @@ const AutoCompleteCss = (
|
|
|
174
185
|
fontWeight: '400',
|
|
175
186
|
marginTop: '-3px',
|
|
176
187
|
'&.Mui-focused': {
|
|
177
|
-
color: muiTokens.palette.blueClickable
|
|
178
|
-
}
|
|
188
|
+
color: muiTokens.palette.blueClickable,
|
|
189
|
+
},
|
|
179
190
|
},
|
|
180
191
|
'& .MuiInputLabel-shrink': {
|
|
181
192
|
lineHeight: '16px',
|
|
182
193
|
fontWeight: '500',
|
|
183
194
|
fontSize: '16px',
|
|
184
195
|
marginTop: '2px',
|
|
185
|
-
color: muiTokens.palette.greyXDark
|
|
186
|
-
}
|
|
196
|
+
color: muiTokens.palette.greyXDark,
|
|
197
|
+
},
|
|
187
198
|
},
|
|
188
199
|
'.MuiOutlinedInput-input': {
|
|
189
200
|
fontSize: '14px',
|
|
@@ -194,24 +205,24 @@ const AutoCompleteCss = (
|
|
|
194
205
|
opacity: 1 + ' !important',
|
|
195
206
|
color: `${muiTokens.palette.greyDark as string}`,
|
|
196
207
|
'&.Mui-focused': {
|
|
197
|
-
marginTop: '0px'
|
|
208
|
+
marginTop: '0px',
|
|
198
209
|
},
|
|
199
210
|
'&.Mui-disabled': {
|
|
200
|
-
color: muiTokens.palette.greyDark
|
|
211
|
+
color: muiTokens.palette.greyDark,
|
|
201
212
|
},
|
|
202
213
|
'&::placeholder': {
|
|
203
214
|
color: `${muiTokens.palette.greyDark as string} !important`,
|
|
204
215
|
opacity: 1 + ' !important',
|
|
205
216
|
fontWeight: 400,
|
|
206
217
|
lineHeight: '18px',
|
|
207
|
-
fontSize: '14px'
|
|
208
|
-
}
|
|
209
|
-
}
|
|
218
|
+
fontSize: '14px',
|
|
219
|
+
},
|
|
220
|
+
},
|
|
210
221
|
},
|
|
211
222
|
'&.Mui-filled': {
|
|
212
223
|
'.MuiOutlinedInput-input': {
|
|
213
|
-
color: `${muiTokens.palette.greyXDark as string}
|
|
214
|
-
}
|
|
224
|
+
color: `${muiTokens.palette.greyXDark as string}`,
|
|
225
|
+
},
|
|
215
226
|
},
|
|
216
227
|
'&.DsAutoComplete': {
|
|
217
228
|
'.MuiAutocomplete-endAdornment': {
|
|
@@ -227,67 +238,65 @@ const AutoCompleteCss = (
|
|
|
227
238
|
},
|
|
228
239
|
'.MuiInputBase-root': {
|
|
229
240
|
minHeight: '44px',
|
|
230
|
-
height: 'auto'
|
|
241
|
+
height: 'auto',
|
|
231
242
|
},
|
|
232
243
|
'&.MuiMenuItem-root': {
|
|
233
|
-
border: '1px solid green'
|
|
244
|
+
border: '1px solid green',
|
|
234
245
|
},
|
|
235
246
|
'& .MuiMenuItem-root': {
|
|
236
|
-
border: '1px solid green'
|
|
247
|
+
border: '1px solid green',
|
|
237
248
|
},
|
|
238
249
|
'.MuiMenuItem-root': {
|
|
239
|
-
border: '1px solid green'
|
|
250
|
+
border: '1px solid green',
|
|
240
251
|
},
|
|
241
252
|
'.MuiAutocomplete-popupIndicator': {
|
|
242
|
-
backgroundColor: 'transparent'
|
|
253
|
+
backgroundColor: 'transparent',
|
|
243
254
|
},
|
|
244
255
|
'.Mui-disabled': {
|
|
245
|
-
color: muiTokens.palette.greyDark,
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
256
|
+
color: muiTokens.palette.greyDark + ' !important',
|
|
257
|
+
backgroundColor: muiTokens.palette.greyXLight + ' !important',
|
|
258
|
+
WebkitTextFillColor: muiTokens.palette.greyDark + ' !important',
|
|
249
259
|
},
|
|
250
260
|
'.Mui-success': {
|
|
251
261
|
'& button[title="Close"].MuiAutocomplete-popupIndicator': {
|
|
252
262
|
position: 'relative',
|
|
253
|
-
transform: 'none'
|
|
254
|
-
}
|
|
255
|
-
}
|
|
263
|
+
transform: 'none',
|
|
264
|
+
},
|
|
265
|
+
},
|
|
256
266
|
},
|
|
257
267
|
'&.DsAutoComplete.Mui-filled': {
|
|
258
268
|
'.MuiOutlinedInput-input': {
|
|
259
269
|
color: `${muiTokens.palette.greyXDark as string} !important`,
|
|
260
|
-
padding: '0px 7px 0px 7px !important'
|
|
270
|
+
padding: '0px 7px 0px 7px !important',
|
|
261
271
|
},
|
|
262
272
|
' .MuiOutlinedInput-root': {
|
|
263
|
-
padding: '7px 31px 7px 4px !important'
|
|
273
|
+
padding: '7px 31px 7px 4px !important',
|
|
264
274
|
},
|
|
265
275
|
'.MuiAutocomplete-popupIndicator': {
|
|
266
|
-
backgroundColor: 'transparent'
|
|
276
|
+
backgroundColor: 'transparent',
|
|
267
277
|
},
|
|
268
278
|
'.Mui-disabled': {
|
|
269
279
|
color: muiTokens.palette.greyDark,
|
|
270
|
-
borderColor: muiTokens.palette.greyLightDefaultBorder,
|
|
271
280
|
backgroundColor: muiTokens.palette.greyXLight,
|
|
272
281
|
WebkitTextFillColor: muiTokens.palette.greyDark,
|
|
273
282
|
'.MuiAutocomplete-popupIndicator': {
|
|
274
|
-
backgroundColor: 'transparent'
|
|
275
|
-
}
|
|
276
|
-
}
|
|
283
|
+
backgroundColor: 'transparent',
|
|
284
|
+
},
|
|
285
|
+
},
|
|
277
286
|
},
|
|
278
287
|
'.MenuItem ': {
|
|
279
288
|
backgroundColor: 'white',
|
|
280
289
|
fontWeight: 400,
|
|
281
290
|
whiteSpace: 'break-spaces',
|
|
282
|
-
wordBreak: 'break-word'
|
|
291
|
+
wordBreak: 'break-word',
|
|
283
292
|
},
|
|
284
293
|
'.MenuItem[aria-selected="true"]': {
|
|
285
294
|
backgroundColor: muiTokens.palette.greyXLight,
|
|
286
|
-
fontWeight: 500
|
|
295
|
+
fontWeight: 500,
|
|
287
296
|
},
|
|
288
297
|
'.MenuItem:hover': {
|
|
289
|
-
backgroundColor: muiTokens.palette.blueHoverEquivalence
|
|
290
|
-
}
|
|
298
|
+
backgroundColor: muiTokens.palette.blueHoverEquivalence,
|
|
299
|
+
},
|
|
291
300
|
};
|
|
292
301
|
};
|
|
293
302
|
|
|
@@ -3,6 +3,17 @@ const DatePickerCss = (
|
|
|
3
3
|
muiTokens: Record<string, string | number | any>,
|
|
4
4
|
): Record<string, unknown> => {
|
|
5
5
|
return {
|
|
6
|
+
'.MuiInputBase-root': {
|
|
7
|
+
backgroundColor: muiTokens.palette.white,
|
|
8
|
+
height: 44,
|
|
9
|
+
fontSize: '14px',
|
|
10
|
+
'&.Mui-disabled': {
|
|
11
|
+
backgroundColor: muiTokens.palette.greyXLight + ' !important',
|
|
12
|
+
'.MuiSvgIcon-root': {
|
|
13
|
+
color: muiTokens.palette.greyMediumInactive,
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
6
17
|
'.MuiTextField-root': {
|
|
7
18
|
width: 'inherit',
|
|
8
19
|
},
|
|
@@ -24,6 +35,11 @@ const DatePickerCss = (
|
|
|
24
35
|
color: muiTokens.palette.redError + ' !important',
|
|
25
36
|
},
|
|
26
37
|
},
|
|
38
|
+
'.Mui-disabled': {
|
|
39
|
+
'.MuiOutlinedInput-notchedOutline': {
|
|
40
|
+
borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
27
43
|
'.Mui-success': {
|
|
28
44
|
'.MuiInputLabel-root': {
|
|
29
45
|
color: muiTokens.palette.greenSuccess + ' !important',
|
|
@@ -52,16 +68,6 @@ const DatePickerCss = (
|
|
|
52
68
|
'-webkit-text-fill-color': muiTokens.palette.greyDark,
|
|
53
69
|
},
|
|
54
70
|
},
|
|
55
|
-
'.MuiInputBase-root': {
|
|
56
|
-
height: 44,
|
|
57
|
-
fontSize: '14px',
|
|
58
|
-
'&.Mui-disabled': {
|
|
59
|
-
backgroundColor: muiTokens.palette.greyXLight + ' !important',
|
|
60
|
-
'.MuiSvgIcon-root': {
|
|
61
|
-
color: muiTokens.palette.greyMediumInactive,
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
71
|
'.MuiOutlinedInput-root': {
|
|
66
72
|
padding: '13px 14.5px 13px 8px !important',
|
|
67
73
|
'& fieldset': {
|
|
@@ -78,7 +84,6 @@ const DatePickerCss = (
|
|
|
78
84
|
},
|
|
79
85
|
'.MuiInputLabel-root': {
|
|
80
86
|
marginTop: '-4px',
|
|
81
|
-
marginLeft: '-7px',
|
|
82
87
|
color: muiTokens.palette.greyDark,
|
|
83
88
|
fontSize: '14px',
|
|
84
89
|
'&.Mui-disabled': {
|
|
@@ -87,12 +92,13 @@ const DatePickerCss = (
|
|
|
87
92
|
},
|
|
88
93
|
'.MuiInputLabel-shrink': {
|
|
89
94
|
marginTop: '4px',
|
|
95
|
+
marginLeft: '0px',
|
|
90
96
|
lineHeight: '16px',
|
|
91
97
|
fontWeight: '500',
|
|
92
98
|
fontSize: '16px',
|
|
93
99
|
},
|
|
94
100
|
'.MuiFormLabel-filled': {
|
|
95
|
-
marginTop: '
|
|
101
|
+
marginTop: '6px',
|
|
96
102
|
lineHeight: '16px',
|
|
97
103
|
fontWeight: '500',
|
|
98
104
|
marginLeft: '0px',
|
|
@@ -106,4 +112,4 @@ const DatePickerCss = (
|
|
|
106
112
|
};
|
|
107
113
|
};
|
|
108
114
|
|
|
109
|
-
export default DatePickerCss;
|
|
115
|
+
export default DatePickerCss;
|