status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 02:35:54 +00:00
Code Issues Projects Releases Wiki Activity

fix: typography letter-spacing (#13960)

Browse Source
This commit is contained in:
yqrashawn 2022-09-13 15:24:09 +08:00 committed by GitHub
parent 94303a4a64
commit 9e2990152c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/quo2/components/markdown/text.cljs
View File

@ -1,32 +1,32 @@
(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)
:regular typography/font-regular
:medium typography/font-medium
:regular typography/font-regular
:medium typography/font-medium
:semi-bold typography/font-semi-bold
:bold typography/font-bold
:bold typography/font-bold
:monospace typography/monospace
:inherit nil)
:inherit nil)
(case (or size :paragraph-1)
:label typography/label
:label typography/label
:paragraph-2 typography/paragraph-2
:paragraph-1 typography/paragraph-1
:heading-2 typography/heading-2
:heading-1 typography/heading-1
:inherit nil)
:heading-2 typography/heading-2
:heading-1 typography/heading-1
:inherit nil)
{:text-align (or align :auto)}
(if (:color style)
style
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/black)))))
(defn text []
(let [this (reagent/current-component)
(let [this (reagent/current-component)
props (reagent/props this)
style (text-style props)]
(into [rn/text (merge {:style style}

31
src/quo2/foundations/typography.cljs
View File

@ -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})
(def heading-2 {:font-size 19
:line-height 25.65
: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

10
src/quo2/screens/markdown/text.cljs
View File

@ -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
@ -31,7 +31,7 @@
:value "Monospace"}]}])
(defn cool-preview []
(let [state (reagent/atom {})]
(let [state (reagent/atom {})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
@ -46,4 +46,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])