diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt new file mode 100644 index 00000000..b042611d --- /dev/null +++ b/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, + ), + ) + }, + ) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt new file mode 100644 index 00000000..15cad583 --- /dev/null +++ b/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>) { + 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), + ) + }, + ) + } + } +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt new file mode 100644 index 00000000..2ec0074b --- /dev/null +++ b/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), + ) + } + }, + ) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt new file mode 100644 index 00000000..d621f446 --- /dev/null +++ b/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, + ), + ) + }, + ) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt new file mode 100644 index 00000000..84848de5 --- /dev/null +++ b/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>, + 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() + } + } +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt index a3c7f1df..bb8adcf8 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt @@ -6,13 +6,9 @@ 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.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -26,6 +22,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.team.prezel.core.designsystem.foundation.color.ColorTokens import com.team.prezel.core.designsystem.foundation.color.PrezelColors +import com.team.prezel.core.designsystem.preview.PreviewScaffold import com.team.prezel.core.designsystem.preview.ThemePreview import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.persistentListOf @@ -109,152 +106,164 @@ internal object PrezelColorScheme { @ThemePreview @Composable -private fun PrezelColorSchemePreview() { +private fun PrezelColorSchemeInteractivePreview() { PrezelTheme { - PrezelColorsPreview() - } -} - -@Composable -@Suppress("LongMethod") -private fun PrezelColorsPreview(colors: PrezelColors = PrezelTheme.colors) { - Column( - modifier = Modifier - .fillMaxSize() - .background(colors.bgRegular) - .verticalScroll(rememberScrollState()) - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(24.dp), - ) { - ColorSection( + PrezelColorsPreviewSection( title = "Interactive", description = "브랜드 색으로 활성화 상태 및 강조가 필요한 요소에 사용하는 색상입니다.", items = persistentListOf( - "XSmall" to colors.interactiveXSmall, - "Small" to colors.interactiveSmall, - "Regular" to colors.interactiveRegular, + "XSmall" to PrezelTheme.colors.interactiveXSmall, + "Small" to PrezelTheme.colors.interactiveSmall, + "Regular" to PrezelTheme.colors.interactiveRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeBackgroundPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Background", description = "콘텐츠의 구조와 계층을 구분하는 색상입니다.", items = persistentListOf( - "Regular" to colors.bgRegular, - "Medium" to colors.bgMedium, - "Large" to colors.bgLarge, - "Scrim" to colors.bgScrim, - "Disabled" to colors.bgDisabled, + "Regular" to PrezelTheme.colors.bgRegular, + "Medium" to PrezelTheme.colors.bgMedium, + "Large" to PrezelTheme.colors.bgLarge, + "Scrim" to PrezelTheme.colors.bgScrim, + "Disabled" to PrezelTheme.colors.bgDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeTextPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Text", description = "정보와 콘텐츠를 명확하게 전달하기 위해 사용하는 색상입니다.", items = persistentListOf( - "Small" to colors.textSmall, - "Regular" to colors.textRegular, - "Medium" to colors.textMedium, - "Large" to colors.textLarge, - "Disabled" to colors.textDisabled, + "Small" to PrezelTheme.colors.textSmall, + "Regular" to PrezelTheme.colors.textRegular, + "Medium" to PrezelTheme.colors.textMedium, + "Large" to PrezelTheme.colors.textLarge, + "Disabled" to PrezelTheme.colors.textDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeIconPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Icon", description = "기능적 액션과 시각적 커뮤니케이션을 돕기 위해 사용하는 색상입니다.", items = persistentListOf( - "Regular" to colors.iconRegular, - "Medium" to colors.iconMedium, - "Disabled" to colors.iconDisabled, + "Regular" to PrezelTheme.colors.iconRegular, + "Medium" to PrezelTheme.colors.iconMedium, + "Disabled" to PrezelTheme.colors.iconDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeBorderPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Border", description = "콘텐츠의 영역과 구조를 구분하는 색상입니다.", items = persistentListOf( - "Small" to colors.borderSmall, - "Regular" to colors.borderRegular, - "Medium" to colors.borderMedium, - "Large" to colors.borderLarge, - "Disabled" to colors.borderDisabled, + "Small" to PrezelTheme.colors.borderSmall, + "Regular" to PrezelTheme.colors.borderRegular, + "Medium" to PrezelTheme.colors.borderMedium, + "Large" to PrezelTheme.colors.borderLarge, + "Disabled" to PrezelTheme.colors.borderDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeFeedbackPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Feedback", description = "성공, 오류, 경고 상황을 명확하게 전달하기 위해 의미별로 정의된 색상입니다.", items = persistentListOf( - "GoodSmall" to colors.feedbackGoodSmall, - "GoodRegular" to colors.feedbackGoodRegular, - "BadSmall" to colors.feedbackBadSmall, - "BadRegular" to colors.feedbackBadRegular, - "WarningSmall" to colors.feedbackWarningSmall, - "WarningRegular" to colors.feedbackWarningRegular, + "GoodSmall" to PrezelTheme.colors.feedbackGoodSmall, + "GoodRegular" to PrezelTheme.colors.feedbackGoodRegular, + "BadSmall" to PrezelTheme.colors.feedbackBadSmall, + "BadRegular" to PrezelTheme.colors.feedbackBadRegular, + "WarningSmall" to PrezelTheme.colors.feedbackWarningSmall, + "WarningRegular" to PrezelTheme.colors.feedbackWarningRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeAccentPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Accent", description = "콘텐츠의 주목성과 인지도를 높이기 위해 버튼, 액션, 강조 요소 등에 사용되는 포인트 색상입니다.", items = persistentListOf( - "PurpleSmall" to colors.accentPurpleSmall, - "PurpleRegular" to colors.accentPurpleRegular, - "MagentaSmall" to colors.accentMagentaSmall, - "MagentaRegular" to colors.accentMagentaRegular, + "PurpleSmall" to PrezelTheme.colors.accentPurpleSmall, + "PurpleRegular" to PrezelTheme.colors.accentPurpleRegular, + "MagentaSmall" to PrezelTheme.colors.accentMagentaSmall, + "MagentaRegular" to PrezelTheme.colors.accentMagentaRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeSolidPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Solid", description = "흰색과 검정색을 제공하여 시각적 대비, 보조, 구분 등에 활용되는 절대값 색상입니다.", items = persistentListOf( - "White" to colors.solidWhite, - "Black" to colors.solidBlack, + "White" to PrezelTheme.colors.solidWhite, + "Black" to PrezelTheme.colors.solidBlack, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) } } @Composable -private fun ColorSection( +private fun PrezelColorsPreviewSection( title: String, description: String, items: ImmutableList>, - dividerColor: Color, - textColor: Color, + colors: PrezelColors = PrezelTheme.colors, ) { - Column( - modifier = Modifier.fillMaxWidth(), - verticalArrangement = Arrangement.spacedBy(10.dp), - ) { - HorizontalDivider(color = dividerColor) + PreviewScaffold { + Column( + modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(10.dp), + ) { + HorizontalDivider(color = colors.borderRegular) - Text(text = title, color = textColor, fontSize = 20.sp, fontWeight = FontWeight.Bold) + Text(text = title, color = colors.textLarge, fontSize = 20.sp, fontWeight = FontWeight.Bold) - Text(text = description, color = textColor.copy(alpha = 0.7f)) + Text(text = description, color = colors.textLarge.copy(alpha = 0.7f)) - HorizontalDivider(color = dividerColor) + HorizontalDivider(color = colors.borderRegular) - items.forEach { (name, color) -> - ColorRow(color = color, name = name, textColor = textColor) + items.forEach { (name, color) -> + ColorRow(color = color, name = name, textColor = colors.textLarge) + } } } } diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt index fe888729..88fdd41f 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt @@ -6,10 +6,18 @@ import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.staticCompositionLocalOf import com.team.prezel.core.designsystem.foundation.color.PrezelColors +import com.team.prezel.core.designsystem.foundation.number.PrezelRadius +import com.team.prezel.core.designsystem.foundation.number.PrezelShapes +import com.team.prezel.core.designsystem.foundation.number.PrezelSpacing +import com.team.prezel.core.designsystem.foundation.number.PrezelStroke import com.team.prezel.core.designsystem.foundation.typography.PrezelTypography private val LocalPrezelColors = staticCompositionLocalOf { error("No PrezelColors provided") } private val LocalPrezelTypography = staticCompositionLocalOf { error("No PrezelTypography provided") } +private val LocalPrezelRadius = staticCompositionLocalOf { error("No PrezelRadius provided") } +private val LocalPrezelShapes = staticCompositionLocalOf { error("No PrezelShapes provided") } +private val LocalPrezelSpacing = staticCompositionLocalOf { error("No PrezelSpacing provided") } +private val LocalPrezelStroke = staticCompositionLocalOf { error("No PrezelStroke provided") } object PrezelTheme { val colors: PrezelColors @@ -21,6 +29,26 @@ object PrezelTheme { @Composable @ReadOnlyComposable get() = LocalPrezelTypography.current + + val radius: PrezelRadius + @Composable + @ReadOnlyComposable + get() = LocalPrezelRadius.current + + val shapes: PrezelShapes + @Composable + @ReadOnlyComposable + get() = LocalPrezelShapes.current + + val spacing: PrezelSpacing + @Composable + @ReadOnlyComposable + get() = LocalPrezelSpacing.current + + val stroke: PrezelStroke + @Composable + @ReadOnlyComposable + get() = LocalPrezelStroke.current } @Composable @@ -34,6 +62,10 @@ fun PrezelTheme( CompositionLocalProvider( LocalPrezelColors provides colorScheme, LocalPrezelTypography provides typographyScheme, + LocalPrezelRadius provides PrezelRadius, + LocalPrezelShapes provides PrezelShapes, + LocalPrezelSpacing provides PrezelSpacing, + LocalPrezelStroke provides PrezelStroke, content = content, ) } diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt index 6beef84e..ecdb535d 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt @@ -5,9 +5,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -18,6 +16,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.isSpecified import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles import com.team.prezel.core.designsystem.foundation.typography.PrezelTypography +import com.team.prezel.core.designsystem.preview.PreviewScaffold import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.persistentListOf @@ -47,60 +46,86 @@ internal object PrezelTypographyScheme { @Preview( showBackground = true, - device = "spec:width=800dp,height=1900dp", + device = "spec:width=800dp,height=600dp", fontScale = 10f, ) @Composable -private fun PrezelTypographySchemePreview() { +private fun PrezelTypographyTitlePreview() { PrezelTheme { - PrezelTypographyPreviewContent() + PrezelTypographyPreviewContent( + title = "Title", + items = persistentListOf( + "Title1 Medium" to PrezelTheme.typography.title1Medium, + "Title1 Bold" to PrezelTheme.typography.title1Bold, + "Title2 Medium" to PrezelTheme.typography.title2Medium, + "Title2 Bold" to PrezelTheme.typography.title2Bold, + ), + ) + } +} + +@Preview( + showBackground = true, + device = "spec:width=800dp,height=1000dp", + fontScale = 10f, +) +@Composable +private fun PrezelTypographyBodyPreview() { + PrezelTheme { + PrezelTypographyPreviewContent( + title = "Body", + items = persistentListOf( + "Body1 Regular" to PrezelTheme.typography.body1Regular, + "Body1 Medium" to PrezelTheme.typography.body1Medium, + "Body1 Bold" to PrezelTheme.typography.body1Bold, + "Body2 Regular" to PrezelTheme.typography.body2Regular, + "Body2 Medium" to PrezelTheme.typography.body2Medium, + "Body2 Bold" to PrezelTheme.typography.body2Bold, + "Body3 Regular" to PrezelTheme.typography.body3Regular, + "Body3 Medium" to PrezelTheme.typography.body3Medium, + "Body3 Bold" to PrezelTheme.typography.body3Bold, + ), + ) + } +} + +@Preview( + showBackground = true, + device = "spec:width=800dp,height=600dp", + fontScale = 10f, +) +@Composable +private fun PrezelTypographyCaptionPreview() { + PrezelTheme { + PrezelTypographyPreviewContent( + title = "Caption", + items = persistentListOf( + "Caption1 Regular" to PrezelTheme.typography.caption1Regular, + "Caption1 Medium" to PrezelTheme.typography.caption1Medium, + "Caption2 Regular" to PrezelTheme.typography.caption2Regular, + "Caption2 Medium" to PrezelTheme.typography.caption2Medium, + ), + ) } } @Composable private fun PrezelTypographyPreviewContent( - typography: PrezelTypography = PrezelTheme.typography, - items: ImmutableList> = persistentListOf( - Triple("Title", "Title1 Medium", typography.title1Medium), - Triple("Title", "Title1 Bold", typography.title1Bold), - Triple("Title", "Title2 Medium", typography.title2Medium), - Triple("Title", "Title2 Bold", typography.title2Bold), - Triple("Body", "Body1 Regular", typography.body1Regular), - Triple("Body", "Body1 Medium", typography.body1Medium), - Triple("Body", "Body1 Bold", typography.body1Bold), - Triple("Body", "Body2 Regular", typography.body2Regular), - Triple("Body", "Body2 Medium", typography.body2Medium), - Triple("Body", "Body2 Bold", typography.body2Bold), - Triple("Body", "Body3 Regular", typography.body3Regular), - Triple("Body", "Body3 Medium", typography.body3Medium), - Triple("Body", "Body3 Bold", typography.body3Bold), - Triple("Caption", "Caption1 Regular", typography.caption1Regular), - Triple("Caption", "Caption1 Medium", typography.caption1Medium), - Triple("Caption", "Caption2 Regular", typography.caption2Regular), - Triple("Caption", "Caption2 Medium", typography.caption2Medium), - ), + title: String, + items: ImmutableList>, ) { - Column( - modifier = Modifier - .fillMaxSize() - .background(PrezelTheme.colors.bgRegular) - .verticalScroll(rememberScrollState()) - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp), - ) { - items - .groupBy { it.first } - .forEach { (group, groupedItems) -> - HorizontalDivider() - Text(text = group, style = typography.title1Bold) - HorizontalDivider() + PreviewScaffold { + Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { + HorizontalDivider() + Text(text = title, style = PrezelTheme.typography.title1Bold) + HorizontalDivider() - Column(verticalArrangement = Arrangement.spacedBy(12.dp)) { - groupedItems.forEach { item -> - TypographyRow(name = item.second, style = item.third) - } + Column(verticalArrangement = Arrangement.spacedBy(12.dp)) { + items.forEach { (name, style) -> + TypographyRow(name = name, style = style) } } + } } }