A design system in a box.
hip-ui.tngl.io/docs/introduction
appl yin docs
+1122
-971
+16
-16
apps/docs/src/components/alert-dialog/index.tsx
+16
-16
apps/docs/src/components/alert-dialog/index.tsx
···
21
21
import { Button } from "../button";
22
22
import { useHaptics } from "../haptics";
23
23
import { IconButton } from "../icon-button";
24
-
import { spacing } from "../theme/spacing.stylex";
24
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
25
25
import { fontSize, typeramp } from "../theme/typography.stylex";
26
26
import { useDialogStyles } from "../theme/useDialogStyles";
27
27
28
28
const styles = stylex.create({
29
29
dialog: {
30
-
paddingBottom: spacing["2"],
31
-
paddingTop: spacing["2"],
30
+
paddingBottom: verticalSpace["md"],
31
+
paddingTop: verticalSpace["md"],
32
32
},
33
33
header: {
34
-
gap: spacing["2"],
34
+
gap: gap["md"],
35
35
alignItems: "center",
36
36
display: "flex",
37
37
fontSize: fontSize["lg"],
38
38
justifyContent: "space-between",
39
-
height: spacing["8"],
40
-
paddingLeft: spacing["4"],
41
-
paddingRight: spacing["4"],
42
-
paddingTop: spacing["2"],
39
+
height: sizeSpace["6xl"],
40
+
paddingLeft: horizontalSpace["3xl"],
41
+
paddingRight: horizontalSpace["3xl"],
42
+
paddingTop: verticalSpace["md"],
43
43
},
44
44
description: {
45
-
paddingBottom: spacing["4"],
46
-
paddingLeft: spacing["4"],
47
-
paddingRight: spacing["4"],
48
-
paddingTop: spacing["4"],
45
+
paddingBottom: verticalSpace["3xl"],
46
+
paddingLeft: horizontalSpace["3xl"],
47
+
paddingRight: horizontalSpace["3xl"],
48
+
paddingTop: verticalSpace["3xl"],
49
49
},
50
50
footer: {
51
-
gap: spacing["2"],
51
+
gap: gap["md"],
52
52
display: "flex",
53
53
justifyContent: "flex-end",
54
-
paddingBottom: spacing["2"],
55
-
paddingLeft: spacing["4"],
56
-
paddingRight: spacing["4"],
54
+
paddingBottom: verticalSpace["md"],
55
+
paddingLeft: horizontalSpace["3xl"],
56
+
paddingRight: horizontalSpace["3xl"],
57
57
},
58
58
});
59
59
+20
-20
apps/docs/src/components/alert/index.tsx
+20
-20
apps/docs/src/components/alert/index.tsx
···
29
29
success,
30
30
warning,
31
31
} from "../theme/semantic-color.stylex";
32
-
import { spacing } from "../theme/spacing.stylex";
32
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
33
33
import { fontFamily } from "../theme/typography.stylex";
34
34
import { Text } from "../typography/text";
35
35
···
39
39
borderStyle: "solid",
40
40
borderWidth: 1,
41
41
cornerShape: "squircle",
42
-
gap: spacing["2.5"],
42
+
gap: gap["lg"],
43
43
gridTemplateAreas: {
44
44
default: "'icon content'",
45
45
[maxBreakpoints.sm]: "'icon content'",
···
53
53
[maxBreakpoints.sm]: "auto 1fr",
54
54
},
55
55
position: "relative",
56
-
minHeight: spacing["10"],
57
-
paddingBottom: spacing["2.5"],
58
-
paddingLeft: spacing["4"],
59
-
paddingRight: spacing["4"],
60
-
paddingTop: spacing["2.5"],
56
+
minHeight: sizeSpace["lg"],
57
+
paddingBottom: verticalSpace["lg"],
58
+
paddingLeft: horizontalSpace["3xl"],
59
+
paddingRight: horizontalSpace["3xl"],
60
+
paddingTop: verticalSpace["lg"],
61
61
},
62
62
alertWithDescription: {
63
63
alignItems: "flex-start",
64
-
paddingBottom: spacing["4"],
65
-
paddingRight: spacing["3"],
66
-
paddingTop: spacing["4"],
64
+
paddingBottom: verticalSpace["3xl"],
65
+
paddingRight: horizontalSpace["xl"],
66
+
paddingTop: verticalSpace["3xl"],
67
67
},
68
68
alertWithClose: {
69
69
gridTemplateAreas: {
···
74
74
default: "auto 1fr auto",
75
75
[maxBreakpoints.sm]: "auto 1fr auto",
76
76
},
77
-
paddingRight: spacing["2"],
77
+
paddingRight: horizontalSpace["md"],
78
78
},
79
79
alertWithAction: {
80
80
gridTemplateAreas: {
···
85
85
default: "auto 1fr auto",
86
86
[maxBreakpoints.sm]: "auto 1fr",
87
87
},
88
-
paddingRight: spacing["2"],
88
+
paddingRight: horizontalSpace["md"],
89
89
},
90
90
alertWithActionAndClose: {
91
91
gridTemplateAreas: {
···
96
96
default: "auto 1fr auto auto",
97
97
[maxBreakpoints.sm]: "auto 1fr auto",
98
98
},
99
-
paddingRight: spacing["2"],
99
+
paddingRight: horizontalSpace["md"],
100
100
},
101
101
content: {
102
102
gridArea: "content",
103
-
gap: spacing["3"],
103
+
gap: gap["xl"],
104
104
display: "flex",
105
105
flexDirection: "column",
106
106
},
107
107
contentWithDescription: {
108
-
paddingTop: spacing["0.5"],
108
+
paddingTop: verticalSpace["xxs"],
109
109
},
110
110
icon: {
111
111
gridArea: "icon",
···
119
119
":is(*) svg": {
120
120
flexShrink: 0,
121
121
pointerEvents: "none",
122
-
height: spacing["5"],
123
-
width: spacing["5"],
122
+
height: sizeSpace["3xl"],
123
+
width: sizeSpace["3xl"],
124
124
},
125
125
},
126
126
action: {
127
127
gridArea: "action",
128
-
gap: spacing["2"],
128
+
gap: gap["md"],
129
129
alignItems: "center",
130
130
alignSelf: "center",
131
131
display: "flex",
···
134
134
closeButton: {
135
135
gridArea: "close",
136
136
flexShrink: 0,
137
-
marginBottom: `calc(${spacing["1"]} * -1)`,
138
-
marginTop: `calc(${spacing["1"]} * -1)`,
137
+
marginBottom: `calc(${sizeSpace["xxs"]} * -1)`,
138
+
marginTop: `calc(${sizeSpace["xxs"]} * -1)`,
139
139
},
140
140
actionAndClose: {
141
141
alignSelf: "center",
+2
-2
apps/docs/src/components/autocomplete/index.tsx
+2
-2
apps/docs/src/components/autocomplete/index.tsx
···
20
20
import { SizeContext } from "../context";
21
21
import { ListBox } from "../listbox";
22
22
import { TextField } from "../text-field";
23
-
import { spacing } from "../theme/spacing.stylex";
23
+
import { verticalSpace } from "../theme/semantic-spacing.stylex";
24
24
import { usePopoverStyles } from "../theme/usePopoverStyles";
25
25
26
26
const styles = stylex.create({
···
30
30
popover: {
31
31
position: "absolute",
32
32
left: 0,
33
-
paddingTop: spacing["1"],
33
+
paddingTop: verticalSpace["xs"],
34
34
top: "100%",
35
35
width: "100%",
36
36
},
+9
-9
apps/docs/src/components/avatar/index.tsx
+9
-9
apps/docs/src/components/avatar/index.tsx
···
14
14
import { uiColor } from "../theme/color.stylex";
15
15
import { mediaQueries } from "../theme/media-queries.stylex";
16
16
import { radius } from "../theme/radius.stylex";
17
-
import { spacing } from "../theme/spacing.stylex";
17
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
18
18
import {
19
19
fontFamily,
20
20
fontSize,
···
41
41
default: radius.sm,
42
42
[mediaQueries.supportsSquircle]: radius["3xl"],
43
43
},
44
-
height: spacing["6"],
45
-
width: spacing["6"],
44
+
height: sizeSpace["4xl"],
45
+
width: sizeSpace["4xl"],
46
46
},
47
47
wrapperMd: {
48
48
borderRadius: {
49
49
default: radius.md,
50
50
[mediaQueries.supportsSquircle]: radius["3xl"],
51
51
},
52
-
height: spacing["8"],
53
-
width: spacing["8"],
52
+
height: sizeSpace["6xl"],
53
+
width: sizeSpace["6xl"],
54
54
},
55
55
wrapperLg: {
56
56
borderRadius: {
57
57
default: radius.lg,
58
58
[mediaQueries.supportsSquircle]: radius["3xl"],
59
59
},
60
-
height: spacing["10"],
61
-
width: spacing["10"],
60
+
height: sizeSpace["lg"],
61
+
width: sizeSpace["lg"],
62
62
},
63
63
wrapperXl: {
64
64
borderRadius: {
65
65
default: radius.xl,
66
66
[mediaQueries.supportsSquircle]: radius["3xl"],
67
67
},
68
-
height: spacing["14"],
69
-
width: spacing["14"],
68
+
height: sizeSpace["11xl"],
69
+
width: sizeSpace["11xl"],
70
70
},
71
71
image: {
72
72
objectFit: "cover",
+17
-17
apps/docs/src/components/badge/index.tsx
+17
-17
apps/docs/src/components/badge/index.tsx
···
12
12
ui,
13
13
warning,
14
14
} from "../theme/semantic-color.stylex";
15
-
import { spacing } from "../theme/spacing.stylex";
15
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
16
16
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
17
17
18
18
const styles = stylex.create({
···
30
30
width: "fit-content",
31
31
},
32
32
sm: {
33
-
gap: spacing["1"],
33
+
gap: gap["xs"],
34
34
fontSize: fontSize["xs"],
35
-
height: spacing["5"],
36
-
paddingBottom: spacing["0.5"],
37
-
paddingLeft: spacing["2.5"],
38
-
paddingRight: spacing["2.5"],
39
-
paddingTop: spacing["0.5"],
35
+
height: sizeSpace["3xl"],
36
+
paddingBottom: verticalSpace["xxs"],
37
+
paddingLeft: horizontalSpace["lg"],
38
+
paddingRight: horizontalSpace["lg"],
39
+
paddingTop: verticalSpace["xxs"],
40
40
41
41
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
42
42
":is(*) svg": {
43
43
flexShrink: 0,
44
44
pointerEvents: "none",
45
-
height: spacing["3"],
46
-
width: spacing["3"],
45
+
height: sizeSpace["md"],
46
+
width: sizeSpace["md"],
47
47
},
48
48
},
49
49
md: {
50
-
gap: spacing["1.5"],
50
+
gap: gap["sm"],
51
51
fontSize: fontSize["sm"],
52
-
height: spacing["6"],
53
-
paddingBottom: spacing["0.5"],
54
-
paddingLeft: spacing["3.5"],
55
-
paddingRight: spacing["3.5"],
56
-
paddingTop: spacing["0.5"],
52
+
height: sizeSpace["4xl"],
53
+
paddingBottom: verticalSpace["xxs"],
54
+
paddingLeft: horizontalSpace["2xl"],
55
+
paddingRight: horizontalSpace["2xl"],
56
+
paddingTop: verticalSpace["xxs"],
57
57
58
58
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
59
59
":is(*) svg": {
60
60
flexShrink: 0,
61
61
pointerEvents: "none",
62
-
height: spacing["3.5"],
63
-
width: spacing["3.5"],
62
+
height: sizeSpace["2xl"],
63
+
width: sizeSpace["2xl"],
64
64
},
65
65
},
66
66
});
+4
-4
apps/docs/src/components/calendar/index.tsx
+4
-4
apps/docs/src/components/calendar/index.tsx
···
25
25
import { IconButton } from "../icon-button";
26
26
import { ErrorMessage } from "../label";
27
27
import { Select, SelectItem } from "../select";
28
-
import { spacing } from "../theme/spacing.stylex";
28
+
import { gap } from "../theme/semantic-spacing.stylex";
29
29
import { useCalendarStyles } from "../theme/useCalendarStyles";
30
30
31
31
export interface CalendarProps<T extends DateValue>
···
37
37
38
38
const styles = stylex.create({
39
39
header: {
40
-
gap: spacing["2"],
40
+
gap: gap["md"],
41
41
alignItems: "center",
42
42
display: "flex",
43
43
},
44
44
headerContent: {
45
-
gap: spacing["0.5"],
45
+
gap: gap["xxs"],
46
46
alignItems: "center",
47
47
display: "flex",
48
48
flexGrow: 1,
···
202
202
<ChevronRight />
203
203
</IconButton>
204
204
</header>
205
-
<Flex align="start" gap="4">
205
+
<Flex align="start" gap="2xl">
206
206
{monthsVisible.map((month) => (
207
207
<CalendarGrid
208
208
key={month}
+14
-14
apps/docs/src/components/card/index.tsx
+14
-14
apps/docs/src/components/card/index.tsx
···
8
8
import { uiColor } from "../theme/color.stylex";
9
9
import { radius } from "../theme/radius.stylex";
10
10
import { ui } from "../theme/semantic-color.stylex";
11
+
import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
11
12
import { shadow } from "../theme/shadow.stylex";
12
-
import { spacing } from "../theme/spacing.stylex";
13
13
import {
14
14
fontFamily,
15
15
fontSize,
···
32
32
fontFamily: fontFamily["sans"],
33
33
34
34
"--card-gap": {
35
-
":is([data-card-size=lg])": spacing["4"],
36
-
":is([data-card-size=md])": spacing["4"],
37
-
":is([data-card-size=sm])": spacing["1"],
35
+
":is([data-card-size=lg])": sizeSpace["2xl"],
36
+
":is([data-card-size=md])": sizeSpace["2xl"],
37
+
":is([data-card-size=sm])": sizeSpace["xxs"],
38
38
},
39
39
"--card-x-padding": {
40
-
":is([data-card-size=lg])": spacing["8"],
41
-
":is([data-card-size=md])": spacing["6"],
42
-
":is([data-card-size=sm])": spacing["3"],
40
+
":is([data-card-size=lg])": sizeSpace["6xl"],
41
+
":is([data-card-size=md])": sizeSpace["4xl"],
42
+
":is([data-card-size=sm])": sizeSpace["md"],
43
43
},
44
44
"--card-y-padding": {
45
-
":is([data-card-size=lg])": spacing["8"],
46
-
":is([data-card-size=md])": spacing["6"],
47
-
":is([data-card-size=sm])": spacing["3"],
45
+
":is([data-card-size=lg])": sizeSpace["6xl"],
46
+
":is([data-card-size=md])": sizeSpace["4xl"],
47
+
":is([data-card-size=sm])": sizeSpace["md"],
48
48
},
49
49
},
50
50
cardSection: {
···
73
73
borderColor: uiColor.component2,
74
74
borderBottomStyle: "solid",
75
75
borderBottomWidth: 1,
76
-
paddingBottom: spacing["6"],
76
+
paddingBottom: verticalSpace["5xl"],
77
77
},
78
78
cardHeaderAction: {
79
79
gridArea: "action",
80
-
gap: spacing["1"],
80
+
gap: gap["xs"],
81
81
display: "flex",
82
82
justifyContent: "flex-end",
83
83
},
···
87
87
// eslint-disable-next-line @stylexjs/valid-styles
88
88
textBoxTrim: "trim-both",
89
89
gridArea: "title",
90
-
gap: spacing["3"],
90
+
gap: gap["xl"],
91
91
alignItems: "center",
92
92
display: "flex",
93
93
fontFamily: fontFamily["title"],
···
119
119
},
120
120
},
121
121
cardFooter: {
122
-
gap: spacing["2"],
122
+
gap: gap["md"],
123
123
display: "flex",
124
124
justifyContent: "flex-end",
125
125
},
+7
-7
apps/docs/src/components/checkbox/index.tsx
+7
-7
apps/docs/src/components/checkbox/index.tsx
···
19
19
import { Description, FieldErrorMessage, Label } from "../label";
20
20
import { radius } from "../theme/radius.stylex";
21
21
import { primary, ui } from "../theme/semantic-color.stylex";
22
-
import { spacing } from "../theme/spacing.stylex";
22
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
23
23
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
24
24
25
25
const styles = stylex.create({
26
26
wrapper: {
27
-
gap: spacing["2.5"],
27
+
gap: gap["lg"],
28
28
alignItems: {
29
29
default: "center",
30
30
":has(p)": "flex-start",
···
46
46
borderWidth: 2,
47
47
48
48
cornerShape: "squircle",
49
-
height: spacing["4"],
50
-
width: spacing["4"],
49
+
height: sizeSpace["2xl"],
50
+
width: sizeSpace["2xl"],
51
51
},
52
52
checked: {
53
53
color: "white",
54
54
},
55
55
group: {
56
-
gap: spacing["3"],
56
+
gap: gap["xl"],
57
57
display: "flex",
58
58
flexDirection: "column",
59
59
},
···
84
84
<SizeContext value={size}>
85
85
<AriaCheckboxGroup {...props} {...stylex.props(styles.group, style)}>
86
86
<Label>{label}</Label>
87
-
<Flex direction="column" gap="2">
87
+
<Flex direction="column" gap="md">
88
88
{children}
89
89
</Flex>
90
90
<Description>{description}</Description>
···
123
123
) : null}
124
124
</div>
125
125
{children != null && (
126
-
<Flex direction="column" gap="1">
126
+
<Flex direction="column" gap="xs">
127
127
{children}
128
128
</Flex>
129
129
)}
+11
-12
apps/docs/src/components/color-area/index.tsx
+11
-12
apps/docs/src/components/color-area/index.tsx
···
11
11
12
12
import type { StyleXComponentProps } from "../theme/types";
13
13
14
-
import { mediaQueries } from "../theme/media-queries.stylex";
15
14
import { radius } from "../theme/radius.stylex";
16
-
import { spacing } from "../theme/spacing.stylex";
15
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
17
16
18
17
const styles = stylex.create({
19
18
colorArea: {
···
37
36
":is([data-disabled])": "grayscale(1)",
38
37
},
39
38
height: {
40
-
default: spacing["4"],
41
-
":is([data-focus-visible])": spacing["6"],
42
-
":is([data-size=lg] *)": spacing["6"],
43
-
":is([data-size=md] *)": spacing["4"],
44
-
":is([data-size=sm] *)": spacing["3"],
39
+
default: sizeSpace["2xl"],
40
+
":is([data-focus-visible])": sizeSpace["4xl"],
41
+
":is([data-size=lg] *)": sizeSpace["4xl"],
42
+
":is([data-size=md] *)": sizeSpace["2xl"],
43
+
":is([data-size=sm] *)": sizeSpace["md"],
45
44
},
46
45
width: {
47
-
default: spacing["4"],
48
-
":is([data-focus-visible])": spacing["6"],
49
-
":is([data-size=lg] *)": spacing["6"],
50
-
":is([data-size=md] *)": spacing["4"],
51
-
":is([data-size=sm] *)": spacing["3"],
46
+
default: sizeSpace["2xl"],
47
+
":is([data-focus-visible])": sizeSpace["4xl"],
48
+
":is([data-size=lg] *)": sizeSpace["4xl"],
49
+
":is([data-size=md] *)": sizeSpace["2xl"],
50
+
":is([data-size=sm] *)": sizeSpace["md"],
52
51
},
53
52
},
54
53
aspectRatio: (aspectRatio: number) => ({
+1
-1
apps/docs/src/components/color-field/index.tsx
+1
-1
apps/docs/src/components/color-field/index.tsx
+15
-15
apps/docs/src/components/color-picker/index.tsx
+15
-15
apps/docs/src/components/color-picker/index.tsx
···
33
33
import { IconButton } from "../icon-button";
34
34
import { Select, SelectItem } from "../select";
35
35
import { Separator } from "../separator";
36
-
import { spacing } from "../theme/spacing.stylex";
36
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
37
37
import { fontSize } from "../theme/typography.stylex";
38
38
import { usePopoverStyles } from "../theme/usePopoverStyles";
39
39
···
45
45
padding: 0,
46
46
borderWidth: 0,
47
47
gap: {
48
-
default: spacing["2"],
49
-
":is([data-size=sm])": spacing["1"],
48
+
default: gap["md"],
49
+
":is([data-size=sm])": sizeSpace["xxs"],
50
50
},
51
51
alignItems: "center",
52
52
backgroundColor: "transparent",
···
57
57
display: "block",
58
58
},
59
59
defaultPicker: {
60
-
paddingBottom: spacing["3"],
61
-
paddingLeft: spacing["2"],
62
-
paddingRight: spacing["2"],
63
-
paddingTop: spacing["2"],
60
+
paddingBottom: verticalSpace["xl"],
61
+
paddingLeft: horizontalSpace["md"],
62
+
paddingRight: horizontalSpace["md"],
63
+
paddingTop: verticalSpace["md"],
64
64
},
65
65
popover: {
66
66
paddingBottom: 0,
···
68
68
width: 328,
69
69
},
70
70
separator: {
71
-
marginLeft: `calc(${spacing["2"]} * -1)`,
72
-
marginRight: `calc(${spacing["2"]} * -1)`,
73
-
width: `calc(100% + ${spacing["2"]} * 2)`,
71
+
marginLeft: `calc(${sizeSpace["sm"]} * -1)`,
72
+
marginRight: `calc(${sizeSpace["sm"]} * -1)`,
73
+
width: `calc(100% + ${sizeSpace["sm"]} * 2)`,
74
74
},
75
75
grow: {
76
76
flexBasis: "0%",
···
79
79
minWidth: 0,
80
80
},
81
81
controls: {
82
-
paddingLeft: spacing["1"],
83
-
paddingRight: spacing["1"],
82
+
paddingLeft: horizontalSpace["xs"],
83
+
paddingRight: horizontalSpace["xs"],
84
84
},
85
85
});
86
86
···
161
161
return (
162
162
<Flex
163
163
direction="column"
164
-
gap="3"
164
+
gap="xl"
165
165
{...props}
166
166
style={[styles.defaultPicker, style]}
167
167
>
···
183
183
184
184
<Separator style={styles.separator} />
185
185
186
-
<Flex gap="2" align="center">
186
+
<Flex gap="md" align="center">
187
187
<IconButton label="Pick color" variant="outline">
188
188
<Pipette />
189
189
</IconButton>
···
216
216
<Separator style={styles.separator} />
217
217
218
218
<SizeContext value="sm">
219
-
<Flex direction="column" gap="3" style={styles.controls}>
219
+
<Flex direction="column" gap="xl" style={styles.controls}>
220
220
{colorSpace === "hsb" ? (
221
221
<>
222
222
<ColorSlider label="Hue" channel="hue" colorSpace={colorSpace} />
+5
-6
apps/docs/src/components/color-slider/index.tsx
+5
-6
apps/docs/src/components/color-slider/index.tsx
···
14
14
import { SizeContext } from "../context";
15
15
import { Label } from "../label";
16
16
import { uiColor } from "../theme/color.stylex";
17
-
import { mediaQueries } from "../theme/media-queries.stylex";
18
17
import { radius } from "../theme/radius.stylex";
19
-
import { spacing } from "../theme/spacing.stylex";
18
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
20
19
import { fontSize, lineHeight } from "../theme/typography.stylex";
21
20
22
21
const styles = stylex.create({
23
22
colorSlider: {
24
-
gap: spacing["2"],
23
+
gap: gap["md"],
25
24
gridTemplateAreas: {
26
25
default: "'track'",
27
26
":has(label,[data-slider-output])": "'label value-label' 'track track'",
···
54
53
borderRadius: radius.full,
55
54
cornerShape: "squircle",
56
55
height: {
57
-
":is([data-size=lg] *)": spacing["6"],
58
-
":is([data-size=md] *)": spacing["4"],
59
-
":is([data-size=sm] *)": spacing["3"],
56
+
":is([data-size=lg] *)": sizeSpace["4xl"],
57
+
":is([data-size=md] *)": sizeSpace["2xl"],
58
+
":is([data-size=sm] *)": sizeSpace["md"],
60
59
},
61
60
width: "100%",
62
61
},
+3
-3
apps/docs/src/components/color-swatch-picker/index.tsx
+3
-3
apps/docs/src/components/color-swatch-picker/index.tsx
···
16
16
import { SizeContext } from "../context";
17
17
import { uiColor } from "../theme/color.stylex";
18
18
import { radius } from "../theme/radius.stylex";
19
-
import { spacing } from "../theme/spacing.stylex";
19
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
20
20
21
21
const styles = stylex.create({
22
22
picker: {
23
23
gap: {
24
-
default: spacing["2"],
25
-
":is([data-size=sm])": spacing["1"],
24
+
default: gap["md"],
25
+
":is([data-size=sm])": sizeSpace["xxs"],
26
26
},
27
27
display: "flex",
28
28
flexDirection: {
+7
-7
apps/docs/src/components/color-swatch/index.tsx
+7
-7
apps/docs/src/components/color-swatch/index.tsx
···
10
10
import { uiColor } from "../theme/color.stylex";
11
11
import { mediaQueries } from "../theme/media-queries.stylex";
12
12
import { radius } from "../theme/radius.stylex";
13
-
import { spacing } from "../theme/spacing.stylex";
13
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
14
14
15
15
const styles = stylex.create({
16
16
swatch: {
···
23
23
},
24
24
swatchSm: {
25
25
borderRadius: radius.xs,
26
-
height: spacing["4"],
27
-
width: spacing["4"],
26
+
height: sizeSpace["2xl"],
27
+
width: sizeSpace["2xl"],
28
28
},
29
29
swatchMd: {
30
30
borderRadius: radius.sm,
31
-
height: spacing["6"],
32
-
width: spacing["6"],
31
+
height: sizeSpace["4xl"],
32
+
width: sizeSpace["4xl"],
33
33
},
34
34
swatchLg: {
35
35
borderRadius: radius.md,
36
-
height: spacing["8"],
37
-
width: spacing["8"],
36
+
height: sizeSpace["6xl"],
37
+
width: sizeSpace["6xl"],
38
38
},
39
39
circle: {
40
40
borderRadius: {
+4
-4
apps/docs/src/components/color-wheel/index.tsx
+4
-4
apps/docs/src/components/color-wheel/index.tsx
···
14
14
import { Flex } from "../flex";
15
15
import { uiColor } from "../theme/color.stylex";
16
16
import { radius } from "../theme/radius.stylex";
17
-
import { spacing } from "../theme/spacing.stylex";
17
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
18
18
19
19
const styles = stylex.create({
20
20
wrapper: {
···
24
24
gridArea: "track",
25
25
borderRadius: radius.full,
26
26
height: {
27
-
":is([data-size=lg] *)": spacing["6"],
28
-
":is([data-size=md] *)": spacing["4"],
29
-
":is([data-size=sm] *)": spacing["3"],
27
+
":is([data-size=lg] *)": sizeSpace["4xl"],
28
+
":is([data-size=md] *)": sizeSpace["2xl"],
29
+
":is([data-size=sm] *)": sizeSpace["md"],
30
30
},
31
31
width: "100%",
32
32
+3
-3
apps/docs/src/components/combobox/index.tsx
+3
-3
apps/docs/src/components/combobox/index.tsx
···
30
30
import { Description, FieldErrorMessage, Label } from "../label";
31
31
import { ListBox } from "../listbox";
32
32
import { SuffixIcon } from "../suffix-icon";
33
-
import { spacing } from "../theme/spacing.stylex";
33
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
34
34
import { useInputStyles } from "../theme/useInputStyles";
35
35
import { estimatedRowHeights } from "../theme/useListBoxItemStyles";
36
36
import { usePopoverStyles } from "../theme/usePopoverStyles";
···
41
41
minWidth: "max(var(--trigger-width), 180px)",
42
42
},
43
43
emptyState: {
44
-
padding: spacing["4"],
44
+
padding: sizeSpace["2xl"],
45
45
display: "flex",
46
46
justifyContent: "center",
47
47
},
···
168
168
<>
169
169
<Label style={inputStyles.label}>{label}</Label>
170
170
{labelVariant === "horizontal" ? (
171
-
<Flex direction="column" gap="2">
171
+
<Flex direction="column" gap="md">
172
172
{content}
173
173
</Flex>
174
174
) : (
+19
-19
apps/docs/src/components/content/index.tsx
+19
-19
apps/docs/src/components/content/index.tsx
···
2
2
3
3
import type { StyleXComponentProps } from "../theme/types";
4
4
5
-
import { spacing } from "../theme/spacing.stylex";
5
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
6
6
import { lineHeight } from "../theme/typography.stylex";
7
7
8
8
const styles = stylex.create({
···
10
10
/* eslint-disable @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles */
11
11
12
12
":is(*) > :is(:has(h1),h1)": {
13
-
marginBottom: spacing["8"],
14
-
marginTop: spacing["8"],
13
+
marginBottom: verticalSpace["7xl"],
14
+
marginTop: verticalSpace["7xl"],
15
15
},
16
16
":is(*) > :is(:has(h2),h2)": {
17
-
marginBottom: spacing["4"],
18
-
marginTop: spacing["8"],
17
+
marginBottom: verticalSpace["3xl"],
18
+
marginTop: verticalSpace["7xl"],
19
19
},
20
20
":is(*) > :is(:has(h3),h3)": {
21
-
marginBottom: spacing["5"],
22
-
marginTop: spacing["8"],
21
+
marginBottom: verticalSpace["4xl"],
22
+
marginTop: verticalSpace["7xl"],
23
23
},
24
24
":is(*) > :is(:has(h4),h4)": {
25
-
marginBottom: spacing["8"],
26
-
marginTop: spacing["8"],
25
+
marginBottom: verticalSpace["7xl"],
26
+
marginTop: verticalSpace["7xl"],
27
27
},
28
28
":is(*) > :is(:has(h5),h5)": {
29
-
marginBottom: spacing["8"],
30
-
marginTop: spacing["8"],
29
+
marginBottom: verticalSpace["7xl"],
30
+
marginTop: verticalSpace["7xl"],
31
31
},
32
32
":is(*) > blockquote": {
33
33
marginBottom: 0,
34
-
marginLeft: spacing["2"],
34
+
marginLeft: horizontalSpace["md"],
35
35
marginRight: 0,
36
36
marginTop: 0,
37
-
paddingLeft: spacing["4"],
37
+
paddingLeft: horizontalSpace["3xl"],
38
38
},
39
39
":is(*) > p": {
40
40
lineHeight: {
···
43
43
":is(li *)": lineHeight.base,
44
44
},
45
45
marginBottom: {
46
-
default: spacing["5"],
47
-
":is(blockquote *)": spacing["0"],
48
-
":is(li *)": spacing["0"],
46
+
default: sizeSpace["3xl"],
47
+
":is(blockquote *)": sizeSpace["none"],
48
+
":is(li *)": sizeSpace["none"],
49
49
},
50
50
marginTop: {
51
-
default: spacing["5"],
52
-
":is(blockquote *)": spacing["0"],
53
-
":is(li *)": spacing["0"],
51
+
default: sizeSpace["3xl"],
52
+
":is(blockquote *)": sizeSpace["none"],
53
+
":is(li *)": sizeSpace["none"],
54
54
},
55
55
},
56
56
+1
-1
apps/docs/src/components/date-field/index.tsx
+1
-1
apps/docs/src/components/date-field/index.tsx
+3
-3
apps/docs/src/components/date-picker/index.tsx
+3
-3
apps/docs/src/components/date-picker/index.tsx
···
29
29
import { Flex } from "../flex";
30
30
import { IconButton } from "../icon-button";
31
31
import { Description, FieldErrorMessage, Label } from "../label";
32
-
import { spacing } from "../theme/spacing.stylex";
32
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
33
33
import { useInputStyles } from "../theme/useInputStyles";
34
34
import { usePopoverStyles } from "../theme/usePopoverStyles";
35
35
···
48
48
49
49
const styles = stylex.create({
50
50
popoverContent: {
51
-
padding: spacing["2"],
51
+
padding: sizeSpace["sm"],
52
52
},
53
53
});
54
54
···
113
113
<>
114
114
<Label style={inputStyles.label}>{label}</Label>
115
115
{labelVariant === "horizontal" ? (
116
-
<Flex direction="column" gap="2">
116
+
<Flex direction="column" gap="md">
117
117
{content}
118
118
</Flex>
119
119
) : (
+7
-7
apps/docs/src/components/date-range-picker/index.tsx
+7
-7
apps/docs/src/components/date-range-picker/index.tsx
···
32
32
import { RangeCalendar } from "../range-calendar";
33
33
import { SuffixIcon } from "../suffix-icon";
34
34
import { uiColor } from "../theme/color.stylex";
35
-
import { spacing } from "../theme/spacing.stylex";
35
+
import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex";
36
36
import { fontSize } from "../theme/typography.stylex";
37
37
import { useInputStyles } from "../theme/useInputStyles";
38
38
import { usePopoverStyles } from "../theme/usePopoverStyles";
···
52
52
53
53
const styles = stylex.create({
54
54
group: {
55
-
gap: spacing["1"],
55
+
gap: gap["xs"],
56
56
alignItems: "center",
57
57
display: "flex",
58
58
···
63
63
},
64
64
},
65
65
popoverContent: {
66
-
padding: spacing["2"],
66
+
padding: sizeSpace["sm"],
67
67
},
68
68
separator: {
69
69
paddingRight: {
70
-
":is([data-size=lg] *)": spacing["1"],
71
-
":is([data-size=md] *)": spacing["2"],
72
-
":is([data-size=sm] *)": spacing["1"],
70
+
":is([data-size=lg] *)": horizontalSpace["xs"],
71
+
":is([data-size=md] *)": sizeSpace["sm"],
72
+
":is([data-size=sm] *)": sizeSpace["xxs"],
73
73
},
74
74
},
75
75
lastInput: {
···
163
163
<>
164
164
<Label style={inputStyles.label}>{label}</Label>
165
165
{labelVariant === "horizontal" ? (
166
-
<Flex direction="column" gap="2">
166
+
<Flex direction="column" gap="md">
167
167
{content}
168
168
</Flex>
169
169
) : (
+23
-21
apps/docs/src/components/dialog/index.tsx
+23
-21
apps/docs/src/components/dialog/index.tsx
···
17
17
import { useHaptics } from "../haptics";
18
18
import { IconButton } from "../icon-button";
19
19
import { uiColor } from "../theme/color.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
20
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
21
21
import { fontSize, typeramp } from "../theme/typography.stylex";
22
22
import { useDialogStyles } from "../theme/useDialogStyles";
23
23
···
26
26
overflow: "auto",
27
27
},
28
28
header: {
29
-
gap: spacing["2"],
29
+
gap: gap["md"],
30
30
alignItems: "center",
31
31
backgroundColor: uiColor.bg,
32
32
display: "flex",
···
34
34
justifyContent: "space-between",
35
35
position: "sticky",
36
36
zIndex: 1,
37
-
height: spacing["8"],
38
-
paddingBottom: spacing["2"],
39
-
paddingLeft: spacing["4"],
40
-
paddingRight: spacing["4"],
41
-
paddingTop: spacing["2"],
37
+
height: sizeSpace["6xl"],
38
+
paddingBottom: verticalSpace["md"],
39
+
paddingLeft: horizontalSpace["3xl"],
40
+
paddingRight: horizontalSpace["3xl"],
41
+
paddingTop: verticalSpace["md"],
42
42
top: 0,
43
43
44
44
borderBottomColor: uiColor.border1,
···
47
47
},
48
48
description: {
49
49
color: uiColor.text1,
50
-
marginBottom: spacing["4"],
51
-
marginTop: spacing["4"],
52
-
paddingLeft: spacing["4"],
53
-
paddingRight: spacing["4"],
50
+
marginBottom: verticalSpace["3xl"],
51
+
marginTop: verticalSpace["3xl"],
52
+
paddingLeft: horizontalSpace["3xl"],
53
+
paddingRight: horizontalSpace["3xl"],
54
54
},
55
55
body: {
56
-
marginBottom: spacing["4"],
57
-
marginTop: spacing["4"],
58
-
paddingLeft: spacing["4"],
59
-
paddingRight: spacing["4"],
56
+
marginBottom: verticalSpace["3xl"],
57
+
marginTop: verticalSpace["3xl"],
58
+
paddingLeft: horizontalSpace["3xl"],
59
+
paddingRight: horizontalSpace["3xl"],
60
60
},
61
+
/* eslint-disable @stylexjs/sort-keys -- footer layout + padding order */
61
62
footer: {
62
-
gap: spacing["2"],
63
+
gap: gap["md"],
63
64
display: "flex",
64
65
justifyContent: "flex-end",
65
-
paddingBottom: spacing["4"],
66
-
paddingLeft: spacing["4"],
67
-
paddingRight: spacing["4"],
68
-
paddingTop: spacing["4"],
66
+
paddingBottom: verticalSpace["3xl"],
67
+
paddingLeft: horizontalSpace["3xl"],
68
+
paddingRight: horizontalSpace["3xl"],
69
69
position: "sticky",
70
-
bottom: 0,
70
+
paddingTop: verticalSpace["3xl"],
71
71
zIndex: 1,
72
+
bottom: 0,
72
73
backgroundColor: uiColor.bg,
73
74
74
75
borderTopColor: uiColor.border1,
75
76
borderTopStyle: "solid",
76
77
borderTopWidth: 1,
77
78
},
79
+
/* eslint-enable @stylexjs/sort-keys */
78
80
});
79
81
80
82
export interface DialogProps extends DialogTriggerProps {
+8
-8
apps/docs/src/components/disclosure/index.tsx
+8
-8
apps/docs/src/components/disclosure/index.tsx
···
20
20
import { uiColor } from "../theme/color.stylex";
21
21
import { mediaQueries } from "../theme/media-queries.stylex";
22
22
import { radius } from "../theme/radius.stylex";
23
-
import { spacing } from "../theme/spacing.stylex";
23
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
24
24
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
25
25
26
26
const styles = stylex.create({
···
30
30
},
31
31
title: {
32
32
padding: {
33
-
":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
34
-
":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
35
-
":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
33
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["2xl"]}`,
34
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["md"]}`,
35
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["sm"]}`,
36
36
},
37
37
borderRadius: radius.lg,
38
38
borderWidth: 0,
39
39
40
40
cornerShape: "squircle",
41
-
gap: spacing["2"],
41
+
gap: gap["md"],
42
42
alignItems: "center",
43
43
backgroundColor: {
44
44
default: "transparent",
···
97
97
},
98
98
panelContent: {
99
99
padding: {
100
-
":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
101
-
":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
102
-
":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
100
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["2xl"]}`,
101
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["md"]}`,
102
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["sm"]}`,
103
103
},
104
104
},
105
105
});
+23
-23
apps/docs/src/components/drawer/index.tsx
+23
-23
apps/docs/src/components/drawer/index.tsx
···
22
22
animations,
23
23
} from "../theme/animations.stylex";
24
24
import { uiColor } from "../theme/color.stylex";
25
-
import { spacing } from "../theme/spacing.stylex";
25
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
26
26
import { typeramp } from "../theme/typography.stylex";
27
27
import { useDialogStyles } from "../theme/useDialogStyles";
28
28
import { NonModalDrawer } from "./NonModalDrawer";
···
83
83
},
84
84
maxHeight: {
85
85
":is([data-direction=right], [data-direction=left])": "100vh",
86
-
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`,
86
+
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["6xl"]})`,
87
87
},
88
88
maxWidth: {
89
-
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${spacing["8"]})`,
89
+
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["6xl"]})`,
90
90
":is([data-direction=top], [data-direction=bottom])": "100vw",
91
91
},
92
92
width: {
···
117
117
},
118
118
dialog: {
119
119
overflow: "auto",
120
-
paddingBottom: spacing["2"],
121
-
paddingTop: spacing["2"],
120
+
paddingBottom: verticalSpace["md"],
121
+
paddingTop: verticalSpace["md"],
122
122
},
123
123
header: {
124
-
gap: spacing["2"],
124
+
gap: gap["md"],
125
125
alignItems: "center",
126
126
display: "flex",
127
127
justifyContent: "space-between",
128
-
height: spacing["8"],
129
-
paddingBottom: spacing["2"],
130
-
paddingLeft: spacing["4"],
131
-
paddingRight: spacing["4"],
128
+
height: sizeSpace["6xl"],
129
+
paddingBottom: verticalSpace["md"],
130
+
paddingLeft: horizontalSpace["3xl"],
131
+
paddingRight: horizontalSpace["3xl"],
132
132
},
133
133
description: {
134
134
color: uiColor.text1,
135
-
paddingBottom: spacing["4"],
136
-
paddingLeft: spacing["4"],
137
-
paddingRight: spacing["4"],
138
-
paddingTop: spacing["4"],
135
+
paddingBottom: verticalSpace["3xl"],
136
+
paddingLeft: horizontalSpace["3xl"],
137
+
paddingRight: horizontalSpace["3xl"],
138
+
paddingTop: verticalSpace["3xl"],
139
139
},
140
140
body: {
141
141
flexGrow: 1,
142
-
paddingBottom: spacing["4"],
143
-
paddingLeft: spacing["4"],
144
-
paddingRight: spacing["4"],
145
-
paddingTop: { default: 0, ":first-child": spacing["4"] },
142
+
paddingBottom: verticalSpace["3xl"],
143
+
paddingLeft: horizontalSpace["3xl"],
144
+
paddingRight: horizontalSpace["3xl"],
145
+
paddingTop: { default: 0, ":first-child": verticalSpace["3xl"] },
146
146
},
147
147
footer: {
148
-
gap: spacing["2"],
148
+
gap: gap["md"],
149
149
display: "flex",
150
150
justifyContent: "flex-end",
151
-
paddingBottom: spacing["2"],
152
-
paddingLeft: spacing["4"],
153
-
paddingRight: spacing["4"],
154
-
paddingTop: spacing["4"],
151
+
paddingBottom: verticalSpace["md"],
152
+
paddingLeft: horizontalSpace["3xl"],
153
+
paddingRight: horizontalSpace["3xl"],
154
+
paddingTop: verticalSpace["3xl"],
155
155
156
156
borderTopColor: uiColor.border1,
157
157
borderTopStyle: "solid",
+9
-9
apps/docs/src/components/editable-text/index.tsx
+9
-9
apps/docs/src/components/editable-text/index.tsx
···
11
11
import type { StyleXComponentProps } from "../theme/types";
12
12
13
13
import { radius } from "../theme/radius.stylex";
14
-
import { spacing } from "../theme/spacing.stylex";
14
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
15
15
16
16
const focusClosestFocusableElement = () => {
17
17
const focusableElements = document.activeElement?.parentElement?.closest(
···
44
44
":focus": "1px",
45
45
},
46
46
47
-
marginBottom: `calc(${spacing["1"]} * -1)`,
48
-
marginLeft: `calc(${spacing["2"]} * -1)`,
49
-
marginRight: `calc(${spacing["2"]} * -1)`,
50
-
marginTop: `calc(${spacing["1"]} * -1)`,
51
-
paddingBottom: spacing["1"],
52
-
paddingLeft: spacing["2"],
53
-
paddingRight: spacing["2"],
54
-
paddingTop: spacing["1"],
47
+
marginBottom: `calc(${sizeSpace["xxs"]} * -1)`,
48
+
marginLeft: `calc(${sizeSpace["sm"]} * -1)`,
49
+
marginRight: `calc(${sizeSpace["sm"]} * -1)`,
50
+
marginTop: `calc(${sizeSpace["xxs"]} * -1)`,
51
+
paddingBottom: verticalSpace["xs"],
52
+
paddingLeft: horizontalSpace["md"],
53
+
paddingRight: horizontalSpace["md"],
54
+
paddingTop: verticalSpace["xs"],
55
55
},
56
56
});
57
57
+10
-10
apps/docs/src/components/empty-state/index.tsx
+10
-10
apps/docs/src/components/empty-state/index.tsx
···
7
7
8
8
import { SizeContext } from "../context";
9
9
import { ui } from "../theme/semantic-color.stylex";
10
-
import { spacing } from "../theme/spacing.stylex";
10
+
import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex";
11
11
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
12
12
13
13
const styles = stylex.create({
14
14
emptyState: {
15
15
"--empty-state-image-size": {
16
-
":is([data-empty-state-size=lg])": spacing["20"],
17
-
":is([data-empty-state-size=md])": spacing["14"],
18
-
":is([data-empty-state-size=sm])": spacing["10"],
16
+
":is([data-empty-state-size=lg])": sizeSpace["13xl"],
17
+
":is([data-empty-state-size=md])": sizeSpace["11xl"],
18
+
":is([data-empty-state-size=sm])": sizeSpace["lg"],
19
19
},
20
20
gridTemplateAreas: {
21
21
// eslint-disable-next-line @stylexjs/valid-styles
···
46
46
},
47
47
alignItems: "center",
48
48
columnGap: {
49
-
":is([data-empty-state-size=sm])": spacing["4"],
49
+
":is([data-empty-state-size=sm])": sizeSpace["2xl"],
50
50
},
51
51
display: "grid",
52
52
fontFamily: fontFamily["sans"],
···
62
62
":is([data-empty-state-size=sm])": "start",
63
63
},
64
64
rowGap: {
65
-
":is([data-empty-state-size=lg])": spacing["6"],
66
-
":is([data-empty-state-size=md])": spacing["4"],
67
-
":is([data-empty-state-size=sm])": spacing["2"],
65
+
":is([data-empty-state-size=lg])": sizeSpace["4xl"],
66
+
":is([data-empty-state-size=md])": sizeSpace["2xl"],
67
+
":is([data-empty-state-size=sm])": sizeSpace["sm"],
68
68
},
69
69
textAlign: "center",
70
70
},
···
100
100
},
101
101
actions: {
102
102
gridArea: "actions",
103
-
gap: spacing["2"],
103
+
gap: gap["md"],
104
104
alignItems: "center",
105
105
display: "flex",
106
106
flexDirection: "row",
···
108
108
justifyContent: "center",
109
109
110
110
paddingLeft: {
111
-
":is([data-empty-state-size=sm] *)": spacing["4"],
111
+
":is([data-empty-state-size=sm] *)": horizontalSpace["3xl"],
112
112
},
113
113
},
114
114
});
+2
-2
apps/docs/src/components/file-drop-zone/index.tsx
+2
-2
apps/docs/src/components/file-drop-zone/index.tsx
···
24
24
import { mediaQueries } from "../theme/media-queries.stylex";
25
25
import { radius } from "../theme/radius.stylex";
26
26
import { ui } from "../theme/semantic-color.stylex";
27
-
import { spacing } from "../theme/spacing.stylex";
27
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
28
28
29
29
async function getFiles(items: Array<DropItem>): Promise<Array<File>> {
30
30
return Promise.all(
···
34
34
35
35
const styles = stylex.create({
36
36
dropZone: {
37
-
padding: spacing["4"],
37
+
padding: sizeSpace["2xl"],
38
38
borderColor: {
39
39
default: uiColor.border3,
40
40
":is([data-drop-target])": primaryColor.solid1,
+6
-40
apps/docs/src/components/flex/index.tsx
+6
-40
apps/docs/src/components/flex/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import type { Spacing } from "../theme/spacing.stylex";
3
+
import type { Gap } from "../theme/semantic-spacing.stylex";
4
4
import type { StyleXComponentProps } from "../theme/types";
5
5
6
-
import { spacing } from "../theme/spacing.stylex";
6
+
import { gap as gapSpace } from "../theme/semantic-spacing.stylex";
7
7
8
8
const styles = stylex.create({
9
9
base: { display: "flex" },
···
25
25
"align-end": { alignItems: "flex-end" },
26
26
"align-center": { alignItems: "center" },
27
27
"align-baseline": { alignItems: "baseline" },
28
-
"gap-0.5": { gap: spacing["0.5"] },
29
-
"gap-1": { gap: spacing["1"] },
30
-
"gap-1.5": { gap: spacing["1.5"] },
31
-
"gap-2": { gap: spacing["2"] },
32
-
"gap-2.5": { gap: spacing["2.5"] },
33
-
"gap-3": { gap: spacing["3"] },
34
-
"gap-3.5": { gap: spacing["3.5"] },
35
-
"gap-4": { gap: spacing["4"] },
36
-
"gap-5": { gap: spacing["5"] },
37
-
"gap-6": { gap: spacing["6"] },
38
-
"gap-7": { gap: spacing["7"] },
39
-
"gap-8": { gap: spacing["8"] },
40
-
"gap-9": { gap: spacing["9"] },
41
-
"gap-10": { gap: spacing["10"] },
42
-
"gap-11": { gap: spacing["11"] },
43
-
"gap-12": { gap: spacing["12"] },
44
-
"gap-14": { gap: spacing["14"] },
45
-
"gap-16": { gap: spacing["16"] },
46
-
"gap-20": { gap: spacing["20"] },
47
-
"gap-24": { gap: spacing["24"] },
48
-
"gap-28": { gap: spacing["28"] },
49
-
"gap-32": { gap: spacing["32"] },
50
-
"gap-36": { gap: spacing["36"] },
51
-
"gap-40": { gap: spacing["40"] },
52
-
"gap-44": { gap: spacing["44"] },
53
-
"gap-48": { gap: spacing["48"] },
54
-
"gap-52": { gap: spacing["52"] },
55
-
"gap-56": { gap: spacing["56"] },
56
-
"gap-60": { gap: spacing["60"] },
57
-
"gap-64": { gap: spacing["64"] },
58
-
"gap-72": { gap: spacing["72"] },
59
-
"gap-80": { gap: spacing["80"] },
60
-
"gap-96": { gap: spacing["96"] },
28
+
gap: (g: Gap) => ({ gap: gapSpace[g] }),
61
29
});
62
30
63
31
export interface FlexProps extends StyleXComponentProps<
···
92
60
*/
93
61
align?: "stretch" | "start" | "end" | "center" | "baseline";
94
62
/**
95
-
* The gap of the flex container.
96
-
* @default "0"
97
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
63
+
* The gap of the flex container (semantic spacing token).
98
64
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
99
65
*/
100
-
gap?: Spacing;
66
+
gap?: Gap;
101
67
/**
102
68
* Whether the flex container is inline.
103
69
* @default false
···
143
109
align === "center" && styles["align-center"],
144
110
align === "baseline" && styles["align-baseline"],
145
111
146
-
typeof gap === "string" && styles[`gap-${gap}` as keyof typeof styles],
112
+
typeof gap === "string" && styles.gap(gap),
147
113
148
114
style,
149
115
)}
+2
-2
apps/docs/src/components/form/index.tsx
+2
-2
apps/docs/src/components/form/index.tsx
···
7
7
8
8
import type { StyleXComponentProps } from "../theme/types";
9
9
10
-
import { spacing } from "../theme/spacing.stylex";
10
+
import { gap } from "../theme/semantic-spacing.stylex";
11
11
12
12
const styles = stylex.create({
13
13
form: {
14
-
gap: spacing["4"],
14
+
gap: gap["2xl"],
15
15
display: "flex",
16
16
flexDirection: "column",
17
17
},
+11
-86
apps/docs/src/components/grid/index.tsx
+11
-86
apps/docs/src/components/grid/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import type { Spacing } from "../theme/spacing.stylex";
3
+
import type { Gap } from "../theme/semantic-spacing.stylex";
4
4
import type { StyleXComponentProps } from "../theme/types";
5
5
6
-
import { spacing } from "../theme/spacing.stylex";
6
+
import { gap as gapVars } from "../theme/semantic-spacing.stylex";
7
7
8
8
const styles = stylex.create({
9
9
base: { display: "grid" },
···
35
35
"justify-items-end": { justifyItems: "end" },
36
36
"justify-items-center": { justifyItems: "center" },
37
37
38
-
"row-gap-0.5": { gap: spacing["0.5"] },
39
-
"row-gap-1": { gap: spacing["1"] },
40
-
"row-gap-1.5": { gap: spacing["1.5"] },
41
-
"row-gap-2": { gap: spacing["2"] },
42
-
"row-gap-2.5": { gap: spacing["2.5"] },
43
-
"row-gap-3": { gap: spacing["3"] },
44
-
"row-gap-3.5": { gap: spacing["3.5"] },
45
-
"row-gap-4": { gap: spacing["4"] },
46
-
"row-gap-5": { gap: spacing["5"] },
47
-
"row-gap-6": { gap: spacing["6"] },
48
-
"row-gap-7": { gap: spacing["7"] },
49
-
"row-gap-8": { gap: spacing["8"] },
50
-
"row-gap-9": { gap: spacing["9"] },
51
-
"row-gap-10": { gap: spacing["10"] },
52
-
"row-gap-11": { gap: spacing["11"] },
53
-
"row-gap-12": { gap: spacing["12"] },
54
-
"row-gap-14": { gap: spacing["14"] },
55
-
"row-gap-16": { gap: spacing["16"] },
56
-
"row-gap-20": { gap: spacing["20"] },
57
-
"row-gap-24": { gap: spacing["24"] },
58
-
"row-gap-28": { gap: spacing["28"] },
59
-
"row-gap-32": { gap: spacing["32"] },
60
-
"row-gap-36": { gap: spacing["36"] },
61
-
"row-gap-40": { gap: spacing["40"] },
62
-
"row-gap-44": { gap: spacing["44"] },
63
-
"row-gap-48": { gap: spacing["48"] },
64
-
"row-gap-52": { gap: spacing["52"] },
65
-
"row-gap-56": { gap: spacing["56"] },
66
-
"row-gap-60": { gap: spacing["60"] },
67
-
"row-gap-64": { gap: spacing["64"] },
68
-
"row-gap-72": { gap: spacing["72"] },
69
-
"row-gap-80": { gap: spacing["80"] },
70
-
"row-gap-96": { gap: spacing["96"] },
71
-
72
-
"column-gap-0.5": { gap: spacing["0.5"] },
73
-
"column-gap-1": { gap: spacing["1"] },
74
-
"column-gap-1.5": { gap: spacing["1.5"] },
75
-
"column-gap-2": { gap: spacing["2"] },
76
-
"column-gap-2.5": { gap: spacing["2.5"] },
77
-
"column-gap-3": { gap: spacing["3"] },
78
-
"column-gap-3.5": { gap: spacing["3.5"] },
79
-
"column-gap-4": { gap: spacing["4"] },
80
-
"column-gap-5": { gap: spacing["5"] },
81
-
"column-gap-6": { gap: spacing["6"] },
82
-
"column-gap-7": { gap: spacing["7"] },
83
-
"column-gap-8": { gap: spacing["8"] },
84
-
"column-gap-9": { gap: spacing["9"] },
85
-
"column-gap-10": { gap: spacing["10"] },
86
-
"column-gap-11": { gap: spacing["11"] },
87
-
"column-gap-12": { gap: spacing["12"] },
88
-
"column-gap-14": { gap: spacing["14"] },
89
-
"column-gap-16": { gap: spacing["16"] },
90
-
"column-gap-20": { gap: spacing["20"] },
91
-
"column-gap-24": { gap: spacing["24"] },
92
-
"column-gap-28": { gap: spacing["28"] },
93
-
"column-gap-32": { gap: spacing["32"] },
94
-
"column-gap-36": { gap: spacing["36"] },
95
-
"column-gap-40": { gap: spacing["40"] },
96
-
"column-gap-44": { gap: spacing["44"] },
97
-
"column-gap-48": { gap: spacing["48"] },
98
-
"column-gap-52": { gap: spacing["52"] },
99
-
"column-gap-56": { gap: spacing["56"] },
100
-
"column-gap-60": { gap: spacing["60"] },
101
-
"column-gap-64": { gap: spacing["64"] },
102
-
"column-gap-72": { gap: spacing["72"] },
103
-
"column-gap-80": { gap: spacing["80"] },
104
-
"column-gap-96": { gap: spacing["96"] },
38
+
rowGap: (g: Gap) => ({ rowGap: gapVars[g] }),
39
+
columnGap: (g: Gap) => ({ columnGap: gapVars[g] }),
105
40
106
41
columnStart: (start: number) => ({ gridColumnStart: start }),
107
42
columnEnd: (end: number) => ({ gridColumnEnd: end }),
···
155
90
*/
156
91
alignContent?: "start" | "end" | "center" | "between" | "around" | "evenly";
157
92
/**
158
-
* The gap of the flex container.
159
-
* @default "0"
160
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
161
-
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
93
+
* Column gap (semantic spacing token).
94
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
162
95
*/
163
-
columnGap?: Spacing;
96
+
columnGap?: Gap;
164
97
/**
165
-
* The row gap of the grid container.
166
-
* @default "0"
167
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
98
+
* Row gap (semantic spacing token).
168
99
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
169
100
*/
170
-
rowGap?: Spacing;
101
+
rowGap?: Gap;
171
102
}
172
103
173
104
export const Grid = ({
···
214
145
justifyItems === "end" && styles["justify-items-end"],
215
146
justifyItems === "center" && styles["justify-items-center"],
216
147
217
-
typeof columnGap === "string" &&
218
-
(styles[
219
-
`column-gap-${columnGap}` as keyof typeof styles
220
-
] as stylex.StyleXStyles),
221
-
typeof rowGap === "string" &&
222
-
(styles[
223
-
`row-gap-${rowGap}` as keyof typeof styles
224
-
] as stylex.StyleXStyles),
148
+
typeof columnGap === "string" && styles.columnGap(columnGap),
149
+
typeof rowGap === "string" && styles.rowGap(rowGap),
225
150
226
151
style,
227
152
)}
+17
-17
apps/docs/src/components/header-layout/index.tsx
+17
-17
apps/docs/src/components/header-layout/index.tsx
···
6
6
7
7
import { primaryColor, uiColor } from "../theme/color.stylex";
8
8
import { containerBreakpoints } from "../theme/media-queries.stylex";
9
-
import { spacing } from "../theme/spacing.stylex";
9
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
10
10
11
11
const styles = stylex.create({
12
12
root: {
···
32
32
maxWidth: "var(--page-content-max-width)",
33
33
minHeight: 0,
34
34
paddingBottom: {
35
-
default: spacing["10"],
36
-
[containerBreakpoints.sm]: spacing["12"],
35
+
default: verticalSpace["9xl"],
36
+
[containerBreakpoints.sm]: sizeSpace["xl"],
37
37
":has(> [data-sidebar-layout=true])": "0 !important",
38
38
},
39
39
paddingLeft: {
40
-
default: spacing["4"],
41
-
[containerBreakpoints.sm]: spacing["8"],
40
+
default: horizontalSpace["3xl"],
41
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
42
42
":has(> [data-sidebar-layout=true])": "0 !important",
43
43
},
44
44
paddingRight: {
45
-
default: spacing["4"],
46
-
[containerBreakpoints.sm]: spacing["8"],
45
+
default: horizontalSpace["3xl"],
46
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
47
47
":has(> [data-sidebar-layout=true])": "0 !important",
48
48
},
49
49
paddingTop: {
50
-
default: spacing["2"],
51
-
[containerBreakpoints.sm]: spacing["6"],
50
+
default: verticalSpace["md"],
51
+
[containerBreakpoints.sm]: sizeSpace["4xl"],
52
52
":has(> [data-sidebar-layout=true])": "0 !important",
53
53
},
54
54
width: "100%",
···
61
61
boxSizing: "border-box",
62
62
color: primaryColor.textContrast,
63
63
paddingBottom: {
64
-
default: spacing["6"],
65
-
[containerBreakpoints.sm]: spacing["12"],
64
+
default: verticalSpace["5xl"],
65
+
[containerBreakpoints.sm]: sizeSpace["xl"],
66
66
},
67
67
paddingTop: {
68
-
default: spacing["6"],
69
-
[containerBreakpoints.sm]: spacing["12"],
68
+
default: verticalSpace["5xl"],
69
+
[containerBreakpoints.sm]: sizeSpace["xl"],
70
70
},
71
71
width: "100%",
72
72
},
···
76
76
marginRight: "auto",
77
77
maxWidth: "var(--page-content-max-width)",
78
78
paddingLeft: {
79
-
default: spacing["4"],
80
-
[containerBreakpoints.sm]: spacing["8"],
79
+
default: horizontalSpace["3xl"],
80
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
81
81
},
82
82
paddingRight: {
83
-
default: spacing["4"],
84
-
[containerBreakpoints.sm]: spacing["8"],
83
+
default: horizontalSpace["3xl"],
84
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
85
85
},
86
86
width: "100%",
87
87
},
+5
-5
apps/docs/src/components/hover-card/index.tsx
+5
-5
apps/docs/src/components/hover-card/index.tsx
···
18
18
19
19
import type { StyleXComponentProps } from "../theme/types";
20
20
21
+
import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
21
22
import { shadow } from "../theme/shadow.stylex";
22
-
import { spacing } from "../theme/spacing.stylex";
23
23
import { usePopoverStyles } from "../theme/usePopoverStyles";
24
24
25
25
const styles = stylex.create({
···
29
29
content: {
30
30
outline: "none",
31
31
position: "relative",
32
-
paddingBottom: spacing["2"],
33
-
paddingLeft: spacing["2"],
34
-
paddingRight: spacing["2"],
35
-
paddingTop: spacing["2"],
32
+
paddingBottom: verticalSpace["md"],
33
+
paddingLeft: horizontalSpace["md"],
34
+
paddingRight: horizontalSpace["md"],
35
+
paddingTop: verticalSpace["md"],
36
36
},
37
37
});
38
38
+1
-1
apps/docs/src/components/image-cropper/index.tsx
+1
-1
apps/docs/src/components/image-cropper/index.tsx
+5
-5
apps/docs/src/components/kbd/index.tsx
+5
-5
apps/docs/src/components/kbd/index.tsx
···
5
5
6
6
import { uiColor } from "../theme/color.stylex";
7
7
import { radius } from "../theme/radius.stylex";
8
-
import { spacing } from "../theme/spacing.stylex";
8
+
import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
9
9
import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex";
10
10
11
11
const styles = stylex.create({
···
24
24
letterSpacing: tracking["widest"],
25
25
lineHeight: lineHeight["none"],
26
26
position: "relative",
27
-
paddingBottom: spacing["0.5"],
28
-
paddingLeft: spacing["1"],
29
-
paddingRight: spacing["1"],
30
-
paddingTop: spacing["0.5"],
27
+
paddingBottom: verticalSpace["xxs"],
28
+
paddingLeft: horizontalSpace["xs"],
29
+
paddingRight: horizontalSpace["xs"],
30
+
paddingTop: verticalSpace["xxs"],
31
31
top: "-1px",
32
32
},
33
33
});
+4
-4
apps/docs/src/components/lightbox/index.tsx
+4
-4
apps/docs/src/components/lightbox/index.tsx
···
25
25
animations,
26
26
} from "../theme/animations.stylex";
27
27
import { ui } from "../theme/semantic-color.stylex";
28
-
import { spacing } from "../theme/spacing.stylex";
28
+
import { gap, horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
29
29
30
30
const SLIDE_DURATION_MS = 250;
31
31
···
118
118
closeButton: {
119
119
position: "fixed",
120
120
zIndex: 210,
121
-
right: spacing["4"],
122
-
top: spacing["4"],
121
+
right: horizontalSpace["3xl"],
122
+
top: verticalSpace["3xl"],
123
123
},
124
124
hiddenTrigger: {
125
125
display: "none",
126
126
},
127
127
contentRow: {
128
-
gap: spacing["4"],
128
+
gap: gap["2xl"],
129
129
alignItems: "center",
130
130
display: "flex",
131
131
flexGrow: 1,
+3
-3
apps/docs/src/components/link/index.tsx
+3
-3
apps/docs/src/components/link/index.tsx
···
7
7
import type { StyleXComponentProps } from "../theme/types";
8
8
9
9
import { primaryColor, uiColor } from "../theme/color.stylex";
10
-
import { spacing } from "../theme/spacing.stylex";
10
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
11
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
12
12
import { LinkContext } from "./link-context";
13
13
···
19
19
":is([data-breadcrumb] *)": 0,
20
20
":is([data-hovered])": 1,
21
21
},
22
-
gap: spacing["2"],
22
+
gap: gap["md"],
23
23
textDecoration: "none",
24
24
alignItems: "center",
25
25
color: {
···
46
46
opacity: "var(--underline-opacity)",
47
47
pointerEvents: "none",
48
48
position: "absolute",
49
-
bottom: `calc(${spacing["1"]} * -1)`,
49
+
bottom: `calc(${sizeSpace["xxs"]} * -1)`,
50
50
height: "2px",
51
51
left: 0,
52
52
right: 0,
+10
-10
apps/docs/src/components/listbox/index.tsx
+10
-10
apps/docs/src/components/listbox/index.tsx
···
26
26
import { useHaptics } from "../haptics";
27
27
import { Separator } from "../separator";
28
28
import { ui } from "../theme/semantic-color.stylex";
29
-
import { spacing } from "../theme/spacing.stylex";
29
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
30
30
import { typeramp } from "../theme/typography.stylex";
31
31
import {
32
32
estimatedRowHeights,
···
41
41
alignItems: "center",
42
42
boxSizing: "border-box",
43
43
display: "flex",
44
-
paddingBottom: spacing["1"],
45
-
paddingLeft: spacing["3"],
46
-
paddingRight: spacing["3"],
47
-
paddingTop: spacing["1"],
44
+
paddingBottom: verticalSpace["xs"],
45
+
paddingLeft: horizontalSpace["xl"],
46
+
paddingRight: horizontalSpace["xl"],
47
+
paddingTop: verticalSpace["xs"],
48
48
49
49
height: {
50
-
":is([data-size=lg])": spacing["9"],
51
-
":is([data-size=md])": spacing["7"],
52
-
":is([data-size=sm])": spacing["7"],
50
+
":is([data-size=lg])": sizeSpace["7xl"],
51
+
":is([data-size=md])": sizeSpace["5xl"],
52
+
":is([data-size=sm])": sizeSpace["5xl"],
53
53
},
54
54
},
55
55
separator: {
56
-
marginBottom: spacing["1.5"],
57
-
marginTop: spacing["1.5"],
56
+
marginBottom: verticalSpace["sm"],
57
+
marginTop: verticalSpace["sm"],
58
58
},
59
59
});
60
60
+18
-16
apps/docs/src/components/markdown-content/index.tsx
+18
-16
apps/docs/src/components/markdown-content/index.tsx
···
7
7
import rehypeSanitize from "rehype-sanitize";
8
8
import remarkGfm from "remark-gfm";
9
9
10
+
import type { LinkProps } from "../link";
10
11
import type { StyleXComponentProps } from "../theme/types";
11
12
12
-
import type { LinkProps } from "../link";
13
13
import { Link } from "../link";
14
-
import { spacing } from "../theme/spacing.stylex";
14
+
import { verticalSpace } from "../theme/semantic-spacing.stylex";
15
15
import {
16
+
Blockquote,
16
17
Body,
17
18
Heading1,
18
19
Heading2,
20
+
Heading3,
21
+
Heading4,
19
22
Heading5,
23
+
InlineCode,
20
24
ListItem,
21
-
Heading4,
22
25
OrderedList,
23
-
Blockquote,
24
-
InlineCode,
25
26
Pre,
26
27
UnorderedList,
27
-
Heading3,
28
28
} from "../typography";
29
29
import { Text } from "../typography/text";
30
30
···
34
34
fontStyle: "italic",
35
35
},
36
36
standardMargin: {
37
-
marginBottom: spacing["5"],
38
-
marginTop: spacing["5"],
37
+
marginBottom: verticalSpace["4xl"],
38
+
marginTop: verticalSpace["4xl"],
39
39
},
40
40
h2: {
41
-
marginBottom: spacing["4"],
42
-
marginTop: spacing["8"],
41
+
marginBottom: verticalSpace["3xl"],
42
+
marginTop: verticalSpace["7xl"],
43
43
},
44
44
h3: {
45
-
marginBottom: spacing["5"],
46
-
marginTop: spacing["8"],
45
+
marginBottom: verticalSpace["4xl"],
46
+
marginTop: verticalSpace["7xl"],
47
47
},
48
48
h4: {
49
-
marginBottom: spacing["8"],
50
-
marginTop: spacing["8"],
49
+
marginBottom: verticalSpace["7xl"],
50
+
marginTop: verticalSpace["7xl"],
51
51
},
52
52
h5: {
53
-
marginBottom: spacing["8"],
54
-
marginTop: spacing["8"],
53
+
marginBottom: verticalSpace["7xl"],
54
+
marginTop: verticalSpace["7xl"],
55
55
},
56
56
});
57
57
58
+
/** Map of react-markdown element types to Hip typography; not a React component. */
59
+
// oxlint-disable-next-line react-refresh/only-export-components
58
60
export const components: Components = {
59
61
h1: ({ className: _className, style: _style, ...props }) => (
60
62
<Heading1 {...props} />
+5
-5
apps/docs/src/components/meter/index.tsx
+5
-5
apps/docs/src/components/meter/index.tsx
···
17
17
warningColor,
18
18
} from "../theme/color.stylex";
19
19
import { radius } from "../theme/radius.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
20
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
21
21
import { fontSize, lineHeight } from "../theme/typography.stylex";
22
22
23
23
const styles = stylex.create({
24
24
wrapper: {
25
-
gap: spacing["2"],
25
+
gap: gap["md"],
26
26
gridTemplateAreas: "'label value-label' 'bar bar'",
27
27
alignItems: "center",
28
28
display: "grid",
···
49
49
":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
50
50
},
51
51
height: {
52
-
":is([data-size=lg] *)": spacing["3"],
53
-
":is([data-size=md] *)": spacing["2"],
54
-
":is([data-size=sm] *)": spacing["1"],
52
+
":is([data-size=lg] *)": sizeSpace["md"],
53
+
":is([data-size=md] *)": sizeSpace["sm"],
54
+
":is([data-size=sm] *)": sizeSpace["xxs"],
55
55
},
56
56
width: "100%",
57
57
},
+6
-6
apps/docs/src/components/number-field/index.tsx
+6
-6
apps/docs/src/components/number-field/index.tsx
···
31
31
import { SuffixIcon } from "../suffix-icon";
32
32
import { uiColor } from "../theme/color.stylex";
33
33
import { ui } from "../theme/semantic-color.stylex";
34
-
import { spacing } from "../theme/spacing.stylex";
34
+
import { horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex";
35
35
import { useInputStyles } from "../theme/useInputStyles";
36
36
import { usePointerLock } from "./usePointerLock";
37
37
···
108
108
":is(*) svg": {
109
109
flexShrink: 0,
110
110
pointerEvents: "none",
111
-
height: spacing["4"],
112
-
width: spacing["4"],
111
+
height: sizeSpace["2xl"],
112
+
width: sizeSpace["2xl"],
113
113
},
114
114
115
115
color: {
···
127
127
},
128
128
inputWithStepper: {
129
129
textAlign: "center",
130
-
paddingLeft: spacing["2"],
131
-
paddingRight: spacing["2"],
130
+
paddingLeft: horizontalSpace["md"],
131
+
paddingRight: horizontalSpace["md"],
132
132
},
133
133
});
134
134
···
235
235
<>
236
236
<Label style={inputStyles.label}>{label}</Label>
237
237
{labelVariant === "horizontal" ? (
238
-
<Flex direction="column" gap="2">
238
+
<Flex direction="column" gap="md">
239
239
{content}
240
240
</Flex>
241
241
) : (
+49
-50
apps/docs/src/components/page/Page.tsx
+49
-50
apps/docs/src/components/page/Page.tsx
···
1
1
"use client";
2
2
3
+
/* oxlint-disable perfectionist/sort-imports -- @stylexjs vs @tanstack ordering conflicts */
4
+
import type { ComponentProps, ReactNode } from "react";
5
+
3
6
import * as stylex from "@stylexjs/stylex";
7
+
import type { LinkProps } from "@tanstack/react-router";
8
+
import { createLink } from "@tanstack/react-router";
4
9
import { ArrowLeft } from "lucide-react";
5
10
import { useEffect, useRef, useState } from "react";
6
-
import type { ComponentProps, ReactNode } from "react";
7
11
8
12
import type { StyleXComponentProps } from "../theme/types";
9
13
10
14
import { Flex } from "../flex";
11
15
import { IconButton } from "../icon-button";
12
16
import { primaryColor, uiColor } from "../theme/color.stylex";
13
-
import {
14
-
breakpoints,
15
-
containerBreakpoints,
16
-
mediaQueries,
17
-
} from "../theme/media-queries.stylex";
17
+
import { breakpoints, containerBreakpoints } from "../theme/media-queries.stylex";
18
18
import { radius } from "../theme/radius.stylex";
19
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
19
20
import { shadow } from "../theme/shadow.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
21
+
import { fontFamily } from "../theme/typography.stylex";
21
22
import { Text } from "../typography/text";
22
23
import { PageContext, usePageContext } from "./context";
23
-
import { createLink, LinkProps } from "@tanstack/react-router";
24
-
import { fontFamily, lineHeight } from "../theme/typography.stylex";
25
24
26
25
const IconButtonLink = createLink(IconButton);
27
26
···
33
32
marginRight: "auto",
34
33
maxWidth: "880px",
35
34
paddingTop: {
36
-
default: spacing["4"],
37
-
[breakpoints.sm]: spacing["4"],
35
+
default: verticalSpace["3xl"],
36
+
[breakpoints.sm]: sizeSpace["2xl"],
38
37
},
39
38
width: "100%",
40
39
},
···
49
48
marginLeft: "auto",
50
49
marginRight: "auto",
51
50
maxWidth: "var(--page-content-max-width)",
52
-
paddingBottom: spacing["16"],
53
-
paddingTop: spacing["3.5"],
51
+
paddingBottom: verticalSpace["13xl"],
52
+
paddingTop: verticalSpace["2xl"],
54
53
width: "100%",
55
54
},
56
55
});
···
58
57
const smallHeaderStyles = stylex.create({
59
58
header: {
60
59
marginBottom: {
61
-
default: spacing["6"],
60
+
default: sizeSpace["4xl"],
62
61
":is([data-sticky-header=true] *)": 0,
63
62
},
64
-
minHeight: spacing["8"],
63
+
minHeight: sizeSpace["6xl"],
65
64
},
66
65
});
67
66
···
88
87
},
89
88
},
90
89
alignItems: "center",
91
-
columnGap: spacing["4"],
90
+
columnGap: gap["2xl"],
92
91
display: "grid",
93
92
gridTemplateColumns: {
94
93
default: "1fr auto",
95
94
":has([data-page-icon])": "auto 1fr auto",
96
95
},
97
-
rowGap: spacing["2"],
96
+
rowGap: gap["md"],
98
97
marginBottom: {
99
-
default: spacing["8"],
98
+
default: sizeSpace["6xl"],
100
99
":is([data-sticky-header=true] *)": 0,
101
100
},
102
-
minHeight: spacing["8"],
103
-
paddingBottom: spacing["4"],
104
-
paddingTop: spacing["4"],
101
+
minHeight: sizeSpace["6xl"],
102
+
paddingBottom: verticalSpace["3xl"],
103
+
paddingTop: verticalSpace["3xl"],
105
104
},
106
105
});
107
106
···
133
132
},
134
133
},
135
134
smallActions: {
136
-
gap: spacing["1"],
135
+
gap: gap["xs"],
137
136
flexShrink: 0,
138
137
},
139
138
largeActions: {
140
139
gridArea: "actions",
141
140
gap: {
142
-
default: spacing["1"],
143
-
[breakpoints.sm]: spacing["2"],
141
+
default: gap["xs"],
142
+
[breakpoints.sm]: sizeSpace["sm"],
144
143
},
145
-
minHeight: spacing["8"],
144
+
minHeight: sizeSpace["6xl"],
146
145
},
147
146
icon: {
148
147
gridArea: "icon",
···
155
154
color: primaryColor.textContrast,
156
155
display: "flex",
157
156
justifyContent: "center",
158
-
height: spacing["12"],
159
-
width: spacing["12"],
157
+
height: sizeSpace["xl"],
158
+
width: sizeSpace["xl"],
160
159
},
161
160
});
162
161
···
174
173
position: "sticky",
175
174
zIndex: 10,
176
175
left: 0,
177
-
marginBottom: spacing["2"],
176
+
marginBottom: verticalSpace["md"],
178
177
marginLeft: `calc(-50vw + 50%)`,
179
178
marginRight: `calc(-50vw + 50%)`,
180
179
right: 0,
···
184
183
largeStickyWrapper: {
185
184
zIndex: 100,
186
185
marginBottom: {
187
-
default: spacing["2"],
188
-
[breakpoints.sm]: spacing["8"],
186
+
default: sizeSpace["sm"],
187
+
[breakpoints.sm]: sizeSpace["6xl"],
189
188
},
190
189
},
191
190
stickyWrapperStuck: {
···
218
217
marginLeft: "auto",
219
218
marginRight: "auto",
220
219
maxWidth: "880px",
221
-
paddingBottom: spacing["4"],
222
-
paddingLeft: spacing["4"],
223
-
paddingRight: spacing["4"],
224
-
paddingTop: spacing["4"],
220
+
paddingBottom: verticalSpace["3xl"],
221
+
paddingLeft: horizontalSpace["3xl"],
222
+
paddingRight: horizontalSpace["3xl"],
223
+
paddingTop: verticalSpace["3xl"],
225
224
},
226
225
largeStickyContent: {
227
226
boxSizing: "border-box",
···
232
231
marginRight: "auto",
233
232
maxWidth: "var(--page-content-max-width)",
234
233
paddingLeft: {
235
-
default: spacing["4"],
236
-
[containerBreakpoints.sm]: spacing["8"],
234
+
default: horizontalSpace["3xl"],
235
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
237
236
":has(> [data-sidebar-layout=true])": "0 !important",
238
237
},
239
238
paddingRight: {
240
-
default: spacing["4"],
241
-
[containerBreakpoints.sm]: spacing["8"],
239
+
default: horizontalSpace["3xl"],
240
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
242
241
":has(> [data-sidebar-layout=true])": "0 !important",
243
242
},
244
243
},
···
258
257
left: 0,
259
258
marginLeft: `calc(-50vw + 50%)`,
260
259
marginRight: `calc(-50vw + 50%)`,
261
-
marginTop: spacing["2"],
260
+
marginTop: verticalSpace["md"],
262
261
right: 0,
263
262
width: "100vw",
264
263
},
···
291
290
marginLeft: "auto",
292
291
marginRight: "auto",
293
292
maxWidth: "880px",
294
-
paddingBottom: spacing["4"],
295
-
paddingLeft: spacing["4"],
296
-
paddingRight: spacing["4"],
297
-
paddingTop: spacing["4"],
293
+
paddingBottom: verticalSpace["3xl"],
294
+
paddingLeft: horizontalSpace["3xl"],
295
+
paddingRight: horizontalSpace["3xl"],
296
+
paddingTop: verticalSpace["3xl"],
298
297
},
299
298
largeStickyContent: {
300
299
boxSizing: "border-box",
···
303
302
marginLeft: "auto",
304
303
marginRight: "auto",
305
304
maxWidth: "var(--page-content-max-width)",
306
-
paddingBottom: spacing["4"],
305
+
paddingBottom: verticalSpace["3xl"],
307
306
paddingLeft: {
308
-
default: spacing["4"],
309
-
[containerBreakpoints.sm]: spacing["8"],
307
+
default: horizontalSpace["3xl"],
308
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
310
309
":has(> [data-sidebar-layout=true])": "0 !important",
311
310
},
312
311
paddingRight: {
313
-
default: spacing["4"],
314
-
[containerBreakpoints.sm]: spacing["8"],
312
+
default: horizontalSpace["3xl"],
313
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
315
314
":has(> [data-sidebar-layout=true])": "0 !important",
316
315
},
317
-
paddingTop: spacing["4"],
316
+
paddingTop: verticalSpace["3xl"],
318
317
},
319
318
});
320
319
···
364
363
return (
365
364
<Flex
366
365
align="center"
367
-
gap="3"
366
+
gap="xl"
368
367
{...props}
369
368
style={[smallHeaderStyles.header, style]}
370
369
/>
+3
-3
apps/docs/src/components/pagination/index.tsx
+3
-3
apps/docs/src/components/pagination/index.tsx
···
15
15
import { SizeContext } from "../context";
16
16
import { Flex } from "../flex";
17
17
import { IconButton } from "../icon-button";
18
-
import { spacing } from "../theme/spacing.stylex";
18
+
import { gap } from "../theme/semantic-spacing.stylex";
19
19
20
20
const styles = stylex.create({
21
21
list: {
22
-
gap: spacing["4"],
22
+
gap: gap["2xl"],
23
23
alignItems: "center",
24
24
containerType: "inline-size",
25
25
display: "flex",
···
119
119
</li>
120
120
<li {...stylex.props(styles.listItem, styles.pages)}>
121
121
<ul>
122
-
<Flex align="center" justify="center" gap="1">
122
+
<Flex align="center" justify="center" gap="xs">
123
123
{visiblePages[0] !== 1 && (
124
124
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
125
125
<Button
+7
-7
apps/docs/src/components/popover/index.tsx
+7
-7
apps/docs/src/components/popover/index.tsx
···
17
17
18
18
import { useHaptics } from "../haptics";
19
19
import { uiColor } from "../theme/color.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
20
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
21
21
import { usePopoverStyles } from "../theme/usePopoverStyles";
22
22
23
23
const styles = stylex.create({
···
32
32
content: {
33
33
boxShadow: "none",
34
34
position: "relative",
35
-
paddingBottom: spacing["4"],
36
-
paddingLeft: spacing["4"],
37
-
paddingRight: spacing["4"],
38
-
paddingTop: spacing["4"],
35
+
paddingBottom: verticalSpace["3xl"],
36
+
paddingLeft: horizontalSpace["3xl"],
37
+
paddingRight: horizontalSpace["3xl"],
38
+
paddingTop: verticalSpace["3xl"],
39
39
},
40
40
caret: {},
41
41
arrow: {
···
47
47
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
48
48
},
49
49
zIndex: 0,
50
-
height: spacing["2"],
51
-
width: spacing["2"],
50
+
height: sizeSpace["sm"],
51
+
width: sizeSpace["sm"],
52
52
},
53
53
});
54
54
interface PopoverProps
+5
-5
apps/docs/src/components/progress-bar/index.tsx
+5
-5
apps/docs/src/components/progress-bar/index.tsx
···
12
12
import { primaryColor, uiColor } from "../theme/color.stylex";
13
13
import { mediaQueries } from "../theme/media-queries.stylex";
14
14
import { radius } from "../theme/radius.stylex";
15
-
import { spacing } from "../theme/spacing.stylex";
15
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
16
16
import { fontSize, lineHeight } from "../theme/typography.stylex";
17
17
18
18
const IndeterminateAnimation = stylex.keyframes({
···
26
26
27
27
const styles = stylex.create({
28
28
wrapper: {
29
-
gap: spacing["2"],
29
+
gap: gap["md"],
30
30
gridTemplateAreas: "'label value-label' 'bar bar'",
31
31
alignItems: "center",
32
32
display: "grid",
···
42
42
width: "100%",
43
43
44
44
height: {
45
-
":is([data-size=lg] *)": spacing["3"],
46
-
":is([data-size=md] *)": spacing["2"],
47
-
":is([data-size=sm] *)": spacing["1"],
45
+
":is([data-size=lg] *)": sizeSpace["md"],
46
+
":is([data-size=md] *)": sizeSpace["sm"],
47
+
":is([data-size=sm] *)": sizeSpace["xxs"],
48
48
},
49
49
},
50
50
valueLabel: {
+6
-6
apps/docs/src/components/progress-circle/index.tsx
+6
-6
apps/docs/src/components/progress-circle/index.tsx
···
12
12
import { animationDuration } from "../theme/animations.stylex";
13
13
import { primaryColor, uiColor } from "../theme/color.stylex";
14
14
import { radius } from "../theme/radius.stylex";
15
-
import { spacing } from "../theme/spacing.stylex";
15
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
16
16
17
17
const IndeterminateFillAnimation = stylex.keyframes({
18
18
from: {
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
-
gap: spacing["2"],
28
+
gap: gap["md"],
29
29
alignItems: "center",
30
30
boxSizing: "border-box",
31
31
display: "flex",
···
35
35
justifyContent: "center",
36
36
position: "relative",
37
37
38
-
"--progress-border-width": spacing["1"],
38
+
"--progress-border-width": sizeSpace["xxs"],
39
39
"--progress-size": {
40
-
":is([data-size=lg] *)": spacing["10"],
41
-
":is([data-size=md] *)": spacing["8"],
42
-
":is([data-size=sm] *)": spacing["4"],
40
+
":is([data-size=lg] *)": sizeSpace["lg"],
41
+
":is([data-size=md] *)": sizeSpace["6xl"],
42
+
":is([data-size=sm] *)": sizeSpace["2xl"],
43
43
},
44
44
},
45
45
track: {
+9
-9
apps/docs/src/components/radio/index.tsx
+9
-9
apps/docs/src/components/radio/index.tsx
···
24
24
import { mediaQueries } from "../theme/media-queries.stylex";
25
25
import { radius } from "../theme/radius.stylex";
26
26
import { primary, ui } from "../theme/semantic-color.stylex";
27
-
import { spacing } from "../theme/spacing.stylex";
27
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
28
28
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
29
29
30
30
const scaleIn = stylex.keyframes({
···
38
38
39
39
const styles = stylex.create({
40
40
wrapper: {
41
-
gap: spacing["2.5"],
41
+
gap: gap["lg"],
42
42
alignItems: {
43
43
default: "center",
44
44
":has(p)": "flex-start",
···
57
57
borderRadius: radius.full,
58
58
borderWidth: 2,
59
59
position: "relative",
60
-
height: spacing["4"],
61
-
width: spacing["4"],
60
+
height: sizeSpace["2xl"],
61
+
width: sizeSpace["2xl"],
62
62
63
63
transitionDuration: animationDuration.fast,
64
64
transitionProperty: {
···
70
70
selectionIndicator: {
71
71
borderRadius: radius.full,
72
72
backgroundColor: "white",
73
-
height: spacing["2"],
74
-
width: spacing["2"],
73
+
height: sizeSpace["sm"],
74
+
width: sizeSpace["sm"],
75
75
76
76
position: "absolute",
77
77
transform: "translate(-50%, -50%)",
···
90
90
color: "white",
91
91
},
92
92
group: {
93
-
gap: spacing["3"],
93
+
gap: gap["xl"],
94
94
display: "flex",
95
95
flexDirection: "column",
96
96
},
···
121
121
<SizeContext value={size}>
122
122
<AriaRadioGroup {...props} {...stylex.props(styles.group, style)}>
123
123
<Label>{label}</Label>
124
-
<Flex direction="column" gap="2">
124
+
<Flex direction="column" gap="md">
125
125
{children}
126
126
</Flex>
127
127
<Description>{description}</Description>
···
155
155
>
156
156
<SelectionIndicator {...stylex.props(styles.selectionIndicator)} />
157
157
</div>
158
-
<Flex direction="column" gap="1">
158
+
<Flex direction="column" gap="xs">
159
159
{children}
160
160
</Flex>
161
161
</>
+3
-3
apps/docs/src/components/range-calendar/index.tsx
+3
-3
apps/docs/src/components/range-calendar/index.tsx
···
21
21
import { Flex } from "../flex";
22
22
import { IconButton } from "../icon-button";
23
23
import { ErrorMessage } from "../label";
24
-
import { spacing } from "../theme/spacing.stylex";
24
+
import { gap } from "../theme/semantic-spacing.stylex";
25
25
import { useCalendarStyles } from "../theme/useCalendarStyles";
26
26
27
27
export interface RangeCalendarProps<T extends DateValue>
···
33
33
34
34
const styles = stylex.create({
35
35
root: {
36
-
gap: spacing["3"],
36
+
gap: gap["xl"],
37
37
display: "flex",
38
38
flexDirection: "column",
39
39
},
···
72
72
<ChevronRight />
73
73
</IconButton>
74
74
</header>
75
-
<Flex align="start" gap="4">
75
+
<Flex align="start" gap="2xl">
76
76
{monthsVisible.map((month) => (
77
77
<CalendarGrid
78
78
key={month}
+3
-3
apps/docs/src/components/search-field/index.tsx
+3
-3
apps/docs/src/components/search-field/index.tsx
···
22
22
import { IconButton } from "../icon-button";
23
23
import { Description, FieldErrorMessage, Label } from "../label";
24
24
import { SuffixIcon } from "../suffix-icon";
25
-
import { spacing } from "../theme/spacing.stylex";
25
+
import { horizontalSpace } from "../theme/semantic-spacing.stylex";
26
26
import { useInputStyles } from "../theme/useInputStyles";
27
27
28
28
const styles = stylex.create({
···
36
36
top: "50%",
37
37
},
38
38
clearButtonPadding: {
39
-
paddingRight: spacing["8"],
39
+
paddingRight: horizontalSpace["7xl"],
40
40
},
41
41
});
42
42
···
124
124
<>
125
125
<Label style={inputStyles.label}>{label}</Label>
126
126
{labelVariant === "horizontal" ? (
127
-
<Flex direction="column" gap="2">
127
+
<Flex direction="column" gap="md">
128
128
{content}
129
129
</Flex>
130
130
) : (
+16
-14
apps/docs/src/components/segmented-control/index.tsx
+16
-14
apps/docs/src/components/segmented-control/index.tsx
···
21
21
import { uiColor } from "../theme/color.stylex";
22
22
import { mediaQueries } from "../theme/media-queries.stylex";
23
23
import { radius } from "../theme/radius.stylex";
24
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
24
25
import { shadow } from "../theme/shadow.stylex";
25
-
import { spacing } from "../theme/spacing.stylex";
26
26
27
27
const styles = stylex.create({
28
28
group: {
29
-
padding: spacing["1"],
29
+
padding: sizeSpace["xxs"],
30
30
31
31
cornerShape: "squircle",
32
-
gap: spacing["2"],
32
+
gap: gap["md"],
33
33
alignItems: "center",
34
34
backgroundColor: uiColor.component1,
35
35
boxShadow: "inset 0 0 8px 0 rgba(0, 0, 0, 0.1)",
36
36
boxSizing: "border-box",
37
37
display: "flex",
38
38
height: {
39
-
":is([data-size=lg])": spacing["11"],
40
-
":is([data-size=md])": spacing["9"],
41
-
":is([data-size=sm])": spacing["7"],
39
+
":is([data-size=lg])": sizeSpace["9xl"],
40
+
":is([data-size=md])": sizeSpace["7xl"],
41
+
":is([data-size=sm])": sizeSpace["5xl"],
42
42
},
43
43
},
44
44
small: {
···
47
47
large: {
48
48
borderRadius: radius.lg,
49
49
},
50
+
/* eslint-disable @stylexjs/sort-keys -- toggle item layout order */
50
51
item: {
51
52
// eslint-disable-next-line @stylexjs/valid-styles
52
53
textBoxEdge: "cap alphabetic",
···
59
60
alignItems: "center",
60
61
backgroundColor: "transparent",
61
62
boxSizing: "border-box",
63
+
gap: gap["xs"],
64
+
display: "flex",
62
65
color: {
63
66
default: uiColor.text1,
64
67
":is([data-hovered])": uiColor.text2,
65
68
":is([data-selected])": uiColor.text2,
66
69
},
67
-
display: "flex",
68
-
gap: spacing["1"],
69
70
flexGrow: 1,
70
71
justifyContent: "center",
71
72
position: "relative",
···
74
75
":is([data-selected])": 0,
75
76
},
76
77
height: "100%",
77
-
paddingBottom: spacing["1"],
78
-
paddingLeft: spacing["2"],
79
-
paddingRight: spacing["2"],
80
-
paddingTop: spacing["1"],
78
+
paddingBottom: verticalSpace["xs"],
79
+
paddingLeft: horizontalSpace["md"],
80
+
paddingRight: horizontalSpace["md"],
81
+
paddingTop: verticalSpace["xs"],
81
82
82
83
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
83
84
":is(*) svg": {
84
85
flexShrink: 0,
85
86
pointerEvents: "none",
86
-
height: spacing["4"],
87
-
width: spacing["4"],
87
+
height: sizeSpace["2xl"],
88
+
width: sizeSpace["2xl"],
88
89
},
89
90
},
91
+
/* eslint-enable @stylexjs/sort-keys */
90
92
selectionIndicator: {
91
93
borderRadius: radius.lg,
92
94
+4
-4
apps/docs/src/components/select/index.tsx
+4
-4
apps/docs/src/components/select/index.tsx
···
32
32
import { ListBox, ListBoxSeparator } from "../listbox";
33
33
import { SearchField } from "../search-field";
34
34
import { SuffixIcon } from "../suffix-icon";
35
-
import { spacing } from "../theme/spacing.stylex";
35
+
import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
36
36
import { useInputStyles } from "../theme/useInputStyles";
37
37
import { estimatedRowHeights } from "../theme/useListBoxItemStyles";
38
38
import { usePopoverStyles } from "../theme/usePopoverStyles";
···
45
45
maxHeight: "40vh",
46
46
},
47
47
searchField: {
48
-
paddingLeft: spacing["1"],
49
-
paddingRight: spacing["1"],
50
-
paddingTop: spacing["1"],
48
+
paddingLeft: horizontalSpace["xs"],
49
+
paddingRight: horizontalSpace["xs"],
50
+
paddingTop: verticalSpace["xs"],
51
51
},
52
52
});
53
53
+8
-8
apps/docs/src/components/skeleton/index.tsx
+8
-8
apps/docs/src/components/skeleton/index.tsx
···
7
7
import { uiColor } from "../theme/color.stylex";
8
8
import { mediaQueries } from "../theme/media-queries.stylex";
9
9
import { radius } from "../theme/radius.stylex";
10
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
10
11
import { shadow } from "../theme/shadow.stylex";
11
-
import { spacing } from "../theme/spacing.stylex";
12
12
13
13
const shimmer = stylex.keyframes({
14
14
"0%": {
···
60
60
cornerShape: "squircle",
61
61
},
62
62
sizeSm: {
63
-
height: spacing["8"],
64
-
width: spacing["8"],
63
+
height: sizeSpace["6xl"],
64
+
width: sizeSpace["6xl"],
65
65
},
66
66
sizeMd: {
67
-
height: spacing["12"],
68
-
width: spacing["12"],
67
+
height: sizeSpace["xl"],
68
+
width: sizeSpace["xl"],
69
69
},
70
70
sizeLg: {
71
-
height: spacing["16"],
72
-
width: spacing["16"],
71
+
height: sizeSpace["12xl"],
72
+
width: sizeSpace["12xl"],
73
73
},
74
74
height: (height: string | undefined) => ({
75
-
height: height || spacing["4"],
75
+
height: height || sizeSpace["2xl"],
76
76
}),
77
77
width: (width: string | undefined) => ({
78
78
width: width || "100%",
+14
-14
apps/docs/src/components/slider/index.tsx
+14
-14
apps/docs/src/components/slider/index.tsx
···
13
13
import { Label } from "../label";
14
14
import { primaryColor, uiColor } from "../theme/color.stylex";
15
15
import { radius } from "../theme/radius.stylex";
16
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
16
17
import { shadow } from "../theme/shadow.stylex";
17
-
import { spacing } from "../theme/spacing.stylex";
18
18
import { fontSize, lineHeight } from "../theme/typography.stylex";
19
19
20
20
const styles = stylex.create({
21
21
wrapper: {
22
22
gap: {
23
-
":is([data-orientation=vertical])": spacing["2"],
23
+
":is([data-orientation=vertical])": gap["md"],
24
24
},
25
25
gridTemplateAreas: "'label value-label' 'track track'",
26
26
alignItems: {
···
44
44
},
45
45
position: "relative",
46
46
height: {
47
-
":is([data-orientation=horizontal] *)": spacing["8"],
48
-
":is([data-orientation=horizontal] *)::before": spacing["1"],
47
+
":is([data-orientation=horizontal] *)": sizeSpace["6xl"],
48
+
":is([data-orientation=horizontal] *)::before": sizeSpace["xxs"],
49
49
":is([data-orientation=vertical] *)": "100%",
50
50
":is([data-orientation=vertical] *)::before": "100%",
51
51
},
52
52
width: {
53
53
":is([data-orientation=horizontal] *)": "100%",
54
54
":is([data-orientation=horizontal] *)::before": "100%",
55
-
":is([data-orientation=vertical] *)": spacing["8"],
56
-
":is([data-orientation=vertical] *)::before": spacing["1"],
55
+
":is([data-orientation=vertical] *)": sizeSpace["6xl"],
56
+
":is([data-orientation=vertical] *)::before": sizeSpace["xxs"],
57
57
},
58
58
59
59
transform: {
···
94
94
boxShadow: shadow.md,
95
95
content: "''",
96
96
forcedColorAdjust: "none",
97
-
height: spacing["4"],
97
+
height: sizeSpace["2xl"],
98
98
left: {
99
99
":is([data-orientation=vertical] *)": "50%",
100
100
},
101
101
top: {
102
102
":is([data-orientation=horizontal] *)": "50%",
103
103
},
104
-
width: spacing["4"],
104
+
width: sizeSpace["2xl"],
105
105
},
106
106
trackInner: {
107
107
borderRadius: radius.full,
···
115
115
":is([data-orientation=vertical] *)": "translateX(-50%)",
116
116
},
117
117
height: {
118
-
":is([data-orientation=horizontal] *)": spacing["1"],
118
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
119
119
":is([data-orientation=vertical] *)": "100%",
120
120
},
121
121
left: {
···
126
126
},
127
127
width: {
128
128
":is([data-orientation=horizontal] *)": "100%",
129
-
":is([data-orientation=vertical] *)": spacing["1"],
129
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
130
130
},
131
131
},
132
132
trackSingle: {
133
133
height: {
134
-
":is([data-orientation=horizontal] *)": spacing["1"],
134
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
135
135
":is([data-orientation=vertical] *)":
136
136
"calc(attr(data-progress number) * 1%)",
137
137
},
138
138
width: {
139
139
":is([data-orientation=horizontal] *)":
140
140
"calc(attr(data-progress number) * 1%)",
141
-
":is([data-orientation=vertical] *)": spacing["1"],
141
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
142
142
},
143
143
},
144
144
trackMultiple: {
145
145
height: {
146
-
":is([data-orientation=horizontal] *)": spacing["1"],
146
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
147
147
":is([data-orientation=vertical] *)":
148
148
"calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
149
149
},
···
160
160
width: {
161
161
":is([data-orientation=horizontal] *)":
162
162
"calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
163
-
":is([data-orientation=vertical] *)": spacing["1"],
163
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
164
164
},
165
165
},
166
166
valueLabel: {
+4
-4
apps/docs/src/components/star-rating/index.tsx
+4
-4
apps/docs/src/components/star-rating/index.tsx
···
10
10
11
11
import { Flex } from "../flex";
12
12
import { primaryColor, uiColor } from "../theme/color.stylex";
13
-
import { spacing } from "../theme/spacing.stylex";
13
+
import { gap } from "../theme/semantic-spacing.stylex";
14
14
import { Text } from "../typography/text";
15
15
16
16
const MAX_STARS = 5;
17
17
18
18
const styles = stylex.create({
19
19
stars: {
20
-
gap: spacing["0.5"],
20
+
gap: gap["xxs"],
21
21
alignItems: "center",
22
22
display: "flex",
23
23
},
···
101
101
const emptyCount = 5 - filledCount - (showHalf ? 1 : 0);
102
102
103
103
return (
104
-
<Flex direction="row" align="center" gap="1" style={style} {...props}>
104
+
<Flex direction="row" align="center" gap="xs" style={style} {...props}>
105
105
<div
106
106
{...stylex.props(styles.stars)}
107
107
style={{ "--star-size": `${String(size)}px` } as React.CSSProperties}
···
232
232
<Flex
233
233
direction="row"
234
234
align="center"
235
-
gap="1"
235
+
gap="xs"
236
236
role="slider"
237
237
aria-label={ariaLabel}
238
238
aria-valuemin={0}
+8
-8
apps/docs/src/components/switch/index.tsx
+8
-8
apps/docs/src/components/switch/index.tsx
···
10
10
import { primaryColor, uiColor } from "../theme/color.stylex";
11
11
import { mediaQueries } from "../theme/media-queries.stylex";
12
12
import { radius } from "../theme/radius.stylex";
13
+
import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex";
13
14
import { shadow } from "../theme/shadow.stylex";
14
-
import { spacing } from "../theme/spacing.stylex";
15
15
import { typeramp } from "../theme/typography.stylex";
16
16
17
17
const styles = stylex.create({
···
20
20
minWidth: 0,
21
21
},
22
22
wrapper: {
23
-
gap: spacing["3"],
23
+
gap: gap["xl"],
24
24
alignItems: "center",
25
25
display: "flex",
26
26
},
···
43
43
[mediaQueries.reducedMotion]: "none",
44
44
},
45
45
transitionTimingFunction: "ease-in-out",
46
-
height: spacing["6"],
47
-
width: spacing["10"],
46
+
height: sizeSpace["4xl"],
47
+
width: sizeSpace["lg"],
48
48
},
49
49
thumb: {
50
50
borderRadius: radius.full,
···
62
62
[mediaQueries.reducedMotion]: "none",
63
63
},
64
64
transitionTimingFunction: "ease-in-out",
65
-
height: spacing["4"],
65
+
height: sizeSpace["2xl"],
66
66
left: 0,
67
-
marginLeft: spacing["1"],
68
-
marginRight: spacing["1"],
67
+
marginLeft: horizontalSpace["xs"],
68
+
marginRight: horizontalSpace["xs"],
69
69
top: "50%",
70
-
width: spacing["4"],
70
+
width: sizeSpace["2xl"],
71
71
},
72
72
});
73
73
+6
-6
apps/docs/src/components/table-of-contents/index.tsx
+6
-6
apps/docs/src/components/table-of-contents/index.tsx
···
8
8
9
9
import { animationDuration } from "../theme/animations.stylex";
10
10
import { primaryColor, uiColor } from "../theme/color.stylex";
11
-
import { spacing } from "../theme/spacing.stylex";
11
+
import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
12
12
import { fontSize } from "../theme/typography.stylex";
13
13
14
14
export interface TocEntry {
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
-
gap: spacing["2"],
28
+
gap: gap["md"],
29
29
overflow: "auto",
30
30
boxSizing: "border-box",
31
31
display: "flex",
32
32
flexDirection: "column",
33
33
flexShrink: 0,
34
-
paddingBottom: spacing["20"],
35
-
paddingTop: spacing["12"],
34
+
paddingBottom: verticalSpace["14xl"],
35
+
paddingTop: verticalSpace["11xl"],
36
36
width: "240px",
37
37
},
38
38
itemList: {
···
65
65
},
66
66
borderLeftStyle: "solid",
67
67
borderLeftWidth: 1,
68
-
height: spacing[8],
68
+
height: sizeSpace["6xl"],
69
69
70
70
"::before": {
71
71
content: "''",
···
77
77
},
78
78
},
79
79
level: (level: number) => ({
80
-
paddingLeft: `calc(${spacing[4]} * ${level.toString()})`,
80
+
paddingLeft: `calc(${sizeSpace["2xl"]} * ${level.toString()})`,
81
81
}),
82
82
active: {
83
83
color: primaryColor.solid2,
+30
-30
apps/docs/src/components/table/index.tsx
+30
-30
apps/docs/src/components/table/index.tsx
···
34
34
import { Flex } from "../flex";
35
35
import { IconButton } from "../icon-button";
36
36
import { primaryColor, uiColor } from "../theme/color.stylex";
37
-
import { spacing } from "../theme/spacing.stylex";
37
+
import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
38
38
import { LabelText } from "../typography";
39
39
40
40
const styles = stylex.create({
···
63
63
display: "flex",
64
64
justifyContent: "space-between",
65
65
paddingLeft: {
66
-
default: spacing["2"],
67
-
":is(:first-child > *)": spacing["2"],
66
+
default: horizontalSpace["md"],
67
+
":is(:first-child > *)": sizeSpace["sm"],
68
68
},
69
69
},
70
70
columnHeaderSortable: {
···
88
88
},
89
89
textAlign: "left",
90
90
minHeight: {
91
-
default: spacing["8"],
92
-
":is([data-table-size=lg] *)": spacing["12"],
93
-
":is([data-table-size=md] *)": spacing["10"],
91
+
default: sizeSpace["6xl"],
92
+
":is([data-table-size=lg] *)": sizeSpace["xl"],
93
+
":is([data-table-size=md] *)": sizeSpace["lg"],
94
94
},
95
95
paddingBottom: {
96
-
default: spacing["1"],
97
-
":is([data-table-size=lg] *)": spacing["3"],
98
-
":is([data-table-size=md] *)": spacing["2"],
96
+
default: verticalSpace["xs"],
97
+
":is([data-table-size=lg] *)": sizeSpace["md"],
98
+
":is([data-table-size=md] *)": sizeSpace["sm"],
99
99
},
100
100
paddingLeft: {
101
-
default: spacing["4"],
102
-
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
103
-
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
101
+
default: horizontalSpace["3xl"],
102
+
":is([data-table-size=lg] *:not(:first-child))": sizeSpace["2xl"],
103
+
":is([data-table-size=md] *:not(:first-child))": sizeSpace["md"],
104
104
},
105
105
paddingRight: {
106
-
default: spacing["4"],
107
-
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
108
-
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
106
+
default: horizontalSpace["3xl"],
107
+
":is([data-table-size=lg] *:not(:last-child))": sizeSpace["2xl"],
108
+
":is([data-table-size=md] *:not(:last-child))": sizeSpace["md"],
109
109
},
110
110
paddingTop: {
111
-
default: spacing["1"],
112
-
":is([data-table-size=lg] *)": spacing["3"],
113
-
":is([data-table-size=md] *)": spacing["2"],
111
+
default: verticalSpace["xs"],
112
+
":is([data-table-size=lg] *)": sizeSpace["md"],
113
+
":is([data-table-size=md] *)": sizeSpace["sm"],
114
114
},
115
115
},
116
116
textEllipsis: {
···
131
131
position: "relative",
132
132
touchAction: "none",
133
133
marginBottom: {
134
-
default: `calc(${spacing["1"]} * -1)`,
135
-
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
136
-
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
134
+
default: `calc(${sizeSpace["xxs"]} * -1)`,
135
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["md"]} * -1)`,
136
+
":is([data-table-size=md] *)": `calc(${sizeSpace["sm"]} * -1)`,
137
137
},
138
138
marginTop: {
139
-
default: `calc(${spacing["1"]} * -1)`,
140
-
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
141
-
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
139
+
default: `calc(${sizeSpace["xxs"]} * -1)`,
140
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["md"]} * -1)`,
141
+
":is([data-table-size=md] *)": `calc(${sizeSpace["sm"]} * -1)`,
142
142
},
143
143
minHeight: {
144
-
default: spacing["8"],
145
-
":is([data-table-size=lg] *)": spacing["12"],
146
-
":is([data-table-size=md] *)": spacing["10"],
144
+
default: sizeSpace["6xl"],
145
+
":is([data-table-size=lg] *)": sizeSpace["xl"],
146
+
":is([data-table-size=md] *)": sizeSpace["lg"],
147
147
},
148
-
width: spacing["3"],
148
+
width: sizeSpace["md"],
149
149
},
150
150
resizerLine: {
151
151
backgroundColor: {
···
159
159
bottom: 0,
160
160
left: "50%",
161
161
top: 0,
162
-
width: spacing["0.5"],
162
+
width: sizeSpace["xxs"],
163
163
},
164
164
dropIndicator: {
165
165
outlineColor: primaryColor.solid1,
···
236
236
)}
237
237
>
238
238
<div {...stylex.props(styles.cellContent, styles.columnHeader)}>
239
-
<Flex align="center" gap="1">
239
+
<Flex align="center" gap="xs">
240
240
<LabelText
241
241
tabIndex={hasResizer ? -1 : undefined}
242
242
hasEllipsis={hasEllipsis}
+8
-8
apps/docs/src/components/tabs/index.tsx
+8
-8
apps/docs/src/components/tabs/index.tsx
···
25
25
import { primaryColor, uiColor } from "../theme/color.stylex";
26
26
import { mediaQueries } from "../theme/media-queries.stylex";
27
27
import { radius } from "../theme/radius.stylex";
28
-
import { spacing } from "../theme/spacing.stylex";
28
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
29
29
import { fontFamily, fontSize } from "../theme/typography.stylex";
30
30
31
31
const styles = stylex.create({
···
38
38
flexDirection: "row",
39
39
},
40
40
tabList: {
41
-
gap: spacing["1"],
41
+
gap: gap["xs"],
42
42
overflow: "auto",
43
43
alignItems: {
44
44
":is([data-orientation=horizontal])": "flex-start",
···
77
77
},
78
78
tab: {
79
79
padding: {
80
-
":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`,
81
-
":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`,
82
-
":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`,
80
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["3xl"]}`,
81
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["2xl"]}`,
82
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["md"]}`,
83
83
},
84
84
borderWidth: 0,
85
85
outline: "none",
···
168
168
},
169
169
tabPanel: {
170
170
padding: {
171
-
":is([data-size=lg] *)": spacing["5"],
172
-
":is([data-size=md] *)": spacing["4"],
173
-
":is([data-size=sm] *)": spacing["3"],
171
+
":is([data-size=lg] *)": sizeSpace["3xl"],
172
+
":is([data-size=md] *)": sizeSpace["2xl"],
173
+
":is([data-size=sm] *)": sizeSpace["md"],
174
174
},
175
175
outline: "none",
176
176
fontSize: {
+14
-14
apps/docs/src/components/tag-group/index.tsx
+14
-14
apps/docs/src/components/tag-group/index.tsx
···
20
20
import { primaryColor, uiColor } from "../theme/color.stylex";
21
21
import { mediaQueries } from "../theme/media-queries.stylex";
22
22
import { radius } from "../theme/radius.stylex";
23
-
import { spacing } from "../theme/spacing.stylex";
23
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
24
24
import { typeramp } from "../theme/typography.stylex";
25
25
26
26
const styles = stylex.create({
27
27
group: {
28
-
gap: spacing["2"],
28
+
gap: gap["md"],
29
29
display: "flex",
30
30
flexDirection: "column",
31
31
},
32
32
list: {
33
33
alignItems: "center",
34
-
columnGap: spacing["1.5"],
34
+
columnGap: gap["sm"],
35
35
display: "flex",
36
36
flexWrap: "wrap",
37
-
rowGap: spacing["2.5"],
37
+
rowGap: gap["lg"],
38
38
},
39
39
tag: {
40
40
borderColor: {
···
45
45
borderRadius: radius.full,
46
46
borderStyle: "solid",
47
47
borderWidth: 1,
48
-
gap: spacing["1.5"],
48
+
gap: gap["sm"],
49
49
alignItems: "center",
50
50
backgroundColor: {
51
51
default: uiColor.component1,
···
64
64
opacity: {
65
65
":is([data-disabled])": 0.5,
66
66
},
67
-
paddingBottom: spacing["1"],
68
-
paddingLeft: spacing["2.5"],
67
+
paddingBottom: verticalSpace["xs"],
68
+
paddingLeft: horizontalSpace["lg"],
69
69
paddingRight: {
70
-
default: spacing["2.5"],
71
-
":has(button)": spacing["1.5"],
70
+
default: horizontalSpace["lg"],
71
+
":has(button)": sizeSpace["xs"],
72
72
},
73
-
paddingTop: spacing["1"],
73
+
paddingTop: verticalSpace["xs"],
74
74
},
75
75
removeButton: {
76
76
margin: 0,
···
95
95
[mediaQueries.reducedMotion]: "none",
96
96
},
97
97
transitionTimingFunction: "ease-in-out",
98
-
height: spacing["4"],
99
-
width: spacing["4"],
98
+
height: sizeSpace["2xl"],
99
+
width: sizeSpace["2xl"],
100
100
},
101
101
tagText: {
102
102
// eslint-disable-next-line @stylexjs/valid-styles
103
103
textBoxEdge: "cap alphabetic",
104
104
// eslint-disable-next-line @stylexjs/valid-styles
105
105
textBoxTrim: "trim-both",
106
-
paddingBottom: spacing["0.5"],
107
-
paddingTop: spacing["0.5"],
106
+
paddingBottom: verticalSpace["xxs"],
107
+
paddingTop: verticalSpace["xxs"],
108
108
},
109
109
});
110
110
+10
-10
apps/docs/src/components/text-area/index.tsx
+10
-10
apps/docs/src/components/text-area/index.tsx
···
22
22
23
23
import { SizeContext } from "../context";
24
24
import { Description, FieldErrorMessage, Label } from "../label";
25
-
import { spacing } from "../theme/spacing.stylex";
25
+
import { size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
26
26
import { fontFamily, lineHeight } from "../theme/typography.stylex";
27
27
import { useInputStyles } from "../theme/useInputStyles";
28
28
···
39
39
},
40
40
resize: "none",
41
41
minHeight: {
42
-
":is([data-size=lg])": spacing["10"],
43
-
":is([data-size=md])": spacing["8"],
44
-
":is([data-size=sm])": spacing["6"],
42
+
":is([data-size=lg])": sizeSpace["lg"],
43
+
":is([data-size=md])": sizeSpace["6xl"],
44
+
":is([data-size=sm])": sizeSpace["4xl"],
45
45
},
46
46
minWidth: 0,
47
47
paddingBottom: {
48
-
":is([data-size=lg])": spacing["3"],
49
-
":is([data-size=md])": spacing["2"],
50
-
":is([data-size=sm])": spacing["1"],
48
+
":is([data-size=lg])": verticalSpace["xl"],
49
+
":is([data-size=md])": sizeSpace["sm"],
50
+
":is([data-size=sm])": sizeSpace["xxs"],
51
51
},
52
52
paddingTop: {
53
-
":is([data-size=lg])": spacing["3"],
54
-
":is([data-size=md])": spacing["2"],
55
-
":is([data-size=sm])": spacing["1"],
53
+
":is([data-size=lg])": verticalSpace["xl"],
54
+
":is([data-size=md])": sizeSpace["sm"],
55
+
":is([data-size=sm])": sizeSpace["xxs"],
56
56
},
57
57
width: "100%",
58
58
},
+1
-1
apps/docs/src/components/text-field/index.tsx
+1
-1
apps/docs/src/components/text-field/index.tsx
+6
-6
apps/docs/src/components/theme/typography.stylex.tsx
+6
-6
apps/docs/src/components/theme/typography.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { breakpoints } from "./media-queries.stylex";
4
-
import { spacing } from "./spacing.stylex";
4
+
import { verticalSpace } from "./semantic-spacing.stylex";
5
5
6
6
export const fontFamily = stylex.defineVars({
7
7
title: "'Inter', sans-serif",
···
76
76
fontWeight: fontWeight["extrabold"],
77
77
letterSpacing: tracking["tight"],
78
78
lineHeight: lineHeight.base,
79
-
scrollMarginBlockStart: spacing["20"],
79
+
scrollMarginBlockStart: verticalSpace["14xl"],
80
80
},
81
81
heading2: {
82
82
// eslint-disable-next-line @stylexjs/valid-styles
···
94
94
fontWeight: fontWeight.semibold,
95
95
letterSpacing: tracking["tight"],
96
96
lineHeight: lineHeight.sm,
97
-
scrollMarginBlockStart: spacing["20"],
97
+
scrollMarginBlockStart: verticalSpace["14xl"],
98
98
borderBottomWidth: 1,
99
99
},
100
100
heading3: {
···
110
110
fontWeight: fontWeight["semibold"],
111
111
letterSpacing: tracking["tight"],
112
112
lineHeight: lineHeight.sm,
113
-
scrollMarginBlockStart: spacing["20"],
113
+
scrollMarginBlockStart: verticalSpace["14xl"],
114
114
},
115
115
heading4: {
116
116
// eslint-disable-next-line @stylexjs/valid-styles
···
125
125
fontWeight: fontWeight["semibold"],
126
126
letterSpacing: tracking["tight"],
127
127
lineHeight: lineHeight.sm,
128
-
scrollMarginBlockStart: spacing["20"],
128
+
scrollMarginBlockStart: verticalSpace["14xl"],
129
129
},
130
130
heading5: {
131
131
// eslint-disable-next-line @stylexjs/valid-styles
···
140
140
fontWeight: fontWeight["semibold"],
141
141
letterSpacing: tracking["tight"],
142
142
lineHeight: lineHeight.sm,
143
-
scrollMarginBlockStart: spacing["20"],
143
+
scrollMarginBlockStart: verticalSpace["14xl"],
144
144
},
145
145
body: {
146
146
// eslint-disable-next-line @stylexjs/valid-styles
+24
-24
apps/docs/src/components/theme/useButtonStyles.ts
+24
-24
apps/docs/src/components/theme/useButtonStyles.ts
···
11
11
import { uiColor } from "./color.stylex";
12
12
import { radius } from "./radius.stylex";
13
13
import { critical, primary, ui } from "./semantic-color.stylex";
14
+
import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex";
14
15
import { shadow } from "./shadow.stylex";
15
-
import { spacing } from "./spacing.stylex";
16
16
import { fontFamily, fontSize, fontWeight } from "./typography.stylex";
17
17
18
18
const styles = stylex.create({
···
30
30
borderWidth: 1,
31
31
32
32
cornerShape: "squircle",
33
-
gap: spacing["1"],
33
+
gap: gap["xs"],
34
34
alignItems: "center",
35
35
boxSizing: "border-box",
36
36
display: "inline-flex",
···
54
54
":is(*) svg": {
55
55
flexShrink: 0,
56
56
pointerEvents: "none",
57
-
height: spacing["4"],
58
-
width: spacing["4"],
57
+
height: sizeSpace["2xl"],
58
+
width: sizeSpace["2xl"],
59
59
},
60
60
},
61
61
small: {
62
62
fontSize: fontSize["xs"],
63
-
height: spacing["7"],
63
+
height: sizeSpace["5xl"],
64
64
paddingLeft: {
65
-
default: spacing["2"],
65
+
default: horizontalSpace["md"],
66
66
},
67
-
paddingRight: spacing["2"],
67
+
paddingRight: horizontalSpace["md"],
68
68
69
69
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
70
70
":is(*) svg": {
71
71
flexShrink: 0,
72
72
pointerEvents: "none",
73
-
height: spacing["3.5"],
74
-
width: spacing["3.5"],
73
+
height: sizeSpace["2xl"],
74
+
width: sizeSpace["2xl"],
75
75
},
76
76
},
77
77
medium: {
78
-
gap: spacing["1.5"],
78
+
gap: gap["sm"],
79
79
fontSize: fontSize["sm"],
80
-
height: spacing["8"],
80
+
height: sizeSpace["6xl"],
81
81
paddingLeft: {
82
-
default: spacing["3"],
83
-
":has(svg+*)": spacing["2.5"],
82
+
default: horizontalSpace["xl"],
83
+
":has(svg+*)": sizeSpace["md"],
84
84
},
85
-
paddingRight: spacing["3"],
85
+
paddingRight: horizontalSpace["xl"],
86
86
},
87
87
large: {
88
-
gap: spacing["2"],
88
+
gap: gap["md"],
89
89
fontSize: fontSize["sm"],
90
-
height: spacing["10"],
90
+
height: sizeSpace["lg"],
91
91
paddingLeft: {
92
-
default: spacing["4"],
93
-
":has(svg+*)": spacing["3"],
92
+
default: horizontalSpace["3xl"],
93
+
":has(svg+*)": sizeSpace["md"],
94
94
},
95
-
paddingRight: spacing["4"],
95
+
paddingRight: horizontalSpace["3xl"],
96
96
},
97
97
xl: {
98
-
gap: spacing["2"],
98
+
gap: gap["md"],
99
99
fontSize: fontSize["lg"],
100
-
height: spacing["12"],
100
+
height: sizeSpace["xl"],
101
101
paddingLeft: {
102
-
default: spacing["5"],
103
-
":has(svg+*)": spacing["4"],
102
+
default: horizontalSpace["4xl"],
103
+
":has(svg+*)": sizeSpace["2xl"],
104
104
},
105
-
paddingRight: spacing["5"],
105
+
paddingRight: horizontalSpace["4xl"],
106
106
},
107
107
secondary: {
108
108
borderColor: {
+12
-12
apps/docs/src/components/theme/useCalendarStyles.ts
+12
-12
apps/docs/src/components/theme/useCalendarStyles.ts
···
11
11
import { animationDuration } from "../theme/animations.stylex";
12
12
import { primaryColor, uiColor } from "../theme/color.stylex";
13
13
import { radius } from "../theme/radius.stylex";
14
-
import { spacing } from "../theme/spacing.stylex";
14
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
15
15
import { fontSize, fontWeight } from "./typography.stylex";
16
16
17
17
export interface CalendarProps<T extends DateValue>
···
23
23
24
24
const styles = stylex.create({
25
25
cell: {
26
-
padding: spacing["1"],
26
+
padding: sizeSpace["xxs"],
27
27
borderRadius: radius.md,
28
28
cornerShape: "squircle",
29
29
textDecoration: {
···
35
35
":is([data-selected])": primaryColor.text2,
36
36
},
37
37
cursor: "default",
38
-
lineHeight: spacing["8"],
38
+
lineHeight: sizeSpace["6xl"],
39
39
opacity: {
40
40
":is([data-outside-visible-range],[data-unavailable])": 0.5,
41
41
},
···
45
45
transitionProperty: "color",
46
46
transitionTimingFunction: "ease-in-out",
47
47
zIndex: 0,
48
-
width: spacing["8"],
48
+
width: sizeSpace["6xl"],
49
49
50
50
"::before": {
51
-
inset: spacing["1"],
51
+
inset: sizeSpace["xxs"],
52
52
content: "''",
53
53
position: "absolute",
54
54
transitionDuration: animationDuration.fast,
···
58
58
},
59
59
},
60
60
nonRangeCell: {
61
-
cornerShape: {
62
-
"::before": "squircle",
63
-
},
64
61
borderRadius: {
65
62
"::before": radius.md,
63
+
},
64
+
cornerShape: {
65
+
"::before": "squircle",
66
66
},
67
67
backgroundColor: {
68
68
":is(*)::before": "transparent",
···
113
113
":is([data-selection-end],td:last-child > *)::before": radius.md,
114
114
},
115
115
marginLeft: {
116
-
":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`,
116
+
":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["md"]} * -1)`,
117
117
},
118
118
marginRight: {
119
-
":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`,
119
+
":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["md"]} * -1)`,
120
120
},
121
121
},
122
122
headerCell: {
123
123
fontSize: fontSize["sm"],
124
124
fontWeight: fontWeight["medium"],
125
125
textAlign: "center",
126
-
paddingBottom: spacing["1"],
126
+
paddingBottom: verticalSpace["xs"],
127
127
},
128
128
heading: {
129
129
margin: 0,
···
135
135
borderCollapse: "collapse",
136
136
},
137
137
wrapper: {
138
-
gap: spacing["3"],
138
+
gap: gap["xl"],
139
139
display: "flex",
140
140
flexDirection: "column",
141
141
},
+31
-32
apps/docs/src/components/theme/useInputStyles.ts
+31
-32
apps/docs/src/components/theme/useInputStyles.ts
···
16
16
uiColor,
17
17
warningColor,
18
18
} from "./color.stylex";
19
-
import { mediaQueries } from "./media-queries.stylex";
20
19
import { radius } from "./radius.stylex";
21
20
import { ui } from "./semantic-color.stylex";
22
-
import { spacing } from "./spacing.stylex";
21
+
import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex";
23
22
import { fontSize, fontWeight, lineHeight } from "./typography.stylex";
24
23
25
24
const styles = stylex.create({
26
25
field: {
27
-
gap: spacing["2"],
26
+
gap: gap["md"],
28
27
display: "flex",
29
28
flexDirection: "column",
30
29
},
···
34
33
flexShrink: 0,
35
34
height: "100%",
36
35
37
-
gap: spacing["2"],
36
+
gap: gap["md"],
38
37
alignItems: "center",
39
38
display: "flex",
40
39
justifyContent: "center",
···
43
42
":is(*) svg": {
44
43
flexShrink: 0,
45
44
pointerEvents: "none",
46
-
height: spacing["4"],
47
-
width: spacing["4"],
45
+
height: sizeSpace["2xl"],
46
+
width: sizeSpace["2xl"],
48
47
},
49
48
},
50
49
addonSm: {
51
-
paddingLeft: { ":first-child": spacing["1.5"] },
50
+
paddingLeft: { ":first-child": horizontalSpace["sm"] },
52
51
paddingRight: {
53
-
":first-child": spacing["1"],
54
-
":last-child": spacing["1.5"],
52
+
":first-child": horizontalSpace["xs"],
53
+
":last-child": sizeSpace["xs"],
55
54
},
56
55
},
57
56
addonMd: {
58
-
paddingLeft: { ":first-child": spacing["2.5"] },
57
+
paddingLeft: { ":first-child": horizontalSpace["lg"] },
59
58
paddingRight: {
60
-
":first-child": spacing["2"],
61
-
":last-child": spacing["2.5"],
59
+
":first-child": horizontalSpace["md"],
60
+
":last-child": sizeSpace["md"],
62
61
},
63
62
},
64
63
addonLg: {
65
-
paddingLeft: { ":first-child": spacing["3"] },
64
+
paddingLeft: { ":first-child": horizontalSpace["xl"] },
66
65
paddingRight: {
67
-
":first-child": spacing["2"],
68
-
":last-child": spacing["3"],
66
+
":first-child": horizontalSpace["md"],
67
+
":last-child": sizeSpace["md"],
69
68
},
70
69
},
71
70
validationIcon: {
···
315
314
inputSizeSm: {
316
315
fontSize: fontSize["xs"],
317
316
paddingLeft: {
318
-
":first-child": spacing["2"],
317
+
":first-child": horizontalSpace["md"],
319
318
},
320
-
paddingRight: spacing["1"],
319
+
paddingRight: horizontalSpace["xs"],
321
320
},
322
321
inputSizeMd: {
323
322
fontSize: fontSize["sm"],
324
323
paddingLeft: {
325
-
":first-child": spacing["2"],
324
+
":first-child": horizontalSpace["md"],
326
325
},
327
-
paddingRight: spacing["2"],
326
+
paddingRight: horizontalSpace["md"],
328
327
},
329
328
inputSizeLg: {
330
329
fontSize: fontSize["base"],
331
330
paddingLeft: {
332
-
":first-child": spacing["3"],
331
+
":first-child": horizontalSpace["xl"],
333
332
},
334
-
paddingRight: spacing["3"],
333
+
paddingRight: horizontalSpace["xl"],
335
334
},
336
335
wrapperSizeSm: {
337
-
height: spacing["6"],
336
+
height: sizeSpace["4xl"],
338
337
},
339
338
wrapperSizeMd: {
340
-
height: spacing["8"],
339
+
height: sizeSpace["6xl"],
341
340
},
342
341
wrapperSizeLg: {
343
-
height: spacing["10"],
342
+
height: sizeSpace["lg"],
344
343
},
345
344
horizontalLabel: {
346
-
gap: spacing["4"],
345
+
gap: gap["2xl"],
347
346
alignItems: "flex-start",
348
347
flexDirection: "row",
349
348
},
···
354
353
paddingRight: 0,
355
354
},
356
355
horizontalLabelTextSm: {
357
-
lineHeight: spacing["6"],
356
+
lineHeight: sizeSpace["4xl"],
358
357
},
359
358
horizontalLabelTextMd: {
360
-
lineHeight: spacing["8"],
359
+
lineHeight: sizeSpace["6xl"],
361
360
},
362
361
horizontalLabelTextLg: {
363
362
fontSize: fontSize["base"],
364
363
fontWeight: fontWeight["medium"],
365
-
lineHeight: spacing["10"],
364
+
lineHeight: sizeSpace["lg"],
366
365
},
367
366
label: {
368
-
paddingLeft: spacing["1"],
369
-
paddingRight: spacing["1"],
367
+
paddingLeft: horizontalSpace["xs"],
368
+
paddingRight: horizontalSpace["xs"],
370
369
},
371
370
additionalText: {
372
-
paddingLeft: spacing["2"],
373
-
paddingRight: spacing["2"],
371
+
paddingLeft: horizontalSpace["md"],
372
+
paddingRight: horizontalSpace["md"],
374
373
},
375
374
});
376
375
+22
-22
apps/docs/src/components/theme/useListBoxItemStyles.ts
+22
-22
apps/docs/src/components/theme/useListBoxItemStyles.ts
···
5
5
6
6
import { SizeContext } from "../context";
7
7
import { radius } from "../theme/radius.stylex";
8
-
import { spacing } from "../theme/spacing.stylex";
8
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
9
9
import {
10
10
fontSize,
11
11
fontWeight,
···
30
30
[":is([data-react-aria-pressable=true][data-selected=true])"]:
31
31
fontWeight["medium"],
32
32
},
33
-
paddingBottom: spacing["0.5"],
34
-
paddingLeft: spacing["1"],
35
-
paddingRight: spacing["1"],
36
-
paddingTop: spacing["0.5"],
33
+
paddingBottom: verticalSpace["xxs"],
34
+
paddingLeft: horizontalSpace["xs"],
35
+
paddingRight: horizontalSpace["xs"],
36
+
paddingTop: verticalSpace["xxs"],
37
37
},
38
-
sm: { minHeight: spacing["7"] },
39
-
md: { minHeight: spacing["9"] },
40
-
lg: { minHeight: spacing["12"] },
38
+
sm: { minHeight: sizeSpace["5xl"] },
39
+
md: { minHeight: sizeSpace["7xl"] },
40
+
lg: { minHeight: sizeSpace["xl"] },
41
41
itemInner: {
42
42
borderRadius: radius.md,
43
43
cornerShape: "squircle",
44
-
gap: spacing["3"],
44
+
gap: gap["xl"],
45
45
alignItems: "center",
46
46
backgroundColor: {
47
47
default: "transparent",
···
62
62
transitionDuration: animationDuration.fast,
63
63
transitionProperty: "background-color",
64
64
transitionTimingFunction: "ease-in-out",
65
-
paddingBottom: spacing["2"],
66
-
paddingLeft: spacing["3"],
67
-
paddingRight: spacing["3"],
68
-
paddingTop: spacing["2"],
65
+
paddingBottom: verticalSpace["md"],
66
+
paddingLeft: horizontalSpace["xl"],
67
+
paddingRight: horizontalSpace["xl"],
68
+
paddingTop: verticalSpace["md"],
69
69
70
70
/* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */
71
71
":is([data-variant=destructive] *) *": {
···
73
73
},
74
74
},
75
75
smItemInner: {
76
-
gap: spacing["2"],
76
+
gap: gap["md"],
77
77
fontSize: fontSize["xs"],
78
78
lineHeight: lineHeight["xs"],
79
-
paddingBottom: spacing["1"],
80
-
paddingTop: spacing["1"],
79
+
paddingBottom: verticalSpace["xs"],
80
+
paddingTop: verticalSpace["xs"],
81
81
},
82
82
lgItemInner: {
83
83
fontSize: fontSize["base"],
···
89
89
alignItems: "center",
90
90
display: "flex",
91
91
justifyContent: "center",
92
-
marginBottom: `calc(${spacing["2"]} * -1)`,
93
-
marginTop: `calc(${spacing["2"]} * -1)`,
94
-
minWidth: spacing["4"],
92
+
marginBottom: `calc(${sizeSpace["sm"]} * -1)`,
93
+
marginTop: `calc(${sizeSpace["sm"]} * -1)`,
94
+
minWidth: sizeSpace["2xl"],
95
95
96
96
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles
97
97
":is(*) svg": {
98
98
flexShrink: 0,
99
99
pointerEvents: "none",
100
-
height: spacing["4"],
101
-
width: spacing["4"],
100
+
height: sizeSpace["2xl"],
101
+
width: sizeSpace["2xl"],
102
102
},
103
103
},
104
104
label: {
···
106
106
textBoxEdge: "cap alphabetic",
107
107
// eslint-disable-next-line @stylexjs/valid-styles
108
108
textBoxTrim: "trim-both",
109
-
gap: spacing["1.5"],
109
+
gap: gap["sm"],
110
110
display: "flex",
111
111
flexDirection: "column",
112
112
flexGrow: 1,
+5
-5
apps/docs/src/components/theme/usePopoverStyles.ts
+5
-5
apps/docs/src/components/theme/usePopoverStyles.ts
···
6
6
} from "./animations.stylex";
7
7
import { radius } from "./radius.stylex";
8
8
import { ui } from "./semantic-color.stylex";
9
+
import { size as sizeSpace } from "./semantic-spacing.stylex";
9
10
import { shadow } from "./shadow.stylex";
10
-
import { spacing } from "./spacing.stylex";
11
11
12
12
const styles = stylex.create({
13
13
popover: {
···
19
19
},
20
20
animation: {
21
21
"--origin-x": {
22
-
":is([data-placement=left],[data-placement=left] > *)": spacing["4"],
23
-
":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`,
22
+
":is([data-placement=left],[data-placement=left] > *)": sizeSpace["2xl"],
23
+
":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["2xl"]} * -1)`,
24
24
},
25
25
"--origin-y": {
26
-
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`,
27
-
":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
26
+
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["2xl"]} * -1)`,
27
+
":is([data-placement=top],[data-placement=top] > *)": sizeSpace["2xl"],
28
28
},
29
29
opacity: {
30
30
default: 1,
+1
-1
apps/docs/src/components/time-field/index.tsx
+1
-1
apps/docs/src/components/time-field/index.tsx
+14
-15
apps/docs/src/components/toast/Toast.tsx
+14
-15
apps/docs/src/components/toast/Toast.tsx
···
28
28
uiColor,
29
29
warningColor,
30
30
} from "../theme/color.stylex";
31
-
import { spacing } from "../theme/spacing.stylex";
31
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
32
32
import { lineHeight, typeramp } from "../theme/typography.stylex";
33
33
import { usePopoverStyles } from "../theme/usePopoverStyles";
34
34
import { toasts } from "./queue";
35
-
import { shadow } from "../theme/shadow.stylex";
36
35
37
36
const styles = stylex.create({
38
37
region: {
39
-
gap: spacing["2"],
38
+
gap: gap["md"],
40
39
outline: "none",
41
40
display: "flex",
42
41
flexDirection: "column-reverse",
43
42
position: "fixed",
44
43
zIndex: 9999,
45
-
bottom: spacing["4"],
46
-
right: spacing["4"],
44
+
bottom: verticalSpace["3xl"],
45
+
right: horizontalSpace["3xl"],
47
46
},
48
47
toast: {
49
-
gap: spacing["4"],
48
+
gap: gap["2xl"],
50
49
alignItems: "center",
51
50
display: "flex",
52
51
flexDirection: "row",
53
52
justifyContent: "space-between",
54
-
minWidth: spacing["60"],
55
-
paddingBottom: spacing["3"],
56
-
paddingLeft: spacing["4"],
57
-
paddingRight: spacing["4"],
58
-
paddingTop: spacing["3"],
53
+
minWidth: sizeSpace["23xl"],
54
+
paddingBottom: verticalSpace["xl"],
55
+
paddingLeft: horizontalSpace["3xl"],
56
+
paddingRight: horizontalSpace["3xl"],
57
+
paddingTop: verticalSpace["xl"],
59
58
},
60
59
content: {
61
60
flex: "1 1 auto",
62
-
gap: spacing["2.5"],
61
+
gap: gap["lg"],
63
62
display: "flex",
64
63
flexDirection: "column",
65
64
minWidth: 0,
···
97
96
},
98
97
flexShrink: 0,
99
98
pointerEvents: "none",
100
-
height: spacing["4"],
101
-
width: spacing["4"],
99
+
height: sizeSpace["2xl"],
100
+
width: sizeSpace["2xl"],
102
101
},
103
102
},
104
103
critical: {
···
158
157
</Text>
159
158
)}
160
159
</ToastContent>
161
-
<Flex direction="row" gap="1">
160
+
<Flex direction="row" gap="xs">
162
161
{toast.content.action && (
163
162
<Button
164
163
size="sm"
+10
-10
apps/docs/src/components/toolbar/index.tsx
+10
-10
apps/docs/src/components/toolbar/index.tsx
···
16
16
import type { StyleXComponentProps } from "../theme/types";
17
17
18
18
import { uiColor } from "../theme/color.stylex";
19
-
import { spacing } from "../theme/spacing.stylex";
19
+
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
20
20
21
21
const styles = stylex.create({
22
22
toolbar: {
23
-
gap: spacing["1"],
23
+
gap: gap["xs"],
24
24
display: "flex",
25
25
flexWrap: "wrap",
26
26
},
···
40
40
":is([data-orientation=vertical] *)": "1px",
41
41
},
42
42
marginBottom: {
43
-
":is([data-orientation=horizontal] *)": spacing["1"],
44
-
":is([data-orientation=vertical] *)": spacing["2"],
43
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
44
+
":is([data-orientation=vertical] *)": sizeSpace["sm"],
45
45
},
46
46
marginLeft: {
47
-
":is([data-orientation=horizontal] *)": spacing["2"],
48
-
":is([data-orientation=vertical] *)": spacing["1"],
47
+
":is([data-orientation=horizontal] *)": sizeSpace["sm"],
48
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
49
49
},
50
50
marginRight: {
51
-
":is([data-orientation=horizontal] *)": spacing["2"],
52
-
":is([data-orientation=vertical] *)": spacing["1"],
51
+
":is([data-orientation=horizontal] *)": sizeSpace["sm"],
52
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
53
53
},
54
54
marginTop: {
55
-
":is([data-orientation=horizontal] *)": spacing["1"],
56
-
":is([data-orientation=vertical] *)": spacing["2"],
55
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
56
+
":is([data-orientation=vertical] *)": sizeSpace["sm"],
57
57
},
58
58
width: {
59
59
":is([data-orientation=horizontal] *)": "1px",
+5
-5
apps/docs/src/components/tooltip/index.tsx
+5
-5
apps/docs/src/components/tooltip/index.tsx
···
15
15
import { animationDuration } from "../theme/animations.stylex";
16
16
import { uiInverted } from "../theme/color.stylex";
17
17
import { radius } from "../theme/radius.stylex";
18
+
import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
18
19
import { shadow } from "../theme/shadow.stylex";
19
-
import { spacing } from "../theme/spacing.stylex";
20
20
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
21
21
22
22
const tooltipStyle = stylex.create({
···
29
29
fontFamily: fontFamily["sans"],
30
30
fontSize: fontSize["sm"],
31
31
lineHeight: lineHeight["sm"],
32
-
paddingBottom: spacing["1"],
33
-
paddingLeft: spacing["2"],
34
-
paddingRight: spacing["2"],
35
-
paddingTop: spacing["1"],
32
+
paddingBottom: verticalSpace["xs"],
33
+
paddingLeft: horizontalSpace["md"],
34
+
paddingRight: horizontalSpace["md"],
35
+
paddingTop: verticalSpace["xs"],
36
36
37
37
"--origin": {
38
38
":is([data-placement=bottom])": "translateY(-4px)",
+11
-11
apps/docs/src/components/tree/index.tsx
+11
-11
apps/docs/src/components/tree/index.tsx
···
25
25
import { mediaQueries } from "../theme/media-queries.stylex";
26
26
import { radius } from "../theme/radius.stylex";
27
27
import { ui } from "../theme/semantic-color.stylex";
28
-
import { spacing } from "../theme/spacing.stylex";
28
+
import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex";
29
29
import {
30
30
estimatedRowHeights,
31
31
useListBoxItemStyles,
···
36
36
position: "relative",
37
37
},
38
38
itemInner: {
39
-
gap: spacing["1"],
40
-
paddingLeft: spacing["0.5"],
39
+
gap: gap["xs"],
40
+
paddingLeft: horizontalSpace["xxs"],
41
41
},
42
42
selected: {
43
43
backgroundColor: primaryColor.component2,
44
44
},
45
45
spacer: {
46
-
width: `calc((var(--tree-item-level, 0) - 1) * ${spacing["3"]})`,
46
+
width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["md"]})`,
47
47
},
48
48
content: {
49
-
gap: spacing["2"],
49
+
gap: gap["md"],
50
50
alignItems: "center",
51
51
display: "flex",
52
52
flexGrow: 1,
···
78
78
79
79
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
80
80
":is(*) svg": {
81
-
height: spacing["3"],
82
-
width: spacing["3"],
81
+
height: sizeSpace["md"],
82
+
width: sizeSpace["md"],
83
83
},
84
84
},
85
85
addon: {
86
-
marginBottom: `calc(${spacing["2"]} * -1)`,
87
-
marginTop: `calc(${spacing["2"]} * -1)`,
86
+
marginBottom: `calc(${sizeSpace["sm"]} * -1)`,
87
+
marginTop: `calc(${sizeSpace["sm"]} * -1)`,
88
88
},
89
89
dragButtonWrapper: {
90
90
opacity: {
···
107
107
display: "flex",
108
108
justifyContent: "center",
109
109
110
-
height: spacing["8"],
111
-
width: spacing["8"],
110
+
height: sizeSpace["6xl"],
111
+
width: sizeSpace["6xl"],
112
112
},
113
113
});
114
114
+21
-21
apps/docs/src/components/typography/index.tsx
+21
-21
apps/docs/src/components/typography/index.tsx
···
20
20
import { uiColor } from "../theme/color.stylex";
21
21
import { radius } from "../theme/radius.stylex";
22
22
import { critical, ui } from "../theme/semantic-color.stylex";
23
-
import { spacing } from "../theme/spacing.stylex";
23
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
24
24
import {
25
25
fontFamily,
26
26
fontSize,
···
30
30
31
31
const styles = stylex.create({
32
32
pre: {
33
-
padding: spacing["4"],
33
+
padding: sizeSpace["2xl"],
34
34
borderColor: uiColor.border2,
35
35
borderRadius: radius.lg,
36
36
borderStyle: "solid",
···
38
38
39
39
cornerShape: "squircle",
40
40
position: "relative",
41
-
marginBottom: spacing["8"],
42
-
marginTop: spacing["8"],
41
+
marginBottom: verticalSpace["7xl"],
42
+
marginTop: verticalSpace["7xl"],
43
43
},
44
44
copyButton: {
45
45
position: "absolute",
46
-
right: spacing["3"],
47
-
top: spacing["2.5"],
46
+
right: horizontalSpace["xl"],
47
+
top: verticalSpace["lg"],
48
48
},
49
49
blockquote: {
50
-
gap: spacing["5"],
50
+
gap: gap["4xl"],
51
51
color: ui.textDim,
52
52
display: "flex",
53
53
flexDirection: "column",
···
56
56
borderLeftStyle: "solid",
57
57
borderLeftWidth: 1,
58
58
marginBottom: 0,
59
-
marginLeft: spacing["2"],
59
+
marginLeft: horizontalSpace["md"],
60
60
marginRight: 0,
61
61
marginTop: 0,
62
-
paddingBottom: spacing["2"],
63
-
paddingLeft: spacing["4"],
64
-
paddingTop: spacing["2"],
62
+
paddingBottom: verticalSpace["md"],
63
+
paddingLeft: horizontalSpace["3xl"],
64
+
paddingTop: verticalSpace["md"],
65
65
},
66
66
unorderedList: {
67
67
margin: 0,
68
-
gap: spacing["3"],
68
+
gap: gap["xl"],
69
69
display: "flex",
70
70
flexDirection: "column",
71
71
listStyleType: "disc",
72
-
paddingLeft: spacing["8"],
72
+
paddingLeft: horizontalSpace["7xl"],
73
73
},
74
74
orderedList: {
75
75
margin: 0,
76
-
gap: spacing["3"],
76
+
gap: gap["xl"],
77
77
display: "flex",
78
78
flexDirection: "column",
79
79
listStyleType: "decimal",
80
-
paddingLeft: spacing["8"],
80
+
paddingLeft: horizontalSpace["7xl"],
81
81
},
82
82
listItem: {
83
83
fontFamily: fontFamily["sans"],
84
84
fontSize: fontSize["base"],
85
85
lineHeight: lineHeight["base"],
86
-
paddingLeft: spacing["1"],
86
+
paddingLeft: horizontalSpace["xs"],
87
87
},
88
88
inlineCode: {
89
89
borderRadius: radius.sm,
90
90
cornerShape: "squircle",
91
91
fontSize: "0.95em",
92
92
position: "relative",
93
-
paddingBottom: spacing["1"],
94
-
paddingLeft: spacing["1"],
95
-
paddingRight: spacing["1"],
96
-
paddingTop: spacing["1"],
93
+
paddingBottom: verticalSpace["xs"],
94
+
paddingLeft: horizontalSpace["xs"],
95
+
paddingRight: horizontalSpace["xs"],
96
+
paddingTop: verticalSpace["xs"],
97
97
top: "-0.01em",
98
98
},
99
99
underline: {
···
430
430
return (
431
431
<Flex
432
432
direction="row"
433
-
gap="2"
433
+
gap="md"
434
434
align="center"
435
435
data-heading-link
436
436
data-hovered={isHovered || undefined}
+1
apps/docs/src/components/typography/text.tsx
+1
apps/docs/src/components/typography/text.tsx
+3
-3
apps/docs/src/components/window-splitter/index.tsx
+3
-3
apps/docs/src/components/window-splitter/index.tsx
···
17
17
import type { StyleXComponentProps } from "../theme/types";
18
18
19
19
import { primaryColor, uiColor } from "../theme/color.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
20
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
21
21
22
22
const styles = stylex.create({
23
23
panel: {
···
53
53
54
54
height: {
55
55
":is([data-handle-orientation='horizontal'] *)": "100%",
56
-
":is([data-handle-orientation='vertical'] *)": spacing["2"],
56
+
":is([data-handle-orientation='vertical'] *)": sizeSpace["sm"],
57
57
},
58
58
width: {
59
-
":is([data-handle-orientation='horizontal'] *)": spacing["2"],
59
+
":is([data-handle-orientation='horizontal'] *)": sizeSpace["sm"],
60
60
":is([data-handle-orientation='vertical'] *)": "100%",
61
61
},
62
62
},
+259
packages/hip-ui/scripts/codemods/migrate-spacing-to-semantic-spacing.cjs
+259
packages/hip-ui/scripts/codemods/migrate-spacing-to-semantic-spacing.cjs
···
1
+
/**
2
+
* jscodeshift transform:
3
+
* - Converts `spacing["..."]` usages to semantic spacing categories.
4
+
* - Rewrites imports from `spacing.stylex` to `semantic-spacing.stylex`.
5
+
*
6
+
* Example:
7
+
* pnpm -C packages/hip-ui exec jscodeshift \
8
+
* -t scripts/codemods/migrate-spacing-to-semantic-spacing.cjs \
9
+
* src/components --extensions=ts,tsx --parser=tsx
10
+
*/
11
+
/* eslint-disable unicorn/no-array-callback-reference, unicorn/no-array-method-this-argument, unicorn/no-array-for-each */
12
+
13
+
"use strict";
14
+
15
+
const HORIZONTAL_PROPS = new Set([
16
+
"left",
17
+
"right",
18
+
"paddingLeft",
19
+
"paddingRight",
20
+
"marginLeft",
21
+
"marginRight",
22
+
"insetInline",
23
+
"insetInlineStart",
24
+
"insetInlineEnd",
25
+
"scrollPaddingInline",
26
+
"scrollPaddingInlineStart",
27
+
"scrollPaddingInlineEnd",
28
+
"scrollMarginInline",
29
+
"scrollMarginInlineStart",
30
+
"scrollMarginInlineEnd",
31
+
]);
32
+
33
+
const VERTICAL_PROPS = new Set([
34
+
"top",
35
+
"bottom",
36
+
"paddingTop",
37
+
"paddingBottom",
38
+
"marginTop",
39
+
"marginBottom",
40
+
"insetBlock",
41
+
"insetBlockStart",
42
+
"insetBlockEnd",
43
+
"scrollPaddingBlock",
44
+
"scrollPaddingBlockStart",
45
+
"scrollPaddingBlockEnd",
46
+
"scrollMarginBlock",
47
+
"scrollMarginBlockStart",
48
+
"scrollMarginBlockEnd",
49
+
]);
50
+
51
+
const SIZE_PROPS = new Set([
52
+
"width",
53
+
"height",
54
+
"minWidth",
55
+
"maxWidth",
56
+
"minHeight",
57
+
"maxHeight",
58
+
"inlineSize",
59
+
"blockSize",
60
+
"minInlineSize",
61
+
"maxInlineSize",
62
+
"minBlockSize",
63
+
"maxBlockSize",
64
+
"lineHeight",
65
+
]);
66
+
67
+
const IMPORT_ALIAS = {
68
+
gap: "gapSpace",
69
+
horizontalSpace: "horizontalSpace",
70
+
size: "sizeSpace",
71
+
verticalSpace: "verticalSpace",
72
+
};
73
+
74
+
function getPropertyName(propNode) {
75
+
if (!propNode) return null;
76
+
const key = propNode.key;
77
+
if (!key) return null;
78
+
if (key.type === "Identifier") return key.name;
79
+
if (key.type === "Literal" && typeof key.value === "string") return key.value;
80
+
if (key.type === "StringLiteral") return key.value;
81
+
return null;
82
+
}
83
+
84
+
function isNumericSpacingKey(key) {
85
+
return (
86
+
typeof key === "string" && /^(0|0\.5|[1-9][0-9]*(\.[0-9]+)?)$/.test(key)
87
+
);
88
+
}
89
+
90
+
function inferSemanticGroup(propertyName) {
91
+
if (!propertyName) return "size";
92
+
if (propertyName.toLowerCase().includes("gap")) return "gap";
93
+
if (HORIZONTAL_PROPS.has(propertyName)) return "horizontalSpace";
94
+
if (VERTICAL_PROPS.has(propertyName)) return "verticalSpace";
95
+
if (SIZE_PROPS.has(propertyName)) return "size";
96
+
97
+
// Handle directional shorthand groups.
98
+
if (propertyName.startsWith("paddingInline")) return "horizontalSpace";
99
+
if (propertyName.startsWith("marginInline")) return "horizontalSpace";
100
+
if (propertyName.startsWith("paddingBlock")) return "verticalSpace";
101
+
if (propertyName.startsWith("marginBlock")) return "verticalSpace";
102
+
103
+
return "size";
104
+
}
105
+
106
+
function getNearestObjectProperty(path) {
107
+
let current = path.parentPath;
108
+
while (current) {
109
+
if (
110
+
current.value &&
111
+
(current.value.type === "Property" ||
112
+
current.value.type === "ObjectProperty")
113
+
) {
114
+
return current.value;
115
+
}
116
+
current = current.parentPath;
117
+
}
118
+
return null;
119
+
}
120
+
121
+
function ensureSemanticImport(j, root, sourceValue, usedGroups) {
122
+
const semanticSource = sourceValue.replace(
123
+
"spacing.stylex",
124
+
"semantic-spacing.stylex",
125
+
);
126
+
const requiredSpecifiers = Object.keys(usedGroups).map((group) => {
127
+
const local = IMPORT_ALIAS[group];
128
+
if (local === group) {
129
+
return j.importSpecifier(j.identifier(group));
130
+
}
131
+
return j.importSpecifier(j.identifier(group), j.identifier(local));
132
+
});
133
+
134
+
const existingImport = root.find(j.ImportDeclaration, {
135
+
source: { value: semanticSource },
136
+
});
137
+
138
+
if (existingImport.size() === 0) {
139
+
const spacingImport = root.find(j.ImportDeclaration, {
140
+
source: { value: sourceValue },
141
+
});
142
+
if (spacingImport.size() > 0) {
143
+
spacingImport.insertAfter(
144
+
j.importDeclaration(requiredSpecifiers, j.literal(semanticSource)),
145
+
);
146
+
} else {
147
+
root
148
+
.get()
149
+
.node.program.body.unshift(
150
+
j.importDeclaration(requiredSpecifiers, j.literal(semanticSource)),
151
+
);
152
+
}
153
+
return;
154
+
}
155
+
156
+
const existingNode = existingImport.at(0).get().node;
157
+
const existingLocals = new Set(
158
+
(existingNode.specifiers || [])
159
+
.filter((specifier) => specifier.type === "ImportSpecifier")
160
+
.map((specifier) =>
161
+
specifier.local ? specifier.local.name : specifier.imported.name,
162
+
),
163
+
);
164
+
165
+
for (const specifier of requiredSpecifiers) {
166
+
const localName = specifier.local
167
+
? specifier.local.name
168
+
: specifier.imported.name;
169
+
if (!existingLocals.has(localName)) {
170
+
existingNode.specifiers.push(specifier);
171
+
}
172
+
}
173
+
}
174
+
175
+
module.exports = function transform(fileInfo, api) {
176
+
const j = api.jscodeshift;
177
+
const root = j(fileInfo.source);
178
+
179
+
const spacingImports = root.find(j.ImportDeclaration).filter((path) => {
180
+
const source = path.value.source.value;
181
+
return (
182
+
typeof source === "string" &&
183
+
source.endsWith("spacing.stylex") &&
184
+
!source.endsWith("semantic-spacing.stylex")
185
+
);
186
+
});
187
+
188
+
if (spacingImports.size() === 0) {
189
+
return fileInfo.source;
190
+
}
191
+
192
+
const usedGroups = {};
193
+
let transformedAnyUsage = false;
194
+
195
+
root
196
+
.find(j.MemberExpression, {
197
+
object: { type: "Identifier", name: "spacing" },
198
+
computed: true,
199
+
})
200
+
.forEach((path) => {
201
+
const property = path.value.property;
202
+
const numericKey =
203
+
property.type === "Literal"
204
+
? property.value
205
+
: property.type === "StringLiteral"
206
+
? property.value
207
+
: null;
208
+
209
+
if (!isNumericSpacingKey(numericKey)) return;
210
+
211
+
const parentProperty = getNearestObjectProperty(path);
212
+
const propertyName = getPropertyName(parentProperty);
213
+
const semanticGroup = inferSemanticGroup(propertyName);
214
+
const alias = IMPORT_ALIAS[semanticGroup];
215
+
usedGroups[semanticGroup] = true;
216
+
217
+
path.replace(
218
+
j.memberExpression(
219
+
j.identifier(alias),
220
+
j.literal(String(numericKey)),
221
+
true,
222
+
),
223
+
);
224
+
transformedAnyUsage = true;
225
+
});
226
+
227
+
if (!transformedAnyUsage) {
228
+
return fileInfo.source;
229
+
}
230
+
231
+
const spacingImportNodes = spacingImports.nodes();
232
+
for (const importNode of spacingImportNodes) {
233
+
ensureSemanticImport(j, root, importNode.source.value, usedGroups);
234
+
}
235
+
236
+
// Remove `spacing` from old imports when no longer referenced.
237
+
const spacingRefs = root.find(j.Identifier, { name: "spacing" }).size();
238
+
if (spacingRefs === 0) {
239
+
spacingImports.forEach((path) => {
240
+
const originalSpecifiers = path.value.specifiers || [];
241
+
const nextSpecifiers = originalSpecifiers.filter((specifier) => {
242
+
return !(
243
+
specifier.type === "ImportSpecifier" &&
244
+
specifier.imported &&
245
+
specifier.imported.name === "spacing"
246
+
);
247
+
});
248
+
249
+
if (nextSpecifiers.length === 0) {
250
+
j(path).remove();
251
+
} else {
252
+
path.value.specifiers = nextSpecifiers;
253
+
}
254
+
});
255
+
}
256
+
257
+
return root.toSource({ quote: "double", trailingComma: true });
258
+
};
259
+
/* eslint-enable unicorn/no-array-callback-reference, unicorn/no-array-method-this-argument, unicorn/no-array-for-each */