Merge remote-tracking branch 'origin/token-studio-develop' into florian/computed-set-checkmark

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/sets.cljs

@@ -78,7 +78,7 @@
          :id (if mixed? ic/remove ic/tick)}])]))
 
 (mf/defc sets-tree-set-group
-  [{:keys [active? label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset on-edit-submit]}]
+  [{:keys [label tree-depth tree-path active? selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}]
   (let [editing?' (editing? tree-path)
         active?' (active? tree-path)
         on-context-menu

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

@@ -23,8 +23,9 @@
 
    :color
    {:title "Color"
-    :attributes ctt/color-keys
-    :on-update-shape wtch/update-fill
+    :attributes #{: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
-   #{:stroke-color} wtch/update-stroke-color
+   ctt/color-keys wtch/update-fill-stroke
    ctt/stroke-width-keys wtch/update-stroke-width
    ctt/sizing-keys wtch/update-shape-dimensions
    ctt/opacity-keys wtch/update-opacity

frontend/src/app/worker.cljs

@@ -168,7 +168,6 @@
   (.removeEventListener js/self "message" on-message))
 
 (defn ^:dev/after-load start []
-  []
   (set! process-message-sub (subscribe-buffer-messages))
   (.addEventListener js/self "message" on-message))
 

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