@m4l/styles 3.2.2 → 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 (38) hide show
  1. package/index.js +33 -41
  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.dbc24a3d.js → index-BO_x8lkT.js} +595 -274
  7. package/theme/overrides/M4LRHFComponents/{index.7d702163.js → index-Dv4h8DSV.js} +109 -37
  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.2b5bc914.js → index-DrBJTI1s.js} +108 -61
  13. package/theme/overrides/{index.cc540e59.js → index-BOMUIneQ.js} +20 -14
  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.67c0a60a.js → shadows-Cek_1mpN.js} +2 -1
  21. package/theme/{typography.616cfe0c.js → typography-BsOO459U.js} +11 -1
  22. package/types/augmentations.d.ts +160 -155
  23. package/types/types.d.ts +72 -31
  24. package/utils/{getColorPresets.38329841.js → getColorPresets-DgmrCj5l.js} +1 -1
  25. package/utils/getColorPresets.d.ts +4 -4
  26. package/utils/getColorState.d.ts +2 -2
  27. package/utils/{getFontValue.88831637.js → getFontValue-BEO-XID9.js} +8 -5
  28. package/utils/getPaletteByPreset.d.ts +127 -0
  29. package/utils/index.d.ts +1 -0
  30. package/vite-env.d.ts +3 -3
  31. package/theme/defaultThemeOptions.b39953a8.js +0 -24
  32. package/theme/palette/palette.d.ts +0 -6
  33. package/theme/palette/stateColors.d.ts +0 -2
  34. package/theme/palette.fc293d0e.js +0 -575
  35. /package/{config.3bb6415c.js → config-B8bZIPuH.js} +0 -0
  36. /package/theme/{index.34d0fdea.js → index-l0sNRNKZ.js} +0 -0
  37. /package/utils/{getColorState.b8092fb6.js → getColorState-D1JKXD4T.js} +0 -0
  38. /package/utils/{useResponsive.2c45e8e0.js → useResponsive-DaeQVwlH.js} +0 -0
