+1 -1

apps/docs/src/components/alert-dialog/index.tsx

reviewed

··· 41 41 display: "flex", 42 42 fontSize: fontSize["lg"], 43 43 justifyContent: "space-between", 44 44 - height: sizeSpace["6xl"], 44 44 + height: sizeSpace["3xl"], 45 45 paddingLeft: horizontalSpace["3xl"], 46 46 paddingRight: horizontalSpace["3xl"], 47 47 paddingTop: verticalSpace["md"],

+3 -3

apps/docs/src/components/alert/index.tsx

reviewed

··· 58 58 [maxBreakpoints.sm]: "auto 1fr", 59 59 }, 60 60 position: "relative", 61 61 - minHeight: sizeSpace["lg"], 61 61 + minHeight: sizeSpace["4xl"], 62 62 paddingBottom: verticalSpace["lg"], 63 63 paddingLeft: horizontalSpace["3xl"], 64 64 paddingRight: horizontalSpace["3xl"], ··· 124 124 ":is(*) svg": { 125 125 flexShrink: 0, 126 126 pointerEvents: "none", 127 127 - height: sizeSpace["3xl"], 128 128 - width: sizeSpace["3xl"], 127 127 + height: sizeSpace["lg"], 128 128 + width: sizeSpace["lg"], 129 129 }, 130 130 }, 131 131 action: {

+9 -9

apps/docs/src/components/avatar/index.tsx

reviewed

··· 41 41 default: radius.sm, 42 42 [mediaQueries.supportsSquircle]: radius["3xl"], 43 43 }, 44 44 - height: sizeSpace["4xl"], 45 45 - width: sizeSpace["4xl"], 44 44 + height: sizeSpace["xl"], 45 45 + width: sizeSpace["xl"], 46 46 }, 47 47 wrapperMd: { 48 48 borderRadius: { 49 49 default: radius.md, 50 50 [mediaQueries.supportsSquircle]: radius["3xl"], 51 51 }, 52 52 - height: sizeSpace["6xl"], 53 53 - width: sizeSpace["6xl"], 52 52 + height: sizeSpace["3xl"], 53 53 + width: sizeSpace["3xl"], 54 54 }, 55 55 wrapperLg: { 56 56 borderRadius: { 57 57 default: radius.lg, 58 58 [mediaQueries.supportsSquircle]: radius["3xl"], 59 59 }, 60 60 - height: sizeSpace["lg"], 61 61 - width: sizeSpace["lg"], 60 60 + height: sizeSpace["4xl"], 61 61 + width: sizeSpace["4xl"], 62 62 }, 63 63 wrapperXl: { 64 64 borderRadius: { 65 65 default: radius.xl, 66 66 [mediaQueries.supportsSquircle]: radius["3xl"], 67 67 }, 68 68 - height: sizeSpace["8xl"], 69 69 - width: sizeSpace["8xl"], 68 68 + height: sizeSpace["5xl"], 69 69 + width: sizeSpace["5xl"], 70 70 }, 71 71 image: { 72 72 objectFit: "cover", ··· 108 108 paddingBottom: 0, 109 109 paddingLeft: 0, 110 110 paddingRight: 0, 111 111 - paddingTop: 0, 112 111 borderWidth: 0, 112 112 + paddingTop: 0, 113 113 backgroundColor: "transparent", 114 114 cursor: "pointer", 115 115 display: "inline-block",

+6 -6

apps/docs/src/components/badge/index.tsx

reviewed

··· 37 37 sm: { 38 38 gap: gap["xs"], 39 39 fontSize: fontSize["xs"], 40 40 - height: sizeSpace["3xl"], 40 40 + height: sizeSpace["lg"], 41 41 paddingBottom: verticalSpace["xxs"], 42 42 paddingLeft: horizontalSpace["lg"], 43 43 paddingRight: horizontalSpace["lg"], ··· 47 47 ":is(*) svg": { 48 48 flexShrink: 0, 49 49 pointerEvents: "none", 50 50 - height: sizeSpace["md"], 51 51 - width: sizeSpace["md"], 50 50 + height: sizeSpace["xxs"], 51 51 + width: sizeSpace["xxs"], 52 52 }, 53 53 }, 54 54 md: { 55 55 gap: gap["sm"], 56 56 fontSize: fontSize["sm"], 57 57 - height: sizeSpace["4xl"], 57 57 + height: sizeSpace["xl"], 58 58 paddingBottom: verticalSpace["xxs"], 59 59 paddingLeft: horizontalSpace["2xl"], 60 60 paddingRight: horizontalSpace["2xl"], ··· 64 64 ":is(*) svg": { 65 65 flexShrink: 0, 66 66 pointerEvents: "none", 67 67 - height: sizeSpace["2xl"], 68 68 - width: sizeSpace["2xl"], 67 67 + height: sizeSpace["md"], 68 68 + width: sizeSpace["md"], 69 69 }, 70 70 }, 71 71 });

+1 -1

apps/docs/src/components/breadcrumbs/index.tsx

reviewed

··· 25 25 paddingBottom: 0, 26 26 paddingLeft: 0, 27 27 paddingRight: 0, 28 28 - paddingTop: 0, 29 28 gap: gap["xs"], 29 29 + paddingTop: 0, 30 30 listStyle: "none", 31 31 alignItems: "center", 32 32 display: "flex",

+1 -1

apps/docs/src/components/card/index.tsx

reviewed

··· 107 107 marginBottom: 0, 108 108 marginLeft: 0, 109 109 marginRight: 0, 110 110 - marginTop: 0, 111 110 fontSize: fontSize["sm"], 111 111 + marginTop: 0, 112 112 fontWeight: fontWeight["normal"], 113 113 lineHeight: lineHeight["sm"], 114 114 },

+2 -2

apps/docs/src/components/checkbox/index.tsx

reviewed

