Skip to content

Update TextFieldUI to determine cursor color based on component luminance #13211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tjclawson-stripe wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update TextFieldUI to determine cursor color based on component luminance #13211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93fbc10
Update TextFieldUI to determine cursor color based on component lumin…
tjclawson-stripe Jun 7, 2026
0374ebe
Merge branch 'master' into tyler/cursor-color-fix
tjclawson-stripe Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/model/PaymentSelection.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,12 @@ import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.R
import com.stripe.android.paymentsheet.paymentdatacollection.ach.BankFormScreenState
import com.stripe.android.paymentsheet.paymentdatacollection.ach.USBankAccountTextBuilder
import com.stripe.android.paymentsheet.ui.MIN_LUMINANCE_FOR_LIGHT_ICON
import com.stripe.android.paymentsheet.ui.createCardLabel
import com.stripe.android.paymentsheet.ui.getCardBrandIcon
import com.stripe.android.paymentsheet.ui.getLabel
import com.stripe.android.paymentsheet.ui.getLinkIconArrow
import com.stripe.android.paymentsheet.ui.getSavedPaymentMethodIcon
import com.stripe.android.uicore.MIN_LUMINANCE_FOR_LIGHT_COLORS
import com.stripe.android.uicore.StripeTheme
import com.stripe.android.uicore.image.StripeImageLoader
import kotlinx.parcelize.IgnoredOnParcel
Expand Down Expand Up @@ -299,7 +299,7 @@ internal sealed class PaymentSelection : Parcelable {
* Some users implement a custom dark mode and will pass dark colors into colors light.
*/
private fun isCustomDarkTheme(): Boolean {
return StripeTheme.colorsLightMutable.component.luminance() < MIN_LUMINANCE_FOR_LIGHT_ICON
return StripeTheme.colorsLightMutable.component.luminance() < MIN_LUMINANCE_FOR_LIGHT_COLORS
}

suspend fun load(
Expand Down
16 changes: 3 additions & 13 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/IconHelper.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
package com.stripe.android.paymentsheet.ui

import androidx.annotation.DrawableRes
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.luminance
import com.stripe.android.uicore.IconStyle
import com.stripe.android.uicore.LocalIconStyle
import com.stripe.android.uicore.stripeColors

internal const val MIN_LUMINANCE_FOR_LIGHT_ICON = 0.5
import com.stripe.android.uicore.isComponentColorDark

internal object IconHelper {
@Composable
Expand All @@ -23,18 +19,12 @@ internal object IconHelper {

@Composable
fun iconUrl(lightThemeIconUrl: String?, darkThemeIconUrl: String?): String? {
return if (isDark() && darkThemeIconUrl != null) darkThemeIconUrl else lightThemeIconUrl
}

@Composable
fun isDark(): Boolean {
val color = MaterialTheme.stripeColors.component
return color.luminance() < MIN_LUMINANCE_FOR_LIGHT_ICON
return if (isComponentColorDark() && darkThemeIconUrl != null) darkThemeIconUrl else lightThemeIconUrl
}

@Composable
@DrawableRes
private fun iconForTheme(iconRes: Int, iconResNight: Int?): Int {
return if (isDark() && iconResNight != null) iconResNight else iconRes
return if (isComponentColorDark() && iconResNight != null) iconResNight else iconRes
}
}
4 changes: 2 additions & 2 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentMethodIcon.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import com.stripe.android.paymentsheet.ui.IconHelper.isDark
import com.stripe.android.uicore.image.StripeImage
import com.stripe.android.uicore.image.StripeImageLoader
import com.stripe.android.uicore.isComponentColorDark

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
const val TEST_TAG_ICON_FROM_RES = "PaymentMethodIconFomRes"
Expand All @@ -29,7 +29,7 @@ internal fun PaymentMethodIcon(
modifier: Modifier,
contentAlignment: Alignment = Alignment.TopStart,
) {
val isDark = isDark()
val isDark = isComponentColorDark()
val colorFilter = remember(iconRequiresTinting) {
if (iconRequiresTinting) {
val tintColor = if (isDark) Color.White else Color.Black
Expand Down
15 changes: 15 additions & 0 deletions stripe-ui-core/src/main/java/com/stripe/android/uicore/StripeTheme.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.luminance
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalInspectionMode
Expand Down Expand Up @@ -790,6 +791,17 @@ fun StripeTheme.getOuterFormInsets(): PaddingValues = PaddingValues(
end = formInsets.end.dp
)

/**
* Check the luminance of [StripeColors.component] to determine if background is dark. Used because some users force
* always light/always dark by passing light/dark colors to both colorsDark and colorsLight.
*/
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
fun isComponentColorDark(): Boolean {
val color = MaterialTheme.stripeColors.component
return color.luminance() < MIN_LUMINANCE_FOR_LIGHT_COLORS
}

private fun TextStyle.toCompat(): TextStyle {
return copy(
lineHeight = TextStyle.Default.lineHeight,
Expand All @@ -816,3 +828,6 @@ private fun Color.modifyBrightness(transform: (Float) -> Float): Color {
val lightness = hsl[2]
return Color.hsl(hue, saturation, transform(lightness))
}

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
const val MIN_LUMINANCE_FOR_LIGHT_COLORS = 0.5
4 changes: 3 additions & 1 deletion stripe-ui-core/src/main/java/com/stripe/android/uicore/elements/TextFieldUI.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,9 @@ import com.stripe.android.uicore.BuildConfig
import com.stripe.android.uicore.LocalInstrumentationTest
import com.stripe.android.uicore.LocalTextFieldInsets
import com.stripe.android.uicore.R
import com.stripe.android.uicore.StripeTheme
import com.stripe.android.uicore.elements.compat.CompatTextField
import com.stripe.android.uicore.isComponentColorDark
import com.stripe.android.uicore.moveFocusSafely
import com.stripe.android.uicore.strings.resolve
import com.stripe.android.uicore.stripeColors
Expand Down Expand Up @@ -428,7 +430,7 @@ fun TextFieldColors(
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = disabledIndicatorColor,
unfocusedIndicatorColor = Color.Transparent,
cursorColor = MaterialTheme.stripeColors.textCursor,
cursorColor = StripeTheme.getColors(isComponentColorDark()).textCursor,
errorCursorColor = when (fieldDisplayState) {

@cttsai-stripe cttsai-stripe Jun 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need a fix for the errorCursorColor? or should that be out of scope and address by the new API?

FieldDisplayState.ERROR -> MaterialTheme.colors.error
FieldDisplayState.NORMAL, FieldDisplayState.WARNING -> MaterialTheme.stripeColors.textCursor
Expand Down
Loading