Skip to content

Commit

Permalink
[FC-V3] Add V3 typography and colors (#7612)
Browse files Browse the repository at this point in the history 
* [skip ci] Start PR

* Adds new typefaces.

* Updates screenshots.

* Style fixes.

* Adds new colors.

* Generates screenshots.

* Updates colors.

* Adds background to previews.

* api dump.
  • Loading branch information
@carlosmuvi-stripe
carlosmuvi-stripe committed Nov 10, 2023
1 parent d29b676 commit 194a0f3
Show file tree
Hide file tree
Showing 8 changed files with 255 additions and 38 deletions.
7 changes: 7 additions & 0 deletions financial-connections/api/financial-connections.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1724,6 +1724,13 @@ public final class com/stripe/android/financialconnections/ui/components/Composa
public final fun getLambda-6$financial_connections_release ()Lkotlin/jvm/functions/Function2;
}

public final class com/stripe/android/financialconnections/ui/theme/ComposableSingletons$ColorKt {
public static final field INSTANCE Lcom/stripe/android/financialconnections/ui/theme/ComposableSingletons$ColorKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$financial_connections_release ()Lkotlin/jvm/functions/Function2;
}

public final class com/stripe/android/financialconnections/ui/theme/ComposableSingletons$TypeKt {
public static final field INSTANCE Lcom/stripe/android/financialconnections/ui/theme/ComposableSingletons$TypeKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
Expand Down
86 changes: 86 additions & 0 deletions ...ncial-connections/src/main/java/com/stripe/android/financialconnections/ui/theme/Color.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,22 @@

package com.stripe.android.financialconnections.ui.theme

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.stripe.android.financialconnections.ui.FinancialConnectionsPreview
import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme.v3Colors
import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme.v3Typography

internal val Info100 = Color(0xffCFF5F6)
internal val Success100 = Color(0xffD7F7C2)
Expand Down Expand Up @@ -36,6 +50,7 @@ internal val Green500 = Color(0xff228403)
* Financial Connections custom Color Palette
*/
@Immutable
@Deprecated("Use FinancialConnectionsV3Colors")
internal data class FinancialConnectionsColors(
// backgrounds
val backgroundSurface: Color,
Expand All @@ -61,3 +76,74 @@ internal data class FinancialConnectionsColors(
val iconSuccess: Color,
val iconAttention: Color
)

@Immutable
internal data class FinancialConnectionsV3Colors(
val textDefault: Color,
val textSubdued: Color,
val textDisabled: Color,
val textWhite: Color,
val textBrand: Color,
val textCritical: Color,
val iconDefault: Color,
val iconSubdued: Color,
val iconWhite: Color,
val iconBrand: Color,
val buttonPrimary: Color,
val buttonPrimaryHover: Color,
val buttonPrimaryPressed: Color,
val buttonSecondary: Color,
val buttonSecondaryHover: Color,
val buttonSecondaryPressed: Color,
val background: Color,
val backgroundBrand: Color,
val border: Color,
val borderBrand: Color
)

@Preview(group = "Components", name = "Colors")
@Composable
internal fun ColorsPreview() {
FinancialConnectionsPreview {
Column(
modifier = Modifier.background(Color.White)
) {
ColorPreview("textDefault", v3Colors.textDefault)
ColorPreview("textSubdued", v3Colors.textSubdued)
ColorPreview("textDisabled", v3Colors.textDisabled)
ColorPreview("textWhite", v3Colors.textWhite)
ColorPreview("textBrand", v3Colors.textBrand)
ColorPreview("textCritical", v3Colors.textCritical)
ColorPreview("iconDefault", v3Colors.iconDefault)
ColorPreview("iconSubdued", v3Colors.iconSubdued)
ColorPreview("iconWhite", v3Colors.iconWhite)
ColorPreview("iconBrand", v3Colors.iconBrand)
ColorPreview("buttonPrimary", v3Colors.buttonPrimary)
ColorPreview("buttonPrimaryHover", v3Colors.buttonPrimaryHover)
ColorPreview("buttonPrimaryPressed", v3Colors.buttonPrimaryPressed)
ColorPreview("buttonSecondary", v3Colors.buttonSecondary)
ColorPreview("buttonSecondaryHover", v3Colors.buttonSecondaryHover)
ColorPreview("buttonSecondaryPressed", v3Colors.buttonSecondaryPressed)
ColorPreview("background", v3Colors.background)
ColorPreview("backgroundBrand", v3Colors.backgroundBrand)
ColorPreview("border", v3Colors.border)
ColorPreview("borderBrand", v3Colors.borderBrand)
}
}
}

@Composable
private fun ColorPreview(colorText: String, color: Color) {
Row {
Box(
Modifier
.size(40.dp)
.background(color)
)
Text(
text = colorText,
style = v3Typography.bodyMedium,
modifier = Modifier.padding(10.dp)
)
}
}
120 changes: 114 additions & 6 deletions ...ncial-connections/src/main/java/com/stripe/android/financialconnections/ui/theme/Theme.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.DialogWindowProvider
import androidx.core.view.WindowCompat

private val LightColorPalette = FinancialConnectionsColors(
@Deprecated("Use V3Colors instead")
private val Colors = FinancialConnectionsColors(
backgroundSurface = Color.White,
backgroundContainer = Neutral50,
backgroundBackdrop = Neutral200.copy(alpha = .70f),
Expand All @@ -46,6 +47,30 @@ private val LightColorPalette = FinancialConnectionsColors(
iconAttention = Attention400
)

private val V3Colors = FinancialConnectionsV3Colors(
textDefault = Color(0xFF353A44),
textSubdued = Color(0xFF596171),
textDisabled = Color(0xFF818DA0),
textWhite = Color(0xFFFFFFFF),
textBrand = Color(0xFF533AFD),
textCritical = Color(0xFFC0123C),
iconDefault = Color(0xFF474E5A),
iconSubdued = Color(0xFF6C7688),
iconWhite = Color(0xFFFFFFFF),
iconBrand = Color(0xFF675DFF),
buttonPrimary = Color(0xFF675DFF),
buttonPrimaryHover = Color(0xFF857AFE),
buttonPrimaryPressed = Color(0xFF533AFD),
buttonSecondary = Color(0xFFF5F6F8),
buttonSecondaryHover = Color(0xFFF5F6F8),
buttonSecondaryPressed = Color(0xFFEBEEF1),
background = Color(0xFFF5F6F8),
backgroundBrand = Color(0xFFF5F6F8),
border = Color(0xFFD8DEE4),
borderBrand = Color(0xFF675DFF)
)

@Deprecated("Use V3Typography instead")
private val Typography = FinancialConnectionsTypography(
subtitle = TextStyle(
fontSize = 24.sp,
Expand Down Expand Up @@ -134,22 +159,83 @@ private val Typography = FinancialConnectionsTypography(
),
)

private val V3Typography = FinancialConnectionsV3Typography(
headingXLarge = TextStyle(
fontSize = 28.sp,
lineHeight = 32.sp,
letterSpacing = 0.38.sp,
fontWeight = FontWeight.W700
),
headingLarge = TextStyle(
fontSize = 24.sp,
lineHeight = 32.sp,
letterSpacing = 0.30.sp,
fontWeight = FontWeight.W700
),
headingMedium = TextStyle(
fontSize = 20.sp,
lineHeight = 28.sp,
letterSpacing = 0.30.sp,
fontWeight = FontWeight.W700
),
bodyMediumEmphasized = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontWeight = FontWeight.W600
),
bodyMedium = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontWeight = FontWeight.W400
),
bodySmall = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontWeight = FontWeight.W400
),
labelLargeEmphasized = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontWeight = FontWeight.W600
),
labelLarge = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontWeight = FontWeight.W400
),
labelMediumEmphasized = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontWeight = FontWeight.W600
),
labelMedium = TextStyle(
fontSize = 14.sp,
lineHeight = 20.sp,
fontWeight = FontWeight.W400
),
labelSmall = TextStyle(
fontSize = 12.sp,
lineHeight = 16.sp,
fontWeight = FontWeight.W400
),
)

