Add option to customize the app accent color

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

@@ -12,6 +12,7 @@ enum MurielColorName: String, CustomStringConvertible {
     case red
     case yellow
     case jetpackGreen
+    case wooCommercePurple
 
     var description: String {
         // can't use .capitalized because it lowercases the P and B in "wordPressBlue"
@@ -58,12 +59,9 @@ struct MurielColor {
     }
 
     // MARK: - Muriel's semantic colors
-    static let accent = AppStyleGuide.accent
-    static let brand = AppStyleGuide.brand
     static let divider = AppStyleGuide.divider
     static let error = AppStyleGuide.error
     static let gray = AppStyleGuide.gray
-    static let primary = AppStyleGuide.primary
     static let success = AppStyleGuide.success
     static let text = AppStyleGuide.text
     static let textSubtle = AppStyleGuide.textSubtle

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

@@ -32,19 +32,38 @@ extension UIColor {
         return muriel(color: newColor)
     }
 }
+
 // MARK: - Basic Colors
 extension UIColor {
+
+    /// - Note: We decided to replace `primary`, `accent` and `brand` colors with user customizable `AppColor.accentColor`,
+    /// however long term goal here is also to unify these 3 colors into a single `appAccent` color.
+
+    /// Muriel primary color
+    static var primary: UIColor {
+        UIColor(AppColor.accentColor)
+    }
+    class func primary(_ shade: MurielColorShade) -> UIColor {
+        UIColor(AppColor.accentColor(shade))
+    }
+    static var primaryLight: UIColor {
+        primary(.shade30)
+    }
+    static var primaryDark: UIColor {
+        primary(.shade70)
+    }
+
     /// Muriel accent color
-    static var accent = muriel(color: .accent)
-    static var accentDark = muriel(color: .accent, .shade70)
+    static var accent: UIColor {
+        UIColor(AppColor.accentColor)
+    }
     class func accent(_ shade: MurielColorShade) -> UIColor {
-        return muriel(color: .accent, shade)
+        UIColor(AppColor.accentColor(shade))
     }
 
     /// Muriel brand color
-    static var brand = muriel(color: .brand)
-    class func brand(_ shade: MurielColorShade) -> UIColor {
-        return muriel(color: .brand, shade)
+    static var brand: UIColor {
+        UIColor(AppColor.accentColor)
     }
 
     /// Muriel error color
@@ -54,14 +73,6 @@ extension UIColor {
         return muriel(color: .error, shade)
     }
 
-    /// Muriel primary color
-    static var primary = muriel(color: .primary)
-    static var primaryLight = muriel(color: .primary, .shade30)
-    static var primaryDark = muriel(color: .primary, .shade70)
-    class func primary(_ shade: MurielColorShade) -> UIColor {
-        return muriel(color: .primary, shade)
-    }
-
     /// Muriel editor primary color
     static var editorPrimary = muriel(color: .editorPrimary)
     class func editorPrimary(_ shade: MurielColorShade) -> UIColor {
@@ -239,12 +250,18 @@ extension UIColor {
     }
 
     static var barButtonItemTitle: UIColor {
-        return UIColor(light: UIColor.primary(.shade50), dark: UIColor.primary(.shade30))
+        return UIColor(light: primary(.shade50), dark: primary(.shade30))
     }
 
-// MARK: - WP Fancy Buttons
-    static var primaryButtonBackground = primary
-    static var primaryButtonDownBackground = muriel(color: .primary, .shade80)
+    // MARK: - WP Fancy Buttons
+
+    static var primaryButtonBackground: UIColor {
+        primary
+    }
+
+    static var primaryButtonDownBackground: UIColor {
+        primary(.shade80)
+    }
 
     static var secondaryButtonBackground: UIColor {
         return UIColor(light: .white, dark: .systemGray5)

WordPress/Classes/System/WordPressAppDelegate.swift

@@ -138,7 +138,6 @@ class WordPressAppDelegate: UIResponder, UIApplicationDelegate {
         InteractiveNotificationsManager.shared.registerForUserNotifications()
         setupPingHub()
         setupBackgroundRefresh(application)
-        setupComponentsAppearance()
         disableAnimationsForUITests(application)
 
         // This was necessary to properly load fonts for the Stories editor. I believe external libraries may require this call to access fonts.
@@ -951,6 +950,7 @@ extension WordPressAppDelegate {
         /// 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
 
+        setupComponentsAppearance()
     }
 }
 

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

@@ -13,12 +13,9 @@ struct AppStyleGuide {
 
 // MARK: - Colors
 extension AppStyleGuide {
-    static let accent = MurielColor(name: .pink)
-    static let brand = MurielColor(name: .wordPressBlue)
     static let divider = MurielColor(name: .gray, shade: .shade10)
     static let error = MurielColor(name: .red)
     static let gray = MurielColor(name: .gray)
-    static let primary = MurielColor(name: .blue)
     static let success = MurielColor(name: .green)
     static let text = MurielColor(name: .gray, shade: .shade80)
     static let textSubtle = MurielColor(name: .gray, shade: .shade50)

WordPress/Classes/Utility/WPImmuTableRows.swift

@@ -2,7 +2,6 @@ import Foundation
 import WordPressShared
 import Gridicons
 
-
 struct NavigationItemRow: ImmuTableRow {
     static let cell = ImmuTableCell.class(WPTableViewCellValue1.self)
 

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/Cards/Prompts/DashboardPromptsCardCell.swift

@@ -326,12 +326,19 @@ class DashboardPromptsCardCell: UICollectionViewCell, Reusable {
         super.init(frame: frame)
         setupViews()
         observeManagedObjectsChange()
+
+        NotificationCenter.default
+            .addObserver(self, selector: #selector(updateAppearance), name: .appColorDidUpdateAccent, object: nil)
     }
 
     required init?(coder: NSCoder) {
         super.init(coder: coder)
     }
 
+    deinit {
+        NotificationCenter.default.removeObserver(self)
+    }
+
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         //  refresh when the appearance style changed so the placeholder images are correctly recolored.
         if let previousTraitCollection = previousTraitCollection,
@@ -417,6 +424,11 @@ private extension DashboardPromptsCardCell {
         presenterViewController?.collectionView.collectionViewLayout.invalidateLayout()
     }
 
+    @objc
+    private func updateAppearance() {
+        answerButton.setTitleColor(WPStyleGuide.BloggingPrompts.buttonTitleColor, for: .normal)
+    }
+
     // MARK: - Managed object observer
 
     func observeManagedObjectsChange() {

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/Cards/Stats/DashboardStatsNudgeView.swift

@@ -19,13 +19,30 @@ final class DashboardStatsNudgeView: UIView {
         return label
     }()
 
+    private let title: String
+    private let hint: String?
+
     // MARK: - Init
 
-    convenience init(title: String, hint: String?, insets: UIEdgeInsets = Constants.margins) {
-        self.init(frame: .zero)
+    init(title: String, hint: String?, insets: UIEdgeInsets = Constants.margins) {
+        self.title = title
+        self.hint = hint
+
+        super.init(frame: .zero)
 
         setup(insets: insets)
-        setTitle(title: title, hint: hint)
+        updateTitleLabel()
+
+        NotificationCenter.default
+            .addObserver(self, selector: #selector(updateTitleLabel), name: .appColorDidUpdateAccent, object: nil)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    deinit {
+        NotificationCenter.default.removeObserver(self)
     }
 
     // MARK: - View setup
@@ -37,11 +54,7 @@ final class DashboardStatsNudgeView: UIView {
         prepareForVoiceOver()
     }
 
-    @objc private func buttonTapped() {
-        onTap?()
-    }
-
-    private func setTitle(title: String, hint: String?) {
+    @objc private func updateTitleLabel() {
         let externalAttachment = NSTextAttachment(image: UIImage.gridicon(.external, size: Constants.iconSize).withTintColor(.primary))
         externalAttachment.bounds = Constants.iconBounds
 
@@ -61,6 +74,10 @@ final class DashboardStatsNudgeView: UIView {
         titleLabel.attributedText = titleString
     }
 
+    @objc private func buttonTapped() {
+        onTap?()
+    }
+
     private enum Constants {
         static let iconSize = CGSize(width: 16, height: 16)
         static let iconBounds = CGRect(x: 0, y: -2, width: 16, height: 16)

WordPress/Classes/ViewRelated/Blog/Blog Details/Detail Header/BlogDetailHeaderView.swift

@@ -113,12 +113,19 @@ class BlogDetailHeaderView: UIView {
         super.init(frame: .zero)
 
         setupChildViews(items: items)
+
+        NotificationCenter.default
+            .addObserver(self, selector: #selector(updateAppearance), name: .appColorDidUpdateAccent, object: nil)
     }
 
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
+    deinit {
+        NotificationCenter.default.removeObserver(self)
+    }
+
     // MARK: - Child View Initialization
 
     private func setupChildViews(items: [ActionRow.Item]) {
@@ -145,6 +152,11 @@ class BlogDetailHeaderView: UIView {
         setupConstraintsForChildViews(showsActionRow)
     }
 
+    @objc
+    private func updateAppearance() {
+        titleView.subtitleButton.setTitleColor(.primary, for: .normal)
+    }
+
     // MARK: - Constraints
 
     private var topActionRowConstraint: NSLayoutConstraint?

WordPress/Classes/ViewRelated/Blog/My Site/MySiteViewController.swift

@@ -104,6 +104,9 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
         self.mySiteSettings = mySiteSettings
 
         super.init(nibName: nil, bundle: nil)
+
+        NotificationCenter.default
+            .addObserver(self, selector: #selector(updateAppearance), name: .appColorDidUpdateAccent, object: nil)
     }
 
     required init?(coder: NSCoder) {
@@ -281,6 +284,19 @@ class MySiteViewController: UIViewController, NoResultsViewHost {
                                                object: nil)
     }
 
+    @objc
+    func updateAppearance() {
+        guard AppConfiguration.isWordPress else {
+            return
+        }
+        /// - Note: workaround to update navigation bar tint
+        navigationController?.isNavigationBarHidden = true
+        DispatchQueue.main.async {
+            self.navigationController?.isNavigationBarHidden = false
+            self.setupNavBarAppearance()
+        }
+    }
+
     func updateNavigationTitle(for blog: Blog) {
         let blogName = blog.settings?.name
         let title = blogName != nil && blogName?.isEmpty == false

WordPress/Classes/ViewRelated/Blog/WPStyleGuide+BloggingPrompts.swift

@@ -6,7 +6,9 @@ extension WPStyleGuide {
         static let answerInfoButtonFont = WPStyleGuide.fontForTextStyle(.caption1)
         static let answerInfoButtonColor = UIColor.textSubtle
         static let buttonTitleFont = WPStyleGuide.fontForTextStyle(.subheadline)
-        static let buttonTitleColor = UIColor.primary
+        static var buttonTitleColor: UIColor {
+            .primary
+        }
         static let answeredLabelColor = UIColor.muriel(name: .green, .shade50)
     }
 }

WordPress/Classes/ViewRelated/Domains/Views/ShapeWithTextView.swift

@@ -35,7 +35,9 @@ struct ShapeWithTextView: View {
         // large rounded rectangle
         static let largeRoundedRectangleCornerRadius: CGFloat = 8.0
         static let largeRoundedRectangleTextPadding: CGFloat = 12.0
-        static let largeRoundedRectangleDefaultTextColor = Color(UIColor.muriel(color: .primary))
+        static var largeRoundedRectangleDefaultTextColor: Color {
+            .init(UIColor.primary)
+        }
         // small rounded rectangle
         static let smallRoundedRectangleCornerRadius: CGFloat = 4.0
         static let smallRoundedRectangleInsets = EdgeInsets(top: 4.0, leading: 8.0, bottom: 4.0, trailing: 8.0)

WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/Collapsable Header Collection View Cell/CollapsableHeaderCollectionViewCell.swift

@@ -12,7 +12,7 @@ class CollapsableHeaderCollectionViewCell: UICollectionViewCell {
     @IBOutlet weak var checkmarkImageView: UIImageView! {
         didSet {
             checkmarkImageView.image = UIImage(systemName: "checkmark.circle.fill")
-            checkmarkImageView.tintColor = accentColor
+            checkmarkImageView.tintColor = .primary
         }
     }
 
@@ -34,16 +34,6 @@ class CollapsableHeaderCollectionViewCell: UICollectionViewCell {
         stopGhostAnimation()
     }
 
-    var accentColor: UIColor {
-        return UIColor { (traitCollection: UITraitCollection) -> UIColor in
-            if traitCollection.userInterfaceStyle == .dark {
-                return UIColor.muriel(color: .primary, .shade40)
-            } else {
-                return UIColor.muriel(color: .primary, .shade50)
-            }
-        }
-    }
-
     var borderColor: UIColor {
         return UIColor.black.withAlphaComponent(0.08)
     }
@@ -94,7 +84,7 @@ class CollapsableHeaderCollectionViewCell: UICollectionViewCell {
     }
 
     private func styleSelectedBorder(animated: Bool = false) {
-        let imageBorderColor = isSelected ? accentColor.cgColor : borderColor.cgColor
+        let imageBorderColor = isSelected ? UIColor.primary.cgColor : borderColor.cgColor
         let imageBorderWidth = isSelected ? 2 : borderWith
         guard animated else {
             imageView.layer.borderColor = imageBorderColor

WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift

@@ -154,16 +154,6 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
     }
     private var minHeaderHeight: CGFloat = 0
 
-    private var accentColor: UIColor {
-        return UIColor { (traitCollection: UITraitCollection) -> UIColor in
-            if traitCollection.userInterfaceStyle == .dark {
-                return UIColor.muriel(color: .primary, .shade40)
-            } else {
-                return UIColor.muriel(color: .primary, .shade50)
-            }
-        }
-    }
-
     // MARK: - Static Helpers
     public static func closeButton(target: Any?, action: Selector) -> UIBarButtonItem {
         let closeButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
@@ -422,7 +412,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         primaryActionButton.titleLabel?.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .medium)
         primaryActionButton.titleLabel?.adjustsFontSizeToFitWidth = true
         primaryActionButton.titleLabel?.adjustsFontForContentSizeCategory = true
-        primaryActionButton.backgroundColor = accentColor
+        primaryActionButton.backgroundColor = .primary
         primaryActionButton.layer.cornerRadius = 8
     }