spark/com.adevinta.spark.tokens

Package-level declarations

Types

ElevationTokens

object ElevationTokens

Contains predefined Dp values for elevation levels.

Layout

object Layout

Order

annotation class Order(val value: Int)

Used to order tokens in the catalog, preview and tests.

SparkColors

@Stable

class SparkColors(accent: Color, onAccent: Color, accentContainer: Color, onAccentContainer: Color, accentVariant: Color, onAccentVariant: Color, basic: Color, onBasic: Color, basicContainer: Color, onBasicContainer: Color, main: Color, onMain: Color, mainContainer: Color, onMainContainer: Color, mainVariant: Color, onMainVariant: Color, support: Color, onSupport: Color, supportContainer: Color, onSupportContainer: Color, supportVariant: Color, onSupportVariant: Color, success: Color, onSuccess: Color, successContainer: Color, onSuccessContainer: Color, alert: Color, onAlert: Color, alertContainer: Color, onAlertContainer: Color, error: Color, onError: Color, errorContainer: Color, onErrorContainer: Color, info: Color, onInfo: Color, infoContainer: Color, onInfoContainer: Color, neutral: Color, onNeutral: Color, neutralContainer: Color, onNeutralContainer: Color, background: Color, onBackground: Color, backgroundVariant: Color, onBackgroundVariant: Color, surface: Color, onSurface: Color, surfaceInverse: Color, onSurfaceInverse: Color, surfaceTint: Color, outline: Color, outlineHigh: Color, scrim: Color, dimContent1: Float, dimContent2: Float, dimContent3: Float, dimContent4: Float, dimContent5: Float)

A color scheme holds all the named color parameters for a SparkTheme highly inspired by Material 3 ColorScheme.

SparkFontFamily

@Immutable

class SparkFontFamily(useSparkTokensHighlighter: Boolean, fontFamily: FontFamily)

Utility class to handle the change of font family for the SparkTheme.

SparkShapes

@Immutable

data class SparkShapes(val none: CornerBasedShape = RoundedCornerShape(0.dp), val extraSmall: CornerBasedShape = RoundedCornerShape(4.0.dp), val small: CornerBasedShape = RoundedCornerShape(8.0.dp), val medium: CornerBasedShape = RoundedCornerShape(12.0.dp), val large: CornerBasedShape = RoundedCornerShape(16.0.dp), val extraLarge: CornerBasedShape = RoundedCornerShape(28.0.dp), val full: CornerBasedShape = CircleShape)

Components are grouped into shape categories based on their size. These categories provide a way to change multiple component values at once, by changing the category’s values. SparkShapes categories include:

SparkTypography

@Immutable

data class SparkTypography(val display1: TextStyle, val display2: TextStyle, val display3: TextStyle, val headline1: TextStyle, val headline2: TextStyle, val subhead: TextStyle, val body1: TextStyle, val body2: TextStyle, val caption: TextStyle, val small: TextStyle, val callout: TextStyle)

Properties

dim1

@get:Composable

val Color.dim1: Color

Extension property to get a Color with dim1(a medium emphasis to text) applied

dim2

@get:Composable

val Color.dim2: Color

Extension property to get a Color with dim2(a medium emphasis to icons) applied

dim3

@get:Composable

val Color.dim3: Color

Extension property to get a Color with dim3(disabled emphasis to all components) applied

dim4

@get:Composable

val Color.dim4: Color

Extension property to get a Color with dim4(low element) applied

dim5

@get:Composable

val Color.dim5: Color

Extension property to get a Color with dim5(pressed/ripple visual but should not be used on Android) applied

disabled

@get:Composable

val Color.disabled: Color

Extension property to get a Color with dim3(disabled element) applied composite over SparkTheme.colors.surface to prevent the color being transparent

DisabledAlpha

const val DisabledAlpha: Float = 0.38f

highlight

val TextStyle.highlight: TextStyle

Extension property to get a TextStyle with FontWeight.Bold applied

LocalWindowSizeClass

val LocalWindowSizeClass: ProvidableCompositionLocal<WindowSizeClass>

transparent

@get:Composable

val Color.transparent: Color

Extension property to get a Color that apply an alpha of zero to the color. This is useful when you want to animate fro ma transparent color to a colored one since using Color.Transparent will start with a black background.

Functions

applyTonalElevation

fun SparkColors.applyTonalElevation(backgroundColor: Color, elevation: Dp): Color

