@m4l/styles 7.1.11 → 7.1.13

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 (7) hide show
  1. package/package.json +2 -2
  2. package/theme/palette/defaultColors.js +51 -45
  3. package/theme/palette/presetColors.js +30 -0
  4. package/theme/palette/semanticColors.js +31 -7
  5. package/types/augmentations.d.ts +2 -0
  6. package/types/types.d.ts +2 -0
  7. package/utils/getPaletteByPreset.d.ts +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/styles",
3
- "version": "7.1.11",
3
+ "version": "7.1.13",
4
4
  "license": "UNLICENSED",
5
5
  "author": "m4l team",
6
6
  "publishConfig": {
@@ -10,7 +10,7 @@
10
10
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
11
11
  },
12
12
  "dependencies": {
13
- "@mui/material": "^5.15.19",
13
+ "@mui/material": "5.16.7",
14
14
  "react": "^18.0.0",
15
15
  "react-dom": "^18.0.0"
16
16
  },
package/theme/palette/defaultColors.js CHANGED
@@ -1,6 +1,6 @@
1
- import { B as t } from "./baseOpacityColors.js";
1
+ import { B as a } from "./baseOpacityColors.js";
2
2
  import { B as i } from "./baseColors.js";
3
- const a = {
3
+ const t = {
4
4
  enabledLight: i.oxford[20],
5
5
  // Comprobado
6
6
  enabledDark: i.onyx[30],
@@ -17,37 +17,41 @@ const a = {
17
17
  // Comprobado
18
18
  focusDark: i.oxford[50],
19
19
  // Comprobado
20
- enabledOpacityLight: t.oxford[20],
20
+ enabledOpacityLight: a.oxford[20],
21
21
  // Comprobado
22
- enabledOpacityDark: t.mint[20],
22
+ enabledOpacityDark: a.mint[20],
23
23
  // Comprobado
24
- hoverOpacityLight: t.oxford[10],
24
+ hoverOpacityLight: a.oxford[10],
25
25
  // Comprobado
26
- hoverOpacityDark: t.mint[10],
26
+ hoverOpacityDark: a.mint[10],
27
27
  // Comprobado
28
- activeOpacityLight: t.oxford[30],
28
+ activeOpacityLight: a.oxford[30],
29
29
  // Comprobado
30
- activeOpacityDark: t.mint[30],
30
+ activeOpacityDark: a.mint[30],
31
31
  // Comprobado
32
- focusOpacityLight: t.oxford[40],
32
+ focusOpacityLight: a.oxford[40],
33
33
  // Comprobado
34
- focusOpacityDark: t.mint[40],
34
+ focusOpacityDark: a.mint[40],
35
35
  // Comprobado
36
- opacityLight: t.oxford[10],
36
+ opacityLight: a.oxford[10],
37
37
  // Comprobado
38
- opacityDark: t.mint[10],
38
+ opacityDark: a.mint[10],
39
+ // Comprobado
40
+ semanticTextLight: i.oxford[30],
41
+ // Comprobado
42
+ semanticTextDark: i.oxford[10],
39
43
  // Comprobado
40
44
  mainLight: i.oxford[10],
41
45
  // Comprobado
42
- mainDark: t.mint[20],
46
+ mainDark: a.mint[20],
43
47
  // Comprobado
44
- lighter: t.oxford[40],
48
+ lighter: a.oxford[40],
45
49
  // Comprobado
46
- light: t.oxford[20],
50
+ light: a.oxford[20],
47
51
  // Comprobado
48
- dark: t.mint[30],
52
+ dark: a.mint[30],
49
53
  // Comprobado,
50
- darker: t.mint[50],
54
+ darker: a.mint[50],
51
55
  // Comprobado,
52
56
  // Tone colors
53
57
  toneOpacityLight: i.oxford[5],
@@ -55,37 +59,39 @@ const a = {
55
59
  toneOpacityDark: i.oxford[95]
56
60
  // Comprobado
57
61
  }, c = {
58
- enabled: a.enabledLight,
59
- enabledOpacity: a.enabledOpacityLight,
60
- hover: a.hoverLight,
61
- hoverOpacity: a.hoverOpacityLight,
62
- focus: a.focusLight,
63
- focusOpacity: a.focusOpacityLight,
64
- active: a.activeLight,
65
- activeOpacity: a.activeOpacityLight,
66
- opacity: a.light,
67
- toneOpacity: a.toneOpacityLight,
62
+ enabled: t.enabledLight,
63
+ enabledOpacity: t.enabledOpacityLight,
64
+ hover: t.hoverLight,
65
+ hoverOpacity: t.hoverOpacityLight,
66
+ focus: t.focusLight,
67
+ focusOpacity: t.focusOpacityLight,
68
+ active: t.activeLight,
69
+ activeOpacity: t.activeOpacityLight,
70
+ opacity: t.light,
71
+ toneOpacity: t.toneOpacityLight,
72
+ semanticText: t.semanticTextLight,
68
73
  //Por compatibilidad con MUI
69
- main: a.mainLight,
70
- light: a.light,
71
- dark: a.dark
72
- }, e = {
73
- enabled: a.enabledDark,
74
- enabledOpacity: a.enabledOpacityDark,
75
- hover: a.hoverDark,
76
- hoverOpacity: a.hoverOpacityDark,
77
- focus: a.focusDark,
78
- focusOpacity: a.focusOpacityDark,
79
- active: a.activeDark,
80
- activeOpacity: a.activeOpacityDark,
81
- opacity: a.dark,
82
- toneOpacity: a.toneOpacityDark,
74
+ main: t.mainLight,
75
+ light: t.light,
76
+ dark: t.dark
77
+ }, r = {
78
+ enabled: t.enabledDark,
79
+ enabledOpacity: t.enabledOpacityDark,
80
+ hover: t.hoverDark,
81
+ hoverOpacity: t.hoverOpacityDark,
82
+ focus: t.focusDark,
83
+ focusOpacity: t.focusOpacityDark,
84
+ active: t.activeDark,
85
+ activeOpacity: t.activeOpacityDark,
86
+ opacity: t.dark,
87
+ toneOpacity: t.toneOpacityDark,
88
+ semanticText: t.semanticTextDark,
83
89
  //Por compatibilidad con MUI
84
- main: a.mainDark,
85
- light: a.light,
86
- dark: a.dark
90
+ main: t.mainDark,
91
+ light: t.light,
92
+ dark: t.dark
87
93
  };
88
94
  export {
89
95
  c as B,
90
- e as a
96
+ r as a
91
97
  };
package/theme/palette/presetColors.js CHANGED
@@ -58,6 +58,10 @@ const a = {
58
58
  // comprobado,,
59
59
  contrastText: t.marbleLight[30],
60
60
  // comprobado,
61
+ semanticTextLight: t.patronusBlue[50],
62
+ // comprobado,
63
+ semanticTextDark: t.patronusBlue[50],
64
+ // comprobado,
61
65
  // Tone colors
62
66
  toneOpacityLight: t.patronusBlue[5],
63
67
  // comprobado,
@@ -126,6 +130,10 @@ const a = {
126
130
  // comprobado,,
127
131
  contrastText: t.marbleLight[30],
128
132
  // comprobado,
133
+ semanticTextLight: t.turquiBlue[50],
134
+ // comprobado,
135
+ semanticTextDark: t.turquiBlue[50],
136
+ // comprobado,
129
137
  // Tone colors
130
138
  toneOpacityLight: t.turquiBlue[5],
131
139
  // comprobado,
@@ -194,6 +202,10 @@ const a = {
194
202
  // comprobado,,
195
203
  contrastText: t.marbleLight[30],
196
204
  // comprobado,
205
+ semanticTextLight: t.brown[50],
206
+ // comprobado,
207
+ semanticTextDark: t.brown[50],
208
+ // comprobado,
197
209
  // Tone colors
198
210
  toneOpacityLight: t.brown[5],
199
211
  // comprobado,
@@ -262,6 +274,10 @@ const a = {
262
274
  // comprobado,,
263
275
  contrastText: t.marbleLight[30],
264
276
  // comprobado,
277
+ semanticTextLight: t.blazeOrange[50],
278
+ // comprobado,
279
+ semanticTextDark: t.blazeOrange[50],
280
+ // comprobado,
265
281
  // Tone colors
266
282
  toneOpacityLight: t.blazeOrange[5],
267
283
  // comprobado,
@@ -330,6 +346,10 @@ const a = {
330
346
  // comprobado,,
331
347
  contrastText: t.marbleLight[30],
332
348
  // comprobado,
349
+ semanticTextLight: t.grassGreen[50],
350
+ // comprobado,
351
+ semanticTextDark: t.grassGreen[50],
352
+ // comprobado,
333
353
  // Tone colors
334
354
  toneOpacityLight: t.grassGreen[5],
335
355
  // comprobado,
@@ -357,6 +377,7 @@ const a = {
357
377
  opacity: a.patronus.opacityLight,
358
378
  toneOpacity: a.patronus.toneOpacityLight,
359
379
  contrastText: a.patronus.contrastText,
380
+ semanticText: a.patronus.semanticTextLight,
360
381
  //Por compatibilidad con MUI
361
382
  main: a.patronus.main,
362
383
  light: a.patronus.light,
@@ -377,6 +398,7 @@ const a = {
377
398
  opacity: a.blaze.opacityLight,
378
399
  toneOpacity: a.blaze.toneOpacityLight,
379
400
  contrastText: a.blaze.contrastText,
401
+ semanticText: a.blaze.semanticTextLight,
380
402
  //Por compatibilidad con MUI
381
403
  main: a.blaze.main,
382
404
  light: a.blaze.light,
@@ -397,6 +419,7 @@ const a = {
397
419
  opacity: a.brown.opacityLight,
398
420
  toneOpacity: a.brown.toneOpacityLight,
399
421
  contrastText: a.brown.contrastText,
422
+ semanticText: a.brown.semanticTextLight,
400
423
  //Por compatibilidad con MUI
401
424
  main: a.brown.main,
402
425
  light: a.brown.light,
@@ -417,6 +440,7 @@ const a = {
417
440
  opacity: a.grass.opacityLight,
418
441
  toneOpacity: a.grass.toneOpacityLight,
419
442
  contrastText: a.grass.contrastText,
443
+ semanticText: a.grass.semanticTextLight,
420
444
  //Por compatibilidad con MUI
421
445
  main: a.grass.main,
422
446
  light: a.grass.light,
@@ -437,6 +461,7 @@ const a = {
437
461
  opacity: a.turqui.opacityLight,
438
462
  toneOpacity: a.turqui.toneOpacityLight,
439
463
  contrastText: a.turqui.contrastText,
464
+ semanticText: a.turqui.semanticTextLight,
440
465
  //Por compatibilidad con MUI
441
466
  main: a.turqui.main,
442
467
  light: a.turqui.light,
@@ -458,6 +483,7 @@ const a = {
458
483
  opacity: a.patronus.opacityDark,
459
484
  toneOpacity: a.patronus.toneOpacityDark,
460
485
  contrastText: a.patronus.contrastText,
486
+ semanticText: a.patronus.semanticTextDark,
461
487
  //Por compatibilidad con MUI
462
488
  main: a.patronus.main,
463
489
  light: a.patronus.light,
@@ -478,6 +504,7 @@ const a = {
478
504
  opacity: a.blaze.opacityDark,
479
505
  toneOpacity: a.blaze.toneOpacityDark,
480
506
  contrastText: a.blaze.contrastText,
507
+ semanticText: a.blaze.semanticTextDark,
481
508
  //Por compatibilidad con MUI
482
509
  main: a.blaze.main,
483
510
  light: a.blaze.light,
@@ -498,6 +525,7 @@ const a = {
498
525
  opacity: a.brown.opacityDark,
499
526
  toneOpacity: a.brown.toneOpacityDark,
500
527
  contrastText: a.brown.contrastText,
528
+ semanticText: a.brown.semanticTextDark,
501
529
  //Por compatibilidad con MUI
502
530
  main: a.brown.main,
503
531
  light: a.brown.light,
@@ -518,6 +546,7 @@ const a = {
518
546
  opacity: a.grass.opacityDark,
519
547
  toneOpacity: a.grass.toneOpacityDark,
520
548
  contrastText: a.grass.contrastText,
549
+ semanticText: a.grass.semanticTextDark,
521
550
  //Por compatibilidad con MUI
522
551
  main: a.grass.main,
523
552
  light: a.grass.light,
@@ -538,6 +567,7 @@ const a = {
538
567
  opacity: a.turqui.opacityDark,
539
568
  toneOpacity: a.turqui.toneOpacityDark,
540
569
  contrastText: a.turqui.contrastText,
570
+ semanticText: a.turqui.semanticTextDark,
541
571
  //Por compatibilidad con MUI
542
572
  main: a.turqui.main,
543
573
  light: a.turqui.light,
package/theme/palette/semanticColors.js CHANGED
@@ -43,13 +43,17 @@ const a = {
43
43
  lighter: e.crayonBlue[70],
44
44
  // comprobado,,
45
45
  light: e.crayonBlue[40],
46
- // comprobado,,
46
+ // comprobado,
47
47
  dark: e.crayonBlue[30],
48
- // comprobado,,
48
+ // comprobado,
49
49
  darker: e.crayonBlue[10],
50
50
  // comprobado,,
51
51
  contrastText: e.marbleLight[30],
52
52
  // comprobado,
53
+ semanticTextLight: e.crayonBlue[90],
54
+ // comprobado,
55
+ semanticTextDark: e.crayonBlue[20],
56
+ // comprobado,
53
57
  // Tone colors
54
58
  toneOpacityLight: e.crayonBlue[5],
55
59
  // comprobado,
@@ -104,6 +108,10 @@ const a = {
104
108
  // comprobado,,
105
109
  contrastText: e.onyx[20],
106
110
  // comprobado,
111
+ semanticTextLight: e.middleYellow[90],
112
+ // comprobado,
113
+ semanticTextDark: e.middleYellow[30],
114
+ // comprobado,
107
115
  // Tone colors
108
116
  toneOpacityLight: e.middleYellow[5],
109
117
  // comprobado,
@@ -158,6 +166,10 @@ const a = {
158
166
  // comprobado,,
159
167
  contrastText: e.marbleLight[30],
160
168
  // comprobado,
169
+ semanticTextLight: e.flameRed[80],
170
+ // comprobado,
171
+ semanticTextDark: e.flameRed[20],
172
+ // comprobado,
161
173
  // Tone colors
162
174
  toneOpacityLight: e.flameRed[5],
163
175
  // comprobado,
@@ -203,15 +215,19 @@ const a = {
203
215
  main: e.acidGreen[50],
204
216
  // comprobado,,
205
217
  lighter: e.acidGreen[70],
206
- // comprobado,,
218
+ // comprobado,
207
219
  light: e.acidGreen[40],
208
220
  // comprobado,,
209
221
  dark: e.acidGreen[30],
210
- // comprobado,,
222
+ // comprobado,
211
223
  darker: e.acidGreen[10],
212
- // comprobado,,
224
+ // comprobado,
213
225
  contrastText: e.marbleLight[30],
214
226
  // comprobado,
227
+ semanticTextLight: e.acidGreen[80],
228
+ // comprobado,
229
+ semanticTextDark: e.acidGreen[20],
230
+ // comprobado,
215
231
  // Tone colors
216
232
  toneOpacityLight: e.acidGreen[5],
217
233
  // comprobado,
@@ -230,6 +246,7 @@ const a = {
230
246
  opacity: a.info.opacityLight,
231
247
  toneOpacity: a.info.toneOpacityLight,
232
248
  contrastText: a.info.contrastText,
249
+ semanticText: a.info.semanticTextLight,
233
250
  //Por compatibilidad con MUI
234
251
  main: a.info.main,
235
252
  light: a.info.light,
@@ -247,6 +264,7 @@ const a = {
247
264
  opacity: a.success.opacityLight,
248
265
  toneOpacity: a.success.toneOpacityLight,
249
266
  contrastText: a.success.contrastText,
267
+ semanticText: a.success.semanticTextLight,
250
268
  main: a.success.main,
251
269
  //Por compatibilidad con MUI
252
270
  light: a.success.light,
@@ -264,6 +282,7 @@ const a = {
264
282
  opacity: a.warning.opacityLight,
265
283
  toneOpacity: a.warning.toneOpacityLight,
266
284
  contrastText: a.warning.contrastText,
285
+ semanticText: a.warning.semanticTextLight,
267
286
  main: a.warning.main,
268
287
  //Por compatibilidad con MUI
269
288
  light: a.warning.light,
@@ -281,12 +300,13 @@ const a = {
281
300
  opacity: a.error.opacityLight,
282
301
  toneOpacity: a.error.toneOpacityLight,
283
302
  contrastText: a.error.contrastText,
303
+ semanticText: a.error.semanticTextLight,
284
304
  main: a.error.main,
285
305
  //Por compatibilidad con MUI
286
306
  light: a.error.light,
287
307
  dark: a.error.dark
288
308
  }
289
- }, o = {
309
+ }, n = {
290
310
  info: {
291
311
  enabled: a.info.enabledDark,
292
312
  enabledOpacity: a.info.enabledOpacityDark,
@@ -299,6 +319,7 @@ const a = {
299
319
  opacity: a.info.opacityDark,
300
320
  toneOpacity: a.info.toneOpacityDark,
301
321
  contrastText: a.info.contrastText,
322
+ semanticText: a.info.semanticTextDark,
302
323
  main: a.info.main,
303
324
  //Por compatibilidad con MUI
304
325
  light: a.info.light,
@@ -316,6 +337,7 @@ const a = {
316
337
  opacity: a.success.opacityDark,
317
338
  toneOpacity: a.success.toneOpacityDark,
318
339
  contrastText: a.success.contrastText,
340
+ semanticText: a.success.semanticTextDark,
319
341
  main: a.success.main,
320
342
  //Por compatibilidad con MUI
321
343
  light: a.success.light,
@@ -333,6 +355,7 @@ const a = {
333
355
  opacity: a.warning.opacityDark,
334
356
  toneOpacity: a.warning.toneOpacityDark,
335
357
  contrastText: a.warning.contrastText,
358
+ semanticText: a.warning.semanticTextDark,
336
359
  main: a.warning.main,
337
360
  //Por compatibilidad con MUI
338
361
  light: a.warning.light,
@@ -350,6 +373,7 @@ const a = {
350
373
  opacity: a.error.opacityDark,
351
374
  toneOpacity: a.error.toneOpacityDark,
352
375
  contrastText: a.error.contrastText,
376
+ semanticText: a.error.semanticTextDark,
353
377
  main: a.error.main,
354
378
  //Por compatibilidad con MUI
355
379
  light: a.error.light,
@@ -358,5 +382,5 @@ const a = {
358
382
  };
359
383
  export {
360
384
  r as S,
361
- o as a
385
+ n as a
362
386
  };
package/types/augmentations.d.ts CHANGED
@@ -38,6 +38,8 @@ declare module '@mui/material/styles' {
38
38
  opacity: string;
39
39
  toneOpacity: string;
40
40
 
41
+ semanticText: string;
42
+
41
43
  }
42
44
 
43
45
  interface Palette {
package/types/types.d.ts CHANGED
@@ -81,6 +81,8 @@ export interface PresetColor {
81
81
  opacityLight: string;
82
82
  opacityDark: string;
83
83
  contrastText: string;
84
+ semanticTextLight: string;
85
+ semanticTextDark: string;
84
86
  light: string;
85
87
  lighter: string;
86
88
  toneOpacityLight: string;
package/utils/getPaletteByPreset.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
28
28
  readonly activeOpacity: string;
29
29
  readonly opacity: string;
30
30
  readonly toneOpacity: string;
31
+ readonly semanticText: string;
31
32
  };
32
33
  readonly default: {
33
34
  readonly selected: string;
@@ -47,6 +48,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
47
48
  readonly activeOpacity: string;
48
49
  readonly opacity: string;
49
50
  readonly toneOpacity: string;
51
+ readonly semanticText: string;
50
52
  };
51
53
  readonly divider: string;
52
54
  readonly text: {
@@ -98,6 +100,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
98
100
  readonly activeOpacity: string;
99
101
  readonly opacity: string;
100
102
  readonly toneOpacity: string;
103
+ readonly semanticText: string;
101
104
  };
102
105
  readonly success: {
103
106
  readonly selected: string;
@@ -117,6 +120,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
117
120
  readonly activeOpacity: string;
118
121
  readonly opacity: string;
119
122
  readonly toneOpacity: string;
123
+ readonly semanticText: string;
120
124
  };
121
125
  readonly warning: {
122
126
  readonly selected: string;
@@ -136,6 +140,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
136
140
  readonly activeOpacity: string;
137
141
  readonly opacity: string;
138
142
  readonly toneOpacity: string;
143
+ readonly semanticText: string;
139
144
  };
140
145
  readonly error: {
141
146
  readonly selected: string;
@@ -155,6 +160,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
155
160
  readonly activeOpacity: string;
156
161
  readonly opacity: string;
157
162
  readonly toneOpacity: string;
163
+ readonly semanticText: string;
158
164
  };
159
165
  };
160
166
  readonly dark: {
@@ -178,6 +184,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
178
184
  readonly activeOpacity: string;
179
185
  readonly opacity: string;
180
186
  readonly toneOpacity: string;
187
+ readonly semanticText: string;
181
188
  };
182
189
  readonly default: {
183
190
  readonly selected: string;
@@ -197,6 +204,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
197
204
  readonly activeOpacity: string;
198
205
  readonly opacity: string;
199
206
  readonly toneOpacity: string;
207
+ readonly semanticText: string;
200
208
  };
201
209
  readonly text: {
202
210
  readonly primary: string;
@@ -248,6 +256,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
248
256
  readonly activeOpacity: string;
249
257
  readonly opacity: string;
250
258
  readonly toneOpacity: string;
259
+ readonly semanticText: string;
251
260
  };
252
261
  readonly success: {
253
262
  readonly selected: string;
@@ -267,6 +276,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
267
276
  readonly activeOpacity: string;
268
277
  readonly opacity: string;
269
278
  readonly toneOpacity: string;
279
+ readonly semanticText: string;
270
280
  };
271
281
  readonly warning: {
272
282
  readonly selected: string;
@@ -286,6 +296,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
286
296
  readonly activeOpacity: string;
287
297
  readonly opacity: string;
288
298
  readonly toneOpacity: string;
299
+ readonly semanticText: string;
289
300
  };
290
301
  readonly error: {
291
302
  readonly selected: string;
@@ -305,6 +316,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
305
316
  readonly activeOpacity: string;
306
317
  readonly opacity: string;
307
318
  readonly toneOpacity: string;
319
+ readonly semanticText: string;
308
320
  };
309
321
  };
310
322
  };