··· 46 46 borderWidth: 2, 47 47 48 48 cornerShape: "squircle", 49 49 - height: sizeSpace["2xl"], 50 50 - width: sizeSpace["2xl"], 49 49 + height: sizeSpace["md"], 50 50 + width: sizeSpace["md"], 51 51 }, 52 52 checked: { 53 53 color: "white",

+10 -10

apps/docs/src/components/color-area/index.tsx

reviewed

··· 36 36 ":is([data-disabled])": "grayscale(1)", 37 37 }, 38 38 height: { 39 39 - default: sizeSpace["2xl"], 40 40 - ":is([data-focus-visible])": sizeSpace["4xl"], 41 41 - ":is([data-size=lg] *)": sizeSpace["4xl"], 42 42 - ":is([data-size=md] *)": sizeSpace["2xl"], 43 43 - ":is([data-size=sm] *)": sizeSpace["md"], 39 39 + default: sizeSpace["md"], 40 40 + ":is([data-focus-visible])": sizeSpace["xl"], 41 41 + ":is([data-size=lg] *)": sizeSpace["xl"], 42 42 + ":is([data-size=md] *)": sizeSpace["md"], 43 43 + ":is([data-size=sm] *)": sizeSpace["xxs"], 44 44 }, 45 45 width: { 46 46 - default: sizeSpace["2xl"], 47 47 - ":is([data-focus-visible])": sizeSpace["4xl"], 48 48 - ":is([data-size=lg] *)": sizeSpace["4xl"], 49 49 - ":is([data-size=md] *)": sizeSpace["2xl"], 50 50 - ":is([data-size=sm] *)": sizeSpace["md"], 46 46 + default: sizeSpace["md"], 47 47 + ":is([data-focus-visible])": sizeSpace["xl"], 48 48 + ":is([data-size=lg] *)": sizeSpace["xl"], 49 49 + ":is([data-size=md] *)": sizeSpace["md"], 50 50 + ":is([data-size=sm] *)": sizeSpace["xxs"], 51 51 }, 52 52 }, 53 53 aspectRatio: (aspectRatio: number) => ({

+1 -1

apps/docs/src/components/color-picker/index.tsx

reviewed

··· 53 53 paddingBottom: 0, 54 54 paddingLeft: 0, 55 55 paddingRight: 0, 56 56 - paddingTop: 0, 57 56 borderWidth: 0, 57 57 + paddingTop: 0, 58 58 gap: { 59 59 default: gap["md"], 60 60 ":is([data-size=sm])": sizeSpace["xxs"],

+3 -3

apps/docs/src/components/color-slider/index.tsx

reviewed

··· 53 53 borderRadius: radius.full, 54 54 cornerShape: "squircle", 55 55 height: { 56 56 - ":is([data-size=lg] *)": sizeSpace["4xl"], 57 57 - ":is([data-size=md] *)": sizeSpace["2xl"], 58 58 - ":is([data-size=sm] *)": sizeSpace["md"], 56 56 + ":is([data-size=lg] *)": sizeSpace["xl"], 57 57 + ":is([data-size=md] *)": sizeSpace["md"], 58 58 + ":is([data-size=sm] *)": sizeSpace["xxs"], 59 59 }, 60 60 width: "100%", 61 61 },

+6 -6

apps/docs/src/components/color-swatch/index.tsx

reviewed

··· 23 23 }, 24 24 swatchSm: { 25 25 borderRadius: radius.xs, 26 26 - height: sizeSpace["2xl"], 27 27 - width: sizeSpace["2xl"], 26 26 + height: sizeSpace["md"], 27 27 + width: sizeSpace["md"], 28 28 }, 29 29 swatchMd: { 30 30 borderRadius: radius.sm, 31 31 - height: sizeSpace["4xl"], 32 32 - width: sizeSpace["4xl"], 31 31 + height: sizeSpace["xl"], 32 32 + width: sizeSpace["xl"], 33 33 }, 34 34 swatchLg: { 35 35 borderRadius: radius.md, 36 36 - height: sizeSpace["6xl"], 37 37 - width: sizeSpace["6xl"], 36 36 + height: sizeSpace["3xl"], 37 37 + width: sizeSpace["3xl"], 38 38 }, 39 39 circle: { 40 40 borderRadius: {

+3 -3

apps/docs/src/components/color-wheel/index.tsx

reviewed

··· 24 24 gridArea: "track", 25 25 borderRadius: radius.full, 26 26 height: { 27 27 - ":is([data-size=lg] *)": sizeSpace["4xl"], 28 28 - ":is([data-size=md] *)": sizeSpace["2xl"], 29 29 - ":is([data-size=sm] *)": sizeSpace["md"], 27 27 + ":is([data-size=lg] *)": sizeSpace["xl"], 28 28 + ":is([data-size=md] *)": sizeSpace["md"], 29 29 + ":is([data-size=sm] *)": sizeSpace["xxs"], 30 30 }, 31 31 width: "100%", 32 32

-1

apps/docs/src/components/command-menu/index.tsx

reviewed

··· 21 21 import { Separator } from "../separator"; 22 22 import { 23 23 horizontalSpace, 24 24 - size as sizeSpace, 25 24 verticalSpace, 26 25 } from "../theme/semantic-spacing.stylex"; 27 26 import { useDialogStyles } from "../theme/useDialogStyles";

-1

apps/docs/src/components/content/index.tsx

reviewed

··· 4 4 5 5 import { 6 6 horizontalSpace, 7 7 - size as sizeSpace, 8 7 verticalSpace, 9 8 } from "../theme/semantic-spacing.stylex"; 10 9 import { lineHeight } from "../theme/typography.stylex";

+1 -1

apps/docs/src/components/dialog/index.tsx

reviewed

··· 39 39 justifyContent: "space-between", 40 40 position: "sticky", 41 41 zIndex: 1, 42 42 - height: sizeSpace["6xl"], 42 42 + height: sizeSpace["3xl"], 43 43 paddingBottom: verticalSpace["md"], 44 44 paddingLeft: horizontalSpace["3xl"], 45 45 paddingRight: horizontalSpace["3xl"],

+1 -1

apps/docs/src/components/disclosure-group/index.tsx

reviewed

··· 20 20 marginBottom: 0, 21 21 marginLeft: 0, 22 22 marginRight: 0, 23 23 - marginTop: 0, 24 23 borderWidth: 0, 24 24 + marginTop: 0, 25 25 backgroundColor: uiColor.border2, 26 26 height: "1px", 27 27 width: "100%",

+17 -17

apps/docs/src/components/disclosure/index.tsx

reviewed

··· 30 30 }, 31 31 title: { 32 32 paddingBottom: { 33 33 - ":is([data-size=lg] *)": sizeSpace["2xl"], 34 34 - ":is([data-size=md] *)": sizeSpace["md"], 33 33 + ":is([data-size=lg] *)": sizeSpace["md"], 34 34 + ":is([data-size=md] *)": sizeSpace["xxs"], 35 35 ":is([data-size=sm] *)": sizeSpace["sm"], 36 36 }, 37 37 paddingLeft: { 38 38 - ":is([data-size=lg] *)": sizeSpace["2xl"], 39 39 - ":is([data-size=md] *)": sizeSpace["md"], 38 38 + ":is([data-size=lg] *)": sizeSpace["md"], 39 39 + ":is([data-size=md] *)": sizeSpace["xxs"], 40 40 ":is([data-size=sm] *)": sizeSpace["sm"], 41 41 }, 42 42 paddingRight: { 43 43 - ":is([data-size=lg] *)": sizeSpace["2xl"], 44 44 - ":is([data-size=md] *)": sizeSpace["md"], 43 43 + ":is([data-size=lg] *)": sizeSpace["md"], 44 44 + ":is([data-size=md] *)": sizeSpace["xxs"], 45 45 ":is([data-size=sm] *)": sizeSpace["sm"], 46 46 }, 47 47 + borderRadius: radius.lg, 47 48 paddingTop: { 48 48 - ":is([data-size=lg] *)": sizeSpace["2xl"], 49 49 - ":is([data-size=md] *)": sizeSpace["md"], 49 49 + ":is([data-size=lg] *)": sizeSpace["md"], 50 50 + ":is([data-size=md] *)": sizeSpace["xxs"], 50 51 ":is([data-size=sm] *)": sizeSpace["sm"], 51 52 }, 52 52 - borderRadius: radius.lg, 53 53 borderWidth: 0, 54 54 55 55 cornerShape: "squircle", ··· 112 112 }, 113 113 panelContent: { 114 114 paddingBottom: { 115 115 - ":is([data-size=lg] *)": sizeSpace["2xl"], 116 116 - ":is([data-size=md] *)": sizeSpace["md"], 115 115 + ":is([data-size=lg] *)": sizeSpace["md"], 116 116 + ":is([data-size=md] *)": sizeSpace["xxs"], 117 117 ":is([data-size=sm] *)": sizeSpace["sm"], 118 118 }, 119 119 paddingLeft: { 120 120 - ":is([data-size=lg] *)": sizeSpace["2xl"], 121 121 - ":is([data-size=md] *)": sizeSpace["md"], 120 120 + ":is([data-size=lg] *)": sizeSpace["md"], 121 121 + ":is([data-size=md] *)": sizeSpace["xxs"], 122 122 ":is([data-size=sm] *)": sizeSpace["sm"], 123 123 }, 124 124 paddingRight: { 125 125 - ":is([data-size=lg] *)": sizeSpace["2xl"], 126 126 - ":is([data-size=md] *)": sizeSpace["md"], 125 125 + ":is([data-size=lg] *)": sizeSpace["md"], 126 126 + ":is([data-size=md] *)": sizeSpace["xxs"], 127 127 ":is([data-size=sm] *)": sizeSpace["sm"], 128 128 }, 129 129 paddingTop: { 130 130 - ":is([data-size=lg] *)": sizeSpace["2xl"], 131 131 - ":is([data-size=md] *)": sizeSpace["md"], 130 130 + ":is([data-size=lg] *)": sizeSpace["md"], 131 131 + ":is([data-size=md] *)": sizeSpace["xxs"], 132 132 ":is([data-size=sm] *)": sizeSpace["sm"], 133 133 }, 134 134 },

+3 -3

apps/docs/src/components/drawer/index.tsx

reviewed

··· 88 88 }, 89 89 maxHeight: { 90 90 ":is([data-direction=right], [data-direction=left])": "100vh", 91 91 - ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["6xl"]})`, 91 91 + ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["3xl"]})`, 92 92 }, 93 93 maxWidth: { 94 94 - ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["6xl"]})`, 94 94 + ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["3xl"]})`, 95 95 ":is([data-direction=top], [data-direction=bottom])": "100vw", 96 96 }, 97 97 width: { ··· 130 130 alignItems: "center", 131 131 display: "flex", 132 132 justifyContent: "space-between", 133 133 - height: sizeSpace["6xl"], 133 133 + height: sizeSpace["3xl"], 134 134 paddingBottom: verticalSpace["md"], 135 135 paddingLeft: horizontalSpace["3xl"], 136 136 paddingRight: horizontalSpace["3xl"],

-1

apps/docs/src/components/editable-text/index.tsx

reviewed

··· 13 13 import { radius } from "../theme/radius.stylex"; 14 14 import { 15 15 horizontalSpace, 16 16 - size as sizeSpace, 17 16 verticalSpace, 18 17 } from "../theme/semantic-spacing.stylex"; 19 18

+8 -8

apps/docs/src/components/empty-state/index.tsx

reviewed

··· 17 17 const styles = stylex.create({ 18 18 emptyState: { 19 19 "--empty-state-image-size": { 20 20 - ":is([data-empty-state-size=lg])": sizeSpace["10xl"], 21 21 - ":is([data-empty-state-size=md])": sizeSpace["8xl"], 22 22 - ":is([data-empty-state-size=sm])": sizeSpace["lg"], 20 20 + ":is([data-empty-state-size=lg])": sizeSpace["7xl"], 21 21 + ":is([data-empty-state-size=md])": sizeSpace["5xl"], 22 22 + ":is([data-empty-state-size=sm])": sizeSpace["4xl"], 23 23 }, 24 24 gridTemplateAreas: { 25 25 // eslint-disable-next-line @stylexjs/valid-styles ··· 50 50 }, 51 51 alignItems: "center", 52 52 columnGap: { 53 53 - ":is([data-empty-state-size=sm])": sizeSpace["2xl"], 53 53 + ":is([data-empty-state-size=sm])": sizeSpace["md"], 54 54 }, 55 55 display: "grid", 56 56 fontFamily: fontFamily["sans"], ··· 66 66 ":is([data-empty-state-size=sm])": "start", 67 67 }, 68 68 rowGap: { 69 69 - ":is([data-empty-state-size=lg])": sizeSpace["4xl"], 70 70 - ":is([data-empty-state-size=md])": sizeSpace["2xl"], 69 69 + ":is([data-empty-state-size=lg])": sizeSpace["xl"], 70 70 + ":is([data-empty-state-size=md])": sizeSpace["md"], 71 71 ":is([data-empty-state-size=sm])": sizeSpace["sm"], 72 72 }, 73 73 textAlign: "center", ··· 86 86 marginBottom: 0, 87 87 marginLeft: 0, 88 88 marginRight: 0, 89 89 - marginTop: 0, 90 89 fontSize: { 91 90 ":is([data-empty-state-size='lg'] *)": fontSize["2xl"], 92 91 ":is([data-empty-state-size='md'] *)": fontSize["xl"], 93 92 ":is([data-empty-state-size='sm'] *)": fontSize["lg"], 94 93 }, 94 94 + marginTop: 0, 95 95 fontWeight: fontWeight["semibold"], 96 96 }, 97 97 description: { ··· 99 99 marginBottom: 0, 100 100 marginLeft: 0, 101 101 marginRight: 0, 102 102 - marginTop: 0, 103 102 fontSize: fontSize["sm"], 103 103 + marginTop: 0, 104 104 fontWeight: fontWeight["normal"], 105 105 maxWidth: { 106 106 ":is([data-empty-state-size=lg])": "480px",

+1 -1

apps/docs/src/components/file-drop-zone/index.tsx

reviewed

··· 40 40 paddingBottom: verticalSpace["2xl"], 41 41 paddingLeft: horizontalSpace["2xl"], 42 42 paddingRight: horizontalSpace["2xl"], 43 43 - paddingTop: verticalSpace["2xl"], 44 43 borderColor: { 45 44 default: uiColor.border3, 46 45 ":is([data-drop-target])": primaryColor.solid1, 47 46 }, 47 47 + paddingTop: verticalSpace["2xl"], 48 48 borderRadius: radius.lg, 49 49 borderStyle: { 50 50 default: "dashed",

+8 -9

apps/docs/src/components/footer/index.tsx

reviewed

··· 39 39 borderWidth: 0, 40 40 gap: { 41 41 default: gap["6xl"], 42 42 - [containerBreakpoints.sm]: sizeSpace["2xl"], 43 43 - ":is([data-footer-centered] *)": `${sizeSpace["6xl"]} !important`, 42 42 + [containerBreakpoints.sm]: sizeSpace["md"], 43 43 + ":is([data-footer-centered] *)": `${sizeSpace["3xl"]} !important`, 44 44 }, 45 45 alignItems: { 46 46 default: "stretch", ··· 94 94 marginBottom: 0, 95 95 marginLeft: 0, 96 96 marginRight: 0, 97 97 - marginTop: 0, 98 97 fontSize: fontSize["sm"], 98 98 + marginTop: 0, 99 99 fontWeight: fontWeight["semibold"], 100 100 letterSpacing: "0.05em", 101 101 textTransform: "uppercase", ··· 112 112 marginBottom: 0, 113 113 marginLeft: 0, 114 114 marginRight: 0, 115 115 - marginTop: 0, 116 115 fontSize: fontSize["xs"], 116 116 + marginTop: 0, 117 117 }, 118 118 socialLinkList: { 119 119 gap: gap["2xl"], ··· 124 124 socialLinkItem: { 125 125 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 126 126 ":is(*) svg": { 127 127 - height: sizeSpace["3xl"], 128 128 - width: sizeSpace["3xl"], 127 127 + height: sizeSpace["lg"], 128 128 + width: sizeSpace["lg"], 129 129 }, 130 130 textDecoration: "none", 131 131 alignItems: "center", ··· 177 177 marginBottom: 0, 178 178 marginLeft: 0, 179 179 marginRight: 0, 180 180 - marginTop: 0, 181 180 fontSize: fontSize["sm"], 181 181 + marginTop: 0, 182 182 fontWeight: fontWeight["semibold"], 183 183 }, 184 184 subscribeDescription: { 185 185 gridArea: "description", 186 186 - marginBottom: 0, 187 186 marginLeft: 0, 188 187 marginRight: 0, 189 189 - marginTop: 0, 190 188 fontSize: fontSize["sm"], 189 189 + marginTop: 0, 191 190 marginBottom: verticalSpace["md"], 192 191 }, 193 192 subscribeInput: {

-1

apps/docs/src/components/header-layout/index.tsx

reviewed

··· 8 8 import { containerBreakpoints } from "../theme/media-queries.stylex"; 9 9 import { 10 10 horizontalSpace, 11 11 - size as sizeSpace, 12 11 verticalSpace, 13 12 } from "../theme/semantic-spacing.stylex"; 14 13

+6 -6

apps/docs/src/components/icon-button/index.tsx

reviewed

··· 15 15 const styles = stylex.create({ 16 16 button: { 17 17 height: { 18 18 - ":is([data-size=lg])": sizeSpace["lg"], 19 19 - ":is([data-size=md])": sizeSpace["6xl"], 20 20 - ":is([data-size=sm])": sizeSpace["5xl"], 18 18 + ":is([data-size=lg])": sizeSpace["4xl"], 19 19 + ":is([data-size=md])": sizeSpace["3xl"], 20 20 + ":is([data-size=sm])": sizeSpace["2xl"], 21 21 }, 22 22 width: { 23 23 - ":is([data-size=lg])": sizeSpace["lg"], 24 24 - ":is([data-size=md])": sizeSpace["6xl"], 25 25 - ":is([data-size=sm])": sizeSpace["5xl"], 23 23 + ":is([data-size=lg])": sizeSpace["4xl"], 24 24 + ":is([data-size=md])": sizeSpace["3xl"], 25 25 + ":is([data-size=sm])": sizeSpace["2xl"], 26 26 }, 27 27 }, 28 28 });

+1 -1

apps/docs/src/components/image-cropper/index.tsx

reviewed

··· 58 58 paddingBottom: 0, 59 59 paddingLeft: 0, 60 60 paddingRight: 0, 61 61 - paddingTop: 0, 62 61 borderWidth: 0, 62 62 + paddingTop: 0, 63 63 overflow: "hidden", 64 64 clip: "rect(0, 0, 0, 0)", 65 65 position: "absolute",

+1 -5

apps/docs/src/components/link/index.tsx

reviewed

··· 7 7 import type { StyleXComponentProps } from "../theme/types"; 8 8 9 9 import { primaryColor, uiColor } from "../theme/color.stylex"; 10 10 - import { 11 11 - gap, 12 12 - size as sizeSpace, 13 13 - verticalSpace, 14 14 - } from "../theme/semantic-spacing.stylex"; 10 10 + import { gap, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 11 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 16 12 import { LinkContext } from "./link-context"; 17 13

+3 -3

apps/docs/src/components/listbox/index.tsx

reviewed

··· 51 51 paddingTop: verticalSpace["xs"], 52 52 53 53 height: { 54 54 - ":is([data-size=lg])": sizeSpace["7xl"], 55 55 - ":is([data-size=md])": sizeSpace["5xl"], 56 56 - ":is([data-size=sm])": sizeSpace["5xl"], 54 54 + ":is([data-size=lg])": sizeSpace["4xl"], 55 55 + ":is([data-size=md])": sizeSpace["2xl"], 56 56 + ":is([data-size=sm])": sizeSpace["2xl"], 57 57 }, 58 58 }, 59 59 separator: {

+3 -3

apps/docs/src/components/menubar/index.tsx

reviewed

··· 74 74 transitionDuration: animationDuration.fast, 75 75 transitionProperty: "background-color", 76 76 height: { 77 77 - ":is([data-size=lg] *)": sizeSpace["lg"], 78 78 - ":is([data-size=md] *)": sizeSpace["6xl"], 79 79 - ":is([data-size=sm] *)": sizeSpace["4xl"], 77 77 + ":is([data-size=lg] *)": sizeSpace["4xl"], 78 78 + ":is([data-size=md] *)": sizeSpace["3xl"], 79 79 + ":is([data-size=sm] *)": sizeSpace["xl"], 80 80 }, 81 81 paddingLeft: { 82 82 ":is([data-size=lg] *)": horizontalSpace["xl"],

+1 -1

apps/docs/src/components/meter/index.tsx

reviewed

··· 49 49 ":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`, 50 50 }, 51 51 height: { 52 52 - ":is([data-size=lg] *)": sizeSpace["md"], 52 52 + ":is([data-size=lg] *)": sizeSpace["xxs"], 53 53 ":is([data-size=md] *)": sizeSpace["sm"], 54 54 ":is([data-size=sm] *)": sizeSpace["xxs"], 55 55 },

+7 -7

apps/docs/src/components/navbar/Navbar.tsx

reviewed

··· 82 82 alignItems: "center", 83 83 boxSizing: "border-box", 84 84 columnGap: { 85 85 - default: sizeSpace["2xl"], 86 86 - [containerBreakpoints.sm]: sizeSpace["6xl"], 85 85 + default: sizeSpace["md"], 86 86 + [containerBreakpoints.sm]: sizeSpace["3xl"], 87 87 }, 88 88 display: "grid", 89 89 gridTemplateColumns: { ··· 100 100 ":is([data-navbar-open]):has([data-navbar-action])": `min-content min-content min-content min-content`, 101 101 }, 102 102 rowGap: { 103 103 - default: sizeSpace["2xl"], 104 104 - [containerBreakpoints.sm]: sizeSpace["6xl"], 103 103 + default: sizeSpace["md"], 104 104 + [containerBreakpoints.sm]: sizeSpace["3xl"], 105 105 }, 106 106 marginLeft: "auto", 107 107 marginRight: "auto", 108 108 maxWidth: "var(--page-content-max-width)", 109 109 minHeight: { 110 110 - default: sizeSpace["8xl"], 110 110 + default: sizeSpace["5xl"], 111 111 ":is([data-navbar-open])": "100%", 112 112 - [containerBreakpoints.sm]: sizeSpace["8xl"], 112 112 + [containerBreakpoints.sm]: sizeSpace["5xl"], 113 113 }, 114 114 paddingBottom: { 115 115 default: verticalSpace["xl"], ··· 181 181 gridArea: "navigation", 182 182 gap: { 183 183 default: gap["5xl"], 184 184 - [containerBreakpoints.sm]: sizeSpace["6xl"], 184 184 + [containerBreakpoints.sm]: sizeSpace["3xl"], 185 185 }, 186 186 alignItems: { 187 187 default: "start",

+7 -7

apps/docs/src/components/navbar/NavbarMenu.tsx

reviewed

··· 15 15 import { radius } from "../theme/radius.stylex"; 16 16 import { 17 17 gap, 18 18 + horizontalSpace, 18 19 size as sizeSpace, 19 20 verticalSpace, 20 20 - horizontalSpace, 21 21 } from "../theme/semantic-spacing.stylex"; 22 22 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 23 23 ··· 26 26 paddingBottom: verticalSpace["sm"], 27 27 paddingLeft: horizontalSpace["sm"], 28 28 paddingRight: horizontalSpace["sm"], 29 29 - paddingTop: verticalSpace["sm"], 30 29 borderRadius: radius.md, 30 30 + paddingTop: verticalSpace["sm"], 31 31 textDecoration: "none", 32 32 alignItems: "center", 33 33 backgroundColor: { ··· 66 66 paddingBottom: verticalSpace["sm"], 67 67 paddingLeft: horizontalSpace["sm"], 68 68 paddingRight: horizontalSpace["sm"], 69 69 - paddingTop: verticalSpace["sm"], 70 69 borderRadius: radius.md, 70 70 + paddingTop: verticalSpace["sm"], 71 71 alignItems: "center", 72 72 backgroundColor: { 73 73 default: uiColor.component2, ··· 76 76 color: uiColor.text1, 77 77 display: "flex", 78 78 justifyContent: "center", 79 79 - height: sizeSpace["6xl"], 80 80 - width: sizeSpace["6xl"], 79 79 + height: sizeSpace["3xl"], 80 80 + width: sizeSpace["3xl"], 81 81 82 82 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 83 83 ":is(*) svg": { 84 84 - height: sizeSpace["4xl"], 85 85 - width: sizeSpace["4xl"], 84 84 + height: sizeSpace["xl"], 85 85 + width: sizeSpace["xl"], 86 86 }, 87 87 }, 88 88 menuItemLabel: {

+3 -3

apps/docs/src/components/number-field/index.tsx

reviewed

··· 96 96 paddingBottom: 0, 97 97 paddingLeft: 0, 98 98 paddingRight: 0, 99 99 - paddingTop: 0, 100 99 alignItems: "center", 100 100 + paddingTop: 0, 101 101 aspectRatio: 1, 102 102 display: "flex", 103 103 flexGrow: 1, ··· 114 114 ":is(*) svg": { 115 115 flexShrink: 0, 116 116 pointerEvents: "none", 117 117 - height: sizeSpace["2xl"], 118 118 - width: sizeSpace["2xl"], 117 117 + height: sizeSpace["md"], 118 118 + width: sizeSpace["md"], 119 119 }, 120 120 121 121 color: {

+5 -5

apps/docs/src/components/page/Page.tsx

reviewed

··· 68 68 default: verticalSpace["4xl"], 69 69 ":is([data-sticky-header=true] *)": 0, 70 70 }, 71 71 - minHeight: sizeSpace["6xl"], 71 71 + minHeight: sizeSpace["3xl"], 72 72 }, 73 73 }); 74 74 ··· 106 106 default: verticalSpace["6xl"], 107 107 ":is([data-sticky-header=true] *)": 0, 108 108 }, 109 109 - minHeight: sizeSpace["6xl"], 109 109 + minHeight: sizeSpace["3xl"], 110 110 paddingBottom: verticalSpace["3xl"], 111 111 paddingTop: verticalSpace["3xl"], 112 112 }, ··· 149 149 default: gap["xs"], 150 150 [breakpoints.sm]: sizeSpace["sm"], 151 151 }, 152 152 - minHeight: sizeSpace["6xl"], 152 152 + minHeight: sizeSpace["3xl"], 153 153 }, 154 154 icon: { 155 155 gridArea: "icon", ··· 162 162 color: primaryColor.textContrast, 163 163 display: "flex", 164 164 justifyContent: "center", 165 165 - height: sizeSpace["xl"], 166 166 - width: sizeSpace["xl"], 165 165 + height: sizeSpace["4xl"], 166 166 + width: sizeSpace["4xl"], 167 167 }, 168 168 }); 169 169

+1 -1

apps/docs/src/components/progress-bar/index.tsx

reviewed

··· 42 42 width: "100%", 43 43 44 44 height: { 45 45 - ":is([data-size=lg] *)": sizeSpace["md"], 45 45 + ":is([data-size=lg] *)": sizeSpace["xxs"], 46 46 ":is([data-size=md] *)": sizeSpace["sm"], 47 47 ":is([data-size=sm] *)": sizeSpace["xxs"], 48 48 },

+3 -3

apps/docs/src/components/progress-circle/index.tsx

reviewed

··· 37 37 38 38 "--progress-border-width": sizeSpace["xxs"], 39 39 "--progress-size": { 40 40 - ":is([data-size=lg] *)": sizeSpace["lg"], 41 41 - ":is([data-size=md] *)": sizeSpace["6xl"], 42 42 - ":is([data-size=sm] *)": sizeSpace["2xl"], 40 40 + ":is([data-size=lg] *)": sizeSpace["4xl"], 41 41 + ":is([data-size=md] *)": sizeSpace["3xl"], 42 42 + ":is([data-size=sm] *)": sizeSpace["md"], 43 43 }, 44 44 }, 45 45 track: {

+2 -2

apps/docs/src/components/radio/index.tsx

reviewed

··· 57 57 borderRadius: radius.full, 58 58 borderWidth: 2, 59 59 position: "relative", 60 60 - height: sizeSpace["2xl"], 61 61 - width: sizeSpace["2xl"], 60 60 + height: sizeSpace["md"], 61 61 + width: sizeSpace["md"], 62 62 63 63 transitionDuration: animationDuration.fast, 64 64 transitionProperty: {

+5 -5

apps/docs/src/components/segmented-control/index.tsx

reviewed

··· 44 44 boxSizing: "border-box", 45 45 display: "flex", 46 46 height: { 47 47 - ":is([data-size=lg])": sizeSpace["7xl"], 48 48 - ":is([data-size=md])": sizeSpace["6xl"], 49 49 - ":is([data-size=sm])": sizeSpace["5xl"], 47 47 + ":is([data-size=lg])": sizeSpace["4xl"], 48 48 + ":is([data-size=md])": sizeSpace["3xl"], 49 49 + ":is([data-size=sm])": sizeSpace["2xl"], 50 50 }, 51 51 }, 52 52 small: { ··· 92 92 ":is(*) svg": { 93 93 flexShrink: 0, 94 94 pointerEvents: "none", 95 95 - height: sizeSpace["2xl"], 96 96 - width: sizeSpace["2xl"], 95 95 + height: sizeSpace["md"], 96 96 + width: sizeSpace["md"], 97 97 }, 98 98 }, 99 99 /* eslint-enable @stylexjs/sort-keys */

+1 -1

apps/docs/src/components/separator/index.tsx

reviewed

··· 12 12 marginBottom: 0, 13 13 marginLeft: 0, 14 14 marginRight: 0, 15 15 - marginTop: 0, 16 15 borderWidth: 0, 16 16 + marginTop: 0, 17 17 backgroundColor: uiColor.component3, 18 18 height: { 19 19 default: "1px",

-1

apps/docs/src/components/sidebar-layout/index.tsx

reviewed

··· 11 11 import { containerBreakpoints } from "../theme/media-queries.stylex"; 12 12 import { 13 13 horizontalSpace, 14 14 - size as sizeSpace, 15 14 verticalSpace, 16 15 } from "../theme/semantic-spacing.stylex"; 17 16

+6 -6

apps/docs/src/components/sidebar/index.tsx

reviewed

··· 43 43 paddingLeft: horizontalSpace["5xl"], 44 44 paddingRight: horizontalSpace["3xl"], 45 45 paddingTop: verticalSpace["5xl"], 46 46 - width: sizeSpace["14xl"], 46 46 + width: sizeSpace["11xl"], 47 47 }, 48 48 sidebarHeader: { 49 49 alignItems: "center", ··· 58 58 textDecoration: "none", 59 59 }, 60 60 sidebarSectionTitle: { 61 61 - height: sizeSpace["4xl"], 61 61 + height: sizeSpace["xl"], 62 62 paddingLeft: horizontalSpace["xl"], 63 63 paddingRight: horizontalSpace["xl"], 64 64 paddingTop: { ··· 73 73 paddingBottom: 0, 74 74 paddingLeft: 0, 75 75 paddingRight: 0, 76 76 - paddingTop: 0, 77 76 gap: gap["xs"], 77 77 + paddingTop: 0, 78 78 display: "flex", 79 79 flexDirection: "column", 80 80 }, ··· 103 103 [mediaQueries.reducedMotion]: "none", 104 104 }, 105 105 transitionTimingFunction: "ease-in-out", 106 106 - height: sizeSpace["6xl"], 106 106 + height: sizeSpace["3xl"], 107 107 paddingLeft: horizontalSpace["xl"], 108 108 paddingRight: horizontalSpace["xl"], 109 109 width: "100%", ··· 115 115 ":is([data-pressed=true])": primaryColor.component3, 116 116 }, 117 117 color: primaryColor.text2, 118 118 - scrollMarginTop: sizeSpace["2xl"], 118 118 + scrollMarginTop: sizeSpace["md"], 119 119 }, 120 120 sidebarGroupHeading: { 121 121 marginBottom: 0, ··· 131 131 paddingBottom: 0, 132 132 paddingLeft: 0, 133 133 paddingRight: 0, 134 134 - paddingTop: 0, 135 134 borderWidth: 0, 135 135 + paddingTop: 0, 136 136 gap: gap["sm"], 137 137 alignItems: "center", 138 138 backgroundColor: "transparent",

+7 -7

apps/docs/src/components/skeleton/index.tsx

reviewed

··· 60 60 cornerShape: "squircle", 61 61 }, 62 62 sizeSm: { 63 63 - height: sizeSpace["6xl"], 64 64 - width: sizeSpace["6xl"], 63 63 + height: sizeSpace["3xl"], 64 64 + width: sizeSpace["3xl"], 65 65 }, 66 66 sizeMd: { 67 67 - height: sizeSpace["xl"], 68 68 - width: sizeSpace["xl"], 67 67 + height: sizeSpace["4xl"], 68 68 + width: sizeSpace["4xl"], 69 69 }, 70 70 sizeLg: { 71 71 - height: sizeSpace["9xl"], 72 72 - width: sizeSpace["9xl"], 71 71 + height: sizeSpace["6xl"], 72 72 + width: sizeSpace["6xl"], 73 73 }, 74 74 height: (height: string | undefined) => ({ 75 75 - height: height || sizeSpace["2xl"], 75 75 + height: height || sizeSpace["md"], 76 76 }), 77 77 width: (width: string | undefined) => ({ 78 78 width: width || "100%",

+4 -4

apps/docs/src/components/slider/index.tsx

reviewed

··· 44 44 }, 45 45 position: "relative", 46 46 height: { 47 47 - ":is([data-orientation=horizontal] *)": sizeSpace["6xl"], 47 47 + ":is([data-orientation=horizontal] *)": sizeSpace["3xl"], 48 48 ":is([data-orientation=horizontal] *)::before": sizeSpace["xxs"], 49 49 ":is([data-orientation=vertical] *)": "100%", 50 50 ":is([data-orientation=vertical] *)::before": "100%", ··· 52 52 width: { 53 53 ":is([data-orientation=horizontal] *)": "100%", 54 54 ":is([data-orientation=horizontal] *)::before": "100%", 55 55 - ":is([data-orientation=vertical] *)": sizeSpace["6xl"], 55 55 + ":is([data-orientation=vertical] *)": sizeSpace["3xl"], 56 56 ":is([data-orientation=vertical] *)::before": sizeSpace["xxs"], 57 57 }, 58 58 ··· 94 94 boxShadow: shadow.md, 95 95 content: "''", 96 96 forcedColorAdjust: "none", 97 97 - height: sizeSpace["2xl"], 97 97 + height: sizeSpace["md"], 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 104 - width: sizeSpace["2xl"], 104 104 + width: sizeSpace["md"], 105 105 }, 106 106 trackInner: { 107 107 borderRadius: radius.full,

+1 -1

apps/docs/src/components/star-rating/index.tsx

reviewed

··· 41 41 paddingBottom: 0, 42 42 paddingLeft: 0, 43 43 paddingRight: 0, 44 44 - paddingTop: 0, 45 44 borderColor: "transparent", 45 45 + paddingTop: 0, 46 46 borderStyle: "none", 47 47 borderWidth: 0, 48 48 alignItems: "center",

+4 -4

apps/docs/src/components/switch/index.tsx

reviewed

··· 47 47 [mediaQueries.reducedMotion]: "none", 48 48 }, 49 49 transitionTimingFunction: "ease-in-out", 50 50 - height: sizeSpace["4xl"], 51 51 - width: sizeSpace["lg"], 50 50 + height: sizeSpace["xl"], 51 51 + width: sizeSpace["4xl"], 52 52 }, 53 53 thumb: { 54 54 borderRadius: radius.full, ··· 66 66 [mediaQueries.reducedMotion]: "none", 67 67 }, 68 68 transitionTimingFunction: "ease-in-out", 69 69 - height: sizeSpace["2xl"], 69 69 + height: sizeSpace["md"], 70 70 left: 0, 71 71 marginLeft: horizontalSpace["xs"], 72 72 marginRight: horizontalSpace["xs"], 73 73 top: "50%", 74 74 - width: sizeSpace["2xl"], 74 74 + width: sizeSpace["md"], 75 75 }, 76 76 }); 77 77

