Basic components for the project and stitches theme
This commit is contained in:
Valtteri Karesto
@@ -1,17 +1,8 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { ForwardRefExoticComponent, RefAttributes } from "react";
|
||||
import { keyframes } from "@emotion/react";
|
||||
import { ThemeUIStyleObject, jsx } from "theme-ui";
|
||||
import { theme } from "../theme";
|
||||
import { keyframes } from "@stitches/react";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
|
||||
interface StyledProps {
|
||||
sx?: ThemeUIStyleObject;
|
||||
}
|
||||
|
||||
const Root = DropdownMenu.Root;
|
||||
|
||||
const Trigger = DropdownMenu.Trigger;
|
||||
import { styled } from "../stitches.config";
|
||||
import { blackA, slateDark } from "@radix-ui/colors";
|
||||
|
||||
const slideUpAndFade = keyframes({
|
||||
"0%": { opacity: 0, transform: "translateY(2px)" },
|
||||
@@ -33,123 +24,108 @@ const slideLeftAndFade = keyframes({
|
||||
"100%": { opacity: 1, transform: "translateX(0)" },
|
||||
});
|
||||
|
||||
const bounce = keyframes`
|
||||
from, 20%, 53%, 80%, to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
40%, 43% {
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(0, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0,-4px,0);
|
||||
}
|
||||
`;
|
||||
|
||||
const animationTypeOne = keyframes({
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
const StyledContent = styled(DropdownMenuPrimitive.Content, {
|
||||
minWidth: 220,
|
||||
backgroundColor: "$slate2",
|
||||
borderRadius: 6,
|
||||
padding: 5,
|
||||
boxShadow:
|
||||
"0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
|
||||
"@media (prefers-reduced-motion: no-preference)": {
|
||||
animationDuration: "400ms",
|
||||
animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
willChange: "transform, opacity",
|
||||
'&[data-state="open"]': {
|
||||
'&[data-side="top"]': { animationName: slideDownAndFade },
|
||||
'&[data-side="right"]': { animationName: slideLeftAndFade },
|
||||
'&[data-side="bottom"]': { animationName: slideUpAndFade },
|
||||
'&[data-side="left"]': { animationName: slideRightAndFade },
|
||||
},
|
||||
},
|
||||
"20%": {
|
||||
opacity: 0,
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
".dark &": {
|
||||
backgroundColor: "$slate5",
|
||||
boxShadow:
|
||||
"0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
|
||||
},
|
||||
});
|
||||
|
||||
const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
|
||||
|
||||
const itemStyles: ThemeUIStyleObject = {
|
||||
const itemStyles = {
|
||||
all: "unset",
|
||||
fontSize: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 1,
|
||||
color: (theme) => theme.rawColors?.modes?.light?.text,
|
||||
color: "$slate12",
|
||||
borderRadius: 3,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "auto",
|
||||
padding: "10px 5px",
|
||||
height: 32,
|
||||
padding: "0 5px",
|
||||
position: "relative",
|
||||
paddingLeft: 2,
|
||||
paddingLeft: "5px",
|
||||
userSelect: "none",
|
||||
gap: "$2",
|
||||
|
||||
"&[data-disabled]": {
|
||||
color: (theme) => theme.rawColors?.modes?.light.muted,
|
||||
color: "$slate9",
|
||||
pointerEvents: "none",
|
||||
},
|
||||
|
||||
"&:focus": {
|
||||
backgroundColor: (theme) => theme.rawColors?.modes?.light?.text,
|
||||
color: (theme) => theme.rawColors?.modes?.light?.background,
|
||||
backgroundColor: "$pink9",
|
||||
color: "$white",
|
||||
},
|
||||
};
|
||||
|
||||
const Content = (props: DropdownMenu.DropdownMenuContentProps) => (
|
||||
<DropdownMenu.Content
|
||||
{...props}
|
||||
sx={{
|
||||
minWidth: 220,
|
||||
backgroundColor: (theme) => theme.rawColors?.modes?.light?.background,
|
||||
borderRadius: 6,
|
||||
padding: 1,
|
||||
boxShadow:
|
||||
"0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
|
||||
"@media (prefers-reduced-motion: no-preference)": {
|
||||
animationDuration: "400ms",
|
||||
animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
willChange: "transform, opacity",
|
||||
'&[data-state="open"]': {
|
||||
'&[data-side="top"]': {
|
||||
animationName: slideDownAndFade.toString(),
|
||||
},
|
||||
'&[data-side="right"]': {
|
||||
animationName: slideLeftAndFade.toString(),
|
||||
},
|
||||
'&[data-side="bottom"]': {
|
||||
animationName: slideUpAndFade.toString(),
|
||||
},
|
||||
'&[data-side="left"]': {
|
||||
animationName: slideRightAndFade.toString(),
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const StyledItem = styled(DropdownMenuPrimitive.Item, { ...itemStyles });
|
||||
const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, {
|
||||
...itemStyles,
|
||||
});
|
||||
const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
|
||||
...itemStyles,
|
||||
});
|
||||
const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
|
||||
'&[data-state="open"]': {
|
||||
backgroundColor: "$pink9",
|
||||
color: "$pink9",
|
||||
},
|
||||
...itemStyles,
|
||||
});
|
||||
|
||||
const Item = (props: DropdownMenu.MenuItemProps) => (
|
||||
<DropdownMenu.Item {...props} sx={{ ...itemStyles }} />
|
||||
);
|
||||
const StyledLabel = styled(DropdownMenuPrimitive.Label, {
|
||||
paddingLeft: 25,
|
||||
fontSize: 12,
|
||||
lineHeight: "25px",
|
||||
color: "$slate11",
|
||||
});
|
||||
|
||||
const Label = (props: DropdownMenu.MenuLabelProps) => (
|
||||
<DropdownMenu.Label {...props} sx={{ ...itemStyles }} />
|
||||
);
|
||||
const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
|
||||
height: 1,
|
||||
backgroundColor: "$slate7",
|
||||
margin: 5,
|
||||
});
|
||||
|
||||
const Group = DropdownMenu.Group;
|
||||
const Separator = DropdownMenu.Separator;
|
||||
const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
width: 25,
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
});
|
||||
|
||||
const Arrow = (props: DropdownMenu.MenuArrowProps) => (
|
||||
<DropdownMenu.Arrow
|
||||
{...props}
|
||||
sx={{
|
||||
fill: (theme) => theme.rawColors?.modes?.light.background,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
|
||||
fill: "$slate2",
|
||||
});
|
||||
|
||||
const Dropdown = {
|
||||
Root,
|
||||
Label,
|
||||
Trigger,
|
||||
Content,
|
||||
Item,
|
||||
Arrow,
|
||||
Group,
|
||||
Separator,
|
||||
};
|
||||
|
||||
export default Dropdown;
|
||||
// Exports
|
||||
export const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
export const DropdownMenuContent = StyledContent;
|
||||
export const DropdownMenuItem = StyledItem;
|
||||
export const DropdownMenuCheckboxItem = StyledCheckboxItem;
|
||||
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
export const DropdownMenuRadioItem = StyledRadioItem;
|
||||
export const DropdownMenuItemIndicator = StyledItemIndicator;
|
||||
export const DropdownMenuTriggerItem = StyledTriggerItem;
|
||||
export const DropdownMenuLabel = StyledLabel;
|
||||
export const DropdownMenuSeparator = StyledSeparator;
|
||||
export const DropdownMenuArrow = StyledArrow;
|
||||
|
||||
Reference in New Issue
Block a user