spark/com.adevinta.spark.tokens

Package-level declarations

Types

ElevationTokens

object ElevationTokens

Contains predefined Dp values for elevation levels.

Layout

object Layout

Order

@Target(allowedTargets = [AnnotationTarget.PROPERTY])

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, 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, ai: Color, onAi: Color, aiContainer: Color, onAiContainer: Color, background: Color, onBackground: Color, backgroundVariant: Color, onBackgroundVariant: Color, surface: Color, onSurface: Color, surfaceInverse: Color, onSurfaceInverse: Color, surfaceDark: Color, onSurfaceDark: 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)

Holds the active font family for the SparkTheme, with optional token-highlighter override.

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, val highlightWeight: FontWeight)

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 CornerBasedShape.highlight: CornerBasedShape

Extension property to get a CornerBasedShape with a bottom start of 0.dp.

@get:ReadOnlyComposable

@get:Composable

val TextStyle.highlight: TextStyle

Extension property to get a TextStyle with SparkTypography.highlightWeight applied

isContrastLevelAvailable

val isContrastLevelAvailable: Boolean

Contrast level is an api available in the UiModeManager starting Android 34

LocalWindowSizeClass

val LocalWindowSizeClass: ProvidableCompositionLocal<WindowSizeClass>

nunitoVariableFontFamily

val nunitoVariableFontFamily: FontFamily

transparent

val Color.transparent: Color

Returns this Color with an alpha of zero. Use this when animating from transparent to a colour, because Color.Transparent is opaque black under the hood and produces a black flash.

Functions

applyTonalElevation

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

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

asMaterial3Colors

fun SparkColors.asMaterial3Colors(): ColorScheme

Converts a SparkColors instance to a Material 3 ColorScheme.

asMaterial3Shapes

fun SparkShapes.asMaterial3Shapes(): Shapes

asMaterial3Typography

fun SparkTypography.asMaterial3Typography(): Typography

asSparkColors

fun ColorScheme.asSparkColors(useDark: Boolean): SparkColors

Converts a Material ColorScheme to a SparkColors instance.

bodyWidth

fun Modifier.bodyWidth(): Modifier

Support wide screen by making the content width max based on window size class, 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

contrastLevel

@FloatRange(from = -1.0, to = 1.0)

fun contrastLevel(context: Context, fallback: () -> Float = { 0f }): Float

Retrieve the contrast level of the device. This value can be used to adjust the colors of the theme.

darkHighContrastSparkColors

fun darkHighContrastSparkColors(accent: Color = LightGray, onAccent: Color = DarkBold, accentContainer: Color = LightMid, onAccentContainer: Color = LightLight, accentVariant: Color = DarkMedium, onAccentVariant: Color = DarkBold, main: Color = LightGray, onMain: Color = DarkBold, mainContainer: Color = LightMid, onMainContainer: Color = LightLight, mainVariant: Color = LightGray, onMainVariant: Color = DarkBold, support: Color = DarkMedium, onSupport: Color = DarkBold, supportContainer: Color = LightMid, onSupportContainer: Color = LightLight, supportVariant: Color = LightGray, onSupportVariant: Color = DarkBold, success: Color = LightGray, onSuccess: Color = DarkBold, successContainer: Color = LightMid, onSuccessContainer: Color = LightLight, alert: Color = LightGray, onAlert: Color = DarkBold, alertContainer: Color = LightMid, onAlertContainer: Color = LightLight, error: Color = LightGray, onError: Color = DarkBold, errorContainer: Color = LightMid, onErrorContainer: Color = LightLight, info: Color = LightGray, onInfo: Color = DarkBold, infoContainer: Color = LightMid, onInfoContainer: Color = LightLight, neutral: Color = LightGray, onNeutral: Color = DarkBold, neutralContainer: Color = LightMid, onNeutralContainer: Color = LightLight, ai: Color = LightGray, onAi: Color = DarkBold, aiContainer: Color = LightMid, onAiContainer: Color = LightLight, background: Color = DarkSemiBold, onBackground: Color = LightLight, backgroundVariant: Color = Color(0xff3c3c3c), onBackgroundVariant: Color = LightLight, surface: Color = DarkSemiBold, onSurface: Color = LightLight, surfaceInverse: Color = LightLight, onSurfaceInverse: Color = DarkBold, surfaceDark: Color = DarkBold, onSurfaceDark: Color = DarkLight, outline: Color = Color(0xffc1c1c1), outlineHigh: Color = LightLight, dimContent1: Float = 0.72f, dimContent2: Float = 0.56f, dimContent3: Float = 0.4f, dimContent4: Float = 0.16f, dimContent5: Float = 0.08f): SparkColors

darkSparkColors

