Add default spacing definition in app dimensions

[hoangnguyen92dn]

Why

There is no team-wide agreement on defining consistent spacing for usage, resulting in muddled spacing dimensions for reference and making it difficult to determine the value when it is used.

For example:

    val spacingTiny = 4.dp
    val spacingSmaller = 8.dp
    val spacingSmall = 10.dp
    val spacingMedium = 12.dp
    val spacingNormal = 16.dp
    val spacingLarge = 24.dp
    val spacingHuge = 32.dp

We're adopting a new approach. The medium space is defined as 16.dp, with a spacing step of 4.dp. This simplifies both memorization and reference.

    val spacing2XSmall = 4.dp
    val spacingXSmall = 8.dp
    val spacingSmall = 12.dp
    val spacingMedium = 16.dp
    val spacingLarge = 20.dp
    val spacingXLarge = 24.dp
    val spacing2XLarge = 28.dp
    val spacing3XLarge = 32.dp

---

🙋 Why 4.dp? Following instruction from Material Design document for spacing, padding between UI elements:

• 🎨 Material 3: https://m3.material.io/foundations/layout/understanding-layout/spacing#5893f0f7-ac4a-41fc-a109-00f0daafd82a

• 🎨 Material 2: https://m2.material.io/design/layout/spacing-methods.html

---

🙋 What steps should I take to define a new spacing, such as 10.dp?

To define a new spacing, it's essential to consider where it will be applied within the UI. In this context, defining new spacing would indeed be more meaningful:

    val loginButtonPadding = 10.dp

Who Benefits?

Developers

[luongvo]

💯 across the board

[luongvo]

@hoangnguyen92dn please update your ticket status. Currently, it's in Icebox.