A design system in a box.
hip-ui.tngl.io/docs/introduction
squircle
+401
-123
+17
-4
apps/docs/src/components/aspect-ratio/index.tsx
+17
-4
apps/docs/src/components/aspect-ratio/index.tsx
···
12
12
position: "relative",
13
13
},
14
14
rounded: {
15
-
borderBottomLeftRadius: radius["md"],
16
-
borderBottomRightRadius: radius["md"],
17
-
borderTopLeftRadius: radius["md"],
18
-
borderTopRightRadius: radius["md"],
15
+
borderBottomLeftRadius: {
16
+
default: radius["md"],
17
+
"@supports (corner-shape: squircle)": radius["3xl"],
18
+
},
19
+
borderBottomRightRadius: {
20
+
default: radius["md"],
21
+
"@supports (corner-shape: squircle)": radius["3xl"],
22
+
},
23
+
borderTopLeftRadius: {
24
+
default: radius["md"],
25
+
"@supports (corner-shape: squircle)": radius["3xl"],
26
+
},
27
+
borderTopRightRadius: {
28
+
default: radius["md"],
29
+
"@supports (corner-shape: squircle)": radius["3xl"],
30
+
},
31
+
cornerShape: "squircle",
19
32
},
20
33
imageContainer: {
21
34
inset: 0,
+17
-4
apps/docs/src/components/avatar/index.tsx
+17
-4
apps/docs/src/components/avatar/index.tsx
···
25
25
overflow: "hidden",
26
26
27
27
borderRadius: {
28
-
":is([data-size=sm])": radius["sm"],
29
-
":is([data-size=md])": radius["md"],
30
-
":is([data-size=lg])": radius["lg"],
31
-
":is([data-size=xl])": radius["xl"],
28
+
":is([data-size=sm])": {
29
+
default: radius["sm"],
30
+
"@supports (corner-shape: squircle)": radius["3xl"],
31
+
},
32
+
":is([data-size=md])": {
33
+
default: radius["md"],
34
+
"@supports (corner-shape: squircle)": radius["3xl"],
35
+
},
36
+
":is([data-size=lg])": {
37
+
default: radius["lg"],
38
+
"@supports (corner-shape: squircle)": radius["3xl"],
39
+
},
40
+
":is([data-size=xl])": {
41
+
default: radius["xl"],
42
+
"@supports (corner-shape: squircle)": radius["3xl"],
43
+
},
32
44
},
45
+
cornerShape: "squircle",
33
46
height: {
34
47
":is([data-size=sm])": spacing["6"],
35
48
":is([data-size=md])": spacing["8"],
+9
-2
apps/docs/src/components/badge/index.tsx
+9
-2
apps/docs/src/components/badge/index.tsx
···
24
24
fontWeight: fontWeight["semibold"],
25
25
overflow: "hidden",
26
26
width: "fit-content",
27
+
cornerShape: "squircle",
27
28
},
28
29
sm: {
29
-
borderRadius: radius["sm"],
30
+
borderRadius: {
31
+
default: radius["sm"],
32
+
"@supports (corner-shape: squircle)": radius["3xl"],
33
+
},
30
34
fontSize: fontSize["xs"],
31
35
gap: spacing["1.5"],
32
36
height: spacing["5"],
···
42
46
},
43
47
},
44
48
md: {
45
-
borderRadius: radius["md"],
49
+
borderRadius: {
50
+
default: radius["md"],
51
+
"@supports (corner-shape: squircle)": radius["3xl"],
52
+
},
46
53
fontSize: fontSize["sm"],
47
54
gap: spacing["1.5"],
48
55
height: spacing["6"],
+5
-1
apps/docs/src/components/card/index.tsx
+5
-1
apps/docs/src/components/card/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
card: {
14
-
borderRadius: radius["lg"],
14
+
borderRadius: {
15
+
default: radius["lg"],
16
+
"@supports (corner-shape: squircle)": radius["3xl"],
17
+
},
18
+
cornerShape: "squircle",
15
19
display: "flex",
16
20
flexDirection: "column",
17
21
fontFamily: fontFamily["sans"],
+5
-1
apps/docs/src/components/checkbox/index.tsx
+5
-1
apps/docs/src/components/checkbox/index.tsx
···
40
40
display: "flex",
41
41
justifyContent: "center",
42
42
43
-
borderRadius: radius["sm"],
43
+
borderRadius: {
44
+
default: radius["sm"],
45
+
"@supports (corner-shape: squircle)": radius["full"],
46
+
},
47
+
cornerShape: "squircle",
44
48
borderWidth: 2,
45
49
height: spacing["4"],
46
50
width: spacing["4"],
+10
-2
apps/docs/src/components/color-area/index.tsx
+10
-2
apps/docs/src/components/color-area/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
colorArea: {
19
-
borderRadius: radius["md"],
19
+
borderRadius: {
20
+
default: radius["md"],
21
+
"@supports (corner-shape: squircle)": radius["3xl"],
22
+
},
23
+
cornerShape: "squircle",
20
24
filter: {
21
25
":is([data-disabled])": "grayscale(1)",
22
26
},
···
24
28
},
25
29
thumb: {
26
30
borderColor: "white",
27
-
borderRadius: radius["full"],
31
+
borderRadius: {
32
+
default: radius["full"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
34
+
},
35
+
cornerShape: "squircle",
28
36
borderStyle: "solid",
29
37
borderWidth: 2,
30
38
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
+5
-1
apps/docs/src/components/color-slider/index.tsx
+5
-1
apps/docs/src/components/color-slider/index.tsx
···
48
48
},
49
49
},
50
50
track: {
51
-
borderRadius: radius.full,
51
+
borderRadius: {
52
+
default: radius["full"],
53
+
"@supports (corner-shape: squircle)": radius["3xl"],
54
+
},
55
+
cornerShape: "squircle",
52
56
gridArea: "track",
53
57
height: {
54
58
":is([data-size=sm] *)": spacing["3"],
+13
-3
apps/docs/src/components/color-swatch/index.tsx
+13
-3
apps/docs/src/components/color-swatch/index.tsx
···
18
18
boxSizing: "border-box",
19
19
20
20
borderRadius: {
21
-
":is([data-size=sm])": radius.sm,
22
-
":is([data-size=md])": radius.md,
23
-
":is([data-size=lg])": radius.lg,
21
+
":is([data-size=sm])": {
22
+
default: radius["sm"],
23
+
"@supports (corner-shape: squircle)": radius["3xl"],
24
+
},
25
+
":is([data-size=md])": {
26
+
default: radius["md"],
27
+
"@supports (corner-shape: squircle)": radius["3xl"],
28
+
},
29
+
":is([data-size=lg])": {
30
+
default: radius["lg"],
31
+
"@supports (corner-shape: squircle)": radius["3xl"],
32
+
},
24
33
},
34
+
cornerShape: "squircle",
25
35
height: {
26
36
":is([data-size=sm])": spacing["4"],
27
37
":is([data-size=md])": spacing["6"],
+5
-1
apps/docs/src/components/disclosure/index.tsx
+5
-1
apps/docs/src/components/disclosure/index.tsx
···
31
31
":is([data-hovered=true])": uiColor.component2,
32
32
":is([data-pressed=true])": uiColor.component3,
33
33
},
34
-
borderRadius: radius["md"],
34
+
borderRadius: {
35
+
default: radius["md"],
36
+
"@supports (corner-shape: squircle)": radius["2xl"],
37
+
},
38
+
cornerShape: "squircle",
35
39
borderWidth: 0,
36
40
color: uiColor.text1,
37
41
display: "flex",
+9
-14
apps/docs/src/components/file-drop-zone/index.tsx
+9
-14
apps/docs/src/components/file-drop-zone/index.tsx
···
27
27
":is([data-drop-target])": primaryColor.component1,
28
28
},
29
29
borderColor: {
30
-
default: uiColor.border2,
30
+
default: uiColor.border3,
31
31
":is([data-drop-target])": primaryColor.solid1,
32
32
},
33
-
borderRadius: radius.md,
33
+
borderRadius: {
34
+
default: radius["md"],
35
+
"@supports (corner-shape: squircle)": radius["3xl"],
36
+
},
37
+
cornerShape: "squircle",
34
38
borderStyle: {
35
39
default: "dashed",
36
40
":is([data-drop-target])": "solid",
37
41
},
38
-
borderWidth: 1,
42
+
borderWidth: 2,
39
43
boxSizing: "border-box",
40
-
padding: spacing["2"],
44
+
padding: spacing["4"],
41
45
42
46
alignItems: "center",
43
47
display: "flex",
···
82
86
>
83
87
{({ isDropTarget }) => {
84
88
if (isDropTarget) {
85
-
return (
86
-
<Text
87
-
size="xs"
88
-
variant="secondary"
89
-
weight="medium"
90
-
style={styles.message}
91
-
>
92
-
Drop to upload
93
-
</Text>
94
-
);
89
+
return "Drop to upload";
95
90
}
96
91
97
92
return (
+6
-2
apps/docs/src/components/kbd/index.tsx
+6
-2
apps/docs/src/components/kbd/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
kbd: {
12
-
backgroundColor: uiColor.component1,
13
-
borderRadius: radius.sm,
12
+
backgroundColor: uiColor.component2,
13
+
borderRadius: {
14
+
default: radius["sm"],
15
+
"@supports (corner-shape: squircle)": radius["3xl"],
16
+
},
17
+
cornerShape: "squircle",
14
18
color: uiColor.text1,
15
19
fontFamily: fontFamily["sans"],
16
20
fontSize: fontSize.sm,
-2
apps/docs/src/components/popover/index.tsx
-2
apps/docs/src/components/popover/index.tsx
···
10
10
Dialog,
11
11
} from "react-aria-components";
12
12
13
-
import { radius } from "../theme/radius.stylex";
14
13
import { uiColor } from "../theme/semantic-color.stylex";
15
14
import { spacing } from "../theme/spacing.stylex";
16
15
import { StyleXComponentProps } from "../theme/types";
···
22
21
},
23
22
wrapper: {
24
23
borderColor: uiColor.border2,
25
-
borderRadius: radius["md"],
26
24
borderStyle: "solid",
27
25
borderWidth: 1,
28
26
},
+5
-1
apps/docs/src/components/skeleton/index.tsx
+5
-1
apps/docs/src/components/skeleton/index.tsx
+5
-1
apps/docs/src/components/text-area/index.tsx
+5
-1
apps/docs/src/components/text-area/index.tsx
+1
apps/docs/src/components/theme/media-queries.stylex.tsx
+1
apps/docs/src/components/theme/media-queries.stylex.tsx
+6
-2
apps/docs/src/components/theme/useButtonStyles.ts
+6
-2
apps/docs/src/components/theme/useButtonStyles.ts
···
24
24
},
25
25
base: {
26
26
alignItems: "center",
27
-
borderRadius: radius["md"],
27
+
borderRadius: {
28
+
default: radius["md"],
29
+
"@supports (corner-shape: squircle)": radius["full"],
30
+
},
31
+
cornerShape: "squircle",
28
32
borderStyle: "solid",
29
33
borderWidth: 1,
30
34
boxSizing: "border-box",
···
144
148
const group = use(ButtonGroupContext);
145
149
146
150
return [
147
-
styles.base,
148
151
group?.orientation === "horizontal" &&
149
152
group.variant === "grouped" &&
150
153
styles.groupHorizontal,
···
201
204
size === "md" && styles.medium,
202
205
size === "lg" && styles.large,
203
206
group?.variant === "separate" && styles.separate,
207
+
styles.base,
204
208
];
205
209
};
+5
-1
apps/docs/src/components/theme/useDialogStyles.ts
+5
-1
apps/docs/src/components/theme/useDialogStyles.ts
···
34
34
transitionTimingFunction: "ease-in-out",
35
35
},
36
36
modal: {
37
-
borderRadius: radius["lg"],
37
+
borderRadius: {
38
+
default: radius["lg"],
39
+
"@supports (corner-shape: squircle)": radius["4xl"],
40
+
},
41
+
cornerShape: "squircle",
38
42
boxShadow: shadow["lg"],
39
43
display: "flex",
40
44
flexDirection: "column",
+5
-1
apps/docs/src/components/theme/useInputStyles.ts
+5
-1
apps/docs/src/components/theme/useInputStyles.ts
+6
-2
apps/docs/src/components/theme/useListBoxItemStyles.ts
+6
-2
apps/docs/src/components/theme/useListBoxItemStyles.ts
···
45
45
[":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
46
46
uiColor.component3,
47
47
},
48
-
borderRadius: radius["md"],
48
+
borderRadius: {
49
+
default: radius["md"],
50
+
"@supports (corner-shape: squircle)": radius["3xl"],
51
+
},
52
+
cornerShape: "squircle",
49
53
boxSizing: "border-box",
50
54
color: {
51
55
default: uiColor.text2,
···
84
88
marginTop: `calc(${spacing["2"]} * -1)`,
85
89
minWidth: spacing["4"],
86
90
87
-
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
91
+
// eslint-disa le-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
88
92
":is(*) svg": {
89
93
flexShrink: 0,
90
94
height: spacing["4"],
+5
-1
apps/docs/src/components/theme/usePopoverStyles.ts
+5
-1
apps/docs/src/components/theme/usePopoverStyles.ts
···
8
8
9
9
const styles = stylex.create({
10
10
popover: {
11
-
borderRadius: radius["md"],
11
+
borderRadius: {
12
+
default: radius["md"],
13
+
"@supports (corner-shape: squircle)": radius["3xl"],
14
+
},
15
+
cornerShape: "squircle",
12
16
boxShadow: shadow["md"],
13
17
outline: "none",
14
18
overflow: "auto",
+5
-1
apps/docs/src/components/tooltip/index.tsx
+5
-1
apps/docs/src/components/tooltip/index.tsx
···
19
19
const tooltipStyle = stylex.create({
20
20
content: {
21
21
backgroundColor: uiInverted.bg,
22
-
borderRadius: radius["md"],
22
+
borderRadius: {
23
+
default: radius["md"],
24
+
"@supports (corner-shape: squircle)": radius["full"],
25
+
},
26
+
cornerShape: "squircle",
23
27
boxShadow: shadow["sm"],
24
28
color: uiInverted.text1,
25
29
fontFamily: fontFamily["sans"],
+1
-10
apps/docs/src/examples/file-drop-zone/basic.tsx
+1
-10
apps/docs/src/examples/file-drop-zone/basic.tsx
···
3
3
export function Basic() {
4
4
return (
5
5
<FileDropZone onDrop={(files) => console.log("Files dropped:", files)}>
6
-
<div
7
-
style={{
8
-
padding: "2rem",
9
-
border: "2px dashed #ccc",
10
-
borderRadius: "8px",
11
-
textAlign: "center",
12
-
}}
13
-
>
14
-
Drop files here or click to upload
15
-
</div>
6
+
Drop files here or click to upload
16
7
</FileDropZone>
17
8
);
18
9
}
+5
-1
apps/docs/src/examples/foundations/shadow.tsx
+5
-1
apps/docs/src/examples/foundations/shadow.tsx
···
16
16
},
17
17
box: {
18
18
borderColor: uiColor.border3,
19
-
borderRadius: radius.lg,
19
+
borderRadius: {
20
+
default: radius["lg"],
21
+
"@supports (corner-shape: squircle)": radius["4xl"],
22
+
},
23
+
cornerShape: "squircle",
20
24
borderStyle: "solid",
21
25
borderWidth: 1,
22
26
height: spacing["32"],
+5
-1
apps/docs/src/lib/Example.tsx
+5
-1
apps/docs/src/lib/Example.tsx
···
12
12
13
13
const styles = stylex.create({
14
14
card: {
15
-
borderRadius: radius["lg"],
15
+
borderRadius: {
16
+
default: radius["lg"],
17
+
"@supports (corner-shape: squircle)": radius["4xl"],
18
+
},
19
+
cornerShape: "squircle",
16
20
marginBottom: spacing["8"],
17
21
marginTop: spacing["8"],
18
22
overflow: "hidden",
+5
-1
apps/docs/src/lib/PropDocs.tsx
+5
-1
apps/docs/src/lib/PropDocs.tsx
···
47
47
/* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */
48
48
":is(*) pre": {
49
49
borderColor: uiColor.border1,
50
-
borderRadius: radius["md"],
50
+
borderRadius: {
51
+
default: radius["md"],
52
+
"@supports (corner-shape: squircle)": radius["3xl"],
53
+
},
54
+
cornerShape: "squircle",
51
55
borderStyle: "solid",
52
56
borderWidth: 1,
53
57
margin: 0,
+10
-2
apps/docs/src/routes/_docs.invoice-app.tsx
+10
-2
apps/docs/src/routes/_docs.invoice-app.tsx
···
81
81
color: successColor.solid2,
82
82
},
83
83
creditCardWrapper: {
84
-
borderRadius: radius["lg"],
84
+
borderRadius: {
85
+
default: radius["lg"],
86
+
"@supports (corner-shape: squircle)": radius["4xl"],
87
+
},
88
+
cornerShape: "squircle",
85
89
padding: spacing["8"],
86
90
},
87
91
creditCard: {
88
92
backgroundImage: `linear-gradient(135deg, ${primaryColor.solid2} 0%, ${primaryColor.text1} 100%)`,
89
-
borderRadius: radius["lg"],
93
+
borderRadius: {
94
+
default: radius["lg"],
95
+
"@supports (corner-shape: squircle)": radius["4xl"],
96
+
},
97
+
cornerShape: "squircle",
90
98
fontFamily: fontFamily["mono"],
91
99
height: spacing["40"],
92
100
padding: spacing["4"],
+5
-1
apps/docs/src/routes/docs.$.tsx
+5
-1
apps/docs/src/routes/docs.$.tsx
···
74
74
},
75
75
pre: {
76
76
borderColor: uiColor.border2,
77
-
borderRadius: radius["lg"],
77
+
borderRadius: {
78
+
default: radius["lg"],
79
+
"@supports (corner-shape: squircle)": radius["4xl"],
80
+
},
81
+
cornerShape: "squircle",
78
82
borderStyle: "solid",
79
83
borderWidth: 1,
80
84
marginBottom: spacing["8"],
+5
-1
apps/docs/src/showcases/canvas-editor.tsx
+5
-1
apps/docs/src/showcases/canvas-editor.tsx
···
80
80
main: {
81
81
backgroundColor: uiColor.bg,
82
82
borderColor: uiColor.border2,
83
-
borderRadius: radius.lg,
83
+
borderRadius: {
84
+
default: radius["lg"],
85
+
"@supports (corner-shape: squircle)": radius["2xl"],
86
+
},
87
+
cornerShape: "squircle",
84
88
borderStyle: "solid",
85
89
borderWidth: 1,
86
90
boxShadow: shadow.md,
+10
-2
apps/docs/src/showcases/invoice.tsx
+10
-2
apps/docs/src/showcases/invoice.tsx
···
80
80
color: successColor.solid2,
81
81
},
82
82
creditCardWrapper: {
83
-
borderRadius: radius["lg"],
83
+
borderRadius: {
84
+
default: radius["lg"],
85
+
"@supports (corner-shape: squircle)": radius["4xl"],
86
+
},
87
+
cornerShape: "squircle",
84
88
padding: spacing["8"],
85
89
},
86
90
creditCard: {
87
91
backgroundImage: `linear-gradient(135deg, ${primaryColor.solid2} 0%, ${primaryColor.text1} 100%)`,
88
-
borderRadius: radius["lg"],
92
+
borderRadius: {
93
+
default: radius["lg"],
94
+
"@supports (corner-shape: squircle)": radius["4xl"],
95
+
},
96
+
cornerShape: "squircle",
89
97
fontFamily: fontFamily["mono"],
90
98
height: spacing["40"],
91
99
padding: spacing["4"],
+15
-3
apps/docs/src/showcases/llm.tsx
+15
-3
apps/docs/src/showcases/llm.tsx
···
46
46
main: {
47
47
backgroundColor: uiColor.bg,
48
48
borderColor: uiColor.border1,
49
-
borderRadius: radius.lg,
49
+
borderRadius: {
50
+
default: radius["lg"],
51
+
"@supports (corner-shape: squircle)": radius["2xl"],
52
+
},
53
+
cornerShape: "squircle",
50
54
borderStyle: "solid",
51
55
borderWidth: 1,
52
56
boxShadow: shadow.md,
···
101
105
copyBox: {
102
106
backgroundColor: uiColor.bgSubtle,
103
107
borderColor: uiColor.border1,
104
-
borderRadius: radius.md,
108
+
borderRadius: {
109
+
default: radius["md"],
110
+
"@supports (corner-shape: squircle)": radius["3xl"],
111
+
},
112
+
cornerShape: "squircle",
105
113
borderStyle: "solid",
106
114
borderWidth: 1,
107
115
paddingBottom: spacing["1"],
···
112
120
preview: {
113
121
backgroundColor: uiColor.component3,
114
122
borderColor: uiColor.border2,
115
-
borderRadius: radius.md,
123
+
borderRadius: {
124
+
default: radius["md"],
125
+
"@supports (corner-shape: squircle)": radius["3xl"],
126
+
},
127
+
cornerShape: "squircle",
116
128
borderStyle: "solid",
117
129
borderWidth: 1,
118
130
padding: spacing["4"],
+11
-2
apps/docs/src/showcases/music.tsx
+11
-2
apps/docs/src/showcases/music.tsx
···
37
37
38
38
import { primaryColor } from "../components/theme/semantic-color.stylex";
39
39
import { spacing } from "../components/theme/spacing.stylex";
40
+
import { radius } from "../components/theme/radius.stylex";
40
41
41
42
const styles = stylex.create({
42
43
main: {
···
67
68
backgroundColor: {
68
69
":hover": primaryColor.component2,
69
70
},
70
-
borderRadius: spacing["2"],
71
+
borderRadius: {
72
+
default: radius["sm"],
73
+
"@supports (corner-shape: squircle)": radius["3xl"],
74
+
},
75
+
cornerShape: "squircle",
71
76
cursor: "pointer",
72
77
marginLeft: `calc(${spacing["3"]} * -1)`,
73
78
marginRight: `calc(${spacing["3"]} * -1)`,
···
86
91
priceBox: {
87
92
backgroundColor: primaryColor.bgSubtle,
88
93
borderColor: primaryColor.border2,
89
-
borderRadius: spacing["1"],
94
+
borderRadius: {
95
+
default: radius["sm"],
96
+
"@supports (corner-shape: squircle)": radius["3xl"],
97
+
},
98
+
cornerShape: "squircle",
90
99
borderStyle: "solid",
91
100
borderWidth: 1,
92
101
color: primaryColor.text1,
+5
-1
apps/docs/src/showcases/todo-table.tsx
+5
-1
apps/docs/src/showcases/todo-table.tsx
···
54
54
main: {
55
55
backgroundColor: uiColor.bg,
56
56
borderColor: uiColor.border1,
57
-
borderRadius: radius.lg,
57
+
borderRadius: {
58
+
default: radius["lg"],
59
+
"@supports (corner-shape: squircle)": radius["2xl"],
60
+
},
61
+
cornerShape: "squircle",
58
62
borderStyle: "solid",
59
63
borderWidth: 1,
60
64
boxShadow: shadow.md,
+17
-4
packages/hip-ui/src/components/aspect-ratio/index.tsx
+17
-4
packages/hip-ui/src/components/aspect-ratio/index.tsx
···
12
12
position: "relative",
13
13
},
14
14
rounded: {
15
-
borderBottomLeftRadius: radius["md"],
16
-
borderBottomRightRadius: radius["md"],
17
-
borderTopLeftRadius: radius["md"],
18
-
borderTopRightRadius: radius["md"],
15
+
borderBottomLeftRadius: {
16
+
default: radius["md"],
17
+
"@supports (corner-shape: squircle)": radius["3xl"],
18
+
},
19
+
borderBottomRightRadius: {
20
+
default: radius["md"],
21
+
"@supports (corner-shape: squircle)": radius["3xl"],
22
+
},
23
+
borderTopLeftRadius: {
24
+
default: radius["md"],
25
+
"@supports (corner-shape: squircle)": radius["3xl"],
26
+
},
27
+
borderTopRightRadius: {
28
+
default: radius["md"],
29
+
"@supports (corner-shape: squircle)": radius["3xl"],
30
+
},
31
+
cornerShape: "squircle",
19
32
},
20
33
imageContainer: {
21
34
inset: 0,
+17
-4
packages/hip-ui/src/components/avatar/index.tsx
+17
-4
packages/hip-ui/src/components/avatar/index.tsx
···
25
25
overflow: "hidden",
26
26
27
27
borderRadius: {
28
-
":is([data-size=sm])": radius["sm"],
29
-
":is([data-size=md])": radius["md"],
30
-
":is([data-size=lg])": radius["lg"],
31
-
":is([data-size=xl])": radius["xl"],
28
+
":is([data-size=sm])": {
29
+
default: radius["sm"],
30
+
"@supports (corner-shape: squircle)": radius["3xl"],
31
+
},
32
+
":is([data-size=md])": {
33
+
default: radius["md"],
34
+
"@supports (corner-shape: squircle)": radius["3xl"],
35
+
},
36
+
":is([data-size=lg])": {
37
+
default: radius["lg"],
38
+
"@supports (corner-shape: squircle)": radius["3xl"],
39
+
},
40
+
":is([data-size=xl])": {
41
+
default: radius["xl"],
42
+
"@supports (corner-shape: squircle)": radius["3xl"],
43
+
},
32
44
},
45
+
cornerShape: "squircle",
33
46
height: {
34
47
":is([data-size=sm])": spacing["6"],
35
48
":is([data-size=md])": spacing["8"],
+9
-2
packages/hip-ui/src/components/badge/index.tsx
+9
-2
packages/hip-ui/src/components/badge/index.tsx
···
24
24
fontWeight: fontWeight["semibold"],
25
25
overflow: "hidden",
26
26
width: "fit-content",
27
+
cornerShape: "squircle",
27
28
},
28
29
sm: {
29
-
borderRadius: radius["sm"],
30
+
borderRadius: {
31
+
default: radius["sm"],
32
+
"@supports (corner-shape: squircle)": radius["3xl"],
33
+
},
30
34
fontSize: fontSize["xs"],
31
35
gap: spacing["1.5"],
32
36
height: spacing["5"],
···
42
46
},
43
47
},
44
48
md: {
45
-
borderRadius: radius["md"],
49
+
borderRadius: {
50
+
default: radius["md"],
51
+
"@supports (corner-shape: squircle)": radius["3xl"],
52
+
},
46
53
fontSize: fontSize["sm"],
47
54
gap: spacing["1.5"],
48
55
height: spacing["6"],
+5
-1
packages/hip-ui/src/components/card/index.tsx
+5
-1
packages/hip-ui/src/components/card/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
card: {
14
-
borderRadius: radius["lg"],
14
+
borderRadius: {
15
+
default: radius["lg"],
16
+
"@supports (corner-shape: squircle)": radius["3xl"],
17
+
},
18
+
cornerShape: "squircle",
15
19
display: "flex",
16
20
flexDirection: "column",
17
21
fontFamily: fontFamily["sans"],
+5
-1
packages/hip-ui/src/components/checkbox/index.tsx
+5
-1
packages/hip-ui/src/components/checkbox/index.tsx
···
40
40
display: "flex",
41
41
justifyContent: "center",
42
42
43
-
borderRadius: radius["sm"],
43
+
borderRadius: {
44
+
default: radius["sm"],
45
+
"@supports (corner-shape: squircle)": radius["full"],
46
+
},
47
+
cornerShape: "squircle",
44
48
borderWidth: 2,
45
49
height: spacing["4"],
46
50
width: spacing["4"],
+10
-2
packages/hip-ui/src/components/color-area/index.tsx
+10
-2
packages/hip-ui/src/components/color-area/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
colorArea: {
19
-
borderRadius: radius["md"],
19
+
borderRadius: {
20
+
default: radius["md"],
21
+
"@supports (corner-shape: squircle)": radius["3xl"],
22
+
},
23
+
cornerShape: "squircle",
20
24
filter: {
21
25
":is([data-disabled])": "grayscale(1)",
22
26
},
···
24
28
},
25
29
thumb: {
26
30
borderColor: "white",
27
-
borderRadius: radius["full"],
31
+
borderRadius: {
32
+
default: radius["full"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
34
+
},
35
+
cornerShape: "squircle",
28
36
borderStyle: "solid",
29
37
borderWidth: 2,
30
38
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
+5
-1
packages/hip-ui/src/components/color-slider/index.tsx
+5
-1
packages/hip-ui/src/components/color-slider/index.tsx
···
48
48
},
49
49
},
50
50
track: {
51
-
borderRadius: radius.full,
51
+
borderRadius: {
52
+
default: radius["full"],
53
+
"@supports (corner-shape: squircle)": radius["3xl"],
54
+
},
55
+
cornerShape: "squircle",
52
56
gridArea: "track",
53
57
height: {
54
58
":is([data-size=sm] *)": spacing["3"],
+13
-3
packages/hip-ui/src/components/color-swatch/index.tsx
+13
-3
packages/hip-ui/src/components/color-swatch/index.tsx
···
18
18
boxSizing: "border-box",
19
19
20
20
borderRadius: {
21
-
":is([data-size=sm])": radius.sm,
22
-
":is([data-size=md])": radius.md,
23
-
":is([data-size=lg])": radius.lg,
21
+
":is([data-size=sm])": {
22
+
default: radius["sm"],
23
+
"@supports (corner-shape: squircle)": radius["3xl"],
24
+
},
25
+
":is([data-size=md])": {
26
+
default: radius["md"],
27
+
"@supports (corner-shape: squircle)": radius["3xl"],
28
+
},
29
+
":is([data-size=lg])": {
30
+
default: radius["lg"],
31
+
"@supports (corner-shape: squircle)": radius["3xl"],
32
+
},
24
33
},
34
+
cornerShape: "squircle",
25
35
height: {
26
36
":is([data-size=sm])": spacing["4"],
27
37
":is([data-size=md])": spacing["6"],
+5
-1
packages/hip-ui/src/components/disclosure/index.tsx
+5
-1
packages/hip-ui/src/components/disclosure/index.tsx
···
31
31
":is([data-hovered=true])": uiColor.component2,
32
32
":is([data-pressed=true])": uiColor.component3,
33
33
},
34
-
borderRadius: radius["md"],
34
+
borderRadius: {
35
+
default: radius["md"],
36
+
"@supports (corner-shape: squircle)": radius["2xl"],
37
+
},
38
+
cornerShape: "squircle",
35
39
borderWidth: 0,
36
40
color: uiColor.text1,
37
41
display: "flex",
+9
-14
packages/hip-ui/src/components/file-drop-zone/index.tsx
+9
-14
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
27
27
":is([data-drop-target])": primaryColor.component1,
28
28
},
29
29
borderColor: {
30
-
default: uiColor.border2,
30
+
default: uiColor.border3,
31
31
":is([data-drop-target])": primaryColor.solid1,
32
32
},
33
-
borderRadius: radius.md,
33
+
borderRadius: {
34
+
default: radius["md"],
35
+
"@supports (corner-shape: squircle)": radius["3xl"],
36
+
},
37
+
cornerShape: "squircle",
34
38
borderStyle: {
35
39
default: "dashed",
36
40
":is([data-drop-target])": "solid",
37
41
},
38
-
borderWidth: 1,
42
+
borderWidth: 2,
39
43
boxSizing: "border-box",
40
-
padding: spacing["2"],
44
+
padding: spacing["4"],
41
45
42
46
alignItems: "center",
43
47
display: "flex",
···
82
86
>
83
87
{({ isDropTarget }) => {
84
88
if (isDropTarget) {
85
-
return (
86
-
<Text
87
-
size="xs"
88
-
variant="secondary"
89
-
weight="medium"
90
-
style={styles.message}
91
-
>
92
-
Drop to upload
93
-
</Text>
94
-
);
89
+
return "Drop to upload";
95
90
}
96
91
97
92
return (
+6
-2
packages/hip-ui/src/components/kbd/index.tsx
+6
-2
packages/hip-ui/src/components/kbd/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
kbd: {
12
-
backgroundColor: uiColor.component1,
13
-
borderRadius: radius.sm,
12
+
backgroundColor: uiColor.component2,
13
+
borderRadius: {
14
+
default: radius["sm"],
15
+
"@supports (corner-shape: squircle)": radius["3xl"],
16
+
},
17
+
cornerShape: "squircle",
14
18
color: uiColor.text1,
15
19
fontFamily: fontFamily["sans"],
16
20
fontSize: fontSize.sm,
-2
packages/hip-ui/src/components/popover/index.tsx
-2
packages/hip-ui/src/components/popover/index.tsx
···
10
10
Dialog,
11
11
} from "react-aria-components";
12
12
13
-
import { radius } from "../theme/radius.stylex";
14
13
import { uiColor } from "../theme/semantic-color.stylex";
15
14
import { spacing } from "../theme/spacing.stylex";
16
15
import { StyleXComponentProps } from "../theme/types";
···
22
21
},
23
22
wrapper: {
24
23
borderColor: uiColor.border2,
25
-
borderRadius: radius["md"],
26
24
borderStyle: "solid",
27
25
borderWidth: 1,
28
26
},
+5
-1
packages/hip-ui/src/components/skeleton/index.tsx
+5
-1
packages/hip-ui/src/components/skeleton/index.tsx
+5
-1
packages/hip-ui/src/components/text-area/index.tsx
+5
-1
packages/hip-ui/src/components/text-area/index.tsx
+1
packages/hip-ui/src/components/theme/media-queries.stylex.tsx
+1
packages/hip-ui/src/components/theme/media-queries.stylex.tsx
+6
-2
packages/hip-ui/src/components/theme/useButtonStyles.ts
+6
-2
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
24
24
},
25
25
base: {
26
26
alignItems: "center",
27
-
borderRadius: radius["md"],
27
+
borderRadius: {
28
+
default: radius["md"],
29
+
"@supports (corner-shape: squircle)": radius["full"],
30
+
},
31
+
cornerShape: "squircle",
28
32
borderStyle: "solid",
29
33
borderWidth: 1,
30
34
boxSizing: "border-box",
···
144
148
const group = use(ButtonGroupContext);
145
149
146
150
return [
147
-
styles.base,
148
151
group?.orientation === "horizontal" &&
149
152
group.variant === "grouped" &&
150
153
styles.groupHorizontal,
···
201
204
size === "md" && styles.medium,
202
205
size === "lg" && styles.large,
203
206
group?.variant === "separate" && styles.separate,
207
+
styles.base,
204
208
];
205
209
};
+5
-1
packages/hip-ui/src/components/theme/useDialogStyles.ts
+5
-1
packages/hip-ui/src/components/theme/useDialogStyles.ts
···
34
34
transitionTimingFunction: "ease-in-out",
35
35
},
36
36
modal: {
37
-
borderRadius: radius["lg"],
37
+
borderRadius: {
38
+
default: radius["lg"],
39
+
"@supports (corner-shape: squircle)": radius["4xl"],
40
+
},
41
+
cornerShape: "squircle",
38
42
boxShadow: shadow["lg"],
39
43
display: "flex",
40
44
flexDirection: "column",
+5
-1
packages/hip-ui/src/components/theme/useInputStyles.ts
+5
-1
packages/hip-ui/src/components/theme/useInputStyles.ts
+6
-2
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+6
-2
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
45
45
[":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
46
46
uiColor.component3,
47
47
},
48
-
borderRadius: radius["md"],
48
+
borderRadius: {
49
+
default: radius["md"],
50
+
"@supports (corner-shape: squircle)": radius["3xl"],
51
+
},
52
+
cornerShape: "squircle",
49
53
boxSizing: "border-box",
50
54
color: {
51
55
default: uiColor.text2,
···
84
88
marginTop: `calc(${spacing["2"]} * -1)`,
85
89
minWidth: spacing["4"],
86
90
87
-
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
91
+
// eslint-disa le-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
88
92
":is(*) svg": {
89
93
flexShrink: 0,
90
94
height: spacing["4"],
+5
-1
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+5
-1
packages/hip-ui/src/components/theme/usePopoverStyles.ts
···
8
8
9
9
const styles = stylex.create({
10
10
popover: {
11
-
borderRadius: radius["md"],
11
+
borderRadius: {
12
+
default: radius["md"],
13
+
"@supports (corner-shape: squircle)": radius["3xl"],
14
+
},
15
+
cornerShape: "squircle",
12
16
boxShadow: shadow["md"],
13
17
outline: "none",
14
18
overflow: "auto",
+5
-1
packages/hip-ui/src/components/tooltip/index.tsx
+5
-1
packages/hip-ui/src/components/tooltip/index.tsx
···
19
19
const tooltipStyle = stylex.create({
20
20
content: {
21
21
backgroundColor: uiInverted.bg,
22
-
borderRadius: radius["md"],
22
+
borderRadius: {
23
+
default: radius["md"],
24
+
"@supports (corner-shape: squircle)": radius["full"],
25
+
},
26
+
cornerShape: "squircle",
23
27
boxShadow: shadow["sm"],
24
28
color: uiInverted.text1,
25
29
fontFamily: fontFamily["sans"],