Skip to content

Commit

Permalink
add public api for project wardrobe
Browse files Browse the repository at this point in the history
  • Loading branch information
@skyler-stripe
skyler-stripe committed Mar 24, 2022
1 parent 61470fe commit cdbd360
Show file tree
Hide file tree
Showing 13 changed files with 523 additions and 257 deletions.
215 changes: 14 additions & 201 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 @@ -6,153 +6,16 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
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)
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
)

// 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)
)

// 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
)
}

private 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,
)

private 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,
)
}

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
data class PaymentsComposeColors(
Expand All @@ -172,67 +35,15 @@ data class PaymentsComposeShapes(
val material: Shapes
)

@Composable
@ReadOnlyComposable
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
fun PaymentsThemeConfig.toComposeColors(): PaymentsComposeColors {
val colors = colors(isSystemInDarkTheme())
return PaymentsComposeColors(
colorComponentBackground = colors.componentBackground,
colorComponentBorder = colors.componentBorder,
colorComponentDivider = colors.componentDivider,
colorTextSecondary = colors.textSecondary,
colorTextCursor = colors.textCursor,
placeholderText = colors.placeholderText,

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

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

@Composable
@ReadOnlyComposable
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
fun PaymentsThemeConfig.Typography.toComposeTypography(): Typography {
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(
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(
Expand All @@ -241,7 +52,7 @@ fun PaymentsTheme(
) {
MaterialTheme(
colors = PaymentsTheme.colors.material,
typography = PaymentsThemeConfig.Typography.toComposeTypography(),
typography = PaymentsTheme.typography,
shapes = PaymentsTheme.shapes.material,
content = content
)
Expand All @@ -253,20 +64,22 @@ 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
val colors: PaymentsComposeColors
@Composable
@ReadOnlyComposable
get() = PaymentsThemeConfig.toComposeColors()
get() = if (isSystemInDarkTheme()) colorsDark else colorsLight

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

val typography: Typography
@Composable
@ReadOnlyComposable
get() = PaymentsThemeConfig.Typography.toComposeTypography()
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

@Composable
@ReadOnlyComposable
Expand Down
Loading

0 comments on commit cdbd360

Please sign in to comment.