Use resolved tokens from style-dictionary

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

@@ -34,10 +34,12 @@
   [token shapes token-attributes]
   (some #(token-applied? token % token-attributes) shapes))
 
-(defn resolve-token-value [{:keys [value] :as token}]
+(defn resolve-token-value [{:keys [value resolved-value] :as token}]
-  (if-let [int-or-double (d/parse-double value)]
+  (or
-    int-or-double
+   resolved-value
-    (throw (ex-info (str "Implement token value resolve for " value) token))))
+   (if-let [int-or-double (d/parse-double value)]
+     int-or-double
+     (throw (ex-info (str "Implement token value resolve for " value) token)))))
 
 (defn maybe-resolve-token-value [{:keys [value] :as token}]
   (when value (resolve-token-value token)))

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

@@ -15,7 +15,9 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.core :as wtc]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.util.dom :as dom]
+   [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
    [shadow.resource]))
@@ -26,16 +28,21 @@
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted? on-context-menu]}]
-  (let [{:keys [name value]} token
+  (js/console.log "token" token)
-        resolved-value (try
+  (let [{:keys [name value resolved-value errors]} token
-                         (wtc/resolve-token-value token)
+        errors? (seq errors)]
-                         (catch js/Error _ nil))]
+    [:button {:class (stl/css-case :token-pill true
-    [:div {:class (stl/css-case :token-pill true
+                                   :token-pill-highlighted highlighted?
-                                :token-pill-highlighted highlighted?
+                                   :token-pill-invalid errors?)
-                                #_#_:token-pill-invalid (not resolved-value))
+              :title (cond
-           :title (str (if resolved-value "Token value: " "Invalid token value: ") value)
+                       errors? (sd/humanize-errors token)
-           :on-click on-click
+                       :else (->> [(str "Token: " name)
-           :on-context-menu on-context-menu}
+                                   (str "Original value: " value)
+                                   (str "Resolved value: " resolved-value)]
+                                  (str/join "\n")))
+              :on-click on-click
+              :on-context-menu on-context-menu
+              :disabled errors?}
      name]))
 
 (mf/defc token-section-icon
@@ -138,7 +145,8 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-        tokens (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/workspace-tokens)
+                   (sd/use-resolved-tokens))
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
     [:article

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

@@ -30,6 +30,7 @@
   }
 
   &.token-pill-invalid {
+    background-color: var(--button-secondary-background-color-rest);
     color: var(--status-color-error-500);
     opacity: 0.8;
   }

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

@@ -4,6 +4,7 @@
    ["style-dictionary$default" :as sd]
    [app.common.data :as d]
    [app.main.refs :as refs]
+   [cuerdas.core :as str]
    [promesa.core :as p]
    [rumext.v2 :as mf]
    [shadow.resource]))
@@ -71,8 +72,13 @@
                      (js/console.log "Resolved tokens" resolved-tokens))
                    resolved-tokens))))))
 
-(def errors
+(defn humanize-errors [{:keys [errors value] :as _token}]
-  {:style-dictionary/missing-reference {:user/message "Could not resolve reference token with the name: %s"}})
+  (->> (map (fn [err]
+              (case err
+                :style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
+                nil))
+            errors)
+       (str/join "\n")))
 
 (defn tokens-name-map [tokens]
   (->> tokens