[MOB-3152] Refactor Ecosia theming

BrowserKit/Sources/Common/Theming/DarkTheme.swift

@@ -6,7 +6,10 @@ import UIKit
 
 public struct DarkTheme: Theme {
     public var type: ThemeType = .dark
+    /* Ecosia: Use Ecosia color palette subclass
     public var colors: ThemeColourPalette = DarkColourPalette()
+     */
+    public var colors: EcosiaThemeColourPalette = DarkColourPalette()
 
     public init() {}
 }
@@ -17,12 +20,22 @@ public struct DarkTheme: Theme {
 /// and a regular dark theme.
 public struct NightModeTheme: Theme {
     public var type: ThemeType = .nightMode
+    /* Ecosia: Use Ecosia color palette subclass
     public var colors: ThemeColourPalette = DarkColourPalette()
+     */
+    public var colors: EcosiaThemeColourPalette = DarkColourPalette()
 
     public init() {}
 }
 
+/* Ecosia: Use Ecosia color palette subclass
 private struct DarkColourPalette: ThemeColourPalette {
+ */
+private struct DarkColourPalette: EcosiaThemeColourPalette {
+    var ecosia: EcosiaSemanticColors {
+        FakeEcosiaSemanticColors()
+    }
+
     // MARK: - Layers
     var layer1: UIColor = FXColors.DarkGrey60
     var layer2: UIColor = FXColors.DarkGrey30

BrowserKit/Sources/Common/Theming/EcosiaThemeColourPalette.swift

@@ -0,0 +1,114 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+import UIKit
+
+// This file is owned by Ecosia, it is only part of BrowserKit.Common since it needs to be used inside it.
+// It contains all of Ecosia official semantic color tokens referenced in the link below. Do not add a color that is not mapped there!
+// https://www.figma.com/design/8T2rTBVwynJKSdY6MQo5PQ/%E2%9A%9B%EF%B8%8F--Foundations?node-id=2237-3418&t=UKHtrxcc9UtOihsm-0
+// They are adopted by `EcosiaLightTheme` and `EcosiaDarkTheme` and should use `EcosiaColorPrimitive`.
+public protocol EcosiaSemanticColors {
+    // MARK: - Background
+    var backgroundPrimary: UIColor { get }
+    var backgroundSecondary: UIColor { get }
+    var backgroundTertiary: UIColor { get }
+    var backgroundQuaternary: UIColor { get }
+
+    // MARK: - Border
+    var borderDecorative: UIColor { get }
+
+    // MARK: - Brand
+    var brandPrimary: UIColor { get }
+
+    // MARK: - Button
+    var buttonBackgroundPrimary: UIColor { get }
+    var buttonBackgroundPrimaryActive: UIColor { get }
+    var buttonBackgroundSecondary: UIColor { get }
+    var buttonBackgroundSecondaryHover: UIColor { get }
+    var buttonContentSecondary: UIColor { get }
+    var buttonBackgroundTransparentActive: UIColor { get }
+
+    // MARK: - State
+    var stateInformation: UIColor { get }
+    var stateDisabled: UIColor { get }
+
+    // MARK: - Text
+    var textPrimary: UIColor { get }
+    var textInversePrimary: UIColor { get }
+    var textSecondary: UIColor { get }
+    var textTertiary: UIColor { get }
+
+    // MARK: - Snowflakes ⚠️ to be assessed ⚠️
+    var iconPrimary: UIColor { get }
+    var iconSecondary: UIColor { get }
+    var iconDecorative: UIColor { get }
+    var stateError: UIColor { get }
+    var backgroundHighlighted: UIColor { get } // Mapped as "loading"
+
+    // MARK: Unmapped Snowflakes
+    var barBackground: UIColor { get } // Light.backgroundPrimary + Dark.backgroundSecondary
+    var barSeparator: UIColor { get }
+    var ntpCellBackground: UIColor { get }
+    var ntpBackground: UIColor { get } // Light.backgroundTertiary + Dark.backgroundPrimary
+    var ntpIntroBackground: UIColor { get } // == barBackground
+    var impactMultiplyCardBackground: UIColor { get } // == ntpCellBackground
+    var newsPlaceholder: UIColor { get }
+    var modalBackground: UIColor { get } // Light.backgroundTertiary + Dark.backgroundSecondary
+    var secondarySelectedBackground: UIColor { get }
+    var buttonBackgroundNTPCustomization: UIColor { get }
+    var privateButtonBackground: UIColor { get }
+    var tabSelectedPrivateBackground: UIColor { get }
+    var toastImageTint: UIColor { get }
+    var newSeedCollectedCircle: UIColor { get }
+    var tabTrayScreenshotBackground: UIColor { get }
+    var tableViewRowText: UIColor { get }
+}
+
+public protocol EcosiaThemeColourPalette: ThemeColourPalette {
+    var ecosia: EcosiaSemanticColors { get }
+}
+
+/// Serves to make Firefox themes conform the new protocol.
+/// Should never end up in production UI!
+class FakeEcosiaSemanticColors: EcosiaSemanticColors {
+    var backgroundPrimary: UIColor = .systemGray
+    var backgroundSecondary: UIColor = .systemGray
+    var backgroundTertiary: UIColor = .systemGray
+    var backgroundQuaternary: UIColor = .systemGray
+    var borderDecorative: UIColor = .systemGray
+    var brandPrimary: UIColor = .systemGray
+    var buttonBackgroundPrimary: UIColor = .systemGray
+    var buttonBackgroundPrimaryActive: UIColor = .systemGray
+    var buttonBackgroundSecondary: UIColor = .systemGray
+    var buttonBackgroundSecondaryHover: UIColor = .systemGray
+    var buttonContentSecondary: UIColor = .systemGray
+    var buttonBackgroundTransparentActive: UIColor = .systemGray
+    var iconPrimary: UIColor = .systemGray
+    var iconSecondary: UIColor = .systemGray
+    var iconDecorative: UIColor = .systemGray
+    var stateError: UIColor = .systemGray
+    var stateInformation: UIColor = .systemGray
+    var stateDisabled: UIColor = .systemGray
+    var textPrimary: UIColor = .systemGray
+    var textInversePrimary: UIColor = .systemGray
+    var textSecondary: UIColor = .systemGray
+    var textTertiary: UIColor = .systemGray
+    var backgroundHighlighted: UIColor = .systemGray
+    var barBackground: UIColor = .systemGray
+    var barSeparator: UIColor = .systemGray
+    var ntpCellBackground: UIColor = .systemGray
+    var ntpBackground: UIColor = .systemGray
+    var ntpIntroBackground: UIColor = .systemGray
+    var impactMultiplyCardBackground: UIColor = .systemGray
+    var newsPlaceholder: UIColor = .systemGray
+    var modalBackground: UIColor = .systemGray
+    var secondarySelectedBackground: UIColor = .systemGray
+    var buttonBackgroundNTPCustomization: UIColor = .systemGray
+    var privateButtonBackground: UIColor = .systemGray
+    var tabSelectedPrivateBackground: UIColor = .systemGray
+    var toastImageTint: UIColor = .systemGray
+    var newSeedCollectedCircle: UIColor = .systemGray
+    var tabTrayScreenshotBackground: UIColor = .systemGray
+    var tableViewRowText: UIColor = .systemGray
+}

BrowserKit/Sources/Common/Theming/LightTheme.swift

@@ -6,12 +6,22 @@ import UIKit
 
 public struct LightTheme: Theme {
     public var type: ThemeType = .light
+    /* Ecosia: Use Ecosia color palette subclass
     public var colors: ThemeColourPalette = LightColourPalette()
+     */
+    public var colors: EcosiaThemeColourPalette = LightColourPalette()
 
     public init() {}
 }
 
+/* Ecosia: Use Ecosia color palette subclass
 private struct LightColourPalette: ThemeColourPalette {
+ */
+private struct LightColourPalette: EcosiaThemeColourPalette {
+    var ecosia: EcosiaSemanticColors {
+        FakeEcosiaSemanticColors()
+    }
+
     // MARK: - Layers
     var layer1: UIColor = FXColors.LightGrey10
     var layer2: UIColor = FXColors.White

BrowserKit/Sources/Common/Theming/PrivateModeTheme.swift

@@ -6,12 +6,22 @@ import UIKit
 
 public struct PrivateModeTheme: Theme {
     public var type: ThemeType = .privateMode
+    /* Ecosia: Use Ecosia color palette subclass
     public var colors: ThemeColourPalette = PrivateModeColorPalette()
+     */
+    public var colors: EcosiaThemeColourPalette = PrivateModeColorPalette()
 
     public init() {}
 }
 
+/* Ecosia: Use Ecosia color palette subclass
 private struct PrivateModeColorPalette: ThemeColourPalette {
+ */
+private struct PrivateModeColorPalette: EcosiaThemeColourPalette {
+    var ecosia: EcosiaSemanticColors {
+        FakeEcosiaSemanticColors()
+    }
+
     // MARK: - Layers
     var layer1: UIColor = FXColors.Violet90
     var layer2: UIColor = FXColors.Violet90

BrowserKit/Sources/Common/Theming/Theme.swift

@@ -9,5 +9,8 @@ import Foundation
 /// dark mode) and fonts for the application.
 public protocol Theme {
     var type: ThemeType { get }
+    /* Ecosia: Use Ecosia color palette subclass
     var colors: ThemeColourPalette { get }
+     */
+    var colors: EcosiaThemeColourPalette { get }
 }

BrowserKit/Sources/Common/Theming/ThemeColourPalette.swift

@@ -97,8 +97,4 @@ public protocol ThemeColourPalette {
 
     // MARK: - Shadow
     var shadowDefault: UIColor { get }
-
-    // MARK: - Ecosia Legacy Colors
-    // TODO Ecosia Upgrade: Can we get rid of them? [MOB-3152]
-    var layer6: UIColor { get }
 }

BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift

@@ -104,7 +104,6 @@ public class PrimaryRoundedButton: ResizableButton, ThemeApplicable {
         backgroundColorNormal = theme.colors.actionPrimary
         backgroundColorHighlighted = theme.colors.actionPrimaryHover
         backgroundColorDisabled = theme.colors.actionPrimaryDisabled
-        // TODO Ecosia Upgrade: Review if button color needs updating [MOB-3152]
         foregroundColor = theme.colors.textInverted
         foregroundColorDisabled = theme.colors.textInvertedDisabled
         setNeedsUpdateConfiguration()