✨ Validate if token values are too large

frontend/src/app/main/ui/workspace/tokens/errors.cljs

@@ -28,6 +28,10 @@
    {:error/code :error.token/invalid-color
     :error/fn #(str (tr "workspace.token.invalid-color" %))}
 
+   :error.token/number-too-large
+   {:error/code :error.token/number-too-large
+    :error/fn #(str (tr "workspace.token.number-too-large" %))}
+
    :error.style-dictionary/missing-reference
    {:error/code :error.style-dictionary/missing-reference
     :error/fn #(str (tr "workspace.token.missing-references") (str/join " " %))}

frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs

@@ -3,6 +3,7 @@
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
    [app.common.logging :as l]
+   [app.common.schema :as sm]
    [app.common.transit :as t]
    [app.common.types.tokens-lib :as ctob]
    [app.main.ui.workspace.tokens.errors :as wte]
@@ -42,7 +43,7 @@
          :warnings "silent"
          :errors {:brokenReferences "console"}}})
 
-(defn parse-sd-token-color-value
+(defn- parse-sd-token-color-value
   "Parses `value` of a color `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the value is not parseable and/or has missing references returns a map with `:errors`."
   [value]
@@ -50,18 +51,23 @@
     {:value value :unit (tinycolor/color-format tc)}
     {:errors [(wte/error-with-value :error.token/invalid-color value)]}))
 
-(defn parse-sd-token-dimensions-value
+(defn- parse-sd-token-numeric-value
-  "Parses `value` of a dimensions `sd-token` into a map like `{:value 1 :unit \"px\"}`.
+  "Parses `value` of a numeric `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`."
   [value]
-  (or
+  (let [parsed-value  (wtt/parse-token-value value)
-   (wtt/parse-token-value value)
+        out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
-   (if-let [references (seq (ctob/find-token-value-references value))]
+                          (<= (:value parsed-value) sm/min-safe-int))]
-     {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
+    (if (and parsed-value (not out-of-bounds))
-      :references references}
+      parsed-value
-     {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))
+      (if out-of-bounds
+        {:errors [(wte/error-with-value :error.token/number-too-large value)]}
+        (if-let [references (seq (ctob/find-token-value-references value))]
+          {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
+           :references references}
+          {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))))
 
-(defn parse-sd-token-opacity-value
+(defn- parse-sd-token-opacity-value
   "Parses `value` of a dimensions `sd-token` into a map like `{:value 1 :unit \"px\"}`.
   If the `value` is not parseable and/or has missing references returns a map with `:errors`.
   If the `value` is parseable but is out of range returns a map with `warnings`."
@@ -126,7 +132,7 @@
            parsed-token-value (case (:type origin-token)
                                 :color (parse-sd-token-color-value value)
                                 :opacity (parse-sd-token-opacity-value value has-references?)
-                                (parse-sd-token-dimensions-value value))
+                                (parse-sd-token-numeric-value value))
            output-token (cond (:errors parsed-token-value)
                               (merge origin-token parsed-token-value)
                               (:warnings parsed-token-value)

frontend/test/frontend_tests/tokens/style_dictionary_test.cljs

@@ -19,6 +19,15 @@
                        (ctob/add-token-in-set "core" (ctob/make-token {:value "{borderRadius.sm} * 2"
                                                                        :name "borderRadius.md-with-dashes"
                                                                        :type :border-radius}))
+                       (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.large"
+                                                                       :value "123456789012345"
+                                                                       :type :border-radius}))
+                       (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largePx"
+                                                                       :value "123456789012345px"
+                                                                       :type :border-radius}))
+                       (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largeFn"
+                                                                       :value "{borderRadius.sm} * 200000000"
+                                                                       :type :border-radius}))
                        (ctob/get-all-tokens))]
         (-> (sd/resolve-tokens+ tokens)
             (p/finally
@@ -27,6 +36,15 @@
                 (t/is (= "px" (get-in resolved-tokens ["borderRadius.sm" :unit])))
                 (t/is (= 24 (get-in resolved-tokens ["borderRadius.md-with-dashes" :resolved-value])))
                 (t/is (= "px" (get-in resolved-tokens ["borderRadius.md-with-dashes" :unit])))
+                (t/is (nil? (get-in resolved-tokens ["borderRadius.large" :resolved-value])))
+                (t/is (= :error.token/number-too-large
+                         (get-in resolved-tokens ["borderRadius.large" :errors 0 :error/code])))
+                (t/is (nil? (get-in resolved-tokens ["borderRadius.largePx" :resolved-value])))
+                (t/is (= :error.token/number-too-large
+                         (get-in resolved-tokens ["borderRadius.largePx" :errors 0 :error/code])))
+                (t/is (nil? (get-in resolved-tokens ["borderRadius.largeFn" :resolved-value])))
+                (t/is (= :error.token/number-too-large
+                         (get-in resolved-tokens ["borderRadius.largeFn" :errors 0 :error/code])))
                 (done))))))))
 
 (t/deftest process-json-stream-test

frontend/translations/en.po

@@ -6631,6 +6631,10 @@ msgstr "Invalid color value: %s"
 msgid "workspace.token.missing-references"
 msgstr "Missing token references: "
 
+#: src/app/main/ui/workspace/tokens/errors.cljs
+msgid "workspace.token.number-too-large"
+msgstr "Invalid token value. The resolved value is too large: %s"
+
 #: src/app/main/ui/workspace/tokens/errors.cljs
 msgid "workspace.token.invalid-value"
 msgstr "Invalid token value: %s"

frontend/translations/es.po

@@ -6610,6 +6610,10 @@ msgstr "Valor de color no válido: %s"
 msgid "workspace.token.missing-references"
 msgstr "Referéncias de tokens no encontradas:"
 
+#: src/app/main/ui/workspace/tokens/errors.cljs
+msgid "workspace.token.number-too-large"
+msgstr "Valor de token no valido. El valor resuelto es muy grande: %s"
+
 #: src/app/main/ui/workspace/tokens/errors.cljs
 msgid "workspace.token.invalid-value"
 msgstr "Valor de token no válido: %s"