Migration to Material You

lib_theme/build.gradle

@@ -3,6 +3,8 @@ apply from: rootProject.file("library.gradle")
 dependencies {
     implementation libs.material
 
+    implementation libs.nordic.theme
+
     implementation libs.bundles.compose
     implementation libs.compose.lifecycle
     implementation libs.compose.activity

lib_theme/src/main/java/no/nordicsemi/android/theme/Color.kt

@@ -1,68 +0,0 @@
-package no.nordicsemi.android.theme
-
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-
-object NordicColors {
-    val AlmostWhite = Color(0xFFDADADA)
-    val NordicBlue = Color(0xFF00A9CE)
-    val NordicLake = Color(0xFF008CD2)
-
-    val NordicDarkGray = ThemedColor(Color(0xFF333F48), Color(0xFFCCCBC8))
-
-//    val NordicGray4 = ThemedColor(Color(0xFFD1D1D6), Color(0xFF3A3A3C))
-    val NordicGray4 = ThemedColor(Color.White, Color(0xFF3A3A3C))
-
-    val NordicGray5 = ThemedColor(Color(0xFFE5E5EA), Color(0xFF2C2C2E))
-    val NordicLightGray = NeutralColor(Color(0xFF929CA2))
-    val NordicMediumGray = NeutralColor(Color(0xFF929CA2))
-
-    val NordicFall = ThemedColor(Color(0xFFF99535), Color(0xFFFF9F0A))
-    val NordicGreen = ThemedColor(Color(0xFF3ED052), Color(0xFF32D74B))
-
-    val NordicOrange = ThemedColor(Color(0xFFDF9B16), Color(0xFFFF9F0A))
-    val NordicRed = ThemedColor(Color(0xFFD03E51), Color(0xFFFF453A))
-    val NordicSky = NeutralColor(Color(0xFF6AD1E3))
-    val NordicYellow = ThemedColor(Color(0xFFF9EE35), Color(0xFFFFD60A))
-    val TableViewBackground = NeutralColor(Color(0xFFF2F2F6))
-    val TableViewSeparator = NeutralColor(Color(0xFFD2D2D6))
-
-    val Primary = ThemedColor(Color(0xFF00A9CE), Color(0xFF00A9CE))
-    val PrimaryVariant = ThemedColor(Color(0xFF008CD2), Color(0xFF00A9CE))
-    val Secondary = ThemedColor(Color(0xFF00A9CE), Color(0xFF00A9CE))
-    val SecondaryVariant = ThemedColor(Color(0xFF008CD2), Color(0xFF00A9CE))
-    val OnPrimary = ThemedColor(Color.White, Color.White)
-    val OnSecondary = ThemedColor(Color.White, Color.White)
-    val OnBackground = ThemedColor(Color.Black, Color.White)
-    val OnSurface = ThemedColor(Color.Black, Color.White)
-    val ItemHighlight = ThemedColor(Color.White, Color(0xFF1E1E1E))
-    val Background = ThemedColor(Color(0xFFF5F5F5), Color(0xFF121212))
-    val Surface = ThemedColor(Color(0xFFF5F5F5), Color(0xFF121212))
-}
-
-sealed class NordicColor {
-
-    @Composable
-    abstract fun value(): Color
-}
-
-data class ThemedColor(val light: Color, val dark: Color): NordicColor() {
-
-    @Composable
-    override fun value(): Color {
-        return if (isSystemInDarkTheme()) {
-            dark
-        } else {
-            light
-        }
-    }
-}
-
-data class NeutralColor(val color: Color): NordicColor() {
-
-    @Composable
-    override fun value(): Color {
-        return color
-    }
-}

lib_theme/src/main/java/no/nordicsemi/android/theme/Shape.kt

@@ -1,11 +0,0 @@
-package no.nordicsemi.android.theme
-
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
-import androidx.compose.ui.unit.dp
-
-val Shapes = Shapes(
-    small = RoundedCornerShape(4.dp),
-    medium = RoundedCornerShape(4.dp),
-    large = RoundedCornerShape(0.dp)
-)

lib_theme/src/main/java/no/nordicsemi/android/theme/Theme.kt

@@ -1,50 +0,0 @@
-package no.nordicsemi.android.theme
-
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
-import androidx.compose.runtime.Composable
-
-@Composable
-fun TestTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
-
-    val darkColorPalette = darkColors(
-        primary = NordicColors.Primary.value(),
-        primaryVariant = NordicColors.PrimaryVariant.value(),
-        secondary = NordicColors.Secondary.value(),
-        secondaryVariant = NordicColors.SecondaryVariant.value(),
-        onSecondary = NordicColors.OnSecondary.value(),
-        onPrimary = NordicColors.OnPrimary.value(),
-        onBackground = NordicColors.OnBackground.value(),
-        onSurface = NordicColors.OnSurface.value(),
-        background = NordicColors.Background.value(),
-        surface = NordicColors.Surface.value(),
-    )
-
-    val lightColorPalette = lightColors(
-        primary = NordicColors.Primary.value(),
-        primaryVariant = NordicColors.PrimaryVariant.value(),
-        secondary = NordicColors.Secondary.value(),
-        secondaryVariant = NordicColors.SecondaryVariant.value(),
-        onSecondary = NordicColors.OnSecondary.value(),
-        onPrimary = NordicColors.OnPrimary.value(),
-        onBackground = NordicColors.OnBackground.value(),
-        onSurface = NordicColors.OnSurface.value(),
-        background = NordicColors.Background.value(),
-        surface = NordicColors.Surface.value(),
-    )
-
-    val colors = if (darkTheme) {
-        darkColorPalette
-    } else {
-        lightColorPalette
-    }
-
-    MaterialTheme(
-        colors = colors,
-        typography = Typography,
-        shapes = Shapes,
-        content = content
-    )
-}

