Skip to content

Commit

Permalink
attempt #2
Browse files Browse the repository at this point in the history
  • Loading branch information
@skyler-stripe
skyler-stripe committed Mar 25, 2022
1 parent cdbd360 commit bde4cb0
Show file tree
Hide file tree
Showing 11 changed files with 302 additions and 181 deletions.
0 paymentsheet/res/font/roboto.ttf → payments-ui-core/res/font/roboto.ttf
View file
File renamed without changes.
244 changes: 231 additions & 13 deletions payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -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
)
}
Expand All @@ -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
Expand Down
8 changes: 3 additions & 5 deletions paymentsheet/api/paymentsheet.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <init> (FFF)V
public fun <init> (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;
Expand Down
7 changes: 5 additions & 2 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/BasePaymentMethodsListFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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()),
Expand Down
Loading

0 comments on commit bde4cb0

Please sign in to comment.