Migration material 3 to material 2

carrot-style · Jan 25, 2022 · 4413747 · 4413747
1 parent 83c6e29
commit 4413747
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 181 deletions.
diff --git a/buildSrc/src/main/kotlin/Dependencies.kt b/buildSrc/src/main/kotlin/Dependencies.kt
@@ -26,7 +26,7 @@ object Versions {
         const val Activity = "1.4.0"
         const val Insets = "0.24.0-alpha"
         const val Master = "1.2.0-alpha01"
-        const val Material = "1.0.0-alpha03"
+        const val Material = "1.2.0-alpha01"
         const val ConstraintLayout = "1.0.0"
     }
 
@@ -75,11 +75,10 @@ object Dependencies {
     )
 
     val Compose = listOf(
-        "androidx.compose.ui:ui:${Versions.Compose.Master}",
         "androidx.compose.ui:ui-tooling:${Versions.Compose.Master}",
         "com.airbnb.android:lottie-compose:${Versions.Compose.Lottie}",
         "androidx.activity:activity-compose:${Versions.Compose.Activity}",
-        "androidx.compose.material3:material3:${Versions.Compose.Material}",
+        "androidx.compose.material:material:${Versions.Compose.Material}",
         "com.google.accompanist:accompanist-insets:${Versions.Compose.Insets}",
         "androidx.constraintlayout:constraintlayout-compose:${Versions.Compose.ConstraintLayout}"
     )

diff --git a/presentation/src/main/kotlin/style/carrot/android/activity/main/MainActivity.kt b/presentation/src/main/kotlin/style/carrot/android/activity/main/MainActivity.kt
@@ -24,12 +24,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
 import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalView
@@ -50,8 +49,8 @@ import style.carrot.android.ui.StyledCard
 import style.carrot.android.util.NetworkUtil
 import style.carrot.android.util.constant.IntentConstant
 
