Designsystem digital home

composeapp/src/main/java/com/example/composeapp/MainActivity.kt

@@ -7,12 +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?) {
@@ -34,5 +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) {
+      DigitalAgencyTheme { DigitalAgencyScreen(navController) }
+    }
   }
 }

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"
 }

composeapp/src/main/java/com/example/composeapp/ui/DigitalAgencyScreen.kt

@@ -0,0 +1,142 @@
+package com.example.composeapp.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+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.DigitalAgencyTopAppBar
+import com.messi.designsystem.digitalagency.component.PrimaryButton
+import com.messi.designsystem.digitalagency.component.ScrollTopButton
+import com.messi.designsystem.digitalagency.component.SecondaryButton
+import com.messi.designsystem.digitalagency.component.TertiaryButton
+import kotlinx.coroutines.launch
+
+@Composable
+fun DigitalAgencyScreen(navController: NavController) {
+  val listState = rememberLazyListState()
+  val coroutineScope = rememberCoroutineScope()
+  Scaffold(
+    topBar = {
+      DigitalAgencyTopAppBar(
+        textResId = R.string.compose_digital_agency,
+        navigationIcon = R.drawable.ic_arrow_back,
+        onClickNavigationIcon = navController::popBackStack
+      )
+    },
+    floatingActionButton = {
+      ScrollTopButton {
+        coroutineScope.launch {
+          listState.animateScrollToItem(index = 0)
+        }
+      }
+    }
+  ) {
+    Surface(
+      modifier = Modifier
+        .fillMaxSize()
+        .padding(it),
+      color = DigitalAgencyTheme.colors.backgroundPrimary
+    ) {
+      LazyColumn(
+        state = listState,
+        contentPadding = PaddingValues(vertical = 8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+      ) {
+        item {
+          ContentsCard(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            description = "ボタン"
+          ) {
+            PrimaryButton(text = "ボタン", size = ButtonSize.Large) {}
+          }
+        }
+        item {
+          ContentsCard(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            description = "ボタン"
+          ) {
+            PrimaryButton(text = "ボタン", size = ButtonSize.Large) {}
+          }
+        }
+        item {
+          PrimaryButton(text = "ラベル", size = ButtonSize.Large) {}
+          Spacer(modifier = Modifier.height(48.dp))
+          PrimaryButton(text = "ラベル", size = ButtonSize.Medium) {}
+          Spacer(modifier = Modifier.height(148.dp))
+          PrimaryButton(text = "ラベル", size = ButtonSize.Small) {}
+          Spacer(modifier = Modifier.height(148.dp))
+          SecondaryButton(text = "ラベル", size = ButtonSize.Large) {}
+          Spacer(modifier = Modifier.height(48.dp))
+          SecondaryButton(text = "ラベル", size = ButtonSize.Medium) {}
+          Spacer(modifier = Modifier.height(48.dp))
+          SecondaryButton(text = "ラベル", size = ButtonSize.Small) {}
+          Spacer(modifier = Modifier.height(148.dp))
+          TertiaryButton(text = "ラベル", size = ButtonSize.Large) {}
+          Spacer(modifier = Modifier.height(48.dp))
+          TertiaryButton(text = "ラベル", size = ButtonSize.Medium) {}
+          Spacer(modifier = Modifier.height(48.dp))
+          TertiaryButton(text = "ラベル", size = ButtonSize.Small) {}
+        }
+      }
+    }
+  }
+}
+
+@Composable
+private fun ContentsCard(
+  modifier: Modifier = Modifier,
+  description: String,
+  content: @Composable (BoxScope) -> Unit
+) {
+  Column(
+    modifier = modifier
+      .clip(RoundedCornerShape(8.dp))
+      .clickable { }
+      .border(
+        width = 1.dp,
+        color = DigitalAgencyTheme.colors.borderDivider,
+        shape = RoundedCornerShape(8.dp)
+      )
+  ) {
+    Box(
+      modifier = Modifier
+        .fillMaxWidth()
+        .aspectRatio(16f / 9f)
+        .background(
+          DigitalAgencyTheme.colors.backgroundTertiary,
+          RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
+        ),
+      contentAlignment = Alignment.Center,
+      content = content
+    )
+    Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) {
+      Text(text = description, color = DigitalAgencyTheme.colors.textBody)
+    }
+  }
+}

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)
+        }
       }
     }
   }

composeapp/src/main/res/values-night/themes.xml

@@ -1,16 +1,4 @@
 <resources>
   <!-- Base application theme. -->
-  <style name="Theme.AndroidTechSample" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    <!-- Primary brand color. -->
-    <item name="colorPrimary">@color/purple_200</item>
-    <item name="colorPrimaryVariant">@color/purple_700</item>
-    <item name="colorOnPrimary">@color/black_100</item>
-    <!-- Secondary brand color. -->
-    <item name="colorSecondary">@color/teal_200</item>
-    <item name="colorSecondaryVariant">@color/teal_200</item>
-    <item name="colorOnSecondary">@color/black_100</item>
-    <!-- Status bar color. -->
-    <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
-    <!-- Customize your theme here. -->
-  </style>
+  <style name="Theme.AndroidTechSample" parent="Theme.MaterialComponents.DayNight.NoActionBar"/>
 </resources>

composeapp/src/main/res/values/themes.xml

@@ -1,16 +1,4 @@
 <resources>
   <!-- Base application theme. -->
-  <style name="Theme.AndroidTechSample" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    <!-- Primary brand color. -->
-    <item name="colorPrimary">@color/purple_500</item>
-    <item name="colorPrimaryVariant">@color/purple_700</item>
-    <item name="colorOnPrimary">@color/white_100</item>
-    <!-- Secondary brand color. -->
-    <item name="colorSecondary">@color/teal_200</item>
-    <item name="colorSecondaryVariant">@color/teal_700</item>
-    <item name="colorOnSecondary">@color/black_100</item>
-    <!-- Status bar color. -->
-    <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
-    <!-- Customize your theme here. -->
-  </style>
+  <style name="Theme.AndroidTechSample" parent="Theme.MaterialComponents.DayNight.NoActionBar"/>
 </resources>

core/designsystem/src/main/java/com/messi/designsystem/digitalagency/DigitalAgencyColorPalette.kt

@@ -0,0 +1,109 @@
+package com.messi.designsystem.digitalagency
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+
+@Immutable
+data class DigitalAgencyColorPalette(
+  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(
+  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(
+  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.1f),
+  buttonActive = DigitalAgencyPrimitiveColor.Sea300.copy(alpha = 0.1f),
+  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,
+)