private val TextSelectionColors = TextSelectionColors(
handleColor = LightColorPalette.textBrand,
backgroundColor = LightColorPalette.textBrand.copy(alpha = 0.4f)
handleColor = V3Colors.textBrand,
backgroundColor = V3Colors.textBrand.copy(alpha = 0.4f)
)

@Immutable
private object FinancialConnectionsRippleTheme : RippleTheme {
@Composable
override fun defaultColor() = RippleTheme.defaultRippleColor(
contentColor = LightColorPalette.textBrand,
contentColor = V3Colors.textBrand,
lightTheme = MaterialTheme.colors.isLight
)

@Composable
override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
contentColor = LightColorPalette.textBrand,
contentColor = V3Colors.textBrand,
lightTheme = MaterialTheme.colors.isLight
)
}
Expand All @@ -158,7 +244,9 @@ private object FinancialConnectionsRippleTheme : RippleTheme {
internal fun FinancialConnectionsTheme(content: @Composable () -> Unit) {
CompositionLocalProvider(
LocalFinancialConnectionsTypography provides Typography,
LocalFinancialConnectionsColors provides LightColorPalette
LocalV3Typography provides V3Typography,
LocalFinancialConnectionsColors provides Colors,
LocalV3Colors provides V3Colors
) {
val view = LocalView.current
val window = findWindow()
Expand Down Expand Up @@ -205,17 +293,37 @@ private val LocalFinancialConnectionsTypography =
error("no FinancialConnectionsTypography provided")
}

private val LocalV3Typography =
staticCompositionLocalOf<FinancialConnectionsV3Typography> {
error("no V3Typography provided")
}

private val LocalV3Colors =
staticCompositionLocalOf<FinancialConnectionsV3Colors> {
error("no V3Colors provided")
}

private val LocalFinancialConnectionsColors = staticCompositionLocalOf<FinancialConnectionsColors> {
error("No FinancialConnectionsColors provided")
}

internal object FinancialConnectionsTheme {

@Deprecated("Use v3Colors instead")
val colors: FinancialConnectionsColors
@Composable
get() = LocalFinancialConnectionsColors.current

@Deprecated("Use v3Typography instead")
val typography: FinancialConnectionsTypography
@Composable
get() = LocalFinancialConnectionsTypography.current
val v3Typography
@Composable
get() = LocalV3Typography.current
val v3Colors
@Composable
get() = LocalV3Colors.current
}

/**
Expand Down
Loading

0 comments on commit 194a0f3

Please sign in to comment.