Fix the light mode content colors and the text style sizes

The button label style no longer bakes a color, so it follows the button
content color, and the secondary and alert styles use the on-accent text
tokens with textDisabled as the disabled content color. Titles map the four
style sizes to the four heading sizes and body reads its size again.
CallContent and AudioRoomContent no longer set the Scaffold content color to
the app background. The demo bad-network pill and the ringing tutorial
surfaces use surface, border and on-accent tokens. Affected goldens are
re-recorded.

Author: andremion

demo-app/src/main/kotlin/io/getstream/video/android/ui/call/CallScreen.kt

@@ -883,14 +883,14 @@ private fun BadNetworkLabel(
                     .align(CenterVertically),
                 imageVector = Icons.Default.SignalWifiBad,
                 contentDescription = null,
-                tint = VideoTheme.colors.textPrimary,
+                tint = VideoTheme.colors.textOnAccent,
             )
             Text(
                 modifier = Modifier.padding(12.dp),
                 text = stringResource(
                     id = io.getstream.video.android.ui.common.R.string.stream_video_call_bad_network,
                 ),
-                color = VideoTheme.colors.textPrimary,
+                color = VideoTheme.colors.textOnAccent,
                 textAlign = TextAlign.Center,
                 fontSize = 14.sp,
             )

stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/audio/AudioRoomContent.kt

