A design system in a box.
hip-ui.tngl.io/docs/introduction
format
+276
-266
+8
-7
apps/docs/src/components/badge/index.tsx
+8
-7
apps/docs/src/components/badge/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
wrapper: {
19
-
alignItems: "center",
19
+
// eslint-disable-next-line @stylexjs/valid-styles
20
+
cornerShape: "squircle",
20
21
borderStyle: "solid",
21
22
borderWidth: 1,
23
+
overflow: "hidden",
24
+
alignItems: "center",
22
25
display: "flex",
23
26
fontFamily: fontFamily["sans"],
24
27
fontWeight: fontWeight["semibold"],
25
-
overflow: "hidden",
26
28
width: "fit-content",
27
-
cornerShape: "squircle",
28
29
},
29
30
sm: {
30
31
borderRadius: {
31
32
default: radius["sm"],
32
33
"@supports (corner-shape: squircle)": radius["3xl"],
33
34
},
35
+
gap: spacing["1.5"],
34
36
fontSize: fontSize["xs"],
35
-
gap: spacing["1.5"],
36
37
height: spacing["5"],
37
38
paddingLeft: spacing["1.5"],
38
39
paddingRight: spacing["1.5"],
···
40
41
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
41
42
":is(*) svg": {
42
43
flexShrink: 0,
43
-
height: spacing["3"],
44
44
pointerEvents: "none",
45
+
height: spacing["3"],
45
46
width: spacing["3"],
46
47
},
47
48
},
···
50
51
default: radius["md"],
51
52
"@supports (corner-shape: squircle)": radius["3xl"],
52
53
},
54
+
gap: spacing["1.5"],
53
55
fontSize: fontSize["sm"],
54
-
gap: spacing["1.5"],
55
56
height: spacing["6"],
56
57
paddingLeft: spacing["2"],
57
58
paddingRight: spacing["2"],
···
59
60
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
60
61
":is(*) svg": {
61
62
flexShrink: 0,
62
-
height: spacing["3.5"],
63
63
pointerEvents: "none",
64
+
height: spacing["3.5"],
64
65
width: spacing["3.5"],
65
66
},
66
67
},
+23
-22
apps/docs/src/components/card/index.tsx
+23
-22
apps/docs/src/components/card/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
card: {
14
+
// eslint-disable-next-line @stylexjs/valid-styles
15
+
cornerShape: "squircle",
14
16
borderRadius: {
15
17
default: radius["lg"],
16
18
"@supports (corner-shape: squircle)": radius["3xl"],
17
19
},
18
-
cornerShape: "squircle",
20
+
gap: "var(--card-gap)",
21
+
overflow: "hidden",
19
22
display: "flex",
20
23
flexDirection: "column",
21
24
fontFamily: fontFamily["sans"],
22
-
gap: "var(--card-gap)",
23
-
overflow: "hidden",
24
25
25
26
"--card-gap": {
26
-
":is([data-card-size=sm])": spacing["2"],
27
-
":is([data-card-size=md])": spacing["6"],
28
27
":is([data-card-size=lg])": spacing["9"],
28
+
":is([data-card-size=md])": spacing["6"],
29
+
":is([data-card-size=sm])": spacing["2"],
29
30
},
30
31
"--card-x-padding": {
31
-
":is([data-card-size=sm])": spacing["2"],
32
+
":is([data-card-size=lg])": spacing["9"],
32
33
":is([data-card-size=md])": spacing["6"],
33
-
":is([data-card-size=lg])": spacing["9"],
34
+
":is([data-card-size=sm])": spacing["2"],
34
35
},
35
36
"--card-y-padding": {
37
+
":is([data-card-size=lg])": spacing["10"],
38
+
":is([data-card-size=md])": spacing["7"],
36
39
":is([data-card-size=sm])": spacing["2"],
37
-
":is([data-card-size=md])": spacing["7"],
38
-
":is([data-card-size=lg])": spacing["10"],
39
40
},
40
41
},
41
42
cardSection: {
···
46
47
paddingTop: { ":first-child": "var(--card-y-padding)" },
47
48
},
48
49
cardHeader: {
49
-
alignItems: "center",
50
-
display: "grid",
51
-
gap: "var(--card-gap)",
52
50
gridTemplate: {
53
51
default: `'title action'`,
54
52
":has([data-card-header-description])": `
···
56
54
'description action'
57
55
`,
58
56
},
57
+
gap: "var(--card-gap)",
58
+
alignItems: "center",
59
+
display: "grid",
59
60
},
60
61
cardHeaderAction: {
61
-
display: "flex",
62
+
gridArea: "action",
62
63
gap: spacing["1"],
63
-
gridArea: "action",
64
+
display: "flex",
64
65
justifyContent: "flex-end",
65
66
},
66
67
cardTitle: {
68
+
gridArea: "title",
67
69
fontSize: {
70
+
":is([data-card-size='lg'] *)": fontSize["2xl"],
71
+
":is([data-card-size='md'] *)": fontSize["xl"],
68
72
":is([data-card-size='sm'] *)": fontSize["lg"],
69
-
":is([data-card-size='md'] *)": fontSize["xl"],
70
-
":is([data-card-size='lg'] *)": fontSize["2xl"],
71
73
},
72
74
fontWeight: fontWeight["bold"],
73
-
gridArea: "title",
74
75
},
75
76
cardDescription: {
76
-
fontSize: fontSize["sm"],
77
-
fontWeight: fontWeight["normal"],
78
77
gridArea: "description",
79
78
margin: 0,
79
+
fontSize: fontSize["sm"],
80
+
fontWeight: fontWeight["normal"],
80
81
},
81
82
cardBody: {
83
+
gap: "var(--card-gap)",
82
84
display: "flex",
83
85
flexDirection: "column",
84
-
gap: "var(--card-gap)",
85
86
},
86
87
cardFooter: {
88
+
gap: spacing["2"],
87
89
display: "flex",
88
-
gap: spacing["2"],
89
90
justifyContent: "flex-end",
90
91
},
91
92
cardImage: {
93
+
overflow: "hidden",
92
94
borderBottomLeftRadius: { default: 0, ":last-child": radius.md },
93
95
borderBottomRightRadius: { default: 0, ":last-child": radius.md },
94
96
borderTopLeftRadius: { default: 0, ":first-child": radius.md },
95
97
borderTopRightRadius: { default: 0, ":first-child": radius.md },
96
-
overflow: "hidden",
97
98
},
98
99
});
99
100
+4
-3
apps/docs/src/components/checkbox/index.tsx
+4
-3
apps/docs/src/components/checkbox/index.tsx
···
23
23
24
24
const styles = stylex.create({
25
25
wrapper: {
26
+
gap: spacing["2.5"],
26
27
alignItems: {
27
28
default: "center",
28
29
":has(p)": "flex-start",
29
30
},
30
31
display: "flex",
31
-
gap: spacing["2.5"],
32
32
33
33
fontFamily: fontFamily["sans"],
34
34
fontSize: fontSize["sm"],
···
40
40
display: "flex",
41
41
justifyContent: "center",
42
42
43
+
// eslint-disable-next-line @stylexjs/valid-styles
44
+
cornerShape: "squircle",
43
45
borderRadius: {
44
46
default: radius["sm"],
45
47
"@supports (corner-shape: squircle)": radius["full"],
46
48
},
47
-
cornerShape: "squircle",
48
49
borderWidth: 2,
49
50
height: spacing["4"],
50
51
width: spacing["4"],
···
53
54
color: "white",
54
55
},
55
56
group: {
57
+
gap: spacing["3"],
56
58
display: "flex",
57
59
flexDirection: "column",
58
-
gap: spacing["3"],
59
60
},
60
61
});
61
62
+8
-7
apps/docs/src/components/color-area/index.tsx
+8
-7
apps/docs/src/components/color-area/index.tsx
···
10
10
} from "react-aria-components";
11
11
12
12
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
13
import { spacing } from "../theme/spacing.stylex";
15
14
import { StyleXComponentProps } from "../theme/types";
16
15
17
16
const styles = stylex.create({
18
17
colorArea: {
18
+
// eslint-disable-next-line @stylexjs/valid-styles
19
+
cornerShape: "squircle",
19
20
borderRadius: {
20
21
default: radius["md"],
21
22
"@supports (corner-shape: squircle)": radius["3xl"],
22
23
},
23
-
cornerShape: "squircle",
24
24
filter: {
25
25
":is([data-disabled])": "grayscale(1)",
26
26
},
27
27
flexShrink: 0,
28
28
},
29
29
thumb: {
30
+
// eslint-disable-next-line @stylexjs/valid-styles
31
+
cornerShape: "squircle",
30
32
borderColor: "white",
31
33
borderRadius: {
32
34
default: radius["full"],
33
35
"@supports (corner-shape: squircle)": radius["3xl"],
34
36
},
35
-
cornerShape: "squircle",
36
37
borderStyle: "solid",
37
38
borderWidth: 2,
38
39
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
···
43
44
height: {
44
45
default: spacing["4"],
45
46
":is([data-focus-visible])": spacing["6"],
46
-
":is([data-size=sm] *)": spacing["3"],
47
+
":is([data-size=lg] *)": spacing["6"],
47
48
":is([data-size=md] *)": spacing["4"],
48
-
":is([data-size=lg] *)": spacing["6"],
49
+
":is([data-size=sm] *)": spacing["3"],
49
50
},
50
51
width: {
51
52
default: spacing["4"],
52
53
":is([data-focus-visible])": spacing["6"],
53
-
":is([data-size=sm] *)": spacing["3"],
54
+
":is([data-size=lg] *)": spacing["6"],
54
55
":is([data-size=md] *)": spacing["4"],
55
-
":is([data-size=lg] *)": spacing["6"],
56
+
":is([data-size=sm] *)": spacing["3"],
56
57
},
57
58
},
58
59
aspectRatio: (aspectRatio: number) => ({
+12
-11
apps/docs/src/components/color-slider/index.tsx
+12
-11
apps/docs/src/components/color-slider/index.tsx
···
19
19
20
20
const styles = stylex.create({
21
21
colorSlider: {
22
-
display: "grid",
23
-
flexDirection: "column",
24
22
gap: spacing["2"],
25
23
gridTemplateAreas: {
26
24
default: "'track'",
27
25
":has(label,[data-slider-output])": "'label value-label' 'track track'",
28
26
},
27
+
display: "grid",
28
+
flexDirection: "column",
29
29
},
30
30
label: {
31
31
gridArea: "label",
32
32
},
33
33
valueLabel: {
34
+
gridArea: "value-label",
34
35
color: uiColor.text1,
35
36
fontVariantNumeric: "tabular-nums",
36
-
gridArea: "value-label",
37
37
justifySelf: "flex-end",
38
38
39
39
fontSize: {
40
-
":is([data-size=sm] *)": fontSize["xs"],
40
+
":is([data-size=lg] *)": fontSize["base"],
41
41
":is([data-size=md] *)": fontSize["sm"],
42
-
":is([data-size=lg] *)": fontSize["base"],
42
+
":is([data-size=sm] *)": fontSize["xs"],
43
43
},
44
44
lineHeight: {
45
+
":is([data-size=lg] *)": lineHeight["base"],
46
+
":is([data-size=md] *)": lineHeight["sm"],
45
47
":is([data-size=sm] *)": lineHeight["xs"],
46
-
":is([data-size=md] *)": lineHeight["sm"],
47
-
":is([data-size=lg] *)": lineHeight["base"],
48
48
},
49
49
},
50
50
track: {
51
+
// eslint-disable-next-line @stylexjs/valid-styles
52
+
cornerShape: "squircle",
53
+
gridArea: "track",
51
54
borderRadius: {
52
55
default: radius["full"],
53
56
"@supports (corner-shape: squircle)": radius["3xl"],
54
57
},
55
-
cornerShape: "squircle",
56
-
gridArea: "track",
57
58
height: {
59
+
":is([data-size=lg] *)": spacing["6"],
60
+
":is([data-size=md] *)": spacing["4"],
58
61
":is([data-size=sm] *)": spacing["3"],
59
-
":is([data-size=md] *)": spacing["4"],
60
-
":is([data-size=lg] *)": spacing["6"],
61
62
},
62
63
width: "100%",
63
64
},
+9
-9
apps/docs/src/components/color-swatch-picker/index.tsx
+9
-9
apps/docs/src/components/color-swatch-picker/index.tsx
···
10
10
import { ColorSwatch } from "../color-swatch";
11
11
import { SizeContext } from "../context";
12
12
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
17
17
const styles = stylex.create({
18
18
picker: {
19
+
gap: {
20
+
default: spacing["2"],
21
+
":is([data-size=sm])": spacing["1"],
22
+
},
19
23
display: "flex",
20
24
flexDirection: {
21
25
default: "row",
22
26
":is([data-layout=stack])": "column",
23
27
},
24
28
flexWrap: "wrap",
25
-
gap: {
26
-
default: spacing["2"],
27
-
":is([data-size=sm])": spacing["1"],
28
-
},
29
29
},
30
30
item: {
31
31
borderRadius: {
32
+
":is([data-size=lg] *)": radius.lg,
33
+
":is([data-size=md] *)": radius.md,
32
34
":is([data-size=sm] *)": radius.sm,
33
-
":is([data-size=md] *)": radius.md,
34
-
":is([data-size=lg] *)": radius.lg,
35
35
},
36
+
outline: "none",
36
37
boxSizing: "border-box",
37
38
forcedColorAdjust: "none",
38
-
outline: "none",
39
39
position: "relative",
40
40
width: "fit-content",
41
41
···
47
47
outlineStyle: { ":is([data-selected])::after": "solid" },
48
48
outlineWidth: { ":is([data-selected])::after": "2px" },
49
49
"::after": {
50
+
inset: 0,
50
51
borderRadius: "inherit",
51
52
boxSizing: "border-box",
52
53
content: "",
53
-
inset: 0,
54
54
position: "absolute",
55
55
},
56
56
},
+10
-9
apps/docs/src/components/color-swatch/index.tsx
+10
-9
apps/docs/src/components/color-swatch/index.tsx
···
17
17
borderWidth: 1,
18
18
boxSizing: "border-box",
19
19
20
+
// eslint-disable-next-line @stylexjs/valid-styles
21
+
cornerShape: "squircle",
20
22
borderRadius: {
21
-
":is([data-size=sm])": {
22
-
default: radius["sm"],
23
+
":is([data-size=lg])": {
24
+
default: radius["lg"],
23
25
"@supports (corner-shape: squircle)": radius["3xl"],
24
26
},
25
27
":is([data-size=md])": {
26
28
default: radius["md"],
27
29
"@supports (corner-shape: squircle)": radius["3xl"],
28
30
},
29
-
":is([data-size=lg])": {
30
-
default: radius["lg"],
31
+
":is([data-size=sm])": {
32
+
default: radius["sm"],
31
33
"@supports (corner-shape: squircle)": radius["3xl"],
32
34
},
33
35
},
34
-
cornerShape: "squircle",
35
36
height: {
37
+
":is([data-size=lg])": spacing["8"],
38
+
":is([data-size=md])": spacing["6"],
36
39
":is([data-size=sm])": spacing["4"],
37
-
":is([data-size=md])": spacing["6"],
38
-
":is([data-size=lg])": spacing["8"],
39
40
},
40
41
width: {
41
-
":is([data-size=sm])": spacing["4"],
42
-
":is([data-size=md])": spacing["6"],
43
42
":is([data-size=lg])": spacing["8"],
43
+
":is([data-size=md])": spacing["6"],
44
+
":is([data-size=sm])": spacing["4"],
44
45
},
45
46
},
46
47
});
+3
-3
apps/docs/src/components/color-wheel/index.tsx
+3
-3
apps/docs/src/components/color-wheel/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
track: {
19
-
borderRadius: radius.full,
20
19
gridArea: "track",
20
+
borderRadius: radius.full,
21
21
height: {
22
-
":is([data-size=sm] *)": spacing["3"],
22
+
":is([data-size=lg] *)": spacing["6"],
23
23
":is([data-size=md] *)": spacing["4"],
24
-
":is([data-size=lg] *)": spacing["6"],
24
+
":is([data-size=sm] *)": spacing["3"],
25
25
},
26
26
width: "100%",
27
27
+24
-24
apps/docs/src/components/drawer/index.tsx
+24
-24
apps/docs/src/components/drawer/index.tsx
···
25
25
zIndex: 0,
26
26
},
27
27
drawerWrapper: {
28
+
position: "fixed",
28
29
bottom: {
29
30
":is([data-direction=bottom])": 0,
30
31
":is([data-direction=left])": 0,
31
32
":is([data-direction=right])": 0,
32
33
},
33
34
left: {
35
+
":is([data-direction=bottom])": 0,
34
36
":is([data-direction=left])": 0,
35
37
":is([data-direction=top])": 0,
36
-
":is([data-direction=bottom])": 0,
37
38
},
38
-
position: "fixed",
39
39
right: {
40
+
":is([data-direction=bottom])": 0,
40
41
":is([data-direction=right])": 0,
41
42
":is([data-direction=top])": 0,
42
-
":is([data-direction=bottom])": 0,
43
43
},
44
44
top: {
45
-
":is([data-direction=top])": 0,
46
45
":is([data-direction=left])": 0,
47
46
":is([data-direction=right])": 0,
47
+
":is([data-direction=top])": 0,
48
48
},
49
49
50
+
borderRadius: 0,
51
+
translate: "unset",
50
52
borderBottomWidth: {
51
53
default: 0,
52
54
":is([data-direction=top])": 1,
···
55
57
default: 0,
56
58
":is([data-direction=right])": 1,
57
59
},
58
-
borderRadius: 0,
59
60
borderRightWidth: {
60
61
default: 0,
61
62
":is([data-direction=left])": 1,
···
65
66
":is([data-direction=bottom])": 1,
66
67
},
67
68
height: {
68
-
":is([data-direction=top], [data-direction=bottom]):is([data-size=sm])":
69
-
"320px",
70
-
":is([data-direction=top], [data-direction=bottom]):is([data-size=md])":
71
-
"600px",
69
+
":is([data-direction=right], [data-direction=left])": "100vh",
72
70
":is([data-direction=top], [data-direction=bottom]):is([data-size=lg])":
73
71
"800px",
74
-
":is([data-direction=right], [data-direction=left])": "100vh",
72
+
":is([data-direction=top], [data-direction=bottom]):is([data-size=md])":
73
+
"600px",
74
+
":is([data-direction=top], [data-direction=bottom]):is([data-size=sm])":
75
+
"320px",
75
76
},
76
77
maxHeight: {
77
-
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`,
78
78
":is([data-direction=right], [data-direction=left])": "100vh",
79
+
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`,
79
80
},
80
81
maxWidth: {
81
-
":is([data-direction=top], [data-direction=bottom])": "100vw",
82
82
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${spacing["8"]})`,
83
+
":is([data-direction=top], [data-direction=bottom])": "100vw",
83
84
},
84
-
translate: "unset",
85
85
width: {
86
-
":is([data-direction=left], [data-direction=right]):is([data-size=sm])":
87
-
"320px",
88
-
":is([data-direction=left], [data-direction=right]):is([data-size=md])":
89
-
"600px",
90
86
":is([data-direction=left], [data-direction=right]):is([data-size=lg])":
91
87
"800px",
88
+
":is([data-direction=left], [data-direction=right]):is([data-size=md])":
89
+
"600px",
90
+
":is([data-direction=left], [data-direction=right]):is([data-size=sm])":
91
+
"320px",
92
92
":is([data-direction=top], [data-direction=bottom])": "100vw",
93
93
},
94
94
95
95
animationDuration: animationDuration.default,
96
96
animationName: {
97
-
":is([data-direction=right][data-entering])": animations.slideInRight,
98
-
":is([data-direction=right][data-exiting])": animations.slideOutRight,
97
+
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
98
+
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
99
99
":is([data-direction=left][data-entering])": animations.slideInLeft,
100
100
":is([data-direction=left][data-exiting])": animations.slideOutLeft,
101
+
":is([data-direction=right][data-entering])": animations.slideInRight,
102
+
":is([data-direction=right][data-exiting])": animations.slideOutRight,
101
103
":is([data-direction=top][data-entering])": animations.slideInTop,
102
104
":is([data-direction=top][data-exiting])": animations.slideOutTop,
103
-
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
104
-
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
105
105
},
106
106
animationTimingFunction: "ease-in-out",
107
107
},
···
110
110
paddingTop: spacing["2"],
111
111
},
112
112
header: {
113
+
gap: spacing["2"],
113
114
alignItems: "center",
114
115
display: "flex",
115
-
gap: spacing["2"],
116
-
height: spacing["8"],
117
116
justifyContent: "space-between",
117
+
height: spacing["8"],
118
118
paddingBottom: spacing["2"],
119
119
paddingLeft: spacing["4"],
120
120
paddingRight: spacing["4"],
···
134
134
paddingTop: { default: 0, ":first-child": spacing["4"] },
135
135
},
136
136
footer: {
137
-
display: "flex",
138
137
gap: spacing["2"],
138
+
display: "flex",
139
139
justifyContent: "flex-end",
140
140
paddingBottom: spacing["2"],
141
141
paddingLeft: spacing["4"],
+3
-3
apps/docs/src/components/editable-text/index.tsx
+3
-3
apps/docs/src/components/editable-text/index.tsx
···
26
26
27
27
const styles = stylex.create({
28
28
input: {
29
-
backgroundColor: "transparent",
30
29
borderRadius: radius["sm"],
31
30
borderWidth: 0,
31
+
textDecoration: "inherit",
32
+
backgroundColor: "transparent",
32
33
display: "inline-block",
33
34
fontFamily: "inherit",
34
35
fontSize: "inherit",
35
36
fontWeight: "inherit",
36
37
letterSpacing: "inherit",
37
38
lineHeight: "inherit",
38
-
minWidth: 0,
39
39
textAlign: "inherit",
40
-
textDecoration: "inherit",
41
40
textTransform: "inherit",
41
+
minWidth: 0,
42
42
43
43
outlineColor: "blue",
44
44
outlineStyle: "solid",
+7
-10
apps/docs/src/components/file-drop-zone/index.tsx
+7
-10
apps/docs/src/components/file-drop-zone/index.tsx
···
12
12
import { radius } from "../theme/radius.stylex";
13
13
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
-
import { Text } from "../typography/text";
16
15
17
16
async function getFiles(items: DropItem[]): Promise<File[]> {
18
17
return Promise.all(
···
22
21
23
22
const styles = stylex.create({
24
23
dropZone: {
25
-
backgroundColor: {
26
-
default: uiColor.bgSubtle,
27
-
":is([data-drop-target])": primaryColor.component1,
28
-
},
24
+
// eslint-disable-next-line @stylexjs/valid-styles
25
+
cornerShape: "squircle",
26
+
padding: spacing["4"],
29
27
borderColor: {
30
28
default: uiColor.border3,
31
29
":is([data-drop-target])": primaryColor.solid1,
···
34
32
default: radius["md"],
35
33
"@supports (corner-shape: squircle)": radius["3xl"],
36
34
},
37
-
cornerShape: "squircle",
38
35
borderStyle: {
39
36
default: "dashed",
40
37
":is([data-drop-target])": "solid",
41
38
},
42
39
borderWidth: 2,
40
+
backgroundColor: {
41
+
default: uiColor.bgSubtle,
42
+
":is([data-drop-target])": primaryColor.component1,
43
+
},
43
44
boxSizing: "border-box",
44
-
padding: spacing["4"],
45
45
46
46
alignItems: "center",
47
47
display: "flex",
48
48
flexDirection: "column",
49
49
justifyContent: "center",
50
-
},
51
-
message: {
52
-
textAlign: "center",
53
50
},
54
51
});
55
52
+3
-2
apps/docs/src/components/kbd/index.tsx
+3
-2
apps/docs/src/components/kbd/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
kbd: {
12
-
backgroundColor: uiColor.component2,
12
+
// eslint-disable-next-line @stylexjs/valid-styles
13
+
cornerShape: "squircle",
13
14
borderRadius: {
14
15
default: radius["sm"],
15
16
"@supports (corner-shape: squircle)": radius["3xl"],
16
17
},
17
-
cornerShape: "squircle",
18
+
backgroundColor: uiColor.component2,
18
19
color: uiColor.text1,
19
20
fontFamily: fontFamily["sans"],
20
21
fontSize: fontSize.sm,
+8
-7
packages/hip-ui/src/components/badge/index.tsx
+8
-7
packages/hip-ui/src/components/badge/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
wrapper: {
19
-
alignItems: "center",
19
+
// eslint-disable-next-line @stylexjs/valid-styles
20
+
cornerShape: "squircle",
20
21
borderStyle: "solid",
21
22
borderWidth: 1,
23
+
overflow: "hidden",
24
+
alignItems: "center",
22
25
display: "flex",
23
26
fontFamily: fontFamily["sans"],
24
27
fontWeight: fontWeight["semibold"],
25
-
overflow: "hidden",
26
28
width: "fit-content",
27
-
cornerShape: "squircle",
28
29
},
29
30
sm: {
30
31
borderRadius: {
31
32
default: radius["sm"],
32
33
"@supports (corner-shape: squircle)": radius["3xl"],
33
34
},
35
+
gap: spacing["1.5"],
34
36
fontSize: fontSize["xs"],
35
-
gap: spacing["1.5"],
36
37
height: spacing["5"],
37
38
paddingLeft: spacing["1.5"],
38
39
paddingRight: spacing["1.5"],
···
40
41
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
41
42
":is(*) svg": {
42
43
flexShrink: 0,
43
-
height: spacing["3"],
44
44
pointerEvents: "none",
45
+
height: spacing["3"],
45
46
width: spacing["3"],
46
47
},
47
48
},
···
50
51
default: radius["md"],
51
52
"@supports (corner-shape: squircle)": radius["3xl"],
52
53
},
54
+
gap: spacing["1.5"],
53
55
fontSize: fontSize["sm"],
54
-
gap: spacing["1.5"],
55
56
height: spacing["6"],
56
57
paddingLeft: spacing["2"],
57
58
paddingRight: spacing["2"],
···
59
60
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
60
61
":is(*) svg": {
61
62
flexShrink: 0,
62
-
height: spacing["3.5"],
63
63
pointerEvents: "none",
64
+
height: spacing["3.5"],
64
65
width: spacing["3.5"],
65
66
},
66
67
},
+23
-22
packages/hip-ui/src/components/card/index.tsx
+23
-22
packages/hip-ui/src/components/card/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
card: {
14
+
// eslint-disable-next-line @stylexjs/valid-styles
15
+
cornerShape: "squircle",
14
16
borderRadius: {
15
17
default: radius["lg"],
16
18
"@supports (corner-shape: squircle)": radius["3xl"],
17
19
},
18
-
cornerShape: "squircle",
20
+
gap: "var(--card-gap)",
21
+
overflow: "hidden",
19
22
display: "flex",
20
23
flexDirection: "column",
21
24
fontFamily: fontFamily["sans"],
22
-
gap: "var(--card-gap)",
23
-
overflow: "hidden",
24
25
25
26
"--card-gap": {
26
-
":is([data-card-size=sm])": spacing["2"],
27
-
":is([data-card-size=md])": spacing["6"],
28
27
":is([data-card-size=lg])": spacing["9"],
28
+
":is([data-card-size=md])": spacing["6"],
29
+
":is([data-card-size=sm])": spacing["2"],
29
30
},
30
31
"--card-x-padding": {
31
-
":is([data-card-size=sm])": spacing["2"],
32
+
":is([data-card-size=lg])": spacing["9"],
32
33
":is([data-card-size=md])": spacing["6"],
33
-
":is([data-card-size=lg])": spacing["9"],
34
+
":is([data-card-size=sm])": spacing["2"],
34
35
},
35
36
"--card-y-padding": {
37
+
":is([data-card-size=lg])": spacing["10"],
38
+
":is([data-card-size=md])": spacing["7"],
36
39
":is([data-card-size=sm])": spacing["2"],
37
-
":is([data-card-size=md])": spacing["7"],
38
-
":is([data-card-size=lg])": spacing["10"],
39
40
},
40
41
},
41
42
cardSection: {
···
46
47
paddingTop: { ":first-child": "var(--card-y-padding)" },
47
48
},
48
49
cardHeader: {
49
-
alignItems: "center",
50
-
display: "grid",
51
-
gap: "var(--card-gap)",
52
50
gridTemplate: {
53
51
default: `'title action'`,
54
52
":has([data-card-header-description])": `
···
56
54
'description action'
57
55
`,
58
56
},
57
+
gap: "var(--card-gap)",
58
+
alignItems: "center",
59
+
display: "grid",
59
60
},
60
61
cardHeaderAction: {
61
-
display: "flex",
62
+
gridArea: "action",
62
63
gap: spacing["1"],
63
-
gridArea: "action",
64
+
display: "flex",
64
65
justifyContent: "flex-end",
65
66
},
66
67
cardTitle: {
68
+
gridArea: "title",
67
69
fontSize: {
70
+
":is([data-card-size='lg'] *)": fontSize["2xl"],
71
+
":is([data-card-size='md'] *)": fontSize["xl"],
68
72
":is([data-card-size='sm'] *)": fontSize["lg"],
69
-
":is([data-card-size='md'] *)": fontSize["xl"],
70
-
":is([data-card-size='lg'] *)": fontSize["2xl"],
71
73
},
72
74
fontWeight: fontWeight["bold"],
73
-
gridArea: "title",
74
75
},
75
76
cardDescription: {
76
-
fontSize: fontSize["sm"],
77
-
fontWeight: fontWeight["normal"],
78
77
gridArea: "description",
79
78
margin: 0,
79
+
fontSize: fontSize["sm"],
80
+
fontWeight: fontWeight["normal"],
80
81
},
81
82
cardBody: {
83
+
gap: "var(--card-gap)",
82
84
display: "flex",
83
85
flexDirection: "column",
84
-
gap: "var(--card-gap)",
85
86
},
86
87
cardFooter: {
88
+
gap: spacing["2"],
87
89
display: "flex",
88
-
gap: spacing["2"],
89
90
justifyContent: "flex-end",
90
91
},
91
92
cardImage: {
93
+
overflow: "hidden",
92
94
borderBottomLeftRadius: { default: 0, ":last-child": radius.md },
93
95
borderBottomRightRadius: { default: 0, ":last-child": radius.md },
94
96
borderTopLeftRadius: { default: 0, ":first-child": radius.md },
95
97
borderTopRightRadius: { default: 0, ":first-child": radius.md },
96
-
overflow: "hidden",
97
98
},
98
99
});
99
100
+4
-3
packages/hip-ui/src/components/checkbox/index.tsx
+4
-3
packages/hip-ui/src/components/checkbox/index.tsx
···
23
23
24
24
const styles = stylex.create({
25
25
wrapper: {
26
+
gap: spacing["2.5"],
26
27
alignItems: {
27
28
default: "center",
28
29
":has(p)": "flex-start",
29
30
},
30
31
display: "flex",
31
-
gap: spacing["2.5"],
32
32
33
33
fontFamily: fontFamily["sans"],
34
34
fontSize: fontSize["sm"],
···
40
40
display: "flex",
41
41
justifyContent: "center",
42
42
43
+
// eslint-disable-next-line @stylexjs/valid-styles
44
+
cornerShape: "squircle",
43
45
borderRadius: {
44
46
default: radius["sm"],
45
47
"@supports (corner-shape: squircle)": radius["full"],
46
48
},
47
-
cornerShape: "squircle",
48
49
borderWidth: 2,
49
50
height: spacing["4"],
50
51
width: spacing["4"],
···
53
54
color: "white",
54
55
},
55
56
group: {
57
+
gap: spacing["3"],
56
58
display: "flex",
57
59
flexDirection: "column",
58
-
gap: spacing["3"],
59
60
},
60
61
});
61
62
+8
-7
packages/hip-ui/src/components/color-area/index.tsx
+8
-7
packages/hip-ui/src/components/color-area/index.tsx
···
10
10
} from "react-aria-components";
11
11
12
12
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
13
import { spacing } from "../theme/spacing.stylex";
15
14
import { StyleXComponentProps } from "../theme/types";
16
15
17
16
const styles = stylex.create({
18
17
colorArea: {
18
+
// eslint-disable-next-line @stylexjs/valid-styles
19
+
cornerShape: "squircle",
19
20
borderRadius: {
20
21
default: radius["md"],
21
22
"@supports (corner-shape: squircle)": radius["3xl"],
22
23
},
23
-
cornerShape: "squircle",
24
24
filter: {
25
25
":is([data-disabled])": "grayscale(1)",
26
26
},
27
27
flexShrink: 0,
28
28
},
29
29
thumb: {
30
+
// eslint-disable-next-line @stylexjs/valid-styles
31
+
cornerShape: "squircle",
30
32
borderColor: "white",
31
33
borderRadius: {
32
34
default: radius["full"],
33
35
"@supports (corner-shape: squircle)": radius["3xl"],
34
36
},
35
-
cornerShape: "squircle",
36
37
borderStyle: "solid",
37
38
borderWidth: 2,
38
39
boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black",
···
43
44
height: {
44
45
default: spacing["4"],
45
46
":is([data-focus-visible])": spacing["6"],
46
-
":is([data-size=sm] *)": spacing["3"],
47
+
":is([data-size=lg] *)": spacing["6"],
47
48
":is([data-size=md] *)": spacing["4"],
48
-
":is([data-size=lg] *)": spacing["6"],
49
+
":is([data-size=sm] *)": spacing["3"],
49
50
},
50
51
width: {
51
52
default: spacing["4"],
52
53
":is([data-focus-visible])": spacing["6"],
53
-
":is([data-size=sm] *)": spacing["3"],
54
+
":is([data-size=lg] *)": spacing["6"],
54
55
":is([data-size=md] *)": spacing["4"],
55
-
":is([data-size=lg] *)": spacing["6"],
56
+
":is([data-size=sm] *)": spacing["3"],
56
57
},
57
58
},
58
59
aspectRatio: (aspectRatio: number) => ({
+12
-11
packages/hip-ui/src/components/color-slider/index.tsx
+12
-11
packages/hip-ui/src/components/color-slider/index.tsx
···
19
19
20
20
const styles = stylex.create({
21
21
colorSlider: {
22
-
display: "grid",
23
-
flexDirection: "column",
24
22
gap: spacing["2"],
25
23
gridTemplateAreas: {
26
24
default: "'track'",
27
25
":has(label,[data-slider-output])": "'label value-label' 'track track'",
28
26
},
27
+
display: "grid",
28
+
flexDirection: "column",
29
29
},
30
30
label: {
31
31
gridArea: "label",
32
32
},
33
33
valueLabel: {
34
+
gridArea: "value-label",
34
35
color: uiColor.text1,
35
36
fontVariantNumeric: "tabular-nums",
36
-
gridArea: "value-label",
37
37
justifySelf: "flex-end",
38
38
39
39
fontSize: {
40
-
":is([data-size=sm] *)": fontSize["xs"],
40
+
":is([data-size=lg] *)": fontSize["base"],
41
41
":is([data-size=md] *)": fontSize["sm"],
42
-
":is([data-size=lg] *)": fontSize["base"],
42
+
":is([data-size=sm] *)": fontSize["xs"],
43
43
},
44
44
lineHeight: {
45
+
":is([data-size=lg] *)": lineHeight["base"],
46
+
":is([data-size=md] *)": lineHeight["sm"],
45
47
":is([data-size=sm] *)": lineHeight["xs"],
46
-
":is([data-size=md] *)": lineHeight["sm"],
47
-
":is([data-size=lg] *)": lineHeight["base"],
48
48
},
49
49
},
50
50
track: {
51
+
// eslint-disable-next-line @stylexjs/valid-styles
52
+
cornerShape: "squircle",
53
+
gridArea: "track",
51
54
borderRadius: {
52
55
default: radius["full"],
53
56
"@supports (corner-shape: squircle)": radius["3xl"],
54
57
},
55
-
cornerShape: "squircle",
56
-
gridArea: "track",
57
58
height: {
59
+
":is([data-size=lg] *)": spacing["6"],
60
+
":is([data-size=md] *)": spacing["4"],
58
61
":is([data-size=sm] *)": spacing["3"],
59
-
":is([data-size=md] *)": spacing["4"],
60
-
":is([data-size=lg] *)": spacing["6"],
61
62
},
62
63
width: "100%",
63
64
},
+9
-9
packages/hip-ui/src/components/color-swatch-picker/index.tsx
+9
-9
packages/hip-ui/src/components/color-swatch-picker/index.tsx
···
10
10
import { ColorSwatch } from "../color-swatch";
11
11
import { SizeContext } from "../context";
12
12
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
17
17
const styles = stylex.create({
18
18
picker: {
19
+
gap: {
20
+
default: spacing["2"],
21
+
":is([data-size=sm])": spacing["1"],
22
+
},
19
23
display: "flex",
20
24
flexDirection: {
21
25
default: "row",
22
26
":is([data-layout=stack])": "column",
23
27
},
24
28
flexWrap: "wrap",
25
-
gap: {
26
-
default: spacing["2"],
27
-
":is([data-size=sm])": spacing["1"],
28
-
},
29
29
},
30
30
item: {
31
31
borderRadius: {
32
+
":is([data-size=lg] *)": radius.lg,
33
+
":is([data-size=md] *)": radius.md,
32
34
":is([data-size=sm] *)": radius.sm,
33
-
":is([data-size=md] *)": radius.md,
34
-
":is([data-size=lg] *)": radius.lg,
35
35
},
36
+
outline: "none",
36
37
boxSizing: "border-box",
37
38
forcedColorAdjust: "none",
38
-
outline: "none",
39
39
position: "relative",
40
40
width: "fit-content",
41
41
···
47
47
outlineStyle: { ":is([data-selected])::after": "solid" },
48
48
outlineWidth: { ":is([data-selected])::after": "2px" },
49
49
"::after": {
50
+
inset: 0,
50
51
borderRadius: "inherit",
51
52
boxSizing: "border-box",
52
53
content: "",
53
-
inset: 0,
54
54
position: "absolute",
55
55
},
56
56
},
+10
-9
packages/hip-ui/src/components/color-swatch/index.tsx
+10
-9
packages/hip-ui/src/components/color-swatch/index.tsx
···
17
17
borderWidth: 1,
18
18
boxSizing: "border-box",
19
19
20
+
// eslint-disable-next-line @stylexjs/valid-styles
21
+
cornerShape: "squircle",
20
22
borderRadius: {
21
-
":is([data-size=sm])": {
22
-
default: radius["sm"],
23
+
":is([data-size=lg])": {
24
+
default: radius["lg"],
23
25
"@supports (corner-shape: squircle)": radius["3xl"],
24
26
},
25
27
":is([data-size=md])": {
26
28
default: radius["md"],
27
29
"@supports (corner-shape: squircle)": radius["3xl"],
28
30
},
29
-
":is([data-size=lg])": {
30
-
default: radius["lg"],
31
+
":is([data-size=sm])": {
32
+
default: radius["sm"],
31
33
"@supports (corner-shape: squircle)": radius["3xl"],
32
34
},
33
35
},
34
-
cornerShape: "squircle",
35
36
height: {
37
+
":is([data-size=lg])": spacing["8"],
38
+
":is([data-size=md])": spacing["6"],
36
39
":is([data-size=sm])": spacing["4"],
37
-
":is([data-size=md])": spacing["6"],
38
-
":is([data-size=lg])": spacing["8"],
39
40
},
40
41
width: {
41
-
":is([data-size=sm])": spacing["4"],
42
-
":is([data-size=md])": spacing["6"],
43
42
":is([data-size=lg])": spacing["8"],
43
+
":is([data-size=md])": spacing["6"],
44
+
":is([data-size=sm])": spacing["4"],
44
45
},
45
46
},
46
47
});
+3
-3
packages/hip-ui/src/components/color-wheel/index.tsx
+3
-3
packages/hip-ui/src/components/color-wheel/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
track: {
19
-
borderRadius: radius.full,
20
19
gridArea: "track",
20
+
borderRadius: radius.full,
21
21
height: {
22
-
":is([data-size=sm] *)": spacing["3"],
22
+
":is([data-size=lg] *)": spacing["6"],
23
23
":is([data-size=md] *)": spacing["4"],
24
-
":is([data-size=lg] *)": spacing["6"],
24
+
":is([data-size=sm] *)": spacing["3"],
25
25
},
26
26
width: "100%",
27
27
+24
-24
packages/hip-ui/src/components/drawer/index.tsx
+24
-24
packages/hip-ui/src/components/drawer/index.tsx
···
25
25
zIndex: 0,
26
26
},
27
27
drawerWrapper: {
28
+
position: "fixed",
28
29
bottom: {
29
30
":is([data-direction=bottom])": 0,
30
31
":is([data-direction=left])": 0,
31
32
":is([data-direction=right])": 0,
32
33
},
33
34
left: {
35
+
":is([data-direction=bottom])": 0,
34
36
":is([data-direction=left])": 0,
35
37
":is([data-direction=top])": 0,
36
-
":is([data-direction=bottom])": 0,
37
38
},
38
-
position: "fixed",
39
39
right: {
40
+
":is([data-direction=bottom])": 0,
40
41
":is([data-direction=right])": 0,
41
42
":is([data-direction=top])": 0,
42
-
":is([data-direction=bottom])": 0,
43
43
},
44
44
top: {
45
-
":is([data-direction=top])": 0,
46
45
":is([data-direction=left])": 0,
47
46
":is([data-direction=right])": 0,
47
+
":is([data-direction=top])": 0,
48
48
},
49
49
50
+
borderRadius: 0,
51
+
translate: "unset",
50
52
borderBottomWidth: {
51
53
default: 0,
52
54
":is([data-direction=top])": 1,
···
55
57
default: 0,
56
58
":is([data-direction=right])": 1,
57
59
},
58
-
borderRadius: 0,
59
60
borderRightWidth: {
60
61
default: 0,
61
62
":is([data-direction=left])": 1,
···
65
66
":is([data-direction=bottom])": 1,
66
67
},
67
68
height: {
68
-
":is([data-direction=top], [data-direction=bottom]):is([data-size=sm])":
69
-
"320px",
70
-
":is([data-direction=top], [data-direction=bottom]):is([data-size=md])":
71
-
"600px",
69
+
":is([data-direction=right], [data-direction=left])": "100vh",
72
70
":is([data-direction=top], [data-direction=bottom]):is([data-size=lg])":
73
71
"800px",
74
-
":is([data-direction=right], [data-direction=left])": "100vh",
72
+
":is([data-direction=top], [data-direction=bottom]):is([data-size=md])":
73
+
"600px",
74
+
":is([data-direction=top], [data-direction=bottom]):is([data-size=sm])":
75
+
"320px",
75
76
},
76
77
maxHeight: {
77
-
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`,
78
78
":is([data-direction=right], [data-direction=left])": "100vh",
79
+
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${spacing["8"]})`,
79
80
},
80
81
maxWidth: {
81
-
":is([data-direction=top], [data-direction=bottom])": "100vw",
82
82
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${spacing["8"]})`,
83
+
":is([data-direction=top], [data-direction=bottom])": "100vw",
83
84
},
84
-
translate: "unset",
85
85
width: {
86
-
":is([data-direction=left], [data-direction=right]):is([data-size=sm])":
87
-
"320px",
88
-
":is([data-direction=left], [data-direction=right]):is([data-size=md])":
89
-
"600px",
90
86
":is([data-direction=left], [data-direction=right]):is([data-size=lg])":
91
87
"800px",
88
+
":is([data-direction=left], [data-direction=right]):is([data-size=md])":
89
+
"600px",
90
+
":is([data-direction=left], [data-direction=right]):is([data-size=sm])":
91
+
"320px",
92
92
":is([data-direction=top], [data-direction=bottom])": "100vw",
93
93
},
94
94
95
95
animationDuration: animationDuration.default,
96
96
animationName: {
97
-
":is([data-direction=right][data-entering])": animations.slideInRight,
98
-
":is([data-direction=right][data-exiting])": animations.slideOutRight,
97
+
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
98
+
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
99
99
":is([data-direction=left][data-entering])": animations.slideInLeft,
100
100
":is([data-direction=left][data-exiting])": animations.slideOutLeft,
101
+
":is([data-direction=right][data-entering])": animations.slideInRight,
102
+
":is([data-direction=right][data-exiting])": animations.slideOutRight,
101
103
":is([data-direction=top][data-entering])": animations.slideInTop,
102
104
":is([data-direction=top][data-exiting])": animations.slideOutTop,
103
-
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
104
-
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
105
105
},
106
106
animationTimingFunction: "ease-in-out",
107
107
},
···
110
110
paddingTop: spacing["2"],
111
111
},
112
112
header: {
113
+
gap: spacing["2"],
113
114
alignItems: "center",
114
115
display: "flex",
115
-
gap: spacing["2"],
116
-
height: spacing["8"],
117
116
justifyContent: "space-between",
117
+
height: spacing["8"],
118
118
paddingBottom: spacing["2"],
119
119
paddingLeft: spacing["4"],
120
120
paddingRight: spacing["4"],
···
134
134
paddingTop: { default: 0, ":first-child": spacing["4"] },
135
135
},
136
136
footer: {
137
-
display: "flex",
138
137
gap: spacing["2"],
138
+
display: "flex",
139
139
justifyContent: "flex-end",
140
140
paddingBottom: spacing["2"],
141
141
paddingLeft: spacing["4"],
+3
-3
packages/hip-ui/src/components/editable-text/index.tsx
+3
-3
packages/hip-ui/src/components/editable-text/index.tsx
···
26
26
27
27
const styles = stylex.create({
28
28
input: {
29
-
backgroundColor: "transparent",
30
29
borderRadius: radius["sm"],
31
30
borderWidth: 0,
31
+
textDecoration: "inherit",
32
+
backgroundColor: "transparent",
32
33
display: "inline-block",
33
34
fontFamily: "inherit",
34
35
fontSize: "inherit",
35
36
fontWeight: "inherit",
36
37
letterSpacing: "inherit",
37
38
lineHeight: "inherit",
38
-
minWidth: 0,
39
39
textAlign: "inherit",
40
-
textDecoration: "inherit",
41
40
textTransform: "inherit",
41
+
minWidth: 0,
42
42
43
43
outlineColor: "blue",
44
44
outlineStyle: "solid",
+7
-10
packages/hip-ui/src/components/file-drop-zone/index.tsx
+7
-10
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
12
12
import { radius } from "../theme/radius.stylex";
13
13
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
-
import { Text } from "../typography/text";
16
15
17
16
async function getFiles(items: DropItem[]): Promise<File[]> {
18
17
return Promise.all(
···
22
21
23
22
const styles = stylex.create({
24
23
dropZone: {
25
-
backgroundColor: {
26
-
default: uiColor.bgSubtle,
27
-
":is([data-drop-target])": primaryColor.component1,
28
-
},
24
+
// eslint-disable-next-line @stylexjs/valid-styles
25
+
cornerShape: "squircle",
26
+
padding: spacing["4"],
29
27
borderColor: {
30
28
default: uiColor.border3,
31
29
":is([data-drop-target])": primaryColor.solid1,
···
34
32
default: radius["md"],
35
33
"@supports (corner-shape: squircle)": radius["3xl"],
36
34
},
37
-
cornerShape: "squircle",
38
35
borderStyle: {
39
36
default: "dashed",
40
37
":is([data-drop-target])": "solid",
41
38
},
42
39
borderWidth: 2,
40
+
backgroundColor: {
41
+
default: uiColor.bgSubtle,
42
+
":is([data-drop-target])": primaryColor.component1,
43
+
},
43
44
boxSizing: "border-box",
44
-
padding: spacing["4"],
45
45
46
46
alignItems: "center",
47
47
display: "flex",
48
48
flexDirection: "column",
49
49
justifyContent: "center",
50
-
},
51
-
message: {
52
-
textAlign: "center",
53
50
},
54
51
});
55
52
+3
-2
packages/hip-ui/src/components/kbd/index.tsx
+3
-2
packages/hip-ui/src/components/kbd/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
kbd: {
12
-
backgroundColor: uiColor.component2,
12
+
// eslint-disable-next-line @stylexjs/valid-styles
13
+
cornerShape: "squircle",
13
14
borderRadius: {
14
15
default: radius["sm"],
15
16
"@supports (corner-shape: squircle)": radius["3xl"],
16
17
},
17
-
cornerShape: "squircle",
18
+
backgroundColor: uiColor.component2,
18
19
color: uiColor.text1,
19
20
fontFamily: fontFamily["sans"],
20
21
fontSize: fontSize.sm,