🐛 Add resolved value to tokens in plugins API

frontend/src/app/plugins/tokens.cljs

@@ -13,6 +13,7 @@
    [app.common.types.tokens-lib :as ctob]
    [app.common.uuid :as uuid]
    [app.main.data.style-dictionary :as sd]
+   [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
    [app.main.store :as st]
@@ -34,6 +35,14 @@
                            :shape-ids shape-ids
                            :expand-with-children false})))))
 
+(defn- get-resolved-value
+  [token tokens-tree]
+  (let [resolved-tokens (ts/resolve-tokens tokens-tree)
+        resolved-value  (-> resolved-tokens
+                            (dm/get-in [(:name token) :resolved-value])
+                            (ts/tokenscript-symbols->penpot-unit))]
+    resolved-value))
+
 (defn token-proxy? [p]
   (obj/type-of? p "TokenProxy"))
 
@@ -85,6 +94,26 @@
      (fn [_ value]
        (st/emit! (dwtl/update-token set-id id {:value value})))}
 
+    :resolvedValue
+    {:this true
+     :enumerable false
+     :get
+     (fn [_]
+       (let [token           (u/locate-token file-id set-id id)
+             tokens-lib      (u/locate-tokens-lib file-id)
+             tokens-tree     (ctob/get-tokens-in-active-sets tokens-lib)]
+         (get-resolved-value token tokens-tree)))}
+
+    :resolvedValueString
+    {:this true
+     :enumerable false
+     :get
+     (fn [_]
+       (let [token           (u/locate-token file-id set-id id)
+             tokens-lib      (u/locate-tokens-lib file-id)
+             tokens-tree     (ctob/get-tokens-in-active-sets tokens-lib)]
+         (str (get-resolved-value token tokens-tree))))}
+
     :description
     {:this true
      :get

plugins/apps/poc-tokens-plugin/src/app/app.component.html

@@ -113,7 +113,9 @@
                 class="body-m panel-item token-item"
                 (click)="applyToken(token.id)"
               >
-                <span>{{ token.name }}</span>
+                <span title="{{ token.resolvedValueString }}">
+                  {{ token.name }}
+                </span>
                 <button
                   type="button"
                   data-appearance="secondary"

plugins/apps/poc-tokens-plugin/src/app/app.component.ts

@@ -23,6 +23,7 @@ type Token = {
   id: string;
   name: string;
   description: string;
+  resolvedValueString: string;
 };
 
 type TokensGroup = [string, Token[]];

plugins/apps/poc-tokens-plugin/src/plugin.ts

@@ -109,6 +109,7 @@ function loadTokens(setId: string) {
             id: token.id,
             name: token.name,
             description: token.description,
+            resolvedValueString: token.resolvedValueString,
           };
         }),
       ]);

plugins/libs/plugin-types/index.d.ts

@@ -4345,6 +4345,15 @@ export interface TokenBase {
    */
   remove(): void;
 
+  /**
+   * The value calculated by finding all tokens with the same name in active sets
+   * and resolving the references.
+   *
+   * It's converted to string, regardless of the data type of the value depending
+   * on the token type. It can be undefined if no value has been found in active sets.
+   */
+  readonly resolvedValueString: string | undefined;
+
   /**
    * Applies this token to one or more properties of the given shapes.
    * @param shapes is an array of shapes to apply it.