Returns the new background Color to use, representing the original background color with an overlay corresponding to elevation applied. The overlay will only be applied to ColorScheme.surface.

asMaterial3Colors

fun SparkColors.asMaterial3Colors(): ColorScheme

asMaterial3Shapes

fun SparkShapes.asMaterial3Shapes(): Shapes

asMaterial3Typography

fun SparkTypography.asMaterial3Typography(): Typography

bodyWidth

fun Modifier.bodyWidth(): Modifier

Support wide screen by making the content width max 840dp, centered horizontally.

contentColorFor

@Composable

@ReadOnlyComposable

fun contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a ButtonFilled typically uses main for its background, and onMain for the color of its content (usually text or iconography).

contentColorFor

fun SparkColors.contentColorFor(backgroundColor: Color): Color

darkSparkColors

fun darkSparkColors(accent: Color = Plum200, onAccent: Color = NightShade900, accentContainer: Color = Plum700, onAccentContainer: Color = Color.White, accentVariant: Color = Plum300, onAccentVariant: Color = NightShade900, basic: Color = Blueberry100, onBasic: Color = NightShade900, basicContainer: Color = Blueberry800, onBasicContainer: Color = Blueberry50, main: Color = Clementin400, onMain: Color = NightShade900, mainContainer: Color = Clementin700, onMainContainer: Color = Clementin50, mainVariant: Color = Clementin300, onMainVariant: Color = NightShade900, support: Color = Blueberry100, onSupport: Color = Blueberry900, supportContainer: Color = Blueberry800, onSupportContainer: Color = Blueberry50, supportVariant: Color = Blueberry50, onSupportVariant: Color = Blueberry900, success: Color = Avocado400, onSuccess: Color = NightShade900, successContainer: Color = Avocado800, onSuccessContainer: Color = Avocado50, alert: Color = Banana400, onAlert: Color = NightShade900, alertContainer: Color = Banana800, onAlertContainer: Color = Banana50, error: Color = Cherry400, onError: Color = NightShade900, errorContainer: Color = Cherry800, onErrorContainer: Color = Cherry50, info: Color = Blueberry200, onInfo: Color = NightShade900, infoContainer: Color = Blueberry800, onInfoContainer: Color = Blueberry50, neutral: Color = NightShade300, onNeutral: Color = NightShade900, neutralContainer: Color = NightShade800, onNeutralContainer: Color = NightShade50, background: Color = Blueberry900, onBackground: Color = Color.White, backgroundVariant: Color = NightShade900, onBackgroundVariant: Color = Color.White, surface: Color = Blueberry900, onSurface: Color = Color.White, surfaceInverse: Color = NightShade50, onSurfaceInverse: Color = NightShade700, surfaceTint: Color = Clementin400, outline: Color = NightShade600, outlineHigh: Color = NightShade50, scrim: Color = Color.Black, dimContent1: Float = 0.72f, dimContent2: Float = 0.56f, dimContent3: Float = 0.4f, dimContent4: Float = 0.16f, dimContent5: Float = 0.08f): SparkColors

debugColors

fun debugColors(debugColor: Color = Color.Magenta, onDebugColor: Color = Color.Green): SparkColors

A SparkColors implementation which sets all colors to debugColor to help highlighting the usage of SparkTheme.colors to more easily detect where they're not used.

EmphasizeDim1

@Composable

fun EmphasizeDim1(content: @Composable () -> Unit)

Medium emphasis for text.

EmphasizeDim2

@Composable

fun EmphasizeDim2(content: @Composable () -> Unit)

Medium emphasis for icons.

EmphasizeDim3

@Composable

fun EmphasizeDim3(content: @Composable () -> Unit)

Medium emphasis.

EmphasizeDim4

@Composable

fun EmphasizeDim4(content: @Composable () -> Unit)

To represent low elements.

EmphasizeDim5

@Composable

fun EmphasizeDim5(content: @Composable () -> Unit)

Used for press and ripples

EmphasizeDisable

@Composable

fun EmphasizeDisable(content: @Composable () -> Unit)

This function is used to set the current value of LocalContentColor to onSurface with a disabled alpha. Any Text, Icons, other components included in this component's content will be styled with this a content color alpha that apply a disabled emphasis which is close to Gray or Light Gray.

EmphasizeHigh

@Composable

