A design system in a box.
hip-ui.tngl.io/docs/introduction
phase 1
+1100
-964
+16
-16
packages/hip-ui/src/components/alert-dialog/index.tsx
+16
-16
packages/hip-ui/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["2"],
31
+
paddingTop: verticalSpace["2"],
32
32
},
33
33
header: {
34
-
gap: spacing["2"],
34
+
gap: gap["2"],
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["8"],
40
+
paddingLeft: horizontalSpace["4"],
41
+
paddingRight: horizontalSpace["4"],
42
+
paddingTop: verticalSpace["2"],
43
43
},
44
44
description: {
45
-
paddingBottom: spacing["4"],
46
-
paddingLeft: spacing["4"],
47
-
paddingRight: spacing["4"],
48
-
paddingTop: spacing["4"],
45
+
paddingBottom: verticalSpace["4"],
46
+
paddingLeft: horizontalSpace["4"],
47
+
paddingRight: horizontalSpace["4"],
48
+
paddingTop: verticalSpace["4"],
49
49
},
50
50
footer: {
51
-
gap: spacing["2"],
51
+
gap: gap["2"],
52
52
display: "flex",
53
53
justifyContent: "flex-end",
54
-
paddingBottom: spacing["2"],
55
-
paddingLeft: spacing["4"],
56
-
paddingRight: spacing["4"],
54
+
paddingBottom: verticalSpace["2"],
55
+
paddingLeft: horizontalSpace["4"],
56
+
paddingRight: horizontalSpace["4"],
57
57
},
58
58
});
59
59
+1
-1
packages/hip-ui/src/components/alert/alert-config.ts
+1
-1
packages/hip-ui/src/components/alert/alert-config.ts
+20
-20
packages/hip-ui/src/components/alert/index.tsx
+20
-20
packages/hip-ui/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["2.5"],
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["10"],
57
+
paddingBottom: verticalSpace["2.5"],
58
+
paddingLeft: horizontalSpace["4"],
59
+
paddingRight: horizontalSpace["4"],
60
+
paddingTop: verticalSpace["2.5"],
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["4"],
65
+
paddingRight: horizontalSpace["3"],
66
+
paddingTop: verticalSpace["4"],
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["2"],
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["2"],
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["2"],
100
100
},
101
101
content: {
102
102
gridArea: "content",
103
-
gap: spacing["3"],
103
+
gap: gap["3"],
104
104
display: "flex",
105
105
flexDirection: "column",
106
106
},
107
107
contentWithDescription: {
108
-
paddingTop: spacing["0.5"],
108
+
paddingTop: verticalSpace["0.5"],
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["5"],
123
+
width: sizeSpace["5"],
124
124
},
125
125
},
126
126
action: {
127
127
gridArea: "action",
128
-
gap: spacing["2"],
128
+
gap: gap["2"],
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["1"]} * -1)`,
138
+
marginTop: `calc(${sizeSpace["1"]} * -1)`,
139
139
},
140
140
actionAndClose: {
141
141
alignSelf: "center",
+1
-1
packages/hip-ui/src/components/autocomplete/autocomplete-config.ts
+1
-1
packages/hip-ui/src/components/autocomplete/autocomplete-config.ts
+2
-2
packages/hip-ui/src/components/autocomplete/index.tsx
+2
-2
packages/hip-ui/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["1"],
34
34
top: "100%",
35
35
width: "100%",
36
36
},
+1
-1
packages/hip-ui/src/components/avatar/avatar-config.ts
+1
-1
packages/hip-ui/src/components/avatar/avatar-config.ts
+9
-9
packages/hip-ui/src/components/avatar/index.tsx
+9
-9
packages/hip-ui/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["6"],
45
+
width: sizeSpace["6"],
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["8"],
53
+
width: sizeSpace["8"],
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["10"],
61
+
width: sizeSpace["10"],
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["14"],
69
+
width: sizeSpace["14"],
70
70
},
71
71
image: {
72
72
objectFit: "cover",
+1
-1
packages/hip-ui/src/components/badge/badge-config.ts
+1
-1
packages/hip-ui/src/components/badge/badge-config.ts
+17
-17
packages/hip-ui/src/components/badge/index.tsx
+17
-17
packages/hip-ui/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["1"],
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["5"],
36
+
paddingBottom: verticalSpace["0.5"],
37
+
paddingLeft: horizontalSpace["2.5"],
38
+
paddingRight: horizontalSpace["2.5"],
39
+
paddingTop: verticalSpace["0.5"],
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["3"],
46
+
width: sizeSpace["3"],
47
47
},
48
48
},
49
49
md: {
50
-
gap: spacing["1.5"],
50
+
gap: gap["1.5"],
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["6"],
53
+
paddingBottom: verticalSpace["0.5"],
54
+
paddingLeft: horizontalSpace["3.5"],
55
+
paddingRight: horizontalSpace["3.5"],
56
+
paddingTop: verticalSpace["0.5"],
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["3.5"],
63
+
width: sizeSpace["3.5"],
64
64
},
65
65
},
66
66
});
+3
-3
packages/hip-ui/src/components/calendar/index.tsx
+3
-3
packages/hip-ui/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["2"],
41
41
alignItems: "center",
42
42
display: "flex",
43
43
},
44
44
headerContent: {
45
-
gap: spacing["0.5"],
45
+
gap: gap["0.5"],
46
46
alignItems: "center",
47
47
display: "flex",
48
48
flexGrow: 1,
+14
-14
packages/hip-ui/src/components/card/index.tsx
+14
-14
packages/hip-ui/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["4"],
36
+
":is([data-card-size=md])": sizeSpace["4"],
37
+
":is([data-card-size=sm])": sizeSpace["1"],
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["8"],
41
+
":is([data-card-size=md])": sizeSpace["6"],
42
+
":is([data-card-size=sm])": sizeSpace["3"],
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["8"],
46
+
":is([data-card-size=md])": sizeSpace["6"],
47
+
":is([data-card-size=sm])": sizeSpace["3"],
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["6"],
77
77
},
78
78
cardHeaderAction: {
79
79
gridArea: "action",
80
-
gap: spacing["1"],
80
+
gap: gap["1"],
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["3"],
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["2"],
123
123
display: "flex",
124
124
justifyContent: "flex-end",
125
125
},
+5
-5
packages/hip-ui/src/components/checkbox/index.tsx
+5
-5
packages/hip-ui/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["2.5"],
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["4"],
50
+
width: sizeSpace["4"],
51
51
},
52
52
checked: {
53
53
color: "white",
54
54
},
55
55
group: {
56
-
gap: spacing["3"],
56
+
gap: gap["3"],
57
57
display: "flex",
58
58
flexDirection: "column",
59
59
},
+11
-11
packages/hip-ui/src/components/color-area/index.tsx
+11
-11
packages/hip-ui/src/components/color-area/index.tsx
···
13
13
14
14
import { mediaQueries } from "../theme/media-queries.stylex";
15
15
import { radius } from "../theme/radius.stylex";
16
-
import { spacing } from "../theme/spacing.stylex";
16
+
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
17
17
18
18
const styles = stylex.create({
19
19
colorArea: {
···
37
37
":is([data-disabled])": "grayscale(1)",
38
38
},
39
39
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"],
40
+
default: sizeSpace["4"],
41
+
":is([data-focus-visible])": sizeSpace["6"],
42
+
":is([data-size=lg] *)": sizeSpace["6"],
43
+
":is([data-size=md] *)": sizeSpace["4"],
44
+
":is([data-size=sm] *)": sizeSpace["3"],
45
45
},
46
46
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"],
47
+
default: sizeSpace["4"],
48
+
":is([data-focus-visible])": sizeSpace["6"],
49
+
":is([data-size=lg] *)": sizeSpace["6"],
50
+
":is([data-size=md] *)": sizeSpace["4"],
51
+
":is([data-size=sm] *)": sizeSpace["3"],
52
52
},
53
53
},
54
54
aspectRatio: (aspectRatio: number) => ({
+1
-1
packages/hip-ui/src/components/color-field/color-field-config.ts
+1
-1
packages/hip-ui/src/components/color-field/color-field-config.ts
+12
-12
packages/hip-ui/src/components/color-picker/index.tsx
+12
-12
packages/hip-ui/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["2"],
49
+
":is([data-size=sm])": sizeSpace["1"],
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["3"],
61
+
paddingLeft: horizontalSpace["2"],
62
+
paddingRight: horizontalSpace["2"],
63
+
paddingTop: verticalSpace["2"],
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["2"]} * -1)`,
72
+
marginRight: `calc(${sizeSpace["2"]} * -1)`,
73
+
width: `calc(100% + ${sizeSpace["2"]} * 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["1"],
83
+
paddingRight: horizontalSpace["1"],
84
84
},
85
85
});
86
86
+5
-5
packages/hip-ui/src/components/color-slider/index.tsx
+5
-5
packages/hip-ui/src/components/color-slider/index.tsx
···
16
16
import { uiColor } from "../theme/color.stylex";
17
17
import { mediaQueries } from "../theme/media-queries.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
import { fontSize, lineHeight } from "../theme/typography.stylex";
21
21
22
22
const styles = stylex.create({
23
23
colorSlider: {
24
-
gap: spacing["2"],
24
+
gap: gap["2"],
25
25
gridTemplateAreas: {
26
26
default: "'track'",
27
27
":has(label,[data-slider-output])": "'label value-label' 'track track'",
···
54
54
borderRadius: radius.full,
55
55
cornerShape: "squircle",
56
56
height: {
57
-
":is([data-size=lg] *)": spacing["6"],
58
-
":is([data-size=md] *)": spacing["4"],
59
-
":is([data-size=sm] *)": spacing["3"],
57
+
":is([data-size=lg] *)": sizeSpace["6"],
58
+
":is([data-size=md] *)": sizeSpace["4"],
59
+
":is([data-size=sm] *)": sizeSpace["3"],
60
60
},
61
61
width: "100%",
62
62
},
+3
-3
packages/hip-ui/src/components/color-swatch-picker/index.tsx
+3
-3
packages/hip-ui/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["2"],
25
+
":is([data-size=sm])": sizeSpace["1"],
26
26
},
27
27
display: "flex",
28
28
flexDirection: {
+7
-7
packages/hip-ui/src/components/color-swatch/index.tsx
+7
-7
packages/hip-ui/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["4"],
27
+
width: sizeSpace["4"],
28
28
},
29
29
swatchMd: {
30
30
borderRadius: radius.sm,
31
-
height: spacing["6"],
32
-
width: spacing["6"],
31
+
height: sizeSpace["6"],
32
+
width: sizeSpace["6"],
33
33
},
34
34
swatchLg: {
35
35
borderRadius: radius.md,
36
-
height: spacing["8"],
37
-
width: spacing["8"],
36
+
height: sizeSpace["8"],
37
+
width: sizeSpace["8"],
38
38
},
39
39
circle: {
40
40
borderRadius: {
+4
-4
packages/hip-ui/src/components/color-wheel/index.tsx
+4
-4
packages/hip-ui/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["6"],
28
+
":is([data-size=md] *)": sizeSpace["4"],
29
+
":is([data-size=sm] *)": sizeSpace["3"],
30
30
},
31
31
width: "100%",
32
32
+1
-1
packages/hip-ui/src/components/combobox/combobox-config.ts
+1
-1
packages/hip-ui/src/components/combobox/combobox-config.ts
+2
-2
packages/hip-ui/src/components/combobox/index.tsx
+2
-2
packages/hip-ui/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["4"],
45
45
display: "flex",
46
46
justifyContent: "center",
47
47
},
+1
-1
packages/hip-ui/src/components/content/content-config.ts
+1
-1
packages/hip-ui/src/components/content/content-config.ts
+19
-19
packages/hip-ui/src/components/content/index.tsx
+19
-19
packages/hip-ui/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["8"],
14
+
marginTop: verticalSpace["8"],
15
15
},
16
16
":is(*) > :is(:has(h2),h2)": {
17
-
marginBottom: spacing["4"],
18
-
marginTop: spacing["8"],
17
+
marginBottom: verticalSpace["4"],
18
+
marginTop: verticalSpace["8"],
19
19
},
20
20
":is(*) > :is(:has(h3),h3)": {
21
-
marginBottom: spacing["5"],
22
-
marginTop: spacing["8"],
21
+
marginBottom: verticalSpace["5"],
22
+
marginTop: verticalSpace["8"],
23
23
},
24
24
":is(*) > :is(:has(h4),h4)": {
25
-
marginBottom: spacing["8"],
26
-
marginTop: spacing["8"],
25
+
marginBottom: verticalSpace["8"],
26
+
marginTop: verticalSpace["8"],
27
27
},
28
28
":is(*) > :is(:has(h5),h5)": {
29
-
marginBottom: spacing["8"],
30
-
marginTop: spacing["8"],
29
+
marginBottom: verticalSpace["8"],
30
+
marginTop: verticalSpace["8"],
31
31
},
32
32
":is(*) > blockquote": {
33
33
marginBottom: 0,
34
-
marginLeft: spacing["2"],
34
+
marginLeft: horizontalSpace["2"],
35
35
marginRight: 0,
36
36
marginTop: 0,
37
-
paddingLeft: spacing["4"],
37
+
paddingLeft: horizontalSpace["4"],
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["5"],
47
+
":is(blockquote *)": sizeSpace["0"],
48
+
":is(li *)": sizeSpace["0"],
49
49
},
50
50
marginTop: {
51
-
default: spacing["5"],
52
-
":is(blockquote *)": spacing["0"],
53
-
":is(li *)": spacing["0"],
51
+
default: sizeSpace["5"],
52
+
":is(blockquote *)": sizeSpace["0"],
53
+
":is(li *)": sizeSpace["0"],
54
54
},
55
55
},
56
56
+1
-1
packages/hip-ui/src/components/date-field/date-field-config.ts
+1
-1
packages/hip-ui/src/components/date-field/date-field-config.ts
+2
-2
packages/hip-ui/src/components/date-picker/index.tsx
+2
-2
packages/hip-ui/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["2"],
52
52
},
53
53
});
54
54
+6
-6
packages/hip-ui/src/components/date-range-picker/index.tsx
+6
-6
packages/hip-ui/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["1"],
56
56
alignItems: "center",
57
57
display: "flex",
58
58
···
63
63
},
64
64
},
65
65
popoverContent: {
66
-
padding: spacing["2"],
66
+
padding: sizeSpace["2"],
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["1"],
71
+
":is([data-size=md] *)": sizeSpace["2"],
72
+
":is([data-size=sm] *)": sizeSpace["1"],
73
73
},
74
74
},
75
75
lastInput: {
+23
-21
packages/hip-ui/src/components/dialog/index.tsx
+23
-21
packages/hip-ui/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["2"],
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["8"],
38
+
paddingBottom: verticalSpace["2"],
39
+
paddingLeft: horizontalSpace["4"],
40
+
paddingRight: horizontalSpace["4"],
41
+
paddingTop: verticalSpace["2"],
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["4"],
51
+
marginTop: verticalSpace["4"],
52
+
paddingLeft: horizontalSpace["4"],
53
+
paddingRight: horizontalSpace["4"],
54
54
},
55
55
body: {
56
-
marginBottom: spacing["4"],
57
-
marginTop: spacing["4"],
58
-
paddingLeft: spacing["4"],
59
-
paddingRight: spacing["4"],
56
+
marginBottom: verticalSpace["4"],
57
+
marginTop: verticalSpace["4"],
58
+
paddingLeft: horizontalSpace["4"],
59
+
paddingRight: horizontalSpace["4"],
60
60
},
61
+
/* eslint-disable @stylexjs/sort-keys -- footer layout + padding order */
61
62
footer: {
62
-
gap: spacing["2"],
63
+
gap: gap["2"],
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["4"],
67
+
paddingLeft: horizontalSpace["4"],
68
+
paddingRight: horizontalSpace["4"],
69
69
position: "sticky",
70
-
bottom: 0,
70
+
paddingTop: verticalSpace["4"],
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 {
+1
-1
packages/hip-ui/src/components/disclosure/disclosure-config.ts
+1
-1
packages/hip-ui/src/components/disclosure/disclosure-config.ts
+8
-8
packages/hip-ui/src/components/disclosure/index.tsx
+8
-8
packages/hip-ui/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["4"]} ${sizeSpace["4"]}`,
34
+
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`,
35
+
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`,
36
36
},
37
37
borderRadius: radius.lg,
38
38
borderWidth: 0,
39
39
40
40
cornerShape: "squircle",
41
-
gap: spacing["2"],
41
+
gap: gap["2"],
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["4"]} ${sizeSpace["4"]}`,
101
+
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`,
102
+
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`,
103
103
},
104
104
},
105
105
});
+1
-1
packages/hip-ui/src/components/drawer/drawer-config.ts
+1
-1
packages/hip-ui/src/components/drawer/drawer-config.ts
+23
-23
packages/hip-ui/src/components/drawer/index.tsx
+23
-23
packages/hip-ui/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["8"]})`,
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["8"]})`,
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["2"],
121
+
paddingTop: verticalSpace["2"],
122
122
},
123
123
header: {
124
-
gap: spacing["2"],
124
+
gap: gap["2"],
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["8"],
129
+
paddingBottom: verticalSpace["2"],
130
+
paddingLeft: horizontalSpace["4"],
131
+
paddingRight: horizontalSpace["4"],
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["4"],
136
+
paddingLeft: horizontalSpace["4"],
137
+
paddingRight: horizontalSpace["4"],
138
+
paddingTop: verticalSpace["4"],
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["4"],
143
+
paddingLeft: horizontalSpace["4"],
144
+
paddingRight: horizontalSpace["4"],
145
+
paddingTop: { default: 0, ":first-child": verticalSpace["4"] },
146
146
},
147
147
footer: {
148
-
gap: spacing["2"],
148
+
gap: gap["2"],
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["2"],
152
+
paddingLeft: horizontalSpace["4"],
153
+
paddingRight: horizontalSpace["4"],
154
+
paddingTop: verticalSpace["4"],
155
155
156
156
borderTopColor: uiColor.border1,
157
157
borderTopStyle: "solid",
+1
-1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
+1
-1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
+9
-9
packages/hip-ui/src/components/editable-text/index.tsx
+9
-9
packages/hip-ui/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["1"]} * -1)`,
48
+
marginLeft: `calc(${sizeSpace["2"]} * -1)`,
49
+
marginRight: `calc(${sizeSpace["2"]} * -1)`,
50
+
marginTop: `calc(${sizeSpace["1"]} * -1)`,
51
+
paddingBottom: verticalSpace["1"],
52
+
paddingLeft: horizontalSpace["2"],
53
+
paddingRight: horizontalSpace["2"],
54
+
paddingTop: verticalSpace["1"],
55
55
},
56
56
});
57
57
+1
-1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
+1
-1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
+10
-10
packages/hip-ui/src/components/empty-state/index.tsx
+10
-10
packages/hip-ui/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["20"],
17
+
":is([data-empty-state-size=md])": sizeSpace["14"],
18
+
":is([data-empty-state-size=sm])": sizeSpace["10"],
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["4"],
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["6"],
66
+
":is([data-empty-state-size=md])": sizeSpace["4"],
67
+
":is([data-empty-state-size=sm])": sizeSpace["2"],
68
68
},
69
69
textAlign: "center",
70
70
},
···
100
100
},
101
101
actions: {
102
102
gridArea: "actions",
103
-
gap: spacing["2"],
103
+
gap: gap["2"],
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["4"],
112
112
},
113
113
},
114
114
});
+2
-2
packages/hip-ui/src/components/file-drop-zone/index.tsx
+2
-2
packages/hip-ui/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["4"],
38
38
borderColor: {
39
39
default: uiColor.border3,
40
40
":is([data-drop-target])": primaryColor.solid1,
+1
-1
packages/hip-ui/src/components/flex/flex-config.ts
+1
-1
packages/hip-ui/src/components/flex/flex-config.ts
+36
-36
packages/hip-ui/src/components/flex/index.tsx
+36
-36
packages/hip-ui/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-0.5": { gap: gapSpace["0.5"] },
29
+
"gap-1": { gap: gapSpace["1"] },
30
+
"gap-1.5": { gap: gapSpace["1.5"] },
31
+
"gap-2": { gap: gapSpace["2"] },
32
+
"gap-2.5": { gap: gapSpace["2.5"] },
33
+
"gap-3": { gap: gapSpace["3"] },
34
+
"gap-3.5": { gap: gapSpace["3.5"] },
35
+
"gap-4": { gap: gapSpace["4"] },
36
+
"gap-5": { gap: gapSpace["5"] },
37
+
"gap-6": { gap: gapSpace["6"] },
38
+
"gap-7": { gap: gapSpace["7"] },
39
+
"gap-8": { gap: gapSpace["8"] },
40
+
"gap-9": { gap: gapSpace["9"] },
41
+
"gap-10": { gap: gapSpace["10"] },
42
+
"gap-11": { gap: gapSpace["11"] },
43
+
"gap-12": { gap: gapSpace["12"] },
44
+
"gap-14": { gap: gapSpace["14"] },
45
+
"gap-16": { gap: gapSpace["16"] },
46
+
"gap-20": { gap: gapSpace["20"] },
47
+
"gap-24": { gap: gapSpace["24"] },
48
+
"gap-28": { gap: gapSpace["28"] },
49
+
"gap-32": { gap: gapSpace["32"] },
50
+
"gap-36": { gap: gapSpace["36"] },
51
+
"gap-40": { gap: gapSpace["40"] },
52
+
"gap-44": { gap: gapSpace["44"] },
53
+
"gap-48": { gap: gapSpace["48"] },
54
+
"gap-52": { gap: gapSpace["52"] },
55
+
"gap-56": { gap: gapSpace["56"] },
56
+
"gap-60": { gap: gapSpace["60"] },
57
+
"gap-64": { gap: gapSpace["64"] },
58
+
"gap-72": { gap: gapSpace["72"] },
59
+
"gap-80": { gap: gapSpace["80"] },
60
+
"gap-96": { gap: gapSpace["96"] },
61
61
});
62
62
63
63
export interface FlexProps extends StyleXComponentProps<
···
97
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"
98
98
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
99
99
*/
100
-
gap?: Spacing;
100
+
gap?: Gap;
101
101
/**
102
102
* Whether the flex container is inline.
103
103
* @default false
+1
-1
packages/hip-ui/src/components/form/form-config.ts
+1
-1
packages/hip-ui/src/components/form/form-config.ts
···
3
3
export const formConfig: ComponentConfig = {
4
4
name: "form",
5
5
filepath: "./index.tsx",
6
-
hipDependencies: ["../theme/spacing.stylex.tsx", "../theme/types.ts"],
6
+
hipDependencies: ["../theme/semantic-spacing.stylex.tsx", "../theme/types.ts"],
7
7
dependencies: {
8
8
"react-aria-components": "^1.13.0",
9
9
},
+2
-2
packages/hip-ui/src/components/form/index.tsx
+2
-2
packages/hip-ui/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["4"],
15
15
display: "flex",
16
16
flexDirection: "column",
17
17
},
+1
-1
packages/hip-ui/src/components/grid/grid-config.ts
+1
-1
packages/hip-ui/src/components/grid/grid-config.ts
+70
-70
packages/hip-ui/src/components/grid/index.tsx
+70
-70
packages/hip-ui/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 } 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"] },
38
+
"row-gap-0.5": { rowGap: gap["0.5"] },
39
+
"row-gap-1": { rowGap: gap["1"] },
40
+
"row-gap-1.5": { rowGap: gap["1.5"] },
41
+
"row-gap-2": { rowGap: gap["2"] },
42
+
"row-gap-2.5": { rowGap: gap["2.5"] },
43
+
"row-gap-3": { rowGap: gap["3"] },
44
+
"row-gap-3.5": { rowGap: gap["3.5"] },
45
+
"row-gap-4": { rowGap: gap["4"] },
46
+
"row-gap-5": { rowGap: gap["5"] },
47
+
"row-gap-6": { rowGap: gap["6"] },
48
+
"row-gap-7": { rowGap: gap["7"] },
49
+
"row-gap-8": { rowGap: gap["8"] },
50
+
"row-gap-9": { rowGap: gap["9"] },
51
+
"row-gap-10": { rowGap: gap["10"] },
52
+
"row-gap-11": { rowGap: gap["11"] },
53
+
"row-gap-12": { rowGap: gap["12"] },
54
+
"row-gap-14": { rowGap: gap["14"] },
55
+
"row-gap-16": { rowGap: gap["16"] },
56
+
"row-gap-20": { rowGap: gap["20"] },
57
+
"row-gap-24": { rowGap: gap["24"] },
58
+
"row-gap-28": { rowGap: gap["28"] },
59
+
"row-gap-32": { rowGap: gap["32"] },
60
+
"row-gap-36": { rowGap: gap["36"] },
61
+
"row-gap-40": { rowGap: gap["40"] },
62
+
"row-gap-44": { rowGap: gap["44"] },
63
+
"row-gap-48": { rowGap: gap["48"] },
64
+
"row-gap-52": { rowGap: gap["52"] },
65
+
"row-gap-56": { rowGap: gap["56"] },
66
+
"row-gap-60": { rowGap: gap["60"] },
67
+
"row-gap-64": { rowGap: gap["64"] },
68
+
"row-gap-72": { rowGap: gap["72"] },
69
+
"row-gap-80": { rowGap: gap["80"] },
70
+
"row-gap-96": { rowGap: gap["96"] },
71
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"] },
72
+
"column-gap-0.5": { columnGap: gap["0.5"] },
73
+
"column-gap-1": { columnGap: gap["1"] },
74
+
"column-gap-1.5": { columnGap: gap["1.5"] },
75
+
"column-gap-2": { columnGap: gap["2"] },
76
+
"column-gap-2.5": { columnGap: gap["2.5"] },
77
+
"column-gap-3": { columnGap: gap["3"] },
78
+
"column-gap-3.5": { columnGap: gap["3.5"] },
79
+
"column-gap-4": { columnGap: gap["4"] },
80
+
"column-gap-5": { columnGap: gap["5"] },
81
+
"column-gap-6": { columnGap: gap["6"] },
82
+
"column-gap-7": { columnGap: gap["7"] },
83
+
"column-gap-8": { columnGap: gap["8"] },
84
+
"column-gap-9": { columnGap: gap["9"] },
85
+
"column-gap-10": { columnGap: gap["10"] },
86
+
"column-gap-11": { columnGap: gap["11"] },
87
+
"column-gap-12": { columnGap: gap["12"] },
88
+
"column-gap-14": { columnGap: gap["14"] },
89
+
"column-gap-16": { columnGap: gap["16"] },
90
+
"column-gap-20": { columnGap: gap["20"] },
91
+
"column-gap-24": { columnGap: gap["24"] },
92
+
"column-gap-28": { columnGap: gap["28"] },
93
+
"column-gap-32": { columnGap: gap["32"] },
94
+
"column-gap-36": { columnGap: gap["36"] },
95
+
"column-gap-40": { columnGap: gap["40"] },
96
+
"column-gap-44": { columnGap: gap["44"] },
97
+
"column-gap-48": { columnGap: gap["48"] },
98
+
"column-gap-52": { columnGap: gap["52"] },
99
+
"column-gap-56": { columnGap: gap["56"] },
100
+
"column-gap-60": { columnGap: gap["60"] },
101
+
"column-gap-64": { columnGap: gap["64"] },
102
+
"column-gap-72": { columnGap: gap["72"] },
103
+
"column-gap-80": { columnGap: gap["80"] },
104
+
"column-gap-96": { columnGap: gap["96"] },
105
105
106
106
columnStart: (start: number) => ({ gridColumnStart: start }),
107
107
columnEnd: (end: number) => ({ gridColumnEnd: end }),
···
160
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
161
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
162
162
*/
163
-
columnGap?: Spacing;
163
+
columnGap?: Gap;
164
164
/**
165
165
* The row gap of the grid container.
166
166
* @default "0"
167
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"
168
168
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
169
169
*/
170
-
rowGap?: Spacing;
170
+
rowGap?: Gap;
171
171
}
172
172
173
173
export const Grid = ({
+1
-1
packages/hip-ui/src/components/header-layout/header-layout-config.ts
+1
-1
packages/hip-ui/src/components/header-layout/header-layout-config.ts
+17
-17
packages/hip-ui/src/components/header-layout/index.tsx
+17
-17
packages/hip-ui/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["10"],
36
+
[containerBreakpoints.sm]: sizeSpace["12"],
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["4"],
41
+
[containerBreakpoints.sm]: sizeSpace["8"],
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["4"],
46
+
[containerBreakpoints.sm]: sizeSpace["8"],
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["2"],
51
+
[containerBreakpoints.sm]: sizeSpace["6"],
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["6"],
65
+
[containerBreakpoints.sm]: sizeSpace["12"],
66
66
},
67
67
paddingTop: {
68
-
default: spacing["6"],
69
-
[containerBreakpoints.sm]: spacing["12"],
68
+
default: verticalSpace["6"],
69
+
[containerBreakpoints.sm]: sizeSpace["12"],
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["4"],
80
+
[containerBreakpoints.sm]: sizeSpace["8"],
81
81
},
82
82
paddingRight: {
83
-
default: spacing["4"],
84
-
[containerBreakpoints.sm]: spacing["8"],
83
+
default: horizontalSpace["4"],
84
+
[containerBreakpoints.sm]: sizeSpace["8"],
85
85
},
86
86
width: "100%",
87
87
},
+5
-5
packages/hip-ui/src/components/hover-card/index.tsx
+5
-5
packages/hip-ui/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["2"],
33
+
paddingLeft: horizontalSpace["2"],
34
+
paddingRight: horizontalSpace["2"],
35
+
paddingTop: verticalSpace["2"],
36
36
},
37
37
});
38
38
+1
-1
packages/hip-ui/src/components/image-cropper/image-cropper-config.ts
+1
-1
packages/hip-ui/src/components/image-cropper/image-cropper-config.ts
+1
-1
packages/hip-ui/src/components/image-cropper/index.tsx
+1
-1
packages/hip-ui/src/components/image-cropper/index.tsx
+5
-5
packages/hip-ui/src/components/kbd/index.tsx
+5
-5
packages/hip-ui/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["0.5"],
28
+
paddingLeft: horizontalSpace["1"],
29
+
paddingRight: horizontalSpace["1"],
30
+
paddingTop: verticalSpace["0.5"],
31
31
top: "-1px",
32
32
},
33
33
});
+4
-4
packages/hip-ui/src/components/lightbox/index.tsx
+4
-4
packages/hip-ui/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["4"],
122
+
top: verticalSpace["4"],
123
123
},
124
124
hiddenTrigger: {
125
125
display: "none",
126
126
},
127
127
contentRow: {
128
-
gap: spacing["4"],
128
+
gap: gap["4"],
129
129
alignItems: "center",
130
130
display: "flex",
131
131
flexGrow: 1,
+1
-1
packages/hip-ui/src/components/lightbox/lightbox-config.ts
+1
-1
packages/hip-ui/src/components/lightbox/lightbox-config.ts
+3
-3
packages/hip-ui/src/components/link/index.tsx
+3
-3
packages/hip-ui/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["2"],
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["1"]} * -1)`,
50
50
height: "2px",
51
51
left: 0,
52
52
right: 0,
+10
-10
packages/hip-ui/src/components/listbox/index.tsx
+10
-10
packages/hip-ui/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["1"],
45
+
paddingLeft: horizontalSpace["3"],
46
+
paddingRight: horizontalSpace["3"],
47
+
paddingTop: verticalSpace["1"],
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["9"],
51
+
":is([data-size=md])": sizeSpace["7"],
52
+
":is([data-size=sm])": sizeSpace["7"],
53
53
},
54
54
},
55
55
separator: {
56
-
marginBottom: spacing["1.5"],
57
-
marginTop: spacing["1.5"],
56
+
marginBottom: verticalSpace["1.5"],
57
+
marginTop: verticalSpace["1.5"],
58
58
},
59
59
});
60
60
+16
-16
packages/hip-ui/src/components/markdown-content/index.tsx
+16
-16
packages/hip-ui/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["5"],
38
+
marginTop: verticalSpace["5"],
39
39
},
40
40
h2: {
41
-
marginBottom: spacing["4"],
42
-
marginTop: spacing["8"],
41
+
marginBottom: verticalSpace["4"],
42
+
marginTop: verticalSpace["8"],
43
43
},
44
44
h3: {
45
-
marginBottom: spacing["5"],
46
-
marginTop: spacing["8"],
45
+
marginBottom: verticalSpace["5"],
46
+
marginTop: verticalSpace["8"],
47
47
},
48
48
h4: {
49
-
marginBottom: spacing["8"],
50
-
marginTop: spacing["8"],
49
+
marginBottom: verticalSpace["8"],
50
+
marginTop: verticalSpace["8"],
51
51
},
52
52
h5: {
53
-
marginBottom: spacing["8"],
54
-
marginTop: spacing["8"],
53
+
marginBottom: verticalSpace["8"],
54
+
marginTop: verticalSpace["8"],
55
55
},
56
56
});
57
57
+1
-1
packages/hip-ui/src/components/markdown-content/markdown-content-config.ts
+1
-1
packages/hip-ui/src/components/markdown-content/markdown-content-config.ts
+5
-5
packages/hip-ui/src/components/meter/index.tsx
+5
-5
packages/hip-ui/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["2"],
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["3"],
53
+
":is([data-size=md] *)": sizeSpace["2"],
54
+
":is([data-size=sm] *)": sizeSpace["1"],
55
55
},
56
56
width: "100%",
57
57
},
+5
-5
packages/hip-ui/src/components/number-field/index.tsx
+5
-5
packages/hip-ui/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["4"],
112
+
width: sizeSpace["4"],
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["2"],
131
+
paddingRight: horizontalSpace["2"],
132
132
},
133
133
});
134
134
+1
-1
packages/hip-ui/src/components/number-field/number-field-config.ts
+1
-1
packages/hip-ui/src/components/number-field/number-field-config.ts
+45
-44
packages/hip-ui/src/components/page/Page.tsx
+45
-44
packages/hip-ui/src/components/page/Page.tsx
···
1
1
"use client";
2
2
3
+
import type { ComponentProps, ReactNode } from "react";
4
+
3
5
import * as stylex from "@stylexjs/stylex";
6
+
import { createLink, LinkProps } from "@tanstack/react-router";
4
7
import { ArrowLeft } from "lucide-react";
5
8
import { useEffect, useRef, useState } from "react";
6
-
import type { ComponentProps, ReactNode } from "react";
7
9
8
10
import type { StyleXComponentProps } from "../theme/types";
9
11
···
16
18
mediaQueries,
17
19
} from "../theme/media-queries.stylex";
18
20
import { radius } from "../theme/radius.stylex";
21
+
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
19
22
import { shadow } from "../theme/shadow.stylex";
20
-
import { spacing } from "../theme/spacing.stylex";
23
+
import { fontFamily, lineHeight } from "../theme/typography.stylex";
21
24
import { Text } from "../typography/text";
22
25
import { PageContext, usePageContext } from "./context";
23
-
import { createLink, LinkProps } from "@tanstack/react-router";
24
-
import { fontFamily, lineHeight } from "../theme/typography.stylex";
25
26
26
27
const IconButtonLink = createLink(IconButton);
27
28
···
33
34
marginRight: "auto",
34
35
maxWidth: "880px",
35
36
paddingTop: {
36
-
default: spacing["4"],
37
-
[breakpoints.sm]: spacing["4"],
37
+
default: verticalSpace["4"],
38
+
[breakpoints.sm]: sizeSpace["4"],
38
39
},
39
40
width: "100%",
40
41
},
···
49
50
marginLeft: "auto",
50
51
marginRight: "auto",
51
52
maxWidth: "var(--page-content-max-width)",
52
-
paddingBottom: spacing["16"],
53
-
paddingTop: spacing["3.5"],
53
+
paddingBottom: verticalSpace["16"],
54
+
paddingTop: verticalSpace["3.5"],
54
55
width: "100%",
55
56
},
56
57
});
···
58
59
const smallHeaderStyles = stylex.create({
59
60
header: {
60
61
marginBottom: {
61
-
default: spacing["6"],
62
+
default: sizeSpace["6"],
62
63
":is([data-sticky-header=true] *)": 0,
63
64
},
64
-
minHeight: spacing["8"],
65
+
minHeight: sizeSpace["8"],
65
66
},
66
67
});
67
68
···
88
89
},
89
90
},
90
91
alignItems: "center",
91
-
columnGap: spacing["4"],
92
+
columnGap: gap["4"],
92
93
display: "grid",
93
94
gridTemplateColumns: {
94
95
default: "1fr auto",
95
96
":has([data-page-icon])": "auto 1fr auto",
96
97
},
97
-
rowGap: spacing["2"],
98
+
rowGap: gap["2"],
98
99
marginBottom: {
99
-
default: spacing["8"],
100
+
default: sizeSpace["8"],
100
101
":is([data-sticky-header=true] *)": 0,
101
102
},
102
-
minHeight: spacing["8"],
103
-
paddingBottom: spacing["4"],
104
-
paddingTop: spacing["4"],
103
+
minHeight: sizeSpace["8"],
104
+
paddingBottom: verticalSpace["4"],
105
+
paddingTop: verticalSpace["4"],
105
106
},
106
107
});
107
108
···
133
134
},
134
135
},
135
136
smallActions: {
136
-
gap: spacing["1"],
137
+
gap: gap["1"],
137
138
flexShrink: 0,
138
139
},
139
140
largeActions: {
140
141
gridArea: "actions",
141
142
gap: {
142
-
default: spacing["1"],
143
-
[breakpoints.sm]: spacing["2"],
143
+
default: gap["1"],
144
+
[breakpoints.sm]: sizeSpace["2"],
144
145
},
145
-
minHeight: spacing["8"],
146
+
minHeight: sizeSpace["8"],
146
147
},
147
148
icon: {
148
149
gridArea: "icon",
···
155
156
color: primaryColor.textContrast,
156
157
display: "flex",
157
158
justifyContent: "center",
158
-
height: spacing["12"],
159
-
width: spacing["12"],
159
+
height: sizeSpace["12"],
160
+
width: sizeSpace["12"],
160
161
},
161
162
});
162
163
···
174
175
position: "sticky",
175
176
zIndex: 10,
176
177
left: 0,
177
-
marginBottom: spacing["2"],
178
+
marginBottom: verticalSpace["2"],
178
179
marginLeft: `calc(-50vw + 50%)`,
179
180
marginRight: `calc(-50vw + 50%)`,
180
181
right: 0,
···
184
185
largeStickyWrapper: {
185
186
zIndex: 100,
186
187
marginBottom: {
187
-
default: spacing["2"],
188
-
[breakpoints.sm]: spacing["8"],
188
+
default: sizeSpace["2"],
189
+
[breakpoints.sm]: sizeSpace["8"],
189
190
},
190
191
},
191
192
stickyWrapperStuck: {
···
218
219
marginLeft: "auto",
219
220
marginRight: "auto",
220
221
maxWidth: "880px",
221
-
paddingBottom: spacing["4"],
222
-
paddingLeft: spacing["4"],
223
-
paddingRight: spacing["4"],
224
-
paddingTop: spacing["4"],
222
+
paddingBottom: verticalSpace["4"],
223
+
paddingLeft: horizontalSpace["4"],
224
+
paddingRight: horizontalSpace["4"],
225
+
paddingTop: verticalSpace["4"],
225
226
},
226
227
largeStickyContent: {
227
228
boxSizing: "border-box",
···
232
233
marginRight: "auto",
233
234
maxWidth: "var(--page-content-max-width)",
234
235
paddingLeft: {
235
-
default: spacing["4"],
236
-
[containerBreakpoints.sm]: spacing["8"],
236
+
default: horizontalSpace["4"],
237
+
[containerBreakpoints.sm]: sizeSpace["8"],
237
238
":has(> [data-sidebar-layout=true])": "0 !important",
238
239
},
239
240
paddingRight: {
240
-
default: spacing["4"],
241
-
[containerBreakpoints.sm]: spacing["8"],
241
+
default: horizontalSpace["4"],
242
+
[containerBreakpoints.sm]: sizeSpace["8"],
242
243
":has(> [data-sidebar-layout=true])": "0 !important",
243
244
},
244
245
},
···
258
259
left: 0,
259
260
marginLeft: `calc(-50vw + 50%)`,
260
261
marginRight: `calc(-50vw + 50%)`,
261
-
marginTop: spacing["2"],
262
+
marginTop: verticalSpace["2"],
262
263
right: 0,
263
264
width: "100vw",
264
265
},
···
291
292
marginLeft: "auto",
292
293
marginRight: "auto",
293
294
maxWidth: "880px",
294
-
paddingBottom: spacing["4"],
295
-
paddingLeft: spacing["4"],
296
-
paddingRight: spacing["4"],
297
-
paddingTop: spacing["4"],
295
+
paddingBottom: verticalSpace["4"],
296
+
paddingLeft: horizontalSpace["4"],
297
+
paddingRight: horizontalSpace["4"],
298
+
paddingTop: verticalSpace["4"],
298
299
},
299
300
largeStickyContent: {
300
301
boxSizing: "border-box",
···
303
304
marginLeft: "auto",
304
305
marginRight: "auto",
305
306
maxWidth: "var(--page-content-max-width)",
306
-
paddingBottom: spacing["4"],
307
+
paddingBottom: verticalSpace["4"],
307
308
paddingLeft: {
308
-
default: spacing["4"],
309
-
[containerBreakpoints.sm]: spacing["8"],
309
+
default: horizontalSpace["4"],
310
+
[containerBreakpoints.sm]: sizeSpace["8"],
310
311
":has(> [data-sidebar-layout=true])": "0 !important",
311
312
},
312
313
paddingRight: {
313
-
default: spacing["4"],
314
-
[containerBreakpoints.sm]: spacing["8"],
314
+
default: horizontalSpace["4"],
315
+
[containerBreakpoints.sm]: sizeSpace["8"],
315
316
":has(> [data-sidebar-layout=true])": "0 !important",
316
317
},
317
-
paddingTop: spacing["4"],
318
+
paddingTop: verticalSpace["4"],
318
319
},
319
320
});
320
321
+1
-1
packages/hip-ui/src/components/page/page-config.ts
+1
-1
packages/hip-ui/src/components/page/page-config.ts
+2
-2
packages/hip-ui/src/components/pagination/index.tsx
+2
-2
packages/hip-ui/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["4"],
23
23
alignItems: "center",
24
24
containerType: "inline-size",
25
25
display: "flex",
+7
-7
packages/hip-ui/src/components/popover/index.tsx
+7
-7
packages/hip-ui/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["4"],
36
+
paddingLeft: horizontalSpace["4"],
37
+
paddingRight: horizontalSpace["4"],
38
+
paddingTop: verticalSpace["4"],
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["2"],
51
+
width: sizeSpace["2"],
52
52
},
53
53
});
54
54
interface PopoverProps
+1
-1
packages/hip-ui/src/components/popover/popover-config.ts
+1
-1
packages/hip-ui/src/components/popover/popover-config.ts
+5
-5
packages/hip-ui/src/components/progress-bar/index.tsx
+5
-5
packages/hip-ui/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["2"],
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["3"],
46
+
":is([data-size=md] *)": sizeSpace["2"],
47
+
":is([data-size=sm] *)": sizeSpace["1"],
48
48
},
49
49
},
50
50
valueLabel: {
+6
-6
packages/hip-ui/src/components/progress-circle/index.tsx
+6
-6
packages/hip-ui/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["2"],
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["1"],
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["10"],
41
+
":is([data-size=md] *)": sizeSpace["8"],
42
+
":is([data-size=sm] *)": sizeSpace["4"],
43
43
},
44
44
},
45
45
track: {
+1
-1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
+1
-1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
+7
-7
packages/hip-ui/src/components/radio/index.tsx
+7
-7
packages/hip-ui/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["2.5"],
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["4"],
61
+
width: sizeSpace["4"],
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["2"],
74
+
width: sizeSpace["2"],
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["3"],
94
94
display: "flex",
95
95
flexDirection: "column",
96
96
},
+2
-2
packages/hip-ui/src/components/range-calendar/index.tsx
+2
-2
packages/hip-ui/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["3"],
37
37
display: "flex",
38
38
flexDirection: "column",
39
39
},
+2
-2
packages/hip-ui/src/components/search-field/index.tsx
+2
-2
packages/hip-ui/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["8"],
40
40
},
41
41
});
42
42
+1
-1
packages/hip-ui/src/components/search-field/search-field-config.ts
+1
-1
packages/hip-ui/src/components/search-field/search-field-config.ts
+16
-14
packages/hip-ui/src/components/segmented-control/index.tsx
+16
-14
packages/hip-ui/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["1"],
30
30
31
31
cornerShape: "squircle",
32
-
gap: spacing["2"],
32
+
gap: gap["2"],
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["11"],
40
+
":is([data-size=md])": sizeSpace["9"],
41
+
":is([data-size=sm])": sizeSpace["7"],
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["1"],
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["1"],
79
+
paddingLeft: horizontalSpace["2"],
80
+
paddingRight: horizontalSpace["2"],
81
+
paddingTop: verticalSpace["1"],
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["4"],
88
+
width: sizeSpace["4"],
88
89
},
89
90
},
91
+
/* eslint-enable @stylexjs/sort-keys */
90
92
selectionIndicator: {
91
93
borderRadius: radius.lg,
92
94
+4
-4
packages/hip-ui/src/components/select/index.tsx
+4
-4
packages/hip-ui/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["1"],
49
+
paddingRight: horizontalSpace["1"],
50
+
paddingTop: verticalSpace["1"],
51
51
},
52
52
});
53
53
+1
-1
packages/hip-ui/src/components/select/select-config.ts
+1
-1
packages/hip-ui/src/components/select/select-config.ts
+8
-8
packages/hip-ui/src/components/skeleton/index.tsx
+8
-8
packages/hip-ui/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["8"],
64
+
width: sizeSpace["8"],
65
65
},
66
66
sizeMd: {
67
-
height: spacing["12"],
68
-
width: spacing["12"],
67
+
height: sizeSpace["12"],
68
+
width: sizeSpace["12"],
69
69
},
70
70
sizeLg: {
71
-
height: spacing["16"],
72
-
width: spacing["16"],
71
+
height: sizeSpace["16"],
72
+
width: sizeSpace["16"],
73
73
},
74
74
height: (height: string | undefined) => ({
75
-
height: height || spacing["4"],
75
+
height: height || sizeSpace["4"],
76
76
}),
77
77
width: (width: string | undefined) => ({
78
78
width: width || "100%",
+1
-1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
+1
-1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
+14
-14
packages/hip-ui/src/components/slider/index.tsx
+14
-14
packages/hip-ui/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["2"],
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["8"],
48
+
":is([data-orientation=horizontal] *)::before": sizeSpace["1"],
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["8"],
56
+
":is([data-orientation=vertical] *)::before": sizeSpace["1"],
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["4"],
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["4"],
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["1"],
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["1"],
130
130
},
131
131
},
132
132
trackSingle: {
133
133
height: {
134
-
":is([data-orientation=horizontal] *)": spacing["1"],
134
+
":is([data-orientation=horizontal] *)": sizeSpace["1"],
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["1"],
142
142
},
143
143
},
144
144
trackMultiple: {
145
145
height: {
146
-
":is([data-orientation=horizontal] *)": spacing["1"],
146
+
":is([data-orientation=horizontal] *)": sizeSpace["1"],
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["1"],
164
164
},
165
165
},
166
166
valueLabel: {
+2
-2
packages/hip-ui/src/components/star-rating/index.tsx
+2
-2
packages/hip-ui/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["0.5"],
21
21
alignItems: "center",
22
22
display: "flex",
23
23
},
+8
-8
packages/hip-ui/src/components/switch/index.tsx
+8
-8
packages/hip-ui/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["3"],
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["6"],
47
+
width: sizeSpace["10"],
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["4"],
66
66
left: 0,
67
-
marginLeft: spacing["1"],
68
-
marginRight: spacing["1"],
67
+
marginLeft: horizontalSpace["1"],
68
+
marginRight: horizontalSpace["1"],
69
69
top: "50%",
70
-
width: spacing["4"],
70
+
width: sizeSpace["4"],
71
71
},
72
72
});
73
73
+1
-1
packages/hip-ui/src/components/switch/switch-config.ts
+1
-1
packages/hip-ui/src/components/switch/switch-config.ts
+6
-6
packages/hip-ui/src/components/table-of-contents/index.tsx
+6
-6
packages/hip-ui/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["2"],
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["20"],
35
+
paddingTop: verticalSpace["12"],
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[8],
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[4]} * ${level.toString()})`,
81
81
}),
82
82
active: {
83
83
color: primaryColor.solid2,
+1
-1
packages/hip-ui/src/components/table-of-contents/table-of-contents-config.ts
+1
-1
packages/hip-ui/src/components/table-of-contents/table-of-contents-config.ts
+29
-29
packages/hip-ui/src/components/table/index.tsx
+29
-29
packages/hip-ui/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["2"],
67
+
":is(:first-child > *)": sizeSpace["2"],
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["8"],
92
+
":is([data-table-size=lg] *)": sizeSpace["12"],
93
+
":is([data-table-size=md] *)": sizeSpace["10"],
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["1"],
97
+
":is([data-table-size=lg] *)": sizeSpace["3"],
98
+
":is([data-table-size=md] *)": sizeSpace["2"],
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["4"],
102
+
":is([data-table-size=lg] *:not(:first-child))": sizeSpace["4"],
103
+
":is([data-table-size=md] *:not(:first-child))": sizeSpace["3"],
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["4"],
107
+
":is([data-table-size=lg] *:not(:last-child))": sizeSpace["4"],
108
+
":is([data-table-size=md] *:not(:last-child))": sizeSpace["3"],
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["1"],
112
+
":is([data-table-size=lg] *)": sizeSpace["3"],
113
+
":is([data-table-size=md] *)": sizeSpace["2"],
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["1"]} * -1)`,
135
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`,
136
+
":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -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["1"]} * -1)`,
140
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`,
141
+
":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -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["8"],
145
+
":is([data-table-size=lg] *)": sizeSpace["12"],
146
+
":is([data-table-size=md] *)": sizeSpace["10"],
147
147
},
148
-
width: spacing["3"],
148
+
width: sizeSpace["3"],
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["0.5"],
163
163
},
164
164
dropIndicator: {
165
165
outlineColor: primaryColor.solid1,
+8
-8
packages/hip-ui/src/components/tabs/index.tsx
+8
-8
packages/hip-ui/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["1"],
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["4"]} ${sizeSpace["5"]}`,
81
+
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["4"]}`,
82
+
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2.5"]}`,
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["5"],
172
+
":is([data-size=md] *)": sizeSpace["4"],
173
+
":is([data-size=sm] *)": sizeSpace["3"],
174
174
},
175
175
outline: "none",
176
176
fontSize: {
+1
-1
packages/hip-ui/src/components/tabs/tabs-config.ts
+1
-1
packages/hip-ui/src/components/tabs/tabs-config.ts
···
10
10
"../haptics/index.ts",
11
11
"../theme/animations.stylex.tsx",
12
12
"../theme/semantic-color.stylex.tsx",
13
-
"../theme/spacing.stylex.tsx",
13
+
"../theme/semantic-spacing.stylex.tsx",
14
14
"../theme/typography.stylex.tsx",
15
15
"../theme/radius.stylex.tsx",
16
16
"../theme/types.ts",
+14
-14
packages/hip-ui/src/components/tag-group/index.tsx
+14
-14
packages/hip-ui/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["2"],
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["1.5"],
35
35
display: "flex",
36
36
flexWrap: "wrap",
37
-
rowGap: spacing["2.5"],
37
+
rowGap: gap["2.5"],
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["1.5"],
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["1"],
68
+
paddingLeft: horizontalSpace["2.5"],
69
69
paddingRight: {
70
-
default: spacing["2.5"],
71
-
":has(button)": spacing["1.5"],
70
+
default: horizontalSpace["2.5"],
71
+
":has(button)": sizeSpace["1.5"],
72
72
},
73
-
paddingTop: spacing["1"],
73
+
paddingTop: verticalSpace["1"],
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["4"],
99
+
width: sizeSpace["4"],
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["0.5"],
107
+
paddingTop: verticalSpace["0.5"],
108
108
},
109
109
});
110
110
+10
-10
packages/hip-ui/src/components/text-area/index.tsx
+10
-10
packages/hip-ui/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["10"],
43
+
":is([data-size=md])": sizeSpace["8"],
44
+
":is([data-size=sm])": sizeSpace["6"],
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["3"],
49
+
":is([data-size=md])": sizeSpace["2"],
50
+
":is([data-size=sm])": sizeSpace["1"],
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["3"],
54
+
":is([data-size=md])": sizeSpace["2"],
55
+
":is([data-size=sm])": sizeSpace["1"],
56
56
},
57
57
width: "100%",
58
58
},
+1
-1
packages/hip-ui/src/components/text-area/text-area-config.ts
+1
-1
packages/hip-ui/src/components/text-area/text-area-config.ts
+1
-1
packages/hip-ui/src/components/text-field/text-field-config.ts
+1
-1
packages/hip-ui/src/components/text-field/text-field-config.ts
+132
packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx
+132
packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import type { ThemeKeys } from "./types";
4
+
5
+
import { spacing } from "./spacing.stylex";
6
+
7
+
/**
8
+
* Full numeric scale (same keys/values as `spacing`) for phase-1 bracket access on semantic categories.
9
+
*/
10
+
const spacingNumeric = {
11
+
px: spacing["px"],
12
+
"0": spacing["0"],
13
+
"0.5": spacing["0.5"],
14
+
"1": spacing["1"],
15
+
"1.5": spacing["1.5"],
16
+
"2": spacing["2"],
17
+
"2.5": spacing["2.5"],
18
+
"3": spacing["3"],
19
+
"3.5": spacing["3.5"],
20
+
"4": spacing["4"],
21
+
"5": spacing["5"],
22
+
"6": spacing["6"],
23
+
"7": spacing["7"],
24
+
"8": spacing["8"],
25
+
"9": spacing["9"],
26
+
"10": spacing["10"],
27
+
"11": spacing["11"],
28
+
"12": spacing["12"],
29
+
"14": spacing["14"],
30
+
"16": spacing["16"],
31
+
"20": spacing["20"],
32
+
"24": spacing["24"],
33
+
"28": spacing["28"],
34
+
"32": spacing["32"],
35
+
"36": spacing["36"],
36
+
"40": spacing["40"],
37
+
"44": spacing["44"],
38
+
"48": spacing["48"],
39
+
"52": spacing["52"],
40
+
"56": spacing["56"],
41
+
"60": spacing["60"],
42
+
"64": spacing["64"],
43
+
"72": spacing["72"],
44
+
"80": spacing["80"],
45
+
"96": spacing["96"],
46
+
} as const;
47
+
48
+
export const horizontalSpace = stylex.defineVars({
49
+
none: spacing["0"],
50
+
xxs: spacing["0.5"],
51
+
xs: spacing["1"],
52
+
sm: spacing["1.5"],
53
+
md: spacing["2"],
54
+
lg: spacing["2.5"],
55
+
xl: spacing["3"],
56
+
"2xl": spacing["3.5"],
57
+
"3xl": spacing["4"],
58
+
"4xl": spacing["5"],
59
+
...spacingNumeric,
60
+
});
61
+
62
+
export const verticalSpace = stylex.defineVars({
63
+
none: spacing["0"],
64
+
xxs: spacing["0.5"],
65
+
xs: spacing["1"],
66
+
sm: spacing["1.5"],
67
+
md: spacing["2"],
68
+
lg: spacing["2.5"],
69
+
xl: spacing["3"],
70
+
"2xl": spacing["3.5"],
71
+
"3xl": spacing["4"],
72
+
"4xl": spacing["5"],
73
+
"5xl": spacing["6"],
74
+
...spacingNumeric,
75
+
});
76
+
77
+
export const gap = stylex.defineVars({
78
+
none: spacing["0"],
79
+
xs: spacing["1"],
80
+
sm: spacing["1.5"],
81
+
md: spacing["2"],
82
+
xl: spacing["3"],
83
+
"2xl": spacing["4"],
84
+
...spacingNumeric,
85
+
});
86
+
87
+
export const size = stylex.defineVars({
88
+
none: spacing["0"],
89
+
xxs: spacing["1"],
90
+
xs: spacing["1.5"],
91
+
sm: spacing["2"],
92
+
md: spacing["2.5"],
93
+
lg: spacing["10"],
94
+
xl: spacing["12"],
95
+
"2xl": spacing["4"],
96
+
"3xl": spacing["5"],
97
+
"4xl": spacing["6"],
98
+
"5xl": spacing["7"],
99
+
"6xl": spacing["8"],
100
+
"7xl": spacing["9"],
101
+
"8xl": spacing["10"],
102
+
"9xl": spacing["11"],
103
+
"10xl": spacing["12"],
104
+
"11xl": spacing["14"],
105
+
"12xl": spacing["16"],
106
+
"13xl": spacing["20"],
107
+
"14xl": spacing["24"],
108
+
"15xl": spacing["28"],
109
+
"16xl": spacing["32"],
110
+
"17xl": spacing["36"],
111
+
"18xl": spacing["40"],
112
+
"19xl": spacing["44"],
113
+
"20xl": spacing["48"],
114
+
"21xl": spacing["52"],
115
+
"22xl": spacing["56"],
116
+
"23xl": spacing["60"],
117
+
"24xl": spacing["64"],
118
+
"25xl": spacing["72"],
119
+
"26xl": spacing["80"],
120
+
"27xl": spacing["96"],
121
+
"28xl": spacing["96"],
122
+
...spacingNumeric,
123
+
});
124
+
125
+
// eslint-disable-next-line @stylexjs/enforce-extension
126
+
export type HorizontalSpace = ThemeKeys<typeof horizontalSpace>;
127
+
// eslint-disable-next-line @stylexjs/enforce-extension
128
+
export type VerticalSpace = ThemeKeys<typeof verticalSpace>;
129
+
// eslint-disable-next-line @stylexjs/enforce-extension
130
+
export type Gap = ThemeKeys<typeof gap>;
131
+
// eslint-disable-next-line @stylexjs/enforce-extension
132
+
export type SizeSpace = ThemeKeys<typeof size>;
+6
-6
packages/hip-ui/src/components/theme/typography.stylex.tsx
+6
-6
packages/hip-ui/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["20"],
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["20"],
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["20"],
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["20"],
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["20"],
144
144
},
145
145
body: {
146
146
// eslint-disable-next-line @stylexjs/valid-styles
+24
-24
packages/hip-ui/src/components/theme/useButtonStyles.ts
+24
-24
packages/hip-ui/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["1"],
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["4"],
58
+
width: sizeSpace["4"],
59
59
},
60
60
},
61
61
small: {
62
62
fontSize: fontSize["xs"],
63
-
height: spacing["7"],
63
+
height: sizeSpace["7"],
64
64
paddingLeft: {
65
-
default: spacing["2"],
65
+
default: horizontalSpace["2"],
66
66
},
67
-
paddingRight: spacing["2"],
67
+
paddingRight: horizontalSpace["2"],
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["3.5"],
74
+
width: sizeSpace["3.5"],
75
75
},
76
76
},
77
77
medium: {
78
-
gap: spacing["1.5"],
78
+
gap: gap["1.5"],
79
79
fontSize: fontSize["sm"],
80
-
height: spacing["8"],
80
+
height: sizeSpace["8"],
81
81
paddingLeft: {
82
-
default: spacing["3"],
83
-
":has(svg+*)": spacing["2.5"],
82
+
default: horizontalSpace["3"],
83
+
":has(svg+*)": sizeSpace["2.5"],
84
84
},
85
-
paddingRight: spacing["3"],
85
+
paddingRight: horizontalSpace["3"],
86
86
},
87
87
large: {
88
-
gap: spacing["2"],
88
+
gap: gap["2"],
89
89
fontSize: fontSize["sm"],
90
-
height: spacing["10"],
90
+
height: sizeSpace["10"],
91
91
paddingLeft: {
92
-
default: spacing["4"],
93
-
":has(svg+*)": spacing["3"],
92
+
default: horizontalSpace["4"],
93
+
":has(svg+*)": sizeSpace["3"],
94
94
},
95
-
paddingRight: spacing["4"],
95
+
paddingRight: horizontalSpace["4"],
96
96
},
97
97
xl: {
98
-
gap: spacing["2"],
98
+
gap: gap["2"],
99
99
fontSize: fontSize["lg"],
100
-
height: spacing["12"],
100
+
height: sizeSpace["12"],
101
101
paddingLeft: {
102
-
default: spacing["5"],
103
-
":has(svg+*)": spacing["4"],
102
+
default: horizontalSpace["5"],
103
+
":has(svg+*)": sizeSpace["4"],
104
104
},
105
-
paddingRight: spacing["5"],
105
+
paddingRight: horizontalSpace["5"],
106
106
},
107
107
secondary: {
108
108
borderColor: {
+12
-12
packages/hip-ui/src/components/theme/useCalendarStyles.ts
+12
-12
packages/hip-ui/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["1"],
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["8"],
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["8"],
49
49
50
50
"::before": {
51
-
inset: spacing["1"],
51
+
inset: sizeSpace["1"],
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["2"]} * -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["2"]} * -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["1"],
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["3"],
139
139
display: "flex",
140
140
flexDirection: "column",
141
141
},
+31
-32
packages/hip-ui/src/components/theme/useInputStyles.ts
+31
-32
packages/hip-ui/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["2"],
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["2"],
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["4"],
46
+
width: sizeSpace["4"],
48
47
},
49
48
},
50
49
addonSm: {
51
-
paddingLeft: { ":first-child": spacing["1.5"] },
50
+
paddingLeft: { ":first-child": horizontalSpace["1.5"] },
52
51
paddingRight: {
53
-
":first-child": spacing["1"],
54
-
":last-child": spacing["1.5"],
52
+
":first-child": horizontalSpace["1"],
53
+
":last-child": sizeSpace["1.5"],
55
54
},
56
55
},
57
56
addonMd: {
58
-
paddingLeft: { ":first-child": spacing["2.5"] },
57
+
paddingLeft: { ":first-child": horizontalSpace["2.5"] },
59
58
paddingRight: {
60
-
":first-child": spacing["2"],
61
-
":last-child": spacing["2.5"],
59
+
":first-child": horizontalSpace["2"],
60
+
":last-child": sizeSpace["2.5"],
62
61
},
63
62
},
64
63
addonLg: {
65
-
paddingLeft: { ":first-child": spacing["3"] },
64
+
paddingLeft: { ":first-child": horizontalSpace["3"] },
66
65
paddingRight: {
67
-
":first-child": spacing["2"],
68
-
":last-child": spacing["3"],
66
+
":first-child": horizontalSpace["2"],
67
+
":last-child": sizeSpace["3"],
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["2"],
319
318
},
320
-
paddingRight: spacing["1"],
319
+
paddingRight: horizontalSpace["1"],
321
320
},
322
321
inputSizeMd: {
323
322
fontSize: fontSize["sm"],
324
323
paddingLeft: {
325
-
":first-child": spacing["2"],
324
+
":first-child": horizontalSpace["2"],
326
325
},
327
-
paddingRight: spacing["2"],
326
+
paddingRight: horizontalSpace["2"],
328
327
},
329
328
inputSizeLg: {
330
329
fontSize: fontSize["base"],
331
330
paddingLeft: {
332
-
":first-child": spacing["3"],
331
+
":first-child": horizontalSpace["3"],
333
332
},
334
-
paddingRight: spacing["3"],
333
+
paddingRight: horizontalSpace["3"],
335
334
},
336
335
wrapperSizeSm: {
337
-
height: spacing["6"],
336
+
height: sizeSpace["6"],
338
337
},
339
338
wrapperSizeMd: {
340
-
height: spacing["8"],
339
+
height: sizeSpace["8"],
341
340
},
342
341
wrapperSizeLg: {
343
-
height: spacing["10"],
342
+
height: sizeSpace["10"],
344
343
},
345
344
horizontalLabel: {
346
-
gap: spacing["4"],
345
+
gap: gap["4"],
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["6"],
358
357
},
359
358
horizontalLabelTextMd: {
360
-
lineHeight: spacing["8"],
359
+
lineHeight: sizeSpace["8"],
361
360
},
362
361
horizontalLabelTextLg: {
363
362
fontSize: fontSize["base"],
364
363
fontWeight: fontWeight["medium"],
365
-
lineHeight: spacing["10"],
364
+
lineHeight: sizeSpace["10"],
366
365
},
367
366
label: {
368
-
paddingLeft: spacing["1"],
369
-
paddingRight: spacing["1"],
367
+
paddingLeft: horizontalSpace["1"],
368
+
paddingRight: horizontalSpace["1"],
370
369
},
371
370
additionalText: {
372
-
paddingLeft: spacing["2"],
373
-
paddingRight: spacing["2"],
371
+
paddingLeft: horizontalSpace["2"],
372
+
paddingRight: horizontalSpace["2"],
374
373
},
375
374
});
376
375
+22
-22
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+22
-22
packages/hip-ui/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["0.5"],
34
+
paddingLeft: horizontalSpace["1"],
35
+
paddingRight: horizontalSpace["1"],
36
+
paddingTop: verticalSpace["0.5"],
37
37
},
38
-
sm: { minHeight: spacing["7"] },
39
-
md: { minHeight: spacing["9"] },
40
-
lg: { minHeight: spacing["12"] },
38
+
sm: { minHeight: sizeSpace["7"] },
39
+
md: { minHeight: sizeSpace["9"] },
40
+
lg: { minHeight: sizeSpace["12"] },
41
41
itemInner: {
42
42
borderRadius: radius.md,
43
43
cornerShape: "squircle",
44
-
gap: spacing["3"],
44
+
gap: gap["3"],
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["2"],
66
+
paddingLeft: horizontalSpace["3"],
67
+
paddingRight: horizontalSpace["3"],
68
+
paddingTop: verticalSpace["2"],
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["2"],
77
77
fontSize: fontSize["xs"],
78
78
lineHeight: lineHeight["xs"],
79
-
paddingBottom: spacing["1"],
80
-
paddingTop: spacing["1"],
79
+
paddingBottom: verticalSpace["1"],
80
+
paddingTop: verticalSpace["1"],
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["2"]} * -1)`,
93
+
marginTop: `calc(${sizeSpace["2"]} * -1)`,
94
+
minWidth: sizeSpace["4"],
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["4"],
101
+
width: sizeSpace["4"],
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["1.5"],
110
110
display: "flex",
111
111
flexDirection: "column",
112
112
flexGrow: 1,
+5
-5
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+5
-5
packages/hip-ui/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["4"],
23
+
":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["4"]} * -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["4"]} * -1)`,
27
+
":is([data-placement=top],[data-placement=top] > *)": sizeSpace["4"],
28
28
},
29
29
opacity: {
30
30
default: 1,
+1
-1
packages/hip-ui/src/components/time-field/time-field-config.ts
+1
-1
packages/hip-ui/src/components/time-field/time-field-config.ts
+14
-14
packages/hip-ui/src/components/toast/Toast.tsx
+14
-14
packages/hip-ui/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
+
import { shadow } from "../theme/shadow.stylex";
32
33
import { lineHeight, typeramp } from "../theme/typography.stylex";
33
34
import { usePopoverStyles } from "../theme/usePopoverStyles";
34
35
import { toasts } from "./queue";
35
-
import { shadow } from "../theme/shadow.stylex";
36
36
37
37
const styles = stylex.create({
38
38
region: {
39
-
gap: spacing["2"],
39
+
gap: gap["2"],
40
40
outline: "none",
41
41
display: "flex",
42
42
flexDirection: "column-reverse",
43
43
position: "fixed",
44
44
zIndex: 9999,
45
-
bottom: spacing["4"],
46
-
right: spacing["4"],
45
+
bottom: verticalSpace["4"],
46
+
right: horizontalSpace["4"],
47
47
},
48
48
toast: {
49
-
gap: spacing["4"],
49
+
gap: gap["4"],
50
50
alignItems: "center",
51
51
display: "flex",
52
52
flexDirection: "row",
53
53
justifyContent: "space-between",
54
-
minWidth: spacing["60"],
55
-
paddingBottom: spacing["3"],
56
-
paddingLeft: spacing["4"],
57
-
paddingRight: spacing["4"],
58
-
paddingTop: spacing["3"],
54
+
minWidth: sizeSpace["60"],
55
+
paddingBottom: verticalSpace["3"],
56
+
paddingLeft: horizontalSpace["4"],
57
+
paddingRight: horizontalSpace["4"],
58
+
paddingTop: verticalSpace["3"],
59
59
},
60
60
content: {
61
61
flex: "1 1 auto",
62
-
gap: spacing["2.5"],
62
+
gap: gap["2.5"],
63
63
display: "flex",
64
64
flexDirection: "column",
65
65
minWidth: 0,
···
97
97
},
98
98
flexShrink: 0,
99
99
pointerEvents: "none",
100
-
height: spacing["4"],
101
-
width: spacing["4"],
100
+
height: sizeSpace["4"],
101
+
width: sizeSpace["4"],
102
102
},
103
103
},
104
104
critical: {
+1
-1
packages/hip-ui/src/components/toast/toast-config.ts
+1
-1
packages/hip-ui/src/components/toast/toast-config.ts
+10
-10
packages/hip-ui/src/components/toolbar/index.tsx
+10
-10
packages/hip-ui/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["1"],
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["1"],
44
+
":is([data-orientation=vertical] *)": sizeSpace["2"],
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["2"],
48
+
":is([data-orientation=vertical] *)": sizeSpace["1"],
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["2"],
52
+
":is([data-orientation=vertical] *)": sizeSpace["1"],
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["1"],
56
+
":is([data-orientation=vertical] *)": sizeSpace["2"],
57
57
},
58
58
width: {
59
59
":is([data-orientation=horizontal] *)": "1px",
+1
-1
packages/hip-ui/src/components/toolbar/toolbar-config.ts
+1
-1
packages/hip-ui/src/components/toolbar/toolbar-config.ts
+5
-5
packages/hip-ui/src/components/tooltip/index.tsx
+5
-5
packages/hip-ui/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["1"],
33
+
paddingLeft: horizontalSpace["2"],
34
+
paddingRight: horizontalSpace["2"],
35
+
paddingTop: verticalSpace["1"],
36
36
37
37
"--origin": {
38
38
":is([data-placement=bottom])": "translateY(-4px)",
+1
-1
packages/hip-ui/src/components/tooltip/tooltip-config.ts
+1
-1
packages/hip-ui/src/components/tooltip/tooltip-config.ts
+11
-11
packages/hip-ui/src/components/tree/index.tsx
+11
-11
packages/hip-ui/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["1"],
40
+
paddingLeft: horizontalSpace["0.5"],
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["3"]})`,
47
47
},
48
48
content: {
49
-
gap: spacing["2"],
49
+
gap: gap["2"],
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["3"],
82
+
width: sizeSpace["3"],
83
83
},
84
84
},
85
85
addon: {
86
-
marginBottom: `calc(${spacing["2"]} * -1)`,
87
-
marginTop: `calc(${spacing["2"]} * -1)`,
86
+
marginBottom: `calc(${sizeSpace["2"]} * -1)`,
87
+
marginTop: `calc(${sizeSpace["2"]} * -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["8"],
111
+
width: sizeSpace["8"],
112
112
},
113
113
});
114
114
+1
-1
packages/hip-ui/src/components/tree/tree-config.ts
+1
-1
packages/hip-ui/src/components/tree/tree-config.ts
+20
-20
packages/hip-ui/src/components/typography/index.tsx
+20
-20
packages/hip-ui/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["4"],
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["8"],
42
+
marginTop: verticalSpace["8"],
43
43
},
44
44
copyButton: {
45
45
position: "absolute",
46
-
right: spacing["3"],
47
-
top: spacing["2.5"],
46
+
right: horizontalSpace["3"],
47
+
top: verticalSpace["2.5"],
48
48
},
49
49
blockquote: {
50
-
gap: spacing["5"],
50
+
gap: gap["5"],
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["2"],
60
60
marginRight: 0,
61
61
marginTop: 0,
62
-
paddingBottom: spacing["2"],
63
-
paddingLeft: spacing["4"],
64
-
paddingTop: spacing["2"],
62
+
paddingBottom: verticalSpace["2"],
63
+
paddingLeft: horizontalSpace["4"],
64
+
paddingTop: verticalSpace["2"],
65
65
},
66
66
unorderedList: {
67
67
margin: 0,
68
-
gap: spacing["3"],
68
+
gap: gap["3"],
69
69
display: "flex",
70
70
flexDirection: "column",
71
71
listStyleType: "disc",
72
-
paddingLeft: spacing["8"],
72
+
paddingLeft: horizontalSpace["8"],
73
73
},
74
74
orderedList: {
75
75
margin: 0,
76
-
gap: spacing["3"],
76
+
gap: gap["3"],
77
77
display: "flex",
78
78
flexDirection: "column",
79
79
listStyleType: "decimal",
80
-
paddingLeft: spacing["8"],
80
+
paddingLeft: horizontalSpace["8"],
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["1"],
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["1"],
94
+
paddingLeft: horizontalSpace["1"],
95
+
paddingRight: horizontalSpace["1"],
96
+
paddingTop: verticalSpace["1"],
97
97
top: "-0.01em",
98
98
},
99
99
underline: {
+1
-1
packages/hip-ui/src/components/typography/typography-config.ts
+1
-1
packages/hip-ui/src/components/typography/typography-config.ts
+3
-3
packages/hip-ui/src/components/window-splitter/index.tsx
+3
-3
packages/hip-ui/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["2"],
57
57
},
58
58
width: {
59
-
":is([data-handle-orientation='horizontal'] *)": spacing["2"],
59
+
":is([data-handle-orientation='horizontal'] *)": sizeSpace["2"],
60
60
":is([data-handle-orientation='vertical'] *)": "100%",
61
61
},
62
62
},
+1
-1
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts
+1
-1
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts