make texts use Typography class

Danil0v3s · Dec 15, 2024 · 92b60d0 · 92b60d0
1 parent 0c582a9
commit 92b60d0
Show file tree

Hide file tree

Showing 37 changed files with 295 additions and 236 deletions.
diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt
@@ -7,6 +7,8 @@ object Theme {
 
     val Light: ColorScheme = defaultColorScheme
     val Dark: ColorScheme = darkColorScheme
+    val Typography = Typography()
 }
 
-public val LocalColorScheme = staticCompositionLocalOf<ColorScheme> { Light }
+val LocalColorScheme = staticCompositionLocalOf { Light }
+val LocalTypography = staticCompositionLocalOf { Theme.Typography }
diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt
@@ -0,0 +1,150 @@
+package app.cleanmeter.core.designsystem
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.platform.Font
+import androidx.compose.ui.unit.sp
+
+class Typography {
+
+    /**
+     * fontSize = 16.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Medium,
+     */
+    val titleM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 16.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Medium,
+        )
+
+    /**
+     * fontSize = 16.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Medium,
+     */
+    val titleMMedium: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 16.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Medium,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Normal,
+     */
+    val labelL: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Normal,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Thin,
+     */
+    val labelLThin: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Thin,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Medium,
+     */
+    val labelLMedium: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Medium,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.SemiBold,
+     */
+    val labelLSemiBold: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.SemiBold,
+        )
+
+    /**
+     * fontSize = 13.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Normal,
+     */
+    val labelM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 13.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Normal,
+        )
+
+    /**
+     * fontSize = 13.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.SemiBold,
+     */
+    val labelMSemiBold: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 13.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.SemiBold,
+        )
+
+    /**
+     * fontSize = 12.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Normal,
+     */
+    val labelS: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 12.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Normal,
+        )
+
+    /**
+     * fontSize = 10.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = FontWeight.Normal,
+     */
+    val bodyM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 10.sp,
+            lineHeight = 0.sp,
+            fontWeight = FontWeight.Normal,
+        )
+
+    private val fontFamily = FontFamily(
+        Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin),
+        Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight),
+        Font(resource = "font/inter_light.ttf", weight = FontWeight.Light),
+        Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal),
+        Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium),
+        Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold),
+        Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold),
+        Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold),
+        Font(resource = "font/inter_black.ttf", weight = FontWeight.Black),
+    )
+
+    private val defaultTextStyle: TextStyle
+        @Composable get() = TextStyle(
+            fontFamily = fontFamily,
+            fontWeight = FontWeight.Normal,
+            color = LocalColorScheme.current.text.paragraph1
+        )
+}
diff --git a/...p/src/main/resources/font/inter_black.ttf → ...m/src/main/resources/font/inter_black.ttf b/...p/src/main/resources/font/inter_black.ttf → ...m/src/main/resources/font/inter_black.ttf
diff --git a/...op/src/main/resources/font/inter_bold.ttf → ...em/src/main/resources/font/inter_bold.ttf b/...op/src/main/resources/font/inter_bold.ttf → ...em/src/main/resources/font/inter_bold.ttf
diff --git a/...c/main/resources/font/inter_extrabold.ttf → ...c/main/resources/font/inter_extrabold.ttf b/...c/main/resources/font/inter_extrabold.ttf → ...c/main/resources/font/inter_extrabold.ttf
diff --git a/.../main/resources/font/inter_extralight.ttf → .../main/resources/font/inter_extralight.ttf b/.../main/resources/font/inter_extralight.ttf → .../main/resources/font/inter_extralight.ttf
diff --git a/...p/src/main/resources/font/inter_light.ttf → ...m/src/main/resources/font/inter_light.ttf b/...p/src/main/resources/font/inter_light.ttf → ...m/src/main/resources/font/inter_light.ttf
diff --git a/.../src/main/resources/font/inter_medium.ttf → .../src/main/resources/font/inter_medium.ttf b/.../src/main/resources/font/inter_medium.ttf → .../src/main/resources/font/inter_medium.ttf
diff --git a/...src/main/resources/font/inter_regular.ttf → ...src/main/resources/font/inter_regular.ttf b/...src/main/resources/font/inter_regular.ttf → ...src/main/resources/font/inter_regular.ttf
diff --git a/...rc/main/resources/font/inter_semibold.ttf → ...rc/main/resources/font/inter_semibold.ttf b/...rc/main/resources/font/inter_semibold.ttf → ...rc/main/resources/font/inter_semibold.ttf
diff --git a/...op/src/main/resources/font/inter_thin.ttf → ...em/src/main/resources/font/inter_thin.ttf b/...op/src/main/resources/font/inter_thin.ttf → ...em/src/main/resources/font/inter_thin.ttf
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt
@@ -1,38 +1,23 @@
 package app.cleanmeter.target.desktop.ui
 
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Typography
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.platform.LocalLayoutDirection
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.platform.Font
 import androidx.compose.ui.unit.LayoutDirection
 import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.core.designsystem.Theme
 
