@m4l/styles 7.1.7 → 7.1.8

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.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/theme/palette/baseChipsPalette.js +210 -78
  3. package/theme/palette/baseColors.js +228 -258
  4. package/theme/palette/baseOpacityColors.js +10 -0
  5. package/theme/palette/defaultColors.d.ts +2 -2
  6. package/theme/palette/defaultColors.js +82 -40
  7. package/theme/palette/presetColors.js +502 -242
  8. package/theme/palette/semanticColors.js +323 -159
  9. package/types/augmentations.d.ts +15 -19
  10. package/types/types.d.ts +38 -18
  11. package/utils/getPaletteByPreset.d.ts +80 -30
  12. package/utils/getPaletteByPreset.js +93 -81
package/theme/palette/semanticColors.js CHANGED
@@ -1,198 +1,362 @@
1
- import { B as t } from "./baseColors.js";
2
- import { B as a } from "./baseOpacityColors.js";
3
- const i = {
1
+ import { B as e } from "./baseColors.js";
2
+ import { B as i } from "./baseOpacityColors.js";
3
+ const a = {
4
4
  info: {
5
- main: t.crayonBlue[50],
6
- lighter: t.crayonBlue[70],
7
- light: t.crayonBlue[60],
8
- dark: t.crayonBlue[40],
9
- darker: t.crayonBlue[20],
10
- contrastText: t.marbleLight[30],
5
+ enabledLight: e.crayonBlue[50],
6
+ // comprobado
7
+ enabledDark: e.crayonBlue[50],
8
+ // comprobado
9
+ hoverLight: e.crayonBlue[40],
10
+ // comprobado,
11
+ hoverDark: e.crayonBlue[40],
12
+ // comprobado,
13
+ activeLight: e.crayonBlue[70],
14
+ // comprobado,
15
+ activeDark: e.crayonBlue[70],
16
+ // comprobado,
17
+ focusLight: e.crayonBlue[80],
18
+ // comprobado,
19
+ focusDark: e.crayonBlue[80],
20
+ // comprobado,
21
+ enabledOpacityLight: i.crayon[20],
22
+ // comprobado
23
+ enabledOpacityDark: i.crayon[20],
24
+ // comprobado,
25
+ hoverOpacityLight: i.crayon[10],
26
+ // comprobado,
27
+ hoverOpacityDark: i.crayon[10],
28
+ // comprobado,
29
+ activeOpacityLight: i.crayon[40],
30
+ // comprobado,
31
+ activeOpacityDark: i.crayon[40],
32
+ // comprobado,
33
+ focusOpacityLight: i.crayon[50],
34
+ // comprobado,
35
+ focusOpacityDark: i.crayon[50],
36
+ // comprobado,
37
+ opacityLight: i.crayon[10],
38
+ // comprobado,
39
+ opacityDark: i.crayon[10],
40
+ // comprobado,
41
+ main: e.crayonBlue[50],
42
+ // comprobado,,
43
+ lighter: e.crayonBlue[70],
44
+ // comprobado,,
45
+ light: e.crayonBlue[40],
46
+ // comprobado,,
47
+ dark: e.crayonBlue[30],
48
+ // comprobado,,
49
+ darker: e.crayonBlue[10],
50
+ // comprobado,,
51
+ contrastText: e.marbleLight[30],
52
+ // comprobado,
11
53
  // Tone colors
12
- toneOpacityLight: t.crayonBlue.toneOpacity10,
13
- toneOpacityDark: t.crayonBlue.toneOpacity20,
14
- // opacity backgrounds light
15
- opacityHoverLight: a.crayon[10],
16
- opacityFocusLight: a.crayon[20],
17
- opacityActiveLight: a.crayon[30],
18
- // opacity backgrounds Dark
19
- opacityHoverDark: a.crayon[20],
20
- opacityFocusDark: a.crayon[30],
21
- opacityActiveDark: a.crayon[40]
54
+ toneOpacityLight: e.crayonBlue[5],
55
+ // comprobado,
56
+ toneOpacityDark: e.crayonBlue[95]
22
57
  },
23
58
  warning: {
24
- main: t.middleYellow[60],
25
- lighter: t.middleYellow[90],
26
- light: t.middleYellow[70],
27
- dark: t.middleYellow[30],
28
- darker: t.middleYellow[20],
29
- contrastText: t.onyx[20],
59
+ enabledLight: e.middleYellow[50],
60
+ // comprobado
61
+ enabledDark: e.middleYellow[50],
62
+ // comprobado
63
+ hoverLight: e.middleYellow[40],
64
+ // comprobado,
65
+ hoverDark: e.middleYellow[40],
66
+ // comprobado,
67
+ activeLight: e.middleYellow[70],
68
+ // comprobado,
69
+ activeDark: e.middleYellow[70],
70
+ // comprobado,
71
+ focusLight: e.middleYellow[80],
72
+ // comprobado,
73
+ focusDark: e.middleYellow[80],
74
+ // comprobado,
75
+ enabledOpacityLight: i.middle[20],
76
+ // comprobado
77
+ enabledOpacityDark: i.middle[20],
78
+ // comprobado,
79
+ hoverOpacityLight: i.middle[10],
80
+ // comprobado,
81
+ hoverOpacityDark: i.middle[10],
82
+ // comprobado,
83
+ activeOpacityLight: i.middle[40],
84
+ // comprobado,
85
+ activeOpacityDark: i.middle[40],
86
+ // comprobado,
87
+ focusOpacityLight: i.middle[50],
88
+ // comprobado,
89
+ focusOpacityDark: i.middle[50],
90
+ // comprobado,
91
+ opacityLight: i.middle[10],
92
+ // comprobado,
93
+ opacityDark: i.middle[10],
94
+ // comprobado,
95
+ main: e.middleYellow[50],
96
+ // comprobado,,
97
+ lighter: e.middleYellow[70],
98
+ // comprobado,,
99
+ light: e.middleYellow[40],
100
+ // comprobado,,
101
+ dark: e.middleYellow[30],
102
+ // comprobado,,
103
+ darker: e.middleYellow[10],
104
+ // comprobado,,
105
+ contrastText: e.onyx[20],
106
+ // comprobado,
30
107
  // Tone colors
31
- toneOpacityLight: t.middleYellow.toneOpacity10,
32
- toneOpacityDark: t.middleYellow.toneOpacity20,
33
- // opacity backgrounds light
34
- opacityHoverLight: a.middle[10],
35
- opacityFocusLight: a.middle[20],
36
- opacityActiveLight: a.middle[30],
37
- // opacity backgrounds Dark
38
- opacityHoverDark: a.middle[20],
39
- opacityFocusDark: a.middle[30],
40
- opacityActiveDark: a.middle[40]
108
+ toneOpacityLight: e.middleYellow[5],
109
+ // comprobado,
110
+ toneOpacityDark: e.middleYellow[95]
41
111
  },
42
112
  error: {
43
- main: t.flameRed[50],
44
- lighter: t.flameRed[70],
45
- light: t.flameRed[60],
46
- dark: t.flameRed[40],
47
- darker: t.flameRed[20],
48
- contrastText: t.marbleLight[30],
113
+ enabledLight: e.flameRed[50],
114
+ // comprobado
115
+ enabledDark: e.flameRed[50],
116
+ // comprobado
117
+ hoverLight: e.flameRed[40],
118
+ // comprobado,
119
+ hoverDark: e.flameRed[40],
120
+ // comprobado,
121
+ activeLight: e.flameRed[70],
122
+ // comprobado,
123
+ activeDark: e.flameRed[70],
124
+ // comprobado,
125
+ focusLight: e.flameRed[80],
126
+ // comprobado,
127
+ focusDark: e.flameRed[80],
128
+ // comprobado,
129
+ enabledOpacityLight: i.flame[20],
130
+ // comprobado
131
+ enabledOpacityDark: i.flame[20],
132
+ // comprobado,
133
+ hoverOpacityLight: i.flame[10],
134
+ // comprobado,
135
+ hoverOpacityDark: i.flame[10],
136
+ // comprobado,
137
+ activeOpacityLight: i.flame[40],
138
+ // comprobado,
139
+ activeOpacityDark: i.flame[40],
140
+ // comprobado,
141
+ focusOpacityLight: i.flame[50],
142
+ // comprobado,
143
+ focusOpacityDark: i.flame[50],
144
+ // comprobado,
145
+ opacityLight: i.flame[10],
146
+ // comprobado,
147
+ opacityDark: i.flame[10],
148
+ // comprobado,
149
+ main: e.flameRed[50],
150
+ // comprobado,,
151
+ lighter: e.flameRed[70],
152
+ // comprobado,,
153
+ light: e.flameRed[40],
154
+ // comprobado,,
155
+ dark: e.flameRed[30],
156
+ // comprobado,,
157
+ darker: e.flameRed[10],
158
+ // comprobado,,
159
+ contrastText: e.marbleLight[30],
160
+ // comprobado,
49
161
  // Tone colors
50
- toneOpacityLight: t.flameRed.toneOpacity10,
51
- toneOpacityDark: t.flameRed.toneOpacity20,
52
- // opacity backgrounds light
53
- opacityHoverLight: a.flame[10],
54
- opacityFocusLight: a.flame[20],
55
- opacityActiveLight: a.flame[30],
56
- // opacity backgrounds Dark
57
- opacityHoverDark: a.flame[20],
58
- opacityFocusDark: a.flame[30],
59
- opacityActiveDark: a.flame[40]
162
+ toneOpacityLight: e.flameRed[5],
163
+ // comprobado,
164
+ toneOpacityDark: e.flameRed[95]
60
165
  },
61
166
  success: {
62
- main: t.acidGreen[50],
63
- lighter: t.acidGreen[70],
64
- light: t.acidGreen[60],
65
- dark: t.acidGreen[30],
66
- darker: t.acidGreen[20],
67
- contrastText: t.marbleLight[20],
167
+ enabledLight: e.acidGreen[50],
168
+ // comprobado
169
+ enabledDark: e.acidGreen[50],
170
+ // comprobado
171
+ hoverLight: e.acidGreen[40],
172
+ // comprobado,
173
+ hoverDark: e.acidGreen[40],
174
+ // comprobado,
175
+ activeLight: e.acidGreen[70],
176
+ // comprobado,
177
+ activeDark: e.acidGreen[70],
178
+ // comprobado,
179
+ focusLight: e.acidGreen[80],
180
+ // comprobado,
181
+ focusDark: e.acidGreen[80],
182
+ // comprobado,
183
+ enabledOpacityLight: i.acid[20],
184
+ // comprobado
185
+ enabledOpacityDark: i.acid[20],
186
+ // comprobado,
187
+ hoverOpacityLight: i.acid[10],
188
+ // comprobado,
189
+ hoverOpacityDark: i.acid[10],
190
+ // comprobado,
191
+ activeOpacityLight: i.acid[40],
192
+ // comprobado,
193
+ activeOpacityDark: i.acid[40],
194
+ // comprobado,
195
+ focusOpacityLight: i.acid[50],
196
+ // comprobado,
197
+ focusOpacityDark: i.acid[50],
198
+ // comprobado,
199
+ opacityLight: i.acid[10],
200
+ // comprobado,
201
+ opacityDark: i.acid[10],
202
+ // comprobado,
203
+ main: e.acidGreen[50],
204
+ // comprobado,,
205
+ lighter: e.acidGreen[70],
206
+ // comprobado,,
207
+ light: e.acidGreen[40],
208
+ // comprobado,,
209
+ dark: e.acidGreen[30],
210
+ // comprobado,,
211
+ darker: e.acidGreen[10],
212
+ // comprobado,,
213
+ contrastText: e.marbleLight[30],
214
+ // comprobado,
68
215
  // Tone colors
69
- toneOpacityLight: t.acidGreen.toneOpacity10,
70
- toneOpacityDark: t.acidGreen.toneOpacity20,
71
- // opacity backgrounds light
72
- opacityHoverLight: a.acid[10],
73
- opacityFocusLight: a.acid[20],
74
- opacityActiveLight: a.acid[30],
75
- // opacity backgrounds Dark
76
- opacityHoverDark: a.acid[20],
77
- opacityFocusDark: a.acid[30],
78
- opacityActiveDark: a.acid[40]
216
+ toneOpacityLight: e.acidGreen[5],
217
+ // comprobado,
218
+ toneOpacityDark: e.acidGreen[95]
79
219
  }
80
- }, o = {
220
+ }, r = {
81
221
  info: {
82
- main: i.info.main,
83
- active: i.info.lighter,
84
- hover: i.info.light,
85
- opacity: i.info.opacityHoverLight,
86
- toneOpacity: i.info.toneOpacityLight,
87
- contrastText: i.info.contrastText,
88
- hoverOpacity: i.info.opacityHoverLight,
89
- focusOpacity: i.info.opacityFocusLight,
90
- activeOpacity: i.info.opacityActiveLight,
222
+ enabled: a.info.enabledLight,
223
+ enabledOpacity: a.info.enabledOpacityLight,
224
+ hover: a.info.hoverLight,
225
+ hoverOpacity: a.info.hoverOpacityLight,
226
+ focus: a.info.focusLight,
227
+ focusOpacity: a.info.focusOpacityLight,
228
+ active: a.info.activeLight,
229
+ activeOpacity: a.info.activeOpacityLight,
230
+ opacity: a.info.opacityLight,
231
+ toneOpacity: a.info.toneOpacityLight,
232
+ contrastText: a.info.contrastText,
91
233
  //Por compatibilidad con MUI
92
- light: i.info.light,
93
- dark: i.info.dark
234
+ main: a.info.main,
235
+ light: a.info.light,
236
+ dark: a.info.dark
94
237
  },
95
238
  success: {
96
- main: i.success.main,
97
- active: i.success.lighter,
98
- hover: i.success.light,
99
- opacity: i.success.opacityHoverLight,
100
- toneOpacity: i.success.toneOpacityLight,
101
- contrastText: i.success.contrastText,
102
- hoverOpacity: i.success.opacityHoverLight,
103
- focusOpacity: i.success.opacityFocusLight,
104
- activeOpacity: i.success.opacityActiveLight,
239
+ enabled: a.success.enabledLight,
240
+ enabledOpacity: a.success.enabledOpacityLight,
241
+ hover: a.success.hoverLight,
242
+ hoverOpacity: a.success.hoverOpacityLight,
243
+ focus: a.success.focusLight,
244
+ focusOpacity: a.success.focusOpacityLight,
245
+ active: a.success.activeLight,
246
+ activeOpacity: a.success.activeOpacityLight,
247
+ opacity: a.success.opacityLight,
248
+ toneOpacity: a.success.toneOpacityLight,
249
+ contrastText: a.success.contrastText,
250
+ main: a.success.main,
105
251
  //Por compatibilidad con MUI
106
- light: i.success.light,
107
- dark: i.success.dark
252
+ light: a.success.light,
253
+ dark: a.success.dark
108
254
  },
109
255
  warning: {
110
- main: i.warning.main,
111
- active: i.warning.lighter,
112
- hover: i.warning.light,
113
- opacity: i.warning.opacityHoverLight,
114
- toneOpacity: i.warning.toneOpacityLight,
115
- contrastText: i.warning.contrastText,
116
- hoverOpacity: i.warning.opacityHoverLight,
117
- focusOpacity: i.warning.opacityFocusLight,
118
- activeOpacity: i.warning.opacityActiveLight,
256
+ enabled: a.warning.enabledLight,
257
+ enabledOpacity: a.warning.enabledOpacityLight,
258
+ hover: a.warning.hoverLight,
259
+ hoverOpacity: a.warning.hoverOpacityLight,
260
+ focus: a.warning.focusLight,
261
+ focusOpacity: a.warning.focusOpacityLight,
262
+ active: a.warning.activeLight,
263
+ activeOpacity: a.warning.activeOpacityLight,
264
+ opacity: a.warning.opacityLight,
265
+ toneOpacity: a.warning.toneOpacityLight,
266
+ contrastText: a.warning.contrastText,
267
+ main: a.warning.main,
119
268
  //Por compatibilidad con MUI
120
- light: i.warning.light,
121
- dark: i.warning.dark
269
+ light: a.warning.light,
270
+ dark: a.warning.dark
122
271
  },
123
272
  error: {
124
- main: i.error.main,
125
- active: i.error.lighter,
126
- hover: i.error.light,
127
- opacity: i.error.opacityHoverLight,
128
- toneOpacity: i.error.toneOpacityLight,
129
- contrastText: i.error.contrastText,
130
- hoverOpacity: i.error.opacityHoverLight,
131
- focusOpacity: i.error.opacityFocusLight,
132
- activeOpacity: i.error.opacityActiveLight,
273
+ enabled: a.error.enabledLight,
274
+ enabledOpacity: a.error.enabledOpacityLight,
275
+ hover: a.error.hoverLight,
276
+ hoverOpacity: a.error.hoverOpacityLight,
277
+ focus: a.error.focusLight,
278
+ focusOpacity: a.error.focusOpacityLight,
279
+ active: a.error.activeLight,
280
+ activeOpacity: a.error.activeOpacityLight,
281
+ opacity: a.error.opacityLight,
282
+ toneOpacity: a.error.toneOpacityLight,
283
+ contrastText: a.error.contrastText,
284
+ main: a.error.main,
133
285
  //Por compatibilidad con MUI
134
- light: i.error.light,
135
- dark: i.error.dark
286
+ light: a.error.light,
287
+ dark: a.error.dark
136
288
  }
137
- }, e = {
289
+ }, o = {
138
290
  info: {
139
- main: i.info.main,
140
- active: i.info.darker,
141
- hover: i.info.dark,
142
- opacity: i.info.opacityHoverDark,
143
- toneOpacity: i.info.toneOpacityDark,
144
- contrastText: i.info.contrastText,
145
- hoverOpacity: i.info.opacityHoverDark,
146
- focusOpacity: i.info.opacityFocusDark,
147
- activeOpacity: i.info.opacityActiveDark,
291
+ enabled: a.info.enabledDark,
292
+ enabledOpacity: a.info.enabledOpacityDark,
293
+ hover: a.info.hoverDark,
294
+ hoverOpacity: a.info.hoverOpacityDark,
295
+ focus: a.info.focusDark,
296
+ focusOpacity: a.info.focusOpacityDark,
297
+ active: a.info.activeDark,
298
+ activeOpacity: a.info.activeOpacityDark,
299
+ opacity: a.info.opacityDark,
300
+ toneOpacity: a.info.toneOpacityDark,
301
+ contrastText: a.info.contrastText,
302
+ main: a.info.main,
148
303
  //Por compatibilidad con MUI
149
- light: i.info.light,
150
- dark: i.info.dark
304
+ light: a.info.light,
305
+ dark: a.info.dark
151
306
  },
152
307
  success: {
153
- main: i.success.main,
154
- active: i.success.darker,
155
- hover: i.success.dark,
156
- opacity: i.success.opacityHoverDark,
157
- toneOpacity: i.success.toneOpacityDark,
158
- contrastText: i.success.contrastText,
159
- hoverOpacity: i.success.opacityHoverDark,
160
- focusOpacity: i.success.opacityFocusDark,
161
- activeOpacity: i.success.opacityActiveDark,
308
+ enabled: a.success.enabledDark,
309
+ enabledOpacity: a.success.enabledOpacityDark,
310
+ hover: a.success.hoverDark,
311
+ hoverOpacity: a.success.hoverOpacityDark,
312
+ focus: a.success.focusDark,
313
+ focusOpacity: a.success.focusOpacityDark,
314
+ active: a.success.activeDark,
315
+ activeOpacity: a.success.activeOpacityDark,
316
+ opacity: a.success.opacityDark,
317
+ toneOpacity: a.success.toneOpacityDark,
318
+ contrastText: a.success.contrastText,
319
+ main: a.success.main,
162
320
  //Por compatibilidad con MUI
163
- light: i.success.light,
164
- dark: i.success.dark
321
+ light: a.success.light,
322
+ dark: a.success.dark
165
323
  },
166
324
  warning: {
167
- main: i.warning.main,
168
- active: i.warning.darker,
169
- hover: i.warning.dark,
170
- opacity: i.warning.opacityHoverDark,
171
- toneOpacity: i.warning.toneOpacityDark,
172
- contrastText: i.warning.contrastText,
173
- hoverOpacity: i.warning.opacityHoverDark,
174
- focusOpacity: i.warning.opacityFocusDark,
175
- activeOpacity: i.warning.opacityActiveDark,
325
+ enabled: a.warning.enabledDark,
326
+ enabledOpacity: a.warning.enabledOpacityDark,
327
+ hover: a.warning.hoverDark,
328
+ hoverOpacity: a.warning.hoverOpacityDark,
329
+ focus: a.warning.focusDark,
330
+ focusOpacity: a.warning.focusOpacityDark,
331
+ active: a.warning.activeDark,
332
+ activeOpacity: a.warning.activeOpacityDark,
333
+ opacity: a.warning.opacityDark,
334
+ toneOpacity: a.warning.toneOpacityDark,
335
+ contrastText: a.warning.contrastText,
336
+ main: a.warning.main,
176
337
  //Por compatibilidad con MUI
177
- light: i.warning.light,
178
- dark: i.warning.dark
338
+ light: a.warning.light,
339
+ dark: a.warning.dark
179
340
  },
180
341
  error: {
181
- main: i.error.main,
182
- active: i.error.darker,
183
- hover: i.error.dark,
184
- opacity: i.error.opacityHoverDark,
185
- toneOpacity: i.error.toneOpacityDark,
186
- contrastText: i.error.contrastText,
187
- hoverOpacity: i.error.opacityHoverDark,
188
- focusOpacity: i.error.opacityFocusDark,
189
- activeOpacity: i.error.opacityActiveDark,
342
+ enabled: a.error.enabledDark,
343
+ enabledOpacity: a.error.enabledOpacityDark,
344
+ hover: a.error.hoverDark,
345
+ hoverOpacity: a.error.hoverOpacityDark,
346
+ focus: a.error.focusDark,
347
+ focusOpacity: a.error.focusOpacityDark,
348
+ active: a.error.activeDark,
349
+ activeOpacity: a.error.activeOpacityDark,
350
+ opacity: a.error.opacityDark,
351
+ toneOpacity: a.error.toneOpacityDark,
352
+ contrastText: a.error.contrastText,
353
+ main: a.error.main,
190
354
  //Por compatibilidad con MUI
191
- light: i.error.light,
192
- dark: i.error.dark
355
+ light: a.error.light,
356
+ dark: a.error.dark
193
357
  }
194
358
  };
195
359
  export {
196
- o as S,
197
- e as a
360
+ r as S,
361
+ o as a
198
362
  };
package/types/augmentations.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { CustomShadowOptions } from '../theme';
2
2
  import type { Size } from '../theme/sizes/types';
3
+ import { BaseChipColors } from './types';
3
4
 
4
5
  declare module '@mui/material' {
5
6
  interface Color {
@@ -17,25 +18,26 @@ declare module '@mui/material' {
17
18
 
18
19
  declare module '@mui/material/styles' {
19
20
  interface PaletteColor {
20
- //TODO: Documentar los colores segun figma
21
- // light: string; *** Por compatibilidad con MUI
22
- // main: string; ***
23
- // dark: string; *** Por compatibilidad con MUI
24
- // contrastText: string; ***
21
+ enabled: string;
22
+ enabledOpacity: string;
25
23
 
26
- active: string;
27
- focusVisible: string;
28
24
  hover: string;
29
25
  hoverOpacity: string;
30
- activeOpacity: string;
26
+
27
+ focus: string;
31
28
  focusOpacity: string;
29
+ focusVisible: string;
30
+
31
+ selected: string;
32
+ selectedOpacity: string;
33
+
34
+ active: string;
35
+ activeOpacity: string;
36
+
37
+
32
38
  opacity: string;
33
39
  toneOpacity: string;
34
- selected: string;
35
- }
36
40
 
37
- export interface TypeBackground {
38
- neutral: string;
39
41
  }
40
42
 
41
43
  interface Palette {
@@ -95,13 +97,6 @@ declare module '@mui/material/styles' {
95
97
  interface Theme extends CssVarsTheme {
96
98
  stretch: boolean;
97
99
  customShadows: CustomShadowOptions;
98
- /**
99
- *
100
- */
101
- // breakpoints: Breakpoints;
102
- /**
103
- * Colección de tamaños y espaciados base en el sistema de diseño
104
- */
105
100
  size: Size;
106
101
  }
107
102
 
@@ -128,6 +123,7 @@ declare module '@mui/material/styles' {
128
123
  neutral: string;
129
124
  surface: string;
130
125
  hover: string;
126
+ backdrop: string;
131
127
  }
132
128
 
133
129
  interface TypographyVariants {