From 3312bfe62c2da86b53e82b7151f05ab24019190c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 11 Mar 2026 14:15:24 +0100 Subject: [PATCH] :sparkles: Force current set as active when resolving tokens in sidebar --- CHANGES.md | 1 + common/src/app/common/types/tokens_lib.cljc | 16 ++++++++++ .../playwright/ui/specs/tokens/crud.spec.js | 22 ++++++++++++++ .../src/app/main/ui/workspace/sidebar.cljs | 30 +++++++++++++------ 4 files changed, 60 insertions(+), 9 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 2f4847e0b7..026fdc1b8e 100644 --- a/CHANGES.md +++ b/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) diff --git a/common/src/app/common/types/tokens_lib.cljc b/common/src/app/common/types/tokens_lib.cljc index b391421af2..65e49ac443 100644 --- a/common/src/app/common/types/tokens_lib.cljc +++ b/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))) diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index 4b9266fa60..4bfd1c6a4b 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/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, diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 7db1fa2077..ae43b60052 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/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 - :resolved-active-tokens (if (contains? cf/flags :tokenscript) - tokenscript-resolved-active-tokens - resolved-active-tokens)}]) + :active-tokens active-tokens-force-set + :resolved-active-tokens (if tokenscript? + tokenscript-resolved-active-tokens-force-set + resolved-active-tokens-force-set)}]) [:> right-sidebar* {:section section :selected selected :drawing-tool drawing-tool