From 643cd6f61f88c5160b6ea952c44eea6c02a43a81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Tue, 17 Feb 2026 09:20:04 +0100
Subject: [PATCH] :bug: Add resolved value to tokens in plugins API (#8372)

---
 frontend/src/app/plugins/tokens.cljs          | 29 +++++++++++++++++++
 .../src/app/app.component.html                |  4 ++-
 .../src/app/app.component.ts                  |  1 +
 plugins/apps/poc-tokens-plugin/src/plugin.ts  |  1 +
 plugins/libs/plugin-types/index.d.ts          |  9 ++++++
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/plugins/tokens.cljs b/frontend/src/app/plugins/tokens.cljs
index 99eb45b093..c11f8dc373 100644
--- a/frontend/src/app/plugins/tokens.cljs
+++ b/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
diff --git a/plugins/apps/poc-tokens-plugin/src/app/app.component.html b/plugins/apps/poc-tokens-plugin/src/app/app.component.html
index 5be709cb57..f5ef5ff940 100644
--- a/plugins/apps/poc-tokens-plugin/src/app/app.component.html
+++ b/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"
diff --git a/plugins/apps/poc-tokens-plugin/src/app/app.component.ts b/plugins/apps/poc-tokens-plugin/src/app/app.component.ts
index 87ce29b22d..d5464a6452 100644
--- a/plugins/apps/poc-tokens-plugin/src/app/app.component.ts
+++ b/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[]];
diff --git a/plugins/apps/poc-tokens-plugin/src/plugin.ts b/plugins/apps/poc-tokens-plugin/src/plugin.ts
index 303dccbde5..996581cf3b 100644
--- a/plugins/apps/poc-tokens-plugin/src/plugin.ts
+++ b/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,
           };
         }),
       ]);
diff --git a/plugins/libs/plugin-types/index.d.ts b/plugins/libs/plugin-types/index.d.ts
index d7b77dccd5..a3a67f4550 100644
--- a/plugins/libs/plugin-types/index.d.ts
+++ b/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.