ui: introduce a fresh set of Material3 themes and migrate to them

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>

13 files changed, 144 insertions, 105 deletions

diff --git a/ui/src/main/res/layout/tunnel_detail_fragment.xml b/ui/src/main/res/layout/tunnel_detail_fragment.xml
index 96829e3c..751088f6 100644
--- a/ui/src/main/res/layout/tunnel_detail_fragment.xml
+++ b/ui/src/main/res/layout/tunnel_detail_fragment.xml
@@ -25,7 +25,7 @@
     <ScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?attr/colorBackground"
+        android:background="?attr/colorSurface"
         android:clickable="true"
         android:focusable="true">
 
diff --git a/ui/src/main/res/layout/tunnel_editor_fragment.xml b/ui/src/main/res/layout/tunnel_editor_fragment.xml
index 59572b32..4443c003 100644
--- a/ui/src/main/res/layout/tunnel_editor_fragment.xml
+++ b/ui/src/main/res/layout/tunnel_editor_fragment.xml
@@ -28,7 +28,7 @@
         android:id="@+id/main_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/colorBackground">
+        android:background="?attr/colorSurface">
 
         <ScrollView
             android:layout_width="match_parent"
diff --git a/ui/src/main/res/layout/tunnel_list_fragment.xml b/ui/src/main/res/layout/tunnel_list_fragment.xml
index 42a6ced7..8fc5d523 100644
--- a/ui/src/main/res/layout/tunnel_list_fragment.xml
+++ b/ui/src/main/res/layout/tunnel_list_fragment.xml
@@ -24,7 +24,7 @@
         android:id="@+id/main_container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?attr/colorBackground"
+        android:background="?attr/colorSurface"
         android:clipChildren="false">
 
         <androidx.recyclerview.widget.RecyclerView
diff --git a/ui/src/main/res/layout/tv_tunnel_list_item.xml b/ui/src/main/res/layout/tv_tunnel_list_item.xml
index 15615536..87367af5 100644
--- a/ui/src/main/res/layout/tv_tunnel_list_item.xml
+++ b/ui/src/main/res/layout/tv_tunnel_list_item.xml
@@ -34,10 +34,10 @@
         android:layout_margin="8dp"
         android:layout_marginTop="4dp"
         android:layout_marginBottom="0dp"
-        android:backgroundTint="@{(item.state == State.UP &amp;&amp; !isDeleting) ? @color/secondary_dark_color : (isDeleting &amp;&amp; isFocused) ? @color/tv_card_delete_background : @color/tv_card_background}"
         android:checkable="true"
         android:focusable="true"
-        app:contentPadding="8dp">
+        app:contentPadding="8dp"
+        android:backgroundTint="@{(item.state == State.UP &amp;&amp; !isDeleting) ? @color/tv_secondary_dark_color : (isDeleting &amp;&amp; isFocused) ? @color/tv_card_delete_background : @color/tv_card_background}">
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
diff --git a/ui/src/main/res/values-night/colors.xml b/ui/src/main/res/values-night/colors.xml
deleted file mode 100644
index 586486da..00000000
--- a/ui/src/main/res/values-night/colors.xml
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <!-- Base palette -->
-    <color name="primary_color">#ff212121</color>
-    <color name="primary_light_color">#ff484848</color>
-    <color name="primary_dark_color">#ff000000</color>
-    <color name="secondary_color">#ff4285f4</color>
-    <color name="secondary_light_color">#ff80b4ff</color>
-    <color name="secondary_dark_color">#ff0059c1</color>
-    <color name="primary_text_color">#ffffffff</color>
-    <color name="secondary_text_color">#ffffffff</color>
-
-    <!-- Theme variables -->
-    <color name="list_multiselect_background">#1aeeeeee</color>
-    <color name="status_bar_color">@color/primary_color</color>
-    <color name="navigation_bar_color">#aa212121</color>
-
-    <!-- Log viewer tag colors -->
-    <color name="debug_tag_color">#aaaaaa</color>
-    <color name="error_tag_color">#ff0000</color>
-    <color name="info_tag_color">#00ff00</color>
-    <color name="warning_tag_color">#ffff00</color>
-</resources>
diff --git a/ui/src/main/res/values-night/themes.xml b/ui/src/main/res/values-night/themes.xml
new file mode 100644
index 00000000..9187e48a
--- /dev/null
+++ b/ui/src/main/res/values-night/themes.xml
@@ -0,0 +1,31 @@
+
+<resources>
+    <style name="WireGuardTheme" parent="Theme.Material3.Dark">
+        <item name="colorPrimary">@color/md_theme_dark_primary</item>
+        <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
+        <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
+        <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
+        <item name="colorSecondary">@color/md_theme_dark_secondary</item>
+        <item name="colorOnSecondary">@color/md_theme_dark_onSecondary</item>
+        <item name="colorSecondaryContainer">@color/md_theme_dark_secondaryContainer</item>
+        <item name="colorOnSecondaryContainer">@color/md_theme_dark_onSecondaryContainer</item>
+        <item name="colorTertiary">@color/md_theme_dark_tertiary</item>
+        <item name="colorOnTertiary">@color/md_theme_dark_onTertiary</item>
+        <item name="colorTertiaryContainer">@color/md_theme_dark_tertiaryContainer</item>
+        <item name="colorOnTertiaryContainer">@color/md_theme_dark_onTertiaryContainer</item>
+        <item name="colorError">@color/md_theme_dark_error</item>
+        <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
+        <item name="colorOnError">@color/md_theme_dark_onError</item>
+        <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
+        <item name="android:colorBackground">@color/md_theme_dark_background</item>
+        <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
+        <item name="colorSurface">@color/md_theme_dark_surface</item>
+        <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
+        <item name="colorSurfaceVariant">@color/md_theme_dark_surfaceVariant</item>
+        <item name="colorOnSurfaceVariant">@color/md_theme_dark_onSurfaceVariant</item>
+        <item name="colorOutline">@color/md_theme_dark_outline</item>
+        <item name="colorOnSurfaceInverse">@color/md_theme_dark_inverseOnSurface</item>
+        <item name="colorSurfaceInverse">@color/md_theme_dark_inverseSurface</item>
+        <item name="colorPrimaryInverse">@color/md_theme_dark_inversePrimary</item>
+    </style>
+</resources>
diff --git a/ui/src/main/res/values-v27/styles.xml b/ui/src/main/res/values-v27/styles.xml
deleted file mode 100644
index b797e105..00000000
--- a/ui/src/main/res/values-v27/styles.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <style name="AppTheme" parent="WireGuardTheme">
-        <item name="android:navigationBarColor">@color/navigation_bar_color</item>
-        <item name="android:windowLightNavigationBar">@bool/light_navigation_bar</item>
-        <item name="android:windowLightStatusBar">@bool/light_status_bar</item>
-    </style>
-</resources>
diff --git a/ui/src/main/res/values/attrs.xml b/ui/src/main/res/values/attrs.xml
index b5b614e9..903ac008 100644
--- a/ui/src/main/res/values/attrs.xml
+++ b/ui/src/main/res/values/attrs.xml
@@ -4,8 +4,4 @@
         <attr name="state_multiselected" format="boolean" />
         <attr name="colorMultiselectActiveBackground" format="reference|color" />
     </declare-styleable>
-
-    <declare-styleable name="custom_color">
-        <attr name="colorBackground" format="reference|color" />
-    </declare-styleable>
 </resources>
diff --git a/ui/src/main/res/values/colors.xml b/ui/src/main/res/values/colors.xml
index 989c6fc1..41dee2fa 100644
--- a/ui/src/main/res/values/colors.xml
+++ b/ui/src/main/res/values/colors.xml
@@ -1,24 +1,67 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources xmlns:tools="http://schemas.android.com/tools">
-    <!-- Base palette -->
-    <color name="primary_color">#ffffffff</color>
-    <color name="primary_light_color">#ffffffff</color>
-    <color name="primary_dark_color">#ffcccccc</color>
-    <color name="secondary_color">#ff1a73e8</color>
-    <color name="secondary_light_color">#ff1a73e8</color>
-    <color name="secondary_dark_color">#ff1a73e8</color>
-    <color name="primary_text_color">#ff000000</color>
-    <color name="secondary_text_color">#ffffffff</color>
+<resources>
+    <color name="seed">#1a73e8</color>
+    <color name="md_theme_light_primary">#005BC0</color>
+    <color name="md_theme_light_onPrimary">#FFFFFF</color>
+    <color name="md_theme_light_primaryContainer">#D8E2FF</color>
+    <color name="md_theme_light_onPrimaryContainer">#001A41</color>
+    <color name="md_theme_light_secondary">#565E71</color>
+    <color name="md_theme_light_onSecondary">#FFFFFF</color>
+    <color name="md_theme_light_secondaryContainer">#DBE2F9</color>
+    <color name="md_theme_light_onSecondaryContainer">#131B2C</color>
+    <color name="md_theme_light_tertiary">#715574</color>
+    <color name="md_theme_light_onTertiary">#FFFFFF</color>
+    <color name="md_theme_light_tertiaryContainer">#FBD7FC</color>
+    <color name="md_theme_light_onTertiaryContainer">#29132D</color>
+    <color name="md_theme_light_error">#BA1A1A</color>
+    <color name="md_theme_light_errorContainer">#FFDAD6</color>
+    <color name="md_theme_light_onError">#FFFFFF</color>
+    <color name="md_theme_light_onErrorContainer">#410002</color>
+    <color name="md_theme_light_background">#FEFBFF</color>
+    <color name="md_theme_light_onBackground">#1B1B1F</color>
+    <color name="md_theme_light_surface">#FEFBFF</color>
+    <color name="md_theme_light_onSurface">#1B1B1F</color>
+    <color name="md_theme_light_surfaceVariant">#E1E2EC</color>
+    <color name="md_theme_light_onSurfaceVariant">#44474F</color>
+    <color name="md_theme_light_outline">#74777F</color>
+    <color name="md_theme_light_inverseOnSurface">#F2F0F4</color>
+    <color name="md_theme_light_inverseSurface">#303033</color>
+    <color name="md_theme_light_inversePrimary">#ADC7FF</color>
+    <color name="md_theme_light_shadow">#000000</color>
+    <color name="md_theme_light_surfaceTint">#005BC0</color>
+    <color name="md_theme_light_outlineVariant">#C4C6D0</color>
+    <color name="md_theme_light_scrim">#000000</color>
+    <color name="md_theme_dark_primary">#ADC7FF</color>
+    <color name="md_theme_dark_onPrimary">#002E68</color>
+    <color name="md_theme_dark_primaryContainer">#004493</color>
+    <color name="md_theme_dark_onPrimaryContainer">#D8E2FF</color>
+    <color name="md_theme_dark_secondary">#BFC6DC</color>
+    <color name="md_theme_dark_onSecondary">#283041</color>
+    <color name="md_theme_dark_secondaryContainer">#3F4759</color>
+    <color name="md_theme_dark_onSecondaryContainer">#DBE2F9</color>
+    <color name="md_theme_dark_tertiary">#DEBCDF</color>
+    <color name="md_theme_dark_onTertiary">#402843</color>
+    <color name="md_theme_dark_tertiaryContainer">#583E5B</color>
+    <color name="md_theme_dark_onTertiaryContainer">#FBD7FC</color>
+    <color name="md_theme_dark_error">#FFB4AB</color>
+    <color name="md_theme_dark_errorContainer">#93000A</color>
+    <color name="md_theme_dark_onError">#690005</color>
+    <color name="md_theme_dark_onErrorContainer">#FFDAD6</color>
+    <color name="md_theme_dark_background">#1B1B1F</color>
+    <color name="md_theme_dark_onBackground">#E3E2E6</color>
+    <color name="md_theme_dark_surface">#1B1B1F</color>
+    <color name="md_theme_dark_onSurface">#E3E2E6</color>
+    <color name="md_theme_dark_surfaceVariant">#44474F</color>
+    <color name="md_theme_dark_onSurfaceVariant">#C4C6D0</color>
+    <color name="md_theme_dark_outline">#8E9099</color>
+    <color name="md_theme_dark_inverseOnSurface">#1B1B1F</color>
+    <color name="md_theme_dark_inverseSurface">#E3E2E6</color>
+    <color name="md_theme_dark_inversePrimary">#005BC0</color>
+    <color name="md_theme_dark_shadow">#000000</color>
+    <color name="md_theme_dark_surfaceTint">#ADC7FF</color>
+    <color name="md_theme_dark_outlineVariant">#44474F</color>
+    <color name="md_theme_dark_scrim">#000000</color>
 
-    <!-- Theme variables -->
-    <color name="color_control_normal">@color/primary_text_color</color>
-    <color name="status_bar_color">@color/primary_color</color>
-    <color name="navigation_bar_color">#aaffffff</color>
     <color name="list_multiselect_background">#ffeeeeee</color>
-    <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">
-        @color/secondary_color
-    </color>
-    <color name="white">#ffffffff</color>
 
     <!-- Log viewer tag colors -->
     <color name="debug_tag_color">#444444</color>
diff --git a/ui/src/main/res/values/styles.xml b/ui/src/main/res/values/styles.xml
index e9a174cf..019cb300 100644
--- a/ui/src/main/res/values/styles.xml
+++ b/ui/src/main/res/values/styles.xml
@@ -1,49 +1,28 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <style name="WireGuardTheme" parent="Theme.Material3.DayNight">
-        <item name="colorPrimary">@color/primary_color</item>
-        <item name="colorOnPrimary">@color/color_control_normal</item>
-        <item name="colorPrimaryDark">@color/primary_color</item>
-        <item name="colorPrimaryVariant">@color/primary_light_color</item>
-        <item name="colorSecondary">@color/secondary_color</item>
-        <item name="colorOnSecondary">@color/secondary_text_color</item>
-        <item name="colorSurface">@color/primary_color</item>
-        <item name="colorOnSurface">@color/color_control_normal</item>
-        <item name="colorBackground">@color/primary_color</item>
-        <item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
-        <item name="colorControlNormal">@color/color_control_normal</item>
-        <item name="elevationOverlayColor">@color/primary_light_color</item>
-        <item name="elevationOverlayEnabled">true</item>
-        <item name="android:statusBarColor">@color/status_bar_color</item>
-        <item name="android:windowBackground">@color/primary_color</item>
-        <item name="materialCardViewStyle">@style/AppTheme.MaterialCardView</item>
-        <item name="toolbarStyle">@style/WireGuardTheme.Toolbar</item>
-    </style>
-
     <style name="WireGuardTheme.Toolbar" parent="Widget.Material3.Toolbar">
-        <item name="android:background">?attr/colorBackground</item>
+        <item name="android:background">?attr/colorSurface</item>
     </style>
 
-    <style name="AppTheme" parent="WireGuardTheme" />
+    <style name="AppTheme" parent="WireGuardTheme">
+        <item name="android:statusBarColor">?android:colorBackground</item>
+        <item name="android:navigationBarColor">?android:colorBackground</item>
+        <item name="android:windowLightNavigationBar">@bool/light_navigation_bar</item>
+        <item name="android:windowLightStatusBar">@bool/light_status_bar</item>
+        <item name="materialCardViewStyle">@style/AppTheme.MaterialCardView</item>
+        <item name="toolbarStyle">@style/WireGuardTheme.Toolbar</item>
+        <item name="bottomSheetDialogTheme">@style/WireGuardTheme.BottomSheetDialog</item>
+    </style>
 
-    <style name="AppTheme.MaterialCardView" parent="Widget.MaterialComponents.CardView">
+    <style name="AppTheme.MaterialCardView" parent="Widget.Material3.CardView.Elevated">
         <item name="cornerRadius">4dp</item>
-        <item name="cardElevation">4dp</item>
         <item name="contentPadding">8dp</item>
-        <item name="cardBackgroundColor">?attr/elevationOverlayColor</item>
     </style>
 
-    <style name="BottomSheetDialogTheme" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
+    <style name="WireGuardTheme.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
         <item name="android:windowIsFloating">false</item>
-        <item name="android:navigationBarColor">?attr/colorBackground</item>
-        <item name="android:statusBarColor">@android:color/transparent</item>
-        <item name="android:windowTranslucentNavigation">false</item>
-        <item name="android:windowIsTranslucent">false</item>
-        <item name="android:backgroundDimEnabled">true</item>
-        <item name="android:backgroundDimAmount">0.5</item>
-        <item name="android:windowTranslucentStatus">false</item>
-        <item name="android:colorBackground">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 
     <style name="NoBackgroundTheme" parent="AppTheme">
@@ -62,8 +41,4 @@
     <style name="DetailText" parent="TextAppearance.MaterialComponents.Body1" />
 
     <style name="SectionText" parent="TextAppearance.MaterialComponents.Subtitle1" />
-
-    <style name="ThemeOverlay.AppTheme.TextInputEditText.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
-        <item name="colorControlActivated">@color/color_control_normal</item>
-    </style>
 </resources>
diff --git a/ui/src/main/res/values/themes.xml b/ui/src/main/res/values/themes.xml
new file mode 100644
index 00000000..e8d36cdd
--- /dev/null
+++ b/ui/src/main/res/values/themes.xml
@@ -0,0 +1,31 @@
+
+<resources>
+    <style name="WireGuardTheme" parent="Theme.Material3.Light">
+        <item name="colorPrimary">@color/md_theme_light_primary</item>
+        <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
+        <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
+        <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
+        <item name="colorSecondary">@color/md_theme_light_secondary</item>
+        <item name="colorOnSecondary">@color/md_theme_light_onSecondary</item>
+        <item name="colorSecondaryContainer">@color/md_theme_light_secondaryContainer</item>
+        <item name="colorOnSecondaryContainer">@color/md_theme_light_onSecondaryContainer</item>
+        <item name="colorTertiary">@color/md_theme_light_tertiary</item>
+        <item name="colorOnTertiary">@color/md_theme_light_onTertiary</item>
+        <item name="colorTertiaryContainer">@color/md_theme_light_tertiaryContainer</item>
+        <item name="colorOnTertiaryContainer">@color/md_theme_light_onTertiaryContainer</item>
+        <item name="colorError">@color/md_theme_light_error</item>
+        <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
+        <item name="colorOnError">@color/md_theme_light_onError</item>
+        <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
+        <item name="android:colorBackground">@color/md_theme_light_background</item>
+        <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
+        <item name="colorSurface">@color/md_theme_light_surface</item>
+        <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
+        <item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
+        <item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
+        <item name="colorOutline">@color/md_theme_light_outline</item>
+        <item name="colorOnSurfaceInverse">@color/md_theme_light_inverseOnSurface</item>
+        <item name="colorSurfaceInverse">@color/md_theme_light_inverseSurface</item>
+        <item name="colorPrimaryInverse">@color/md_theme_light_inversePrimary</item>
+    </style>
+</resources>
diff --git a/ui/src/main/res/values/tv_colors.xml b/ui/src/main/res/values/tv_colors.xml
index f330bedc..40fb45a0 100644
--- a/ui/src/main/res/values/tv_colors.xml
+++ b/ui/src/main/res/values/tv_colors.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="tv_primary_color">#ff212121</color>
+    <color name="tv_secondary_dark_color">#ff0059c1</color>
     <color name="tv_card_background">@color/tv_primary_color</color>
     <color name="tv_card_delete_background">#b00020</color>
 </resources>
diff --git a/ui/src/main/res/values/tv_styles.xml b/ui/src/main/res/values/tv_styles.xml
index 536ca752..a78f2d63 100644
--- a/ui/src/main/res/values/tv_styles.xml
+++ b/ui/src/main/res/values/tv_styles.xml
@@ -10,7 +10,6 @@
         <item name="colorOnSecondary">#ff0059c1</item>
         <item name="colorSurface">@color/tv_primary_color</item>
         <item name="colorOnSurface">#fffafafa</item>
-        <item name="colorBackground">@color/tv_primary_color</item>
         <item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
         <item name="colorControlNormal">#fffafafa</item>
         <item name="elevationOverlayEnabled">false</item>
@@ -25,15 +24,10 @@
     <style name="TextInputLayoutBase" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
         <item name="boxStrokeColor">?attr/colorSecondary</item>
         <item name="hintTextColor">?attr/colorOnPrimary</item>
-        <item name="materialThemeOverlay">
-            @style/ThemeOverlay.AppTheme.TextInputEditText.OutlinedBox
-        </item>
     </style>
 
     <style name="TvTheme.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
-        <item name="colorPrimary">@color/secondary_color</item>
-        <item name="colorSecondary">@color/secondary_color</item>
-        <item name="android:windowBackground">?attr/colorBackground</item>
+        <item name="android:windowBackground">?attr/colorSurface</item>
     </style>
 
     <style name="TvTheme.MaterialCardView" parent="Widget.MaterialComponents.CardView">