+3 -3

apps/docs/src/components/table-of-contents/index.tsx

reviewed

··· 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 import { 12 12 gap, 13 13 + horizontalSpace, 13 14 size as sizeSpace, 14 15 verticalSpace, 15 15 - horizontalSpace, 16 16 } from "../theme/semantic-spacing.stylex"; 17 17 import { fontSize } from "../theme/typography.stylex"; 18 18 ··· 44 44 marginBottom: 0, 45 45 marginLeft: 0, 46 46 marginRight: 0, 47 47 - marginTop: 0, 48 47 listStyle: "none", 48 48 + marginTop: 0, 49 49 paddingLeft: 0, 50 50 }, 51 51 item: { ··· 73 73 }, 74 74 borderLeftStyle: "solid", 75 75 borderLeftWidth: 1, 76 76 - height: sizeSpace["6xl"], 76 76 + height: sizeSpace["3xl"], 77 77 78 78 "::before": { 79 79 content: "''",

+8 -8

apps/docs/src/components/table/index.tsx

reviewed

··· 59 59 paddingBottom: 0, 60 60 paddingLeft: 0, 61 61 paddingRight: 0, 62 62 - paddingTop: 0, 63 62 borderBottomColor: uiColor.border1, 63 63 + paddingTop: 0, 64 64 borderBottomStyle: "solid", 65 65 borderBottomWidth: 1, 66 66 }, ··· 95 95 }, 96 96 textAlign: "left", 97 97 minHeight: { 98 98 - default: sizeSpace["6xl"], 99 99 - ":is([data-table-size=lg] *)": sizeSpace["xl"], 100 100 - ":is([data-table-size=md] *)": sizeSpace["lg"], 98 98 + default: sizeSpace["3xl"], 99 99 + ":is([data-table-size=lg] *)": sizeSpace["5xl"], 100 100 + ":is([data-table-size=md] *)": sizeSpace["4xl"], 101 101 }, 102 102 paddingBottom: { 103 103 default: verticalSpace["xs"], ··· 148 148 ":is([data-table-size=md] *)": `calc(${verticalSpace["sm"]} * -1)`, 149 149 }, 150 150 minHeight: { 151 151 - default: sizeSpace["6xl"], 152 152 - ":is([data-table-size=lg] *)": sizeSpace["xl"], 153 153 - ":is([data-table-size=md] *)": sizeSpace["lg"], 151 151 + default: sizeSpace["3xl"], 152 152 + ":is([data-table-size=lg] *)": sizeSpace["5xl"], 153 153 + ":is([data-table-size=md] *)": sizeSpace["4xl"], 154 154 }, 155 155 - width: sizeSpace["md"], 155 155 + width: sizeSpace["xxs"], 156 156 }, 157 157 resizerLine: { 158 158 backgroundColor: {

+24 -24

apps/docs/src/components/tabs/index.tsx

reviewed

··· 77 77 }, 78 78 tab: { 79 79 paddingBottom: { 80 80 - ":is([data-size=lg] *)": sizeSpace["2xl"], 81 81 - ":is([data-size=md] *)": sizeSpace["md"], 80 80 + ":is([data-size=lg] *)": sizeSpace["md"], 81 81 + ":is([data-size=md] *)": sizeSpace["xxs"], 82 82 ":is([data-size=sm] *)": sizeSpace["sm"], 83 83 }, 84 84 paddingLeft: { 85 85 - ":is([data-size=lg] *)": sizeSpace["3xl"], 86 86 - ":is([data-size=md] *)": sizeSpace["2xl"], 87 87 - ":is([data-size=sm] *)": sizeSpace["md"], 85 85 + ":is([data-size=lg] *)": sizeSpace["lg"], 86 86 + ":is([data-size=md] *)": sizeSpace["md"], 87 87 + ":is([data-size=sm] *)": sizeSpace["xxs"], 88 88 }, 89 89 paddingRight: { 90 90 - ":is([data-size=lg] *)": sizeSpace["3xl"], 91 91 - ":is([data-size=md] *)": sizeSpace["2xl"], 92 92 - ":is([data-size=sm] *)": sizeSpace["md"], 90 90 + ":is([data-size=lg] *)": sizeSpace["lg"], 91 91 + ":is([data-size=md] *)": sizeSpace["md"], 92 92 + ":is([data-size=sm] *)": sizeSpace["xxs"], 93 93 }, 94 94 + borderWidth: 0, 94 95 paddingTop: { 95 95 - ":is([data-size=lg] *)": sizeSpace["2xl"], 96 96 - ":is([data-size=md] *)": sizeSpace["md"], 96 96 + ":is([data-size=lg] *)": sizeSpace["md"], 97 97 + ":is([data-size=md] *)": sizeSpace["xxs"], 97 98 ":is([data-size=sm] *)": sizeSpace["sm"], 98 99 }, 99 99 - borderWidth: 0, 100 100 outline: "none", 101 101 alignItems: "center", 102 102 backgroundColor: "transparent", ··· 183 183 }, 184 184 tabPanel: { 185 185 paddingBottom: { 186 186 - ":is([data-size=lg] *)": sizeSpace["3xl"], 187 187 - ":is([data-size=md] *)": sizeSpace["2xl"], 188 188 - ":is([data-size=sm] *)": sizeSpace["md"], 186 186 + ":is([data-size=lg] *)": sizeSpace["lg"], 187 187 + ":is([data-size=md] *)": sizeSpace["md"], 188 188 + ":is([data-size=sm] *)": sizeSpace["xxs"], 189 189 }, 190 190 paddingLeft: { 191 191 - ":is([data-size=lg] *)": sizeSpace["3xl"], 192 192 - ":is([data-size=md] *)": sizeSpace["2xl"], 193 193 - ":is([data-size=sm] *)": sizeSpace["md"], 191 191 + ":is([data-size=lg] *)": sizeSpace["lg"], 192 192 + ":is([data-size=md] *)": sizeSpace["md"], 193 193 + ":is([data-size=sm] *)": sizeSpace["xxs"], 194 194 }, 195 195 paddingRight: { 196 196 - ":is([data-size=lg] *)": sizeSpace["3xl"], 197 197 - ":is([data-size=md] *)": sizeSpace["2xl"], 198 198 - ":is([data-size=sm] *)": sizeSpace["md"], 196 196 + ":is([data-size=lg] *)": sizeSpace["lg"], 197 197 + ":is([data-size=md] *)": sizeSpace["md"], 198 198 + ":is([data-size=sm] *)": sizeSpace["xxs"], 199 199 }, 200 200 + outline: "none", 200 201 paddingTop: { 201 201 - ":is([data-size=lg] *)": sizeSpace["3xl"], 202 202 - ":is([data-size=md] *)": sizeSpace["2xl"], 203 203 - ":is([data-size=sm] *)": sizeSpace["md"], 202 202 + ":is([data-size=lg] *)": sizeSpace["lg"], 203 203 + ":is([data-size=md] *)": sizeSpace["md"], 204 204 + ":is([data-size=sm] *)": sizeSpace["xxs"], 204 205 }, 205 205 - outline: "none", 206 206 fontSize: { 207 207 ":is([data-size=lg] *)": fontSize["lg"], 208 208 ":is([data-size=md] *)": fontSize["base"],

+3 -3

apps/docs/src/components/tag-group/index.tsx

reviewed

··· 85 85 paddingBottom: 0, 86 86 paddingLeft: 0, 87 87 paddingRight: 0, 88 88 - paddingTop: 0, 89 88 borderRadius: radius.full, 89 89 + paddingTop: 0, 90 90 borderWidth: 0, 91 91 alignItems: "center", 92 92 backgroundColor: { ··· 106 106 [mediaQueries.reducedMotion]: "none", 107 107 }, 108 108 transitionTimingFunction: "ease-in-out", 109 109 - height: sizeSpace["2xl"], 110 110 - width: sizeSpace["2xl"], 109 109 + height: sizeSpace["md"], 110 110 + width: sizeSpace["md"], 111 111 }, 112 112 tagText: { 113 113 // eslint-disable-next-line @stylexjs/valid-styles

+3 -3

apps/docs/src/components/text-area/index.tsx

reviewed

··· 42 42 }, 43 43 resize: "none", 44 44 minHeight: { 45 45 - ":is([data-size=lg])": sizeSpace["lg"], 46 46 - ":is([data-size=md])": sizeSpace["6xl"], 47 47 - ":is([data-size=sm])": sizeSpace["4xl"], 45 45 + ":is([data-size=lg])": sizeSpace["4xl"], 46 46 + ":is([data-size=md])": sizeSpace["3xl"], 47 47 + ":is([data-size=sm])": sizeSpace["xl"], 48 48 }, 49 49 minWidth: 0, 50 50 paddingBottom: {

+17 -20

apps/docs/src/components/theme/semantic-spacing.stylex.tsx

reviewed

··· 77 77 */ 78 78 export const size = stylex.defineVars({ 79 79 none: spacing["0"], 80 80 - xxs: spacing["1"], 81 81 - xs: spacing["1.5"], 82 82 - sm: spacing["2"], 83 83 - md: spacing["2.5"], 84 84 - lg: spacing["10"], 85 85 - xl: spacing["12"], 86 86 - "2xl": spacing["4"], 87 87 - "3xl": spacing["5"], 88 88 - "4xl": spacing["6"], 89 89 - "5xl": spacing["7"], 90 90 - "6xl": spacing["8"], 91 91 - "7xl": spacing["11"], 92 92 - "8xl": spacing["14"], 93 93 - "9xl": spacing["16"], 94 94 - "10xl": spacing["20"], 95 95 - "11xl": spacing["32"], 96 96 - "12xl": spacing["40"], 97 97 - "13xl": spacing["60"], 98 98 - "14xl": spacing["64"], 99 99 - "15xl": spacing["72"], 80 80 + xxs: spacing["2.5"], 81 81 + xs: spacing["3"], 82 82 + sm: spacing["3.5"], 83 83 + md: spacing["4"], 84 84 + lg: spacing["5"], 85 85 + xl: spacing["6"], 86 86 + "2xl": spacing["7"], 87 87 + "3xl": spacing["8"], 88 88 + "4xl": spacing["11"], 89 89 + "5xl": spacing["14"], 90 90 + "6xl": spacing["16"], 91 91 + "7xl": spacing["20"], 92 92 + "8xl": spacing["32"], 93 93 + "9xl": spacing["40"], 94 94 + "10xl": spacing["60"], 95 95 + "11xl": spacing["64"], 96 96 + "12xl": spacing["72"], 100 97 }); 101 98 102 99 // eslint-disable-next-line @stylexjs/enforce-extension

+9 -9

apps/docs/src/components/theme/typography.stylex.tsx

reviewed

··· 68 68 marginBottom: 0, 69 69 marginLeft: 0, 70 70 marginRight: 0, 71 71 - marginTop: 0, 72 71 // eslint-disable-next-line @stylexjs/valid-styles 73 72 fontFamily: fontFamily["title"], 73 73 + marginTop: 0, 74 74 fontSize: { 75 75 default: fontSize["4xl"], 76 76 [breakpoints.md]: fontSize["5xl"], ··· 89 89 marginBottom: 0, 90 90 marginLeft: 0, 91 91 marginRight: 0, 92 92 - marginTop: 0, 93 92 // eslint-disable-next-line @stylexjs/valid-styles 94 93 fontFamily: fontFamily["title"], 94 94 + marginTop: 0, 95 95 fontSize: { 96 96 default: fontSize["3xl"], 97 97 [breakpoints.md]: fontSize["4xl"], ··· 111 111 marginBottom: 0, 112 112 marginLeft: 0, 113 113 marginRight: 0, 114 114 - marginTop: 0, 115 114 // eslint-disable-next-line @stylexjs/valid-styles 116 115 fontFamily: fontFamily["title"], 116 116 + marginTop: 0, 117 117 fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] }, 118 118 // eslint-disable-next-line @stylexjs/valid-styles 119 119 fontWeight: fontWeight["semibold"], ··· 129 129 marginBottom: 0, 130 130 marginLeft: 0, 131 131 marginRight: 0, 132 132 - marginTop: 0, 133 132 // eslint-disable-next-line @stylexjs/valid-styles 134 133 fontFamily: fontFamily["title"], 134 134 + marginTop: 0, 135 135 fontSize: { default: fontSize["xl"] }, 136 136 // eslint-disable-next-line @stylexjs/valid-styles 137 137 fontWeight: fontWeight["semibold"], ··· 147 147 marginBottom: 0, 148 148 marginLeft: 0, 149 149 marginRight: 0, 150 150 - marginTop: 0, 151 150 // eslint-disable-next-line @stylexjs/valid-styles 152 151 fontFamily: fontFamily["title"], 152 152 + marginTop: 0, 153 153 fontSize: { default: fontSize["lg"] }, 154 154 // eslint-disable-next-line @stylexjs/valid-styles 155 155 fontWeight: fontWeight["semibold"], ··· 165 165 marginBottom: 0, 166 166 marginLeft: 0, 167 167 marginRight: 0, 168 168 - marginTop: 0, 169 168 // eslint-disable-next-line @stylexjs/valid-styles 170 169 fontFamily: fontFamily["sans"], 170 170 + marginTop: 0, 171 171 fontSize: { default: fontSize["base"] }, 172 172 lineHeight: lineHeight.base, 173 173 }, ··· 179 179 marginBottom: 0, 180 180 marginLeft: 0, 181 181 marginRight: 0, 182 182 - marginTop: 0, 183 182 // eslint-disable-next-line @stylexjs/valid-styles 184 183 fontFamily: fontFamily["sans"], 184 184 + marginTop: 0, 185 185 fontSize: { default: fontSize["sm"] }, 186 186 lineHeight: lineHeight.base, 187 187 }, ··· 193 193 marginBottom: 0, 194 194 marginLeft: 0, 195 195 marginRight: 0, 196 196 - marginTop: 0, 197 196 // eslint-disable-next-line @stylexjs/valid-styles 198 197 fontFamily: fontFamily["sans"], 198 198 + marginTop: 0, 199 199 fontSize: { default: fontSize["sm"] }, 200 200 // eslint-disable-next-line @stylexjs/valid-styles 201 201 fontWeight: fontWeight["semibold"], ··· 210 210 marginBottom: 0, 211 211 marginLeft: 0, 212 212 marginRight: 0, 213 213 - marginTop: 0, 214 213 // eslint-disable-next-line @stylexjs/valid-styles 215 214 fontFamily: fontFamily["sans"], 215 215 + marginTop: 0, 216 216 fontSize: { default: fontSize["xs"] }, 217 217 // eslint-disable-next-line @stylexjs/valid-styles 218 218 fontWeight: fontWeight["medium"],

+8 -8

apps/docs/src/components/theme/useButtonStyles.ts

reviewed

··· 58 58 ":is(*) svg": { 59 59 flexShrink: 0, 60 60 pointerEvents: "none", 61 61 - height: sizeSpace["2xl"], 62 62 - width: sizeSpace["2xl"], 61 61 + height: sizeSpace["md"], 62 62 + width: sizeSpace["md"], 63 63 }, 64 64 }, 65 65 small: { 66 66 fontSize: fontSize["xs"], 67 67 - height: sizeSpace["5xl"], 67 67 + height: sizeSpace["2xl"], 68 68 paddingLeft: { 69 69 default: horizontalSpace["md"], 70 70 }, ··· 74 74 ":is(*) svg": { 75 75 flexShrink: 0, 76 76 pointerEvents: "none", 77 77 - height: sizeSpace["2xl"], 78 78 - width: sizeSpace["2xl"], 77 77 + height: sizeSpace["md"], 78 78 + width: sizeSpace["md"], 79 79 }, 80 80 }, 81 81 medium: { 82 82 gap: gap["sm"], 83 83 fontSize: fontSize["sm"], 84 84 - height: sizeSpace["6xl"], 84 84 + height: sizeSpace["3xl"], 85 85 paddingLeft: { 86 86 default: horizontalSpace["xl"], 87 87 ":has(svg+*)": horizontalSpace["md"], ··· 91 91 large: { 92 92 gap: gap["md"], 93 93 fontSize: fontSize["sm"], 94 94 - height: sizeSpace["lg"], 94 94 + height: sizeSpace["4xl"], 95 95 paddingLeft: { 96 96 default: horizontalSpace["3xl"], 97 97 ":has(svg+*)": horizontalSpace["md"], ··· 101 101 xl: { 102 102 gap: gap["md"], 103 103 fontSize: fontSize["lg"], 104 104 - height: sizeSpace["xl"], 104 104 + height: sizeSpace["5xl"], 105 105 paddingLeft: { 106 106 default: horizontalSpace["4xl"], 107 107 ":has(svg+*)": horizontalSpace["2xl"],

+4 -4

apps/docs/src/components/theme/useCalendarStyles.ts

reviewed

··· 31 31 paddingBottom: verticalSpace["xxs"], 32 32 paddingLeft: horizontalSpace["xxs"], 33 33 paddingRight: horizontalSpace["xxs"], 34 34 - paddingTop: verticalSpace["xxs"], 35 34 borderRadius: radius.md, 35 35 + paddingTop: verticalSpace["xxs"], 36 36 cornerShape: "squircle", 37 37 textDecoration: { 38 38 ":is([data-unavailable])": "line-through", ··· 43 43 ":is([data-selected])": primaryColor.text2, 44 44 }, 45 45 cursor: "default", 46 46 - lineHeight: sizeSpace["6xl"], 46 46 + lineHeight: sizeSpace["3xl"], 47 47 opacity: { 48 48 ":is([data-outside-visible-range],[data-unavailable])": 0.5, 49 49 }, ··· 53 53 transitionProperty: "color", 54 54 transitionTimingFunction: "ease-in-out", 55 55 zIndex: 0, 56 56 - width: sizeSpace["6xl"], 56 56 + width: sizeSpace["3xl"], 57 57 58 58 "::before": { 59 59 inset: sizeSpace["xxs"], ··· 137 137 marginBottom: 0, 138 138 marginLeft: 0, 139 139 marginRight: 0, 140 140 - marginTop: 0, 141 140 fontSize: fontSize["lg"], 141 141 + marginTop: 0, 142 142 fontWeight: fontWeight["semibold"], 143 143 textAlign: "center", 144 144 },

+9 -9

apps/docs/src/components/theme/useInputStyles.ts

reviewed

··· 46 46 ":is(*) svg": { 47 47 flexShrink: 0, 48 48 pointerEvents: "none", 49 49 - height: sizeSpace["2xl"], 50 50 - width: sizeSpace["2xl"], 49 49 + height: sizeSpace["md"], 50 50 + width: sizeSpace["md"], 51 51 }, 52 52 }, 53 53 addonSm: { ··· 89 89 paddingBottom: 0, 90 90 paddingLeft: 0, 91 91 paddingRight: 0, 92 92 - paddingTop: 0, 93 92 borderRadius: radius.lg, 93 93 + paddingTop: 0, 94 94 borderWidth: 0, 95 95 96 96 cornerShape: "squircle", ··· 340 340 paddingRight: horizontalSpace["xl"], 341 341 }, 342 342 wrapperSizeSm: { 343 343 - height: sizeSpace["4xl"], 343 343 + height: sizeSpace["xl"], 344 344 }, 345 345 wrapperSizeMd: { 346 346 - height: sizeSpace["6xl"], 346 346 + height: sizeSpace["3xl"], 347 347 }, 348 348 wrapperSizeLg: { 349 349 - height: sizeSpace["lg"], 349 349 + height: sizeSpace["4xl"], 350 350 }, 351 351 horizontalLabel: { 352 352 gap: gap["2xl"], ··· 360 360 paddingRight: 0, 361 361 }, 362 362 horizontalLabelTextSm: { 363 363 - lineHeight: sizeSpace["4xl"], 363 363 + lineHeight: sizeSpace["xl"], 364 364 }, 365 365 horizontalLabelTextMd: { 366 366 - lineHeight: sizeSpace["6xl"], 366 366 + lineHeight: sizeSpace["3xl"], 367 367 }, 368 368 horizontalLabelTextLg: { 369 369 fontSize: fontSize["base"], 370 370 fontWeight: fontWeight["medium"], 371 371 - lineHeight: sizeSpace["lg"], 371 371 + lineHeight: sizeSpace["4xl"], 372 372 }, 373 373 label: { 374 374 paddingLeft: horizontalSpace["xs"],

+6 -6

apps/docs/src/components/theme/useListBoxItemStyles.ts

reviewed

··· 40 40 paddingRight: horizontalSpace["xs"], 41 41 paddingTop: verticalSpace["xxs"], 42 42 }, 43 43 - sm: { minHeight: sizeSpace["5xl"] }, 44 44 - md: { minHeight: sizeSpace["7xl"] }, 45 45 - lg: { minHeight: sizeSpace["xl"] }, 43 43 + sm: { minHeight: sizeSpace["2xl"] }, 44 44 + md: { minHeight: sizeSpace["4xl"] }, 45 45 + lg: { minHeight: sizeSpace["5xl"] }, 46 46 itemInner: { 47 47 borderRadius: radius.md, 48 48 cornerShape: "squircle", ··· 96 96 justifyContent: "center", 97 97 marginBottom: `calc(${verticalSpace["sm"]} * -1)`, 98 98 marginTop: `calc(${verticalSpace["sm"]} * -1)`, 99 99 - minWidth: sizeSpace["2xl"], 99 99 + minWidth: sizeSpace["md"], 100 100 101 101 // eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles 102 102 ":is(*) svg": { 103 103 flexShrink: 0, 104 104 pointerEvents: "none", 105 105 - height: sizeSpace["2xl"], 106 106 - width: sizeSpace["2xl"], 105 105 + height: sizeSpace["md"], 106 106 + width: sizeSpace["md"], 107 107 }, 108 108 }, 109 109 label: {

+4 -4

apps/docs/src/components/theme/usePopoverStyles.ts

reviewed

··· 19 19 }, 20 20 animation: { 21 21 "--origin-x": { 22 22 - ":is([data-placement=left],[data-placement=left] > *)": sizeSpace["2xl"], 23 23 - ":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["2xl"]} * -1)`, 22 22 + ":is([data-placement=left],[data-placement=left] > *)": sizeSpace["md"], 23 23 + ":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["md"]} * -1)`, 24 24 }, 25 25 "--origin-y": { 26 26 - ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["2xl"]} * -1)`, 27 27 - ":is([data-placement=top],[data-placement=top] > *)": sizeSpace["2xl"], 26 26 + ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["md"]} * -1)`, 27 27 + ":is([data-placement=top],[data-placement=top] > *)": sizeSpace["md"], 28 28 }, 29 29 opacity: { 30 30 default: 1,

+3 -3

apps/docs/src/components/toast/Toast.tsx

reviewed

··· 55 55 display: "flex", 56 56 flexDirection: "row", 57 57 justifyContent: "space-between", 58 58 - minWidth: sizeSpace["13xl"], 58 58 + minWidth: sizeSpace["10xl"], 59 59 paddingBottom: verticalSpace["xl"], 60 60 paddingLeft: horizontalSpace["3xl"], 61 61 paddingRight: horizontalSpace["3xl"], ··· 101 101 }, 102 102 flexShrink: 0, 103 103 pointerEvents: "none", 104 104 - height: sizeSpace["2xl"], 105 105 - width: sizeSpace["2xl"], 104 104 + height: sizeSpace["md"], 105 105 + width: sizeSpace["md"], 106 106 }, 107 107 }, 108 108 critical: {

+3 -3

apps/docs/src/components/toggle-button/index.tsx

reviewed

··· 67 67 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["md"], 68 68 }, 69 69 width: { 70 70 - ":has(svg:only-child)": sizeSpace["5xl"], 70 70 + ":has(svg:only-child)": sizeSpace["2xl"], 71 71 }, 72 72 }, 73 73 md: { ··· 78 78 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["xl"], 79 79 }, 80 80 width: { 81 81 - ":has(svg:only-child)": sizeSpace["6xl"], 81 81 + ":has(svg:only-child)": sizeSpace["3xl"], 82 82 }, 83 83 }, 84 84 lg: { ··· 89 89 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["3xl"], 90 90 }, 91 91 width: { 92 92 - ":has(svg:only-child)": sizeSpace["lg"], 92 92 + ":has(svg:only-child)": sizeSpace["4xl"], 93 93 }, 94 94 }, 95 95 });

+5 -5

apps/docs/src/components/tree/index.tsx

reviewed

··· 48 48 backgroundColor: primaryColor.component2, 49 49 }, 50 50 spacer: { 51 51 - width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["md"]})`, 51 51 + width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["xxs"]})`, 52 52 }, 53 53 content: { 54 54 gap: gap["md"], ··· 83 83 84 84 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 85 85 ":is(*) svg": { 86 86 - height: sizeSpace["md"], 87 87 - width: sizeSpace["md"], 86 86 + height: sizeSpace["xxs"], 87 87 + width: sizeSpace["xxs"], 88 88 }, 89 89 }, 90 90 addon: { ··· 112 112 display: "flex", 113 113 justifyContent: "center", 114 114 115 115 - height: sizeSpace["6xl"], 116 116 - width: sizeSpace["6xl"], 115 115 + height: sizeSpace["3xl"], 116 116 + width: sizeSpace["3xl"], 117 117 }, 118 118 }); 119 119

+1 -1

apps/docs/src/examples/empty-state/basic.tsx

reviewed

··· 11 11 12 12 const styles = stylex.create({ 13 13 wrapper: { 14 14 - padding: sizeSpace["12xl"], 14 14 + padding: sizeSpace["9xl"], 15 15 }, 16 16 }); 17 17

+1 -1

apps/docs/src/examples/empty-state/sizes.tsx

reviewed

··· 15 15 16 16 const styles = stylex.create({ 17 17 wrapper: { 18 18 - padding: sizeSpace["4xl"], 18 18 + padding: sizeSpace["xl"], 19 19 }, 20 20 }); 21 21

+1 -1

apps/docs/src/examples/empty-state/with-actions.tsx

reviewed

··· 14 14 15 15 const styles = stylex.create({ 16 16 wrapper: { 17 17 - padding: sizeSpace["12xl"], 17 17 + padding: sizeSpace["9xl"], 18 18 }, 19 19 }); 20 20

+6 -6

apps/docs/src/examples/foundations/animations.tsx

reviewed

··· 39 39 marginTop: verticalSpace["7xl"], 40 40 }, 41 41 container: { 42 42 - padding: sizeSpace.lg, 42 42 + padding: sizeSpace["4xl"], 43 43 boxSizing: "border-box", 44 44 width: "100%", 45 45 }, ··· 55 55 justifyContent: "center", 56 56 }, 57 57 previewArea: { 58 58 - padding: sizeSpace["2xl"], 58 58 + padding: sizeSpace["md"], 59 59 borderColor: uiColor.border2, 60 60 borderRadius: radius.lg, 61 61 borderStyle: "solid", ··· 77 77 animationName, 78 78 animationTimingFunction: timingFunction, 79 79 backgroundColor: primaryColor.solid1, 80 80 - height: sizeSpace["12xl"], 81 81 - width: sizeSpace["10xl"], 80 80 + height: sizeSpace["9xl"], 81 81 + width: sizeSpace["7xl"], 82 82 }), 83 83 previewBoxLeftToRight: ( 84 84 animationName: unknown, ··· 96 96 opacity: 0, 97 97 position: "absolute", 98 98 transform: "translateY(-50%)", 99 99 - height: sizeSpace["12xl"], 99 99 + height: sizeSpace["9xl"], 100 100 left: horizontalSpace["3xl"], 101 101 top: "50%", 102 102 - width: sizeSpace["10xl"], 102 102 + width: sizeSpace["7xl"], 103 103 }), 104 104 }); 105 105

+2 -2

apps/docs/src/examples/foundations/shadow.tsx

reviewed

··· 26 26 borderStyle: "solid", 27 27 borderWidth: 1, 28 28 cornerShape: "squircle", 29 29 - height: sizeSpace["11xl"], 30 30 - width: sizeSpace["11xl"], 29 29 + height: sizeSpace["8xl"], 30 30 + width: sizeSpace["8xl"], 31 31 }, 32 32 shadow: (value: string) => ({ 33 33 boxShadow: value,

+1 -1

apps/docs/src/examples/navbar/active-link.tsx

reviewed

··· 15 15 16 16 const styles = stylex.create({ 17 17 wrapper: { 18 18 - margin: sizeSpace["2xl"], 18 18 + margin: sizeSpace["md"], 19 19 borderColor: uiColor.border1, 20 20 borderRadius: radius.lg, 21 21 borderStyle: "solid",

+1 -1

apps/docs/src/examples/navbar/always-visible-actions.tsx

reviewed

··· 17 17 18 18 const styles = stylex.create({ 19 19 wrapper: { 20 20 - margin: sizeSpace["2xl"], 20 20 + margin: sizeSpace["md"], 21 21 borderColor: uiColor.border1, 22 22 borderRadius: radius.lg, 23 23 borderStyle: "solid",

+2 -2

apps/docs/src/examples/navbar/basic.tsx

reviewed

··· 15 15 16 16 const styles = stylex.create({ 17 17 wrapper: { 18 18 - margin: sizeSpace["2xl"], 18 18 + margin: sizeSpace["md"], 19 19 borderColor: uiColor.border1, 20 20 borderRadius: radius.lg, 21 21 borderStyle: "solid", ··· 26 26 width: "90%", 27 27 }, 28 28 content: { 29 29 - padding: sizeSpace["2xl"], 29 29 + padding: sizeSpace["md"], 30 30 }, 31 31 }); 32 32

+2 -2

apps/docs/src/examples/navbar/sticky.tsx

reviewed

··· 17 17 18 18 const styles = stylex.create({ 19 19 wrapper: { 20 20 - margin: sizeSpace["2xl"], 20 20 + margin: sizeSpace["md"], 21 21 borderColor: uiColor.border1, 22 22 borderRadius: radius.lg, 23 23 borderStyle: "solid", ··· 28 28 width: "90%", 29 29 }, 30 30 content: { 31 31 - padding: sizeSpace["2xl"], 31 31 + padding: sizeSpace["md"], 32 32 }, 33 33 }); 34 34

+1 -1

apps/docs/src/examples/navbar/with-menus.tsx

reviewed

··· 22 22 23 23 const styles = stylex.create({ 24 24 wrapper: { 25 25 - margin: sizeSpace["2xl"], 25 25 + margin: sizeSpace["md"], 26 26 borderColor: uiColor.border1, 27 27 borderRadius: radius.lg, 28 28 borderStyle: "solid",

+1 -1

apps/docs/src/examples/separator/orientation.tsx

reviewed

··· 7 7 8 8 const styles = stylex.create({ 9 9 separator: { 10 10 - height: sizeSpace["2xl"], 10 10 + height: sizeSpace["md"], 11 11 }, 12 12 }); 13 13

+6 -6

apps/docs/src/examples/skeleton/basic.tsx

reviewed

··· 11 11 <Flex direction="column" gap="md"> 12 12 <Skeleton 13 13 variant="rectangle" 14 14 - height={sizeSpace["2xl"]} 14 14 + height={sizeSpace["md"]} 15 15 width="80px" 16 16 /> 17 17 - <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" /> 17 17 + <Skeleton variant="rectangle" height={sizeSpace.xxs} width="120px" /> 18 18 </Flex> 19 19 </Flex> 20 20 <Flex direction="column" gap="md"> 21 21 - <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> 22 22 - <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> 23 23 - <Skeleton variant="rectangle" height={sizeSpace.md} width="100%" /> 24 24 - <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" /> 21 21 + <Skeleton variant="rectangle" height={sizeSpace.xxs} width="100%" /> 22 22 + <Skeleton variant="rectangle" height={sizeSpace.xxs} width="100%" /> 23 23 + <Skeleton variant="rectangle" height={sizeSpace.xxs} width="100%" /> 24 24 + <Skeleton variant="rectangle" height={sizeSpace.xxs} width="120px" /> 25 25 </Flex> 26 26 </Flex> 27 27 </SkeletonGroup>

+4 -4

apps/docs/src/examples/skeleton/rectangle-height.tsx

reviewed

··· 12 12 </Flex> 13 13 <Flex direction="column" gap="md"> 14 14 <Text weight="semibold">Custom height: spacing["4"]</Text> 15 15 - <Skeleton variant="rectangle" height={sizeSpace["2xl"]} width="300px" /> 15 15 + <Skeleton variant="rectangle" height={sizeSpace["md"]} width="300px" /> 16 16 </Flex> 17 17 <Flex direction="column" gap="md"> 18 18 <Text weight="semibold">Custom height: spacing["8"]</Text> 19 19 - <Skeleton variant="rectangle" height={sizeSpace["6xl"]} width="300px" /> 19 19 + <Skeleton variant="rectangle" height={sizeSpace["3xl"]} width="300px" /> 20 20 </Flex> 21 21 <Flex direction="column" gap="md"> 22 22 - <Text weight="semibold">Custom height: spacing["12"]</Text> 23 23 - <Skeleton variant="rectangle" height={sizeSpace.xl} width="300px" /> 22 22 + <Text weight="semibold">Custom height: size["7xl"]</Text> 23 23 + <Skeleton variant="rectangle" height={sizeSpace["4xl"]} width="300px" /> 24 24 </Flex> 25 25 </Flex> 26 26 );

+1 -1

apps/docs/src/examples/skeleton/variants.tsx

reviewed

··· 12 12 </Flex> 13 13 <Flex direction="column" gap="md"> 14 14 <Text weight="semibold">Rectangle</Text> 15 15 - <Skeleton variant="rectangle" height={sizeSpace["6xl"]} width="150px" /> 15 15 + <Skeleton variant="rectangle" height={sizeSpace["3xl"]} width="150px" /> 16 16 </Flex> 17 17 </Flex> 18 18 );

+1 -1

apps/docs/src/examples/typography/font-families.tsx

reviewed

··· 16 16 17 17 export function FontFamilies() { 18 18 return ( 19 19 - <Flex direction="column" gap="9xl" style={styles.wrapper}> 19 19 + <Flex direction="column" gap="6xl" style={styles.wrapper}> 20 20 <Flex direction="column" gap="2xl"> 21 21 <LabelText>Title (Inter)</LabelText> 22 22 <Text font="title" weight="semibold" size="2xl">

+1 -1

apps/docs/src/examples/typography/letter-spacing.tsx

reviewed

··· 16 16 17 17 export function LetterSpacing() { 18 18 return ( 19 19 - <Grid columns="repeat(2, 1fr)" columnGap="7xl" style={styles.wrapper}> 19 19 + <Grid columns="repeat(2, 1fr)" rowGap="7xl" style={styles.wrapper}> 20 20 <Flex direction="column" gap="md"> 21 21 <LabelText>Tighter</LabelText> 22 22 <Text size="sm" tracking="tighter">

+1 -1

apps/docs/src/examples/typography/line-heights.tsx

reviewed

··· 16 16 17 17 export function LineHeights() { 18 18 return ( 19 19 - <Grid columns="repeat(2, 1fr)" columnGap="7xl" style={styles.wrapper}> 19 19 + <Grid columns="repeat(2, 1fr)" rowGap="7xl" style={styles.wrapper}> 20 20 <Flex direction="column" gap="md"> 21 21 <LabelText>None</LabelText> 22 22 <Text size="sm" leading="none">

+2 -2

apps/docs/src/lib/ColorPreview.tsx

reviewed

··· 10 10 dot: { 11 11 borderRadius: radius.full, 12 12 alignItems: "center", 13 13 - height: sizeSpace["2xl"], 14 14 - width: sizeSpace["2xl"], 13 13 + height: sizeSpace["md"], 14 14 + width: sizeSpace["md"], 15 15 }, 16 16 preview: (color: Color) => ({ 17 17 // oxlint-disable-next-line @stylexjs/valid-styles

+2 -2

apps/docs/src/lib/Example.tsx

reviewed

··· 27 27 marginTop: verticalSpace["7xl"], 28 28 }, 29 29 preview: { 30 30 - padding: sizeSpace["2xl"], 30 30 + padding: sizeSpace["md"], 31 31 alignItems: "center", 32 32 backgroundColor: uiColor.bgSubtle, 33 33 containerType: "inline-size", 34 34 display: "flex", 35 35 flexDirection: "column", 36 36 justifyContent: "center", 37 37 - minHeight: sizeSpace["12xl"], 37 37 + minHeight: sizeSpace["9xl"], 38 38 }, 39 39 noPadding: { 40 40 padding: 0,

+1 -1

apps/docs/src/lib/PropDocs.tsx

reviewed

··· 76 76 /* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */ 77 77 ":is(*) pre": { 78 78 margin: 0, 79 79 - padding: sizeSpace["2xl"], 79 79 + padding: sizeSpace["md"], 80 80 borderWidth: 0, 81 81 height: "100%", 82 82 width: "100%",

+2 -2

apps/docs/src/routes/docs.$.tsx

reviewed

··· 54 54 header: { 55 55 marginBottom: verticalSpace["10xl"], 56 56 marginTop: { 57 57 - default: sizeSpace["4xl"], 58 58 - [breakpoints.sm]: sizeSpace.xl, 57 57 + default: sizeSpace["xl"], 58 58 + [breakpoints.sm]: sizeSpace["4xl"], 59 59 }, 60 60 }, 61 61 defaultMargin: {

+1 -1

apps/docs/src/showcases/canvas-editor-client-only.tsx

reviewed

··· 1 1 "use client"; 2 2 3 3 - import { lazy, Suspense, useEffect, useState } from "react"; 3 3 + import { Suspense, lazy, useEffect, useState } from "react"; 4 4 5 5 const LazyCanvasEditor = lazy(async () => { 6 6 const module = await import("./canvas-editor");

+3 -4

apps/docs/src/showcases/canvas-editor.tsx

reviewed

··· 130 130 marginTop: "auto", 131 131 }, 132 132 sidebarTitle: { 133 133 - height: sizeSpace.lg, 133 133 + height: sizeSpace["4xl"], 134 134 paddingLeft: horizontalSpace["3xl"], 135 135 paddingRight: horizontalSpace.lg, 136 136 }, ··· 194 194 195 195 return ( 196 196 // meta.name is the first choice, then the shape's text, then the capitalized shape type 197 197 - (shape.meta.name as string) || 198 198 - editor.getShapeUtil(shape).getText(shape) || 199 199 - shape.type + " shape" 197 197 + ((shape.meta.name as string) || 198 198 + editor.getShapeUtil(shape).getText(shape) || shape.type + " shape") 200 199 ); 201 200 } 202 201

+6 -6

apps/docs/src/showcases/ecommerce.tsx

reviewed

··· 41 41 import { Text } from "@/components/typography/text"; 42 42 43 43 import { 44 44 - verticalSpace, 45 44 horizontalSpace, 46 45 size as sizeSpace, 46 46 + verticalSpace, 47 47 } from "../components/theme/semantic-spacing.stylex"; 48 48 49 49 const styles = stylex.create({ ··· 96 96 backgroundColor: "#14b8a6", // teal color 97 97 flexShrink: 0, 98 98 position: "absolute", 99 99 - height: sizeSpace.md, 99 99 + height: sizeSpace.xxs, 100 100 left: horizontalSpace.xs, 101 101 top: verticalSpace.xs, 102 102 - width: sizeSpace.md, 102 102 + width: sizeSpace.xxs, 103 103 }, 104 104 cardSection: { 105 105 alignItems: "center", ··· 121 121 height: "auto", 122 122 }, 123 123 main: { 124 124 - padding: sizeSpace["2xl"], 124 124 + padding: sizeSpace["md"], 125 125 width: 2000, 126 126 }, 127 127 }); ··· 993 993 <Flex wrap gap="xs"> 994 994 {fashionItems.map((item, index) => ( 995 995 // eslint-disable-next-line @eslint-react/no-array-index-key 996 996 - <Text variant="secondary" key={index} leading="2xl" size="sm"> 996 996 + (<Text variant="secondary" key={index} leading="2xl" size="sm"> 997 997 {item} 998 998 - </Text> 998 998 + </Text>) 999 999 ))} 1000 1000 </Flex> 1001 1001 </AspectRatio>

+5 -5

apps/docs/src/showcases/invoice.tsx

reviewed

··· 74 74 top: 0, 75 75 }, 76 76 invoiceCard: { 77 77 - padding: sizeSpace["4xl"], 77 77 + padding: sizeSpace["xl"], 78 78 }, 79 79 check: { 80 80 color: successColor.solid2, 81 81 flexShrink: 0, 82 82 }, 83 83 creditCardWrapper: { 84 84 - padding: sizeSpace["6xl"], 84 84 + padding: sizeSpace["3xl"], 85 85 borderRadius: { 86 86 default: radius.lg, 87 87 "@supports (corner-shape: squircle)": radius["4xl"], ··· 89 89 cornerShape: "squircle", 90 90 }, 91 91 creditCard: { 92 92 - padding: sizeSpace["2xl"], 92 92 + padding: sizeSpace["md"], 93 93 borderRadius: { 94 94 default: radius.lg, 95 95 "@supports (corner-shape: squircle)": radius["4xl"], ··· 97 97 cornerShape: "squircle", 98 98 backgroundImage: `linear-gradient(135deg, ${primaryColor.solid2} 0%, ${primaryColor.text1} 100%)`, 99 99 fontFamily: fontFamily["mono"], 100 100 - height: sizeSpace["15xl"], 100 100 + height: sizeSpace["12xl"], 101 101 }, 102 102 copyCardNumber: { 103 103 backgroundColor: { ··· 107 107 color: "white", 108 108 }, 109 109 main: { 110 110 - padding: sizeSpace["2xl"], 110 110 + padding: sizeSpace["md"], 111 111 width: 1600, 112 112 }, 113 113 });

+3 -3

apps/docs/src/showcases/llm.tsx

reviewed

··· 85 85 flexGrow: 1, 86 86 }, 87 87 mainContent: { 88 88 - padding: sizeSpace["4xl"], 88 88 + padding: sizeSpace["xl"], 89 89 flexGrow: 1, 90 90 }, 91 91 promptWrapper: { ··· 93 93 height: "100%", 94 94 }, 95 95 sidebar: { 96 96 - padding: sizeSpace["4xl"], 96 96 + padding: sizeSpace["xl"], 97 97 backgroundColor: uiColor.bgSubtle, 98 98 borderLeftColor: uiColor.border1, 99 99 borderLeftStyle: "solid", ··· 123 123 paddingTop: verticalSpace.xs, 124 124 }, 125 125 preview: { 126 126 - padding: sizeSpace["2xl"], 126 126 + padding: sizeSpace["md"], 127 127 borderColor: uiColor.border2, 128 128 borderRadius: { 129 129 default: radius.md,

+2 -2

apps/docs/src/showcases/music.tsx

reviewed

··· 46 46 47 47 const styles = stylex.create({ 48 48 main: { 49 49 - padding: sizeSpace["2xl"], 49 49 + padding: sizeSpace["md"], 50 50 width: 2000, 51 51 }, 52 52 skinny: { ··· 113 113 }, 114 114 lyricsBody: { 115 115 overflow: "auto", 116 116 - height: sizeSpace["15xl"], 116 116 + height: sizeSpace["12xl"], 117 117 }, 118 118 }); 119 119

+5 -6

apps/docs/src/showcases/todo-table.tsx

reviewed

··· 16 16 import { useState } from "react"; 17 17 import { 18 18 Autocomplete, 19 19 - Pressable, 20 19 ResizableTableContainer, 21 20 useFilter, 22 21 } from "react-aria-components"; 23 22 24 24 - import { Avatar, AvatarButton } from "@/components/avatar"; 23 23 + import { AvatarButton } from "@/components/avatar"; 25 24 import { Badge } from "@/components/badge"; 26 25 import { Button } from "@/components/button"; 27 26 import { Card } from "@/components/card"; ··· 47 46 48 47 import { uiColor } from "../components/theme/color.stylex"; 49 48 import { radius } from "../components/theme/radius.stylex"; 50 50 - import { shadow } from "../components/theme/shadow.stylex"; 51 49 import { 52 52 - verticalSpace, 53 50 horizontalSpace, 54 51 size as sizeSpace, 52 52 + verticalSpace, 55 53 } from "../components/theme/semantic-spacing.stylex"; 54 54 + import { shadow } from "../components/theme/shadow.stylex"; 56 55 57 56 const styles = stylex.create({ 58 57 main: { ··· 69 68 boxShadow: shadow.md, 70 69 display: "flex", 71 70 flexDirection: "column", 72 72 - marginTop: verticalSpace["13xl"], 71 71 + marginTop: verticalSpace["12xl"], 73 72 paddingBottom: verticalSpace["5xl"], 74 73 paddingLeft: horizontalSpace["7xl"], 75 74 paddingRight: horizontalSpace["7xl"], ··· 77 76 width: 1200, 78 77 }, 79 78 emptyState: { 80 80 - padding: sizeSpace["6xl"], 79 79 + padding: sizeSpace["3xl"], 81 80 }, 82 81 noPadding: { 83 82 paddingBottom: 0,

+1 -1

apps/docs/vite.config.ts

reviewed

··· 1 1 import type { RehypeShikiOptions } from "@shikijs/rehype"; 2 2 + import type { TransformOptions } from "lightningcss"; 2 3 import type { PluginOption } from "vite"; 3 4 4 5 import contentCollections from "@content-collections/vite"; ··· 14 15 import dedent from "dedent"; 15 16 import { glob } from "glob"; 16 17 import { browserslistToTargets } from "lightningcss"; 17 17 - import type { TransformOptions } from "lightningcss"; 18 18 import MagicString from "magic-string"; 19 19 import path from "node:path"; 20 20 import docgen from "react-docgen-typescript";

+2 -1

apps/example/src/pages.gen.ts

reviewed

··· 1 1 // deno-fmt-ignore-file 2 2 // biome-ignore format: generated types do not need formatting 3 3 // prettier-ignore 4 4 - import type { PathsForPages } from 'waku/router'; 4 4 + import type { GetConfigResponse, PathsForPages } from 'waku/router'; 5 5 + 5 6 6 7 // prettier-ignore 7 8 type Page =

+2 -1

packages/hip-ui/package.json

reviewed

··· 15 15 "generate:component-configs": "tsx scripts/generate-component-configs.ts", 16 16 "check-types": "tsc --noEmit", 17 17 "generate-colors": "tsx scripts/generate-colors.tsx", 18 18 - "codemod:semantic-spacing": "jscodeshift -t scripts/codemods/migrate-spacing-to-semantic-spacing.cjs src/components --extensions=ts,tsx --parser=tsx" 18 18 + "codemod:semantic-spacing": "jscodeshift -t scripts/codemods/migrate-spacing-to-semantic-spacing.cjs src/components --extensions=ts,tsx --parser=tsx", 19 19 + "codemod:shift-size-scale": "jscodeshift -t scripts/codemods/shift-size-semantic-scale.cjs src/components ../../apps/docs/src --extensions=ts,tsx --parser=tsx" 19 20 }, 20 21 "devDependencies": { 21 22 "@repo/typescript-config": "workspace:*",

+148

packages/hip-ui/scripts/codemods/shift-size-semantic-scale.cjs

reviewed

··· 1 1 + /** 2 2 + * jscodeshift transform: 3 3 + * - Rewrites `size` semantic spacing token usages after the scale shift. 4 4 + * - Targets imports from `semantic-spacing.stylex` where `size` is imported. 5 5 + * 6 6 + * Example: 7 7 + * pnpm -C packages/hip-ui exec jscodeshift \ 8 8 + * -t scripts/codemods/shift-size-semantic-scale.cjs \ 9 9 + * src/components ../../apps/docs/src --extensions=ts,tsx --parser=tsx 10 10 + */ 11 11 + /* eslint-disable unicorn/no-array-callback-reference, unicorn/no-array-for-each */ 12 12 + "use strict"; 13 13 + 14 14 + const TOKEN_RENAME_MAP = { 15 15 + md: "xxs", 16 16 + lg: "xs", 17 17 + xl: "sm", 18 18 + "2xl": "md", 19 19 + "3xl": "lg", 20 20 + "4xl": "xl", 21 21 + "5xl": "2xl", 22 22 + "6xl": "3xl", 23 23 + "7xl": "4xl", 24 24 + "8xl": "5xl", 25 25 + "9xl": "6xl", 26 26 + "10xl": "7xl", 27 27 + "11xl": "8xl", 28 28 + "12xl": "9xl", 29 29 + "13xl": "10xl", 30 30 + "14xl": "11xl", 31 31 + "15xl": "12xl", 32 32 + }; 33 33 + 34 34 + const LOW_END_UNMAPPED = new Set(["xxs", "xs", "sm"]); 35 35 + 36 36 + function isSemanticSpacingImport(sourceValue) { 37 37 + return ( 38 38 + typeof sourceValue === "string" && 39 39 + sourceValue.includes("semantic-spacing.stylex") 40 40 + ); 41 41 + } 42 42 + 43 43 + function getStringPropertyValue(propertyNode) { 44 44 + if (!propertyNode) { 45 45 + return null; 46 46 + } 47 47 + if ( 48 48 + propertyNode.type === "Literal" && 49 49 + typeof propertyNode.value === "string" 50 50 + ) { 51 51 + return propertyNode.value; 52 52 + } 53 53 + if ( 54 54 + propertyNode.type === "StringLiteral" && 55 55 + typeof propertyNode.value === "string" 56 56 + ) { 57 57 + return propertyNode.value; 58 58 + } 59 59 + return null; 60 60 + } 61 61 + 62 62 + function buildStringProperty(j, value) { 63 63 + return typeof j.stringLiteral === "function" 64 64 + ? j.stringLiteral(value) 65 65 + : j.literal(value); 66 66 + } 67 67 + 68 68 + module.exports = function transform(file, api) { 69 69 + const j = api.jscodeshift; 70 70 + const root = j(file.source); 71 71 + const sizeLocalNames = new Set(); 72 72 + let didChange = false; 73 73 + const warnings = new Set(); 74 74 + 75 75 + root.find(j.ImportDeclaration).forEach((importPath) => { 76 76 + const sourceValue = importPath.node.source && importPath.node.source.value; 77 77 + if (!isSemanticSpacingImport(sourceValue)) { 78 78 + return; 79 79 + } 80 80 + 81 81 + for (const specifier of importPath.node.specifiers || []) { 82 82 + if ( 83 83 + specifier.type === "ImportSpecifier" && 84 84 + specifier.imported && 85 85 + specifier.imported.type === "Identifier" && 86 86 + specifier.imported.name === "size" && 87 87 + specifier.local && 88 88 + specifier.local.type === "Identifier" 89 89 + ) { 90 90 + sizeLocalNames.add(specifier.local.name); 91 91 + } 92 92 + } 93 93 + }); 94 94 + 95 95 + if (sizeLocalNames.size === 0) { 96 96 + return null; 97 97 + } 98 98 + 99 99 + root.find(j.MemberExpression).forEach((memberPath) => { 100 100 + const node = memberPath.node; 101 101 + if (node.object.type !== "Identifier") { 102 102 + return; 103 103 + } 104 104 + if (!sizeLocalNames.has(node.object.name)) { 105 105 + return; 106 106 + } 107 107 + 108 108 + if (!node.computed && node.property.type === "Identifier") { 109 109 + const currentToken = node.property.name; 110 110 + const nextToken = TOKEN_RENAME_MAP[currentToken]; 111 111 + if (nextToken) { 112 112 + node.property = j.identifier(nextToken); 113 113 + didChange = true; 114 114 + } else if (LOW_END_UNMAPPED.has(currentToken)) { 115 115 + warnings.add(currentToken); 116 116 + } 117 117 + return; 118 118 + } 119 119 + 120 120 + if (node.computed) { 121 121 + const currentToken = getStringPropertyValue(node.property); 122 122 + if (!currentToken) { 123 123 + return; 124 124 + } 125 125 + const nextToken = TOKEN_RENAME_MAP[currentToken]; 126 126 + if (nextToken) { 127 127 + node.property = buildStringProperty(j, nextToken); 128 128 + didChange = true; 129 129 + } else if (LOW_END_UNMAPPED.has(currentToken)) { 130 130 + warnings.add(currentToken); 131 131 + } 132 132 + } 133 133 + }); 134 134 + 135 135 + if (warnings.size > 0) { 136 136 + api.report( 137 137 + `[shift-size-semantic-scale] ${file.path}: unmapped low-end tokens (${[ 138 138 + ...warnings, 139 139 + ].join(", ")}). Review manually.`, 140 140 + ); 141 141 + } 142 142 + 143 143 + if (!didChange) { 144 144 + return null; 145 145 + } 146 146 + 147 147 + return root.toSource({ quote: "double", trailingComma: true }); 148 148 + };

+4 -5

packages/hip-ui/scripts/generate-component-configs.ts

reviewed

··· 8 8 import { builtinModules } from "node:module"; 9 9 import path from "node:path"; 10 10 import { fileURLToPath } from "node:url"; 11 11 - 12 11 import * as ts from "typescript"; 13 12 14 13 type ComponentMetadata = { ··· 134 133 function getComponentConfigs(directory: string) { 135 134 return getComponentConfigPaths(directory) 136 135 .map(readComponentMetadata) 137 137 - .sort((left, right) => left.name.localeCompare(right.name)); 136 136 + .toSorted((left, right) => left.name.localeCompare(right.name)); 138 137 } 139 138 140 139 function getComponentConfigPaths(directory: string) { ··· 249 248 250 249 const sortedHipDependencies = [ 251 250 ...[...componentDependencies] 252 252 - .sort((left, right) => left.localeCompare(right)) 251 251 + .toSorted((left, right) => left.localeCompare(right)) 253 252 .map((dependencyName) => 254 253 toPosixPath( 255 254 path.relative( ··· 262 261 .map((filePath) => 263 262 toPosixPath(path.relative(componentDirectory, filePath)), 264 263 ) 265 265 - .sort((left, right) => left.localeCompare(right)), 264 264 + .toSorted((left, right) => left.localeCompare(right)), 266 265 ]; 267 266 const sortedPackageDependencies = [...packageDependencies] 268 268 - .sort((left, right) => left.localeCompare(right)) 267 267 + .toSorted((left, right) => left.localeCompare(right)) 269 268 .map( 270 269 (packageName) => 271 270 [packageName, packageVersions.get(packageName)!] as const,

+1 -1

packages/hip-ui/src/cli/install.tsx

reviewed

··· 88 88 import { tableConfig } from "../components/table/table-config.js"; 89 89 import { tabsConfig } from "../components/tabs/tabs-config.js"; 90 90 import { tagGroupConfig } from "../components/tag-group/tag-group-config.js"; 91 91 - import { themeConfig } from "../components/theme/theme-config.js"; 92 91 import { textAreaConfig } from "../components/text-area/text-area-config.js"; 93 92 import { textFieldConfig } from "../components/text-field/text-field-config.js"; 93 93 + import { themeConfig } from "../components/theme/theme-config.js"; 94 94 import { timeFieldConfig } from "../components/time-field/time-field-config.js"; 95 95 import { toastConfig } from "../components/toast/toast-config.js"; 96 96 import { toggleButtonGroupConfig } from "../components/toggle-button-group/toggle-button-group-config.js";

+1 -1

packages/hip-ui/src/components/alert-dialog/index.tsx

reviewed

··· 41 41 display: "flex", 42 42 fontSize: fontSize["lg"], 43 43 justifyContent: "space-between", 44 44 - height: sizeSpace["6xl"], 44 44 + height: sizeSpace["3xl"], 45 45 paddingLeft: horizontalSpace["3xl"], 46 46 paddingRight: horizontalSpace["3xl"], 47 47 paddingTop: verticalSpace["md"],

+3 -3

packages/hip-ui/src/components/alert/index.tsx

reviewed

··· 58 58 [maxBreakpoints.sm]: "auto 1fr", 59 59 }, 60 60 position: "relative", 61 61 - minHeight: sizeSpace["lg"], 61 61 + minHeight: sizeSpace["4xl"], 62 62 paddingBottom: verticalSpace["lg"], 63 63 paddingLeft: horizontalSpace["3xl"], 64 64 paddingRight: horizontalSpace["3xl"], ··· 124 124 ":is(*) svg": { 125 125 flexShrink: 0, 126 126 pointerEvents: "none", 127 127 - height: sizeSpace["3xl"], 128 128 - width: sizeSpace["3xl"], 127 127 + height: sizeSpace["lg"], 128 128 + width: sizeSpace["lg"], 129 129 }, 130 130 }, 131 131 action: {

+9 -9

packages/hip-ui/src/components/avatar/index.tsx

reviewed

··· 41 41 default: radius.sm, 42 42 [mediaQueries.supportsSquircle]: radius["3xl"], 43 43 }, 44 44 - height: sizeSpace["4xl"], 45 45 - width: sizeSpace["4xl"], 44 44 + height: sizeSpace["xl"], 45 45 + width: sizeSpace["xl"], 46 46 }, 47 47 wrapperMd: { 48 48 borderRadius: { 49 49 default: radius.md, 50 50 [mediaQueries.supportsSquircle]: radius["3xl"], 51 51 }, 52 52 - height: sizeSpace["6xl"], 53 53 - width: sizeSpace["6xl"], 52 52 + height: sizeSpace["3xl"], 53 53 + width: sizeSpace["3xl"], 54 54 }, 55 55 wrapperLg: { 56 56 borderRadius: { 57 57 default: radius.lg, 58 58 [mediaQueries.supportsSquircle]: radius["3xl"], 59 59 }, 60 60 - height: sizeSpace["lg"], 61 61 - width: sizeSpace["lg"], 60 60 + height: sizeSpace["4xl"], 61 61 + width: sizeSpace["4xl"], 62 62 }, 63 63 wrapperXl: { 64 64 borderRadius: { 65 65 default: radius.xl, 66 66 [mediaQueries.supportsSquircle]: radius["3xl"], 67 67 }, 68 68 - height: sizeSpace["8xl"], 69 69 - width: sizeSpace["8xl"], 68 68 + height: sizeSpace["5xl"], 69 69 + width: sizeSpace["5xl"], 70 70 }, 71 71 image: { 72 72 objectFit: "cover", ··· 108 108 paddingBottom: 0, 109 109 paddingLeft: 0, 110 110 paddingRight: 0, 111 111 - paddingTop: 0, 112 111 borderWidth: 0, 112 112 + paddingTop: 0, 113 113 backgroundColor: "transparent", 114 114 cursor: "pointer", 115 115 display: "inline-block",

+6 -6

packages/hip-ui/src/components/badge/index.tsx

reviewed

··· 37 37 sm: { 38 38 gap: gap["xs"], 39 39 fontSize: fontSize["xs"], 40 40 - height: sizeSpace["3xl"], 40 40 + height: sizeSpace["lg"], 41 41 paddingBottom: verticalSpace["xxs"], 42 42 paddingLeft: horizontalSpace["lg"], 43 43 paddingRight: horizontalSpace["lg"], ··· 47 47 ":is(*) svg": { 48 48 flexShrink: 0, 49 49 pointerEvents: "none", 50 50 - height: sizeSpace["md"], 51 51 - width: sizeSpace["md"], 50 50 + height: sizeSpace["xxs"], 51 51 + width: sizeSpace["xxs"], 52 52 }, 53 53 }, 54 54 md: { 55 55 gap: gap["sm"], 56 56 fontSize: fontSize["sm"], 57 57 - height: sizeSpace["4xl"], 57 57 + height: sizeSpace["xl"], 58 58 paddingBottom: verticalSpace["xxs"], 59 59 paddingLeft: horizontalSpace["2xl"], 60 60 paddingRight: horizontalSpace["2xl"], ··· 64 64 ":is(*) svg": { 65 65 flexShrink: 0, 66 66 pointerEvents: "none", 67 67 - height: sizeSpace["2xl"], 68 68 - width: sizeSpace["2xl"], 67 67 + height: sizeSpace["md"], 68 68 + width: sizeSpace["md"], 69 69 }, 70 70 }, 71 71 });

+1 -1

packages/hip-ui/src/components/breadcrumbs/index.tsx

reviewed

··· 25 25 paddingBottom: 0, 26 26 paddingLeft: 0, 27 27 paddingRight: 0, 28 28 - paddingTop: 0, 29 28 gap: gap["xs"], 29 29 + paddingTop: 0, 30 30 listStyle: "none", 31 31 alignItems: "center", 32 32 display: "flex",

+1 -1

packages/hip-ui/src/components/card/index.tsx

reviewed

··· 107 107 marginBottom: 0, 108 108 marginLeft: 0, 109 109 marginRight: 0, 110 110 - marginTop: 0, 111 110 fontSize: fontSize["sm"], 111 111 + marginTop: 0, 112 112 fontWeight: fontWeight["normal"], 113 113 lineHeight: lineHeight["sm"], 114 114 },

+2 -2

packages/hip-ui/src/components/checkbox/index.tsx

reviewed

··· 46 46 borderWidth: 2, 47 47 48 48 cornerShape: "squircle", 49 49 - height: sizeSpace["2xl"], 50 50 - width: sizeSpace["2xl"], 49 49 + height: sizeSpace["md"], 50 50 + width: sizeSpace["md"], 51 51 }, 52 52 checked: { 53 53 color: "white",

+10 -10

packages/hip-ui/src/components/color-area/index.tsx

reviewed

··· 36 36 ":is([data-disabled])": "grayscale(1)", 37 37 }, 38 38 height: { 39 39 - default: sizeSpace["2xl"], 40 40 - ":is([data-focus-visible])": sizeSpace["4xl"], 41 41 - ":is([data-size=lg] *)": sizeSpace["4xl"], 42 42 - ":is([data-size=md] *)": sizeSpace["2xl"], 43 43 - ":is([data-size=sm] *)": sizeSpace["md"], 39 39 + default: sizeSpace["md"], 40 40 + ":is([data-focus-visible])": sizeSpace["xl"], 41 41 + ":is([data-size=lg] *)": sizeSpace["xl"], 42 42 + ":is([data-size=md] *)": sizeSpace["md"], 43 43 + ":is([data-size=sm] *)": sizeSpace["xxs"], 44 44 }, 45 45 width: { 46 46 - default: sizeSpace["2xl"], 47 47 - ":is([data-focus-visible])": sizeSpace["4xl"], 48 48 - ":is([data-size=lg] *)": sizeSpace["4xl"], 49 49 - ":is([data-size=md] *)": sizeSpace["2xl"], 50 50 - ":is([data-size=sm] *)": sizeSpace["md"], 46 46 + default: sizeSpace["md"], 47 47 + ":is([data-focus-visible])": sizeSpace["xl"], 48 48 + ":is([data-size=lg] *)": sizeSpace["xl"], 49 49 + ":is([data-size=md] *)": sizeSpace["md"], 50 50 + ":is([data-size=sm] *)": sizeSpace["xxs"], 51 51 }, 52 52 }, 53 53 aspectRatio: (aspectRatio: number) => ({

+1 -1

packages/hip-ui/src/components/color-picker/index.tsx

reviewed

··· 53 53 paddingBottom: 0, 54 54 paddingLeft: 0, 55 55 paddingRight: 0, 56 56 - paddingTop: 0, 57 56 borderWidth: 0, 57 57 + paddingTop: 0, 58 58 gap: { 59 59 default: gap["md"], 60 60 ":is([data-size=sm])": sizeSpace["xxs"],

+3 -3

packages/hip-ui/src/components/color-slider/index.tsx

reviewed

··· 53 53 borderRadius: radius.full, 54 54 cornerShape: "squircle", 55 55 height: { 56 56 - ":is([data-size=lg] *)": sizeSpace["4xl"], 57 57 - ":is([data-size=md] *)": sizeSpace["2xl"], 58 58 - ":is([data-size=sm] *)": sizeSpace["md"], 56 56 + ":is([data-size=lg] *)": sizeSpace["xl"], 57 57 + ":is([data-size=md] *)": sizeSpace["md"], 58 58 + ":is([data-size=sm] *)": sizeSpace["xxs"], 59 59 }, 60 60 width: "100%", 61 61 },

+6 -6

packages/hip-ui/src/components/color-swatch/index.tsx

reviewed

··· 23 23 }, 24 24 swatchSm: { 25 25 borderRadius: radius.xs, 26 26 - height: sizeSpace["2xl"], 27 27 - width: sizeSpace["2xl"], 26 26 + height: sizeSpace["md"], 27 27 + width: sizeSpace["md"], 28 28 }, 29 29 swatchMd: { 30 30 borderRadius: radius.sm, 31 31 - height: sizeSpace["4xl"], 32 32 - width: sizeSpace["4xl"], 31 31 + height: sizeSpace["xl"], 32 32 + width: sizeSpace["xl"], 33 33 }, 34 34 swatchLg: { 35 35 borderRadius: radius.md, 36 36 - height: sizeSpace["6xl"], 37 37 - width: sizeSpace["6xl"], 36 36 + height: sizeSpace["3xl"], 37 37 + width: sizeSpace["3xl"], 38 38 }, 39 39 circle: { 40 40 borderRadius: {

+3 -3

packages/hip-ui/src/components/color-wheel/index.tsx

reviewed

··· 24 24 gridArea: "track", 25 25 borderRadius: radius.full, 26 26 height: { 27 27 - ":is([data-size=lg] *)": sizeSpace["4xl"], 28 28 - ":is([data-size=md] *)": sizeSpace["2xl"], 29 29 - ":is([data-size=sm] *)": sizeSpace["md"], 27 27 + ":is([data-size=lg] *)": sizeSpace["xl"], 28 28 + ":is([data-size=md] *)": sizeSpace["md"], 29 29 + ":is([data-size=sm] *)": sizeSpace["xxs"], 30 30 }, 31 31 width: "100%", 32 32

-1

packages/hip-ui/src/components/command-menu/index.tsx

reviewed

··· 21 21 import { Separator } from "../separator"; 22 22 import { 23 23 horizontalSpace, 24 24 - size as sizeSpace, 25 24 verticalSpace, 26 25 } from "../theme/semantic-spacing.stylex"; 27 26 import { useDialogStyles } from "../theme/useDialogStyles";

-1

packages/hip-ui/src/components/content/index.tsx

reviewed

··· 4 4 5 5 import { 6 6 horizontalSpace, 7 7 - size as sizeSpace, 8 7 verticalSpace, 9 8 } from "../theme/semantic-spacing.stylex"; 10 9 import { lineHeight } from "../theme/typography.stylex";

+1 -1

packages/hip-ui/src/components/dialog/index.tsx

reviewed

··· 39 39 justifyContent: "space-between", 40 40 position: "sticky", 41 41 zIndex: 1, 42 42 - height: sizeSpace["6xl"], 42 42 + height: sizeSpace["3xl"], 43 43 paddingBottom: verticalSpace["md"], 44 44 paddingLeft: horizontalSpace["3xl"], 45 45 paddingRight: horizontalSpace["3xl"],

+1 -1

packages/hip-ui/src/components/disclosure-group/index.tsx

reviewed

··· 20 20 marginBottom: 0, 21 21 marginLeft: 0, 22 22 marginRight: 0, 23 23 - marginTop: 0, 24 23 borderWidth: 0, 24 24 + marginTop: 0, 25 25 backgroundColor: uiColor.border2, 26 26 height: "1px", 27 27 width: "100%",

+17 -17

packages/hip-ui/src/components/disclosure/index.tsx

reviewed

··· 30 30 }, 31 31 title: { 32 32 paddingBottom: { 33 33 - ":is([data-size=lg] *)": sizeSpace["2xl"], 34 34 - ":is([data-size=md] *)": sizeSpace["md"], 33 33 + ":is([data-size=lg] *)": sizeSpace["md"], 34 34 + ":is([data-size=md] *)": sizeSpace["xxs"], 35 35 ":is([data-size=sm] *)": sizeSpace["sm"], 36 36 }, 37 37 paddingLeft: { 38 38 - ":is([data-size=lg] *)": sizeSpace["2xl"], 39 39 - ":is([data-size=md] *)": sizeSpace["md"], 38 38 + ":is([data-size=lg] *)": sizeSpace["md"], 39 39 + ":is([data-size=md] *)": sizeSpace["xxs"], 40 40 ":is([data-size=sm] *)": sizeSpace["sm"], 41 41 }, 42 42 paddingRight: { 43 43 - ":is([data-size=lg] *)": sizeSpace["2xl"], 44 44 - ":is([data-size=md] *)": sizeSpace["md"], 43 43 + ":is([data-size=lg] *)": sizeSpace["md"], 44 44 + ":is([data-size=md] *)": sizeSpace["xxs"], 45 45 ":is([data-size=sm] *)": sizeSpace["sm"], 46 46 }, 47 47 + borderRadius: radius.lg, 47 48 paddingTop: { 48 48 - ":is([data-size=lg] *)": sizeSpace["2xl"], 49 49 - ":is([data-size=md] *)": sizeSpace["md"], 49 49 + ":is([data-size=lg] *)": sizeSpace["md"], 50 50 + ":is([data-size=md] *)": sizeSpace["xxs"], 50 51 ":is([data-size=sm] *)": sizeSpace["sm"], 51 52 }, 52 52 - borderRadius: radius.lg, 53 53 borderWidth: 0, 54 54 55 55 cornerShape: "squircle", ··· 112 112 }, 113 113 panelContent: { 114 114 paddingBottom: { 115 115 - ":is([data-size=lg] *)": sizeSpace["2xl"], 116 116 - ":is([data-size=md] *)": sizeSpace["md"], 115 115 + ":is([data-size=lg] *)": sizeSpace["md"], 116 116 + ":is([data-size=md] *)": sizeSpace["xxs"], 117 117 ":is([data-size=sm] *)": sizeSpace["sm"], 118 118 }, 119 119 paddingLeft: { 120 120 - ":is([data-size=lg] *)": sizeSpace["2xl"], 121 121 - ":is([data-size=md] *)": sizeSpace["md"], 120 120 + ":is([data-size=lg] *)": sizeSpace["md"], 121 121 + ":is([data-size=md] *)": sizeSpace["xxs"], 122 122 ":is([data-size=sm] *)": sizeSpace["sm"], 123 123 }, 124 124 paddingRight: { 125 125 - ":is([data-size=lg] *)": sizeSpace["2xl"], 126 126 - ":is([data-size=md] *)": sizeSpace["md"], 125 125 + ":is([data-size=lg] *)": sizeSpace["md"], 126 126 + ":is([data-size=md] *)": sizeSpace["xxs"], 127 127 ":is([data-size=sm] *)": sizeSpace["sm"], 128 128 }, 129 129 paddingTop: { 130 130 - ":is([data-size=lg] *)": sizeSpace["2xl"], 131 131 - ":is([data-size=md] *)": sizeSpace["md"], 130 130 + ":is([data-size=lg] *)": sizeSpace["md"], 131 131 + ":is([data-size=md] *)": sizeSpace["xxs"], 132 132 ":is([data-size=sm] *)": sizeSpace["sm"], 133 133 }, 134 134 },

+3 -3

packages/hip-ui/src/components/drawer/index.tsx

reviewed

··· 88 88 }, 89 89 maxHeight: { 90 90 ":is([data-direction=right], [data-direction=left])": "100vh", 91 91 - ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["6xl"]})`, 91 91 + ":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["3xl"]})`, 92 92 }, 93 93 maxWidth: { 94 94 - ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["6xl"]})`, 94 94 + ":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["3xl"]})`, 95 95 ":is([data-direction=top], [data-direction=bottom])": "100vw", 96 96 }, 97 97 width: { ··· 130 130 alignItems: "center", 131 131 display: "flex", 132 132 justifyContent: "space-between", 133 133 - height: sizeSpace["6xl"], 133 133 + height: sizeSpace["3xl"], 134 134 paddingBottom: verticalSpace["md"], 135 135 paddingLeft: horizontalSpace["3xl"], 136 136 paddingRight: horizontalSpace["3xl"],

-1

packages/hip-ui/src/components/editable-text/index.tsx

reviewed

··· 13 13 import { radius } from "../theme/radius.stylex"; 14 14 import { 15 15 horizontalSpace, 16 16 - size as sizeSpace, 17 16 verticalSpace, 18 17 } from "../theme/semantic-spacing.stylex"; 19 18

+8 -8

packages/hip-ui/src/components/empty-state/index.tsx

reviewed

··· 17 17 const styles = stylex.create({ 18 18 emptyState: { 19 19 "--empty-state-image-size": { 20 20 - ":is([data-empty-state-size=lg])": sizeSpace["10xl"], 21 21 - ":is([data-empty-state-size=md])": sizeSpace["8xl"], 22 22 - ":is([data-empty-state-size=sm])": sizeSpace["lg"], 20 20 + ":is([data-empty-state-size=lg])": sizeSpace["7xl"], 21 21 + ":is([data-empty-state-size=md])": sizeSpace["5xl"], 22 22 + ":is([data-empty-state-size=sm])": sizeSpace["4xl"], 23 23 }, 24 24 gridTemplateAreas: { 25 25 // eslint-disable-next-line @stylexjs/valid-styles ··· 50 50 }, 51 51 alignItems: "center", 52 52 columnGap: { 53 53 - ":is([data-empty-state-size=sm])": sizeSpace["2xl"], 53 53 + ":is([data-empty-state-size=sm])": sizeSpace["md"], 54 54 }, 55 55 display: "grid", 56 56 fontFamily: fontFamily["sans"], ··· 66 66 ":is([data-empty-state-size=sm])": "start", 67 67 }, 68 68 rowGap: { 69 69 - ":is([data-empty-state-size=lg])": sizeSpace["4xl"], 70 70 - ":is([data-empty-state-size=md])": sizeSpace["2xl"], 69 69 + ":is([data-empty-state-size=lg])": sizeSpace["xl"], 70 70 + ":is([data-empty-state-size=md])": sizeSpace["md"], 71 71 ":is([data-empty-state-size=sm])": sizeSpace["sm"], 72 72 }, 73 73 textAlign: "center", ··· 86 86 marginBottom: 0, 87 87 marginLeft: 0, 88 88 marginRight: 0, 89 89 - marginTop: 0, 90 89 fontSize: { 91 90 ":is([data-empty-state-size='lg'] *)": fontSize["2xl"], 92 91 ":is([data-empty-state-size='md'] *)": fontSize["xl"], 93 92 ":is([data-empty-state-size='sm'] *)": fontSize["lg"], 94 93 }, 94 94 + marginTop: 0, 95 95 fontWeight: fontWeight["semibold"], 96 96 }, 97 97 description: { ··· 99 99 marginBottom: 0, 100 100 marginLeft: 0, 101 101 marginRight: 0, 102 102 - marginTop: 0, 103 102 fontSize: fontSize["sm"], 103 103 + marginTop: 0, 104 104 fontWeight: fontWeight["normal"], 105 105 maxWidth: { 106 106 ":is([data-empty-state-size=lg])": "480px",

+1 -1

packages/hip-ui/src/components/file-drop-zone/index.tsx

reviewed

··· 40 40 paddingBottom: verticalSpace["2xl"], 41 41 paddingLeft: horizontalSpace["2xl"], 42 42 paddingRight: horizontalSpace["2xl"], 43 43 - paddingTop: verticalSpace["2xl"], 44 43 borderColor: { 45 44 default: uiColor.border3, 46 45 ":is([data-drop-target])": primaryColor.solid1, 47 46 }, 47 47 + paddingTop: verticalSpace["2xl"], 48 48 borderRadius: radius.lg, 49 49 borderStyle: { 50 50 default: "dashed",

+8 -9

packages/hip-ui/src/components/footer/index.tsx

reviewed

··· 39 39 borderWidth: 0, 40 40 gap: { 41 41 default: gap["6xl"], 42 42 - [containerBreakpoints.sm]: sizeSpace["2xl"], 43 43 - ":is([data-footer-centered] *)": `${sizeSpace["6xl"]} !important`, 42 42 + [containerBreakpoints.sm]: sizeSpace["md"], 43 43 + ":is([data-footer-centered] *)": `${sizeSpace["3xl"]} !important`, 44 44 }, 45 45 alignItems: { 46 46 default: "stretch", ··· 94 94 marginBottom: 0, 95 95 marginLeft: 0, 96 96 marginRight: 0, 97 97 - marginTop: 0, 98 97 fontSize: fontSize["sm"], 98 98 + marginTop: 0, 99 99 fontWeight: fontWeight["semibold"], 100 100 letterSpacing: "0.05em", 101 101 textTransform: "uppercase", ··· 112 112 marginBottom: 0, 113 113 marginLeft: 0, 114 114 marginRight: 0, 115 115 - marginTop: 0, 116 115 fontSize: fontSize["xs"], 116 116 + marginTop: 0, 117 117 }, 118 118 socialLinkList: { 119 119 gap: gap["2xl"], ··· 124 124 socialLinkItem: { 125 125 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 126 126 ":is(*) svg": { 127 127 - height: sizeSpace["3xl"], 128 128 - width: sizeSpace["3xl"], 127 127 + height: sizeSpace["lg"], 128 128 + width: sizeSpace["lg"], 129 129 }, 130 130 textDecoration: "none", 131 131 alignItems: "center", ··· 177 177 marginBottom: 0, 178 178 marginLeft: 0, 179 179 marginRight: 0, 180 180 - marginTop: 0, 181 180 fontSize: fontSize["sm"], 181 181 + marginTop: 0, 182 182 fontWeight: fontWeight["semibold"], 183 183 }, 184 184 subscribeDescription: { 185 185 gridArea: "description", 186 186 - marginBottom: 0, 187 186 marginLeft: 0, 188 187 marginRight: 0, 189 189 - marginTop: 0, 190 188 fontSize: fontSize["sm"], 189 189 + marginTop: 0, 191 190 marginBottom: verticalSpace["md"], 192 191 }, 193 192 subscribeInput: {

-1

packages/hip-ui/src/components/header-layout/index.tsx

reviewed

··· 8 8 import { containerBreakpoints } from "../theme/media-queries.stylex"; 9 9 import { 10 10 horizontalSpace, 11 11 - size as sizeSpace, 12 11 verticalSpace, 13 12 } from "../theme/semantic-spacing.stylex"; 14 13

+6 -6

packages/hip-ui/src/components/icon-button/index.tsx

reviewed

··· 15 15 const styles = stylex.create({ 16 16 button: { 17 17 height: { 18 18 - ":is([data-size=lg])": sizeSpace["lg"], 19 19 - ":is([data-size=md])": sizeSpace["6xl"], 20 20 - ":is([data-size=sm])": sizeSpace["5xl"], 18 18 + ":is([data-size=lg])": sizeSpace["4xl"], 19 19 + ":is([data-size=md])": sizeSpace["3xl"], 20 20 + ":is([data-size=sm])": sizeSpace["2xl"], 21 21 }, 22 22 width: { 23 23 - ":is([data-size=lg])": sizeSpace["lg"], 24 24 - ":is([data-size=md])": sizeSpace["6xl"], 25 25 - ":is([data-size=sm])": sizeSpace["5xl"], 23 23 + ":is([data-size=lg])": sizeSpace["4xl"], 24 24 + ":is([data-size=md])": sizeSpace["3xl"], 25 25 + ":is([data-size=sm])": sizeSpace["2xl"], 26 26 }, 27 27 }, 28 28 });

+1 -1

packages/hip-ui/src/components/image-cropper/index.tsx

reviewed

··· 58 58 paddingBottom: 0, 59 59 paddingLeft: 0, 60 60 paddingRight: 0, 61 61 - paddingTop: 0, 62 61 borderWidth: 0, 62 62 + paddingTop: 0, 63 63 overflow: "hidden", 64 64 clip: "rect(0, 0, 0, 0)", 65 65 position: "absolute",

+1 -5

packages/hip-ui/src/components/link/index.tsx

reviewed

··· 7 7 import type { StyleXComponentProps } from "../theme/types"; 8 8 9 9 import { primaryColor, uiColor } from "../theme/color.stylex"; 10 10 - import { 11 11 - gap, 12 12 - size as sizeSpace, 13 13 - verticalSpace, 14 14 - } from "../theme/semantic-spacing.stylex"; 10 10 + import { gap, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 11 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 16 12 import { LinkContext } from "./link-context"; 17 13

+3 -3

packages/hip-ui/src/components/listbox/index.tsx

reviewed

··· 51 51 paddingTop: verticalSpace["xs"], 52 52 53 53 height: { 54 54 - ":is([data-size=lg])": sizeSpace["7xl"], 55 55 - ":is([data-size=md])": sizeSpace["5xl"], 56 56 - ":is([data-size=sm])": sizeSpace["5xl"], 54 54 + ":is([data-size=lg])": sizeSpace["4xl"], 55 55 + ":is([data-size=md])": sizeSpace["2xl"], 56 56 + ":is([data-size=sm])": sizeSpace["2xl"], 57 57 }, 58 58 }, 59 59 separator: {

+3 -3

packages/hip-ui/src/components/menubar/index.tsx

reviewed

··· 74 74 transitionDuration: animationDuration.fast, 75 75 transitionProperty: "background-color", 76 76 height: { 77 77 - ":is([data-size=lg] *)": sizeSpace["lg"], 78 78 - ":is([data-size=md] *)": sizeSpace["6xl"], 79 79 - ":is([data-size=sm] *)": sizeSpace["4xl"], 77 77 + ":is([data-size=lg] *)": sizeSpace["4xl"], 78 78 + ":is([data-size=md] *)": sizeSpace["3xl"], 79 79 + ":is([data-size=sm] *)": sizeSpace["xl"], 80 80 }, 81 81 paddingLeft: { 82 82 ":is([data-size=lg] *)": horizontalSpace["xl"],

+1 -1

packages/hip-ui/src/components/meter/index.tsx

reviewed

··· 49 49 ":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`, 50 50 }, 51 51 height: { 52 52 - ":is([data-size=lg] *)": sizeSpace["md"], 52 52 + ":is([data-size=lg] *)": sizeSpace["xxs"], 53 53 ":is([data-size=md] *)": sizeSpace["sm"], 54 54 ":is([data-size=sm] *)": sizeSpace["xxs"], 55 55 },

