Usage

Colors #

Find all Color values here and use them as shown below.

val textColor = YassirTheme.colors.surfacePrimaryContainer

Icons #

To use the icon the consumer needs to know in which section it is presented. Sections can be the following:

- Commerce
- Communication
- Content
- Finance
- Logos
- Maps
- System

To add an icon from the Commerce Icons Library use this example:

val building: Int = CommerceIcons.Building

To add an icon from the Communication Icons Library use this example:

val camera: Int = CommunicationIcons.Camera

To add an icon from the Content Icons Library use this example:

val addUser: Int = ContentIcons.AddUser

To add an icon from the Finance Icons Library use this example:

val bank: Int = FinanceIcons.Bank

To add an icon from the Logos Icons Library use this example:

val android: Int = LogosIcons.Android

To add an icon from the Maps Icons Library use this example:

val bus: Int = MapsIcons.Bus

To add an icon from the System Icons Library use this example:

val cctivity: Int = SystemIcons.Activity

Illustrations #

To use the illustration the consumer needs to know in which section it is presented. Sections can be the following:

- General
- Mobility
- Express
- Super App
- Financial Services
- Logos
- Flags

To add an illustration from the General Illustrations Library use this example:

val exclamationMark: Int = GeneralIllustrations.ExclamationMark

To add an illustration from the Mobility Illustrations Library use this example:

val carCrossMark: Int = MobilityIllustrations.CarCrossMark

To add an illustration from the Express Illustrations Library use this example:

val book: Int = ExpressIllustrations.Book

To add an illustration from the Super App Illustrations Library use this example:

val packageDelivery: Int = SuperAppIllustrations.PackageDelivery

To add a illustration from the Financial Services Illustrations Library use this example:

val cardExclamationMark: Int = FinancialServicesIllustrations.CardExclamationMark

To add an illustration from the Logos Illustrations Library use this example:

val cardExclamationMark: Int = LogosIllustrations.CardExclamationMark

To add an illustration from the Logos Illustrations Library use this example:

val logoBrandedDefault: Int = LogosIllustrations.LogoBrandedDefault

To add an illustration from the Flags Illustrations Library use this example:

val algeria: Int = FlagsIllustrations.Algeria

To add an animated illustration from General, Financial Services or Mobility illustrations use this example:

val checkmark: Int = GeneralIllustrationsAnimated.Checkmark
val walletMoneyCoins: Int = FinancialServicesIllustrationsAnimated.WalletMoneyCoins
val phoneCarousel: Int = MobilityIllustrationsAnimated.PhoneCarousel

Spacings #

Find all Spacing values here and use them as shown below.

val paddingSize = YassirTheme.spacing.spacing1

Typography #

Find all Typography values here and use them as shown below.

val textStyle = YassirTheme.typography.bodyLargeRegular