Merge pull request #377 from tokens-studio/florian/fix-color-token-bug

Fix color token bug

frontend/src/app/main/ui/workspace/tokens/changes.cljs

@@ -143,6 +143,14 @@
   [value shape-ids]
   (update-color wdc/change-stroke value shape-ids))
 
+(defn update-fill-stroke [value shape-ids attributes]
+  (ptk/reify ::update-fill-stroke
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/of
+       (when (:fill attributes) (update-fill value shape-ids))
+       (when (:stroke-color attributes) (update-stroke-color value shape-ids))))))
+
 (defn update-shape-dimensions [value shape-ids attributes]
   (ptk/reify ::update-shape-dimensions
     ptk/WatchEvent

frontend/src/app/main/ui/workspace/tokens/token_types.cljs

@@ -23,8 +23,9 @@
 
    :color
    {:title "Color"
-    :attributes ctt/color-keys
+    :attributes #{:fill}
-    :on-update-shape wtch/update-fill
+    :all-attributes ctt/color-keys
+    :on-update-shape wtch/update-fill-stroke
     :modal {:key :tokens/color
             :fields [{:label "Color" :key :color}]}}
 

frontend/src/app/main/ui/workspace/tokens/update.cljs

@@ -19,8 +19,7 @@
 (def attributes->shape-update
   {#{:rx :ry} (fn [v ids _] (wtch/update-shape-radius-all v ids))
    #{:r1 :r2 :r3 :r4} wtch/update-shape-radius-single-corner
-   #{:fill} wtch/update-fill
+   ctt/color-keys wtch/update-fill-stroke
-   #{:stroke-color} wtch/update-stroke-color
    ctt/stroke-width-keys wtch/update-stroke-width
    ctt/sizing-keys wtch/update-shape-dimensions
    ctt/opacity-keys wtch/update-opacity

frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs

@@ -129,6 +129,38 @@
              (t/testing "while :r4 was kept with borderRadius.sm"
                (t/is (= (:r4 (:applied-tokens rect-1')) (:name token-sm)))))))))))
 
+(t/deftest test-apply-color
+  (t/testing "applies color token and updates the shape fill and stroke-color"
+    (t/async
+     done
+     (let [color-token {:name "color.primary"
+                        :value "red"
+                        :type :color}
+           file (-> (setup-file-with-tokens)
+                    (update-in [:data :tokens-lib]
+                               #(ctob/add-token-in-set % "Set A" (ctob/make-token color-token))))
+           store (ths/setup-store file)
+           rect-1 (cths/get-shape file :rect-1)
+           events [(wtch/apply-token {:shape-ids [(:id rect-1)]
+                                      :attributes #{:color}
+                                      :token (toht/get-token file "color.primary")
+                                      :on-update-shape wtch/update-fill})
+                   (wtch/apply-token {:shape-ids [(:id rect-1)]
+                                      :attributes #{:stroke-color}
+                                      :token (toht/get-token file "color.primary")
+                                      :on-update-shape wtch/update-stroke-color})]]
+       (tohs/run-store-async
+        store done events
+        (fn [new-state]
+          (let [file' (ths/get-file-from-store new-state)
+                token-target' (toht/get-token file' "rotation.medium")
+                rect-1' (cths/get-shape file' :rect-1)]
+            (t/is (some? (:applied-tokens rect-1')))
+            (t/is (= (:fill (:applied-tokens rect-1')) (:name token-target')))
+            (t/is (= (get-in rect-1' [:fills 0 :fill-color]) "#ff0000"))
+            (t/is (= (:stroke (:applied-tokens rect-1')) (:name token-target')))
+            (t/is (= (get-in rect-1' [:strokes 0 :stroke-color]) "#ff0000")))))))))
+
 (t/deftest test-apply-dimensions
   (t/testing "applies dimensions token and updates the shapes width and height"
     (t/async