@m4l/styles 7.1.21 → 7.1.23

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 (10) hide show
  1. package/package.json +1 -1
  2. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts +10 -84
  3. package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.js +9 -79
  4. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +1 -0
  5. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.js +1 -0
  6. package/theme/palette/baseChipsPalette.js +478 -158
  7. package/theme/palette/baseColors.js +24 -0
  8. package/theme/palette/baseOpacityColors.js +9 -0
  9. package/theme/palette/defaultColors.js +4 -4
  10. 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.21",
3
+ "version": "7.1.23",
4
4
  "license": "UNLICENSED",
5
5
  "author": "m4l team",
6
6
  "publishConfig": {
package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.d.ts CHANGED
@@ -80,11 +80,6 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
80
80
  width: string;
81
81
  height: string;
82
82
  alignItems: string;
83
- '& .M4LIcon-root': {
84
- '& .M4LIcon-icon': {
85
- background: string;
86
- };
87
- };
88
83
  '& .M4LAreasViewer-windowHeaderTitle': {
89
84
  display: string;
90
85
  alignItems: string;
@@ -100,15 +95,6 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
100
95
  color: string;
101
96
  };
102
97
  };
103
- '& .M4LAreasViewer-windowHeaderCancelHandle': {
104
- '& .M4LIconButton-icon': {
105
- '& .MuiButtonBase-root': {
106
- '& .M4LIcon-icon': {
107
- background: string;
108
- };
109
- };
110
- };
111
- };
112
98
  };
113
99
  '& .M4LTypography-root .MuiTypography-root': {
114
100
  color: string;
@@ -213,37 +199,14 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
213
199
  overflow: string;
214
200
  cursor: string;
215
201
  '& .M4LAreasViewer-windowHeaderContent': {
216
- '& .M4LIcon-root': {
217
- '& .M4LIcon-icon': {
218
- background: string;
219
- };
220
- };
221
- '& .M4LAreasViewer-windowHeaderCancelHandle': {
222
- '& .M4LIcon-root': {
223
- '& .M4LIcon-icon': {
224
- background: string;
225
- };
226
- };
227
- };
202
+ '& .M4LAreasViewer-windowHeaderCancelHandle': {};
228
203
  };
229
204
  '& .M4LTypography-root .MuiTypography-root': {
230
205
  color: string;
231
206
  };
232
- '& .MuiButtonBase-root': {
233
- '& .M4LIcon-icon': {
234
- backgroundColor: string;
235
- };
236
- };
237
- '& .Mui-disabled': {
238
- '& .M4LIcon-icon': {
239
- backgroundColor: string;
240
- };
241
- };
242
- '& .MuiButtonBase-root:hover': {
243
- '& .M4LIcon-icon': {
244
- backgroundColor: string;
245
- };
246
- };
207
+ '& .MuiButtonBase-root': {};
208
+ '& .Mui-disabled': {};
209
+ '& .MuiButtonBase-root:hover': {};
247
210
  };
248
211
  };
249
212
  };
@@ -276,18 +239,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
276
239
  background: string;
277
240
  borderRadius: string;
278
241
  backdropFilter: string;