fun darkSparkColors(accent: Color = Plum200, onAccent: Color = Plum900, accentContainer: Color = Plum700, onAccentContainer: Color = Plum50, accentVariant: Color = Plum300, onAccentVariant: Color = Plum900, main: Color = Clementin400, onMain: Color = Clementin900, mainContainer: Color = Clementin700, onMainContainer: Color = Clementin50, mainVariant: Color = Clementin300, onMainVariant: Color = Clementin900, support: Color = Blueberry200, onSupport: Color = Blueberry900, supportContainer: Color = Blueberry800, onSupportContainer: Color = Blueberry50, supportVariant: Color = Blueberry100, onSupportVariant: Color = Blueberry900, success: Color = Avocado300, onSuccess: Color = Avocado900, successContainer: Color = Avocado700, onSuccessContainer: Color = Avocado50, alert: Color = Banana300, onAlert: Color = Banana900, alertContainer: Color = Banana800, onAlertContainer: Color = Banana50, error: Color = Cherry300, onError: Color = Cherry900, errorContainer: Color = Cherry700, onErrorContainer: Color = Cherry50, info: Color = Blueberry300, onInfo: Color = Blueberry900, infoContainer: Color = Blueberry700, onInfoContainer: Color = Blueberry50, neutral: Color = NightShade300, onNeutral: Color = NightShade900, neutralContainer: Color = NightShade700, onNeutralContainer: Color = NightShade50, ai: Color = Blueberry300, onAi: Color = Blueberry900, aiContainer: Color = Blueberry700, onAiContainer: Color = Blueberry50, background: Color = NightShade900, onBackground: Color = NightShade50, backgroundVariant: Color = Color.Black, onBackgroundVariant: Color = NightShade50, surface: Color = NightShade900, onSurface: Color = NightShade50, surfaceInverse: Color = NightShade50, onSurfaceInverse: Color = NightShade800, surfaceDark: Color = NightShade800, onSurfaceDark: Color = Color.White, surfaceTint: Color = Color.White, outline: Color = NightShade500, outlineHigh: Color = NightShade100, 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)

Sets LocalContentColor at dim5 alpha. Do not use on Android; the Material Ripple handles press states already.

EmphasizeDisable

@Composable

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

Sets LocalContentColor to SparkColors.onSurface at dim3 alpha (disabled emphasis, close to grey).

EmphasizeHigh

@Composable

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

Sets LocalContentColor to SparkColors.onSurface, the full-emphasis colour. This is the default emphasis for the whole theme.

EmphasizeMedium

@Composable

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

Sets LocalContentColor to SparkColors.onSurface at dim1 alpha (medium emphasis, close to dark grey).

lightHighContrastSparkColors

fun lightHighContrastSparkColors(accent: Color = DarkRegular, onAccent: Color = DarkLight, accentContainer: Color = DarkMedium, onAccentContainer: Color = DarkBold, accentVariant: Color = DarkMedium, onAccentVariant: Color = DarkLight, main: Color = DarkRegular, onMain: Color = DarkLight, mainContainer: Color = DarkMedium, onMainContainer: Color = DarkBold, mainVariant: Color = DarkRegular, onMainVariant: Color = DarkLight, support: Color = DarkRegular, onSupport: Color = DarkLight, supportContainer: Color = DarkMedium, onSupportContainer: Color = DarkBold, supportVariant: Color = DarkRegular, onSupportVariant: Color = DarkLight, success: Color = DarkRegular, onSuccess: Color = DarkLight, successContainer: Color = DarkMedium, onSuccessContainer: Color = DarkBold, alert: Color = DarkRegular, onAlert: Color = DarkLight, alertContainer: Color = DarkMedium, onAlertContainer: Color = DarkBold, error: Color = DarkRegular, onError: Color = DarkLight, errorContainer: Color = DarkMedium, onErrorContainer: Color = DarkBold, info: Color = DarkRegular, onInfo: Color = DarkLight, infoContainer: Color = DarkMedium, onInfoContainer: Color = DarkBold, neutral: Color = DarkRegular, onNeutral: Color = DarkLight, neutralContainer: Color = DarkMedium, onNeutralContainer: Color = DarkBold, ai: Color = DarkRegular, onAi: Color = DarkLight, aiContainer: Color = DarkMedium, onAiContainer: Color = DarkBold, background: Color = DarkLight, onBackground: Color = DarkBold, backgroundVariant: Color = DarkMedium, onBackgroundVariant: Color = DarkBold, surface: Color = DarkLight, onSurface: Color = DarkBold, surfaceInverse: Color = DarkBold, onSurfaceInverse: Color = DarkLight, surfaceDark: Color = DarkBold, onSurfaceDark: Color = DarkLight, outline: Color = DarkMid, outlineHigh: Color = Color.Black, 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

lightSparkColors

fun lightSparkColors(accent: Color = Plum500, onAccent: Color = Color.White, accentContainer: Color = Plum100, onAccentContainer: Color = Plum800, accentVariant: Color = Plum700, onAccentVariant: Color = Color.White, 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 = Avocado700, onSuccess: Color = Color.White, successContainer: Color = Avocado100, onSuccessContainer: Color = Avocado700, alert: Color = Banana500, onAlert: Color = NightShade900, alertContainer: Color = Banana100, onAlertContainer: Color = Banana800, error: Color = Cherry600, onError: Color = Color.White, errorContainer: Color = Cherry100, onErrorContainer: Color = Cherry700, info: Color = Blueberry700, onInfo: Color = Color.White, infoContainer: Color = Blueberry200, onInfoContainer: Color = Blueberry700, neutral: Color = NightShade700, onNeutral: Color = Color.White, neutralContainer: Color = NightShade100, onNeutralContainer: Color = NightShade700, ai: Color = Blueberry700, onAi: Color = Color.White, aiContainer: Color = Blueberry200, onAiContainer: Color = Blueberry700, 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, surfaceDark: Color = NightShade800, onSurfaceDark: 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 = nunitoVariableFontFamily, 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, highlightWeight: FontWeight = FontWeight.Bold): SparkTypography

surfaceColorAtElevation

fun SparkColors.surfaceColorAtElevation(elevation: Dp): Color

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