A design system in a box.
hip-ui.tngl.io/docs/introduction
popover animations
+311
-89
+5
-1
apps/docs/src/components/combobox/index.tsx
+5
-1
apps/docs/src/components/combobox/index.tsx
···
116
116
shouldFlip={shouldFlip}
117
117
shouldUpdatePosition={shouldUpdatePosition}
118
118
placement={placement}
119
+
{...stylex.props(
120
+
popoverStyles.wrapper,
121
+
popoverStyles.animation,
122
+
styles.matchWidth,
123
+
)}
119
124
>
120
125
<ListBox
121
126
items={items}
122
-
style={[popoverStyles, styles.matchWidth]}
123
127
renderEmptyState={renderEmptyState || EmptyState}
124
128
>
125
129
{children}
+6
-4
apps/docs/src/components/hover-card/index.tsx
+6
-4
apps/docs/src/components/hover-card/index.tsx
···
91
91
{trigger}
92
92
</Pressable>
93
93
<AriaPopover
94
-
{...stylex.props(styles.wrapper)}
94
+
{...stylex.props(
95
+
styles.wrapper,
96
+
popoverStyles.wrapper,
97
+
popoverStyles.animation,
98
+
)}
95
99
offset={8}
96
100
containerPadding={8}
97
101
isNonModal={isFocusVisible ? false : true}
98
102
trigger={triggerName}
99
103
{...mergeProps(hoverProps, popoverProps)}
100
104
>
101
-
<Dialog {...stylex.props(popoverStyles, styles.content, style)}>
102
-
{children}
103
-
</Dialog>
105
+
<Dialog {...stylex.props(styles.content, style)}>{children}</Dialog>
104
106
</AriaPopover>
105
107
</>
106
108
);
+3
-1
apps/docs/src/components/meter/index.tsx
+3
-1
apps/docs/src/components/meter/index.tsx
···
6
6
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
+
import { animationDuration } from "../theme/animations.stylex";
9
10
import { radius } from "../theme/radius.stylex";
10
11
import {
11
12
criticalColor,
···
17
18
import { spacing } from "../theme/spacing.stylex";
18
19
import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
19
20
import { fontSize, lineHeight } from "../theme/typography.stylex";
21
+
import { mediaQueries } from "../theme/media-queries.stylex";
20
22
21
23
const styles = stylex.create({
22
24
wrapper: {
···
74
76
fill: {
75
77
height: "100%",
76
78
transform: "translateX(-100%)",
77
-
transitionDuration: "10ms",
79
+
transitionDuration: animationDuration.default,
78
80
transitionProperty: "transform",
79
81
transitionTimingFunction: "linear",
80
82
width: "100%",
-1
apps/docs/src/components/pagination/index.tsx
-1
apps/docs/src/components/pagination/index.tsx
+20
-4
apps/docs/src/components/popover/index.tsx
+20
-4
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";
13
14
import { uiColor } from "../theme/semantic-color.stylex";
14
15
import { spacing } from "../theme/spacing.stylex";
15
16
import { StyleXComponentProps } from "../theme/types";
16
17
import { usePopoverStyles } from "../theme/usePopoverStyles";
17
18
18
19
const styles = stylex.create({
19
-
wrapper: {
20
+
wrapperWithArrow: {
20
21
filter: `drop-shadow(-0.5px -0.5px 0 ${uiColor.border2}) drop-shadow(0.5px -0.5px 0 ${uiColor.border2}) drop-shadow(0.5px 0.5px 0 ${uiColor.border2}) drop-shadow(-0.5px 0.5px 0 ${uiColor.border2}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
21
22
},
23
+
wrapper: {
24
+
borderColor: uiColor.border2,
25
+
borderRadius: radius["md"],
26
+
borderStyle: "solid",
27
+
borderWidth: 1,
28
+
},
22
29
content: {
23
-
borderWidth: 0,
24
30
boxShadow: "none",
25
31
paddingBottom: spacing["2"],
26
32
paddingLeft: spacing["2"],
···
70
76
{trigger}
71
77
72
78
<AriaPopover
73
-
{...stylex.props(styles.wrapper)}
79
+
{...stylex.props(
80
+
popoverStyles.animation,
81
+
hasArrow && styles.wrapperWithArrow,
82
+
)}
74
83
offset={8}
75
84
containerPadding={8}
76
85
{...popoverProps}
···
80
89
<div {...stylex.props(styles.arrow)} />
81
90
</OverlayArrow>
82
91
)}
83
-
<Dialog {...stylex.props(popoverStyles, styles.content, style)}>
92
+
<Dialog
93
+
{...stylex.props(
94
+
popoverStyles.wrapper,
95
+
styles.content,
96
+
!hasArrow && styles.wrapper,
97
+
style,
98
+
)}
99
+
>
84
100
{children}
85
101
</Dialog>
86
102
</AriaPopover>
+4
-6
apps/docs/src/components/progress-bar/index.tsx
+4
-6
apps/docs/src/components/progress-bar/index.tsx
···
6
6
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
+
import { animationDuration } from "../theme/animations.stylex";
9
10
import { mediaQueries } from "../theme/media-queries.stylex";
10
11
import { radius } from "../theme/radius.stylex";
11
12
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
···
66
67
backgroundColor: primaryColor.solid1,
67
68
height: "100%",
68
69
transform: "translateX(-100%)",
69
-
transitionDuration: "150ms",
70
-
transitionProperty: "transform",
70
+
transitionDuration: animationDuration.default,
71
+
transitionProperty: "none",
71
72
transitionTimingFunction: "linear",
72
73
width: "100%",
73
74
},
···
85
86
)`,
86
87
backgroundSize: "20%",
87
88
height: "100%",
88
-
animationName: {
89
-
default: IndeterminateAnimation,
90
-
[mediaQueries.reducedMotion]: "none",
91
-
},
89
+
animationName: "none",
92
90
animationDuration: "1s",
93
91
animationIterationCount: "infinite",
94
92
animationTimingFunction: "linear",
+12
-4
apps/docs/src/components/radio/index.tsx
+12
-4
apps/docs/src/components/radio/index.tsx
···
14
14
15
15
import { Flex } from "../flex";
16
16
import { Description, Label } from "../label";
17
+
import { animationDuration } from "../theme/animations.stylex";
17
18
import { radius } from "../theme/radius.stylex";
18
19
import { ui, primary } from "../theme/semantic-color.stylex";
19
20
import { spacing } from "../theme/spacing.stylex";
20
21
import { Size, StyleXComponentProps } from "../theme/types";
21
22
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
23
+
import { mediaQueries } from "../theme/media-queries.stylex";
22
24
23
25
const scaleIn = stylex.keyframes({
24
26
"0%": {
···
54
56
position: "relative",
55
57
width: spacing["4"],
56
58
57
-
transitionDuration: "100ms",
58
-
transitionProperty: "background-color, border-color, color",
59
+
transitionDuration: animationDuration.fast,
60
+
transitionProperty: {
61
+
default: "background-color, border-color, color",
62
+
[mediaQueries.reducedMotion]: "none",
63
+
},
59
64
transitionTimingFunction: "ease-in-out",
60
65
},
61
66
selectionIndicator: {
···
69
74
top: "50%",
70
75
transform: "translate(-50%, -50%)",
71
76
72
-
animationDuration: "100ms",
77
+
animationDuration: animationDuration.fast,
73
78
animationFillMode: "forwards",
74
-
animationName: scaleIn,
79
+
animationName: {
80
+
default: scaleIn,
81
+
[mediaQueries.reducedMotion]: "none",
82
+
},
75
83
animationTimingFunction: "ease-in-out",
76
84
},
77
85
checked: {
+2
-1
apps/docs/src/components/segmented-control/index.tsx
+2
-1
apps/docs/src/components/segmented-control/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { SizeContext } from "../context";
14
+
import { animationDuration } from "../theme/animations.stylex";
14
15
import { mediaQueries } from "../theme/media-queries.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
17
import { uiColor } from "../theme/semantic-color.stylex";
···
75
76
left: 0,
76
77
position: "absolute",
77
78
top: 0,
78
-
transitionDuration: "200ms",
79
+
transitionDuration: animationDuration.slow,
79
80
transitionProperty: {
80
81
default: "translate, width",
81
82
[mediaQueries.reducedMotion]: "none",
+5
-1
apps/docs/src/components/select/index.tsx
+5
-1
apps/docs/src/components/select/index.tsx
···
118
118
shouldFlip={shouldFlip}
119
119
shouldUpdatePosition={shouldUpdatePosition}
120
120
placement={placement}
121
-
{...stylex.props(popoverStyles, styles.matchWidth)}
121
+
{...stylex.props(
122
+
popoverStyles.wrapper,
123
+
popoverStyles.animation,
124
+
styles.matchWidth,
125
+
)}
122
126
>
123
127
{isSearchable ? (
124
128
<Autocomplete filter={contains}>
+8
-3
apps/docs/src/components/switch/index.tsx
+8
-3
apps/docs/src/components/switch/index.tsx
···
4
4
Switch as AriaSwitch,
5
5
} from "react-aria-components";
6
6
7
+
import { animationDuration } from "../theme/animations.stylex";
8
+
import { mediaQueries } from "../theme/media-queries.stylex";
7
9
import { radius } from "../theme/radius.stylex";
8
10
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
9
11
import { shadow } from "../theme/shadow.stylex";
···
30
32
":is([data-disabled=true] *)": 0.5,
31
33
},
32
34
position: "relative",
33
-
transitionDuration: "100ms",
34
-
transitionProperty: "background-color",
35
+
transitionDuration: animationDuration.fast,
36
+
transitionProperty: {
37
+
default: "background-color",
38
+
[mediaQueries.reducedMotion]: "none",
39
+
},
35
40
transitionTimingFunction: "ease-in-out",
36
41
width: spacing["10"],
37
42
},
···
50
55
default: "translateY(-50%)",
51
56
":is([data-selected=true] *)": "translate(100%, -50%)",
52
57
},
53
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
54
59
transitionProperty: "transform",
55
60
transitionTimingFunction: "ease-in-out",
56
61
width: spacing["4"],
+7
-2
apps/docs/src/components/tag-group/index.tsx
+7
-2
apps/docs/src/components/tag-group/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { Description, ErrorMessage, Label } from "../label";
14
+
import { animationDuration } from "../theme/animations.stylex";
15
+
import { mediaQueries } from "../theme/media-queries.stylex";
14
16
import { radius } from "../theme/radius.stylex";
15
17
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
16
18
import { spacing } from "../theme/spacing.stylex";
···
84
86
justifyContent: "center",
85
87
margin: 0,
86
88
padding: 0,
87
-
transitionDuration: "100ms",
88
-
transitionProperty: "background-color",
89
+
transitionDuration: animationDuration.fast,
90
+
transitionProperty: {
91
+
default: "background-color",
92
+
[mediaQueries.reducedMotion]: "none",
93
+
},
89
94
transitionTimingFunction: "ease-in-out",
90
95
width: spacing["4"],
91
96
},
+7
apps/docs/src/components/theme/animations.stylex.tsx
+7
apps/docs/src/components/theme/animations.stylex.tsx
+2
-1
apps/docs/src/components/theme/useButtonStyles.ts
+2
-1
apps/docs/src/components/theme/useButtonStyles.ts
···
6
6
import { ButtonGroupContext } from "../button/context";
7
7
import { SizeContext } from "../context";
8
8
import { Size, ButtonVariant } from "../theme/types";
9
+
import { animationDuration } from "./animations.stylex";
9
10
import { radius } from "./radius.stylex";
10
11
import { critical, ui, primary, uiColor } from "./semantic-color.stylex";
11
12
import { shadow } from "./shadow.stylex";
···
39
40
pointerEvents: {
40
41
":disabled": "none",
41
42
},
42
-
transitionDuration: "100ms",
43
+
transitionDuration: animationDuration.fast,
43
44
transitionProperty: "all",
44
45
transitionTimingFunction: "ease-in-out",
45
46
whiteSpace: "nowrap",
+3
-3
apps/docs/src/components/theme/useDialogStyles.ts
+3
-3
apps/docs/src/components/theme/useDialogStyles.ts
···
2
2
import { use } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
-
import { animations } from "../theme/animations.stylex";
5
+
import { animationDuration, animations } from "../theme/animations.stylex";
6
6
import { radius } from "../theme/radius.stylex";
7
7
import { shadow } from "../theme/shadow.stylex";
8
8
import { Size } from "../theme/types";
···
18
18
width: "100vw",
19
19
zIndex: 100,
20
20
21
-
animationDuration: "200ms",
21
+
animationDuration: animationDuration.slow,
22
22
animationName: {
23
23
":is([data-entering])": animations.fadeIn,
24
24
},
···
28
28
":is([data-exiting])": 0,
29
29
},
30
30
transitionDuration: {
31
-
":is([data-exiting])": "100ms",
31
+
":is([data-exiting])": animationDuration.fast,
32
32
},
33
33
transitionProperty: "opacity",
34
34
transitionTimingFunction: "ease-in-out",
+2
-1
apps/docs/src/components/theme/useListBoxItemStyles.ts
+2
-1
apps/docs/src/components/theme/useListBoxItemStyles.ts
···
10
10
lineHeight,
11
11
typeramp,
12
12
} from "../theme/typography.stylex";
13
+
import { animationDuration } from "./animations.stylex";
13
14
import { criticalColor, primaryColor, uiColor } from "./semantic-color.stylex";
14
15
15
16
const styles = stylex.create({
···
54
55
paddingLeft: spacing["3"],
55
56
paddingRight: spacing["3"],
56
57
paddingTop: spacing["2"],
57
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
58
59
transitionProperty: "background-color",
59
60
transitionTimingFunction: "ease-in-out",
60
61
},
+26
-1
apps/docs/src/components/theme/usePopoverStyles.ts
+26
-1
apps/docs/src/components/theme/usePopoverStyles.ts
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
+
import { animationDuration } from "./animations.stylex";
3
4
import { radius } from "./radius.stylex";
4
5
import { ui } from "./semantic-color.stylex";
5
6
import { shadow } from "./shadow.stylex";
···
16
17
paddingBottom: spacing["1"],
17
18
paddingTop: spacing["1"],
18
19
},
20
+
animation: {
21
+
"--origin-x": {
22
+
":is([data-placement=left],[data-placement=left] > *)": spacing["4"],
23
+
":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`,
24
+
},
25
+
"--origin-y": {
26
+
":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
27
+
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`,
28
+
},
29
+
opacity: {
30
+
":is([data-entering], [data-entering] > *)": 0,
31
+
":is([data-exiting], [data-exiting] > *)": 0,
32
+
},
33
+
transform: {
34
+
":is([data-entering], [data-entering] > *)": `scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))`,
35
+
":is([data-exiting], [data-exiting] > *)":
36
+
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
37
+
},
38
+
transitionDuration: animationDuration.default,
39
+
transitionProperty: "transform, opacity",
40
+
},
19
41
});
20
42
21
43
// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
22
44
export function usePopoverStyles() {
23
-
return [styles.popover, ui.bgSubtle, ui.text, ui.border];
45
+
return {
46
+
wrapper: [styles.popover, ui.bgSubtle, ui.text, ui.border],
47
+
animation: styles.animation,
48
+
};
24
49
}
+2
-1
apps/docs/src/components/tooltip/index.tsx
+2
-1
apps/docs/src/components/tooltip/index.tsx
···
9
9
TooltipProps as AriaTooltipProps,
10
10
} from "react-aria-components";
11
11
12
+
import { animationDuration } from "../theme/animations.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
14
import { uiInverted } from "../theme/semantic-color.stylex";
14
15
import { shadow } from "../theme/shadow.stylex";
···
44
45
":is([data-entering])": "scale(0.9) var(--origin)",
45
46
":is([data-exiting])": "scale(0.9) var(--origin)",
46
47
},
47
-
transitionDuration: "150ms",
48
+
transitionDuration: animationDuration.default,
48
49
transitionProperty: "transform, opacity",
49
50
},
50
51
caret: {
+2
-1
apps/docs/src/components/tree/index.tsx
+2
-1
apps/docs/src/components/tree/index.tsx
···
13
13
14
14
import { Checkbox } from "../checkbox";
15
15
import { SizeContext } from "../context";
16
+
import { animationDuration } from "../theme/animations.stylex";
16
17
import { radius } from "../theme/radius.stylex";
17
18
import { ui } from "../theme/semantic-color.stylex";
18
19
import { spacing } from "../theme/spacing.stylex";
···
65
66
position: "absolute",
66
67
top: "50%",
67
68
transform: "translate(-100%, -50%)",
68
-
transitionDuration: "100ms",
69
+
transitionDuration: animationDuration.fast,
69
70
transitionProperty: "opacity",
70
71
transitionTimingFunction: "ease-in-out",
71
72
},
+7
-2
apps/docs/src/lib/TableOfContents.tsx
+7
-2
apps/docs/src/lib/TableOfContents.tsx
···
4
4
5
5
import { Flex } from "@/components/flex";
6
6
7
+
import { animationDuration } from "../components/theme/animations.stylex";
8
+
import { mediaQueries } from "../components/theme/media-queries.stylex";
7
9
import {
8
10
primaryColor,
9
11
uiColor,
···
52
54
height: spacing[8],
53
55
position: "relative",
54
56
textDecoration: "none",
55
-
transitionDuration: "100ms",
56
-
transitionProperty: "color, border-left-color",
57
+
transitionDuration: animationDuration.fast,
58
+
transitionProperty: {
59
+
default: "color, border-left-color",
60
+
[mediaQueries.reducedMotion]: "none",
61
+
},
57
62
transitionTimingFunction: "ease-in-out",
58
63
59
64
"::before": {
+12
-3
apps/docs/src/routes/docs.$.tsx
+12
-3
apps/docs/src/routes/docs.$.tsx
···
43
43
import { CopyToClipboardButton } from "@/lib/CopyToClipboardButton";
44
44
import { TableOfContents } from "@/lib/TableOfContents";
45
45
46
+
import { animationDuration } from "../components/theme/animations.stylex";
47
+
import { mediaQueries } from "../components/theme/media-queries.stylex";
46
48
import { radius } from "../components/theme/radius.stylex";
47
49
import { uiColor } from "../components/theme/semantic-color.stylex";
48
50
import { spacing } from "../components/theme/spacing.stylex";
···
135
137
":is([data-heading-link]:hover *)": 1,
136
138
":is([data-focus-visible])": 1,
137
139
},
138
-
transitionDuration: "100ms",
139
-
transitionProperty: "opacity",
140
+
transitionDuration: animationDuration.fast,
141
+
transitionProperty: {
142
+
default: "opacity",
143
+
[mediaQueries.reducedMotion]: "none",
144
+
},
140
145
transitionTimingFunction: "ease-in-out",
141
146
},
142
147
});
···
300
305
const toc = tableOfContents[location.pathname];
301
306
302
307
return (
303
-
<Grid columns="max-content 240px" columnGap="4" style={styles.root}>
308
+
<Grid
309
+
columns="minmax(0, max-content) 240px"
310
+
columnGap="4"
311
+
style={styles.root}
312
+
>
304
313
<div {...stylex.props(styles.main)}>
305
314
<Flex direction="column" gap="4" style={styles.header}>
306
315
<Heading1>{doc.title}</Heading1>
+27
-2
packages/eslint-config/react-internal.js
+27
-2
packages/eslint-config/react-internal.js
···
31
31
rules: {
32
32
...pluginReactHooks.configs.recommended.rules,
33
33
34
-
"@stylexjs/valid-styles": "error",
35
-
"@stylexjs/valid-styles": "error",
34
+
"@stylexjs/valid-styles": [
35
+
"error",
36
+
{
37
+
propLimits: {
38
+
transitionDuration: {
39
+
reason:
40
+
"Use the animationDuration tokens from the animations.stylex.tsx file",
41
+
limit: [
42
+
"animationDuration.fast",
43
+
"animationDuration.default",
44
+
"animationDuration.slow",
45
+
"animationDuration.verySlow",
46
+
],
47
+
},
48
+
animationDuration: {
49
+
reason:
50
+
"Use the animationDuration tokens from the animations.stylex.tsx file",
51
+
limit: [
52
+
"animationDuration.fast",
53
+
"animationDuration.default",
54
+
"animationDuration.slow",
55
+
"animationDuration.verySlow",
56
+
],
57
+
},
58
+
},
59
+
},
60
+
],
36
61
"@stylexjs/sort-keys": ["error", { allowLineSeparatedGroups: true }],
37
62
"@stylexjs/valid-shorthands": "error",
38
63
"@stylexjs/enforce-extension": "error",
+5
-1
packages/hip-ui/src/components/combobox/index.tsx
+5
-1
packages/hip-ui/src/components/combobox/index.tsx
···
116
116
shouldFlip={shouldFlip}
117
117
shouldUpdatePosition={shouldUpdatePosition}
118
118
placement={placement}
119
+
{...stylex.props(
120
+
popoverStyles.wrapper,
121
+
popoverStyles.animation,
122
+
styles.matchWidth,
123
+
)}
119
124
>
120
125
<ListBox
121
126
items={items}
122
-
style={[popoverStyles, styles.matchWidth]}
123
127
renderEmptyState={renderEmptyState || EmptyState}
124
128
>
125
129
{children}
+6
-4
packages/hip-ui/src/components/hover-card/index.tsx
+6
-4
packages/hip-ui/src/components/hover-card/index.tsx
···
91
91
{trigger}
92
92
</Pressable>
93
93
<AriaPopover
94
-
{...stylex.props(styles.wrapper)}
94
+
{...stylex.props(
95
+
styles.wrapper,
96
+
popoverStyles.wrapper,
97
+
popoverStyles.animation,
98
+
)}
95
99
offset={8}
96
100
containerPadding={8}
97
101
isNonModal={isFocusVisible ? false : true}
98
102
trigger={triggerName}
99
103
{...mergeProps(hoverProps, popoverProps)}
100
104
>
101
-
<Dialog {...stylex.props(popoverStyles, styles.content, style)}>
102
-
{children}
103
-
</Dialog>
105
+
<Dialog {...stylex.props(styles.content, style)}>{children}</Dialog>
104
106
</AriaPopover>
105
107
</>
106
108
);
+3
-1
packages/hip-ui/src/components/meter/index.tsx
+3
-1
packages/hip-ui/src/components/meter/index.tsx
···
6
6
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
+
import { animationDuration } from "../theme/animations.stylex";
9
10
import { radius } from "../theme/radius.stylex";
10
11
import {
11
12
criticalColor,
···
17
18
import { spacing } from "../theme/spacing.stylex";
18
19
import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
19
20
import { fontSize, lineHeight } from "../theme/typography.stylex";
21
+
import { mediaQueries } from "../theme/media-queries.stylex";
20
22
21
23
const styles = stylex.create({
22
24
wrapper: {
···
74
76
fill: {
75
77
height: "100%",
76
78
transform: "translateX(-100%)",
77
-
transitionDuration: "10ms",
79
+
transitionDuration: animationDuration.default,
78
80
transitionProperty: "transform",
79
81
transitionTimingFunction: "linear",
80
82
width: "100%",
-1
packages/hip-ui/src/components/pagination/index.tsx
-1
packages/hip-ui/src/components/pagination/index.tsx
+20
-4
packages/hip-ui/src/components/popover/index.tsx
+20
-4
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";
13
14
import { uiColor } from "../theme/semantic-color.stylex";
14
15
import { spacing } from "../theme/spacing.stylex";
15
16
import { StyleXComponentProps } from "../theme/types";
16
17
import { usePopoverStyles } from "../theme/usePopoverStyles";
17
18
18
19
const styles = stylex.create({
19
-
wrapper: {
20
+
wrapperWithArrow: {
20
21
filter: `drop-shadow(-0.5px -0.5px 0 ${uiColor.border2}) drop-shadow(0.5px -0.5px 0 ${uiColor.border2}) drop-shadow(0.5px 0.5px 0 ${uiColor.border2}) drop-shadow(-0.5px 0.5px 0 ${uiColor.border2}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
21
22
},
23
+
wrapper: {
24
+
borderColor: uiColor.border2,
25
+
borderRadius: radius["md"],
26
+
borderStyle: "solid",
27
+
borderWidth: 1,
28
+
},
22
29
content: {
23
-
borderWidth: 0,
24
30
boxShadow: "none",
25
31
paddingBottom: spacing["2"],
26
32
paddingLeft: spacing["2"],
···
70
76
{trigger}
71
77
72
78
<AriaPopover
73
-
{...stylex.props(styles.wrapper)}
79
+
{...stylex.props(
80
+
popoverStyles.animation,
81
+
hasArrow && styles.wrapperWithArrow,
82
+
)}
74
83
offset={8}
75
84
containerPadding={8}
76
85
{...popoverProps}
···
80
89
<div {...stylex.props(styles.arrow)} />
81
90
</OverlayArrow>
82
91
)}
83
-
<Dialog {...stylex.props(popoverStyles, styles.content, style)}>
92
+
<Dialog
93
+
{...stylex.props(
94
+
popoverStyles.wrapper,
95
+
styles.content,
96
+
!hasArrow && styles.wrapper,
97
+
style,
98
+
)}
99
+
>
84
100
{children}
85
101
</Dialog>
86
102
</AriaPopover>
+4
-6
packages/hip-ui/src/components/progress-bar/index.tsx
+4
-6
packages/hip-ui/src/components/progress-bar/index.tsx
···
6
6
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
+
import { animationDuration } from "../theme/animations.stylex";
9
10
import { mediaQueries } from "../theme/media-queries.stylex";
10
11
import { radius } from "../theme/radius.stylex";
11
12
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
···
66
67
backgroundColor: primaryColor.solid1,
67
68
height: "100%",
68
69
transform: "translateX(-100%)",
69
-
transitionDuration: "150ms",
70
-
transitionProperty: "transform",
70
+
transitionDuration: animationDuration.default,
71
+
transitionProperty: "none",
71
72
transitionTimingFunction: "linear",
72
73
width: "100%",
73
74
},
···
85
86
)`,
86
87
backgroundSize: "20%",
87
88
height: "100%",
88
-
animationName: {
89
-
default: IndeterminateAnimation,
90
-
[mediaQueries.reducedMotion]: "none",
91
-
},
89
+
animationName: "none",
92
90
animationDuration: "1s",
93
91
animationIterationCount: "infinite",
94
92
animationTimingFunction: "linear",
+12
-4
packages/hip-ui/src/components/radio/index.tsx
+12
-4
packages/hip-ui/src/components/radio/index.tsx
···
14
14
15
15
import { Flex } from "../flex";
16
16
import { Description, Label } from "../label";
17
+
import { animationDuration } from "../theme/animations.stylex";
17
18
import { radius } from "../theme/radius.stylex";
18
19
import { ui, primary } from "../theme/semantic-color.stylex";
19
20
import { spacing } from "../theme/spacing.stylex";
20
21
import { Size, StyleXComponentProps } from "../theme/types";
21
22
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
23
+
import { mediaQueries } from "../theme/media-queries.stylex";
22
24
23
25
const scaleIn = stylex.keyframes({
24
26
"0%": {
···
54
56
position: "relative",
55
57
width: spacing["4"],
56
58
57
-
transitionDuration: "100ms",
58
-
transitionProperty: "background-color, border-color, color",
59
+
transitionDuration: animationDuration.fast,
60
+
transitionProperty: {
61
+
default: "background-color, border-color, color",
62
+
[mediaQueries.reducedMotion]: "none",
63
+
},
59
64
transitionTimingFunction: "ease-in-out",
60
65
},
61
66
selectionIndicator: {
···
69
74
top: "50%",
70
75
transform: "translate(-50%, -50%)",
71
76
72
-
animationDuration: "100ms",
77
+
animationDuration: animationDuration.fast,
73
78
animationFillMode: "forwards",
74
-
animationName: scaleIn,
79
+
animationName: {
80
+
default: scaleIn,
81
+
[mediaQueries.reducedMotion]: "none",
82
+
},
75
83
animationTimingFunction: "ease-in-out",
76
84
},
77
85
checked: {
+2
-1
packages/hip-ui/src/components/segmented-control/index.tsx
+2
-1
packages/hip-ui/src/components/segmented-control/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { SizeContext } from "../context";
14
+
import { animationDuration } from "../theme/animations.stylex";
14
15
import { mediaQueries } from "../theme/media-queries.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
17
import { uiColor } from "../theme/semantic-color.stylex";
···
75
76
left: 0,
76
77
position: "absolute",
77
78
top: 0,
78
-
transitionDuration: "200ms",
79
+
transitionDuration: animationDuration.slow,
79
80
transitionProperty: {
80
81
default: "translate, width",
81
82
[mediaQueries.reducedMotion]: "none",
+5
-1
packages/hip-ui/src/components/select/index.tsx
+5
-1
packages/hip-ui/src/components/select/index.tsx
···
118
118
shouldFlip={shouldFlip}
119
119
shouldUpdatePosition={shouldUpdatePosition}
120
120
placement={placement}
121
-
{...stylex.props(popoverStyles, styles.matchWidth)}
121
+
{...stylex.props(
122
+
popoverStyles.wrapper,
123
+
popoverStyles.animation,
124
+
styles.matchWidth,
125
+
)}
122
126
>
123
127
{isSearchable ? (
124
128
<Autocomplete filter={contains}>
+8
-3
packages/hip-ui/src/components/switch/index.tsx
+8
-3
packages/hip-ui/src/components/switch/index.tsx
···
4
4
Switch as AriaSwitch,
5
5
} from "react-aria-components";
6
6
7
+
import { animationDuration } from "../theme/animations.stylex";
8
+
import { mediaQueries } from "../theme/media-queries.stylex";
7
9
import { radius } from "../theme/radius.stylex";
8
10
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
9
11
import { shadow } from "../theme/shadow.stylex";
···
30
32
":is([data-disabled=true] *)": 0.5,
31
33
},
32
34
position: "relative",
33
-
transitionDuration: "100ms",
34
-
transitionProperty: "background-color",
35
+
transitionDuration: animationDuration.fast,
36
+
transitionProperty: {
37
+
default: "background-color",
38
+
[mediaQueries.reducedMotion]: "none",
39
+
},
35
40
transitionTimingFunction: "ease-in-out",
36
41
width: spacing["10"],
37
42
},
···
50
55
default: "translateY(-50%)",
51
56
":is([data-selected=true] *)": "translate(100%, -50%)",
52
57
},
53
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
54
59
transitionProperty: "transform",
55
60
transitionTimingFunction: "ease-in-out",
56
61
width: spacing["4"],
+7
-2
packages/hip-ui/src/components/tag-group/index.tsx
+7
-2
packages/hip-ui/src/components/tag-group/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { Description, ErrorMessage, Label } from "../label";
14
+
import { animationDuration } from "../theme/animations.stylex";
15
+
import { mediaQueries } from "../theme/media-queries.stylex";
14
16
import { radius } from "../theme/radius.stylex";
15
17
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
16
18
import { spacing } from "../theme/spacing.stylex";
···
84
86
justifyContent: "center",
85
87
margin: 0,
86
88
padding: 0,
87
-
transitionDuration: "100ms",
88
-
transitionProperty: "background-color",
89
+
transitionDuration: animationDuration.fast,
90
+
transitionProperty: {
91
+
default: "background-color",
92
+
[mediaQueries.reducedMotion]: "none",
93
+
},
89
94
transitionTimingFunction: "ease-in-out",
90
95
width: spacing["4"],
91
96
},
+7
packages/hip-ui/src/components/theme/animations.stylex.tsx
+7
packages/hip-ui/src/components/theme/animations.stylex.tsx
+2
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+2
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
6
6
import { ButtonGroupContext } from "../button/context";
7
7
import { SizeContext } from "../context";
8
8
import { Size, ButtonVariant } from "../theme/types";
9
+
import { animationDuration } from "./animations.stylex";
9
10
import { radius } from "./radius.stylex";
10
11
import { critical, ui, primary, uiColor } from "./semantic-color.stylex";
11
12
import { shadow } from "./shadow.stylex";
···
39
40
pointerEvents: {
40
41
":disabled": "none",
41
42
},
42
-
transitionDuration: "100ms",
43
+
transitionDuration: animationDuration.fast,
43
44
transitionProperty: "all",
44
45
transitionTimingFunction: "ease-in-out",
45
46
whiteSpace: "nowrap",
+3
-3
packages/hip-ui/src/components/theme/useDialogStyles.ts
+3
-3
packages/hip-ui/src/components/theme/useDialogStyles.ts
···
2
2
import { use } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
-
import { animations } from "../theme/animations.stylex";
5
+
import { animationDuration, animations } from "../theme/animations.stylex";
6
6
import { radius } from "../theme/radius.stylex";
7
7
import { shadow } from "../theme/shadow.stylex";
8
8
import { Size } from "../theme/types";
···
18
18
width: "100vw",
19
19
zIndex: 100,
20
20
21
-
animationDuration: "200ms",
21
+
animationDuration: animationDuration.slow,
22
22
animationName: {
23
23
":is([data-entering])": animations.fadeIn,
24
24
},
···
28
28
":is([data-exiting])": 0,
29
29
},
30
30
transitionDuration: {
31
-
":is([data-exiting])": "100ms",
31
+
":is([data-exiting])": animationDuration.fast,
32
32
},
33
33
transitionProperty: "opacity",
34
34
transitionTimingFunction: "ease-in-out",
+2
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+2
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
10
10
lineHeight,
11
11
typeramp,
12
12
} from "../theme/typography.stylex";
13
+
import { animationDuration } from "./animations.stylex";
13
14
import { criticalColor, primaryColor, uiColor } from "./semantic-color.stylex";
14
15
15
16
const styles = stylex.create({
···
54
55
paddingLeft: spacing["3"],
55
56
paddingRight: spacing["3"],
56
57
paddingTop: spacing["2"],
57
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
58
59
transitionProperty: "background-color",
59
60
transitionTimingFunction: "ease-in-out",
60
61
},
+29
-1
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+29
-1
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
4
import { radius } from "./radius.stylex";
4
5
import { ui } from "./semantic-color.stylex";
5
6
import { shadow } from "./shadow.stylex";
···
16
17
paddingBottom: spacing["1"],
17
18
paddingTop: spacing["1"],
18
19
},
20
+
animation: {
21
+
"--origin-x": {
22
+
":is([data-placement=left],[data-placement=left] > *)": spacing["4"],
23
+
":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`,
24
+
},
25
+
"--origin-y": {
26
+
":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
27
+
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`,
28
+
},
29
+
opacity: {
30
+
":is([data-entering], [data-entering] > *)": 0,
31
+
":is([data-exiting], [data-exiting] > *)": 0,
32
+
},
33
+
pointerEvents: {
34
+
":is([data-exiting], [data-exiting] > *)": "none",
35
+
},
36
+
transform: {
37
+
":is([data-entering], [data-entering] > *)": `scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))`,
38
+
":is([data-exiting], [data-exiting] > *)":
39
+
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
40
+
},
41
+
transitionDuration: animationDuration.default,
42
+
transitionProperty: "transform, opacity",
43
+
},
19
44
});
20
45
21
46
// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
22
47
export function usePopoverStyles() {
23
-
return [styles.popover, ui.bgSubtle, ui.text, ui.border];
48
+
return {
49
+
wrapper: [styles.popover, ui.bgSubtle, ui.text, ui.border],
50
+
animation: styles.animation,
51
+
};
24
52
}
+2
-1
packages/hip-ui/src/components/tooltip/index.tsx
+2
-1
packages/hip-ui/src/components/tooltip/index.tsx
···
9
9
TooltipProps as AriaTooltipProps,
10
10
} from "react-aria-components";
11
11
12
+
import { animationDuration } from "../theme/animations.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
14
import { uiInverted } from "../theme/semantic-color.stylex";
14
15
import { shadow } from "../theme/shadow.stylex";
···
44
45
":is([data-entering])": "scale(0.9) var(--origin)",
45
46
":is([data-exiting])": "scale(0.9) var(--origin)",
46
47
},
47
-
transitionDuration: "150ms",
48
+
transitionDuration: animationDuration.default,
48
49
transitionProperty: "transform, opacity",
49
50
},
50
51
caret: {
+2
-1
packages/hip-ui/src/components/tree/index.tsx
+2
-1
packages/hip-ui/src/components/tree/index.tsx
···
13
13
14
14
import { Checkbox } from "../checkbox";
15
15
import { SizeContext } from "../context";
16
+
import { animationDuration } from "../theme/animations.stylex";
16
17
import { radius } from "../theme/radius.stylex";
17
18
import { ui } from "../theme/semantic-color.stylex";
18
19
import { spacing } from "../theme/spacing.stylex";
···
65
66
position: "absolute",
66
67
top: "50%",
67
68
transform: "translate(-100%, -50%)",
68
-
transitionDuration: "100ms",
69
+
transitionDuration: animationDuration.fast,
69
70
transitionProperty: "opacity",
70
71
transitionTimingFunction: "ease-in-out",
71
72
},