@m4l/styles 3.2.3 → 6.0.0

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 (32) hide show
  1. package/index.js +20 -20
  2. package/package.json +1 -1
  3. package/theme/defaultThemeOptions-DVY68pts.js +125 -0
  4. package/theme/defaultThemeOptions.d.ts +2 -1
  5. package/theme/index.d.ts +1 -1
  6. package/theme/overrides/M4LExtendedComponents/{index-C4PXddLa.js → index-BO_x8lkT.js} +256 -255
  7. package/theme/overrides/M4LRHFComponents/{index-BRZVeOM5.js → index-Dv4h8DSV.js} +34 -34
  8. package/theme/overrides/MUIComponents/Avatar.d.ts +1 -1
  9. package/theme/overrides/MUIComponents/Input.d.ts +1 -1
  10. package/theme/overrides/MUIComponents/Progress.d.ts +1 -1
  11. package/theme/overrides/MUIComponents/ToggleButton.d.ts +2 -2
  12. package/theme/overrides/MUIComponents/{index-XoLdmZP6.js → index-DrBJTI1s.js} +61 -62
  13. package/theme/overrides/{index-B9xZa27y.js → index-BOMUIneQ.js} +15 -15
  14. package/theme/palette/baseOpacityColors.d.ts +3 -0
  15. package/theme/palette/defaultColors.d.ts +14 -0
  16. package/theme/palette/index.d.ts +0 -1
  17. package/theme/palette/presetColors.d.ts +18 -4
  18. package/theme/palette/semanticColors.d.ts +16 -0
  19. package/theme/palette-voCQl3kP.js +792 -0
  20. package/theme/{shadows-GTYqExFA.js → shadows-Cek_1mpN.js} +1 -1
  21. package/types/augmentations.d.ts +160 -155
  22. package/types/types.d.ts +72 -31
  23. package/utils/{getColorPresets-CXZaM9oS.js → getColorPresets-DgmrCj5l.js} +1 -1
  24. package/utils/getColorPresets.d.ts +4 -4
  25. package/utils/getColorState.d.ts +2 -2
  26. package/utils/getPaletteByPreset.d.ts +127 -0
  27. package/utils/index.d.ts +1 -0
  28. package/vite-env.d.ts +3 -3
  29. package/theme/defaultThemeOptions-BlJvKCE6.js +0 -24
  30. package/theme/palette/palette.d.ts +0 -6
  31. package/theme/palette/stateColors.d.ts +0 -2
  32. package/theme/palette-DM0gXxA2.js +0 -584
