✨ Force current set as active when resolving tokens in sidebar

CHANGES.md

@@ -43,6 +43,7 @@
 - Fix plugin modal drag interactions over iframe and close-button behavior (by @marekhrabe) [Github #8871](https://github.com/penpot/penpot/pull/8871)
 - Fix hot update on color-row on texts [Taiga #13923](https://tree.taiga.io/project/penpot/issue/13923)
 - Fix selected color tokens [Taiga #13930](https://tree.taiga.io/project/penpot/issue/13930)
+- Display resolved values of inactive tokens [Taiga #13628](https://tree.taiga.io/project/penpot/issue/13628)
 
 ## 2.15.0 (Unreleased)
 

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

@@ -933,6 +933,7 @@ Will return a value that matches this schema:
 `:all`     All of the nested sets are active
 `:partial` Mixed active state of nested sets")
   (get-tokens-in-active-sets [_] "set of set names that are active in the the active themes")
+  (get-tokens-in-active-sets-force [_ force-set-id] "same as above but forcing a set to be active, even if it's not in the active themes")
   (get-all-tokens [_] "all tokens in the lib, as a sequence")
   (get-all-tokens-map [_] "all tokens in the lib, as a map name -> token")
   (get-tokens [_ set-id] "return a map of tokens in the set, indexed by token-name"))
@@ -1330,6 +1331,21 @@ Will return a value that matches this schema:
                                    active-set-names)]
       tokens))
 
+  (get-tokens-in-active-sets-force [this force-set-id]
+    (let [theme-set-names  (get-active-themes-set-names this)
+          all-set-names    (get-set-names this)
+          force-set        (get-set this force-set-id)
+          active-set-names (cond-> (filter theme-set-names all-set-names)
+                             (some? force-set)
+                             (conj (get-name force-set)))
+
+          tokens           (reduce (fn [tokens set-name]
+                                     (let [set (get-set-by-name this set-name)]
+                                       (merge tokens (get-tokens- set))))
+                                   (d/ordered-map)
+                                   active-set-names)]
+      tokens))
+
   (get-all-tokens [this]
     (mapcat #(vals (get-tokens- %))
             (get-sets this)))

frontend/playwright/ui/specs/tokens/crud.spec.js

@@ -7,6 +7,7 @@ import {
   setupTypographyTokensFileRender,
   testTokenCreationFlow,
   unfoldTokenType,
+  createToken,
 } from "./helpers";
 
 test.beforeEach(async ({ page }) => {
@@ -1790,6 +1791,27 @@ test("User duplicate color token", async ({ page }) => {
   ).toBeVisible();
 });
 
+test("User disables the current set but token still have resolved values shown in the sidebar", async ({
+  page,
+}) => {
+  const { tokenThemesSetsSidebar, tokensSidebar } = await setupEmptyTokensFileRender(page);
+
+  // Create color token
+  await createToken(page, "Color", "color.primary", "Value", "#ff0000");
+  await unfoldTokenType(tokensSidebar, "color");
+
+  // Deactivate current set
+  await tokenThemesSetsSidebar
+    .getByRole("checkbox")
+    .click();
+
+  // Tokens tab panel should have a token with the color #ff0000 and correct resolved value in the tooltip
+  const colorTokenPill = tokensSidebar.getByRole("button", { name: "#ff0000 color.primary" });
+  await expect(colorTokenPill).toHaveCount(1);
+  await colorTokenPill.hover();  // Force title attribute to be attached to the button
+  await expect(colorTokenPill).toHaveAttribute("title", /Resolved value: #ff0000/);
+});
+
 test.describe("Tokens tab - edition", () => {
   test("User edits typography token and all fields are valid", async ({
     page,

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

@@ -372,14 +372,26 @@
             (ctob/get-tokens-in-active-sets tokens-lib)
             {}))
 
+        selected-token-set-id
+        (mf/deref refs/selected-token-set-id)
+
+        active-tokens-force-set
+        (mf/with-memo [tokens-lib selected-token-set-id]
+          (if (and tokens-lib selected-token-set-id)
+            (ctob/get-tokens-in-active-sets-force tokens-lib selected-token-set-id)
+            {}))
+
         tokenscript? (contains? cf/flags :tokenscript)
 
-        tokenscript-resolved-active-tokens
-        (mf/with-memo [tokens-lib tokenscript?]
-          (when tokenscript? (ts/resolve-tokens active-tokens)))
-
         resolved-active-tokens
-        (sd/use-resolved-tokens* active-tokens)]
+        (sd/use-resolved-tokens* active-tokens)
+
+        tokenscript-resolved-active-tokens-force-set
+        (mf/with-memo [active-tokens-force-set tokenscript?]
+          (when tokenscript? (ts/resolve-tokens active-tokens-force-set)))
+
+        resolved-active-tokens-force-set
+        (sd/use-resolved-tokens* active-tokens-force-set)]
 
     [:*
      (if (:collapse-left-sidebar layout)
@@ -388,10 +400,10 @@
                           :file file
                           :page-id page-id
                           :tokens-lib tokens-lib
-                          :active-tokens active-tokens
+                          :active-tokens active-tokens-force-set
-                          :resolved-active-tokens (if (contains? cf/flags :tokenscript)
+                          :resolved-active-tokens (if tokenscript?
-                                                    tokenscript-resolved-active-tokens
+                                                    tokenscript-resolved-active-tokens-force-set
-                                                    resolved-active-tokens)}])
+                                                    resolved-active-tokens-force-set)}])
      [:> right-sidebar* {:section section
                          :selected selected
                          :drawing-tool drawing-tool