33 lines
936 B
TypeScript
33 lines
936 B
TypeScript
import { styled } from "../stitches.config";
|
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
|
|
const StyledSwitch = styled(SwitchPrimitive.Root, {
|
|
all: "unset",
|
|
width: 42,
|
|
height: 25,
|
|
backgroundColor: "$mauve9",
|
|
borderRadius: "9999px",
|
|
position: "relative",
|
|
boxShadow: `0 2px 10px $colors$mauve2`,
|
|
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
|
|
"&:focus": { boxShadow: `0 0 0 2px $colors$mauveA2` },
|
|
'&[data-state="checked"]': { backgroundColor: "$green11" },
|
|
});
|
|
|
|
const StyledThumb = styled(SwitchPrimitive.Thumb, {
|
|
display: "block",
|
|
width: 21,
|
|
height: 21,
|
|
backgroundColor: "white",
|
|
borderRadius: "9999px",
|
|
boxShadow: `0 2px 2px $colors$mauveA6`,
|
|
transition: "transform 100ms",
|
|
transform: "translateX(2px)",
|
|
willChange: "transform",
|
|
'&[data-state="checked"]': { transform: "translateX(19px)" },
|
|
});
|
|
|
|
// Exports
|
|
export const Switch = StyledSwitch;
|
|
export const SwitchThumb = StyledThumb;
|