Skip to content

Instantly share code, notes, and snippets.

@geraldodev
Created May 18, 2022 23:57
Embed
What would you like to do?
stitches button in cljs
(ns stitches.componentes.button
(:require
[applied-science.js-interop :as j]
[stitches.config :refer [styled jsvec-to-obj]]
))
(def Button
(styled
"button"
(jsvec-to-obj
(j/lit
[;; Reset
:all "unset"
:alignItems "center"
:boxSizing "border-box"
:userSelect "none"
"&::before" {:boxSizing "border-box"}
"&::after" {:boxSizing "border-box"}
;; Custom reset?
:display "inline-flex"
:flexShrink 0
:justifyContent "center"
:lineHeight "1"
:WebkitTapHighlightColor "rgba(0,0,0,0)"
;; Custom
:height "$5"
:px "$2"
:fontFamily "$untitled"
:fontSize "$2"
:fontWeight 500
:fontVariantNumeric "tabular-nums"
"&:disabled" {:backgroundColor "$slate2"
:boxShadow "inset 0 0 0 1px $colors$slate7"
:color "$slate8"
:pointerEvents "none"}
:variants {:size {"1" {:borderRadius "$1"
:height "$5"
:px "$2"
:fontSize "$1"
:lineHeight "$sizes$5"}
"2" {:borderRadius "$2"
:height "$6"
:px "$3"
:fontSize "$3"
:lineHeight "$sizes$6"}
"3" {:borderRadius "$2"
:height "$7"
:px "$4"
:fontSize "$4"
:lineHeight "$sizes$7"}}
:variant {:gray {:backgroundColor "$loContrast"
:boxShadow "inset 0 0 0 1px $colors$slate7"
:color "$hiContrast"
"@hover" {"&:hover" {:boxShadow "inset 0 0 0 1px $colors$slate8"}}
"&:active" {:backgroundColor "$slate2"
:boxShadow "inset 0 0 0 1px $colors$slate8"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$slate4" :boxShadow "inset 0 0 0 1px $colors$slate8"}}
:blue {:backgroundColor "$blue2"
:boxShadow "inset 0 0 0 1px $colors$blue7"
:color "$blue11"
"@hover" {"&:hover" {:boxShadow "inset 0 0 0 1px $colors$blue8"}}
"&:active" {:backgroundColor "$blue3"
:boxShadow "inset 0 0 0 1px $colors$blue8"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$blue4"
:boxShadow "inset 0 0 0 1px $colors$blue8"}}
:green {:backgroundColor "$green2"
:boxShadow "inset 0 0 0 1px $colors$green7"
:color "$green11"
"@hover" {"&:hover" {:boxShadow "inset 0 0 0 1px $colors$green8"}}
"&:active" {:backgroundColor "$green3"
:boxShadow "inset 0 0 0 1px $colors$green8"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$green4"
:boxShadow "inset 0 0 0 1px $colors$green8"}}
:red {:backgroundColor "$loContrast"
:boxShadow "inset 0 0 0 1px $colors$slate7"
:color "$red11"
"@hover" {"&:hover" {:boxShadow "inset 0 0 0 1px $colors$slate8"}}
"&:active" {:backgroundColor "$red3"
:boxShadow "inset 0 0 0 1px $colors$red8"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$red4"
:boxShadow "inset 0 0 0 1px $colors$red8"}}
:transparentWhite {:backgroundColor "hsla(0,100%,100%,.2)"
:color "white"
"@hover" {"&:hover" {:backgroundColor "hsla(0,100%,100%,.25)"}}
"&:active" {:backgroundColor "hsla(0,100%,100%,.3)"}
"&:focus" {:boxShadow "inset 0 0 0 1px hsla(0,100%,100%,.35), 0 0 0 1px hsla(0,100%,100%,.35)"}}
:transparentBlack {:backgroundColor "hsla(0,0%,0%,.2)"
:color "black"
"@hover" {"&:hover" {:backgroundColor "hsla(0,0%,0%,.25)"}}
"&:active" {:backgroundColor "hsla(0,0%,0%,.3)"}
"&:focus" {:boxShadow "inset 0 0 0 1px hsla(0,0%,0%,.35), 0 0 0 1px hsla(0,0%,0%,.35)"}}}
:state {:active {:backgroundColor "$slate4"
:boxShadow "inset 0 0 0 1px $colors$slate8"
:color "$slate11"
"@hover" {"&:hover" {:backgroundColor "$slate5"
:boxShadow "inset 0 0 0 1px $colors$slate8"}}
"&:active" {:backgroundColor "$slate5"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8"}}
:waiting {:backgroundColor "$slate4"
:boxShadow "inset 0 0 0 1px $colors$slate8"
:color "transparent"
:pointerEvents "none"
"@hover" {"&:hover" {:backgroundColor "$slate5"
:boxShadow "inset 0 0 0 1px $colors$slate8"}}
"&:active" {:backgroundColor "$slate5"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$slate8"}}}
:ghost {:true {:backgroundColor "transparent"
:boxShadow "none"}}}
:compoundVariants [{:variant "gray"
:ghost "true"
:css {:backgroundColor "transparent"
:color "$hiContrast"
"@hover" {"&:hover" {:backgroundColor "$slateA3"
:boxShadow "none"}}
"&:active" {:backgroundColor "$slateA4"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$slateA8, 0 0 0 1px $colors$slateA8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$slateA4"
:boxShadow "none"}}}
{:variant "blue"
:ghost "true"
:css {:backgroundColor "transparent"
"@hover" {"&:hover" {:backgroundColor "$blueA3"
:boxShadow "none"}}
"&:active" {:backgroundColor "$blueA4"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$blueA8, 0 0 0 1px $colors$blueA8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$blueA4"
:boxShadow "none"}}}
{:variant "green"
:ghost "true"
:css {:backgroundColor "transparent"
"@hover" {"&:hover" {:backgroundColor "$greenA3"
:boxShadow "none"}}
"&:active" {:backgroundColor "$greenA4"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$greenA8, 0 0 0 1px $colors$greenA8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$greenA4"
:boxShadow "none"}}}
{:variant "red"
:ghost "true"
:css {:backgroundColor "transparent"
"@hover" {"&:hover" {:backgroundColor "$redA3"
:boxShadow "none"}}
"&:active" {:backgroundColor "$redA4"}
"&:focus" {:boxShadow "inset 0 0 0 1px $colors$redA8, 0 0 0 1px $colors$redA8"}
"&[data-radix-popover-trigger][data-state=\\\"open\\\"], &[data-radix-dropdown-menu-trigger][data-state=\\\"open\\\"]"
{:backgroundColor "$redA4"
:boxShadow "none"}}}]
:defaultVariants {:size "1"
:variant "gray"}]))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment