Material surface tones: map previous surface colors

Also use new fixed surfaceContainer color for nav bar to match bottom nav.
UweTrottmann · Mar 7, 2024 · 02ae3f6 · 02ae3f6
1 parent bec8bd0
commit 02ae3f6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/app/src/main/java/com/battlelancer/seriesguide/ui/theme/Color.kt b/app/src/main/java/com/battlelancer/seriesguide/ui/theme/Color.kt
@@ -42,10 +42,10 @@ val md_theme_light_scrim = Color(0xFF000000)
 val surfaceDimLight = Color(0xFFDED8E0)
 val surfaceBrightLight = Color(0xFFFEF7FF)
 val surfaceContainerLowestLight = Color(0xFFFFFFFF)
-val surfaceContainerLowLight = Color(0xFFF8F1FA)
-val surfaceContainerLight = Color(0xFFF2ECF4)
-val surfaceContainerHighLight = Color(0xFFEDE6EF)
-val surfaceContainerHighestLight = Color(0xFFE7E0E9)
+val surfaceContainerLowLight = Color(0xFFE3E0E6) // Buttons, cards
+val surfaceContainerLight = Color(0xFFDEDBE3) // App bars
+val surfaceContainerHighLight = Color(0xFFDCD9E3) // Dialogs
+val surfaceContainerHighestLight = md_theme_light_surfaceVariant // Text input, switch
 
 val md_theme_dark_primary = Color(0xFF927bbc)
 val md_theme_dark_onPrimary = Color(0xFF3D1976)
@@ -79,7 +79,7 @@ val md_theme_dark_scrim = Color(0xFF000000)
 val surfaceDimDark = Color(0xFF151218)
 val surfaceBrightDark = Color(0xFF3B383F)
 val surfaceContainerLowestDark = Color(0xFF0F0D13)
-val surfaceContainerLowDark = Color(0xFF1D1A21)
-val surfaceContainerDark = Color(0xFF211E25)
-val surfaceContainerHighDark = Color(0xFF2C292F)
-val surfaceContainerHighestDark = Color(0xFF37333A)
+val surfaceContainerLowDark = Color(0xFF1F1B26) // Buttons, cards
+val surfaceContainerDark = Color(0xFF221E2B) // App bars
+val surfaceContainerHighDark = Color(0xFF25202E) // Dialogs
+val surfaceContainerHighestDark = md_theme_dark_surfaceVariant // Text input, switch
diff --git a/app/src/main/java/com/battlelancer/seriesguide/util/ThemeUtils.kt b/app/src/main/java/com/battlelancer/seriesguide/util/ThemeUtils.kt
@@ -36,7 +36,6 @@ import com.battlelancer.seriesguide.ui.SeriesGuidePreferences
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.color.DynamicColors
 import com.google.android.material.color.MaterialColors
-import com.google.android.material.elevation.SurfaceColors
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.uwetrottmann.androidutils.AndroidUtils
 import com.uwetrottmann.seriesguide.widgets.SlidingTabLayout
@@ -190,8 +189,12 @@ object ThemeUtils {
             // As those are the majority of used devices, use an opaque color with alpha matching
             // the navigation bar instead.
 //            Color.TRANSPARENT
-            // Widget.Material3.BottomNavigationView elevation is m3_sys_elevation_level2
-            val opaqueNavBarColor = SurfaceColors.SURFACE_2.getColor(context)
+            // Widget.Material3.BottomNavigationView background is ?attr/colorSurfaceContainer
+            val opaqueNavBarColor = MaterialColors.getColor(
+                context,
+                com.google.android.material.R.attr.colorSurfaceContainer,
+                Color.BLACK
+            )
             ColorUtils.setAlphaComponent(opaqueNavBarColor, 192)
         }
     }

diff --git a/app/src/main/res/values/colors_md.xml b/app/src/main/res/values/colors_md.xml
@@ -26,10 +26,10 @@
     <color name="md_theme_light_surfaceDim">#DED8E0</color>
     <color name="md_theme_light_surfaceBright">#FEF7FF</color>
     <color name="md_theme_light_surfaceContainerLowest">#FFFFFF</color>
-    <color name="md_theme_light_surfaceContainerLow">#F8F1FA</color>
-    <color name="md_theme_light_surfaceContainer">#F2ECF4</color>
-    <color name="md_theme_light_surfaceContainerHigh">#EDE6EF</color>
-    <color name="md_theme_light_surfaceContainerHighest">#E7E0E9</color>
+    <color name="md_theme_light_surfaceContainerLow">#E3E0E6</color>
+    <color name="md_theme_light_surfaceContainer">#DEDBE3</color>
+    <color name="md_theme_light_surfaceContainerHigh">#DCD9E3</color>
+    <color name="md_theme_light_surfaceContainerHighest">@color/md_theme_light_surfaceVariant</color>
 
     <color name="md_theme_dark_onPrimary">#3D1976</color>
     <color name="md_theme_dark_primaryContainer">#54348E</color>
@@ -54,10 +54,10 @@
     <color name="md_theme_dark_surfaceDim">#151218</color>
     <color name="md_theme_dark_surfaceBright">#3B383F</color>
     <color name="md_theme_dark_surfaceContainerLowest">#0F0D13</color>
-    <color name="md_theme_dark_surfaceContainerLow">#1D1A21</color>
-    <color name="md_theme_dark_surfaceContainer">#211E25</color>
-    <color name="md_theme_dark_surfaceContainerHigh">#2C292F</color>
-    <color name="md_theme_dark_surfaceContainerHighest">#37333A</color>
+    <color name="md_theme_dark_surfaceContainerLow">#1F1B26</color>
+    <color name="md_theme_dark_surfaceContainer">#221E2B</color>
+    <color name="md_theme_dark_surfaceContainerHigh">#25202E</color>
+    <color name="md_theme_dark_surfaceContainerHighest">@color/md_theme_dark_surfaceVariant</color>
 
     <color name="seed">#6545A0</color>
     <color name="error">#BA1B1B</color>