Theming

In order to display any of the UI components, you must first set up the AnsaTheme.

There are default colors and typography initialized for ease-of-use.

AnsaTheme(
    colors = // override colors or omit,
    typography = // override fonts or omit,
) {
  // use the components or screens
}

Theming is managed just liked you'd expect in Jetpack Compose - through a Theme-root composable mentioned above. Therefore, theming will be familiar as well.

Colors

All colors are managed through BrandColors, which configure background, text, buttons, icons, gradient, etc.

/**
 * A data class that holds the color palette for a brand's theme.
 *
 * @property primary The primary color used in the brand's theme.
 * @property primaryGradient1 The first gradient color used in primary brand gradients.
 * @property primaryGradient2 The second gradient color used in primary brand gradients.
 * @property primaryGradient3 The third gradient color used in primary brand gradients.
 * @property primaryMedium A medium shade of the primary color.
 * @property primaryLight A light shade of the primary color.
 * @property primaryExtraLight An extra light shade of the primary color.
 * @property secondary The secondary color used in the brand's theme.
 */
public data class BrandColors(
    val primary: Color = Color.Unspecified,
    val primaryGradient1: Color = Color.Unspecified,
    val primaryGradient2: Color = Color.Unspecified,
    val primaryGradient3: Color = Color.Unspecified,
    val primaryMedium: Color = Color.Unspecified,
    val primaryLight: Color = Color.Unspecified,
    val primaryExtraLight: Color = Color.Unspecified,
    val secondary: Color = Color.Unspecified,
)

Typography

Similarly, typography is managed through our TypeSystem.

/**
 * The Typography system behind the Ansa components and screens. Updating the [fontFamily] and/or [definitions]
 * here will update the entire SDK UI components accordingly.
 *
 * @param fontFamily The [FontFamily] supporting the [definitions].
 * @param definitions The [AnsaTypography] font definitions. If not provided, the default definitions will be used.
 *
 * Coloring of the various definitions are handled internally based on size of the definition.
 */
public data class TypeSystem(
    val fontFamily: FontFamily = FontFamily.Default,
    val definitions: AnsaTypography? = null,
)

If you want to utlize the Ansa type definitions but use a different Font, simply initalize and provide the FontFamily. However, if you want to setup your own type definition steps (using our naming), provide AnsaTypography as well.

@Immutable
public data class AnsaTypography(
    val titleLarge: TextStyle = TextStyle(),
    val titleMedium: TextStyle = TextStyle(),
    val titleSmallSemiBold: TextStyle = TextStyle(),
    val titleSmallMedium: TextStyle = TextStyle(),
    val bodyBold: TextStyle = TextStyle(),
    val bodySemiBold: TextStyle = TextStyle(),
    val bodyMedium: TextStyle = TextStyle(),
    val subhead: TextStyle = TextStyle(),
    val footnote: TextStyle = TextStyle(),
)