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.

phase 1

+1100 -964
+16 -16
packages/hip-ui/src/components/alert-dialog/index.tsx
··· 21 21 import { Button } from "../button"; 22 22 import { useHaptics } from "../haptics"; 23 23 import { IconButton } from "../icon-button"; 24 - import { spacing } from "../theme/spacing.stylex"; 24 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 25 25 import { fontSize, typeramp } from "../theme/typography.stylex"; 26 26 import { useDialogStyles } from "../theme/useDialogStyles"; 27 27 28 28 const styles = stylex.create({ 29 29 dialog: { 30 - paddingBottom: spacing["2"], 31 - paddingTop: spacing["2"], 30 + paddingBottom: verticalSpace["2"], 31 + paddingTop: verticalSpace["2"], 32 32 }, 33 33 header: { 34 - gap: spacing["2"], 34 + gap: gap["2"], 35 35 alignItems: "center", 36 36 display: "flex", 37 37 fontSize: fontSize["lg"], 38 38 justifyContent: "space-between", 39 - height: spacing["8"], 40 - paddingLeft: spacing["4"], 41 - paddingRight: spacing["4"], 42 - paddingTop: spacing["2"], 39 + height: sizeSpace["8"], 40 + paddingLeft: horizontalSpace["4"], 41 + paddingRight: horizontalSpace["4"], 42 + paddingTop: verticalSpace["2"], 43 43 }, 44 44 description: { 45 - paddingBottom: spacing["4"], 46 - paddingLeft: spacing["4"], 47 - paddingRight: spacing["4"], 48 - paddingTop: spacing["4"], 45 + paddingBottom: verticalSpace["4"], 46 + paddingLeft: horizontalSpace["4"], 47 + paddingRight: horizontalSpace["4"], 48 + paddingTop: verticalSpace["4"], 49 49 }, 50 50 footer: { 51 - gap: spacing["2"], 51 + gap: gap["2"], 52 52 display: "flex", 53 53 justifyContent: "flex-end", 54 - paddingBottom: spacing["2"], 55 - paddingLeft: spacing["4"], 56 - paddingRight: spacing["4"], 54 + paddingBottom: verticalSpace["2"], 55 + paddingLeft: horizontalSpace["4"], 56 + paddingRight: horizontalSpace["4"], 57 57 }, 58 58 }); 59 59
+1 -1
packages/hip-ui/src/components/alert/alert-config.ts
··· 4 4 name: "alert", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+20 -20
packages/hip-ui/src/components/alert/index.tsx
··· 29 29 success, 30 30 warning, 31 31 } from "../theme/semantic-color.stylex"; 32 - import { spacing } from "../theme/spacing.stylex"; 32 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 33 33 import { fontFamily } from "../theme/typography.stylex"; 34 34 import { Text } from "../typography/text"; 35 35 ··· 39 39 borderStyle: "solid", 40 40 borderWidth: 1, 41 41 cornerShape: "squircle", 42 - gap: spacing["2.5"], 42 + gap: gap["2.5"], 43 43 gridTemplateAreas: { 44 44 default: "'icon content'", 45 45 [maxBreakpoints.sm]: "'icon content'", ··· 53 53 [maxBreakpoints.sm]: "auto 1fr", 54 54 }, 55 55 position: "relative", 56 - minHeight: spacing["10"], 57 - paddingBottom: spacing["2.5"], 58 - paddingLeft: spacing["4"], 59 - paddingRight: spacing["4"], 60 - paddingTop: spacing["2.5"], 56 + minHeight: sizeSpace["10"], 57 + paddingBottom: verticalSpace["2.5"], 58 + paddingLeft: horizontalSpace["4"], 59 + paddingRight: horizontalSpace["4"], 60 + paddingTop: verticalSpace["2.5"], 61 61 }, 62 62 alertWithDescription: { 63 63 alignItems: "flex-start", 64 - paddingBottom: spacing["4"], 65 - paddingRight: spacing["3"], 66 - paddingTop: spacing["4"], 64 + paddingBottom: verticalSpace["4"], 65 + paddingRight: horizontalSpace["3"], 66 + paddingTop: verticalSpace["4"], 67 67 }, 68 68 alertWithClose: { 69 69 gridTemplateAreas: { ··· 74 74 default: "auto 1fr auto", 75 75 [maxBreakpoints.sm]: "auto 1fr auto", 76 76 }, 77 - paddingRight: spacing["2"], 77 + paddingRight: horizontalSpace["2"], 78 78 }, 79 79 alertWithAction: { 80 80 gridTemplateAreas: { ··· 85 85 default: "auto 1fr auto", 86 86 [maxBreakpoints.sm]: "auto 1fr", 87 87 }, 88 - paddingRight: spacing["2"], 88 + paddingRight: horizontalSpace["2"], 89 89 }, 90 90 alertWithActionAndClose: { 91 91 gridTemplateAreas: { ··· 96 96 default: "auto 1fr auto auto", 97 97 [maxBreakpoints.sm]: "auto 1fr auto", 98 98 }, 99 - paddingRight: spacing["2"], 99 + paddingRight: horizontalSpace["2"], 100 100 }, 101 101 content: { 102 102 gridArea: "content", 103 - gap: spacing["3"], 103 + gap: gap["3"], 104 104 display: "flex", 105 105 flexDirection: "column", 106 106 }, 107 107 contentWithDescription: { 108 - paddingTop: spacing["0.5"], 108 + paddingTop: verticalSpace["0.5"], 109 109 }, 110 110 icon: { 111 111 gridArea: "icon", ··· 119 119 ":is(*) svg": { 120 120 flexShrink: 0, 121 121 pointerEvents: "none", 122 - height: spacing["5"], 123 - width: spacing["5"], 122 + height: sizeSpace["5"], 123 + width: sizeSpace["5"], 124 124 }, 125 125 }, 126 126 action: { 127 127 gridArea: "action", 128 - gap: spacing["2"], 128 + gap: gap["2"], 129 129 alignItems: "center", 130 130 alignSelf: "center", 131 131 display: "flex", ··· 134 134 closeButton: { 135 135 gridArea: "close", 136 136 flexShrink: 0, 137 - marginBottom: `calc(${spacing["1"]} * -1)`, 138 - marginTop: `calc(${spacing["1"]} * -1)`, 137 + marginBottom: `calc(${sizeSpace["1"]} * -1)`, 138 + marginTop: `calc(${sizeSpace["1"]} * -1)`, 139 139 }, 140 140 actionAndClose: { 141 141 alignSelf: "center",
+1 -1
packages/hip-ui/src/components/autocomplete/autocomplete-config.ts
··· 4 4 name: "autocomplete", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/usePopoverStyles.ts", 9 9 ], 10 10 dependencies: {
+2 -2
packages/hip-ui/src/components/autocomplete/index.tsx
··· 20 20 import { SizeContext } from "../context"; 21 21 import { ListBox } from "../listbox"; 22 22 import { TextField } from "../text-field"; 23 - import { spacing } from "../theme/spacing.stylex"; 23 + import { verticalSpace } from "../theme/semantic-spacing.stylex"; 24 24 import { usePopoverStyles } from "../theme/usePopoverStyles"; 25 25 26 26 const styles = stylex.create({ ··· 30 30 popover: { 31 31 position: "absolute", 32 32 left: 0, 33 - paddingTop: spacing["1"], 33 + paddingTop: verticalSpace["1"], 34 34 top: "100%", 35 35 width: "100%", 36 36 },
+1 -1
packages/hip-ui/src/components/avatar/avatar-config.ts
··· 4 4 name: "avatar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+9 -9
packages/hip-ui/src/components/avatar/index.tsx
··· 14 14 import { uiColor } from "../theme/color.stylex"; 15 15 import { mediaQueries } from "../theme/media-queries.stylex"; 16 16 import { radius } from "../theme/radius.stylex"; 17 - import { spacing } from "../theme/spacing.stylex"; 17 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 18 18 import { 19 19 fontFamily, 20 20 fontSize, ··· 41 41 default: radius.sm, 42 42 [mediaQueries.supportsSquircle]: radius["3xl"], 43 43 }, 44 - height: spacing["6"], 45 - width: spacing["6"], 44 + height: sizeSpace["6"], 45 + width: sizeSpace["6"], 46 46 }, 47 47 wrapperMd: { 48 48 borderRadius: { 49 49 default: radius.md, 50 50 [mediaQueries.supportsSquircle]: radius["3xl"], 51 51 }, 52 - height: spacing["8"], 53 - width: spacing["8"], 52 + height: sizeSpace["8"], 53 + width: sizeSpace["8"], 54 54 }, 55 55 wrapperLg: { 56 56 borderRadius: { 57 57 default: radius.lg, 58 58 [mediaQueries.supportsSquircle]: radius["3xl"], 59 59 }, 60 - height: spacing["10"], 61 - width: spacing["10"], 60 + height: sizeSpace["10"], 61 + width: sizeSpace["10"], 62 62 }, 63 63 wrapperXl: { 64 64 borderRadius: { 65 65 default: radius.xl, 66 66 [mediaQueries.supportsSquircle]: radius["3xl"], 67 67 }, 68 - height: spacing["14"], 69 - width: spacing["14"], 68 + height: sizeSpace["14"], 69 + width: sizeSpace["14"], 70 70 }, 71 71 image: { 72 72 objectFit: "cover",
+1 -1
packages/hip-ui/src/components/badge/badge-config.ts
··· 4 4 name: "badge", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+17 -17
packages/hip-ui/src/components/badge/index.tsx
··· 12 12 ui, 13 13 warning, 14 14 } from "../theme/semantic-color.stylex"; 15 - import { spacing } from "../theme/spacing.stylex"; 15 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 16 16 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 17 17 18 18 const styles = stylex.create({ ··· 30 30 width: "fit-content", 31 31 }, 32 32 sm: { 33 - gap: spacing["1"], 33 + gap: gap["1"], 34 34 fontSize: fontSize["xs"], 35 - height: spacing["5"], 36 - paddingBottom: spacing["0.5"], 37 - paddingLeft: spacing["2.5"], 38 - paddingRight: spacing["2.5"], 39 - paddingTop: spacing["0.5"], 35 + height: sizeSpace["5"], 36 + paddingBottom: verticalSpace["0.5"], 37 + paddingLeft: horizontalSpace["2.5"], 38 + paddingRight: horizontalSpace["2.5"], 39 + paddingTop: verticalSpace["0.5"], 40 40 41 41 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 42 42 ":is(*) svg": { 43 43 flexShrink: 0, 44 44 pointerEvents: "none", 45 - height: spacing["3"], 46 - width: spacing["3"], 45 + height: sizeSpace["3"], 46 + width: sizeSpace["3"], 47 47 }, 48 48 }, 49 49 md: { 50 - gap: spacing["1.5"], 50 + gap: gap["1.5"], 51 51 fontSize: fontSize["sm"], 52 - height: spacing["6"], 53 - paddingBottom: spacing["0.5"], 54 - paddingLeft: spacing["3.5"], 55 - paddingRight: spacing["3.5"], 56 - paddingTop: spacing["0.5"], 52 + height: sizeSpace["6"], 53 + paddingBottom: verticalSpace["0.5"], 54 + paddingLeft: horizontalSpace["3.5"], 55 + paddingRight: horizontalSpace["3.5"], 56 + paddingTop: verticalSpace["0.5"], 57 57 58 58 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 59 59 ":is(*) svg": { 60 60 flexShrink: 0, 61 61 pointerEvents: "none", 62 - height: spacing["3.5"], 63 - width: spacing["3.5"], 62 + height: sizeSpace["3.5"], 63 + width: sizeSpace["3.5"], 64 64 }, 65 65 }, 66 66 });
+1 -1
packages/hip-ui/src/components/breadcrumbs/breadcrumbs-config.ts
··· 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 "../theme/semantic-color.stylex.tsx", 8 - "../theme/spacing.stylex.tsx", 8 + "../theme/semantic-spacing.stylex.tsx", 9 9 "../theme/typography.stylex.tsx", 10 10 "../link/index.tsx", 11 11 ],
+3 -3
packages/hip-ui/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["1"], 24 24 listStyle: "none", 25 25 alignItems: "center", 26 26 display: "flex", 27 27 }, 28 28 breadcrumb: { 29 - gap: spacing["1"], 29 + gap: gap["1"], 30 30 alignItems: "center", 31 31 color: { 32 32 default: uiColor.text2,
+1 -1
packages/hip-ui/src/components/button-group/button-group-config.ts
··· 4 4 name: "button-group", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+1 -1
packages/hip-ui/src/components/button/button-config.ts
··· 9 9 "../haptics/useHaptics.ts", 10 10 "../haptics/index.ts", 11 11 "../theme/color.stylex.tsx", 12 - "../theme/spacing.stylex.tsx", 12 + "../theme/semantic-spacing.stylex.tsx", 13 13 "../theme/radius.stylex.tsx", 14 14 "../theme/semantic-color.stylex.tsx", 15 15 "../theme/typography.stylex.tsx",
+2 -2
packages/hip-ui/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["2"], 23 23 alignItems: "center", 24 24 display: "flex", 25 25 justifyContent: "center",
+3 -3
packages/hip-ui/src/components/calendar/index.tsx
··· 25 25 import { IconButton } from "../icon-button"; 26 26 import { ErrorMessage } from "../label"; 27 27 import { Select, SelectItem } from "../select"; 28 - import { spacing } from "../theme/spacing.stylex"; 28 + import { gap } from "../theme/semantic-spacing.stylex"; 29 29 import { useCalendarStyles } from "../theme/useCalendarStyles"; 30 30 31 31 export interface CalendarProps<T extends DateValue> ··· 37 37 38 38 const styles = stylex.create({ 39 39 header: { 40 - gap: spacing["2"], 40 + gap: gap["2"], 41 41 alignItems: "center", 42 42 display: "flex", 43 43 }, 44 44 headerContent: { 45 - gap: spacing["0.5"], 45 + gap: gap["0.5"], 46 46 alignItems: "center", 47 47 display: "flex", 48 48 flexGrow: 1,
+14 -14
packages/hip-ui/src/components/card/index.tsx
··· 8 8 import { uiColor } from "../theme/color.stylex"; 9 9 import { radius } from "../theme/radius.stylex"; 10 10 import { ui } from "../theme/semantic-color.stylex"; 11 + import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 11 12 import { shadow } from "../theme/shadow.stylex"; 12 - import { spacing } from "../theme/spacing.stylex"; 13 13 import { 14 14 fontFamily, 15 15 fontSize, ··· 32 32 fontFamily: fontFamily["sans"], 33 33 34 34 "--card-gap": { 35 - ":is([data-card-size=lg])": spacing["4"], 36 - ":is([data-card-size=md])": spacing["4"], 37 - ":is([data-card-size=sm])": spacing["1"], 35 + ":is([data-card-size=lg])": sizeSpace["4"], 36 + ":is([data-card-size=md])": sizeSpace["4"], 37 + ":is([data-card-size=sm])": sizeSpace["1"], 38 38 }, 39 39 "--card-x-padding": { 40 - ":is([data-card-size=lg])": spacing["8"], 41 - ":is([data-card-size=md])": spacing["6"], 42 - ":is([data-card-size=sm])": spacing["3"], 40 + ":is([data-card-size=lg])": sizeSpace["8"], 41 + ":is([data-card-size=md])": sizeSpace["6"], 42 + ":is([data-card-size=sm])": sizeSpace["3"], 43 43 }, 44 44 "--card-y-padding": { 45 - ":is([data-card-size=lg])": spacing["8"], 46 - ":is([data-card-size=md])": spacing["6"], 47 - ":is([data-card-size=sm])": spacing["3"], 45 + ":is([data-card-size=lg])": sizeSpace["8"], 46 + ":is([data-card-size=md])": sizeSpace["6"], 47 + ":is([data-card-size=sm])": sizeSpace["3"], 48 48 }, 49 49 }, 50 50 cardSection: { ··· 73 73 borderColor: uiColor.component2, 74 74 borderBottomStyle: "solid", 75 75 borderBottomWidth: 1, 76 - paddingBottom: spacing["6"], 76 + paddingBottom: verticalSpace["6"], 77 77 }, 78 78 cardHeaderAction: { 79 79 gridArea: "action", 80 - gap: spacing["1"], 80 + gap: gap["1"], 81 81 display: "flex", 82 82 justifyContent: "flex-end", 83 83 }, ··· 87 87 // eslint-disable-next-line @stylexjs/valid-styles 88 88 textBoxTrim: "trim-both", 89 89 gridArea: "title", 90 - gap: spacing["3"], 90 + gap: gap["3"], 91 91 alignItems: "center", 92 92 display: "flex", 93 93 fontFamily: fontFamily["title"], ··· 119 119 }, 120 120 }, 121 121 cardFooter: { 122 - gap: spacing["2"], 122 + gap: gap["2"], 123 123 display: "flex", 124 124 justifyContent: "flex-end", 125 125 },
+5 -5
packages/hip-ui/src/components/checkbox/index.tsx
··· 19 19 import { Description, FieldErrorMessage, Label } from "../label"; 20 20 import { radius } from "../theme/radius.stylex"; 21 21 import { primary, ui } from "../theme/semantic-color.stylex"; 22 - import { spacing } from "../theme/spacing.stylex"; 22 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 23 23 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 24 24 25 25 const styles = stylex.create({ 26 26 wrapper: { 27 - gap: spacing["2.5"], 27 + gap: gap["2.5"], 28 28 alignItems: { 29 29 default: "center", 30 30 ":has(p)": "flex-start", ··· 46 46 borderWidth: 2, 47 47 48 48 cornerShape: "squircle", 49 - height: spacing["4"], 50 - width: spacing["4"], 49 + height: sizeSpace["4"], 50 + width: sizeSpace["4"], 51 51 }, 52 52 checked: { 53 53 color: "white", 54 54 }, 55 55 group: { 56 - gap: spacing["3"], 56 + gap: gap["3"], 57 57 display: "flex", 58 58 flexDirection: "column", 59 59 },
+11 -11
packages/hip-ui/src/components/color-area/index.tsx
··· 13 13 14 14 import { mediaQueries } from "../theme/media-queries.stylex"; 15 15 import { radius } from "../theme/radius.stylex"; 16 - import { spacing } from "../theme/spacing.stylex"; 16 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 17 17 18 18 const styles = stylex.create({ 19 19 colorArea: { ··· 37 37 ":is([data-disabled])": "grayscale(1)", 38 38 }, 39 39 height: { 40 - default: spacing["4"], 41 - ":is([data-focus-visible])": spacing["6"], 42 - ":is([data-size=lg] *)": spacing["6"], 43 - ":is([data-size=md] *)": spacing["4"], 44 - ":is([data-size=sm] *)": spacing["3"], 40 + default: sizeSpace["4"], 41 + ":is([data-focus-visible])": sizeSpace["6"], 42 + ":is([data-size=lg] *)": sizeSpace["6"], 43 + ":is([data-size=md] *)": sizeSpace["4"], 44 + ":is([data-size=sm] *)": sizeSpace["3"], 45 45 }, 46 46 width: { 47 - default: spacing["4"], 48 - ":is([data-focus-visible])": spacing["6"], 49 - ":is([data-size=lg] *)": spacing["6"], 50 - ":is([data-size=md] *)": spacing["4"], 51 - ":is([data-size=sm] *)": spacing["3"], 47 + default: sizeSpace["4"], 48 + ":is([data-focus-visible])": sizeSpace["6"], 49 + ":is([data-size=lg] *)": sizeSpace["6"], 50 + ":is([data-size=md] *)": sizeSpace["4"], 51 + ":is([data-size=sm] *)": sizeSpace["3"], 52 52 }, 53 53 }, 54 54 aspectRatio: (aspectRatio: number) => ({
+1 -1
packages/hip-ui/src/components/color-field/color-field-config.ts
··· 4 4 name: "color-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+12 -12
packages/hip-ui/src/components/color-picker/index.tsx
··· 33 33 import { IconButton } from "../icon-button"; 34 34 import { Select, SelectItem } from "../select"; 35 35 import { Separator } from "../separator"; 36 - import { spacing } from "../theme/spacing.stylex"; 36 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 37 37 import { fontSize } from "../theme/typography.stylex"; 38 38 import { usePopoverStyles } from "../theme/usePopoverStyles"; 39 39 ··· 45 45 padding: 0, 46 46 borderWidth: 0, 47 47 gap: { 48 - default: spacing["2"], 49 - ":is([data-size=sm])": spacing["1"], 48 + default: gap["2"], 49 + ":is([data-size=sm])": sizeSpace["1"], 50 50 }, 51 51 alignItems: "center", 52 52 backgroundColor: "transparent", ··· 57 57 display: "block", 58 58 }, 59 59 defaultPicker: { 60 - paddingBottom: spacing["3"], 61 - paddingLeft: spacing["2"], 62 - paddingRight: spacing["2"], 63 - paddingTop: spacing["2"], 60 + paddingBottom: verticalSpace["3"], 61 + paddingLeft: horizontalSpace["2"], 62 + paddingRight: horizontalSpace["2"], 63 + paddingTop: verticalSpace["2"], 64 64 }, 65 65 popover: { 66 66 paddingBottom: 0, ··· 68 68 width: 328, 69 69 }, 70 70 separator: { 71 - marginLeft: `calc(${spacing["2"]} * -1)`, 72 - marginRight: `calc(${spacing["2"]} * -1)`, 73 - width: `calc(100% + ${spacing["2"]} * 2)`, 71 + marginLeft: `calc(${sizeSpace["2"]} * -1)`, 72 + marginRight: `calc(${sizeSpace["2"]} * -1)`, 73 + width: `calc(100% + ${sizeSpace["2"]} * 2)`, 74 74 }, 75 75 grow: { 76 76 flexBasis: "0%", ··· 79 79 minWidth: 0, 80 80 }, 81 81 controls: { 82 - paddingLeft: spacing["1"], 83 - paddingRight: spacing["1"], 82 + paddingLeft: horizontalSpace["1"], 83 + paddingRight: horizontalSpace["1"], 84 84 }, 85 85 }); 86 86
+5 -5
packages/hip-ui/src/components/color-slider/index.tsx
··· 16 16 import { uiColor } from "../theme/color.stylex"; 17 17 import { mediaQueries } from "../theme/media-queries.stylex"; 18 18 import { radius } from "../theme/radius.stylex"; 19 - import { spacing } from "../theme/spacing.stylex"; 19 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 20 20 import { fontSize, lineHeight } from "../theme/typography.stylex"; 21 21 22 22 const styles = stylex.create({ 23 23 colorSlider: { 24 - gap: spacing["2"], 24 + gap: gap["2"], 25 25 gridTemplateAreas: { 26 26 default: "'track'", 27 27 ":has(label,[data-slider-output])": "'label value-label' 'track track'", ··· 54 54 borderRadius: radius.full, 55 55 cornerShape: "squircle", 56 56 height: { 57 - ":is([data-size=lg] *)": spacing["6"], 58 - ":is([data-size=md] *)": spacing["4"], 59 - ":is([data-size=sm] *)": spacing["3"], 57 + ":is([data-size=lg] *)": sizeSpace["6"], 58 + ":is([data-size=md] *)": sizeSpace["4"], 59 + ":is([data-size=sm] *)": sizeSpace["3"], 60 60 }, 61 61 width: "100%", 62 62 },
+3 -3
packages/hip-ui/src/components/color-swatch-picker/index.tsx
··· 16 16 import { SizeContext } from "../context"; 17 17 import { uiColor } from "../theme/color.stylex"; 18 18 import { radius } from "../theme/radius.stylex"; 19 - import { spacing } from "../theme/spacing.stylex"; 19 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 20 20 21 21 const styles = stylex.create({ 22 22 picker: { 23 23 gap: { 24 - default: spacing["2"], 25 - ":is([data-size=sm])": spacing["1"], 24 + default: gap["2"], 25 + ":is([data-size=sm])": sizeSpace["1"], 26 26 }, 27 27 display: "flex", 28 28 flexDirection: {
+7 -7
packages/hip-ui/src/components/color-swatch/index.tsx
··· 10 10 import { uiColor } from "../theme/color.stylex"; 11 11 import { mediaQueries } from "../theme/media-queries.stylex"; 12 12 import { radius } from "../theme/radius.stylex"; 13 - import { spacing } from "../theme/spacing.stylex"; 13 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 14 14 15 15 const styles = stylex.create({ 16 16 swatch: { ··· 23 23 }, 24 24 swatchSm: { 25 25 borderRadius: radius.xs, 26 - height: spacing["4"], 27 - width: spacing["4"], 26 + height: sizeSpace["4"], 27 + width: sizeSpace["4"], 28 28 }, 29 29 swatchMd: { 30 30 borderRadius: radius.sm, 31 - height: spacing["6"], 32 - width: spacing["6"], 31 + height: sizeSpace["6"], 32 + width: sizeSpace["6"], 33 33 }, 34 34 swatchLg: { 35 35 borderRadius: radius.md, 36 - height: spacing["8"], 37 - width: spacing["8"], 36 + height: sizeSpace["8"], 37 + width: sizeSpace["8"], 38 38 }, 39 39 circle: { 40 40 borderRadius: {
+4 -4
packages/hip-ui/src/components/color-wheel/index.tsx
··· 14 14 import { Flex } from "../flex"; 15 15 import { uiColor } from "../theme/color.stylex"; 16 16 import { radius } from "../theme/radius.stylex"; 17 - import { spacing } from "../theme/spacing.stylex"; 17 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 18 18 19 19 const styles = stylex.create({ 20 20 wrapper: { ··· 24 24 gridArea: "track", 25 25 borderRadius: radius.full, 26 26 height: { 27 - ":is([data-size=lg] *)": spacing["6"], 28 - ":is([data-size=md] *)": spacing["4"], 29 - ":is([data-size=sm] *)": spacing["3"], 27 + ":is([data-size=lg] *)": sizeSpace["6"], 28 + ":is([data-size=md] *)": sizeSpace["4"], 29 + ":is([data-size=sm] *)": sizeSpace["3"], 30 30 }, 31 31 width: "100%", 32 32
+1 -1
packages/hip-ui/src/components/combobox/combobox-config.ts
··· 4 4 name: "combobox", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+2 -2
packages/hip-ui/src/components/combobox/index.tsx
··· 30 30 import { Description, FieldErrorMessage, Label } from "../label"; 31 31 import { ListBox } from "../listbox"; 32 32 import { SuffixIcon } from "../suffix-icon"; 33 - import { spacing } from "../theme/spacing.stylex"; 33 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 34 34 import { useInputStyles } from "../theme/useInputStyles"; 35 35 import { estimatedRowHeights } from "../theme/useListBoxItemStyles"; 36 36 import { usePopoverStyles } from "../theme/usePopoverStyles"; ··· 41 41 minWidth: "max(var(--trigger-width), 180px)", 42 42 }, 43 43 emptyState: { 44 - padding: spacing["4"], 44 + padding: sizeSpace["4"], 45 45 display: "flex", 46 46 justifyContent: "center", 47 47 },
+11 -11
packages/hip-ui/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["0.5"]} * -1)`, 29 + marginRight: `calc(${sizeSpace["0.5"]} * -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["2"], 33 + paddingLeft: horizontalSpace["3"], 34 + paddingRight: horizontalSpace["3"], 35 + paddingTop: verticalSpace["2"], 36 36 }, 37 37 searchField: { 38 - paddingBottom: spacing["3"], 39 - paddingLeft: spacing["3"], 40 - paddingRight: spacing["3"], 41 - paddingTop: spacing["3"], 38 + paddingBottom: verticalSpace["3"], 39 + paddingLeft: horizontalSpace["3"], 40 + paddingRight: horizontalSpace["3"], 41 + paddingTop: verticalSpace["3"], 42 42 }, 43 43 }); 44 44
+1 -1
packages/hip-ui/src/components/content/content-config.ts
··· 4 4 name: "content", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/typography.stylex.tsx", 9 9 "../theme/types.ts", 10 10 ],
+19 -19
packages/hip-ui/src/components/content/index.tsx
··· 2 2 3 3 import type { StyleXComponentProps } from "../theme/types"; 4 4 5 - import { spacing } from "../theme/spacing.stylex"; 5 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 6 6 import { lineHeight } from "../theme/typography.stylex"; 7 7 8 8 const styles = stylex.create({ ··· 10 10 /* eslint-disable @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles */ 11 11 12 12 ":is(*) > :is(:has(h1),h1)": { 13 - marginBottom: spacing["8"], 14 - marginTop: spacing["8"], 13 + marginBottom: verticalSpace["8"], 14 + marginTop: verticalSpace["8"], 15 15 }, 16 16 ":is(*) > :is(:has(h2),h2)": { 17 - marginBottom: spacing["4"], 18 - marginTop: spacing["8"], 17 + marginBottom: verticalSpace["4"], 18 + marginTop: verticalSpace["8"], 19 19 }, 20 20 ":is(*) > :is(:has(h3),h3)": { 21 - marginBottom: spacing["5"], 22 - marginTop: spacing["8"], 21 + marginBottom: verticalSpace["5"], 22 + marginTop: verticalSpace["8"], 23 23 }, 24 24 ":is(*) > :is(:has(h4),h4)": { 25 - marginBottom: spacing["8"], 26 - marginTop: spacing["8"], 25 + marginBottom: verticalSpace["8"], 26 + marginTop: verticalSpace["8"], 27 27 }, 28 28 ":is(*) > :is(:has(h5),h5)": { 29 - marginBottom: spacing["8"], 30 - marginTop: spacing["8"], 29 + marginBottom: verticalSpace["8"], 30 + marginTop: verticalSpace["8"], 31 31 }, 32 32 ":is(*) > blockquote": { 33 33 marginBottom: 0, 34 - marginLeft: spacing["2"], 34 + marginLeft: horizontalSpace["2"], 35 35 marginRight: 0, 36 36 marginTop: 0, 37 - paddingLeft: spacing["4"], 37 + paddingLeft: horizontalSpace["4"], 38 38 }, 39 39 ":is(*) > p": { 40 40 lineHeight: { ··· 43 43 ":is(li *)": lineHeight.base, 44 44 }, 45 45 marginBottom: { 46 - default: spacing["5"], 47 - ":is(blockquote *)": spacing["0"], 48 - ":is(li *)": spacing["0"], 46 + default: sizeSpace["5"], 47 + ":is(blockquote *)": sizeSpace["0"], 48 + ":is(li *)": sizeSpace["0"], 49 49 }, 50 50 marginTop: { 51 - default: spacing["5"], 52 - ":is(blockquote *)": spacing["0"], 53 - ":is(li *)": spacing["0"], 51 + default: sizeSpace["5"], 52 + ":is(blockquote *)": sizeSpace["0"], 53 + ":is(li *)": sizeSpace["0"], 54 54 }, 55 55 }, 56 56
+3 -3
packages/hip-ui/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["0.5"], 40 + paddingTop: verticalSpace["0.5"], 41 41 }, 42 42 }); 43 43
+1 -1
packages/hip-ui/src/components/date-field/date-field-config.ts
··· 4 4 name: "date-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+2 -2
packages/hip-ui/src/components/date-picker/index.tsx
··· 29 29 import { Flex } from "../flex"; 30 30 import { IconButton } from "../icon-button"; 31 31 import { Description, FieldErrorMessage, Label } from "../label"; 32 - import { spacing } from "../theme/spacing.stylex"; 32 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 33 33 import { useInputStyles } from "../theme/useInputStyles"; 34 34 import { usePopoverStyles } from "../theme/usePopoverStyles"; 35 35 ··· 48 48 49 49 const styles = stylex.create({ 50 50 popoverContent: { 51 - padding: spacing["2"], 51 + padding: sizeSpace["2"], 52 52 }, 53 53 }); 54 54
+6 -6
packages/hip-ui/src/components/date-range-picker/index.tsx
··· 32 32 import { RangeCalendar } from "../range-calendar"; 33 33 import { SuffixIcon } from "../suffix-icon"; 34 34 import { uiColor } from "../theme/color.stylex"; 35 - import { spacing } from "../theme/spacing.stylex"; 35 + import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 36 36 import { fontSize } from "../theme/typography.stylex"; 37 37 import { useInputStyles } from "../theme/useInputStyles"; 38 38 import { usePopoverStyles } from "../theme/usePopoverStyles"; ··· 52 52 53 53 const styles = stylex.create({ 54 54 group: { 55 - gap: spacing["1"], 55 + gap: gap["1"], 56 56 alignItems: "center", 57 57 display: "flex", 58 58 ··· 63 63 }, 64 64 }, 65 65 popoverContent: { 66 - padding: spacing["2"], 66 + padding: sizeSpace["2"], 67 67 }, 68 68 separator: { 69 69 paddingRight: { 70 - ":is([data-size=lg] *)": spacing["1"], 71 - ":is([data-size=md] *)": spacing["2"], 72 - ":is([data-size=sm] *)": spacing["1"], 70 + ":is([data-size=lg] *)": horizontalSpace["1"], 71 + ":is([data-size=md] *)": sizeSpace["2"], 72 + ":is([data-size=sm] *)": sizeSpace["1"], 73 73 }, 74 74 }, 75 75 lastInput: {
+23 -21
packages/hip-ui/src/components/dialog/index.tsx
··· 17 17 import { useHaptics } from "../haptics"; 18 18 import { IconButton } from "../icon-button"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 - import { spacing } from "../theme/spacing.stylex"; 20 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 21 21 import { fontSize, typeramp } from "../theme/typography.stylex"; 22 22 import { useDialogStyles } from "../theme/useDialogStyles"; 23 23 ··· 26 26 overflow: "auto", 27 27 }, 28 28 header: { 29 - gap: spacing["2"], 29 + gap: gap["2"], 30 30 alignItems: "center", 31 31 backgroundColor: uiColor.bg, 32 32 display: "flex", ··· 34 34 justifyContent: "space-between", 35 35 position: "sticky", 36 36 zIndex: 1, 37 - height: spacing["8"], 38 - paddingBottom: spacing["2"], 39 - paddingLeft: spacing["4"], 40 - paddingRight: spacing["4"], 41 - paddingTop: spacing["2"], 37 + height: sizeSpace["8"], 38 + paddingBottom: verticalSpace["2"], 39 + paddingLeft: horizontalSpace["4"], 40 + paddingRight: horizontalSpace["4"], 41 + paddingTop: verticalSpace["2"], 42 42 top: 0, 43 43 44 44 borderBottomColor: uiColor.border1, ··· 47 47 }, 48 48 description: { 49 49 color: uiColor.text1, 50 - marginBottom: spacing["4"], 51 - marginTop: spacing["4"], 52 - paddingLeft: spacing["4"], 53 - paddingRight: spacing["4"], 50 + marginBottom: verticalSpace["4"], 51 + marginTop: verticalSpace["4"], 52 + paddingLeft: horizontalSpace["4"], 53 + paddingRight: horizontalSpace["4"], 54 54 }, 55 55 body: { 56 - marginBottom: spacing["4"], 57 - marginTop: spacing["4"], 58 - paddingLeft: spacing["4"], 59 - paddingRight: spacing["4"], 56 + marginBottom: verticalSpace["4"], 57 + marginTop: verticalSpace["4"], 58 + paddingLeft: horizontalSpace["4"], 59 + paddingRight: horizontalSpace["4"], 60 60 }, 61 + /* eslint-disable @stylexjs/sort-keys -- footer layout + padding order */ 61 62 footer: { 62 - gap: spacing["2"], 63 + gap: gap["2"], 63 64 display: "flex", 64 65 justifyContent: "flex-end", 65 - paddingBottom: spacing["4"], 66 - paddingLeft: spacing["4"], 67 - paddingRight: spacing["4"], 68 - paddingTop: spacing["4"], 66 + paddingBottom: verticalSpace["4"], 67 + paddingLeft: horizontalSpace["4"], 68 + paddingRight: horizontalSpace["4"], 69 69 position: "sticky", 70 - bottom: 0, 70 + paddingTop: verticalSpace["4"], 71 71 zIndex: 1, 72 + bottom: 0, 72 73 backgroundColor: uiColor.bg, 73 74 74 75 borderTopColor: uiColor.border1, 75 76 borderTopStyle: "solid", 76 77 borderTopWidth: 1, 77 78 }, 79 + /* eslint-enable @stylexjs/sort-keys */ 78 80 }); 79 81 80 82 export interface DialogProps extends DialogTriggerProps {
+1 -1
packages/hip-ui/src/components/disclosure/disclosure-config.ts
··· 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 "../theme/semantic-color.stylex.tsx", 8 - "../theme/spacing.stylex.tsx", 8 + "../theme/semantic-spacing.stylex.tsx", 9 9 "../theme/typography.stylex.tsx", 10 10 "../theme/radius.stylex.tsx", 11 11 "../theme/animations.stylex.tsx",
+8 -8
packages/hip-ui/src/components/disclosure/index.tsx
··· 20 20 import { uiColor } from "../theme/color.stylex"; 21 21 import { mediaQueries } from "../theme/media-queries.stylex"; 22 22 import { radius } from "../theme/radius.stylex"; 23 - import { spacing } from "../theme/spacing.stylex"; 23 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 24 24 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 25 25 26 26 const styles = stylex.create({ ··· 30 30 }, 31 31 title: { 32 32 padding: { 33 - ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`, 34 - ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`, 35 - ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`, 33 + ":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["4"]}`, 34 + ":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`, 35 + ":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`, 36 36 }, 37 37 borderRadius: radius.lg, 38 38 borderWidth: 0, 39 39 40 40 cornerShape: "squircle", 41 - gap: spacing["2"], 41 + gap: gap["2"], 42 42 alignItems: "center", 43 43 backgroundColor: { 44 44 default: "transparent", ··· 97 97 }, 98 98 panelContent: { 99 99 padding: { 100 - ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`, 101 - ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`, 102 - ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`, 100 + ":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["4"]}`, 101 + ":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`, 102 + ":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`, 103 103 }, 104 104 }, 105 105 });
+1 -1
packages/hip-ui/src/components/drawer/drawer-config.ts
··· 10 10 "../haptics/index.ts", 11 11 "../context.ts", 12 12 "../theme/useDialogStyles.ts", 13 - "../theme/spacing.stylex.tsx", 13 + "../theme/semantic-spacing.stylex.tsx", 14 14 "../theme/semantic-color.stylex.tsx", 15 15 "../theme/typography.stylex.tsx", 16 16 "../theme/types.ts",
+23 -23
packages/hip-ui/src/components/drawer/index.tsx
··· 22 22 animations, 23 23 } from "../theme/animations.stylex"; 24 24 import { uiColor } from "../theme/color.stylex"; 25 - import { spacing } from "../theme/spacing.stylex"; 25 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 26 26 import { typeramp } from "../theme/typography.stylex"; 27 27 import { useDialogStyles } from "../theme/useDialogStyles"; 28 28 import { NonModalDrawer } from "./NonModalDrawer"; ··· 83 83 }, 84 84 maxHeight: { 85 85 ":is([data-direction=right], [data-direction=left])": "100vh", 86 - ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`, 86 + ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["8"]})`, 87 87 }, 88 88 maxWidth: { 89 - ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${spacing["8"]})`, 89 + ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["8"]})`, 90 90 ":is([data-direction=top], [data-direction=bottom])": "100vw", 91 91 }, 92 92 width: { ··· 117 117 }, 118 118 dialog: { 119 119 overflow: "auto", 120 - paddingBottom: spacing["2"], 121 - paddingTop: spacing["2"], 120 + paddingBottom: verticalSpace["2"], 121 + paddingTop: verticalSpace["2"], 122 122 }, 123 123 header: { 124 - gap: spacing["2"], 124 + gap: gap["2"], 125 125 alignItems: "center", 126 126 display: "flex", 127 127 justifyContent: "space-between", 128 - height: spacing["8"], 129 - paddingBottom: spacing["2"], 130 - paddingLeft: spacing["4"], 131 - paddingRight: spacing["4"], 128 + height: sizeSpace["8"], 129 + paddingBottom: verticalSpace["2"], 130 + paddingLeft: horizontalSpace["4"], 131 + paddingRight: horizontalSpace["4"], 132 132 }, 133 133 description: { 134 134 color: uiColor.text1, 135 - paddingBottom: spacing["4"], 136 - paddingLeft: spacing["4"], 137 - paddingRight: spacing["4"], 138 - paddingTop: spacing["4"], 135 + paddingBottom: verticalSpace["4"], 136 + paddingLeft: horizontalSpace["4"], 137 + paddingRight: horizontalSpace["4"], 138 + paddingTop: verticalSpace["4"], 139 139 }, 140 140 body: { 141 141 flexGrow: 1, 142 - paddingBottom: spacing["4"], 143 - paddingLeft: spacing["4"], 144 - paddingRight: spacing["4"], 145 - paddingTop: { default: 0, ":first-child": spacing["4"] }, 142 + paddingBottom: verticalSpace["4"], 143 + paddingLeft: horizontalSpace["4"], 144 + paddingRight: horizontalSpace["4"], 145 + paddingTop: { default: 0, ":first-child": verticalSpace["4"] }, 146 146 }, 147 147 footer: { 148 - gap: spacing["2"], 148 + gap: gap["2"], 149 149 display: "flex", 150 150 justifyContent: "flex-end", 151 - paddingBottom: spacing["2"], 152 - paddingLeft: spacing["4"], 153 - paddingRight: spacing["4"], 154 - paddingTop: spacing["4"], 151 + paddingBottom: verticalSpace["2"], 152 + paddingLeft: horizontalSpace["4"], 153 + paddingRight: horizontalSpace["4"], 154 + paddingTop: verticalSpace["4"], 155 155 156 156 borderTopColor: uiColor.border1, 157 157 borderTopStyle: "solid",
+1 -1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
··· 4 4 name: "editable-text", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+9 -9
packages/hip-ui/src/components/editable-text/index.tsx
··· 11 11 import type { StyleXComponentProps } from "../theme/types"; 12 12 13 13 import { radius } from "../theme/radius.stylex"; 14 - import { spacing } from "../theme/spacing.stylex"; 14 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 15 16 16 const focusClosestFocusableElement = () => { 17 17 const focusableElements = document.activeElement?.parentElement?.closest( ··· 44 44 ":focus": "1px", 45 45 }, 46 46 47 - marginBottom: `calc(${spacing["1"]} * -1)`, 48 - marginLeft: `calc(${spacing["2"]} * -1)`, 49 - marginRight: `calc(${spacing["2"]} * -1)`, 50 - marginTop: `calc(${spacing["1"]} * -1)`, 51 - paddingBottom: spacing["1"], 52 - paddingLeft: spacing["2"], 53 - paddingRight: spacing["2"], 54 - paddingTop: spacing["1"], 47 + marginBottom: `calc(${sizeSpace["1"]} * -1)`, 48 + marginLeft: `calc(${sizeSpace["2"]} * -1)`, 49 + marginRight: `calc(${sizeSpace["2"]} * -1)`, 50 + marginTop: `calc(${sizeSpace["1"]} * -1)`, 51 + paddingBottom: verticalSpace["1"], 52 + paddingLeft: horizontalSpace["2"], 53 + paddingRight: horizontalSpace["2"], 54 + paddingTop: verticalSpace["1"], 55 55 }, 56 56 }); 57 57
+1 -1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
··· 4 4 name: "empty-state", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/semantic-color.stylex.tsx", 9 9 "../theme/typography.stylex.tsx", 10 10 "../theme/types.ts",
+10 -10
packages/hip-ui/src/components/empty-state/index.tsx
··· 7 7 8 8 import { SizeContext } from "../context"; 9 9 import { ui } from "../theme/semantic-color.stylex"; 10 - import { spacing } from "../theme/spacing.stylex"; 10 + import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 11 11 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 12 12 13 13 const styles = stylex.create({ 14 14 emptyState: { 15 15 "--empty-state-image-size": { 16 - ":is([data-empty-state-size=lg])": spacing["20"], 17 - ":is([data-empty-state-size=md])": spacing["14"], 18 - ":is([data-empty-state-size=sm])": spacing["10"], 16 + ":is([data-empty-state-size=lg])": sizeSpace["20"], 17 + ":is([data-empty-state-size=md])": sizeSpace["14"], 18 + ":is([data-empty-state-size=sm])": sizeSpace["10"], 19 19 }, 20 20 gridTemplateAreas: { 21 21 // eslint-disable-next-line @stylexjs/valid-styles ··· 46 46 }, 47 47 alignItems: "center", 48 48 columnGap: { 49 - ":is([data-empty-state-size=sm])": spacing["4"], 49 + ":is([data-empty-state-size=sm])": sizeSpace["4"], 50 50 }, 51 51 display: "grid", 52 52 fontFamily: fontFamily["sans"], ··· 62 62 ":is([data-empty-state-size=sm])": "start", 63 63 }, 64 64 rowGap: { 65 - ":is([data-empty-state-size=lg])": spacing["6"], 66 - ":is([data-empty-state-size=md])": spacing["4"], 67 - ":is([data-empty-state-size=sm])": spacing["2"], 65 + ":is([data-empty-state-size=lg])": sizeSpace["6"], 66 + ":is([data-empty-state-size=md])": sizeSpace["4"], 67 + ":is([data-empty-state-size=sm])": sizeSpace["2"], 68 68 }, 69 69 textAlign: "center", 70 70 }, ··· 100 100 }, 101 101 actions: { 102 102 gridArea: "actions", 103 - gap: spacing["2"], 103 + gap: gap["2"], 104 104 alignItems: "center", 105 105 display: "flex", 106 106 flexDirection: "row", ··· 108 108 justifyContent: "center", 109 109 110 110 paddingLeft: { 111 - ":is([data-empty-state-size=sm] *)": spacing["4"], 111 + ":is([data-empty-state-size=sm] *)": horizontalSpace["4"], 112 112 }, 113 113 }, 114 114 });
+2 -2
packages/hip-ui/src/components/file-drop-zone/index.tsx
··· 24 24 import { mediaQueries } from "../theme/media-queries.stylex"; 25 25 import { radius } from "../theme/radius.stylex"; 26 26 import { ui } from "../theme/semantic-color.stylex"; 27 - import { spacing } from "../theme/spacing.stylex"; 27 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 28 28 29 29 async function getFiles(items: Array<DropItem>): Promise<Array<File>> { 30 30 return Promise.all( ··· 34 34 35 35 const styles = stylex.create({ 36 36 dropZone: { 37 - padding: spacing["4"], 37 + padding: sizeSpace["4"], 38 38 borderColor: { 39 39 default: uiColor.border3, 40 40 ":is([data-drop-target])": primaryColor.solid1,
+1 -1
packages/hip-ui/src/components/flex/flex-config.ts
··· 3 3 export const flexConfig: ComponentConfig = { 4 4 name: "flex", 5 5 filepath: "./index.tsx", 6 - hipDependencies: ["../theme/spacing.stylex.tsx"], 6 + hipDependencies: ["../theme/semantic-spacing.stylex.tsx"], 7 7 };
+36 -36
packages/hip-ui/src/components/flex/index.tsx
··· 1 1 import * as stylex from "@stylexjs/stylex"; 2 2 3 - import type { Spacing } from "../theme/spacing.stylex"; 3 + import type { Gap } from "../theme/semantic-spacing.stylex"; 4 4 import type { StyleXComponentProps } from "../theme/types"; 5 5 6 - import { spacing } from "../theme/spacing.stylex"; 6 + import { gap as gapSpace } from "../theme/semantic-spacing.stylex"; 7 7 8 8 const styles = stylex.create({ 9 9 base: { display: "flex" }, ··· 25 25 "align-end": { alignItems: "flex-end" }, 26 26 "align-center": { alignItems: "center" }, 27 27 "align-baseline": { alignItems: "baseline" }, 28 - "gap-0.5": { gap: spacing["0.5"] }, 29 - "gap-1": { gap: spacing["1"] }, 30 - "gap-1.5": { gap: spacing["1.5"] }, 31 - "gap-2": { gap: spacing["2"] }, 32 - "gap-2.5": { gap: spacing["2.5"] }, 33 - "gap-3": { gap: spacing["3"] }, 34 - "gap-3.5": { gap: spacing["3.5"] }, 35 - "gap-4": { gap: spacing["4"] }, 36 - "gap-5": { gap: spacing["5"] }, 37 - "gap-6": { gap: spacing["6"] }, 38 - "gap-7": { gap: spacing["7"] }, 39 - "gap-8": { gap: spacing["8"] }, 40 - "gap-9": { gap: spacing["9"] }, 41 - "gap-10": { gap: spacing["10"] }, 42 - "gap-11": { gap: spacing["11"] }, 43 - "gap-12": { gap: spacing["12"] }, 44 - "gap-14": { gap: spacing["14"] }, 45 - "gap-16": { gap: spacing["16"] }, 46 - "gap-20": { gap: spacing["20"] }, 47 - "gap-24": { gap: spacing["24"] }, 48 - "gap-28": { gap: spacing["28"] }, 49 - "gap-32": { gap: spacing["32"] }, 50 - "gap-36": { gap: spacing["36"] }, 51 - "gap-40": { gap: spacing["40"] }, 52 - "gap-44": { gap: spacing["44"] }, 53 - "gap-48": { gap: spacing["48"] }, 54 - "gap-52": { gap: spacing["52"] }, 55 - "gap-56": { gap: spacing["56"] }, 56 - "gap-60": { gap: spacing["60"] }, 57 - "gap-64": { gap: spacing["64"] }, 58 - "gap-72": { gap: spacing["72"] }, 59 - "gap-80": { gap: spacing["80"] }, 60 - "gap-96": { gap: spacing["96"] }, 28 + "gap-0.5": { gap: gapSpace["0.5"] }, 29 + "gap-1": { gap: gapSpace["1"] }, 30 + "gap-1.5": { gap: gapSpace["1.5"] }, 31 + "gap-2": { gap: gapSpace["2"] }, 32 + "gap-2.5": { gap: gapSpace["2.5"] }, 33 + "gap-3": { gap: gapSpace["3"] }, 34 + "gap-3.5": { gap: gapSpace["3.5"] }, 35 + "gap-4": { gap: gapSpace["4"] }, 36 + "gap-5": { gap: gapSpace["5"] }, 37 + "gap-6": { gap: gapSpace["6"] }, 38 + "gap-7": { gap: gapSpace["7"] }, 39 + "gap-8": { gap: gapSpace["8"] }, 40 + "gap-9": { gap: gapSpace["9"] }, 41 + "gap-10": { gap: gapSpace["10"] }, 42 + "gap-11": { gap: gapSpace["11"] }, 43 + "gap-12": { gap: gapSpace["12"] }, 44 + "gap-14": { gap: gapSpace["14"] }, 45 + "gap-16": { gap: gapSpace["16"] }, 46 + "gap-20": { gap: gapSpace["20"] }, 47 + "gap-24": { gap: gapSpace["24"] }, 48 + "gap-28": { gap: gapSpace["28"] }, 49 + "gap-32": { gap: gapSpace["32"] }, 50 + "gap-36": { gap: gapSpace["36"] }, 51 + "gap-40": { gap: gapSpace["40"] }, 52 + "gap-44": { gap: gapSpace["44"] }, 53 + "gap-48": { gap: gapSpace["48"] }, 54 + "gap-52": { gap: gapSpace["52"] }, 55 + "gap-56": { gap: gapSpace["56"] }, 56 + "gap-60": { gap: gapSpace["60"] }, 57 + "gap-64": { gap: gapSpace["64"] }, 58 + "gap-72": { gap: gapSpace["72"] }, 59 + "gap-80": { gap: gapSpace["80"] }, 60 + "gap-96": { gap: gapSpace["96"] }, 61 61 }); 62 62 63 63 export interface FlexProps extends StyleXComponentProps< ··· 97 97 * @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" 98 98 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap 99 99 */ 100 - gap?: Spacing; 100 + gap?: Gap; 101 101 /** 102 102 * Whether the flex container is inline. 103 103 * @default false
+1 -1
packages/hip-ui/src/components/footer/footer-config.ts
··· 4 4 name: "footer", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/semantic-color.stylex.tsx", 9 9 "../theme/typography.stylex.tsx", 10 10 "../theme/media-queries.stylex.tsx",
+20 -20
packages/hip-ui/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["8"], 37 + [containerBreakpoints.sm]: sizeSpace["4"], 38 + ":is([data-footer-centered] *)": `${sizeSpace["8"]} !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["6"], 58 58 paddingLeft: { 59 - default: spacing["4"], 60 - [containerBreakpoints.sm]: spacing["8"], 59 + default: horizontalSpace["4"], 60 + [containerBreakpoints.sm]: sizeSpace["8"], 61 61 }, 62 62 paddingRight: { 63 - default: spacing["4"], 64 - [containerBreakpoints.sm]: spacing["8"], 63 + default: horizontalSpace["4"], 64 + [containerBreakpoints.sm]: sizeSpace["8"], 65 65 }, 66 - paddingTop: spacing["6"], 66 + paddingTop: verticalSpace["6"], 67 67 }, 68 68 navSection: { 69 - columnGap: spacing["8"], 69 + columnGap: gap["8"], 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["6"], 79 79 }, 80 80 section: { 81 - gap: spacing["2"], 81 + gap: gap["2"], 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["1.5"], 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["4"], 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["5"], 117 + width: sizeSpace["5"], 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["2"], 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["2"], 175 175 }, 176 176 subscribeInput: { 177 177 gridArea: "input", 178 - gap: spacing["2"], 178 + gap: gap["2"], 179 179 alignItems: "flex-start", 180 180 display: "flex", 181 181 flexDirection: "row",
+1 -1
packages/hip-ui/src/components/form/form-config.ts
··· 3 3 export const formConfig: ComponentConfig = { 4 4 name: "form", 5 5 filepath: "./index.tsx", 6 - hipDependencies: ["../theme/spacing.stylex.tsx", "../theme/types.ts"], 6 + hipDependencies: ["../theme/semantic-spacing.stylex.tsx", "../theme/types.ts"], 7 7 dependencies: { 8 8 "react-aria-components": "^1.13.0", 9 9 },
+2 -2
packages/hip-ui/src/components/form/index.tsx
··· 7 7 8 8 import type { StyleXComponentProps } from "../theme/types"; 9 9 10 - import { spacing } from "../theme/spacing.stylex"; 10 + import { gap } from "../theme/semantic-spacing.stylex"; 11 11 12 12 const styles = stylex.create({ 13 13 form: { 14 - gap: spacing["4"], 14 + gap: gap["4"], 15 15 display: "flex", 16 16 flexDirection: "column", 17 17 },
+1 -1
packages/hip-ui/src/components/grid/grid-config.ts
··· 3 3 export const gridConfig: ComponentConfig = { 4 4 name: "grid", 5 5 filepath: "./index.tsx", 6 - hipDependencies: ["../theme/spacing.stylex.tsx"], 6 + hipDependencies: ["../theme/semantic-spacing.stylex.tsx"], 7 7 };
+70 -70
packages/hip-ui/src/components/grid/index.tsx
··· 1 1 import * as stylex from "@stylexjs/stylex"; 2 2 3 - import type { Spacing } from "../theme/spacing.stylex"; 3 + import type { Gap } from "../theme/semantic-spacing.stylex"; 4 4 import type { StyleXComponentProps } from "../theme/types"; 5 5 6 - import { spacing } from "../theme/spacing.stylex"; 6 + import { gap } from "../theme/semantic-spacing.stylex"; 7 7 8 8 const styles = stylex.create({ 9 9 base: { display: "grid" }, ··· 35 35 "justify-items-end": { justifyItems: "end" }, 36 36 "justify-items-center": { justifyItems: "center" }, 37 37 38 - "row-gap-0.5": { gap: spacing["0.5"] }, 39 - "row-gap-1": { gap: spacing["1"] }, 40 - "row-gap-1.5": { gap: spacing["1.5"] }, 41 - "row-gap-2": { gap: spacing["2"] }, 42 - "row-gap-2.5": { gap: spacing["2.5"] }, 43 - "row-gap-3": { gap: spacing["3"] }, 44 - "row-gap-3.5": { gap: spacing["3.5"] }, 45 - "row-gap-4": { gap: spacing["4"] }, 46 - "row-gap-5": { gap: spacing["5"] }, 47 - "row-gap-6": { gap: spacing["6"] }, 48 - "row-gap-7": { gap: spacing["7"] }, 49 - "row-gap-8": { gap: spacing["8"] }, 50 - "row-gap-9": { gap: spacing["9"] }, 51 - "row-gap-10": { gap: spacing["10"] }, 52 - "row-gap-11": { gap: spacing["11"] }, 53 - "row-gap-12": { gap: spacing["12"] }, 54 - "row-gap-14": { gap: spacing["14"] }, 55 - "row-gap-16": { gap: spacing["16"] }, 56 - "row-gap-20": { gap: spacing["20"] }, 57 - "row-gap-24": { gap: spacing["24"] }, 58 - "row-gap-28": { gap: spacing["28"] }, 59 - "row-gap-32": { gap: spacing["32"] }, 60 - "row-gap-36": { gap: spacing["36"] }, 61 - "row-gap-40": { gap: spacing["40"] }, 62 - "row-gap-44": { gap: spacing["44"] }, 63 - "row-gap-48": { gap: spacing["48"] }, 64 - "row-gap-52": { gap: spacing["52"] }, 65 - "row-gap-56": { gap: spacing["56"] }, 66 - "row-gap-60": { gap: spacing["60"] }, 67 - "row-gap-64": { gap: spacing["64"] }, 68 - "row-gap-72": { gap: spacing["72"] }, 69 - "row-gap-80": { gap: spacing["80"] }, 70 - "row-gap-96": { gap: spacing["96"] }, 38 + "row-gap-0.5": { rowGap: gap["0.5"] }, 39 + "row-gap-1": { rowGap: gap["1"] }, 40 + "row-gap-1.5": { rowGap: gap["1.5"] }, 41 + "row-gap-2": { rowGap: gap["2"] }, 42 + "row-gap-2.5": { rowGap: gap["2.5"] }, 43 + "row-gap-3": { rowGap: gap["3"] }, 44 + "row-gap-3.5": { rowGap: gap["3.5"] }, 45 + "row-gap-4": { rowGap: gap["4"] }, 46 + "row-gap-5": { rowGap: gap["5"] }, 47 + "row-gap-6": { rowGap: gap["6"] }, 48 + "row-gap-7": { rowGap: gap["7"] }, 49 + "row-gap-8": { rowGap: gap["8"] }, 50 + "row-gap-9": { rowGap: gap["9"] }, 51 + "row-gap-10": { rowGap: gap["10"] }, 52 + "row-gap-11": { rowGap: gap["11"] }, 53 + "row-gap-12": { rowGap: gap["12"] }, 54 + "row-gap-14": { rowGap: gap["14"] }, 55 + "row-gap-16": { rowGap: gap["16"] }, 56 + "row-gap-20": { rowGap: gap["20"] }, 57 + "row-gap-24": { rowGap: gap["24"] }, 58 + "row-gap-28": { rowGap: gap["28"] }, 59 + "row-gap-32": { rowGap: gap["32"] }, 60 + "row-gap-36": { rowGap: gap["36"] }, 61 + "row-gap-40": { rowGap: gap["40"] }, 62 + "row-gap-44": { rowGap: gap["44"] }, 63 + "row-gap-48": { rowGap: gap["48"] }, 64 + "row-gap-52": { rowGap: gap["52"] }, 65 + "row-gap-56": { rowGap: gap["56"] }, 66 + "row-gap-60": { rowGap: gap["60"] }, 67 + "row-gap-64": { rowGap: gap["64"] }, 68 + "row-gap-72": { rowGap: gap["72"] }, 69 + "row-gap-80": { rowGap: gap["80"] }, 70 + "row-gap-96": { rowGap: gap["96"] }, 71 71 72 - "column-gap-0.5": { gap: spacing["0.5"] }, 73 - "column-gap-1": { gap: spacing["1"] }, 74 - "column-gap-1.5": { gap: spacing["1.5"] }, 75 - "column-gap-2": { gap: spacing["2"] }, 76 - "column-gap-2.5": { gap: spacing["2.5"] }, 77 - "column-gap-3": { gap: spacing["3"] }, 78 - "column-gap-3.5": { gap: spacing["3.5"] }, 79 - "column-gap-4": { gap: spacing["4"] }, 80 - "column-gap-5": { gap: spacing["5"] }, 81 - "column-gap-6": { gap: spacing["6"] }, 82 - "column-gap-7": { gap: spacing["7"] }, 83 - "column-gap-8": { gap: spacing["8"] }, 84 - "column-gap-9": { gap: spacing["9"] }, 85 - "column-gap-10": { gap: spacing["10"] }, 86 - "column-gap-11": { gap: spacing["11"] }, 87 - "column-gap-12": { gap: spacing["12"] }, 88 - "column-gap-14": { gap: spacing["14"] }, 89 - "column-gap-16": { gap: spacing["16"] }, 90 - "column-gap-20": { gap: spacing["20"] }, 91 - "column-gap-24": { gap: spacing["24"] }, 92 - "column-gap-28": { gap: spacing["28"] }, 93 - "column-gap-32": { gap: spacing["32"] }, 94 - "column-gap-36": { gap: spacing["36"] }, 95 - "column-gap-40": { gap: spacing["40"] }, 96 - "column-gap-44": { gap: spacing["44"] }, 97 - "column-gap-48": { gap: spacing["48"] }, 98 - "column-gap-52": { gap: spacing["52"] }, 99 - "column-gap-56": { gap: spacing["56"] }, 100 - "column-gap-60": { gap: spacing["60"] }, 101 - "column-gap-64": { gap: spacing["64"] }, 102 - "column-gap-72": { gap: spacing["72"] }, 103 - "column-gap-80": { gap: spacing["80"] }, 104 - "column-gap-96": { gap: spacing["96"] }, 72 + "column-gap-0.5": { columnGap: gap["0.5"] }, 73 + "column-gap-1": { columnGap: gap["1"] }, 74 + "column-gap-1.5": { columnGap: gap["1.5"] }, 75 + "column-gap-2": { columnGap: gap["2"] }, 76 + "column-gap-2.5": { columnGap: gap["2.5"] }, 77 + "column-gap-3": { columnGap: gap["3"] }, 78 + "column-gap-3.5": { columnGap: gap["3.5"] }, 79 + "column-gap-4": { columnGap: gap["4"] }, 80 + "column-gap-5": { columnGap: gap["5"] }, 81 + "column-gap-6": { columnGap: gap["6"] }, 82 + "column-gap-7": { columnGap: gap["7"] }, 83 + "column-gap-8": { columnGap: gap["8"] }, 84 + "column-gap-9": { columnGap: gap["9"] }, 85 + "column-gap-10": { columnGap: gap["10"] }, 86 + "column-gap-11": { columnGap: gap["11"] }, 87 + "column-gap-12": { columnGap: gap["12"] }, 88 + "column-gap-14": { columnGap: gap["14"] }, 89 + "column-gap-16": { columnGap: gap["16"] }, 90 + "column-gap-20": { columnGap: gap["20"] }, 91 + "column-gap-24": { columnGap: gap["24"] }, 92 + "column-gap-28": { columnGap: gap["28"] }, 93 + "column-gap-32": { columnGap: gap["32"] }, 94 + "column-gap-36": { columnGap: gap["36"] }, 95 + "column-gap-40": { columnGap: gap["40"] }, 96 + "column-gap-44": { columnGap: gap["44"] }, 97 + "column-gap-48": { columnGap: gap["48"] }, 98 + "column-gap-52": { columnGap: gap["52"] }, 99 + "column-gap-56": { columnGap: gap["56"] }, 100 + "column-gap-60": { columnGap: gap["60"] }, 101 + "column-gap-64": { columnGap: gap["64"] }, 102 + "column-gap-72": { columnGap: gap["72"] }, 103 + "column-gap-80": { columnGap: gap["80"] }, 104 + "column-gap-96": { columnGap: gap["96"] }, 105 105 106 106 columnStart: (start: number) => ({ gridColumnStart: start }), 107 107 columnEnd: (end: number) => ({ gridColumnEnd: end }), ··· 160 160 * @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" 161 161 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap 162 162 */ 163 - columnGap?: Spacing; 163 + columnGap?: Gap; 164 164 /** 165 165 * The row gap of the grid container. 166 166 * @default "0" 167 167 * @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" 168 168 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap 169 169 */ 170 - rowGap?: Spacing; 170 + rowGap?: Gap; 171 171 } 172 172 173 173 export const Grid = ({
+1 -1
packages/hip-ui/src/components/header-layout/header-layout-config.ts
··· 4 4 name: "header-layout", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/color.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/media-queries.stylex.tsx",
+17 -17
packages/hip-ui/src/components/header-layout/index.tsx
··· 6 6 7 7 import { primaryColor, uiColor } from "../theme/color.stylex"; 8 8 import { containerBreakpoints } from "../theme/media-queries.stylex"; 9 - import { spacing } from "../theme/spacing.stylex"; 9 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 10 10 11 11 const styles = stylex.create({ 12 12 root: { ··· 32 32 maxWidth: "var(--page-content-max-width)", 33 33 minHeight: 0, 34 34 paddingBottom: { 35 - default: spacing["10"], 36 - [containerBreakpoints.sm]: spacing["12"], 35 + default: verticalSpace["10"], 36 + [containerBreakpoints.sm]: sizeSpace["12"], 37 37 ":has(> [data-sidebar-layout=true])": "0 !important", 38 38 }, 39 39 paddingLeft: { 40 - default: spacing["4"], 41 - [containerBreakpoints.sm]: spacing["8"], 40 + default: horizontalSpace["4"], 41 + [containerBreakpoints.sm]: sizeSpace["8"], 42 42 ":has(> [data-sidebar-layout=true])": "0 !important", 43 43 }, 44 44 paddingRight: { 45 - default: spacing["4"], 46 - [containerBreakpoints.sm]: spacing["8"], 45 + default: horizontalSpace["4"], 46 + [containerBreakpoints.sm]: sizeSpace["8"], 47 47 ":has(> [data-sidebar-layout=true])": "0 !important", 48 48 }, 49 49 paddingTop: { 50 - default: spacing["2"], 51 - [containerBreakpoints.sm]: spacing["6"], 50 + default: verticalSpace["2"], 51 + [containerBreakpoints.sm]: sizeSpace["6"], 52 52 ":has(> [data-sidebar-layout=true])": "0 !important", 53 53 }, 54 54 width: "100%", ··· 61 61 boxSizing: "border-box", 62 62 color: primaryColor.textContrast, 63 63 paddingBottom: { 64 - default: spacing["6"], 65 - [containerBreakpoints.sm]: spacing["12"], 64 + default: verticalSpace["6"], 65 + [containerBreakpoints.sm]: sizeSpace["12"], 66 66 }, 67 67 paddingTop: { 68 - default: spacing["6"], 69 - [containerBreakpoints.sm]: spacing["12"], 68 + default: verticalSpace["6"], 69 + [containerBreakpoints.sm]: sizeSpace["12"], 70 70 }, 71 71 width: "100%", 72 72 }, ··· 76 76 marginRight: "auto", 77 77 maxWidth: "var(--page-content-max-width)", 78 78 paddingLeft: { 79 - default: spacing["4"], 80 - [containerBreakpoints.sm]: spacing["8"], 79 + default: horizontalSpace["4"], 80 + [containerBreakpoints.sm]: sizeSpace["8"], 81 81 }, 82 82 paddingRight: { 83 - default: spacing["4"], 84 - [containerBreakpoints.sm]: spacing["8"], 83 + default: horizontalSpace["4"], 84 + [containerBreakpoints.sm]: sizeSpace["8"], 85 85 }, 86 86 width: "100%", 87 87 },
+5 -5
packages/hip-ui/src/components/hover-card/index.tsx
··· 18 18 19 19 import type { StyleXComponentProps } from "../theme/types"; 20 20 21 + import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 21 22 import { shadow } from "../theme/shadow.stylex"; 22 - import { spacing } from "../theme/spacing.stylex"; 23 23 import { usePopoverStyles } from "../theme/usePopoverStyles"; 24 24 25 25 const styles = stylex.create({ ··· 29 29 content: { 30 30 outline: "none", 31 31 position: "relative", 32 - paddingBottom: spacing["2"], 33 - paddingLeft: spacing["2"], 34 - paddingRight: spacing["2"], 35 - paddingTop: spacing["2"], 32 + paddingBottom: verticalSpace["2"], 33 + paddingLeft: horizontalSpace["2"], 34 + paddingRight: horizontalSpace["2"], 35 + paddingTop: verticalSpace["2"], 36 36 }, 37 37 }); 38 38
+1 -1
packages/hip-ui/src/components/icon-button/icon-button-config.ts
··· 4 4 name: "icon-button", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+7 -7
packages/hip-ui/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["10"], 19 + ":is([data-size=md])": sizeSpace["8"], 20 + ":is([data-size=sm])": sizeSpace["7"], 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["10"], 24 + ":is([data-size=md])": sizeSpace["8"], 25 + ":is([data-size=sm])": sizeSpace["7"], 26 26 }, 27 27 }, 28 28 });
+1 -1
packages/hip-ui/src/components/image-cropper/image-cropper-config.ts
··· 4 4 name: "image-cropper", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/shadow.stylex.tsx", 10 10 "../theme/color.stylex.tsx",
+1 -1
packages/hip-ui/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", 20 + cornerShape: "squircle", 21 21 borderWidth: 1, 22 22 outline: { 23 23 default: "none",
+5 -5
packages/hip-ui/src/components/kbd/index.tsx
··· 5 5 6 6 import { uiColor } from "../theme/color.stylex"; 7 7 import { radius } from "../theme/radius.stylex"; 8 - import { spacing } from "../theme/spacing.stylex"; 8 + import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 9 9 import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex"; 10 10 11 11 const styles = stylex.create({ ··· 24 24 letterSpacing: tracking["widest"], 25 25 lineHeight: lineHeight["none"], 26 26 position: "relative", 27 - paddingBottom: spacing["0.5"], 28 - paddingLeft: spacing["1"], 29 - paddingRight: spacing["1"], 30 - paddingTop: spacing["0.5"], 27 + paddingBottom: verticalSpace["0.5"], 28 + paddingLeft: horizontalSpace["1"], 29 + paddingRight: horizontalSpace["1"], 30 + paddingTop: verticalSpace["0.5"], 31 31 top: "-1px", 32 32 }, 33 33 });
+4 -4
packages/hip-ui/src/components/lightbox/index.tsx
··· 25 25 animations, 26 26 } from "../theme/animations.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 - import { spacing } from "../theme/spacing.stylex"; 28 + import { gap, horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 29 29 30 30 const SLIDE_DURATION_MS = 250; 31 31 ··· 118 118 closeButton: { 119 119 position: "fixed", 120 120 zIndex: 210, 121 - right: spacing["4"], 122 - top: spacing["4"], 121 + right: horizontalSpace["4"], 122 + top: verticalSpace["4"], 123 123 }, 124 124 hiddenTrigger: { 125 125 display: "none", 126 126 }, 127 127 contentRow: { 128 - gap: spacing["4"], 128 + gap: gap["4"], 129 129 alignItems: "center", 130 130 display: "flex", 131 131 flexGrow: 1,
+1 -1
packages/hip-ui/src/components/lightbox/lightbox-config.ts
··· 8 8 "../theme/animations.stylex.tsx", 9 9 "../theme/color.stylex.tsx", 10 10 "../theme/semantic-color.stylex.tsx", 11 - "../theme/spacing.stylex.tsx", 11 + "../theme/semantic-spacing.stylex.tsx", 12 12 "../theme/types.ts", 13 13 ], 14 14 dependencies: {
+3 -3
packages/hip-ui/src/components/link/index.tsx
··· 7 7 import type { StyleXComponentProps } from "../theme/types"; 8 8 9 9 import { primaryColor, uiColor } from "../theme/color.stylex"; 10 - import { spacing } from "../theme/spacing.stylex"; 10 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 11 11 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 12 12 import { LinkContext } from "./link-context"; 13 13 ··· 19 19 ":is([data-breadcrumb] *)": 0, 20 20 ":is([data-hovered])": 1, 21 21 }, 22 - gap: spacing["2"], 22 + gap: gap["2"], 23 23 textDecoration: "none", 24 24 alignItems: "center", 25 25 color: { ··· 46 46 opacity: "var(--underline-opacity)", 47 47 pointerEvents: "none", 48 48 position: "absolute", 49 - bottom: `calc(${spacing["1"]} * -1)`, 49 + bottom: `calc(${sizeSpace["1"]} * -1)`, 50 50 height: "2px", 51 51 left: 0, 52 52 right: 0,
+10 -10
packages/hip-ui/src/components/listbox/index.tsx
··· 26 26 import { useHaptics } from "../haptics"; 27 27 import { Separator } from "../separator"; 28 28 import { ui } from "../theme/semantic-color.stylex"; 29 - import { spacing } from "../theme/spacing.stylex"; 29 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 30 30 import { typeramp } from "../theme/typography.stylex"; 31 31 import { 32 32 estimatedRowHeights, ··· 41 41 alignItems: "center", 42 42 boxSizing: "border-box", 43 43 display: "flex", 44 - paddingBottom: spacing["1"], 45 - paddingLeft: spacing["3"], 46 - paddingRight: spacing["3"], 47 - paddingTop: spacing["1"], 44 + paddingBottom: verticalSpace["1"], 45 + paddingLeft: horizontalSpace["3"], 46 + paddingRight: horizontalSpace["3"], 47 + paddingTop: verticalSpace["1"], 48 48 49 49 height: { 50 - ":is([data-size=lg])": spacing["9"], 51 - ":is([data-size=md])": spacing["7"], 52 - ":is([data-size=sm])": spacing["7"], 50 + ":is([data-size=lg])": sizeSpace["9"], 51 + ":is([data-size=md])": sizeSpace["7"], 52 + ":is([data-size=sm])": sizeSpace["7"], 53 53 }, 54 54 }, 55 55 separator: { 56 - marginBottom: spacing["1.5"], 57 - marginTop: spacing["1.5"], 56 + marginBottom: verticalSpace["1.5"], 57 + marginTop: verticalSpace["1.5"], 58 58 }, 59 59 }); 60 60
+16 -16
packages/hip-ui/src/components/markdown-content/index.tsx
··· 7 7 import rehypeSanitize from "rehype-sanitize"; 8 8 import remarkGfm from "remark-gfm"; 9 9 10 + import type { LinkProps } from "../link"; 10 11 import type { StyleXComponentProps } from "../theme/types"; 11 12 12 - import type { LinkProps } from "../link"; 13 13 import { Link } from "../link"; 14 - import { spacing } from "../theme/spacing.stylex"; 14 + import { verticalSpace } from "../theme/semantic-spacing.stylex"; 15 15 import { 16 + Blockquote, 16 17 Body, 17 18 Heading1, 18 19 Heading2, 20 + Heading3, 21 + Heading4, 19 22 Heading5, 23 + InlineCode, 20 24 ListItem, 21 - Heading4, 22 25 OrderedList, 23 - Blockquote, 24 - InlineCode, 25 26 Pre, 26 27 UnorderedList, 27 - Heading3, 28 28 } from "../typography"; 29 29 import { Text } from "../typography/text"; 30 30 ··· 34 34 fontStyle: "italic", 35 35 }, 36 36 standardMargin: { 37 - marginBottom: spacing["5"], 38 - marginTop: spacing["5"], 37 + marginBottom: verticalSpace["5"], 38 + marginTop: verticalSpace["5"], 39 39 }, 40 40 h2: { 41 - marginBottom: spacing["4"], 42 - marginTop: spacing["8"], 41 + marginBottom: verticalSpace["4"], 42 + marginTop: verticalSpace["8"], 43 43 }, 44 44 h3: { 45 - marginBottom: spacing["5"], 46 - marginTop: spacing["8"], 45 + marginBottom: verticalSpace["5"], 46 + marginTop: verticalSpace["8"], 47 47 }, 48 48 h4: { 49 - marginBottom: spacing["8"], 50 - marginTop: spacing["8"], 49 + marginBottom: verticalSpace["8"], 50 + marginTop: verticalSpace["8"], 51 51 }, 52 52 h5: { 53 - marginBottom: spacing["8"], 54 - marginTop: spacing["8"], 53 + marginBottom: verticalSpace["8"], 54 + marginTop: verticalSpace["8"], 55 55 }, 56 56 }); 57 57
+1 -1
packages/hip-ui/src/components/markdown-content/markdown-content-config.ts
··· 6 6 hipDependencies: [ 7 7 "../theme/color.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 - "../theme/spacing.stylex.tsx", 9 + "../theme/semantic-spacing.stylex.tsx", 10 10 "../theme/typography.stylex.tsx", 11 11 "../theme/types.ts", 12 12 "../link/index.tsx",
+11 -11
packages/hip-ui/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["1"], 34 + paddingLeft: horizontalSpace["3"], 35 + paddingRight: horizontalSpace["3"], 36 + paddingTop: verticalSpace["2"], 37 37 }, 38 38 footer: { 39 - paddingBottom: spacing["1"], 40 - paddingLeft: spacing["3"], 41 - paddingRight: spacing["3"], 42 - paddingTop: spacing["2"], 39 + paddingBottom: verticalSpace["1"], 40 + paddingLeft: horizontalSpace["3"], 41 + paddingRight: horizontalSpace["3"], 42 + paddingTop: verticalSpace["2"], 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["0.5"], 48 + paddingTop: verticalSpace["0.5"], 49 49 }, 50 50 }); 51 51
+12 -12
packages/hip-ui/src/components/menubar/index.tsx
··· 22 22 import { uiColor } from "../theme/color.stylex"; 23 23 import { mediaQueries } from "../theme/media-queries.stylex"; 24 24 import { radius } from "../theme/radius.stylex"; 25 - import { spacing } from "../theme/spacing.stylex"; 25 + import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 26 26 import { fontSize } from "../theme/typography.stylex"; 27 27 import { usePopoverStyles } from "../theme/usePopoverStyles"; 28 28 ··· 31 31 32 32 const styles = stylex.create({ 33 33 container: { 34 - gap: spacing["1"], 34 + gap: gap["1"], 35 35 display: "flex", 36 36 flexDirection: "row", 37 37 }, ··· 49 49 borderWidth: 1, 50 50 51 51 cornerShape: "squircle", 52 - gap: spacing["1"], 52 + gap: gap["1"], 53 53 alignItems: "center", 54 54 backgroundColor: { 55 55 default: "transparent", ··· 71 71 transitionDuration: animationDuration.fast, 72 72 transitionProperty: "background-color", 73 73 height: { 74 - ":is([data-size=lg] *)": spacing["10"], 75 - ":is([data-size=md] *)": spacing["8"], 76 - ":is([data-size=sm] *)": spacing["6"], 74 + ":is([data-size=lg] *)": sizeSpace["10"], 75 + ":is([data-size=md] *)": sizeSpace["8"], 76 + ":is([data-size=sm] *)": sizeSpace["6"], 77 77 }, 78 78 paddingLeft: { 79 - ":is([data-size=lg] *)": spacing["3"], 80 - ":is([data-size=md] *)": spacing["2.5"], 81 - ":is([data-size=sm] *)": spacing["2"], 79 + ":is([data-size=lg] *)": horizontalSpace["3"], 80 + ":is([data-size=md] *)": sizeSpace["2.5"], 81 + ":is([data-size=sm] *)": sizeSpace["2"], 82 82 }, 83 83 paddingRight: { 84 - ":is([data-size=lg] *)": spacing["3"], 85 - ":is([data-size=md] *)": spacing["2.5"], 86 - ":is([data-size=sm] *)": spacing["2"], 84 + ":is([data-size=lg] *)": horizontalSpace["3"], 85 + ":is([data-size=md] *)": sizeSpace["2.5"], 86 + ":is([data-size=sm] *)": sizeSpace["2"], 87 87 }, 88 88 }, 89 89 });
+1 -1
packages/hip-ui/src/components/menubar/menubar-config.ts
··· 6 6 hipDependencies: [ 7 7 "../theme/animations.stylex.tsx", 8 8 "../theme/semantic-color.stylex.tsx", 9 - "../theme/spacing.stylex.tsx", 9 + "../theme/semantic-spacing.stylex.tsx", 10 10 "../theme/types.ts", 11 11 "../theme/usePopoverStyles.ts", 12 12 "../menu/index.tsx",
+5 -5
packages/hip-ui/src/components/meter/index.tsx
··· 17 17 warningColor, 18 18 } from "../theme/color.stylex"; 19 19 import { radius } from "../theme/radius.stylex"; 20 - import { spacing } from "../theme/spacing.stylex"; 20 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 21 21 import { fontSize, lineHeight } from "../theme/typography.stylex"; 22 22 23 23 const styles = stylex.create({ 24 24 wrapper: { 25 - gap: spacing["2"], 25 + gap: gap["2"], 26 26 gridTemplateAreas: "'label value-label' 'bar bar'", 27 27 alignItems: "center", 28 28 display: "grid", ··· 49 49 ":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`, 50 50 }, 51 51 height: { 52 - ":is([data-size=lg] *)": spacing["3"], 53 - ":is([data-size=md] *)": spacing["2"], 54 - ":is([data-size=sm] *)": spacing["1"], 52 + ":is([data-size=lg] *)": sizeSpace["3"], 53 + ":is([data-size=md] *)": sizeSpace["2"], 54 + ":is([data-size=sm] *)": sizeSpace["1"], 55 55 }, 56 56 width: "100%", 57 57 },
+21 -21
packages/hip-ui/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["4"], 81 + [containerBreakpoints.sm]: sizeSpace["8"], 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["4"], 99 + [containerBreakpoints.sm]: sizeSpace["8"], 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["14"], 106 106 ":is([data-navbar-open])": "100%", 107 - [containerBreakpoints.sm]: spacing["14"], 107 + [containerBreakpoints.sm]: sizeSpace["14"], 108 108 }, 109 109 paddingBottom: { 110 - default: spacing["3"], 111 - ":is([data-navbar-open]):has([data-navbar-action])": spacing["4"], 110 + default: verticalSpace["3"], 111 + ":is([data-navbar-open]):has([data-navbar-action])": sizeSpace["4"], 112 112 }, 113 113 paddingLeft: { 114 - default: spacing["4"], 115 - [containerBreakpoints.sm]: spacing["8"], 114 + default: horizontalSpace["4"], 115 + [containerBreakpoints.sm]: sizeSpace["8"], 116 116 }, 117 117 paddingRight: { 118 - default: spacing["4"], 119 - [containerBreakpoints.sm]: spacing["8"], 118 + default: horizontalSpace["4"], 119 + [containerBreakpoints.sm]: sizeSpace["8"], 120 120 }, 121 - paddingTop: spacing["3"], 121 + paddingTop: verticalSpace["3"], 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["2"], 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["1"]} * -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["6"], 179 + [containerBreakpoints.sm]: sizeSpace["8"], 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["2"], 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["2"], 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["1"]} * -1)`, 272 272 height: "2px", 273 273 left: 0, 274 274 right: 0,
+13 -13
packages/hip-ui/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["2"], 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["3"], 30 30 display: "grid", 31 - rowGap: spacing["1.5"], 31 + rowGap: gap["1.5"], 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["2"], 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["8"], 69 + width: sizeSpace["8"], 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["6"], 74 + width: sizeSpace["6"], 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["2"], 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["1"]} * -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["2"]} * -1)`, 150 + paddingTop: verticalSpace["2"], 151 151 }, 152 152 }); 153 153
+1 -1
packages/hip-ui/src/components/navbar/navbar-config.ts
··· 4 4 name: "navbar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/semantic-color.stylex.tsx", 9 9 "../theme/media-queries.stylex.tsx", 10 10 "../theme/types.ts",
+5 -5
packages/hip-ui/src/components/number-field/index.tsx
··· 31 31 import { SuffixIcon } from "../suffix-icon"; 32 32 import { uiColor } from "../theme/color.stylex"; 33 33 import { ui } from "../theme/semantic-color.stylex"; 34 - import { spacing } from "../theme/spacing.stylex"; 34 + import { horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 35 35 import { useInputStyles } from "../theme/useInputStyles"; 36 36 import { usePointerLock } from "./usePointerLock"; 37 37 ··· 108 108 ":is(*) svg": { 109 109 flexShrink: 0, 110 110 pointerEvents: "none", 111 - height: spacing["4"], 112 - width: spacing["4"], 111 + height: sizeSpace["4"], 112 + width: sizeSpace["4"], 113 113 }, 114 114 115 115 color: { ··· 127 127 }, 128 128 inputWithStepper: { 129 129 textAlign: "center", 130 - paddingLeft: spacing["2"], 131 - paddingRight: spacing["2"], 130 + paddingLeft: horizontalSpace["2"], 131 + paddingRight: horizontalSpace["2"], 132 132 }, 133 133 }); 134 134
+1 -1
packages/hip-ui/src/components/number-field/number-field-config.ts
··· 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 "./usePointerLock.tsx", 8 - "../theme/spacing.stylex.tsx", 8 + "../theme/semantic-spacing.stylex.tsx", 9 9 "../theme/radius.stylex.tsx", 10 10 "../theme/semantic-color.stylex.tsx", 11 11 "../theme/typography.stylex.tsx",
+45 -44
packages/hip-ui/src/components/page/Page.tsx
··· 1 1 "use client"; 2 2 3 + import type { ComponentProps, ReactNode } from "react"; 4 + 3 5 import * as stylex from "@stylexjs/stylex"; 6 + import { createLink, LinkProps } from "@tanstack/react-router"; 4 7 import { ArrowLeft } from "lucide-react"; 5 8 import { useEffect, useRef, useState } from "react"; 6 - import type { ComponentProps, ReactNode } from "react"; 7 9 8 10 import type { StyleXComponentProps } from "../theme/types"; 9 11 ··· 16 18 mediaQueries, 17 19 } from "../theme/media-queries.stylex"; 18 20 import { radius } from "../theme/radius.stylex"; 21 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 19 22 import { shadow } from "../theme/shadow.stylex"; 20 - import { spacing } from "../theme/spacing.stylex"; 23 + import { fontFamily, lineHeight } from "../theme/typography.stylex"; 21 24 import { Text } from "../typography/text"; 22 25 import { PageContext, usePageContext } from "./context"; 23 - import { createLink, LinkProps } from "@tanstack/react-router"; 24 - import { fontFamily, lineHeight } from "../theme/typography.stylex"; 25 26 26 27 const IconButtonLink = createLink(IconButton); 27 28 ··· 33 34 marginRight: "auto", 34 35 maxWidth: "880px", 35 36 paddingTop: { 36 - default: spacing["4"], 37 - [breakpoints.sm]: spacing["4"], 37 + default: verticalSpace["4"], 38 + [breakpoints.sm]: sizeSpace["4"], 38 39 }, 39 40 width: "100%", 40 41 }, ··· 49 50 marginLeft: "auto", 50 51 marginRight: "auto", 51 52 maxWidth: "var(--page-content-max-width)", 52 - paddingBottom: spacing["16"], 53 - paddingTop: spacing["3.5"], 53 + paddingBottom: verticalSpace["16"], 54 + paddingTop: verticalSpace["3.5"], 54 55 width: "100%", 55 56 }, 56 57 }); ··· 58 59 const smallHeaderStyles = stylex.create({ 59 60 header: { 60 61 marginBottom: { 61 - default: spacing["6"], 62 + default: sizeSpace["6"], 62 63 ":is([data-sticky-header=true] *)": 0, 63 64 }, 64 - minHeight: spacing["8"], 65 + minHeight: sizeSpace["8"], 65 66 }, 66 67 }); 67 68 ··· 88 89 }, 89 90 }, 90 91 alignItems: "center", 91 - columnGap: spacing["4"], 92 + columnGap: gap["4"], 92 93 display: "grid", 93 94 gridTemplateColumns: { 94 95 default: "1fr auto", 95 96 ":has([data-page-icon])": "auto 1fr auto", 96 97 }, 97 - rowGap: spacing["2"], 98 + rowGap: gap["2"], 98 99 marginBottom: { 99 - default: spacing["8"], 100 + default: sizeSpace["8"], 100 101 ":is([data-sticky-header=true] *)": 0, 101 102 }, 102 - minHeight: spacing["8"], 103 - paddingBottom: spacing["4"], 104 - paddingTop: spacing["4"], 103 + minHeight: sizeSpace["8"], 104 + paddingBottom: verticalSpace["4"], 105 + paddingTop: verticalSpace["4"], 105 106 }, 106 107 }); 107 108 ··· 133 134 }, 134 135 }, 135 136 smallActions: { 136 - gap: spacing["1"], 137 + gap: gap["1"], 137 138 flexShrink: 0, 138 139 }, 139 140 largeActions: { 140 141 gridArea: "actions", 141 142 gap: { 142 - default: spacing["1"], 143 - [breakpoints.sm]: spacing["2"], 143 + default: gap["1"], 144 + [breakpoints.sm]: sizeSpace["2"], 144 145 }, 145 - minHeight: spacing["8"], 146 + minHeight: sizeSpace["8"], 146 147 }, 147 148 icon: { 148 149 gridArea: "icon", ··· 155 156 color: primaryColor.textContrast, 156 157 display: "flex", 157 158 justifyContent: "center", 158 - height: spacing["12"], 159 - width: spacing["12"], 159 + height: sizeSpace["12"], 160 + width: sizeSpace["12"], 160 161 }, 161 162 }); 162 163 ··· 174 175 position: "sticky", 175 176 zIndex: 10, 176 177 left: 0, 177 - marginBottom: spacing["2"], 178 + marginBottom: verticalSpace["2"], 178 179 marginLeft: `calc(-50vw + 50%)`, 179 180 marginRight: `calc(-50vw + 50%)`, 180 181 right: 0, ··· 184 185 largeStickyWrapper: { 185 186 zIndex: 100, 186 187 marginBottom: { 187 - default: spacing["2"], 188 - [breakpoints.sm]: spacing["8"], 188 + default: sizeSpace["2"], 189 + [breakpoints.sm]: sizeSpace["8"], 189 190 }, 190 191 }, 191 192 stickyWrapperStuck: { ··· 218 219 marginLeft: "auto", 219 220 marginRight: "auto", 220 221 maxWidth: "880px", 221 - paddingBottom: spacing["4"], 222 - paddingLeft: spacing["4"], 223 - paddingRight: spacing["4"], 224 - paddingTop: spacing["4"], 222 + paddingBottom: verticalSpace["4"], 223 + paddingLeft: horizontalSpace["4"], 224 + paddingRight: horizontalSpace["4"], 225 + paddingTop: verticalSpace["4"], 225 226 }, 226 227 largeStickyContent: { 227 228 boxSizing: "border-box", ··· 232 233 marginRight: "auto", 233 234 maxWidth: "var(--page-content-max-width)", 234 235 paddingLeft: { 235 - default: spacing["4"], 236 - [containerBreakpoints.sm]: spacing["8"], 236 + default: horizontalSpace["4"], 237 + [containerBreakpoints.sm]: sizeSpace["8"], 237 238 ":has(> [data-sidebar-layout=true])": "0 !important", 238 239 }, 239 240 paddingRight: { 240 - default: spacing["4"], 241 - [containerBreakpoints.sm]: spacing["8"], 241 + default: horizontalSpace["4"], 242 + [containerBreakpoints.sm]: sizeSpace["8"], 242 243 ":has(> [data-sidebar-layout=true])": "0 !important", 243 244 }, 244 245 }, ··· 258 259 left: 0, 259 260 marginLeft: `calc(-50vw + 50%)`, 260 261 marginRight: `calc(-50vw + 50%)`, 261 - marginTop: spacing["2"], 262 + marginTop: verticalSpace["2"], 262 263 right: 0, 263 264 width: "100vw", 264 265 }, ··· 291 292 marginLeft: "auto", 292 293 marginRight: "auto", 293 294 maxWidth: "880px", 294 - paddingBottom: spacing["4"], 295 - paddingLeft: spacing["4"], 296 - paddingRight: spacing["4"], 297 - paddingTop: spacing["4"], 295 + paddingBottom: verticalSpace["4"], 296 + paddingLeft: horizontalSpace["4"], 297 + paddingRight: horizontalSpace["4"], 298 + paddingTop: verticalSpace["4"], 298 299 }, 299 300 largeStickyContent: { 300 301 boxSizing: "border-box", ··· 303 304 marginLeft: "auto", 304 305 marginRight: "auto", 305 306 maxWidth: "var(--page-content-max-width)", 306 - paddingBottom: spacing["4"], 307 + paddingBottom: verticalSpace["4"], 307 308 paddingLeft: { 308 - default: spacing["4"], 309 - [containerBreakpoints.sm]: spacing["8"], 309 + default: horizontalSpace["4"], 310 + [containerBreakpoints.sm]: sizeSpace["8"], 310 311 ":has(> [data-sidebar-layout=true])": "0 !important", 311 312 }, 312 313 paddingRight: { 313 - default: spacing["4"], 314 - [containerBreakpoints.sm]: spacing["8"], 314 + default: horizontalSpace["4"], 315 + [containerBreakpoints.sm]: sizeSpace["8"], 315 316 ":has(> [data-sidebar-layout=true])": "0 !important", 316 317 }, 317 - paddingTop: spacing["4"], 318 + paddingTop: verticalSpace["4"], 318 319 }, 319 320 }); 320 321
+1 -1
packages/hip-ui/src/components/page/page-config.ts
··· 9 9 "../theme/media-queries.stylex.tsx", 10 10 "../theme/radius.stylex.tsx", 11 11 "../theme/shadow.stylex.tsx", 12 - "../theme/spacing.stylex.tsx", 12 + "../theme/semantic-spacing.stylex.tsx", 13 13 "../theme/types.ts", 14 14 "../flex/index.tsx", 15 15 "../icon-button/index.tsx",
+2 -2
packages/hip-ui/src/components/pagination/index.tsx
··· 15 15 import { SizeContext } from "../context"; 16 16 import { Flex } from "../flex"; 17 17 import { IconButton } from "../icon-button"; 18 - import { spacing } from "../theme/spacing.stylex"; 18 + import { gap } from "../theme/semantic-spacing.stylex"; 19 19 20 20 const styles = stylex.create({ 21 21 list: { 22 - gap: spacing["4"], 22 + gap: gap["4"], 23 23 alignItems: "center", 24 24 containerType: "inline-size", 25 25 display: "flex",
+7 -7
packages/hip-ui/src/components/popover/index.tsx
··· 17 17 18 18 import { useHaptics } from "../haptics"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 - import { spacing } from "../theme/spacing.stylex"; 20 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 21 21 import { usePopoverStyles } from "../theme/usePopoverStyles"; 22 22 23 23 const styles = stylex.create({ ··· 32 32 content: { 33 33 boxShadow: "none", 34 34 position: "relative", 35 - paddingBottom: spacing["4"], 36 - paddingLeft: spacing["4"], 37 - paddingRight: spacing["4"], 38 - paddingTop: spacing["4"], 35 + paddingBottom: verticalSpace["4"], 36 + paddingLeft: horizontalSpace["4"], 37 + paddingRight: horizontalSpace["4"], 38 + paddingTop: verticalSpace["4"], 39 39 }, 40 40 caret: {}, 41 41 arrow: { ··· 47 47 [":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)", 48 48 }, 49 49 zIndex: 0, 50 - height: spacing["2"], 51 - width: spacing["2"], 50 + height: sizeSpace["2"], 51 + width: sizeSpace["2"], 52 52 }, 53 53 }); 54 54 interface PopoverProps
+1 -1
packages/hip-ui/src/components/popover/popover-config.ts
··· 8 8 "../haptics/context.tsx", 9 9 "../haptics/useHaptics.ts", 10 10 "../haptics/index.ts", 11 - "../theme/spacing.stylex.tsx", 11 + "../theme/semantic-spacing.stylex.tsx", 12 12 "../theme/radius.stylex.tsx", 13 13 "../theme/semantic-color.stylex.tsx", 14 14 "../theme/typography.stylex.tsx",
+5 -5
packages/hip-ui/src/components/progress-bar/index.tsx
··· 12 12 import { primaryColor, uiColor } from "../theme/color.stylex"; 13 13 import { mediaQueries } from "../theme/media-queries.stylex"; 14 14 import { radius } from "../theme/radius.stylex"; 15 - import { spacing } from "../theme/spacing.stylex"; 15 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 16 16 import { fontSize, lineHeight } from "../theme/typography.stylex"; 17 17 18 18 const IndeterminateAnimation = stylex.keyframes({ ··· 26 26 27 27 const styles = stylex.create({ 28 28 wrapper: { 29 - gap: spacing["2"], 29 + gap: gap["2"], 30 30 gridTemplateAreas: "'label value-label' 'bar bar'", 31 31 alignItems: "center", 32 32 display: "grid", ··· 42 42 width: "100%", 43 43 44 44 height: { 45 - ":is([data-size=lg] *)": spacing["3"], 46 - ":is([data-size=md] *)": spacing["2"], 47 - ":is([data-size=sm] *)": spacing["1"], 45 + ":is([data-size=lg] *)": sizeSpace["3"], 46 + ":is([data-size=md] *)": sizeSpace["2"], 47 + ":is([data-size=sm] *)": sizeSpace["1"], 48 48 }, 49 49 }, 50 50 valueLabel: {
+6 -6
packages/hip-ui/src/components/progress-circle/index.tsx
··· 12 12 import { animationDuration } from "../theme/animations.stylex"; 13 13 import { primaryColor, uiColor } from "../theme/color.stylex"; 14 14 import { radius } from "../theme/radius.stylex"; 15 - import { spacing } from "../theme/spacing.stylex"; 15 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 16 16 17 17 const IndeterminateFillAnimation = stylex.keyframes({ 18 18 from: { ··· 25 25 26 26 const styles = stylex.create({ 27 27 wrapper: { 28 - gap: spacing["2"], 28 + gap: gap["2"], 29 29 alignItems: "center", 30 30 boxSizing: "border-box", 31 31 display: "flex", ··· 35 35 justifyContent: "center", 36 36 position: "relative", 37 37 38 - "--progress-border-width": spacing["1"], 38 + "--progress-border-width": sizeSpace["1"], 39 39 "--progress-size": { 40 - ":is([data-size=lg] *)": spacing["10"], 41 - ":is([data-size=md] *)": spacing["8"], 42 - ":is([data-size=sm] *)": spacing["4"], 40 + ":is([data-size=lg] *)": sizeSpace["10"], 41 + ":is([data-size=md] *)": sizeSpace["8"], 42 + ":is([data-size=sm] *)": sizeSpace["4"], 43 43 }, 44 44 }, 45 45 track: {
+1 -1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
··· 7 7 "../context.ts", 8 8 "../label/index.tsx", 9 9 "../theme/radius.stylex.tsx", 10 - "../theme/spacing.stylex.tsx", 10 + "../theme/semantic-spacing.stylex.tsx", 11 11 "../theme/types.ts", 12 12 ], 13 13 dependencies: {
+7 -7
packages/hip-ui/src/components/radio/index.tsx
··· 24 24 import { mediaQueries } from "../theme/media-queries.stylex"; 25 25 import { radius } from "../theme/radius.stylex"; 26 26 import { primary, ui } from "../theme/semantic-color.stylex"; 27 - import { spacing } from "../theme/spacing.stylex"; 27 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 28 28 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 29 29 30 30 const scaleIn = stylex.keyframes({ ··· 38 38 39 39 const styles = stylex.create({ 40 40 wrapper: { 41 - gap: spacing["2.5"], 41 + gap: gap["2.5"], 42 42 alignItems: { 43 43 default: "center", 44 44 ":has(p)": "flex-start", ··· 57 57 borderRadius: radius.full, 58 58 borderWidth: 2, 59 59 position: "relative", 60 - height: spacing["4"], 61 - width: spacing["4"], 60 + height: sizeSpace["4"], 61 + width: sizeSpace["4"], 62 62 63 63 transitionDuration: animationDuration.fast, 64 64 transitionProperty: { ··· 70 70 selectionIndicator: { 71 71 borderRadius: radius.full, 72 72 backgroundColor: "white", 73 - height: spacing["2"], 74 - width: spacing["2"], 73 + height: sizeSpace["2"], 74 + width: sizeSpace["2"], 75 75 76 76 position: "absolute", 77 77 transform: "translate(-50%, -50%)", ··· 90 90 color: "white", 91 91 }, 92 92 group: { 93 - gap: spacing["3"], 93 + gap: gap["3"], 94 94 display: "flex", 95 95 flexDirection: "column", 96 96 },
+2 -2
packages/hip-ui/src/components/range-calendar/index.tsx
··· 21 21 import { Flex } from "../flex"; 22 22 import { IconButton } from "../icon-button"; 23 23 import { ErrorMessage } from "../label"; 24 - import { spacing } from "../theme/spacing.stylex"; 24 + import { gap } from "../theme/semantic-spacing.stylex"; 25 25 import { useCalendarStyles } from "../theme/useCalendarStyles"; 26 26 27 27 export interface RangeCalendarProps<T extends DateValue> ··· 33 33 34 34 const styles = stylex.create({ 35 35 root: { 36 - gap: spacing["3"], 36 + gap: gap["3"], 37 37 display: "flex", 38 38 flexDirection: "column", 39 39 },
+2 -2
packages/hip-ui/src/components/search-field/index.tsx
··· 22 22 import { IconButton } from "../icon-button"; 23 23 import { Description, FieldErrorMessage, Label } from "../label"; 24 24 import { SuffixIcon } from "../suffix-icon"; 25 - import { spacing } from "../theme/spacing.stylex"; 25 + import { horizontalSpace } from "../theme/semantic-spacing.stylex"; 26 26 import { useInputStyles } from "../theme/useInputStyles"; 27 27 28 28 const styles = stylex.create({ ··· 36 36 top: "50%", 37 37 }, 38 38 clearButtonPadding: { 39 - paddingRight: spacing["8"], 39 + paddingRight: horizontalSpace["8"], 40 40 }, 41 41 }); 42 42
+1 -1
packages/hip-ui/src/components/search-field/search-field-config.ts
··· 4 4 name: "search-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+16 -14
packages/hip-ui/src/components/segmented-control/index.tsx
··· 21 21 import { uiColor } from "../theme/color.stylex"; 22 22 import { mediaQueries } from "../theme/media-queries.stylex"; 23 23 import { radius } from "../theme/radius.stylex"; 24 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 24 25 import { shadow } from "../theme/shadow.stylex"; 25 - import { spacing } from "../theme/spacing.stylex"; 26 26 27 27 const styles = stylex.create({ 28 28 group: { 29 - padding: spacing["1"], 29 + padding: sizeSpace["1"], 30 30 31 31 cornerShape: "squircle", 32 - gap: spacing["2"], 32 + gap: gap["2"], 33 33 alignItems: "center", 34 34 backgroundColor: uiColor.component1, 35 35 boxShadow: "inset 0 0 8px 0 rgba(0, 0, 0, 0.1)", 36 36 boxSizing: "border-box", 37 37 display: "flex", 38 38 height: { 39 - ":is([data-size=lg])": spacing["11"], 40 - ":is([data-size=md])": spacing["9"], 41 - ":is([data-size=sm])": spacing["7"], 39 + ":is([data-size=lg])": sizeSpace["11"], 40 + ":is([data-size=md])": sizeSpace["9"], 41 + ":is([data-size=sm])": sizeSpace["7"], 42 42 }, 43 43 }, 44 44 small: { ··· 47 47 large: { 48 48 borderRadius: radius.lg, 49 49 }, 50 + /* eslint-disable @stylexjs/sort-keys -- toggle item layout order */ 50 51 item: { 51 52 // eslint-disable-next-line @stylexjs/valid-styles 52 53 textBoxEdge: "cap alphabetic", ··· 59 60 alignItems: "center", 60 61 backgroundColor: "transparent", 61 62 boxSizing: "border-box", 63 + gap: gap["1"], 64 + display: "flex", 62 65 color: { 63 66 default: uiColor.text1, 64 67 ":is([data-hovered])": uiColor.text2, 65 68 ":is([data-selected])": uiColor.text2, 66 69 }, 67 - display: "flex", 68 - gap: spacing["1"], 69 70 flexGrow: 1, 70 71 justifyContent: "center", 71 72 position: "relative", ··· 74 75 ":is([data-selected])": 0, 75 76 }, 76 77 height: "100%", 77 - paddingBottom: spacing["1"], 78 - paddingLeft: spacing["2"], 79 - paddingRight: spacing["2"], 80 - paddingTop: spacing["1"], 78 + paddingBottom: verticalSpace["1"], 79 + paddingLeft: horizontalSpace["2"], 80 + paddingRight: horizontalSpace["2"], 81 + paddingTop: verticalSpace["1"], 81 82 82 83 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 83 84 ":is(*) svg": { 84 85 flexShrink: 0, 85 86 pointerEvents: "none", 86 - height: spacing["4"], 87 - width: spacing["4"], 87 + height: sizeSpace["4"], 88 + width: sizeSpace["4"], 88 89 }, 89 90 }, 91 + /* eslint-enable @stylexjs/sort-keys */ 90 92 selectionIndicator: { 91 93 borderRadius: radius.lg, 92 94
+4 -4
packages/hip-ui/src/components/select/index.tsx
··· 32 32 import { ListBox, ListBoxSeparator } from "../listbox"; 33 33 import { SearchField } from "../search-field"; 34 34 import { SuffixIcon } from "../suffix-icon"; 35 - import { spacing } from "../theme/spacing.stylex"; 35 + import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 36 36 import { useInputStyles } from "../theme/useInputStyles"; 37 37 import { estimatedRowHeights } from "../theme/useListBoxItemStyles"; 38 38 import { usePopoverStyles } from "../theme/usePopoverStyles"; ··· 45 45 maxHeight: "40vh", 46 46 }, 47 47 searchField: { 48 - paddingLeft: spacing["1"], 49 - paddingRight: spacing["1"], 50 - paddingTop: spacing["1"], 48 + paddingLeft: horizontalSpace["1"], 49 + paddingRight: horizontalSpace["1"], 50 + paddingTop: verticalSpace["1"], 51 51 }, 52 52 }); 53 53
+1 -1
packages/hip-ui/src/components/select/select-config.ts
··· 4 4 name: "select", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+13 -13
packages/hip-ui/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["2"], 77 + top: verticalSpace["2"], 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["10"], 88 + [containerBreakpoints.sm]: sizeSpace["20"], 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["4"], 93 + [containerBreakpoints.sm]: sizeSpace["16"], 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["4"], 98 + [containerBreakpoints.lg]: sizeSpace["8"], 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["4"], 102 + [containerBreakpoints.sm]: sizeSpace["16"], 103 103 }, 104 104 }, 105 105 paddingTop: { 106 - default: spacing["2"], 107 - [containerBreakpoints.sm]: spacing["10"], 106 + default: verticalSpace["2"], 107 + [containerBreakpoints.sm]: sizeSpace["10"], 108 108 ":has(> [data-header-layout=true])": "0 !important", 109 109 }, 110 110 width: "100%",
+1 -1
packages/hip-ui/src/components/sidebar-layout/sidebar-layout-config.ts
··· 4 4 name: "sidebar-layout", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/color.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/media-queries.stylex.tsx",
+24 -24
packages/hip-ui/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["6"], 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["12"], 38 + paddingLeft: horizontalSpace["6"], 39 + paddingRight: horizontalSpace["4"], 40 + paddingTop: verticalSpace["6"], 41 + width: sizeSpace["64"], 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["3"], 48 + paddingLeft: horizontalSpace["2"], 49 + paddingRight: horizontalSpace["2"], 50 + paddingTop: verticalSpace["3"], 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["6"], 57 + paddingLeft: horizontalSpace["3"], 58 + paddingRight: horizontalSpace["3"], 59 59 paddingTop: { 60 - ":is([data-sidebar-group] *)": spacing["4"], 60 + ":is([data-sidebar-group] *)": verticalSpace["4"], 61 61 }, 62 62 }, 63 63 sidebarSectionList: { 64 64 margin: 0, 65 65 padding: 0, 66 - gap: spacing["1"], 66 + gap: gap["1"], 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["8"], 96 + paddingLeft: horizontalSpace["3"], 97 + paddingRight: horizontalSpace["3"], 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["4"], 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["1.5"], 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["2.5"]} * -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["1"], 148 148 display: "flex", 149 149 flexDirection: "column", 150 - paddingTop: spacing["4"], 150 + paddingTop: verticalSpace["4"], 151 151 }, 152 152 }); 153 153
+8 -8
packages/hip-ui/src/components/skeleton/index.tsx
··· 7 7 import { uiColor } from "../theme/color.stylex"; 8 8 import { mediaQueries } from "../theme/media-queries.stylex"; 9 9 import { radius } from "../theme/radius.stylex"; 10 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 10 11 import { shadow } from "../theme/shadow.stylex"; 11 - import { spacing } from "../theme/spacing.stylex"; 12 12 13 13 const shimmer = stylex.keyframes({ 14 14 "0%": { ··· 60 60 cornerShape: "squircle", 61 61 }, 62 62 sizeSm: { 63 - height: spacing["8"], 64 - width: spacing["8"], 63 + height: sizeSpace["8"], 64 + width: sizeSpace["8"], 65 65 }, 66 66 sizeMd: { 67 - height: spacing["12"], 68 - width: spacing["12"], 67 + height: sizeSpace["12"], 68 + width: sizeSpace["12"], 69 69 }, 70 70 sizeLg: { 71 - height: spacing["16"], 72 - width: spacing["16"], 71 + height: sizeSpace["16"], 72 + width: sizeSpace["16"], 73 73 }, 74 74 height: (height: string | undefined) => ({ 75 - height: height || spacing["4"], 75 + height: height || sizeSpace["4"], 76 76 }), 77 77 width: (width: string | undefined) => ({ 78 78 width: width || "100%",
+1 -1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
··· 4 4 name: "skeleton", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/types.ts",
+14 -14
packages/hip-ui/src/components/slider/index.tsx
··· 13 13 import { Label } from "../label"; 14 14 import { primaryColor, uiColor } from "../theme/color.stylex"; 15 15 import { radius } from "../theme/radius.stylex"; 16 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 16 17 import { shadow } from "../theme/shadow.stylex"; 17 - import { spacing } from "../theme/spacing.stylex"; 18 18 import { fontSize, lineHeight } from "../theme/typography.stylex"; 19 19 20 20 const styles = stylex.create({ 21 21 wrapper: { 22 22 gap: { 23 - ":is([data-orientation=vertical])": spacing["2"], 23 + ":is([data-orientation=vertical])": gap["2"], 24 24 }, 25 25 gridTemplateAreas: "'label value-label' 'track track'", 26 26 alignItems: { ··· 44 44 }, 45 45 position: "relative", 46 46 height: { 47 - ":is([data-orientation=horizontal] *)": spacing["8"], 48 - ":is([data-orientation=horizontal] *)::before": spacing["1"], 47 + ":is([data-orientation=horizontal] *)": sizeSpace["8"], 48 + ":is([data-orientation=horizontal] *)::before": sizeSpace["1"], 49 49 ":is([data-orientation=vertical] *)": "100%", 50 50 ":is([data-orientation=vertical] *)::before": "100%", 51 51 }, 52 52 width: { 53 53 ":is([data-orientation=horizontal] *)": "100%", 54 54 ":is([data-orientation=horizontal] *)::before": "100%", 55 - ":is([data-orientation=vertical] *)": spacing["8"], 56 - ":is([data-orientation=vertical] *)::before": spacing["1"], 55 + ":is([data-orientation=vertical] *)": sizeSpace["8"], 56 + ":is([data-orientation=vertical] *)::before": sizeSpace["1"], 57 57 }, 58 58 59 59 transform: { ··· 94 94 boxShadow: shadow.md, 95 95 content: "''", 96 96 forcedColorAdjust: "none", 97 - height: spacing["4"], 97 + height: sizeSpace["4"], 98 98 left: { 99 99 ":is([data-orientation=vertical] *)": "50%", 100 100 }, 101 101 top: { 102 102 ":is([data-orientation=horizontal] *)": "50%", 103 103 }, 104 - width: spacing["4"], 104 + width: sizeSpace["4"], 105 105 }, 106 106 trackInner: { 107 107 borderRadius: radius.full, ··· 115 115 ":is([data-orientation=vertical] *)": "translateX(-50%)", 116 116 }, 117 117 height: { 118 - ":is([data-orientation=horizontal] *)": spacing["1"], 118 + ":is([data-orientation=horizontal] *)": sizeSpace["1"], 119 119 ":is([data-orientation=vertical] *)": "100%", 120 120 }, 121 121 left: { ··· 126 126 }, 127 127 width: { 128 128 ":is([data-orientation=horizontal] *)": "100%", 129 - ":is([data-orientation=vertical] *)": spacing["1"], 129 + ":is([data-orientation=vertical] *)": sizeSpace["1"], 130 130 }, 131 131 }, 132 132 trackSingle: { 133 133 height: { 134 - ":is([data-orientation=horizontal] *)": spacing["1"], 134 + ":is([data-orientation=horizontal] *)": sizeSpace["1"], 135 135 ":is([data-orientation=vertical] *)": 136 136 "calc(attr(data-progress number) * 1%)", 137 137 }, 138 138 width: { 139 139 ":is([data-orientation=horizontal] *)": 140 140 "calc(attr(data-progress number) * 1%)", 141 - ":is([data-orientation=vertical] *)": spacing["1"], 141 + ":is([data-orientation=vertical] *)": sizeSpace["1"], 142 142 }, 143 143 }, 144 144 trackMultiple: { 145 145 height: { 146 - ":is([data-orientation=horizontal] *)": spacing["1"], 146 + ":is([data-orientation=horizontal] *)": sizeSpace["1"], 147 147 ":is([data-orientation=vertical] *)": 148 148 "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)", 149 149 }, ··· 160 160 width: { 161 161 ":is([data-orientation=horizontal] *)": 162 162 "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)", 163 - ":is([data-orientation=vertical] *)": spacing["1"], 163 + ":is([data-orientation=vertical] *)": sizeSpace["1"], 164 164 }, 165 165 }, 166 166 valueLabel: {
+2 -2
packages/hip-ui/src/components/star-rating/index.tsx
··· 10 10 11 11 import { Flex } from "../flex"; 12 12 import { primaryColor, uiColor } from "../theme/color.stylex"; 13 - import { spacing } from "../theme/spacing.stylex"; 13 + import { gap } from "../theme/semantic-spacing.stylex"; 14 14 import { Text } from "../typography/text"; 15 15 16 16 const MAX_STARS = 5; 17 17 18 18 const styles = stylex.create({ 19 19 stars: { 20 - gap: spacing["0.5"], 20 + gap: gap["0.5"], 21 21 alignItems: "center", 22 22 display: "flex", 23 23 },
+8 -8
packages/hip-ui/src/components/switch/index.tsx
··· 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 import { mediaQueries } from "../theme/media-queries.stylex"; 12 12 import { radius } from "../theme/radius.stylex"; 13 + import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 13 14 import { shadow } from "../theme/shadow.stylex"; 14 - import { spacing } from "../theme/spacing.stylex"; 15 15 import { typeramp } from "../theme/typography.stylex"; 16 16 17 17 const styles = stylex.create({ ··· 20 20 minWidth: 0, 21 21 }, 22 22 wrapper: { 23 - gap: spacing["3"], 23 + gap: gap["3"], 24 24 alignItems: "center", 25 25 display: "flex", 26 26 }, ··· 43 43 [mediaQueries.reducedMotion]: "none", 44 44 }, 45 45 transitionTimingFunction: "ease-in-out", 46 - height: spacing["6"], 47 - width: spacing["10"], 46 + height: sizeSpace["6"], 47 + width: sizeSpace["10"], 48 48 }, 49 49 thumb: { 50 50 borderRadius: radius.full, ··· 62 62 [mediaQueries.reducedMotion]: "none", 63 63 }, 64 64 transitionTimingFunction: "ease-in-out", 65 - height: spacing["4"], 65 + height: sizeSpace["4"], 66 66 left: 0, 67 - marginLeft: spacing["1"], 68 - marginRight: spacing["1"], 67 + marginLeft: horizontalSpace["1"], 68 + marginRight: horizontalSpace["1"], 69 69 top: "50%", 70 - width: spacing["4"], 70 + width: sizeSpace["4"], 71 71 }, 72 72 }); 73 73
+1 -1
packages/hip-ui/src/components/switch/switch-config.ts
··· 8 8 "../haptics/context.tsx", 9 9 "../haptics/useHaptics.ts", 10 10 "../haptics/index.ts", 11 - "../theme/spacing.stylex.tsx", 11 + "../theme/semantic-spacing.stylex.tsx", 12 12 "../theme/radius.stylex.tsx", 13 13 "../theme/semantic-color.stylex.tsx", 14 14 "../theme/typography.stylex.tsx",
+6 -6
packages/hip-ui/src/components/table-of-contents/index.tsx
··· 8 8 9 9 import { animationDuration } from "../theme/animations.stylex"; 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 - import { spacing } from "../theme/spacing.stylex"; 11 + import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 12 12 import { fontSize } from "../theme/typography.stylex"; 13 13 14 14 export interface TocEntry { ··· 25 25 26 26 const styles = stylex.create({ 27 27 wrapper: { 28 - gap: spacing["2"], 28 + gap: gap["2"], 29 29 overflow: "auto", 30 30 boxSizing: "border-box", 31 31 display: "flex", 32 32 flexDirection: "column", 33 33 flexShrink: 0, 34 - paddingBottom: spacing["20"], 35 - paddingTop: spacing["12"], 34 + paddingBottom: verticalSpace["20"], 35 + paddingTop: verticalSpace["12"], 36 36 width: "240px", 37 37 }, 38 38 itemList: { ··· 65 65 }, 66 66 borderLeftStyle: "solid", 67 67 borderLeftWidth: 1, 68 - height: spacing[8], 68 + height: sizeSpace[8], 69 69 70 70 "::before": { 71 71 content: "''", ··· 77 77 }, 78 78 }, 79 79 level: (level: number) => ({ 80 - paddingLeft: `calc(${spacing[4]} * ${level.toString()})`, 80 + paddingLeft: `calc(${sizeSpace[4]} * ${level.toString()})`, 81 81 }), 82 82 active: { 83 83 color: primaryColor.solid2,
+1 -1
packages/hip-ui/src/components/table-of-contents/table-of-contents-config.ts
··· 6 6 hipDependencies: [ 7 7 "../theme/animations.stylex.tsx", 8 8 "../theme/color.stylex.tsx", 9 - "../theme/spacing.stylex.tsx", 9 + "../theme/semantic-spacing.stylex.tsx", 10 10 "../theme/typography.stylex.tsx", 11 11 "../theme/types.ts", 12 12 ],
+29 -29
packages/hip-ui/src/components/table/index.tsx
··· 34 34 import { Flex } from "../flex"; 35 35 import { IconButton } from "../icon-button"; 36 36 import { primaryColor, uiColor } from "../theme/color.stylex"; 37 - import { spacing } from "../theme/spacing.stylex"; 37 + import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 38 38 import { LabelText } from "../typography"; 39 39 40 40 const styles = stylex.create({ ··· 63 63 display: "flex", 64 64 justifyContent: "space-between", 65 65 paddingLeft: { 66 - default: spacing["2"], 67 - ":is(:first-child > *)": spacing["2"], 66 + default: horizontalSpace["2"], 67 + ":is(:first-child > *)": sizeSpace["2"], 68 68 }, 69 69 }, 70 70 columnHeaderSortable: { ··· 88 88 }, 89 89 textAlign: "left", 90 90 minHeight: { 91 - default: spacing["8"], 92 - ":is([data-table-size=lg] *)": spacing["12"], 93 - ":is([data-table-size=md] *)": spacing["10"], 91 + default: sizeSpace["8"], 92 + ":is([data-table-size=lg] *)": sizeSpace["12"], 93 + ":is([data-table-size=md] *)": sizeSpace["10"], 94 94 }, 95 95 paddingBottom: { 96 - default: spacing["1"], 97 - ":is([data-table-size=lg] *)": spacing["3"], 98 - ":is([data-table-size=md] *)": spacing["2"], 96 + default: verticalSpace["1"], 97 + ":is([data-table-size=lg] *)": sizeSpace["3"], 98 + ":is([data-table-size=md] *)": sizeSpace["2"], 99 99 }, 100 100 paddingLeft: { 101 - default: spacing["4"], 102 - ":is([data-table-size=lg] *:not(:first-child))": spacing["4"], 103 - ":is([data-table-size=md] *:not(:first-child))": spacing["3"], 101 + default: horizontalSpace["4"], 102 + ":is([data-table-size=lg] *:not(:first-child))": sizeSpace["4"], 103 + ":is([data-table-size=md] *:not(:first-child))": sizeSpace["3"], 104 104 }, 105 105 paddingRight: { 106 - default: spacing["4"], 107 - ":is([data-table-size=lg] *:not(:last-child))": spacing["4"], 108 - ":is([data-table-size=md] *:not(:last-child))": spacing["3"], 106 + default: horizontalSpace["4"], 107 + ":is([data-table-size=lg] *:not(:last-child))": sizeSpace["4"], 108 + ":is([data-table-size=md] *:not(:last-child))": sizeSpace["3"], 109 109 }, 110 110 paddingTop: { 111 - default: spacing["1"], 112 - ":is([data-table-size=lg] *)": spacing["3"], 113 - ":is([data-table-size=md] *)": spacing["2"], 111 + default: verticalSpace["1"], 112 + ":is([data-table-size=lg] *)": sizeSpace["3"], 113 + ":is([data-table-size=md] *)": sizeSpace["2"], 114 114 }, 115 115 }, 116 116 textEllipsis: { ··· 131 131 position: "relative", 132 132 touchAction: "none", 133 133 marginBottom: { 134 - default: `calc(${spacing["1"]} * -1)`, 135 - ":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`, 136 - ":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`, 134 + default: `calc(${sizeSpace["1"]} * -1)`, 135 + ":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`, 136 + ":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -1)`, 137 137 }, 138 138 marginTop: { 139 - default: `calc(${spacing["1"]} * -1)`, 140 - ":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`, 141 - ":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`, 139 + default: `calc(${sizeSpace["1"]} * -1)`, 140 + ":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`, 141 + ":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -1)`, 142 142 }, 143 143 minHeight: { 144 - default: spacing["8"], 145 - ":is([data-table-size=lg] *)": spacing["12"], 146 - ":is([data-table-size=md] *)": spacing["10"], 144 + default: sizeSpace["8"], 145 + ":is([data-table-size=lg] *)": sizeSpace["12"], 146 + ":is([data-table-size=md] *)": sizeSpace["10"], 147 147 }, 148 - width: spacing["3"], 148 + width: sizeSpace["3"], 149 149 }, 150 150 resizerLine: { 151 151 backgroundColor: { ··· 159 159 bottom: 0, 160 160 left: "50%", 161 161 top: 0, 162 - width: spacing["0.5"], 162 + width: sizeSpace["0.5"], 163 163 }, 164 164 dropIndicator: { 165 165 outlineColor: primaryColor.solid1,
+8 -8
packages/hip-ui/src/components/tabs/index.tsx
··· 25 25 import { primaryColor, uiColor } from "../theme/color.stylex"; 26 26 import { mediaQueries } from "../theme/media-queries.stylex"; 27 27 import { radius } from "../theme/radius.stylex"; 28 - import { spacing } from "../theme/spacing.stylex"; 28 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 29 29 import { fontFamily, fontSize } from "../theme/typography.stylex"; 30 30 31 31 const styles = stylex.create({ ··· 38 38 flexDirection: "row", 39 39 }, 40 40 tabList: { 41 - gap: spacing["1"], 41 + gap: gap["1"], 42 42 overflow: "auto", 43 43 alignItems: { 44 44 ":is([data-orientation=horizontal])": "flex-start", ··· 77 77 }, 78 78 tab: { 79 79 padding: { 80 - ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`, 81 - ":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`, 82 - ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`, 80 + ":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["5"]}`, 81 + ":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["4"]}`, 82 + ":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2.5"]}`, 83 83 }, 84 84 borderWidth: 0, 85 85 outline: "none", ··· 168 168 }, 169 169 tabPanel: { 170 170 padding: { 171 - ":is([data-size=lg] *)": spacing["5"], 172 - ":is([data-size=md] *)": spacing["4"], 173 - ":is([data-size=sm] *)": spacing["3"], 171 + ":is([data-size=lg] *)": sizeSpace["5"], 172 + ":is([data-size=md] *)": sizeSpace["4"], 173 + ":is([data-size=sm] *)": sizeSpace["3"], 174 174 }, 175 175 outline: "none", 176 176 fontSize: {
+1 -1
packages/hip-ui/src/components/tabs/tabs-config.ts
··· 10 10 "../haptics/index.ts", 11 11 "../theme/animations.stylex.tsx", 12 12 "../theme/semantic-color.stylex.tsx", 13 - "../theme/spacing.stylex.tsx", 13 + "../theme/semantic-spacing.stylex.tsx", 14 14 "../theme/typography.stylex.tsx", 15 15 "../theme/radius.stylex.tsx", 16 16 "../theme/types.ts",
+14 -14
packages/hip-ui/src/components/tag-group/index.tsx
··· 20 20 import { primaryColor, uiColor } from "../theme/color.stylex"; 21 21 import { mediaQueries } from "../theme/media-queries.stylex"; 22 22 import { radius } from "../theme/radius.stylex"; 23 - import { spacing } from "../theme/spacing.stylex"; 23 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 24 24 import { typeramp } from "../theme/typography.stylex"; 25 25 26 26 const styles = stylex.create({ 27 27 group: { 28 - gap: spacing["2"], 28 + gap: gap["2"], 29 29 display: "flex", 30 30 flexDirection: "column", 31 31 }, 32 32 list: { 33 33 alignItems: "center", 34 - columnGap: spacing["1.5"], 34 + columnGap: gap["1.5"], 35 35 display: "flex", 36 36 flexWrap: "wrap", 37 - rowGap: spacing["2.5"], 37 + rowGap: gap["2.5"], 38 38 }, 39 39 tag: { 40 40 borderColor: { ··· 45 45 borderRadius: radius.full, 46 46 borderStyle: "solid", 47 47 borderWidth: 1, 48 - gap: spacing["1.5"], 48 + gap: gap["1.5"], 49 49 alignItems: "center", 50 50 backgroundColor: { 51 51 default: uiColor.component1, ··· 64 64 opacity: { 65 65 ":is([data-disabled])": 0.5, 66 66 }, 67 - paddingBottom: spacing["1"], 68 - paddingLeft: spacing["2.5"], 67 + paddingBottom: verticalSpace["1"], 68 + paddingLeft: horizontalSpace["2.5"], 69 69 paddingRight: { 70 - default: spacing["2.5"], 71 - ":has(button)": spacing["1.5"], 70 + default: horizontalSpace["2.5"], 71 + ":has(button)": sizeSpace["1.5"], 72 72 }, 73 - paddingTop: spacing["1"], 73 + paddingTop: verticalSpace["1"], 74 74 }, 75 75 removeButton: { 76 76 margin: 0, ··· 95 95 [mediaQueries.reducedMotion]: "none", 96 96 }, 97 97 transitionTimingFunction: "ease-in-out", 98 - height: spacing["4"], 99 - width: spacing["4"], 98 + height: sizeSpace["4"], 99 + width: sizeSpace["4"], 100 100 }, 101 101 tagText: { 102 102 // eslint-disable-next-line @stylexjs/valid-styles 103 103 textBoxEdge: "cap alphabetic", 104 104 // eslint-disable-next-line @stylexjs/valid-styles 105 105 textBoxTrim: "trim-both", 106 - paddingBottom: spacing["0.5"], 107 - paddingTop: spacing["0.5"], 106 + paddingBottom: verticalSpace["0.5"], 107 + paddingTop: verticalSpace["0.5"], 108 108 }, 109 109 }); 110 110
+10 -10
packages/hip-ui/src/components/text-area/index.tsx
··· 22 22 23 23 import { SizeContext } from "../context"; 24 24 import { Description, FieldErrorMessage, Label } from "../label"; 25 - import { spacing } from "../theme/spacing.stylex"; 25 + import { size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 26 26 import { fontFamily, lineHeight } from "../theme/typography.stylex"; 27 27 import { useInputStyles } from "../theme/useInputStyles"; 28 28 ··· 39 39 }, 40 40 resize: "none", 41 41 minHeight: { 42 - ":is([data-size=lg])": spacing["10"], 43 - ":is([data-size=md])": spacing["8"], 44 - ":is([data-size=sm])": spacing["6"], 42 + ":is([data-size=lg])": sizeSpace["10"], 43 + ":is([data-size=md])": sizeSpace["8"], 44 + ":is([data-size=sm])": sizeSpace["6"], 45 45 }, 46 46 minWidth: 0, 47 47 paddingBottom: { 48 - ":is([data-size=lg])": spacing["3"], 49 - ":is([data-size=md])": spacing["2"], 50 - ":is([data-size=sm])": spacing["1"], 48 + ":is([data-size=lg])": verticalSpace["3"], 49 + ":is([data-size=md])": sizeSpace["2"], 50 + ":is([data-size=sm])": sizeSpace["1"], 51 51 }, 52 52 paddingTop: { 53 - ":is([data-size=lg])": spacing["3"], 54 - ":is([data-size=md])": spacing["2"], 55 - ":is([data-size=sm])": spacing["1"], 53 + ":is([data-size=lg])": verticalSpace["3"], 54 + ":is([data-size=md])": sizeSpace["2"], 55 + ":is([data-size=sm])": sizeSpace["1"], 56 56 }, 57 57 width: "100%", 58 58 },
+1 -1
packages/hip-ui/src/components/text-area/text-area-config.ts
··· 4 4 name: "text-area", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+1 -1
packages/hip-ui/src/components/text-field/text-field-config.ts
··· 4 4 name: "text-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+132
packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx
··· 1 + import * as stylex from "@stylexjs/stylex"; 2 + 3 + import type { ThemeKeys } from "./types"; 4 + 5 + import { spacing } from "./spacing.stylex"; 6 + 7 + /** 8 + * Full numeric scale (same keys/values as `spacing`) for phase-1 bracket access on semantic categories. 9 + */ 10 + const spacingNumeric = { 11 + px: spacing["px"], 12 + "0": spacing["0"], 13 + "0.5": spacing["0.5"], 14 + "1": spacing["1"], 15 + "1.5": spacing["1.5"], 16 + "2": spacing["2"], 17 + "2.5": spacing["2.5"], 18 + "3": spacing["3"], 19 + "3.5": spacing["3.5"], 20 + "4": spacing["4"], 21 + "5": spacing["5"], 22 + "6": spacing["6"], 23 + "7": spacing["7"], 24 + "8": spacing["8"], 25 + "9": spacing["9"], 26 + "10": spacing["10"], 27 + "11": spacing["11"], 28 + "12": spacing["12"], 29 + "14": spacing["14"], 30 + "16": spacing["16"], 31 + "20": spacing["20"], 32 + "24": spacing["24"], 33 + "28": spacing["28"], 34 + "32": spacing["32"], 35 + "36": spacing["36"], 36 + "40": spacing["40"], 37 + "44": spacing["44"], 38 + "48": spacing["48"], 39 + "52": spacing["52"], 40 + "56": spacing["56"], 41 + "60": spacing["60"], 42 + "64": spacing["64"], 43 + "72": spacing["72"], 44 + "80": spacing["80"], 45 + "96": spacing["96"], 46 + } as const; 47 + 48 + export const horizontalSpace = stylex.defineVars({ 49 + none: spacing["0"], 50 + xxs: spacing["0.5"], 51 + xs: spacing["1"], 52 + sm: spacing["1.5"], 53 + md: spacing["2"], 54 + lg: spacing["2.5"], 55 + xl: spacing["3"], 56 + "2xl": spacing["3.5"], 57 + "3xl": spacing["4"], 58 + "4xl": spacing["5"], 59 + ...spacingNumeric, 60 + }); 61 + 62 + export const verticalSpace = stylex.defineVars({ 63 + none: spacing["0"], 64 + xxs: spacing["0.5"], 65 + xs: spacing["1"], 66 + sm: spacing["1.5"], 67 + md: spacing["2"], 68 + lg: spacing["2.5"], 69 + xl: spacing["3"], 70 + "2xl": spacing["3.5"], 71 + "3xl": spacing["4"], 72 + "4xl": spacing["5"], 73 + "5xl": spacing["6"], 74 + ...spacingNumeric, 75 + }); 76 + 77 + export const gap = stylex.defineVars({ 78 + none: spacing["0"], 79 + xs: spacing["1"], 80 + sm: spacing["1.5"], 81 + md: spacing["2"], 82 + xl: spacing["3"], 83 + "2xl": spacing["4"], 84 + ...spacingNumeric, 85 + }); 86 + 87 + export const size = stylex.defineVars({ 88 + none: spacing["0"], 89 + xxs: spacing["1"], 90 + xs: spacing["1.5"], 91 + sm: spacing["2"], 92 + md: spacing["2.5"], 93 + lg: spacing["10"], 94 + xl: spacing["12"], 95 + "2xl": spacing["4"], 96 + "3xl": spacing["5"], 97 + "4xl": spacing["6"], 98 + "5xl": spacing["7"], 99 + "6xl": spacing["8"], 100 + "7xl": spacing["9"], 101 + "8xl": spacing["10"], 102 + "9xl": spacing["11"], 103 + "10xl": spacing["12"], 104 + "11xl": spacing["14"], 105 + "12xl": spacing["16"], 106 + "13xl": spacing["20"], 107 + "14xl": spacing["24"], 108 + "15xl": spacing["28"], 109 + "16xl": spacing["32"], 110 + "17xl": spacing["36"], 111 + "18xl": spacing["40"], 112 + "19xl": spacing["44"], 113 + "20xl": spacing["48"], 114 + "21xl": spacing["52"], 115 + "22xl": spacing["56"], 116 + "23xl": spacing["60"], 117 + "24xl": spacing["64"], 118 + "25xl": spacing["72"], 119 + "26xl": spacing["80"], 120 + "27xl": spacing["96"], 121 + "28xl": spacing["96"], 122 + ...spacingNumeric, 123 + }); 124 + 125 + // eslint-disable-next-line @stylexjs/enforce-extension 126 + export type HorizontalSpace = ThemeKeys<typeof horizontalSpace>; 127 + // eslint-disable-next-line @stylexjs/enforce-extension 128 + export type VerticalSpace = ThemeKeys<typeof verticalSpace>; 129 + // eslint-disable-next-line @stylexjs/enforce-extension 130 + export type Gap = ThemeKeys<typeof gap>; 131 + // eslint-disable-next-line @stylexjs/enforce-extension 132 + export type SizeSpace = ThemeKeys<typeof size>;
+6 -6
packages/hip-ui/src/components/theme/typography.stylex.tsx
··· 1 1 import * as stylex from "@stylexjs/stylex"; 2 2 3 3 import { breakpoints } from "./media-queries.stylex"; 4 - import { spacing } from "./spacing.stylex"; 4 + import { verticalSpace } from "./semantic-spacing.stylex"; 5 5 6 6 export const fontFamily = stylex.defineVars({ 7 7 title: "'Inter', sans-serif", ··· 76 76 fontWeight: fontWeight["extrabold"], 77 77 letterSpacing: tracking["tight"], 78 78 lineHeight: lineHeight.base, 79 - scrollMarginBlockStart: spacing["20"], 79 + scrollMarginBlockStart: verticalSpace["20"], 80 80 }, 81 81 heading2: { 82 82 // eslint-disable-next-line @stylexjs/valid-styles ··· 94 94 fontWeight: fontWeight.semibold, 95 95 letterSpacing: tracking["tight"], 96 96 lineHeight: lineHeight.sm, 97 - scrollMarginBlockStart: spacing["20"], 97 + scrollMarginBlockStart: verticalSpace["20"], 98 98 borderBottomWidth: 1, 99 99 }, 100 100 heading3: { ··· 110 110 fontWeight: fontWeight["semibold"], 111 111 letterSpacing: tracking["tight"], 112 112 lineHeight: lineHeight.sm, 113 - scrollMarginBlockStart: spacing["20"], 113 + scrollMarginBlockStart: verticalSpace["20"], 114 114 }, 115 115 heading4: { 116 116 // eslint-disable-next-line @stylexjs/valid-styles ··· 125 125 fontWeight: fontWeight["semibold"], 126 126 letterSpacing: tracking["tight"], 127 127 lineHeight: lineHeight.sm, 128 - scrollMarginBlockStart: spacing["20"], 128 + scrollMarginBlockStart: verticalSpace["20"], 129 129 }, 130 130 heading5: { 131 131 // eslint-disable-next-line @stylexjs/valid-styles ··· 140 140 fontWeight: fontWeight["semibold"], 141 141 letterSpacing: tracking["tight"], 142 142 lineHeight: lineHeight.sm, 143 - scrollMarginBlockStart: spacing["20"], 143 + scrollMarginBlockStart: verticalSpace["20"], 144 144 }, 145 145 body: { 146 146 // eslint-disable-next-line @stylexjs/valid-styles
+24 -24
packages/hip-ui/src/components/theme/useButtonStyles.ts
··· 11 11 import { uiColor } from "./color.stylex"; 12 12 import { radius } from "./radius.stylex"; 13 13 import { critical, primary, ui } from "./semantic-color.stylex"; 14 + import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex"; 14 15 import { shadow } from "./shadow.stylex"; 15 - import { spacing } from "./spacing.stylex"; 16 16 import { fontFamily, fontSize, fontWeight } from "./typography.stylex"; 17 17 18 18 const styles = stylex.create({ ··· 30 30 borderWidth: 1, 31 31 32 32 cornerShape: "squircle", 33 - gap: spacing["1"], 33 + gap: gap["1"], 34 34 alignItems: "center", 35 35 boxSizing: "border-box", 36 36 display: "inline-flex", ··· 54 54 ":is(*) svg": { 55 55 flexShrink: 0, 56 56 pointerEvents: "none", 57 - height: spacing["4"], 58 - width: spacing["4"], 57 + height: sizeSpace["4"], 58 + width: sizeSpace["4"], 59 59 }, 60 60 }, 61 61 small: { 62 62 fontSize: fontSize["xs"], 63 - height: spacing["7"], 63 + height: sizeSpace["7"], 64 64 paddingLeft: { 65 - default: spacing["2"], 65 + default: horizontalSpace["2"], 66 66 }, 67 - paddingRight: spacing["2"], 67 + paddingRight: horizontalSpace["2"], 68 68 69 69 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 70 70 ":is(*) svg": { 71 71 flexShrink: 0, 72 72 pointerEvents: "none", 73 - height: spacing["3.5"], 74 - width: spacing["3.5"], 73 + height: sizeSpace["3.5"], 74 + width: sizeSpace["3.5"], 75 75 }, 76 76 }, 77 77 medium: { 78 - gap: spacing["1.5"], 78 + gap: gap["1.5"], 79 79 fontSize: fontSize["sm"], 80 - height: spacing["8"], 80 + height: sizeSpace["8"], 81 81 paddingLeft: { 82 - default: spacing["3"], 83 - ":has(svg+*)": spacing["2.5"], 82 + default: horizontalSpace["3"], 83 + ":has(svg+*)": sizeSpace["2.5"], 84 84 }, 85 - paddingRight: spacing["3"], 85 + paddingRight: horizontalSpace["3"], 86 86 }, 87 87 large: { 88 - gap: spacing["2"], 88 + gap: gap["2"], 89 89 fontSize: fontSize["sm"], 90 - height: spacing["10"], 90 + height: sizeSpace["10"], 91 91 paddingLeft: { 92 - default: spacing["4"], 93 - ":has(svg+*)": spacing["3"], 92 + default: horizontalSpace["4"], 93 + ":has(svg+*)": sizeSpace["3"], 94 94 }, 95 - paddingRight: spacing["4"], 95 + paddingRight: horizontalSpace["4"], 96 96 }, 97 97 xl: { 98 - gap: spacing["2"], 98 + gap: gap["2"], 99 99 fontSize: fontSize["lg"], 100 - height: spacing["12"], 100 + height: sizeSpace["12"], 101 101 paddingLeft: { 102 - default: spacing["5"], 103 - ":has(svg+*)": spacing["4"], 102 + default: horizontalSpace["5"], 103 + ":has(svg+*)": sizeSpace["4"], 104 104 }, 105 - paddingRight: spacing["5"], 105 + paddingRight: horizontalSpace["5"], 106 106 }, 107 107 secondary: { 108 108 borderColor: {
+12 -12
packages/hip-ui/src/components/theme/useCalendarStyles.ts
··· 11 11 import { animationDuration } from "../theme/animations.stylex"; 12 12 import { primaryColor, uiColor } from "../theme/color.stylex"; 13 13 import { radius } from "../theme/radius.stylex"; 14 - import { spacing } from "../theme/spacing.stylex"; 14 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 15 import { fontSize, fontWeight } from "./typography.stylex"; 16 16 17 17 export interface CalendarProps<T extends DateValue> ··· 23 23 24 24 const styles = stylex.create({ 25 25 cell: { 26 - padding: spacing["1"], 26 + padding: sizeSpace["1"], 27 27 borderRadius: radius.md, 28 28 cornerShape: "squircle", 29 29 textDecoration: { ··· 35 35 ":is([data-selected])": primaryColor.text2, 36 36 }, 37 37 cursor: "default", 38 - lineHeight: spacing["8"], 38 + lineHeight: sizeSpace["8"], 39 39 opacity: { 40 40 ":is([data-outside-visible-range],[data-unavailable])": 0.5, 41 41 }, ··· 45 45 transitionProperty: "color", 46 46 transitionTimingFunction: "ease-in-out", 47 47 zIndex: 0, 48 - width: spacing["8"], 48 + width: sizeSpace["8"], 49 49 50 50 "::before": { 51 - inset: spacing["1"], 51 + inset: sizeSpace["1"], 52 52 content: "''", 53 53 position: "absolute", 54 54 transitionDuration: animationDuration.fast, ··· 58 58 }, 59 59 }, 60 60 nonRangeCell: { 61 - cornerShape: { 62 - "::before": "squircle", 63 - }, 64 61 borderRadius: { 65 62 "::before": radius.md, 63 + }, 64 + cornerShape: { 65 + "::before": "squircle", 66 66 }, 67 67 backgroundColor: { 68 68 ":is(*)::before": "transparent", ··· 113 113 ":is([data-selection-end],td:last-child > *)::before": radius.md, 114 114 }, 115 115 marginLeft: { 116 - ":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`, 116 + ":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["2"]} * -1)`, 117 117 }, 118 118 marginRight: { 119 - ":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`, 119 + ":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["2"]} * -1)`, 120 120 }, 121 121 }, 122 122 headerCell: { 123 123 fontSize: fontSize["sm"], 124 124 fontWeight: fontWeight["medium"], 125 125 textAlign: "center", 126 - paddingBottom: spacing["1"], 126 + paddingBottom: verticalSpace["1"], 127 127 }, 128 128 heading: { 129 129 margin: 0, ··· 135 135 borderCollapse: "collapse", 136 136 }, 137 137 wrapper: { 138 - gap: spacing["3"], 138 + gap: gap["3"], 139 139 display: "flex", 140 140 flexDirection: "column", 141 141 },
+31 -32
packages/hip-ui/src/components/theme/useInputStyles.ts
··· 16 16 uiColor, 17 17 warningColor, 18 18 } from "./color.stylex"; 19 - import { mediaQueries } from "./media-queries.stylex"; 20 19 import { radius } from "./radius.stylex"; 21 20 import { ui } from "./semantic-color.stylex"; 22 - import { spacing } from "./spacing.stylex"; 21 + import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex"; 23 22 import { fontSize, fontWeight, lineHeight } from "./typography.stylex"; 24 23 25 24 const styles = stylex.create({ 26 25 field: { 27 - gap: spacing["2"], 26 + gap: gap["2"], 28 27 display: "flex", 29 28 flexDirection: "column", 30 29 }, ··· 34 33 flexShrink: 0, 35 34 height: "100%", 36 35 37 - gap: spacing["2"], 36 + gap: gap["2"], 38 37 alignItems: "center", 39 38 display: "flex", 40 39 justifyContent: "center", ··· 43 42 ":is(*) svg": { 44 43 flexShrink: 0, 45 44 pointerEvents: "none", 46 - height: spacing["4"], 47 - width: spacing["4"], 45 + height: sizeSpace["4"], 46 + width: sizeSpace["4"], 48 47 }, 49 48 }, 50 49 addonSm: { 51 - paddingLeft: { ":first-child": spacing["1.5"] }, 50 + paddingLeft: { ":first-child": horizontalSpace["1.5"] }, 52 51 paddingRight: { 53 - ":first-child": spacing["1"], 54 - ":last-child": spacing["1.5"], 52 + ":first-child": horizontalSpace["1"], 53 + ":last-child": sizeSpace["1.5"], 55 54 }, 56 55 }, 57 56 addonMd: { 58 - paddingLeft: { ":first-child": spacing["2.5"] }, 57 + paddingLeft: { ":first-child": horizontalSpace["2.5"] }, 59 58 paddingRight: { 60 - ":first-child": spacing["2"], 61 - ":last-child": spacing["2.5"], 59 + ":first-child": horizontalSpace["2"], 60 + ":last-child": sizeSpace["2.5"], 62 61 }, 63 62 }, 64 63 addonLg: { 65 - paddingLeft: { ":first-child": spacing["3"] }, 64 + paddingLeft: { ":first-child": horizontalSpace["3"] }, 66 65 paddingRight: { 67 - ":first-child": spacing["2"], 68 - ":last-child": spacing["3"], 66 + ":first-child": horizontalSpace["2"], 67 + ":last-child": sizeSpace["3"], 69 68 }, 70 69 }, 71 70 validationIcon: { ··· 315 314 inputSizeSm: { 316 315 fontSize: fontSize["xs"], 317 316 paddingLeft: { 318 - ":first-child": spacing["2"], 317 + ":first-child": horizontalSpace["2"], 319 318 }, 320 - paddingRight: spacing["1"], 319 + paddingRight: horizontalSpace["1"], 321 320 }, 322 321 inputSizeMd: { 323 322 fontSize: fontSize["sm"], 324 323 paddingLeft: { 325 - ":first-child": spacing["2"], 324 + ":first-child": horizontalSpace["2"], 326 325 }, 327 - paddingRight: spacing["2"], 326 + paddingRight: horizontalSpace["2"], 328 327 }, 329 328 inputSizeLg: { 330 329 fontSize: fontSize["base"], 331 330 paddingLeft: { 332 - ":first-child": spacing["3"], 331 + ":first-child": horizontalSpace["3"], 333 332 }, 334 - paddingRight: spacing["3"], 333 + paddingRight: horizontalSpace["3"], 335 334 }, 336 335 wrapperSizeSm: { 337 - height: spacing["6"], 336 + height: sizeSpace["6"], 338 337 }, 339 338 wrapperSizeMd: { 340 - height: spacing["8"], 339 + height: sizeSpace["8"], 341 340 }, 342 341 wrapperSizeLg: { 343 - height: spacing["10"], 342 + height: sizeSpace["10"], 344 343 }, 345 344 horizontalLabel: { 346 - gap: spacing["4"], 345 + gap: gap["4"], 347 346 alignItems: "flex-start", 348 347 flexDirection: "row", 349 348 }, ··· 354 353 paddingRight: 0, 355 354 }, 356 355 horizontalLabelTextSm: { 357 - lineHeight: spacing["6"], 356 + lineHeight: sizeSpace["6"], 358 357 }, 359 358 horizontalLabelTextMd: { 360 - lineHeight: spacing["8"], 359 + lineHeight: sizeSpace["8"], 361 360 }, 362 361 horizontalLabelTextLg: { 363 362 fontSize: fontSize["base"], 364 363 fontWeight: fontWeight["medium"], 365 - lineHeight: spacing["10"], 364 + lineHeight: sizeSpace["10"], 366 365 }, 367 366 label: { 368 - paddingLeft: spacing["1"], 369 - paddingRight: spacing["1"], 367 + paddingLeft: horizontalSpace["1"], 368 + paddingRight: horizontalSpace["1"], 370 369 }, 371 370 additionalText: { 372 - paddingLeft: spacing["2"], 373 - paddingRight: spacing["2"], 371 + paddingLeft: horizontalSpace["2"], 372 + paddingRight: horizontalSpace["2"], 374 373 }, 375 374 }); 376 375
+22 -22
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
··· 5 5 6 6 import { SizeContext } from "../context"; 7 7 import { radius } from "../theme/radius.stylex"; 8 - import { spacing } from "../theme/spacing.stylex"; 8 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 9 9 import { 10 10 fontSize, 11 11 fontWeight, ··· 30 30 [":is([data-react-aria-pressable=true][data-selected=true])"]: 31 31 fontWeight["medium"], 32 32 }, 33 - paddingBottom: spacing["0.5"], 34 - paddingLeft: spacing["1"], 35 - paddingRight: spacing["1"], 36 - paddingTop: spacing["0.5"], 33 + paddingBottom: verticalSpace["0.5"], 34 + paddingLeft: horizontalSpace["1"], 35 + paddingRight: horizontalSpace["1"], 36 + paddingTop: verticalSpace["0.5"], 37 37 }, 38 - sm: { minHeight: spacing["7"] }, 39 - md: { minHeight: spacing["9"] }, 40 - lg: { minHeight: spacing["12"] }, 38 + sm: { minHeight: sizeSpace["7"] }, 39 + md: { minHeight: sizeSpace["9"] }, 40 + lg: { minHeight: sizeSpace["12"] }, 41 41 itemInner: { 42 42 borderRadius: radius.md, 43 43 cornerShape: "squircle", 44 - gap: spacing["3"], 44 + gap: gap["3"], 45 45 alignItems: "center", 46 46 backgroundColor: { 47 47 default: "transparent", ··· 62 62 transitionDuration: animationDuration.fast, 63 63 transitionProperty: "background-color", 64 64 transitionTimingFunction: "ease-in-out", 65 - paddingBottom: spacing["2"], 66 - paddingLeft: spacing["3"], 67 - paddingRight: spacing["3"], 68 - paddingTop: spacing["2"], 65 + paddingBottom: verticalSpace["2"], 66 + paddingLeft: horizontalSpace["3"], 67 + paddingRight: horizontalSpace["3"], 68 + paddingTop: verticalSpace["2"], 69 69 70 70 /* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */ 71 71 ":is([data-variant=destructive] *) *": { ··· 73 73 }, 74 74 }, 75 75 smItemInner: { 76 - gap: spacing["2"], 76 + gap: gap["2"], 77 77 fontSize: fontSize["xs"], 78 78 lineHeight: lineHeight["xs"], 79 - paddingBottom: spacing["1"], 80 - paddingTop: spacing["1"], 79 + paddingBottom: verticalSpace["1"], 80 + paddingTop: verticalSpace["1"], 81 81 }, 82 82 lgItemInner: { 83 83 fontSize: fontSize["base"], ··· 89 89 alignItems: "center", 90 90 display: "flex", 91 91 justifyContent: "center", 92 - marginBottom: `calc(${spacing["2"]} * -1)`, 93 - marginTop: `calc(${spacing["2"]} * -1)`, 94 - minWidth: spacing["4"], 92 + marginBottom: `calc(${sizeSpace["2"]} * -1)`, 93 + marginTop: `calc(${sizeSpace["2"]} * -1)`, 94 + minWidth: sizeSpace["4"], 95 95 96 96 // eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles 97 97 ":is(*) svg": { 98 98 flexShrink: 0, 99 99 pointerEvents: "none", 100 - height: spacing["4"], 101 - width: spacing["4"], 100 + height: sizeSpace["4"], 101 + width: sizeSpace["4"], 102 102 }, 103 103 }, 104 104 label: { ··· 106 106 textBoxEdge: "cap alphabetic", 107 107 // eslint-disable-next-line @stylexjs/valid-styles 108 108 textBoxTrim: "trim-both", 109 - gap: spacing["1.5"], 109 + gap: gap["1.5"], 110 110 display: "flex", 111 111 flexDirection: "column", 112 112 flexGrow: 1,
+5 -5
packages/hip-ui/src/components/theme/usePopoverStyles.ts
··· 6 6 } from "./animations.stylex"; 7 7 import { radius } from "./radius.stylex"; 8 8 import { ui } from "./semantic-color.stylex"; 9 + import { size as sizeSpace } from "./semantic-spacing.stylex"; 9 10 import { shadow } from "./shadow.stylex"; 10 - import { spacing } from "./spacing.stylex"; 11 11 12 12 const styles = stylex.create({ 13 13 popover: { ··· 19 19 }, 20 20 animation: { 21 21 "--origin-x": { 22 - ":is([data-placement=left],[data-placement=left] > *)": spacing["4"], 23 - ":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`, 22 + ":is([data-placement=left],[data-placement=left] > *)": sizeSpace["4"], 23 + ":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["4"]} * -1)`, 24 24 }, 25 25 "--origin-y": { 26 - ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`, 27 - ":is([data-placement=top],[data-placement=top] > *)": spacing["4"], 26 + ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["4"]} * -1)`, 27 + ":is([data-placement=top],[data-placement=top] > *)": sizeSpace["4"], 28 28 }, 29 29 opacity: { 30 30 default: 1,
+1 -1
packages/hip-ui/src/components/time-field/time-field-config.ts
··· 4 4 name: "time-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+14 -14
packages/hip-ui/src/components/toast/Toast.tsx
··· 28 28 uiColor, 29 29 warningColor, 30 30 } from "../theme/color.stylex"; 31 - import { spacing } from "../theme/spacing.stylex"; 31 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 32 + import { shadow } from "../theme/shadow.stylex"; 32 33 import { lineHeight, typeramp } from "../theme/typography.stylex"; 33 34 import { usePopoverStyles } from "../theme/usePopoverStyles"; 34 35 import { toasts } from "./queue"; 35 - import { shadow } from "../theme/shadow.stylex"; 36 36 37 37 const styles = stylex.create({ 38 38 region: { 39 - gap: spacing["2"], 39 + gap: gap["2"], 40 40 outline: "none", 41 41 display: "flex", 42 42 flexDirection: "column-reverse", 43 43 position: "fixed", 44 44 zIndex: 9999, 45 - bottom: spacing["4"], 46 - right: spacing["4"], 45 + bottom: verticalSpace["4"], 46 + right: horizontalSpace["4"], 47 47 }, 48 48 toast: { 49 - gap: spacing["4"], 49 + gap: gap["4"], 50 50 alignItems: "center", 51 51 display: "flex", 52 52 flexDirection: "row", 53 53 justifyContent: "space-between", 54 - minWidth: spacing["60"], 55 - paddingBottom: spacing["3"], 56 - paddingLeft: spacing["4"], 57 - paddingRight: spacing["4"], 58 - paddingTop: spacing["3"], 54 + minWidth: sizeSpace["60"], 55 + paddingBottom: verticalSpace["3"], 56 + paddingLeft: horizontalSpace["4"], 57 + paddingRight: horizontalSpace["4"], 58 + paddingTop: verticalSpace["3"], 59 59 }, 60 60 content: { 61 61 flex: "1 1 auto", 62 - gap: spacing["2.5"], 62 + gap: gap["2.5"], 63 63 display: "flex", 64 64 flexDirection: "column", 65 65 minWidth: 0, ··· 97 97 }, 98 98 flexShrink: 0, 99 99 pointerEvents: "none", 100 - height: spacing["4"], 101 - width: spacing["4"], 100 + height: sizeSpace["4"], 101 + width: sizeSpace["4"], 102 102 }, 103 103 }, 104 104 critical: {
+1 -1
packages/hip-ui/src/components/toast/toast-config.ts
··· 8 8 "../haptics/context.tsx", 9 9 "../haptics/useHaptics.ts", 10 10 "../haptics/index.ts", 11 - "../theme/spacing.stylex.tsx", 11 + "../theme/semantic-spacing.stylex.tsx", 12 12 "../theme/radius.stylex.tsx", 13 13 "../theme/semantic-color.stylex.tsx", 14 14 "../theme/typography.stylex.tsx",
+2 -2
packages/hip-ui/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["2"], 49 49 gap: "var(--toggle-button-group-gap)", 50 50 flexWrap: "wrap", 51 51 }),
+1 -1
packages/hip-ui/src/components/toggle-button-group/toggle-button-group-config.ts
··· 8 8 "../haptics/context.tsx", 9 9 "../haptics/useHaptics.ts", 10 10 "../haptics/index.ts", 11 - "../theme/spacing.stylex.tsx", 11 + "../theme/semantic-spacing.stylex.tsx", 12 12 "../theme/radius.stylex.tsx", 13 13 "../theme/semantic-color.stylex.tsx", 14 14 "../theme/typography.stylex.tsx",
+10 -10
packages/hip-ui/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["2"], 62 62 }, 63 63 paddingRight: { 64 - ":has(> * + *, > *:not(svg):only-child)": spacing["2"], 64 + ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["2"], 65 65 }, 66 66 width: { 67 - ":has(svg:only-child)": spacing["7"], 67 + ":has(svg:only-child)": sizeSpace["7"], 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["3"], 73 73 }, 74 74 paddingRight: { 75 - ":has(> * + *, > *:not(svg):only-child)": spacing["3"], 75 + ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["3"], 76 76 }, 77 77 width: { 78 - ":has(svg:only-child)": spacing["8"], 78 + ":has(svg:only-child)": sizeSpace["8"], 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["4"], 84 84 }, 85 85 paddingRight: { 86 - ":has(> * + *, > *:not(svg):only-child)": spacing["4"], 86 + ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["4"], 87 87 }, 88 88 width: { 89 - ":has(svg:only-child)": spacing["10"], 89 + ":has(svg:only-child)": sizeSpace["10"], 90 90 }, 91 91 }, 92 92 });
+10 -10
packages/hip-ui/src/components/toolbar/index.tsx
··· 16 16 import type { StyleXComponentProps } from "../theme/types"; 17 17 18 18 import { uiColor } from "../theme/color.stylex"; 19 - import { spacing } from "../theme/spacing.stylex"; 19 + import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 20 20 21 21 const styles = stylex.create({ 22 22 toolbar: { 23 - gap: spacing["1"], 23 + gap: gap["1"], 24 24 display: "flex", 25 25 flexWrap: "wrap", 26 26 }, ··· 40 40 ":is([data-orientation=vertical] *)": "1px", 41 41 }, 42 42 marginBottom: { 43 - ":is([data-orientation=horizontal] *)": spacing["1"], 44 - ":is([data-orientation=vertical] *)": spacing["2"], 43 + ":is([data-orientation=horizontal] *)": sizeSpace["1"], 44 + ":is([data-orientation=vertical] *)": sizeSpace["2"], 45 45 }, 46 46 marginLeft: { 47 - ":is([data-orientation=horizontal] *)": spacing["2"], 48 - ":is([data-orientation=vertical] *)": spacing["1"], 47 + ":is([data-orientation=horizontal] *)": sizeSpace["2"], 48 + ":is([data-orientation=vertical] *)": sizeSpace["1"], 49 49 }, 50 50 marginRight: { 51 - ":is([data-orientation=horizontal] *)": spacing["2"], 52 - ":is([data-orientation=vertical] *)": spacing["1"], 51 + ":is([data-orientation=horizontal] *)": sizeSpace["2"], 52 + ":is([data-orientation=vertical] *)": sizeSpace["1"], 53 53 }, 54 54 marginTop: { 55 - ":is([data-orientation=horizontal] *)": spacing["1"], 56 - ":is([data-orientation=vertical] *)": spacing["2"], 55 + ":is([data-orientation=horizontal] *)": sizeSpace["1"], 56 + ":is([data-orientation=vertical] *)": sizeSpace["2"], 57 57 }, 58 58 width: { 59 59 ":is([data-orientation=horizontal] *)": "1px",
+1 -1
packages/hip-ui/src/components/toolbar/toolbar-config.ts
··· 4 4 name: "toolbar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/semantic-color.stylex.tsx", 9 9 "../theme/types.ts", 10 10 ],
+5 -5
packages/hip-ui/src/components/tooltip/index.tsx
··· 15 15 import { animationDuration } from "../theme/animations.stylex"; 16 16 import { uiInverted } from "../theme/color.stylex"; 17 17 import { radius } from "../theme/radius.stylex"; 18 + import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 18 19 import { shadow } from "../theme/shadow.stylex"; 19 - import { spacing } from "../theme/spacing.stylex"; 20 20 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 21 21 22 22 const tooltipStyle = stylex.create({ ··· 29 29 fontFamily: fontFamily["sans"], 30 30 fontSize: fontSize["sm"], 31 31 lineHeight: lineHeight["sm"], 32 - paddingBottom: spacing["1"], 33 - paddingLeft: spacing["2"], 34 - paddingRight: spacing["2"], 35 - paddingTop: spacing["1"], 32 + paddingBottom: verticalSpace["1"], 33 + paddingLeft: horizontalSpace["2"], 34 + paddingRight: horizontalSpace["2"], 35 + paddingTop: verticalSpace["1"], 36 36 37 37 "--origin": { 38 38 ":is([data-placement=bottom])": "translateY(-4px)",
+1 -1
packages/hip-ui/src/components/tooltip/tooltip-config.ts
··· 4 4 name: "tooltip", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+11 -11
packages/hip-ui/src/components/tree/index.tsx
··· 25 25 import { mediaQueries } from "../theme/media-queries.stylex"; 26 26 import { radius } from "../theme/radius.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 - import { spacing } from "../theme/spacing.stylex"; 28 + import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 29 29 import { 30 30 estimatedRowHeights, 31 31 useListBoxItemStyles, ··· 36 36 position: "relative", 37 37 }, 38 38 itemInner: { 39 - gap: spacing["1"], 40 - paddingLeft: spacing["0.5"], 39 + gap: gap["1"], 40 + paddingLeft: horizontalSpace["0.5"], 41 41 }, 42 42 selected: { 43 43 backgroundColor: primaryColor.component2, 44 44 }, 45 45 spacer: { 46 - width: `calc((var(--tree-item-level, 0) - 1) * ${spacing["3"]})`, 46 + width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["3"]})`, 47 47 }, 48 48 content: { 49 - gap: spacing["2"], 49 + gap: gap["2"], 50 50 alignItems: "center", 51 51 display: "flex", 52 52 flexGrow: 1, ··· 78 78 79 79 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 80 80 ":is(*) svg": { 81 - height: spacing["3"], 82 - width: spacing["3"], 81 + height: sizeSpace["3"], 82 + width: sizeSpace["3"], 83 83 }, 84 84 }, 85 85 addon: { 86 - marginBottom: `calc(${spacing["2"]} * -1)`, 87 - marginTop: `calc(${spacing["2"]} * -1)`, 86 + marginBottom: `calc(${sizeSpace["2"]} * -1)`, 87 + marginTop: `calc(${sizeSpace["2"]} * -1)`, 88 88 }, 89 89 dragButtonWrapper: { 90 90 opacity: { ··· 107 107 display: "flex", 108 108 justifyContent: "center", 109 109 110 - height: spacing["8"], 111 - width: spacing["8"], 110 + height: sizeSpace["8"], 111 + width: sizeSpace["8"], 112 112 }, 113 113 }); 114 114
+1 -1
packages/hip-ui/src/components/tree/tree-config.ts
··· 4 4 name: "tree", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 - "../theme/spacing.stylex.tsx", 7 + "../theme/semantic-spacing.stylex.tsx", 8 8 "../theme/radius.stylex.tsx", 9 9 "../theme/semantic-color.stylex.tsx", 10 10 "../theme/typography.stylex.tsx",
+20 -20
packages/hip-ui/src/components/typography/index.tsx
··· 20 20 import { uiColor } from "../theme/color.stylex"; 21 21 import { radius } from "../theme/radius.stylex"; 22 22 import { critical, ui } from "../theme/semantic-color.stylex"; 23 - import { spacing } from "../theme/spacing.stylex"; 23 + import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 24 24 import { 25 25 fontFamily, 26 26 fontSize, ··· 30 30 31 31 const styles = stylex.create({ 32 32 pre: { 33 - padding: spacing["4"], 33 + padding: sizeSpace["4"], 34 34 borderColor: uiColor.border2, 35 35 borderRadius: radius.lg, 36 36 borderStyle: "solid", ··· 38 38 39 39 cornerShape: "squircle", 40 40 position: "relative", 41 - marginBottom: spacing["8"], 42 - marginTop: spacing["8"], 41 + marginBottom: verticalSpace["8"], 42 + marginTop: verticalSpace["8"], 43 43 }, 44 44 copyButton: { 45 45 position: "absolute", 46 - right: spacing["3"], 47 - top: spacing["2.5"], 46 + right: horizontalSpace["3"], 47 + top: verticalSpace["2.5"], 48 48 }, 49 49 blockquote: { 50 - gap: spacing["5"], 50 + gap: gap["5"], 51 51 color: ui.textDim, 52 52 display: "flex", 53 53 flexDirection: "column", ··· 56 56 borderLeftStyle: "solid", 57 57 borderLeftWidth: 1, 58 58 marginBottom: 0, 59 - marginLeft: spacing["2"], 59 + marginLeft: horizontalSpace["2"], 60 60 marginRight: 0, 61 61 marginTop: 0, 62 - paddingBottom: spacing["2"], 63 - paddingLeft: spacing["4"], 64 - paddingTop: spacing["2"], 62 + paddingBottom: verticalSpace["2"], 63 + paddingLeft: horizontalSpace["4"], 64 + paddingTop: verticalSpace["2"], 65 65 }, 66 66 unorderedList: { 67 67 margin: 0, 68 - gap: spacing["3"], 68 + gap: gap["3"], 69 69 display: "flex", 70 70 flexDirection: "column", 71 71 listStyleType: "disc", 72 - paddingLeft: spacing["8"], 72 + paddingLeft: horizontalSpace["8"], 73 73 }, 74 74 orderedList: { 75 75 margin: 0, 76 - gap: spacing["3"], 76 + gap: gap["3"], 77 77 display: "flex", 78 78 flexDirection: "column", 79 79 listStyleType: "decimal", 80 - paddingLeft: spacing["8"], 80 + paddingLeft: horizontalSpace["8"], 81 81 }, 82 82 listItem: { 83 83 fontFamily: fontFamily["sans"], 84 84 fontSize: fontSize["base"], 85 85 lineHeight: lineHeight["base"], 86 - paddingLeft: spacing["1"], 86 + paddingLeft: horizontalSpace["1"], 87 87 }, 88 88 inlineCode: { 89 89 borderRadius: radius.sm, 90 90 cornerShape: "squircle", 91 91 fontSize: "0.95em", 92 92 position: "relative", 93 - paddingBottom: spacing["1"], 94 - paddingLeft: spacing["1"], 95 - paddingRight: spacing["1"], 96 - paddingTop: spacing["1"], 93 + paddingBottom: verticalSpace["1"], 94 + paddingLeft: horizontalSpace["1"], 95 + paddingRight: horizontalSpace["1"], 96 + paddingTop: verticalSpace["1"], 97 97 top: "-0.01em", 98 98 }, 99 99 underline: {
+1 -1
packages/hip-ui/src/components/typography/typography-config.ts
··· 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 "../theme/semantic-color.stylex.tsx", 8 - "../theme/spacing.stylex.tsx", 8 + "../theme/semantic-spacing.stylex.tsx", 9 9 "../theme/typography.stylex.tsx", 10 10 "../link/link-context.ts", 11 11 "../theme/types.ts",
+3 -3
packages/hip-ui/src/components/window-splitter/index.tsx
··· 17 17 import type { StyleXComponentProps } from "../theme/types"; 18 18 19 19 import { primaryColor, uiColor } from "../theme/color.stylex"; 20 - import { spacing } from "../theme/spacing.stylex"; 20 + import { size as sizeSpace } from "../theme/semantic-spacing.stylex"; 21 21 22 22 const styles = stylex.create({ 23 23 panel: { ··· 53 53 54 54 height: { 55 55 ":is([data-handle-orientation='horizontal'] *)": "100%", 56 - ":is([data-handle-orientation='vertical'] *)": spacing["2"], 56 + ":is([data-handle-orientation='vertical'] *)": sizeSpace["2"], 57 57 }, 58 58 width: { 59 - ":is([data-handle-orientation='horizontal'] *)": spacing["2"], 59 + ":is([data-handle-orientation='horizontal'] *)": sizeSpace["2"], 60 60 ":is([data-handle-orientation='vertical'] *)": "100%", 61 61 }, 62 62 },
+1 -1
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts
··· 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 "../theme/semantic-color.stylex.tsx", 8 - "../theme/spacing.stylex.tsx", 8 + "../theme/semantic-spacing.stylex.tsx", 9 9 "../theme/types.ts", 10 10 ], 11 11 dependencies: {