fix: typography letter-spacing (#13960)

src/quo2/components/markdown/text.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.markdown.text
   (:require [quo.react-native :as rn]
-            [reagent.core :as reagent]
             [quo.theme :as theme]
             [quo2.foundations.colors :as colors]
-            [quo2.foundations.typography :as typography]))
+            [quo2.foundations.typography :as typography]
+            [reagent.core :as reagent]))
 
 (defn text-style [{:keys [size align weight style]}]
   (merge (case (or weight :regular)

src/quo2/foundations/typography.cljs

@@ -1,25 +1,40 @@
 (ns quo2.foundations.typography)
 
-;; Formulat for letter spacing from figma %: font-size*{figma-percentage}/100
+(defn- tracking-fn
+  "Check inter dynamic metric https://rsms.me/inter/dynmetrics/"
+  [font-size]
+  (let [a -0.0223
+        b 0.185
+        c -0.1745
+        e js/Math.E]
+    (->> font-size
+         (* c)
+         (js/Math.pow e)
+         (* b)
+         (+ a)
+         (* font-size))))
+
+(def tracking (memoize tracking-fn))
+
 (def heading-1 {:font-size      27
                 :line-height    32
-                :letter-spacing -0.567})
+                :letter-spacing (tracking 27)})
 
 (def heading-2 {:font-size      19
                 :line-height    25.65
-                :letter-spacing  -0.304})
+                :letter-spacing (tracking 19)})
 
 (def paragraph-1 {:font-size      15
                   :line-height    21.75
-                  :letter-spacing -0.135})
+                  :letter-spacing (tracking 15)})
 
 (def paragraph-2 {:font-size      13
                   :line-height    18.2
-                  :letter-spacing -0.039})
+                  :letter-spacing (tracking 13)})
 
 (def label {:font-size      11
             :line-height    15.62
-            :letter-spacing -0.055})
+            :letter-spacing (tracking 11)})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 

src/quo2/screens/markdown/text.cljs

@@ -1,9 +1,9 @@
 (ns quo2.screens.markdown.text
-  (:require [quo.react-native :as rn]
+  (:require [quo.design-system.colors :as colors]
             [quo.previews.preview :as preview]
-            [reagent.core :as reagent]
+            [quo.react-native :as rn]
             [quo2.components.markdown.text :as quo2]
-            [quo.design-system.colors :as colors]))
+            [reagent.core :as reagent]))
 
 (def descriptor [{:label   "Size:"
                   :key     :size