fun EmphasizeHigh(content: @Composable () -> Unit)

This function is used to set the current value of LocalContentColor to onSurface. Any Text, Icons, other components included.

EmphasizeMedium

@Composable

fun EmphasizeMedium(content: @Composable () -> Unit)

This function is used to set the current value of LocalContentColor to onSurfaceVariant. Any Text, Icons, other components included in this component's content will be styled with this a content color alpha that apply a medium emphasis which is close to Dark Gray.

lightSparkColors

fun lightSparkColors(accent: Color = Plum500, onAccent: Color = Color.White, accentContainer: Color = Plum100, onAccentContainer: Color = Plum800, accentVariant: Color = Plum700, onAccentVariant: Color = Color.White, basic: Color = Blueberry800, onBasic: Color = Color.White, basicContainer: Color = Blueberry100, onBasicContainer: Color = Blueberry900, main: Color = Clementin500, onMain: Color = Color.White, mainContainer: Color = Clementin100, onMainContainer: Color = Clementin700, mainVariant: Color = Clementin600, onMainVariant: Color = Color.White, support: Color = Blueberry800, onSupport: Color = Color.White, supportContainer: Color = Blueberry100, onSupportContainer: Color = Blueberry900, supportVariant: Color = Blueberry700, onSupportVariant: Color = Color.White, success: Color = Avocado600, onSuccess: Color = Color.White, successContainer: Color = Avocado100, onSuccessContainer: Color = Avocado700, alert: Color = Banana500, onAlert: Color = NightShade900, alertContainer: Color = Banana100, onAlertContainer: Color = Banana700, error: Color = Cherry500, onError: Color = Color.White, errorContainer: Color = Cherry100, onErrorContainer: Color = Cherry700, info: Color = Blueberry500, onInfo: Color = Color.White, infoContainer: Color = Blueberry200, onInfoContainer: Color = Blueberry700, neutral: Color = NightShade600, onNeutral: Color = Color.White, neutralContainer: Color = NightShade100, onNeutralContainer: Color = NightShade700, background: Color = Color.White, onBackground: Color = Blueberry900, backgroundVariant: Color = Blueberry50, onBackgroundVariant: Color = Blueberry900, surface: Color = Color.White, onSurface: Color = Blueberry900, surfaceInverse: Color = NightShade800, onSurfaceInverse: Color = Color.White, outline: Color = NightShade400, outlineHigh: Color = NightShade900, scrim: Color = Color.Black, dimContent1: Float = 0.72f, dimContent2: Float = 0.56f, dimContent3: Float = 0.4f, dimContent4: Float = 0.16f, dimContent5: Float = 0.08f): SparkColors

ripple

@Stable

fun ripple(color: ColorProducer, bounded: Boolean = true, radius: Dp = Dp.Unspecified): IndicationNodeFactory

@Stable

fun ripple(bounded: Boolean = true, radius: Dp = Dp.Unspecified, color: Color = Color.Unspecified): IndicationNodeFactory

Creates a Ripple using the provided values and values inferred from the theme.

sparkFontFamily

fun sparkFontFamily(fontFamily: FontFamily = nunitoFontFamily, useSparkTokensHighlighter: Boolean = false): SparkFontFamily

Creates a SparkFontFamily with the given fontFamily and useSparkTokensHighlighter.

sparkShapes

fun sparkShapes(none: CornerBasedShape = RoundedCornerShape(0.dp), extraSmall: CornerBasedShape = RoundedCornerShape(4.0.dp), small: CornerBasedShape = RoundedCornerShape(8.0.dp), medium: CornerBasedShape = RoundedCornerShape(12.0.dp), large: CornerBasedShape = RoundedCornerShape(16.0.dp), extraLarge: CornerBasedShape = RoundedCornerShape(28.0.dp), full: CornerBasedShape = CircleShape): SparkShapes

sparkTypography

fun sparkTypography(display1: TextStyle = display1Type, display2: TextStyle = display2Type, display3: TextStyle = display3Type, headline1: TextStyle = headline1Type, headline2: TextStyle = headline2Type, subhead: TextStyle = subheadType, body1: TextStyle = body1Type, body2: TextStyle = body2Type, caption: TextStyle = captionType, small: TextStyle = smallType, callout: TextStyle = calloutType): SparkTypography

surfaceColorAtElevation

fun SparkColors.surfaceColorAtElevation(elevation: Dp): Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.