 
   Object
   (render [this]
-    (let [{:keys [color/id
-                  color/hex
-                  faces/list
-                  palette-widget/active-color] :as color} (om/props this)
-          {:keys [hex-temp]} (om/get-state this)
-          active? (= id (:color/id active-color))]
-      (dom/div #js {:className (str "color color-editable" (when active? " color-active") (when-not hex " color-missing") " color-" id)
-                    :onClick   #(om/transact! (om/class->any reconciler Palette)
-                                  `[(palette-widget/update
-                                      {:palette-widget/active-color [:colors/by-id ~id]
-                                       :palette-widget/face-classes-by-color-type ~(util/faces-to-colorize list id)})])
+    (let [{:keys [color/id color/hex faces/list] :as color} (om/props this)
+          {:keys [hex-temp]} (om/get-state this)]
+      (dom/div #js {:className (color-class color)
+                    :onClick   #(palette-widget-update id list)
                     :style     (when (or hex-temp hex) #js {:backgroundColor (or hex-temp hex)})}
         (dom/button #js {:className "color-remove"
                          :onClick   #(color-remove this color)}

(declare Palette)
(declare PaletteWidget)

(defn color-update [comp props]
  (om/transact! comp
    `[(color/update ~props) :palette]))

(defn color-remove [comp {:keys [color/id] :as color}]
  (om/transact! comp
    `[(color/remove) :palette]))

(defn colorize-faces [classes color-prop hex-temp]
  (when-not (empty? classes)

        (.setColor closure-comp (:color/hex active-color)))))

  (render [this]
    (let [{:keys [palette-widget/closure-comp
                  palette-widget/active-color] :as props} (om/props this)]
      (dom/div #js {:onMouseUp #(color-update this active-color closure-comp)
                    ;;:onTouchEnd #(color-update this active-color closure-comp)
                    :ref "paletteWidget"} nil))))

(def palette-widget (om/factory PaletteWidget))