lib_theme/src/main/java/no/nordicsemi/android/theme/Type.kt

@@ -1,28 +0,0 @@
-package no.nordicsemi.android.theme
-
-import androidx.compose.material.Typography
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
-
-// Set of Material typography styles to start with
-val Typography = Typography(
-    body1 = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp
-    )
-    /* Other default text styles to override
-    button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
-    )
-    */
-)

lib_theme/src/main/java/no/nordicsemi/android/theme/view/KeyValueField.kt

@@ -3,10 +3,10 @@ package no.nordicsemi.android.theme.view
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import no.nordicsemi.android.theme.NordicColors
 
 @Composable
 fun KeyValueField(key: String, value: String) {
@@ -16,7 +16,7 @@ fun KeyValueField(key: String, value: String) {
     ) {
         Text(text = key)
         Text(
-            color = NordicColors.NordicDarkGray.value(),
+            color = MaterialTheme.colorScheme.onBackground,
             text = value
         )
     }

lib_theme/src/main/java/no/nordicsemi/android/theme/view/SelectItemRadioGroup.kt

@@ -2,14 +2,11 @@ package no.nordicsemi.android.theme.view
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.RadioButton
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import no.nordicsemi.android.material.you.RadioButton
+import no.nordicsemi.android.material.you.RadioButtonItem
 
 @Composable
 fun <T> SelectItemRadioGroup(
@@ -35,11 +32,10 @@ internal fun <T> SelectItemRadioButton(
 ) {
     Row {
         RadioButton(
-            selected = (selectedItem == displayedItem.unit),
-            onClick = { onEvent(displayedItem) }
-        )
-        Spacer(modifier = Modifier.width(4.dp))
-        Text(text = displayedItem.label)
+            RadioButtonItem(displayedItem.label, selectedItem == displayedItem.unit),
+        ) {
+            onEvent(displayedItem)
+        }
     }
 }
 

lib_theme/src/main/java/no/nordicsemi/android/theme/view/SensorRecordCard.kt

@@ -3,16 +3,16 @@ package no.nordicsemi.android.theme.view
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Card
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import no.nordicsemi.android.theme.NordicColors
+import no.nordicsemi.android.material.you.Card
 
 @Composable
 fun ScreenSection(content: @Composable () -> Unit) {
     Card(
-        backgroundColor = NordicColors.ItemHighlight.value(),
+        backgroundColor = MaterialTheme.colorScheme.background,
         shape = RoundedCornerShape(4.dp),
         elevation = 0.dp
     ) {

lib_theme/src/main/java/no/nordicsemi/android/theme/view/TopAppBar.kt

@@ -1,20 +1,30 @@
 package no.nordicsemi.android.theme.view
 
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import no.nordicsemi.android.theme.R
 
 @Composable
 fun CloseIconAppBar(text: String, onClick: () -> Unit) {
-    TopAppBar(
+    SmallTopAppBar(
         title = { Text(text) },
+        colors = TopAppBarDefaults.smallTopAppBarColors(
+            scrolledContainerColor = MaterialTheme.colorScheme.primary,
+            containerColor = colorResource(id = R.color.appBarColor),
+            titleContentColor = MaterialTheme.colorScheme.onPrimary,
+            actionIconContentColor = MaterialTheme.colorScheme.onPrimary,
+            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
+        ),
         navigationIcon = {
             IconButton(onClick = { onClick() }) {
                 Icon(
@@ -28,8 +38,15 @@ fun CloseIconAppBar(text: String, onClick: () -> Unit) {
 
 @Composable
 fun BackIconAppBar(text: String, onClick: () -> Unit) {
-    TopAppBar(
+    SmallTopAppBar(
         title = { Text(text) },
+        colors = TopAppBarDefaults.smallTopAppBarColors(
+            scrolledContainerColor = MaterialTheme.colorScheme.primary,
+            containerColor = colorResource(id = R.color.appBarColor),
+            titleContentColor = MaterialTheme.colorScheme.onPrimary,
+            actionIconContentColor = MaterialTheme.colorScheme.onPrimary,
+            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
+        ),
         navigationIcon = {
             IconButton(onClick = { onClick() }) {
                 Icon(

lib_theme/src/main/java/no/nordicsemi/android/theme/view/dialog/StringListDialog.kt

@@ -13,9 +13,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Card
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -25,7 +24,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
-import no.nordicsemi.android.theme.NordicColors
+import no.nordicsemi.android.material.you.Card
 import no.nordicsemi.android.theme.R
 
 @Composable
@@ -39,7 +38,6 @@ fun StringListDialog(config: StringListDialogConfig) {
 fun StringListView(config: StringListDialogConfig) {
     Card(
         modifier = Modifier.height(300.dp),
-        backgroundColor = NordicColors.NordicGray4.value(),
         shape = RoundedCornerShape(10.dp),
         elevation = 0.dp
     ) {
@@ -72,9 +70,9 @@ fun StringListView(config: StringListDialogConfig) {
                                     modifier = Modifier.padding(horizontal = 4.dp),
                                     painter = painterResource(it),
                                     contentDescription = "Content image",
-                                    colorFilter = ColorFilter.tint(
-                                        NordicColors.NordicDarkGray.value()
-                                    )
+//                                    colorFilter = ColorFilter.tint(
+//                                        NordicColors.NordicDarkGray.value()
+//                                    )
                                 )
                             }
                             Text(