@@ -1,584 +0,0 @@
1
- import F from "@mui/material/styles/createPalette";
2
- import { alpha as r } from "@mui/material/styles";
3
- const e = {
4
- patronusBlue: {
5
- "00": "#D9E9FC",
6
- 10: "#DBE9FF",
7
- 20: "#B6D3FF",
8
- 30: "#6DA8FF",
9
- 40: "#3787FF",
10
- 50: "#0064FF",
11
- 60: "#0050C8",
12
- 70: "#003A92",
13
- 80: "#00245B",
14
- 90: "#000F24",
15
- 100: "#2C4053"
16
- },
17
- crayonBlue: {
18
- "00": "#D9E9FF",
19
- 10: "#D9E9FF",
20
- 20: "#88B7FC",
21
- 30: "#6AA4F9",
22
- 40: "#5494F3",
23
- 50: "#2774E6",
24
- 60: "#2367CC",
25
- 70: "#1F5AB3",
26
- 80: "#1A4D99",
27
- 90: "#113366",
28
- 100: "#113366"
29
- },
30
- middleYellow: {
31
- "00": "#FFFBCE",
32
- 10: "#FFFBCE",
33
- 20: "#FFF79C",
34
- 30: "#FFF46B",
35
- 40: "#FFF039",
36
- 50: "#FFEC08",
37
- 60: "#E5D400",
38
- 70: "#9E9200",
39
- 80: "#696100",
40
- 90: "#353100",
41
- 100: "#353100"
42
- },
43
- acidGreen: {
44
- "00": "#CDFFC2",
45
- 10: "#CDFFC2",
46
- 20: "#A8FF97",
47
- 30: "#83FF6B",
48
- 40: "#5EFF40",
49
- 50: "#39FF14",
50
- 60: "#47CC2D",
51
- 70: "#1F9009",
52
- 80: "#176E05",
53
- 90: "#0B3D00",
54
- 100: "#0B3D00"
55
- },
56
- grassGreen: {
57
- "00": "#D9ECE6",
58
- 10: "#E3F4EB",
59
- 20: "#AADEC2",
60
- 30: "#7BCCA1",
61
- 40: "#3FA26D",
62
- 50: "#00804C",
63
- 60: "#005B37",
64
- 70: "#004026",
65
- 80: "#002416",
66
- 90: "#00120B",
67
- 100: "#2C433D"
68
- },
69
- desertBeige: {
70
- "00": "#F2F0EB",
71
- 10: "#F6EBE2",
72
- 20: "#EDD7C5",
73
- 30: "#E7CAB1",
74
- 40: "#DDB490",
75
- 50: "#D4A276",
76
- 60: "#BD8F68",
77
- 70: "#AD794C",
78
- 80: "#90653F",
79
- 90: "#735133",
80
- 100: "#454742"
81
- },
82
- turquiBlue: {
83
- "00": "#DEE9EB",
84
- 10: "#C8E1EC",
85
- 20: "#A3CDDF",
86
- 30: "#76A5BA",
87
- 40: "#377F9D",
88
- 50: "#2A6077",
89
- 60: "#214C5F",
90
- 70: "#1B3F4E",
91
- 80: "#15313C",
92
- 90: "#0F232B",
93
- 100: "#314042"
94
- },
95
- blazeOrange: {
96
- "00": "#F4EFE1",
97
- 10: "#F9E9D0",
98
- 20: "#F4D3A1",
99
- 30: "#F2BD6D",
100
- 40: "#EBAE53",
101
- 50: "#E59722",
102
- 60: "#BA7916",
103
- 70: "#925F11",
104
- 80: "#774D0E",
105
- 90: "#735133",
106
- 100: "#474638"
107
- },
108
- flameRed: {
109
- "00": "#FFD8D8",
110
- 10: "#FFD8D8",
111
- 20: "#F59292",
112
- 30: "#F66A6A",
113
- 40: "#F15B50",
114
- 50: "#F71919",
115
- 60: "#D31616",
116
- 70: "#AF1212",
117
- 80: "#8A0F0F",
118
- 90: "#660C0C",
119
- 100: "#660C0C"
120
- },
121
- coolGrey: {
122
- "00": "#BAC6CC",
123
- 10: "#BAC6CC",
124
- 20: "#A7B4B9",
125
- 30: "#94A1A6",
126
- 40: "#818F93",
127
- 50: "#6E7C80",
128
- 60: "#5C6A6C",
129
- 70: "#495859",
130
- 80: "#364546",
131
- 90: "#233333",
132
- 100: "#233333"
133
- },
134
- brown: {
135
- "00": "#ECEAE6",
136
- 10: "#DFC9BD",
137
- 20: "#C59D88",
138
- 30: "#B8886E",
139
- 40: "#B17D61",
140
- 50: "#9E694D",
141
- 60: "#875A42",
142
- 70: "#7C533D",
143
- 80: "#704B37",
144
- 90: "#654432",
145
- 100: "#3F413D"
146
- },
147
- marbleLight: {
148
- "00": "#FFFFFF",
149
- 10: "#FFFFFF",
150
- 20: "#F9FAFA",
151
- //'#F5F9FA',
152
- 30: "#F4F5F5",
153
- 40: "#F0F4F4",
154
- 50: "#E6E8EA",
155
- 60: "#E1E9EA",
156
- 70: "#E2E7E9",
157
- 80: "#fff0",
158
- 90: "#fff0",
159
- 100: "#fff0"
160
- },
161
- onyx: {
162
- "00": "#364040",
163
- 10: "#364040",
164
- 20: "#323B3B",
165
- 30: "#2A3232",
166
- 40: "#252C2C",
167
- 50: "#212727",
168
- 60: "#1C2121",
169
- 70: "#090A0A",
170
- 80: "#fff0",
171
- 90: "#fff0",
172
- 100: "#fff0"
173
- },
174
- mint: {
175
- "00": "#9BB4CA",
176
- 10: "#9BB4CA",
177
- 20: "#A1BDD9",
178
- 30: "#A6C5E2",
179
- 40: "#BCD6F0",
180
- 50: "#C8E1F9",
181
- 60: "#BFDBF8",
182
- 70: "#C3DEFE",
183
- 80: "#DFE7F2",
184
- 90: "#F1F2F4",
185
- 100: "#F1F2F4"
186
- },
187
- oxford: {
188
- "00": "#F7F8F9",
189
- 10: "#F7F8F9",
190
- 20: "#DCDFE4",
191
- 30: "#B3B9C4",
192
- 40: "#8590A2",
193
- 50: "#758195",
194
- 60: "#626F86",
195
- 70: "#44546F",
196
- 80: "#2C3E5D",
197
- 90: "#091E42",
198
- 100: "#091E42"
199
- }
200
- };
201
- function o(i) {
202
- return {
203
- 4: r(i, 0.04),
204
- 6: r(i, 0.06),
205
- 8: r(i, 0.08),
206
- 10: r(i, 0.1),
207
- 12: r(i, 0.12),
208
- 14: r(i, 0.14),
209
- 16: r(i, 0.16),
210
- 18: r(i, 0.18),
211
- 28: r(i, 0.28),
212
- 31: r(i, 0.31),
213
- 32: r(i, 0.32),
214
- 48: r(i, 0.48),
215
- 60: r(i, 0.6),
216
- 72: r(i, 0.72)
217
- };
218
- }
219
- const a = {
220
- patronus: o(e.patronusBlue[50]),
221
- turqui: o(e.turquiBlue[50]),
222
- grass: o(e.grassGreen[50]),
223
- brown: o(e.brown[50]),
224
- beige: o(e.desertBeige[50]),
225
- orange: o(e.blazeOrange[50]),
226
- cool: o(e.coolGrey[70]),
227
- marble: o(e.marbleLight[10]),
228
- oxford: o(e.oxford[90]),
229
- mint: {
230
- 4: r(e.mint[40], 0.04),
231
- 6: r(e.mint[40], 0.06),
232
- 8: r(e.mint[20], 0.08),
233
- 10: r(e.mint[50], 0.1),
234
- 12: r(e.mint[20], 0.12),
235
- 14: r(e.mint[30], 0.14),
236
- 16: r(e.mint[70], 0.16),
237
- 18: r(e.mint[70], 0.18),
238
- 28: r(e.mint[60], 0.28),
239
- 31: r(e.mint[60], 0.31),
240
- 32: r(e.mint[60], 0.32),
241
- 48: r(e.mint[10], 0.48),
242
- 60: r(e.mint[10], 0.6),
243
- 72: r(e.mint[10], 0.72)
244
- }
245
- }, n = {
246
- active: "",
247
- activeOpacity: "",
248
- hover: "",
249
- focus: "",
250
- selected: "",
251
- toneOpacity: ""
252
- }, t = {
253
- patronus: {
254
- lighter: e.patronusBlue[10],
255
- light: e.patronusBlue[30],
256
- main: e.patronusBlue[50],
257
- dark: e.patronusBlue[40],
258
- darker: e.patronusBlue[60],
259
- contrastText: "",
260
- ...n
261
- },
262
- turqui: {
263
- lighter: e.turquiBlue[10],
264
- light: e.turquiBlue[30],
265
- main: e.turquiBlue[50],
266
- dark: e.turquiBlue[70],
267
- darker: e.turquiBlue[80],
268
- contrastText: "",
269
- ...n
270
- },
271
- grass: {
272
- lighter: e.grassGreen[10],
273
- light: e.grassGreen[40],
274
- main: e.grassGreen[50],
275
- dark: e.grassGreen[70],
276
- darker: e.grassGreen[80],
277
- contrastText: "",
278
- ...n
279
- },
280
- brown: {
281
- lighter: e.brown[10],
282
- light: e.brown[30],
283
- main: e.brown[50],
284
- dark: e.brown[70],
285
- darker: e.brown[90],
286
- contrastText: "",
287
- ...n
288
- },
289
- blaze: {
290
- lighter: e.blazeOrange[10],
291
- light: e.blazeOrange[30],
292
- main: e.blazeOrange[50],
293
- dark: e.blazeOrange[70],
294
- darker: e.blazeOrange[80],
295
- contrastText: "",
296
- ...n
297
- }
298
- }, u = {
299
- patronus: {
300
- active: t.patronus.main,
301
- activeOpacity: a.patronus[8],
302
- focus: t.patronus.dark,
303
- hover: t.patronus.dark,
304
- selected: a.patronus[48],
305
- toneOpacity: e.patronusBlue["00"]
306
- },
307
- blaze: {
308
- active: t.blaze.main,
309
- activeOpacity: a.orange[8],
310
- focus: t.blaze.dark,
311
- hover: t.blaze.dark,
312
- selected: a.orange[48],
313
- toneOpacity: e.blazeOrange["00"]
314
- },
315
- brown: {
316
- active: t.brown.main,
317
- activeOpacity: a.brown[12],
318
- focus: t.brown.dark,
319
- hover: t.brown.dark,
320
- selected: a.brown[48],
321
- toneOpacity: e.brown["00"]
322
- },
323
- grass: {
324
- active: t.grass.main,
325
- activeOpacity: a.grass[8],
326
- focus: t.grass.dark,
327
- hover: t.grass.dark,
328
- selected: a.grass[48],
329
- toneOpacity: e.grassGreen["00"]
330
- },
331
- turqui: {
332
- active: t.turqui.main,
333
- activeOpacity: a.turqui[8],
334
- focus: t.turqui.dark,
335
- hover: t.turqui.dark,
336
- selected: a.turqui[48],
337
- toneOpacity: e.turquiBlue["00"]
338
- }
339
- }, B = {
340
- patronus: {
341
- active: t.patronus.main,
342
- activeOpacity: a.patronus[8],
343
- focus: t.patronus.light,
344
- hover: t.patronus.light,
345
- selected: a.patronus[48],
346
- toneOpacity: e.patronusBlue[100]
347
- },
348
- blaze: {
349
- active: t.blaze.main,
350
- activeOpacity: a.orange[8],
351
- focus: t.blaze.light,
352
- hover: t.blaze.light,
353
- selected: a.orange[48],
354
- toneOpacity: e.blazeOrange[100]
355
- },
356
- brown: {
357
- active: t.brown.main,
358
- activeOpacity: a.brown[12],
359
- focus: t.brown.light,
360
- hover: t.brown.light,
361
- selected: a.brown[48],
362
- toneOpacity: e.brown[100]
363
- },
364
- grass: {
365
- active: t.grass.main,
366
- activeOpacity: a.grass[8],
367
- focus: t.grass.light,
368
- hover: t.grass.light,
369
- selected: a.grass[48],
370
- toneOpacity: e.grassGreen[100]
371
- },
372
- turqui: {
373
- active: t.turqui.main,
374
- activeOpacity: a.turqui[8],
375
- focus: t.turqui.light,
376
- hover: t.turqui.light,
377
- selected: a.turqui[48],
378
- toneOpacity: e.turquiBlue[100]
379
- }
380
- }, m = Object.keys(t), h = m.map((i) => ({
381
- name: i,
382
- value: t[i].main
383
- })), g = {
384
- black: "#000",
385
- white: "#fff"
386
- }, E = {
387
- 0: "#FFFFFF",
388
- 100: "#F9FAFB",
389
- 200: "#F4F6F8",
390
- 300: "#DFE3E8",
391
- 400: "#C4CDD5",
392
- 500: "#919EAB",
393
- 600: "#637381",
394
- 700: "#454F5B",
395
- 800: "#212B36",
396
- 900: "#161C24",
397
- 5008: r("#919EAB", 0.08),
398
- 50012: r("#919EAB", 0.12),
399
- 50016: r("#919EAB", 0.16),
400
- 50024: r("#919EAB", 0.24),
401
- 50032: r("#919EAB", 0.32),
402
- 50048: r("#919EAB", 0.48),
403
- 50056: r("#919EAB", 0.56),
404
- 50080: r("#919EAB", 0.8),
405
- 50: "",
406
- A100: "",
407
- A200: "",
408
- A400: "",
409
- A700: ""
410
- }, y = {
411
- info: {
412
- lighter: e.crayonBlue[10],
413
- light: e.crayonBlue[30],
414
- main: e.crayonBlue[50],
415
- dark: e.crayonBlue[60],
416
- darker: e.crayonBlue[70],
417
- contrastText: "",
418
- active: e.crayonBlue[50],
419
- activeOpacity: r(e.crayonBlue[50], 0.08),
420
- hover: e.crayonBlue[70],
421
- focus: e.crayonBlue[70],
422
- toneOpacity: r(e.crayonBlue[50], 0.12),
423
- selected: r(e.crayonBlue[50], 0.45)
424
- },
425
- success: {
426
- lighter: e.acidGreen[10],
427
- light: e.acidGreen[30],
428
- main: e.acidGreen[60],
429
- dark: e.acidGreen[70],
430
- darker: e.acidGreen[80],
431
- contrastText: "",
432
- active: e.acidGreen[60],
433
- activeOpacity: r(e.acidGreen[60], 0.08),
434
- hover: e.acidGreen[70],
435
- focus: e.acidGreen[70],
436
- toneOpacity: r(e.acidGreen[60], 0.12),
437
- selected: r(e.acidGreen[60], 0.45)
438
- },
439
- warning: {
440
- lighter: e.middleYellow[10],
441
- light: e.middleYellow[30],
442
- main: e.middleYellow[60],
443
- dark: e.middleYellow[70],
444
- darker: e.middleYellow[80],
445
- contrastText: "",
446
- active: e.middleYellow[60],
447
- activeOpacity: r(e.middleYellow[60], 0.08),
448
- hover: e.middleYellow[70],
449
- focus: e.middleYellow[70],
450
- toneOpacity: r(e.middleYellow[60], 0.12),
451
- selected: r(e.middleYellow[60], 0.45)
452
- },
453
- error: {
454
- lighter: e.flameRed[10],
455
- light: e.flameRed[30],
456
- main: e.flameRed[40],
457
- dark: e.flameRed[60],
458
- darker: e.flameRed[70],
459
- contrastText: "",
460
- active: e.flameRed[40],
461
- activeOpacity: r(e.flameRed[40], 0.08),
462
- hover: e.flameRed[60],
463
- focus: e.flameRed[60],
464
- toneOpacity: r(e.flameRed[40], 0.12),
465
- selected: r(e.flameRed[40], 0.45)
466
- }
467
- }, c = {
468
- light: {
469
- scrollBar: "#5663763D",
470
- gridHover: "#FCFCFC"
471
- },
472
- dark: {
473
- scrollBar: "#5663765D",
474
- gridHover: "#282E2E"
475
- }
476
- }, p = (i) => ({
477
- ...y,
478
- common: g,
479
- primary: t[i],
480
- grey: E,
481
- skeleton: {
482
- default: a.cool[16],
483
- transition: a.cool[8]
484
- }
485
- }), C = (i) => {
486
- const l = p(i), s = u?.[i], d = B?.[i];
487
- return {
488
- light: F({
489
- ...l,
490
- mode: "light",
491
- divider: e.coolGrey[20],
492
- text: {
493
- primary: e.onyx[20],
494
- secondary: e.coolGrey[50],
495
- disabled: e.coolGrey[20]
496
- },
497
- background: {
498
- default: e.marbleLight[10],
499
- // todo: revisar contra figma (old state.default)
500
- hover: a.oxford[4],
501
- // todo: revisar contra figma (old state.hoverDefault)
502
- surface: a.oxford[4],
503
- subtle: e.marbleLight[10],
504
- main: e.marbleLight[30],
505
- // todo: background.neutral
506
- bold: e.marbleLight[60],
507
- // background.background
508
- backdrop: a.oxford[72],
509
- // hace referencia a alpha(`${theme.colorSchemes.finalTheme.palette.patronus?.onyx[60]}`, 0.8)
510
- reverse: e.onyx[50],
511
- header: e.marbleLight[20]
512
- },
513
- border: {
514
- active: s?.active,
515
- selected: s?.selected,
516
- default: a.oxford[4],
517
- // before oxford 12 (hoverDefault)
518
- primary: a.oxford[16],
519
- secondary: a.oxford[10],
520
- disabled: a.oxford[4],
521
- dense: a.oxford[31],
522
- line: e.coolGrey[10]
523
- },
524
- general: {
525
- scrollBar: c.light.scrollBar,
526
- gridHover: c.light.gridHover
527
- },
528
- primary: {
529
- ...l.primary,
530
- ...s
531
- }
532
- }),
533
- dark: F({
534
- ...l,
535
- mode: "dark",
536
- divider: e.coolGrey[80],
537
- text: {
538
- primary: e.marbleLight[30],
539
- secondary: e.coolGrey[20],
540
- disabled: e.coolGrey[50]
541
- },
542
- background: {
543
- default: e.onyx[40],
544
- // todo: revisar contra figma (old state default)
545
- hover: a.mint[14],
546
- // todo: revisar contra figma (old state hoverDefault)
547
- surface: a.mint[8],
548
- subtle: e.onyx[30],
549
- main: e.onyx[50],
550
- bold: e.onyx[60],
551
- backdrop: a.oxford[72],
552
- reverse: e.marbleLight[10],
553
- header: e.onyx[30]
554
- },
555
- border: {
556
- active: d?.active,
557
- selected: d?.selected,
558
- default: a.mint[8],
559
- primary: a.mint[18],
560
- secondary: a.mint[14],
561
- disabled: a.mint[8],
562
- dense: a.mint[28],
563
- line: e.coolGrey[60]
564
- },
565
- general: {
566
- scrollBar: c.dark.scrollBar,
567
- gridHover: c.dark.gridHover
568
- },
569
- primary: {
570
- ...l.primary,
571
- ...d
572
- }
573
- })
574
- };
575
- };
576
- export {
577
- e as B,
578
- g as C,
579
- E as G,
580
- t as P,
581
- a,
582
- C as g,
583
- h as p
584
- };