+@ExperimentalFoundationApi
 @AndroidEntryPoint
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 class MainActivity : ComponentActivity() {
 
     private var isReady = true
@@ -106,10 +105,10 @@ class MainActivity : ComponentActivity() {
 
             CarrotStyleTheme {
                 ProvideWindowInsets {
-                    val containerColor = MaterialTheme.colorScheme.background
+                    val backgroundColor = MaterialTheme.colors.background
 
                     SideEffect {
-                        systemUiController.setSystemBarsColor(containerColor)
+                        systemUiController.setSystemBarsColor(backgroundColor)
                     }
 
                     Scaffold(
@@ -124,7 +123,7 @@ class MainActivity : ComponentActivity() {
                                 )
                             }
                         },
-                        containerColor = containerColor
+                        backgroundColor = backgroundColor
                     ) { padding ->
                         Column(
                             modifier = Modifier
@@ -138,7 +137,7 @@ class MainActivity : ComponentActivity() {
                         ) {
                             Text(
                                 text = stringResource(R.string.app_name),
-                                style = MaterialTheme.typography.headlineLarge
+                                style = MaterialTheme.typography.h1
                             )
                             LazyColumn(
                                 modifier = Modifier.padding(top = 15.dp),

diff --git a/presentation/src/main/kotlin/style/carrot/android/theme/Theme.kt b/presentation/src/main/kotlin/style/carrot/android/theme/Theme.kt
@@ -10,65 +10,35 @@
 package style.carrot.android.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.material3.lightColorScheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 
-private val LightThemeColors = lightColorScheme(
+private val LightThemeColors = lightColors(
     primary = md_theme_light_primary,
     onPrimary = md_theme_light_onPrimary,
-    primaryContainer = md_theme_light_primaryContainer,
-    onPrimaryContainer = md_theme_light_onPrimaryContainer,
     secondary = md_theme_light_secondary,
     onSecondary = md_theme_light_onSecondary,
-    secondaryContainer = md_theme_light_secondaryContainer,
-    onSecondaryContainer = md_theme_light_onSecondaryContainer,
-    tertiary = md_theme_light_tertiary,
-    onTertiary = md_theme_light_onTertiary,
-    tertiaryContainer = md_theme_light_tertiaryContainer,
-    onTertiaryContainer = md_theme_light_onTertiaryContainer,
     error = md_theme_light_error,
-    errorContainer = md_theme_light_errorContainer,
     onError = md_theme_light_onError,
-    onErrorContainer = md_theme_light_onErrorContainer,
     background = md_theme_light_background,
     onBackground = md_theme_light_onBackground,
     surface = md_theme_light_surface,
     onSurface = md_theme_light_onSurface,
-    surfaceVariant = md_theme_light_surfaceVariant,
-    onSurfaceVariant = md_theme_light_onSurfaceVariant,
-    outline = md_theme_light_outline,
-    inverseOnSurface = md_theme_light_inverseOnSurface,
-    inverseSurface = md_theme_light_inverseSurface,
 )
 
-private val DarkThemeColors = darkColorScheme(
+private val DarkThemeColors = darkColors(
     primary = md_theme_dark_primary,
     onPrimary = md_theme_dark_onPrimary,
-    primaryContainer = md_theme_dark_primaryContainer,
-    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
     secondary = md_theme_dark_secondary,
     onSecondary = md_theme_dark_onSecondary,
-    secondaryContainer = md_theme_dark_secondaryContainer,
-    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
-    tertiary = md_theme_dark_tertiary,
-    onTertiary = md_theme_dark_onTertiary,
-    tertiaryContainer = md_theme_dark_tertiaryContainer,
-    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
     error = md_theme_dark_error,
-    errorContainer = md_theme_dark_errorContainer,
     onError = md_theme_dark_onError,
-    onErrorContainer = md_theme_dark_onErrorContainer,
     background = md_theme_dark_background,
     onBackground = md_theme_dark_onBackground,
     surface = md_theme_dark_surface,
     onSurface = md_theme_dark_onSurface,
-    surfaceVariant = md_theme_dark_surfaceVariant,
-    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
-    outline = md_theme_dark_outline,
-    inverseOnSurface = md_theme_dark_inverseOnSurface,
-    inverseSurface = md_theme_dark_inverseSurface,
 )
 
 @Composable
@@ -83,7 +53,7 @@ fun CarrotStyleTheme(
     }
 
     MaterialTheme(
-        colorScheme = colors,
+        colors = colors,
         typography = CarrotStyleTypography,
         content = content
     )

diff --git a/presentation/src/main/kotlin/style/carrot/android/theme/Typography.kt b/presentation/src/main/kotlin/style/carrot/android/theme/Typography.kt
@@ -9,120 +9,11 @@
 
 package style.carrot.android.theme
 
-import androidx.compose.material3.Typography
-import androidx.compose.ui.text.TextStyle
+import androidx.compose.material.Typography
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
 import style.carrot.android.R
 
 private val DefaultFontFamily = FontFamily(Font(R.font.fredokaone))
 
-val CarrotStyleTypography = Typography(
-    displayLarge = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 57.sp,
-        lineHeight = 64.sp,
-        letterSpacing = (-0.25).sp,
-    ),
-    displayMedium = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 45.sp,
-        lineHeight = 52.sp,
-        letterSpacing = 0.sp,
-    ),
-    displaySmall = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 36.sp,
-        lineHeight = 44.sp,
-        letterSpacing = 0.sp,
-    ),
-    headlineLarge = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 32.sp,
-        lineHeight = 40.sp,
-        letterSpacing = 0.sp,
-    ),
-    headlineMedium = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 28.sp,
-        lineHeight = 36.sp,
-        letterSpacing = 0.sp,
-    ),
-    headlineSmall = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 24.sp,
-        lineHeight = 32.sp,
-        letterSpacing = 0.sp,
-    ),
-    titleLarge = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 22.sp,
-        lineHeight = 28.sp,
-        letterSpacing = 0.sp,
-    ),
-    titleMedium = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.1.sp,
-    ),
-    titleSmall = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 14.sp,
-        lineHeight = 20.sp,
-        letterSpacing = 0.1.sp,
-    ),
-    labelLarge = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 14.sp,
-        lineHeight = 20.sp,
-        letterSpacing = 0.1.sp,
-    ),
-    bodyLarge = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp,
-    ),
-    bodyMedium = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 14.sp,
-        lineHeight = 20.sp,
-        letterSpacing = 0.25.sp,
-    ),
-    bodySmall = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.W400,
-        fontSize = 12.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.4.sp,
-    ),
-    labelMedium = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 12.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp,
-    ),
-    labelSmall = TextStyle(
-        fontFamily = DefaultFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp,
-    )
-)
+val CarrotStyleTypography = Typography(defaultFontFamily = DefaultFontFamily)
diff --git a/presentation/src/main/kotlin/style/carrot/android/ui/LinkCard.kt b/presentation/src/main/kotlin/style/carrot/android/ui/LinkCard.kt
@@ -10,28 +10,26 @@
 package style.carrot.android.ui
 
 import android.widget.Toast
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
+import androidx.compose.material.Card
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import style.carrot.android.R
 import style.carrot.android.domain.model.CarrotUrl
 import style.carrot.android.util.Util
 
-// `Card` not implemented yet: https://m3.material.io/components/cards/implementation
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun StyledCard(modifier: Modifier, carrotUrl: CarrotUrl) {
     val context = LocalContext.current
@@ -40,24 +38,24 @@ fun StyledCard(modifier: Modifier, carrotUrl: CarrotUrl) {
         Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
     }
 
-    Column(
+    Card(
         modifier = modifier
             .fillMaxWidth()
             .height(100.dp)
-            .clip(RoundedCornerShape(30.dp))
-            .background(color = Color(242, 240, 240))
-            .clickable {
-                Util.copy(context, carrotUrl.styled)
-                toast(context.getString(R.string.ui_linkcard_toast_copied))
-            }
             .padding(horizontal = 20.dp),
-        verticalArrangement = Arrangement.SpaceEvenly
+        shape = RoundedCornerShape(30.dp),
+        onClick = {
+            Util.copy(context, carrotUrl.styled)
+            toast(context.getString(R.string.ui_linkcard_toast_copied))
+        }
     ) {
-        Text(text = carrotUrl.styled, style = MaterialTheme.typography.bodyLarge)
-        Text(
-            text = carrotUrl.memo,
-            style = MaterialTheme.typography.labelSmall
-        )
+        Column(verticalArrangement = Arrangement.SpaceEvenly) {
+            Text(text = carrotUrl.styled, style = MaterialTheme.typography.h4)
+            Text(
+                text = carrotUrl.memo,
+                style = MaterialTheme.typography.subtitle2
+            )
+        }
     }
 }