A design system in a box.
hip-ui.tngl.io/docs/introduction
refactoring color
+379
-377
+32
-2
apps/docs/src/routes/__root.tsx
+32
-2
apps/docs/src/routes/__root.tsx
···
5
5
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
6
6
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
7
7
8
-
import { ui } from "@/components/theme/semantic-color.stylex";
8
+
import { ui, primaryColor } from "../components/theme/semantic-color.stylex";
9
+
import { blue } from "../components/theme/colors/blue.stylex";
10
+
import { purple } from "../components/theme/colors/purple.stylex";
9
11
10
12
if (import.meta.env.DEV) {
11
13
import("virtual:stylex:runtime");
···
14
16
const styles = stylex.create({
15
17
body: {
16
18
margin: 0,
19
+
},
20
+
themeBlue: {
21
+
[primaryColor.bg]: blue.bg,
22
+
[primaryColor.bgSubtle]: blue.bgSubtle,
23
+
[primaryColor.component1]: blue.component1,
24
+
[primaryColor.component2]: blue.component2,
25
+
[primaryColor.component3]: blue.component3,
26
+
[primaryColor.border1]: blue.border1,
27
+
[primaryColor.border2]: blue.border2,
28
+
[primaryColor.border3]: blue.border3,
29
+
[primaryColor.solid1]: blue.solid1,
30
+
[primaryColor.solid2]: blue.solid2,
31
+
[primaryColor.text1]: blue.text1,
32
+
[primaryColor.text2]: blue.text2,
33
+
},
34
+
themePurple: {
35
+
[primaryColor.bg]: purple.bg,
36
+
[primaryColor.bgSubtle]: purple.bgSubtle,
37
+
[primaryColor.component1]: purple.component1,
38
+
[primaryColor.component2]: purple.component2,
39
+
[primaryColor.component3]: purple.component3,
40
+
[primaryColor.border1]: purple.border1,
41
+
[primaryColor.border2]: purple.border2,
42
+
[primaryColor.border3]: purple.border3,
43
+
[primaryColor.solid1]: purple.solid1,
44
+
[primaryColor.solid2]: purple.solid2,
45
+
[primaryColor.text1]: purple.text1,
46
+
[primaryColor.text2]: purple.text2,
17
47
},
18
48
});
19
49
···
62
92
<head>
63
93
<HeadContent />
64
94
</head>
65
-
<body {...stylex.props(ui.bg, ui.text, styles.body)}>
95
+
<body {...stylex.props(ui.bg, ui.text, styles.body, styles.themeBlue)}>
66
96
<script>{`
67
97
const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
68
98
+1
-1
packages/hip-ui/src/cli/install.tsx
+1
-1
packages/hip-ui/src/cli/install.tsx
···
61
61
import { segmentedControlConfig } from "../components/segmented-control/segmented-control-config.js";
62
62
import { selectConfig } from "../components/select/select-config.js";
63
63
import { separatorConfig } from "../components/separator/separator-config.js";
64
-
import { skeletonConfig } from "../components/skeleton/skeleton-config.js";
65
64
import { sidebarConfig } from "../components/sidebar/sidebar-config.js";
65
+
import { skeletonConfig } from "../components/skeleton/skeleton-config.js";
66
66
import { sliderConfig } from "../components/slider/slider-config.js";
67
67
import { switchConfig } from "../components/switch/switch-config.js";
68
68
import { tableConfig } from "../components/table/table-config.js";
+2
-2
packages/hip-ui/src/components/alert-dialog/index.tsx
+2
-2
packages/hip-ui/src/components/alert-dialog/index.tsx
···
27
27
paddingTop: spacing["2"],
28
28
},
29
29
header: {
30
-
alignItems: "center",
31
30
gap: spacing["2"],
31
+
alignItems: "center",
32
32
display: "flex",
33
+
fontSize: fontSize["lg"],
33
34
justifyContent: "space-between",
34
35
height: spacing["8"],
35
36
paddingLeft: spacing["4"],
36
37
paddingRight: spacing["4"],
37
-
fontSize: fontSize["lg"],
38
38
paddingTop: spacing["2"],
39
39
},
40
40
description: {
+1
-1
packages/hip-ui/src/components/avatar/index.tsx
+1
-1
packages/hip-ui/src/components/avatar/index.tsx
···
2
2
import { use, useLayoutEffect, useState } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
+
import { uiColor } from "../theme/color.stylex";
5
6
import { radius } from "../theme/radius.stylex";
6
-
import { uiColor } from "../theme/semantic-color.stylex";
7
7
import { spacing } from "../theme/spacing.stylex";
8
8
import { Size, StyleXComponentProps } from "../theme/types";
9
9
import {
-2
packages/hip-ui/src/components/calendar/calendar-config.ts
-2
packages/hip-ui/src/components/calendar/calendar-config.ts
-1
packages/hip-ui/src/components/calendar/index.tsx
-1
packages/hip-ui/src/components/calendar/index.tsx
···
18
18
import { Flex } from "../flex";
19
19
import { IconButton } from "../icon-button";
20
20
import { ErrorMessage } from "../label";
21
-
import { spacing } from "../theme/spacing.stylex";
22
21
import { useCalendarStyles } from "../theme/useCalendarStyles";
23
22
24
23
export interface CalendarProps<T extends DateValue>
-2
packages/hip-ui/src/components/color-picker/color-picker-config.ts
-2
packages/hip-ui/src/components/color-picker/color-picker-config.ts
+6
-6
packages/hip-ui/src/components/color-picker/index.tsx
+6
-6
packages/hip-ui/src/components/color-picker/index.tsx
···
36
36
37
37
const styles = stylex.create({
38
38
button: {
39
-
alignItems: "center",
40
-
backgroundColor: "transparent",
39
+
margin: 0,
40
+
padding: 0,
41
41
borderWidth: 0,
42
-
display: "flex",
43
-
fontSize: fontSize["sm"],
44
42
gap: {
45
43
default: spacing["2"],
46
44
":is([data-size=sm])": spacing["1"],
47
45
},
48
-
margin: 0,
49
-
padding: 0,
46
+
alignItems: "center",
47
+
backgroundColor: "transparent",
48
+
display: "flex",
49
+
fontSize: fontSize["sm"],
50
50
},
51
51
root: {
52
52
display: "block",
+1
-1
packages/hip-ui/src/components/color-slider/index.tsx
+1
-1
packages/hip-ui/src/components/color-slider/index.tsx
···
11
11
import { ColorThumb } from "../color-area";
12
12
import { SizeContext } from "../context";
13
13
import { Label } from "../label";
14
+
import { uiColor } from "../theme/color.stylex";
14
15
import { radius } from "../theme/radius.stylex";
15
-
import { uiColor } from "../theme/semantic-color.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import { fontSize, lineHeight } from "../theme/typography.stylex";
+1
-1
packages/hip-ui/src/components/color-swatch-picker/index.tsx
+1
-1
packages/hip-ui/src/components/color-swatch-picker/index.tsx
···
9
9
10
10
import { ColorSwatch } from "../color-swatch";
11
11
import { SizeContext } from "../context";
12
+
import { uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
+1
-1
packages/hip-ui/src/components/color-swatch/index.tsx
+1
-1
packages/hip-ui/src/components/color-swatch/index.tsx
···
5
5
import { ColorSwatch as AriaColorSwatch } from "react-aria-components";
6
6
7
7
import { SizeContext } from "../context";
8
+
import { uiColor } from "../theme/color.stylex";
8
9
import { radius } from "../theme/radius.stylex";
9
-
import { uiColor } from "../theme/semantic-color.stylex";
10
10
import { spacing } from "../theme/spacing.stylex";
11
11
import { Size, StyleXComponentProps } from "../theme/types";
12
12
+1
-1
packages/hip-ui/src/components/color-wheel/index.tsx
+1
-1
packages/hip-ui/src/components/color-wheel/index.tsx
···
9
9
10
10
import { ColorThumb } from "../color-area";
11
11
import { SizeContext } from "../context";
12
+
import { uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
+1
-1
packages/hip-ui/src/components/date-range-picker/index.tsx
+1
-1
packages/hip-ui/src/components/date-range-picker/index.tsx
···
18
18
import { Description, FieldErrorMessage, Label } from "../label";
19
19
import { RangeCalendar, RangeCalendarProps } from "../range-calendar";
20
20
import { SuffixIcon } from "../suffix-icon";
21
-
import { uiColor } from "../theme/semantic-color.stylex";
21
+
import { uiColor } from "../theme/color.stylex";
22
22
import { spacing } from "../theme/spacing.stylex";
23
23
import {
24
24
InputVariant,
+3
-3
packages/hip-ui/src/components/dialog/index.tsx
+3
-3
packages/hip-ui/src/components/dialog/index.tsx
···
12
12
} from "react-aria-components";
13
13
14
14
import { IconButton } from "../icon-button";
15
-
import { uiColor } from "../theme/semantic-color.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import { fontSize, typeramp } from "../theme/typography.stylex";
···
23
23
paddingTop: spacing["2"],
24
24
},
25
25
header: {
26
-
alignItems: "center",
27
26
gap: spacing["2"],
27
+
alignItems: "center",
28
28
display: "flex",
29
+
fontSize: fontSize["lg"],
29
30
justifyContent: "space-between",
30
31
height: spacing["8"],
31
32
paddingBottom: spacing["2"],
32
33
paddingLeft: spacing["4"],
33
-
fontSize: fontSize["lg"],
34
34
paddingRight: spacing["4"],
35
35
36
36
borderBottomColor: uiColor.border1,
+1
-5
packages/hip-ui/src/components/disclosure-group/disclosure-group-config.ts
+1
-5
packages/hip-ui/src/components/disclosure-group/disclosure-group-config.ts
···
3
3
export const disclosureGroupConfig: ComponentConfig = {
4
4
name: "disclosure-group",
5
5
filepath: "./index.tsx",
6
-
hipDependencies: [
7
-
"../theme/types.ts",
8
-
"../context.ts",
9
-
],
6
+
hipDependencies: ["../theme/types.ts", "../context.ts"],
10
7
dependencies: {
11
8
"react-aria-components": "^1.13.0",
12
9
},
13
10
};
14
-
+3
-3
packages/hip-ui/src/components/disclosure-group/index.tsx
+3
-3
packages/hip-ui/src/components/disclosure-group/index.tsx
···
8
8
} from "react-aria-components";
9
9
10
10
import { SizeContext } from "../context";
11
-
import { uiColor } from "../theme/semantic-color.stylex";
11
+
import { uiColor } from "../theme/color.stylex";
12
12
import { Size, StyleXComponentProps } from "../theme/types";
13
13
14
14
const styles = stylex.create({
···
17
17
flexDirection: "column",
18
18
},
19
19
separator: {
20
-
backgroundColor: uiColor.border2,
20
+
margin: 0,
21
21
borderWidth: 0,
22
+
backgroundColor: uiColor.border2,
22
23
height: "1px",
23
-
margin: 0,
24
24
width: "100%",
25
25
},
26
26
});
+1
-1
packages/hip-ui/src/components/disclosure/index.tsx
+1
-1
packages/hip-ui/src/components/disclosure/index.tsx
···
12
12
13
13
import { SizeContext } from "../context";
14
14
import { animationDuration } from "../theme/animations.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { Size, StyleXComponentProps } from "../theme/types";
19
19
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
+1
-1
packages/hip-ui/src/components/drawer/index.tsx
+1
-1
packages/hip-ui/src/components/drawer/index.tsx
···
13
13
14
14
import { IconButton } from "../icon-button";
15
15
import { animationDuration, animations } from "../theme/animations.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
16
+
import { uiColor } from "../theme/color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { Size, StyleXComponentProps } from "../theme/types";
19
19
import { typeramp } from "../theme/typography.stylex";
-1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
-1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
-1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
-1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
+21
-44
packages/hip-ui/src/components/empty-state/index.tsx
+21
-44
packages/hip-ui/src/components/empty-state/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
emptyState: {
14
-
display: "flex",
15
-
flexDirection: "column",
16
-
alignItems: "center",
17
-
justifyContent: "center",
18
-
fontFamily: fontFamily["sans"],
19
-
gap: "var(--empty-state-gap)",
20
-
textAlign: "center",
21
14
"--empty-state-gap": {
22
15
":is([data-empty-state-size=lg])": spacing["8"],
23
16
":is([data-empty-state-size=md])": spacing["6"],
···
28
21
":is([data-empty-state-size=md])": "180px",
29
22
":is([data-empty-state-size=sm])": "120px",
30
23
},
24
+
gap: "var(--empty-state-gap)",
25
+
alignItems: "center",
26
+
display: "flex",
27
+
flexDirection: "column",
28
+
fontFamily: fontFamily["sans"],
29
+
justifyContent: "center",
30
+
textAlign: "center",
31
31
},
32
32
image: {
33
-
width: "var(--empty-state-image-size)",
34
-
height: "var(--empty-state-image-size)",
35
-
objectFit: "contain",
36
-
display: "flex",
37
33
alignItems: "center",
34
+
display: "flex",
38
35
justifyContent: "center",
36
+
objectFit: "contain",
37
+
height: "var(--empty-state-image-size)",
38
+
width: "var(--empty-state-image-size)",
39
39
},
40
40
title: {
41
+
margin: 0,
41
42
fontSize: {
42
43
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
43
44
":is([data-empty-state-size='md'] *)": fontSize["xl"],
44
45
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
45
46
},
46
47
fontWeight: fontWeight["semibold"],
47
-
margin: 0,
48
48
},
49
49
description: {
50
+
margin: 0,
50
51
fontSize: fontSize["sm"],
51
52
fontWeight: fontWeight["normal"],
52
-
margin: 0,
53
53
maxWidth: {
54
54
":is([data-empty-state-size=lg])": "480px",
55
55
":is([data-empty-state-size=md])": "400px",
···
57
57
},
58
58
},
59
59
actions: {
60
-
display: "flex",
61
-
flexDirection: "row",
62
60
gap: spacing["2"],
63
61
alignItems: "center",
64
-
justifyContent: "center",
62
+
display: "flex",
63
+
flexDirection: "row",
65
64
flexWrap: "wrap",
65
+
justifyContent: "center",
66
66
},
67
67
});
68
68
···
117
117
...props
118
118
}: EmptyStateImageProps) => {
119
119
if (src) {
120
-
return (
121
-
<img
122
-
src={src}
123
-
alt={alt}
124
-
{...stylex.props(styles.image, style)}
125
-
/>
126
-
);
120
+
return <img src={src} alt={alt} {...stylex.props(styles.image, style)} />;
127
121
}
128
122
129
123
return (
···
136
130
export interface EmptyStateTitleProps
137
131
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
138
132
139
-
export const EmptyStateTitle = ({
140
-
style,
141
-
...props
142
-
}: EmptyStateTitleProps) => {
143
-
return (
144
-
<h2
145
-
{...props}
146
-
{...stylex.props(styles.title, ui.text, style)}
147
-
/>
148
-
);
133
+
export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => {
134
+
return <div {...props} {...stylex.props(styles.title, ui.text, style)} />;
149
135
};
150
136
151
137
export interface EmptyStateDescriptionProps
···
156
142
...props
157
143
}: EmptyStateDescriptionProps) => {
158
144
return (
159
-
<p
160
-
{...props}
161
-
{...stylex.props(styles.description, ui.textDim, style)}
162
-
/>
145
+
<p {...props} {...stylex.props(styles.description, ui.textDim, style)} />
163
146
);
164
147
};
165
148
···
170
153
style,
171
154
...props
172
155
}: EmptyStateActionsProps) => {
173
-
return (
174
-
<div
175
-
{...props}
176
-
{...stylex.props(styles.actions, style)}
177
-
/>
178
-
);
156
+
return <div {...props} {...stylex.props(styles.actions, style)} />;
179
157
};
180
-
+1
-1
packages/hip-ui/src/components/file-drop-zone/index.tsx
+1
-1
packages/hip-ui/src/components/file-drop-zone/index.tsx
···
9
9
DropZoneProps,
10
10
} from "react-aria-components";
11
11
12
+
import { primaryColor, uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
16
16
async function getFiles(items: DropItem[]): Promise<File[]> {
+1
-1
packages/hip-ui/src/components/form/index.tsx
+1
-1
packages/hip-ui/src/components/form/index.tsx
+1
-1
packages/hip-ui/src/components/hover-card/index.tsx
+1
-1
packages/hip-ui/src/components/hover-card/index.tsx
+1
-1
packages/hip-ui/src/components/kbd/index.tsx
+1
-1
packages/hip-ui/src/components/kbd/index.tsx
···
1
1
import { isMac as getIsMac } from "@react-aria/utils";
2
2
import * as stylex from "@stylexjs/stylex";
3
3
4
+
import { uiColor } from "../theme/color.stylex";
4
5
import { radius } from "../theme/radius.stylex";
5
-
import { uiColor } from "../theme/semantic-color.stylex";
6
6
import { spacing } from "../theme/spacing.stylex";
7
7
import { StyleXComponentProps } from "../theme/types";
8
8
import { fontFamily, fontSize, tracking } from "../theme/typography.stylex";
+4
-4
packages/hip-ui/src/components/label/index.tsx
+4
-4
packages/hip-ui/src/components/label/index.tsx
···
20
20
fontWeight: fontWeight["semibold"],
21
21
22
22
fontSize: {
23
-
":is([data-size=sm])": fontSize["xs"],
24
-
":is([data-size=md])": fontSize["sm"],
25
23
":is([data-size=lg])": fontSize["base"],
24
+
":is([data-size=md])": fontSize["sm"],
25
+
":is([data-size=sm])": fontSize["xs"],
26
26
},
27
27
lineHeight: {
28
-
":is([data-size=sm])": lineHeight["xs"],
29
-
":is([data-size=md])": lineHeight["sm"],
30
28
":is([data-size=lg])": lineHeight["base"],
29
+
":is([data-size=md])": lineHeight["sm"],
30
+
":is([data-size=sm])": lineHeight["xs"],
31
31
},
32
32
},
33
33
description: {
+6
-6
packages/hip-ui/src/components/link/index.tsx
+6
-6
packages/hip-ui/src/components/link/index.tsx
···
5
5
Link as AriaLink,
6
6
} from "react-aria-components";
7
7
8
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
8
+
import { primaryColor, uiColor } from "../theme/color.stylex";
9
9
import { spacing } from "../theme/spacing.stylex";
10
10
import { StyleXComponentProps } from "../theme/types";
11
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
···
13
13
14
14
const styles = stylex.create({
15
15
link: {
16
+
textDecoration: {
17
+
default: "none",
18
+
":is([data-breadcrumb] *)": "none",
19
+
":is([data-hovered])": "underline",
20
+
},
16
21
color: {
17
22
default: primaryColor.text2,
18
23
":is([data-breadcrumb] *)": uiColor.text1,
···
24
29
},
25
30
fontFamily: fontFamily["sans"],
26
31
fontWeight: fontWeight["normal"],
27
-
textDecoration: {
28
-
default: "none",
29
-
":is([data-hovered])": "underline",
30
-
":is([data-breadcrumb] *)": "none",
31
-
},
32
32
textUnderlineOffset: spacing["1"],
33
33
},
34
34
});
+2
-2
packages/hip-ui/src/components/listbox/index.tsx
+2
-2
packages/hip-ui/src/components/listbox/index.tsx
···
36
36
paddingTop: spacing["1"],
37
37
38
38
height: {
39
-
":is([data-size=sm])": spacing["7"],
40
-
":is([data-size=md])": spacing["7"],
41
39
":is([data-size=lg])": spacing["9"],
40
+
":is([data-size=md])": spacing["7"],
41
+
":is([data-size=sm])": spacing["7"],
42
42
},
43
43
},
44
44
separator: {
+2
-2
packages/hip-ui/src/components/meter/index.tsx
+2
-2
packages/hip-ui/src/components/meter/index.tsx
···
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
9
import { animationDuration } from "../theme/animations.stylex";
10
-
import { radius } from "../theme/radius.stylex";
11
10
import {
12
11
criticalColor,
13
12
primaryColor,
14
13
successColor,
15
14
uiColor,
16
15
warningColor,
17
-
} from "../theme/semantic-color.stylex";
16
+
} from "../theme/color.stylex";
17
+
import { radius } from "../theme/radius.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
19
import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
20
20
import { fontSize, lineHeight } from "../theme/typography.stylex";
+2
-1
packages/hip-ui/src/components/number-field/index.tsx
+2
-1
packages/hip-ui/src/components/number-field/index.tsx
···
18
18
import { SizeContext } from "../context";
19
19
import { Description, FieldErrorMessage, Label } from "../label";
20
20
import { SuffixIcon } from "../suffix-icon";
21
-
import { ui, uiColor } from "../theme/semantic-color.stylex";
21
+
import { uiColor } from "../theme/color.stylex";
22
+
import { ui } from "../theme/semantic-color.stylex";
22
23
import { spacing } from "../theme/spacing.stylex";
23
24
import {
24
25
InputVariant,
+1
-1
packages/hip-ui/src/components/pagination/index.tsx
+1
-1
packages/hip-ui/src/components/pagination/index.tsx
+5
-5
packages/hip-ui/src/components/popover/index.tsx
+5
-5
packages/hip-ui/src/components/popover/index.tsx
···
10
10
Dialog,
11
11
} from "react-aria-components";
12
12
13
-
import { uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
import { usePopoverStyles } from "../theme/usePopoverStyles";
···
26
26
},
27
27
content: {
28
28
boxShadow: "none",
29
+
position: "relative",
29
30
paddingBottom: spacing["2"],
30
31
paddingLeft: spacing["2"],
31
32
paddingRight: spacing["2"],
32
33
paddingTop: spacing["2"],
33
-
position: "relative",
34
34
},
35
35
caret: {},
36
36
arrow: {
37
37
backgroundColor: uiColor.bgSubtle,
38
-
height: spacing["2"],
39
38
transform: {
40
39
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
41
-
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
42
40
[":is([data-placement=left] *)"]: "rotate(90deg)",
43
41
[":is([data-placement=right] *)"]: "rotate(-90deg)",
42
+
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
44
43
},
44
+
zIndex: 0,
45
+
height: spacing["2"],
45
46
width: spacing["2"],
46
-
zIndex: 0,
47
47
},
48
48
});
49
49
interface PopoverProps
+1
-1
packages/hip-ui/src/components/progress-bar/index.tsx
+1
-1
packages/hip-ui/src/components/progress-bar/index.tsx
···
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
9
import { animationDuration } from "../theme/animations.stylex";
10
+
import { primaryColor, uiColor } from "../theme/color.stylex";
10
11
import { radius } from "../theme/radius.stylex";
11
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
12
12
import { spacing } from "../theme/spacing.stylex";
13
13
import { Size, StyleXComponentProps } from "../theme/types";
14
14
import { fontSize, lineHeight } from "../theme/typography.stylex";
+11
-11
packages/hip-ui/src/components/progress-circle/index.tsx
+11
-11
packages/hip-ui/src/components/progress-circle/index.tsx
···
10
10
import { SizeContext } from "../context";
11
11
import { Label } from "../label";
12
12
import { animationDuration } from "../theme/animations.stylex";
13
+
import { primaryColor, uiColor } from "../theme/color.stylex";
13
14
import { radius } from "../theme/radius.stylex";
14
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
15
15
import { spacing } from "../theme/spacing.stylex";
16
16
17
17
const IndeterminateFillAnimation = stylex.keyframes({
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
+
gap: spacing["2"],
28
29
alignItems: "center",
29
30
boxSizing: "border-box",
30
31
display: "flex",
31
32
flexDirection: "column",
32
-
gap: spacing["2"],
33
33
},
34
34
circleWrapper: {
35
35
justifyContent: "center",
···
37
37
38
38
"--progress-border-width": spacing["1"],
39
39
"--progress-size": {
40
+
":is([data-size=lg] *)": spacing["10"],
41
+
":is([data-size=md] *)": spacing["8"],
40
42
":is([data-size=sm] *)": spacing["4"],
41
-
":is([data-size=md] *)": spacing["8"],
42
-
":is([data-size=lg] *)": spacing["10"],
43
43
},
44
44
},
45
45
track: {
···
52
52
width: "var(--progress-size)",
53
53
},
54
54
fills: {
55
+
position: "absolute",
55
56
height: "100%",
56
57
left: 0,
57
-
position: "absolute",
58
58
top: 0,
59
59
width: "100%",
60
60
},
61
61
fillMask: {
62
-
boxSizing: "border-box",
63
-
height: "100%",
64
62
overflow: "hidden",
63
+
boxSizing: "border-box",
65
64
position: "absolute",
66
65
transformOrigin: "100%",
66
+
height: "100%",
67
67
width: "50%",
68
68
},
69
69
fillMask1: {
···
73
73
transform: "rotate(180deg)",
74
74
},
75
75
fillSubmask: {
76
+
overflow: "hidden",
76
77
boxSizing: "border-box",
77
-
height: "100%",
78
-
overflow: "hidden",
79
78
transformOrigin: "100%",
80
79
transitionDuration: animationDuration.default,
81
80
transitionProperty: "transform",
82
81
transitionTimingFunction: "linear",
82
+
height: "100%",
83
83
width: "100%",
84
84
},
85
85
fill: {
···
92
92
width: "var(--progress-size)",
93
93
},
94
94
check: {
95
-
left: "50%",
96
95
position: "absolute",
97
-
top: "50%",
98
96
transform: "translate(-50%, -50%)",
97
+
left: "50%",
98
+
top: "50%",
99
99
},
100
100
completed: {
101
101
backgroundColor: primaryColor.solid1,
-1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
-1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
+1
-1
packages/hip-ui/src/components/range-calendar/index.tsx
+1
-1
packages/hip-ui/src/components/range-calendar/index.tsx
+1
-1
packages/hip-ui/src/components/segmented-control/index.tsx
+1
-1
packages/hip-ui/src/components/segmented-control/index.tsx
···
12
12
13
13
import { SizeContext } from "../context";
14
14
import { animationDuration } from "../theme/animations-duration.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { shadow } from "../theme/shadow.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
19
import { Size, StyleXComponentProps } from "../theme/types";
+3
-3
packages/hip-ui/src/components/separator/index.tsx
+3
-3
packages/hip-ui/src/components/separator/index.tsx
···
4
4
Separator as AriaSeparator,
5
5
} from "react-aria-components";
6
6
7
-
import { uiColor } from "../theme/semantic-color.stylex";
7
+
import { uiColor } from "../theme/color.stylex";
8
8
import { StyleXComponentProps } from "../theme/types";
9
9
10
10
const styles = stylex.create({
11
11
separator: {
12
-
backgroundColor: uiColor.border2,
12
+
margin: 0,
13
13
borderWidth: 0,
14
+
backgroundColor: uiColor.border2,
14
15
height: {
15
16
default: "1px",
16
17
":is([aria-orientation=vertical])": "100%",
17
18
},
18
-
margin: 0,
19
19
width: {
20
20
default: "100%",
21
21
":is([aria-orientation=vertical])": "1px",
+1
-1
packages/hip-ui/src/components/skeleton/index.tsx
+1
-1
packages/hip-ui/src/components/skeleton/index.tsx
···
2
2
3
3
import * as stylex from "@stylexjs/stylex";
4
4
5
+
import { uiColor } from "../theme/color.stylex";
5
6
import { radius } from "../theme/radius.stylex";
6
-
import { uiColor } from "../theme/semantic-color.stylex";
7
7
import { shadow } from "../theme/shadow.stylex";
8
8
import { spacing } from "../theme/spacing.stylex";
9
9
import { Size, StyleXComponentProps } from "../theme/types";
-1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
-1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
+27
-27
packages/hip-ui/src/components/slider/index.tsx
+27
-27
packages/hip-ui/src/components/slider/index.tsx
···
9
9
} from "react-aria-components";
10
10
11
11
import { Label } from "../label";
12
+
import { primaryColor, uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { shadow } from "../theme/shadow.stylex";
15
15
import { spacing } from "../theme/spacing.stylex";
16
16
import { StyleXComponentProps } from "../theme/types";
···
18
18
19
19
const styles = stylex.create({
20
20
wrapper: {
21
+
gap: {
22
+
":is([data-orientation=vertical])": spacing["2"],
23
+
},
24
+
gridTemplateAreas: "'label value-label' 'track track'",
21
25
alignItems: {
22
26
":is([data-orientation=vertical])": "center",
23
27
},
···
28
32
flexDirection: {
29
33
":is([data-orientation=vertical])": "column",
30
34
},
31
-
gap: {
32
-
":is([data-orientation=vertical])": spacing["2"],
33
-
},
34
-
gridTemplateAreas: "'label value-label' 'track track'",
35
35
},
36
36
track: {
37
+
gridArea: "track",
37
38
flexGrow: {
38
39
":is([data-orientation=vertical] *)": 1,
39
40
},
40
-
gridArea: "track",
41
+
opacity: {
42
+
":is([data-disabled=true] *)": 0.5,
43
+
},
44
+
position: "relative",
41
45
height: {
42
46
":is([data-orientation=horizontal] *)": spacing["8"],
43
47
":is([data-orientation=horizontal] *)::before": spacing["1"],
44
48
":is([data-orientation=vertical] *)": "100%",
45
49
":is([data-orientation=vertical] *)::before": "100%",
46
50
},
47
-
opacity: {
48
-
":is([data-disabled=true] *)": 0.5,
49
-
},
50
-
position: "relative",
51
51
width: {
52
52
":is([data-orientation=horizontal] *)": "100%",
53
53
":is([data-orientation=horizontal] *)::before": "100%",
···
55
55
":is([data-orientation=vertical] *)::before": spacing["1"],
56
56
},
57
57
58
+
transform: {
59
+
":is([data-orientation=horizontal] *)::before": "translateY(-50%)",
60
+
":is([data-orientation=vertical] *)::before": "translateX(-50%)",
61
+
},
58
62
bottom: {
59
63
":is([data-orientation=vertical] *)::before": 0,
60
64
},
···
69
73
":is([data-orientation=horizontal] *)::before": "50%",
70
74
":is([data-orientation=vertical] *)::before": 0,
71
75
},
72
-
transform: {
73
-
":is([data-orientation=horizontal] *)::before": "translateY(-50%)",
74
-
":is([data-orientation=vertical] *)::before": "translateX(-50%)",
75
-
},
76
76
"::before": {
77
+
borderRadius: radius.full,
77
78
backgroundColor: uiColor.border1,
78
-
borderRadius: radius.full,
79
79
content: "''",
80
80
position: "absolute",
81
81
},
82
82
},
83
83
thumb: {
84
-
backgroundColor: {
85
-
default: uiColor.component1,
86
-
":hover": uiColor.component2,
87
-
":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3,
88
-
},
89
84
borderColor: uiColor.border1,
90
85
borderRadius: radius.full,
91
86
borderStyle: "solid",
92
87
borderWidth: 1,
88
+
backgroundColor: {
89
+
default: uiColor.component1,
90
+
":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3,
91
+
":hover": uiColor.component2,
92
+
},
93
93
boxShadow: shadow.md,
94
94
content: "''",
95
95
forcedColorAdjust: "none",
···
103
103
width: spacing["4"],
104
104
},
105
105
trackInner: {
106
+
borderRadius: radius.full,
106
107
backgroundColor: {
107
108
default: primaryColor.solid1,
108
109
":is([data-disabled=true] *)": uiColor.border3,
109
110
},
110
-
borderRadius: radius.full,
111
+
position: "absolute",
112
+
transform: {
113
+
":is([data-orientation=horizontal] *)": "translateY(-50%)",
114
+
":is([data-orientation=vertical] *)": "translateX(-50%)",
115
+
},
111
116
height: {
112
117
":is([data-orientation=horizontal] *)": spacing["1"],
113
118
":is([data-orientation=vertical] *)": "100%",
···
115
120
left: {
116
121
":is([data-orientation=vertical] *)": "50%",
117
122
},
118
-
position: "absolute",
119
123
top: {
120
124
":is([data-orientation=horizontal] *)": "50%",
121
-
},
122
-
transform: {
123
-
":is([data-orientation=horizontal] *)": "translateY(-50%)",
124
-
":is([data-orientation=vertical] *)": "translateX(-50%)",
125
125
},
126
126
width: {
127
127
":is([data-orientation=horizontal] *)": "100%",
···
163
163
},
164
164
},
165
165
valueLabel: {
166
+
gridArea: "value-label",
166
167
color: uiColor.text1,
167
168
fontSize: fontSize["sm"],
168
169
fontVariantNumeric: "tabular-nums",
169
-
gridArea: "value-label",
170
170
justifySelf: "flex-end",
171
171
lineHeight: lineHeight["sm"],
172
172
},
+1
-1
packages/hip-ui/src/components/switch/index.tsx
+1
-1
packages/hip-ui/src/components/switch/index.tsx
···
5
5
} from "react-aria-components";
6
6
7
7
import { animationDuration } from "../theme/animations.stylex";
8
+
import { primaryColor, uiColor } from "../theme/color.stylex";
8
9
import { radius } from "../theme/radius.stylex";
9
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
10
10
import { shadow } from "../theme/shadow.stylex";
11
11
import { spacing } from "../theme/spacing.stylex";
12
12
import { StyleXComponentProps } from "../theme/types";
+21
-21
packages/hip-ui/src/components/table/index.tsx
+21
-21
packages/hip-ui/src/components/table/index.tsx
···
25
25
import { SizeContext } from "../context";
26
26
import { Flex } from "../flex";
27
27
import { IconButton } from "../icon-button";
28
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
28
+
import { primaryColor, uiColor } from "../theme/color.stylex";
29
29
import { spacing } from "../theme/spacing.stylex";
30
30
import { Size, StyleXComponentProps } from "../theme/types";
31
31
import { LabelText } from "../typography";
···
42
42
},
43
43
},
44
44
column: {
45
+
padding: 0,
45
46
borderBottomColor: uiColor.border2,
46
47
borderBottomStyle: "solid",
47
48
borderBottomWidth: 1,
48
-
padding: 0,
49
49
},
50
50
columnHeader: {
51
51
alignItems: "center",
···
59
59
},
60
60
tableBody: {},
61
61
cell: {
62
+
overflow: "auto",
62
63
borderBottomColor: uiColor.border2,
63
64
borderBottomStyle: "solid",
64
65
borderBottomWidth: {
65
66
default: 1,
66
67
":is([role=row]:last-child *)": 0,
67
68
},
68
-
overflow: "auto",
69
69
},
70
70
cellContent: {
71
71
boxSizing: "border-box",
72
+
opacity: {
73
+
default: 1,
74
+
":is([aria-disabled=true] *)": 0.5,
75
+
},
76
+
textAlign: "left",
72
77
minHeight: {
73
78
default: spacing["8"],
74
-
":is([data-table-size=md] *)": spacing["10"],
75
79
":is([data-table-size=lg] *)": spacing["12"],
76
-
},
77
-
opacity: {
78
-
default: 1,
79
-
":is([aria-disabled=true] *)": 0.5,
80
+
":is([data-table-size=md] *)": spacing["10"],
80
81
},
81
82
paddingBottom: {
82
83
default: spacing["1"],
83
-
":is([data-table-size=md] *)": spacing["2"],
84
84
":is([data-table-size=lg] *)": spacing["3"],
85
+
":is([data-table-size=md] *)": spacing["2"],
85
86
},
86
87
paddingLeft: {
87
88
default: spacing["2"],
88
-
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
89
89
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
90
+
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
90
91
},
91
92
paddingRight: {
92
93
default: spacing["2"],
93
-
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
94
94
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
95
+
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
95
96
},
96
97
paddingTop: {
97
98
default: spacing["1"],
99
+
":is([data-table-size=lg] *)": spacing["3"],
98
100
":is([data-table-size=md] *)": spacing["2"],
99
-
":is([data-table-size=lg] *)": spacing["3"],
100
101
},
101
-
textAlign: "left",
102
102
},
103
103
textEllipsis: {
104
104
overflow: "hidden",
···
115
115
flexBasis: "auto",
116
116
flexGrow: 0,
117
117
flexShrink: 0,
118
+
position: "relative",
119
+
touchAction: "none",
118
120
marginBottom: {
119
121
default: `calc(${spacing["1"]} * -1)`,
122
+
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
120
123
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
121
-
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
122
124
},
123
125
marginTop: {
124
126
default: `calc(${spacing["1"]} * -1)`,
125
-
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
126
127
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
128
+
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
127
129
},
128
130
minHeight: {
129
131
default: spacing["8"],
130
-
":is([data-table-size=md] *)": spacing["10"],
131
132
":is([data-table-size=lg] *)": spacing["12"],
133
+
":is([data-table-size=md] *)": spacing["10"],
132
134
},
133
-
position: "relative",
134
-
touchAction: "none",
135
135
width: spacing["3"],
136
136
},
137
137
resizerLine: {
···
140
140
":is([data-hovered=true] *)": uiColor.border2,
141
141
":is([data-resizing=true] *)": uiColor.border3,
142
142
},
143
-
bottom: 0,
144
143
display: "block",
144
+
position: "absolute",
145
+
transform: "translateX(-50%)",
146
+
bottom: 0,
145
147
left: "50%",
146
-
position: "absolute",
147
148
top: 0,
148
-
transform: "translateX(-50%)",
149
149
width: spacing["0.5"],
150
150
},
151
151
dropIndicator: {
+1
-1
packages/hip-ui/src/components/tabs/index.tsx
+1
-1
packages/hip-ui/src/components/tabs/index.tsx
···
16
16
17
17
import { SizeContext } from "../context";
18
18
import { animationDuration } from "../theme/animations.stylex";
19
+
import { primaryColor, uiColor } from "../theme/color.stylex";
19
20
import { radius } from "../theme/radius.stylex";
20
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
21
21
import { spacing } from "../theme/spacing.stylex";
22
22
import { Size, StyleXComponentProps } from "../theme/types";
23
23
import { fontFamily, fontSize } from "../theme/typography.stylex";
+1
-1
packages/hip-ui/src/components/tag-group/index.tsx
+1
-1
packages/hip-ui/src/components/tag-group/index.tsx
···
12
12
13
13
import { Description, ErrorMessage, Label } from "../label";
14
14
import { animationDuration } from "../theme/animations.stylex";
15
+
import { primaryColor, uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { StyleXComponentProps } from "../theme/types";
19
19
import { typeramp } from "../theme/typography.stylex";
+2
-1
packages/hip-ui/src/components/text-area/index.tsx
+2
-1
packages/hip-ui/src/components/text-area/index.tsx
···
11
11
12
12
import { SizeContext } from "../context";
13
13
import { Description, FieldErrorMessage, Label } from "../label";
14
+
import { uiColor } from "../theme/color.stylex";
14
15
import { radius } from "../theme/radius.stylex";
15
-
import { ui, uiColor } from "../theme/semantic-color.stylex";
16
+
import { ui } from "../theme/semantic-color.stylex";
16
17
import { spacing } from "../theme/spacing.stylex";
17
18
import { Size, StyleXComponentProps } from "../theme/types";
18
19
import { lineHeight, fontSize, fontFamily } from "../theme/typography.stylex";
+103
packages/hip-ui/src/components/theme/color.stylex.tsx
+103
packages/hip-ui/src/components/theme/color.stylex.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { green } from "./colors/green.stylex";
4
+
import { orange } from "./colors/orange.stylex";
5
+
import { red } from "./colors/red.stylex";
6
+
import { slate, slateInverted } from "./colors/slate.stylex";
7
+
import { yellow } from "./colors/yellow.stylex";
8
+
9
+
export const uiColor = stylex.defineVars({
10
+
bg: slate.bg,
11
+
bgSubtle: slate.bgSubtle,
12
+
component1: slate.component1,
13
+
component2: slate.component2,
14
+
component3: slate.component3,
15
+
border1: slate.border1,
16
+
border2: slate.border2,
17
+
border3: slate.border3,
18
+
solid1: slate.solid1,
19
+
solid2: slate.solid2,
20
+
text1: slate.text1,
21
+
text2: slate.text2,
22
+
textContrast: "white",
23
+
});
24
+
25
+
export const uiInverted = stylex.defineVars({
26
+
bg: slateInverted.bg,
27
+
bgSubtle: slateInverted.bgSubtle,
28
+
component1: slateInverted.component1,
29
+
component2: slateInverted.component2,
30
+
component3: slateInverted.component3,
31
+
border1: slateInverted.border1,
32
+
border2: slateInverted.border2,
33
+
border3: slateInverted.border3,
34
+
solid1: slateInverted.solid1,
35
+
solid2: slateInverted.solid2,
36
+
text1: slateInverted.text1,
37
+
text2: slateInverted.text2,
38
+
textContrast: "white",
39
+
});
40
+
41
+
export const primaryColor = stylex.defineVars({
42
+
bg: orange.bg,
43
+
bgSubtle: orange.bgSubtle,
44
+
component1: orange.component1,
45
+
component2: orange.component2,
46
+
component3: orange.component3,
47
+
border1: orange.border1,
48
+
border2: orange.border2,
49
+
border3: orange.border3,
50
+
solid1: orange.solid1,
51
+
solid2: orange.solid2,
52
+
text1: orange.text1,
53
+
text2: orange.text2,
54
+
textContrast: "white",
55
+
});
56
+
57
+
export const criticalColor = stylex.defineVars({
58
+
bg: red.bg,
59
+
bgSubtle: red.bgSubtle,
60
+
component1: red.component1,
61
+
component2: red.component2,
62
+
component3: red.component3,
63
+
border1: red.border1,
64
+
border2: red.border2,
65
+
border3: red.border3,
66
+
solid1: red.solid1,
67
+
solid2: red.solid2,
68
+
text1: red.text1,
69
+
text2: red.text2,
70
+
textContrast: "white",
71
+
});
72
+
73
+
export const warningColor = stylex.defineVars({
74
+
bg: yellow.bg,
75
+
bgSubtle: yellow.bgSubtle,
76
+
component1: yellow.component1,
77
+
component2: yellow.component2,
78
+
component3: yellow.component3,
79
+
border1: yellow.border1,
80
+
border2: yellow.border2,
81
+
border3: yellow.border3,
82
+
solid1: yellow.solid1,
83
+
solid2: yellow.solid2,
84
+
text1: yellow.text1,
85
+
text2: yellow.text2,
86
+
textContrast: "black",
87
+
});
88
+
89
+
export const successColor = stylex.defineVars({
90
+
bg: green.bg,
91
+
bgSubtle: green.bgSubtle,
92
+
component1: green.component1,
93
+
component2: green.component2,
94
+
component3: green.component3,
95
+
border1: green.border1,
96
+
border2: green.border2,
97
+
border3: green.border3,
98
+
solid1: green.solid1,
99
+
solid2: green.solid2,
100
+
text1: green.text1,
101
+
text2: green.text2,
102
+
textContrast: "white",
103
+
});
+32
-130
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
+32
-130
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
···
1
-
/* eslint-disable @stylexjs/valid-styles */
2
-
3
1
import * as stylex from "@stylexjs/stylex";
4
2
3
+
import { animationDuration } from "./animations-duration.stylex";
4
+
import {
5
+
criticalColor,
6
+
primaryColor,
7
+
successColor,
8
+
uiColor,
9
+
warningColor,
10
+
} from "./color.stylex";
5
11
import { green } from "./colors/green.stylex";
6
-
import { orange } from "./colors/orange.stylex";
7
12
import { red } from "./colors/red.stylex";
8
-
import { slate, slateInverted } from "./colors/slate.stylex";
9
13
import { yellow } from "./colors/yellow.stylex";
10
14
import { fontFamily } from "./typography.stylex";
11
15
12
-
export const uiColor = stylex.defineVars({
13
-
bg: slate.bg,
14
-
bgSubtle: slate.bgSubtle,
15
-
component1: slate.component1,
16
-
component2: slate.component2,
17
-
component3: slate.component3,
18
-
border1: slate.border1,
19
-
border2: slate.border2,
20
-
border3: slate.border3,
21
-
solid1: slate.solid1,
22
-
solid2: slate.solid2,
23
-
text1: slate.text1,
24
-
text2: slate.text2,
25
-
textContrast: "white",
26
-
});
27
-
28
-
export const uiInverted = stylex.defineVars({
29
-
bg: slateInverted.bg,
30
-
bgSubtle: slateInverted.bgSubtle,
31
-
component1: slateInverted.component1,
32
-
component2: slateInverted.component2,
33
-
component3: slateInverted.component3,
34
-
border1: slateInverted.border1,
35
-
border2: slateInverted.border2,
36
-
border3: slateInverted.border3,
37
-
solid1: slateInverted.solid1,
38
-
solid2: slateInverted.solid2,
39
-
text1: slateInverted.text1,
40
-
text2: slateInverted.text2,
41
-
textContrast: "white",
42
-
});
43
-
44
16
// eslint-disable-next-line @stylexjs/enforce-extension
45
17
export const ui = stylex.create({
46
18
bg: { backgroundColor: uiColor.bg },
···
66
38
borderStyle: "solid",
67
39
borderWidth: 1,
68
40
69
-
transitionDuration: "100ms",
41
+
transitionDuration: animationDuration.fast,
70
42
transitionProperty: "background-color, border-color",
71
43
transitionTimingFunction: "ease-in-out",
72
44
},
···
83
55
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
84
56
":disabled": "transparent",
85
57
},
86
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
87
59
transitionProperty: "background-color, border-color",
88
60
transitionTimingFunction: "ease-in-out",
89
61
},
···
94
66
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
95
67
":disabled": uiColor.component1,
96
68
},
97
-
transitionDuration: "100ms",
69
+
transitionDuration: animationDuration.fast,
98
70
transitionProperty: "background-color, border-color",
99
71
transitionTimingFunction: "ease-in-out",
100
72
},
···
105
77
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
106
78
":disabled": uiColor.component1,
107
79
},
108
-
transitionDuration: "100ms",
80
+
transitionDuration: animationDuration.fast,
109
81
transitionProperty: "background-color, border-color",
110
82
transitionTimingFunction: "ease-in-out",
111
83
},
···
115
87
":hover:not(:has(* button:hover)):not(:disabled)": uiColor.solid2,
116
88
":disabled": uiColor.component1,
117
89
},
118
-
transitionDuration: "100ms",
90
+
transitionDuration: animationDuration.fast,
119
91
transitionProperty: "background-color, border-color",
120
92
transitionTimingFunction: "ease-in-out",
121
93
},
122
94
});
123
95
124
96
// eslint-disable-next-line @stylexjs/enforce-extension
125
-
export const primaryColor = stylex.defineVars({
126
-
bg: orange.bg,
127
-
bgSubtle: orange.bgSubtle,
128
-
component1: orange.component1,
129
-
component2: orange.component2,
130
-
component3: orange.component3,
131
-
border1: orange.border1,
132
-
border2: orange.border2,
133
-
border3: orange.border3,
134
-
solid1: orange.solid1,
135
-
solid2: orange.solid2,
136
-
text1: orange.text1,
137
-
text2: orange.text2,
138
-
textContrast: "white",
139
-
});
140
-
141
-
// eslint-disable-next-line @stylexjs/enforce-extension
142
97
export const primary = stylex.create({
143
98
bg: { backgroundColor: primaryColor.bg },
144
99
bgSubtle: { backgroundColor: primaryColor.bgSubtle },
···
163
118
borderStyle: "solid",
164
119
borderWidth: 1,
165
120
166
-
transitionDuration: "100ms",
121
+
transitionDuration: animationDuration.fast,
167
122
transitionProperty: "background-color, border-color",
168
123
transitionTimingFunction: "ease-in-out",
169
124
},
···
182
137
primaryColor.component3,
183
138
":disabled": primaryColor.component1,
184
139
},
185
-
transitionDuration: "100ms",
140
+
transitionDuration: animationDuration.fast,
186
141
transitionProperty: "background-color, border-color",
187
142
transitionTimingFunction: "ease-in-out",
188
143
},
···
194
149
":is(:active,[data-pressed=true])": primaryColor.component3,
195
150
":disabled": primaryColor.component1,
196
151
},
197
-
transitionDuration: "100ms",
152
+
transitionDuration: animationDuration.fast,
198
153
transitionProperty: "background-color, border-color",
199
154
transitionTimingFunction: "ease-in-out",
200
155
},
···
207
162
primaryColor.component3,
208
163
":disabled": primaryColor.component1,
209
164
},
210
-
transitionDuration: "100ms",
165
+
transitionDuration: animationDuration.fast,
211
166
transitionProperty: "background-color, border-color",
212
167
transitionTimingFunction: "ease-in-out",
213
168
},
···
217
172
":hover:not(:has(* button:hover)):not(:disabled)": primaryColor.solid2,
218
173
":disabled": primaryColor.component1,
219
174
},
220
-
transitionDuration: "100ms",
175
+
transitionDuration: animationDuration.fast,
221
176
transitionProperty: "background-color, border-color",
222
177
transitionTimingFunction: "ease-in-out",
223
178
},
224
179
});
225
180
226
181
// eslint-disable-next-line @stylexjs/enforce-extension
227
-
export const criticalColor = stylex.defineVars({
228
-
bg: red.bg,
229
-
bgSubtle: red.bgSubtle,
230
-
component1: red.component1,
231
-
component2: red.component2,
232
-
component3: red.component3,
233
-
border1: red.border1,
234
-
border2: red.border2,
235
-
border3: red.border3,
236
-
solid1: red.solid1,
237
-
solid2: red.solid2,
238
-
text1: red.text1,
239
-
text2: red.text2,
240
-
textContrast: "white",
241
-
});
242
-
243
-
// eslint-disable-next-line @stylexjs/enforce-extension
244
182
export const critical = stylex.create({
245
183
bg: { backgroundColor: criticalColor.bg },
246
184
bgSubtle: { backgroundColor: criticalColor.bgSubtle },
···
264
202
},
265
203
borderStyle: "solid",
266
204
borderWidth: 1,
267
-
transitionDuration: "100ms",
205
+
transitionDuration: animationDuration.fast,
268
206
transitionProperty: "background-color, border-color",
269
207
transitionTimingFunction: "ease-in-out",
270
208
},
···
283
221
criticalColor.component3,
284
222
":disabled": criticalColor.component1,
285
223
},
286
-
transitionDuration: "100ms",
224
+
transitionDuration: animationDuration.fast,
287
225
transitionProperty: "background-color, border-color",
288
226
transitionTimingFunction: "ease-in-out",
289
227
},
···
296
234
criticalColor.component3,
297
235
":disabled": criticalColor.component1,
298
236
},
299
-
transitionDuration: "100ms",
237
+
transitionDuration: animationDuration.fast,
300
238
transitionProperty: "background-color, border-color",
301
239
transitionTimingFunction: "ease-in-out",
302
240
},
···
309
247
criticalColor.component3,
310
248
":disabled": criticalColor.component1,
311
249
},
312
-
transitionDuration: "100ms",
250
+
transitionDuration: animationDuration.fast,
313
251
transitionProperty: "background-color, border-color",
314
252
transitionTimingFunction: "ease-in-out",
315
253
},
···
319
257
":hover:not(:has(* button:hover)):not(:disabled)": criticalColor.solid2,
320
258
":disabled": criticalColor.component1,
321
259
},
322
-
transitionDuration: "100ms",
260
+
transitionDuration: animationDuration.fast,
323
261
transitionProperty: "background-color, border-color",
324
262
transitionTimingFunction: "ease-in-out",
325
263
},
326
264
});
327
265
328
266
// eslint-disable-next-line @stylexjs/enforce-extension
329
-
export const warningColor = stylex.defineVars({
330
-
bg: yellow.bg,
331
-
bgSubtle: yellow.bgSubtle,
332
-
component1: yellow.component1,
333
-
component2: yellow.component2,
334
-
component3: yellow.component3,
335
-
border1: yellow.border1,
336
-
border2: yellow.border2,
337
-
border3: yellow.border3,
338
-
solid1: yellow.solid1,
339
-
solid2: yellow.solid2,
340
-
text1: yellow.text1,
341
-
text2: yellow.text2,
342
-
textContrast: "black",
343
-
});
344
-
345
-
// eslint-disable-next-line @stylexjs/enforce-extension
346
267
export const warning = stylex.create({
347
268
bg: { backgroundColor: warningColor.bg },
348
269
bgSubtle: { backgroundColor: warningColor.bgSubtle },
···
380
301
warningColor.component3,
381
302
":disabled": warningColor.component1,
382
303
},
383
-
transitionDuration: "100ms",
304
+
transitionDuration: animationDuration.fast,
384
305
transitionProperty: "background-color, border-color",
385
306
transitionTimingFunction: "ease-in-out",
386
307
},
···
392
313
":is(:active,[data-pressed=true]):not(:disabled)": yellow.component3,
393
314
":disabled": warningColor.component1,
394
315
},
395
-
transitionDuration: "100ms",
316
+
transitionDuration: animationDuration.fast,
396
317
transitionProperty: "background-color, border-color",
397
318
transitionTimingFunction: "ease-in-out",
398
319
},
···
405
326
warningColor.component3,
406
327
":disabled": warningColor.component1,
407
328
},
408
-
transitionDuration: "100ms",
329
+
transitionDuration: animationDuration.fast,
409
330
transitionProperty: "background-color, border-color",
410
331
transitionTimingFunction: "ease-in-out",
411
332
},
···
415
336
":hover:not(:has(* button:hover)):not(:disabled)": warningColor.solid2,
416
337
":disabled": warningColor.component1,
417
338
},
418
-
transitionDuration: "100ms",
339
+
transitionDuration: animationDuration.fast,
419
340
transitionProperty: "background-color, border-color",
420
341
transitionTimingFunction: "ease-in-out",
421
342
},
422
343
});
423
344
424
345
// eslint-disable-next-line @stylexjs/enforce-extension
425
-
export const successColor = stylex.defineVars({
426
-
bg: green.bg,
427
-
bgSubtle: green.bgSubtle,
428
-
component1: green.component1,
429
-
component2: green.component2,
430
-
component3: green.component3,
431
-
border1: green.border1,
432
-
border2: green.border2,
433
-
border3: green.border3,
434
-
solid1: green.solid1,
435
-
solid2: green.solid2,
436
-
text1: green.text1,
437
-
text2: green.text2,
438
-
textContrast: "white",
439
-
});
440
-
441
-
// eslint-disable-next-line @stylexjs/enforce-extension
442
346
export const success = stylex.create({
443
347
bg: { backgroundColor: successColor.bg },
444
348
bgSubtle: { backgroundColor: successColor.bgSubtle },
···
462
366
},
463
367
borderStyle: "solid",
464
368
borderWidth: 1,
465
-
transitionDuration: "100ms",
369
+
transitionDuration: animationDuration.fast,
466
370
transitionProperty: "background-color, border-color",
467
371
transitionTimingFunction: "ease-in-out",
468
372
},
···
481
385
successColor.component3,
482
386
":disabled": successColor.component1,
483
387
},
484
-
transitionDuration: "100ms",
388
+
transitionDuration: animationDuration.fast,
485
389
transitionProperty: "background-color, border-color",
486
390
transitionTimingFunction: "ease-in-out",
487
391
},
···
494
398
successColor.component3,
495
399
":disabled": successColor.component1,
496
400
},
497
-
transitionDuration: "100ms",
401
+
transitionDuration: animationDuration.fast,
498
402
transitionProperty: "background-color, border-color",
499
403
transitionTimingFunction: "ease-in-out",
500
404
},
···
507
411
successColor.component3,
508
412
":disabled": successColor.component1,
509
413
},
510
-
transitionDuration: "100ms",
414
+
transitionDuration: animationDuration.fast,
511
415
transitionProperty: "background-color, border-color",
512
416
transitionTimingFunction: "ease-in-out",
513
417
},
···
517
421
":hover:not(:has(* button:hover)):not(:disabled)": successColor.solid2,
518
422
":disabled": successColor.component1,
519
423
},
520
-
transitionDuration: "100ms",
424
+
transitionDuration: animationDuration.fast,
521
425
transitionProperty: "background-color, border-color",
522
426
transitionTimingFunction: "ease-in-out",
523
427
},
524
428
});
525
-
526
-
/* eslint-enable @stylexjs/valid-styles */
+2
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
+2
-1
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
7
7
import { SizeContext } from "../context";
8
8
import { Size, ButtonVariant } from "../theme/types";
9
9
import { animationDuration } from "./animations.stylex";
10
+
import { uiColor } from "./color.stylex";
10
11
import { radius } from "./radius.stylex";
11
-
import { critical, ui, primary, uiColor } from "./semantic-color.stylex";
12
+
import { critical, ui, primary } from "./semantic-color.stylex";
12
13
import { shadow } from "./shadow.stylex";
13
14
import { spacing } from "./spacing.stylex";
14
15
import {
+1
-1
packages/hip-ui/src/components/theme/useCalendarStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useCalendarStyles.ts
···
8
8
import type { StyleXComponentProps } from "../theme/types";
9
9
10
10
import { animationDuration } from "../theme/animations.stylex";
11
+
import { primaryColor, uiColor } from "../theme/color.stylex";
11
12
import { radius } from "../theme/radius.stylex";
12
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
13
import { spacing } from "../theme/spacing.stylex";
14
14
import { fontSize, fontWeight } from "./typography.stylex";
15
15
+3
-3
packages/hip-ui/src/components/theme/useInputStyles.ts
+3
-3
packages/hip-ui/src/components/theme/useInputStyles.ts
···
4
4
import { SizeContext } from "../context";
5
5
import { InputValidationState, InputVariant, Size } from "../theme/types";
6
6
import { animationDuration } from "./animations-duration.stylex";
7
-
import { radius } from "./radius.stylex";
8
7
import {
9
8
criticalColor,
10
9
successColor,
11
-
ui,
12
10
uiColor,
13
11
warningColor,
14
-
} from "./semantic-color.stylex";
12
+
} from "./color.stylex";
13
+
import { radius } from "./radius.stylex";
14
+
import { ui } from "./semantic-color.stylex";
15
15
import { spacing } from "./spacing.stylex";
16
16
import { lineHeight, fontSize } from "./typography.stylex";
17
17
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
11
11
typeramp,
12
12
} from "../theme/typography.stylex";
13
13
import { animationDuration } from "./animations.stylex";
14
-
import { criticalColor, primaryColor, uiColor } from "./semantic-color.stylex";
14
+
import { criticalColor, primaryColor, uiColor } from "./color.stylex";
15
15
16
16
const styles = stylex.create({
17
17
item: {
+25
-25
packages/hip-ui/src/components/toast/Toast.tsx
+25
-25
packages/hip-ui/src/components/toast/Toast.tsx
···
11
11
QueuedToast,
12
12
} from "react-aria-components";
13
13
14
+
import { Button } from "../button";
14
15
import { IconButton } from "../icon-button";
15
16
import {
16
17
criticalColor,
17
18
successColor,
18
19
uiColor,
19
20
warningColor,
20
-
} from "../theme/semantic-color.stylex";
21
+
} from "../theme/color.stylex";
21
22
import { spacing } from "../theme/spacing.stylex";
22
23
import { StyleXComponentProps } from "../theme/types";
23
24
import { lineHeight, typeramp } from "../theme/typography.stylex";
25
+
import { usePopoverStyles } from "../theme/usePopoverStyles";
24
26
import { toasts, ToastContentType } from "./queue";
25
-
import { usePopoverStyles } from "../theme/usePopoverStyles";
26
-
import { Button } from "../button";
27
27
28
28
const styles = stylex.create({
29
29
region: {
30
-
bottom: spacing["4"],
30
+
gap: spacing["2"],
31
+
outline: "none",
31
32
display: "flex",
32
33
flexDirection: "column-reverse",
33
-
gap: spacing["2"],
34
-
outline: "none",
35
34
position: "fixed",
35
+
zIndex: 9999,
36
+
bottom: spacing["4"],
36
37
right: spacing["4"],
37
-
zIndex: 9999,
38
38
},
39
39
toast: {
40
+
gap: spacing["4"],
41
+
alignItems: "center",
40
42
display: "flex",
41
43
flexDirection: "row",
42
-
alignItems: "center",
43
44
justifyContent: "space-between",
44
-
gap: spacing["4"],
45
+
minWidth: spacing["60"],
46
+
paddingBottom: spacing["3"],
45
47
paddingLeft: spacing["4"],
46
48
paddingRight: spacing["4"],
47
49
paddingTop: spacing["3"],
48
-
paddingBottom: spacing["3"],
49
-
minWidth: spacing["60"],
50
50
},
51
51
content: {
52
-
display: "flex",
53
52
flex: "1 1 auto",
54
-
flexDirection: "column",
55
53
gap: spacing["2.5"],
54
+
display: "flex",
55
+
flexDirection: "column",
56
56
minWidth: 0,
57
57
},
58
58
title: {
59
-
fontWeight: 600,
60
-
lineHeight: lineHeight["none"],
61
59
color: {
62
60
default: uiColor.text1,
63
61
":is([data-variant=critical] *)": criticalColor.textContrast,
64
62
":is([data-variant=success] *)": successColor.textContrast,
65
63
":is([data-variant=warning] *)": warningColor.text2,
66
64
},
65
+
fontWeight: 600,
66
+
lineHeight: lineHeight["none"],
67
67
},
68
68
description: {
69
69
color: {
···
74
74
},
75
75
},
76
76
icon: {
77
+
alignItems: "center",
77
78
display: "flex",
78
-
alignItems: "center",
79
+
flexShrink: 0,
79
80
justifyContent: "center",
80
-
flexShrink: 0,
81
81
82
82
":is(*) svg": {
83
-
flexShrink: 0,
84
-
height: spacing["4"],
85
-
pointerEvents: "none",
86
-
width: spacing["4"],
87
83
color: {
88
84
":is([data-variant=critical] *)": criticalColor.solid1,
89
85
":is([data-variant=success] *)": successColor.solid1,
90
86
":is([data-variant=warning] *)": warningColor.solid1,
91
87
},
88
+
flexShrink: 0,
89
+
pointerEvents: "none",
90
+
height: spacing["4"],
91
+
width: spacing["4"],
92
92
},
93
93
},
94
94
critical: {
95
-
backgroundColor: criticalColor.component1,
96
95
borderColor: criticalColor.border2,
96
+
backgroundColor: criticalColor.component1,
97
97
color: criticalColor.text2,
98
98
},
99
99
success: {
100
-
backgroundColor: successColor.component1,
101
100
borderColor: successColor.border2,
101
+
backgroundColor: successColor.component1,
102
102
color: successColor.text2,
103
103
},
104
104
warning: {
105
-
backgroundColor: warningColor.component1,
106
105
borderColor: warningColor.border2,
106
+
backgroundColor: warningColor.component1,
107
107
color: warningColor.text2,
108
108
},
109
109
});
···
123
123
toast.content.variant === "warning" && styles.warning,
124
124
)}
125
125
>
126
-
{toast.content.icon && (
126
+
{Boolean(toast.content.icon) && (
127
127
<div {...stylex.props(styles.icon)}>{toast.content.icon}</div>
128
128
)}
129
129
<ToastContent {...stylex.props(styles.content)}>
packages/hip-ui/src/components/toast/index.tsx
packages/hip-ui/src/components/toast/index.ts
packages/hip-ui/src/components/toast/index.tsx
packages/hip-ui/src/components/toast/index.ts
+2
packages/hip-ui/src/components/toast/queue.ts
+2
packages/hip-ui/src/components/toast/queue.ts
···
1
1
import { flushSync } from "react-dom";
2
2
import { ToastQueue } from "react-stately";
3
+
3
4
import { ButtonVariant, ToastVariant } from "../theme/types";
4
5
5
6
export interface ToastContentType {
···
19
20
wrapUpdate(fn) {
20
21
if ("startViewTransition" in document) {
21
22
document.startViewTransition(() => {
23
+
// eslint-disable-next-line @eslint-react/dom/no-flush-sync
22
24
flushSync(fn);
23
25
});
24
26
} else {
+3
-3
packages/hip-ui/src/components/toolbar/index.tsx
+3
-3
packages/hip-ui/src/components/toolbar/index.tsx
···
10
10
SeparatorProps as AriaSeparatorProps,
11
11
} from "react-aria-components";
12
12
13
-
import { uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
17
17
const styles = stylex.create({
18
18
toolbar: {
19
+
gap: spacing["1"],
19
20
display: "flex",
20
21
flexWrap: "wrap",
21
-
gap: spacing["1"],
22
22
},
23
23
horizontal: {
24
24
flexDirection: "row",
···
30
30
display: "contents",
31
31
},
32
32
separator: {
33
-
backgroundColor: uiColor.border2,
34
33
borderWidth: 0,
34
+
backgroundColor: uiColor.border2,
35
35
height: {
36
36
":is([data-orientation=vertical] *)": "1px",
37
37
},
+1
-1
packages/hip-ui/src/components/tooltip/index.tsx
+1
-1
packages/hip-ui/src/components/tooltip/index.tsx
···
10
10
} from "react-aria-components";
11
11
12
12
import { animationDuration } from "../theme/animations.stylex";
13
+
import { uiInverted } from "../theme/color.stylex";
13
14
import { radius } from "../theme/radius.stylex";
14
-
import { uiInverted } from "../theme/semantic-color.stylex";
15
15
import { shadow } from "../theme/shadow.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
+2
-1
packages/hip-ui/src/components/tree/index.tsx
+2
-1
packages/hip-ui/src/components/tree/index.tsx
···
14
14
import { Checkbox } from "../checkbox";
15
15
import { SizeContext } from "../context";
16
16
import { animationDuration } from "../theme/animations.stylex";
17
+
import { primaryColor } from "../theme/color.stylex";
17
18
import { radius } from "../theme/radius.stylex";
18
-
import { primaryColor, ui } from "../theme/semantic-color.stylex";
19
+
import { ui } from "../theme/semantic-color.stylex";
19
20
import { spacing } from "../theme/spacing.stylex";
20
21
import { Size, StyleXComponentProps } from "../theme/types";
21
22
import { useListBoxItemStyles } from "../theme/useListBoxItemStyles";
+1
-1
packages/hip-ui/src/components/typography/text.tsx
+1
-1
packages/hip-ui/src/components/typography/text.tsx
+5
-5
packages/hip-ui/src/components/window-splitter/index.tsx
+5
-5
packages/hip-ui/src/components/window-splitter/index.tsx
···
10
10
type PanelResizerProps,
11
11
} from "@window-splitter/react";
12
12
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
+
import { primaryColor, uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
···
37
37
},
38
38
position: "absolute",
39
39
40
+
transform: {
41
+
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
42
+
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
43
+
},
40
44
bottom: { ":is([data-handle-orientation='horizontal'] *)": 0 },
41
45
left: { ":is([data-handle-orientation='vertical'] *)": 0 },
42
46
right: { ":is([data-handle-orientation='vertical'] *)": 0 },
43
47
top: { ":is([data-handle-orientation='horizontal'] *)": 0 },
44
-
transform: {
45
-
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
46
-
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
47
-
},
48
48
49
49
height: {
50
50
":is([data-handle-orientation='horizontal'] *)": "100%",