From b3f90558e63713c4d048164eb9289073f5a4a9eb Mon Sep 17 00:00:00 2001 From: Roy-wonji <75601594+Roy-wonji@users.noreply.github.com> Date: Tue, 19 May 2026 14:18:18 +0000 Subject: [PATCH] =?UTF-8?q?chore:=20design-tokens=20=EC=9E=90=EB=8F=99=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit source: SWYP-Find/design-tokens@99a7fa72f3c61cdaa05cb90416965722d48a7ca7 --- .../app/ui/theme/tokens/BrandColorTokens.kt | 25 ++--- .../ui/theme/tokens/ComponentColorTokens.kt | 93 ++++++++++++++----- .../ui/theme/tokens/ComponentNumberTokens.kt | 74 ++++++++++++++- .../picke/app/ui/theme/tokens/RadiusTokens.kt | 3 +- .../ui/theme/tokens/SemanticColorTokens.kt | 67 +++++++------ .../app/ui/theme/tokens/SpacingTokens.kt | 5 +- 6 files changed, 205 insertions(+), 62 deletions(-) diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/BrandColorTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/BrandColorTokens.kt index 697052a..1a2672a 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/BrandColorTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/BrandColorTokens.kt @@ -14,7 +14,6 @@ object BrandColorTokens { val primary700: Color = Color(0xFF71372A) val primary800: Color = Color(0xFF653226) val primary900: Color = Color(0xFF4E2A21) - val primaryAlpha8: Color = Color(0xFF893825) val secondary50: Color = Color(0xFFFCF8F1) val secondary100: Color = Color(0xFFF9F1E3) val secondary200: Color = Color(0xFFF3E3C7) @@ -35,14 +34,18 @@ object BrandColorTokens { val beige700: Color = Color(0xFFDAD1BF) val beige800: Color = Color(0xFFCEC1A8) val beige900: Color = Color(0xFFB7A88B) - val neutral50: Color = Color(0xFFEBEBEB) - val neutral100: Color = Color(0xFFD7D7D7) - val neutral200: Color = Color(0xFFB0AFAE) - val neutral300: Color = Color(0xFF888786) - val neutral400: Color = Color(0xFF615F5D) - val neutral500: Color = Color(0xFF393735) - val neutral600: Color = Color(0xFF2B2A28) - val neutral700: Color = Color(0xFF222120) - val neutral800: Color = Color(0xFF1A1918) - val neutral900: Color = Color(0xFF131212) + val gray50: Color = Color(0xFFEBEBEB) + val gray100: Color = Color(0xFFD7D7D7) + val gray200: Color = Color(0xFFB0AFAE) + val gray300: Color = Color(0xFF888786) + val gray400: Color = Color(0xFF615F5D) + val gray500: Color = Color(0xFF393735) + val gray600: Color = Color(0xFF2B2A28) + val gray700: Color = Color(0xFF222120) + val gray800: Color = Color(0xFF1A1918) + val gray900: Color = Color(0xFF131212) + val errorDefault: Color = Color(0xFFC92D33) + val errorAlpha: Color = Color(0x66C92D33) + val warningDefault: Color = Color(0xFFFFB400) + val warningSlpha: Color = Color(0x66FFB400) } diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentColorTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentColorTokens.kt index 0d28e04..975e6e6 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentColorTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentColorTokens.kt @@ -4,29 +4,80 @@ package com.picke.app.ui.theme.tokens import androidx.compose.ui.graphics.Color object ComponentColorTokens { - val bedgeFilledBackgroundDefault: Color = Color(0xFFEFEAE0) - val bedgeFilledBackgroundInverse: Color = Color(0xFF893825) - val bedgeFilledTextDefault: Color = Color(0xFF893825) - val bedgeFilledTextInverse: Color = Color(0xFFFEFEFD) - val bedgeOutlineText: Color = Color(0xFF893825) - val bedgeOutlineBackround: Color = Color(0xFFFEFEFD) - val bedgeOutlineBorder: Color = Color(0xFFE7D7D3) - val inputBorderDefault: Color = Color(0xFFEFEAE0) - val inputBorderActive: Color = Color(0xFFDAD1BF) - val inputBorderError: Color = Color(0xFFC92D33) - val inputSurfaceDefault: Color = Color(0xFFFEFEFD) - val inputSurfaceDisabled: Color = Color(0xFFF9F7F2) - val inputTextDefault: Color = Color(0xFF888786) - val inputTextActive: Color = Color(0xFF393735) - val inputTextError: Color = Color(0xFFC92D33) + val avatarBackround: Color = Color(0xFFEFEAE0) val buttonPrimaryBackgroundDefault: Color = Color(0xFF893825) val buttonPrimaryBackgroundPressed: Color = Color(0xFF653226) val buttonPrimaryBackgroundDisabled: Color = Color(0xFFD0AFA8) val buttonPrimaryTextDefault: Color = Color(0xFFFEFEFD) - val buttonSecondaryBackgroundDefault: Color = Color(0xFFF9F7F2) - val buttonSecondaryBackgroundPressed: Color = Color(0xFFF7F4EE) - val buttonSecondaryBorderDefault: Color = Color(0xFFEFEAE0) - val buttonSecondaryBorderPressed: Color = Color(0xFFE1B974) - val buttonSecondaryTextDefault: Color = Color(0xFF2B2A28) - val buttonSecondaryTextDisabled: Color = Color(0xFF888786) + val buttonIconBackgroundDefault: Color = Color(0xFF893825) + val buttonIconBackgroundDisabled: Color = Color(0xFFD0AFA8) + val buttonSecondaryBackgroundDefault: Color = Color(0xFFFCF8F1) + val buttonSecondaryBackgroundPressed: Color = Color(0xFFEFEAE0) + val buttonSecondaryTextDefault: Color = Color(0xFF893825) + val badgeFilledBackground: Color = Color(0xFFEFEAE0) + val badgeFilledText: Color = Color(0xFF893825) + val badgeOutlineBackground: Color = Color(0xFFFEFEFD) + val badgeOutlineBorder: Color = Color(0xFFE7D7D3) + val badgeOutlineText: Color = Color(0xFF893825) + val badgePrimaryBackground: Color = Color(0xFF893825) + val badgePrimaryText: Color = Color(0xFFFEFEFD) + val badgeCounterBackground: Color = Color(0xFF393735) + val badgeCounterTextActive: Color = Color(0xFFFEFEFD) + val badgeCounterTextDefault: Color = Color(0xFF888786) + val chipBackgroundDefault: Color = Color(0xFF893825) + val chipBackgroundSelected: Color = Color(0xFFF3EBE9) + val chipBorderDefault: Color = Color(0xFF893825) + val chipTextDefault: Color = Color(0xFFFEFEFD) + val chipTextSelected: Color = Color(0xFF893825) + val toggleTrackOn: Color = Color(0xFF893825) + val toggleTrackOff: Color = Color(0xFFD7D7D7) + val toggleThumbDefault: Color = Color(0xFFFEFEFD) + val cardBaseBackgroundDefault: Color = Color(0xFFFEFEFD) + val cardBaseBackgroundBeige: Color = Color(0xFFF7F4EE) + val cardBaseBorderDefault: Color = Color(0xFFEFEAE0) + val cardBaseBorderSelected: Color = Color(0xFFE1B974) + val cardBaseBorderPrimary: Color = Color(0xFF893825) + val cardBaseTextTitle: Color = Color(0xFF393735) + val cardBaseTextDecription: Color = Color(0xFF888786) + val cardBaseTextBody: Color = Color(0xFF615F5D) + val cardBaseTextSecondary: Color = Color(0xFFE1B974) + val cardBaseTextPrimary: Color = Color(0xFF893825) + val cardBaseTextInverse: Color = Color(0xFFFEFEFD) + val cardGrayBackgroundDefault: Color = Color(0xFF222120) + val cardGrayBackgroundPressed: Color = Color(0xFF131212) + val cardGrayBorderSelected: Color = Color(0xFFE1B974) + val cardOpinionBackgroundDefault: Color = Color(0xFFF9F7F2) + val cardOpinionBackgroundPressed: Color = Color(0xFFF7F4EE) + val cardOpinionBorderDefault: Color = Color(0xFFEFEAE0) + val cardOpinionBorderPressed: Color = Color(0xFFE1B974) + val inputTextfieldBackgroundDefault: Color = Color(0xFFFEFEFD) + val inputTextfieldBackgroundDisabled: Color = Color(0xFFF7F4EE) + val inputTextfieldBorderDefault: Color = Color(0xFFEFEAE0) + val inputTextfieldBorderFocus: Color = Color(0xFFDAD1BF) + val inputTextfieldBorderError: Color = Color(0xFFE7D7D3) + val inputTextfieldTextDefault: Color = Color(0xFF888786) + val inputTextfieldTextFocus: Color = Color(0xFF393735) + val inputTextfieldTextError: Color = Color(0xFFC92D33) + val inputTextareaBackgroundDefault: Color = Color(0xFFFEFEFD) + val inputTextareaBackgroundDisabled: Color = Color(0xFFEFEAE0) + val inputTextareaTextDefault: Color = Color(0xFF888786) + val inputTextareaTextFocus: Color = Color(0xFF393735) + val inputTextareaTextError: Color = Color(0xFFC92D33) + val inputTextareaBorderError: Color = Color(0x66C92D33) + val navigationTabTextDefault: Color = Color(0xFF888786) + val navigationTabTextActive: Color = Color(0xFF893825) + val navigationTabBorderDefault: Color = Color(0xFFD7D7D7) + val navigationTabBorderActive: Color = Color(0xFF893825) + val popupBackground: Color = Color(0xFFF7F4EE) + val popupBorder: Color = Color(0xFF893825) + val popupText: Color = Color(0xFF1A1918) + val listItemAgreementBackgroundDefault: Color = Color(0xFFFAFAF9) + val listItemAgreementBorderDefault: Color = Color(0xFFEBEBEB) + val listItemAgreementBorderError: Color = Color(0x66C92D33) + val listItemAgreementTextDefualt: Color = Color(0xFF1A1918) + val listItemAgreementTextError: Color = Color(0xFFC92D33) + val checkboxBackgroundDefault: Color = Color(0xFFF3EBE9) + val checkboxBackgroundSelected: Color = Color(0xFF893825) + val checkboxBorderDefault: Color = Color(0xFFE7D7D3) + val checkboxBorderSelected: Color = Color(0xFF71372A) } diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentNumberTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentNumberTokens.kt index faab565..da33091 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentNumberTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/ComponentNumberTokens.kt @@ -5,5 +5,77 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp object ComponentNumberTokens { - val buttonRadius: Dp = 2.dp + val iconXs: Dp = 12.dp + val iconSm: Dp = 16.dp + val iconMd: Dp = 20.dp + val iconLg: Dp = 24.dp + val avatarSm: Dp = 36.dp + val avatarMd: Dp = 40.dp + val avatarLg: Dp = 68.dp + val controlSm: Dp = 28.dp + val controlMd: Dp = 52.dp + val gap0: Dp = 0.dp + val gap2: Dp = 2.dp + val gap4: Dp = 4.dp + val gap6: Dp = 6.dp + val gap8: Dp = 8.dp + val gap12: Dp = 12.dp + val gap16: Dp = 16.dp + val gap20: Dp = 20.dp + val gap24: Dp = 24.dp + val gap32: Dp = 32.dp + val gap40: Dp = 40.dp + val paddingScreenHorizontal: Dp = 16.dp + val paddingContainer8: Dp = 8.dp + val paddingContainer12: Dp = 12.dp + val paddingContainer16: Dp = 16.dp + val paddingContainer20: Dp = 20.dp + val paddingContainer24: Dp = 24.dp + val paddingContainer32: Dp = 32.dp + val paddingContainer40: Dp = 40.dp + val paddingComponent2: Dp = 2.dp + val paddingComponent4: Dp = 4.dp + val paddingComponent6: Dp = 6.dp + val paddingComponent8: Dp = 8.dp + val paddingComponent12: Dp = 12.dp + val paddingComponent16: Dp = 16.dp + val paddingButtonPrimaryLargeHorizontal: Dp = 12.dp + val paddingButtonPrimaryLargeVertical: Dp = 12.dp + val paddingButtonPrimaryMediumHorizontal: Dp = 12.dp + val paddingButtonPrimaryMediumVertical: Dp = 12.dp + val paddingButtonPrimarySmallHorizontal: Dp = 12.dp + val paddingButtonPrimarySmallVertical: Dp = 12.dp + val paddingChipHorizontal: Dp = 12.dp + val paddingChipVertical: Dp = 6.dp + val paddingBadgeHorizontal: Dp = 6.dp + val paddingBadgeVertical: Dp = 2.dp + val paddingCardBase: Dp = 16.dp + val paddingInputHorizontal: Dp = 8.dp + val paddingNavigationTabHorizontal: Dp = 12.dp + val paddingNavigationTabVertical: Dp = 12.dp + val paddingAppbarHorizontal: Dp = 16.dp + val paddingAppbarVertical: Dp = 12.dp + val borderWidthRegular: Dp = 1.dp + val borderWidthMedium: Dp = 1.5.dp + val borderWidthLarge: Dp = 4.dp + val buttonPrimaryLargeWidth: Dp = 343.dp + val buttonPrimaryLargeHeight: Dp = 52.dp + val buttonPrimaryMediumWidth: Dp = 343.dp + val buttonPrimaryMediumHeight: Dp = 42.dp + val buttonPrimarySmallWidth: Dp = 100.dp + val buttonPrimarySmallHeight: Dp = 42.dp + val buttonIconSize: Dp = 36.dp + val toggleThumbSize: Dp = 14.dp + val toggleWidth: Dp = 32.dp + val toggleHeight: Dp = 18.dp + val cardAvatarMd: Dp = 40.dp + val cardAvatarLg: Dp = 68.dp + val cardAvatarSm: Dp = 36.dp + val inputTextfieldWidth: Dp = 343.dp + val inputTextfieldHeight: Dp = 44.dp + val popupWidth: Dp = 393.dp + val thumbnailWidth: Dp = 196.dp + val thumbnailHeight: Dp = 140.dp + val checkboxWidth: Dp = 24.dp + val checkboxHeight: Dp = 24.dp } diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/RadiusTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/RadiusTokens.kt index f07faab..b9ead87 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/RadiusTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/RadiusTokens.kt @@ -5,7 +5,6 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp object RadiusTokens { - val none: Dp = 0.dp val default: Dp = 2.dp - val full: Dp = 999.dp + val max: Dp = 999.dp } diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/SemanticColorTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/SemanticColorTokens.kt index a72f0c7..e749356 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/SemanticColorTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/SemanticColorTokens.kt @@ -4,32 +4,47 @@ package com.picke.app.ui.theme.tokens import androidx.compose.ui.graphics.Color object SemanticColorTokens { - val textPrimary: Color = Color(0xFF131212) - val textSecondary: Color = Color(0xFF222120) - val textTertiary: Color = Color(0xFF393735) - val textMuted: Color = Color(0xFF888786) - val textInverse: Color = Color(0xFFFEFEFD) - val textBrand: Color = Color(0xFF893825) - val borderDefault: Color = Color(0xFFEFEAE0) - val borderSubtle: Color = Color(0xFFDAD1BF) - val borderDisabled: Color = Color(0xFFF5F1EA) - val borderSelected: Color = Color(0xFFE1B974) - val borderStrong: Color = Color(0xFF893825) - val borderFocus: Color = Color(0xFFDAD1BF) - val borderError: Color = Color(0xFFC92D33) - val surfaceDefault: Color = Color(0xFFFEFEFD) - val surfaceSubtle: Color = Color(0xFFF9F7F2) - val surfaceTertiary: Color = Color(0xFFF7F4EE) - val surfaceSelected: Color = Color(0xFF893825) - val surfaceDisabled: Color = Color(0xFFD0AFA8) + val iconGrayDefault: Color = Color(0xFF131212) + val iconGraySubtle: Color = Color(0xFF888786) + val iconGrayInverse: Color = Color(0xFFFEFEFD) + val iconPrimaryDefault: Color = Color(0xFF893825) val backgroundDefault: Color = Color(0xFFFAFAF9) val backgroundSubtle: Color = Color(0xFFF5F5F4) - val backgroundTertiary: Color = Color(0xFFEBEBEB) - val backgroundBrand: Color = Color(0xFFFBF9F7) - val backgroundInverse: Color = Color(0xFF1A1918) - val backgroundOverlay: Color = Color(0xFF000000) - val statusErrorError: Color = Color(0xFFC92D33) - val statusErrorAlpha: Color = Color(0xFFC92D33) - val statusWarningWarning: Color = Color(0xFFFFB400) - val statusWarningAlpha: Color = Color(0xFFFFB400) + val backgroundSubtler: Color = Color(0xFFEBEBEB) + val backgroundBeige: Color = Color(0xFFFBF9F7) + val textDefault: Color = Color(0xFF1A1918) + val textSubtle: Color = Color(0xFF222120) + val textSubtler: Color = Color(0xFF393735) + val textMuted: Color = Color(0xFF888786) + val textInverse: Color = Color(0xFFFEFEFD) + val textPrimary: Color = Color(0xFF893825) + val textBody: Color = Color(0xFF615F5D) + val textSecondary: Color = Color(0xFFE1B974) + val textError: Color = Color(0xFFC92D33) + val borderBeigeSelected: Color = Color(0xFFDAD1BF) + val borderBeigeDisabled: Color = Color(0xFFF5F1EA) + val borderBeigeFocus: Color = Color(0xFFDAD1BF) + val borderBeigeDefault: Color = Color(0xFFEFEAE0) + val borderSecondarySelected: Color = Color(0xFFE1B974) + val borderPrimaryDefault: Color = Color(0xFF893825) + val borderErrorDefault: Color = Color(0x66C92D33) + val borderWarningDefault: Color = Color(0x66FFB400) + val borderGrayDefault: Color = Color(0xFFD7D7D7) + val borderGraySubtle: Color = Color(0xFFEBEBEB) + val surfaceBeigeDefault: Color = Color(0xFFFEFEFD) + val surfaceBeigeSubtle: Color = Color(0xFFF9F7F2) + val surfaceBeigeStrong: Color = Color(0xFFF7F4EE) + val surfacePrimaryDefault: Color = Color(0xFF893825) + val surfacePrimarySubtle: Color = Color(0xFFF3EBE9) + val actionPrimaryDefault: Color = Color(0xFF893825) + val actionPrimaryPressed: Color = Color(0xFF653226) + val actionPrimaryDisabled: Color = Color(0xFFD0AFA8) + val actionPrimarySubtle: Color = Color(0xFFE7D7D3) + val actionBeigeDefault: Color = Color(0xFFF9F7F2) + val actionBeigeSubtle: Color = Color(0xFFFEFEFD) + val actionBeigePressed: Color = Color(0xFFF7F4EE) + val actionBeigeStrong: Color = Color(0xFFEFEAE0) + val actionSecondaryDefault: Color = Color(0xFFFCF8F1) + val actionGrayDefault: Color = Color(0xFF222120) + val actionGrayPressed: Color = Color(0xFF131212) } diff --git a/app/src/main/java/com/picke/app/ui/theme/tokens/SpacingTokens.kt b/app/src/main/java/com/picke/app/ui/theme/tokens/SpacingTokens.kt index 1e908ec..666011c 100644 --- a/app/src/main/java/com/picke/app/ui/theme/tokens/SpacingTokens.kt +++ b/app/src/main/java/com/picke/app/ui/theme/tokens/SpacingTokens.kt @@ -6,8 +6,8 @@ import androidx.compose.ui.unit.dp object SpacingTokens { val s0: Dp = 0.dp - val s2: Dp = 2.dp val s4: Dp = 4.dp + val s2: Dp = 2.dp val s8: Dp = 8.dp val s16: Dp = 16.dp val s24: Dp = 24.dp @@ -17,4 +17,7 @@ object SpacingTokens { val s64: Dp = 64.dp val s80: Dp = 80.dp val s96: Dp = 96.dp + val s6: Dp = 6.dp + val s12: Dp = 12.dp + val s20: Dp = 20.dp }