Created
August 29, 2022 07:49
-
-
Save lidorcg/e0f2a2a844524bfe6fca0cf9442fca88 to your computer and use it in GitHub Desktop.
lens example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (def setup {:smallFontSize 12, | |
| :defaultFontSize 16, | |
| :titleFontSize 22, | |
| :bigTitleFontSize 30, | |
| :lightFontWeight 300, | |
| :regularFontWeight "normal", | |
| :boldFontWeight 700, | |
| :borderPill "50rem", | |
| :borderRoundedStrongest "3.75rem", | |
| :borderRoundedStrongly "2rem", | |
| :borderRounded "0.5rem", | |
| :borderRoundedRegular "1rem", | |
| :borderRoundedSoftly "0.5rem", | |
| :borderNotRounded "0rem", | |
| :shadow3 "12px 8px 11px rgba(0, 0, 0, 0.16)", | |
| :shadow2 "7px 3px 11px rgba(0, 0, 0, 0.16)", | |
| :shadow1 "0px 2px 2px rgba(0, 0, 0, 0.16)", | |
| :shadow05 "0px 1px 2px rgba(0, 0, 0, 0.16)", | |
| :noShadow "none"}) | |
| (def appSettings {:isDark false}) | |
| (def lens | |
| (smart-map | |
| [:color [:base [:primary "#00c2cb" | |
| :secondary "#fee04a" | |
| :tertiary "#75e3e7" | |
| :quaternary "#ff616f" | |
| :gradient [:primary (create-gradients "to top right" primary secondary) | |
| :secondary (create-gradients "to bottom right" tertiary quaternary)] | |
| :danger "#721C24" | |
| :warning "#856404" | |
| :success "#155724" | |
| :empty (if (appSettings :isDark) "#ffffff" "#000000") | |
| :empty_01 (if (appSettings :isDark) "#222222" "#F2F2F2") | |
| :empty_02 (if (appSettings :isDark) "#444444" "#D9D9D9") | |
| :empty_03 (if (appSettings :isDark) "#8e8e8e" "#EEEEEE") | |
| :empty_04 nil | |
| :empty_05 "#d1d1d1" | |
| :empty_06 nil | |
| :empty_07 (if-not (appSettings :isDark) "#8e8e8e" "#EEEEEE") | |
| :empty_08 (if-not (appSettings :isDark) "#444444" "#D9D9D9") | |
| :empty_09 (if-not (appSettings :isDark) "#222222" "#F2F2F2") | |
| :full (if (appSettings :isDark) "#000000" "#ffffff")] | |
| :editable (get-in base [:empty_03]) | |
| :selected (get-in base [:primary]) | |
| :selectedLink selected | |
| :text [:default (get-in base [:empty]) | |
| :primary (get-in base [:empty]) | |
| :secondary (get-in base [:empty_07]) | |
| :placeholder (get-in base [:empty_07]) | |
| :onColored (get-in base [:full]) | |
| :editable (get-in base [:empty]) | |
| :link "#50ddd7" | |
| :selectedLink selectedLink]] | |
| :background [:site (get-in color [:base :full]) | |
| :modal (str (get-in color [:base :empty]) "8c !important") ;; constant? | |
| :colored [:primary (str (get-in color [:base :primary]) "!important") | |
| :secondary (get-in color [:base :gradient :primary :backgroundImage]) | |
| :tertiary (str (get-in color [:base :tertiary]) "!important")]] | |
| :border [:radius [:default (get-in setup [:borderRounded]) | |
| :primary (get-in setup [:borderRoundedStrongly]) | |
| :secondary (get-in setup [:borderPill]) | |
| :tertiary (get-in setup [:borderRoundedRegular])] | |
| :style [:default "none" | |
| :primary (str "1px solid" (get-in color [:base :empty_01])) | |
| :without "none"]] | |
| :text [:settings [:style [:primary [:fontFamily "'Lato',sans-serif"] | |
| :secondary [:fontFamily "'Nunito',sans-serif"]] | |
| :size [:h1 30 | |
| :h2 22 | |
| :h3 16 | |
| :body 16 | |
| :subtext 12] | |
| :weight [:default 300 | |
| :regular 300 | |
| :bolder 700]] | |
| :title [:h1 [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontWeight (get-in settings [:weight :bolder]) | |
| :color (get-in color [:base :empty]) | |
| :fontSize (get-in settings [:size :h1])] | |
| :h2 [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontWeight (get-in settings [:weight :bolder]) | |
| :color (get-in color [:base :empty]) | |
| :fontSize (get-in settings [:size :h2])] | |
| :h3 [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontWeight (get-in settings [:weight :bolder]) | |
| :color (get-in color [:base :empty]) | |
| :fontSize (get-in settings [:size :body])]] | |
| :body [:primary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize (get-in settings [:size :body]) | |
| :color (get-in color [:base :empty]) | |
| :fontWeight (get-in settings [:weight :regular])] | |
| :secondary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize (get-in settings [:size :body]) | |
| :color (get-in color [:base :empty]) | |
| :fontWeight (get-in settings [:weight :bolder])]] | |
| :subtext [:primary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize 12 | |
| :color (get-in color [:base :empty]) | |
| :fontWeight (get-in settings [:weight :regular])] | |
| :secondary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize 12 | |
| :color (get-in color [:base :empty]) | |
| :fontWeight (get-in settings [:weight :bolder])]] | |
| :placeholder [:primary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize (get-in settings [:size :body]) | |
| :fontWeight (get-in settings [:weight :regular]) | |
| :color "#8e8e8e"]] | |
| :link [:primary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize (get-in settings [:size :body]) | |
| :color "#75e3e7!important" | |
| :fontWeight (get-in settings [:weight :regular]) | |
| :cursor "pointer" | |
| ":hover,:active,:focus" [:color "#00c2cb!important" | |
| :textDecoration "underline!important"]]] | |
| :button [:primary [:fontFamily (get-in settings [:style :primary :fontFamily]) | |
| :fontSize (get-in settings [:size :body]) | |
| :color "#ffffff!important" | |
| :fontWeight (get-in settings [:weight :bolder]) | |
| :cursor "pointer"]]] | |
| :button [:setup [:margin "auto" | |
| :outline "none" | |
| :transition "box-shadow 0.3s ease-in-out" | |
| ":hover,:active,:focus" [:outline "none" | |
| :border (get-in border [:style :without]) | |
| :boxShadow (get-in setup [:noShadow])] | |
| :border (get-in border [:style :without]) | |
| :borderRadius (get-in setup [:borderRoundedStrongly]) | |
| :boxShadow (get-in setup [:noShadow]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :fontWeight 700 | |
| :color "#ffffff!important" | |
| :cursor "pointer"] | |
| :0 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :outline "none" | |
| :cursor "pointer" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| ":hover,:active,:focus" [:outline "none" | |
| :border "none" | |
| :boxShadow "none!important"] | |
| :transition "box-shadow 0.3s ease-in-out" | |
| :background "#00c2cb!important" | |
| :color "#ffffff!important"] | |
| :1 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :outline "none" | |
| :cursor "pointer" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| ":hover,:active,:focus" [:outline "none" | |
| :border "none" | |
| :boxShadow "none!important"] | |
| :transition "box-shadow 0.3s ease-in-out" | |
| :background "#fee04a!important" | |
| :color "#000000!important"] | |
| :2 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :outline "none" | |
| :cursor "pointer" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| ":hover,:active,:focus" [:outline "none" | |
| :border "none" | |
| :boxShadow "none!important"] | |
| :transition "box-shadow 0.3s ease-in-out" | |
| :background "#ffffff!important" | |
| :color "#000000!important"]] | |
| :card [:0 [:width "100%" | |
| :height "unset" | |
| :margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "1px solid #F2F2F2" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#ffffff!important" | |
| "@media(min-width:992px)" [:maxWidth 395] | |
| :color (get-in color [:base :empty])] | |
| :1 [:width "100%" | |
| :height "unset" | |
| :margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "7px 3px 11px rgba(0, 0, 0, 0.16)!important" | |
| :background "#ffffff!important" | |
| "@media(min-width:992px)" [:maxWidth 395] | |
| :color (get-in color [:base :empty])]] | |
| :chat [:incoming nil | |
| :outgoing nil] | |
| :colored [:0 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#00c2cb!important" | |
| :color (get-in color [:base :empty])] | |
| :1 [:backgroundImage "linear-gradient(to top right, #00c2cb, #fee04a)!important" | |
| :margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#ffffff!important" | |
| :color (get-in color [:base :empty])] | |
| :2 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#75e3e7!important" | |
| :color (get-in color [:base :empty])]] | |
| :comment [:primary [:borderRadius "1.5rem" | |
| :background "#00000015" | |
| :color (get-in color [:base :empty])]] | |
| :dropdown nil | |
| :header [:primary [:width "100%" | |
| :top "0" | |
| :height 74 | |
| :margin "auto" | |
| :borderBottomRightRadius "0" | |
| :fontFamily "'Lato',sans-serif" | |
| :borderLeft "none" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "1px solid #F2F2F2" | |
| :borderRight "none" | |
| :position "sticky" | |
| :borderBottomLeftRadius "0" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :zIndex "3" | |
| :borderTop "none" | |
| :background "#ffffff!important" | |
| :color (get-in color [:base :empty])] | |
| :navbar nil] | |
| :image [:main [:0 [:borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :border "none" | |
| :objectFit "cover"]] | |
| :header [:borderRadius "2rem" | |
| :boxShadow "7px 3px 11px rgba(0,0,0,0.16)!important" | |
| :border "none" | |
| :objectFit "cover" | |
| :width "100%" | |
| :height 205 | |
| :objectPosition "66% 38%"] | |
| :avatar [:borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :border "none" | |
| :objectFit "cover" | |
| :height 45 | |
| :width 45]] | |
| :input [:0 [:borderRadius "2rem" | |
| :border "none" | |
| :boxShadow "none!important" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontSize 16 | |
| :color (get-in color [:base :empty]) | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :background "#EEEEEE!important"] | |
| :1 nil] | |
| :label [:badge [:setup [:minHeight (get-in text [:settings :size :body]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :padding "2px 10px" | |
| :minWidth 60 | |
| :cursor "pointer" | |
| :fontSize 12 | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :background "#ff616f!important" | |
| :color "#D9D9D9" | |
| :textAlign "center"] | |
| :primary [:minHeight (get-in text [:settings :size :body]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :padding "2px 10px" | |
| :minWidth 60 | |
| :cursor "pointer" | |
| :fontSize 12 | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :background "#ff616f!important" | |
| :color "#D9D9D9" | |
| :textAlign "center"] | |
| :success [:minHeight (get-in text [:settings :size :body]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :padding "2px 10px" | |
| :minWidth 60 | |
| :cursor "pointer" | |
| :fontSize 12 | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :background "#d4edda!important" | |
| :color "#155724!important" | |
| :textAlign "center"] | |
| :warning [:minHeight (get-in text [:settings :size :body]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :padding "2px 10px" | |
| :minWidth 60 | |
| :cursor "pointer" | |
| :fontSize 12 | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :background "#fff3cd!important" | |
| :color "#856404!important" | |
| :textAlign "center"] | |
| :danger [:minHeight (get-in text [:settings :size :body]) | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :padding "2px 10px" | |
| :minWidth 60 | |
| :cursor "pointer" | |
| :fontSize 12 | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :background "#f8d7da!important" | |
| :color "#721C24!important" | |
| :textAlign "center"]] | |
| :select [:primary [:whiteSpace "pre-line" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "1px solid #fee04a" | |
| :padding "8px 17px!important" | |
| ":active,:focus" [:outline "none"] | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :display "inline-flex" | |
| :background "#ffffff!important" | |
| :color (get-in color [:base :empty])] | |
| :selected [:whiteSpace "pre-line" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "1px solid #fee04a" | |
| :padding "8px 17px!important" | |
| ":active,:focus" [:outline "none"] | |
| :cursor "pointer" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "50rem" | |
| :boxShadow "none!important" | |
| :display "inline-flex" | |
| :background "#00c2cb!important" | |
| :color "#ffffff!important"]] | |
| :tag [:0 [:whiteSpace "pre-line" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :padding "8px 17px!important" | |
| ":active,:focus" [:outline "none"] | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "0.5rem" | |
| :boxShadow "none!important" | |
| :display "inline-flex" | |
| :background "#EEEEEE!important" | |
| :color (get-in color [:base :empty])]]] | |
| :longtext [:0 [:width "100%" | |
| :height 164 | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#EEEEEE!important" | |
| :color (get-in color [:base :empty])]] | |
| :selector [:selected [:background "#00c2cb!important" | |
| :msFilter "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" | |
| :filter "alpha(20)" | |
| :mozOpacity "0.2" | |
| :khtmlOpacity "0.2" | |
| :opacity "0.2"] | |
| :hovered [:background "#000000!important" | |
| :msFilter "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)" | |
| :filter "alpha(10)" | |
| :mozOpacity "0.1" | |
| :khtmlOpacity "0.1" | |
| :opacity "0.1"]] | |
| :sidebar [:0 nil] | |
| :size [:card [:width "100%" | |
| "@media(min-width:992px)" [:maxWidth 395] | |
| :height "unset" | |
| :header [:height 205]] | |
| :input [:height 48] | |
| :header [:height 72] | |
| :navigator [:height 74 | |
| :width "100%"] | |
| :image [:avatar [:width 45 | |
| :height 45]]] | |
| :tabNavigator [:0 [:bottomDistance 0 | |
| :margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight 700 | |
| :border "none" | |
| :stickToBottom true | |
| :cursor "pointer" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#ffffff!important" | |
| :color "#d1d1d1!important"]] | |
| :table [:0 [:width "100%" | |
| :height "unset" | |
| :margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "1px solid #F2F2F2" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#F2F2F2!important" | |
| "@media(min-width:992px)" [:maxWidth 395] | |
| :color (get-in color [:base :empty])]] | |
| :view [:0 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#ffffff!important" | |
| :color (get-in color [:base :empty])] | |
| :1 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "0.5rem" | |
| :boxShadow "none!important" | |
| :background "#ffffff!important" | |
| :color (get-in color [:base :empty])] | |
| :2 [:margin "auto" | |
| :fontFamily "'Lato',sans-serif" | |
| :fontWeight (get-in text [:settings :weight :regular]) | |
| :border "none" | |
| :fontSize (get-in text [:settings :size :body]) | |
| :borderRadius "2rem" | |
| :boxShadow "none!important" | |
| :background "#D9D9D9!important" | |
| :color (get-in color [:base :empty])]]])) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment