Skip to content
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

Add public api for project wardrobe (not being merged to master) #4760

Merged
merged 6 commits into from
Apr 5, 2022
Merged

Add public api for project wardrobe (not being merged to master) #4760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cdbd360
add public api for project wardrobe
skyler-stripe Mar 23, 2022
bde4cb0
attempt #2
skyler-stripe Mar 25, 2022
7cfed98
change from floats to TextUnits for default typography
skyler-stripe Mar 25, 2022
0fa2fe5
forgot typography
skyler-stripe Mar 28, 2022
fd5297c
merge master
skyler-stripe Apr 4, 2022
053b8f4
api dump
skyler-stripe Apr 5, 2022
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
247 changes: 139 additions & 108 deletions payments-ui-core/src/main/java/com/stripe/android/ui/core/PaymentsTheme.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.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.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.content.res.ResourcesCompat
Expand All @@ -53,88 +54,35 @@ data class PaymentsColors(
)

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
object PaymentsThemeConfig {
fun colors(isDark: Boolean): PaymentsColors {
return if (isDark) colorsDark else colorsLight
}

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
object Shapes {
val cornerRadius = 6.dp
val borderStrokeWidth = 1.dp
val borderStrokeWidthSelected = 2.dp
}

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
object Typography {
private val fontWeightBold: Int = FontWeight.Bold.weight
private val fontWeightMedium: Int = FontWeight.Medium.weight
private val fontWeightNormal: Int = FontWeight.Normal.weight
private val fontSizeMultiplier: Float = 1.0F
val fontFamily: Int = R.font.roboto

// 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 = (20.0 * 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 = (16.0 * 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 = (13.0 * 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 = (14.0 * 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 = (14.0 * fontSizeMultiplier).sp,
fontWeight = FontWeight(fontWeightNormal),
letterSpacing = (-0.15).sp
)
data class PaymentsShapes(
val cornerRadius: Float,
val borderStrokeWidth: Float,
val borderStrokeWidthSelected: Float,
)

// 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 = (12.0 * fontSizeMultiplier).sp,
fontWeight = FontWeight(fontWeightMedium)
)
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
data class PaymentsTypography(
val fontWeightNormal: Int,
val fontWeightMedium: Int,
val fontWeightBold: Int,
val fontSizeMultiplier: Float,
val xxSmallFontSize: TextUnit,
val xSmallFontSize: TextUnit,
val smallFontSize: TextUnit,
val mediumFontSize: TextUnit,
val largeFontSize: TextUnit,
val xLargeFontSize: TextUnit,
@FontRes
val fontFamily: Int
)

// 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 = (9.0 * fontSizeMultiplier).sp,
fontWeight = FontWeight(fontWeightNormal),
letterSpacing = (-0.15).sp
)
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
object PaymentsThemeDefaults {
fun colors(isDark: Boolean): PaymentsColors {
return if (isDark) colorsDark else colorsLight
}

private val colorsLight = PaymentsColors(
val colorsLight = PaymentsColors(
primary = Color(0xFF007AFF),
surface = Color.White,
component = Color.White,
Expand All @@ -149,7 +97,7 @@ object PaymentsThemeConfig {
error = Color.Red,
)

private val colorsDark = PaymentsColors(
val colorsDark = PaymentsColors(
primary = Color(0xFF0074D4),
surface = Color(0xff2e2e2e),
component = Color.DarkGray,
Expand All @@ -163,6 +111,26 @@ object PaymentsThemeConfig {
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,
xxSmallFontSize = 9.sp,
xSmallFontSize = 12.sp,
smallFontSize = 13.sp,
mediumFontSize = 14.sp,
largeFontSize = 16.sp,
xLargeFontSize = 20.sp,
fontFamily = R.font.roboto
)
}

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
Expand All @@ -187,44 +155,103 @@ data class PaymentsComposeShapes(
@Composable
@ReadOnlyComposable
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
fun PaymentsThemeConfig.toComposeColors(): PaymentsComposeColors {
val colors = colors(isSystemInDarkTheme())
fun PaymentsColors.toComposeColors(): PaymentsComposeColors {
return PaymentsComposeColors(
component = colors.component,
colorComponentBorder = colors.componentBorder,
colorComponentDivider = colors.componentDivider,
onComponent = colors.onComponent,
subtitle = colors.subtitle,
colorTextCursor = colors.textCursor,
placeholderText = colors.placeholderText,
component = component,
colorComponentBorder = componentBorder,
colorComponentDivider = componentDivider,
onComponent = onComponent,
subtitle = subtitle,
colorTextCursor = textCursor,
placeholderText = placeholderText,

material = lightColors(
primary = colors.primary,
surface = colors.surface,
onSurface = colors.onSurface,
error = colors.error,
primary = primary,
surface = surface,
onSurface = onSurface,
error = error,
)
)
}

@Composable
@ReadOnlyComposable
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
fun PaymentsThemeConfig.Shapes.toComposeShapes(): PaymentsComposeShapes {
fun PaymentsShapes.toComposeShapes(): PaymentsComposeShapes {
return PaymentsComposeShapes(
borderStrokeWidth = borderStrokeWidth,
borderStrokeWidthSelected = borderStrokeWidthSelected,
borderStrokeWidth = borderStrokeWidth.dp,
borderStrokeWidthSelected = borderStrokeWidthSelected.dp,
material = MaterialTheme.shapes.copy(
small = RoundedCornerShape(cornerRadius),
medium = RoundedCornerShape(cornerRadius)
small = RoundedCornerShape(cornerRadius.dp),
medium = RoundedCornerShape(cornerRadius.dp)
)
)
}

@Composable
@ReadOnlyComposable
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
fun PaymentsThemeConfig.Typography.toComposeTypography(): Typography {
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 = (xLargeFontSize * fontSizeMultiplier),
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 = (largeFontSize * fontSizeMultiplier),
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 = (smallFontSize * fontSizeMultiplier),
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 = (mediumFontSize * fontSizeMultiplier),
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 = (mediumFontSize * fontSizeMultiplier),
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 = (xSmallFontSize * fontSizeMultiplier),
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 = (xxSmallFontSize * fontSizeMultiplier),
fontWeight = FontWeight(fontWeightNormal),
letterSpacing = (-0.15).sp
)

return MaterialTheme.typography.copy(
body1 = body1,
body2 = body2,
Expand All @@ -241,20 +268,20 @@ fun PaymentsThemeConfig.Typography.toComposeTypography(): Typography {
fun PaymentsTheme(
content: @Composable () -> Unit
) {
val colors = PaymentsThemeConfig.toComposeColors()
val colors = PaymentsTheme.colors
val localColors = staticCompositionLocalOf { colors }

val shapes = PaymentsThemeConfig.Shapes.toComposeShapes()
val shapes = PaymentsTheme.shapes
val localShapes = staticCompositionLocalOf { shapes }

CompositionLocalProvider(
localColors provides colors,
localShapes provides shapes
) {
MaterialTheme(
colors = PaymentsTheme.colors.material,
typography = PaymentsThemeConfig.Typography.toComposeTypography(),
shapes = PaymentsTheme.shapes.material,
colors = colors.material,
typography = PaymentsTheme.typography,
shapes = shapes.material,
content = content
)
}
Expand All @@ -266,21 +293,25 @@ fun PaymentsTheme(
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
object PaymentsTheme {
const val minContrastForWhite = 2.2
var colorsDarkMutable = PaymentsThemeDefaults.colorsDark
var colorsLightMutable = PaymentsThemeDefaults.colorsLight

val colors: PaymentsComposeColors
@Composable
@ReadOnlyComposable
get() = PaymentsThemeConfig.toComposeColors()
get() = (if (isSystemInDarkTheme()) colorsDarkMutable else colorsLightMutable).toComposeColors()
skyler-stripe marked this conversation as resolved.
Show resolved Hide resolved

var shapesMutable = PaymentsThemeDefaults.shapes
val shapes: PaymentsComposeShapes
@Composable
@ReadOnlyComposable
get() = PaymentsThemeConfig.Shapes.toComposeShapes()
get() = shapesMutable.toComposeShapes()

var typographyMutable = PaymentsThemeDefaults.typography
val typography: Typography
@Composable
@ReadOnlyComposable
get() = PaymentsThemeConfig.Typography.toComposeTypography()
get() = typographyMutable.toComposeTypography()

@Composable
@ReadOnlyComposable
Expand All @@ -305,14 +336,14 @@ fun Context.convertDpToPx(dp: Dp): Float {
fun createTextSpanFromTextStyle(
text: String?,
context: Context,
textStyle: TextStyle,
fontSizeDp: Dp,
color: Color,
@FontRes
fontFamily: Int
): SpannableString {
val span = SpannableString(text ?: "")

val fontSize = context.convertDpToPx(textStyle.fontSize.value.dp)
val fontSize = context.convertDpToPx(fontSizeDp)
span.setSpan(AbsoluteSizeSpan(fontSize.toInt()), 0, span.length, 0)

span.setSpan(ForegroundColorSpan(color.toArgb()), 0, span.length, 0)
Expand Down
Loading