A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

avatar

+1897 -729
+4 -1
.vscode/settings.json
··· 3 3 { 4 4 "mode": "auto" 5 5 } 6 - ] 6 + ], 7 + "search.exclude": { 8 + "**/apps/example/src/components/**": true 9 + } 7 10 }
+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
··· 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
··· 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
··· 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 + }
+3 -2
apps/example/src/components/button-group/index.tsx
··· 18 18 }, 19 19 }); 20 20 21 - interface ButtonGroupProps extends Omit<GroupProps, "className" | "style"> { 21 + export interface ButtonGroupProps 22 + extends Omit<GroupProps, "className" | "style"> { 22 23 style?: stylex.StyleXStyles | stylex.StyleXStyles[]; 23 24 orientation?: "horizontal" | "vertical"; 24 25 } ··· 36 37 styles.group, 37 38 orientation === "horizontal" && styles.horizontal, 38 39 orientation === "vertical" && styles.vertical, 39 - style, 40 + style 40 41 )} 41 42 {...props} 42 43 >
+2 -1
apps/example/src/components/button/index.tsx
··· 9 9 import { useButtonStyles } from "../theme/useButtonStyles"; 10 10 import { Size, ButtonVariant } from "../types"; 11 11 12 - interface ButtonProps extends Omit<AriaButtonProps, "className" | "style"> { 12 + export interface ButtonProps 13 + extends Omit<AriaButtonProps, "className" | "style"> { 13 14 style?: stylex.StyleXStyles | stylex.StyleXStyles[]; 14 15 variant?: ButtonVariant; 15 16 size?: Size;
+1 -1
apps/example/src/components/checkbox/index.tsx
··· 103 103 ? [gray.bgSolid, gray.border, styles.checked] 104 104 : isSelected 105 105 ? [primary.bgSolid, primary.borderInteractive, styles.checked] 106 - : [gray.borderInteractive], 106 + : [gray.borderInteractive] 107 107 )} 108 108 > 109 109 {isIndeterminate ? (
+6 -58
apps/example/src/components/command-menu/index.tsx
··· 16 16 import { SizeContext } from "../context"; 17 17 import { SearchField } from "../search-field"; 18 18 import { Separator } from "../separator"; 19 - import { animations } from "../theme/animations.stylex"; 20 - import { radius } from "../theme/radius.stylex"; 21 - import { gray } from "../theme/semantic-color.stylex"; 22 - import { shadow } from "../theme/shadow.stylex"; 23 19 import { spacing } from "../theme/spacing.stylex"; 20 + import { useDialogStyles } from "../theme/useDialogStyles"; 24 21 25 22 const styles = stylex.create({ 26 - overlay: { 27 - backgroundColor: "rgba(0, 0, 0, 0.5)", 28 - height: "var(--page-height)", 29 - left: 0, 30 - position: "absolute", 31 - top: 0, 32 - width: "100vw", 33 - zIndex: 100, 34 - 35 - animationDuration: "200ms", 36 - animationName: { 37 - ":is([data-entering])": animations.fadeIn, 38 - }, 39 - animationTimingFunction: "ease-in", 40 - opacity: { 41 - default: 1, 42 - ":is([data-exiting])": 0, 43 - }, 44 - transitionDuration: { 45 - ":is([data-exiting])": "100ms", 46 - }, 47 - transitionProperty: "opacity", 48 - transitionTimingFunction: "ease-in-out", 49 - }, 50 - modal: { 51 - borderRadius: radius["lg"], 52 - boxShadow: shadow["lg"], 53 - display: "flex", 54 - flexDirection: "column", 55 - left: "50%", 56 - maxHeight: "calc(var(--visual-viewport-height) * 0.8)", 57 - outline: "none", 58 - position: "fixed", 59 - top: "calc(var(--visual-viewport-height) / 2)", 60 - translate: "-50% -50%", 61 - width: 400, 62 - 63 - animationDuration: { ":is([data-entering])": "300ms" }, 64 - animationName: { ":is([data-entering])": animations.zoomIn }, 65 - animationTimingFunction: { 66 - ":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)", 67 - }, 68 - }, 69 - dialog: { 70 - display: "flex", 71 - flexDirection: "column", 72 - flexGrow: 1, 73 - minHeight: 0, 74 - outline: "none", 75 - }, 76 23 menu: { 77 24 flexGrow: 1, 78 25 marginLeft: `calc(${spacing["0.5"]} * -1)`, ··· 115 62 disableGlobalShortcut = false, 116 63 }: CommandMenuProps<T>) { 117 64 const defaultFilter = useFilter({ sensitivity: "base" }); 65 + const dialogStyles = useDialogStyles({ size: "sm" }); 118 66 const [isOpen, setIsOpen] = useControlledState( 119 67 isOpenProp, 120 68 defaultOpen ?? false, 121 - onOpenChange, 69 + onOpenChange 122 70 ); 123 71 const onClose = useEffectEvent(() => { 124 72 setIsOpen(false); ··· 146 94 isDismissable 147 95 isOpen={isOpen} 148 96 onOpenChange={setIsOpen} 149 - {...stylex.props(styles.overlay)} 97 + {...stylex.props(dialogStyles.overlay)} 150 98 > 151 - <Modal {...stylex.props(styles.modal, gray.bg, gray.text, gray.border)}> 152 - <Dialog {...stylex.props(styles.dialog)}> 99 + <Modal {...stylex.props(dialogStyles.modal)}> 100 + <Dialog {...stylex.props(dialogStyles.dialog)}> 153 101 <Autocomplete 154 102 filter={filter ?? defaultFilter.contains} 155 103 defaultInputValue={defaultInputValue}
+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
··· 12 12 const styles = stylex.create({ 13 13 link: { 14 14 color: { 15 - default: blue[10], 16 - ":visited": blue[11], 15 + default: blue.text2, 16 + ":visited": blue.text1, 17 17 }, 18 18 cursor: "pointer", 19 19 fontFamily: fontFamily["sans"],
+2 -2
apps/example/src/components/number-field/index.tsx
··· 45 45 }, 46 46 47 47 color: { 48 - default: slate[12], 49 - ":disabled": slate[11], 48 + default: slate.text2, 49 + ":disabled": slate.text1, 50 50 }, 51 51 }, 52 52 });
+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
··· 8 8 9 9 const styles = stylex.create({ 10 10 separator: { 11 - backgroundColor: slate[7], 11 + backgroundColor: slate.border2, 12 12 borderWidth: 0, 13 13 height: { 14 14 default: "1px",
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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",
+23 -23
apps/example/src/components/toggle-button/index.tsx
··· 14 14 const styles = stylex.create({ 15 15 primarySelected: { 16 16 backgroundColor: { 17 - default: plum[9], 18 - ":hover": plum[10], 19 - ":active": plum[11], 17 + default: plum.solid1, 18 + ":hover": plum.solid2, 19 + ":active": plum.text1, 20 20 }, 21 21 color: "light-dark(white, black)", 22 22 }, 23 23 secondarySelected: { 24 24 backgroundColor: { 25 - default: slate[6], 26 - ":hover": slate[7], 27 - ":active": slate[8], 25 + default: slate.border1, 26 + ":hover": slate.border2, 27 + ":active": slate.border3, 28 28 }, 29 29 borderColor: { 30 - default: slate[6], 31 - ":hover": slate[7], 32 - ":active": slate[8], 30 + default: slate.border1, 31 + ":hover": slate.border2, 32 + ":active": slate.border3, 33 33 }, 34 34 }, 35 35 tertiarySelected: { 36 36 backgroundColor: { 37 - default: slate[6], 38 - ":hover": slate[7], 39 - ":active": slate[8], 37 + default: slate.border1, 38 + ":hover": slate.border2, 39 + ":active": slate.border3, 40 40 }, 41 41 borderColor: { 42 - default: slate[6], 43 - ":hover": slate[7], 44 - ":active": slate[8], 42 + default: slate.border1, 43 + ":hover": slate.border2, 44 + ":active": slate.border3, 45 45 }, 46 46 }, 47 47 outlineSelected: { 48 48 backgroundColor: { 49 - default: slate[6], 50 - ":hover": slate[7], 51 - ":active": slate[8], 49 + default: slate.border1, 50 + ":hover": slate.border2, 51 + ":active": slate.border3, 52 52 }, 53 53 borderColor: { 54 - default: slate[6], 55 - ":hover": slate[7], 56 - ":active": slate[8], 54 + default: slate.border1, 55 + ":hover": slate.border2, 56 + ":active": slate.border3, 57 57 }, 58 58 }, 59 59 sm: { ··· 113 113 buttonStyles, 114 114 styles[size], 115 115 isSelected ? styles[`${variant}Selected`] : undefined, 116 - style 116 + style, 117 117 ); 118 118 119 119 return ( ··· 130 130 <span key={`${child}-${index.toString()}`}>{child}</span> 131 131 ) : ( 132 132 child 133 - ) 133 + ), 134 134 )} 135 135 </AriaToggleButton> 136 136 );
+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
··· 16 16 "packageManager": "pnpm@10.18.2", 17 17 "engines": { 18 18 "node": ">=18" 19 + }, 20 + "prettier": { 21 + "trailingComma": "all" 19 22 } 20 23 }
+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
··· 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
··· 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
··· 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
··· 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
··· 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 + }
+3 -2
packages/hip-ui/src/components/button-group/index.tsx
··· 18 18 }, 19 19 }); 20 20 21 - interface ButtonGroupProps extends Omit<GroupProps, "className" | "style"> { 21 + export interface ButtonGroupProps 22 + extends Omit<GroupProps, "className" | "style"> { 22 23 style?: stylex.StyleXStyles | stylex.StyleXStyles[]; 23 24 orientation?: "horizontal" | "vertical"; 24 25 } ··· 36 37 styles.group, 37 38 orientation === "horizontal" && styles.horizontal, 38 39 orientation === "vertical" && styles.vertical, 39 - style, 40 + style 40 41 )} 41 42 {...props} 42 43 >
+2 -1
packages/hip-ui/src/components/button/index.tsx
··· 9 9 import { useButtonStyles } from "../theme/useButtonStyles"; 10 10 import { Size, ButtonVariant } from "../types"; 11 11 12 - interface ButtonProps extends Omit<AriaButtonProps, "className" | "style"> { 12 + export interface ButtonProps 13 + extends Omit<AriaButtonProps, "className" | "style"> { 13 14 style?: stylex.StyleXStyles | stylex.StyleXStyles[]; 14 15 variant?: ButtonVariant; 15 16 size?: Size;
+1 -1
packages/hip-ui/src/components/checkbox/index.tsx
··· 103 103 ? [gray.bgSolid, gray.border, styles.checked] 104 104 : isSelected 105 105 ? [primary.bgSolid, primary.borderInteractive, styles.checked] 106 - : [gray.borderInteractive], 106 + : [gray.borderInteractive] 107 107 )} 108 108 > 109 109 {isIndeterminate ? (
+6 -58
packages/hip-ui/src/components/command-menu/index.tsx
··· 16 16 import { SizeContext } from "../context"; 17 17 import { SearchField } from "../search-field"; 18 18 import { Separator } from "../separator"; 19 - import { animations } from "../theme/animations.stylex"; 20 - import { radius } from "../theme/radius.stylex"; 21 - import { gray } from "../theme/semantic-color.stylex"; 22 - import { shadow } from "../theme/shadow.stylex"; 23 19 import { spacing } from "../theme/spacing.stylex"; 20 + import { useDialogStyles } from "../theme/useDialogStyles"; 24 21 25 22 const styles = stylex.create({ 26 - overlay: { 27 - backgroundColor: "rgba(0, 0, 0, 0.5)", 28 - height: "var(--page-height)", 29 - left: 0, 30 - position: "absolute", 31 - top: 0, 32 - width: "100vw", 33 - zIndex: 100, 34 - 35 - animationDuration: "200ms", 36 - animationName: { 37 - ":is([data-entering])": animations.fadeIn, 38 - }, 39 - animationTimingFunction: "ease-in", 40 - opacity: { 41 - default: 1, 42 - ":is([data-exiting])": 0, 43 - }, 44 - transitionDuration: { 45 - ":is([data-exiting])": "100ms", 46 - }, 47 - transitionProperty: "opacity", 48 - transitionTimingFunction: "ease-in-out", 49 - }, 50 - modal: { 51 - borderRadius: radius["lg"], 52 - boxShadow: shadow["lg"], 53 - display: "flex", 54 - flexDirection: "column", 55 - left: "50%", 56 - maxHeight: "calc(var(--visual-viewport-height) * 0.8)", 57 - outline: "none", 58 - position: "fixed", 59 - top: "calc(var(--visual-viewport-height) / 2)", 60 - translate: "-50% -50%", 61 - width: 400, 62 - 63 - animationDuration: { ":is([data-entering])": "300ms" }, 64 - animationName: { ":is([data-entering])": animations.zoomIn }, 65 - animationTimingFunction: { 66 - ":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)", 67 - }, 68 - }, 69 - dialog: { 70 - display: "flex", 71 - flexDirection: "column", 72 - flexGrow: 1, 73 - minHeight: 0, 74 - outline: "none", 75 - }, 76 23 menu: { 77 24 flexGrow: 1, 78 25 marginLeft: `calc(${spacing["0.5"]} * -1)`, ··· 115 62 disableGlobalShortcut = false, 116 63 }: CommandMenuProps<T>) { 117 64 const defaultFilter = useFilter({ sensitivity: "base" }); 65 + const dialogStyles = useDialogStyles({ size: "sm" }); 118 66 const [isOpen, setIsOpen] = useControlledState( 119 67 isOpenProp, 120 68 defaultOpen ?? false, 121 - onOpenChange, 69 + onOpenChange 122 70 ); 123 71 const onClose = useEffectEvent(() => { 124 72 setIsOpen(false); ··· 146 94 isDismissable 147 95 isOpen={isOpen} 148 96 onOpenChange={setIsOpen} 149 - {...stylex.props(styles.overlay)} 97 + {...stylex.props(dialogStyles.overlay)} 150 98 > 151 - <Modal {...stylex.props(styles.modal, gray.bg, gray.text, gray.border)}> 152 - <Dialog {...stylex.props(styles.dialog)}> 99 + <Modal {...stylex.props(dialogStyles.modal)}> 100 + <Dialog {...stylex.props(dialogStyles.dialog)}> 153 101 <Autocomplete 154 102 filter={filter ?? defaultFilter.contains} 155 103 defaultInputValue={defaultInputValue}
+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
··· 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
··· 12 12 const styles = stylex.create({ 13 13 link: { 14 14 color: { 15 - default: blue[10], 16 - ":visited": blue[11], 15 + default: blue.text2, 16 + ":visited": blue.text1, 17 17 }, 18 18 cursor: "pointer", 19 19 fontFamily: fontFamily["sans"],
+2 -2
packages/hip-ui/src/components/number-field/index.tsx
··· 45 45 }, 46 46 47 47 color: { 48 - default: slate[12], 49 - ":disabled": slate[11], 48 + default: slate.text2, 49 + ":disabled": slate.text1, 50 50 }, 51 51 }, 52 52 });
+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
··· 8 8 9 9 const styles = stylex.create({ 10 10 separator: { 11 - backgroundColor: slate[7], 11 + backgroundColor: slate.border2, 12 12 borderWidth: 0, 13 13 height: { 14 14 default: "1px",
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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",
+21 -21
packages/hip-ui/src/components/toggle-button copy/index.tsx
··· 13 13 const styles = stylex.create({ 14 14 primarySelected: { 15 15 backgroundColor: { 16 - default: plum[9], 17 - ":hover": plum[10], 18 - ":active": plum[11], 16 + default: plum.solid1, 17 + ":hover": plum.solid2, 18 + ":active": plum.text1, 19 19 }, 20 20 color: "light-dark(white, black)", 21 21 }, 22 22 secondarySelected: { 23 23 backgroundColor: { 24 - default: slate[6], 25 - ":hover": slate[7], 26 - ":active": slate[8], 24 + default: slate.border1, 25 + ":hover": slate.border2, 26 + ":active": slate.border3, 27 27 }, 28 28 borderColor: { 29 - default: slate[6], 30 - ":hover": slate[7], 31 - ":active": slate[8], 29 + default: slate.border1, 30 + ":hover": slate.border2, 31 + ":active": slate.border3, 32 32 }, 33 33 }, 34 34 tertiarySelected: { 35 35 backgroundColor: { 36 - default: slate[6], 37 - ":hover": slate[7], 38 - ":active": slate[8], 36 + default: slate.border1, 37 + ":hover": slate.border2, 38 + ":active": slate.border3, 39 39 }, 40 40 borderColor: { 41 - default: slate[6], 42 - ":hover": slate[7], 43 - ":active": slate[8], 41 + default: slate.border1, 42 + ":hover": slate.border2, 43 + ":active": slate.border3, 44 44 }, 45 45 }, 46 46 outlineSelected: { 47 47 backgroundColor: { 48 - default: slate[6], 49 - ":hover": slate[7], 50 - ":active": slate[8], 48 + default: slate.border1, 49 + ":hover": slate.border2, 50 + ":active": slate.border3, 51 51 }, 52 52 borderColor: { 53 - default: slate[6], 54 - ":hover": slate[7], 55 - ":active": slate[8], 53 + default: slate.border1, 54 + ":hover": slate.border2, 55 + ":active": slate.border3, 56 56 }, 57 57 }, 58 58 sm: {
+23 -23
packages/hip-ui/src/components/toggle-button/index.tsx
··· 14 14 const styles = stylex.create({ 15 15 primarySelected: { 16 16 backgroundColor: { 17 - default: plum[9], 18 - ":hover": plum[10], 19 - ":active": plum[11], 17 + default: plum.solid1, 18 + ":hover": plum.solid2, 19 + ":active": plum.text1, 20 20 }, 21 21 color: "light-dark(white, black)", 22 22 }, 23 23 secondarySelected: { 24 24 backgroundColor: { 25 - default: slate[6], 26 - ":hover": slate[7], 27 - ":active": slate[8], 25 + default: slate.border1, 26 + ":hover": slate.border2, 27 + ":active": slate.border3, 28 28 }, 29 29 borderColor: { 30 - default: slate[6], 31 - ":hover": slate[7], 32 - ":active": slate[8], 30 + default: slate.border1, 31 + ":hover": slate.border2, 32 + ":active": slate.border3, 33 33 }, 34 34 }, 35 35 tertiarySelected: { 36 36 backgroundColor: { 37 - default: slate[6], 38 - ":hover": slate[7], 39 - ":active": slate[8], 37 + default: slate.border1, 38 + ":hover": slate.border2, 39 + ":active": slate.border3, 40 40 }, 41 41 borderColor: { 42 - default: slate[6], 43 - ":hover": slate[7], 44 - ":active": slate[8], 42 + default: slate.border1, 43 + ":hover": slate.border2, 44 + ":active": slate.border3, 45 45 }, 46 46 }, 47 47 outlineSelected: { 48 48 backgroundColor: { 49 - default: slate[6], 50 - ":hover": slate[7], 51 - ":active": slate[8], 49 + default: slate.border1, 50 + ":hover": slate.border2, 51 + ":active": slate.border3, 52 52 }, 53 53 borderColor: { 54 - default: slate[6], 55 - ":hover": slate[7], 56 - ":active": slate[8], 54 + default: slate.border1, 55 + ":hover": slate.border2, 56 + ":active": slate.border3, 57 57 }, 58 58 }, 59 59 sm: { ··· 113 113 buttonStyles, 114 114 styles[size], 115 115 isSelected ? styles[`${variant}Selected`] : undefined, 116 - style 116 + style, 117 117 ); 118 118 119 119 return ( ··· 130 130 <span key={`${child}-${index.toString()}`}>{child}</span> 131 131 ) : ( 132 132 child 133 - ) 133 + ), 134 134 )} 135 135 </AriaToggleButton> 136 136 );
+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: {