Color palette for cljs

color.cljs

(ns project.ui.color)

(def orange
  {:50    "#ffcc80"
   :100   "#ffc16d"
   :200   "#ffb75c"
   :300   "#ffad4a"
   :400   "#fea139"
   :500   "#ff9800"
   :600   "#f98d1d"
   :700   "#f6820f"
   :800   "#f37703"
   :900   "#ef6c00"
   :light (get-in orange [:50])
   :base  (get-in orange [:500])
   :dark  (get-in orange [:900])})

(def blue
  {:50    "#90caf9"
   :100   "#81c0f8"
   :200   "#70b4f7"
   :300   "#5daaf6"
   :400   "#47a0f4"
   :500   "#2196f3"
   :600   "#1e82de"
   :700   "#1a6dc9"
   :800   "#155ab5"
   :900   "#0d47a1"
   :light (get-in blue [:50])
   :base  (get-in blue [:500])
   :dark  (get-in blue [:900])})

(def yellow
  {:50    "#fff59d"
   :100   "#fff390"
   :200   "#fff27f"
   :300   "#ffef6d"
   :400   "#ffed58"
   :500   "#ffeb3b"
   :600   "#fee037"
   :700   "#fdd534"
   :800   "#fcca30"
   :900   "#fbc02d"
   :light (get-in yellow [:50])
   :base  (get-in yellow [:500])
   :dark  (get-in yellow [:900])})

(def red
  {:50    "#ef9a9a"
   :100   "#f28b86"
   :200   "#f47c72"
   :300   "#f56b5d"
   :400   "#f5584a"
   :500   "#f44336"
   :600   "#e53a2f"
   :700   "#d53029"
   :800   "#c62622"
   :900   "#b71c1c"
   :light (get-in red [:50])
   :base  (get-in red  [:500])
   :dark  (get-in red [:900])})

(def green
  {:50    "#c5e1a5"
   :100   "#badb93"
   :200   "#afd581"
   :300   "#a3cf70"
   :400   "#97c95e"
   :500   "#8bc34a"
   :600   "#74ac3e"
   :700   "#5e9433"
   :800   "#487e28"
   :900   "#33691e"
   :light (get-in green [:50])
   :base  (get-in green [:500])
   :dark  (get-in green [:900])})

(def purple
  {:50    "#ce9ed8"
   :100   "#c57fd0"
   :200   "#bb6bc8"
   :300   "#b158c0"
   :400   "#a741b8"
   :500   "#9c27b0"
   :600   "#9024aa"
   :700   "#8321a5"
   :800   "#771e9f"
   :900   "#6a1b9a"
   :light (get-in purple [:50])
   :base  (get-in purple [:500])
   :dark  (get-in purple [:900])})

(def grey
  {:50    "#f5f5f0"
   :100   "#eeeee7"
   :200   "#ddddd4"
   :300   "#ccccc2"
   :400   "#b3b2a8"
   :500   "#9a998f"
   :600   "#818076"
   :700   "#6a695f"
   :800   "#535348"
   :900   "#3d3d33"
   :light (get-in grey [:50])
   :base  (get-in grey [:500])
   :dark  (get-in grey [:900])})

(def black "#000")

(def white "#fff")