diff --git a/paymentsheet/res/font/roboto.ttf b/payments-ui-core/res/font/roboto.ttf similarity index 100% rename from paymentsheet/res/font/roboto.ttf rename to payments-ui-core/res/font/roboto.ttf diff --git a/payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.kt b/payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.kt index 11560275479..ece4fd0feb9 100644 --- a/payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.kt +++ b/payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.kt @@ -3,19 +3,124 @@ package com.stripe.android.ui.core import android.content.Context import android.content.res.Configuration.UI_MODE_NIGHT_MASK import android.content.res.Configuration.UI_MODE_NIGHT_YES +import androidx.annotation.FontRes import androidx.annotation.RestrictTo import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Colors import androidx.compose.material.MaterialTheme import androidx.compose.material.Shapes import androidx.compose.material.Typography +import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.Font +import androidx.compose.ui.text.font.FontFamily +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 + +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +data class PaymentsColors( + val primary: Color, + val surface: Color, + val componentBackground: Color, + val componentBorder: Color, + val componentDivider: Color, + val onPrimary: Color, + val textSecondary: Color, + val textCursor: Color, + val placeholderText: Color, + val onBackground: Color, + val appBarIcon: Color, + val error: Color, +) + +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +data class PaymentsShapes( + val cornerRadius: Float, + val borderStrokeWidth: Float, + val borderStrokeWidthSelected: Float, +) + +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +data class PaymentsTypography( + val fontWeightNormal: Int, + val fontWeightMedium: Int, + val fontWeightBold: Int, + val fontSizeMultiplier: Float, + val xxSmallFont: Float, + val xSmallFont: Float, + val smallFont: Float, + val mediumFont: Float, + val largeFont: Float, + val xLargeFont: Float, + @FontRes + val fontFamily: Int +) + +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +object PaymentsThemeDefaults { + fun colors(isDark: Boolean): PaymentsColors { + return if (isDark) colorsDark else colorsLight + } + + val colorsLight = PaymentsColors( + primary = Color(0xFF007AFF), + surface = Color.White, + componentBackground = Color.White, + componentBorder = Color(0x33787880), + componentDivider = Color(0x33787880), + onPrimary = Color.Black, + textSecondary = Color(0x99000000), + textCursor = Color.Black, + placeholderText = Color(0x993C3C43), + onBackground = Color.Black, + appBarIcon = Color(0x99000000), + error = Color.Red, + ) + + val colorsDark = PaymentsColors( + primary = Color(0xFF0074D4), + surface = Color(0xff2e2e2e), + componentBackground = Color.DarkGray, + componentBorder = Color(0xFF787880), + componentDivider = Color(0xFF787880), + onPrimary = Color.White, + textSecondary = Color(0x99FFFFFF), + textCursor = Color.White, + placeholderText = Color(0x61FFFFFF), + onBackground = Color.White, + appBarIcon = Color.White, + error = Color.Red, + ) + + val shapes = PaymentsShapes( + cornerRadius = 6.0f, + borderStrokeWidth = 1.0f, + borderStrokeWidthSelected = 2.0f + ) + + val typography = PaymentsTypography( + fontWeightNormal = FontWeight.Normal.weight, + fontWeightMedium = FontWeight.Medium.weight, + fontWeightBold = FontWeight.Bold.weight, + fontSizeMultiplier = 1.0F, + xxSmallFont = 9.0F, + xSmallFont = 12.0F, + smallFont = 13.0F, + mediumFont = 14.0F, + largeFont = 16.0F, + xLargeFont = 20.0F, + fontFamily = R.font.roboto + ) +} @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) data class PaymentsComposeColors( @@ -35,6 +140,117 @@ data class PaymentsComposeShapes( val material: Shapes ) +@Composable +@ReadOnlyComposable +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +fun PaymentsColors.toComposeColors(): PaymentsComposeColors { + return PaymentsComposeColors( + colorComponentBackground = componentBackground, + colorComponentBorder = componentBorder, + colorComponentDivider = componentDivider, + colorTextSecondary = textSecondary, + colorTextCursor = textCursor, + placeholderText = placeholderText, + + material = lightColors( + primary = primary, + onPrimary = onPrimary, + surface = surface, + onBackground = onBackground, + error = error, + ) + ) +} + +@Composable +@ReadOnlyComposable +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +fun PaymentsShapes.toComposeShapes(): PaymentsComposeShapes { + return PaymentsComposeShapes( + borderStrokeWidth = borderStrokeWidth.dp, + borderStrokeWidthSelected = borderStrokeWidthSelected.dp, + material = MaterialTheme.shapes.copy( + small = RoundedCornerShape(cornerRadius.dp), + medium = RoundedCornerShape(cornerRadius.dp) + ) + ) +} + +@Composable +@ReadOnlyComposable +@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) +fun PaymentsTypography.toComposeTypography(): Typography { + // h4 is our largest headline. It is used for the most important labels in our UI + // ex: "Select your payment method" in Payment Sheet. + val h4 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (xLargeFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightBold), + ) + + // h5 is our medium headline label. + // ex: "Pay $50.99" in Payment Sheet's buy button. + val h5 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (largeFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightMedium), + letterSpacing = (-0.32).sp + ) + + // h6 is our smallest headline label. + // ex: Section labels in Payment Sheet + val h6 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (smallFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightMedium), + letterSpacing = (-0.15).sp + ) + + // body1 is our larger body text. Used for the bulk of our elements and forms. + // ex: the text used in Payment Sheet's text form elements. + val body1 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (mediumFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightNormal), + ) + + // subtitle1 is our only subtitle size. Used for labeling fields. + // ex: the placeholder texts that appear when you type in Payment Sheet's forms. + val subtitle1 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (mediumFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightNormal), + letterSpacing = (-0.15).sp + ) + + // caption is used to label images in payment sheet. + // ex: the labels under our payment method selectors in Payment Sheet. + val caption = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (xSmallFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightMedium) + ) + + // body2 is our smaller body text. Used for less important fields that are not required to + // read. Ex: our mandate texts in Payment Sheet. + val body2 = TextStyle.Default.copy( + fontFamily = FontFamily(Font(fontFamily)), + fontSize = (xxSmallFont * fontSizeMultiplier).sp, + fontWeight = FontWeight(fontWeightNormal), + letterSpacing = (-0.15).sp + ) + + return MaterialTheme.typography.copy( + body1 = body1, + body2 = body2, + h4 = h4, + h5 = h5, + h6 = h6, + subtitle1 = subtitle1, + caption = caption + ) +} + @Composable @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) fun PaymentsTheme( @@ -51,9 +267,9 @@ fun PaymentsTheme( localShapes provides shapes ) { MaterialTheme( - colors = PaymentsTheme.colors.material, + colors = colors.material, typography = PaymentsTheme.typography, - shapes = PaymentsTheme.shapes.material, + shapes = shapes.material, content = content ) } @@ -64,22 +280,24 @@ fun PaymentsTheme( // This mirrors an object that lives inside of MaterialTheme. @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP) object PaymentsTheme { - lateinit var colorsLight: PaymentsComposeColors - lateinit var colorsDark: PaymentsComposeColors + var colorsDarkMutable = PaymentsThemeDefaults.colorsDark + var colorsLightMutable = PaymentsThemeDefaults.colorsLight val colors: PaymentsComposeColors @Composable @ReadOnlyComposable - get() = if (isSystemInDarkTheme()) colorsDark else colorsLight + get() = (if (isSystemInDarkTheme()) colorsDarkMutable else colorsLightMutable).toComposeColors() - lateinit var shapes: PaymentsComposeShapes + var shapesMutable = PaymentsThemeDefaults.shapes + val shapes: PaymentsComposeShapes + @Composable + @ReadOnlyComposable + get() = shapesMutable.toComposeShapes() - lateinit var typography: Typography - const val xxsmallFont = 9.0 - const val xsmallFont = 12.0 - const val smallFont = 13.0 - const val mediumFont = 14.0 - const val largeFont = 16.0 - const val extraLargeFont = 20.0 + var typographyMutable = PaymentsThemeDefaults.typography + val typography: Typography + @Composable + @ReadOnlyComposable + get() = typographyMutable.toComposeTypography() @Composable @ReadOnlyComposable diff --git a/paymentsheet/api/paymentsheet.api b/paymentsheet/api/paymentsheet.api index 0f107d9a5a2..815d70d273c 100644 --- a/paymentsheet/api/paymentsheet.api +++ b/paymentsheet/api/paymentsheet.api @@ -320,16 +320,14 @@ public final class com/stripe/android/paymentsheet/PaymentSheet$Shapes : android public static final field $stable I public static final field CREATOR Landroid/os/Parcelable$Creator; public static final field Companion Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes$Companion; - public fun (FFF)V + public fun (FF)V public final fun component1 ()F public final fun component2 ()F - public final fun component3 ()F - public final fun copy (FFF)Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes; - public static synthetic fun copy$default (Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes;FFFILjava/lang/Object;)Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes; + public final fun copy (FF)Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes; + public static synthetic fun copy$default (Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes;FFILjava/lang/Object;)Lcom/stripe/android/paymentsheet/PaymentSheet$Shapes; public fun describeContents ()I public fun equals (Ljava/lang/Object;)Z public final fun getBorderStrokeWidthDp ()F - public final fun getBorderStrokeWidthSelected ()F public final fun getCornerRadiusDp ()F public fun hashCode ()I public fun toString ()Ljava/lang/String; diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/BasePaymentMethodsListFragment.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/BasePaymentMethodsListFragment.kt index fd45a02b30e..2b2e15e1974 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/BasePaymentMethodsListFragment.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/BasePaymentMethodsListFragment.kt @@ -24,7 +24,7 @@ import com.stripe.android.paymentsheet.model.FragmentConfig import com.stripe.android.paymentsheet.model.PaymentSelection import com.stripe.android.paymentsheet.ui.BaseSheetActivity import com.stripe.android.paymentsheet.viewmodels.BaseSheetViewModel -import com.stripe.android.ui.core.PaymentsTheme +import com.stripe.android.ui.core.PaymentsThemeDefaults import com.stripe.android.ui.core.convertDpToPx import com.stripe.android.ui.core.isSystemDarkTheme @@ -110,7 +110,10 @@ internal abstract class BasePaymentMethodsListFragment( } val fontSize = it.convertDpToPx( - (PaymentsTheme.smallFont * appearance.typography.sizeScaleFactor).dp + ( + PaymentsThemeDefaults.typography.smallFont + * appearance.typography.sizeScaleFactor + ).dp ) editMenuTextSpan.setSpan( AbsoluteSizeSpan(fontSize.toInt()), diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt index 0043be016af..f49b62a124e 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt @@ -5,13 +5,13 @@ import android.os.Parcelable import androidx.activity.ComponentActivity import androidx.annotation.ColorRes import androidx.annotation.FontRes -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb import androidx.fragment.app.Fragment import com.stripe.android.model.PaymentIntent import com.stripe.android.model.SetupIntent import com.stripe.android.paymentsheet.flowcontroller.FlowControllerFactory import com.stripe.android.paymentsheet.model.PaymentOption +import com.stripe.android.ui.core.PaymentsThemeDefaults import kotlinx.parcelize.Parcelize /** @@ -258,31 +258,32 @@ class PaymentSheet internal constructor( ) : Parcelable { companion object { val defaultLight = Colors( - primary = Color(0xFF007AFF).toArgb(), - surface = Color.White.toArgb(), - componentBackground = Color.White.toArgb(), - componentBorder = Color(0x33787880).toArgb(), - componentDivider = Color(0x33787880).toArgb(), - onPrimary = Color.Black.toArgb(), - textSecondary = Color(0x99000000).toArgb(), - placeholderText = Color(0x993C3C43).toArgb(), - onBackground = Color.Black.toArgb(), - appBarIcon = Color(0x99000000).toArgb(), - error = Color.Red.toArgb(), + primary = PaymentsThemeDefaults.colorsLight.primary.toArgb(), + surface = PaymentsThemeDefaults.colorsLight.surface.toArgb(), + componentBackground = PaymentsThemeDefaults + .colorsLight.componentBackground.toArgb(), + componentBorder = PaymentsThemeDefaults.colorsLight.componentBorder.toArgb(), + componentDivider = PaymentsThemeDefaults.colorsLight.componentDivider.toArgb(), + onPrimary = PaymentsThemeDefaults.colorsLight.onPrimary.toArgb(), + textSecondary = PaymentsThemeDefaults.colorsLight.textSecondary.toArgb(), + placeholderText = PaymentsThemeDefaults.colorsLight.placeholderText.toArgb(), + onBackground = PaymentsThemeDefaults.colorsLight.onBackground.toArgb(), + appBarIcon = PaymentsThemeDefaults.colorsLight.appBarIcon.toArgb(), + error = PaymentsThemeDefaults.colorsLight.error.toArgb(), ) val defaultDark = Colors( - primary = Color(0xFF0074D4).toArgb(), - surface = Color(0xff2e2e2e).toArgb(), - componentBackground = Color.DarkGray.toArgb(), - componentBorder = Color(0xFF787880).toArgb(), - componentDivider = Color(0xFF787880).toArgb(), - onPrimary = Color.White.toArgb(), - textSecondary = Color(0x99FFFFFF).toArgb(), - placeholderText = Color(0x61FFFFFF).toArgb(), - onBackground = Color.White.toArgb(), - appBarIcon = Color.White.toArgb(), - error = Color.Red.toArgb(), + primary = PaymentsThemeDefaults.colorsDark.primary.toArgb(), + surface = PaymentsThemeDefaults.colorsDark.surface.toArgb(), + componentBackground = PaymentsThemeDefaults.colorsDark.componentBackground.toArgb(), + componentBorder = PaymentsThemeDefaults.colorsDark.componentBorder.toArgb(), + componentDivider = PaymentsThemeDefaults.colorsDark.componentDivider.toArgb(), + onPrimary = PaymentsThemeDefaults.colorsDark.onPrimary.toArgb(), + textSecondary = PaymentsThemeDefaults.colorsDark.textSecondary.toArgb(), + placeholderText = PaymentsThemeDefaults.colorsDark.placeholderText.toArgb(), + onBackground = PaymentsThemeDefaults.colorsDark.onBackground.toArgb(), + appBarIcon = PaymentsThemeDefaults.colorsDark.appBarIcon.toArgb(), + error = PaymentsThemeDefaults.colorsDark.error.toArgb(), ) } } @@ -294,15 +295,11 @@ class PaymentSheet internal constructor( // The border used for inputs, tabs, and other components in PaymentSheet val borderStrokeWidthDp: Float, - - // The border used for selected inputs, tabs in PaymentSheet - val borderStrokeWidthSelected: Float ) : Parcelable { companion object { val default = Shapes( - cornerRadiusDp = 6.0f, - borderStrokeWidthDp = 1.0f, - borderStrokeWidthSelected = 2.0f + cornerRadiusDp = PaymentsThemeDefaults.shapes.cornerRadius, + borderStrokeWidthDp = PaymentsThemeDefaults.shapes.borderStrokeWidth, ) } } @@ -328,11 +325,11 @@ class PaymentSheet internal constructor( ) : Parcelable { companion object { val default = Typography( - sizeScaleFactor = 1.0f, - normalWeight = 400, - mediumWeight = 500, - boldWeight = 700, - fontResId = R.font.roboto + sizeScaleFactor = PaymentsThemeDefaults.typography.fontSizeMultiplier, + normalWeight = PaymentsThemeDefaults.typography.fontWeightNormal, + mediumWeight = PaymentsThemeDefaults.typography.fontWeightMedium, + boldWeight = PaymentsThemeDefaults.typography.fontWeightBold, + fontResId = PaymentsThemeDefaults.typography.fontFamily ) } } diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetActivity.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetActivity.kt index 8328f896d2b..894b63e3ac7 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetActivity.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetActivity.kt @@ -93,7 +93,7 @@ internal class PaymentSheetActivity : BaseSheetActivity() { try { starterArgs.config?.validate() starterArgs.clientSecret.validate() - starterArgs.config?.parseAppearance() + starterArgs.config?.appearance?.parseAppearance() } catch (e: InvalidParameterException) { setActivityResult(PaymentSheetResult.Failed(e)) finish() diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetConfigurationKtx.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetConfigurationKtx.kt index 2e21d8c0ba8..ac02b49613c 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetConfigurationKtx.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheetConfigurationKtx.kt @@ -1,20 +1,8 @@ package com.stripe.android.paymentsheet -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Shapes -import androidx.compose.material.Typography -import androidx.compose.material.darkColors -import androidx.compose.material.lightColors import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.Font -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import com.stripe.android.ui.core.PaymentsComposeColors -import com.stripe.android.ui.core.PaymentsComposeShapes import com.stripe.android.ui.core.PaymentsTheme +import com.stripe.android.ui.core.PaymentsThemeDefaults import java.security.InvalidParameterException internal fun PaymentSheet.Configuration.validate() { @@ -41,117 +29,37 @@ internal fun PaymentSheet.Configuration.validate() { } } -internal fun PaymentSheet.Configuration.parseAppearance() { - PaymentsTheme.colorsLight = PaymentsComposeColors( - colorComponentBackground = Color(appearance.colorsLight.componentBackground), - colorComponentBorder = Color(appearance.colorsLight.componentBorder), - colorComponentDivider = Color(appearance.colorsLight.componentDivider), - colorTextSecondary = Color(appearance.colorsLight.textSecondary), - colorTextCursor = Color.White, - placeholderText = Color(appearance.colorsLight.placeholderText), - - material = lightColors( - primary = Color(appearance.colorsLight.primary), - onPrimary = Color(appearance.colorsLight.onPrimary), - surface = Color(appearance.colorsLight.surface), - onBackground = Color(appearance.colorsLight.onBackground), - error = Color(appearance.colorsLight.error), - ) - ) - - PaymentsTheme.colorsDark = PaymentsComposeColors( - colorComponentBackground = Color(appearance.colorsDark.componentBackground), - colorComponentBorder = Color(appearance.colorsDark.componentBorder), - colorComponentDivider = Color(appearance.colorsDark.componentDivider), - colorTextSecondary = Color(appearance.colorsDark.textSecondary), - colorTextCursor = Color.Black, - placeholderText = Color(appearance.colorsDark.placeholderText), - - material = darkColors( - primary = Color(appearance.colorsDark.primary), - onPrimary = Color(appearance.colorsDark.onPrimary), - surface = Color(appearance.colorsDark.surface), - onBackground = Color(appearance.colorsDark.onBackground), - error = Color(appearance.colorsDark.error), - ) - ) - - PaymentsTheme.shapes = PaymentsComposeShapes( - borderStrokeWidth = appearance.shapes.borderStrokeWidthDp.dp, - borderStrokeWidthSelected = appearance.shapes.borderStrokeWidthSelected.dp, - material = Shapes( - small = RoundedCornerShape(appearance.shapes.cornerRadiusDp.dp), - medium = RoundedCornerShape(appearance.shapes.cornerRadiusDp.dp) - ) - ) - - // h4 is our largest headline. It is used for the most important labels in our UI - // ex: "Select your payment method" in Payment Sheet. - val h4 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.extraLargeFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.boldWeight), - ) - - // h5 is our medium headline label. - // ex: "Pay $50.99" in Payment Sheet's buy button. - val h5 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.largeFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.mediumWeight), - letterSpacing = (-0.32).sp - ) - - // h6 is our smallest headline label. - // ex: Section labels in Payment Sheet - val h6 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.smallFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.mediumWeight), - letterSpacing = (-0.15).sp - ) - - // body1 is our larger body text. Used for the bulk of our elements and forms. - // ex: the text used in Payment Sheet's text form elements. - val body1 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.mediumFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.normalWeight), - ) - - // subtitle1 is our only subtitle size. Used for labeling fields. - // ex: the placeholder texts that appear when you type in Payment Sheet's forms. - val subtitle1 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.mediumFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.normalWeight), - letterSpacing = (-0.15).sp - ) - - // caption is used to label images in payment sheet. - // ex: the labels under our payment method selectors in Payment Sheet. - val caption = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.xsmallFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.mediumWeight) +internal fun PaymentSheet.Appearance.parseAppearance() { + PaymentsTheme.colorsLightMutable = PaymentsThemeDefaults.colorsLight.copy( + primary = Color(colorsLight.primary), + surface = Color(colorsLight.surface), + componentBackground = Color(colorsLight.componentBackground), + componentBorder = Color(colorsLight.componentBorder), + componentDivider = Color(colorsLight.componentDivider), + onPrimary = Color(colorsLight.onPrimary), + textSecondary = Color(colorsLight.textSecondary), + placeholderText = Color(colorsLight.placeholderText), + onBackground = Color(colorsLight.onBackground), + appBarIcon = Color(colorsLight.appBarIcon), + error = Color(colorsLight.error) ) - // body2 is our smaller body text. Used for less important fields that are not required to - // read. Ex: our mandate texts in Payment Sheet. - val body2 = TextStyle.Default.copy( - fontFamily = FontFamily(Font(appearance.typography.fontResId)), - fontSize = (PaymentsTheme.xxsmallFont * appearance.typography.sizeScaleFactor).sp, - fontWeight = FontWeight(appearance.typography.normalWeight), - letterSpacing = (-0.15).sp + PaymentsTheme.colorsDarkMutable = PaymentsThemeDefaults.colorsDark.copy( + primary = Color(colorsDark.primary), + surface = Color(colorsDark.surface), + componentBackground = Color(colorsDark.componentBackground), + componentBorder = Color(colorsDark.componentBorder), + componentDivider = Color(colorsDark.componentDivider), + onPrimary = Color(colorsDark.onPrimary), + textSecondary = Color(colorsDark.textSecondary), + placeholderText = Color(colorsDark.placeholderText), + onBackground = Color(colorsDark.onBackground), + appBarIcon = Color(colorsDark.appBarIcon), + error = Color(colorsDark.error) ) - PaymentsTheme.typography = Typography( - body1 = body1, - body2 = body2, - h4 = h4, - h5 = h5, - h6 = h6, - subtitle1 = subtitle1, - caption = caption + PaymentsTheme.shapesMutable = PaymentsThemeDefaults.shapes.copy( + cornerRadius = shapes.cornerRadiusDp, + borderStrokeWidth = shapes.borderStrokeWidthDp ) } diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PrimaryButton.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PrimaryButton.kt index 31dd6f421ff..e9bd71811d3 100644 --- a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PrimaryButton.kt +++ b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PrimaryButton.kt @@ -18,10 +18,10 @@ import androidx.compose.ui.unit.dp import androidx.core.content.withStyledAttributes import androidx.core.view.isVisible import androidx.core.view.setPadding -import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.R import com.stripe.android.paymentsheet.databinding.PrimaryButtonBinding import com.stripe.android.ui.core.PaymentsTheme +import com.stripe.android.ui.core.PaymentsThemeDefaults import com.stripe.android.ui.core.convertDpToPx /** @@ -53,7 +53,7 @@ internal class PrimaryButton @JvmOverloads constructor( private val confirmedIcon = viewBinding.confirmedIcon - private var cornerRadius = context.convertDpToPx(PaymentSheet.Shapes.default.cornerRadiusDp.dp) + private var cornerRadius = context.convertDpToPx(PaymentsThemeDefaults.shapes.cornerRadius.dp) init { viewBinding.label.setViewCompositionStrategy( diff --git a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/GooglePayButtonTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/GooglePayButtonTest.kt index 69673488909..05a0c0545e8 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/GooglePayButtonTest.kt +++ b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/GooglePayButtonTest.kt @@ -36,7 +36,6 @@ class GooglePayButtonTest { context, ApiKeyFixtures.FAKE_PUBLISHABLE_KEY ) - PaymentSheetFixtures.CONFIG_MINIMUM.parseAppearance() } @Test diff --git a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsActivityTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsActivityTest.kt index 2b324518714..139628bde44 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsActivityTest.kt +++ b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsActivityTest.kt @@ -56,7 +56,6 @@ class PaymentOptionsActivityTest { ApplicationProvider.getApplicationContext(), ApiKeyFixtures.FAKE_PUBLISHABLE_KEY ) - PaymentSheetFixtures.CONFIG_MINIMUM.parseAppearance() } @Test diff --git a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsAddPaymentMethodFragmentTest.kt b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsAddPaymentMethodFragmentTest.kt index 15cbdf41765..176f6967cb9 100644 --- a/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsAddPaymentMethodFragmentTest.kt +++ b/paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentOptionsAddPaymentMethodFragmentTest.kt @@ -35,7 +35,6 @@ internal class PaymentOptionsAddPaymentMethodFragmentTest : PaymentOptionsViewMo ApplicationProvider.getApplicationContext(), ApiKeyFixtures.FAKE_PUBLISHABLE_KEY ) - PaymentSheetFixtures.CONFIG_MINIMUM.parseAppearance() } @After