@m4l/styles 7.1.20 → 7.1.22

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 (9) hide show
  1. package/package.json +1 -1
  2. package/theme/palette/baseChipsPalette.js +478 -158
  3. package/theme/palette/baseColors.js +24 -0
  4. package/theme/palette/baseOpacityColors.js +9 -0
  5. package/theme/palette/defaultColors.js +4 -4
  6. package/theme/palette/presetColors.js +10 -10
  7. package/theme/sizes/baseSizes.js +1 -0
  8. package/theme/sizes/types.d.ts +1 -0
  9. package/types/types.d.ts +8 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/styles",
3
- "version": "7.1.20",
3
+ "version": "7.1.22",
4
4
  "license": "UNLICENSED",
5
5
  "author": "m4l team",
6
6
  "publishConfig": {
package/theme/palette/baseChipsPalette.js CHANGED
@@ -1,249 +1,569 @@
1
- import { B as e } from "./baseColors.js";
2
- import { B as o } from "./baseOpacityColors.js";
1
+ import { B as o } from "./baseColors.js";
2
+ import { B as r } from "./baseOpacityColors.js";
3
3
  const c = {
4
- default: {
5
- contrastText: e.marbleLight[10],
4
+ defaultOutlined: {
5
+ /* opacidad */
6
+ color: o.oxford[70],
6
7
  // Comprobado
7
- semanticText: e.oxford[90],
8
+ backgroundColor: r.oxford[50],
8
9
  // Comprobado
9
- backgroundColor: e.oxford[40],
10
+ backgroundHover: r.oxford[20],
10
11
  // Comprobado
11
- backgroundHover: e.oxford[30],
12
+ backgroundActive: r.oxford[30],
12
13
  // Comprobado
13
- backgroundActive: e.oxford[60]
14
+ /* Tone */
15
+ colorTone: o.oxford[70],
16
+ // Comprobado
17
+ backgroundColorTone: o.oxford[40],
18
+ // Comprobado
19
+ backgroundHoverTone: o.oxford[20],
20
+ // Comprobado
21
+ backgroundActiveTone: o.oxford[30]
14
22
  // Comprobado
15
23
  },
16
- defaultOpacity: {
17
- contrastText: e.marbleLight[10],
24
+ defaultContained: {
25
+ /* opacidad */
26
+ color: o.oxford[70],
27
+ // Comprobado
28
+ backgroundColor: r.oxford[10],
29
+ // Comprobado
30
+ backgroundHover: r.oxford[20],
31
+ // Comprobado
32
+ backgroundActive: r.oxford[40],
18
33
  // Comprobado
19
- semanticText: e.onyx[30],
34
+ /* Tono */
35
+ colorTone: o.oxford[10],
20
36
  // Comprobado
21
- backgroundColor: o.onyx[20],
37
+ backgroundColorTone: o.oxford[50],
22
38
  // Comprobado
23
- backgroundHover: o.onyx[10],
39
+ backgroundHoverTone: o.oxford[40],
24
40
  // Comprobado
25
- backgroundActive: o.onyx[50]
41
+ backgroundActiveTone: o.oxford[60]
26
42
  // Comprobado
27
43
  },
28
- warning: {
29
- contrastText: e.onyx[20],
44
+ disabledOutlined: {
45
+ /* opacidad */
46
+ color: o.oxford[60],
30
47
  // Comprobado
31
- semanticText: e.middleYellow[90],
48
+ backgroundColor: r.oxford[50],
32
49
  // Comprobado
33
- backgroundColor: e.middleYellow[40],
50
+ backgroundHover: r.oxford[20],
34
51
  // Comprobado
35
- backgroundHover: e.middleYellow[30],
52
+ backgroundActive: r.oxford[30],
36
53
  // Comprobado
37
- backgroundActive: e.middleYellow[70]
54
+ /* tono */
55
+ colorTone: o.oxford[50],
56
+ // Comprobado
57
+ backgroundColorTone: o.oxford[40],
58
+ // Comprobado
59
+ backgroundHoverTone: o.oxford[20],
60
+ // Comprobado
61
+ backgroundActiveTone: o.oxford[30]
38
62
  // Comprobado
39
63
  },
40
- warningOpacity: {
41
- contrastText: e.onyx[20],
64
+ disabledContained: {
65
+ /* opacidad */
66
+ color: o.oxford[60],
67
+ // Comprobado
68
+ backgroundColor: r.oxford[10],
69
+ // Comprobado
70
+ backgroundHover: r.oxford[20],
42
71
  // Comprobado
43
- semanticText: e.middleYellow[90],
72
+ backgroundActive: r.oxford[40],
44
73
  // Comprobado
45
- backgroundColor: o.middle[40],
74
+ /* tono */
75
+ colorTone: o.oxford[50],
76
+ // Comprobado
77
+ backgroundColorTone: o.oxford[10],
78
+ // Comprobado
79
+ backgroundHoverTone: o.oxford[20],
80
+ // Comprobado
81
+ backgroundActiveTone: o.oxford[30]
46
82
  // Comprobado
47
- backgroundHover: o.middle[30],
48
- // Comprobado,
49
- backgroundActive: o.middle[70]
50
- // Comprobado,
51
83
  },
52
- error: {
53
- contrastText: e.marbleLight[30],
84
+ warningOutlined: {
85
+ /* opacidad */
86
+ color: o.middleYellow[90],
87
+ // Comprobado
88
+ backgroundColor: r.middle[50],
89
+ // Comprobado
90
+ backgroundHover: r.middle[30],
54
91
  // Comprobado
55
- semanticText: e.flameRed[80],
92
+ backgroundActive: r.middle[40],
56
93
  // Comprobado
57
- backgroundColor: e.flameRed[50],
94
+ /* tono */
95
+ colorTone: o.middleYellow[90],
96
+ // Comprobado
97
+ backgroundColorTone: o.middleYellow[40],
98
+ // Comprobado
99
+ backgroundHoverTone: o.middleYellow[10],
100
+ // Comprobado
101
+ backgroundActiveTone: o.middleYellow[20]
58
102
  // Comprobado
59
- backgroundHover: e.flameRed[40],
60
- // Comprobado,
61
- backgroundActive: e.flameRed[80]
62
- // Comprobado,
63
103
  },
64
- errorOpacity: {
65
- contrastText: e.onyx[20],
104
+ warningContained: {
105
+ /* opacidad */
106
+ color: o.middleYellow[90],
107
+ // Comprobado
108
+ backgroundColor: r.middle[20],
109
+ // Comprobado
110
+ backgroundHover: r.middle[40],
66
111
  // Comprobado
67
- semanticText: e.flameRed[80],
112
+ backgroundActive: r.middle[60],
68
113
  // Comprobado
69
- backgroundColor: o.flame[30],
114
+ /* tono */
115
+ colorTone: o.middleYellow[95],
116
+ // Comprobado
117
+ backgroundColorTone: o.middleYellow[50],
118
+ // Comprobado
119
+ backgroundHoverTone: o.middleYellow[40],
120
+ // Comprobado
121
+ backgroundActiveTone: o.middleYellow[60]
70
122
  // Comprobado
71
- backgroundHover: o.flame[20],
72
- // Comprobado,
73
- backgroundActive: o.flame[60]
74
- // Comprobado,
75
123
  },
76
- success: {
77
- contrastText: e.marbleLight[30],
124
+ errorOutlined: {
125
+ /* opacidad */
126
+ color: o.flameRed[60],
127
+ // Comprobado
128
+ backgroundColor: r.flame[60],
129
+ // Comprobado
130
+ backgroundHover: r.flame[30],
131
+ // Comprobado
132
+ backgroundActive: r.flame[50],
78
133
  // Comprobado
79
- semanticText: e.acidGreen[80],
134
+ /* tono */
135
+ colorTone: o.flameRed[60],
80
136
  // Comprobado
81
- backgroundColor: e.acidGreen[50],
137
+ backgroundColorTone: o.flameRed[30],
138
+ // Comprobado
139
+ backgroundHoverTone: o.flameRed[10],
140
+ // Comprobado
141
+ backgroundActiveTone: o.flameRed[20]
82
142
  // Comprobado
83
- backgroundHover: e.acidGreen[40],
84
- // Comprobado,
85
- backgroundActive: e.acidGreen[80]
86
- // Comprobado,
87
143
  },
88
- successOpacity: {
89
- contrastText: e.onyx[20],
144
+ errorContained: {
145
+ /* opacidad */
146
+ color: o.flameRed[60],
147
+ // Comprobado
148
+ backgroundColor: r.flame[20],
149
+ // Comprobado
150
+ backgroundHover: r.flame[30],
151
+ // Comprobado
152
+ backgroundActive: r.flame[50],
90
153
  // Comprobado
91
- semanticText: e.acidGreen[80],
154
+ /* tono */
155
+ colorTone: o.flameRed[5],
92
156
  // Comprobado
93
- backgroundColor: o.acid[20],
157
+ backgroundColorTone: o.flameRed[50],
158
+ // Comprobado
159
+ backgroundHoverTone: o.flameRed[40],
160
+ // Comprobado
161
+ backgroundActiveTone: o.flameRed[60]
94
162
  // Comprobado
95
- backgroundHover: o.acid[10],
96
- // Comprobado,
97
- backgroundActive: o.acid[50]
98
- // Comprobado,
99
163
  },
100
- info: {
101
- contrastText: e.marbleLight[30],
164
+ successOutlined: {
165
+ /* opacidad */
166
+ color: o.acidGreen[80],
167
+ // Comprobado
168
+ backgroundColor: r.acid[50],
169
+ // Comprobado
170
+ backgroundHover: r.acid[10],
171
+ // Comprobado
172
+ backgroundActive: r.acid[30],
102
173
  // Comprobado
103
- semanticText: e.crayonBlue[80],
174
+ /* tono */
175
+ colorTone: o.acidGreen[80],
104
176
  // Comprobado
105
- backgroundColor: e.crayonBlue[50],
177
+ backgroundColorTone: o.acidGreen[30],
178
+ // Comprobado
179
+ backgroundHoverTone: o.acidGreen[10],
180
+ // Comprobado
181
+ backgroundActiveTone: o.acidGreen[20]
106
182
  // Comprobado
107
- backgroundHover: e.crayonBlue[40],
108
- // Comprobado,
109
- backgroundActive: e.crayonBlue[80]
110
- // Comprobado,
111
183
  },
112
- infoOpacity: {
113
- contrastText: e.onyx[20],
184
+ successContained: {
185
+ /* opacidad */
186
+ color: o.acidGreen[80],
187
+ // Comprobado
188
+ backgroundColor: r.acid[20],
189
+ // Comprobado
190
+ backgroundHover: r.acid[40],
191
+ // Comprobado
192
+ backgroundActive: r.acid[60],
114
193
  // Comprobado
115
- semanticText: e.crayonBlue[90],
194
+ /* tono */
195
+ colorTone: o.acidGreen[95],
116
196
  // Comprobado
117
- backgroundColor: o.crayon[20],
197
+ backgroundColorTone: o.acidGreen[50],
198
+ // Comprobado
199
+ backgroundHoverTone: o.acidGreen[40],
200
+ // Comprobado
201
+ backgroundActiveTone: o.acidGreen[60]
202
+ // Comprobado
203
+ },
204
+ forestOutlined: {
205
+ /* opacidad */
206
+ color: o.forest[70],
207
+ // Comprobado
208
+ backgroundColor: r.forest[50],
209
+ // Comprobado
210
+ backgroundHover: r.forest[30],
211
+ // Comprobado
212
+ backgroundActive: r.forest[40],
213
+ // Comprobado
214
+ /* tono */
215
+ colorTone: o.forest[60],
216
+ // Comprobado
217
+ backgroundColorTone: o.forest[50],
218
+ // Comprobado
219
+ backgroundHoverTone: o.forest[10],
220
+ // Comprobado
221
+ backgroundActiveTone: o.forest[20]
222
+ // Comprobado
223
+ },
224
+ forestContained: {
225
+ /* opacidad */
226
+ color: o.forest[90],
227
+ // Comprobado
228
+ backgroundColor: r.forest[20],
229
+ // Comprobado
230
+ backgroundHover: r.forest[30],
231
+ // Comprobado
232
+ backgroundActive: r.forest[40],
233
+ // Comprobado
234
+ /* tono */
235
+ colorTone: o.forest[5],
236
+ // Comprobado
237
+ backgroundColorTone: o.forest[60],
238
+ // Comprobado
239
+ backgroundHoverTone: o.forest[50],
240
+ // Comprobado
241
+ backgroundActiveTone: o.forest[70]
242
+ // Comprobado
243
+ },
244
+ infoOutlined: {
245
+ /* opacidad */
246
+ color: o.crayonBlue[70],
247
+ // Comprobado
248
+ backgroundColor: r.crayon[60],
249
+ // Comprobado
250
+ backgroundHover: r.crayon[10],
251
+ // Comprobado
252
+ backgroundActive: r.crayon[30],
253
+ // Comprobado
254
+ /* tono */
255
+ colorTone: o.crayonBlue[70],
256
+ // Comprobado
257
+ backgroundColorTone: o.crayonBlue[50],
258
+ // Comprobado
259
+ backgroundHoverTone: o.crayonBlue[5],
260
+ // Comprobado
261
+ backgroundActiveTone: o.crayonBlue[20]
262
+ // Comprobado
263
+ },
264
+ infoContained: {
265
+ /* opacidad */
266
+ color: o.crayonBlue[80],
267
+ // Comprobado
268
+ backgroundColor: r.crayon[30],
269
+ // Comprobado
270
+ backgroundHover: r.crayon[40],
271
+ // Comprobado
272
+ backgroundActive: r.crayon[60],
273
+ // Comprobado
274
+ /* tono */
275
+ colorTone: o.crayonBlue[5],
276
+ // Comprobado
277
+ backgroundColorTone: o.crayonBlue[60],
278
+ // Comprobado
279
+ backgroundHoverTone: o.crayonBlue[50],
280
+ // Comprobado
281
+ backgroundActiveTone: o.crayonBlue[70]
118
282
  // Comprobado
119
- backgroundHover: o.crayon[10],
120
- // Comprobado,
121
- backgroundActive: o.crayon[50]
122
- // Comprobado,
123
283
  }
124
- }, t = {
125
- default: {
126
- contrastText: e.marbleLight[10],
284
+ }, d = {
285
+ defaultOutlined: {
286
+ /* opacidad */
287
+ color: o.oxford[30],
288
+ // Comprobado
289
+ backgroundColor: r.mint[40],
290
+ // Comprobado
291
+ backgroundHover: r.mint[10],
292
+ // Comprobado
293
+ backgroundActive: r.mint[30],
127
294
  // Comprobado
128
- semanticText: e.oxford[10],
295
+ /* Tone */
296
+ colorTone: o.oxford[30],
129
297
  // Comprobado
130
- backgroundColor: e.oxford[40],
298
+ backgroundColorTone: o.coolGrey[70],
299
+ // Comprobado
300
+ backgroundHoverTone: o.onyx[30],
301
+ // Comprobado
302
+ backgroundActiveTone: o.onyx[20]
131
303
  // Comprobado
132
- backgroundHover: e.oxford[30],
133
- // Comprobado,
134
- backgroundActive: e.oxford[70]
135
- // Comprobado,
136
304
  },
137
- defaultOpacity: {
138
- contrastText: e.marbleLight[10],
305
+ defaultContained: {
306
+ /* opacidad */
307
+ color: o.oxford[30],
308
+ // Comprobado
309
+ backgroundColor: r.mint[10],
310
+ // Comprobado
311
+ backgroundHover: r.mint[20],
312
+ // Comprobado
313
+ backgroundActive: r.mint[30],
314
+ // Comprobado
315
+ /* Tono */
316
+ colorTone: o.oxford[20],
139
317
  // Comprobado
140
- semanticText: e.mint[20],
318
+ backgroundColorTone: o.onyx[20],
141
319
  // Comprobado
142
- backgroundColor: o.mint[20],
320
+ backgroundHoverTone: o.onyx[10],
321
+ // Comprobado
322
+ backgroundActiveTone: o.onyx[30]
143
323
  // Comprobado
144
- backgroundHover: o.mint[10],
145
- // Comprobado,
146
- backgroundActive: o.mint[50]
147
- // Comprobado,
148
324
  },
149
- warning: {
150
- contrastText: e.onyx[20],
325
+ disabledOutlined: {
326
+ /* opacidad */
327
+ color: o.coolGrey[40],
328
+ // Comprobado
329
+ backgroundColor: r.cool[50],
330
+ // Comprobado
331
+ backgroundHover: r.mint[20],
332
+ // Comprobado
333
+ backgroundActive: r.cool[60],
334
+ // Comprobado
335
+ /* tono */
336
+ colorTone: o.coolGrey[40],
151
337
  // Comprobado
152
- semanticText: e.middleYellow[30],
338
+ backgroundColorTone: o.coolGrey[70],
153
339
  // Comprobado
154
- backgroundColor: e.middleYellow[40],
340
+ backgroundHoverTone: o.coolGrey[80],
341
+ // Comprobado
342
+ backgroundActiveTone: o.coolGrey[90]
155
343
  // Comprobado
156
- backgroundHover: e.middleYellow[30],
157
- // Comprobado,
158
- backgroundActive: e.middleYellow[70]
159
- // Comprobado,
160
344
  },
161
- warningOpacity: {
162
- contrastText: e.marbleLight[30],
345
+ disabledContained: {
346
+ /* opacidad */
347
+ color: o.coolGrey[40],
348
+ // Comprobado
349
+ backgroundColor: r.mint[10],
350
+ // Comprobado
351
+ backgroundHover: r.mint[30],
352
+ // Comprobado
353
+ backgroundActive: r.mint[50],
354
+ // Comprobado
355
+ /* tono */
356
+ colorTone: o.coolGrey[30],
163
357
  // Comprobado
164
- semanticText: e.middleYellow[30],
358
+ backgroundColorTone: o.coolGrey[80],
165
359
  // Comprobado
166
- backgroundColor: o.middle[40],
360
+ backgroundHoverTone: o.coolGrey[70],
361
+ // Comprobado
362
+ backgroundActiveTone: o.coolGrey[90]
167
363
  // Comprobado
168
- backgroundHover: o.middle[30],
169
- // Comprobado,
170
- backgroundActive: o.middle[70]
171
- // Comprobado,
172
364
  },
173
- error: {
174
- contrastText: e.marbleLight[30],
365
+ warningOutlined: {
366
+ /* opacidad */
367
+ color: o.middleYellow[50],
368
+ // Comprobado
369
+ backgroundColor: r.middle[40],
370
+ // Comprobado
371
+ backgroundHover: r.middle[10],
372
+ // Comprobado
373
+ backgroundActive: r.middle[30],
374
+ // Comprobado
375
+ /* tono */
376
+ colorTone: o.middleYellow[50],
175
377
  // Comprobado
176
- semanticText: e.flameRed[20],
378
+ backgroundColorTone: o.middleYellow[80],
177
379
  // Comprobado
178
- backgroundColor: e.flameRed[40],
380
+ backgroundHoverTone: o.middleYellow[95],
381
+ // Comprobado
382
+ backgroundActiveTone: o.middleYellow[90]
179
383
  // Comprobado
180
- backgroundHover: e.flameRed[30],
181
- // Comprobado,
182
- backgroundActive: e.flameRed[70]
183
- // Comprobado,
184
384
  },
185
- errorOpacity: {
186
- contrastText: e.marbleLight[30],
385
+ warningContained: {
386
+ /* opacidad */
387
+ color: o.middleYellow[40],
388
+ // Comprobado
389
+ backgroundColor: r.middle[10],
390
+ // Comprobado
391
+ backgroundHover: r.middle[30],
392
+ // Comprobado
393
+ backgroundActive: r.middle[40],
394
+ // Comprobado
395
+ /* tono */
396
+ colorTone: o.middleYellow[95],
397
+ // Comprobado
398
+ backgroundColorTone: o.middleYellow[50],
187
399
  // Comprobado
188
- semanticText: e.flameRed[20],
400
+ backgroundHoverTone: o.middleYellow[60],
189
401
  // Comprobado
190
- backgroundColor: o.flame[40],
402
+ backgroundActiveTone: o.middleYellow[70]
191
403
  // Comprobado
192
- backgroundHover: o.flame[30],
193
- // Comprobado,
194
- backgroundActive: o.flame[70]
195
- // Comprobado,
196
404
  },
197
- success: {
198
- contrastText: e.marbleLight[30],
405
+ errorOutlined: {
406
+ /* opacidad */
407
+ color: o.flameRed[30],
408
+ // Comprobado
409
+ backgroundColor: r.flame[50],
410
+ // Comprobado
411
+ backgroundHover: r.flame[10],
412
+ // Comprobado
413
+ backgroundActive: r.flame[30],
414
+ // Comprobado
415
+ /* tono */
416
+ colorTone: o.flameRed[30],
417
+ // Comprobado
418
+ backgroundColorTone: o.flameRed[50],
199
419
  // Comprobado
200
- semanticText: e.acidGreen[20],
420
+ backgroundHoverTone: o.flameRed[70],
201
421
  // Comprobado
202
- backgroundColor: e.acidGreen[50],
422
+ backgroundActiveTone: o.flameRed[80]
203
423
  // Comprobado
204
- backgroundHover: e.acidGreen[40],
205
- // Comprobado,
206
- backgroundActive: e.acidGreen[80]
207
- // Comprobado,
208
424
  },
209
- successOpacity: {
210
- contrastText: e.marbleLight[30],
425
+ errorContained: {
426
+ /* opacidad */
427
+ color: o.flameRed[30],
211
428
  // Comprobado
212
- semanticText: e.acidGreen[20],
429
+ backgroundColor: r.flame[30],
213
430
  // Comprobado
214
- backgroundColor: o.acid[20],
431
+ backgroundHover: r.flame[40],
432
+ // Comprobado
433
+ backgroundActive: r.flame[50],
434
+ // Comprobado
435
+ /* tono */
436
+ colorTone: o.flameRed[5],
437
+ // Comprobado
438
+ backgroundColorTone: o.flameRed[60],
439
+ // Comprobado
440
+ backgroundHoverTone: o.flameRed[50],
441
+ // Comprobado
442
+ backgroundActiveTone: o.flameRed[70]
215
443
  // Comprobado
216
- backgroundHover: o.acid[10],
217
- // Comprobado,
218
- backgroundActive: o.acid[50]
219
- // Comprobado,
220
444
  },
221
- info: {
222
- contrastText: e.marbleLight[30],
445
+ successOutlined: {
446
+ /* opacidad */
447
+ color: o.acidGreen[30],
448
+ // Comprobado
449
+ backgroundColor: r.acid[20],
450
+ // Comprobado
451
+ backgroundHover: r.acid[10],
452
+ // Comprobado
453
+ backgroundActive: r.acid[30],
454
+ // Comprobado
455
+ /* tono */
456
+ colorTone: o.acidGreen[40],
457
+ // Comprobado
458
+ backgroundColorTone: o.acidGreen[80],
223
459
  // Comprobado
224
- semanticText: e.crayonBlue[20],
460
+ backgroundHoverTone: o.acidGreen[90],
225
461
  // Comprobado
226
- backgroundColor: e.crayonBlue[50],
462
+ backgroundActiveTone: o.acidGreen[95]
227
463
  // Comprobado
228
- backgroundHover: e.crayonBlue[40],
229
- // Comprobado,
230
- backgroundActive: e.crayonBlue[80]
231
- // Comprobado,
232
464
  },
233
- infoOpacity: {
234
- contrastText: e.marbleLight[30],
465
+ successContained: {
466
+ /* opacidad */
467
+ color: o.acidGreen[20],
468
+ // Comprobado
469
+ backgroundColor: r.acid[20],
470
+ // Comprobado
471
+ backgroundHover: r.acid[40],
472
+ // Comprobado
473
+ backgroundActive: r.acid[70],
474
+ // Comprobado
475
+ /* tono */
476
+ colorTone: o.acidGreen[95],
477
+ // Comprobado
478
+ backgroundColorTone: o.acidGreen[50],
479
+ // Comprobado
480
+ backgroundHoverTone: o.acidGreen[40],
481
+ // Comprobado
482
+ backgroundActiveTone: o.acidGreen[60]
483
+ // Comprobado
484
+ },
485
+ forestOutlined: {
486
+ /* opacidad */
487
+ color: o.forest[30],
488
+ // Comprobado
489
+ backgroundColor: r.forest[50],
490
+ // Comprobado
491
+ backgroundHover: r.forest[20],
492
+ // Comprobado
493
+ backgroundActive: r.forest[40],
494
+ // Comprobado
495
+ /* tono */
496
+ colorTone: o.forest[40],
497
+ // Comprobado
498
+ backgroundColorTone: o.forest[70],
499
+ // Comprobado
500
+ backgroundHoverTone: o.forest[80],
501
+ // Comprobado
502
+ backgroundActiveTone: o.forest[90]
503
+ // Comprobado
504
+ },
505
+ forestContained: {
506
+ /* opacidad */
507
+ color: o.forest[40],
508
+ // Comprobado
509
+ backgroundColor: r.forest[20],
510
+ // Comprobado
511
+ backgroundHover: r.forest[30],
512
+ // Comprobado
513
+ backgroundActive: r.forest[40],
514
+ // Comprobado
515
+ /* tono */
516
+ colorTone: o.forest[5],
517
+ // Comprobado
518
+ backgroundColorTone: o.forest[70],
519
+ // Comprobado
520
+ backgroundHoverTone: o.forest[60],
521
+ // Comprobado
522
+ backgroundActiveTone: o.forest[80]
523
+ // Comprobado
524
+ },
525
+ infoOutlined: {
526
+ /* opacidad */
527
+ color: o.crayonBlue[40],
528
+ // Comprobado
529
+ backgroundColor: r.crayon[50],
530
+ // Comprobado
531
+ backgroundHover: r.crayon[20],
532
+ // Comprobado
533
+ backgroundActive: r.crayon[40],
534
+ // Comprobado
535
+ /* tono */
536
+ colorTone: o.crayonBlue[40],
537
+ // Comprobado
538
+ backgroundColorTone: o.crayonBlue[50],
539
+ // Comprobado
540
+ backgroundHoverTone: o.crayonBlue[90],
541
+ // Comprobado
542
+ backgroundActiveTone: o.crayonBlue[95]
543
+ // Comprobado
544
+ },
545
+ infoContained: {
546
+ /* opacidad */
547
+ color: o.crayonBlue[20],
548
+ // Comprobado
549
+ backgroundColor: r.crayon[30],
550
+ // Comprobado
551
+ backgroundHover: r.crayon[40],
552
+ // Comprobado
553
+ backgroundActive: r.crayon[60],
554
+ // Comprobado
555
+ /* tono */
556
+ colorTone: o.crayonBlue[5],
557
+ // Comprobado
558
+ backgroundColorTone: o.crayonBlue[60],
235
559
  // Comprobado
236
- semanticText: e.crayonBlue[40],
560
+ backgroundHoverTone: o.crayonBlue[50],
237
561
  // Comprobado
238
- backgroundColor: o.crayon[40],
562
+ backgroundActiveTone: o.crayonBlue[70]
239
563
  // Comprobado
240
- backgroundHover: o.crayon[30],
241
- // Comprobado,
242
- backgroundActive: o.crayon[70]
243
- // Comprobado,
244
564
  }
245
565
  };
246
566
  export {
247
567
  c as B,
248
- t as a
568
+ d as a
249
569
  };
package/theme/palette/baseColors.js CHANGED
@@ -95,6 +95,30 @@ const F = {
95
95
  95: "#2A3F2C"
96
96
  // Comprobado
97
97
  },
98
+ forest: {
99
+ 5: "#F4FCF1",
100
+ // Comprobado
101
+ 10: "#E4F9DF",
102
+ // Comprobado
103
+ 20: "#CAF2C0",
104
+ // Comprobado
105
+ 30: "#9EE78E",
106
+ // Comprobado
107
+ 40: "#6BD256",
108
+ // Comprobado
109
+ 50: "#46B82F",
110
+ // Comprobado
111
+ 60: "#339320",
112
+ // Comprobado
113
+ 70: "#2C781D",
114
+ // Comprobado
115
+ 80: "#275F1C",
116
+ // Comprobado
117
+ 90: "#204E19",
118
+ // Comprobado
119
+ 95: "#0C2B08"
120
+ // Comprobado
121
+ },
98
122
  grassGreen: {
99
123
  5: "#D9ECE6",
100
124
  // Comprobado
package/theme/palette/baseOpacityColors.js CHANGED
@@ -119,6 +119,15 @@ const a = {
119
119
  60: e(r.acidGreen[50], 0.6),
120
120
  70: e(r.acidGreen[50], 0.72)
121
121
  },
122
+ forest: {
123
+ 10: e(r.forest[50], 0.08),
124
+ 20: e(r.forest[50], 0.12),
125
+ 30: e(r.forest[50], 0.16),
126
+ 40: e(r.forest[50], 0.32),
127
+ 50: e(r.forest[50], 0.48),
128
+ 60: e(r.forest[50], 0.6),
129
+ 70: e(r.forest[50], 0.72)
130
+ },
122
131
  flame: {
123
132
  10: e(r.flameRed[50], 0.08),
124
133
  20: e(r.flameRed[50], 0.12),
package/theme/palette/defaultColors.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { B as a } from "./baseOpacityColors.js";
2
2
  import { B as i } from "./baseColors.js";
3
3
  const t = {
4
- enabledLight: i.oxford[20],
4
+ enabledLight: i.oxford[10],
5
5
  // Comprobado
6
6
  enabledDark: i.onyx[30],
7
7
  // Comprobado
8
- hoverLight: i.oxford[10],
8
+ hoverLight: i.oxford[20],
9
9
  // Comprobado
10
10
  hoverDark: i.onyx[10],
11
11
  // Comprobado
@@ -17,11 +17,11 @@ const t = {
17
17
  // Comprobado
18
18
  focusDark: i.oxford[50],
19
19
  // Comprobado
20
- enabledOpacityLight: a.oxford[20],
20
+ enabledOpacityLight: a.oxford[10],
21
21
  // Comprobado
22
22
  enabledOpacityDark: a.mint[20],
23
23
  // Comprobado
24
- hoverOpacityLight: a.oxford[10],
24
+ hoverOpacityLight: a.oxford[20],
25
25
  // Comprobado
26
26
  hoverOpacityDark: a.mint[10],
27
27
  // Comprobado
package/theme/palette/presetColors.js CHANGED
@@ -18,9 +18,9 @@ const a = {
18
18
  // comprobado,
19
19
  activeDark: t.patronusBlue[70],
20
20
  // comprobado,
21
- focusLight: t.patronusBlue[50],
21
+ focusLight: t.patronusBlue[80],
22
22
  // comprobado,
23
- focusDark: t.patronusBlue[50],
23
+ focusDark: t.patronusBlue[80],
24
24
  // comprobado,
25
25
  enabledOpacityLight: e.patronus[20],
26
26
  // comprobado
@@ -90,9 +90,9 @@ const a = {
90
90
  // comprobado,
91
91
  activeDark: t.turquiBlue[70],
92
92
  // comprobado,
93
- focusLight: t.turquiBlue[50],
93
+ focusLight: t.turquiBlue[80],
94
94
  // comprobado,
95
- focusDark: t.turquiBlue[50],
95
+ focusDark: t.turquiBlue[80],
96
96
  // comprobado,
97
97
  enabledOpacityLight: e.turqui[20],
98
98
  // comprobado
@@ -162,9 +162,9 @@ const a = {
162
162
  // comprobado,
163
163
  activeDark: t.brown[70],
164
164
  // comprobado,
165
- focusLight: t.brown[50],
165
+ focusLight: t.brown[80],
166
166
  // comprobado,
167
- focusDark: t.brown[50],
167
+ focusDark: t.brown[80],
168
168
  // comprobado,
169
169
  enabledOpacityLight: e.brown[20],
170
170
  // comprobado
@@ -234,9 +234,9 @@ const a = {
234
234
  // comprobado,
235
235
  activeDark: t.blazeOrange[70],
236
236
  // comprobado,
237
- focusLight: t.blazeOrange[50],
237
+ focusLight: t.blazeOrange[80],
238
238
  // comprobado,
239
- focusDark: t.blazeOrange[50],
239
+ focusDark: t.blazeOrange[80],
240
240
  // comprobado,
241
241
  enabledOpacityLight: e.blaze[20],
242
242
  // comprobado
@@ -306,9 +306,9 @@ const a = {
306
306
  // comprobado,
307
307
  activeDark: t.grassGreen[70],
308
308
  // comprobado,
309
- focusLight: t.grassGreen[50],
309
+ focusLight: t.grassGreen[80],
310
310
  // comprobado,
311
- focusDark: t.grassGreen[50],
311
+ focusDark: t.grassGreen[80],
312
312
  // comprobado,
313
313
  enabledOpacityLight: e.grass[20],
314
314
  // comprobado
package/theme/sizes/baseSizes.js CHANGED
@@ -3,6 +3,7 @@ const p = {
3
3
  "sp0-5": "2px",
4
4
  sp1: "4px",
5
5
  sp2: "8px",
6
+ "sp2-5": "10px",
6
7
  sp3: "12px",
7
8
  "sp3-5": "14px",
8
9
  sp4: "16px",
package/theme/sizes/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface BaseSpacings {
16
16
  'sp0-5': string;
17
17
  sp1: string;
18
18
  sp2: string;
19
+ 'sp2-5': string;
19
20
  sp3: string;
20
21
  'sp3-5': string;
21
22
  sp4: string;
package/types/types.d.ts CHANGED
@@ -15,8 +15,8 @@ export type SemanticColorOptionsType = 'info' | 'success' | 'warning' | 'error';
15
15
  * Son los conjuntos de colores que se pueden usar en los componentes y corresponde al tipo PaletteColor
16
16
  */
17
17
  export type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
18
- export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
19
- export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'onyx' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
18
+ export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'forest' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
19
+ export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'onyx' | 'oxford' | 'middle' | 'acid' | 'forest' | 'flame' | 'crayon';
20
20
  export interface Colors {
21
21
  /**
22
22
  * ToneOpacity se usa para colorear el fondo de los celdas en el compksonente grid.
@@ -131,16 +131,19 @@ export type ColorState = 'warning' | 'delete' | 'info' | 'success';
131
131
  * Opciones de colores para pinta los chips
132
132
  */
133
133
  export interface ChipColor {
134
- contrastText: string;
135
- semanticText: string;
134
+ color: string;
136
135
  backgroundColor: string;
137
136
  backgroundHover: string;
138
137
  backgroundActive: string;
138
+ colorTone: string;
139
+ backgroundColorTone: string;
140
+ backgroundHoverTone: string;
141
+ backgroundActiveTone: string;
139
142
  }
140
143
  /**
141
144
  * Lista de opciones de colores para pintar los chips
142
145
  */
143
- export type ChipColorOptions = 'default' | 'defaultOpacity' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
146
+ export type ChipColorOptions = 'defaultContained' | 'defaultOutlined' | 'disabledContained' | 'disabledOutlined' | 'warningContained' | 'warningOutlined' | 'errorContained' | 'errorOutlined' | 'successContained' | 'successOutlined' | 'forestContained' | 'forestOutlined' | 'infoContained' | 'infoOutlined';
144
147
  /**
145
148
  * Representa la definición de la lista de colores para usarse en los chips. Son los colores con los que se van a pintar el componente chip.
146
149
  */