Initial work for converting Jetsurvey to Material3

This creates the theme with typography, colorscheme, etc. Right now m2
and m3 live side-by-side but the m2 theme has been renamed to
JetsurveyThemeOld. The first bits of WelcomeFragment have been migrated
as well.

Jetsurvey/app/build.gradle

@@ -21,12 +21,12 @@ plugins {
 }
 
 android {
-    compileSdkVersion 32
+    compileSdkVersion 33
 
     defaultConfig {
         applicationId "com.example.compose.jetsurvey"
         minSdkVersion 21
-        targetSdkVersion 32
+        targetSdkVersion 33
         versionCode 1
         versionName "1.0"
 
@@ -105,6 +105,7 @@ dependencies {
 
     implementation Libs.AndroidX.Compose.layout
     implementation Libs.AndroidX.Compose.material
+    implementation Libs.AndroidX.Compose.material3
     implementation Libs.AndroidX.Compose.materialIconsExtended
     implementation Libs.AndroidX.Compose.toolingPreview
     implementation Libs.AndroidX.Compose.runtime

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInFragment.kt

@@ -26,7 +26,7 @@ import androidx.fragment.app.viewModels
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.Screen
 import com.example.compose.jetsurvey.navigate
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 
 /**
  * Fragment containing the sign in UI.
@@ -55,7 +55,7 @@ class SignInFragment : Fragment() {
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
             setContent {
-                JetsurveyTheme {
+                JetsurveyThemeOld {
                     SignIn(
                         onNavigationEvent = { event ->
                             when (event) {

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt

@@ -47,7 +47,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 import com.example.compose.jetsurvey.theme.snackbarAction
 import com.example.compose.jetsurvey.util.supportWideScreen
 import kotlinx.coroutines.launch
@@ -196,15 +196,15 @@ fun ErrorSnackbar(
 @Preview(name = "Sign in light theme")
 @Composable
 fun SignInPreview() {
-    JetsurveyTheme {
+    JetsurveyThemeOld {
         SignIn {}
     }
 }
 
 @Preview(name = "Sign in dark theme")
 @Composable
 fun SignInPreviewDark() {
-    JetsurveyTheme(darkTheme = true) {
+    JetsurveyThemeOld(darkTheme = true) {
         SignIn {}
     }
 }

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpFragment.kt

@@ -26,7 +26,7 @@ import androidx.fragment.app.viewModels
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.Screen
 import com.example.compose.jetsurvey.navigate
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 
 /**
  * Fragment containing the sign up UI
@@ -55,7 +55,7 @@ class SignUpFragment : Fragment() {
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
             setContent {
-                JetsurveyTheme {
+                JetsurveyThemeOld {
                     SignUp(
                         onNavigationEvent = { event ->
                             when (event) {

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt

@@ -37,7 +37,7 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 import com.example.compose.jetsurvey.util.supportWideScreen
 
 sealed class SignUpEvent {
@@ -126,7 +126,7 @@ fun SignUpContent(
 @Preview(widthDp = 1024)
 @Composable
 fun SignUpPreview() {
-    JetsurveyTheme {
+    JetsurveyThemeOld {
         SignUp {}
     }
 }

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/WelcomeScreen.kt

@@ -16,6 +16,7 @@
 
 package com.example.compose.jetsurvey.signinsignup
 
+import android.content.res.Configuration
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
@@ -26,12 +27,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Button
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -108,7 +109,7 @@ private fun Branding(modifier: Modifier = Modifier) {
         )
         Text(
             text = stringResource(id = R.string.app_tagline),
-            style = MaterialTheme.typography.subtitle1,
+            style = MaterialTheme.typography.titleMedium,
             textAlign = TextAlign.Center,
             modifier = Modifier
                 .padding(top = 24.dp)
@@ -120,7 +121,9 @@ private fun Branding(modifier: Modifier = Modifier) {
 @Composable
 private fun Logo(
     modifier: Modifier = Modifier,
-    lightTheme: Boolean = MaterialTheme.colors.isLight
+    // TODO: figure out theme
+    lightTheme: Boolean = true
+    //lightTheme: Boolean = MaterialTheme.colors.isLight
 ) {
     val assetId = if (lightTheme) {
         R.drawable.ic_logo_light
@@ -147,7 +150,7 @@ private fun SignInCreateAccount(
         CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
             Text(
                 text = stringResource(id = R.string.sign_in_create_account),
-                style = MaterialTheme.typography.subtitle2,
+                style = MaterialTheme.typography.titleSmall,
                 textAlign = TextAlign.Center,
                 modifier = Modifier.padding(top = 64.dp, bottom = 12.dp)
             )
@@ -169,7 +172,7 @@ private fun SignInCreateAccount(
         ) {
             Text(
                 text = stringResource(id = R.string.user_continue),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
         }
         OrSignInAsGuest(
@@ -179,18 +182,11 @@ private fun SignInCreateAccount(
     }
 }
 
-@Preview(name = "Welcome light theme")
+@Preview(name = "Welcome light theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(name = "Welcome dark theme", uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Composable
 fun WelcomeScreenPreview() {
     JetsurveyTheme {
         WelcomeScreen {}
     }
-}
-
-@Preview(name = "Welcome dark theme")
-@Composable
-fun WelcomeScreenPreviewDark() {
-    JetsurveyTheme(darkTheme = true) {
-        WelcomeScreen {}
-    }
-}
+}

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyFragment.kt

@@ -33,7 +33,7 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import com.example.compose.jetsurvey.R
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 import com.google.android.material.datepicker.MaterialDatePicker
 
 class SurveyFragment : Fragment() {
@@ -63,8 +63,8 @@ class SurveyFragment : Fragment() {
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
             setContent {
-                JetsurveyTheme {
-                    val state = viewModel.uiState.observeAsState().value ?: return@JetsurveyTheme
+                JetsurveyThemeOld {
+                    val state = viewModel.uiState.observeAsState().value ?: return@JetsurveyThemeOld
                     AnimatedContent(
                         targetState = state,
                         transitionSpec = {

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt

@@ -72,7 +72,7 @@ import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import com.example.compose.jetsurvey.R
-import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.JetsurveyThemeOld
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.MultiplePermissionsState
 import com.google.accompanist.permissions.rememberMultiplePermissionsState
@@ -788,7 +788,7 @@ fun QuestionPreview() {
         ),
         description = R.string.select_one
     )
-    JetsurveyTheme {
+    JetsurveyThemeOld {
         Question(
             question = question,
             shouldAskPermissions = true,

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Color.kt

@@ -18,13 +18,73 @@ package com.example.compose.jetsurvey.theme
 
 import androidx.compose.ui.graphics.Color
 
+// TODO: Delete old colors
 val Purple300 = Color(0xFFCD52FC)
 val Purple600 = Color(0xFF9F00F4)
 val Purple700 = Color(0xFF8100EF)
 val Purple800 = Color(0xFF0000E1)
 
 val Red300 = Color(0xFFD00036)
 val Red800 = Color(0xFFEA6D7E)
+// End of old colors
 
-val Gray100 = Color(0xFFF5F5F5)
-val Gray900 = Color(0xFF212121)
+val md_theme_light_primary = Color(0xFF8307F0)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFEEDCFF)
+val md_theme_light_onPrimaryContainer = Color(0xFF2A0054)
+val md_theme_light_secondary = Color(0xFF734C9E)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFEFDBFF)
+val md_theme_light_onSecondaryContainer = Color(0xFF2B0052)
+val md_theme_light_tertiary = Color(0xFF9B4055)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFFFD9DE)
+val md_theme_light_onTertiaryContainer = Color(0xFF3F0015)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFFFFBFF)
+val md_theme_light_onBackground = Color(0xFF2D004F)
+val md_theme_light_surface = Color(0xFFFFFBFF)
+val md_theme_light_onSurface = Color(0xFF2D004F)
+val md_theme_light_surfaceVariant = Color(0xFFE8E0EB)
+val md_theme_light_onSurfaceVariant = Color(0xFF4A454E)
+val md_theme_light_outline = Color(0xFF7B757F)
+val md_theme_light_inverseOnSurface = Color(0xFFFAECFF)
+val md_theme_light_inverseSurface = Color(0xFF451969)
+val md_theme_light_inversePrimary = Color(0xFFD9B9FF)
+val md_theme_light_shadow = Color(0xFF000000)
+val md_theme_light_surfaceTint = Color(0xFF8307F0)
+
+val md_theme_dark_primary = Color(0xFFD9B9FF)
+val md_theme_dark_onPrimary = Color(0xFF450085)
+val md_theme_dark_primaryContainer = Color(0xFF6300BA)
+val md_theme_dark_onPrimaryContainer = Color(0xFFEEDCFF)
+val md_theme_dark_secondary = Color(0xFFDBB8FF)
+val md_theme_dark_onSecondary = Color(0xFF421A6C)
+val md_theme_dark_secondaryContainer = Color(0xFF5A3384)
+val md_theme_dark_onSecondaryContainer = Color(0xFFEFDBFF)
+val md_theme_dark_tertiary = Color(0xFFFFB2BE)
+val md_theme_dark_onTertiary = Color(0xFF5F1128)
+val md_theme_dark_tertiaryContainer = Color(0xFF7D293E)
+val md_theme_dark_onTertiaryContainer = Color(0xFFFFD9DE)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF2D004F)
+val md_theme_dark_onBackground = Color(0xFFF2DAFF)
+val md_theme_dark_surface = Color(0xFF2D004F)
+val md_theme_dark_onSurface = Color(0xFFF2DAFF)
+val md_theme_dark_surfaceVariant = Color(0xFF4A454E)
+val md_theme_dark_onSurfaceVariant = Color(0xFFCCC4CF)
+val md_theme_dark_outline = Color(0xFF958E99)
+val md_theme_dark_inverseOnSurface = Color(0xFF2D004F)
+val md_theme_dark_inverseSurface = Color(0xFFF2DAFF)
+val md_theme_dark_inversePrimary = Color(0xFF8307F0)
+val md_theme_dark_shadow = Color(0xFF000000)
+val md_theme_dark_surfaceTint = Color(0xFFD9B9FF)
+
+
+val seed = Color(0xFF8100EF)

Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Shape.kt

@@ -20,6 +20,12 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Shapes
 import androidx.compose.ui.unit.dp
 
-val Shapes = Shapes(
+// TODO Delete old shapes
+val OldShapes = Shapes(
+    small = RoundedCornerShape(12.dp)
+)
+
+// TODO Fix import
+val Shapes = androidx.compose.material3.Shapes(
     small = RoundedCornerShape(12.dp)
 )