A design system in a box.
hip-ui.tngl.io/docs/introduction
animations
+252
-46
+4
-1
apps/docs/src/components/drawer/index.tsx
+4
-1
apps/docs/src/components/drawer/index.tsx
···
110
110
":is([data-direction=top][data-entering])": animations.slideInTop,
111
111
":is([data-direction=top][data-exiting])": animations.slideOutTop,
112
112
},
113
-
animationTimingFunction: animationTimingFunction.easeInOut,
113
+
animationTimingFunction: {
114
+
":is([data-entering])": animationTimingFunction.easeOut,
115
+
":is([data-exiting])": animationTimingFunction.easeIn,
116
+
},
114
117
},
115
118
dialog: {
116
119
overflow: "auto",
+9
apps/docs/src/components/file-drop-zone/index.tsx
+9
apps/docs/src/components/file-drop-zone/index.tsx
···
54
54
},
55
55
boxSizing: "border-box",
56
56
position: "relative",
57
+
transitionDuration: {
58
+
default: animationDuration.fast,
59
+
[mediaQueries.reducedMotion]: "0s",
60
+
},
61
+
transitionProperty: {
62
+
default: "background-color, border-color",
63
+
[mediaQueries.reducedMotion]: "none",
64
+
},
65
+
transitionTimingFunction: animationTimingFunction.easeInOut,
57
66
58
67
alignItems: "center",
59
68
display: "flex",
+17
apps/docs/src/components/lightbox/index.tsx
+17
apps/docs/src/components/lightbox/index.tsx
···
29
29
30
30
const SLIDE_DURATION_MS = 250;
31
31
32
+
function prefersReducedMotion() {
33
+
return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
34
+
}
35
+
32
36
const styles = stylex.create({
33
37
overlay: {
34
38
inset: 0,
···
168
172
// Run slide animations via Web Animations API
169
173
useLayoutEffect(() => {
170
174
if (previousIndex === null) return;
175
+
if (prefersReducedMotion()) {
176
+
setPreviousIndex(null);
177
+
setTransitionSize(null);
178
+
return;
179
+
}
171
180
const wrapper = wrapperRef.current;
172
181
const outgoing = outgoingRef.current;
173
182
const incoming = incomingRef.current;
···
237
246
238
247
const captureAndGoPrev = useCallback(() => {
239
248
if (previousIndex !== null) return;
249
+
if (prefersReducedMotion()) {
250
+
setCurrentIndex((i) => (i <= 0 ? images.length - 1 : i - 1));
251
+
return;
252
+
}
240
253
const wrapper = wrapperRef.current;
241
254
if (wrapper) {
242
255
setTransitionSize({
···
251
264
252
265
const captureAndGoNext = useCallback(() => {
253
266
if (previousIndex !== null) return;
267
+
if (prefersReducedMotion()) {
268
+
setCurrentIndex((i) => (i >= images.length - 1 ? 0 : i + 1));
269
+
return;
270
+
}
254
271
const wrapper = wrapperRef.current;
255
272
if (wrapper) {
256
273
setTransitionSize({
+56
-13
apps/docs/src/components/page/Page.tsx
+56
-13
apps/docs/src/components/page/Page.tsx
···
3
3
import * as stylex from "@stylexjs/stylex";
4
4
import { ArrowLeft } from "lucide-react";
5
5
import { useEffect, useRef, useState } from "react";
6
+
import type { ComponentProps, ReactNode } from "react";
6
7
7
-
import type { IconButtonProps } from "../icon-button";
8
8
import type { StyleXComponentProps } from "../theme/types";
9
9
10
10
import { Flex } from "../flex";
···
20
20
import { spacing } from "../theme/spacing.stylex";
21
21
import { Text } from "../typography/text";
22
22
import { PageContext, usePageContext } from "./context";
23
+
import { createLink, LinkProps } from "@tanstack/react-router";
24
+
import { fontFamily, lineHeight } from "../theme/typography.stylex";
25
+
26
+
const IconButtonLink = createLink(IconButton);
23
27
24
28
const smallRootStyles = stylex.create({
25
29
root: {
···
66
70
gridTemplateAreas: {
67
71
default: `
68
72
'title actions'
69
-
'description actions'
70
73
`,
74
+
[breakpoints.sm]: {
75
+
":has([data-page-description])": `
76
+
'title actions'
77
+
'description actions'
78
+
`,
79
+
},
71
80
":has([data-page-icon])": `
72
81
'icon title actions'
73
-
'icon description actions'
74
82
`,
83
+
[breakpoints.sm]: {
84
+
":has([data-page-description])": `
85
+
'icon title actions'
86
+
'icon description actions'
87
+
`,
88
+
},
75
89
},
76
90
alignItems: "center",
77
91
columnGap: spacing["4"],
···
93
107
94
108
const sharedStyles = stylex.create({
95
109
smallTitle: {
110
+
// eslint-disable-next-line @stylexjs/valid-styles
111
+
textBoxEdge: "cap alphabetic",
112
+
// eslint-disable-next-line @stylexjs/valid-styles
113
+
textBoxTrim: "trim-both",
96
114
flexGrow: 1,
115
+
fontFamily: fontFamily["title"],
97
116
minWidth: 0,
98
117
},
99
118
largeTitle: {
119
+
// eslint-disable-next-line @stylexjs/valid-styles
120
+
textBoxEdge: "cap alphabetic",
121
+
// eslint-disable-next-line @stylexjs/valid-styles
122
+
textBoxTrim: "trim-both",
100
123
gridArea: "title",
101
124
flexGrow: 1,
125
+
fontFamily: fontFamily["title"],
102
126
minWidth: 0,
103
127
},
104
128
description: {
105
129
gridArea: "description",
130
+
display: {
131
+
default: "none",
132
+
[breakpoints.sm]: "block",
133
+
},
106
134
},
107
135
smallActions: {
136
+
gap: spacing["1"],
108
137
flexShrink: 0,
109
138
},
110
139
largeActions: {
111
140
gridArea: "actions",
141
+
gap: {
142
+
default: spacing["1"],
143
+
[breakpoints.sm]: spacing["2"],
144
+
},
112
145
minHeight: spacing["8"],
113
146
},
114
147
icon: {
···
150
183
},
151
184
largeStickyWrapper: {
152
185
zIndex: 100,
153
-
marginBottom: spacing["8"],
186
+
marginBottom: {
187
+
default: spacing["2"],
188
+
[breakpoints.sm]: spacing["8"],
189
+
},
154
190
},
155
191
stickyWrapperStuck: {
156
192
backgroundColor: {
···
376
412
return (
377
413
<Text
378
414
size={
379
-
isSmall ? { default: "xl", sm: "2xl" } : { default: "xl", sm: "3xl" }
415
+
isSmall ? { default: "xl", sm: "2xl" } : { default: "2xl", sm: "3xl" }
380
416
}
381
417
weight="semibold"
382
418
{...props}
···
408
444
size="sm"
409
445
variant="secondary"
410
446
weight="light"
447
+
data-page-description
411
448
{...props}
412
449
style={[sharedStyles.description, style]}
413
450
>
···
430
467
? sharedStyles.smallActions
431
468
: sharedStyles.largeActions;
432
469
433
-
return (
434
-
<Flex align="center" gap="2" {...props} style={[actionsStyles, style]} />
435
-
);
470
+
return <Flex align="center" {...props} style={[actionsStyles, style]} />;
436
471
};
437
472
438
473
export interface PageStickyHeaderProps {
···
578
613
);
579
614
};
580
615
616
+
export type PageBackLinkProps = LinkProps & {
617
+
"aria-label"?: string;
618
+
style?: ComponentProps<typeof IconButton>["style"];
619
+
children?: ReactNode;
620
+
};
621
+
581
622
/**
582
623
* Back link component for navigating to the previous page.
583
624
*/
584
625
export const PageBackLink = ({
585
626
style,
586
627
children,
587
-
...props
588
-
}: IconButtonProps) => {
628
+
"aria-label": ariaLabel = "Back",
629
+
...linkProps
630
+
}: PageBackLinkProps) => {
589
631
return (
590
-
<IconButton
591
-
{...(props as React.ComponentProps<typeof IconButton>)}
632
+
<IconButtonLink
633
+
{...(linkProps as ComponentProps<typeof IconButtonLink>)}
634
+
aria-label={ariaLabel}
592
635
style={style}
593
636
variant="tertiary"
594
637
size="lg"
595
638
>
596
639
{children ?? <ArrowLeft size={20} />}
597
-
</IconButton>
640
+
</IconButtonLink>
598
641
);
599
642
};
+4
-1
apps/docs/src/components/skeleton/index.tsx
+4
-1
apps/docs/src/components/skeleton/index.tsx
···
31
31
// eslint-disable-next-line @stylexjs/valid-styles
32
32
animationDuration: "1.7s",
33
33
animationIterationCount: "infinite",
34
-
animationName: shimmer,
34
+
animationName: {
35
+
default: shimmer,
36
+
[mediaQueries.reducedMotion]: "none",
37
+
},
35
38
animationTimingFunction: "linear",
36
39
backgroundImage: `linear-gradient(
37
40
-80deg,
+4
-1
apps/docs/src/components/switch/index.tsx
+4
-1
apps/docs/src/components/switch/index.tsx
···
57
57
":is([data-selected=true] *)": "translate(100%, -50%)",
58
58
},
59
59
transitionDuration: animationDuration.fast,
60
-
transitionProperty: "transform",
60
+
transitionProperty: {
61
+
default: "transform",
62
+
[mediaQueries.reducedMotion]: "none",
63
+
},
61
64
transitionTimingFunction: "ease-in-out",
62
65
height: spacing["4"],
63
66
left: 0,
+1
-1
apps/docs/src/components/theme/typography.stylex.tsx
+1
-1
apps/docs/src/components/theme/typography.stylex.tsx
···
105
105
margin: 0,
106
106
// eslint-disable-next-line @stylexjs/valid-styles
107
107
fontFamily: fontFamily["title"],
108
-
fontSize: { default: fontSize["2xl"] },
108
+
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
109
109
// eslint-disable-next-line @stylexjs/valid-styles
110
110
fontWeight: fontWeight["semibold"],
111
111
letterSpacing: tracking["tight"],
+8
-3
apps/docs/src/components/theme/useDialogStyles.ts
+8
-3
apps/docs/src/components/theme/useDialogStyles.ts
···
9
9
animationTimingFunction,
10
10
animations,
11
11
} from "../theme/animations.stylex";
12
-
import { mediaQueries } from "../theme/media-queries.stylex";
13
12
import { radius } from "../theme/radius.stylex";
14
13
import { shadow } from "../theme/shadow.stylex";
15
14
import { ui } from "./semantic-color.stylex";
···
29
28
":is([data-exiting])": animationDuration.fast,
30
29
},
31
30
transitionProperty: "opacity",
32
-
transitionTimingFunction: "ease-in-out",
31
+
transitionTimingFunction: {
32
+
default: animationTimingFunction.easeOut,
33
+
":is([data-exiting])": animationTimingFunction.easeIn,
34
+
},
33
35
zIndex: 100,
34
36
height: "var(--page-height)",
35
37
left: 0,
···
52
54
top: "calc(var(--visual-viewport-height) / 2)",
53
55
54
56
animationDuration: animationDuration.slow,
55
-
animationName: { ":is([data-entering])": animations.zoomIn },
57
+
animationName: {
58
+
":is([data-entering])": animations.zoomIn,
59
+
":is([data-exiting])": animations.zoomOut,
60
+
},
56
61
animationTimingFunction: animationTimingFunction.easeElasticInOut,
57
62
},
58
63
dialog: {
+5
-2
apps/docs/src/components/theme/usePopoverStyles.ts
+5
-2
apps/docs/src/components/theme/usePopoverStyles.ts
···
39
39
":is([data-exiting], [data-exiting] > *)":
40
40
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
41
41
},
42
-
transitionDuration: animationDuration.verySlow,
42
+
transitionDuration: animationDuration.default,
43
43
transitionProperty: "transform, opacity",
44
-
transitionTimingFunction: animationTimingFunction.easeSpring,
44
+
transitionTimingFunction: {
45
+
default: animationTimingFunction.easeOut,
46
+
":is([data-exiting], [data-exiting] > *)": animationTimingFunction.easeIn,
47
+
},
45
48
willChange: "transform, opacity",
46
49
},
47
50
});
+10
apps/docs/src/components/tree/index.tsx
+10
apps/docs/src/components/tree/index.tsx
···
22
22
import { SizeContext } from "../context";
23
23
import { animationDuration } from "../theme/animations.stylex";
24
24
import { primaryColor } from "../theme/color.stylex";
25
+
import { mediaQueries } from "../theme/media-queries.stylex";
25
26
import { radius } from "../theme/radius.stylex";
26
27
import { ui } from "../theme/semantic-color.stylex";
27
28
import { spacing } from "../theme/spacing.stylex";
···
61
62
default: "rotate(0deg)",
62
63
":is([aria-expanded=true] *)": "rotate(90deg)",
63
64
},
65
+
transitionDuration: {
66
+
default: animationDuration.default,
67
+
[mediaQueries.reducedMotion]: "0s",
68
+
},
69
+
transitionProperty: {
70
+
default: "transform",
71
+
[mediaQueries.reducedMotion]: "none",
72
+
},
73
+
transitionTimingFunction: "ease-in-out",
64
74
paddingBottom: 0,
65
75
paddingLeft: 0,
66
76
paddingRight: 0,
+8
-1
apps/docs/src/components/typography/text.tsx
+8
-1
apps/docs/src/components/typography/text.tsx
···
13
13
} from "../theme/typography.stylex";
14
14
15
15
const styles = stylex.create({
16
+
trim: {
17
+
// eslint-disable-next-line @stylexjs/valid-styles
18
+
textBoxEdge: "cap alphabetic",
19
+
// eslint-disable-next-line @stylexjs/valid-styles
20
+
textBoxTrim: "trim-both",
21
+
},
22
+
16
23
sans: { fontFamily: fontFamily["sans"] },
17
24
serif: { fontFamily: fontFamily["serif"] },
18
25
mono: { fontFamily: fontFamily["mono"] },
···
184
191
styles[font],
185
192
weight && getResponsiveStyle("weight", weight),
186
193
size && getResponsiveStyle("font", size),
187
-
leading && getResponsiveStyle("leading", leading),
194
+
leading ? getResponsiveStyle("leading", leading) : styles.trim,
188
195
tracking && getResponsiveStyle("tracking", tracking),
189
196
variant && styles[`variant-${variant}`],
190
197
strikethrough && styles.strikethrough,
+4
-1
packages/hip-ui/src/components/drawer/index.tsx
+4
-1
packages/hip-ui/src/components/drawer/index.tsx
···
110
110
":is([data-direction=top][data-entering])": animations.slideInTop,
111
111
":is([data-direction=top][data-exiting])": animations.slideOutTop,
112
112
},
113
-
animationTimingFunction: animationTimingFunction.easeInOut,
113
+
animationTimingFunction: {
114
+
":is([data-entering])": animationTimingFunction.easeOut,
115
+
":is([data-exiting])": animationTimingFunction.easeIn,
116
+
},
114
117
},
115
118
dialog: {
116
119
overflow: "auto",
+9
packages/hip-ui/src/components/file-drop-zone/index.tsx
+9
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
54
54
},
55
55
boxSizing: "border-box",
56
56
position: "relative",
57
+
transitionDuration: {
58
+
default: animationDuration.fast,
59
+
[mediaQueries.reducedMotion]: "0s",
60
+
},
61
+
transitionProperty: {
62
+
default: "background-color, border-color",
63
+
[mediaQueries.reducedMotion]: "none",
64
+
},
65
+
transitionTimingFunction: animationTimingFunction.easeInOut,
57
66
58
67
alignItems: "center",
59
68
display: "flex",
+17
packages/hip-ui/src/components/lightbox/index.tsx
+17
packages/hip-ui/src/components/lightbox/index.tsx
···
29
29
30
30
const SLIDE_DURATION_MS = 250;
31
31
32
+
function prefersReducedMotion() {
33
+
return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
34
+
}
35
+
32
36
const styles = stylex.create({
33
37
overlay: {
34
38
inset: 0,
···
168
172
// Run slide animations via Web Animations API
169
173
useLayoutEffect(() => {
170
174
if (previousIndex === null) return;
175
+
if (prefersReducedMotion()) {
176
+
setPreviousIndex(null);
177
+
setTransitionSize(null);
178
+
return;
179
+
}
171
180
const wrapper = wrapperRef.current;
172
181
const outgoing = outgoingRef.current;
173
182
const incoming = incomingRef.current;
···
237
246
238
247
const captureAndGoPrev = useCallback(() => {
239
248
if (previousIndex !== null) return;
249
+
if (prefersReducedMotion()) {
250
+
setCurrentIndex((i) => (i <= 0 ? images.length - 1 : i - 1));
251
+
return;
252
+
}
240
253
const wrapper = wrapperRef.current;
241
254
if (wrapper) {
242
255
setTransitionSize({
···
251
264
252
265
const captureAndGoNext = useCallback(() => {
253
266
if (previousIndex !== null) return;
267
+
if (prefersReducedMotion()) {
268
+
setCurrentIndex((i) => (i >= images.length - 1 ? 0 : i + 1));
269
+
return;
270
+
}
254
271
const wrapper = wrapperRef.current;
255
272
if (wrapper) {
256
273
setTransitionSize({
+56
-13
packages/hip-ui/src/components/page/Page.tsx
+56
-13
packages/hip-ui/src/components/page/Page.tsx
···
3
3
import * as stylex from "@stylexjs/stylex";
4
4
import { ArrowLeft } from "lucide-react";
5
5
import { useEffect, useRef, useState } from "react";
6
+
import type { ComponentProps, ReactNode } from "react";
6
7
7
-
import type { IconButtonProps } from "../icon-button";
8
8
import type { StyleXComponentProps } from "../theme/types";
9
9
10
10
import { Flex } from "../flex";
···
20
20
import { spacing } from "../theme/spacing.stylex";
21
21
import { Text } from "../typography/text";
22
22
import { PageContext, usePageContext } from "./context";
23
+
import { createLink, LinkProps } from "@tanstack/react-router";
24
+
import { fontFamily, lineHeight } from "../theme/typography.stylex";
25
+
26
+
const IconButtonLink = createLink(IconButton);
23
27
24
28
const smallRootStyles = stylex.create({
25
29
root: {
···
66
70
gridTemplateAreas: {
67
71
default: `
68
72
'title actions'
69
-
'description actions'
70
73
`,
74
+
[breakpoints.sm]: {
75
+
":has([data-page-description])": `
76
+
'title actions'
77
+
'description actions'
78
+
`,
79
+
},
71
80
":has([data-page-icon])": `
72
81
'icon title actions'
73
-
'icon description actions'
74
82
`,
83
+
[breakpoints.sm]: {
84
+
":has([data-page-description])": `
85
+
'icon title actions'
86
+
'icon description actions'
87
+
`,
88
+
},
75
89
},
76
90
alignItems: "center",
77
91
columnGap: spacing["4"],
···
93
107
94
108
const sharedStyles = stylex.create({
95
109
smallTitle: {
110
+
// eslint-disable-next-line @stylexjs/valid-styles
111
+
textBoxEdge: "cap alphabetic",
112
+
// eslint-disable-next-line @stylexjs/valid-styles
113
+
textBoxTrim: "trim-both",
96
114
flexGrow: 1,
115
+
fontFamily: fontFamily["title"],
97
116
minWidth: 0,
98
117
},
99
118
largeTitle: {
119
+
// eslint-disable-next-line @stylexjs/valid-styles
120
+
textBoxEdge: "cap alphabetic",
121
+
// eslint-disable-next-line @stylexjs/valid-styles
122
+
textBoxTrim: "trim-both",
100
123
gridArea: "title",
101
124
flexGrow: 1,
125
+
fontFamily: fontFamily["title"],
102
126
minWidth: 0,
103
127
},
104
128
description: {
105
129
gridArea: "description",
130
+
display: {
131
+
default: "none",
132
+
[breakpoints.sm]: "block",
133
+
},
106
134
},
107
135
smallActions: {
136
+
gap: spacing["1"],
108
137
flexShrink: 0,
109
138
},
110
139
largeActions: {
111
140
gridArea: "actions",
141
+
gap: {
142
+
default: spacing["1"],
143
+
[breakpoints.sm]: spacing["2"],
144
+
},
112
145
minHeight: spacing["8"],
113
146
},
114
147
icon: {
···
150
183
},
151
184
largeStickyWrapper: {
152
185
zIndex: 100,
153
-
marginBottom: spacing["8"],
186
+
marginBottom: {
187
+
default: spacing["2"],
188
+
[breakpoints.sm]: spacing["8"],
189
+
},
154
190
},
155
191
stickyWrapperStuck: {
156
192
backgroundColor: {
···
376
412
return (
377
413
<Text
378
414
size={
379
-
isSmall ? { default: "xl", sm: "2xl" } : { default: "xl", sm: "3xl" }
415
+
isSmall ? { default: "xl", sm: "2xl" } : { default: "2xl", sm: "3xl" }
380
416
}
381
417
weight="semibold"
382
418
{...props}
···
408
444
size="sm"
409
445
variant="secondary"
410
446
weight="light"
447
+
data-page-description
411
448
{...props}
412
449
style={[sharedStyles.description, style]}
413
450
>
···
430
467
? sharedStyles.smallActions
431
468
: sharedStyles.largeActions;
432
469
433
-
return (
434
-
<Flex align="center" gap="2" {...props} style={[actionsStyles, style]} />
435
-
);
470
+
return <Flex align="center" {...props} style={[actionsStyles, style]} />;
436
471
};
437
472
438
473
export interface PageStickyHeaderProps {
···
578
613
);
579
614
};
580
615
616
+
export type PageBackLinkProps = LinkProps & {
617
+
"aria-label"?: string;
618
+
style?: ComponentProps<typeof IconButton>["style"];
619
+
children?: ReactNode;
620
+
};
621
+
581
622
/**
582
623
* Back link component for navigating to the previous page.
583
624
*/
584
625
export const PageBackLink = ({
585
626
style,
586
627
children,
587
-
...props
588
-
}: IconButtonProps) => {
628
+
"aria-label": ariaLabel = "Back",
629
+
...linkProps
630
+
}: PageBackLinkProps) => {
589
631
return (
590
-
<IconButton
591
-
{...(props as React.ComponentProps<typeof IconButton>)}
632
+
<IconButtonLink
633
+
{...(linkProps as ComponentProps<typeof IconButtonLink>)}
634
+
aria-label={ariaLabel}
592
635
style={style}
593
636
variant="tertiary"
594
637
size="lg"
595
638
>
596
639
{children ?? <ArrowLeft size={20} />}
597
-
</IconButton>
640
+
</IconButtonLink>
598
641
);
599
642
};
+4
-1
packages/hip-ui/src/components/skeleton/index.tsx
+4
-1
packages/hip-ui/src/components/skeleton/index.tsx
···
31
31
// eslint-disable-next-line @stylexjs/valid-styles
32
32
animationDuration: "1.7s",
33
33
animationIterationCount: "infinite",
34
-
animationName: shimmer,
34
+
animationName: {
35
+
default: shimmer,
36
+
[mediaQueries.reducedMotion]: "none",
37
+
},
35
38
animationTimingFunction: "linear",
36
39
backgroundImage: `linear-gradient(
37
40
-80deg,
+4
-1
packages/hip-ui/src/components/switch/index.tsx
+4
-1
packages/hip-ui/src/components/switch/index.tsx
···
57
57
":is([data-selected=true] *)": "translate(100%, -50%)",
58
58
},
59
59
transitionDuration: animationDuration.fast,
60
-
transitionProperty: "transform",
60
+
transitionProperty: {
61
+
default: "transform",
62
+
[mediaQueries.reducedMotion]: "none",
63
+
},
61
64
transitionTimingFunction: "ease-in-out",
62
65
height: spacing["4"],
63
66
left: 0,
+1
-1
packages/hip-ui/src/components/theme/typography.stylex.tsx
+1
-1
packages/hip-ui/src/components/theme/typography.stylex.tsx
···
105
105
margin: 0,
106
106
// eslint-disable-next-line @stylexjs/valid-styles
107
107
fontFamily: fontFamily["title"],
108
-
fontSize: { default: fontSize["2xl"] },
108
+
fontSize: { default: fontSize["xl"], [breakpoints.md]: fontSize["2xl"] },
109
109
// eslint-disable-next-line @stylexjs/valid-styles
110
110
fontWeight: fontWeight["semibold"],
111
111
letterSpacing: tracking["tight"],
+8
-3
packages/hip-ui/src/components/theme/useDialogStyles.ts
+8
-3
packages/hip-ui/src/components/theme/useDialogStyles.ts
···
9
9
animationTimingFunction,
10
10
animations,
11
11
} from "../theme/animations.stylex";
12
-
import { mediaQueries } from "../theme/media-queries.stylex";
13
12
import { radius } from "../theme/radius.stylex";
14
13
import { shadow } from "../theme/shadow.stylex";
15
14
import { ui } from "./semantic-color.stylex";
···
29
28
":is([data-exiting])": animationDuration.fast,
30
29
},
31
30
transitionProperty: "opacity",
32
-
transitionTimingFunction: "ease-in-out",
31
+
transitionTimingFunction: {
32
+
default: animationTimingFunction.easeOut,
33
+
":is([data-exiting])": animationTimingFunction.easeIn,
34
+
},
33
35
zIndex: 100,
34
36
height: "var(--page-height)",
35
37
left: 0,
···
52
54
top: "calc(var(--visual-viewport-height) / 2)",
53
55
54
56
animationDuration: animationDuration.slow,
55
-
animationName: { ":is([data-entering])": animations.zoomIn },
57
+
animationName: {
58
+
":is([data-entering])": animations.zoomIn,
59
+
":is([data-exiting])": animations.zoomOut,
60
+
},
56
61
animationTimingFunction: animationTimingFunction.easeElasticInOut,
57
62
},
58
63
dialog: {
+5
-2
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+5
-2
packages/hip-ui/src/components/theme/usePopoverStyles.ts
···
39
39
":is([data-exiting], [data-exiting] > *)":
40
40
"scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))",
41
41
},
42
-
transitionDuration: animationDuration.verySlow,
42
+
transitionDuration: animationDuration.default,
43
43
transitionProperty: "transform, opacity",
44
-
transitionTimingFunction: animationTimingFunction.easeSpring,
44
+
transitionTimingFunction: {
45
+
default: animationTimingFunction.easeOut,
46
+
":is([data-exiting], [data-exiting] > *)": animationTimingFunction.easeIn,
47
+
},
45
48
willChange: "transform, opacity",
46
49
},
47
50
});
+10
packages/hip-ui/src/components/tree/index.tsx
+10
packages/hip-ui/src/components/tree/index.tsx
···
22
22
import { SizeContext } from "../context";
23
23
import { animationDuration } from "../theme/animations.stylex";
24
24
import { primaryColor } from "../theme/color.stylex";
25
+
import { mediaQueries } from "../theme/media-queries.stylex";
25
26
import { radius } from "../theme/radius.stylex";
26
27
import { ui } from "../theme/semantic-color.stylex";
27
28
import { spacing } from "../theme/spacing.stylex";
···
61
62
default: "rotate(0deg)",
62
63
":is([aria-expanded=true] *)": "rotate(90deg)",
63
64
},
65
+
transitionDuration: {
66
+
default: animationDuration.default,
67
+
[mediaQueries.reducedMotion]: "0s",
68
+
},
69
+
transitionProperty: {
70
+
default: "transform",
71
+
[mediaQueries.reducedMotion]: "none",
72
+
},
73
+
transitionTimingFunction: "ease-in-out",
64
74
paddingBottom: 0,
65
75
paddingLeft: 0,
66
76
paddingRight: 0,
+8
-1
packages/hip-ui/src/components/typography/text.tsx
+8
-1
packages/hip-ui/src/components/typography/text.tsx
···
13
13
} from "../theme/typography.stylex";
14
14
15
15
const styles = stylex.create({
16
+
trim: {
17
+
// eslint-disable-next-line @stylexjs/valid-styles
18
+
textBoxEdge: "cap alphabetic",
19
+
// eslint-disable-next-line @stylexjs/valid-styles
20
+
textBoxTrim: "trim-both",
21
+
},
22
+
16
23
sans: { fontFamily: fontFamily["sans"] },
17
24
serif: { fontFamily: fontFamily["serif"] },
18
25
mono: { fontFamily: fontFamily["mono"] },
···
184
191
styles[font],
185
192
weight && getResponsiveStyle("weight", weight),
186
193
size && getResponsiveStyle("font", size),
187
-
leading && getResponsiveStyle("leading", leading),
194
+
leading ? getResponsiveStyle("leading", leading) : styles.trim,
188
195
tracking && getResponsiveStyle("tracking", tracking),
189
196
variant && styles[`variant-${variant}`],
190
197
strikethrough && styles.strikethrough,