279
- '& .M4LIcon-root.custom-handle': {
280
- '& .M4LIcon-icon': {
281
- backgroundColor: string;
282
- width: string;
283
- height: string;
284
- minWidth: string;
285
- minHeight: string;
286
- boxShadow: string;
287
- border: string;
288
- borderColor: string;
289
- };
290
- };
242
+ '& .M4LIcon-root.custom-handle': {};
291
243
  '& .M4LAreasViewer-windowRootContainer': {
292
244
  background: string;
293
245
  borderRadius: string;
@@ -299,15 +251,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
299
251
  borderTopRightRadius: string;
300
252
  background: string;
301
253
  border: string;
302
- '& .M4LIcon-root': {
303
- '& .M4LIcon-icon': {
304
- width: string;
305
- height: string;
306
- minWidth: string;
307
- minHeight: string;
308
- backgroundColor: string;
309
- };
310
- };
254
+ '& .M4LIcon-root': {};
311
255
  '& .M4LTypography-root .MuiTypography-root': {
312
256
  color: string;
313
257
  overflow: string;
@@ -341,11 +285,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
341
285
  background: string;
342
286
  borderRadius: string;
343
287
  boxShadow: string;
344
- '& .M4LIcon-root': {
345
- '& .M4LIcon-icon': {
346
- backgroundColor: string;
347
- };
348
- };
288
+ '& .M4LIcon-root': {};
349
289
  '& .M4LTypography-root .MuiTypography-root': {
350
290
  color: string;
351
291
  overflow: string;
@@ -369,11 +309,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
369
309
  background: string;
370
310
  borderTopLeftRadius: string;
371
311
  borderTopRightRadius: string;
372
- '& .M4LIcon-root': {
373
- '& .M4LIcon-icon': {
374
- backgroundColor: string;
375
- };
376
- };
312
+ '& .M4LIcon-root': {};
377
313
  '& .M4LTypography-root .MuiTypography-root': {
378
314
  color: string;
379
315
  overflow: string;
@@ -392,11 +328,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
392
328
  background: string;
393
329
  borderTopLeftRadius: string;
394
330
  borderTopRightRadius: string;
395
- '& .M4LIcon-root': {
396
- '& .M4LIcon-icon': {
397
- backgroundColor: string;
398
- };
399
- };
331
+ '& .M4LIcon-root': {};
400
332
  '& .M4LTypography-root .MuiTypography-root': {
401
333
  color: string;
402
334
  overflow: string;
@@ -419,13 +351,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyle
419
351
  boxShadow: string;
420
352
  '&.M4LAreasViewer-selected': {
421
353
  background: string;
422
- '& .M4LIconButton-root': {
423
- '& .M4LIcon-root': {
424
- '& .M4LIcon-icon': {
425
- backgroundColor: string;
426
- };
427
- };
428
- };
354
+ '& .M4LIconButton-root': {};
429
355
  };
430
356
  };
431
357
  '& .M4LAreasViewer-panelWindowsSeparator': {
package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.js CHANGED
@@ -81,11 +81,6 @@ const o = (r) => ({
81
81
  width: "100%",
82
82
  height: "100%",
83
83
  alignItems: "center",
84
- "& .M4LIcon-root": {
85
- "& .M4LIcon-icon": {
86
- background: r.vars.palette.text.secondary
87
- }
88
- },
89
84
  "& .M4LAreasViewer-windowHeaderTitle": {
90
85
  display: "flex",
91
86
  alignItems: "center",
@@ -100,15 +95,6 @@ const o = (r) => ({
100
95
  width: "100%",
101
96
  color: r.vars.palette.text.secondary
102
97
  }
103
- },
104
- "& .M4LAreasViewer-windowHeaderCancelHandle": {
105
- "& .M4LIconButton-icon": {
106
- "& .MuiButtonBase-root": {
107
- "& .M4LIcon-icon": {
108
- background: r.vars.palette.text.secondary
109
- }
110
- }
111
- }
112
98
  }
113
99
  },
114
100
  "& .M4LTypography-root .MuiTypography-root": {
@@ -177,38 +163,15 @@ const o = (r) => ({
177
163
  overflow: "hidden",
178
164
  cursor: "move",
179
165
  "& .M4LAreasViewer-windowHeaderContent": {
180
- "& .M4LIcon-root": {
181
- "& .M4LIcon-icon": {
182
- background: r.vars.palette.primary.focusVisible
183
- }
184
- },
185
- "& .M4LAreasViewer-windowHeaderCancelHandle": {
186
- "& .M4LIcon-root": {
187
- "& .M4LIcon-icon": {
188
- background: r.vars.palette.text.primary
189
- }
190
- }
191
- }
166
+ "& .M4LAreasViewer-windowHeaderCancelHandle": {}
192
167
  },
193
168
  "& .M4LTypography-root .MuiTypography-root": {
194
169
  ...r.colorSchemes.finalTheme.typography.paragraphDens,
195
170
  color: r.vars.palette.primary.focusVisible
196
171
  },
197
- "& .MuiButtonBase-root": {
198
- "& .M4LIcon-icon": {
199
- backgroundColor: r.vars.palette.text.primary
200
- }
201
- },
202
- "& .Mui-disabled": {
203
- "& .M4LIcon-icon": {
204
- backgroundColor: r.vars.palette.text.disabled
205
- }
206
- },
207
- "& .MuiButtonBase-root:hover": {
208
- "& .M4LIcon-icon": {
209
- backgroundColor: r.vars.palette.primary.hover
210
- }
211
- }
172
+ "& .MuiButtonBase-root": {},
173
+ "& .Mui-disabled": {},
174
+ "& .MuiButtonBase-root:hover": {}
212
175
  }
213
176
  }
214
177
  },
@@ -241,18 +204,7 @@ const o = (r) => ({
241
204
  background: r.vars.palette.background.default,
242
205
  borderRadius: "4px",
243
206
  backdropFilter: "blur(8px)",
244
- "& .M4LIcon-root.custom-handle": {
245
- "& .M4LIcon-icon": {
246
- backgroundColor: r.vars.palette.skeleton.default,
247
- width: "11px",
248
- height: "11px",
249
- minWidth: "11px",
250
- minHeight: "11px",
251
- boxShadow: r.vars.customShadows.z1,
252
- border: "1px solid",
253
- borderColor: r.vars.palette.grey[500]
254
- }
255
- },
207
+ "& .M4LIcon-root.custom-handle": {},
256
208
  "& .M4LAreasViewer-windowRootContainer": {
257
209
  background: r.vars.palette.background.default,
258
210
  borderRadius: "4px",
@@ -264,15 +216,7 @@ const o = (r) => ({
264
216
  borderTopRightRadius: "4px",
265
217
  background: r.vars.palette.primary.opacity,
266
218
  border: "none",
267
- "& .M4LIcon-root": {
268
- "& .M4LIcon-icon": {
269
- width: "18px",
270
- height: "18px",
271
- minWidth: "18px",
272
- minHeight: "18px",
273
- backgroundColor: r.vars.palette.text.secondary
274
- }
275
- },
219
+ "& .M4LIcon-root": {},
276
220
  "& .M4LTypography-root .MuiTypography-root": {
277
221
  ...r.colorSchemes.finalTheme.typography.paragraphDens,
278
222
  color: r.vars.palette.text.secondary,
@@ -307,11 +251,7 @@ const o = (r) => ({
307
251
  background: r.vars.palette.background.surface,
308
252
  borderRadius: "4px",
309
253
  boxShadow: r.vars.customShadows.z1,
310
- "& .M4LIcon-root": {
311
- "& .M4LIcon-icon": {
312
- backgroundColor: r.vars.palette.text.primary
313
- }
314
- },
254
+ "& .M4LIcon-root": {},
315
255
  "& .M4LTypography-root .MuiTypography-root": {
316
256
  ...r.colorSchemes.finalTheme.typography.paragraph,
317
257
  color: r.vars.palette.text.primary,
@@ -336,11 +276,7 @@ const o = (r) => ({
336
276
  background: r.vars.palette.primary.opacity,
337
277
  borderTopLeftRadius: "4px",
338
278
  borderTopRightRadius: "4px",
339
- "& .M4LIcon-root": {
340
- "& .M4LIcon-icon": {
341
- backgroundColor: r.vars.palette.text.primary
342
- }
343
- },
279
+ "& .M4LIcon-root": {},
344
280
  "& .M4LTypography-root .MuiTypography-root": {
345
281
  ...r.colorSchemes.finalTheme.typography.paragraphDens,
346
282
  color: r.vars.palette.text.primary,
@@ -364,13 +300,7 @@ const o = (r) => ({
364
300
  boxShadow: r.vars.customShadows.z1,
365
301
  "&.M4LAreasViewer-selected": {
366
302
  background: r.vars.palette.primary.main,
367
- "& .M4LIconButton-root": {
368
- "& .M4LIcon-root": {
369
- "& .M4LIcon-icon": {
370
- backgroundColor: r.vars.palette.primary.contrastText
371
- }
372
- }
373
- }
303
+ "& .M4LIconButton-root": {}
374
304
  }
375
305
  },
376
306
  "& .M4LAreasViewer-panelWindowsSeparator": {
package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare const M4LDataGrid: (theme: Omit<Theme, "palette" | "applyStyles">
21
21
  gap: string;
22
22
  height: string;
23
23
  width: string;
24
+ flexGrow: number;
24
25
  '& .rdg .MuiCheckbox-root': {
25
26
  '& > svg': {
26
27
  color: string;
package/theme/overrides/M4LExtendedComponents/M4LDataGrid.js CHANGED
@@ -14,6 +14,7 @@ const e = (r) => ({
14
14
  gap: "4px",
15
15
  height: "100%",
16
16
  width: "100%",
17
+ flexGrow: 1,
17
18
  "& .rdg .MuiCheckbox-root": {
18
19
  "& > svg": {
19
20
  color: r.vars.palette.text.secondary
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/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
  */