[MOB-3152] Refactor Ecosia theming (#834)

* [MOB-3152] Introduce color primitives and review semantic colors * [MOB-3152] Introduce EcosiaSemanticColors into color palette * [MOB-3152] Move ecosia color palette to common and use it on global Theme * [MOB-3152] Replace EcosiaTheme.primaryBrand * [MOB-3152] Replace EcosiaTheme.secondaryBrand * [MOB-3152] Replace EcosiaTheme.border * [MOB-3152] Replace EcosiaTheme.primaryBackground * [MOB-3152] Replace EcosiaTheme.secondaryBackground * [MOB-3152] Replace EcosiaTheme.tertiaryBackground * [MOB-3152] Replace EcosiaTheme.quarternaryBackground * [MOB-3152] Replace EcosiaTheme.barBackground * [MOB-3152] Replace EcosiaTheme.barSeparator * [MOB-3152] Remove unnecessary impact and tree counter colors * [MOB-3152] Replace ntp specific colors * [MOB-3152] Replace EcosiaTheme.impactMultiplyCardBackground * [MOB-3152] Replace news specific colors * [MOB-3152] Replace action sheet specific colors * [MOB-3152] Replace modal specific colors * [MOB-3152] Replace EcosiaTheme.primaryText * [MOB-3152] Replace EcosiaTheme.primaryTextInverted * [MOB-3152] Replace remaining text colors * [MOB-3152] Replace icon colors * [MOB-3152] Replace background state colors * [MOB-3152] Replace EcosiaTheme.primaryButton and primaryButtonActive * [MOB-3152] Replace remaining button colors * [MOB-3152] Replace textfield specific colors * [MOB-3152] Replace EcosiaTheme.privateButtonBackground * [MOB-3152] Rename EcosiaColorPrimitive to EcosiaColor * [MOB-3152] Remove unnecessary segment colors * [MOB-3152] Replace state colors * [MOB-3152] Replace tab colors * [MOB-3152] Replace EcosiaTheme.toastImageTint * [MOB-3152] Replace EcosiaTheme.autocompleteBackground * [MOB-3152] Replace onboarding specific colors * [MOB-3152] Replace EcosiaTheme.homePanelBackground * [MOB-3152] Replace EcosiaTheme.peach * [MOB-3152] Remove unused LegacyTheme variables * [MOB-3152] Replace UIImage themed custom init and delete EcosiaTheme * [MOB-3152] Replace LegacyTheme.tabTray * [MOB-3152] Replace LegacyTheme.tableView * [MOB-3152] Remove recovered LegacyTheme and LegacyThemeManager * [MOB-3152] Remove unnecessary upgrade todos * [MOB-3152] Review and adjust new Firefox colors * [MOB-3152] Remove color check todos * [MOB-3152] Remove unnecessary themable properties * [MOB-3152] Fix lint * [MOB-3152] Remove EcosiaDarkTheme comment * [MOB-3152] [MOB-3159] Use ThemeApplicable on views to avoid null windows * [MOB-3152] Revert temporary fallback for null theme window * [MOB-3152] Remove hidden snowflake and old firefox color * [MOB-3152] Remove unused snowflake
ecosia · Feb 4, 2025 · 1b6d6e1 · 1b6d6e1
1 parent bf29a93
commit 1b6d6e1
Show file tree

Hide file tree

Showing 111 changed files with 1,164 additions and 2,053 deletions.
diff --git a/BrowserKit/Sources/Common/Theming/DarkTheme.swift b/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

diff --git a/BrowserKit/Sources/Common/Theming/EcosiaThemeColourPalette.swift b/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
+}
diff --git a/BrowserKit/Sources/Common/Theming/LightTheme.swift b/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

diff --git a/BrowserKit/Sources/Common/Theming/PrivateModeTheme.swift b/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

diff --git a/BrowserKit/Sources/Common/Theming/Theme.swift b/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 }
 }
diff --git a/BrowserKit/Sources/Common/Theming/ThemeColourPalette.swift b/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 }
 }
diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/PrimaryRoundedButton.swift b/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()