From efb5774e6b7c6f3cf42e6d4521af8a23632c558b Mon Sep 17 00:00:00 2001 From: Iino Date: Sun, 31 Dec 2023 14:59:14 +0900 Subject: [PATCH 1/5] define PrimitiveColor --- .../com/example/composeapp/MainActivity.kt | 2 + .../java/com/example/composeapp/NavRouter.kt | 1 + .../composeapp/ui/DigitalAgencyScreen.kt | 13 ++++ .../example/composeapp/ui/PlaygroundScreen.kt | 3 + .../DigitalAgencyColorPalette.kt | 19 +++++ .../DigitalAgencyPrimitiveColor.kt | 77 +++++++++++++++++++ .../digitalagency/DigitalAgencyTheme.kt | 30 ++++++++ .../resources/src/main/res/values/strings.xml | 1 + 8 files changed, 146 insertions(+) create mode 100644 composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyPrimitiveColor.kt create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTheme.kt diff --git a/composeapp/src/main/java/com/example/composeapp/MainActivity.kt b/composeapp/src/main/java/com/example/composeapp/MainActivity.kt index 7bc7011..9242c4c 100644 --- a/composeapp/src/main/java/com/example/composeapp/MainActivity.kt +++ b/composeapp/src/main/java/com/example/composeapp/MainActivity.kt @@ -10,6 +10,7 @@ import androidx.navigation.compose.rememberNavController import com.example.composeapp.ui.datepicker.DatePickerScreen import com.example.composeapp.ui.AnimationScreen import com.example.composeapp.ui.ComponentScreen +import com.example.composeapp.ui.DigitalAgencyScreen import com.example.composeapp.ui.PagerScreen import com.example.composeapp.ui.PlaygroundScreen import com.messi.designsystem.CustomTheme @@ -34,5 +35,6 @@ fun CreateNav(startDestination: String = NavRouter.PlaygroundScreen) { composable(NavRouter.AnimationScreen) { AnimationScreen(navController) } composable(NavRouter.PagerScreen) { PagerScreen(navController) } composable(NavRouter.DatePickerScreen) { DatePickerScreen(navController) } + composable(NavRouter.DigitalAgencyScreen) { DigitalAgencyScreen(navController) } } } diff --git a/composeapp/src/main/java/com/example/composeapp/NavRouter.kt b/composeapp/src/main/java/com/example/composeapp/NavRouter.kt index 2cd50ed..2627d8f 100644 --- a/composeapp/src/main/java/com/example/composeapp/NavRouter.kt +++ b/composeapp/src/main/java/com/example/composeapp/NavRouter.kt @@ -6,4 +6,5 @@ object NavRouter { const val PagerScreen = "PagerScreen" const val AnimationScreen = "AnimationScreen" const val DatePickerScreen = "DatePickerScreen" + const val DigitalAgencyScreen = "DigitalAgencyScreen" } diff --git a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt new file mode 100644 index 0000000..d4bac51 --- /dev/null +++ b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt @@ -0,0 +1,13 @@ +package com.example.composeapp.ui + +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.navigation.NavController +import com.messi.designsystem.digitalagency.DigitalAgencyTheme + +@Composable +fun DigitalAgencyScreen(navController: NavController) { + DigitalAgencyTheme { + Text(text = "りんご", color = DigitalAgencyTheme.colors.body) + } +} diff --git a/composeapp/src/main/java/com/example/composeapp/ui/PlaygroundScreen.kt b/composeapp/src/main/java/com/example/composeapp/ui/PlaygroundScreen.kt index 02b85a2..fd0bd83 100644 --- a/composeapp/src/main/java/com/example/composeapp/ui/PlaygroundScreen.kt +++ b/composeapp/src/main/java/com/example/composeapp/ui/PlaygroundScreen.kt @@ -29,6 +29,9 @@ fun PlaygroundScreen(navController: NavController) { MessiElevatedButton(text = stringResource(id = R.string.compose_date_picker)) { navController.navigate(NavRouter.DatePickerScreen) } + MessiElevatedButton(text = stringResource(id = R.string.compose_digital_agency)) { + navController.navigate(NavRouter.DigitalAgencyScreen) + } } } } diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt new file mode 100644 index 0000000..6dd54a4 --- /dev/null +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt @@ -0,0 +1,19 @@ +package com.messi.designsystem.digitalagency + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color + +@Immutable +data class DigitalAgencyColorPalette( + val primary: Color, + val body: Color, +) + +val lightDigitalAgencyColorPalette = DigitalAgencyColorPalette( + primary = DigitalAgencyPrimitiveColor.white, + body = DigitalAgencyPrimitiveColor.Sumi900, +) +val darkDigitalAgencyColorPalette = DigitalAgencyColorPalette( + primary = Color(0xFF1A1A1C), + body = DigitalAgencyPrimitiveColor.white, +) diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyPrimitiveColor.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyPrimitiveColor.kt new file mode 100644 index 0000000..d3fc492 --- /dev/null +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyPrimitiveColor.kt @@ -0,0 +1,77 @@ +package com.messi.designsystem.digitalagency + +import androidx.compose.ui.graphics.Color + +object DigitalAgencyPrimitiveColor { + internal val white = Color(0xFFFFFFFF) + + internal val Sea1200 = Color(0xFF00004F) + internal val Sea1100 = Color(0xFF000060) + internal val Sea1000 = Color(0xFF000071) + internal val Sea900 = Color(0xFF000082) + internal val Sea800 = Color(0xFF0017C1) + internal val Sea700 = Color(0xFF0031D8) + internal val Sea600 = Color(0xFF1A3EE8) + internal val Sea500 = Color(0xFF264AF4) + internal val Sea400 = Color(0xFF4979F5) + internal val Sea300 = Color(0xFF7096F8) + internal val Sea200 = Color(0xFF9DB7F9) + internal val Sea100 = Color(0xFFC5D7FB) + internal val Sea50 = Color(0xFFE8F1FE) + + internal val Sumi1200 = Color(0xFF000000) + internal val Sumi1100 = Color(0xFF080808) + internal val Sumi1000 = Color(0xFF111111) + internal val Sumi900 = Color(0xFF1A1A1C) + internal val Sumi800 = Color(0xFF414143) + internal val Sumi700 = Color(0xFF626264) + internal val Sumi600 = Color(0xFF757578) + internal val Sumi500 = Color(0xFF949497) + internal val Sumi400 = Color(0xFFB4B4B7) + internal val Sumi300 = Color(0xFFD8D8DB) + internal val Sumi200 = Color(0xFFE8E8EB) + internal val Sumi100 = Color(0xFFF1F1F4) + internal val Sumi50 = Color(0xFFF8F8FB) + + internal val Forest1200 = Color(0xFF032213) + internal val Forest1100 = Color(0xFF08351F) + internal val Forest1000 = Color(0xFF0C472A) + internal val Forest900 = Color(0xFF115A36) + internal val Forest800 = Color(0xFF197A4B) + internal val Forest700 = Color(0xFF1D8B56) + internal val Forest600 = Color(0xFF259D63) + internal val Forest500 = Color(0xFF2CAC6E) + internal val Forest400 = Color(0xFF51B883) + internal val Forest300 = Color(0xFF71C598) + internal val Forest200 = Color(0xFF9BD4B5) + internal val Forest100 = Color(0xFFC2E5D1) + internal val Forest50 = Color(0xFFE6F5EC) + + internal val Wood1200 = Color(0xFF662E00) + internal val Wood1100 = Color(0xFF833B00) + internal val Wood1000 = Color(0xFF9C4600) + internal val Wood900 = Color(0xFFB65200) + internal val Wood800 = Color(0xFFC16800) + internal val Wood700 = Color(0xFFC87504) + internal val Wood600 = Color(0xFFCD820A) + internal val Wood500 = Color(0xFFD18D0F) + internal val Wood400 = Color(0xFFD69C2B) + internal val Wood300 = Color(0xFFDCAC4D) + internal val Wood200 = Color(0xFFE1C383) + internal val Wood100 = Color(0xFFE7D8B9) + internal val Wood50 = Color(0xFFF3EEE5) + + internal val Sun1200 = Color(0xFF640101) + internal val Sun1100 = Color(0xFF890101) + internal val Sun1000 = Color(0xFFAF0000) + internal val Sun900 = Color(0xFFD50000) + internal val Sun800 = Color(0xFFEC0000) + internal val Sun700 = Color(0xFFFA1606) + internal val Sun600 = Color(0xFFFF220D) + internal val Sun500 = Color(0xFFFF4B36) + internal val Sun400 = Color(0xFFFF5838) + internal val Sun300 = Color(0xFFFF7B5C) + internal val Sun200 = Color(0xFFFFA28B) + internal val Sun100 = Color(0xFFFFC8B8) + internal val Sun50 = Color(0xFFFFE7E6) +} diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTheme.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTheme.kt new file mode 100644 index 0000000..b7c9476 --- /dev/null +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTheme.kt @@ -0,0 +1,30 @@ +package com.messi.designsystem.digitalagency + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.runtime.compositionLocalOf + +@Composable +fun DigitalAgencyTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable () -> Unit +) { + val colorScheme = if (darkTheme) darkDigitalAgencyColorPalette else lightDigitalAgencyColorPalette + CompositionLocalProvider( + LocalDigitalAgencyColorPalette provides colorScheme, + content = content + ) +} + +private val LocalDigitalAgencyColorPalette = compositionLocalOf { + error("No DigitalAgencyColorPalette provided") +} + +object DigitalAgencyTheme { + val colors: DigitalAgencyColorPalette + @Composable + @ReadOnlyComposable + get() = LocalDigitalAgencyColorPalette.current +} diff --git a/feature/resources/src/main/res/values/strings.xml b/feature/resources/src/main/res/values/strings.xml index 26fdfbb..72b08d9 100644 --- a/feature/resources/src/main/res/values/strings.xml +++ b/feature/resources/src/main/res/values/strings.xml @@ -105,5 +105,6 @@ Pager Animation DatePicker + DigitalAgencyScreen From 79908c4232ec1f3c746d650d21b68c8288fad387 Mon Sep 17 00:00:00 2001 From: Iino Date: Sun, 31 Dec 2023 15:21:10 +0900 Subject: [PATCH 2/5] define DigitalAgencyColorPalette --- .../composeapp/ui/DigitalAgencyScreen.kt | 2 +- .../DigitalAgencyColorPalette.kt | 102 ++++++++++++++++-- 2 files changed, 97 insertions(+), 7 deletions(-) diff --git a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt index d4bac51..7f181f7 100644 --- a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt +++ b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt @@ -8,6 +8,6 @@ import com.messi.designsystem.digitalagency.DigitalAgencyTheme @Composable fun DigitalAgencyScreen(navController: NavController) { DigitalAgencyTheme { - Text(text = "りんご", color = DigitalAgencyTheme.colors.body) + Text(text = "りんご", color = DigitalAgencyTheme.colors.textBody) } } diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt index 6dd54a4..3356870 100644 --- a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt @@ -5,15 +5,105 @@ import androidx.compose.ui.graphics.Color @Immutable data class DigitalAgencyColorPalette( - val primary: Color, - val body: Color, + val backgroundPrimary: Color, + val backgroundSecondary: Color, + val backgroundTertiary: Color, + val textBody: Color, + val textDescription: Color, + val textPlaceHolder: Color, + val textOnFill: Color, + val textLink: Color, + val textHover: Color, + val textActive: Color, + val textVisited: Color, + val textAlert: Color, + val textDisabled: Color, + val iconLabel: Color, + val iconActive: Color, + val iconAlert: Color, + val iconDisabled: Color, + val buttonNormal: Color, + val buttonHover: Color, + val buttonActive: Color, + val buttonDisabledBG: Color, + val borderField: Color, + val borderDivider: Color, + val borderFocused: Color, + val borderSelected: Color, + val borderAlert: Color, + val borderDisabled: Color, + val statusSuccess: Color, + val statusAlert: Color, + val statusWarning: Color, + val chartPrimary: Color, + val chartSecondary: Color ) val lightDigitalAgencyColorPalette = DigitalAgencyColorPalette( - primary = DigitalAgencyPrimitiveColor.white, - body = DigitalAgencyPrimitiveColor.Sumi900, + backgroundPrimary = DigitalAgencyPrimitiveColor.white, + backgroundSecondary = DigitalAgencyPrimitiveColor.Sumi100, + backgroundTertiary = DigitalAgencyPrimitiveColor.Sumi50, + textBody = DigitalAgencyPrimitiveColor.Sumi900, + textDescription = DigitalAgencyPrimitiveColor.Sumi700, + textPlaceHolder = DigitalAgencyPrimitiveColor.Sumi600, + textOnFill = DigitalAgencyPrimitiveColor.white, + textLink = DigitalAgencyPrimitiveColor.Sea800, + textHover = DigitalAgencyPrimitiveColor.Sea600, + textActive = DigitalAgencyPrimitiveColor.Sea900, + textVisited = DigitalAgencyPrimitiveColor.Sea900, + textAlert = DigitalAgencyPrimitiveColor.Sun800, + textDisabled = DigitalAgencyPrimitiveColor.Sumi500, + iconLabel = DigitalAgencyPrimitiveColor.Sumi900, + iconActive = DigitalAgencyPrimitiveColor.Sea800, + iconAlert = DigitalAgencyPrimitiveColor.Sun800, + iconDisabled = DigitalAgencyPrimitiveColor.Sumi500, + buttonNormal = DigitalAgencyPrimitiveColor.Sea800, + buttonHover = DigitalAgencyPrimitiveColor.Sea800.copy(alpha = 0.13f), + buttonActive = DigitalAgencyPrimitiveColor.Sea800.copy(alpha = 0.13f), + buttonDisabledBG = DigitalAgencyPrimitiveColor.Sumi500, + borderField = DigitalAgencyPrimitiveColor.Sumi900, + borderDivider = DigitalAgencyPrimitiveColor.Sumi300, + borderFocused = DigitalAgencyPrimitiveColor.Wood600, + borderSelected = DigitalAgencyPrimitiveColor.Sea800, + borderAlert = DigitalAgencyPrimitiveColor.Sun800, + borderDisabled = DigitalAgencyPrimitiveColor.Sumi300, + statusSuccess = DigitalAgencyPrimitiveColor.Forest600, + statusAlert = DigitalAgencyPrimitiveColor.Sun800, + statusWarning = DigitalAgencyPrimitiveColor.Wood800, + chartPrimary = DigitalAgencyPrimitiveColor.Sea800, + chartSecondary = DigitalAgencyPrimitiveColor.Sea400, ) val darkDigitalAgencyColorPalette = DigitalAgencyColorPalette( - primary = Color(0xFF1A1A1C), - body = DigitalAgencyPrimitiveColor.white, + backgroundPrimary = DigitalAgencyPrimitiveColor.Sumi900, + backgroundSecondary = DigitalAgencyPrimitiveColor.Sumi700, + backgroundTertiary = DigitalAgencyPrimitiveColor.Sumi800, + textBody = DigitalAgencyPrimitiveColor.white, + textDescription = DigitalAgencyPrimitiveColor.Sumi400, + textPlaceHolder = DigitalAgencyPrimitiveColor.Sumi500, + textOnFill = DigitalAgencyPrimitiveColor.white, + textLink = DigitalAgencyPrimitiveColor.Sea300, + textHover = DigitalAgencyPrimitiveColor.Sea200, + textActive = DigitalAgencyPrimitiveColor.Sea200, + textVisited = DigitalAgencyPrimitiveColor.Sea200, + textAlert = DigitalAgencyPrimitiveColor.Sun500, + textDisabled = DigitalAgencyPrimitiveColor.Sumi600, + iconLabel = DigitalAgencyPrimitiveColor.white, + iconActive = DigitalAgencyPrimitiveColor.Sea300, + iconAlert = DigitalAgencyPrimitiveColor.Sun500, + iconDisabled = DigitalAgencyPrimitiveColor.Sumi600, + buttonNormal = DigitalAgencyPrimitiveColor.Sea300, + buttonHover = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.13f), + buttonActive = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.13f), + buttonDisabledBG = DigitalAgencyPrimitiveColor.Sumi500, + borderField = DigitalAgencyPrimitiveColor.white, + borderDivider = DigitalAgencyPrimitiveColor.Sumi700, + borderFocused = DigitalAgencyPrimitiveColor.Wood600, + borderSelected = DigitalAgencyPrimitiveColor.Sea300, + borderAlert = DigitalAgencyPrimitiveColor.Sun500, + borderDisabled = DigitalAgencyPrimitiveColor.Sumi300, + statusSuccess = DigitalAgencyPrimitiveColor.Forest600, + statusAlert = DigitalAgencyPrimitiveColor.Sun500, + statusWarning = DigitalAgencyPrimitiveColor.Wood500, + chartPrimary = DigitalAgencyPrimitiveColor.Sea100, + chartSecondary = DigitalAgencyPrimitiveColor.Sea300, ) From 853c06318e2758a3334a44f4bd7447f074a3b0ae Mon Sep 17 00:00:00 2001 From: Iino Date: Sun, 31 Dec 2023 16:39:09 +0900 Subject: [PATCH 3/5] create DigitalAgencyButton --- .../com/example/composeapp/MainActivity.kt | 7 +- .../composeapp/ui/DigitalAgencyScreen.kt | 4 +- .../DigitalAgencyColorPalette.kt | 4 +- .../digitalagency/DigitalAgencyTextStyle.kt | 80 ++++++++++ .../digitalagency/component/Buttons.kt | 140 ++++++++++++++++++ 5 files changed, 228 insertions(+), 7 deletions(-) create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTextStyle.kt create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/Buttons.kt diff --git a/composeapp/src/main/java/com/example/composeapp/MainActivity.kt b/composeapp/src/main/java/com/example/composeapp/MainActivity.kt index 9242c4c..0fe466f 100644 --- a/composeapp/src/main/java/com/example/composeapp/MainActivity.kt +++ b/composeapp/src/main/java/com/example/composeapp/MainActivity.kt @@ -7,13 +7,14 @@ import androidx.compose.runtime.Composable import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController -import com.example.composeapp.ui.datepicker.DatePickerScreen import com.example.composeapp.ui.AnimationScreen import com.example.composeapp.ui.ComponentScreen import com.example.composeapp.ui.DigitalAgencyScreen import com.example.composeapp.ui.PagerScreen import com.example.composeapp.ui.PlaygroundScreen +import com.example.composeapp.ui.datepicker.DatePickerScreen import com.messi.designsystem.CustomTheme +import com.messi.designsystem.digitalagency.DigitalAgencyTheme class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { @@ -35,6 +36,8 @@ fun CreateNav(startDestination: String = NavRouter.PlaygroundScreen) { composable(NavRouter.AnimationScreen) { AnimationScreen(navController) } composable(NavRouter.PagerScreen) { PagerScreen(navController) } composable(NavRouter.DatePickerScreen) { DatePickerScreen(navController) } - composable(NavRouter.DigitalAgencyScreen) { DigitalAgencyScreen(navController) } + composable(NavRouter.DigitalAgencyScreen) { + DigitalAgencyTheme { DigitalAgencyScreen(navController) } + } } } diff --git a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt index 7f181f7..4eac96e 100644 --- a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt +++ b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt @@ -7,7 +7,5 @@ import com.messi.designsystem.digitalagency.DigitalAgencyTheme @Composable fun DigitalAgencyScreen(navController: NavController) { - DigitalAgencyTheme { - Text(text = "りんご", color = DigitalAgencyTheme.colors.textBody) - } + Text(text = "りんご", color = DigitalAgencyTheme.colors.textBody) } diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt index 3356870..9003c07 100644 --- a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt @@ -92,8 +92,8 @@ val darkDigitalAgencyColorPalette = DigitalAgencyColorPalette( iconAlert = DigitalAgencyPrimitiveColor.Sun500, iconDisabled = DigitalAgencyPrimitiveColor.Sumi600, buttonNormal = DigitalAgencyPrimitiveColor.Sea300, - buttonHover = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.13f), - buttonActive = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.13f), + buttonHover = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.1f), + buttonActive = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.1f), buttonDisabledBG = DigitalAgencyPrimitiveColor.Sumi500, borderField = DigitalAgencyPrimitiveColor.white, borderDivider = DigitalAgencyPrimitiveColor.Sumi700, diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTextStyle.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTextStyle.kt new file mode 100644 index 0000000..5491721 --- /dev/null +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyTextStyle.kt @@ -0,0 +1,80 @@ +package com.messi.designsystem.digitalagency + +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp + +object DigitalAgencyTextStyle { + val HeadL = TextStyle( + fontSize = 32.sp, + lineHeight = 48.sp, + fontWeight = FontWeight(500), + letterSpacing = 1.28.sp, + ) + val HeadM = TextStyle( + fontSize = 28.sp, + lineHeight = 42.sp, + fontWeight = FontWeight(500), + letterSpacing = 1.12.sp, + ) + val HeadS = TextStyle( + fontSize = 24.sp, + lineHeight = 36.sp, + fontWeight = FontWeight(500), + letterSpacing = 0.96.sp, + ) + val HeadSS = TextStyle( + fontSize = 20.sp, + lineHeight = 30.sp, + fontWeight = FontWeight(500), + letterSpacing = 0.8.sp, + ) + val HeadSSS = TextStyle( + fontSize = 16.sp, + lineHeight = 24.sp, + fontWeight = FontWeight(500), + letterSpacing = 0.64.sp, + ) + val BodyL = TextStyle( + fontSize = 16.sp, + lineHeight = 28.sp, + fontWeight = FontWeight(400), + letterSpacing = 0.64.sp, + ) + val BodyM = TextStyle( + fontSize = 14.sp, + lineHeight = 24.5.sp, + fontWeight = FontWeight(400), + letterSpacing = 0.56.sp, + ) + val LabelL = TextStyle( + fontSize = 14.sp, + lineHeight = 24.5.sp, + fontWeight = FontWeight(500), + letterSpacing = 0.56.sp, + ) + val LabelM = TextStyle( + fontSize = 12.sp, + lineHeight = 18.sp, + fontWeight = FontWeight(500), + letterSpacing = 0.15.sp, + ) + val SupplementL = TextStyle( + fontSize = 12.sp, + lineHeight = 21.sp, + fontWeight = FontWeight(400), + letterSpacing = 0.15.sp, + ) + val SupplementM = TextStyle( + fontSize = 10.sp, + lineHeight = 15.sp, + fontWeight = FontWeight(400), + letterSpacing = 0.15.sp, + ) + val Button = TextStyle( + fontSize = 16.sp, + lineHeight = 24.sp, + fontWeight = FontWeight(700), + letterSpacing = 0.64.sp, + ) +} diff --git a/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/Buttons.kt b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/Buttons.kt new file mode 100644 index 0000000..634feb9 --- /dev/null +++ b/core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/Buttons.kt @@ -0,0 +1,140 @@ +package com.messi.designsystem.digitalagency.component + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.widthIn +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextDecoration +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.messi.designsystem.digitalagency.DigitalAgencyTextStyle +import com.messi.designsystem.digitalagency.DigitalAgencyTheme + +enum class ButtonSize(val minWidth: Dp, val height: Dp) { + Large(minWidth = 136.dp, height = 56.dp), + Medium(minWidth = 96.dp, height = 48.dp), + Small(minWidth = 80.dp, height = 36.dp), +} + +@Composable +fun PrimaryButton( + text: String, + size: ButtonSize, + modifier: Modifier = Modifier, + enabled: Boolean = true, + onClick: () -> Unit, +) { + Button( + colors = ButtonDefaults.buttonColors( + containerColor = DigitalAgencyTheme.colors.buttonNormal, + disabledContainerColor = DigitalAgencyTheme.colors.buttonDisabledBG + ), + onClick = onClick, + shape = RoundedCornerShape(8.dp), + modifier = modifier + .widthIn(min = size.minWidth) + .height(size.height), + enabled = enabled + ) { + Text( + text = text, + style = DigitalAgencyTextStyle.Button, + color = DigitalAgencyTheme.colors.textOnFill + ) + } +} + +@Composable +fun SecondaryButton( + text: String, + size: ButtonSize, + modifier: Modifier = Modifier, + enabled: Boolean = true, + onClick: () -> Unit, +) { + OutlinedButton( + onClick = onClick, + colors = ButtonDefaults.outlinedButtonColors( + contentColor = DigitalAgencyTheme.colors.buttonNormal, + disabledContentColor = DigitalAgencyTheme.colors.textDisabled, + ), + border = BorderStroke( + width = 1.dp, + color = if (enabled) DigitalAgencyTheme.colors.buttonNormal else DigitalAgencyTheme.colors.buttonDisabledBG + ), + shape = RoundedCornerShape(8.dp), + modifier = modifier + .widthIn(min = size.minWidth) + .height(size.height) + .background(DigitalAgencyTheme.colors.backgroundPrimary, RoundedCornerShape(8.dp)), + enabled = enabled + ) { + Text( + text = text, + style = DigitalAgencyTextStyle.Button, + color = if (enabled) DigitalAgencyTheme.colors.buttonNormal else DigitalAgencyTheme.colors.textDisabled + ) + } +} + +@Composable +fun TertiaryButton( + text: String, + size: ButtonSize, + modifier: Modifier = Modifier, + enabled: Boolean = true, + onClick: () -> Unit, +) { + TextButton( + onClick = onClick, + colors = ButtonDefaults.textButtonColors( + contentColor = DigitalAgencyTheme.colors.buttonNormal, + disabledContentColor = DigitalAgencyTheme.colors.textDisabled, + ), + shape = RoundedCornerShape(8.dp), + modifier = modifier + .widthIn(min = size.minWidth) + .height(size.height), + enabled = enabled + ) { + Text( + text = text, + style = DigitalAgencyTextStyle.Button.copy( + textDecoration = TextDecoration.Underline + ), + ) + } +} + +@Preview +@Composable +private fun PrimaryButtonPreview() { + DigitalAgencyTheme { + PrimaryButton(text = "ラベル", size = ButtonSize.Large) {} + } +} + +@Preview +@Composable +private fun SecondaryButtonPreview() { + DigitalAgencyTheme { + SecondaryButton(text = "ラベル", size = ButtonSize.Large) {} + } +} + +@Preview +@Composable +private fun TertiaryButtonPreview() { + DigitalAgencyTheme { + TertiaryButton(text = "ラベル", size = ButtonSize.Large) {} + } +} From 953ddcababd6943c49c5e6251bdc1678c43f37d6 Mon Sep 17 00:00:00 2001 From: Iino Date: Sun, 31 Dec 2023 18:33:58 +0900 Subject: [PATCH 4/5] add DigitalAgencyScaffold --- .../composeapp/ui/DigitalAgencyScreen.kt | 44 ++++++++++++- .../src/main/res/values-night/themes.xml | 14 +---- composeapp/src/main/res/values/themes.xml | 14 +---- .../component/DigitalAgencyScaffold.kt | 19 ++++++ .../digitalagency/component/TopAppbar.kt | 63 +++++++++++++++++++ 5 files changed, 126 insertions(+), 28 deletions(-) create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/DigitalAgencyScaffold.kt create mode 100644 core/designsystem/src/main/java/com/messi/designsystem/digitalagency/component/TopAppbar.kt diff --git a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt index 4eac96e..88b86b2 100644 --- a/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt +++ b/composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt @@ -1,11 +1,51 @@ package com.example.composeapp.ui -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier import androidx.navigation.NavController +import com.example.composeapp.R import com.messi.designsystem.digitalagency.DigitalAgencyTheme +import com.messi.designsystem.digitalagency.component.ButtonSize +import com.messi.designsystem.digitalagency.component.DigitalAgencyScaffold +import com.messi.designsystem.digitalagency.component.DigitalAgencyTopAppBar +import com.messi.designsystem.digitalagency.component.PrimaryButton +import com.messi.designsystem.digitalagency.component.SecondaryButton +import com.messi.designsystem.digitalagency.component.TertiaryButton @Composable fun DigitalAgencyScreen(navController: NavController) { - Text(text = "りんご", color = DigitalAgencyTheme.colors.textBody) + DigitalAgencyScaffold( + topBar = { + DigitalAgencyTopAppBar( + textResId = R.string.compose_digital_agency, + navigationIcon = R.drawable.ic_arrow_back, + onClickNavigationIcon = navController::popBackStack + ) + } + ) { + Surface( + modifier = Modifier + .fillMaxSize() + .padding(it), + color = DigitalAgencyTheme.colors.backgroundPrimary + ) { + LazyColumn() { + item { + PrimaryButton(text = "ラベル", size = ButtonSize.Large) {} + PrimaryButton(text = "ラベル", size = ButtonSize.Medium) {} + PrimaryButton(text = "ラベル", size = ButtonSize.Small) {} + SecondaryButton(text = "ラベル", size = ButtonSize.Large) {} + SecondaryButton(text = "ラベル", size = ButtonSize.Medium) {} + SecondaryButton(text = "ラベル", size = ButtonSize.Small) {} + TertiaryButton(text = "ラベル", size = ButtonSize.Large) {} + TertiaryButton(text = "ラベル", size = ButtonSize.Medium) {} + TertiaryButton(text = "ラベル", size = ButtonSize.Small) {} + } + } + } + } } diff --git a/composeapp/src/main/res/values-night/themes.xml b/composeapp/src/main/res/values-night/themes.xml index d812c21..8f5f1e4 100644 --- a/composeapp/src/main/res/values-night/themes.xml +++ b/composeapp/src/main/res/values-night/themes.xml @@ -1,16 +1,4 @@ - + +