[Gutenberg] Set consistent editor colours in both the WordPress and Jetpack apps

RELEASE-NOTES.txt

@@ -13,6 +13,7 @@
 
 20.5
 -----
+* [*] [Jetpack-only] Block Editor: Makes some small changes to the editor's accent colours for consistency. [#16968]
 * [*] Use larger thumbnail previews for recommended themes during site creation [https://github.com/wordpress-mobile/WordPress-Android/pull/16848]
 * [***] [internal] Block Editor: List block: Adds support for V2 behind a feature flag [https://github.com/WordPress/gutenberg/pull/42702]
 * [*] Jetpack App: Use the Jetpack green color for the skip buttons text in site creation [https://github.com/wordpress-mobile/WordPress-Android/pull/16994]

WordPress/src/jetpack/res/values-night/colors_base.xml

@@ -5,5 +5,7 @@
     <color name="colorSecondary">@color/primary_40</color>
     <color name="colorSecondaryVariant">@color/primary_50</color>
 
+    <color name="colorPrimaryEditor">@color/blue_30</color>
+
     <color name="nav_bar">@color/white</color>
 </resources>

WordPress/src/jetpack/res/values/colors_base.xml

@@ -5,6 +5,8 @@
     <color name="colorSecondary">@color/primary</color>
     <color name="colorSecondaryVariant">@color/primary_40</color>
 
+    <color name="colorPrimaryEditor">@color/blue_50</color>
+
     <color name="primary">@color/jetpack_green_50</color>
     <color name="primary_0">@color/jetpack_green_0</color>
     <color name="primary_5">@color/jetpack_green_5</color>

WordPress/src/main/java/org/wordpress/android/ui/posts/AddCategoryFragment.java

@@ -11,6 +11,7 @@
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.app.AppCompatDialogFragment;
+import androidx.appcompat.view.ContextThemeWrapper;
 
 import com.google.android.material.dialog.MaterialAlertDialogBuilder;
 
@@ -48,7 +49,8 @@ public Dialog onCreateDialog(Bundle savedInstanceState) {
 
         initSite(savedInstanceState);
 
-        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        AlertDialog.Builder builder =
+                new MaterialAlertDialogBuilder(new ContextThemeWrapper(getActivity(), R.style.PostSettingsTheme));
         // Get the layout inflater
         LayoutInflater inflater = getActivity().getLayoutInflater();
 

WordPress/src/main/java/org/wordpress/android/ui/posts/PostDatePickerDialogFragment.kt

@@ -32,6 +32,7 @@ class PostDatePickerDialogFragment : DialogFragment() {
 
         val datePickerDialog = DatePickerDialog(
                 requireContext(),
+                R.style.PostSettingsCalendar,
                 null,
                 viewModel.year ?: 0,
                 viewModel.month ?: 0,

WordPress/src/main/java/org/wordpress/android/ui/posts/PostSettingsInputDialogFragment.java

@@ -12,6 +12,7 @@
 import android.widget.TextView;
 
 import androidx.appcompat.app.AlertDialog;
+import androidx.appcompat.view.ContextThemeWrapper;
 import androidx.fragment.app.DialogFragment;
 
 import com.google.android.material.dialog.MaterialAlertDialogBuilder;
@@ -83,7 +84,8 @@ public void onDismiss(DialogInterface dialog) {
 
     @Override
     public Dialog onCreateDialog(Bundle savedInstanceState) {
-        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        AlertDialog.Builder builder =
+                new MaterialAlertDialogBuilder(new ContextThemeWrapper(getActivity(), R.style.PostSettingsTheme));
         LayoutInflater layoutInflater = LayoutInflater.from(getActivity());
         //noinspection InflateParams
         View dialogView = layoutInflater.inflate(R.layout.post_settings_input_dialog, null);

WordPress/src/main/java/org/wordpress/android/ui/posts/PostSettingsListDialogFragment.java

@@ -9,6 +9,7 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AlertDialog;
+import androidx.appcompat.view.ContextThemeWrapper;
 import androidx.fragment.app.DialogFragment;
 
 import com.google.android.material.dialog.MaterialAlertDialogBuilder;
@@ -72,7 +73,8 @@ public void onAttach(Activity activity) {
     @NonNull
     @Override
     public Dialog onCreateDialog(Bundle savedInstanceState) {
-        AlertDialog.Builder builder = new MaterialAlertDialogBuilder(getActivity());
+        AlertDialog.Builder builder =
+                new MaterialAlertDialogBuilder(new ContextThemeWrapper(getActivity(), R.style.PostSettingsTheme));
 
         DialogInterface.OnClickListener clickListener = new DialogInterface.OnClickListener() {
             @Override

WordPress/src/main/java/org/wordpress/android/ui/posts/PostTimePickerDialogFragment.kt

@@ -6,8 +6,10 @@ import android.app.TimePickerDialog.OnTimeSetListener
 import android.content.Context
 import android.os.Bundle
 import android.text.format.DateFormat
+import androidx.appcompat.view.ContextThemeWrapper
 import androidx.fragment.app.DialogFragment
 import androidx.lifecycle.ViewModelProvider
+import org.wordpress.android.R.style
 import org.wordpress.android.WordPress
 import org.wordpress.android.ui.posts.PublishSettingsFragmentType.EDIT_POST
 import org.wordpress.android.ui.posts.PublishSettingsFragmentType.PREPUBLISHING_NUDGES
@@ -32,8 +34,9 @@ class PostTimePickerDialogFragment : DialogFragment() {
         }
 
         val is24HrFormat = DateFormat.is24HourFormat(activity)
+        val context = ContextThemeWrapper(activity, style.PostSettingsCalendar)
         val timePickerDialog = TimePickerDialog(
-                activity,
+                context,
                 OnTimeSetListener { _, selectedHour, selectedMinute ->
                     viewModel.onTimeSelected(selectedHour, selectedMinute)
                 },

WordPress/src/main/res/layout/add_category.xml

@@ -2,6 +2,7 @@
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    android:theme="@style/PostSettingsTheme"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:paddingStart="@dimen/margin_extra_medium_large"

WordPress/src/main/res/layout/categories_row.xml

@@ -15,5 +15,6 @@
         android:textAppearance="?attr/textAppearanceSubtitle1"
         android:checkMark="?android:attr/listChoiceIndicatorMultiple"
         android:gravity="center_vertical"
+        android:theme="@style/PostSettingsTheme"
         tools:text="Pony Category" />
 </org.wordpress.android.widgets.CheckedLinearLayout>

WordPress/src/main/res/layout/edit_post_settings_fragment.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/settings_fragment_root"
+    android:theme="@style/PostSettingsTheme"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 

WordPress/src/main/res/layout/fragment_post_settings_tags.xml

@@ -2,6 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:theme="@style/PostSettingsTheme"
     android:orientation="vertical">
 
     <com.google.android.material.textfield.TextInputLayout

WordPress/src/main/res/layout/post_settings_input_dialog.xml

@@ -11,6 +11,7 @@
     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/post_settings_input_dialog_input_layout"
         style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
+        android:theme="@style/PostSettingsTheme"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="@dimen/margin_large">

WordPress/src/main/res/values-night/colors_base.xml

@@ -5,5 +5,7 @@
     <color name="colorSecondary">@color/primary_30</color>
     <color name="colorSecondaryVariant">@color/primary_50</color>
 
+    <color name="colorPrimaryEditor">@color/primary_30</color>
+
     <color name="nav_bar">@color/colorPrimary</color>
 </resources>

WordPress/src/main/res/values-night/styles.xml

@@ -126,6 +126,15 @@
         <item name="android:textColor">?attr/colorSecondaryVariant</item>
     </style>
 
+    <!--Post Settings Styles-->
+    <style name="PostSettingsTheme" parent="Base.Wordpress">
+        <item name="colorPrimary">@color/colorPrimaryEditor</item>
+        <item name="colorSecondary">@color/colorPrimaryEditor</item>
+        <item name="colorSecondaryVariant">@color/colorPrimaryEditor</item>
+        <item name="colorAccent">@color/colorPrimaryEditor</item>
+        <item name="colorControlActivated">@color/colorPrimaryEditor</item>
+    </style>
+
     <!-- Domains -->
     <style name="Domains.Button.Primary.Unelevated.OnPrimarySurface" parent="WordPress.Button.Primary.Unelevated" />
 

WordPress/src/main/res/values/colors_base.xml

@@ -5,6 +5,8 @@
     <color name="colorSecondary">@color/primary</color>
     <color name="colorSecondaryVariant">@color/primary_70</color>
 
+    <color name="colorPrimaryEditor">@color/blue_50</color>
+
     <color name="primary">@color/blue_50</color>
     <color name="primary_0">@color/blue_0</color>
     <color name="primary_5">@color/blue_5</color>

WordPress/src/main/res/values/styles.xml

@@ -901,6 +901,18 @@
     </style>
 
     <!--Post Settings Styles-->
+    <style name="PostSettingsTheme" parent="Base.Wordpress">
+        <item name="colorPrimary">@color/colorPrimaryEditor</item>
+        <item name="colorSecondary">@color/colorPrimaryEditor</item>
+        <item name="colorAccent">@color/colorPrimaryEditor</item>
+        <item name="colorControlActivated">@color/colorPrimaryEditor</item>
+    </style>
+
+    <style name="PostSettingsCalendar" parent="ThemeOverlay.Material3.MaterialCalendar">
+        <item name="colorAccent">@color/colorPrimaryEditor</item>
+        <item name="colorControlActivated">@color/colorPrimaryEditor</item>
+    </style>
+
     <style name="PostSettingsCardViewInnerLayout">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
@@ -910,7 +922,7 @@
     <style name="PostSettingsSectionHeader">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
-        <item name="android:textColor">?attr/colorPrimary</item>
+        <item name="android:textColor">@color/colorPrimaryEditor</item>
         <item name="android:textAppearance">?attr/textAppearanceSubtitle2</item>
         <item name="android:layout_marginBottom">@dimen/margin_small</item>
         <item name="android:layout_marginTop">@dimen/margin_extra_large</item>

build.gradle

@@ -10,7 +10,7 @@ plugins {
 ext {
     wordPressUtilsVersion = '2.7.0'
     wordPressLoginVersion = '0.18.0'
-    gutenbergMobileVersion = 'v1.81.0'
+    gutenbergMobileVersion = 'v1.82.0-alpha1'
     storiesVersion = '1.4.0'
     aboutAutomatticVersion = '0.0.6'
 

libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/gutenberg_container"
+    android:theme="@style/GutenbergContainerTheme"
     android:layout_height="match_parent"
     android:layout_width="match_parent"
     android:background="@android:color/white"

libs/editor/src/main/res/values/colors.xml

@@ -30,5 +30,6 @@
 
     <!-- Gutenberg -->
     <color name="background_color">#f6f7f7</color>
+    <color name="accent_color">#0675c4</color>
 
 </resources>

libs/editor/src/main/res/values/styles.xml

@@ -4,6 +4,10 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <style name="GutenbergContainerTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
+        <item name="colorAccent">@color/accent_color</item>
+    </style>
+
     <style name="FormatBarButton">
         <item name="android:minWidth">@dimen/format_bar_height</item>
         <item name="android:minHeight">@dimen/format_bar_height</item>