@m4l/styles 7.1.25 → 7.1.26

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 (6) hide show
  1. package/package.json +1 -1
  2. package/theme/palette/baseChipsPalette.d.ts +2 -2
  3. package/theme/palette/baseChipsPalette.js +571 -545
  4. package/types/types.d.ts +3 -2
  5. package/utils/getPaletteByPreset.d.ts +62 -2
  6. package/utils/getPaletteByPreset.js +164 -78
package/types/types.d.ts CHANGED
@@ -132,6 +132,7 @@ export type ColorState = 'warning' | 'delete' | 'info' | 'success';
132
132
  /**
133
133
  * Opciones de colores para pinta los chips
134
134
  */
135
+ export type ChipColorVariant = 'contained' | 'outlined';
135
136
  export interface ChipColor {
136
137
  color: string;
137
138
  backgroundColor: string;
@@ -145,8 +146,8 @@ export interface ChipColor {
145
146
  /**
146
147
  * Lista de opciones de colores para pintar los chips
147
148
  */
148
- export type ChipColorOptions = 'defaultContained' | 'defaultOutlined' | 'disabledContained' | 'disabledOutlined' | 'warningContained' | 'warningOutlined' | 'errorContained' | 'errorOutlined' | 'successContained' | 'successOutlined' | 'forestContained' | 'forestOutlined' | 'infoContained' | 'infoOutlined';
149
+ export type ChipColorOptions = 'default' | 'disabled' | 'warning' | 'error' | 'success' | 'forest' | 'info' | 'primary';
149
150
  /**
150
151
  * 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.
151
152
  */
152
- export type BaseChipColors = Record<ChipColorOptions, ChipColor>;
153
+ export type BaseChipColors = Record<ChipColorOptions, Record<ChipColorVariant, ChipColor>>;
package/utils/getPaletteByPreset.d.ts CHANGED
@@ -60,7 +60,37 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
60
60
  readonly backdrop: string;
61
61
  readonly paper: "#000";
62
62
  };
63
- readonly chips: import('../types').BaseChipColors;
63
+ readonly chips: {
64
+ readonly info: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
65
+ readonly success: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
66
+ readonly warning: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
67
+ readonly error: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
68
+ readonly default: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
69
+ readonly forest: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
70
+ readonly disabled: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
71
+ readonly primary: {
72
+ readonly outlined: {
73
+ readonly color: "¯(ツ)/¯";
74
+ readonly backgroundColor: "¯(ツ)/¯";
75
+ readonly backgroundHover: "¯(ツ)/¯";
76
+ readonly backgroundActive: "¯(ツ)/¯";
77
+ readonly colorTone: "¯(ツ)/¯";
78
+ readonly backgroundColorTone: "¯(ツ)/¯";
79
+ readonly backgroundHoverTone: "¯(ツ)/¯";
80
+ readonly backgroundActiveTone: "¯(ツ)/¯";
81
+ };
82
+ readonly contained: {
83
+ readonly color: "¯(ツ)/¯";
84
+ readonly backgroundColor: "¯(ツ)/¯";
85
+ readonly backgroundHover: "¯(ツ)/¯";
86
+ readonly backgroundActive: "¯(ツ)/¯";
87
+ readonly colorTone: "¯(ツ)/¯";
88
+ readonly backgroundColorTone: "¯(ツ)/¯";
89
+ readonly backgroundHoverTone: "¯(ツ)/¯";
90
+ readonly backgroundActiveTone: "¯(ツ)/¯";
91
+ };
92
+ };
93
+ };
64
94
  readonly border: {
65
95
  readonly main: string;
66
96
  readonly default: string;
@@ -216,7 +246,37 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
216
246
  readonly backdrop: string;
217
247
  readonly paper: "#000";
218
248
  };
219
- readonly chips: import('../types').BaseChipColors;
249
+ readonly chips: {
250
+ readonly info: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
251
+ readonly success: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
252
+ readonly warning: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
253
+ readonly error: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
254
+ readonly default: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
255
+ readonly forest: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
256
+ readonly disabled: Record<import('../types').ChipColorVariant, import('../types').ChipColor>;
257
+ readonly primary: {
258
+ readonly outlined: {
259
+ readonly color: "¯(ツ)/¯";
260
+ readonly backgroundColor: "¯(ツ)/¯";
261
+ readonly backgroundHover: "¯(ツ)/¯";
262
+ readonly backgroundActive: "¯(ツ)/¯";
263
+ readonly colorTone: "¯(ツ)/¯";
264
+ readonly backgroundColorTone: "¯(ツ)/¯";
265
+ readonly backgroundHoverTone: "¯(ツ)/¯";
266
+ readonly backgroundActiveTone: "¯(ツ)/¯";
267
+ };
268
+ readonly contained: {
269
+ readonly color: "¯(ツ)/¯";
270
+ readonly backgroundColor: "¯(ツ)/¯";
271
+ readonly backgroundHover: "¯(ツ)/¯";
272
+ readonly backgroundActive: "¯(ツ)/¯";
273
+ readonly colorTone: "¯(ツ)/¯";
274
+ readonly backgroundColorTone: "¯(ツ)/¯";
275
+ readonly backgroundHoverTone: "¯(ツ)/¯";
276
+ readonly backgroundActiveTone: "¯(ツ)/¯";
277
+ };
278
+ };
279
+ };
220
280
  readonly border: {
221
281
  readonly main: string;
222
282
  readonly default: string;
package/utils/getPaletteByPreset.js CHANGED
@@ -1,12 +1,12 @@
1
- import { P as a, a as y, b as p } from "../theme/palette/presetColors.js";
2
- import { B as s } from "../theme/palette/baseColors.js";
1
+ import { P as l, a as g, b as O } from "../theme/palette/presetColors.js";
2
+ import { B as r } from "../theme/palette/baseColors.js";
3
3
  import { C as d } from "../theme/palette/commonColors.js";
4
4
  import { G as n } from "../theme/palette/greyPalette.js";
5
- import { S as t, a as o } from "../theme/palette/semanticColors.js";
6
- import { B as i } from "../theme/palette/baseOpacityColors.js";
7
- import { B as O, a as f } from "../theme/palette/defaultColors.js";
8
- import { B as m, a as u } from "../theme/palette/baseChipsPalette.js";
9
- const l = {
5
+ import { S as i, a as t } from "../theme/palette/semanticColors.js";
6
+ import { B as c } from "../theme/palette/baseOpacityColors.js";
7
+ import { B as u, a as b } from "../theme/palette/defaultColors.js";
8
+ import { B as y, a as f } from "../theme/palette/baseChipsPalette.js";
9
+ const a = {
10
10
  light: {
11
11
  scrollBar: "#5663763D",
12
12
  gridHover: "#FCFCFC"
@@ -15,8 +15,8 @@ const l = {
15
15
  scrollBar: "#5663765D",
16
16
  gridHover: "#282E2E"
17
17
  }
18
- }, V = (c) => {
19
- const e = y?.[c], r = p?.[c];
18
+ }, L = (s) => {
19
+ const e = g?.[s], o = O?.[s];
20
20
  return {
21
21
  light: {
22
22
  mode: "light",
@@ -25,65 +25,108 @@ const l = {
25
25
  ...e
26
26
  },
27
27
  default: {
28
- ...O,
28
+ ...u,
29
29
  selected: e.selected,
30
30
  selectedOpacity: e.selectedOpacity,
31
31
  focusVisible: e.focusVisible,
32
- contrastText: s.onyx[20]
32
+ contrastText: r.onyx[20]
33
33
  },
34
- divider: s.coolGrey[20],
34
+ divider: r.coolGrey[20],
35
35
  text: {
36
- primary: s.onyx[20],
37
- secondary: s.coolGrey[50],
38
- disabled: s.coolGrey[10]
36
+ primary: r.onyx[20],
37
+ secondary: r.coolGrey[50],
38
+ disabled: r.coolGrey[10]
39
39
  },
40
40
  background: {
41
- default: s.marbleLight[10],
42
- neutral: s.marbleLight[30],
43
- surface: s.marbleLight[50],
44
- hover: O.hoverOpacity,
45
- backdrop: i.onyx[80] || "#000",
41
+ default: r.marbleLight[10],
42
+ neutral: r.marbleLight[30],
43
+ surface: r.marbleLight[50],
44
+ hover: u.hoverOpacity,
45
+ backdrop: c.onyx[80] || "#000",
46
46
  //por compatibilidad de mui
47
47
  paper: "#000"
48
48
  },
49
- chips: m,
49
+ chips: {
50
+ primary: {
51
+ outlined: {
52
+ color: "¯(ツ)/¯",
53
+ // Comprobado
54
+ backgroundColor: "¯(ツ)/¯",
55
+ // Comprobado
56
+ backgroundHover: "¯(ツ)/¯",
57
+ // Comprobado
58
+ backgroundActive: "¯(ツ)/¯",
59
+ // Comprobado
60
+ /* Tone */
61
+ colorTone: "¯(ツ)/¯",
62
+ // Comprobado
63
+ backgroundColorTone: "¯(ツ)/¯",
64
+ // Comprobado
65
+ backgroundHoverTone: "¯(ツ)/¯",
66
+ // Comprobado
67
+ backgroundActiveTone: "¯(ツ)/¯"
68
+ // Comprobado
69
+ },
70
+ contained: {
71
+ color: "¯(ツ)/¯",
72
+ // Comprobado
73
+ backgroundColor: "¯(ツ)/¯",
74
+ // Comprobado
75
+ backgroundHover: "¯(ツ)/¯",
76
+ // Comprobado
77
+ backgroundActive: "¯(ツ)/¯",
78
+ // Comprobado
79
+ /* Tono */
80
+ colorTone: "¯(ツ)/¯",
81
+ // Comprobado
82
+ backgroundColorTone: "¯(ツ)/¯",
83
+ // Comprobado
84
+ backgroundHoverTone: "¯(ツ)/¯",
85
+ // Comprobado
86
+ backgroundActiveTone: "¯(ツ)/¯"
87
+ // Comprobado
88
+ }
89
+ /* opacidad */
90
+ },
91
+ ...y
92
+ },
50
93
  border: {
51
- main: a[c]?.borderMainLight,
52
- default: i.oxford[40],
53
- secondary: i.oxford[30],
54
- dens: i.oxford[60],
55
- disabled: i.oxford[10],
56
- error: t.error.main
94
+ main: l[s]?.borderMainLight,
95
+ default: c.oxford[40],
96
+ secondary: c.oxford[30],
97
+ dens: c.oxford[60],
98
+ disabled: c.oxford[10],
99
+ error: i.error.main
57
100
  },
58
101
  general: {
59
- scrollBar: l.light.scrollBar,
60
- gridHover: l.light.gridHover
102
+ scrollBar: a.light.scrollBar,
103
+ gridHover: a.light.gridHover
61
104
  },
62
105
  grey: n,
63
106
  skeleton: {
64
- default: i.oxford[10],
65
- transition: i.oxford[20]
107
+ default: c.oxford[10],
108
+ transition: c.oxford[20]
66
109
  },
67
110
  info: {
68
- ...t.info,
111
+ ...i.info,
69
112
  selected: e.selected,
70
113
  selectedOpacity: e.selectedOpacity,
71
114
  focusVisible: e.focusVisible
72
115
  },
73
116
  success: {
74
- ...t.success,
117
+ ...i.success,
75
118
  selected: e.selected,
76
119
  selectedOpacity: e.selectedOpacity,
77
120
  focusVisible: e.focusVisible
78
121
  },
79
122
  warning: {
80
- ...t.warning,
123
+ ...i.warning,
81
124
  selected: e.selected,
82
125
  selectedOpacity: e.selectedOpacity,
83
126
  focusVisible: e.focusVisible
84
127
  },
85
128
  error: {
86
- ...t.error,
129
+ ...i.error,
87
130
  selected: e.selected,
88
131
  selectedOpacity: e.selectedOpacity,
89
132
  focusVisible: e.focusVisible
@@ -94,77 +137,120 @@ const l = {
94
137
  common: d,
95
138
  // no definido en figma
96
139
  primary: {
97
- ...r
140
+ ...o
98
141
  },
99
142
  default: {
100
- ...f,
101
- selected: r?.selected,
102
- selectedOpacity: r?.selectedOpacity,
103
- focusVisible: r?.focusVisible,
104
- contrastText: s.marbleLight[30]
143
+ ...b,
144
+ selected: o?.selected,
145
+ selectedOpacity: o?.selectedOpacity,
146
+ focusVisible: o?.focusVisible,
147
+ contrastText: r.marbleLight[30]
105
148
  },
106
149
  text: {
107
- primary: s.marbleLight[30],
108
- secondary: s.coolGrey[20],
109
- disabled: s.coolGrey[50]
150
+ primary: r.marbleLight[30],
151
+ secondary: r.coolGrey[20],
152
+ disabled: r.coolGrey[50]
110
153
  },
111
- divider: s.coolGrey[80],
154
+ divider: r.coolGrey[80],
112
155
  background: {
113
- default: s.onyx[40],
114
- neutral: s.onyx[50],
115
- surface: s.onyx[60],
116
- hover: f.hoverOpacity,
117
- backdrop: i.onyx[80] || "#000",
156
+ default: r.onyx[40],
157
+ neutral: r.onyx[50],
158
+ surface: r.onyx[60],
159
+ hover: b.hoverOpacity,
160
+ backdrop: c.onyx[80] || "#000",
118
161
  //por compatibilidad de mui
119
162
  paper: "#000"
120
163
  },
121
- chips: u,
164
+ chips: {
165
+ primary: {
166
+ outlined: {
167
+ color: "¯(ツ)/¯",
168
+ // Comprobado
169
+ backgroundColor: "¯(ツ)/¯",
170
+ // Comprobado
171
+ backgroundHover: "¯(ツ)/¯",
172
+ // Comprobado
173
+ backgroundActive: "¯(ツ)/¯",
174
+ // Comprobado
175
+ /* Tone */
176
+ colorTone: "¯(ツ)/¯",
177
+ // Comprobado
178
+ backgroundColorTone: "¯(ツ)/¯",
179
+ // Comprobado
180
+ backgroundHoverTone: "¯(ツ)/¯",
181
+ // Comprobado
182
+ backgroundActiveTone: "¯(ツ)/¯"
183
+ // Comprobado
184
+ },
185
+ contained: {
186
+ color: "¯(ツ)/¯",
187
+ // Comprobado
188
+ backgroundColor: "¯(ツ)/¯",
189
+ // Comprobado
190
+ backgroundHover: "¯(ツ)/¯",
191
+ // Comprobado
192
+ backgroundActive: "¯(ツ)/¯",
193
+ // Comprobado
194
+ /* Tono */
195
+ colorTone: "¯(ツ)/¯",
196
+ // Comprobado
197
+ backgroundColorTone: "¯(ツ)/¯",
198
+ // Comprobado
199
+ backgroundHoverTone: "¯(ツ)/¯",
200
+ // Comprobado
201
+ backgroundActiveTone: "¯(ツ)/¯"
202
+ // Comprobado
203
+ }
204
+ /* opacidad */
205
+ },
206
+ ...f
207
+ },
122
208
  border: {
123
- main: a[c]?.borderMainDark,
124
- default: i.mint[50],
125
- secondary: i.mint[40],
126
- dens: i.mint[60],
127
- disabled: i.mint[20],
128
- error: o.error.main
209
+ main: l[s]?.borderMainDark,
210
+ default: c.mint[50],
211
+ secondary: c.mint[40],
212
+ dens: c.mint[60],
213
+ disabled: c.mint[20],
214
+ error: t.error.main
129
215
  },
130
216
  general: {
131
217
  // no definido en figma
132
- scrollBar: l.light.scrollBar,
133
- gridHover: l.light.gridHover
218
+ scrollBar: a.light.scrollBar,
219
+ gridHover: a.light.gridHover
134
220
  },
135
221
  grey: n,
136
222
  // no definido en figma
137
223
  skeleton: {
138
- default: i.mint[20],
139
- transition: i.mint[40]
224
+ default: c.mint[20],
225
+ transition: c.mint[40]
140
226
  },
141
227
  info: {
142
- ...o.info,
143
- selected: r?.selected,
144
- selectedOpacity: r?.selectedOpacity,
145
- focusVisible: r.focusVisible
228
+ ...t.info,
229
+ selected: o?.selected,
230
+ selectedOpacity: o?.selectedOpacity,
231
+ focusVisible: o.focusVisible
146
232
  },
147
233
  success: {
148
- ...o.success,
149
- selected: r?.selected,
150
- selectedOpacity: r?.selectedOpacity,
151
- focusVisible: r.focusVisible
234
+ ...t.success,
235
+ selected: o?.selected,
236
+ selectedOpacity: o?.selectedOpacity,
237
+ focusVisible: o.focusVisible
152
238
  },
153
239
  warning: {
154
- ...o.warning,
155
- selected: r?.selected,
156
- selectedOpacity: r?.selectedOpacity,
157
- focusVisible: r.focusVisible
240
+ ...t.warning,
241
+ selected: o?.selected,
242
+ selectedOpacity: o?.selectedOpacity,
243
+ focusVisible: o.focusVisible
158
244
  },
159
245
  error: {
160
- ...o.error,
161
- selected: r?.selected,
162
- selectedOpacity: r?.selectedOpacity,
163
- focusVisible: r.focusVisible
246
+ ...t.error,
247
+ selected: o?.selected,
248
+ selectedOpacity: o?.selectedOpacity,
249
+ focusVisible: o.focusVisible
164
250
  }
165
251
  }
166
252
  };
167
253
  };
168
254
  export {
169
- V as g
255
+ L as g
170
256
  };