@@ -155,7 +155,7 @@ public fun AudioRoomContent(
             modifier = modifier
                 .background(VideoTheme.colors.backgroundCoreApp)
                 .padding(32.dp),
-            contentColor = VideoTheme.colors.backgroundCoreApp,
+            contentColor = VideoTheme.colors.textPrimary,
             topBar = {
                 if (isShowingAppBar) {
                     appBarContent.invoke(call)

stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/base/StreamButton.kt

@@ -34,6 +34,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.material.Button
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
+import androidx.compose.material.LocalContentColor
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
@@ -111,7 +112,7 @@ public fun StreamButton(
     )
     if (showProgress) {
         CircularProgressIndicator(
-            color = textStyle.value.platform.color,
+            color = LocalContentColor.current,
             modifier = Modifier.height(StreamTokens.size8),
         )
     }

stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/base/styling/StreamButtonStyle.kt

@@ -181,6 +181,7 @@ public open class ButtonStyleProvider {
                 backgroundColor = VideoTheme.colors.buttonSecondaryBg,
                 contentColor = VideoTheme.colors.textPrimary,
                 disabledBackgroundColor = VideoTheme.colors.backgroundUtilityDisabled,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
             contentPadding = PaddingValues(
                 start = StreamTokens.spacingMd,
@@ -195,8 +196,9 @@ public open class ButtonStyleProvider {
         genericButtonStyle(size = size).copy(
             colors = ButtonDefaults.buttonColors(
                 backgroundColor = VideoTheme.colors.buttonPrimaryBg,
-                contentColor = VideoTheme.colors.textPrimary,
+                contentColor = VideoTheme.colors.buttonPrimaryTextOnAccent,
                 disabledBackgroundColor = VideoTheme.colors.backgroundUtilityDisabled,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
         )
 
@@ -207,6 +209,7 @@ public open class ButtonStyleProvider {
                 backgroundColor = VideoTheme.colors.backgroundCoreApp,
                 contentColor = VideoTheme.colors.textPrimary,
                 disabledBackgroundColor = VideoTheme.colors.backgroundCoreApp,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
             border = BorderStroke(1.dp, VideoTheme.colors.borderCoreDefault),
         )
@@ -218,6 +221,7 @@ public open class ButtonStyleProvider {
                 backgroundColor = VideoTheme.colors.buttonSecondaryBg,
                 contentColor = VideoTheme.colors.textPrimary,
                 disabledBackgroundColor = VideoTheme.colors.backgroundUtilityDisabled,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
             iconStyle = IconStyles.customColorIconStyle(
                 color = VideoTheme.colors.accentPrimary,
@@ -231,6 +235,7 @@ public open class ButtonStyleProvider {
                 backgroundColor = VideoTheme.colors.backgroundCoreApp,
                 contentColor = VideoTheme.colors.textPrimary,
                 disabledBackgroundColor = VideoTheme.colors.backgroundCoreApp,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
         )
 
@@ -239,8 +244,9 @@ public open class ButtonStyleProvider {
         genericButtonStyle(size = size).copy(
             colors = ButtonDefaults.buttonColors(
                 backgroundColor = VideoTheme.colors.buttonDestructiveBg,
-                contentColor = VideoTheme.colors.textPrimary,
+                contentColor = VideoTheme.colors.buttonDestructiveTextOnAccent,
                 disabledBackgroundColor = VideoTheme.colors.backgroundUtilityDisabled,
+                disabledContentColor = VideoTheme.colors.textDisabled,
             ),
         )
 
@@ -383,6 +389,7 @@ public open class ButtonStyleProvider {
                     backgroundColor = VideoTheme.colors.buttonSecondaryBg,
                     contentColor = VideoTheme.colors.textPrimary,
                     disabledBackgroundColor = VideoTheme.colors.backgroundUtilityDisabled,
+                    disabledContentColor = VideoTheme.colors.textDisabled,
                 ),
                 drawableStyle = ButtonDrawableStyles.defaultButtonDrawableStyle(),
             ),
@@ -408,6 +415,7 @@ public open class ButtonStyleProvider {
                     backgroundColor = VideoTheme.colors.backgroundCoreApp,
                     contentColor = VideoTheme.colors.textPrimary,
                     disabledBackgroundColor = VideoTheme.colors.backgroundCoreApp,
+                    disabledContentColor = VideoTheme.colors.textDisabled,
                 ),
                 drawableStyle = ButtonDrawableStyles.customColorFilterButtonDrawableStyle(
                     colorFilter = ColorFilter.lighting(Color.Gray, Color.Transparent),

stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/base/styling/TextStyles.kt

@@ -18,6 +18,7 @@ package io.getstream.video.android.compose.ui.components.base.styling
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.text.TextStyle
 import io.getstream.video.android.compose.theme.VideoTheme
 
@@ -59,13 +60,9 @@ public open class TextStyleProvider {
     public fun defaultButtonLabel(
         size: StyleSize = StyleSize.L,
         default: TextStyleWrapper = when (size) {
-            StyleSize.XS, StyleSize.S -> VideoTheme.typography.metadataEmphasis.withColor(
-                VideoTheme.colors.textPrimary,
-            )
-            StyleSize.M -> VideoTheme.typography.captionEmphasis.withColor(
-                VideoTheme.colors.textPrimary,
-            )
-            else -> VideoTheme.typography.bodyEmphasis.withColor(VideoTheme.colors.textPrimary)
+            StyleSize.XS, StyleSize.S -> VideoTheme.typography.metadataEmphasis.wrapper()
+            StyleSize.M -> VideoTheme.typography.captionEmphasis.wrapper()
+            else -> VideoTheme.typography.bodyEmphasis.wrapper()
         },
         pressed: TextStyleWrapper = default,
         disabled: TextStyleWrapper = default.disabledAlpha(),
@@ -75,11 +72,11 @@ public open class TextStyleProvider {
     public fun defaultTitle(
         size: StyleSize = StyleSize.L,
         default: TextStyleWrapper = when (size) {
-            StyleSize.XS -> VideoTheme.typography.headingExtraSmall.withColor(
-                VideoTheme.colors.textPrimary,
-            )
-            else -> VideoTheme.typography.headingLarge.withColor(VideoTheme.colors.textPrimary)
-        },
+            StyleSize.XS -> VideoTheme.typography.headingExtraSmall
+            StyleSize.S -> VideoTheme.typography.headingSmall
+            StyleSize.M -> VideoTheme.typography.headingMedium
+            else -> VideoTheme.typography.headingLarge
+        }.withColor(VideoTheme.colors.textPrimary),
         pressed: TextStyleWrapper = default,
         disabled: TextStyleWrapper = default.disabledAlpha(),
     ): StreamTextStyle = StreamTextStyle(default, disabled, pressed)
@@ -103,9 +100,10 @@ public open class TextStyleProvider {
     @Composable
     public fun defaultBody(
         size: StyleSize = StyleSize.L,
-        default: TextStyleWrapper = VideoTheme.typography.bodyDefault.withColor(
-            VideoTheme.colors.textSecondary,
-        ),
+        default: TextStyleWrapper = when (size) {
+            StyleSize.XS, StyleSize.S -> VideoTheme.typography.captionDefault
+            else -> VideoTheme.typography.bodyDefault
+        }.withColor(VideoTheme.colors.textSecondary),
         pressed: TextStyleWrapper = default,
         disabled: TextStyleWrapper = default.disabledAlpha(),
     ): StreamTextStyle = StreamTextStyle(default, disabled, pressed)
@@ -147,10 +145,11 @@ internal fun TextStyle.withColor(color: Color) = TextStyleWrapper(
     ),
 )
 
-internal fun TextStyleWrapper.withAlpha(alpha: Float): TextStyleWrapper = this.platform.copy(
-    color = this.platform.color.copy(
-        alpha = alpha,
-    ),
-).wrapper()
+internal fun TextStyleWrapper.withAlpha(alpha: Float): TextStyleWrapper =
+    if (this.platform.color.isSpecified) {
+        this.platform.copy(color = this.platform.color.copy(alpha = alpha)).wrapper()
+    } else {
+        this
+    }
 
 internal fun TextStyleWrapper.disabledAlpha() = this.withAlpha(0.16f)

stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/call/activecall/CallContent.kt

@@ -192,7 +192,7 @@ public fun CallContent(
     } else {
         Scaffold(
             backgroundColor = VideoTheme.colors.backgroundCoreApp,
-            contentColor = VideoTheme.colors.backgroundCoreApp,
+            contentColor = VideoTheme.colors.textPrimary,
             topBar = {
                 if (orientation == ORIENTATION_PORTRAIT) {
                     appBarContent.invoke(call)