Theming

In order to display any of the UI components, you must first set up the AnsaTheme, which allows you to configure colors, typography, and shapes of AnsaUI.

Colors

There are currently two colors that can specified - your primary and secondary brand colors. These colors will be uses throughout Ansa provided UI.

let brandColors = BrandColors(
  primary: .blue,
  secondary: .orange
)

Typography

Below is an exhaustive list of customizable fonts

public struct AnsaFonts {
    public var title: TitleFonts = TitleFonts()
    public var body: BodyFonts = BodyFonts()
    public var subhead: Font = Font.medium(size: 14)
    public var footnote: Font = Font.medium(size: 13)
}

public struct TitleFonts {
    public var large: Font = Font.bold(size: 48)
    public var medium: Font = Font.semibold(size: 20)
    public var smallSemiBold: Font = Font.semibold(size: 18)
    public var smallMedium: Font = Font.medium(size: 18)
    public var mini: Font = Font.medium(size: 14)
}

public struct BodyFonts {
    public var bold: Font = Font.bold(size: 16)
    public var semibold: Font = Font.semibold(size: 16)
    public var medium: Font = Font.medium(size: 16)
}

Setting the UI Theme

Putting it all together, use the AnsaTheme hook to set your customized theme.

AnsaTheme.set(
  brandColors: BrandColors(
    primary: .green,
    secondary: .blue
  ),
  textColors: BrandTextColors(
    primary: .black,
    secondary: .red
  ),
  shapes: BrandShapes(
    buttonCornerRadius: 4
  ),
  fonts: fonts
)