Number System 설계 및 구현

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt

@@ -0,0 +1,65 @@
+package com.team.prezel.core.designsystem.foundation.number
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.preview.PreviewScaffold
+import com.team.prezel.core.designsystem.preview.SectionTitle
+import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.TokenList
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+import kotlinx.collections.immutable.persistentListOf
+
+object PrezelRadius {
+    val V2 = 2.dp
+    val V4 = 4.dp
+    val V6 = 6.dp
+    val V8 = 8.dp
+    val V12 = 12.dp
+    val V16 = 16.dp
+    val V1000 = 1000.dp
+}
+
+@ThemePreview
+@Composable
+private fun RadiusTokensPreview() {
+    PrezelTheme {
+        PreviewScaffold { RadiusSection() }
+    }
+}
+
+@Composable
+private fun RadiusSection() {
+    SectionTitle(title = "Radius")
+    TokenList(
+        items = persistentListOf(
+            "V2" to PrezelRadius.V2,
+            "V4" to PrezelRadius.V4,
+            "V6" to PrezelRadius.V6,
+            "V8" to PrezelRadius.V8,
+            "V12" to PrezelRadius.V12,
+            "V16" to PrezelRadius.V16,
+            "V1000" to PrezelRadius.V1000,
+        ),
+        preview = { radius ->
+            val shape = RoundedCornerShape(radius)
+            Box(
+                modifier = Modifier
+                    .size(40.dp)
+                    .clip(shape)
+                    .background(PrezelTheme.colors.bgLarge)
+                    .border(
+                        width = PrezelStroke.V1,
+                        color = PrezelTheme.colors.borderRegular,
+                        shape = shape,
+                    ),
+            )
+        },
+    )
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt

@@ -0,0 +1,77 @@
+package com.team.prezel.core.designsystem.foundation.number
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.preview.PreviewScaffold
+import com.team.prezel.core.designsystem.preview.SectionTitle
+import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.TokenRow
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+
+object PrezelShapes {
+    val V2 = RoundedCornerShape(PrezelRadius.V2)
+    val V4 = RoundedCornerShape(PrezelRadius.V4)
+    val V6 = RoundedCornerShape(PrezelRadius.V6)
+    val V8 = RoundedCornerShape(PrezelRadius.V8)
+    val V12 = RoundedCornerShape(PrezelRadius.V12)
+    val V16 = RoundedCornerShape(PrezelRadius.V16)
+    val V1000 = RoundedCornerShape(PrezelRadius.V1000)
+}
+
+@ThemePreview
+@Composable
+private fun ShapesTokensPreview() {
+    PrezelTheme {
+        PreviewScaffold {
+            ShapesSection()
+        }
+    }
+}
+
+@Composable
+private fun ShapesSection() {
+    SectionTitle(title = "Shapes")
+    ShapeList(
+        items = persistentListOf(
+            "V2" to PrezelShapes.V2,
+            "V4" to PrezelShapes.V4,
+            "V6" to PrezelShapes.V6,
+            "V8" to PrezelShapes.V8,
+            "V12" to PrezelShapes.V12,
+            "V16" to PrezelShapes.V16,
+            "V1000" to PrezelShapes.V1000,
+        ),
+    )
+}
+
+@Composable
+private fun ShapeList(items: ImmutableList<Pair<String, RoundedCornerShape>>) {
+    Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
+        items.forEach { (name, shape) ->
+            TokenRow(
+                name = name,
+                valueLabel = "shape",
+                preview = {
+                    Box(
+                        modifier = Modifier
+                            .size(40.dp)
+                            .clip(shape)
+                            .background(PrezelTheme.colors.bgLarge)
+                            .border(PrezelStroke.V1, PrezelTheme.colors.borderRegular, shape),
+                    )
+                },
+            )
+        }
+    }
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt

@@ -0,0 +1,89 @@
+package com.team.prezel.core.designsystem.foundation.number
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.preview.PreviewScaffold
+import com.team.prezel.core.designsystem.preview.SectionTitle
+import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.TokenList
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+import kotlinx.collections.immutable.persistentListOf
+
+object PrezelSpacing {
+    val V0 = 0.dp
+    val V2 = 2.dp
+    val V4 = 4.dp
+    val V6 = 6.dp
+    val V8 = 8.dp
+    val V10 = 10.dp
+    val V12 = 12.dp
+    val V14 = 14.dp
+    val V16 = 16.dp
+    val V20 = 20.dp
+    val V24 = 24.dp
+    val V28 = 28.dp
+    val V32 = 32.dp
+    val V36 = 36.dp
+    val V40 = 40.dp
+    val V48 = 48.dp
+    val V56 = 56.dp
+    val V64 = 64.dp
+    val V72 = 72.dp
+    val V80 = 80.dp
+}
+
+@ThemePreview
+@Composable
+private fun SpacingTokensPreview() {
+    PrezelTheme {
+        PreviewScaffold {
+            SpacingSection()
+        }
+    }
+}
+
+@Composable
+private fun SpacingSection() {
+    SectionTitle(title = "Spacing")
+    TokenList(
+        items = persistentListOf(
+            "V0" to PrezelSpacing.V0,
+            "V2" to PrezelSpacing.V2,
+            "V4" to PrezelSpacing.V4,
+            "V6" to PrezelSpacing.V6,
+            "V8" to PrezelSpacing.V8,
+            "V10" to PrezelSpacing.V10,
+            "V12" to PrezelSpacing.V12,
+            "V14" to PrezelSpacing.V14,
+            "V16" to PrezelSpacing.V16,
+            "V20" to PrezelSpacing.V20,
+            "V24" to PrezelSpacing.V24,
+            "V28" to PrezelSpacing.V28,
+            "V32" to PrezelSpacing.V32,
+            "V36" to PrezelSpacing.V36,
+            "V40" to PrezelSpacing.V40,
+            "V48" to PrezelSpacing.V48,
+            "V56" to PrezelSpacing.V56,
+            "V64" to PrezelSpacing.V64,
+            "V72" to PrezelSpacing.V72,
+            "V80" to PrezelSpacing.V80,
+        ),
+        preview = { spacing ->
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Box(
+                    modifier = Modifier
+                        .height(8.dp)
+                        .width(spacing)
+                        .background(PrezelTheme.colors.interactiveRegular),
+                )
+            }
+        },
+    )
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt

@@ -0,0 +1,53 @@
+package com.team.prezel.core.designsystem.foundation.number
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.preview.PreviewScaffold
+import com.team.prezel.core.designsystem.preview.SectionTitle
+import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.TokenList
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+import kotlinx.collections.immutable.persistentListOf
+
+object PrezelStroke {
+    val V1 = 1.dp
+    val V2 = 2.dp
+    val V4 = 4.dp
+}
+
+@ThemePreview
+@Composable
+private fun StrokeTokensPreview() {
+    PrezelTheme {
+        PreviewScaffold {
+            StrokeSection()
+        }
+    }
+}
+
+@Composable
+private fun StrokeSection() {
+    SectionTitle(title = "Stroke")
+    TokenList(
+        items = persistentListOf(
+            "V1" to PrezelStroke.V1,
+            "V2" to PrezelStroke.V2,
+            "V4" to PrezelStroke.V4,
+        ),
+        preview = { stroke ->
+            Box(
+                modifier = Modifier
+                    .size(40.dp)
+                    .border(
+                        width = stroke,
+                        color = PrezelTheme.colors.borderLarge,
+                        shape = PrezelShapes.V8,
+                    ),
+            )
+        },
+    )
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt

@@ -0,0 +1,96 @@
+package com.team.prezel.core.designsystem.preview
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+import kotlinx.collections.immutable.ImmutableList
+
+@Composable
+internal fun PreviewScaffold(content: @Composable () -> Unit) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(PrezelTheme.colors.bgRegular)
+            .verticalScroll(rememberScrollState())
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        content()
+    }
+}
+
+@Composable
+internal fun SectionTitle(title: String) {
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        Text(text = title, style = PrezelTheme.typography.title2Bold, color = PrezelTheme.colors.textLarge)
+        HorizontalDivider(color = PrezelTheme.colors.borderRegular)
+    }
+}
+
+@Composable
+internal fun TokenList(
+    items: ImmutableList<Pair<String, Dp>>,
+    preview: @Composable (Dp) -> Unit,
+) {
+    Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
+        items.forEach { (name, value) ->
+            TokenRow(
+                name = name,
+                valueLabel = "${value.value}dp",
+                preview = { preview(value) },
+            )
+        }
+    }
+}
+
+@Composable
+internal fun TokenRow(
+    name: String,
+    valueLabel: String,
+    preview: @Composable () -> Unit,
+) {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Text(
+            text = name,
+            style = PrezelTheme.typography.body3Medium,
+            color = PrezelTheme.colors.textMedium,
+            modifier = Modifier.width(48.dp),
+        )
+        Text(
+            text = valueLabel,
+            style = PrezelTheme.typography.body3Regular,
+            color = PrezelTheme.colors.textSmall,
+            modifier = Modifier.width(64.dp),
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Box(
+            modifier = Modifier
+                .background(Color.Transparent)
+                .padding(4.dp),
+        ) {
+            preview()
+        }
+    }
+}