Alex Carpenter

@alexcarpenter.me

770 Followers 60 Following

UI Engineer - https://alexcarpenter.me Authoring - https://resilient-ui.com Curating - https://ibrewmyown.coffee

button { --bg: transparent; --fg: currentColor; --am: 0%; background-color: color-mix(in srgb, var(--bg), var(--fg) var(--am)); color: var(--fg); &:hover { --am: 10%; } &:active { --am: 20%; } } .green { --bg: oklch(62.7% 0.194 149.214); --fg: oklch(1 0 0); } .neutral { --bg: oklch(92.9% 0.013 255.508); --fg: oklch(27.8% 0.033 256.848); }
Codeblock showing --brand-color usage being set in CSS style tag, and passing that value into Clerks appearance variable prop.
<TooltipTrigger isOpen={open} onOpenChange={setOpen}> <Button>Trigger</Button> <AnimatePresence> {open ? ( <MotionTooltip className={({ placement }) => cx({ "[--y:4px]": placement === "top", "[--y:-4px]": placement === "bottom", }) } offset={6} initial={{ opacity: 0, y: "var(--y)" }} animate={{ opacity: 1, y: 0 }} > Content </MotionTooltip> ) : null} </AnimatePresence> </TooltipTrigger>
Coffee on counter top