+7 -7

packages/hip-ui/src/components/navbar/Navbar.tsx

reviewed

··· 82 82 alignItems: "center", 83 83 boxSizing: "border-box", 84 84 columnGap: { 85 85 - default: sizeSpace["2xl"], 86 86 - [containerBreakpoints.sm]: sizeSpace["6xl"], 85 85 + default: sizeSpace["md"], 86 86 + [containerBreakpoints.sm]: sizeSpace["3xl"], 87 87 }, 88 88 display: "grid", 89 89 gridTemplateColumns: { ··· 100 100 ":is([data-navbar-open]):has([data-navbar-action])": `min-content min-content min-content min-content`, 101 101 }, 102 102 rowGap: { 103 103 - default: sizeSpace["2xl"], 104 104 - [containerBreakpoints.sm]: sizeSpace["6xl"], 103 103 + default: sizeSpace["md"], 104 104 + [containerBreakpoints.sm]: sizeSpace["3xl"], 105 105 }, 106 106 marginLeft: "auto", 107 107 marginRight: "auto", 108 108 maxWidth: "var(--page-content-max-width)", 109 109 minHeight: { 110 110 - default: sizeSpace["8xl"], 110 110 + default: sizeSpace["5xl"], 111 111 ":is([data-navbar-open])": "100%", 112 112 - [containerBreakpoints.sm]: sizeSpace["8xl"], 112 112 + [containerBreakpoints.sm]: sizeSpace["5xl"], 113 113 }, 114 114 paddingBottom: { 115 115 default: verticalSpace["xl"], ··· 181 181 gridArea: "navigation", 182 182 gap: { 183 183 default: gap["5xl"], 184 184 - [containerBreakpoints.sm]: sizeSpace["6xl"], 184 184 + [containerBreakpoints.sm]: sizeSpace["3xl"], 185 185 }, 186 186 alignItems: { 187 187 default: "start",

+7 -7

packages/hip-ui/src/components/navbar/NavbarMenu.tsx

reviewed

··· 15 15 import { radius } from "../theme/radius.stylex"; 16 16 import { 17 17 gap, 18 18 + horizontalSpace, 18 19 size as sizeSpace, 19 20 verticalSpace, 20 20 - horizontalSpace, 21 21 } from "../theme/semantic-spacing.stylex"; 22 22 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 23 23 ··· 26 26 paddingBottom: verticalSpace["sm"], 27 27 paddingLeft: horizontalSpace["sm"], 28 28 paddingRight: horizontalSpace["sm"], 29 29 - paddingTop: verticalSpace["sm"], 30 29 borderRadius: radius.md, 30 30 + paddingTop: verticalSpace["sm"], 31 31 textDecoration: "none", 32 32 alignItems: "center", 33 33 backgroundColor: { ··· 66 66 paddingBottom: verticalSpace["sm"], 67 67 paddingLeft: horizontalSpace["sm"], 68 68 paddingRight: horizontalSpace["sm"], 69 69 - paddingTop: verticalSpace["sm"], 70 69 borderRadius: radius.md, 70 70 + paddingTop: verticalSpace["sm"], 71 71 alignItems: "center", 72 72 backgroundColor: { 73 73 default: uiColor.component2, ··· 76 76 color: uiColor.text1, 77 77 display: "flex", 78 78 justifyContent: "center", 79 79 - height: sizeSpace["6xl"], 80 80 - width: sizeSpace["6xl"], 79 79 + height: sizeSpace["3xl"], 80 80 + width: sizeSpace["3xl"], 81 81 82 82 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 83 83 ":is(*) svg": { 84 84 - height: sizeSpace["4xl"], 85 85 - width: sizeSpace["4xl"], 84 84 + height: sizeSpace["xl"], 85 85 + width: sizeSpace["xl"], 86 86 }, 87 87 }, 88 88 menuItemLabel: {

+3 -3

packages/hip-ui/src/components/number-field/index.tsx

reviewed

··· 96 96 paddingBottom: 0, 97 97 paddingLeft: 0, 98 98 paddingRight: 0, 99 99 - paddingTop: 0, 100 99 alignItems: "center", 100 100 + paddingTop: 0, 101 101 aspectRatio: 1, 102 102 display: "flex", 103 103 flexGrow: 1, ··· 114 114 ":is(*) svg": { 115 115 flexShrink: 0, 116 116 pointerEvents: "none", 117 117 - height: sizeSpace["2xl"], 118 118 - width: sizeSpace["2xl"], 117 117 + height: sizeSpace["md"], 118 118 + width: sizeSpace["md"], 119 119 }, 120 120 121 121 color: {

+5 -5

packages/hip-ui/src/components/page/Page.tsx

reviewed

··· 68 68 default: verticalSpace["4xl"], 69 69 ":is([data-sticky-header=true] *)": 0, 70 70 }, 71 71 - minHeight: sizeSpace["6xl"], 71 71 + minHeight: sizeSpace["3xl"], 72 72 }, 73 73 }); 74 74 ··· 106 106 default: verticalSpace["6xl"], 107 107 ":is([data-sticky-header=true] *)": 0, 108 108 }, 109 109 - minHeight: sizeSpace["6xl"], 109 109 + minHeight: sizeSpace["3xl"], 110 110 paddingBottom: verticalSpace["3xl"], 111 111 paddingTop: verticalSpace["3xl"], 112 112 }, ··· 149 149 default: gap["xs"], 150 150 [breakpoints.sm]: sizeSpace["sm"], 151 151 }, 152 152 - minHeight: sizeSpace["6xl"], 152 152 + minHeight: sizeSpace["3xl"], 153 153 }, 154 154 icon: { 155 155 gridArea: "icon", ··· 162 162 color: primaryColor.textContrast, 163 163 display: "flex", 164 164 justifyContent: "center", 165 165 - height: sizeSpace["xl"], 166 166 - width: sizeSpace["xl"], 165 165 + height: sizeSpace["4xl"], 166 166 + width: sizeSpace["4xl"], 167 167 }, 168 168 }); 169 169

