IssueTracker

There is a report about it in kotlinlang Slack: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739

Thanks for the report!

The release notes documentation has been edited to clarify this change in behavior for line height.

To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so: style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified), or create a custom Typography entirely.

In my case, I have multiple font sizes in the same Text (using SpanStyle in AnnotatedString). There are legitimate reasons for this. For example, when combining Chinese and English (phonetic) together (for language-learning purposes).

@sg...@google.com, thank you so much for the help on this. Here's a minimally reproducible example:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CustomTheme {
                Column(modifier = Modifier.padding(8.dp)) {
                    DatePickerTest()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerTest() {
    DatePicker(
        state = DatePickerState(
            selectableDates = object : SelectableDates {
                override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                    // Dates before today are not selectable, and should appear disabled
                    return utcTimeMillis >= System.currentTimeMillis()
                }
            },
            locale = java.util.Locale.getDefault(),
            initialDisplayMode = DisplayMode.Picker,
        ),
        colors = DatePickerDefaults.colors(
            containerColor = Color.Red,
            selectedDayContentColor = Color.Blue,
            disabledDayContentColor = Color.Gray,
        )
    )
}

@Composable
fun CustomTheme(
    content: @Composable () -> Unit,
) {
    MaterialTheme(
        // DatePicker colors only work if the typography line below is commented out
        typography = customTypography(),
        content = { content() },
    )
}

@Composable
fun customTypography() = Typography(
    displayLarge = TextStyles.h1(),
    displayMedium = TextStyles.h2(),
    displaySmall = TextStyles.h3(),
    headlineLarge = TextStyles.h1(),
    headlineMedium = TextStyles.h2(),
    headlineSmall = TextStyles.h3(),
    titleLarge = TextStyles.body1Bold(),
    titleMedium = TextStyles.body2Bold(),
    titleSmall = TextStyles.body3Bold(),
    bodyLarge = TextStyles.body1(),
    bodyMedium = TextStyles.body2(),
    bodySmall = TextStyles.body3(),
    labelLarge = TextStyles.body3Bold(),
    labelMedium = TextStyles.detail2(),
    labelSmall = TextStyles.detail2(),
)

@Composable
fun text() = ColorTokens.Text.color()

@Composable
fun textHushed() = ColorTokens.TextHushed.color()

data class ColorToken(val light: Color, val dark: Color) {
    @Composable
    fun color() = if (isSystemInDarkTheme()) dark else light
}

object ColorTokens {
    val Text =
        ColorToken(light = Color(0XFF2E2E27), dark = Color(0XFFDBDAC9))
    val TextHushed =
        ColorToken(light = Color(0XFF707062), dark = Color(0XFFA4A493))
}

object TextStyles {
    @Composable
    fun h1(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(28f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun h2(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun h3(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body1(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body1Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body2(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(20f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body2Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(20f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body3(color: Color = textHushed()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body3Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun detail2(color: Color = textHushed()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(14f, TextUnitType.Sp),
        color = color,
    )
}

If you have the typography = customTypography() line commented out, the date picker colors work as expected. If you have the typography = customTypography() line uncommented, the date picker colors do not work properly and all days have the same color regardless of whether they are selectable or not.

As you suspected, we are indeed setting colors within our TextStyle definitions. We did this because we wanted certain TextStyles to be a certain color by default (e.g. h1 is black but detail2 is dark gray). This has worked well for us up until this DatePicker problem. Open to other ways of setting up our theming though, thanks again for taking a look at this!

Unlike many of our components that just take a slot for a Composable lambda, the date-pickers have a more complex UI that includes Text composables that are internal to the component. This is probably the reason you mainly hit this issue with the pickers.

To ensure we give precedence for the colors that are defined at the DatePickerColors over the colors that are set in the TextStyles, we will need to adjust the internal Texts and pass the relevant color via their color parameter.

Once this is fixed, it should be available at the following 1.4.x alpha release.

Project: platform/frameworks/support
Branch: androidx-main
Author: Shalom Gibly <sgibly@google.com>
Link:      https://android-review.googlesource.com/3291088

DatePicker colors with typography-defined colors

DatePicker colors with typography-defined colors

Fix the way we apply colors at the DatePicker and the
DateRangePicker when a `Typography` is configured to have TextStyles
with colors.

The change ensures that whatever is set at the DatePickerColors takes
presedence over any color that was set at the Typography's TextStyles.

Fixes: 347031394
Test: Added tests
Relnote: "DatePickerColors now correctly take precedence over any
conflicting colors defined at the theme's Typography text styles.
Also note that this update adjusts the `color` parameter's position in
the date picker functions and introduces a `contentColor` parameter
for customizing the header and title text colors."

Change-Id: I30d0307b11ba2e1a02535928ab4e4131100692a8

Thank you so much for fixing!! Looking forward to using the fix

The following release(s) address this bug.It is possible this bug has only been partially addressed:

• androidx.compose.material3:material3:1.4.0-alpha02
• androidx.compose.material3:material3-android:1.4.0-alpha02
• androidx.compose.material3:material3-jvmstubs:1.4.0-alpha02
• androidx.compose.material3:material3-linuxx64stubs:1.4.0-alpha02