Merge pull request #5266 from penpot/hiru-merge-tokens

Update design tokens

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

@@ -128,13 +128,20 @@
                       {:reg-objects? true
                        :attrs [:strokes]}))
 
-(defn update-color
-  [value shape-ids]
+(defn update-color [f value shape-ids]
   (let [color (some->> value
                        (tinycolor/valid-color)
                        (tinycolor/->hex)
                        (str "#"))]
-    (wdc/change-fill shape-ids {:color color} 0)))
+    (f shape-ids {:color color} 0)))
+
+(defn update-fill
+  [value shape-ids]
+  (update-color wdc/change-fill value shape-ids))
+
+(defn update-stroke-color
+  [value shape-ids]
+  (update-color wdc/change-stroke value shape-ids))
 
 (defn update-shape-dimensions [value shape-ids attributes]
   (ptk/reify ::update-shape-dimensions

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

@@ -184,6 +184,9 @@
                                                                           :r3 "Bottom Right"}
                                                        :on-update-shape-all wtch/update-shape-radius-all
                                                        :on-update-shape wtch/update-shape-radius-single-corner})
+     :color (fn [context-data]
+              [(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape wtch/update-fill))
+               (generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-color))])
      :spacing spacing-attribute-actions
      :sizing sizing-attribute-actions
      :rotation (partial generic-attribute-actions #{:rotation} "Rotation")

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

@@ -7,7 +7,6 @@
 (ns app.main.ui.workspace.tokens.form
   (:require-macros [app.main.style :as stl])
   (:require
-   ;; ["lodash.debounce" :as debounce]
    [app.common.colors :as c]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -113,16 +112,20 @@ Token names should only contain letters and digits separated by . characters.")}
       (p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
 
       :else
-      (-> (update tokens token-name merge {:value value
-                                           :name token-name
-                                           :type (:type token)})
-          (sd/resolve-tokens+)
-          (p/then
-           (fn [resolved-tokens]
-             (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
-               (cond
-                 resolved-value (p/resolved resolved-token)
-                 :else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))})))))))))
+      (let [tokens' (cond-> tokens
+                      ;; Remove previous token when renaming a token
+                      (not= name-value (:name token)) (dissoc (:name token))
+                      :always (update token-name #(ctob/make-token (merge % {:value value
+                                                                             :name token-name
+                                                                             :type (:type token)}))))]
+        (-> tokens'
+            (sd/resolve-tokens-interactive+)
+            (p/then
+             (fn [resolved-tokens]
+               (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
+                 (cond
+                   resolved-value (p/resolved resolved-token)
+                   :else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))))
 
 (defn use-debonced-resolve-callback
   "Resolves a token values using `StyleDictionary`.
@@ -201,8 +204,7 @@ Token names should only contain letters and digits separated by . characters.")}
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type action selected-token-set-id]}]
-  (let [validate-name? (mf/use-state (not (:id token)))
-        token (or token {:type token-type})
+  (let [token (or token {:type token-type})
         color? (wtt/color-token? token)
         selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
         active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
@@ -219,6 +221,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                         (d/dissoc-in token-path))))
 
         ;; Name
+        touched-name? (mf/use-state false)
         name-ref (mf/use-var (:name token))
         name-errors (mf/use-state nil)
         validate-name
@@ -234,15 +237,14 @@ Token names should only contain letters and digits separated by . characters.")}
          (uf/debounce (fn [e]
                         (let [value (dom/get-target-val e)
                               errors (validate-name value)]
-                                                ;; Prevent showing error when just going to another field on a new token
-                          (when-not (and validate-name? (str/empty? value))
-                            (reset! validate-name? false)
+                          (when touched-name?
                             (reset! name-errors errors))))))
 
         on-update-name
         (mf/use-fn
          (mf/deps on-update-name-debounced)
          (fn [e]
+           (reset! touched-name? true)
            (reset! name-ref (dom/get-target-val e))
            (on-update-name-debounced e)))
 
@@ -311,10 +313,10 @@ Token names should only contain letters and digits separated by . characters.")}
          (mf/deps validate-name validate-descripion token resolved-tokens)
          (fn [e]
            (dom/prevent-default e)
-                     ;; We have to re-validate the current form values before submitting
-                     ;; because the validation is asynchronous/debounced
-                     ;; and the user might have edited a valid form to make it invalid,
-                     ;; and press enter before the next validations could return.
+           ;; We have to re-validate the current form values before submitting
+           ;; because the validation is asynchronous/debounced
+           ;; and the user might have edited a valid form to make it invalid,
+           ;; and press enter before the next validations could return.
            (let [final-name (finalize-name @name-ref)
                  valid-name?+ (-> (validate-name final-name) schema-validation->promise)
                  final-value (finalize-value @value-ref)
@@ -327,8 +329,8 @@ Token names should only contain letters and digits separated by . characters.")}
                                                  :token token
                                                  :tokens resolved-tokens})])
                  (p/finally (fn [result err]
-                                        ;; The result should be a vector of all resolved validations
-                                        ;; We do not handle the error case as it will be handled by the components validations
+                              ;; The result should be a vector of all resolved validations
+                              ;; We do not handle the error case as it will be handled by the components validations
                               (when (and (seq result) (not err))
                                 (st/emit! (dt/update-create-token {:token (ctob/make-token :name final-name
                                                                                            :type (or (:type token) token-type)
@@ -386,7 +388,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                                       :on-change on-update-value
                                                       :ref value-input-ref}
                                         :render-right (when color?
-                                                        (mf/fnc color-bullet []
+                                                        (mf/fnc drop-down-button []
                                                           [:div {:class (stl/css :color-bullet)
                                                                  :on-click #(swap! color-ramp-open? not)}
                                                            (if-let [hex (some-> @color tinycolor/valid-color tinycolor/->hex)]

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -366,4 +366,4 @@
                         :aria-label (tr "labels.close")
                         :variant "action"
                         :icon "close"}]
-      [:& themes-modal-body]]]))
+      [:& themes-modal-body]]]))

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

@@ -4,7 +4,7 @@
   This library was chosen as it is already used by StyleDictionary,
   so there is no extra dependency cost and there was no clojure alternatives with all the necessary features."
   (:require
-   ["tinycolor2" :as tinycolor]))
+   ["tinycolor2$default" :as tinycolor]))
 
 (defn tinycolor? [^js x]
   (and (instance? tinycolor x) (.isValid x)))

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

@@ -24,7 +24,7 @@
    :color
    {:title "Color"
     :attributes ctt/color-keys
-    :on-update-shape wtch/update-color
+    :on-update-shape wtch/update-fill
     :modal {:key :tokens/color
             :fields [{:label "Color" :key :color}]}}
 

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

@@ -19,7 +19,8 @@
 (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
-   ctt/color-keys wtch/update-color
+   #{:fill} wtch/update-fill
+   #{: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