@@ -1,575 +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
- 30: "#F4F5F5",
152
- 40: "#F0F4F4",
153
- 50: "#E6E8EA",
154
- 60: "#E1E9EA",
155
- 70: "#E2E7E9",
156
- 80: "#fff0",
157
- 90: "#fff0",
158
- 100: "#fff0"
159
- },
160
- onyx: {
161
- "00": "#364040",
162
- 10: "#364040",
163
- 20: "#323B3B",
164
- 30: "#2A3232",
165
- 40: "#252C2C",
166
- 50: "#212727",
167
- 60: "#1C2121",
168
- 70: "#090A0A",
169
- 80: "#fff0",
170
- 90: "#fff0",
171
- 100: "#fff0"
172
- },
173
- mint: {
174
- "00": "#9BB4CA",
175
- 10: "#9BB4CA",
176
- 20: "#A1BDD9",
177
- 30: "#A6C5E2",
178
- 40: "#BCD6F0",
179
- 50: "#C8E1F9",
180
- 60: "#BFDBF8",
181
- 70: "#C3DEFE",
182
- 80: "#DFE7F2",
183
- 90: "#F1F2F4",
184
- 100: "#F1F2F4"
185
- },
186
- oxford: {
187
- "00": "#F7F8F9",
188
- 10: "#F7F8F9",
189
- 20: "#DCDFE4",
190
- 30: "#B3B9C4",
191
- 40: "#8590A2",
192
- 50: "#758195",
193
- 60: "#626F86",
194
- 70: "#44546F",
195
- 80: "#2C3E5D",
196
- 90: "#091E42",
197
- 100: "#091E42"
198
- }
199
- };
200
- function o(i) {
201
- return {
202
- 4: r(i, 0.04),
203
- 6: r(i, 0.06),
204
- 8: r(i, 0.08),
205
- 10: r(i, 0.1),
206
- 12: r(i, 0.12),
207
- 14: r(i, 0.14),
208
- 16: r(i, 0.16),
209
- 18: r(i, 0.18),
210
- 28: r(i, 0.28),
211
- 31: r(i, 0.31),
212
- 32: r(i, 0.32),
213
- 48: r(i, 0.48),
214
- 60: r(i, 0.6),
215
- 72: r(i, 0.72)
216
- };
217
- }
218
- const a = {
219
- patronus: o(e.patronusBlue[50]),
220
- turqui: o(e.turquiBlue[50]),
221
- grass: o(e.grassGreen[50]),
222
- brown: o(e.brown[50]),
223
- beige: o(e.desertBeige[50]),
224
- orange: o(e.blazeOrange[50]),
225
- cool: o(e.coolGrey[70]),
226
- marble: o(e.marbleLight[10]),
227
- oxford: o(e.oxford[90]),
228
- mint: {
229
- 4: r(e.mint[40], 0.04),
230
- 6: r(e.mint[40], 0.06),
231
- 8: r(e.mint[20], 0.08),
232
- 10: r(e.mint[50], 0.1),
233
- 12: r(e.mint[20], 0.12),
234
- 14: r(e.mint[30], 0.14),
235
- 16: r(e.mint[70], 0.16),
236
- 18: r(e.mint[70], 0.18),
237
- 28: r(e.mint[60], 0.28),
238
- 31: r(e.mint[60], 0.31),
239
- 32: r(e.mint[60], 0.32),
240
- 48: r(e.mint[10], 0.48),
241
- 60: r(e.mint[10], 0.6),
242
- 72: r(e.mint[10], 0.72)
243
- }
244
- }, n = {
245
- active: "",
246
- activeOpacity: "",
247
- hover: "",
248
- focus: "",
249
- selected: "",
250
- toneOpacity: ""
251
- }, t = {
252
- patronus: {
253
- lighter: e.patronusBlue[10],
254
- light: e.patronusBlue[30],
255
- main: e.patronusBlue[50],
256
- dark: e.patronusBlue[40],
257
- darker: e.patronusBlue[60],
258
- contrastText: "",
259
- ...n
260
- },
261
- turqui: {
262
- lighter: e.turquiBlue[10],
263
- light: e.turquiBlue[30],
264
- main: e.turquiBlue[50],
265
- dark: e.turquiBlue[70],
266
- darker: e.turquiBlue[80],
267
- contrastText: "",
268
- ...n
269
- },
270
- grass: {
271
- lighter: e.grassGreen[10],
272
- light: e.grassGreen[40],
273
- main: e.grassGreen[50],
274
- dark: e.grassGreen[70],
275
- darker: e.grassGreen[80],
276
- contrastText: "",
277
- ...n
278
- },
279
- brown: {
280
- lighter: e.brown[10],
281
- light: e.brown[30],
282
- main: e.brown[50],
283
- dark: e.brown[70],
284
- darker: e.brown[90],
285
- contrastText: "",
286
- ...n
287
- },
288
- blaze: {
289
- lighter: e.blazeOrange[10],
290
- light: e.blazeOrange[30],
291
- main: e.blazeOrange[50],
292
- dark: e.blazeOrange[70],
293
- darker: e.blazeOrange[80],
294
- contrastText: "",
295
- ...n
296
- }
297
- }, u = {
298
- patronus: {
299
- active: t.patronus.main,
300
- activeOpacity: a.patronus[8],
301
- focus: t.patronus.dark,
302
- hover: t.patronus.dark,
303
- selected: a.patronus[48],
304
- toneOpacity: e.patronusBlue["00"]
305
- },
306
- blaze: {
307
- active: t.blaze.main,
308
- activeOpacity: a.orange[8],
309
- focus: t.blaze.dark,
310
- hover: t.blaze.dark,
311
- selected: a.orange[48],
312
- toneOpacity: e.blazeOrange["00"]
313
- },
314
- brown: {
315
- active: t.brown.main,
316
- activeOpacity: a.brown[12],
317
- focus: t.brown.dark,
318
- hover: t.brown.dark,
319
- selected: a.brown[48],
320
- toneOpacity: e.brown["00"]
321
- },
322
- grass: {
323
- active: t.grass.main,
324
- activeOpacity: a.grass[8],
325
- focus: t.grass.dark,
326
- hover: t.grass.dark,
327
- selected: a.grass[48],
328
- toneOpacity: e.grassGreen["00"]
329
- },
330
- turqui: {
331
- active: t.turqui.main,
332
- activeOpacity: a.turqui[8],
333
- focus: t.turqui.dark,
334
- hover: t.turqui.dark,
335
- selected: a.turqui[48],
336
- toneOpacity: e.turquiBlue["00"]
337
- }
338
- }, B = {
339
- patronus: {
340
- active: t.patronus.main,
341
- activeOpacity: a.patronus[8],
342
- focus: t.patronus.light,
343
- hover: t.patronus.light,
344
- selected: a.patronus[48],
345
- toneOpacity: e.patronusBlue[100]
346
- },
347
- blaze: {
348
- active: t.blaze.main,
349
- activeOpacity: a.orange[8],
350
- focus: t.blaze.light,
351
- hover: t.blaze.light,
352
- selected: a.orange[48],
353
- toneOpacity: e.blazeOrange[100]
354
- },
355
- brown: {
356
- active: t.brown.main,
357
- activeOpacity: a.brown[12],
358
- focus: t.brown.light,
359
- hover: t.brown.light,
360
- selected: a.brown[48],
361
- toneOpacity: e.brown[100]
362
- },
363
- grass: {
364
- active: t.grass.main,
365
- activeOpacity: a.grass[8],
366
- focus: t.grass.light,
367
- hover: t.grass.light,
368
- selected: a.grass[48],
369
- toneOpacity: e.grassGreen[100]
370
- },
371
- turqui: {
372
- active: t.turqui.main,
373
- activeOpacity: a.turqui[8],
374
- focus: t.turqui.light,
375
- hover: t.turqui.light,
376
- selected: a.turqui[48],
377
- toneOpacity: e.turquiBlue[100]
378
- }
379
- }, m = Object.keys(t), h = m.map((i) => ({
380
- name: i,
381
- value: t[i].main
382
- })), g = {
383
- black: "#000",
384
- white: "#fff"
385
- }, E = {
386
- 0: "#FFFFFF",
387
- 100: "#F9FAFB",
388
- 200: "#F4F6F8",
389
- 300: "#DFE3E8",
390
- 400: "#C4CDD5",
391
- 500: "#919EAB",
392
- 600: "#637381",
393
- 700: "#454F5B",
394
- 800: "#212B36",
395
- 900: "#161C24",
396
- 5008: r("#919EAB", 0.08),
397
- 50012: r("#919EAB", 0.12),
398
- 50016: r("#919EAB", 0.16),
399
- 50024: r("#919EAB", 0.24),
400
- 50032: r("#919EAB", 0.32),
401
- 50048: r("#919EAB", 0.48),
402
- 50056: r("#919EAB", 0.56),
403
- 50080: r("#919EAB", 0.8),
404
- 50: "",
405
- A100: "",
406
- A200: "",
407
- A400: "",
408
- A700: ""
409
- }, y = {
410
- info: {
411
- lighter: e.crayonBlue[10],
412
- light: e.crayonBlue[30],
413
- main: e.crayonBlue[50],
414
- dark: e.crayonBlue[60],
415
- darker: e.crayonBlue[70],
416
- contrastText: "",
417
- active: e.crayonBlue[50],
418
- activeOpacity: r(e.crayonBlue[50], 0.08),
419
- hover: e.crayonBlue[70],
420
- focus: e.crayonBlue[70],
421
- toneOpacity: r(e.crayonBlue[50], 0.12),
422
- selected: r(e.crayonBlue[50], 0.45)
423
- },
424
- success: {
425
- lighter: e.acidGreen[10],
426
- light: e.acidGreen[30],
427
- main: e.acidGreen[60],
428
- dark: e.acidGreen[70],
429
- darker: e.acidGreen[80],
430
- contrastText: "",
431
- active: e.acidGreen[60],
432
- activeOpacity: r(e.acidGreen[60], 0.08),
433
- hover: e.acidGreen[70],
434
- focus: e.acidGreen[70],
435
- toneOpacity: r(e.acidGreen[60], 0.12),
436
- selected: r(e.acidGreen[60], 0.45)
437
- },
438
- warning: {
439
- lighter: e.middleYellow[10],
440
- light: e.middleYellow[30],
441
- main: e.middleYellow[60],
442
- dark: e.middleYellow[70],
443
- darker: e.middleYellow[80],
444
- contrastText: "",
445
- active: e.middleYellow[60],
446
- activeOpacity: r(e.middleYellow[60], 0.08),
447
- hover: e.middleYellow[70],
448
- focus: e.middleYellow[70],
449
- toneOpacity: r(e.middleYellow[60], 0.12),
450
- selected: r(e.middleYellow[60], 0.45)
451
- },
452
- error: {
453
- lighter: e.flameRed[10],
454
- light: e.flameRed[30],
455
- main: e.flameRed[40],
456
- dark: e.flameRed[60],
457
- darker: e.flameRed[70],
458
- contrastText: "",
459
- active: e.flameRed[40],
460
- activeOpacity: r(e.flameRed[40], 0.08),
461
- hover: e.flameRed[60],
462
- focus: e.flameRed[60],
463
- toneOpacity: r(e.flameRed[40], 0.12),
464
- selected: r(e.flameRed[40], 0.45)
465
- }
466
- }, c = {
467
- light: {
468
- scrollBar: "#5663763D",
469
- gridHover: "#FCFCFC"
470
- },
471
- dark: {
472
- scrollBar: "#5663765D",
473
- gridHover: "#282E2E"
474
- }
475
- }, p = (i) => ({
476
- ...y,
477
- common: g,
478
- primary: t[i],
479
- grey: E,
480
- skeleton: {
481
- default: a.cool[16],
482
- transition: a.cool[8]
483
- }
484
- }), C = (i) => {
485
- const l = p(i), s = u?.[i], d = B?.[i];
486
- return {
487
- light: F({
488
- ...l,
489
- mode: "light",
490
- divider: e.coolGrey[20],
491
- text: {
492
- primary: e.onyx[20],
493
- secondary: e.coolGrey[50],
494
- disabled: e.coolGrey[20]
495
- },
496
- background: {
497
- default: e.marbleLight[10],
498
- hover: a.oxford[4],
499
- surface: a.oxford[4],
500
- subtle: e.marbleLight[10],
501
- main: e.marbleLight[30],
502
- bold: e.marbleLight[60],
503
- backdrop: a.oxford[72],
504
- reverse: e.onyx[50],
505
- header: e.marbleLight[20]
506
- },
507
- border: {
508
- active: s?.active,
509
- selected: s?.selected,
510
- default: a.oxford[4],
511
- primary: a.oxford[16],
512
- secondary: a.oxford[10],
513
- disabled: a.oxford[4],
514
- dense: a.oxford[31],
515
- line: e.coolGrey[10]
516
- },
517
- general: {
518
- scrollBar: c.light.scrollBar,
519
- gridHover: c.light.gridHover
520
- },
521
- primary: {
522
- ...l.primary,
523
- ...s
524
- }
525
- }),
526
- dark: F({
527
- ...l,
528
- mode: "dark",
529
- divider: e.coolGrey[80],
530
- text: {
531
- primary: e.marbleLight[30],
532
- secondary: e.coolGrey[20],
533
- disabled: e.coolGrey[50]
534
- },
535
- background: {
536
- default: e.onyx[40],
537
- hover: a.mint[14],
538
- surface: a.mint[8],
539
- subtle: e.onyx[30],
540
- main: e.onyx[50],
541
- bold: e.onyx[60],
542
- backdrop: a.oxford[72],
543
- reverse: e.marbleLight[10],
544
- header: e.onyx[30]
545
- },
546
- border: {
547
- active: d?.active,
548
- selected: d?.selected,
549
- default: a.mint[8],
550
- primary: a.mint[18],
551
- secondary: a.mint[14],
552
- disabled: a.mint[8],
553
- dense: a.mint[28],
554
- line: e.coolGrey[60]
555
- },
556
- general: {
557
- scrollBar: c.dark.scrollBar,
558
- gridHover: c.dark.gridHover
559
- },
560
- primary: {
561
- ...l.primary,
562
- ...d
563
- }
564
- })
565
- };
566
- };
567
- export {
568
- e as B,
569
- g as C,
570
- E as G,
571
- t as P,
572
- a,
573
- C as g,
574
- h as p
575
- };
File without changes
File without changes