Spacer

Consistent spacing makes clean and clear interface

Usage

Spacers is good spacing systems are based on simple mathematical principles with increments that are visually. This toolkit gives designers and developers guidelines for effectively applying layout spacing, resulting in a more consistent application of space across our product. You can chek out the guideline for more detail description.

Preview

Token Name	Spacing	Pixels
`spacing1`	4dp	4px
`spacing2`	8dp	8px
`spacing3`	12dp	12px
`spacing4`	16dp	16px
`spacing5`	20dp	20px
`spacing6`	24dp	24px
`spacing7`	28dp	28px
`spacing8`	32dp	32px
`spacing9`	36dp	36px
`spacing10`	40dp	40px
`spacing11`	48dp	48px
`spacing12`	56dp	56px
`spacing13`	64dp	64px
`spacing14`	80dp	80px
`spacing15`	96dp	96px
`spacing16`	112dp	112px
`spacing17`	128dp	128px
`spacing18`	144dp	144px
`spacing19`	160dp	160px
`spacing20`	176dp	176px
`spacing21`	192dp	192px
`spacing22`	208dp	208px
`spacing23`	224dp	228px
`spacing24`	240dp	240px
`spacing25`	256dp	256px
`spacing26`	288dp	288px
`spacing27`	320dp	320px
`spacing28`	384dp	384px

In your composable function, can use value LegionTheme.spacer.{spacer_token} on the colors attribute widget. Example below:

@Composable
fun YourComposable() {
    ...
    Spacer(modifier = Modifier.size(LegionTheme.spacer.spacing1))
    ...
}