diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Button.kt b/core/designsystem/src/main/java/com/moya/funch/component/Button.kt index 3c58807d..01f495d1 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Button.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Button.kt @@ -98,7 +98,9 @@ fun FunchMainButton( modifier = modifier .then( if (enabled) Modifier.neonSign( - color = Lemon500, borderRadius = 16.dp + color = Lemon500.copy(alpha = 0.7f), borderRadius = 16.dp, + blurRadius = 5.dp, + spread = PaddingValues(top = (-4).dp, start = 0.dp, end = 0.dp, bottom = 4.dp), ) else Modifier ) .clip(shape = shape) diff --git a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt index ddcc0eed..a50e13a8 100644 --- a/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt +++ b/core/designsystem/src/main/java/com/moya/funch/component/Chip.kt @@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.sizeIn import androidx.compose.foundation.layout.width import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.CornerBasedShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.LocalContentColor @@ -24,36 +26,45 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable +import androidx.compose.runtime.Stable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.moya.funch.icon.FunchIconAsset +import com.moya.funch.modifier.neonSign +import com.moya.funch.theme.FunchRadiusDefaults import com.moya.funch.theme.FunchTheme import com.moya.funch.theme.Gray400 import com.moya.funch.theme.Gray500 import com.moya.funch.theme.Gray800 import com.moya.funch.theme.Gray900 +import com.moya.funch.theme.Lemon500 import com.moya.funch.theme.White +import com.moya.funch.theme.Yellow500 private val FunchChipContentMinHeight = 21.dp private val FunchMinHeight = 48.dp +val MATCHED_BORDER_BRUSH = Brush.horizontalGradient( + listOf(Lemon500, Yellow500) +) @Composable fun FunchChip( modifier: Modifier = Modifier, + matched: Boolean = false, selected: Boolean, enabled: Boolean, onSelected: () -> Unit = {}, - shape: Shape = FunchTheme.shapes.medium, + shape: CornerBasedShape = FunchTheme.shapes.medium, label: @Composable () -> Unit, leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, @@ -64,9 +75,22 @@ fun FunchChip( Row( modifier = modifier .defaultMinSize(minHeight = FunchMinHeight) - .clip(shape) + .then( + if (matched) { + Modifier + .sizeIn() + .neonSign( + color = Lemon500.copy(alpha = 0.6f), + borderRadius = FunchRadiusDefaults.Medium, + blurRadius = 5.dp, + spread = PaddingValues((-1).dp) + ) + .border(1.dp, MATCHED_BORDER_BRUSH, shape) + } else Modifier + ) .background( color = colors.provideContainerColor(enabled, selected), + shape = shape ) .selectable( selected = selected, @@ -82,7 +106,7 @@ fun FunchChip( labelColor = colors.provideLabelColor(enabled, selected), leadingIcon = leadingIcon, trailingIcon = trailingIcon, - paddingValues = PaddingValues(horizontal = 8.dp, vertical = 4.dp) + paddingValues = PaddingValues(vertical = 4.dp) ) } } @@ -138,7 +162,9 @@ data class PunchChipColors( private val selectedLabelColor: Color = White, private val disabledLabelColor: Color = Gray400, private val disabledSelectedLabelColor: Color = White, + // private val ) { + @Stable fun provideContainerColor(enabled: Boolean, selected: Boolean): Color { return when { enabled && selected -> selectedContainerColor @@ -148,6 +174,7 @@ data class PunchChipColors( } } + @Stable fun provideLabelColor(enabled: Boolean, selected: Boolean): Color { return when { enabled && selected -> selectedLabelColor @@ -158,15 +185,18 @@ data class PunchChipColors( } } +/** + * Preview + * */ @Preview( - name = "FunchChip - Chip with leading and trailing icon", - showBackground = true + name = "FunchChip - Chip with leading and trailing icon", showBackground = true ) @Composable private fun Preview1() { FunchTheme { val isSelected = remember { mutableStateOf(false) } val onSelected = { isSelected.value = !isSelected.value } + FunchChip( selected = isSelected.value, enabled = true, @@ -199,8 +229,7 @@ private fun Preview2() { @Composable @Preview( - name = "FunchChip - Chip with trailing icon", - showBackground = true + name = "FunchChip - Chip with trailing icon", showBackground = true ) private fun Preview3() { FunchTheme { @@ -217,13 +246,12 @@ private fun Preview3() { } @Preview( - name = "FunchChip - non interactive", - showBackground = true + name = "FunchChip - non interactive", showBackground = true ) @Composable private fun Preview4() { FunchTheme { - Column { + Column(Modifier.background(Gray900)) { Spacer(modifier = Modifier.size(12.dp)) FunchChip( @@ -244,6 +272,29 @@ private fun Preview4() { } } +@Preview( + name = "FunchChip - matched", showBackground = true +) +@Composable +private fun Preview5() { + FunchTheme { + Column( + Modifier + .background(Gray900) + .padding(10.dp) + ) { + Column { + FunchChip( + matched = true, + selected = true, + enabled = false, + label = { Text(text = "Text", color = White, style = FunchTheme.typography.b) }, + ) + } + } + } +} + @Composable private fun TrailingIconForPreview() { Row { diff --git a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt index f28dfed1..30e45557 100644 --- a/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt +++ b/core/designsystem/src/main/java/com/moya/funch/modifier/NeonSign.kt @@ -43,7 +43,7 @@ import com.moya.funch.theme.Yellow500 * @return Composable에 그림자 효과를 적용하는 Modifier */ fun Modifier.neonSign( - color: Color = Color.Yellow, + color: Color = Lemon500, borderRadius: Dp = 0.dp, blurRadius: Dp = 8.dp, offsetY: Dp = 0.dp, @@ -106,7 +106,8 @@ private fun ShadowPreview() { .clip(RoundedCornerShape(size = 16.dp)) .background( brush - ), + ) + , contentAlignment = Alignment.Center ) { Text( diff --git a/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt b/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt index e4a89304..67f46a7c 100644 --- a/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt +++ b/core/designsystem/src/main/java/com/moya/funch/theme/Shape.kt @@ -6,6 +6,12 @@ import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.unit.dp +object FunchRadiusDefaults { + val Small = 12.dp + val Medium = 16.dp + val Large = 20.dp +} + object FunchShapeDefaults { val ExtraSmall = RoundedCornerShape(10.dp) val Small = RoundedCornerShape(12.dp)