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

RELEASE-NOTES.txt

@@ -1,5 +1,6 @@
 20.5
 -----
+* [*] [Jetpack-only] Block Editor: Makes some small changes to the editor's accent colours for consistency. [#19113]
 * [*] User Mention: Split the suggestions list into a prominent section and a regular section. [#19064]
 * [*] Use larger thumbnail previews for recommended themes during site creation [https://github.com/wordpress-mobile/WordPress-iOS/pull/18972]
 

WordPress/Classes/Extensions/Colors and Styles/MurielColor.swift

@@ -69,6 +69,7 @@ struct MurielColor {
     static let textSubtle = AppStyleGuide.textSubtle
     static let warning = AppStyleGuide.warning
     static let jetpackGreen = AppStyleGuide.jetpackGreen
+    static let editorPrimary = AppStyleGuide.editorPrimary
 
     /// The full name of the color, with required shade value
     func assetName() -> String {

WordPress/Classes/Extensions/Colors and Styles/UIColor+MurielColors.swift

@@ -62,6 +62,12 @@ extension UIColor {
         return muriel(color: .primary, shade)
     }
 
+    /// Muriel editor primary color
+    static var editorPrimary = muriel(color: .editorPrimary)
+    class func editorPrimary(_ shade: MurielColorShade) -> UIColor {
+        return muriel(color: .editorPrimary, shade)
+    }
+
     /// Muriel success color
     static var success = muriel(color: .success)
     class func success(_ shade: MurielColorShade) -> UIColor {

WordPress/Classes/Extensions/Colors and Styles/UIColor+MurielColorsObjC.swift

@@ -16,6 +16,11 @@
         return .primaryDark
     }
 
+    @available(swift, obsoleted: 1.0)
+    static func murielEditorPrimary() -> UIColor {
+        return .editorPrimary
+    }
+
     @available(swift, obsoleted: 1.0)
     static func murielNeutral() -> UIColor {
         return .neutral

WordPress/Classes/System/WordPressAppDelegate.swift

@@ -881,6 +881,17 @@ extension WordPressAppDelegate {
         UIButton.appearance(whenContainedInInstancesOf: [WPActionBar.self]).tintColor = .primary
         WPActionBar.appearance().barBackgroundColor = .basicBackground
         WPActionBar.appearance().lineColor = .basicBackground
+
+        // Post Settings styles
+        UITableView.appearance(whenContainedInInstancesOf: [AztecNavigationController.self]).tintColor = .editorPrimary
+        UISwitch.appearance(whenContainedInInstancesOf: [AztecNavigationController.self]).onTintColor = .editorPrimary
+
+        /// Sets the `tintColor` for parent category selection within the Post Settings screen
+        UIView.appearance(whenContainedInInstancesOf: [PostCategoriesViewController.self]).tintColor = .editorPrimary
+
+        /// It's necessary to target `PostCategoriesViewController` a second time to "reset" the UI element's `tintColor` for use in the app's Site Settings screen.
+        UIView.appearance(whenContainedInInstancesOf: [PostCategoriesViewController.self, WPSplitViewController.self]).tintColor = .primary
+
     }
 }
 

WordPress/Classes/Utility/App Configuration/AppStyleGuide.swift

@@ -21,6 +21,7 @@ extension AppStyleGuide {
     static let textSubtle = MurielColor(name: .gray, shade: .shade50)
     static let warning = MurielColor(name: .yellow)
     static let jetpackGreen = MurielColor(name: .jetpackGreen)
+    static let editorPrimary = MurielColor(name: .blue)
 }
 
 // MARK: - Images

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -408,6 +408,14 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
         }
     }
 
+    override func present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Void)? = nil) {
+        super.present(viewControllerToPresent, animated: flag, completion: completion)
+
+        // Update the tint color for React Native modals when presented
+        let presentedView = presentedViewController?.view
+        presentedView?.tintColor = .editorPrimary
+    }
+
     // MARK: - Functions
 
     private var keyboardShowObserver: Any?
@@ -554,12 +562,16 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
 extension GutenbergViewController {
     private func setupGutenbergView() {
         view.backgroundColor = .white
+        view.tintColor = .editorPrimary
         gutenberg.rootView.translatesAutoresizingMaskIntoConstraints = false
         gutenberg.rootView.backgroundColor = .basicBackground
         view.addSubview(gutenberg.rootView)
 
         view.pinSubviewToAllEdges(gutenberg.rootView)
         gutenberg.rootView.pinSubviewToAllEdges(ghostView)
+
+        // Update the tint color of switches within React Native modals, as they require direct mutation
+        UISwitch.appearance(whenContainedInInstancesOf: [RCTModalHostViewController.self]).onTintColor = .editorPrimary
     }
 }
 

WordPress/Classes/ViewRelated/Post/Categories/WPAddPostCategoryViewController.m

@@ -40,6 +40,7 @@ - (void)viewDidLoad
     self.tableView.sectionFooterHeight = 0.0f;
     // Set this to 0 to avoid automattic sizing of cells and getting label cell to short.
     self.tableView.estimatedRowHeight = 0.0f;
+    self.view.tintColor = [UIColor murielEditorPrimary];
 
     self.saveButtonItem = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"Save", @"Save button label (saving content, ex: Post, Page, Comment, Category).")
                                                            style:[WPStyleGuide barButtonStyleForDone]

WordPress/Classes/ViewRelated/Post/PostTagPickerViewController.swift

@@ -41,6 +41,7 @@ class PostTagPickerViewController: UIViewController {
         WPStyleGuide.configureTableViewColors(tableView: tableView)
 
         view.backgroundColor = .listBackground
+        view.tintColor = .editorPrimary
 
         textView.delegate = self
         // Do any additional setup after loading the view, typically from a nib.

WordPress/Classes/ViewRelated/Post/Scheduling/SchedulingDatePickerViewController.swift

@@ -73,6 +73,7 @@ class SchedulingDatePickerViewController: UIViewController, DatePickerSheet, Dat
         navigationItem.setRightBarButton(doneButton, animated: false)
 
         setup(topView: chosenValueRow, pickerView: datePickerView)
+        view.tintColor = .editorPrimary
 
         setupForAccessibility()
     }

WordPress/Jetpack/AppStyleGuide.swift

@@ -22,6 +22,7 @@ extension AppStyleGuide {
     static let textSubtle = MurielColor(name: .gray, shade: .shade50)
     static let warning = MurielColor(name: .yellow)
     static let jetpackGreen = MurielColor(name: .jetpackGreen)
+    static let editorPrimary = MurielColor(name: .blue)
 }
 
 // MARK: - Images