-val fontFamily = FontFamily(
-    Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin),
-    Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight),
-    Font(resource = "font/inter_light.ttf", weight = FontWeight.Light),
-    Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal),
-    Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium),
-    Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold),
-    Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold),
-    Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold),
-    Font(resource = "font/inter_black.ttf", weight = FontWeight.Black),
-)
-
 @Composable
 fun AppTheme(isDarkTheme: Boolean, content: @Composable () -> Unit) {
-    MaterialTheme(
-        typography = Typography(defaultFontFamily = fontFamily),
-    ) {
-        CompositionLocalProvider(LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light) {
-            CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
-                content()
-            }
+    MaterialTheme {
+        CompositionLocalProvider(
+            LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light,
+            LocalTypography provides Theme.Typography,
+            LocalLayoutDirection provides LayoutDirection.Ltr
+        ) {
+            content()
         }
     }
 }
diff --git a/.../desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt b/.../desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt
@@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
 
 @Composable
@@ -36,11 +37,10 @@ fun CheckboxWithLabel(
 
         Text(
             text = label,
-            fontSize = 14.sp,
+            style = LocalTypography.current.labelL.copy(
+                letterSpacing = 0.14.sp,
+            ),
             color = DarkGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight(550),
-            letterSpacing = 0.14.sp
         )
 
         trailingItem?.invoke()

diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt
@@ -26,7 +26,9 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
+import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
 import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -91,7 +93,11 @@ fun DropdownMenu(
                         onValueChanged(index)
                     }, modifier = Modifier.fillMaxWidth()
                 ) {
-                    Text(text = item)
+                    Text(
+                        text = item,
+                        style = LocalTypography.current.labelLMedium,
+                        color = DarkGray,
+                    )
                 }
             }
         }

diff --git a/.../src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt b/.../src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt
@@ -18,6 +18,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.ColorTokens.BorderGray
 
 @Composable
@@ -39,8 +40,7 @@ internal fun KeyboardShortcutInfoLabel() {
             Text(
                 text = "Hot key for showing/hiding the overlay",
                 color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight(600),
+                style = LocalTypography.current.labelLSemiBold,
                 modifier = Modifier.padding(bottom = 2.5.dp),
             )
         }

diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt
@@ -18,6 +18,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.ColorTokens.OffWhite
 import app.cleanmeter.target.desktop.ui.overlay.conditional
 
@@ -48,11 +49,10 @@ fun Pill(
     ) {
         Text(
             text = title,
-            fontSize = 10.sp,
+            style = LocalTypography.current.bodyM.copy(
+                letterSpacing = 1.sp,
+            ),
             color = OffWhite,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.Normal,
-            letterSpacing = 1.sp
         )
 
         content()

diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt
@@ -8,15 +8,14 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @Composable
 fun ProgressUnit(unit: String) {
     Text(
         text = unit,
-        fontSize = 10.sp,
+        style = LocalTypography.current.bodyM,
         color = Color.White,
-        lineHeight = 0.sp,
-        fontWeight = FontWeight.Normal,
         modifier = Modifier.padding(bottom = 1.dp)
     )
 }
@@ -25,9 +24,7 @@ fun ProgressUnit(unit: String) {
 fun ProgressLabel(label: String) {
     Text(
         text = label,
-        fontSize = 16.sp,
+        style = LocalTypography.current.titleM,
         color = Color.White,
-        lineHeight = 0.sp,
-        fontWeight = FontWeight.Normal,
     )
 }
diff --git a/.../src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt b/.../src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt
@@ -53,6 +53,7 @@ import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupPositionProvider
 import androidx.compose.ui.window.PopupProperties
 import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
 import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
 import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
@@ -202,11 +203,8 @@ fun SensorReadingDropdownMenu(
                                         ) {
                                             Text(
                                                 text = dropdownLabel(item),
+                                                style = LocalTypography.current.labelLMedium,
                                                 color = DarkGray,
-                                                fontSize = 14.sp,
-                                                fontWeight = FontWeight(550),
-                                                lineHeight = 0.sp,
-                                                modifier = Modifier
                                             )
 
                                             if (index == selectedIndex) {
@@ -257,10 +255,8 @@ private fun Header(
         ) {
             Text(
                 text = "Select $label sensor",
-                fontSize = 13.sp,
+                style = LocalTypography.current.labelMSemiBold,
                 color = MutedGray,
-                lineHeight = 0.sp,
-                fontWeight = FontWeight.SemiBold,
                 textAlign = TextAlign.Center,
             )
 
@@ -298,8 +294,7 @@ private fun Header(
 
             BasicTextField(
                 value = filter,
-                textStyle = TextStyle(
-                    fontSize = 12.sp,
+                textStyle = LocalTypography.current.labelS.copy(
                     lineHeight = 2.sp,
                     textAlign = TextAlign.Start,
                 ),