From 7c4eae9b56aa3b25e526346b3caae9bd320725e8 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 16 Sep 2026 15:31:38 +0200 Subject: [PATCH] :bug: Fix font family space in tokens --- frontend/src/app/main/data/tokenscript.cljs | 30 ++++++++++++-- .../data/workspace/tokens/application.cljs | 2 +- .../data/workspace/tokens/propagation.cljs | 3 +- .../forms/controls/fonts_combobox.cljs | 2 +- .../tokens/management/forms/validators.cljs | 3 +- frontend/src/app/plugins/tokens.cljs | 9 ++-- .../frontend_tests/plugins/tokens_test.cljs | 21 ++++++++++ plugins/CHANGELOG.md | 1 + .../src/tests/tokens.test.ts | 41 +++++++++++++++++++ 9 files changed, 99 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/data/tokenscript.cljs b/frontend/src/app/main/data/tokenscript.cljs index 22e07efc66..3759e01d28 100644 --- a/frontend/src/app/main/data/tokenscript.cljs +++ b/frontend/src/app/main/data/tokenscript.cljs @@ -78,6 +78,17 @@ (declare tokenscript-symbols->penpot-unit) +(defn font-family-symbols->penpot-unit + "Converts a resolved font-family value into a vector of family names. + A family whose name has several words (`Hanken Grotesk`) is a list of word + symbols, so each family name is the string form of the whole entry." + [^js v] + (when (some? v) + (let [entries (.-value v)] + (if (instance? js/Array entries) + (mapv str entries) + [(str v)])))) + (defn structured-token->penpot-map "Converts structured token (record or array) to penpot map format. Structured tokens are non-primitive token types like `typography` or `box-shadow`." @@ -85,9 +96,13 @@ (if (instance? js/Array (.-value token-symbol)) (mapv tokenscript-symbols->penpot-unit (.-value token-symbol)) (let [entries (es6-iterator-seq (.entries (.-value token-symbol)))] - (into {} (map (fn [[k v :as V]] - [(keyword k) (tokenscript-symbols->penpot-unit v)]) - entries))))) + (into {} (map (fn [[k v]] + (let [k (keyword k)] + ;; The font-family member of a composite is a family list + [k (if (= :font-family k) + (font-family-symbols->penpot-unit v) + (tokenscript-symbols->penpot-unit v))]))) + entries)))) (defn tokenscript-symbols->penpot-unit [^js v] (cond @@ -99,6 +114,15 @@ (percent-number-with-unit? v) (/ (.-value v) 100) :else (.-value v))) +(defn resolved-value->penpot-unit + "Converts the resolved value of a token of the given `type`. + Font families need the type: a list of symbols is a list of families at the + top level and the words of a single family name inside an entry." + [type ^js v] + (if (= :font-family type) + (font-family-symbols->penpot-unit v) + (tokenscript-symbols->penpot-unit v))) + ;; Processors ------------------------------------------------------------------ ;; The processor resolves tokens ;; resolved/error tokens get put back into a clojure structure directly during build time diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index dd96ebf89c..5021452552 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -699,7 +699,7 @@ resolved-value (get-in resolved-tokens [(:name token) :resolved-value]) resolved-value (if (contains? cf/flags :tokenscript) - (ts/tokenscript-symbols->penpot-unit resolved-value) + (ts/resolved-value->penpot-unit (:type token) resolved-value) resolved-value) tokenized-attributes (cfo/attributes-map attributes token) type (:type token)] diff --git a/frontend/src/app/main/data/workspace/tokens/propagation.cljs b/frontend/src/app/main/data/workspace/tokens/propagation.cljs index 9440b32c81..1f835200cf 100644 --- a/frontend/src/app/main/data/workspace/tokens/propagation.cljs +++ b/frontend/src/app/main/data/workspace/tokens/propagation.cljs @@ -193,7 +193,8 @@ (ctob/get-tokens-in-active-sets))] (->> (if (contains? cf/flags :tokenscript) (rx/of (-> (ts/resolve-tokens tokens-tree) - (d/update-vals #(update % :resolved-value ts/tokenscript-symbols->penpot-unit)))) + (d/update-vals #(update % :resolved-value + (partial ts/resolved-value->penpot-unit (:type %)))))) (sd/resolve-tokens tokens-tree)) (rx/mapcat (fn [sd-tokens] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs index 88e8346580..48d8586565 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/fonts_combobox.cljs @@ -78,7 +78,7 @@ (fn [resolved-tokens] (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens (:name token)) resolved-value (if (contains? cf/flags :tokenscript) - (ts/tokenscript-symbols->penpot-unit resolved-value) + (ts/resolved-value->penpot-unit (:type token) resolved-value) resolved-value)] (if resolved-value (rx/of {:value resolved-value}) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/validators.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/validators.cljs index 4fb9be3e4f..428d2fee31 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/validators.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/validators.cljs @@ -46,7 +46,8 @@ (fn [resolved-tokens] (let [resolved-token (cond-> (get resolved-tokens (:name token)) (contains? cf/flags :tokenscript) - (update :resolved-value ts/tokenscript-symbols->penpot-unit))] + (update :resolved-value + (partial ts/resolved-value->penpot-unit (:type token))))] (cond (:resolved-value resolved-token) (rx/of resolved-token) diff --git a/frontend/src/app/plugins/tokens.cljs b/frontend/src/app/plugins/tokens.cljs index b27019c7ba..3678904d18 100644 --- a/frontend/src/app/plugins/tokens.cljs +++ b/frontend/src/app/plugins/tokens.cljs @@ -147,13 +147,10 @@ (defn- font-families-resolved-value->js "Converts a resolved fontFamilies value (a tokenscript list symbol) into the - documented `string[]` shape rather than leaking the raw tokenscript structure." + documented `string[]` shape." [resolved-value] - (let [v (ts/tokenscript-symbols->penpot-unit resolved-value)] - (cond - (nil? v) nil - (sequential? v) (clj->js v) - :else #js [v]))) + (some-> (ts/font-family-symbols->penpot-unit resolved-value) + (clj->js))) (defn- get-resolved-value [token tokens-tree] diff --git a/frontend/test/frontend_tests/plugins/tokens_test.cljs b/frontend/test/frontend_tests/plugins/tokens_test.cljs index 3f4f56f6d9..7c814a9255 100644 --- a/frontend/test/frontend_tests/plugins/tokens_test.cljs +++ b/frontend/test/frontend_tests/plugins/tokens_test.cljs @@ -410,6 +410,27 @@ (t/is (array? result)) (t/is (= ["Inter" "Arial"] (vec result))))) +(t/deftest font-family-token-resolved-value-keeps-multi-word-families + ;; An unquoted family whose name has several words resolves to a list of word + ;; symbols, so the family name is the string form of each entry. + (let [token (ctob/make-token + {:name "font.body" + :type :font-family + :value ["Hanken Grotesk" "IBM Plex Mono"]}) + result (get-resolved-value token {(:name token) token})] + (t/is (array? result)) + (t/is (= ["Hanken Grotesk" "IBM Plex Mono"] (vec result))))) + +(t/deftest typography-token-resolved-value-keeps-multi-word-families + (let [token (ctob/make-token + {:name "type.body" + :type :typography + :value {:font-family ["Hanken Grotesk" "Arial"] + :font-size "16px"}}) + result (get-resolved-value token {(:name token) token}) + entry (aget result 0)] + (t/is (= ["Hanken Grotesk" "Arial"] (vec (aget entry "fontFamilies")))))) + (t/deftest token-theme-add-set-accepts-token-set-id (let [plugin-id "plugin-id" file-id (uuid/next) diff --git a/plugins/CHANGELOG.md b/plugins/CHANGELOG.md index e4e577f263..f93421c6b1 100644 --- a/plugins/CHANGELOG.md +++ b/plugins/CHANGELOG.md @@ -14,6 +14,7 @@ - **plugins-runtime**: Setting an individual padding/margin side (`leftPadding`, `topMargin`, …) now re-derives the padding/margin type, switching to `multiple` when the four sides stop being symmetric (so the value is actually painted) and back to `simple` once top/bottom and left/right are mirrored again. - **plugins-runtime**: Removed the premature deep-hardening of the host plugin context, which froze shared host functions (including `Function.prototype`) before SES override taming, causing `TypeError: Cannot assign to read only property 'toString'` on later host-side function extension. Related to #11001. - **plugins-runtime**: Fixed the `fontFamilies` token property mapping so `Shape.applyToken(token, ["fontFamilies"])` resolves to the canonical `:font-family` attribute and applied-token readback exposes the documented `fontFamilies` key instead of the undocumented singular `fontFamily`. Closes #11405. +- **plugins-runtime**: `TokenFontFamilies.resolvedValue` and the `fontFamilies` member of `TokenTypographyValue` now keep a family whose name has several words (`Hanken Grotesk`) as one entry, instead of splitting it into an array of its words. ## 1.5.0 (2026-07-08) diff --git a/plugins/apps/plugin-api-test-suite/src/tests/tokens.test.ts b/plugins/apps/plugin-api-test-suite/src/tests/tokens.test.ts index 0b3ae9be6c..87e489e521 100644 --- a/plugins/apps/plugin-api-test-suite/src/tests/tokens.test.ts +++ b/plugins/apps/plugin-api-test-suite/src/tests/tokens.test.ts @@ -306,6 +306,28 @@ describe('Tokens', () => { expect(Object.keys(b.tokens)).toContain('paddingLeft'); }); + // The target is a text shape because the attribute set of a board excludes + // the font-family property, so the application is filtered out there and + // the assertions pass vacuously. + test('applyToken binds a fontFamilies token to a text shape', async (ctx) => { + const set = activeSet(ctx, unique('set')); + // Self-provided family, so the test doesn't depend on a specific font. + const family = ctx.penpot.fonts.all[0].fontFamily; + const token = set.addToken({ + type: 'fontFamilies', + name: unique('fontFamilies.'), + value: [family], + }); + + const t = ctx.penpot.createText('Hello Penpot'); + if (!t) throw new Error('createText returned null'); + ctx.board.appendChild(t); + + t.applyToken(token, ['fontFamilies']); + await waitFor(() => Object.keys(t.tokens).includes('fontFamilies')); + expect(Object.keys(t.tokens)).toContain('fontFamilies'); + }); + test('duplicate and remove a token', (ctx) => { const set = activeSet(ctx, unique('set')); const token = set.addToken({ @@ -400,6 +422,25 @@ describe('Token types', () => { expect(resolved as unknown as string[]).toContain('Arial'); }); + // The resolver parses a family whose name has several words as a list of + // word symbols, so each family name must survive as a single entry. A + // single-word family takes the simpler path the test above covers. + test('fontFamilies token resolvedValue keeps multi-word families whole', (ctx) => { + const set = activeSet(ctx, unique('set')); + const token = set.addToken({ + type: 'fontFamilies', + name: unique('fontFamilies.'), + value: ['Hanken Grotesk'], + }); + // The stored value keeps the family whole, isolating resolution below. + expect(token.value).toEqual(['Hanken Grotesk']); + + const resolved = token.resolvedValue as unknown as string[]; + expect(Array.isArray(resolved)).toBe(true); + expect(resolved).toHaveLength(1); + expect(resolved[0]).toBe('Hanken Grotesk'); + }); + test('shadow token exposes its composite value', (ctx) => { const set = activeSet(ctx, unique('set')); const token = set.addToken({