diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 04dfdb89b..3766cbb52 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -50,21 +50,18 @@
            on-reorder on-detach on-open on-close on-remove
            disable-drag on-focus on-blur select-only select-on-focus]}]
   (let [current-file-id (mf/use-ctx ctx/current-file-id)
-        file-colors     (mf/deref refs/workspace-file-colors)
         shared-libs     (mf/deref refs/libraries)
         hover-detach    (mf/use-state false)
         on-change       (h/use-ref-callback on-change)
-        src-colors      (if (= (:file-id color) current-file-id)
-                          file-colors
-                          (dm/get-in shared-libs [(:file-id color) :data :colors]))
 
-        color-name       (dm/get-in src-colors [(:id color) :name])
+        src-colors      (dm/get-in shared-libs [(:ref-file color) :data :colors])
+        color-name      (dm/get-in src-colors [(:ref-id color) :name])
 
         multiple-colors? (uc/multiple? color)
-        library-color?    (and (:id color) color-name (not multiple-colors?))
-        gradient-color? (and (not multiple-colors?)
-                             (:gradient color)
-                             (get-in color [:gradient :type]))
+        library-color?   (and (:ref-id color) color-name (not multiple-colors?))
+        gradient-color?  (and (not multiple-colors?)
+                              (:gradient color)
+                              (dm/get-in color [:gradient :type]))
         image-color? (and (not multiple-colors?)
                           (:image color))
 
@@ -124,10 +121,9 @@
         (mf/use-fn
          (mf/deps color on-change)
          (fn [value]
-           (let [color (assoc color
-                              :opacity (/ value 100)
-                              :id nil
-                              :file-id nil)]
+           (let [color (-> color
+                           (assoc :opacity (/ value 100))
+                           (dissoc :ref-id :ref-file))]
              (st/emit! (dwl/add-recent-color color)
                        (on-change color)))))
 
@@ -209,13 +205,11 @@
                                   :gradient-name-wrapper gradient-color?)}
        [:div {:class (stl/css :color-bullet-wrapper)}
         [:& cb/color-bullet {:color (cond-> color
-                                      (nil? color-name) (assoc
-                                                         :id nil
-                                                         :file-id nil))
+                                      (nil? color-name) (dissoc :ref-id :ref-file))
                              :mini true
                              :on-click handle-click-color}]]
        (cond
-              ;; Rendering a color with ID
+         ;; Rendering a color with ID
          library-color?
          [:*
           [:div {:class (stl/css :color-name)
@@ -235,7 +229,7 @@
          gradient-color?
          [:*
           [:div {:class (stl/css :color-name)}
-           (uc/gradient-type->string (get-in color [:gradient :type]))]]
+           (uc/gradient-type->string (dm/get-in color [:gradient :type]))]]
 
               ;; Rendering an image
          image-color?
@@ -250,7 +244,7 @@
                                      ""
                                      (-> color :color cc/remove-hash))
                             :placeholder (tr "settings.multiple")
-                            :className   (stl/css :color-input)
+                            :class (stl/css :color-input)
                             :on-focus on-focus
                             :on-blur on-blur
                             :on-change handle-value-change}]])]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index 9545c380b..22cf9d567 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.types.color :as ctc]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
@@ -147,12 +148,7 @@
        [:& reorder-handler {:ref dref}])
 
      ;; Stroke Color
-     [:& color-row {:color {:color (:stroke-color stroke)
-                            :opacity (:stroke-opacity stroke)
-                            :id (:stroke-color-ref-id stroke)
-                            :file-id (:stroke-color-ref-file stroke)
-                            :gradient (:stroke-color-gradient stroke)
-                            :image (:stroke-image stroke)}
+     [:& color-row {:color (ctc/stroke->shape-color stroke)
                     :index index
                     :title title
                     :on-change on-color-change-refactor