Skip to content

Commit 5123c13

Browse files
maurobendermaurobender
committed
Add layout style props
- Refactor style props definitions so each category has it own file.
1 parent 9bef1f1 commit 5123c13

File tree

11 files changed

+436
-51
lines changed

11 files changed

+436
-51
lines changed

‎src/core/styles/StyleProps.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { STYLE_PROPS_MAPPING } from './consts';
1+
import { STYLE_PROPS_MAPPING } from './propsMapping';
22
import type {
33
ComponentProps, PropMap, PropName, PropsMappingDict,
44
PropValue, Style, StylePropValue, Transformer, TransformerMethod

‎src/core/styles/propsMapping/border.ts

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
export default {
2+
borderWidth: {
3+
property: 'borderWidth',
4+
category: 'layout',
5+
scale: 'borderWidths',
6+
transformerMethod: 'borderWidth'
7+
},
8+
borderColor: {
9+
property: 'borderColor',
10+
scale: 'palette',
11+
transformerMethod: 'color'
12+
},
13+
borderRadius: {
14+
property: 'borderRadius',
15+
category: 'layout',
16+
scale: 'radius',
17+
transformerMethod: 'radius'
18+
},
19+
borderTopLeftRadius: {
20+
property: 'borderTopLeftRadius',
21+
category: 'layout',
22+
scale: 'radius',
23+
transformerMethod: 'radius'
24+
},
25+
borderTopRightRadius: {
26+
property: 'borderTopRightRadius',
27+
category: 'layout',
28+
scale: 'radius',
29+
transformerMethod: 'radius'
30+
},
31+
borderBottomLeftRadius: {
32+
property: 'borderBottomLeftRadius',
33+
category: 'layout',
34+
scale: 'radius',
35+
transformerMethod: 'radius'
36+
},
37+
borderBottomRightRadius: {
38+
property: 'borderBottomRightRadius',
39+
category: 'layout',
40+
scale: 'radius',
41+
transformerMethod: 'radius'
42+
},
43+
borderTopWidth: {
44+
property: 'borderTopWidth',
45+
category: 'layout',
46+
scale: 'borderWidths',
47+
transformerMethod: 'borderWidth'
48+
},
49+
borderTopColor: {
50+
property: 'borderTopColor',
51+
scale: 'palette',
52+
transformerMethod: 'color'
53+
},
54+
borderTopStyle: {
55+
property: 'borderTopStyle',
56+
scale: 'borderStyles'
57+
},
58+
borderBottomWidth: {
59+
property: 'borderBottomWidth',
60+
category: 'layout',
61+
scale: 'borderWidths',
62+
transformerMethod: 'borderWidth'
63+
},
64+
borderBottomColor: {
65+
property: 'borderBottomColor',
66+
scale: 'palette',
67+
transformerMethod: 'color'
68+
},
69+
borderLeftWidth: {
70+
property: 'borderLeftWidth',
71+
category: 'layout',
72+
scale: 'borderWidths',
73+
transformerMethod: 'borderWidth'
74+
},
75+
borderLeftColor: {
76+
property: 'borderLeftColor',
77+
scale: 'palette',
78+
transformerMethod: 'color'
79+
},
80+
borderRightWidth: {
81+
property: 'borderRightWidth',
82+
category: 'layout',
83+
scale: 'borderWidths',
84+
transformerMethod: 'borderWidth'
85+
},
86+
borderRightColor: {
87+
property: 'borderRightColor',
88+
scale: 'palette',
89+
transformerMethod: 'color'
90+
},
91+
rounded: {
92+
property: 'borderRadius',
93+
category: 'layout',
94+
scale: 'radius',
95+
transformerMethod: 'radius'
96+
},
97+
roundedTopLeft: {
98+
property: 'borderTopLeftRadius',
99+
category: 'layout',
100+
scale: 'radius',
101+
transformerMethod: 'radius'
102+
},
103+
roundedTopRight: {
104+
property: 'borderTopRightRadius',
105+
category: 'layout',
106+
scale: 'radius',
107+
transformerMethod: 'radius'
108+
},
109+
roundedBottomLeft: {
110+
property: 'borderBottomLeftRadius',
111+
category: 'layout',
112+
scale: 'radius',
113+
transformerMethod: 'radius'
114+
},
115+
roundedBottomRight: {
116+
property: 'borderBottomRightRadius',
117+
category: 'layout',
118+
scale: 'radius',
119+
transformerMethod: 'radius'
120+
}
121+
} as const;

‎src/core/styles/propsMapping/color.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export default {
2+
color: {
3+
property: 'color',
4+
scale: 'palette',
5+
transformerMethod: 'color'
6+
},
7+
tintColor: {
8+
property: 'tintColor',
9+
scale: 'palette',
10+
transformerMethod: 'color'
11+
},
12+
backgroundColor: {
13+
property: 'backgroundColor',
14+
scale: 'palette',
15+
transformerMethod: 'color'
16+
},
17+
bg: {
18+
property: 'backgroundColor',
19+
scale: 'palette',
20+
transformerMethod: 'color'
21+
},
22+
bgColor: {
23+
property: 'backgroundColor',
24+
scale: 'palette',
25+
transformerMethod: 'color'
26+
},
27+
background: {
28+
property: 'backgroundColor',
29+
scale: 'palette',
30+
transformerMethod: 'color'
31+
}
32+
} as const;

‎src/core/styles/propsMapping/index.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import border from './border';
2+
import color from './color';
3+
import spacing from './spacing';
4+
import typography from './typography';
5+
6+
export const STYLE_PROPS_MAPPING = {
7+
...border,
8+
...color,
9+
...spacing,
10+
...typography
11+
} as const;
12+
13+
export type StlyePropsMapping = typeof STYLE_PROPS_MAPPING;

‎src/core/styles/propsMapping/spacing.ts

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
export default {
2+
margin: {
3+
property: 'margin',
4+
category: 'layout',
5+
scale: 'spacings',
6+
transformerMethod: 'spacing'
7+
},
8+
m: {
9+
property: 'margin',
10+
category: 'layout',
11+
scale: 'spacings',
12+
transformerMethod: 'spacing'
13+
},
14+
marginTop: {
15+
property: 'marginTop',
16+
category: 'layout',
17+
scale: 'spacings',
18+
transformerMethod: 'spacing'
19+
},
20+
mt: {
21+
property: 'marginTop',
22+
category: 'layout',
23+
scale: 'spacings',
24+
transformerMethod: 'spacing'
25+
},
26+
marginRight: {
27+
property: 'marginRight',
28+
category: 'layout',
29+
scale: 'spacings',
30+
transformerMethod: 'spacing'
31+
},
32+
mr: {
33+
property: 'marginRight',
34+
category: 'layout',
35+
scale: 'spacings',
36+
transformerMethod: 'spacing'
37+
},
38+
marginBottom: {
39+
property: 'marginBottom',
40+
category: 'layout',
41+
scale: 'spacings',
42+
transformerMethod: 'spacing'
43+
},
44+
mb: {
45+
property: 'marginBottom',
46+
category: 'layout',
47+
scale: 'spacings',
48+
transformerMethod: 'spacing'
49+
},
50+
marginLeft: {
51+
property: 'marginLeft',
52+
category: 'layout',
53+
scale: 'spacings',
54+
transformerMethod: 'spacing'
55+
},
56+
ml: {
57+
property: 'marginLeft',
58+
category: 'layout',
59+
scale: 'spacings',
60+
transformerMethod: 'spacing'
61+
},
62+
// marginX: {
63+
// properties: [ 'marginLeft', 'marginRight' ],
64+
// category: 'layout',
65+
// scale: 'spacings',
66+
// transformerMethod: 'spacing'
67+
// },
68+
// mx: {
69+
// properties: [ 'marginLeft', 'marginRight' ],
70+
// category: 'layout',
71+
// scale: 'spacings',
72+
// transformerMethod: 'spacing'
73+
// },
74+
// marginY: {
75+
// properties: [ 'marginTop', 'marginBottom' ],
76+
// category: 'layout',
77+
// scale: 'spacings',
78+
// transformerMethod: 'spacing'
79+
// },
80+
// my: {
81+
// properties: [ 'marginTop', 'marginBottom' ],
82+
// category: 'layout',
83+
// scale: 'spacings',
84+
// transformerMethod: 'spacing'
85+
// },
86+
87+
padding: {
88+
property: 'padding',
89+
category: 'layout',
90+
scale: 'spacings',
91+
transformerMethod: 'spacing'
92+
},
93+
p: {
94+
property: 'padding',
95+
category: 'layout',
96+
scale: 'spacings',
97+
transformerMethod: 'spacing'
98+
},
99+
paddingTop: {
100+
property: 'paddingTop',
101+
category: 'layout',
102+
scale: 'spacings',
103+
transformerMethod: 'spacing'
104+
},
105+
pt: {
106+
property: 'paddingTop',
107+
category: 'layout',
108+
scale: 'spacings',
109+
transformerMethod: 'spacing'
110+
},
111+
paddingRight: {
112+
property: 'paddingRight',
113+
category: 'layout',
114+
scale: 'spacings',
115+
transformerMethod: 'spacing'
116+
},
117+
pr: {
118+
property: 'paddingRight',
119+
category: 'layout',
120+
scale: 'spacings',
121+
transformerMethod: 'spacing'
122+
},
123+
paddingBottom: {
124+
property: 'paddingBottom',
125+
category: 'layout',
126+
scale: 'spacings',
127+
transformerMethod: 'spacing'
128+
},
129+
pb: {
130+
property: 'paddingBottom',
131+
category: 'layout',
132+
scale: 'spacings',
133+
transformerMethod: 'spacing'
134+
},
135+
paddingLeft: {
136+
property: 'paddingLeft',
137+
category: 'layout',
138+
scale: 'spacings',
139+
transformerMethod: 'spacing'
140+
},
141+
pl: {
142+
property: 'paddingLeft',
143+
category: 'layout',
144+
scale: 'spacings',
145+
transformerMethod: 'spacing'
146+
},
147+
// paddingX: {
148+
// properties: [ 'paddingLeft', 'paddingRight' ],
149+
// category: 'layout',
150+
// scale: 'spacing'
151+
// },
152+
// px: {
153+
// properties: [ 'paddingLeft', 'paddingRight' ],
154+
// category: 'layout',
155+
// scale: 'spacing'
156+
// },
157+
// paddingY: {
158+
// properties: [ 'paddingTop', 'paddingBottom' ],
159+
// category: 'layout',
160+
// scale: 'spacing'
161+
// },
162+
// py: {
163+
// properties: [ 'paddingTop', 'paddingBottom' ],
164+
// category: 'layout',
165+
// scale: 'spacing'
166+
// },
167+
gap: {
168+
property: 'gap',
169+
category: 'layout',
170+
scale: 'spacings',
171+
transformerMethod: 'spacing'
172+
}
173+
} as const;

0 commit comments

Comments
 (0)