Skip to content

Commit

Permalink
Merge pull request #44 from Teamwork/android/fix_typography_letterspa…
Browse files Browse the repository at this point in the history 
…cing

Android: Fix letter spacing values for XML typography
  • Loading branch information
@aidangrabe
aidangrabe authored Dec 15, 2022
2 parents 34109fb + 74b1a4a commit 64b787e
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 26 deletions.
19 changes: 14 additions & 5 deletions android/styledictionary/app/src/main/java/com/teamwork/mobile/design/MainActivity.kt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
package com.teamwork.mobile.design

import android.os.Bundle
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
Expand All @@ -12,6 +14,8 @@ import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.viewinterop.AndroidView
import com.teamwork.design.TeamworkTheme

class MainActivity : ComponentActivity() {
Expand All @@ -26,11 +30,11 @@ class MainActivity : ComponentActivity() {
) {
Column {
Text(
text = "headlineLarge",
text = "Headline Large",
style = TeamworkTheme.typography.headlineLarge
)
Text(
text = "headlineMedium",
text = "Headline Medium",
style = TeamworkTheme.typography.headlineMedium
)
Text(
Expand All @@ -40,15 +44,15 @@ class MainActivity : ComponentActivity() {
color = TeamworkTheme.color.border.borderSuccessHover
)
),
text = "headlineSmall",
text = "Headline Small",
style = TeamworkTheme.typography.headlineSmall
)
Text(
text = "bodyMedium",
text = "Body Medium",
style = TeamworkTheme.typography.bodyMedium
)
Text(
text = "bodySmall",
text = "Body Small",
style = TeamworkTheme.typography.bodySmall
)

Expand All @@ -72,6 +76,11 @@ class MainActivity : ComponentActivity() {
text = "colorSurfaceCriticalDefault"
)
}

val viewParent = LocalView.current.rootView
AndroidView(factory = {
LayoutInflater.from(it).inflate(R.layout.android_views_typography, viewParent as ViewGroup, false)
})
}
}
}
Expand Down
49 changes: 49 additions & 0 deletions android/styledictionary/app/src/main/res/layout/android_views_typography.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
style="@style/typography_title_small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title Small"
/>

<TextView
style="@style/typography_title_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title Medium"
/>

<TextView
style="@style/typography_title_large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title Large"
/>

<TextView
style="@style/typography_body_small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Body Small"
/>

<TextView
style="@style/typography_body_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Body Medium"
/>

<TextView
style="@style/typography_body_large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Body Large"
/>

</LinearLayout>
30 changes: 15 additions & 15 deletions android/styledictionary/teamwork-design-system/src/main/res/values/typography.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<style name="typography_display_small">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">36sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>

Expand All @@ -36,7 +36,7 @@
<style name="typography_display_medium">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">45sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">7sp</item>
</style>

Expand All @@ -56,7 +56,7 @@
<style name="typography_display_large">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">57sp</item>
<item name="android:letterSpacing">0.96</item>
<item name="android:letterSpacing">-0.04</item>
<item name="android:lineSpacingExtra">7sp</item>
</style>

Expand All @@ -76,7 +76,7 @@
<style name="typography_headline_small">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">24sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>

Expand All @@ -96,7 +96,7 @@
<style name="typography_headline_medium">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">28sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>

Expand All @@ -116,7 +116,7 @@
<style name="typography_headline_large">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">32sp</item>
<item name="android:letterSpacing">0.98</item>
<item name="android:letterSpacing">-0.02</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>

Expand All @@ -136,7 +136,7 @@
<style name="typography_title_small">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">14sp</item>
<item name="android:letterSpacing">0.98</item>
<item name="android:letterSpacing">-0.02</item>
<item name="android:lineSpacingExtra">6sp</item>
</style>

Expand All @@ -156,7 +156,7 @@
<style name="typography_title_medium">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">16sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>

Expand All @@ -176,7 +176,7 @@
<style name="typography_title_large">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">22sp</item>
<item name="android:letterSpacing">0.98</item>
<item name="android:letterSpacing">-0.02</item>
<item name="android:lineSpacingExtra">6sp</item>
</style>

Expand All @@ -196,7 +196,7 @@
<style name="typography_label_small">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">11sp</item>
<item name="android:letterSpacing">1</item>
<item name="android:letterSpacing">0</item>
<item name="android:lineSpacingExtra">5sp</item>
</style>

Expand All @@ -216,7 +216,7 @@
<style name="typography_label_medium">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">12sp</item>
<item name="android:letterSpacing">0.99</item>
<item name="android:letterSpacing">-0.01</item>
<item name="android:lineSpacingExtra">4sp</item>
</style>

Expand All @@ -236,7 +236,7 @@
<style name="typography_label_large">
<item name="android:fontFamily">Poppins</item>
<item name="android:textSize">14sp</item>
<item name="android:letterSpacing">0.97</item>
<item name="android:letterSpacing">-0.03</item>
<item name="android:lineSpacingExtra">6sp</item>
</style>

Expand All @@ -256,7 +256,7 @@
<style name="typography_body_small">
<item name="android:fontFamily">Roboto</item>
<item name="android:textSize">12sp</item>
<item name="android:letterSpacing">0.4</item>
<item name="android:letterSpacing">0.03333333333333333</item>
<item name="android:lineSpacingExtra">4sp</item>
</style>

Expand All @@ -276,7 +276,7 @@
<style name="typography_body_medium">
<item name="android:fontFamily">Roboto</item>
<item name="android:textSize">14sp</item>
<item name="android:letterSpacing">0.25</item>
<item name="android:letterSpacing">0.017857142857142856</item>
<item name="android:lineSpacingExtra">6sp</item>
</style>

Expand All @@ -296,7 +296,7 @@
<style name="typography_body_large">
<item name="android:fontFamily">Roboto</item>
<item name="android:textSize">16sp</item>
<item name="android:letterSpacing">0.5</item>
<item name="android:letterSpacing">0.03125</item>
<item name="android:lineSpacingExtra">8sp</item>
</style>
</resources>
12 changes: 6 additions & 6 deletions formats/androidTypography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,20 @@ function getTextStyleForToken(token) {
<style name="${token.name}">
<item name="android:fontFamily">${token.value.fontFamily}</item>
<item name="android:textSize">${token.value.fontSize}sp</item>
<item name="android:letterSpacing">${calculateLetterSpacing(token.value.letterSpacing)}</item>
<item name="android:letterSpacing">${calculateLetterSpacing(token.value.fontSize, token.value.letterSpacing)}</item>
${getLineHeightTag(token)}
</style>`;
}

function calculateLetterSpacing(letterSpacing) {
function calculateLetterSpacing(fontSize, letterSpacing) {
if (indexOf(letterSpacing, "%") != -1) {
// We treat percentages as em units. Eg: -2% -> 0.98
// We treat percentages as em units. Eg: -2% -> -0.02
const letterSpacingNumber = parseInt(letterSpacing.replace("%", ""));

return (100 + letterSpacingNumber) / 100.0;
return letterSpacingNumber / 100.0;
}
// No percentage will be treated as sp units
return `${letterSpacing}`;
// No percentage means we need to calculate it ourselves
return `${letterSpacing / fontSize}`;
}

function getLineHeightTag(token) {
Expand Down

0 comments on commit 64b787e

Please sign in to comment.