A design system in a box.
hip-ui.tngl.io/docs/introduction
avatar
+1897
-729
+4
-1
.vscode/settings.json
+4
-1
.vscode/settings.json
+3
-4
README.md
+3
-4
README.md
···
18
18
19
19
- [ ] Alert / Callout
20
20
- [ ] Aspect Ratio
21
-
- [ ] Avatar
22
21
- [ ] Badge
23
22
- [ ] Carousel
24
23
- [ ] Empty
···
39
38
40
39
#### react-aria wrappers
41
40
42
-
- [ ] Dialog
43
-
44
41
- [ ] File Trigger
45
42
- [ ] File Drop zone
46
43
- [ ] Segmented Control
···
57
54
- [ ] Date Picker
58
55
- [ ] Range Date Picker
59
56
60
-
- [ ] Alert Dialog
61
57
- [ ] Drawer
62
58
- [ ] Sheet
63
59
···
81
77
- [ ] Toolbar
82
78
- [ ] Toast
83
79
80
+
- [x] Avatar
81
+
- [x] Alert Dialog
82
+
- [x] Dialog
84
83
- [x] Command
85
84
- [x] Tree
86
85
- [x] Combobox
+144
-6
apps/example/src/components/KitchenSink.tsx
+144
-6
apps/example/src/components/KitchenSink.tsx
···
87
87
import { ComboBox, ComboBoxItem } from "./combobox";
88
88
import { Tree, TreeItem } from "./tree";
89
89
import { DialogTrigger } from "react-aria-components";
90
+
import {
91
+
AlertDialog,
92
+
AlertDialogFooter,
93
+
} from "hip-ui/components/alert-dialog/index";
94
+
import {
95
+
AlertDialogActionButton,
96
+
AlertDialogCancelButton,
97
+
AlertDialogDescription,
98
+
AlertDialogHeader,
99
+
} from "./alert-dialog";
100
+
import {
101
+
Dialog,
102
+
DialogDescription,
103
+
DialogFooter,
104
+
DialogHeader,
105
+
} from "hip-ui/components/dialog/index";
106
+
import { Avatar } from "hip-ui/components/avatar/index";
90
107
91
108
const styles = stylex.create({
92
109
subCard: {
···
109
126
contextMenuArea: {
110
127
width: "100px",
111
128
height: "100px",
112
-
backgroundColor: slate[3],
129
+
backgroundColor: slate.component1,
113
130
padding: spacing["4"],
114
131
borderRadius: radius["md"],
115
132
borderWidth: 1,
116
133
borderStyle: "solid",
117
-
borderColor: slate[7],
134
+
borderColor: slate.border2,
118
135
},
119
136
tree: {
120
137
height: "300px",
···
229
246
</IconButton>
230
247
</ButtonGroup>
231
248
</Flex>
232
-
)
249
+
),
233
250
)}
234
251
235
252
<Flex gap="2">
···
538
555
</ToggleButtonGroup>
539
556
))}
540
557
</Flex>
541
-
)
558
+
),
542
559
)}
543
560
</Flex>
544
561
);
···
587
604
{...stylex.props(
588
605
typeramp.label,
589
606
styles.contextMenuArea,
590
-
gray.borderInteractive
607
+
gray.borderInteractive,
591
608
)}
592
609
>
593
610
Right Click me
···
672
689
);
673
690
}
674
691
692
+
function AlertDialogExample() {
693
+
return (
694
+
<Flex direction="column" gap="4">
695
+
<AlertDialog trigger={<Button>Noraml Alert Dialog</Button>}>
696
+
<AlertDialogHeader>Unauthenticated</AlertDialogHeader>
697
+
<AlertDialogDescription>
698
+
Please log in to continue.
699
+
</AlertDialogDescription>
700
+
<AlertDialogFooter>
701
+
<AlertDialogActionButton>Log In</AlertDialogActionButton>
702
+
</AlertDialogFooter>
703
+
</AlertDialog>
704
+
<AlertDialog trigger={<Button>Critical Alert Dialog</Button>}>
705
+
<AlertDialogHeader>Critical Alert Dialog</AlertDialogHeader>
706
+
<AlertDialogDescription>
707
+
This action is critical and cannot be undone.
708
+
</AlertDialogDescription>
709
+
<AlertDialogFooter>
710
+
<AlertDialogCancelButton />
711
+
<AlertDialogActionButton variant="critical">
712
+
Delete
713
+
</AlertDialogActionButton>
714
+
</AlertDialogFooter>
715
+
</AlertDialog>
716
+
</Flex>
717
+
);
718
+
}
719
+
720
+
function DialogExample() {
721
+
return (
722
+
<Flex direction="column" gap="4">
723
+
<Dialog trigger={<Button>Click me</Button>}>
724
+
<DialogHeader>Billing Information</DialogHeader>
725
+
<DialogDescription>
726
+
<Flex direction="column" gap="6">
727
+
<TextField label="Name on Card" placeholder="John Doe" />
728
+
<Flex direction="column" gap="3">
729
+
<Flex gap="3">
730
+
<TextField
731
+
label="Card Number"
732
+
placeholder="1234 5678 9012 3456"
733
+
style={styles.grow}
734
+
/>
735
+
<TextField label="CVV" placeholder="123" style={styles.grow} />
736
+
</Flex>
737
+
<SmallBody variant="secondary">
738
+
Enter your 16 digit number.
739
+
</SmallBody>
740
+
</Flex>
741
+
<Flex gap="3">
742
+
<Select label="Month" placeholder="MM" style={styles.grow}>
743
+
<SelectItem>01</SelectItem>
744
+
<SelectItem>02</SelectItem>
745
+
<SelectItem>03</SelectItem>
746
+
<SelectItem>04</SelectItem>
747
+
<SelectItem>05</SelectItem>
748
+
<SelectItem>06</SelectItem>
749
+
<SelectItem>07</SelectItem>
750
+
<SelectItem>08</SelectItem>
751
+
<SelectItem>09</SelectItem>
752
+
<SelectItem>10</SelectItem>
753
+
<SelectItem>11</SelectItem>
754
+
<SelectItem>12</SelectItem>
755
+
</Select>
756
+
<Select label="Year" placeholder="YYYY" style={styles.grow}>
757
+
<SelectItem>2025</SelectItem>
758
+
<SelectItem>2026</SelectItem>
759
+
<SelectItem>2027</SelectItem>
760
+
<SelectItem>2028</SelectItem>
761
+
<SelectItem>2029</SelectItem>
762
+
</Select>
763
+
</Flex>
764
+
<Separator />
765
+
<Flex direction="column" gap="4">
766
+
<Flex direction="column" gap="3">
767
+
<CardTitle>Billing Address</CardTitle>
768
+
<CardDescription>
769
+
The billing address associated with your payment method
770
+
</CardDescription>
771
+
</Flex>
772
+
<Checkbox>Same as shipping address</Checkbox>
773
+
</Flex>
774
+
<Separator />
775
+
<TextArea
776
+
label="Message"
777
+
placeholder="Add any additional comments"
778
+
rows={4}
779
+
/>
780
+
</Flex>
781
+
</DialogDescription>
782
+
<DialogFooter>
783
+
<Button slot="close">Cancel</Button>
784
+
<Button>Action</Button>
785
+
</DialogFooter>
786
+
</Dialog>
787
+
</Flex>
788
+
);
789
+
}
790
+
791
+
function AvatarExample() {
792
+
return (
793
+
<Flex direction="column" gap="4">
794
+
{[...buttonSizes, "xl" as const].map((size) => (
795
+
<Avatar
796
+
key={size}
797
+
size={size}
798
+
src="https://github.com/shadcn.png"
799
+
fallback="JD"
800
+
/>
801
+
))}
802
+
</Flex>
803
+
);
804
+
}
805
+
675
806
export function KitchenSink() {
807
+
return <AvatarExample />;
676
808
return (
677
809
<Flex
678
810
direction="column"
679
811
gap="10"
680
812
style={[gray.bg, gray.text, styles.container]}
681
813
>
814
+
<TitleCard title="Dialog">
815
+
<DialogExample />
816
+
</TitleCard>
817
+
<TitleCard title="Alert Dialog">
818
+
<AlertDialogExample />
819
+
</TitleCard>
682
820
<CommandMenuExample />
683
821
<TitleCard title="Tree">
684
822
<TreeExample />
···
710
848
Pin
711
849
</ToggleButton>
712
850
</Flex>
713
-
)
851
+
),
714
852
)}
715
853
</Flex>
716
854
))}
+174
apps/example/src/components/alert-dialog/index.tsx
+174
apps/example/src/components/alert-dialog/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { X } from "lucide-react";
5
+
import { use } from "react";
6
+
import { mergeProps } from "react-aria";
7
+
import {
8
+
DialogTrigger,
9
+
DialogTriggerProps,
10
+
Dialog as AriaDialog,
11
+
Modal,
12
+
ModalOverlay,
13
+
OverlayTriggerStateContext,
14
+
Heading,
15
+
} from "react-aria-components";
16
+
17
+
import { Button, ButtonProps } from "../button";
18
+
import { IconButton } from "../icon-button";
19
+
import { spacing } from "../theme/spacing.stylex";
20
+
import { typeramp } from "../theme/typography.stylex";
21
+
import { useDialogStyles } from "../theme/useDialogStyles";
22
+
23
+
const styles = stylex.create({
24
+
dialog: {
25
+
paddingBottom: spacing["2"],
26
+
paddingTop: spacing["2"],
27
+
},
28
+
header: {
29
+
alignItems: "center",
30
+
display: "flex",
31
+
gap: spacing["2"],
32
+
height: spacing["8"],
33
+
justifyContent: "space-between",
34
+
paddingLeft: spacing["4"],
35
+
paddingRight: spacing["4"],
36
+
},
37
+
description: {
38
+
paddingBottom: spacing["4"],
39
+
paddingLeft: spacing["4"],
40
+
paddingRight: spacing["4"],
41
+
paddingTop: spacing["4"],
42
+
},
43
+
footer: {
44
+
display: "flex",
45
+
gap: spacing["2"],
46
+
justifyContent: "flex-end",
47
+
paddingBottom: spacing["2"],
48
+
paddingLeft: spacing["4"],
49
+
paddingRight: spacing["4"],
50
+
},
51
+
});
52
+
53
+
export interface AlertDialogProps extends DialogTriggerProps {
54
+
trigger: React.ReactNode;
55
+
children: React.ReactNode;
56
+
}
57
+
58
+
export const AlertDialog = ({
59
+
trigger,
60
+
children,
61
+
defaultOpen,
62
+
isOpen,
63
+
onOpenChange,
64
+
}: AlertDialogProps) => {
65
+
const dialogStyles = useDialogStyles({ size: "sm" });
66
+
67
+
return (
68
+
<DialogTrigger
69
+
defaultOpen={defaultOpen}
70
+
isOpen={isOpen}
71
+
onOpenChange={onOpenChange}
72
+
>
73
+
{trigger}
74
+
75
+
<ModalOverlay
76
+
isKeyboardDismissDisabled
77
+
{...stylex.props(dialogStyles.overlay)}
78
+
>
79
+
<Modal {...stylex.props(dialogStyles.modal)}>
80
+
<AriaDialog
81
+
{...stylex.props(dialogStyles.dialog, styles.dialog)}
82
+
role="alertdialog"
83
+
>
84
+
{children}
85
+
</AriaDialog>
86
+
</Modal>
87
+
</ModalOverlay>
88
+
</DialogTrigger>
89
+
);
90
+
};
91
+
92
+
export interface AlertDialogHeaderProps
93
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
94
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
95
+
}
96
+
97
+
export const AlertDialogHeader = ({
98
+
children,
99
+
style,
100
+
}: AlertDialogHeaderProps) => {
101
+
return (
102
+
<div {...stylex.props(styles.header, typeramp.heading5, style)}>
103
+
<Heading>{children}</Heading>
104
+
<IconButton label="Close" size="sm" variant="tertiary" slot="close">
105
+
<X />
106
+
</IconButton>
107
+
</div>
108
+
);
109
+
};
110
+
111
+
export interface AlertDialogDescriptionProps
112
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
113
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
114
+
}
115
+
116
+
export const AlertDialogDescription = ({
117
+
children,
118
+
style,
119
+
}: AlertDialogDescriptionProps) => {
120
+
return (
121
+
<div {...stylex.props(styles.description, typeramp.body, style)}>
122
+
{children}
123
+
</div>
124
+
);
125
+
};
126
+
127
+
export interface AlertDialogFooterProps
128
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
129
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
130
+
}
131
+
132
+
export const AlertDialogFooter = ({
133
+
children,
134
+
style,
135
+
}: AlertDialogFooterProps) => {
136
+
return <div {...stylex.props(styles.footer, style)}>{children}</div>;
137
+
};
138
+
139
+
export type AlertDialogCancelButtonProps = Omit<ButtonProps, "slot">;
140
+
141
+
export const AlertDialogCancelButton = ({
142
+
children = "Cancel",
143
+
...props
144
+
}: AlertDialogCancelButtonProps) => {
145
+
return (
146
+
<Button variant="secondary" {...props} slot="close">
147
+
{children}
148
+
</Button>
149
+
);
150
+
};
151
+
152
+
export type AlertDialogActionButtonProps = ButtonProps & {
153
+
/**
154
+
* Whether to close the dialog when the button is pressed.
155
+
* If you are doing somthing async, you likely want to set this to false
156
+
* and use isLoading=true.
157
+
*/
158
+
closeOnPress?: boolean;
159
+
};
160
+
161
+
export const AlertDialogActionButton = ({
162
+
closeOnPress = true,
163
+
children = "Ok",
164
+
...props
165
+
}: AlertDialogActionButtonProps) => {
166
+
const state = use(OverlayTriggerStateContext);
167
+
const onPress = () => {
168
+
if (closeOnPress) {
169
+
state?.close();
170
+
}
171
+
};
172
+
173
+
return <Button {...mergeProps(props, { onPress })}>{children}</Button>;
174
+
};
+129
apps/example/src/components/avatar/index.tsx
+129
apps/example/src/components/avatar/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use, useLayoutEffect, useState } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { slate } from "../theme/colors.stylex";
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { spacing } from "../theme/spacing.stylex";
8
+
import {
9
+
fontSize,
10
+
fontWeight,
11
+
lineHeight,
12
+
fontFamily,
13
+
} from "../theme/typography.stylex";
14
+
import { Size } from "../types";
15
+
16
+
const styles = stylex.create({
17
+
wrapper: {
18
+
alignItems: "center",
19
+
backgroundColor: slate.component1,
20
+
borderColor: slate.border1,
21
+
borderStyle: "solid",
22
+
borderWidth: 1,
23
+
display: "flex",
24
+
justifyContent: "center",
25
+
overflow: "hidden",
26
+
},
27
+
sm: {
28
+
borderRadius: radius["sm"],
29
+
height: spacing["6"],
30
+
width: spacing["6"],
31
+
},
32
+
md: {
33
+
borderRadius: radius["md"],
34
+
height: spacing["8"],
35
+
width: spacing["8"],
36
+
},
37
+
lg: {
38
+
borderRadius: radius["lg"],
39
+
height: spacing["10"],
40
+
width: spacing["10"],
41
+
},
42
+
xl: {
43
+
borderRadius: radius["xl"],
44
+
height: spacing["12"],
45
+
width: spacing["12"],
46
+
},
47
+
image: {
48
+
height: "100%",
49
+
objectFit: "cover",
50
+
objectPosition: "center",
51
+
width: "100%",
52
+
},
53
+
fallback: {
54
+
color: slate.text1,
55
+
fontFamily: fontFamily["sans"],
56
+
fontWeight: fontWeight["medium"],
57
+
lineHeight: lineHeight["none"],
58
+
},
59
+
smFallback: {
60
+
fontSize: fontSize["sm"],
61
+
},
62
+
mdFallback: {
63
+
fontSize: fontSize["base"],
64
+
},
65
+
lgFallback: {
66
+
fontSize: fontSize["lg"],
67
+
},
68
+
xlFallback: {
69
+
fontSize: fontSize["xl"],
70
+
},
71
+
});
72
+
73
+
export interface AvatarProps
74
+
extends Omit<
75
+
React.ComponentProps<"div">,
76
+
"style" | "className" | "children"
77
+
> {
78
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
79
+
src: string;
80
+
alt?: string;
81
+
fallback: React.ReactNode;
82
+
size?: Size | "xl";
83
+
}
84
+
85
+
export function Avatar({
86
+
style,
87
+
alt = "",
88
+
src,
89
+
fallback,
90
+
size: sizeProp,
91
+
...props
92
+
}: AvatarProps) {
93
+
const size = sizeProp || use(SizeContext);
94
+
const [imageLoaded, setImageLoaded] = useState<
95
+
"loading" | "loaded" | "error"
96
+
>("loading");
97
+
98
+
useLayoutEffect(() => {
99
+
if (!src) return;
100
+
101
+
const onLoad = () => setImageLoaded("loaded");
102
+
const onError = () => setImageLoaded("error");
103
+
104
+
const image = new Image();
105
+
106
+
image.addEventListener("load", onLoad);
107
+
image.addEventListener("error", onError);
108
+
109
+
image.src = src;
110
+
111
+
return () => {
112
+
image.removeEventListener("load", onLoad);
113
+
image.removeEventListener("error", onError);
114
+
};
115
+
}, [src]);
116
+
117
+
return (
118
+
<div {...props} {...stylex.props(styles.wrapper, styles[size], style)}>
119
+
{imageLoaded === "loaded" && (
120
+
<img {...stylex.props(styles.image)} src={src} alt={alt} />
121
+
)}
122
+
{(!src || imageLoaded === "error") && (
123
+
<div {...stylex.props(styles.fallback, styles[`${size}Fallback`])}>
124
+
{fallback}
125
+
</div>
126
+
)}
127
+
</div>
128
+
);
129
+
}
+1
-1
apps/example/src/components/checkbox/index.tsx
+1
-1
apps/example/src/components/checkbox/index.tsx
+138
apps/example/src/components/dialog/index.tsx
+138
apps/example/src/components/dialog/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { X } from "lucide-react";
5
+
import {
6
+
DialogTrigger,
7
+
DialogTriggerProps,
8
+
Dialog as AriaDialog,
9
+
Modal,
10
+
ModalOverlay,
11
+
Heading,
12
+
} from "react-aria-components";
13
+
14
+
import { IconButton } from "../icon-button";
15
+
import { slate } from "../theme/colors.stylex";
16
+
import { spacing } from "../theme/spacing.stylex";
17
+
import { typeramp } from "../theme/typography.stylex";
18
+
import { useDialogStyles } from "../theme/useDialogStyles";
19
+
import { Size } from "../types";
20
+
21
+
const styles = stylex.create({
22
+
dialog: {
23
+
paddingBottom: spacing["2"],
24
+
paddingTop: spacing["2"],
25
+
},
26
+
header: {
27
+
alignItems: "center",
28
+
display: "flex",
29
+
gap: spacing["2"],
30
+
height: spacing["8"],
31
+
justifyContent: "space-between",
32
+
paddingBottom: spacing["2"],
33
+
paddingLeft: spacing["4"],
34
+
paddingRight: spacing["4"],
35
+
36
+
borderBottomColor: slate.border1,
37
+
borderBottomStyle: "solid",
38
+
borderBottomWidth: 1,
39
+
},
40
+
description: {
41
+
paddingBottom: spacing["4"],
42
+
paddingLeft: spacing["4"],
43
+
paddingRight: spacing["4"],
44
+
paddingTop: spacing["4"],
45
+
},
46
+
footer: {
47
+
display: "flex",
48
+
gap: spacing["2"],
49
+
justifyContent: "flex-end",
50
+
paddingBottom: spacing["2"],
51
+
paddingLeft: spacing["4"],
52
+
paddingRight: spacing["4"],
53
+
paddingTop: spacing["4"],
54
+
55
+
borderTopColor: slate.border1,
56
+
borderTopStyle: "solid",
57
+
borderTopWidth: 1,
58
+
},
59
+
});
60
+
61
+
export interface DialogProps extends DialogTriggerProps {
62
+
trigger: React.ReactNode;
63
+
children: React.ReactNode;
64
+
size?: Size;
65
+
}
66
+
67
+
export const Dialog = ({
68
+
trigger,
69
+
children,
70
+
defaultOpen,
71
+
isOpen,
72
+
onOpenChange,
73
+
size,
74
+
}: DialogProps) => {
75
+
const dialogStyles = useDialogStyles({ size });
76
+
77
+
return (
78
+
<DialogTrigger
79
+
defaultOpen={defaultOpen}
80
+
isOpen={isOpen}
81
+
onOpenChange={onOpenChange}
82
+
>
83
+
{trigger}
84
+
85
+
<ModalOverlay
86
+
isKeyboardDismissDisabled
87
+
{...stylex.props(dialogStyles.overlay)}
88
+
>
89
+
<Modal {...stylex.props(dialogStyles.modal)}>
90
+
<AriaDialog {...stylex.props(dialogStyles.dialog, styles.dialog)}>
91
+
{children}
92
+
</AriaDialog>
93
+
</Modal>
94
+
</ModalOverlay>
95
+
</DialogTrigger>
96
+
);
97
+
};
98
+
99
+
export interface DialogHeaderProps
100
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
101
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
102
+
}
103
+
104
+
export const DialogHeader = ({ children, style }: DialogHeaderProps) => {
105
+
return (
106
+
<div {...stylex.props(styles.header, typeramp.heading5, style)}>
107
+
<Heading>{children}</Heading>
108
+
<IconButton label="Close" size="sm" variant="tertiary" slot="close">
109
+
<X />
110
+
</IconButton>
111
+
</div>
112
+
);
113
+
};
114
+
115
+
export interface DialogDescriptionProps
116
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
117
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
+
}
119
+
120
+
export const DialogDescription = ({
121
+
children,
122
+
style,
123
+
}: DialogDescriptionProps) => {
124
+
return (
125
+
<div {...stylex.props(styles.description, typeramp.body, style)}>
126
+
{children}
127
+
</div>
128
+
);
129
+
};
130
+
131
+
export interface DialogFooterProps
132
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
133
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
134
+
}
135
+
136
+
export const DialogFooter = ({ children, style }: DialogFooterProps) => {
137
+
return <div {...stylex.props(styles.footer, style)}>{children}</div>;
138
+
};
+2
-2
apps/example/src/components/link/index.tsx
+2
-2
apps/example/src/components/link/index.tsx
+2
-2
apps/example/src/components/number-field/index.tsx
+2
-2
apps/example/src/components/number-field/index.tsx
+2
-2
apps/example/src/components/popover/index.tsx
+2
-2
apps/example/src/components/popover/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
wrapper: {
19
-
filter: `drop-shadow(-0.5px -0.5px 0 ${slate[7]}) drop-shadow(0.5px -0.5px 0 ${slate[7]}) drop-shadow(0.5px 0.5px 0 ${slate[7]}) drop-shadow(-0.5px 0.5px 0 ${slate[7]}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
19
+
filter: `drop-shadow(-0.5px -0.5px 0 ${slate.border2}) drop-shadow(0.5px -0.5px 0 ${slate.border2}) drop-shadow(0.5px 0.5px 0 ${slate.border2}) drop-shadow(-0.5px 0.5px 0 ${slate.border2}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
20
20
},
21
21
content: {
22
22
borderWidth: 0,
···
29
29
},
30
30
caret: {},
31
31
arrow: {
32
-
backgroundColor: slate[2],
32
+
backgroundColor: slate.bg2,
33
33
height: spacing["2"],
34
34
transform: {
35
35
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
+1
-1
apps/example/src/components/separator/index.tsx
+1
-1
apps/example/src/components/separator/index.tsx
+4
-4
apps/example/src/components/text-area/index.tsx
+4
-4
apps/example/src/components/text-area/index.tsx
···
55
55
display: "flex",
56
56
57
57
borderColor: {
58
-
default: slate[7],
59
-
":hover": slate[8],
60
-
":focus": slate[9],
58
+
default: slate.border2,
59
+
":hover": slate.border3,
60
+
":focus": slate.solid1,
61
61
},
62
62
borderStyle: "solid",
63
63
borderWidth: 1,
···
67
67
borderWidth: 0,
68
68
boxSizing: "border-box",
69
69
color: {
70
-
"::placeholder": slate[11],
70
+
"::placeholder": slate.text1,
71
71
},
72
72
flexGrow: 1,
73
73
fontFamily: fontFamily["sans"],
+156
-156
apps/example/src/components/theme/colors.stylex.tsx
+156
-156
apps/example/src/components/theme/colors.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
export const slateLight = stylex.defineVars({
4
-
1: stylex.types.color("#fcfcfd"),
5
-
2: stylex.types.color("#f9f9fb"),
6
-
3: stylex.types.color("#f0f0f3"),
7
-
4: stylex.types.color("#e8e8ec"),
8
-
5: stylex.types.color("#e0e1e6"),
9
-
6: stylex.types.color("#d9d9e0"),
10
-
7: stylex.types.color("#cdced6"),
11
-
8: stylex.types.color("#b9bbc6"),
12
-
9: stylex.types.color("#8b8d98"),
13
-
10: stylex.types.color("#80838d"),
14
-
11: stylex.types.color("#60646c"),
15
-
12: stylex.types.color("#1c2024"),
4
+
bg1: stylex.types.color("#fcfcfd"),
5
+
bg2: stylex.types.color("#f9f9fb"),
6
+
component1: stylex.types.color("#f0f0f3"),
7
+
component2: stylex.types.color("#e8e8ec"),
8
+
component3: stylex.types.color("#e0e1e6"),
9
+
border1: stylex.types.color("#d9d9e0"),
10
+
border2: stylex.types.color("#cdced6"),
11
+
border3: stylex.types.color("#b9bbc6"),
12
+
solid1: stylex.types.color("#8b8d98"),
13
+
solid2: stylex.types.color("#80838d"),
14
+
text1: stylex.types.color("#60646c"),
15
+
text2: stylex.types.color("#1c2024"),
16
16
});
17
17
18
18
export const slateLightP3 = stylex.defineVars({
19
-
1: stylex.types.color("color(display-p3 0.988 0.988 0.992)"),
20
-
2: stylex.types.color("color(display-p3 0.976 0.976 0.984)"),
21
-
3: stylex.types.color("color(display-p3 0.94 0.941 0.953)"),
22
-
4: stylex.types.color("color(display-p3 0.908 0.909 0.925)"),
23
-
5: stylex.types.color("color(display-p3 0.88 0.881 0.901)"),
24
-
6: stylex.types.color("color(display-p3 0.85 0.852 0.876)"),
25
-
7: stylex.types.color("color(display-p3 0.805 0.808 0.838)"),
26
-
8: stylex.types.color("color(display-p3 0.727 0.733 0.773)"),
27
-
9: stylex.types.color("color(display-p3 0.547 0.553 0.592)"),
28
-
10: stylex.types.color("color(display-p3 0.503 0.512 0.549)"),
29
-
11: stylex.types.color("color(display-p3 0.379 0.392 0.421)"),
30
-
12: stylex.types.color("color(display-p3 0.113 0.125 0.14)"),
19
+
bg1: stylex.types.color("color(display-p3 0.988 0.988 0.992)"),
20
+
bg2: stylex.types.color("color(display-p3 0.976 0.976 0.984)"),
21
+
component1: stylex.types.color("color(display-p3 0.94 0.941 0.953)"),
22
+
component2: stylex.types.color("color(display-p3 0.908 0.909 0.925)"),
23
+
component3: stylex.types.color("color(display-p3 0.88 0.881 0.901)"),
24
+
border1: stylex.types.color("color(display-p3 0.85 0.852 0.876)"),
25
+
border2: stylex.types.color("color(display-p3 0.805 0.808 0.838)"),
26
+
border3: stylex.types.color("color(display-p3 0.727 0.733 0.773)"),
27
+
solid1: stylex.types.color("color(display-p3 0.547 0.553 0.592)"),
28
+
solid2: stylex.types.color("color(display-p3 0.503 0.512 0.549)"),
29
+
text1: stylex.types.color("color(display-p3 0.379 0.392 0.421)"),
30
+
text2: stylex.types.color("color(display-p3 0.113 0.125 0.14)"),
31
31
});
32
32
33
33
export const slateDark = stylex.defineVars({
34
-
1: stylex.types.color("#111113"),
35
-
2: stylex.types.color("#18191b"),
36
-
3: stylex.types.color("#212225"),
37
-
4: stylex.types.color("#272a2d"),
38
-
5: stylex.types.color("#2e3135"),
39
-
6: stylex.types.color("#363a3f"),
40
-
7: stylex.types.color("#43484e"),
41
-
8: stylex.types.color("#5a6169"),
42
-
9: stylex.types.color("#696e77"),
43
-
10: stylex.types.color("#777b84"),
44
-
11: stylex.types.color("#b0b4ba"),
45
-
12: stylex.types.color("#edeef0"),
34
+
bg1: stylex.types.color("#111113"),
35
+
bg2: stylex.types.color("#18191b"),
36
+
component1: stylex.types.color("#212225"),
37
+
component2: stylex.types.color("#272a2d"),
38
+
component3: stylex.types.color("#2e3135"),
39
+
border1: stylex.types.color("#363a3f"),
40
+
border2: stylex.types.color("#43484e"),
41
+
border3: stylex.types.color("#5a6169"),
42
+
solid1: stylex.types.color("#696e77"),
43
+
solid2: stylex.types.color("#777b84"),
44
+
text1: stylex.types.color("#b0b4ba"),
45
+
text2: stylex.types.color("#edeef0"),
46
46
});
47
47
48
48
export const slateDarkP3 = stylex.defineVars({
49
-
1: stylex.types.color("color(display-p3 0.067 0.067 0.074)"),
50
-
2: stylex.types.color("color(display-p3 0.095 0.098 0.105)"),
51
-
3: stylex.types.color("color(display-p3 0.13 0.135 0.145)"),
52
-
4: stylex.types.color("color(display-p3 0.156 0.163 0.176)"),
53
-
5: stylex.types.color("color(display-p3 0.183 0.191 0.206)"),
54
-
6: stylex.types.color("color(display-p3 0.215 0.226 0.244)"),
55
-
7: stylex.types.color("color(display-p3 0.265 0.28 0.302)"),
56
-
8: stylex.types.color("color(display-p3 0.357 0.381 0.409)"),
57
-
9: stylex.types.color("color(display-p3 0.415 0.431 0.463)"),
58
-
10: stylex.types.color("color(display-p3 0.469 0.483 0.514)"),
59
-
11: stylex.types.color("color(display-p3 0.692 0.704 0.728)"),
60
-
12: stylex.types.color("color(display-p3 0.93 0.933 0.94)"),
49
+
bg1: stylex.types.color("color(display-p3 0.067 0.067 0.074)"),
50
+
bg2: stylex.types.color("color(display-p3 0.095 0.098 0.105)"),
51
+
component1: stylex.types.color("color(display-p3 0.13 0.135 0.145)"),
52
+
component2: stylex.types.color("color(display-p3 0.156 0.163 0.176)"),
53
+
component3: stylex.types.color("color(display-p3 0.183 0.191 0.206)"),
54
+
border1: stylex.types.color("color(display-p3 0.215 0.226 0.244)"),
55
+
border2: stylex.types.color("color(display-p3 0.265 0.28 0.302)"),
56
+
border3: stylex.types.color("color(display-p3 0.357 0.381 0.409)"),
57
+
solid1: stylex.types.color("color(display-p3 0.415 0.431 0.463)"),
58
+
solid2: stylex.types.color("color(display-p3 0.469 0.483 0.514)"),
59
+
text1: stylex.types.color("color(display-p3 0.692 0.704 0.728)"),
60
+
text2: stylex.types.color("color(display-p3 0.93 0.933 0.94)"),
61
61
});
62
62
63
63
export const slate = stylex.defineVars({
64
-
1: {
65
-
default: `light-dark(${slateLight[1]}, ${slateDark[1]})`,
66
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[1]}, ${slateDarkP3[1]})`,
64
+
bg1: {
65
+
default: `light-dark(${slateLight.bg1}, ${slateDark.bg1})`,
66
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.bg1}, ${slateDarkP3.bg1})`,
67
67
},
68
-
2: {
69
-
default: `light-dark(${slateLight[2]}, ${slateDark[2]})`,
70
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[2]}, ${slateDarkP3[2]})`,
68
+
bg2: {
69
+
default: `light-dark(${slateLight.bg2}, ${slateDark.bg2})`,
70
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.bg2}, ${slateDarkP3.bg2})`,
71
71
},
72
-
3: {
73
-
default: `light-dark(${slateLight[3]}, ${slateDark[3]})`,
74
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[3]}, ${slateDarkP3[3]})`,
72
+
component1: {
73
+
default: `light-dark(${slateLight.component1}, ${slateDark.component1})`,
74
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component1}, ${slateDarkP3.component1})`,
75
75
},
76
-
4: {
77
-
default: `light-dark(${slateLight[4]}, ${slateDark[4]})`,
78
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[4]}, ${slateDarkP3[4]})`,
76
+
component2: {
77
+
default: `light-dark(${slateLight.component2}, ${slateDark.component2})`,
78
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component2}, ${slateDarkP3.component2})`,
79
79
},
80
-
5: {
81
-
default: `light-dark(${slateLight[5]}, ${slateDark[5]})`,
82
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[5]}, ${slateDarkP3[5]})`,
80
+
component3: {
81
+
default: `light-dark(${slateLight.component3}, ${slateDark.component3})`,
82
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component3}, ${slateDarkP3.component3})`,
83
83
},
84
-
6: {
85
-
default: `light-dark(${slateLight[6]}, ${slateDark[6]})`,
86
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[6]}, ${slateDarkP3[6]})`,
84
+
border1: {
85
+
default: `light-dark(${slateLight.border1}, ${slateDark.border1})`,
86
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border1}, ${slateDarkP3.border1})`,
87
87
},
88
-
7: {
89
-
default: `light-dark(${slateLight[7]}, ${slateDark[7]})`,
90
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[7]}, ${slateDarkP3[7]})`,
88
+
border2: {
89
+
default: `light-dark(${slateLight.border2}, ${slateDark.border2})`,
90
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border2}, ${slateDarkP3.border2})`,
91
91
},
92
-
8: {
93
-
default: `light-dark(${slateLight[8]}, ${slateDark[8]})`,
94
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[8]}, ${slateDarkP3[8]})`,
92
+
border3: {
93
+
default: `light-dark(${slateLight.border3}, ${slateDark.border3})`,
94
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border3}, ${slateDarkP3.border3})`,
95
95
},
96
-
9: {
97
-
default: `light-dark(${slateLight[9]}, ${slateDark[9]})`,
98
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[9]}, ${slateDarkP3[9]})`,
96
+
solid1: {
97
+
default: `light-dark(${slateLight.solid1}, ${slateDark.solid1})`,
98
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.solid1}, ${slateDarkP3.solid1})`,
99
99
},
100
-
10: {
101
-
default: `light-dark(${slateLight[10]}, ${slateDark[10]})`,
102
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[10]}, ${slateDarkP3[10]})`,
100
+
solid2: {
101
+
default: `light-dark(${slateLight.solid2}, ${slateDark.solid2})`,
102
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.solid2}, ${slateDarkP3.solid2})`,
103
103
},
104
-
11: {
105
-
default: `light-dark(${slateLight[11]}, ${slateDark[11]})`,
106
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[11]}, ${slateDarkP3[11]})`,
104
+
text1: {
105
+
default: `light-dark(${slateLight.text1}, ${slateDark.text1})`,
106
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.text1}, ${slateDarkP3.text1})`,
107
107
},
108
-
12: {
109
-
default: `light-dark(${slateLight[12]}, ${slateDark[12]})`,
110
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[12]}, ${slateDarkP3[12]})`,
108
+
text2: {
109
+
default: `light-dark(${slateLight.text2}, ${slateDark.text2})`,
110
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.text2}, ${slateDarkP3.text2})`,
111
111
},
112
112
});
113
113
114
114
export const slateInverted = stylex.defineVars({
115
-
1: {
116
-
default: `light-dark(${slateDark[1]}, ${slateLight[1]})`,
117
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[1]}, ${slateLightP3[1]})`,
115
+
bg1: {
116
+
default: `light-dark(${slateDark.bg1}, ${slateLight.bg1})`,
117
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.bg1}, ${slateLightP3.bg1})`,
118
118
},
119
-
2: {
120
-
default: `light-dark(${slateDark[2]}, ${slateLight[2]})`,
121
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[2]}, ${slateLightP3[2]})`,
119
+
bg2: {
120
+
default: `light-dark(${slateDark.bg2}, ${slateLight.bg2})`,
121
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.bg2}, ${slateLightP3.bg2})`,
122
122
},
123
-
3: {
124
-
default: `light-dark(${slateDark[3]}, ${slateLight[3]})`,
125
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[3]}, ${slateLightP3[3]})`,
123
+
component1: {
124
+
default: `light-dark(${slateDark.component1}, ${slateLight["component1"]})`,
125
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component1}, ${slateLightP3.component1})`,
126
126
},
127
-
4: {
128
-
default: `light-dark(${slateDark[4]}, ${slateLight[4]})`,
129
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[4]}, ${slateLightP3[4]})`,
127
+
component2: {
128
+
default: `light-dark(${slateDark.component2}, ${slateLight["component2"]})`,
129
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component2}, ${slateLightP3.component2})`,
130
130
},
131
-
5: {
132
-
default: `light-dark(${slateDark[5]}, ${slateLight[5]})`,
133
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[5]}, ${slateLightP3[5]})`,
131
+
component3: {
132
+
default: `light-dark(${slateDark.component3}, ${slateLight["component3"]})`,
133
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component3}, ${slateLightP3.component3})`,
134
134
},
135
-
6: {
136
-
default: `light-dark(${slateDark[6]}, ${slateLight[6]})`,
137
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[6]}, ${slateLightP3[6]})`,
135
+
border1: {
136
+
default: `light-dark(${slateDark.border1}, ${slateLight.border1})`,
137
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border1}, ${slateLightP3.border1})`,
138
138
},
139
-
7: {
140
-
default: `light-dark(${slateDark[7]}, ${slateLight[7]})`,
141
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[7]}, ${slateLightP3[7]})`,
139
+
border2: {
140
+
default: `light-dark(${slateDark.border2}, ${slateLight.border2})`,
141
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border2}, ${slateLightP3.border2})`,
142
142
},
143
-
8: {
144
-
default: `light-dark(${slateDark[8]}, ${slateLight[8]})`,
145
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[8]}, ${slateLightP3[8]})`,
143
+
border3: {
144
+
default: `light-dark(${slateDark.border3}, ${slateLight.border3})`,
145
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border3}, ${slateLightP3.border3})`,
146
146
},
147
-
9: {
148
-
default: `light-dark(${slateDark[9]}, ${slateLight[9]})`,
149
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[9]}, ${slateLightP3[9]})`,
147
+
solid1: {
148
+
default: `light-dark(${slateDark.solid1}, ${slateLight.solid1})`,
149
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.solid1}, ${slateLightP3.solid1})`,
150
150
},
151
-
10: {
152
-
default: `light-dark(${slateDark[10]}, ${slateLight[10]})`,
153
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[10]}, ${slateLightP3[10]})`,
151
+
solid2: {
152
+
default: `light-dark(${slateDark.solid2}, ${slateLight.solid2})`,
153
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.solid2}, ${slateLightP3.solid2})`,
154
154
},
155
-
11: {
156
-
default: `light-dark(${slateDark[11]}, ${slateLight[11]})`,
157
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[11]}, ${slateLightP3[11]})`,
155
+
text1: {
156
+
default: `light-dark(${slateDark.text1}, ${slateLight.text1})`,
157
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.text1}, ${slateLightP3.text1})`,
158
158
},
159
-
12: {
160
-
default: `light-dark(${slateDark[12]}, ${slateLight[12]})`,
161
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[12]}, ${slateLightP3[12]})`,
159
+
text2: {
160
+
default: `light-dark(${slateDark.text2}, ${slateLight.text2})`,
161
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.text2}, ${slateLightP3.text2})`,
162
162
},
163
163
});
164
164
165
165
export const plum = stylex.defineVars({
166
-
1: {
166
+
bg1: {
167
167
default: "light-dark(#fefcff, #181118)",
168
168
"@media (color-gamut: p3)":
169
169
"light-dark(color(display-p3 0.995 0.988 0.999), color(display-p3 0.09 0.068 0.092))",
170
170
},
171
-
2: {
171
+
bg2: {
172
172
default: "light-dark(#fdf7fd, #201320)",
173
173
"@media (color-gamut: p3)":
174
174
"light-dark(color(display-p3 0.988 0.971 0.99), color(display-p3 0.118 0.077 0.121))",
175
175
},
176
-
3: {
176
+
component1: {
177
177
default: "light-dark(#fbebfb, #351a35)",
178
178
"@media (color-gamut: p3)":
179
179
"light-dark(color(display-p3 0.973 0.923 0.98), color(display-p3 0.192 0.105 0.202))",
180
180
},
181
-
4: {
181
+
component2: {
182
182
default: "light-dark(#f7def8, #451d47)",
183
183
"@media (color-gamut: p3)":
184
184
"light-dark(color(display-p3 0.953 0.875 0.966), color(display-p3 0.25 0.121 0.271))",
185
185
},
186
-
5: {
186
+
component3: {
187
187
default: "light-dark(#f2d1f3, #512454)",
188
188
"@media (color-gamut: p3)":
189
189
"light-dark(color(display-p3 0.926 0.825 0.945), color(display-p3 0.293 0.152 0.319))",
190
190
},
191
-
6: {
191
+
border1: {
192
192
default: "light-dark(#e9c2ec, #5e3061)",
193
193
"@media (color-gamut: p3)":
194
194
"light-dark(color(display-p3 0.89 0.765 0.916), color(display-p3 0.343 0.198 0.372))",
195
195
},
196
-
7: {
196
+
border2: {
197
197
default: "light-dark(#deade3, #734079)",
198
198
"@media (color-gamut: p3)":
199
199
"light-dark(color(display-p3 0.84 0.686 0.877), color(display-p3 0.424 0.262 0.461))",
200
200
},
201
-
8: {
201
+
border3: {
202
202
default: "light-dark(#cf91d8, #92549c)",
203
203
"@media (color-gamut: p3)":
204
204
"light-dark(color(display-p3 0.775 0.58 0.832), color(display-p3 0.54 0.341 0.595))",
205
205
},
206
-
9: {
206
+
solid1: {
207
207
default: "light-dark(#ab4aba, #ab4aba)",
208
208
"@media (color-gamut: p3)":
209
209
"light-dark(color(display-p3 0.624 0.313 0.708), color(display-p3 0.624 0.313 0.708))",
210
210
},
211
-
10: {
211
+
solid2: {
212
212
default: "light-dark(#a144af, #b658c4)",
213
213
"@media (color-gamut: p3)":
214
214
"light-dark(color(display-p3 0.587 0.29 0.667), color(display-p3 0.666 0.365 0.748))",
215
215
},
216
-
11: {
216
+
text1: {
217
217
default: "light-dark(#953ea3, #e796f3)",
218
218
"@media (color-gamut: p3)":
219
219
"light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933))",
220
220
},
221
-
12: {
221
+
text2: {
222
222
default: "light-dark(#53195d, #f4d4f4)",
223
223
"@media (color-gamut: p3)":
224
224
"light-dark(color(display-p3 0.299 0.114 0.352), color(display-p3 0.936 0.836 0.949))",
···
226
226
});
227
227
228
228
export const blue = stylex.defineVars({
229
-
1: {
229
+
bg1: {
230
230
default: "light-dark(#fbfdff, #0d1520)",
231
231
"@media (color-gamut: p3)":
232
232
"light-dark(color(display-p3 0.986 0.992 0.999), color(display-p3 0.057 0.081 0.122))",
233
233
},
234
-
2: {
234
+
bg2: {
235
235
default: "light-dark(#f4faff, #111927)",
236
236
"@media (color-gamut: p3)":
237
237
"light-dark(color(display-p3 0.96 0.979 0.998), color(display-p3 0.072 0.098 0.147))",
238
238
},
239
-
3: {
239
+
component1: {
240
240
default: "light-dark(#e6f4fe, #0d2847)",
241
241
"@media (color-gamut: p3)":
242
242
"light-dark(color(display-p3 0.912 0.956 0.991), color(display-p3 0.078 0.154 0.27))",
243
243
},
244
-
4: {
244
+
component2: {
245
245
default: "light-dark(#d5efff, #003362)",
246
246
"@media (color-gamut: p3)":
247
247
"light-dark(color(display-p3 0.853 0.932 1), color(display-p3 0.033 0.197 0.37))",
248
248
},
249
-
5: {
249
+
component3: {
250
250
default: "light-dark(#c2e5ff, #004074)",
251
251
"@media (color-gamut: p3)":
252
252
"light-dark(color(display-p3 0.788 0.894 0.998), color(display-p3 0.08 0.245 0.441))",
253
253
},
254
-
6: {
254
+
border1: {
255
255
default: "light-dark(#acd8fc, #104d87)",
256
256
"@media (color-gamut: p3)":
257
257
"light-dark(color(display-p3 0.709 0.843 0.976), color(display-p3 0.14 0.298 0.511))",
258
258
},
259
-
7: {
259
+
border2: {
260
260
default: "light-dark(#8ec8f6, #205d9e)",
261
261
"@media (color-gamut: p3)":
262
262
"light-dark(color(display-p3 0.606 0.777 0.947), color(display-p3 0.195 0.361 0.6))",
263
263
},
264
-
8: {
264
+
border3: {
265
265
default: "light-dark(#5eb1ef, #2870bd)",
266
266
"@media (color-gamut: p3)":
267
267
"light-dark(color(display-p3 0.451 0.688 0.917), color(display-p3 0.239 0.434 0.72))",
268
268
},
269
-
9: {
269
+
solid1: {
270
270
default: "light-dark(#0090ff, #0090ff)",
271
271
"@media (color-gamut: p3)":
272
272
"light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969))",
273
273
},
274
-
10: {
274
+
solid2: {
275
275
default: "light-dark(#0588f0, #3b9eff)",
276
276
"@media (color-gamut: p3)":
277
277
"light-dark(color(display-p3 0.234 0.523 0.912), color(display-p3 0.344 0.612 0.973))",
278
278
},
279
-
11: {
279
+
text1: {
280
280
default: "light-dark(#0d74ce, #70b8ff)",
281
281
"@media (color-gamut: p3)":
282
282
"light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1))",
283
283
},
284
-
12: {
284
+
text2: {
285
285
default: "light-dark(#113264, #c2e6ff)",
286
286
"@media (color-gamut: p3)":
287
287
"light-dark(color(display-p3 0.102 0.193 0.379), color(display-p3 0.788 0.898 0.99))",
···
289
289
});
290
290
291
291
export const red = stylex.defineVars({
292
-
1: {
292
+
bg1: {
293
293
default: "light-dark(#fffcfc, #191111)",
294
294
"@media (color-gamut: p3)":
295
295
"light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067))",
296
296
},
297
-
2: {
297
+
bg2: {
298
298
default: "light-dark(#fff7f7, #201314)",
299
299
"@media (color-gamut: p3)":
300
300
"light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079))",
301
301
},
302
-
3: {
302
+
component1: {
303
303
default: "light-dark(#feebec, #3b1219)",
304
304
"@media (color-gamut: p3)":
305
305
"light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099))",
306
306
},
307
-
4: {
307
+
component2: {
308
308
default: "light-dark(#ffdbdc, #500f1c)",
309
309
"@media (color-gamut: p3)":
310
310
"light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113))",
311
311
},
312
-
5: {
312
+
component3: {
313
313
default: "light-dark(#ffcdce, #611623)",
314
314
"@media (color-gamut: p3)":
315
315
"light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142))",
316
316
},
317
-
6: {
317
+
border1: {
318
318
default: "light-dark(#fdbdbe, #72232d)",
319
319
"@media (color-gamut: p3)":
320
320
"light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183))",
321
321
},
322
-
7: {
322
+
border2: {
323
323
default: "light-dark(#f4a9aa, #8c333a)",
324
324
"@media (color-gamut: p3)":
325
325
"light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236))",
326
326
},
327
-
8: {
327
+
border3: {
328
328
default: "light-dark(#eb8e90, #b54548)",
329
329
"@media (color-gamut: p3)":
330
330
"light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297))",
331
331
},
332
-
9: {
332
+
solid1: {
333
333
default: "light-dark(#e5484d, #e5484d)",
334
334
"@media (color-gamut: p3)":
335
335
"light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324))",
336
336
},
337
-
10: {
337
+
solid2: {
338
338
default: "light-dark(#dc3e42, #ec5d5e)",
339
339
"@media (color-gamut: p3)":
340
340
"light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387))",
341
341
},
342
-
11: {
342
+
text1: {
343
343
default: "light-dark(#ce2c31, #ff9592)",
344
344
"@media (color-gamut: p3)":
345
345
"light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55))",
346
346
},
347
-
12: {
347
+
text2: {
348
348
default: "light-dark(#641723, #ffd1d9)",
349
349
"@media (color-gamut: p3)":
350
350
"light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))",
+76
-75
apps/example/src/components/theme/semantic-color.stylex.tsx
+76
-75
apps/example/src/components/theme/semantic-color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { slate, plum, red } from "./colors.stylex";
4
+
import { fontFamily } from "./typography.stylex";
4
5
5
6
// eslint-disable-next-line @stylexjs/enforce-extension
6
7
export const gray = stylex.create({
7
-
bg: { backgroundColor: slate[1] },
8
-
bgSubtle: { backgroundColor: slate[2] },
9
-
bgDim: { backgroundColor: slate[3] },
10
-
bgSecondary: { backgroundColor: slate[4] },
11
-
bgActive: { backgroundColor: slate[5] },
8
+
bg: { backgroundColor: slate.bg1 },
9
+
bgSubtle: { backgroundColor: slate.bg2 },
10
+
bgDim: { backgroundColor: slate.component1 },
11
+
bgSecondary: { backgroundColor: slate.component2 },
12
+
bgActive: { backgroundColor: slate.component3 },
12
13
borderDim: {
13
-
borderColor: slate[6],
14
+
borderColor: slate.border1,
14
15
borderStyle: "solid",
15
16
borderWidth: 1,
16
17
},
17
18
border: {
18
-
borderColor: slate[7],
19
+
borderColor: slate.border2,
19
20
borderStyle: "solid",
20
21
borderWidth: 1,
21
22
},
22
23
borderInteractive: {
23
24
borderColor: {
24
-
default: slate[7],
25
-
":hover": slate[8],
25
+
default: slate.border2,
26
+
":hover": slate.border3,
26
27
},
27
28
borderStyle: "solid",
28
29
borderWidth: 1,
···
31
32
transitionProperty: "background-color, border-color",
32
33
transitionTimingFunction: "ease-in-out",
33
34
},
34
-
bgSolid: { backgroundColor: slate[9] },
35
-
bgSolidDark: { backgroundColor: slate[10] },
36
-
textDim: { color: slate[11] },
37
-
text: { color: slate[12] },
35
+
bgSolid: { backgroundColor: slate.solid1 },
36
+
bgSolidDark: { backgroundColor: slate.solid2 },
37
+
textDim: { color: slate.text1, fontFamily: fontFamily["sans"] },
38
+
text: { color: slate.text2, fontFamily: fontFamily["sans"] },
38
39
textContrast: { color: "white" },
39
40
40
41
bgGhost: {
41
42
backgroundColor: {
42
43
default: "transparent",
43
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[4],
44
-
":active:not(:disabled)": slate[5],
45
-
":disabled": slate[3],
44
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
45
+
":active:not(:disabled)": slate.component3,
46
+
":disabled": slate.component1,
46
47
},
47
48
transitionDuration: "100ms",
48
49
transitionProperty: "background-color, border-color",
···
50
51
},
51
52
bgUi: {
52
53
backgroundColor: {
53
-
default: slate[3],
54
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[4],
55
-
":active:not(:disabled)": slate[5],
56
-
":disabled": slate[3],
54
+
default: slate.component1,
55
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
56
+
":active:not(:disabled)": slate.component3,
57
+
":disabled": slate.component1,
57
58
},
58
59
transitionDuration: "100ms",
59
60
transitionProperty: "background-color, border-color",
···
61
62
},
62
63
bgAction: {
63
64
backgroundColor: {
64
-
default: slate[4],
65
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[5],
66
-
":active:not(:disabled)": slate[6],
67
-
":disabled": slate[3],
65
+
default: slate.component2,
66
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component3,
67
+
":active:not(:disabled)": slate.component3,
68
+
":disabled": slate.component1,
68
69
},
69
70
transitionDuration: "100ms",
70
71
transitionProperty: "background-color, border-color",
···
74
75
75
76
// eslint-disable-next-line @stylexjs/enforce-extension
76
77
export const primary = stylex.create({
77
-
bg: { backgroundColor: plum[1] },
78
-
bgSubtle: { backgroundColor: plum[2] },
79
-
bgDim: { backgroundColor: plum[3] },
80
-
bgSecondary: { backgroundColor: plum[4] },
81
-
bgActive: { backgroundColor: plum[5] },
78
+
bg: { backgroundColor: plum.bg1 },
79
+
bgSubtle: { backgroundColor: plum.bg2 },
80
+
bgDim: { backgroundColor: plum.component1 },
81
+
bgSecondary: { backgroundColor: plum.component2 },
82
+
bgActive: { backgroundColor: plum.component3 },
82
83
borderDim: {
83
-
borderColor: plum[6],
84
+
borderColor: plum.border1,
84
85
borderStyle: "solid",
85
86
borderWidth: 1,
86
87
},
87
88
border: {
88
-
borderColor: plum[7],
89
+
borderColor: plum.border2,
89
90
borderStyle: "solid",
90
91
borderWidth: 1,
91
92
},
92
93
borderInteractive: {
93
94
borderColor: {
94
-
default: plum[7],
95
-
":hover": plum[8],
95
+
default: plum.border2,
96
+
":hover": plum.border3,
96
97
},
97
98
borderStyle: "solid",
98
99
borderWidth: 1,
···
101
102
transitionProperty: "background-color, border-color",
102
103
transitionTimingFunction: "ease-in-out",
103
104
},
104
-
bgSolid: { backgroundColor: plum[9] },
105
-
bgSolidDark: { backgroundColor: plum[10] },
106
-
textDim: { color: plum[11] },
107
-
text: { color: plum[12] },
105
+
bgSolid: { backgroundColor: plum.solid1 },
106
+
bgSolidDark: { backgroundColor: plum.solid2 },
107
+
textDim: { color: plum.text1, fontFamily: fontFamily["sans"] },
108
+
text: { color: plum.text2, fontFamily: fontFamily["sans"] },
108
109
textContrast: { color: "white" },
109
110
110
111
bgGhost: {
111
112
backgroundColor: {
112
113
default: "transparent",
113
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[4],
114
-
":active:not(:disabled)": plum[5],
115
-
":disabled": plum[3],
114
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component2,
115
+
":active:not(:disabled)": plum.component3,
116
+
":disabled": plum.component1,
116
117
},
117
118
transitionDuration: "100ms",
118
119
transitionProperty: "background-color, border-color",
···
120
121
},
121
122
bgUi: {
122
123
backgroundColor: {
123
-
default: plum[3],
124
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[4],
125
-
":active": plum[5],
126
-
":disabled": plum[3],
124
+
default: plum.component1,
125
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component2,
126
+
":active": plum.component3,
127
+
":disabled": plum.component1,
127
128
},
128
129
transitionDuration: "100ms",
129
130
transitionProperty: "background-color, border-color",
···
131
132
},
132
133
bgAction: {
133
134
backgroundColor: {
134
-
default: plum[4],
135
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[5],
136
-
":active:not(:disabled)": plum[6],
137
-
":disabled": plum[3],
135
+
default: plum.component2,
136
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component3,
137
+
":active:not(:disabled)": plum.component3,
138
+
":disabled": plum.component1,
138
139
},
139
140
transitionDuration: "100ms",
140
141
transitionProperty: "background-color, border-color",
···
144
145
145
146
// eslint-disable-next-line @stylexjs/enforce-extension
146
147
export const critical = stylex.create({
147
-
bg: { backgroundColor: red[1] },
148
-
bgSubtle: { backgroundColor: red[2] },
149
-
bgDim: { backgroundColor: red[3] },
150
-
bgSecondary: { backgroundColor: red[4] },
151
-
bgActive: { backgroundColor: red[5] },
148
+
bg: { backgroundColor: red.bg1 },
149
+
bgSubtle: { backgroundColor: red.bg2 },
150
+
bgDim: { backgroundColor: red.component1 },
151
+
bgSecondary: { backgroundColor: red.component2 },
152
+
bgActive: { backgroundColor: red.component3 },
152
153
borderDim: {
153
-
borderColor: red[6],
154
+
borderColor: red.border1,
154
155
borderStyle: "solid",
155
156
borderWidth: 1,
156
157
},
157
158
border: {
158
-
borderColor: red[7],
159
+
borderColor: red.border2,
159
160
borderStyle: "solid",
160
161
borderWidth: 1,
161
162
},
162
163
borderInteractive: {
163
164
borderColor: {
164
-
default: red[7],
165
-
":hover": red[8],
165
+
default: red.border2,
166
+
":hover": red.border3,
166
167
},
167
168
borderStyle: "solid",
168
169
borderWidth: 1,
···
170
171
transitionProperty: "background-color, border-color",
171
172
transitionTimingFunction: "ease-in-out",
172
173
},
173
-
bgSolid: { backgroundColor: red[9] },
174
-
bgSolidDark: { backgroundColor: red[10] },
175
-
textDim: { color: red[11] },
176
-
text: { color: red[12] },
174
+
bgSolid: { backgroundColor: red.solid1 },
175
+
bgSolidDark: { backgroundColor: red.solid2 },
176
+
textDim: { color: red.text1, fontFamily: fontFamily["sans"] },
177
+
text: { color: red.text2, fontFamily: fontFamily["sans"] },
177
178
textContrast: { color: "white" },
178
179
179
180
bgGhost: {
180
181
backgroundColor: {
181
182
default: "transparent",
182
-
":hover:not(:has(* button:hover)):not(:disabled)": red[4],
183
-
":active:not(:disabled)": red[5],
184
-
":disabled": red[3],
183
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
184
+
":active:not(:disabled)": red.component3,
185
+
":disabled": red.component1,
185
186
},
186
187
transitionDuration: "100ms",
187
188
transitionProperty: "background-color, border-color",
···
189
190
},
190
191
bgUi: {
191
192
backgroundColor: {
192
-
default: red[3],
193
-
":hover:not(:has(* button:hover)):not(:disabled)": red[4],
194
-
":active:not(:disabled)": red[5],
195
-
":disabled": red[3],
193
+
default: red.component1,
194
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
195
+
":active:not(:disabled)": red.component3,
196
+
":disabled": red.component1,
196
197
},
197
198
transitionDuration: "100ms",
198
199
transitionProperty: "background-color, border-color",
···
200
201
},
201
202
bgAction: {
202
203
backgroundColor: {
203
-
default: red[4],
204
-
":hover:not(:has(* button:hover)):not(:disabled)": red[5],
205
-
":active:not(:disabled)": red[6],
206
-
":disabled": red[3],
204
+
default: red.component2,
205
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component3,
206
+
":active:not(:disabled)": red.component3,
207
+
":disabled": red.component1,
207
208
},
208
209
transitionDuration: "100ms",
209
210
transitionProperty: "background-color, border-color",
···
211
212
},
212
213
bgSolidAction: {
213
214
backgroundColor: {
214
-
default: red[9],
215
-
":hover:not(:has(* button:hover)):not(:disabled)": red[10],
216
-
":disabled": red[3],
215
+
default: red.solid1,
216
+
":hover:not(:has(* button:hover)):not(:disabled)": red.solid2,
217
+
":disabled": red.component1,
217
218
},
218
219
transitionDuration: "100ms",
219
220
transitionProperty: "background-color, border-color",
+9
apps/example/src/components/theme/typography.stylex.tsx
+9
apps/example/src/components/theme/typography.stylex.tsx
···
123
123
margin: 0,
124
124
scrollMarginBlockStart: spacing["20"],
125
125
},
126
+
heading5: {
127
+
// eslint-disable-next-line @stylexjs/valid-styles
128
+
fontFamily: fontFamily["sans"],
129
+
fontSize: { default: fontSize["lg"] },
130
+
// eslint-disable-next-line @stylexjs/valid-styles
131
+
fontWeight: fontWeight["semibold"],
132
+
letterSpacing: tracking["tight"],
133
+
lineHeight: { default: lineHeight["lg"] },
134
+
},
126
135
body: {
127
136
// eslint-disable-next-line @stylexjs/valid-styles
128
137
fontFamily: fontFamily["sans"],
+7
-7
apps/example/src/components/theme/useButtonStyles.ts
+7
-7
apps/example/src/components/theme/useButtonStyles.ts
···
95
95
},
96
96
secondary: {
97
97
borderColor: {
98
-
default: slate[3],
99
-
":hover": slate[4],
100
-
":active": slate[5],
98
+
default: slate.component1,
99
+
":hover": slate.component2,
100
+
":active": slate.component3,
101
101
},
102
102
},
103
103
tertiary: {
104
104
borderColor: {
105
105
default: "transparent",
106
-
":hover": slate[4],
107
-
":active": slate[5],
106
+
":hover": slate.component2,
107
+
":active": slate.component3,
108
108
},
109
109
},
110
110
···
116
116
borderTopRightRadius: { ":not(:last-child)": 0 },
117
117
},
118
118
secondaryGroupHorizontal: {
119
-
borderRightColor: { ":not(:last-child)": slate[7] },
119
+
borderRightColor: { ":not(:last-child)": slate.border2 },
120
120
},
121
121
groupVertical: {
122
122
borderBottomLeftRadius: { ":not(:last-child)": 0 },
···
126
126
borderTopWidth: { ":not(:first-child)": 0 },
127
127
},
128
128
secondaryGroupVertical: {
129
-
borderBottomColor: { ":not(:last-child)": slate[7] },
129
+
borderBottomColor: { ":not(:last-child)": slate.border2 },
130
130
},
131
131
});
132
132
+87
apps/example/src/components/theme/useDialogStyles.ts
+87
apps/example/src/components/theme/useDialogStyles.ts
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { animations } from "../theme/animations.stylex";
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { shadow } from "../theme/shadow.stylex";
8
+
import { Size } from "../types";
9
+
import { gray } from "./semantic-color.stylex";
10
+
11
+
const styles = stylex.create({
12
+
overlay: {
13
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
14
+
height: "var(--page-height)",
15
+
left: 0,
16
+
position: "absolute",
17
+
top: 0,
18
+
width: "100vw",
19
+
zIndex: 100,
20
+
21
+
animationDuration: "200ms",
22
+
animationName: {
23
+
":is([data-entering])": animations.fadeIn,
24
+
},
25
+
animationTimingFunction: "ease-in",
26
+
opacity: {
27
+
default: 1,
28
+
":is([data-exiting])": 0,
29
+
},
30
+
transitionDuration: {
31
+
":is([data-exiting])": "100ms",
32
+
},
33
+
transitionProperty: "opacity",
34
+
transitionTimingFunction: "ease-in-out",
35
+
},
36
+
modal: {
37
+
borderRadius: radius["lg"],
38
+
boxShadow: shadow["lg"],
39
+
display: "flex",
40
+
flexDirection: "column",
41
+
left: "50%",
42
+
maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
43
+
outline: "none",
44
+
position: "fixed",
45
+
top: "calc(var(--visual-viewport-height) / 2)",
46
+
translate: "-50% -50%",
47
+
48
+
animationDuration: { ":is([data-entering])": "300ms" },
49
+
animationName: { ":is([data-entering])": animations.zoomIn },
50
+
animationTimingFunction: {
51
+
":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
52
+
},
53
+
},
54
+
dialog: {
55
+
display: "flex",
56
+
flexDirection: "column",
57
+
flexGrow: 1,
58
+
minHeight: 0,
59
+
outline: "none",
60
+
},
61
+
sm: {
62
+
width: 400,
63
+
},
64
+
md: {
65
+
width: 600,
66
+
},
67
+
lg: {
68
+
width: 800,
69
+
},
70
+
});
71
+
72
+
export function useDialogStyles({ size: sizeProp }: { size?: Size }) {
73
+
const size = sizeProp || use(SizeContext);
74
+
75
+
return {
76
+
overlay: styles.overlay,
77
+
modal: [
78
+
styles.modal,
79
+
styles.modal,
80
+
gray.bg,
81
+
gray.text,
82
+
gray.border,
83
+
styles[size],
84
+
],
85
+
dialog: styles.dialog,
86
+
};
87
+
}
+4
-4
apps/example/src/components/theme/useInputStyles.ts
+4
-4
apps/example/src/components/theme/useInputStyles.ts
···
48
48
padding: 0,
49
49
50
50
borderColor: {
51
-
default: slate[7],
52
-
":hover": slate[8],
53
-
":focus": slate[9],
51
+
default: slate.border2,
52
+
":hover": slate.border3,
53
+
":focus": slate.solid1,
54
54
},
55
55
borderStyle: "solid",
56
56
borderWidth: 1,
···
63
63
borderWidth: 0,
64
64
boxSizing: "border-box",
65
65
color: {
66
-
":is(::placeholder,[data-placeholder])": slate[11],
66
+
":is(::placeholder,[data-placeholder])": slate.text1,
67
67
},
68
68
display: "flex",
69
69
flexGrow: 1,
+9
-7
apps/example/src/components/theme/useListBoxItemStyles.ts
+9
-7
apps/example/src/components/theme/useListBoxItemStyles.ts
···
35
35
alignItems: "center",
36
36
backgroundColor: {
37
37
default: "transparent",
38
-
[":is([data-react-aria-pressable=true][data-focused] *)"]: slate[4],
39
-
[":is([data-react-aria-pressable=true][data-selected=true] *)"]: slate[4],
38
+
[":is([data-react-aria-pressable=true][data-focused] *)"]:
39
+
slate.component2,
40
+
[":is([data-react-aria-pressable=true][data-selected=true] *)"]:
41
+
slate.component2,
40
42
[":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)"]:
41
-
slate[4],
43
+
slate.component2,
42
44
[":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
43
-
slate[5],
45
+
slate.component3,
44
46
},
45
47
borderRadius: radius["md"],
46
48
boxSizing: "border-box",
47
49
color: {
48
-
default: slate[12],
49
-
[":is([data-react-aria-pressable=true][data-disabled] *)"]: slate[8],
50
+
default: slate.text2,
51
+
[":is([data-react-aria-pressable=true][data-disabled] *)"]: slate.border3,
50
52
},
51
53
display: "flex",
52
54
flexGrow: 1,
···
70
72
fontSize: fontSize["base"],
71
73
},
72
74
check: {
73
-
color: plum[9],
75
+
color: plum.solid1,
74
76
},
75
77
addon: {
76
78
alignItems: "center",
+3
-3
apps/example/src/components/tooltip/index.tsx
+3
-3
apps/example/src/components/tooltip/index.tsx
···
17
17
18
18
const tooltipStyle = stylex.create({
19
19
content: {
20
-
backgroundColor: slateInverted[1],
20
+
backgroundColor: slateInverted.bg1,
21
21
borderRadius: radius["md"],
22
22
boxShadow: shadow["sm"],
23
-
color: slateInverted[11],
23
+
color: slateInverted.text1,
24
24
fontFamily: fontFamily["sans"],
25
25
fontSize: fontSize["sm"],
26
26
lineHeight: lineHeight["sm"],
···
49
49
},
50
50
caret: {
51
51
display: "flex",
52
-
fill: slateInverted[1],
52
+
fill: slateInverted.bg1,
53
53
},
54
54
arrow: {
55
55
transform: {
+3
package.json
+3
package.json
+1
-1
packages/eslint-config/base.js
+1
-1
packages/eslint-config/base.js
···
21
21
eslintJs.configs.recommended,
22
22
comments.recommended,
23
23
importX.flatConfigs.recommended,
24
-
eslintPluginUnicorn.configs.recommended,
25
24
{
25
+
extends: [eslintPluginUnicorn.configs.recommended],
26
26
rules: {
27
27
"unicorn/prevent-abbreviations": "off",
28
28
"unicorn/filename-case": "off",
+6
packages/hip-ui/src/cli/install.tsx
+6
packages/hip-ui/src/cli/install.tsx
···
8
8
import path from "node:path";
9
9
import * as React from "react";
10
10
11
+
import { alertDialogConfig } from "../components/alert-dialog/alert-dialog-config.js";
12
+
import { avatarConfig } from "../components/avatar/avatar-config.js";
11
13
import { buttonGroupConfig } from "../components/button-group/button-group-config.js";
12
14
import { buttonConfig } from "../components/button/button-config.js";
13
15
import { cardConfig } from "../components/card/card-config.js";
···
17
19
import { commandMenuConfig } from "../components/command-menu/command-menu-config.js";
18
20
import { contextMenuConfig } from "../components/context-menu/context-menu-config.js";
19
21
import { dateFieldConfig } from "../components/date-field/date-field-config.js";
22
+
import { dialogConfig } from "../components/dialog/dialog-config.js";
20
23
import { flexConfig } from "../components/flex/flex-config.js";
21
24
import { iconButtonConfig } from "../components/icon-button/icon-button-config.js";
22
25
import { labelConfig } from "../components/label/label-config.js";
···
72
75
comboboxConfig,
73
76
treeConfig,
74
77
commandMenuConfig,
78
+
alertDialogConfig,
79
+
dialogConfig,
80
+
avatarConfig,
75
81
];
76
82
77
83
function StringSetting({
+12
packages/hip-ui/src/components/alert-dialog/alert-dialog-config.ts
+12
packages/hip-ui/src/components/alert-dialog/alert-dialog-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const alertDialogConfig: ComponentConfig = {
4
+
name: "alert-dialog",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: ["../context.ts", "../theme/useDialogStyles.ts"],
7
+
dependencies: {
8
+
"lucide-react": "^0.545.0",
9
+
"@react-stately/utils": "^3.10.8",
10
+
"react-stately": "^3.42.0",
11
+
},
12
+
};
+174
packages/hip-ui/src/components/alert-dialog/index.tsx
+174
packages/hip-ui/src/components/alert-dialog/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { X } from "lucide-react";
5
+
import { use } from "react";
6
+
import { mergeProps } from "react-aria";
7
+
import {
8
+
DialogTrigger,
9
+
DialogTriggerProps,
10
+
Dialog as AriaDialog,
11
+
Modal,
12
+
ModalOverlay,
13
+
OverlayTriggerStateContext,
14
+
Heading,
15
+
} from "react-aria-components";
16
+
17
+
import { Button, ButtonProps } from "../button";
18
+
import { IconButton } from "../icon-button";
19
+
import { spacing } from "../theme/spacing.stylex";
20
+
import { typeramp } from "../theme/typography.stylex";
21
+
import { useDialogStyles } from "../theme/useDialogStyles";
22
+
23
+
const styles = stylex.create({
24
+
dialog: {
25
+
paddingBottom: spacing["2"],
26
+
paddingTop: spacing["2"],
27
+
},
28
+
header: {
29
+
alignItems: "center",
30
+
display: "flex",
31
+
gap: spacing["2"],
32
+
height: spacing["8"],
33
+
justifyContent: "space-between",
34
+
paddingLeft: spacing["4"],
35
+
paddingRight: spacing["4"],
36
+
},
37
+
description: {
38
+
paddingBottom: spacing["4"],
39
+
paddingLeft: spacing["4"],
40
+
paddingRight: spacing["4"],
41
+
paddingTop: spacing["4"],
42
+
},
43
+
footer: {
44
+
display: "flex",
45
+
gap: spacing["2"],
46
+
justifyContent: "flex-end",
47
+
paddingBottom: spacing["2"],
48
+
paddingLeft: spacing["4"],
49
+
paddingRight: spacing["4"],
50
+
},
51
+
});
52
+
53
+
export interface AlertDialogProps extends DialogTriggerProps {
54
+
trigger: React.ReactNode;
55
+
children: React.ReactNode;
56
+
}
57
+
58
+
export const AlertDialog = ({
59
+
trigger,
60
+
children,
61
+
defaultOpen,
62
+
isOpen,
63
+
onOpenChange,
64
+
}: AlertDialogProps) => {
65
+
const dialogStyles = useDialogStyles({ size: "sm" });
66
+
67
+
return (
68
+
<DialogTrigger
69
+
defaultOpen={defaultOpen}
70
+
isOpen={isOpen}
71
+
onOpenChange={onOpenChange}
72
+
>
73
+
{trigger}
74
+
75
+
<ModalOverlay
76
+
isKeyboardDismissDisabled
77
+
{...stylex.props(dialogStyles.overlay)}
78
+
>
79
+
<Modal {...stylex.props(dialogStyles.modal)}>
80
+
<AriaDialog
81
+
{...stylex.props(dialogStyles.dialog, styles.dialog)}
82
+
role="alertdialog"
83
+
>
84
+
{children}
85
+
</AriaDialog>
86
+
</Modal>
87
+
</ModalOverlay>
88
+
</DialogTrigger>
89
+
);
90
+
};
91
+
92
+
export interface AlertDialogHeaderProps
93
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
94
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
95
+
}
96
+
97
+
export const AlertDialogHeader = ({
98
+
children,
99
+
style,
100
+
}: AlertDialogHeaderProps) => {
101
+
return (
102
+
<div {...stylex.props(styles.header, typeramp.heading5, style)}>
103
+
<Heading>{children}</Heading>
104
+
<IconButton label="Close" size="sm" variant="tertiary" slot="close">
105
+
<X />
106
+
</IconButton>
107
+
</div>
108
+
);
109
+
};
110
+
111
+
export interface AlertDialogDescriptionProps
112
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
113
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
114
+
}
115
+
116
+
export const AlertDialogDescription = ({
117
+
children,
118
+
style,
119
+
}: AlertDialogDescriptionProps) => {
120
+
return (
121
+
<div {...stylex.props(styles.description, typeramp.body, style)}>
122
+
{children}
123
+
</div>
124
+
);
125
+
};
126
+
127
+
export interface AlertDialogFooterProps
128
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
129
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
130
+
}
131
+
132
+
export const AlertDialogFooter = ({
133
+
children,
134
+
style,
135
+
}: AlertDialogFooterProps) => {
136
+
return <div {...stylex.props(styles.footer, style)}>{children}</div>;
137
+
};
138
+
139
+
export type AlertDialogCancelButtonProps = Omit<ButtonProps, "slot">;
140
+
141
+
export const AlertDialogCancelButton = ({
142
+
children = "Cancel",
143
+
...props
144
+
}: AlertDialogCancelButtonProps) => {
145
+
return (
146
+
<Button variant="secondary" {...props} slot="close">
147
+
{children}
148
+
</Button>
149
+
);
150
+
};
151
+
152
+
export type AlertDialogActionButtonProps = ButtonProps & {
153
+
/**
154
+
* Whether to close the dialog when the button is pressed.
155
+
* If you are doing somthing async, you likely want to set this to false
156
+
* and use isLoading=true.
157
+
*/
158
+
closeOnPress?: boolean;
159
+
};
160
+
161
+
export const AlertDialogActionButton = ({
162
+
closeOnPress = true,
163
+
children = "Ok",
164
+
...props
165
+
}: AlertDialogActionButtonProps) => {
166
+
const state = use(OverlayTriggerStateContext);
167
+
const onPress = () => {
168
+
if (closeOnPress) {
169
+
state?.close();
170
+
}
171
+
};
172
+
173
+
return <Button {...mergeProps(props, { onPress })}>{children}</Button>;
174
+
};
+15
packages/hip-ui/src/components/avatar/avatar-config.ts
+15
packages/hip-ui/src/components/avatar/avatar-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const avatarConfig: ComponentConfig = {
4
+
name: "avatar",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/spacing.stylex.tsx",
8
+
"../theme/colors.stylex.tsx",
9
+
"../theme/radius.stylex.tsx",
10
+
"../theme/semantic-color.stylex.tsx",
11
+
"../theme/typography.stylex.tsx",
12
+
"../theme/breakpoints.stylex.tsx",
13
+
"../theme/shadow.stylex.tsx",
14
+
],
15
+
};
+129
packages/hip-ui/src/components/avatar/index.tsx
+129
packages/hip-ui/src/components/avatar/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use, useLayoutEffect, useState } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { slate } from "../theme/colors.stylex";
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { spacing } from "../theme/spacing.stylex";
8
+
import {
9
+
fontSize,
10
+
fontWeight,
11
+
lineHeight,
12
+
fontFamily,
13
+
} from "../theme/typography.stylex";
14
+
import { Size } from "../types";
15
+
16
+
const styles = stylex.create({
17
+
wrapper: {
18
+
alignItems: "center",
19
+
backgroundColor: slate.component1,
20
+
borderColor: slate.border1,
21
+
borderStyle: "solid",
22
+
borderWidth: 1,
23
+
display: "flex",
24
+
justifyContent: "center",
25
+
overflow: "hidden",
26
+
},
27
+
sm: {
28
+
borderRadius: radius["sm"],
29
+
height: spacing["6"],
30
+
width: spacing["6"],
31
+
},
32
+
md: {
33
+
borderRadius: radius["md"],
34
+
height: spacing["8"],
35
+
width: spacing["8"],
36
+
},
37
+
lg: {
38
+
borderRadius: radius["lg"],
39
+
height: spacing["10"],
40
+
width: spacing["10"],
41
+
},
42
+
xl: {
43
+
borderRadius: radius["xl"],
44
+
height: spacing["14"],
45
+
width: spacing["14"],
46
+
},
47
+
image: {
48
+
height: "100%",
49
+
objectFit: "cover",
50
+
objectPosition: "center",
51
+
width: "100%",
52
+
},
53
+
fallback: {
54
+
color: slate.text1,
55
+
fontFamily: fontFamily["sans"],
56
+
fontWeight: fontWeight["medium"],
57
+
lineHeight: lineHeight["none"],
58
+
},
59
+
smFallback: {
60
+
fontSize: fontSize["sm"],
61
+
},
62
+
mdFallback: {
63
+
fontSize: fontSize["base"],
64
+
},
65
+
lgFallback: {
66
+
fontSize: fontSize["lg"],
67
+
},
68
+
xlFallback: {
69
+
fontSize: fontSize["xl"],
70
+
},
71
+
});
72
+
73
+
export interface AvatarProps
74
+
extends Omit<
75
+
React.ComponentProps<"div">,
76
+
"style" | "className" | "children"
77
+
> {
78
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
79
+
src: string;
80
+
alt?: string;
81
+
fallback: React.ReactNode;
82
+
size?: Size | "xl";
83
+
}
84
+
85
+
export function Avatar({
86
+
style,
87
+
alt = "",
88
+
src,
89
+
fallback,
90
+
size: sizeProp,
91
+
...props
92
+
}: AvatarProps) {
93
+
const size = sizeProp || use(SizeContext);
94
+
const [imageLoaded, setImageLoaded] = useState<
95
+
"loading" | "loaded" | "error"
96
+
>("loading");
97
+
98
+
useLayoutEffect(() => {
99
+
if (!src) return;
100
+
101
+
const onLoad = () => setImageLoaded("loaded");
102
+
const onError = () => setImageLoaded("error");
103
+
104
+
const image = new Image();
105
+
106
+
image.addEventListener("load", onLoad);
107
+
image.addEventListener("error", onError);
108
+
109
+
image.src = src;
110
+
111
+
return () => {
112
+
image.removeEventListener("load", onLoad);
113
+
image.removeEventListener("error", onError);
114
+
};
115
+
}, [src]);
116
+
117
+
return (
118
+
<div {...props} {...stylex.props(styles.wrapper, styles[size], style)}>
119
+
{imageLoaded === "loaded" && (
120
+
<img {...stylex.props(styles.image)} src={src} alt={alt} />
121
+
)}
122
+
{(!src || imageLoaded === "error") && (
123
+
<div {...stylex.props(styles.fallback, styles[`${size}Fallback`])}>
124
+
{fallback}
125
+
</div>
126
+
)}
127
+
</div>
128
+
);
129
+
}
+1
-1
packages/hip-ui/src/components/checkbox/index.tsx
+1
-1
packages/hip-ui/src/components/checkbox/index.tsx
+12
packages/hip-ui/src/components/dialog/dialog-config.ts
+12
packages/hip-ui/src/components/dialog/dialog-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const dialogConfig: ComponentConfig = {
4
+
name: "dialog",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: ["../context.ts", "../theme/useDialogStyles.ts"],
7
+
dependencies: {
8
+
"lucide-react": "^0.545.0",
9
+
"@react-stately/utils": "^3.10.8",
10
+
"react-stately": "^3.42.0",
11
+
},
12
+
};
+138
packages/hip-ui/src/components/dialog/index.tsx
+138
packages/hip-ui/src/components/dialog/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import { X } from "lucide-react";
5
+
import {
6
+
DialogTrigger,
7
+
DialogTriggerProps,
8
+
Dialog as AriaDialog,
9
+
Modal,
10
+
ModalOverlay,
11
+
Heading,
12
+
} from "react-aria-components";
13
+
14
+
import { IconButton } from "../icon-button";
15
+
import { slate } from "../theme/colors.stylex";
16
+
import { spacing } from "../theme/spacing.stylex";
17
+
import { typeramp } from "../theme/typography.stylex";
18
+
import { useDialogStyles } from "../theme/useDialogStyles";
19
+
import { Size } from "../types";
20
+
21
+
const styles = stylex.create({
22
+
dialog: {
23
+
paddingBottom: spacing["2"],
24
+
paddingTop: spacing["2"],
25
+
},
26
+
header: {
27
+
alignItems: "center",
28
+
display: "flex",
29
+
gap: spacing["2"],
30
+
height: spacing["8"],
31
+
justifyContent: "space-between",
32
+
paddingBottom: spacing["2"],
33
+
paddingLeft: spacing["4"],
34
+
paddingRight: spacing["4"],
35
+
36
+
borderBottomColor: slate.border1,
37
+
borderBottomStyle: "solid",
38
+
borderBottomWidth: 1,
39
+
},
40
+
description: {
41
+
paddingBottom: spacing["4"],
42
+
paddingLeft: spacing["4"],
43
+
paddingRight: spacing["4"],
44
+
paddingTop: spacing["4"],
45
+
},
46
+
footer: {
47
+
display: "flex",
48
+
gap: spacing["2"],
49
+
justifyContent: "flex-end",
50
+
paddingBottom: spacing["2"],
51
+
paddingLeft: spacing["4"],
52
+
paddingRight: spacing["4"],
53
+
paddingTop: spacing["4"],
54
+
55
+
borderTopColor: slate.border1,
56
+
borderTopStyle: "solid",
57
+
borderTopWidth: 1,
58
+
},
59
+
});
60
+
61
+
export interface DialogProps extends DialogTriggerProps {
62
+
trigger: React.ReactNode;
63
+
children: React.ReactNode;
64
+
size?: Size;
65
+
}
66
+
67
+
export const Dialog = ({
68
+
trigger,
69
+
children,
70
+
defaultOpen,
71
+
isOpen,
72
+
onOpenChange,
73
+
size,
74
+
}: DialogProps) => {
75
+
const dialogStyles = useDialogStyles({ size });
76
+
77
+
return (
78
+
<DialogTrigger
79
+
defaultOpen={defaultOpen}
80
+
isOpen={isOpen}
81
+
onOpenChange={onOpenChange}
82
+
>
83
+
{trigger}
84
+
85
+
<ModalOverlay
86
+
isKeyboardDismissDisabled
87
+
{...stylex.props(dialogStyles.overlay)}
88
+
>
89
+
<Modal {...stylex.props(dialogStyles.modal)}>
90
+
<AriaDialog {...stylex.props(dialogStyles.dialog, styles.dialog)}>
91
+
{children}
92
+
</AriaDialog>
93
+
</Modal>
94
+
</ModalOverlay>
95
+
</DialogTrigger>
96
+
);
97
+
};
98
+
99
+
export interface DialogHeaderProps
100
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
101
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
102
+
}
103
+
104
+
export const DialogHeader = ({ children, style }: DialogHeaderProps) => {
105
+
return (
106
+
<div {...stylex.props(styles.header, typeramp.heading5, style)}>
107
+
<Heading>{children}</Heading>
108
+
<IconButton label="Close" size="sm" variant="tertiary" slot="close">
109
+
<X />
110
+
</IconButton>
111
+
</div>
112
+
);
113
+
};
114
+
115
+
export interface DialogDescriptionProps
116
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
117
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
+
}
119
+
120
+
export const DialogDescription = ({
121
+
children,
122
+
style,
123
+
}: DialogDescriptionProps) => {
124
+
return (
125
+
<div {...stylex.props(styles.description, typeramp.body, style)}>
126
+
{children}
127
+
</div>
128
+
);
129
+
};
130
+
131
+
export interface DialogFooterProps
132
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
133
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
134
+
}
135
+
136
+
export const DialogFooter = ({ children, style }: DialogFooterProps) => {
137
+
return <div {...stylex.props(styles.footer, style)}>{children}</div>;
138
+
};
+2
-2
packages/hip-ui/src/components/link/index.tsx
+2
-2
packages/hip-ui/src/components/link/index.tsx
+2
-2
packages/hip-ui/src/components/number-field/index.tsx
+2
-2
packages/hip-ui/src/components/number-field/index.tsx
+2
-2
packages/hip-ui/src/components/popover/index.tsx
+2
-2
packages/hip-ui/src/components/popover/index.tsx
···
16
16
17
17
const styles = stylex.create({
18
18
wrapper: {
19
-
filter: `drop-shadow(-0.5px -0.5px 0 ${slate[7]}) drop-shadow(0.5px -0.5px 0 ${slate[7]}) drop-shadow(0.5px 0.5px 0 ${slate[7]}) drop-shadow(-0.5px 0.5px 0 ${slate[7]}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
19
+
filter: `drop-shadow(-0.5px -0.5px 0 ${slate.border2}) drop-shadow(0.5px -0.5px 0 ${slate.border2}) drop-shadow(0.5px 0.5px 0 ${slate.border2}) drop-shadow(-0.5px 0.5px 0 ${slate.border2}) drop-shadow(0px 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0px -1px 3px rgb(0 0 0 / 0.1))`,
20
20
},
21
21
content: {
22
22
borderWidth: 0,
···
29
29
},
30
30
caret: {},
31
31
arrow: {
32
-
backgroundColor: slate[2],
32
+
backgroundColor: slate.bg2,
33
33
height: spacing["2"],
34
34
transform: {
35
35
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
+1
-1
packages/hip-ui/src/components/separator/index.tsx
+1
-1
packages/hip-ui/src/components/separator/index.tsx
+4
-4
packages/hip-ui/src/components/text-area/index.tsx
+4
-4
packages/hip-ui/src/components/text-area/index.tsx
···
55
55
display: "flex",
56
56
57
57
borderColor: {
58
-
default: slate[7],
59
-
":hover": slate[8],
60
-
":focus": slate[9],
58
+
default: slate.border2,
59
+
":hover": slate.border3,
60
+
":focus": slate.solid1,
61
61
},
62
62
borderStyle: "solid",
63
63
borderWidth: 1,
···
67
67
borderWidth: 0,
68
68
boxSizing: "border-box",
69
69
color: {
70
-
"::placeholder": slate[11],
70
+
"::placeholder": slate.text1,
71
71
},
72
72
flexGrow: 1,
73
73
fontFamily: fontFamily["sans"],
+156
-156
packages/hip-ui/src/components/theme/colors.stylex.tsx
+156
-156
packages/hip-ui/src/components/theme/colors.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
export const slateLight = stylex.defineVars({
4
-
1: stylex.types.color("#fcfcfd"),
5
-
2: stylex.types.color("#f9f9fb"),
6
-
3: stylex.types.color("#f0f0f3"),
7
-
4: stylex.types.color("#e8e8ec"),
8
-
5: stylex.types.color("#e0e1e6"),
9
-
6: stylex.types.color("#d9d9e0"),
10
-
7: stylex.types.color("#cdced6"),
11
-
8: stylex.types.color("#b9bbc6"),
12
-
9: stylex.types.color("#8b8d98"),
13
-
10: stylex.types.color("#80838d"),
14
-
11: stylex.types.color("#60646c"),
15
-
12: stylex.types.color("#1c2024"),
4
+
bg1: stylex.types.color("#fcfcfd"),
5
+
bg2: stylex.types.color("#f9f9fb"),
6
+
component1: stylex.types.color("#f0f0f3"),
7
+
component2: stylex.types.color("#e8e8ec"),
8
+
component3: stylex.types.color("#e0e1e6"),
9
+
border1: stylex.types.color("#d9d9e0"),
10
+
border2: stylex.types.color("#cdced6"),
11
+
border3: stylex.types.color("#b9bbc6"),
12
+
solid1: stylex.types.color("#8b8d98"),
13
+
solid2: stylex.types.color("#80838d"),
14
+
text1: stylex.types.color("#60646c"),
15
+
text2: stylex.types.color("#1c2024"),
16
16
});
17
17
18
18
export const slateLightP3 = stylex.defineVars({
19
-
1: stylex.types.color("color(display-p3 0.988 0.988 0.992)"),
20
-
2: stylex.types.color("color(display-p3 0.976 0.976 0.984)"),
21
-
3: stylex.types.color("color(display-p3 0.94 0.941 0.953)"),
22
-
4: stylex.types.color("color(display-p3 0.908 0.909 0.925)"),
23
-
5: stylex.types.color("color(display-p3 0.88 0.881 0.901)"),
24
-
6: stylex.types.color("color(display-p3 0.85 0.852 0.876)"),
25
-
7: stylex.types.color("color(display-p3 0.805 0.808 0.838)"),
26
-
8: stylex.types.color("color(display-p3 0.727 0.733 0.773)"),
27
-
9: stylex.types.color("color(display-p3 0.547 0.553 0.592)"),
28
-
10: stylex.types.color("color(display-p3 0.503 0.512 0.549)"),
29
-
11: stylex.types.color("color(display-p3 0.379 0.392 0.421)"),
30
-
12: stylex.types.color("color(display-p3 0.113 0.125 0.14)"),
19
+
bg1: stylex.types.color("color(display-p3 0.988 0.988 0.992)"),
20
+
bg2: stylex.types.color("color(display-p3 0.976 0.976 0.984)"),
21
+
component1: stylex.types.color("color(display-p3 0.94 0.941 0.953)"),
22
+
component2: stylex.types.color("color(display-p3 0.908 0.909 0.925)"),
23
+
component3: stylex.types.color("color(display-p3 0.88 0.881 0.901)"),
24
+
border1: stylex.types.color("color(display-p3 0.85 0.852 0.876)"),
25
+
border2: stylex.types.color("color(display-p3 0.805 0.808 0.838)"),
26
+
border3: stylex.types.color("color(display-p3 0.727 0.733 0.773)"),
27
+
solid1: stylex.types.color("color(display-p3 0.547 0.553 0.592)"),
28
+
solid2: stylex.types.color("color(display-p3 0.503 0.512 0.549)"),
29
+
text1: stylex.types.color("color(display-p3 0.379 0.392 0.421)"),
30
+
text2: stylex.types.color("color(display-p3 0.113 0.125 0.14)"),
31
31
});
32
32
33
33
export const slateDark = stylex.defineVars({
34
-
1: stylex.types.color("#111113"),
35
-
2: stylex.types.color("#18191b"),
36
-
3: stylex.types.color("#212225"),
37
-
4: stylex.types.color("#272a2d"),
38
-
5: stylex.types.color("#2e3135"),
39
-
6: stylex.types.color("#363a3f"),
40
-
7: stylex.types.color("#43484e"),
41
-
8: stylex.types.color("#5a6169"),
42
-
9: stylex.types.color("#696e77"),
43
-
10: stylex.types.color("#777b84"),
44
-
11: stylex.types.color("#b0b4ba"),
45
-
12: stylex.types.color("#edeef0"),
34
+
bg1: stylex.types.color("#111113"),
35
+
bg2: stylex.types.color("#18191b"),
36
+
component1: stylex.types.color("#212225"),
37
+
component2: stylex.types.color("#272a2d"),
38
+
component3: stylex.types.color("#2e3135"),
39
+
border1: stylex.types.color("#363a3f"),
40
+
border2: stylex.types.color("#43484e"),
41
+
border3: stylex.types.color("#5a6169"),
42
+
solid1: stylex.types.color("#696e77"),
43
+
solid2: stylex.types.color("#777b84"),
44
+
text1: stylex.types.color("#b0b4ba"),
45
+
text2: stylex.types.color("#edeef0"),
46
46
});
47
47
48
48
export const slateDarkP3 = stylex.defineVars({
49
-
1: stylex.types.color("color(display-p3 0.067 0.067 0.074)"),
50
-
2: stylex.types.color("color(display-p3 0.095 0.098 0.105)"),
51
-
3: stylex.types.color("color(display-p3 0.13 0.135 0.145)"),
52
-
4: stylex.types.color("color(display-p3 0.156 0.163 0.176)"),
53
-
5: stylex.types.color("color(display-p3 0.183 0.191 0.206)"),
54
-
6: stylex.types.color("color(display-p3 0.215 0.226 0.244)"),
55
-
7: stylex.types.color("color(display-p3 0.265 0.28 0.302)"),
56
-
8: stylex.types.color("color(display-p3 0.357 0.381 0.409)"),
57
-
9: stylex.types.color("color(display-p3 0.415 0.431 0.463)"),
58
-
10: stylex.types.color("color(display-p3 0.469 0.483 0.514)"),
59
-
11: stylex.types.color("color(display-p3 0.692 0.704 0.728)"),
60
-
12: stylex.types.color("color(display-p3 0.93 0.933 0.94)"),
49
+
bg1: stylex.types.color("color(display-p3 0.067 0.067 0.074)"),
50
+
bg2: stylex.types.color("color(display-p3 0.095 0.098 0.105)"),
51
+
component1: stylex.types.color("color(display-p3 0.13 0.135 0.145)"),
52
+
component2: stylex.types.color("color(display-p3 0.156 0.163 0.176)"),
53
+
component3: stylex.types.color("color(display-p3 0.183 0.191 0.206)"),
54
+
border1: stylex.types.color("color(display-p3 0.215 0.226 0.244)"),
55
+
border2: stylex.types.color("color(display-p3 0.265 0.28 0.302)"),
56
+
border3: stylex.types.color("color(display-p3 0.357 0.381 0.409)"),
57
+
solid1: stylex.types.color("color(display-p3 0.415 0.431 0.463)"),
58
+
solid2: stylex.types.color("color(display-p3 0.469 0.483 0.514)"),
59
+
text1: stylex.types.color("color(display-p3 0.692 0.704 0.728)"),
60
+
text2: stylex.types.color("color(display-p3 0.93 0.933 0.94)"),
61
61
});
62
62
63
63
export const slate = stylex.defineVars({
64
-
1: {
65
-
default: `light-dark(${slateLight[1]}, ${slateDark[1]})`,
66
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[1]}, ${slateDarkP3[1]})`,
64
+
bg1: {
65
+
default: `light-dark(${slateLight.bg1}, ${slateDark.bg1})`,
66
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.bg1}, ${slateDarkP3.bg1})`,
67
67
},
68
-
2: {
69
-
default: `light-dark(${slateLight[2]}, ${slateDark[2]})`,
70
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[2]}, ${slateDarkP3[2]})`,
68
+
bg2: {
69
+
default: `light-dark(${slateLight.bg2}, ${slateDark.bg2})`,
70
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.bg2}, ${slateDarkP3.bg2})`,
71
71
},
72
-
3: {
73
-
default: `light-dark(${slateLight[3]}, ${slateDark[3]})`,
74
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[3]}, ${slateDarkP3[3]})`,
72
+
component1: {
73
+
default: `light-dark(${slateLight.component1}, ${slateDark.component1})`,
74
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component1}, ${slateDarkP3.component1})`,
75
75
},
76
-
4: {
77
-
default: `light-dark(${slateLight[4]}, ${slateDark[4]})`,
78
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[4]}, ${slateDarkP3[4]})`,
76
+
component2: {
77
+
default: `light-dark(${slateLight.component2}, ${slateDark.component2})`,
78
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component2}, ${slateDarkP3.component2})`,
79
79
},
80
-
5: {
81
-
default: `light-dark(${slateLight[5]}, ${slateDark[5]})`,
82
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[5]}, ${slateDarkP3[5]})`,
80
+
component3: {
81
+
default: `light-dark(${slateLight.component3}, ${slateDark.component3})`,
82
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.component3}, ${slateDarkP3.component3})`,
83
83
},
84
-
6: {
85
-
default: `light-dark(${slateLight[6]}, ${slateDark[6]})`,
86
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[6]}, ${slateDarkP3[6]})`,
84
+
border1: {
85
+
default: `light-dark(${slateLight.border1}, ${slateDark.border1})`,
86
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border1}, ${slateDarkP3.border1})`,
87
87
},
88
-
7: {
89
-
default: `light-dark(${slateLight[7]}, ${slateDark[7]})`,
90
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[7]}, ${slateDarkP3[7]})`,
88
+
border2: {
89
+
default: `light-dark(${slateLight.border2}, ${slateDark.border2})`,
90
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border2}, ${slateDarkP3.border2})`,
91
91
},
92
-
8: {
93
-
default: `light-dark(${slateLight[8]}, ${slateDark[8]})`,
94
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[8]}, ${slateDarkP3[8]})`,
92
+
border3: {
93
+
default: `light-dark(${slateLight.border3}, ${slateDark.border3})`,
94
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.border3}, ${slateDarkP3.border3})`,
95
95
},
96
-
9: {
97
-
default: `light-dark(${slateLight[9]}, ${slateDark[9]})`,
98
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[9]}, ${slateDarkP3[9]})`,
96
+
solid1: {
97
+
default: `light-dark(${slateLight.solid1}, ${slateDark.solid1})`,
98
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.solid1}, ${slateDarkP3.solid1})`,
99
99
},
100
-
10: {
101
-
default: `light-dark(${slateLight[10]}, ${slateDark[10]})`,
102
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[10]}, ${slateDarkP3[10]})`,
100
+
solid2: {
101
+
default: `light-dark(${slateLight.solid2}, ${slateDark.solid2})`,
102
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.solid2}, ${slateDarkP3.solid2})`,
103
103
},
104
-
11: {
105
-
default: `light-dark(${slateLight[11]}, ${slateDark[11]})`,
106
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[11]}, ${slateDarkP3[11]})`,
104
+
text1: {
105
+
default: `light-dark(${slateLight.text1}, ${slateDark.text1})`,
106
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.text1}, ${slateDarkP3.text1})`,
107
107
},
108
-
12: {
109
-
default: `light-dark(${slateLight[12]}, ${slateDark[12]})`,
110
-
"@media (color-gamut: p3)": `light-dark(${slateLightP3[12]}, ${slateDarkP3[12]})`,
108
+
text2: {
109
+
default: `light-dark(${slateLight.text2}, ${slateDark.text2})`,
110
+
"@media (color-gamut: p3)": `light-dark(${slateLightP3.text2}, ${slateDarkP3.text2})`,
111
111
},
112
112
});
113
113
114
114
export const slateInverted = stylex.defineVars({
115
-
1: {
116
-
default: `light-dark(${slateDark[1]}, ${slateLight[1]})`,
117
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[1]}, ${slateLightP3[1]})`,
115
+
bg1: {
116
+
default: `light-dark(${slateDark.bg1}, ${slateLight.bg1})`,
117
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.bg1}, ${slateLightP3.bg1})`,
118
118
},
119
-
2: {
120
-
default: `light-dark(${slateDark[2]}, ${slateLight[2]})`,
121
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[2]}, ${slateLightP3[2]})`,
119
+
bg2: {
120
+
default: `light-dark(${slateDark.bg2}, ${slateLight.bg2})`,
121
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.bg2}, ${slateLightP3.bg2})`,
122
122
},
123
-
3: {
124
-
default: `light-dark(${slateDark[3]}, ${slateLight[3]})`,
125
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[3]}, ${slateLightP3[3]})`,
123
+
component1: {
124
+
default: `light-dark(${slateDark.component1}, ${slateLight["component1"]})`,
125
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component1}, ${slateLightP3.component1})`,
126
126
},
127
-
4: {
128
-
default: `light-dark(${slateDark[4]}, ${slateLight[4]})`,
129
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[4]}, ${slateLightP3[4]})`,
127
+
component2: {
128
+
default: `light-dark(${slateDark.component2}, ${slateLight["component2"]})`,
129
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component2}, ${slateLightP3.component2})`,
130
130
},
131
-
5: {
132
-
default: `light-dark(${slateDark[5]}, ${slateLight[5]})`,
133
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[5]}, ${slateLightP3[5]})`,
131
+
component3: {
132
+
default: `light-dark(${slateDark.component3}, ${slateLight["component3"]})`,
133
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.component3}, ${slateLightP3.component3})`,
134
134
},
135
-
6: {
136
-
default: `light-dark(${slateDark[6]}, ${slateLight[6]})`,
137
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[6]}, ${slateLightP3[6]})`,
135
+
border1: {
136
+
default: `light-dark(${slateDark.border1}, ${slateLight.border1})`,
137
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border1}, ${slateLightP3.border1})`,
138
138
},
139
-
7: {
140
-
default: `light-dark(${slateDark[7]}, ${slateLight[7]})`,
141
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[7]}, ${slateLightP3[7]})`,
139
+
border2: {
140
+
default: `light-dark(${slateDark.border2}, ${slateLight.border2})`,
141
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border2}, ${slateLightP3.border2})`,
142
142
},
143
-
8: {
144
-
default: `light-dark(${slateDark[8]}, ${slateLight[8]})`,
145
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[8]}, ${slateLightP3[8]})`,
143
+
border3: {
144
+
default: `light-dark(${slateDark.border3}, ${slateLight.border3})`,
145
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.border3}, ${slateLightP3.border3})`,
146
146
},
147
-
9: {
148
-
default: `light-dark(${slateDark[9]}, ${slateLight[9]})`,
149
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[9]}, ${slateLightP3[9]})`,
147
+
solid1: {
148
+
default: `light-dark(${slateDark.solid1}, ${slateLight.solid1})`,
149
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.solid1}, ${slateLightP3.solid1})`,
150
150
},
151
-
10: {
152
-
default: `light-dark(${slateDark[10]}, ${slateLight[10]})`,
153
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[10]}, ${slateLightP3[10]})`,
151
+
solid2: {
152
+
default: `light-dark(${slateDark.solid2}, ${slateLight.solid2})`,
153
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.solid2}, ${slateLightP3.solid2})`,
154
154
},
155
-
11: {
156
-
default: `light-dark(${slateDark[11]}, ${slateLight[11]})`,
157
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[11]}, ${slateLightP3[11]})`,
155
+
text1: {
156
+
default: `light-dark(${slateDark.text1}, ${slateLight.text1})`,
157
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.text1}, ${slateLightP3.text1})`,
158
158
},
159
-
12: {
160
-
default: `light-dark(${slateDark[12]}, ${slateLight[12]})`,
161
-
"@media (color-gamut: p3)": `light-dark(${slateDarkP3[12]}, ${slateLightP3[12]})`,
159
+
text2: {
160
+
default: `light-dark(${slateDark.text2}, ${slateLight.text2})`,
161
+
"@media (color-gamut: p3)": `light-dark(${slateDarkP3.text2}, ${slateLightP3.text2})`,
162
162
},
163
163
});
164
164
165
165
export const plum = stylex.defineVars({
166
-
1: {
166
+
bg1: {
167
167
default: "light-dark(#fefcff, #181118)",
168
168
"@media (color-gamut: p3)":
169
169
"light-dark(color(display-p3 0.995 0.988 0.999), color(display-p3 0.09 0.068 0.092))",
170
170
},
171
-
2: {
171
+
bg2: {
172
172
default: "light-dark(#fdf7fd, #201320)",
173
173
"@media (color-gamut: p3)":
174
174
"light-dark(color(display-p3 0.988 0.971 0.99), color(display-p3 0.118 0.077 0.121))",
175
175
},
176
-
3: {
176
+
component1: {
177
177
default: "light-dark(#fbebfb, #351a35)",
178
178
"@media (color-gamut: p3)":
179
179
"light-dark(color(display-p3 0.973 0.923 0.98), color(display-p3 0.192 0.105 0.202))",
180
180
},
181
-
4: {
181
+
component2: {
182
182
default: "light-dark(#f7def8, #451d47)",
183
183
"@media (color-gamut: p3)":
184
184
"light-dark(color(display-p3 0.953 0.875 0.966), color(display-p3 0.25 0.121 0.271))",
185
185
},
186
-
5: {
186
+
component3: {
187
187
default: "light-dark(#f2d1f3, #512454)",
188
188
"@media (color-gamut: p3)":
189
189
"light-dark(color(display-p3 0.926 0.825 0.945), color(display-p3 0.293 0.152 0.319))",
190
190
},
191
-
6: {
191
+
border1: {
192
192
default: "light-dark(#e9c2ec, #5e3061)",
193
193
"@media (color-gamut: p3)":
194
194
"light-dark(color(display-p3 0.89 0.765 0.916), color(display-p3 0.343 0.198 0.372))",
195
195
},
196
-
7: {
196
+
border2: {
197
197
default: "light-dark(#deade3, #734079)",
198
198
"@media (color-gamut: p3)":
199
199
"light-dark(color(display-p3 0.84 0.686 0.877), color(display-p3 0.424 0.262 0.461))",
200
200
},
201
-
8: {
201
+
border3: {
202
202
default: "light-dark(#cf91d8, #92549c)",
203
203
"@media (color-gamut: p3)":
204
204
"light-dark(color(display-p3 0.775 0.58 0.832), color(display-p3 0.54 0.341 0.595))",
205
205
},
206
-
9: {
206
+
solid1: {
207
207
default: "light-dark(#ab4aba, #ab4aba)",
208
208
"@media (color-gamut: p3)":
209
209
"light-dark(color(display-p3 0.624 0.313 0.708), color(display-p3 0.624 0.313 0.708))",
210
210
},
211
-
10: {
211
+
solid2: {
212
212
default: "light-dark(#a144af, #b658c4)",
213
213
"@media (color-gamut: p3)":
214
214
"light-dark(color(display-p3 0.587 0.29 0.667), color(display-p3 0.666 0.365 0.748))",
215
215
},
216
-
11: {
216
+
text1: {
217
217
default: "light-dark(#953ea3, #e796f3)",
218
218
"@media (color-gamut: p3)":
219
219
"light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933))",
220
220
},
221
-
12: {
221
+
text2: {
222
222
default: "light-dark(#53195d, #f4d4f4)",
223
223
"@media (color-gamut: p3)":
224
224
"light-dark(color(display-p3 0.299 0.114 0.352), color(display-p3 0.936 0.836 0.949))",
···
226
226
});
227
227
228
228
export const blue = stylex.defineVars({
229
-
1: {
229
+
bg1: {
230
230
default: "light-dark(#fbfdff, #0d1520)",
231
231
"@media (color-gamut: p3)":
232
232
"light-dark(color(display-p3 0.986 0.992 0.999), color(display-p3 0.057 0.081 0.122))",
233
233
},
234
-
2: {
234
+
bg2: {
235
235
default: "light-dark(#f4faff, #111927)",
236
236
"@media (color-gamut: p3)":
237
237
"light-dark(color(display-p3 0.96 0.979 0.998), color(display-p3 0.072 0.098 0.147))",
238
238
},
239
-
3: {
239
+
component1: {
240
240
default: "light-dark(#e6f4fe, #0d2847)",
241
241
"@media (color-gamut: p3)":
242
242
"light-dark(color(display-p3 0.912 0.956 0.991), color(display-p3 0.078 0.154 0.27))",
243
243
},
244
-
4: {
244
+
component2: {
245
245
default: "light-dark(#d5efff, #003362)",
246
246
"@media (color-gamut: p3)":
247
247
"light-dark(color(display-p3 0.853 0.932 1), color(display-p3 0.033 0.197 0.37))",
248
248
},
249
-
5: {
249
+
component3: {
250
250
default: "light-dark(#c2e5ff, #004074)",
251
251
"@media (color-gamut: p3)":
252
252
"light-dark(color(display-p3 0.788 0.894 0.998), color(display-p3 0.08 0.245 0.441))",
253
253
},
254
-
6: {
254
+
border1: {
255
255
default: "light-dark(#acd8fc, #104d87)",
256
256
"@media (color-gamut: p3)":
257
257
"light-dark(color(display-p3 0.709 0.843 0.976), color(display-p3 0.14 0.298 0.511))",
258
258
},
259
-
7: {
259
+
border2: {
260
260
default: "light-dark(#8ec8f6, #205d9e)",
261
261
"@media (color-gamut: p3)":
262
262
"light-dark(color(display-p3 0.606 0.777 0.947), color(display-p3 0.195 0.361 0.6))",
263
263
},
264
-
8: {
264
+
border3: {
265
265
default: "light-dark(#5eb1ef, #2870bd)",
266
266
"@media (color-gamut: p3)":
267
267
"light-dark(color(display-p3 0.451 0.688 0.917), color(display-p3 0.239 0.434 0.72))",
268
268
},
269
-
9: {
269
+
solid1: {
270
270
default: "light-dark(#0090ff, #0090ff)",
271
271
"@media (color-gamut: p3)":
272
272
"light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969))",
273
273
},
274
-
10: {
274
+
solid2: {
275
275
default: "light-dark(#0588f0, #3b9eff)",
276
276
"@media (color-gamut: p3)":
277
277
"light-dark(color(display-p3 0.234 0.523 0.912), color(display-p3 0.344 0.612 0.973))",
278
278
},
279
-
11: {
279
+
text1: {
280
280
default: "light-dark(#0d74ce, #70b8ff)",
281
281
"@media (color-gamut: p3)":
282
282
"light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1))",
283
283
},
284
-
12: {
284
+
text2: {
285
285
default: "light-dark(#113264, #c2e6ff)",
286
286
"@media (color-gamut: p3)":
287
287
"light-dark(color(display-p3 0.102 0.193 0.379), color(display-p3 0.788 0.898 0.99))",
···
289
289
});
290
290
291
291
export const red = stylex.defineVars({
292
-
1: {
292
+
bg1: {
293
293
default: "light-dark(#fffcfc, #191111)",
294
294
"@media (color-gamut: p3)":
295
295
"light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067))",
296
296
},
297
-
2: {
297
+
bg2: {
298
298
default: "light-dark(#fff7f7, #201314)",
299
299
"@media (color-gamut: p3)":
300
300
"light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079))",
301
301
},
302
-
3: {
302
+
component1: {
303
303
default: "light-dark(#feebec, #3b1219)",
304
304
"@media (color-gamut: p3)":
305
305
"light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099))",
306
306
},
307
-
4: {
307
+
component2: {
308
308
default: "light-dark(#ffdbdc, #500f1c)",
309
309
"@media (color-gamut: p3)":
310
310
"light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113))",
311
311
},
312
-
5: {
312
+
component3: {
313
313
default: "light-dark(#ffcdce, #611623)",
314
314
"@media (color-gamut: p3)":
315
315
"light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142))",
316
316
},
317
-
6: {
317
+
border1: {
318
318
default: "light-dark(#fdbdbe, #72232d)",
319
319
"@media (color-gamut: p3)":
320
320
"light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183))",
321
321
},
322
-
7: {
322
+
border2: {
323
323
default: "light-dark(#f4a9aa, #8c333a)",
324
324
"@media (color-gamut: p3)":
325
325
"light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236))",
326
326
},
327
-
8: {
327
+
border3: {
328
328
default: "light-dark(#eb8e90, #b54548)",
329
329
"@media (color-gamut: p3)":
330
330
"light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297))",
331
331
},
332
-
9: {
332
+
solid1: {
333
333
default: "light-dark(#e5484d, #e5484d)",
334
334
"@media (color-gamut: p3)":
335
335
"light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324))",
336
336
},
337
-
10: {
337
+
solid2: {
338
338
default: "light-dark(#dc3e42, #ec5d5e)",
339
339
"@media (color-gamut: p3)":
340
340
"light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387))",
341
341
},
342
-
11: {
342
+
text1: {
343
343
default: "light-dark(#ce2c31, #ff9592)",
344
344
"@media (color-gamut: p3)":
345
345
"light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55))",
346
346
},
347
-
12: {
347
+
text2: {
348
348
default: "light-dark(#641723, #ffd1d9)",
349
349
"@media (color-gamut: p3)":
350
350
"light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))",
+76
-75
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
+76
-75
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { slate, plum, red } from "./colors.stylex";
4
+
import { fontFamily } from "./typography.stylex";
4
5
5
6
// eslint-disable-next-line @stylexjs/enforce-extension
6
7
export const gray = stylex.create({
7
-
bg: { backgroundColor: slate[1] },
8
-
bgSubtle: { backgroundColor: slate[2] },
9
-
bgDim: { backgroundColor: slate[3] },
10
-
bgSecondary: { backgroundColor: slate[4] },
11
-
bgActive: { backgroundColor: slate[5] },
8
+
bg: { backgroundColor: slate.bg1 },
9
+
bgSubtle: { backgroundColor: slate.bg2 },
10
+
bgDim: { backgroundColor: slate.component1 },
11
+
bgSecondary: { backgroundColor: slate.component2 },
12
+
bgActive: { backgroundColor: slate.component3 },
12
13
borderDim: {
13
-
borderColor: slate[6],
14
+
borderColor: slate.border1,
14
15
borderStyle: "solid",
15
16
borderWidth: 1,
16
17
},
17
18
border: {
18
-
borderColor: slate[7],
19
+
borderColor: slate.border2,
19
20
borderStyle: "solid",
20
21
borderWidth: 1,
21
22
},
22
23
borderInteractive: {
23
24
borderColor: {
24
-
default: slate[7],
25
-
":hover": slate[8],
25
+
default: slate.border2,
26
+
":hover": slate.border3,
26
27
},
27
28
borderStyle: "solid",
28
29
borderWidth: 1,
···
31
32
transitionProperty: "background-color, border-color",
32
33
transitionTimingFunction: "ease-in-out",
33
34
},
34
-
bgSolid: { backgroundColor: slate[9] },
35
-
bgSolidDark: { backgroundColor: slate[10] },
36
-
textDim: { color: slate[11] },
37
-
text: { color: slate[12] },
35
+
bgSolid: { backgroundColor: slate.solid1 },
36
+
bgSolidDark: { backgroundColor: slate.solid2 },
37
+
textDim: { color: slate.text1, fontFamily: fontFamily["sans"] },
38
+
text: { color: slate.text2, fontFamily: fontFamily["sans"] },
38
39
textContrast: { color: "white" },
39
40
40
41
bgGhost: {
41
42
backgroundColor: {
42
43
default: "transparent",
43
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[4],
44
-
":active:not(:disabled)": slate[5],
45
-
":disabled": slate[3],
44
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
45
+
":active:not(:disabled)": slate.component3,
46
+
":disabled": slate.component1,
46
47
},
47
48
transitionDuration: "100ms",
48
49
transitionProperty: "background-color, border-color",
···
50
51
},
51
52
bgUi: {
52
53
backgroundColor: {
53
-
default: slate[3],
54
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[4],
55
-
":active:not(:disabled)": slate[5],
56
-
":disabled": slate[3],
54
+
default: slate.component1,
55
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
56
+
":active:not(:disabled)": slate.component3,
57
+
":disabled": slate.component1,
57
58
},
58
59
transitionDuration: "100ms",
59
60
transitionProperty: "background-color, border-color",
···
61
62
},
62
63
bgAction: {
63
64
backgroundColor: {
64
-
default: slate[4],
65
-
":hover:not(:has(* button:hover)):not(:disabled)": slate[5],
66
-
":active:not(:disabled)": slate[6],
67
-
":disabled": slate[3],
65
+
default: slate.component2,
66
+
":hover:not(:has(* button:hover)):not(:disabled)": slate.component3,
67
+
":active:not(:disabled)": slate.component3,
68
+
":disabled": slate.component1,
68
69
},
69
70
transitionDuration: "100ms",
70
71
transitionProperty: "background-color, border-color",
···
74
75
75
76
// eslint-disable-next-line @stylexjs/enforce-extension
76
77
export const primary = stylex.create({
77
-
bg: { backgroundColor: plum[1] },
78
-
bgSubtle: { backgroundColor: plum[2] },
79
-
bgDim: { backgroundColor: plum[3] },
80
-
bgSecondary: { backgroundColor: plum[4] },
81
-
bgActive: { backgroundColor: plum[5] },
78
+
bg: { backgroundColor: plum.bg1 },
79
+
bgSubtle: { backgroundColor: plum.bg2 },
80
+
bgDim: { backgroundColor: plum.component1 },
81
+
bgSecondary: { backgroundColor: plum.component2 },
82
+
bgActive: { backgroundColor: plum.component3 },
82
83
borderDim: {
83
-
borderColor: plum[6],
84
+
borderColor: plum.border1,
84
85
borderStyle: "solid",
85
86
borderWidth: 1,
86
87
},
87
88
border: {
88
-
borderColor: plum[7],
89
+
borderColor: plum.border2,
89
90
borderStyle: "solid",
90
91
borderWidth: 1,
91
92
},
92
93
borderInteractive: {
93
94
borderColor: {
94
-
default: plum[7],
95
-
":hover": plum[8],
95
+
default: plum.border2,
96
+
":hover": plum.border3,
96
97
},
97
98
borderStyle: "solid",
98
99
borderWidth: 1,
···
101
102
transitionProperty: "background-color, border-color",
102
103
transitionTimingFunction: "ease-in-out",
103
104
},
104
-
bgSolid: { backgroundColor: plum[9] },
105
-
bgSolidDark: { backgroundColor: plum[10] },
106
-
textDim: { color: plum[11] },
107
-
text: { color: plum[12] },
105
+
bgSolid: { backgroundColor: plum.solid1 },
106
+
bgSolidDark: { backgroundColor: plum.solid2 },
107
+
textDim: { color: plum.text1, fontFamily: fontFamily["sans"] },
108
+
text: { color: plum.text2, fontFamily: fontFamily["sans"] },
108
109
textContrast: { color: "white" },
109
110
110
111
bgGhost: {
111
112
backgroundColor: {
112
113
default: "transparent",
113
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[4],
114
-
":active:not(:disabled)": plum[5],
115
-
":disabled": plum[3],
114
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component2,
115
+
":active:not(:disabled)": plum.component3,
116
+
":disabled": plum.component1,
116
117
},
117
118
transitionDuration: "100ms",
118
119
transitionProperty: "background-color, border-color",
···
120
121
},
121
122
bgUi: {
122
123
backgroundColor: {
123
-
default: plum[3],
124
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[4],
125
-
":active": plum[5],
126
-
":disabled": plum[3],
124
+
default: plum.component1,
125
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component2,
126
+
":active": plum.component3,
127
+
":disabled": plum.component1,
127
128
},
128
129
transitionDuration: "100ms",
129
130
transitionProperty: "background-color, border-color",
···
131
132
},
132
133
bgAction: {
133
134
backgroundColor: {
134
-
default: plum[4],
135
-
":hover:not(:has(* button:hover)):not(:disabled)": plum[5],
136
-
":active:not(:disabled)": plum[6],
137
-
":disabled": plum[3],
135
+
default: plum.component2,
136
+
":hover:not(:has(* button:hover)):not(:disabled)": plum.component3,
137
+
":active:not(:disabled)": plum.component3,
138
+
":disabled": plum.component1,
138
139
},
139
140
transitionDuration: "100ms",
140
141
transitionProperty: "background-color, border-color",
···
144
145
145
146
// eslint-disable-next-line @stylexjs/enforce-extension
146
147
export const critical = stylex.create({
147
-
bg: { backgroundColor: red[1] },
148
-
bgSubtle: { backgroundColor: red[2] },
149
-
bgDim: { backgroundColor: red[3] },
150
-
bgSecondary: { backgroundColor: red[4] },
151
-
bgActive: { backgroundColor: red[5] },
148
+
bg: { backgroundColor: red.bg1 },
149
+
bgSubtle: { backgroundColor: red.bg2 },
150
+
bgDim: { backgroundColor: red.component1 },
151
+
bgSecondary: { backgroundColor: red.component2 },
152
+
bgActive: { backgroundColor: red.component3 },
152
153
borderDim: {
153
-
borderColor: red[6],
154
+
borderColor: red.border1,
154
155
borderStyle: "solid",
155
156
borderWidth: 1,
156
157
},
157
158
border: {
158
-
borderColor: red[7],
159
+
borderColor: red.border2,
159
160
borderStyle: "solid",
160
161
borderWidth: 1,
161
162
},
162
163
borderInteractive: {
163
164
borderColor: {
164
-
default: red[7],
165
-
":hover": red[8],
165
+
default: red.border2,
166
+
":hover": red.border3,
166
167
},
167
168
borderStyle: "solid",
168
169
borderWidth: 1,
···
170
171
transitionProperty: "background-color, border-color",
171
172
transitionTimingFunction: "ease-in-out",
172
173
},
173
-
bgSolid: { backgroundColor: red[9] },
174
-
bgSolidDark: { backgroundColor: red[10] },
175
-
textDim: { color: red[11] },
176
-
text: { color: red[12] },
174
+
bgSolid: { backgroundColor: red.solid1 },
175
+
bgSolidDark: { backgroundColor: red.solid2 },
176
+
textDim: { color: red.text1, fontFamily: fontFamily["sans"] },
177
+
text: { color: red.text2, fontFamily: fontFamily["sans"] },
177
178
textContrast: { color: "white" },
178
179
179
180
bgGhost: {
180
181
backgroundColor: {
181
182
default: "transparent",
182
-
":hover:not(:has(* button:hover)):not(:disabled)": red[4],
183
-
":active:not(:disabled)": red[5],
184
-
":disabled": red[3],
183
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
184
+
":active:not(:disabled)": red.component3,
185
+
":disabled": red.component1,
185
186
},
186
187
transitionDuration: "100ms",
187
188
transitionProperty: "background-color, border-color",
···
189
190
},
190
191
bgUi: {
191
192
backgroundColor: {
192
-
default: red[3],
193
-
":hover:not(:has(* button:hover)):not(:disabled)": red[4],
194
-
":active:not(:disabled)": red[5],
195
-
":disabled": red[3],
193
+
default: red.component1,
194
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
195
+
":active:not(:disabled)": red.component3,
196
+
":disabled": red.component1,
196
197
},
197
198
transitionDuration: "100ms",
198
199
transitionProperty: "background-color, border-color",
···
200
201
},
201
202
bgAction: {
202
203
backgroundColor: {
203
-
default: red[4],
204
-
":hover:not(:has(* button:hover)):not(:disabled)": red[5],
205
-
":active:not(:disabled)": red[6],
206
-
":disabled": red[3],
204
+
default: red.component2,
205
+
":hover:not(:has(* button:hover)):not(:disabled)": red.component3,
206
+
":active:not(:disabled)": red.component3,
207
+
":disabled": red.component1,
207
208
},
208
209
transitionDuration: "100ms",
209
210
transitionProperty: "background-color, border-color",
···
211
212
},
212
213
bgSolidAction: {
213
214
backgroundColor: {
214
-
default: red[9],
215
-
":hover:not(:has(* button:hover)):not(:disabled)": red[10],
216
-
":disabled": red[3],
215
+
default: red.solid1,
216
+
":hover:not(:has(* button:hover)):not(:disabled)": red.solid2,
217
+
":disabled": red.component1,
217
218
},
218
219
transitionDuration: "100ms",
219
220
transitionProperty: "background-color, border-color",
+9
packages/hip-ui/src/components/theme/typography.stylex.tsx
+9
packages/hip-ui/src/components/theme/typography.stylex.tsx
···
123
123
margin: 0,
124
124
scrollMarginBlockStart: spacing["20"],
125
125
},
126
+
heading5: {
127
+
// eslint-disable-next-line @stylexjs/valid-styles
128
+
fontFamily: fontFamily["sans"],
129
+
fontSize: { default: fontSize["lg"] },
130
+
// eslint-disable-next-line @stylexjs/valid-styles
131
+
fontWeight: fontWeight["semibold"],
132
+
letterSpacing: tracking["tight"],
133
+
lineHeight: { default: lineHeight["lg"] },
134
+
},
126
135
body: {
127
136
// eslint-disable-next-line @stylexjs/valid-styles
128
137
fontFamily: fontFamily["sans"],
+7
-7
packages/hip-ui/src/components/theme/useButtonStyles.ts
+7
-7
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
95
95
},
96
96
secondary: {
97
97
borderColor: {
98
-
default: slate[3],
99
-
":hover": slate[4],
100
-
":active": slate[5],
98
+
default: slate.component1,
99
+
":hover": slate.component2,
100
+
":active": slate.component3,
101
101
},
102
102
},
103
103
tertiary: {
104
104
borderColor: {
105
105
default: "transparent",
106
-
":hover": slate[4],
107
-
":active": slate[5],
106
+
":hover": slate.component2,
107
+
":active": slate.component3,
108
108
},
109
109
},
110
110
···
116
116
borderTopRightRadius: { ":not(:last-child)": 0 },
117
117
},
118
118
secondaryGroupHorizontal: {
119
-
borderRightColor: { ":not(:last-child)": slate[7] },
119
+
borderRightColor: { ":not(:last-child)": slate.border2 },
120
120
},
121
121
groupVertical: {
122
122
borderBottomLeftRadius: { ":not(:last-child)": 0 },
···
126
126
borderTopWidth: { ":not(:first-child)": 0 },
127
127
},
128
128
secondaryGroupVertical: {
129
-
borderBottomColor: { ":not(:last-child)": slate[7] },
129
+
borderBottomColor: { ":not(:last-child)": slate.border2 },
130
130
},
131
131
});
132
132
+87
packages/hip-ui/src/components/theme/useDialogStyles.ts
+87
packages/hip-ui/src/components/theme/useDialogStyles.ts
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { animations } from "../theme/animations.stylex";
6
+
import { radius } from "../theme/radius.stylex";
7
+
import { shadow } from "../theme/shadow.stylex";
8
+
import { Size } from "../types";
9
+
import { gray } from "./semantic-color.stylex";
10
+
11
+
const styles = stylex.create({
12
+
overlay: {
13
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
14
+
height: "var(--page-height)",
15
+
left: 0,
16
+
position: "absolute",
17
+
top: 0,
18
+
width: "100vw",
19
+
zIndex: 100,
20
+
21
+
animationDuration: "200ms",
22
+
animationName: {
23
+
":is([data-entering])": animations.fadeIn,
24
+
},
25
+
animationTimingFunction: "ease-in",
26
+
opacity: {
27
+
default: 1,
28
+
":is([data-exiting])": 0,
29
+
},
30
+
transitionDuration: {
31
+
":is([data-exiting])": "100ms",
32
+
},
33
+
transitionProperty: "opacity",
34
+
transitionTimingFunction: "ease-in-out",
35
+
},
36
+
modal: {
37
+
borderRadius: radius["lg"],
38
+
boxShadow: shadow["lg"],
39
+
display: "flex",
40
+
flexDirection: "column",
41
+
left: "50%",
42
+
maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
43
+
outline: "none",
44
+
position: "fixed",
45
+
top: "calc(var(--visual-viewport-height) / 2)",
46
+
translate: "-50% -50%",
47
+
48
+
animationDuration: { ":is([data-entering])": "300ms" },
49
+
animationName: { ":is([data-entering])": animations.zoomIn },
50
+
animationTimingFunction: {
51
+
":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
52
+
},
53
+
},
54
+
dialog: {
55
+
display: "flex",
56
+
flexDirection: "column",
57
+
flexGrow: 1,
58
+
minHeight: 0,
59
+
outline: "none",
60
+
},
61
+
sm: {
62
+
width: 400,
63
+
},
64
+
md: {
65
+
width: 600,
66
+
},
67
+
lg: {
68
+
width: 800,
69
+
},
70
+
});
71
+
72
+
export function useDialogStyles({ size: sizeProp }: { size?: Size }) {
73
+
const size = sizeProp || use(SizeContext);
74
+
75
+
return {
76
+
overlay: styles.overlay,
77
+
modal: [
78
+
styles.modal,
79
+
styles.modal,
80
+
gray.bg,
81
+
gray.text,
82
+
gray.border,
83
+
styles[size],
84
+
],
85
+
dialog: styles.dialog,
86
+
};
87
+
}
+4
-4
packages/hip-ui/src/components/theme/useInputStyles.ts
+4
-4
packages/hip-ui/src/components/theme/useInputStyles.ts
···
48
48
padding: 0,
49
49
50
50
borderColor: {
51
-
default: slate[7],
52
-
":hover": slate[8],
53
-
":focus": slate[9],
51
+
default: slate.border2,
52
+
":hover": slate.border3,
53
+
":focus": slate.solid1,
54
54
},
55
55
borderStyle: "solid",
56
56
borderWidth: 1,
···
63
63
borderWidth: 0,
64
64
boxSizing: "border-box",
65
65
color: {
66
-
":is(::placeholder,[data-placeholder])": slate[11],
66
+
":is(::placeholder,[data-placeholder])": slate.text1,
67
67
},
68
68
display: "flex",
69
69
flexGrow: 1,
+9
-7
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+9
-7
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
35
35
alignItems: "center",
36
36
backgroundColor: {
37
37
default: "transparent",
38
-
[":is([data-react-aria-pressable=true][data-focused] *)"]: slate[4],
39
-
[":is([data-react-aria-pressable=true][data-selected=true] *)"]: slate[4],
38
+
[":is([data-react-aria-pressable=true][data-focused] *)"]:
39
+
slate.component2,
40
+
[":is([data-react-aria-pressable=true][data-selected=true] *)"]:
41
+
slate.component2,
40
42
[":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)"]:
41
-
slate[4],
43
+
slate.component2,
42
44
[":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
43
-
slate[5],
45
+
slate.component3,
44
46
},
45
47
borderRadius: radius["md"],
46
48
boxSizing: "border-box",
47
49
color: {
48
-
default: slate[12],
49
-
[":is([data-react-aria-pressable=true][data-disabled] *)"]: slate[8],
50
+
default: slate.text2,
51
+
[":is([data-react-aria-pressable=true][data-disabled] *)"]: slate.border3,
50
52
},
51
53
display: "flex",
52
54
flexGrow: 1,
···
70
72
fontSize: fontSize["base"],
71
73
},
72
74
check: {
73
-
color: plum[9],
75
+
color: plum.solid1,
74
76
},
75
77
addon: {
76
78
alignItems: "center",
+3
-3
packages/hip-ui/src/components/tooltip/index.tsx
+3
-3
packages/hip-ui/src/components/tooltip/index.tsx
···
17
17
18
18
const tooltipStyle = stylex.create({
19
19
content: {
20
-
backgroundColor: slateInverted[1],
20
+
backgroundColor: slateInverted.bg1,
21
21
borderRadius: radius["md"],
22
22
boxShadow: shadow["sm"],
23
-
color: slateInverted[11],
23
+
color: slateInverted.text1,
24
24
fontFamily: fontFamily["sans"],
25
25
fontSize: fontSize["sm"],
26
26
lineHeight: lineHeight["sm"],
···
49
49
},
50
50
caret: {
51
51
display: "flex",
52
-
fill: slateInverted[1],
52
+
fill: slateInverted.bg1,
53
53
},
54
54
arrow: {
55
55
transform: {