@m4l/styles 7.0.0 → 7.1.2
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.
- package/package.json +2 -4
- package/theme/palette/semanticColors.js +119 -126
- package/theme/shadows.js +34 -26
- package/theme/sizes/baseBorderRadius.js +2 -2
- package/theme/sizes/baseSizes.js +4 -4
- package/theme/sizes/pointerQr.js +29 -29
- package/theme/sizes/presetSizes.d.ts +3 -0
- package/theme/sizes/presetSizes.js +21 -0
- package/theme/sizes/types.d.ts +8 -8
- package/types/augmentations.d.ts +0 -2
- package/types/types.d.ts +1 -1
- package/utils/getPaletteByPreset.js +15 -12
package/package.json
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m4l/styles",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "m4l team",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"lint-staged": {
|
|
10
|
-
"
|
|
11
|
-
"eslint . --fix"
|
|
12
|
-
]
|
|
10
|
+
"*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
|
|
13
11
|
},
|
|
14
12
|
"dependencies": {
|
|
15
13
|
"@mui/material": "^5.15.19",
|
|
@@ -1,161 +1,154 @@
|
|
|
1
|
-
import { B as
|
|
2
|
-
|
|
1
|
+
import { B as a } from "./baseColors.js";
|
|
2
|
+
import { B as i } from "./baseOpacityColors.js";
|
|
3
|
+
const t = {
|
|
3
4
|
info: {
|
|
4
|
-
main:
|
|
5
|
-
lighter:
|
|
6
|
-
light:
|
|
7
|
-
dark:
|
|
8
|
-
darker:
|
|
9
|
-
contrastText:
|
|
10
|
-
toneOpacityLight:
|
|
11
|
-
toneOpacityDark:
|
|
12
|
-
opacityLight:
|
|
13
|
-
opacityDark:
|
|
14
|
-
borderMainLight: r.crayonBlue[50],
|
|
15
|
-
borderMainDark: r.crayonBlue[50]
|
|
5
|
+
main: a.crayonBlue[50],
|
|
6
|
+
lighter: a.crayonBlue[70],
|
|
7
|
+
light: a.crayonBlue[60],
|
|
8
|
+
dark: a.crayonBlue[40],
|
|
9
|
+
darker: a.crayonBlue[20],
|
|
10
|
+
contrastText: a.marbleLight[30],
|
|
11
|
+
toneOpacityLight: a.crayonBlue.toneOpacity10,
|
|
12
|
+
toneOpacityDark: a.crayonBlue.toneOpacity20,
|
|
13
|
+
opacityLight: i.crayon[10],
|
|
14
|
+
opacityDark: i.crayon[20]
|
|
16
15
|
},
|
|
17
16
|
warning: {
|
|
18
|
-
main:
|
|
19
|
-
lighter:
|
|
20
|
-
light:
|
|
21
|
-
dark:
|
|
22
|
-
darker:
|
|
23
|
-
contrastText:
|
|
24
|
-
toneOpacityLight:
|
|
25
|
-
toneOpacityDark:
|
|
26
|
-
opacityLight:
|
|
27
|
-
opacityDark:
|
|
28
|
-
borderMainLight: r.middleYellow[50],
|
|
29
|
-
borderMainDark: r.middleYellow[50]
|
|
17
|
+
main: a.middleYellow[50],
|
|
18
|
+
lighter: a.middleYellow[90],
|
|
19
|
+
light: a.middleYellow[70],
|
|
20
|
+
dark: a.middleYellow[30],
|
|
21
|
+
darker: a.middleYellow[20],
|
|
22
|
+
contrastText: a.onyx[20],
|
|
23
|
+
toneOpacityLight: a.middleYellow.toneOpacity10,
|
|
24
|
+
toneOpacityDark: a.middleYellow.toneOpacity20,
|
|
25
|
+
opacityLight: i.middle[10],
|
|
26
|
+
opacityDark: i.middle[20]
|
|
30
27
|
},
|
|
31
28
|
error: {
|
|
32
|
-
main:
|
|
33
|
-
lighter:
|
|
34
|
-
light:
|
|
35
|
-
dark:
|
|
36
|
-
darker:
|
|
37
|
-
contrastText:
|
|
38
|
-
toneOpacityLight:
|
|
39
|
-
toneOpacityDark:
|
|
40
|
-
opacityLight:
|
|
41
|
-
opacityDark:
|
|
42
|
-
borderMainLight: r.flameRed[50],
|
|
43
|
-
borderMainDark: r.flameRed[50]
|
|
29
|
+
main: a.flameRed[50],
|
|
30
|
+
lighter: a.flameRed[70],
|
|
31
|
+
light: a.flameRed[60],
|
|
32
|
+
dark: a.flameRed[40],
|
|
33
|
+
darker: a.flameRed[20],
|
|
34
|
+
contrastText: a.marbleLight[30],
|
|
35
|
+
toneOpacityLight: a.flameRed.toneOpacity10,
|
|
36
|
+
toneOpacityDark: a.flameRed.toneOpacity20,
|
|
37
|
+
opacityLight: i.flame[10],
|
|
38
|
+
opacityDark: i.flame[20]
|
|
44
39
|
},
|
|
45
40
|
success: {
|
|
46
|
-
main:
|
|
47
|
-
lighter:
|
|
48
|
-
light:
|
|
49
|
-
dark:
|
|
50
|
-
darker:
|
|
51
|
-
contrastText:
|
|
52
|
-
toneOpacityLight:
|
|
53
|
-
toneOpacityDark:
|
|
54
|
-
opacityLight:
|
|
55
|
-
opacityDark:
|
|
56
|
-
borderMainLight: r.acidGreen[50],
|
|
57
|
-
borderMainDark: r.acidGreen[50]
|
|
41
|
+
main: a.acidGreen[50],
|
|
42
|
+
lighter: a.acidGreen[70],
|
|
43
|
+
light: a.acidGreen[60],
|
|
44
|
+
dark: a.acidGreen[30],
|
|
45
|
+
darker: a.acidGreen[20],
|
|
46
|
+
contrastText: a.marbleLight[20],
|
|
47
|
+
toneOpacityLight: a.acidGreen.toneOpacity10,
|
|
48
|
+
toneOpacityDark: a.acidGreen.toneOpacity20,
|
|
49
|
+
opacityLight: i.acid[10],
|
|
50
|
+
opacityDark: i.acid[20]
|
|
58
51
|
}
|
|
59
|
-
},
|
|
52
|
+
}, o = {
|
|
60
53
|
info: {
|
|
61
|
-
main:
|
|
62
|
-
focusActive:
|
|
63
|
-
hover:
|
|
64
|
-
opacity:
|
|
65
|
-
toneOpacity:
|
|
66
|
-
contrastText:
|
|
67
|
-
hoverOpacity:
|
|
54
|
+
main: t.info.main,
|
|
55
|
+
focusActive: t.info.lighter,
|
|
56
|
+
hover: t.info.light,
|
|
57
|
+
opacity: t.info.opacityLight,
|
|
58
|
+
toneOpacity: t.info.toneOpacityLight,
|
|
59
|
+
contrastText: t.info.contrastText,
|
|
60
|
+
hoverOpacity: t.info.opacityLight,
|
|
68
61
|
//Por compatibilidad con MUI
|
|
69
|
-
light:
|
|
70
|
-
dark:
|
|
62
|
+
light: t.info.light,
|
|
63
|
+
dark: t.info.dark
|
|
71
64
|
},
|
|
72
65
|
success: {
|
|
73
|
-
main:
|
|
74
|
-
focusActive:
|
|
75
|
-
hover:
|
|
76
|
-
opacity:
|
|
77
|
-
toneOpacity:
|
|
78
|
-
contrastText:
|
|
79
|
-
hoverOpacity:
|
|
66
|
+
main: t.success.main,
|
|
67
|
+
focusActive: t.success.lighter,
|
|
68
|
+
hover: t.success.light,
|
|
69
|
+
opacity: t.success.opacityLight,
|
|
70
|
+
toneOpacity: t.success.toneOpacityLight,
|
|
71
|
+
contrastText: t.success.contrastText,
|
|
72
|
+
hoverOpacity: t.success.opacityLight,
|
|
80
73
|
//Por compatibilidad con MUI
|
|
81
|
-
light:
|
|
82
|
-
dark:
|
|
74
|
+
light: t.success.light,
|
|
75
|
+
dark: t.success.dark
|
|
83
76
|
},
|
|
84
77
|
warning: {
|
|
85
|
-
main:
|
|
86
|
-
focusActive:
|
|
87
|
-
hover:
|
|
88
|
-
opacity:
|
|
89
|
-
toneOpacity:
|
|
90
|
-
contrastText:
|
|
91
|
-
hoverOpacity:
|
|
78
|
+
main: t.warning.main,
|
|
79
|
+
focusActive: t.warning.lighter,
|
|
80
|
+
hover: t.warning.light,
|
|
81
|
+
opacity: t.warning.opacityLight,
|
|
82
|
+
toneOpacity: t.warning.toneOpacityLight,
|
|
83
|
+
contrastText: t.warning.contrastText,
|
|
84
|
+
hoverOpacity: t.warning.opacityLight,
|
|
92
85
|
//Por compatibilidad con MUI
|
|
93
|
-
light:
|
|
94
|
-
dark:
|
|
86
|
+
light: t.warning.light,
|
|
87
|
+
dark: t.warning.dark
|
|
95
88
|
},
|
|
96
89
|
error: {
|
|
97
|
-
main:
|
|
98
|
-
focusActive:
|
|
99
|
-
hover:
|
|
100
|
-
opacity:
|
|
101
|
-
toneOpacity:
|
|
102
|
-
contrastText:
|
|
103
|
-
hoverOpacity:
|
|
90
|
+
main: t.error.main,
|
|
91
|
+
focusActive: t.error.lighter,
|
|
92
|
+
hover: t.error.light,
|
|
93
|
+
opacity: t.error.opacityLight,
|
|
94
|
+
toneOpacity: t.error.toneOpacityLight,
|
|
95
|
+
contrastText: t.error.contrastText,
|
|
96
|
+
hoverOpacity: t.error.opacityLight,
|
|
104
97
|
//Por compatibilidad con MUI
|
|
105
|
-
light:
|
|
106
|
-
dark:
|
|
98
|
+
light: t.error.light,
|
|
99
|
+
dark: t.error.dark
|
|
107
100
|
}
|
|
108
|
-
},
|
|
101
|
+
}, c = {
|
|
109
102
|
info: {
|
|
110
|
-
main:
|
|
111
|
-
focusActive:
|
|
112
|
-
hover:
|
|
113
|
-
opacity:
|
|
114
|
-
toneOpacity:
|
|
115
|
-
contrastText:
|
|
116
|
-
hoverOpacity:
|
|
103
|
+
main: t.info.main,
|
|
104
|
+
focusActive: t.info.darker,
|
|
105
|
+
hover: t.info.dark,
|
|
106
|
+
opacity: t.info.opacityDark,
|
|
107
|
+
toneOpacity: t.info.toneOpacityDark,
|
|
108
|
+
contrastText: t.info.contrastText,
|
|
109
|
+
hoverOpacity: t.info.opacityDark,
|
|
117
110
|
//Por compatibilidad con MUI
|
|
118
|
-
light:
|
|
119
|
-
dark:
|
|
111
|
+
light: t.info.light,
|
|
112
|
+
dark: t.info.dark
|
|
120
113
|
},
|
|
121
114
|
success: {
|
|
122
|
-
main:
|
|
123
|
-
focusActive:
|
|
124
|
-
hover:
|
|
125
|
-
opacity:
|
|
126
|
-
toneOpacity:
|
|
127
|
-
contrastText:
|
|
128
|
-
hoverOpacity:
|
|
115
|
+
main: t.success.main,
|
|
116
|
+
focusActive: t.success.darker,
|
|
117
|
+
hover: t.success.dark,
|
|
118
|
+
opacity: t.success.opacityDark,
|
|
119
|
+
toneOpacity: t.success.toneOpacityDark,
|
|
120
|
+
contrastText: t.success.contrastText,
|
|
121
|
+
hoverOpacity: t.success.opacityDark,
|
|
129
122
|
//Por compatibilidad con MUI
|
|
130
|
-
light:
|
|
131
|
-
dark:
|
|
123
|
+
light: t.success.light,
|
|
124
|
+
dark: t.success.dark
|
|
132
125
|
},
|
|
133
126
|
warning: {
|
|
134
|
-
main:
|
|
135
|
-
focusActive:
|
|
136
|
-
hover:
|
|
137
|
-
opacity:
|
|
138
|
-
toneOpacity:
|
|
139
|
-
contrastText:
|
|
140
|
-
hoverOpacity:
|
|
127
|
+
main: t.warning.main,
|
|
128
|
+
focusActive: t.warning.darker,
|
|
129
|
+
hover: t.warning.dark,
|
|
130
|
+
opacity: t.warning.opacityDark,
|
|
131
|
+
toneOpacity: t.warning.toneOpacityDark,
|
|
132
|
+
contrastText: t.warning.contrastText,
|
|
133
|
+
hoverOpacity: t.warning.opacityDark,
|
|
141
134
|
//Por compatibilidad con MUI
|
|
142
|
-
light:
|
|
143
|
-
dark:
|
|
135
|
+
light: t.warning.light,
|
|
136
|
+
dark: t.warning.dark
|
|
144
137
|
},
|
|
145
138
|
error: {
|
|
146
|
-
main:
|
|
147
|
-
focusActive:
|
|
148
|
-
hover:
|
|
149
|
-
opacity:
|
|
150
|
-
toneOpacity:
|
|
151
|
-
contrastText:
|
|
152
|
-
hoverOpacity:
|
|
139
|
+
main: t.error.main,
|
|
140
|
+
focusActive: t.error.darker,
|
|
141
|
+
hover: t.error.dark,
|
|
142
|
+
opacity: t.error.opacityDark,
|
|
143
|
+
toneOpacity: t.error.toneOpacityDark,
|
|
144
|
+
contrastText: t.error.contrastText,
|
|
145
|
+
hoverOpacity: t.error.opacityDark,
|
|
153
146
|
//Por compatibilidad con MUI
|
|
154
|
-
light:
|
|
155
|
-
dark:
|
|
147
|
+
light: t.error.light,
|
|
148
|
+
dark: t.error.dark
|
|
156
149
|
}
|
|
157
150
|
};
|
|
158
151
|
export {
|
|
159
|
-
|
|
160
|
-
|
|
152
|
+
o as S,
|
|
153
|
+
c as a
|
|
161
154
|
};
|
package/theme/shadows.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { alpha as r } from "@mui/material/styles";
|
|
2
|
-
import { G as
|
|
3
|
-
import { B as
|
|
2
|
+
import { G as a } from "./palette/greyPalette.js";
|
|
3
|
+
import { B as s } from "./palette/baseColors.js";
|
|
4
4
|
import { C as o } from "./palette/commonColors.js";
|
|
5
|
-
const e =
|
|
6
|
-
const p = r(
|
|
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);
|
|
7
7
|
return [
|
|
8
8
|
"none",
|
|
9
9
|
`0px 2px 1px -1px ${p},0px 1px 1px 0px ${x},0px 1px 3px 0px ${$}`,
|
|
@@ -31,42 +31,50 @@ const e = s[500], c = "#000000", n = (a) => {
|
|
|
31
31
|
`0px 11px 14px -7px ${p},0px 23px 36px 3px ${x},0px 9px 44px 8px ${$}`,
|
|
32
32
|
`0px 11px 15px -7px ${p},0px 24px 38px 3px ${x},0px 9px 46px 8px ${$}`
|
|
33
33
|
];
|
|
34
|
-
},
|
|
34
|
+
}, O = (t) => {
|
|
35
35
|
const p = {
|
|
36
|
-
info: `0px 2px 8px 0px ${r(
|
|
37
|
-
secondary: `0px 2px 8px 0px ${r(
|
|
38
|
-
success: `0px 2px 8px 0px ${r(
|
|
39
|
-
warning: `0px 2px 8px 0px ${r(
|
|
40
|
-
error: `0px 2px 8px 0px ${r(
|
|
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)}`,
|
|
41
41
|
//
|
|
42
|
-
card: `0 0 2px 0 ${r(
|
|
43
|
-
|
|
42
|
+
card: `0 0 2px 0 ${r(a[500], 0.2)}, 0 12px 24px -4px ${r(
|
|
43
|
+
a[500],
|
|
44
44
|
0.12
|
|
45
45
|
)}`,
|
|
46
46
|
dialog: `-40px 40px 80px -8px ${r(o.black, 0.24)}`,
|
|
47
|
-
dropdown: `0 0 2px 0 ${r(
|
|
48
|
-
|
|
47
|
+
dropdown: `0 0 2px 0 ${r(a[500], 0.24)}, -20px 20px 40px -4px ${r(
|
|
48
|
+
a[500],
|
|
49
49
|
0.24
|
|
50
50
|
)}`
|
|
51
51
|
};
|
|
52
|
-
return
|
|
53
|
-
z1:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
return t === "light" ? {
|
|
53
|
+
z1: `0px 2px 2px 2px ${r("#091E42", 0.8)}`,
|
|
54
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
55
|
+
z2: `0px 0px ${r("#495859", 0.14)}`,
|
|
56
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
57
|
+
z3: `0px 4px 12px 1px ${r("#243B46", 0.14)}`,
|
|
58
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
59
|
+
z4: `0px 12px 32px 4px ${r("#243B46", 0.12)}`,
|
|
60
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
57
61
|
...p
|
|
58
62
|
} : {
|
|
59
|
-
z1:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
z1: `0px 2px 2px 2px ${r("#000000", 0.16)}`,
|
|
64
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
65
|
+
z2: `0px 0px ${r("#111414", 0.5)}`,
|
|
66
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
67
|
+
z3: `0px 4px 12px 1px ${r("#09090A", 0.6)}`,
|
|
68
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
69
|
+
z4: `0px 12px 32px 4px ${r("#09090A", 0.35)}`,
|
|
70
|
+
// todo: solicitar a diseño crear token en base porque está quemado
|
|
63
71
|
...p
|
|
64
72
|
};
|
|
65
|
-
},
|
|
73
|
+
}, u = {
|
|
66
74
|
light: n(e),
|
|
67
75
|
dark: n(c)
|
|
68
76
|
};
|
|
69
77
|
export {
|
|
70
|
-
|
|
71
|
-
|
|
78
|
+
O as c,
|
|
79
|
+
u as s
|
|
72
80
|
};
|
package/theme/sizes/baseSizes.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
const p = {
|
|
2
2
|
sp0: "0px",
|
|
3
|
-
"sp0
|
|
3
|
+
"sp0-5": "2px",
|
|
4
4
|
sp1: "4px",
|
|
5
5
|
sp2: "8px",
|
|
6
6
|
sp3: "12px",
|
|
7
|
-
"sp3
|
|
7
|
+
"sp3-5": "14px",
|
|
8
8
|
sp4: "16px",
|
|
9
9
|
sp5: "20px",
|
|
10
10
|
sp6: "24px",
|
|
@@ -12,12 +12,12 @@ const p = {
|
|
|
12
12
|
sp8: "32px",
|
|
13
13
|
sp9: "36px",
|
|
14
14
|
sp10: "40px",
|
|
15
|
-
"sp10
|
|
15
|
+
"sp10-5": "42px",
|
|
16
16
|
sp11: "44px",
|
|
17
17
|
sp12: "48px",
|
|
18
18
|
sp13: "52px",
|
|
19
19
|
sp14: "56px",
|
|
20
|
-
"sp14
|
|
20
|
+
"sp14-5": "58px"
|
|
21
21
|
};
|
|
22
22
|
export {
|
|
23
23
|
p as B
|
package/theme/sizes/pointerQr.js
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { P as a } from "./presetSizes.js";
|
|
2
|
+
const n = {
|
|
3
|
+
small: {
|
|
4
|
+
base: a.base.small,
|
|
5
|
+
action: a.action.small,
|
|
6
|
+
container: a.container.small
|
|
7
7
|
},
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
medium: {
|
|
9
|
+
base: a.base.medium,
|
|
10
|
+
action: a.action.medium,
|
|
11
|
+
container: a.container.medium
|
|
12
12
|
},
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
large: {
|
|
14
|
+
base: a.base.large,
|
|
15
|
+
action: a.action.large,
|
|
16
|
+
container: a.container.large
|
|
17
17
|
}
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
}, i = {
|
|
19
|
+
small: {
|
|
20
|
+
base: a.base.small,
|
|
21
|
+
action: a.action.small,
|
|
22
|
+
container: a.container.small
|
|
23
23
|
},
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
medium: {
|
|
25
|
+
base: a.base.medium,
|
|
26
|
+
action: a.action.medium,
|
|
27
|
+
container: a.container.medium
|
|
28
28
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
large: {
|
|
30
|
+
base: a.base.large,
|
|
31
|
+
action: a.action.large,
|
|
32
|
+
container: a.container.large
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
export {
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
n as P,
|
|
37
|
+
i as a
|
|
38
38
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { B as s } from "./baseSizes.js";
|
|
2
|
+
const m = {
|
|
3
|
+
base: {
|
|
4
|
+
small: s["sp3-5"],
|
|
5
|
+
medium: s.sp4,
|
|
6
|
+
large: s.sp5
|
|
7
|
+
},
|
|
8
|
+
action: {
|
|
9
|
+
small: s.sp5,
|
|
10
|
+
medium: s.sp6,
|
|
11
|
+
large: s.sp8
|
|
12
|
+
},
|
|
13
|
+
container: {
|
|
14
|
+
small: s.sp7,
|
|
15
|
+
medium: s.sp8,
|
|
16
|
+
large: s.sp9
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
m as P
|
|
21
|
+
};
|
package/theme/sizes/types.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Typography } from '../typography/types';
|
|
2
2
|
export interface BaseBorderRadius {
|
|
3
3
|
r0: string;
|
|
4
|
-
'r0
|
|
4
|
+
'r0-5': string;
|
|
5
5
|
r1: string;
|
|
6
|
-
'r1
|
|
6
|
+
'r1-5': string;
|
|
7
7
|
r2: string;
|
|
8
8
|
r3: string;
|
|
9
9
|
r4: string;
|
|
@@ -13,11 +13,11 @@ export interface BaseBorderRadius {
|
|
|
13
13
|
*/
|
|
14
14
|
export interface BaseSpacings {
|
|
15
15
|
sp0: string;
|
|
16
|
-
'sp0
|
|
16
|
+
'sp0-5': string;
|
|
17
17
|
sp1: string;
|
|
18
18
|
sp2: string;
|
|
19
19
|
sp3: string;
|
|
20
|
-
'sp3
|
|
20
|
+
'sp3-5': string;
|
|
21
21
|
sp4: string;
|
|
22
22
|
sp5: string;
|
|
23
23
|
sp6: string;
|
|
@@ -25,12 +25,12 @@ export interface BaseSpacings {
|
|
|
25
25
|
sp8: string;
|
|
26
26
|
sp9: string;
|
|
27
27
|
sp10: string;
|
|
28
|
-
'sp10
|
|
28
|
+
'sp10-5': string;
|
|
29
29
|
sp11: string;
|
|
30
30
|
sp12: string;
|
|
31
31
|
sp13: string;
|
|
32
32
|
sp14: string;
|
|
33
|
-
'sp14
|
|
33
|
+
'sp14-5': string;
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
36
|
* type usado para tipar las props sizes de los componentes o sus derivaciones
|
|
@@ -40,7 +40,7 @@ export type Sizes = 'small' | 'medium' | 'large';
|
|
|
40
40
|
* Representa al conjunto de valores de tamaño que tienen en cuenta la variación de tamaño en la aplicación web.
|
|
41
41
|
* Puede ser small, medium y large.
|
|
42
42
|
*/
|
|
43
|
-
export type SizesValues = Record<Sizes, string
|
|
43
|
+
export type SizesValues = Record<Sizes, Record<SizesComponentsTypes, string>>;
|
|
44
44
|
/**
|
|
45
45
|
* Representa a los conjuntos de valores que utilizan los desarroladores para definir diferentes categorías de componentes en tamaños y espacios.
|
|
46
46
|
* base: Es la clasificación de altura para componentes de tipo general, los cuales no son de categoría de acción ni de categoría contenedora.
|
|
@@ -53,7 +53,7 @@ export type SizesComponentsTypes = 'base' | 'action' | 'container';
|
|
|
53
53
|
* Se dividen en los siguientes tipos; base, action y container. Cada opción de categoría define
|
|
54
54
|
* los tamaños que pueden ser small, medium y large.
|
|
55
55
|
*/
|
|
56
|
-
export type PointerQrSizes =
|
|
56
|
+
export type PointerQrSizes = SizesValues;
|
|
57
57
|
/**
|
|
58
58
|
* Representa las opciones de grosor para los bordes de los componentes de la aplicación web.
|
|
59
59
|
*/
|
package/types/augmentations.d.ts
CHANGED
package/types/types.d.ts
CHANGED
|
@@ -75,7 +75,7 @@ export type ThemePresetColors = Record<ThemeUserColor, PresetColor>;
|
|
|
75
75
|
/**
|
|
76
76
|
* Son los colores semanticos en formato PresetColor
|
|
77
77
|
*/
|
|
78
|
-
export type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor
|
|
78
|
+
export type SemanticPresetColors = Record<SemanticColorOptionsType, Omit<PresetColor, 'borderMainDark' | 'borderMainLight'>>;
|
|
79
79
|
/**
|
|
80
80
|
* Son los colores de las ocpiones del tema, en formato PalletColor
|
|
81
81
|
*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { P as
|
|
1
|
+
import { P as n, a as m, b } from "../theme/palette/presetColors.js";
|
|
2
2
|
import { B as r } from "../theme/palette/baseColors.js";
|
|
3
|
-
import { C as
|
|
3
|
+
import { C as c } from "../theme/palette/commonColors.js";
|
|
4
4
|
import { G as d } from "../theme/palette/greyPalette.js";
|
|
5
5
|
import { S as s, a } from "../theme/palette/semanticColors.js";
|
|
6
6
|
import { B as o } from "../theme/palette/baseOpacityColors.js";
|
|
7
|
-
import { D as f, a as
|
|
7
|
+
import { D as f, a as u } from "../theme/palette/defaultColors.js";
|
|
8
8
|
const t = {
|
|
9
9
|
light: {
|
|
10
10
|
scrollBar: "#5663763D",
|
|
@@ -15,11 +15,11 @@ const t = {
|
|
|
15
15
|
gridHover: "#282E2E"
|
|
16
16
|
}
|
|
17
17
|
}, C = (l) => {
|
|
18
|
-
const i =
|
|
18
|
+
const i = m?.[l], e = b?.[l];
|
|
19
19
|
return {
|
|
20
20
|
light: {
|
|
21
21
|
mode: "light",
|
|
22
|
-
common:
|
|
22
|
+
common: c,
|
|
23
23
|
primary: {
|
|
24
24
|
...i
|
|
25
25
|
},
|
|
@@ -43,7 +43,7 @@ const t = {
|
|
|
43
43
|
paper: "#00000000"
|
|
44
44
|
},
|
|
45
45
|
border: {
|
|
46
|
-
main:
|
|
46
|
+
main: n[l]?.borderMainLight,
|
|
47
47
|
default: o.oxford[40],
|
|
48
48
|
secondary: o.oxford[30],
|
|
49
49
|
dens: o.oxford[60],
|
|
@@ -78,12 +78,13 @@ const t = {
|
|
|
78
78
|
},
|
|
79
79
|
dark: {
|
|
80
80
|
mode: "dark",
|
|
81
|
-
common:
|
|
81
|
+
common: c,
|
|
82
|
+
// no definido en figma
|
|
82
83
|
primary: {
|
|
83
84
|
...e
|
|
84
85
|
},
|
|
85
86
|
default: {
|
|
86
|
-
...
|
|
87
|
+
...u,
|
|
87
88
|
focusVisible: e?.focusVisible,
|
|
88
89
|
contrastText: r.marbleLight[30]
|
|
89
90
|
},
|
|
@@ -95,14 +96,14 @@ const t = {
|
|
|
95
96
|
divider: r.coolGrey[80],
|
|
96
97
|
background: {
|
|
97
98
|
default: r.onyx[40],
|
|
98
|
-
neutral: r.
|
|
99
|
-
surface: r.
|
|
100
|
-
hover:
|
|
99
|
+
neutral: r.onyx[50],
|
|
100
|
+
surface: r.onyx[60],
|
|
101
|
+
hover: u.hover,
|
|
101
102
|
//por compatibilidad de mui
|
|
102
103
|
paper: "#00000000"
|
|
103
104
|
},
|
|
104
105
|
border: {
|
|
105
|
-
main:
|
|
106
|
+
main: n[l]?.borderMainDark,
|
|
106
107
|
default: o.mint[50],
|
|
107
108
|
secondary: o.mint[40],
|
|
108
109
|
dens: o.mint[60],
|
|
@@ -110,10 +111,12 @@ const t = {
|
|
|
110
111
|
error: a.error.main
|
|
111
112
|
},
|
|
112
113
|
general: {
|
|
114
|
+
// no definido en figma
|
|
113
115
|
scrollBar: t.light.scrollBar,
|
|
114
116
|
gridHover: t.light.gridHover
|
|
115
117
|
},
|
|
116
118
|
grey: d,
|
|
119
|
+
// no definido en figma
|
|
117
120
|
skeleton: {
|
|
118
121
|
default: o.mint[20],
|
|
119
122
|
transition: o.mint[40]
|