Merge pull request #296 from tokens-studio/fix-reference-color-preview

Fix reference color preview

common/src/app/common/types/tokens_lib.cljc

@@ -132,6 +132,25 @@
 
     token))
 
+(defn find-token-value-references
+  "Returns set of token references found in `token-value`.
+
+  Used for checking if a token has a reference in the value.
+  Token references are strings delimited by curly braces.
+  E.g.: {foo.bar.baz} -> foo.bar.baz"
+  [token-value]
+  (some->> (re-seq #"\{([^}]*)\}" token-value)
+           (map second)
+           (into #{})))
+
+(defn token-value-self-reference?
+  "Check if the token is self referencing with its `token-name` in `token-value`.
+  Simple 1 level check, doesn't account for circular self refernces across multiple tokens."
+  [token-name token-value]
+  (let [token-references (find-token-value-references token-value)
+        self-reference? (get token-references token-name)]
+    self-reference?))
+
 (defn group-by-type [tokens]
   (let [tokens' (if (or (map? tokens)
                         (d/ordered-map? tokens))

common/test/common_tests/types/tokens_lib_test.cljc

@@ -44,8 +44,17 @@
                 :type :invalid}]
       (t/is (thrown-with-msg? Exception #"expected valid token"
                               (apply ctob/make-token args)))
-      (t/is (false? (ctob/valid-token? {}))))))
+      (t/is (false? (ctob/valid-token? {})))))
 
+  (t/deftest find-token-value-references
+    (t/testing "finds references inside curly braces in a string"
+     (t/is (= #{"foo" "bar"} (ctob/find-token-value-references "{foo} + {bar}")))
+     (t/testing "ignores extra text"
+       (t/is (= #{"foo.bar.baz"} (ctob/find-token-value-references "{foo.bar.baz} + something")))))
+    (t/testing "ignores string without references"
+      (t/is (nil? (ctob/find-token-value-references "1 + 2"))))
+    (t/testing "handles edge-case for extra curly braces"
+      (t/is (= #{"foo" "bar"} (ctob/find-token-value-references "{foo}} + {bar}"))))))
 
 (t/testing "token-set"
   (t/deftest make-token-set

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

@@ -91,12 +91,6 @@ Token names should only contain letters and digits separated by . characters.")}
 
 ;; Component -------------------------------------------------------------------
 
-(defn token-self-reference?
-  [token-name input]
-  (let [token-references (wtt/find-token-references input)
-        self-reference? (get token-references token-name)]
-    self-reference?))
-
 (defn validate-token-value+
   "Validates token value by resolving the value `input` using `StyleDictionary`.
   Returns a promise of either resolved tokens or rejects with an error state."
@@ -108,7 +102,7 @@ Token names should only contain letters and digits separated by . characters.")}
       (empty? (str/trim value))
       (p/rejected {:errors [{:error/code :error/empty-input}]})
 
-      (token-self-reference? token-name value)
+      (ctob/token-value-self-reference? token-name value)
       (p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
 
       :else

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

@@ -45,7 +45,7 @@
 
 (mf/defc token-pill
   {::mf/wrap-props false}
-  [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
+  [{:keys [on-click token theme-token highlighted? on-context-menu]}]
   (let [{:keys [name value resolved-value errors]} token
         errors? (and (seq errors) (seq (:errors theme-token)))]
     [:button
@@ -61,7 +61,9 @@
       :on-click on-click
       :on-context-menu on-context-menu
       :disabled errors?}
-     (when-let [color (wtt/resolved-value-hex token)]
+     (when-let [color (if (seq (ctob/find-token-value-references (:value token)))
+                        (wtt/resolved-value-hex theme-token)
+                        (wtt/resolved-value-hex token))]
        [:& color-bullet {:color color
                          :mini? true}])
      name]))

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

@@ -3,6 +3,7 @@
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
    [app.common.logging :as l]
+   [app.common.types.tokens-lib :as ctob]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
@@ -85,7 +86,7 @@
                                                              {:value value :unit (tinycolor/color-format tc)}
                                                              {:errors [(wte/error-with-value :error.token/invalid-color value)]})
                                                     (or (wtt/parse-token-value value)
-                                                        (if-let [references (-> (wtt/find-token-references value)
+                                                        (if-let [references (-> (ctob/find-token-value-references value)
                                                                                 (seq))]
                                                           {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
                                                            :references references}

frontend/test/token_tests/token_test.cljs

@@ -25,16 +25,6 @@
   (t/testing "doesnt accept invalid double"
     (t/is (nil? (wtt/parse-token-value ".3")))))
 
-(t/deftest find-token-references
-  (t/testing "finds references inside curly braces in a string"
-    (t/is (= #{"foo" "bar"} (wtt/find-token-references "{foo} + {bar}")))
-    (t/testing "ignores extra text"
-      (t/is (= #{"foo.bar.baz"} (wtt/find-token-references "{foo.bar.baz} + something"))))
-    (t/testing "ignores string without references"
-      (t/is (nil? (wtt/find-token-references "1 + 2"))))
-    (t/testing "handles edge-case for extra curly braces"
-      (t/is (= #{"foo" "bar"} (wtt/find-token-references "{foo}} + {bar}"))))))
-
 (t/deftest remove-attributes-for-token-id
   (t/testing "removes attributes matching the `token`, keeps other attributes"
     (t/is (= {:ry "b"}