Skip to content

Commit 79b68ba

Browse files
tenphitenphi
committed
feat(preset): support modifiers
1 parent 8c36e8c commit 79b68ba

File tree

5 files changed

+56
-32
lines changed

5 files changed

+56
-32
lines changed

‎src/components/layout/Space.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,10 @@ export const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {
3737
{...filterBaseProps(otherProps, { eventProps: true })}
3838
ref={ref}
3939
mods={{
40-
vertical: direction === 'vertical' || otherProps.flow === 'column',
40+
vertical:
41+
direction === 'vertical' ||
42+
otherProps.flow === 'column' ||
43+
styles.flow === 'column',
4144
...mods,
4245
}}
4346
styles={styles}

‎src/icons/Icon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ const IconElement = tasty({
2828
'-webkit-font-smoothing': 'antialiased',
2929

3030
'& svg': {
31-
width: '1em 1em',
32-
height: 'min 1em',
31+
width: 'min 1em',
32+
height: '1em 1em',
3333
strokeWidth: '@stroke-width',
3434
},
3535
},
@@ -53,7 +53,7 @@ export const Icon = memo(
5353
const { size, stroke, ...rest } = props;
5454

5555
const mergedProps =
56-
size != null && stroke != null
56+
size != null || stroke != null
5757
? mergeProps(rest, {
5858
...(size ? { fontSize: size } : {}),
5959
...(stroke ? { '@stroke-width': stroke } : {}),

‎src/tasty/styles/gap.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function gapStyle({ display = 'block', flow, gap }) {
1010
}
1111

1212
if (gap === true) {
13-
gap = '1.5x';
13+
gap = '1x';
1414
}
1515

1616
const isGrid = display.includes('grid');

‎src/tasty/styles/preset.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,15 @@ export function presetStyle({
4747

4848
if (preset === true) preset = '';
4949

50-
const { mods } = parseStyle(preset);
50+
let { mods } = parseStyle(preset);
51+
52+
const isStrong = mods.includes('strong');
53+
const isItalic = mods.includes('italic');
54+
const isIcon = mods.includes('icon');
55+
56+
mods = mods.filter(
57+
(mod) => mod !== 'bold' && mod !== 'italic' && mod !== 'icon',
58+
);
5159

5260
const name = mods[0] || 'default';
5361

@@ -84,6 +92,19 @@ export function presetStyle({
8492
setCSSValue(styles, 'bold-font-weight', name, true);
8593
setCSSValue(styles, 'icon-size', name, true);
8694

95+
if (isStrong) {
96+
styles['font-weight'] = 'var(--bold-font-weight)';
97+
}
98+
99+
if (isItalic) {
100+
styles['font-style'] = 'italic';
101+
}
102+
103+
if (isIcon) {
104+
styles['font-size'] = 'var(--icon-size)';
105+
styles['line-height'] = 'var(--icon-size)';
106+
}
107+
87108
return styles;
88109
}
89110

‎src/tokens.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -101,38 +101,38 @@ const TOKENS = {
101101
'h1-font-size': '36px',
102102
'h1-line-height': '44px',
103103
'h1-letter-spacing': '-0.01em',
104-
'h1-font-weight': '700',
105-
'h1-icon-size': '38px',
104+
'h1-font-weight': '600',
105+
'h1-icon-size': '40px',
106106
// h2
107107
'h2-font-size': '24px',
108108
'h2-line-height': '32px',
109109
'h2-letter-spacing': '0em',
110-
'h2-font-weight': '700',
111-
'h2-icon-size': '26px',
110+
'h2-font-weight': '600',
111+
'h2-icon-size': '28px',
112112
// h3
113113
'h3-font-size': '20px',
114114
'h3-line-height': '28px',
115115
'h3-letter-spacing': '0em',
116-
'h3-font-weight': '700',
117-
'h3-icon-size': '22px',
116+
'h3-font-weight': '600',
117+
'h3-icon-size': '24px',
118118
// h4
119119
'h4-font-size': '18px',
120120
'h4-line-height': '24px',
121121
'h4-letter-spacing': '0',
122-
'h4-font-weight': '700',
123-
'h4-icon-size': '20px',
122+
'h4-font-weight': '600',
123+
'h4-icon-size': '22px',
124124
// h5
125125
'h5-font-size': '16px',
126126
'h5-line-height': '22px',
127127
'h5-letter-spacing': '0',
128-
'h5-font-weight': '700',
129-
'h5-icon-size': '18px',
128+
'h5-font-weight': '600',
129+
'h5-icon-size': '20px',
130130
// h6
131131
'h6-font-size': '14px',
132132
'h6-line-height': '20px',
133133
'h6-letter-spacing': '0.01em',
134134
'h6-font-weight': '600',
135-
'h6-icon-size': '16px',
135+
'h6-icon-size': '20px',
136136
// t1
137137
't1-font-size': '18px',
138138
't1-line-height': '24px',
@@ -144,89 +144,89 @@ const TOKENS = {
144144
't2-line-height': '22px',
145145
't2-letter-spacing': '0',
146146
't2-font-weight': '400',
147-
't2-icon-size': '18px',
147+
't2-icon-size': '20px',
148148
// t2m
149149
't2m-font-size': '16px',
150150
't2m-line-height': '22px',
151151
't2m-letter-spacing': '0',
152152
't2m-font-weight': '500',
153-
't2m-icon-size': '18px',
153+
't2m-icon-size': '20px',
154154
// t3
155155
't3-font-size': '14px',
156156
't3-line-height': '20px',
157157
't3-letter-spacing': '0',
158158
't3-font-weight': '400',
159-
't3-icon-size': '16px',
159+
't3-icon-size': '18px',
160160
// t3m
161161
't3m-font-size': '14px',
162162
't3m-line-height': '20px',
163163
't3m-letter-spacing': '0',
164164
't3m-font-weight': '500',
165-
't3m-icon-size': '16px',
165+
't3m-icon-size': '18px',
166166
// t4
167167
't4-font-size': '12px',
168168
't4-line-height': '18px',
169169
't4-letter-spacing': '0',
170170
't4-font-weight': '500',
171-
't4-icon-size': '14px',
171+
't4-icon-size': '16px',
172172
// t4m
173173
't4m-font-size': '12px',
174174
't4m-line-height': '18px',
175175
't4m-letter-spacing': '0',
176176
't4m-font-weight': '600',
177-
't4m-icon-size': '14px',
177+
't4m-icon-size': '16px',
178178
// p1
179179
'p1-font-size': '18px',
180180
'p1-line-height': '28px',
181181
'p1-letter-spacing': '0',
182182
'p1-font-weight': '400',
183-
'p1-icon-size': '20px',
183+
'p1-icon-size': '22px',
184184
// p2
185185
'p2-font-size': '16px',
186186
'p2-line-height': '24px',
187187
'p2-letter-spacing': '0',
188188
'p2-font-weight': '400',
189-
'p2-icon-size': '18px',
189+
'p2-icon-size': '20px',
190190
// p3
191191
'p3-font-size': '14px',
192192
'p3-line-height': '22px',
193193
'p3-letter-spacing': '0',
194194
'p3-font-weight': '400',
195-
'p3-icon-size': '16px',
195+
'p3-icon-size': '18px',
196196
// p4
197197
'p4-font-size': '12px',
198198
'p4-line-height': '20px',
199199
'p4-letter-spacing': '0',
200200
'p4-font-weight': '500',
201-
'p4-icon-size': '14px',
201+
'p4-icon-size': '16px',
202202
// c1
203203
'c1-font-size': '14px',
204204
'c1-line-height': '20px',
205205
'c1-letter-spacing': '0',
206206
'c1-font-weight': '500',
207207
'c1-text-transform': 'uppercase',
208-
'c1-icon-size': '16px',
208+
'c1-icon-size': '18px',
209209
// c2
210210
'c2-font-size': '12px',
211211
'c2-line-height': '18px',
212212
'c2-letter-spacing': '0.01em',
213213
'c2-font-weight': '500',
214214
'c2-text-transform': 'uppercase',
215-
'c2-icon-size': '14px',
215+
'c2-icon-size': '16px',
216216
// tag
217217
'tag-font-size': '12px',
218218
'tag-line-height': '18px',
219219
'tag-letter-spacing': '0.01em',
220220
'tag-font-weight': '600',
221-
'tag-icon-size': '14px',
221+
'tag-icon-size': '16px',
222222
// strong
223223
'strong-font-size': 'inherit',
224224
'strong-line-height': 'inherit',
225225
'strong-letter-spacing': 'inherit',
226226
'strong-font-family': 'inherit',
227227
'strong-font-style': 'inherit',
228228
'strong-font-weight':
229-
'var(--bold-font-weight, var(--default-bold-font-weight, 700))',
229+
'var(--bold-font-weight, var(--default-bold-font-weight, 600))',
230230
// em
231231
'em-font-size': 'inherit',
232232
'em-line-height': 'inherit',
@@ -239,7 +239,7 @@ const TOKENS = {
239239
'default-line-height': 'var(--t3-line-height)',
240240
'default-letter-spacing': 'var(--t3-letter-spacing)',
241241
'default-font-weight': 'var(--t3-font-weight)',
242-
'default-bold-font-weight': '700',
242+
'default-bold-font-weight': '600',
243243
'default-icon-size': 'inherit',
244244
// scrollbar colors
245245
'scrollbar-width': '1.5x',

0 commit comments

Comments
 (0)