+1 -1

packages/hip-ui/src/components/progress-bar/index.tsx

reviewed

··· 42 42 width: "100%", 43 43 44 44 height: { 45 45 - ":is([data-size=lg] *)": sizeSpace["md"], 45 45 + ":is([data-size=lg] *)": sizeSpace["xxs"], 46 46 ":is([data-size=md] *)": sizeSpace["sm"], 47 47 ":is([data-size=sm] *)": sizeSpace["xxs"], 48 48 },

+3 -3

packages/hip-ui/src/components/progress-circle/index.tsx

reviewed

··· 37 37 38 38 "--progress-border-width": sizeSpace["xxs"], 39 39 "--progress-size": { 40 40 - ":is([data-size=lg] *)": sizeSpace["lg"], 41 41 - ":is([data-size=md] *)": sizeSpace["6xl"], 42 42 - ":is([data-size=sm] *)": sizeSpace["2xl"], 40 40 + ":is([data-size=lg] *)": sizeSpace["4xl"], 41 41 + ":is([data-size=md] *)": sizeSpace["3xl"], 42 42 + ":is([data-size=sm] *)": sizeSpace["md"], 43 43 }, 44 44 }, 45 45 track: {

+2 -2

packages/hip-ui/src/components/radio/index.tsx

reviewed

··· 57 57 borderRadius: radius.full, 58 58 borderWidth: 2, 59 59 position: "relative", 60 60 - height: sizeSpace["2xl"], 61 61 - width: sizeSpace["2xl"], 60 60 + height: sizeSpace["md"], 61 61 + width: sizeSpace["md"], 62 62 63 63 transitionDuration: animationDuration.fast, 64 64 transitionProperty: {

+5 -5

packages/hip-ui/src/components/segmented-control/index.tsx

reviewed

··· 44 44 boxSizing: "border-box", 45 45 display: "flex", 46 46 height: { 47 47 - ":is([data-size=lg])": sizeSpace["7xl"], 48 48 - ":is([data-size=md])": sizeSpace["6xl"], 49 49 - ":is([data-size=sm])": sizeSpace["5xl"], 47 47 + ":is([data-size=lg])": sizeSpace["4xl"], 48 48 + ":is([data-size=md])": sizeSpace["3xl"], 49 49 + ":is([data-size=sm])": sizeSpace["2xl"], 50 50 }, 51 51 }, 52 52 small: { ··· 92 92 ":is(*) svg": { 93 93 flexShrink: 0, 94 94 pointerEvents: "none", 95 95 - height: sizeSpace["2xl"], 96 96 - width: sizeSpace["2xl"], 95 95 + height: sizeSpace["md"], 96 96 + width: sizeSpace["md"], 97 97 }, 98 98 }, 99 99 /* eslint-enable @stylexjs/sort-keys */

+1 -1

packages/hip-ui/src/components/separator/index.tsx

reviewed

··· 12 12 marginBottom: 0, 13 13 marginLeft: 0, 14 14 marginRight: 0, 15 15 - marginTop: 0, 16 15 borderWidth: 0, 16 16 + marginTop: 0, 17 17 backgroundColor: uiColor.component3, 18 18 height: { 19 19 default: "1px",

-1

packages/hip-ui/src/components/sidebar-layout/index.tsx

reviewed

··· 11 11 import { containerBreakpoints } from "../theme/media-queries.stylex"; 12 12 import { 13 13 horizontalSpace, 14 14 - size as sizeSpace, 15 14 verticalSpace, 16 15 } from "../theme/semantic-spacing.stylex"; 17 16

+6 -6

packages/hip-ui/src/components/sidebar/index.tsx

reviewed

··· 43 43 paddingLeft: horizontalSpace["5xl"], 44 44 paddingRight: horizontalSpace["3xl"], 45 45 paddingTop: verticalSpace["5xl"], 46 46 - width: sizeSpace["14xl"], 46 46 + width: sizeSpace["11xl"], 47 47 }, 48 48 sidebarHeader: { 49 49 alignItems: "center", ··· 58 58 textDecoration: "none", 59 59 }, 60 60 sidebarSectionTitle: { 61 61 - height: sizeSpace["4xl"], 61 61 + height: sizeSpace["xl"], 62 62 paddingLeft: horizontalSpace["xl"], 63 63 paddingRight: horizontalSpace["xl"], 64 64 paddingTop: { ··· 73 73 paddingBottom: 0, 74 74 paddingLeft: 0, 75 75 paddingRight: 0, 76 76 - paddingTop: 0, 77 76 gap: gap["xs"], 77 77 + paddingTop: 0, 78 78 display: "flex", 79 79 flexDirection: "column", 80 80 }, ··· 103 103 [mediaQueries.reducedMotion]: "none", 104 104 }, 105 105 transitionTimingFunction: "ease-in-out", 106 106 - height: sizeSpace["6xl"], 106 106 + height: sizeSpace["3xl"], 107 107 paddingLeft: horizontalSpace["xl"], 108 108 paddingRight: horizontalSpace["xl"], 109 109 width: "100%", ··· 115 115 ":is([data-pressed=true])": primaryColor.component3, 116 116 }, 117 117 color: primaryColor.text2, 118 118 - scrollMarginTop: sizeSpace["2xl"], 118 118 + scrollMarginTop: sizeSpace["md"], 119 119 }, 120 120 sidebarGroupHeading: { 121 121 marginBottom: 0, ··· 131 131 paddingBottom: 0, 132 132 paddingLeft: 0, 133 133 paddingRight: 0, 134 134 - paddingTop: 0, 135 134 borderWidth: 0, 135 135 + paddingTop: 0, 136 136 gap: gap["sm"], 137 137 alignItems: "center", 138 138 backgroundColor: "transparent",

+7 -7

packages/hip-ui/src/components/skeleton/index.tsx

reviewed

··· 60 60 cornerShape: "squircle", 61 61 }, 62 62 sizeSm: { 63 63 - height: sizeSpace["6xl"], 64 64 - width: sizeSpace["6xl"], 63 63 + height: sizeSpace["3xl"], 64 64 + width: sizeSpace["3xl"], 65 65 }, 66 66 sizeMd: { 67 67 - height: sizeSpace["xl"], 68 68 - width: sizeSpace["xl"], 67 67 + height: sizeSpace["4xl"], 68 68 + width: sizeSpace["4xl"], 69 69 }, 70 70 sizeLg: { 71 71 - height: sizeSpace["9xl"], 72 72 - width: sizeSpace["9xl"], 71 71 + height: sizeSpace["6xl"], 72 72 + width: sizeSpace["6xl"], 73 73 }, 74 74 height: (height: string | undefined) => ({ 75 75 - height: height || sizeSpace["2xl"], 75 75 + height: height || sizeSpace["md"], 76 76 }), 77 77 width: (width: string | undefined) => ({ 78 78 width: width || "100%",

+4 -4

packages/hip-ui/src/components/slider/index.tsx

reviewed

··· 44 44 }, 45 45 position: "relative", 46 46 height: { 47 47 - ":is([data-orientation=horizontal] *)": sizeSpace["6xl"], 47 47 + ":is([data-orientation=horizontal] *)": sizeSpace["3xl"], 48 48 ":is([data-orientation=horizontal] *)::before": sizeSpace["xxs"], 49 49 ":is([data-orientation=vertical] *)": "100%", 50 50 ":is([data-orientation=vertical] *)::before": "100%", ··· 52 52 width: { 53 53 ":is([data-orientation=horizontal] *)": "100%", 54 54 ":is([data-orientation=horizontal] *)::before": "100%", 55 55 - ":is([data-orientation=vertical] *)": sizeSpace["6xl"], 55 55 + ":is([data-orientation=vertical] *)": sizeSpace["3xl"], 56 56 ":is([data-orientation=vertical] *)::before": sizeSpace["xxs"], 57 57 }, 58 58 ··· 94 94 boxShadow: shadow.md, 95 95 content: "''", 96 96 forcedColorAdjust: "none", 97 97 - height: sizeSpace["2xl"], 97 97 + height: sizeSpace["md"], 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 104 - width: sizeSpace["2xl"], 104 104 + width: sizeSpace["md"], 105 105 }, 106 106 trackInner: { 107 107 borderRadius: radius.full,

+1 -1

packages/hip-ui/src/components/star-rating/index.tsx

reviewed

··· 41 41 paddingBottom: 0, 42 42 paddingLeft: 0, 43 43 paddingRight: 0, 44 44 - paddingTop: 0, 45 44 borderColor: "transparent", 45 45 + paddingTop: 0, 46 46 borderStyle: "none", 47 47 borderWidth: 0, 48 48 alignItems: "center",

+4 -4

packages/hip-ui/src/components/switch/index.tsx

reviewed

··· 47 47 [mediaQueries.reducedMotion]: "none", 48 48 }, 49 49 transitionTimingFunction: "ease-in-out", 50 50 - height: sizeSpace["4xl"], 51 51 - width: sizeSpace["lg"], 50 50 + height: sizeSpace["xl"], 51 51 + width: sizeSpace["4xl"], 52 52 }, 53 53 thumb: { 54 54 borderRadius: radius.full, ··· 66 66 [mediaQueries.reducedMotion]: "none", 67 67 }, 68 68 transitionTimingFunction: "ease-in-out", 69 69 - height: sizeSpace["2xl"], 69 69 + height: sizeSpace["md"], 70 70 left: 0, 71 71 marginLeft: horizontalSpace["xs"], 72 72 marginRight: horizontalSpace["xs"], 73 73 top: "50%", 74 74 - width: sizeSpace["2xl"], 74 74 + width: sizeSpace["md"], 75 75 }, 76 76 }); 77 77

