@m4l/styles 7.1.5 → 7.1.7

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 (13) hide show
  1. package/package.json +1 -1
  2. package/theme/palette/baseChipsPalette.d.ts +9 -0
  3. package/theme/palette/baseChipsPalette.js +117 -0
  4. package/theme/palette/defaultColors.d.ts +2 -2
  5. package/theme/palette/presetColors.js +10 -0
  6. package/theme/palette/semanticColors.js +1 -1
  7. package/theme/shadows.d.ts +2 -0
  8. package/theme/shadows.js +55 -51
  9. package/types/augmentations.d.ts +3 -0
  10. package/types/types.d.ts +18 -1
  11. package/utils/getPaletteByPreset.d.ts +14 -0
  12. package/utils/getPaletteByPreset.js +86 -73
  13. package/theme/palette/tagsPalette.d.ts +0 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/styles",
3
- "version": "7.1.5",
3
+ "version": "7.1.7",
4
4
  "license": "UNLICENSED",
5
5
  "author": "m4l team",
6
6
  "publishConfig": {
package/theme/palette/baseChipsPalette.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { BaseChipColors } from '../../types';
2
+ /**
3
+ * Lista de colores definidos para pintar los tags en modo light
4
+ */
5
+ export declare const BASE_TAG_OBJECT_COLORS_LIGHT: BaseChipColors;
6
+ /**
7
+ * Lista de colores definidos para pintar los tags en modo light
8
+ */
9
+ export declare const BASE_TAG_OBJECT_COLORS_DARK: BaseChipColors;
package/theme/palette/baseChipsPalette.js ADDED
@@ -0,0 +1,117 @@
1
+ import { B as o } from "./baseColors.js";
2
+ import { B as r } from "./baseOpacityColors.js";
3
+ const e = {
4
+ default: {
5
+ contrastText: o.marbleLight[10],
6
+ backgroundColor: o.oxford[40],
7
+ backgroundHover: o.oxford[60],
8
+ backgroundActive: o.oxford[70]
9
+ },
10
+ warning: {
11
+ contrastText: o.onyx[20],
12
+ backgroundColor: o.middleYellow[40],
13
+ backgroundHover: o.middleYellow[60],
14
+ backgroundActive: o.middleYellow[70]
15
+ },
16
+ warningOpacity: {
17
+ contrastText: o.onyx[20],
18
+ backgroundColor: r.middle[40],
19
+ backgroundHover: r.middle[60],
20
+ backgroundActive: r.middle[70]
21
+ },
22
+ error: {
23
+ contrastText: o.marbleLight[30],
24
+ backgroundColor: o.flameRed[50],
25
+ backgroundHover: o.flameRed[60],
26
+ backgroundActive: o.flameRed[70]
27
+ },
28
+ errorOpacity: {
29
+ contrastText: o.onyx[20],
30
+ backgroundColor: r.flame[30],
31
+ backgroundHover: r.flame[50],
32
+ backgroundActive: r.flame[70]
33
+ },
34
+ success: {
35
+ contrastText: o.marbleLight[30],
36
+ backgroundColor: o.acidGreen[50],
37
+ backgroundHover: o.acidGreen[60],
38
+ backgroundActive: o.acidGreen[70]
39
+ },
40
+ successOpacity: {
41
+ contrastText: o.onyx[20],
42
+ backgroundColor: r.acid[20],
43
+ backgroundHover: r.acid[40],
44
+ backgroundActive: r.acid[70]
45
+ },
46
+ info: {
47
+ contrastText: o.marbleLight[30],
48
+ backgroundColor: o.crayonBlue[50],
49
+ backgroundHover: o.crayonBlue[60],
50
+ backgroundActive: o.crayonBlue[70]
51
+ },
52
+ infoOpacity: {
53
+ contrastText: o.onyx[20],
54
+ backgroundColor: r.crayon[20],
55
+ backgroundHover: r.crayon[40],
56
+ backgroundActive: r.crayon[60]
57
+ }
58
+ }, n = {
59
+ default: {
60
+ contrastText: o.marbleLight[10],
61
+ backgroundColor: o.oxford[40],
62
+ backgroundHover: o.oxford[60],
63
+ backgroundActive: o.oxford[70]
64
+ },
65
+ warning: {
66
+ contrastText: o.onyx[20],
67
+ backgroundColor: o.middleYellow[40],
68
+ backgroundHover: o.middleYellow[60],
69
+ backgroundActive: o.middleYellow[70]
70
+ },
71
+ warningOpacity: {
72
+ contrastText: o.marbleLight[30],
73
+ backgroundColor: r.middle[40],
74
+ backgroundHover: r.middle[60],
75
+ backgroundActive: r.middle[70]
76
+ },
77
+ error: {
78
+ contrastText: o.marbleLight[30],
79
+ backgroundColor: o.flameRed[50],
80
+ backgroundHover: o.flameRed[60],
81
+ backgroundActive: o.flameRed[70]
82
+ },
83
+ errorOpacity: {
84
+ contrastText: o.marbleLight[30],
85
+ backgroundColor: r.flame[30],
86
+ backgroundHover: r.flame[60],
87
+ backgroundActive: r.flame[70]
88
+ },
89
+ success: {
90
+ contrastText: o.marbleLight[30],
91
+ backgroundColor: o.acidGreen[50],
92
+ backgroundHover: o.acidGreen[60],
93
+ backgroundActive: o.acidGreen[70]
94
+ },
95
+ successOpacity: {
96
+ contrastText: o.marbleLight[30],
97
+ backgroundColor: r.acid[20],
98
+ backgroundHover: r.acid[40],
99
+ backgroundActive: r.acid[70]
100
+ },
101
+ info: {
102
+ contrastText: o.marbleLight[30],
103
+ backgroundColor: o.crayonBlue[50],
104
+ backgroundHover: o.crayonBlue[60],
105
+ backgroundActive: o.crayonBlue[70]
106
+ },
107
+ infoOpacity: {
108
+ contrastText: o.marbleLight[20],
109
+ backgroundColor: r.crayon[30],
110
+ backgroundHover: r.crayon[50],
111
+ backgroundActive: r.crayon[70]
112
+ }
113
+ };
114
+ export {
115
+ e as B,
116
+ n as a
117
+ };
package/theme/palette/defaultColors.d.ts CHANGED
@@ -7,8 +7,8 @@ export declare const PRESET_DEFAULT: DefaultPresetColor;
7
7
  /**
8
8
  * Opción de paleta default en modo light, se usa para colorear componentes con la variante semántica de tipo default
9
9
  */
10
- export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
10
+ export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;
11
11
  /**
12
12
  * Opción de paleta default en modo dark, se usa para colorear componentes con la variante semántica de tipo default
13
13
  */
14
- export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
14
+ export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;
package/theme/palette/presetColors.js CHANGED
@@ -123,6 +123,7 @@ const t = {
123
123
  hoverOpacity: t.patronus.opacityHoverLight,
124
124
  focusOpacity: t.patronus.opacityFocusLight,
125
125
  activeOpacity: t.patronus.opacityActiveLight,
126
+ selected: t.patronus.opacityHoverLight,
126
127
  //Por compatibilidad con MUI
127
128
  light: t.patronus.light,
128
129
  dark: t.patronus.dark
@@ -138,6 +139,7 @@ const t = {
138
139
  hoverOpacity: t.blaze.opacityHoverLight,
139
140
  focusOpacity: t.blaze.opacityFocusLight,
140
141
  activeOpacity: t.blaze.opacityActiveLight,
142
+ selected: t.blaze.opacityHoverLight,
141
143
  //Por compatibilidad con MUI
142
144
  light: t.blaze.light,
143
145
  dark: t.blaze.dark
@@ -153,6 +155,7 @@ const t = {
153
155
  hoverOpacity: t.brown.opacityHoverLight,
154
156
  focusOpacity: t.brown.opacityFocusLight,
155
157
  activeOpacity: t.brown.opacityActiveLight,
158
+ selected: t.brown.opacityHoverLight,
156
159
  //Por compatibilidad con MUI
157
160
  light: t.brown.light,
158
161
  dark: t.brown.dark
@@ -168,6 +171,7 @@ const t = {
168
171
  hoverOpacity: t.grass.opacityHoverLight,
169
172
  focusOpacity: t.grass.opacityFocusLight,
170
173
  activeOpacity: t.grass.opacityActiveLight,
174
+ selected: t.grass.opacityHoverLight,
171
175
  //Por compatibilidad con MUI
172
176
  light: t.grass.light,
173
177
  dark: t.grass.dark
@@ -183,6 +187,7 @@ const t = {
183
187
  hoverOpacity: t.turqui.opacityHoverLight,
184
188
  focusOpacity: t.turqui.opacityFocusLight,
185
189
  activeOpacity: t.turqui.opacityActiveLight,
190
+ selected: t.turqui.opacityHoverLight,
186
191
  //Por compatibilidad con MUI
187
192
  light: t.turqui.light,
188
193
  dark: t.turqui.dark
@@ -201,6 +206,7 @@ const t = {
201
206
  hoverOpacity: t.patronus.opacityHoverDark,
202
207
  focusOpacity: t.patronus.opacityFocusDark,
203
208
  activeOpacity: t.patronus.opacityActiveDark,
209
+ selected: t.patronus.opacityHoverDark,
204
210
  //Por compatibilidad con MUI
205
211
  light: t.patronus.light,
206
212
  dark: t.patronus.dark
@@ -218,6 +224,7 @@ const t = {
218
224
  hoverOpacity: t.blaze.opacityHoverDark,
219
225
  focusOpacity: t.blaze.opacityFocusDark,
220
226
  activeOpacity: t.blaze.opacityActiveDark,
227
+ selected: t.blaze.opacityHoverDark,
221
228
  //Por compatibilidad con MUI
222
229
  light: t.blaze.light,
223
230
  dark: t.blaze.dark
@@ -235,6 +242,7 @@ const t = {
235
242
  hoverOpacity: t.brown.opacityHoverDark,
236
243
  focusOpacity: t.brown.opacityFocusDark,
237
244
  activeOpacity: t.brown.opacityActiveDark,
245
+ selected: t.brown.opacityHoverDark,
238
246
  //Por compatibilidad con MUI
239
247
  light: t.brown.light,
240
248
  dark: t.brown.dark
@@ -252,6 +260,7 @@ const t = {
252
260
  hoverOpacity: t.grass.opacityHoverDark,
253
261
  focusOpacity: t.grass.opacityFocusDark,
254
262
  activeOpacity: t.grass.opacityActiveDark,
263
+ selected: t.grass.opacityHoverDark,
255
264
  //Por compatibilidad con MUI
256
265
  light: t.grass.light,
257
266
  dark: t.grass.dark
@@ -269,6 +278,7 @@ const t = {
269
278
  hoverOpacity: t.turqui.opacityHoverDark,
270
279
  focusOpacity: t.turqui.opacityFocusDark,
271
280
  activeOpacity: t.turqui.opacityActiveDark,
281
+ selected: t.turqui.opacityHoverDark,
272
282
  //Por compatibilidad con MUI
273
283
  light: t.turqui.light,
274
284
  dark: t.turqui.dark
package/theme/palette/semanticColors.js CHANGED
@@ -21,7 +21,7 @@ const i = {
21
21
  opacityActiveDark: a.crayon[40]
22
22
  },
23
23
  warning: {
24
- main: t.middleYellow[50],
24
+ main: t.middleYellow[60],
25
25
  lighter: t.middleYellow[90],
26
26
  light: t.middleYellow[70],
27
27
  dark: t.middleYellow[30],
package/theme/shadows.d.ts CHANGED
@@ -13,6 +13,8 @@ export interface CustomShadowOptions {
13
13
  card: string;
14
14
  dialog: string;
15
15
  dropdown: string;
16
+ innerShadowContainer: string;
17
+ innerShadowOutlinedText: string;
16
18
  }
17
19
  /**
18
20
  * Create custom shadows for the theme
package/theme/shadows.js CHANGED
@@ -1,80 +1,84 @@
1
- import { alpha as r } from "@mui/material/styles";
2
- import { G as a } from "./palette/greyPalette.js";
3
- import { B as s } from "./palette/baseColors.js";
1
+ import { alpha as x } from "@mui/material/styles";
2
+ import { G as r } from "./palette/greyPalette.js";
3
+ import { B as e } from "./palette/baseColors.js";
4
4
  import { C as o } from "./palette/commonColors.js";
5
- const e = a[500], c = "#000000", n = (t) => {
6
- const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
5
+ const s = r[500], i = "#000000", a = (t) => {
6
+ const p = x(t, 0.2), $ = x(t, 0.14), n = x(t, 0.12);
7
7
  return [
8
8
  "none",
9
- `0px 2px 1px -1px ${p},0px 1px 1px 0px ${x},0px 1px 3px 0px ${$}`,
10
- `0px 3px 1px -2px ${p},0px 2px 2px 0px ${x},0px 1px 5px 0px ${$}`,
11
- `0px 3px 3px -2px ${p},0px 3px 4px 0px ${x},0px 1px 8px 0px ${$}`,
12
- `0px 2px 4px -1px ${p},0px 4px 5px 0px ${x},0px 1px 10px 0px ${$}`,
13
- `0px 3px 5px -1px ${p},0px 5px 8px 0px ${x},0px 1px 14px 0px ${$}`,
14
- `0px 3px 5px -1px ${p},0px 6px 10px 0px ${x},0px 1px 18px 0px ${$}`,
15
- `0px 4px 5px -2px ${p},0px 7px 10px 1px ${x},0px 2px 16px 1px ${$}`,
16
- `0px 5px 5px -3px ${p},0px 8px 10px 1px ${x},0px 3px 14px 2px ${$}`,
17
- `0px 5px 6px -3px ${p},0px 9px 12px 1px ${x},0px 3px 16px 2px ${$}`,
18
- `0px 6px 6px -3px ${p},0px 10px 14px 1px ${x},0px 4px 18px 3px ${$}`,
19
- `0px 6px 7px -4px ${p},0px 11px 15px 1px ${x},0px 4px 20px 3px ${$}`,
20
- `0px 7px 8px -4px ${p},0px 12px 17px 2px ${x},0px 5px 22px 4px ${$}`,
21
- `0px 7px 8px -4px ${p},0px 13px 19px 2px ${x},0px 5px 24px 4px ${$}`,
22
- `0px 7px 9px -4px ${p},0px 14px 21px 2px ${x},0px 5px 26px 4px ${$}`,
23
- `0px 8px 9px -5px ${p},0px 15px 22px 2px ${x},0px 6px 28px 5px ${$}`,
24
- `0px 8px 10px -5px ${p},0px 16px 24px 2px ${x},0px 6px 30px 5px ${$}`,
25
- `0px 8px 11px -5px ${p},0px 17px 26px 2px ${x},0px 6px 32px 5px ${$}`,
26
- `0px 9px 11px -5px ${p},0px 18px 28px 2px ${x},0px 7px 34px 6px ${$}`,
27
- `0px 9px 12px -6px ${p},0px 19px 29px 2px ${x},0px 7px 36px 6px ${$}`,
28
- `0px 10px 13px -6px ${p},0px 20px 31px 3px ${x},0px 8px 38px 7px ${$}`,
29
- `0px 10px 13px -6px ${p},0px 21px 33px 3px ${x},0px 8px 40px 7px ${$}`,
30
- `0px 10px 14px -6px ${p},0px 22px 35px 3px ${x},0px 8px 42px 7px ${$}`,
31
- `0px 11px 14px -7px ${p},0px 23px 36px 3px ${x},0px 9px 44px 8px ${$}`,
32
- `0px 11px 15px -7px ${p},0px 24px 38px 3px ${x},0px 9px 46px 8px ${$}`
9
+ `0px 2px 1px -1px ${p},0px 1px 1px 0px ${$},0px 1px 3px 0px ${n}`,
10
+ `0px 3px 1px -2px ${p},0px 2px 2px 0px ${$},0px 1px 5px 0px ${n}`,
11
+ `0px 3px 3px -2px ${p},0px 3px 4px 0px ${$},0px 1px 8px 0px ${n}`,
12
+ `0px 2px 4px -1px ${p},0px 4px 5px 0px ${$},0px 1px 10px 0px ${n}`,
13
+ `0px 3px 5px -1px ${p},0px 5px 8px 0px ${$},0px 1px 14px 0px ${n}`,
14
+ `0px 3px 5px -1px ${p},0px 6px 10px 0px ${$},0px 1px 18px 0px ${n}`,
15
+ `0px 4px 5px -2px ${p},0px 7px 10px 1px ${$},0px 2px 16px 1px ${n}`,
16
+ `0px 5px 5px -3px ${p},0px 8px 10px 1px ${$},0px 3px 14px 2px ${n}`,
17
+ `0px 5px 6px -3px ${p},0px 9px 12px 1px ${$},0px 3px 16px 2px ${n}`,
18
+ `0px 6px 6px -3px ${p},0px 10px 14px 1px ${$},0px 4px 18px 3px ${n}`,
19
+ `0px 6px 7px -4px ${p},0px 11px 15px 1px ${$},0px 4px 20px 3px ${n}`,
20
+ `0px 7px 8px -4px ${p},0px 12px 17px 2px ${$},0px 5px 22px 4px ${n}`,
21
+ `0px 7px 8px -4px ${p},0px 13px 19px 2px ${$},0px 5px 24px 4px ${n}`,
22
+ `0px 7px 9px -4px ${p},0px 14px 21px 2px ${$},0px 5px 26px 4px ${n}`,
23
+ `0px 8px 9px -5px ${p},0px 15px 22px 2px ${$},0px 6px 28px 5px ${n}`,
24
+ `0px 8px 10px -5px ${p},0px 16px 24px 2px ${$},0px 6px 30px 5px ${n}`,
25
+ `0px 8px 11px -5px ${p},0px 17px 26px 2px ${$},0px 6px 32px 5px ${n}`,
26
+ `0px 9px 11px -5px ${p},0px 18px 28px 2px ${$},0px 7px 34px 6px ${n}`,
27
+ `0px 9px 12px -6px ${p},0px 19px 29px 2px ${$},0px 7px 36px 6px ${n}`,
28
+ `0px 10px 13px -6px ${p},0px 20px 31px 3px ${$},0px 8px 38px 7px ${n}`,
29
+ `0px 10px 13px -6px ${p},0px 21px 33px 3px ${$},0px 8px 40px 7px ${n}`,
30
+ `0px 10px 14px -6px ${p},0px 22px 35px 3px ${$},0px 8px 42px 7px ${n}`,
31
+ `0px 11px 14px -7px ${p},0px 23px 36px 3px ${$},0px 9px 44px 8px ${n}`,
32
+ `0px 11px 15px -7px ${p},0px 24px 38px 3px ${$},0px 9px 46px 8px ${n}`
33
33
  ];
34
34
  }, O = (t) => {
35
35
  const p = {
36
- info: `0px 2px 8px 0px ${r(s.patronusBlue[50], 0.2)}`,
37
- secondary: `0px 2px 8px 0px ${r(s.patronusBlue[50], 0.24)}`,
38
- success: `0px 2px 8px 0px ${r(s.acidGreen[50], 0.2)}`,
39
- warning: `0px 2px 8px 0px ${r(s.middleYellow[50], 0.2)}`,
40
- error: `0px 2px 8px 0px ${r(s.flameRed[50], 0.2)}`,
36
+ info: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.2)}`,
37
+ secondary: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.24)}`,
38
+ success: `0px 2px 8px 0px ${x(e.acidGreen[50], 0.2)}`,
39
+ warning: `0px 2px 8px 0px ${x(e.middleYellow[50], 0.2)}`,
40
+ error: `0px 2px 8px 0px ${x(e.flameRed[50], 0.2)}`,
41
41
  //
42
- card: `0 0 2px 0 ${r(a[500], 0.2)}, 0 12px 24px -4px ${r(
43
- a[500],
42
+ card: `0 0 2px 0 ${x(r[500], 0.2)}, 0 12px 24px -4px ${x(
43
+ r[500],
44
44
  0.12
45
45
  )}`,
46
- dialog: `-40px 40px 80px -8px ${r(o.black, 0.24)}`,
47
- dropdown: `0 0 2px 0 ${r(a[500], 0.24)}, -20px 20px 40px -4px ${r(
48
- a[500],
46
+ dialog: `-40px 40px 80px -8px ${x(o.black, 0.24)}`,
47
+ dropdown: `0 0 2px 0 ${x(r[500], 0.24)}, -20px 20px 40px -4px ${x(
48
+ r[500],
49
49
  0.24
50
50
  )}`
51
51
  };
52
52
  return t === "light" ? {
53
- z1: `0px 2px 2px 2px ${r("#091E42", 0.8)}`,
53
+ z1: `0px 2px 2px 2px ${x("#091E42", 0.8)}`,
54
54
  // todo: solicitar a diseño crear token en base porque está quemado
55
- z2: `0px 0px ${r("#495859", 0.14)}`,
55
+ z2: `0px 0px ${x("#495859", 0.14)}`,
56
56
  // todo: solicitar a diseño crear token en base porque está quemado
57
- z3: `0px 4px 12px 1px ${r("#243B46", 0.14)}`,
57
+ z3: `0px 4px 12px 1px ${x("#243B46", 0.14)}`,
58
58
  // todo: solicitar a diseño crear token en base porque está quemado
59
- z4: `0px 12px 32px 4px ${r("#243B46", 0.12)}`,
59
+ z4: `0px 12px 32px 4px ${x("#243B46", 0.12)}`,
60
60
  // todo: solicitar a diseño crear token en base porque está quemado
61
+ innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.7)} inset`,
62
+ innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
61
63
  ...p
62
64
  } : {
63
- z1: `0px 2px 2px 2px ${r("#000000", 0.16)}`,
65
+ z1: `0px 2px 2px 2px ${x("#000000", 0.16)}`,
64
66
  // todo: solicitar a diseño crear token en base porque está quemado
65
- z2: `0px 0px ${r("#111414", 0.5)}`,
67
+ z2: `0px 0px ${x("#111414", 0.5)}`,
66
68
  // todo: solicitar a diseño crear token en base porque está quemado
67
- z3: `0px 4px 12px 1px ${r("#09090A", 0.6)}`,
69
+ z3: `0px 4px 12px 1px ${x("#09090A", 0.6)}`,
68
70
  // todo: solicitar a diseño crear token en base porque está quemado
69
- z4: `0px 12px 32px 4px ${r("#09090A", 0.35)}`,
71
+ z4: `0px 12px 32px 4px ${x("#09090A", 0.35)}`,
70
72
  // todo: solicitar a diseño crear token en base porque está quemado
73
+ innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.9)} inset`,
74
+ innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
71
75
  ...p
72
76
  };
73
- }, u = {
74
- light: n(e),
75
- dark: n(c)
77
+ }, m = {
78
+ light: a(s),
79
+ dark: a(i)
76
80
  };
77
81
  export {
78
82
  O as c,
79
- u as s
83
+ m as s
80
84
  };
package/types/augmentations.d.ts CHANGED
@@ -31,6 +31,7 @@ declare module '@mui/material/styles' {
31
31
  focusOpacity: string;
32
32
  opacity: string;
33
33
  toneOpacity: string;
34
+ selected: string;
34
35
  }
35
36
 
36
37
  export interface TypeBackground {
@@ -50,6 +51,7 @@ declare module '@mui/material/styles' {
50
51
  disabled: string;
51
52
  error: string;
52
53
  };
54
+ chips: BaseChipColors;
53
55
  general: {
54
56
  scrollBar: string;
55
57
  gridHover: string;
@@ -72,6 +74,7 @@ declare module '@mui/material/styles' {
72
74
  disabled: string;
73
75
  error: string;
74
76
  };
77
+ chips: BaseChipColors;
75
78
  default: PaletteColor;
76
79
  general: {
77
80
  scrollBar: string;
package/types/types.d.ts CHANGED
@@ -93,7 +93,7 @@ export type ThemePaletteColors = Record<ThemeUserColor, PaletteColor>;
93
93
  /**
94
94
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
95
95
  */
96
- export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible'>>;
96
+ export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible' | 'selected'>>;
97
97
  /**
98
98
  * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
99
99
  */
@@ -106,3 +106,20 @@ export type PresetsOptionsColorMain = Array<{
106
106
  value: string;
107
107
  }>;
108
108
  export type ColorState = 'warning' | 'delete' | 'info' | 'success';
109
+ /**
110
+ * Opciones de colores para pinta los chips
111
+ */
112
+ export interface ChipColor {
113
+ contrastText: string;
114
+ backgroundColor: string;
115
+ backgroundHover: string;
116
+ backgroundActive: string;
117
+ }
118
+ /**
119
+ * Lista de opciones de colores para pintar los chips
120
+ */
121
+ export type ChipColorOptions = 'default' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
122
+ /**
123
+ * 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.
124
+ */
125
+ export type BaseChipColors = Record<ChipColorOptions, ChipColor>;
package/utils/getPaletteByPreset.d.ts CHANGED
@@ -23,8 +23,10 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
23
23
  readonly focusOpacity: string;
24
24
  readonly opacity: string;
25
25
  readonly toneOpacity: string;
26
+ readonly selected: string;
26
27
  };
27
28
  readonly default: {
29
+ readonly selected: string;
28
30
  readonly focusVisible: string;
29
31
  readonly contrastText: string;
30
32
  readonly light: string;
@@ -51,6 +53,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
51
53
  readonly hover: string;
52
54
  readonly paper: "#00000000";
53
55
  };
56
+ readonly chips: import('../types').BaseChipColors;
54
57
  readonly border: {
55
58
  readonly main: string;
56
59
  readonly default: string;
@@ -69,6 +72,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
69
72
  readonly transition: string;
70
73
  };
71
74
  readonly info: {
75
+ readonly selected: string;
72
76
  readonly focusVisible: string;
73
77
  readonly light: string;
74
78
  readonly dark: string;
@@ -83,6 +87,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
83
87
  readonly toneOpacity: string;
84
88
  };
85
89
  readonly success: {
90
+ readonly selected: string;
86
91
  readonly focusVisible: string;
87
92
  readonly light: string;
88
93
  readonly dark: string;
@@ -97,6 +102,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
97
102
  readonly toneOpacity: string;
98
103
  };
99
104
  readonly warning: {
105
+ readonly selected: string;
100
106
  readonly focusVisible: string;
101
107
  readonly light: string;
102
108
  readonly dark: string;
@@ -111,6 +117,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
111
117
  readonly toneOpacity: string;
112
118
  };
113
119
  readonly error: {
120
+ readonly selected: string;
114
121
  readonly focusVisible: string;
115
122
  readonly light: string;
116
123
  readonly dark: string;
@@ -141,8 +148,10 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
141
148
  readonly focusOpacity: string;
142
149
  readonly opacity: string;
143
150
  readonly toneOpacity: string;
151
+ readonly selected: string;
144
152
  };
145
153
  readonly default: {
154
+ readonly selected: string;
146
155
  readonly focusVisible: string;
147
156
  readonly contrastText: string;
148
157
  readonly light: string;
@@ -169,6 +178,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
169
178
  readonly hover: string;
170
179
  readonly paper: "#00000000";
171
180
  };
181
+ readonly chips: import('../types').BaseChipColors;
172
182
  readonly border: {
173
183
  readonly main: string;
174
184
  readonly default: string;
@@ -187,6 +197,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
187
197
  readonly transition: string;
188
198
  };
189
199
  readonly info: {
200
+ readonly selected: string;
190
201
  readonly focusVisible: string;
191
202
  readonly light: string;
192
203
  readonly dark: string;
@@ -201,6 +212,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
201
212
  readonly toneOpacity: string;
202
213
  };
203
214
  readonly success: {
215
+ readonly selected: string;
204
216
  readonly focusVisible: string;
205
217
  readonly light: string;
206
218
  readonly dark: string;
@@ -215,6 +227,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
215
227
  readonly toneOpacity: string;
216
228
  };
217
229
  readonly warning: {
230
+ readonly selected: string;
218
231
  readonly focusVisible: string;
219
232
  readonly light: string;
220
233
  readonly dark: string;
@@ -229,6 +242,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
229
242
  readonly toneOpacity: string;
230
243
  };
231
244
  readonly error: {
245
+ readonly selected: string;
232
246
  readonly focusVisible: string;
233
247
  readonly light: string;
234
248
  readonly dark: string;
package/utils/getPaletteByPreset.js CHANGED
@@ -1,11 +1,12 @@
1
- import { P as n, a as m, b } from "../theme/palette/presetColors.js";
2
- import { B as r } from "../theme/palette/baseColors.js";
3
- import { C as c } from "../theme/palette/commonColors.js";
4
- import { G as d } from "../theme/palette/greyPalette.js";
5
- import { S as s, a } from "../theme/palette/semanticColors.js";
6
- import { B as o } from "../theme/palette/baseOpacityColors.js";
7
- import { B as f, a as u } from "../theme/palette/defaultColors.js";
8
- const t = {
1
+ import { P as c, a as u, b } from "../theme/palette/presetColors.js";
2
+ import { B as e } from "../theme/palette/baseColors.js";
3
+ import { C as d } from "../theme/palette/commonColors.js";
4
+ import { G as n } from "../theme/palette/greyPalette.js";
5
+ import { S as i, a as l } from "../theme/palette/semanticColors.js";
6
+ import { B as r } from "../theme/palette/baseOpacityColors.js";
7
+ import { B as f, a as m } from "../theme/palette/defaultColors.js";
8
+ import { B as g, a as O } from "../theme/palette/baseChipsPalette.js";
9
+ const a = {
9
10
  light: {
10
11
  scrollBar: "#5663763D",
11
12
  gridHover: "#FCFCFC"
@@ -14,132 +15,144 @@ const t = {
14
15
  scrollBar: "#5663765D",
15
16
  gridHover: "#282E2E"
16
17
  }
17
- }, p = (l) => {
18
- const i = m?.[l], e = b?.[l];
18
+ }, V = (t) => {
19
+ const o = u?.[t], s = b?.[t];
19
20
  return {
20
21
  light: {
21
22
  mode: "light",
22
- common: c,
23
+ common: d,
23
24
  primary: {
24
- ...i
25
+ ...o
25
26
  },
26
27
  default: {
27
28
  ...f,
28
- focusVisible: i.focusVisible,
29
- contrastText: r.onyx[20]
29
+ selected: o.selected,
30
+ focusVisible: o.focusVisible,
31
+ contrastText: e.onyx[20]
30
32
  },
31
- divider: r.coolGrey[20],
33
+ divider: e.coolGrey[20],
32
34
  text: {
33
- primary: r.onyx[20],
34
- secondary: r.coolGrey[50],
35
- disabled: r.oxford[30]
35
+ primary: e.onyx[20],
36
+ secondary: e.coolGrey[50],
37
+ disabled: e.oxford[30]
36
38
  },
37
39
  background: {
38
- default: r.marbleLight[10],
39
- neutral: r.marbleLight[30],
40
- surface: r.marbleLight[50],
40
+ default: e.marbleLight[10],
41
+ neutral: e.marbleLight[30],
42
+ surface: e.marbleLight[50],
41
43
  hover: f.hover,
42
44
  //por compatibilidad de mui
43
45
  paper: "#00000000"
44
46
  },
47
+ chips: g,
45
48
  border: {
46
- main: n[l]?.borderMainLight,
47
- default: o.oxford[40],
48
- secondary: o.oxford[30],
49
- dens: o.oxford[60],
50
- disabled: o.oxford[10],
51
- error: s.error.main
49
+ main: c[t]?.borderMainLight,
50
+ default: r.oxford[40],
51
+ secondary: r.oxford[30],
52
+ dens: r.oxford[60],
53
+ disabled: r.oxford[10],
54
+ error: i.error.main
52
55
  },
53
56
  general: {
54
- scrollBar: t.light.scrollBar,
55
- gridHover: t.light.gridHover
57
+ scrollBar: a.light.scrollBar,
58
+ gridHover: a.light.gridHover
56
59
  },
57
- grey: d,
60
+ grey: n,
58
61
  skeleton: {
59
- default: o.oxford[10],
60
- transition: o.oxford[20]
62
+ default: r.oxford[10],
63
+ transition: r.oxford[20]
61
64
  },
62
65
  info: {
63
- ...s.info,
64
- focusVisible: i.focusVisible
66
+ ...i.info,
67
+ selected: o.selected,
68
+ focusVisible: o.focusVisible
65
69
  },
66
70
  success: {
67
- ...s.success,
68
- focusVisible: i.focusVisible
71
+ ...i.success,
72
+ selected: o.selected,
73
+ focusVisible: o.focusVisible
69
74
  },
70
75
  warning: {
71
- ...s.warning,
72
- focusVisible: i.focusVisible
76
+ ...i.warning,
77
+ selected: o.selected,
78
+ focusVisible: o.focusVisible
73
79
  },
74
80
  error: {
75
- ...s.error,
76
- focusVisible: i.focusVisible
81
+ ...i.error,
82
+ selected: o.selected,
83
+ focusVisible: o.focusVisible
77
84
  }
78
85
  },
79
86
  dark: {
80
87
  mode: "dark",
81
- common: c,
88
+ common: d,
82
89
  // no definido en figma
83
90
  primary: {
84
- ...e
91
+ ...s
85
92
  },
86
93
  default: {
87
- ...u,
88
- focusVisible: e?.focusVisible,
89
- contrastText: r.marbleLight[30]
94
+ ...m,
95
+ selected: s?.selected,
96
+ focusVisible: s?.focusVisible,
97
+ contrastText: e.marbleLight[30]
90
98
  },
91
99
  text: {
92
- primary: r.marbleLight[30],
93
- secondary: r.coolGrey[20],
94
- disabled: r.coolGrey[50]
100
+ primary: e.marbleLight[30],
101
+ secondary: e.coolGrey[20],
102
+ disabled: e.coolGrey[50]
95
103
  },
96
- divider: r.coolGrey[80],
104
+ divider: e.coolGrey[80],
97
105
  background: {
98
- default: r.onyx[40],
99
- neutral: r.onyx[50],
100
- surface: r.onyx[60],
101
- hover: u.hover,
106
+ default: e.onyx[40],
107
+ neutral: e.onyx[50],
108
+ surface: e.onyx[60],
109
+ hover: m.hover,
102
110
  //por compatibilidad de mui
103
111
  paper: "#00000000"
104
112
  },
113
+ chips: O,
105
114
  border: {
106
- main: n[l]?.borderMainDark,
107
- default: o.mint[50],
108
- secondary: o.mint[40],
109
- dens: o.mint[60],
110
- disabled: o.mint[20],
111
- error: a.error.main
115
+ main: c[t]?.borderMainDark,
116
+ default: r.mint[50],
117
+ secondary: r.mint[40],
118
+ dens: r.mint[60],
119
+ disabled: r.mint[20],
120
+ error: l.error.main
112
121
  },
113
122
  general: {
114
123
  // no definido en figma
115
- scrollBar: t.light.scrollBar,
116
- gridHover: t.light.gridHover
124
+ scrollBar: a.light.scrollBar,
125
+ gridHover: a.light.gridHover
117
126
  },
118
- grey: d,
127
+ grey: n,
119
128
  // no definido en figma
120
129
  skeleton: {
121
- default: o.mint[20],
122
- transition: o.mint[40]
130
+ default: r.mint[20],
131
+ transition: r.mint[40]
123
132
  },
124
133
  info: {
125
- ...a.info,
126
- focusVisible: e.focusVisible
134
+ ...l.info,
135
+ selected: s?.selected,
136
+ focusVisible: s.focusVisible
127
137
  },
128
138
  success: {
129
- ...a.success,
130
- focusVisible: e.focusVisible
139
+ ...l.success,
140
+ selected: s?.selected,
141
+ focusVisible: s.focusVisible
131
142
  },
132
143
  warning: {
133
- ...a.warning,
134
- focusVisible: e.focusVisible
144
+ ...l.warning,
145
+ selected: s?.selected,
146
+ focusVisible: s.focusVisible
135
147
  },
136
148
  error: {
137
- ...a.error,
138
- focusVisible: e.focusVisible
149
+ ...l.error,
150
+ selected: s?.selected,
151
+ focusVisible: s.focusVisible
139
152
  }
140
153
  }
141
154
  };
142
155
  };
143
156
  export {
144
- p as g
157
+ V as g
145
158
  };
package/theme/palette/tagsPalette.d.ts DELETED
@@ -1,13 +0,0 @@
1
- export interface TagColor {
2
- contrastText: string;
3
- backgroundColor: string;
4
- }
5
- export type TagColorOptions = 'default' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
6
- /**
7
- * Lista de colores definidos para pintar los tags en modo light
8
- */
9
- export declare const BASE_TAG_OBJECT_COLORS_LIGHT: Record<TagColorOptions, TagColor>;
10
- /**
11
- * Lista de colores definidos para pintar los tags en modo light
12
- */
13
- export declare const BASE_TAG_OBJECT_COLORS_DARK: Record<TagColorOptions, TagColor>;