diff --git a/common/src/app/common/files/tokens.cljc b/common/src/app/common/files/tokens.cljc index 7d6cbec6bd..e263d5401f 100644 --- a/common/src/app/common/files/tokens.cljc +++ b/common/src/app/common/files/tokens.cljc @@ -222,7 +222,7 @@ (d/without-nils {:name name :type type - :value value + :value (cond-> value (number? value) str) :description description}))) ;; Token set diff --git a/common/test/common_tests/files/tokens_test.cljc b/common/test/common_tests/files/tokens_test.cljc index 8052cbc981..63f083ce5e 100644 --- a/common/test/common_tests/files/tokens_test.cljc +++ b/common/test/common_tests/files/tokens_test.cljc @@ -25,6 +25,18 @@ (t/testing "doesnt accept invalid double" (t/is (nil? (cfo/parse-token-value ".3"))))) +(t/deftest convert-dtcg-token-test + (t/testing "keeps string scalar values untouched" + (t/is (= {:name "spacing.16" :type :spacing :value "16"} + (cfo/convert-dtcg-token {"name" "spacing.16" "type" "spacing" "value" "16"}))) + (t/is (= {:name "spacing.16" :type :spacing :value "16px"} + (cfo/convert-dtcg-token {"name" "spacing.16" "type" "spacing" "value" "16px"})))) + (t/testing "coerces numeric scalar values to strings" + (t/is (= {:name "spacing.16" :type :spacing :value "16"} + (cfo/convert-dtcg-token {"name" "spacing.16" "type" "spacing" "value" 16}))) + (t/is (= {:name "radius" :type :border-radius :value "4"} + (cfo/convert-dtcg-token {"name" "radius" "type" "borderRadius" "value" 4}))))) + (t/deftest token-applied-test (t/testing "matches passed token with `:token-attributes`" (t/is (true? (cfo/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x})))) diff --git a/plugins/libs/plugin-types/index.d.ts b/plugins/libs/plugin-types/index.d.ts index 4b082cb506..fdba681cce 100644 --- a/plugins/libs/plugin-types/index.d.ts +++ b/plugins/libs/plugin-types/index.d.ts @@ -5060,12 +5060,18 @@ export interface TokenTypography extends TokenBase { /** * Any possible type of value field in a token. + * + * Token values are always stored as strings, including for numeric token + * types such as `spacing`, `dimension` or `borderRadius` (e.g. `"16"` or + * `"16px"`). A plain `number` is also accepted on input and coerced to its + * string representation. */ export type TokenValueString = | TokenShadowValueString | TokenTypographyValueString | string - | string[]; + | string[] + | number; /** * The supported Design Tokens in Penpot. @@ -5193,7 +5199,11 @@ export interface TokenSet { * @param type The type of the token. * @param name The name of the token (required). It may contain * a group path, separated by `.`. - * @param value The value of the token (required), in the string form. + * @param value The value of the token (required), always in its string + * form. This applies to numeric token types too (e.g. `spacing`, + * `dimension`, `borderRadius`): use `"16"` or `"16px"` rather than `16`. + * For convenience a plain number is also accepted and coerced to its + * string representation (`16` becomes `"16"`). * @return Returns the created Token. */ addToken({