A design system in a box.
hip-ui.tngl.io/docs/introduction
animation polish
+165
-107
+7
-3
apps/docs/src/components/drawer/index.tsx
+7
-3
apps/docs/src/components/drawer/index.tsx
···
12
12
} from "react-aria-components";
13
13
14
14
import { IconButton } from "../icon-button";
15
-
import { animationDuration, animations } from "../theme/animations.stylex";
15
+
import {
16
+
animationDuration,
17
+
animations,
18
+
animationTimingFunction,
19
+
} from "../theme/animations.stylex";
16
20
import { uiColor } from "../theme/color.stylex";
17
21
import { spacing } from "../theme/spacing.stylex";
18
22
import { Size, StyleXComponentProps } from "../theme/types";
···
92
96
":is([data-direction=top], [data-direction=bottom])": "100vw",
93
97
},
94
98
95
-
animationDuration: animationDuration.default,
99
+
animationDuration: animationDuration.slow,
96
100
animationName: {
97
101
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
98
102
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
···
103
107
":is([data-direction=top][data-entering])": animations.slideInTop,
104
108
":is([data-direction=top][data-exiting])": animations.slideOutTop,
105
109
},
106
-
animationTimingFunction: "ease-in-out",
110
+
animationTimingFunction: animationTimingFunction.easeInOut,
107
111
},
108
112
dialog: {
109
113
paddingBottom: spacing["2"],
+26
-23
apps/docs/src/components/empty-state/index.tsx
+26
-23
apps/docs/src/components/empty-state/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
emptyState: {
14
-
display: "grid",
14
+
"--empty-state-image-size": {
15
+
":is([data-empty-state-size=lg])": spacing["20"],
16
+
":is([data-empty-state-size=md])": spacing["14"],
17
+
":is([data-empty-state-size=sm])": spacing["10"],
18
+
},
15
19
gridTemplateAreas: {
20
+
// eslint-disable-next-line @stylexjs/valid-styles
16
21
":is([data-empty-state-size=md],[data-empty-state-size=lg])": {
17
22
default: `
18
23
"image"
···
26
31
"actions"
27
32
`,
28
33
},
34
+
// eslint-disable-next-line @stylexjs/valid-styles
29
35
":is([data-empty-state-size=sm])": {
30
36
default: `
31
37
"image title"
···
37
43
`,
38
44
},
39
45
},
46
+
alignItems: "center",
47
+
columnGap: {
48
+
":is([data-empty-state-size=sm])": spacing["4"],
49
+
},
50
+
display: "grid",
51
+
fontFamily: fontFamily["sans"],
40
52
gridTemplateColumns: {
53
+
// eslint-disable-next-line @stylexjs/valid-styles
41
54
":is([data-empty-state-size=sm])": {
42
-
":has([data-empty-state-actions])": "min-content 1fr max-content",
43
55
default: "min-content 1fr",
56
+
":has([data-empty-state-actions])": "min-content 1fr max-content",
44
57
},
45
58
},
46
-
alignItems: "center",
47
-
fontFamily: fontFamily["sans"],
48
59
justifyItems: {
49
60
":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center",
50
61
":is([data-empty-state-size=sm])": "start",
51
62
},
52
-
columnGap: {
53
-
":is([data-empty-state-size=sm])": spacing["4"],
54
-
},
55
-
textAlign: "center",
56
-
"--empty-state-image-size": {
57
-
":is([data-empty-state-size=lg])": spacing["20"],
58
-
":is([data-empty-state-size=md])": spacing["14"],
59
-
":is([data-empty-state-size=sm])": spacing["10"],
60
-
},
61
63
rowGap: {
62
64
":is([data-empty-state-size=lg])": spacing["6"],
63
65
":is([data-empty-state-size=md])": spacing["4"],
64
66
":is([data-empty-state-size=sm])": spacing["2"],
65
67
},
68
+
textAlign: "center",
66
69
},
67
70
image: {
68
71
gridArea: "image",
69
-
height: "var(--empty-state-image-size)",
70
-
width: "var(--empty-state-image-size)",
72
+
alignItems: "center",
71
73
display: "flex",
74
+
justifyContent: "center",
72
75
objectFit: "contain",
73
-
alignItems: "center",
74
-
justifyContent: "center",
76
+
height: "var(--empty-state-image-size)",
77
+
width: "var(--empty-state-image-size)",
75
78
},
76
79
title: {
77
80
gridArea: "title",
81
+
margin: 0,
78
82
fontSize: {
79
83
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
80
84
":is([data-empty-state-size='md'] *)": fontSize["xl"],
81
85
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
82
86
},
83
-
margin: 0,
84
87
fontWeight: fontWeight["semibold"],
85
88
},
86
89
description: {
87
90
gridArea: "description",
88
-
fontSize: fontSize["sm"],
89
91
margin: 0,
92
+
fontSize: fontSize["sm"],
90
93
fontWeight: fontWeight["normal"],
91
94
maxWidth: {
92
95
":is([data-empty-state-size=lg])": "480px",
···
96
99
},
97
100
actions: {
98
101
gridArea: "actions",
99
-
display: "flex",
100
102
gap: spacing["2"],
101
-
flexDirection: "row",
102
103
alignItems: "center",
104
+
display: "flex",
105
+
flexDirection: "row",
103
106
flexWrap: "wrap",
104
107
justifyContent: "center",
105
108
···
169
172
};
170
173
171
174
export interface EmptyStateTitleProps
172
-
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
175
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
173
176
174
177
export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => {
175
-
return <h2 {...props} {...stylex.props(styles.title, ui.text, style)} />;
178
+
return <div {...props} {...stylex.props(styles.title, ui.text, style)} />;
176
179
};
177
180
178
181
export interface EmptyStateDescriptionProps
+4
-4
apps/docs/src/components/popover/index.tsx
+4
-4
apps/docs/src/components/popover/index.tsx
···
27
27
content: {
28
28
boxShadow: "none",
29
29
position: "relative",
30
-
paddingBottom: spacing["2"],
31
-
paddingLeft: spacing["2"],
32
-
paddingRight: spacing["2"],
33
-
paddingTop: spacing["2"],
30
+
paddingBottom: spacing["4"],
31
+
paddingLeft: spacing["4"],
32
+
paddingRight: spacing["4"],
33
+
paddingTop: spacing["4"],
34
34
},
35
35
caret: {},
36
36
arrow: {
+5
-2
apps/docs/src/components/radio/index.tsx
+5
-2
apps/docs/src/components/radio/index.tsx
···
15
15
import { SizeContext } from "../context";
16
16
import { Flex } from "../flex";
17
17
import { Description, FieldErrorMessage, Label } from "../label";
18
-
import { animationDuration } from "../theme/animations.stylex";
18
+
import {
19
+
animationDuration,
20
+
animationTimingFunction,
21
+
} from "../theme/animations.stylex";
19
22
import { mediaQueries } from "../theme/media-queries.stylex";
20
23
import { radius } from "../theme/radius.stylex";
21
24
import { ui, primary } from "../theme/semantic-color.stylex";
···
80
83
default: scaleIn,
81
84
[mediaQueries.reducedMotion]: "none",
82
85
},
83
-
animationTimingFunction: "ease-in-out",
86
+
animationTimingFunction: animationTimingFunction.easeInOut,
84
87
},
85
88
checked: {
86
89
color: "white",
+2
-1
apps/docs/src/components/select/index.tsx
+2
-1
apps/docs/src/components/select/index.tsx
+1
apps/docs/src/components/theme/useButtonStyles.ts
+1
apps/docs/src/components/theme/useButtonStyles.ts
+10
-10
apps/docs/src/components/theme/useDialogStyles.ts
+10
-10
apps/docs/src/components/theme/useDialogStyles.ts
···
2
2
import { use } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
-
import { animationDuration, animations } from "../theme/animations.stylex";
5
+
import {
6
+
animationDuration,
7
+
animations,
8
+
animationTimingFunction,
9
+
} from "../theme/animations.stylex";
6
10
import { mediaQueries } from "../theme/media-queries.stylex";
7
11
import { radius } from "../theme/radius.stylex";
8
12
import { shadow } from "../theme/shadow.stylex";
···
11
15
12
16
const styles = stylex.create({
13
17
overlay: {
14
-
animationDuration: animationDuration.slow,
15
-
animationName: {
16
-
":is([data-entering])": animations.fadeIn,
17
-
},
18
-
animationTimingFunction: "ease-in",
18
+
animationDuration: animationDuration.default,
19
+
animationName: animations.fadeIn,
20
+
animationTimingFunction: animationTimingFunction.easeIn,
19
21
backgroundColor: "rgba(0, 0, 0, 0.5)",
20
22
opacity: {
21
23
default: 1,
···
50
52
maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
51
53
top: "calc(var(--visual-viewport-height) / 2)",
52
54
53
-
animationDuration: { ":is([data-entering])": "300ms" },
55
+
animationDuration: animationDuration.slow,
54
56
animationName: { ":is([data-entering])": animations.zoomIn },
55
-
animationTimingFunction: {
56
-
":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
57
-
},
57
+
animationTimingFunction: animationTimingFunction.easeElasticInOut,
58
58
},
59
59
dialog: {
60
60
outline: "none",
+1
-1
apps/docs/src/components/theme/useInputStyles.ts
+1
-1
apps/docs/src/components/theme/useInputStyles.ts
+8
-2
apps/docs/src/components/theme/usePopoverStyles.ts
+8
-2
apps/docs/src/components/theme/usePopoverStyles.ts
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import { animationDuration } from "./animations.stylex";
3
+
import {
4
+
animationDuration,
5
+
animationTimingFunction,
6
+
} from "./animations.stylex";
4
7
import { mediaQueries } from "./media-queries.stylex";
5
8
import { radius } from "./radius.stylex";
6
9
import { ui } from "./semantic-color.stylex";
···
29
32
":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
30
33
},
31
34
opacity: {
35
+
default: 1,
32
36
":is([data-entering], [data-entering] > *)": 0,
33
37
":is([data-exiting], [data-exiting] > *)": 0,
34
38
},
···
40
44
":is([data-exiting], [data-exiting] > *)":
41
45
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
42
46
},
43
-
transitionDuration: animationDuration.fast,
47
+
transitionDuration: animationDuration.verySlow,
48
+
transitionTimingFunction: animationTimingFunction.easeSpring,
44
49
transitionProperty: "transform, opacity",
50
+
willChange: "transform, opacity",
45
51
},
46
52
});
47
53
+2
-2
apps/docs/src/docs/components/collections/table.mdx
+2
-2
apps/docs/src/docs/components/collections/table.mdx
···
38
38
39
39
<Example src={Selection} />
40
40
41
-
> NOTE: The table alsso supports `replace` as a `selectionBehavior`.
42
-
> React more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#selection-behavior).
41
+
> NOTE: The table also supports `replace` as a `selectionBehavior`.
42
+
> Read more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#selection-behavior).
43
43
44
44
### Resizable Columns
45
45
+2
-3
apps/docs/src/examples/combobox/virtualization.tsx
+2
-3
apps/docs/src/examples/combobox/virtualization.tsx
···
1
1
import { ComboBox, ComboBoxItem } from "@/components/combobox";
2
2
3
3
const options = Array.from({ length: 1000 }, (_, i) => ({
4
-
id: `option-${i + 1}`,
5
-
name: `Option ${i + 1}`,
4
+
id: "option" + (i + 1),
5
+
name: "Option " + (i + 1),
6
6
}));
7
7
8
8
export function Virtualization() {
···
21
21
</ComboBox>
22
22
);
23
23
}
24
-
+2
-2
apps/docs/src/examples/listbox/virtualization.tsx
+2
-2
apps/docs/src/examples/listbox/virtualization.tsx
+8
-4
apps/docs/src/examples/popover/basic.tsx
+8
-4
apps/docs/src/examples/popover/basic.tsx
···
1
1
import { Button } from "@/components/button";
2
+
import { Flex } from "@/components/flex";
2
3
import { Popover } from "@/components/popover";
4
+
import { Text } from "@/components/typography/text";
3
5
4
6
export function Basic() {
5
7
return (
6
8
<Popover trigger={<Button>Open Popover</Button>}>
7
-
<div>
8
-
<h3>Popover Content</h3>
9
-
<p>This is the content inside the popover.</p>
10
-
</div>
9
+
<Flex direction="column" gap="3">
10
+
<Text size="lg" weight="medium">
11
+
Popover Content
12
+
</Text>
13
+
<Text size="base">This is the content inside the popover.</Text>
14
+
</Flex>
11
15
</Popover>
12
16
);
13
17
}
+2
-2
apps/docs/src/examples/select/virtualization.tsx
+2
-2
apps/docs/src/examples/select/virtualization.tsx
+2
-2
apps/docs/src/examples/table/virtualization.tsx
+2
-2
apps/docs/src/examples/table/virtualization.tsx
···
33
33
34
34
const rows = Array.from({ length: 1000 }, (_, i) => ({
35
35
id: i + 1,
36
-
name: `User ${i + 1}`,
37
-
email: `user${i + 1}@example.com`,
36
+
name: "User " + (i + 1),
37
+
email: "user" + (i + 1) + "@example.com",
38
38
role: i % 3 === 0 ? "Admin" : i % 3 === 1 ? "Moderator" : "User",
39
39
}));
40
40
+4
-5
apps/docs/src/examples/tree/virtualization.tsx
+4
-5
apps/docs/src/examples/tree/virtualization.tsx
···
14
14
});
15
15
16
16
const treeData = Array.from({ length: 100 }, (_, i) => ({
17
-
id: `folder-${i + 1}`,
18
-
name: `Folder ${i + 1}`,
17
+
id: "folder" + (i + 1),
18
+
name: "Folder " + (i + 1),
19
19
children: Array.from({ length: 20 }, (_, j) => ({
20
-
id: `folder-${i + 1}-file-${j + 1}`,
21
-
name: `File ${j + 1}`,
20
+
id: "file" + (j + 1),
21
+
name: "File " + (j + 1),
22
22
})),
23
23
}));
24
24
···
37
37
</Tree>
38
38
);
39
39
}
40
-
+42
-19
apps/docs/stylex.css
+42
-19
apps/docs/stylex.css
···
70
70
@property --x---xepqutl { syntax: "*"; inherits: false;}
71
71
@property --x---x1umfgwa { syntax: "*"; inherits: false;}
72
72
@property --x---x1l5nls6 { syntax: "*"; inherits: false;}
73
+
@property --x-boxShadow { syntax: "*"; inherits: false;}
73
74
@property --x-animationDuration { syntax: "*"; inherits: false;}
74
75
@property --x-animationName { syntax: "*"; inherits: false;}
75
76
@property --x-animationTimingFunction { syntax: "*"; inherits: false;}
76
-
@property --x-boxShadow { syntax: "*"; inherits: false;}
77
+
@property --x-aspectRatio { syntax: "*"; inherits: false;}
77
78
@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
78
79
@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
79
80
@property --x-gridColumnStart { syntax: "*"; inherits: false;}
80
81
@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
81
82
@property --x-gridRowStart { syntax: "*"; inherits: false;}
82
83
@property --x-gridRowEnd { syntax: "*"; inherits: false;}
83
-
@property --x-aspectRatio { syntax: "*"; inherits: false;}
84
84
@property --x-width { syntax: "*"; inherits: false;}
85
85
@property --x-paddingLeft { syntax: "*"; inherits: false;}
86
86
@property --x---items-per-row { syntax: "*"; inherits: false;}
87
+
@property --x-backgroundColor { syntax: "*"; inherits: false;}
87
88
@property --x-height { syntax: "*"; inherits: false;}
88
89
@property --x-transform { syntax: "*"; inherits: false;}
89
-
@property --x-backgroundColor { syntax: "*"; inherits: false;}
90
90
@property --xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 }
91
91
@property --x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 }
92
92
@property --x1xrohu8 { syntax: "<number>"; inherits: true; initial-value: 300 }
···
676
676
.x10e4vud:not(#\#):not(#\#):not(#\#){animation-fill-mode:forwards}
677
677
.xa4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
678
678
.x16330kk:not(#\#):not(#\#):not(#\#){animation-name:var(--x-animationName)}
679
+
.xybio69:not(#\#):not(#\#):not(#\#){animation-name:var(--x1jmpvsz)}
679
680
.x1aerksh:not(#\#):not(#\#):not(#\#){animation-name:x1wc8ddo-B}
680
681
.x19gekol:not(#\#):not(#\#):not(#\#){animation-name:x1yf9xd4-B}
681
682
.x1exzhgm:not(#\#):not(#\#):not(#\#){animation-name:x1yo5mx1-B}
682
683
.x1e4sq93:not(#\#):not(#\#):not(#\#){animation-name:x72inym-B}
683
-
.x4hg4is:not(#\#):not(#\#):not(#\#){animation-timing-function:ease-in-out}
684
-
.xn0cd8s:not(#\#):not(#\#):not(#\#){animation-timing-function:ease-in}
685
684
.x1esw782:not(#\#):not(#\#):not(#\#){animation-timing-function:linear}
686
685
.xdmhim0:not(#\#):not(#\#):not(#\#){animation-timing-function:var(--x-animationTimingFunction)}
686
+
.xd20dqd:not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(0.5, -0.3, 0.1, 1.5)}
687
+
.x177toxx:not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1)}
688
+
.xainoil:not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(0.7, 0, 1, 1)}
687
689
.x10y9f9r:not(#\#):not(#\#):not(#\#){aspect-ratio:var(--x-aspectRatio)}
688
690
.x1esc4pq:not(#\#):not(#\#):not(#\#){background-color:#14b8a6}
689
691
.xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)}
···
922
924
.x13zvrfm:not(#\#):not(#\#):not(#\#){transition-duration:100ms}
923
925
.xndv0t3:not(#\#):not(#\#):not(#\#){transition-duration:150ms}
924
926
.x151xuh8:not(#\#):not(#\#):not(#\#){transition-duration:200ms}
927
+
.x1xavoji:not(#\#):not(#\#):not(#\#){transition-duration:300ms}
925
928
.xfagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
926
929
.x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color}
927
930
.xts7igz:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color}
···
937
940
.x1mnhl27:not(#\#):not(#\#):not(#\#){transition-property:translate,width}
938
941
.xz4gly6:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-in-out}
939
942
.xcj1dhv:not(#\#):not(#\#):not(#\#){transition-timing-function:linear}
943
+
.x1eoxazy:not(#\#):not(#\#):not(#\#){transition-timing-function:
944
+
linear(
945
+
0,
946
+
0.007,
947
+
0.029 2.2%,
948
+
0.118 4.7%,
949
+
0.625 14.4%,
950
+
0.826 19%,
951
+
0.902,
952
+
0.962,
953
+
1.008 26.1%,
954
+
1.041 28.7%,
955
+
1.064 32.1%,
956
+
1.07 36%,
957
+
1.061 40.5%,
958
+
1.015 53.4%,
959
+
0.999 61.6%,
960
+
0.995 71.2%,
961
+
1
962
+
)
963
+
}
940
964
.x113ijq:not(#\#):not(#\#):not(#\#){translate:-50% -50%}
941
965
.xh1e3oa:not(#\#):not(#\#):not(#\#){translate:unset}
942
966
.x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
943
967
.xlshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
944
968
.xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
969
+
.x1q1rmc8:not(#\#):not(#\#):not(#\#){will-change:transform,opacity}
945
970
.x8knxv4:not(#\#):not(#\#):not(#\#){z-index:-1}
946
971
.x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
947
972
.x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
···
950
975
.xoun3hd:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:center}
951
976
.x1wjcwka:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#){align-items:flex-start}
952
977
.xtpdso8:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:stretch}
953
-
.xs2en9u:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-duration:.3s}
954
978
.x1lrtdli:is([data-direction=left][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--x18nztzn)}
955
979
.xumru39:is([data-direction=bottom][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--x1hjek28)}
956
-
.x1c7629m:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--x1jmpvsz)}
957
980
.xbo1izk:is([data-direction=right][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--x1otygbt)}
958
981
.x594u86:is([data-direction=top][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--x1q5efi)}
959
982
.xazmt96:is([data-direction=bottom][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--xe54f9n)}
···
961
984
.x10q42mg:is([data-direction=right][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--xft8bi2)}
962
985
.x101j2ex:is([data-direction=top][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--xi8gqyr)}
963
986
.x2lddy6:is([data-direction=left][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--xijpfl)}
964
-
.xyfghb2:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}
965
987
.x6yz6ea:is(*):not(#\#):not(#\#):not(#\#)::before{background-color:transparent}
966
988
.xn6ea36:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
967
989
.x1g50h58:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)}
···
1046
1068
.x1pis5b5:is([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#){color:var(--x1xyma3f)}
1047
1069
.xx3mchb:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1048
1070
.x1lydh9o:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--x45q57k)}
1049
-
.x1t5mdh1:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1050
1071
.xuk2py2:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1072
+
.x1t5mdh1:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1051
1073
.xnprwmv:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1052
1074
.xkzp63n:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1053
1075
.xlu6prn:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
···
1071
1093
.xmzpm4q:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#){flex-grow:1}
1072
1094
.x1vnanun:is(*) svg:not(#\#):not(#\#):not(#\#){flex-shrink:0}
1073
1095
.xn4f9nh:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1074
-
.xs02ue2:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1075
1096
.x121stge:is([data-empty-state-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1097
+
.xs02ue2:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1076
1098
.xcuzl93:is([data-size=sm]):not(#\#):not(#\#):not(#\#){font-size:var(--x1vaen13)}
1077
1099
.x1kk4rht:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1vaen13)}
1078
1100
.xw6vg6:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1vzl7l6)}
1079
1101
.x4l9cx5:is([data-empty-state-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1vzl7l6)}
1080
-
.x4xd5sn:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--x1w27pzf)}
1081
1102
.x1wnjc9i:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1w27pzf)}
1103
+
.x4xd5sn:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--x1w27pzf)}
1082
1104
.xiz4di:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1w27pzf)}
1105
+
.x1fcv2b2:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--xidomu0)}
1083
1106
.x13b9osk:is([data-size=lg]):not(#\#):not(#\#):not(#\#){font-size:var(--xidomu0)}
1084
-
.x1fcv2b2:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--xidomu0)}
1085
1107
.x1tk0hk2:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--xidomu0)}
1086
1108
.x13xnzmg:is([data-card-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xq985z6)}
1087
1109
.xwbnkov:is([data-empty-state-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xq985z6)}
···
1282
1304
.x1quve4f:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--xyoqvup)}
1283
1305
.xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
1284
1306
.x1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
1307
+
.x1wbik15:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--trigger-width)}
1285
1308
.xyo8t01:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--x1do95gr)}
1286
1309
.x19olhet:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--xf930e)}
1287
1310
.xzz8l7:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--xgvn2um)}
···
1440
1463
.xe4pvmi:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
1441
1464
.xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
1442
1465
.xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
1466
+
.x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1443
1467
.x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1444
1468
.x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1445
1469
.xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1446
1470
.x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1447
1471
.x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1448
-
.x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1449
1472
.xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1450
1473
.xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1451
1474
.x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
···
1459
1482
.x4isadb:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress number) * 1%)}
1460
1483
.xqr7z5w:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)}
1461
1484
.x1s93bjk:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1462
-
.xtv84u5:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1463
1485
.x1f7uwq8:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1486
+
.xtv84u5:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1464
1487
.x2l7m0n:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x11x3va4)}
1465
1488
.xyzkuza:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x1a1riub)}
1466
1489
.x1ra6d0n:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x1a1riub)}
···
1484
1507
.x1rbpv5p:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xyoqvup)}
1485
1508
.xxy4zcn:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xyoqvup)}
1486
1509
.x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
1510
+
.xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1487
1511
.x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1488
1512
.x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1489
1513
.xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1490
1514
.x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1491
-
.xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1492
1515
.x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%}
1493
1516
.x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
1494
1517
.xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)}
···
1535
1558
.x1vomv2v:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1a1riub)}
1536
1559
.xkz5e6c:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1plbop)}
1537
1560
.xsabt53:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xgvn2um)}
1538
-
.x1yq5ceo:is([data-table-size=lg] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xgvn2um)}
1539
1561
.x1pp8d3o:is([data-empty-state-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xgvn2um)}
1562
+
.x1yq5ceo:is([data-table-size=lg] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xgvn2um)}
1540
1563
.x8pw2nx:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xmuc480)}
1541
1564
.x1dd6wxn:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xsow7ju)}
1542
1565
.x8300ou:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xsow7ju)}
···
1551
1574
.x1olbyz:is([data-table-size=lg] *:not(:last-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xgvn2um)}
1552
1575
.x1srgp0q:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xmuc480)}
1553
1576
.x1z0vii2:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1554
-
.x1e6kius:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1555
1577
.x1hrrdhv:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1578
+
.x1e6kius:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1556
1579
.xl9nm1a:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--x1a1riub)}
1557
1580
.xoxkb97:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--x1a1riub)}
1558
1581
.xnb2w68:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--x1plbop)}
···
1560
1583
.x198r67w:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xsow7ju)}
1561
1584
.x1en8ign:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xsow7ju)}
1562
1585
.x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0}
1586
+
.xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1563
1587
.x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1564
1588
.x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1565
1589
.xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1566
1590
.x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1567
1591
.xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1568
-
.xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1569
1592
.x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
1593
+
.xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1570
1594
.xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1571
1595
.x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1572
1596
.xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1573
1597
.xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1574
-
.xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1575
1598
.xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
1576
1599
.xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
1577
1600
.x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
+7
-3
packages/hip-ui/src/components/drawer/index.tsx
+7
-3
packages/hip-ui/src/components/drawer/index.tsx
···
12
12
} from "react-aria-components";
13
13
14
14
import { IconButton } from "../icon-button";
15
-
import { animationDuration, animations } from "../theme/animations.stylex";
15
+
import {
16
+
animationDuration,
17
+
animations,
18
+
animationTimingFunction,
19
+
} from "../theme/animations.stylex";
16
20
import { uiColor } from "../theme/color.stylex";
17
21
import { spacing } from "../theme/spacing.stylex";
18
22
import { Size, StyleXComponentProps } from "../theme/types";
···
92
96
":is([data-direction=top], [data-direction=bottom])": "100vw",
93
97
},
94
98
95
-
animationDuration: animationDuration.default,
99
+
animationDuration: animationDuration.slow,
96
100
animationName: {
97
101
":is([data-direction=bottom][data-entering])": animations.slideInBottom,
98
102
":is([data-direction=bottom][data-exiting])": animations.slideOutBottom,
···
103
107
":is([data-direction=top][data-entering])": animations.slideInTop,
104
108
":is([data-direction=top][data-exiting])": animations.slideOutTop,
105
109
},
106
-
animationTimingFunction: "ease-in-out",
110
+
animationTimingFunction: animationTimingFunction.easeInOut,
107
111
},
108
112
dialog: {
109
113
paddingBottom: spacing["2"],
+4
-4
packages/hip-ui/src/components/popover/index.tsx
+4
-4
packages/hip-ui/src/components/popover/index.tsx
···
27
27
content: {
28
28
boxShadow: "none",
29
29
position: "relative",
30
-
paddingBottom: spacing["2"],
31
-
paddingLeft: spacing["2"],
32
-
paddingRight: spacing["2"],
33
-
paddingTop: spacing["2"],
30
+
paddingBottom: spacing["4"],
31
+
paddingLeft: spacing["4"],
32
+
paddingRight: spacing["4"],
33
+
paddingTop: spacing["4"],
34
34
},
35
35
caret: {},
36
36
arrow: {
+5
-2
packages/hip-ui/src/components/radio/index.tsx
+5
-2
packages/hip-ui/src/components/radio/index.tsx
···
15
15
import { SizeContext } from "../context";
16
16
import { Flex } from "../flex";
17
17
import { Description, FieldErrorMessage, Label } from "../label";
18
-
import { animationDuration } from "../theme/animations.stylex";
18
+
import {
19
+
animationDuration,
20
+
animationTimingFunction,
21
+
} from "../theme/animations.stylex";
19
22
import { mediaQueries } from "../theme/media-queries.stylex";
20
23
import { radius } from "../theme/radius.stylex";
21
24
import { ui, primary } from "../theme/semantic-color.stylex";
···
80
83
default: scaleIn,
81
84
[mediaQueries.reducedMotion]: "none",
82
85
},
83
-
animationTimingFunction: "ease-in-out",
86
+
animationTimingFunction: animationTimingFunction.easeInOut,
84
87
},
85
88
checked: {
86
89
color: "white",
+2
-1
packages/hip-ui/src/components/select/index.tsx
+2
-1
packages/hip-ui/src/components/select/index.tsx
+1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+10
-10
packages/hip-ui/src/components/theme/useDialogStyles.ts
+10
-10
packages/hip-ui/src/components/theme/useDialogStyles.ts
···
2
2
import { use } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
-
import { animationDuration, animations } from "../theme/animations.stylex";
5
+
import {
6
+
animationDuration,
7
+
animations,
8
+
animationTimingFunction,
9
+
} from "../theme/animations.stylex";
6
10
import { mediaQueries } from "../theme/media-queries.stylex";
7
11
import { radius } from "../theme/radius.stylex";
8
12
import { shadow } from "../theme/shadow.stylex";
···
11
15
12
16
const styles = stylex.create({
13
17
overlay: {
14
-
animationDuration: animationDuration.slow,
15
-
animationName: {
16
-
":is([data-entering])": animations.fadeIn,
17
-
},
18
-
animationTimingFunction: "ease-in",
18
+
animationDuration: animationDuration.default,
19
+
animationName: animations.fadeIn,
20
+
animationTimingFunction: animationTimingFunction.easeIn,
19
21
backgroundColor: "rgba(0, 0, 0, 0.5)",
20
22
opacity: {
21
23
default: 1,
···
50
52
maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
51
53
top: "calc(var(--visual-viewport-height) / 2)",
52
54
53
-
animationDuration: { ":is([data-entering])": "300ms" },
55
+
animationDuration: animationDuration.slow,
54
56
animationName: { ":is([data-entering])": animations.zoomIn },
55
-
animationTimingFunction: {
56
-
":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
57
-
},
57
+
animationTimingFunction: animationTimingFunction.easeElasticInOut,
58
58
},
59
59
dialog: {
60
60
outline: "none",
+8
-2
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+8
-2
packages/hip-ui/src/components/theme/usePopoverStyles.ts
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import { animationDuration } from "./animations.stylex";
3
+
import {
4
+
animationDuration,
5
+
animationTimingFunction,
6
+
} from "./animations.stylex";
4
7
import { mediaQueries } from "./media-queries.stylex";
5
8
import { radius } from "./radius.stylex";
6
9
import { ui } from "./semantic-color.stylex";
···
29
32
":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
30
33
},
31
34
opacity: {
35
+
default: 1,
32
36
":is([data-entering], [data-entering] > *)": 0,
33
37
":is([data-exiting], [data-exiting] > *)": 0,
34
38
},
···
40
44
":is([data-exiting], [data-exiting] > *)":
41
45
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
42
46
},
43
-
transitionDuration: animationDuration.fast,
47
+
transitionDuration: animationDuration.verySlow,
44
48
transitionProperty: "transform, opacity",
49
+
transitionTimingFunction: animationTimingFunction.easeSpring,
50
+
willChange: "transform, opacity",
45
51
},
46
52
});
47
53