Align typography and ripple with Figma design tokens (#6347)

* Update typography

* Update and simplify ripple configuration

Author: andremion

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -21,7 +21,6 @@ package io.getstream.chat.android.compose.ui.theme
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -142,7 +141,6 @@ private val LocalStreamMediaRecorder = compositionLocalOf<StreamMediaRecorder> {
  * @param config Central behavioral configuration for the Chat SDK. See [ChatUiConfig].
  * @param colors The set of colors we provide, wrapped in [StreamDesign.Colors].
  * @param typography The set of typography styles we provide, wrapped in [StreamDesign.Typography].
- * @param rippleConfiguration Defines the appearance for ripples.
  * @param componentFactory Provide to customize the stateless components that are used throughout the UI.
  * @param attachmentPreviewHandlers Attachment preview handlers we provide.
  * @param reactionResolver Provides available reactions and resolves reaction types to emoji codes.
@@ -173,13 +171,12 @@ private val LocalStreamMediaRecorder = compositionLocalOf<StreamMediaRecorder> {
 public fun ChatTheme(
     isInDarkMode: Boolean = isSystemInDarkTheme(),
     config: ChatUiConfig = ChatUiConfig(),
-    colors: StreamDesign.Colors =
-        if (isInDarkMode) StreamDesign.Colors.defaultDark() else StreamDesign.Colors.default(),
+    colors: StreamDesign.Colors = if (isInDarkMode) {
+        StreamDesign.Colors.defaultDark()
+    } else {
+        StreamDesign.Colors.default()
+    },
     typography: StreamDesign.Typography = StreamDesign.Typography.default(),
-    rippleConfiguration: StreamRippleConfiguration = StreamRippleConfiguration.defaultRippleConfiguration(
-        contentColor = LocalContentColor.current,
-        lightTheme = !isInDarkMode,
-    ),
     componentFactory: ChatComponentFactory = DefaultChatComponentFactory(),
     attachmentPreviewHandlers: List<AttachmentPreviewHandler> =
         AttachmentPreviewHandler.defaultAttachmentHandlers(LocalContext.current),
@@ -228,12 +225,11 @@ public fun ChatTheme(
         }
     }
 
-    @Suppress("DEPRECATION")
     CompositionLocalProvider(
         LocalChatUiConfig provides config,
         LocalColors provides colors,
         LocalTypography provides typography,
-        LocalRippleConfiguration provides rippleConfiguration.toRippleConfiguration(),
+        LocalRippleConfiguration provides streamRippleConfiguration(colors, lightTheme = !isInDarkMode),
         LocalShimmerTheme provides StreamShimmerTheme,
         LocalComponentFactory provides componentFactory,
         LocalAttachmentPreviewHandlers provides attachmentPreviewHandlers,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt

@@ -865,6 +865,7 @@ public object StreamDesign {
      * @param headingLarge Style for large, prominent headings.
      * @param metadataDefault Style for metadata and secondary information.
      * @param metadataEmphasis Style for emphasized metadata in secondary content areas.
+     * @param numericSmall Style for micro numeric indicators.
      * @param numericMedium Style for medium-sized numeric indicators, like the unread count.
      * @param numericLarge Style for large numeric indicators.
      * @param numericExtraLarge Style for extra-large numeric indicators.
@@ -881,6 +882,7 @@ public object StreamDesign {
         public val headingLarge: TextStyle,
         public val metadataDefault: TextStyle,
         public val metadataEmphasis: TextStyle,
+        public val numericSmall: TextStyle,
         public val numericMedium: TextStyle,
         public val numericLarge: TextStyle,
         public val numericExtraLarge: TextStyle,
@@ -911,17 +913,17 @@ public object StreamDesign {
                     fontFamily = fontFamily,
                     fontWeight = StreamTokens.fontWeightRegular,
                     fontSize = StreamTokens.fontSizeSm,
-                    lineHeight = StreamTokens.lineHeightTight,
+                    lineHeight = StreamTokens.lineHeightNormal,
                 ),
                 captionEmphasis = TextStyle(
                     fontFamily = fontFamily,
                     fontWeight = StreamTokens.fontWeightSemiBold,
                     fontSize = StreamTokens.fontSizeSm,
-                    lineHeight = StreamTokens.lineHeightTight,
+                    lineHeight = StreamTokens.lineHeightNormal,
                 ),
                 headingExtraSmall = TextStyle(
                     fontFamily = fontFamily,
-                    fontWeight = StreamTokens.fontWeightMedium,
+                    fontWeight = StreamTokens.fontWeightSemiBold,
                     fontSize = StreamTokens.fontSizeSm,
                     lineHeight = StreamTokens.lineHeightNormal,
                 ),
@@ -955,22 +957,29 @@ public object StreamDesign {
                     fontSize = StreamTokens.fontSizeXs,
                     lineHeight = StreamTokens.lineHeightTight,
                 ),
+                numericSmall = TextStyle(
+                    fontFamily = fontFamily,
+                    fontWeight = StreamTokens.fontWeightBold,
+                    fontSize = StreamTokens.fontSizeMicro,
+                    lineHeight = StreamTokens.fontSizeMicro,
+                ),
                 numericMedium = TextStyle(
                     fontFamily = fontFamily,
                     fontWeight = StreamTokens.fontWeightBold,
                     fontSize = StreamTokens.fontSize2xs,
-                    lineHeight = StreamTokens.lineHeightTighter,
+                    lineHeight = StreamTokens.fontSize2xs,
                 ),
                 numericLarge = TextStyle(
                     fontFamily = fontFamily,
                     fontWeight = StreamTokens.fontWeightBold,
                     fontSize = StreamTokens.fontSizeXs,
+                    lineHeight = StreamTokens.fontSizeXs,
                 ),
                 numericExtraLarge = TextStyle(
                     fontFamily = fontFamily,
                     fontWeight = StreamTokens.fontWeightBold,
                     fontSize = StreamTokens.fontSizeSm,
-                    lineHeight = StreamTokens.lineHeightTighter,
+                    lineHeight = StreamTokens.fontSizeSm,
                 ),
             )
         }

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamDesign.kt

@@ -19,92 +19,26 @@ package io.getstream.chat.android.compose.ui.theme
 import androidx.compose.material.ripple.RippleAlpha
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.RippleConfiguration
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.luminance
 
-/**
- * Configuration for customizing the ripple effect on the composable components.
- *
- * @param color The color of the ripple effect.
- * @param rippleAlpha The alpha of the ripple effect.
- */
-public class StreamRippleConfiguration(
-    public val color: Color,
-    public val rippleAlpha: RippleAlpha,
-) {
-
-    public companion object {
-
-        private const val LUMINANCE_THRESHOLD = 0.5
-
-        // Note: Values taken from material:RippleDefaults to keep it backwards compatible
-        private val LightThemeHighContrastRippleAlpha = RippleAlpha(
-            pressedAlpha = 0.24f,
-            focusedAlpha = 0.24f,
-            draggedAlpha = 0.16f,
-            hoveredAlpha = 0.08f,
-        )
-
-        // Note: Values taken from material:RippleDefaults to keep it backwards compatible
-        private val LightThemeLowContrastRippleAlpha = RippleAlpha(
-            pressedAlpha = 0.12f,
-            focusedAlpha = 0.12f,
-            draggedAlpha = 0.08f,
-            hoveredAlpha = 0.04f,
-        )
-
-        // Note: Values taken from material:RippleDefaults to keep it backwards compatible
-        private val DarkThemeRippleAlpha = RippleAlpha(
-            pressedAlpha = 0.10f,
-            focusedAlpha = 0.12f,
-            draggedAlpha = 0.08f,
-            hoveredAlpha = 0.04f,
-        )
-
-        /**
-         * Creates the default [StreamRippleConfiguration].
-         *
-         * @param contentColor The current content color.
-         * @param lightTheme Indicator if the system is in light theme.
-         */
-        @Composable
-        public fun defaultRippleConfiguration(contentColor: Color, lightTheme: Boolean): StreamRippleConfiguration =
-            StreamRippleConfiguration(
-                color = rippleColor(contentColor, lightTheme),
-                rippleAlpha = rippleAlpha(contentColor, lightTheme),
-            )
-
-        private fun rippleColor(contentColor: Color, lightTheme: Boolean): Color {
-            val contentLuminance = contentColor.luminance()
-            return if (!lightTheme && contentLuminance < LUMINANCE_THRESHOLD) {
-                Color.White
-            } else {
-                contentColor
-            }
-        }
-
-        private fun rippleAlpha(contentColor: Color, lightTheme: Boolean): RippleAlpha {
-            return when {
-                lightTheme -> {
-                    if (contentColor.luminance() > LUMINANCE_THRESHOLD) {
-                        LightThemeHighContrastRippleAlpha
-                    } else {
-                        LightThemeLowContrastRippleAlpha
-                    }
-                }
-                else -> {
-                    DarkThemeRippleAlpha
-                }
-            }
-        }
-    }
-}
-
-/**
- * Maps a [StreamRippleConfiguration] to the android [RippleConfiguration].
- * Used to hide the internal implementation of the ripple configuration, and not expose it outside of [ChatTheme].
- */
 @OptIn(ExperimentalMaterial3Api::class)
-internal fun StreamRippleConfiguration.toRippleConfiguration(): RippleConfiguration =
-    RippleConfiguration(color = color, rippleAlpha = rippleAlpha)
+internal fun streamRippleConfiguration(
+    colors: StreamDesign.Colors,
+    lightTheme: Boolean,
+): RippleConfiguration = RippleConfiguration(
+    color = if (lightTheme) colors.chrome.s900 else colors.chrome.s1000,
+    rippleAlpha = if (lightTheme) LightRippleAlpha else DarkRippleAlpha,
+)
+
+private val LightRippleAlpha = RippleAlpha(
+    pressedAlpha = 0.15f,
+    focusedAlpha = 0.15f,
+    draggedAlpha = 0.10f,
+    hoveredAlpha = 0.10f,
+)
+
+private val DarkRippleAlpha = RippleAlpha(
+    pressedAlpha = 0.20f,
+    focusedAlpha = 0.20f,
+    draggedAlpha = 0.15f,
+    hoveredAlpha = 0.15f,
+)

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamRippleConfiguration.kt

@@ -51,14 +51,13 @@ internal object StreamTokens {
     val fontWeightSemiBold = FontWeight.SemiBold
     val fontWeightMedium = FontWeight.Medium
     val fontWeightRegular = FontWeight.Normal
+    val fontSizeMicro = 8.sp
     val fontSize2xs = 10.sp
     val fontSizeXs = 12.sp
     val fontSizeSm = 14.sp
     val fontSizeMd = 16.sp
     val fontSizeLg = 18.sp
     val fontSizeXl = 20.sp
-    val lineHeightTightest = 10.sp
-    val lineHeightTighter = 14.sp
     val lineHeightTight = 16.sp
     val lineHeightNormal = 20.sp
     val lineHeightRelaxed = 24.sp