A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

appl yin docs

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