+3 -3

packages/hip-ui/src/components/table-of-contents/index.tsx

reviewed

··· 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 import { 12 12 gap, 13 13 + horizontalSpace, 13 14 size as sizeSpace, 14 15 verticalSpace, 15 15 - horizontalSpace, 16 16 } from "../theme/semantic-spacing.stylex"; 17 17 import { fontSize } from "../theme/typography.stylex"; 18 18 ··· 44 44 marginBottom: 0, 45 45 marginLeft: 0, 46 46 marginRight: 0, 47 47 - marginTop: 0, 48 47 listStyle: "none", 48 48 + marginTop: 0, 49 49 paddingLeft: 0, 50 50 }, 51 51 item: { ··· 73 73 }, 74 74 borderLeftStyle: "solid", 75 75 borderLeftWidth: 1, 76 76 - height: sizeSpace["6xl"], 76 76 + height: sizeSpace["3xl"], 77 77 78 78 "::before": { 79 79 content: "''",

+8 -8

packages/hip-ui/src/components/table/index.tsx

reviewed

··· 59 59 paddingBottom: 0, 60 60 paddingLeft: 0, 61 61 paddingRight: 0, 62 62 - paddingTop: 0, 63 62 borderBottomColor: uiColor.border1, 63 63 + paddingTop: 0, 64 64 borderBottomStyle: "solid", 65 65 borderBottomWidth: 1, 66 66 }, ··· 95 95 }, 96 96 textAlign: "left", 97 97 minHeight: { 98 98 - default: sizeSpace["6xl"], 99 99 - ":is([data-table-size=lg] *)": sizeSpace["xl"], 100 100 - ":is([data-table-size=md] *)": sizeSpace["lg"], 98 98 + default: sizeSpace["3xl"], 99 99 + ":is([data-table-size=lg] *)": sizeSpace["5xl"], 100 100 + ":is([data-table-size=md] *)": sizeSpace["4xl"], 101 101 }, 102 102 paddingBottom: { 103 103 default: verticalSpace["xs"], ··· 148 148 ":is([data-table-size=md] *)": `calc(${verticalSpace["sm"]} * -1)`, 149 149 }, 150 150 minHeight: { 151 151 - default: sizeSpace["6xl"], 152 152 - ":is([data-table-size=lg] *)": sizeSpace["xl"], 153 153 - ":is([data-table-size=md] *)": sizeSpace["lg"], 151 151 + default: sizeSpace["3xl"], 152 152 + ":is([data-table-size=lg] *)": sizeSpace["5xl"], 153 153 + ":is([data-table-size=md] *)": sizeSpace["4xl"], 154 154 }, 155 155 - width: sizeSpace["md"], 155 155 + width: sizeSpace["xxs"], 156 156 }, 157 157 resizerLine: { 158 158 backgroundColor: {

+24 -24

packages/hip-ui/src/components/tabs/index.tsx

reviewed

··· 77 77 }, 78 78 tab: { 79 79 paddingBottom: { 80 80 - ":is([data-size=lg] *)": sizeSpace["2xl"], 81 81 - ":is([data-size=md] *)": sizeSpace["md"], 80 80 + ":is([data-size=lg] *)": sizeSpace["md"], 81 81 + ":is([data-size=md] *)": sizeSpace["xxs"], 82 82 ":is([data-size=sm] *)": sizeSpace["sm"], 83 83 }, 84 84 paddingLeft: { 85 85 - ":is([data-size=lg] *)": sizeSpace["3xl"], 86 86 - ":is([data-size=md] *)": sizeSpace["2xl"], 87 87 - ":is([data-size=sm] *)": sizeSpace["md"], 85 85 + ":is([data-size=lg] *)": sizeSpace["lg"], 86 86 + ":is([data-size=md] *)": sizeSpace["md"], 87 87 + ":is([data-size=sm] *)": sizeSpace["xxs"], 88 88 }, 89 89 paddingRight: { 90 90 - ":is([data-size=lg] *)": sizeSpace["3xl"], 91 91 - ":is([data-size=md] *)": sizeSpace["2xl"], 92 92 - ":is([data-size=sm] *)": sizeSpace["md"], 90 90 + ":is([data-size=lg] *)": sizeSpace["lg"], 91 91 + ":is([data-size=md] *)": sizeSpace["md"], 92 92 + ":is([data-size=sm] *)": sizeSpace["xxs"], 93 93 }, 94 94 + borderWidth: 0, 94 95 paddingTop: { 95 95 - ":is([data-size=lg] *)": sizeSpace["2xl"], 96 96 - ":is([data-size=md] *)": sizeSpace["md"], 96 96 + ":is([data-size=lg] *)": sizeSpace["md"], 97 97 + ":is([data-size=md] *)": sizeSpace["xxs"], 97 98 ":is([data-size=sm] *)": sizeSpace["sm"], 98 99 }, 99 99 - borderWidth: 0, 100 100 outline: "none", 101 101 alignItems: "center", 102 102 backgroundColor: "transparent", ··· 183 183 }, 184 184 tabPanel: { 185 185 paddingBottom: { 186 186 - ":is([data-size=lg] *)": sizeSpace["3xl"], 187 187 - ":is([data-size=md] *)": sizeSpace["2xl"], 188 188 - ":is([data-size=sm] *)": sizeSpace["md"], 186 186 + ":is([data-size=lg] *)": sizeSpace["lg"], 187 187 + ":is([data-size=md] *)": sizeSpace["md"], 188 188 + ":is([data-size=sm] *)": sizeSpace["xxs"], 189 189 }, 190 190 paddingLeft: { 191 191 - ":is([data-size=lg] *)": sizeSpace["3xl"], 192 192 - ":is([data-size=md] *)": sizeSpace["2xl"], 193 193 - ":is([data-size=sm] *)": sizeSpace["md"], 191 191 + ":is([data-size=lg] *)": sizeSpace["lg"], 192 192 + ":is([data-size=md] *)": sizeSpace["md"], 193 193 + ":is([data-size=sm] *)": sizeSpace["xxs"], 194 194 }, 195 195 paddingRight: { 196 196 - ":is([data-size=lg] *)": sizeSpace["3xl"], 197 197 - ":is([data-size=md] *)": sizeSpace["2xl"], 198 198 - ":is([data-size=sm] *)": sizeSpace["md"], 196 196 + ":is([data-size=lg] *)": sizeSpace["lg"], 197 197 + ":is([data-size=md] *)": sizeSpace["md"], 198 198 + ":is([data-size=sm] *)": sizeSpace["xxs"], 199 199 }, 200 200 + outline: "none", 200 201 paddingTop: { 201 201 - ":is([data-size=lg] *)": sizeSpace["3xl"], 202 202 - ":is([data-size=md] *)": sizeSpace["2xl"], 203 203 - ":is([data-size=sm] *)": sizeSpace["md"], 202 202 + ":is([data-size=lg] *)": sizeSpace["lg"], 203 203 + ":is([data-size=md] *)": sizeSpace["md"], 204 204 + ":is([data-size=sm] *)": sizeSpace["xxs"], 204 205 }, 205 205 - outline: "none", 206 206 fontSize: { 207 207 ":is([data-size=lg] *)": fontSize["lg"], 208 208 ":is([data-size=md] *)": fontSize["base"],

+3 -3

packages/hip-ui/src/components/tag-group/index.tsx

reviewed

··· 85 85 paddingBottom: 0, 86 86 paddingLeft: 0, 87 87 paddingRight: 0, 88 88 - paddingTop: 0, 89 88 borderRadius: radius.full, 89 89 + paddingTop: 0, 90 90 borderWidth: 0, 91 91 alignItems: "center", 92 92 backgroundColor: { ··· 106 106 [mediaQueries.reducedMotion]: "none", 107 107 }, 108 108 transitionTimingFunction: "ease-in-out", 109 109 - height: sizeSpace["2xl"], 110 110 - width: sizeSpace["2xl"], 109 109 + height: sizeSpace["md"], 110 110 + width: sizeSpace["md"], 111 111 }, 112 112 tagText: { 113 113 // eslint-disable-next-line @stylexjs/valid-styles

+3 -3

packages/hip-ui/src/components/text-area/index.tsx

reviewed

··· 42 42 }, 43 43 resize: "none", 44 44 minHeight: { 45 45 - ":is([data-size=lg])": sizeSpace["lg"], 46 46 - ":is([data-size=md])": sizeSpace["6xl"], 47 47 - ":is([data-size=sm])": sizeSpace["4xl"], 45 45 + ":is([data-size=lg])": sizeSpace["4xl"], 46 46 + ":is([data-size=md])": sizeSpace["3xl"], 47 47 + ":is([data-size=sm])": sizeSpace["xl"], 48 48 }, 49 49 minWidth: 0, 50 50 paddingBottom: {

+17 -20

packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx

reviewed

··· 77 77 */ 78 78 export const size = stylex.defineVars({ 79 79 none: spacing["0"], 80 80 - xxs: spacing["1"], 81 81 - xs: spacing["1.5"], 82 82 - sm: spacing["2"], 83 83 - md: spacing["2.5"], 84 84 - lg: spacing["10"], 85 85 - xl: spacing["12"], 86 86 - "2xl": spacing["4"], 87 87 - "3xl": spacing["5"], 88 88 - "4xl": spacing["6"], 89 89 - "5xl": spacing["7"], 90 90 - "6xl": spacing["8"], 91 91 - "7xl": spacing["11"], 92 92 - "8xl": spacing["14"], 93 93 - "9xl": spacing["16"], 94 94 - "10xl": spacing["20"], 95 95 - "11xl": spacing["32"], 96 96 - "12xl": spacing["40"], 97 97 - "13xl": spacing["60"], 98 98 - "14xl": spacing["64"], 99 99 - "15xl": spacing["72"], 80 80 + xxs: spacing["2.5"], 81 81 + xs: spacing["3"], 82 82 + sm: spacing["3.5"], 83 83 + md: spacing["4"], 84 84 + lg: spacing["5"], 85 85 + xl: spacing["6"], 86 86 + "2xl": spacing["7"], 87 87 + "3xl": spacing["8"], 88 88 + "4xl": spacing["11"], 89 89 + "5xl": spacing["14"], 90 90 + "6xl": spacing["16"], 91 91 + "7xl": spacing["20"], 92 92 + "8xl": spacing["32"], 93 93 + "9xl": spacing["40"], 94 94 + "10xl": spacing["60"], 95 95 + "11xl": spacing["64"], 96 96 + "12xl": spacing["72"], 100 97 }); 101 98 102 99 // eslint-disable-next-line @stylexjs/enforce-extension

+9 -9

packages/hip-ui/src/components/theme/typography.stylex.tsx

reviewed

··· 68 68 marginBottom: 0, 69 69 marginLeft: 0, 70 70 marginRight: 0, 71 71 - marginTop: 0, 72 71 // eslint-disable-next-line @stylexjs/valid-styles 73 72 fontFamily: fontFamily["title"], 73 73 + marginTop: 0, 74 74 fontSize: { 75 75 default: fontSize["4xl"], 76 76 [breakpoints.md]: fontSize["5xl"], ··· 89 89 marginBottom: 0, 90 90 marginLeft: 0, 91 91 marginRight: 0, 92 92 - marginTop: 0, 93 92 // eslint-disable-next-line @stylexjs/valid-styles 94 93 fontFamily: fontFamily["title"], 94 94 + marginTop: 0, 95 95 fontSize: { 96 96 default: fontSize["3xl"], 97 97 [breakpoints.md]: fontSize["4xl"], ··· 111 111 marginBottom: 0, 112 112 marginLeft: 0, 113 113 marginRight: 0, 114 114 - marginTop: 0, 115 114 // eslint-disable-next-line @stylexjs/valid-styles 116 115 fontFamily: fontFamily["title"], 116 116 + marginTop: 0, 117 117 fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] }, 118 118 // eslint-disable-next-line @stylexjs/valid-styles 119 119 fontWeight: fontWeight["semibold"], ··· 129 129 marginBottom: 0, 130 130 marginLeft: 0, 131 131 marginRight: 0, 132 132 - marginTop: 0, 133 132 // eslint-disable-next-line @stylexjs/valid-styles 134 133 fontFamily: fontFamily["title"], 134 134 + marginTop: 0, 135 135 fontSize: { default: fontSize["xl"] }, 136 136 // eslint-disable-next-line @stylexjs/valid-styles 137 137 fontWeight: fontWeight["semibold"], ··· 147 147 marginBottom: 0, 148 148 marginLeft: 0, 149 149 marginRight: 0, 150 150 - marginTop: 0, 151 150 // eslint-disable-next-line @stylexjs/valid-styles 152 151 fontFamily: fontFamily["title"], 152 152 + marginTop: 0, 153 153 fontSize: { default: fontSize["lg"] }, 154 154 // eslint-disable-next-line @stylexjs/valid-styles 155 155 fontWeight: fontWeight["semibold"], ··· 165 165 marginBottom: 0, 166 166 marginLeft: 0, 167 167 marginRight: 0, 168 168 - marginTop: 0, 169 168 // eslint-disable-next-line @stylexjs/valid-styles 170 169 fontFamily: fontFamily["sans"], 170 170 + marginTop: 0, 171 171 fontSize: { default: fontSize["base"] }, 172 172 lineHeight: lineHeight.base, 173 173 }, ··· 179 179 marginBottom: 0, 180 180 marginLeft: 0, 181 181 marginRight: 0, 182 182 - marginTop: 0, 183 182 // eslint-disable-next-line @stylexjs/valid-styles 184 183 fontFamily: fontFamily["sans"], 184 184 + marginTop: 0, 185 185 fontSize: { default: fontSize["sm"] }, 186 186 lineHeight: lineHeight.base, 187 187 }, ··· 193 193 marginBottom: 0, 194 194 marginLeft: 0, 195 195 marginRight: 0, 196 196 - marginTop: 0, 197 196 // eslint-disable-next-line @stylexjs/valid-styles 198 197 fontFamily: fontFamily["sans"], 198 198 + marginTop: 0, 199 199 fontSize: { default: fontSize["sm"] }, 200 200 // eslint-disable-next-line @stylexjs/valid-styles 201 201 fontWeight: fontWeight["semibold"], ··· 210 210 marginBottom: 0, 211 211 marginLeft: 0, 212 212 marginRight: 0, 213 213 - marginTop: 0, 214 213 // eslint-disable-next-line @stylexjs/valid-styles 215 214 fontFamily: fontFamily["sans"], 215 215 + marginTop: 0, 216 216 fontSize: { default: fontSize["xs"] }, 217 217 // eslint-disable-next-line @stylexjs/valid-styles 218 218 fontWeight: fontWeight["medium"],

+8 -8

packages/hip-ui/src/components/theme/useButtonStyles.ts

reviewed

··· 58 58 ":is(*) svg": { 59 59 flexShrink: 0, 60 60 pointerEvents: "none", 61 61 - height: sizeSpace["2xl"], 62 62 - width: sizeSpace["2xl"], 61 61 + height: sizeSpace["md"], 62 62 + width: sizeSpace["md"], 63 63 }, 64 64 }, 65 65 small: { 66 66 fontSize: fontSize["xs"], 67 67 - height: sizeSpace["5xl"], 67 67 + height: sizeSpace["2xl"], 68 68 paddingLeft: { 69 69 default: horizontalSpace["md"], 70 70 }, ··· 74 74 ":is(*) svg": { 75 75 flexShrink: 0, 76 76 pointerEvents: "none", 77 77 - height: sizeSpace["2xl"], 78 78 - width: sizeSpace["2xl"], 77 77 + height: sizeSpace["md"], 78 78 + width: sizeSpace["md"], 79 79 }, 80 80 }, 81 81 medium: { 82 82 gap: gap["sm"], 83 83 fontSize: fontSize["sm"], 84 84 - height: sizeSpace["6xl"], 84 84 + height: sizeSpace["3xl"], 85 85 paddingLeft: { 86 86 default: horizontalSpace["xl"], 87 87 ":has(svg+*)": horizontalSpace["md"], ··· 91 91 large: { 92 92 gap: gap["md"], 93 93 fontSize: fontSize["sm"], 94 94 - height: sizeSpace["lg"], 94 94 + height: sizeSpace["4xl"], 95 95 paddingLeft: { 96 96 default: horizontalSpace["3xl"], 97 97 ":has(svg+*)": horizontalSpace["md"], ··· 101 101 xl: { 102 102 gap: gap["md"], 103 103 fontSize: fontSize["lg"], 104 104 - height: sizeSpace["xl"], 104 104 + height: sizeSpace["5xl"], 105 105 paddingLeft: { 106 106 default: horizontalSpace["4xl"], 107 107 ":has(svg+*)": horizontalSpace["2xl"],

+4 -4

packages/hip-ui/src/components/theme/useCalendarStyles.ts

reviewed

··· 31 31 paddingBottom: verticalSpace["xxs"], 32 32 paddingLeft: horizontalSpace["xxs"], 33 33 paddingRight: horizontalSpace["xxs"], 34 34 - paddingTop: verticalSpace["xxs"], 35 34 borderRadius: radius.md, 35 35 + paddingTop: verticalSpace["xxs"], 36 36 cornerShape: "squircle", 37 37 textDecoration: { 38 38 ":is([data-unavailable])": "line-through", ··· 43 43 ":is([data-selected])": primaryColor.text2, 44 44 }, 45 45 cursor: "default", 46 46 - lineHeight: sizeSpace["6xl"], 46 46 + lineHeight: sizeSpace["3xl"], 47 47 opacity: { 48 48 ":is([data-outside-visible-range],[data-unavailable])": 0.5, 49 49 }, ··· 53 53 transitionProperty: "color", 54 54 transitionTimingFunction: "ease-in-out", 55 55 zIndex: 0, 56 56 - width: sizeSpace["6xl"], 56 56 + width: sizeSpace["3xl"], 57 57 58 58 "::before": { 59 59 inset: sizeSpace["xxs"], ··· 137 137 marginBottom: 0, 138 138 marginLeft: 0, 139 139 marginRight: 0, 140 140 - marginTop: 0, 141 140 fontSize: fontSize["lg"], 141 141 + marginTop: 0, 142 142 fontWeight: fontWeight["semibold"], 143 143 textAlign: "center", 144 144 },

+9 -9

packages/hip-ui/src/components/theme/useInputStyles.ts

reviewed

··· 46 46 ":is(*) svg": { 47 47 flexShrink: 0, 48 48 pointerEvents: "none", 49 49 - height: sizeSpace["2xl"], 50 50 - width: sizeSpace["2xl"], 49 49 + height: sizeSpace["md"], 50 50 + width: sizeSpace["md"], 51 51 }, 52 52 }, 53 53 addonSm: { ··· 89 89 paddingBottom: 0, 90 90 paddingLeft: 0, 91 91 paddingRight: 0, 92 92 - paddingTop: 0, 93 92 borderRadius: radius.lg, 93 93 + paddingTop: 0, 94 94 borderWidth: 0, 95 95 96 96 cornerShape: "squircle", ··· 340 340 paddingRight: horizontalSpace["xl"], 341 341 }, 342 342 wrapperSizeSm: { 343 343 - height: sizeSpace["4xl"], 343 343 + height: sizeSpace["xl"], 344 344 }, 345 345 wrapperSizeMd: { 346 346 - height: sizeSpace["6xl"], 346 346 + height: sizeSpace["3xl"], 347 347 }, 348 348 wrapperSizeLg: { 349 349 - height: sizeSpace["lg"], 349 349 + height: sizeSpace["4xl"], 350 350 }, 351 351 horizontalLabel: { 352 352 gap: gap["2xl"], ··· 360 360 paddingRight: 0, 361 361 }, 362 362 horizontalLabelTextSm: { 363 363 - lineHeight: sizeSpace["4xl"], 363 363 + lineHeight: sizeSpace["xl"], 364 364 }, 365 365 horizontalLabelTextMd: { 366 366 - lineHeight: sizeSpace["6xl"], 366 366 + lineHeight: sizeSpace["3xl"], 367 367 }, 368 368 horizontalLabelTextLg: { 369 369 fontSize: fontSize["base"], 370 370 fontWeight: fontWeight["medium"], 371 371 - lineHeight: sizeSpace["lg"], 371 371 + lineHeight: sizeSpace["4xl"], 372 372 }, 373 373 label: { 374 374 paddingLeft: horizontalSpace["xs"],

+6 -6

packages/hip-ui/src/components/theme/useListBoxItemStyles.ts

reviewed

··· 40 40 paddingRight: horizontalSpace["xs"], 41 41 paddingTop: verticalSpace["xxs"], 42 42 }, 43 43 - sm: { minHeight: sizeSpace["5xl"] }, 44 44 - md: { minHeight: sizeSpace["7xl"] }, 45 45 - lg: { minHeight: sizeSpace["xl"] }, 43 43 + sm: { minHeight: sizeSpace["2xl"] }, 44 44 + md: { minHeight: sizeSpace["4xl"] }, 45 45 + lg: { minHeight: sizeSpace["5xl"] }, 46 46 itemInner: { 47 47 borderRadius: radius.md, 48 48 cornerShape: "squircle", ··· 96 96 justifyContent: "center", 97 97 marginBottom: `calc(${verticalSpace["sm"]} * -1)`, 98 98 marginTop: `calc(${verticalSpace["sm"]} * -1)`, 99 99 - minWidth: sizeSpace["2xl"], 99 99 + minWidth: sizeSpace["md"], 100 100 101 101 // eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles 102 102 ":is(*) svg": { 103 103 flexShrink: 0, 104 104 pointerEvents: "none", 105 105 - height: sizeSpace["2xl"], 106 106 - width: sizeSpace["2xl"], 105 105 + height: sizeSpace["md"], 106 106 + width: sizeSpace["md"], 107 107 }, 108 108 }, 109 109 label: {

+4 -4

packages/hip-ui/src/components/theme/usePopoverStyles.ts

reviewed

··· 19 19 }, 20 20 animation: { 21 21 "--origin-x": { 22 22 - ":is([data-placement=left],[data-placement=left] > *)": sizeSpace["2xl"], 23 23 - ":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["2xl"]} * -1)`, 22 22 + ":is([data-placement=left],[data-placement=left] > *)": sizeSpace["md"], 23 23 + ":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["md"]} * -1)`, 24 24 }, 25 25 "--origin-y": { 26 26 - ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["2xl"]} * -1)`, 27 27 - ":is([data-placement=top],[data-placement=top] > *)": sizeSpace["2xl"], 26 26 + ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["md"]} * -1)`, 27 27 + ":is([data-placement=top],[data-placement=top] > *)": sizeSpace["md"], 28 28 }, 29 29 opacity: { 30 30 default: 1,

+3 -3

packages/hip-ui/src/components/toast/Toast.tsx

reviewed

··· 55 55 display: "flex", 56 56 flexDirection: "row", 57 57 justifyContent: "space-between", 58 58 - minWidth: sizeSpace["13xl"], 58 58 + minWidth: sizeSpace["10xl"], 59 59 paddingBottom: verticalSpace["xl"], 60 60 paddingLeft: horizontalSpace["3xl"], 61 61 paddingRight: horizontalSpace["3xl"], ··· 101 101 }, 102 102 flexShrink: 0, 103 103 pointerEvents: "none", 104 104 - height: sizeSpace["2xl"], 105 105 - width: sizeSpace["2xl"], 104 104 + height: sizeSpace["md"], 105 105 + width: sizeSpace["md"], 106 106 }, 107 107 }, 108 108 critical: {

+3 -3

packages/hip-ui/src/components/toggle-button/index.tsx

reviewed

··· 67 67 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["md"], 68 68 }, 69 69 width: { 70 70 - ":has(svg:only-child)": sizeSpace["5xl"], 70 70 + ":has(svg:only-child)": sizeSpace["2xl"], 71 71 }, 72 72 }, 73 73 md: { ··· 78 78 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["xl"], 79 79 }, 80 80 width: { 81 81 - ":has(svg:only-child)": sizeSpace["6xl"], 81 81 + ":has(svg:only-child)": sizeSpace["3xl"], 82 82 }, 83 83 }, 84 84 lg: { ··· 89 89 ":has(> * + *, > *:not(svg):only-child)": horizontalSpace["3xl"], 90 90 }, 91 91 width: { 92 92 - ":has(svg:only-child)": sizeSpace["lg"], 92 92 + ":has(svg:only-child)": sizeSpace["4xl"], 93 93 }, 94 94 }, 95 95 });

+5 -5

packages/hip-ui/src/components/tree/index.tsx

reviewed

··· 48 48 backgroundColor: primaryColor.component2, 49 49 }, 50 50 spacer: { 51 51 - width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["md"]})`, 51 51 + width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["xxs"]})`, 52 52 }, 53 53 content: { 54 54 gap: gap["md"], ··· 83 83 84 84 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 85 85 ":is(*) svg": { 86 86 - height: sizeSpace["md"], 87 87 - width: sizeSpace["md"], 86 86 + height: sizeSpace["xxs"], 87 87 + width: sizeSpace["xxs"], 88 88 }, 89 89 }, 90 90 addon: { ··· 112 112 display: "flex", 113 113 justifyContent: "center", 114 114 115 115 - height: sizeSpace["6xl"], 116 116 - width: sizeSpace["6xl"], 115 115 + height: sizeSpace["3xl"], 116 116 + width: sizeSpace["3xl"], 117 117 }, 118 118 }); 119 119