Fix #8049: Add access to new Leo design system colors & gradients (#8050

)

This also shifts old colors to be "Legacy". Unfortunately we can not use the legacy colors that exist in the new design system because they don't match up correctly especially in dark mode. These colours can be revisited when we adjust the browser colors.

Plugins/LeoAssetsPlugin/LeoAssetsPlugin.swift

@@ -14,9 +14,11 @@ struct LeoAssetsPlugin: BuildToolPlugin {
     // Check to make sure we have pulled down the icons correctly
     let fileManager = FileManager.default
     let leoSymbolsDirectory = context.package.directory.appending("node_modules/leo-sf-symbols")
+    let leoColorsDirectory = context.package.directory.appending("node_modules/leo")
 
-    if !fileManager.fileExists(atPath: leoSymbolsDirectory.string) {
-      Diagnostics.error("Leo SF Symbols not found: \(FileManager.default.currentDirectoryPath)")
+    if !fileManager.fileExists(atPath: leoSymbolsDirectory.string) ||
+        !fileManager.fileExists(atPath: leoColorsDirectory.string) {
+      Diagnostics.error("Required Leo assets not found: \(FileManager.default.currentDirectoryPath)")
       return []
     }
 
@@ -31,28 +33,30 @@ struct LeoAssetsPlugin: BuildToolPlugin {
       Diagnostics.error("No asset catalogs found in the target")
       return []
     }
-    let scriptPath = context.package.directory.appending("Plugins/LeoAssetsPlugin/make_asset_catalog.sh")
-    let outputDirectory = context.pluginWorkDirectory.appending("LeoAssets.xcassets")
 
-    // Running a macOS tool while archiving a iOS build is unfortunately broken in Xcode 14. It attempts to
-    // run the macOS tool from the wrong directory and fails to find it. One way around this is to use a
-    // precompiled version of this tool instead, but it will mean building and uploading them somewhere
-    // so for now the tool will be replaced by a bash script. We can uncomment this and add back the dep on
-    // `LeoAssetCatalogGenerator` once this is fixed in Xcode.
-//    return [
-//      .buildCommand(
-//        displayName: "Create Asset Catalog",
-//        executable: try context.tool(named: "LeoAssetCatalogGenerator").path,
-//        arguments: assetCatalogs + [leoSymbolsDirectory, outputDirectory.string],
-//        inputFiles: assetCatalogs + [leoSymbolsDirectory.appending("package.json")],
-//        outputFiles: [outputDirectory]
-//      ),
-//    ]
-    let icons = try assetCatalogs.flatMap {
-      try symbolSets(in: URL(fileURLWithPath: $0.string))
-    }.joined(separator: ",")
-    return [
-      .buildCommand(
+    // The command that will create an asset catalog full of leo sf symbols
+    let copySFSymbolsCommand: Command = try {
+      let scriptPath = context.package.directory.appending("Plugins/LeoAssetsPlugin/make_asset_catalog.sh")
+      let outputDirectory = context.pluginWorkDirectory.appending("LeoAssets.xcassets")
+
+      // Running a macOS tool while archiving a iOS build is unfortunately broken in Xcode 14. It attempts to
+      // run the macOS tool from the wrong directory and fails to find it. One way around this is to use a
+      // precompiled version of this tool instead, but it will mean building and uploading them somewhere
+      // so for now the tool will be replaced by a bash script. We can uncomment this and add back the dep on
+      // `LeoAssetCatalogGenerator` once this is fixed in Xcode.
+      //    return [
+      //      .buildCommand(
+      //        displayName: "Create Asset Catalog",
+      //        executable: try context.tool(named: "LeoAssetCatalogGenerator").path,
+      //        arguments: assetCatalogs + [leoSymbolsDirectory, outputDirectory.string],
+      //        inputFiles: assetCatalogs + [leoSymbolsDirectory.appending("package.json")],
+      //        outputFiles: [outputDirectory]
+      //      ),
+      //    ]
+      let icons = try assetCatalogs.flatMap {
+        try symbolSets(in: URL(fileURLWithPath: $0.string))
+      }.joined(separator: ",")
+      return .buildCommand(
         displayName: "Create Asset Catalog",
         executable: Path("/bin/zsh"),
         arguments: [
@@ -64,69 +68,37 @@ struct LeoAssetsPlugin: BuildToolPlugin {
         inputFiles: assetCatalogs + [leoSymbolsDirectory.appending("package.json"),
                                      scriptPath],
         outputFiles: [outputDirectory]
-      ),
-    ]
-  }
-}
-
-#if canImport(XcodeProjectPlugin)
-import XcodeProjectPlugin
-
-extension LeoAssetsPlugin: XcodeBuildToolPlugin {
-  // Entry point for creating build commands for targets in Xcode projects.
-  func createBuildCommands(context: XcodePluginContext, target: XcodeTarget) throws -> [Command] {
-    // Check to make sure we have pulled down the icons correctly
-    let fileManager = FileManager.default
-    // Xcode project is inside App folder so we have to go backwards a level to get the leo-sf-symbols
-    let leoSymbolsDirectory = context.xcodeProject.directory.removingLastComponent()
-      .appending("node_modules/leo-sf-symbols")
-    if !fileManager.fileExists(atPath: leoSymbolsDirectory.string) {
-      Diagnostics.error("Leo SF Symbols not found: \(FileManager.default.currentDirectoryPath)")
-      return []
-    }
-
-    let assetCatalogs = target.inputFiles
-      .filter { $0.type == .resource && $0.path.extension == "xcassets" }
-      .map(\.path)
-    if assetCatalogs.isEmpty {
-      Diagnostics.error("No asset catalogs found in the target")
-      return []
-    }
+      )
+    }()
 
-    let scriptPath = context.xcodeProject.directory.removingLastComponent()
-      .appending("Plugins/LeoAssetsPlugin/make_asset_catalog.sh")
-    let outputDirectory = context.pluginWorkDirectory.appending("LeoAssets.xcassets")
-
-    let icons = try assetCatalogs.flatMap {
-      try symbolSets(in: URL(fileURLWithPath: $0.string))
-    }.joined(separator: ",")
-    // See above comment in `createBuildCommands(context:target:)`
-//    return [
-//      .buildCommand(
-//        displayName: "Create Asset Catalog",
-//        executable: try context.tool(named: "LeoAssetCatalogGenerator").path,
-//        arguments: assetCatalogs + [leoSymbolsDirectory, outputDirectory.string],
-//        inputFiles: assetCatalogs + [leoSymbolsDirectory.appending("package.json")],
-//        outputFiles: [outputDirectory]
-//      ),
-//    ]
-    return [
-      .buildCommand(
-        displayName: "Create Asset Catalog",
+    let copyColorsCommand: Command = {
+      let tokensPath = leoColorsDirectory.appending("tokens/ios-swift")
+      let outputDirectory = context.pluginWorkDirectory.appending("LeoColors")
+      return .buildCommand(
+        displayName: "Copy Leo Colors",
         executable: Path("/bin/zsh"),
         arguments: [
-          scriptPath.string,
-          "-l", leoSymbolsDirectory.string,
-          "-i", icons,
-          "-o", context.pluginWorkDirectory.string
+          "-c", "cp -R \"\(tokensPath.string)/.\" \"\(outputDirectory)\""
         ],
-        inputFiles: assetCatalogs + [leoSymbolsDirectory.appending("package.json"), scriptPath],
-        outputFiles: [outputDirectory]
-      ),
+        inputFiles: [
+          tokensPath.appending("Colors.xcassets"),
+          tokensPath.appending("Gradients.swift"),
+          tokensPath.appending("ColorSetAccessors.swift"),
+        ],
+        outputFiles: [
+          outputDirectory.appending("Colors.xcassets"),
+          outputDirectory.appending("Gradients.swift"),
+          outputDirectory.appending("ColorSetAccessors.swift"),
+        ]
+      )
+    }()
+
+    return [
+      copySFSymbolsCommand,
+      copyColorsCommand
     ]
   }
 }
-#endif
 
 extension LeoAssetsPlugin {
   fileprivate func symbolSets(in catalog: URL) throws -> [String] {

Sources/DesignSystem/Colors/BraveColors.swift

@@ -0,0 +1,22 @@
+// Copyright 2023 The Brave Authors. All rights reserved.
+// 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 Foundation
+import SwiftUI
+import UIKit
+
+extension Color {
+  /// Initialize a `Color` with a color resource.
+  public init(braveSystemName resource: FigmaColorResource) {
+    self.init(resource.name, bundle: resource.bundle)
+  }
+}
+
+extension UIColor {
+  /// Initialize a `UIColor` with a color resource.
+  public convenience init(braveSystemName resource: FigmaColorResource) {
+    self.init(named: resource.name, in: resource.bundle, compatibleWith: nil)!
+  }
+}

Sources/DesignSystem/Colors/BraveGradients.swift

@@ -0,0 +1,43 @@
+// Copyright 2023 The Brave Authors. All rights reserved.
+// 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 Foundation
+import SwiftUI
+import UIKit
+
+extension Gradient {
+  /// Create a SwiftUI Gradient from a Brave design system gradient
+  init(braveSystemName gradient: FigmaGradient) {
+    self.init(
+      stops: gradient.stops.map { stop in
+          .init(color: Color(stop.color), location: CGFloat(stop.position))
+      }
+    )
+  }
+}
+
+extension LinearGradient {
+  /// Create a SwiftUI LinearGradient from a Brave design system gradient
+  public init(braveSystemName gradient: FigmaGradient) {
+    assert(gradient.type == .axial, "Attempting to create a LinearGradient with a non-linear Brave defined gradient")
+    self.init(
+      gradient: Gradient(braveSystemName: gradient),
+      startPoint: .init(x: gradient.startPoint.x, y: gradient.startPoint.y),
+      endPoint: .init(x: gradient.endPoint.x, y: gradient.endPoint.y)
+    )
+  }
+}
+
+extension GradientView {
+  /// Create a GradientView that will render a Brave design system gradient
+  public convenience init(braveSystemName gradient: FigmaGradient) {
+    self.init(
+      colors: gradient.stops.map(\.color),
+      positions: gradient.stops.map({ CGFloat($0.position) }),
+      startPoint: gradient.startPoint,
+      endPoint: gradient.endPoint
+    )
+  }
+}

Sources/DesignSystem/Colors/Colors.swift → Sources/DesignSystem/Colors/LegacyColors.swift

@@ -4,15 +4,15 @@
 
 import UIKit
 
-enum DesignSystemColor: String {
+enum LegacyDesignSystemColor: String {
   case background01
   case background02
   case background03
-
+  
   case text01
   case text02
   case text03
-
+  
   case interactive01
   case interactive02
   case interactive03
@@ -21,10 +21,10 @@ enum DesignSystemColor: String {
   case interactive06
   case interactive07
   case interactive08
-
+  
   case focusBorder = "focus-border"
   case disabled
-
+  
   case divider01
 
   case errorBackground = "error-background"
@@ -69,49 +69,49 @@ enum DesignSystemColor: String {
 
 extension UIColor {
   public static var braveBackground: UIColor {
-    DesignSystemColor.background02.color
+    LegacyDesignSystemColor.background02.color
   }
   public static var secondaryBraveBackground: UIColor {
-    DesignSystemColor.background01.color
+    LegacyDesignSystemColor.background01.color
   }
   public static var tertiaryBraveBackground: UIColor {
-    DesignSystemColor.background03.color
+    LegacyDesignSystemColor.background03.color
   }
   public static var braveGroupedBackground: UIColor {
-    DesignSystemColor.background01.color
+    LegacyDesignSystemColor.background01.color
   }
   public static var secondaryBraveGroupedBackground: UIColor {
-    DesignSystemColor.background02.color
+    LegacyDesignSystemColor.background02.color
   }
   public static var tertiaryBraveGroupedBackground: UIColor {
-    DesignSystemColor.background01.color
+    LegacyDesignSystemColor.background01.color
   }
   public static var braveLabel: UIColor {
-    DesignSystemColor.text02.color
+    LegacyDesignSystemColor.text02.color
   }
   public static var secondaryBraveLabel: UIColor {
-    DesignSystemColor.text03.color
+    LegacyDesignSystemColor.text03.color
   }
   public static var bravePrimary: UIColor {
-    DesignSystemColor.text01.color
+    LegacyDesignSystemColor.text01.color
   }
   public static var braveLighterOrange: UIColor {
-    DesignSystemColor.interactive03.color
+    LegacyDesignSystemColor.interactive03.color
   }
   public static var braveOrange: UIColor {
-    DesignSystemColor.interactive02.color
+    LegacyDesignSystemColor.interactive02.color
   }
   public static var braveDarkerOrange: UIColor {
-    DesignSystemColor.interactive01.color
+    LegacyDesignSystemColor.interactive01.color
   }
   public static var braveLighterBlurple: UIColor {
-    DesignSystemColor.interactive06.color
+    LegacyDesignSystemColor.interactive06.color
   }
   public static var braveBlurple: UIColor {
-    DesignSystemColor.interactive05.color
+    LegacyDesignSystemColor.interactive05.color
   }
   public static var braveDarkerBlurple: UIColor {
-    DesignSystemColor.interactive04.color
+    LegacyDesignSystemColor.interactive04.color
   }
   public static var braveBlurpleTint: UIColor {
     .init {
@@ -122,49 +122,49 @@ extension UIColor {
     }
   }
   public static var braveSeparator: UIColor {
-    DesignSystemColor.divider01.color
+    LegacyDesignSystemColor.divider01.color
   }
   public static var braveErrorLabel: UIColor {
-    DesignSystemColor.errorText.color
+    LegacyDesignSystemColor.errorText.color
   }
   public static var braveErrorBorder: UIColor {
-    DesignSystemColor.errorBorder.color
+    LegacyDesignSystemColor.errorBorder.color
   }
   public static var braveErrorBackground: UIColor {
-    DesignSystemColor.errorBackground.color
+    LegacyDesignSystemColor.errorBackground.color
   }
   public static var braveWarningLabel: UIColor {
-    DesignSystemColor.warningText.color
+    LegacyDesignSystemColor.warningText.color
   }
   public static var braveWarningBorder: UIColor {
-    DesignSystemColor.warningBorder.color
+    LegacyDesignSystemColor.warningBorder.color
   }
   public static var braveWarningBackground: UIColor {
-    DesignSystemColor.warningBackground.color
+    LegacyDesignSystemColor.warningBackground.color
   }
   public static var braveInfoLabel: UIColor {
-    DesignSystemColor.infoText.color
+    LegacyDesignSystemColor.infoText.color
   }
   public static var braveInfoBorder: UIColor {
-    DesignSystemColor.infoBorder.color
+    LegacyDesignSystemColor.infoBorder.color
   }
   public static var braveInfoBackground: UIColor {
-    DesignSystemColor.infoBackground.color
+    LegacyDesignSystemColor.infoBackground.color
   }
   public static var braveSuccessLabel: UIColor {
-    DesignSystemColor.successText.color
+    LegacyDesignSystemColor.successText.color
   }
   public static var braveSuccessBackground: UIColor {
-    DesignSystemColor.successBackground.color
+    LegacyDesignSystemColor.successBackground.color
   }
   public static var braveDisabled: UIColor {
-    DesignSystemColor.disabled.color
+    LegacyDesignSystemColor.disabled.color
   }
   public static var primaryButtonTint: UIColor {
-    DesignSystemColor.interactive07.color
+    LegacyDesignSystemColor.interactive07.color
   }
   public static var secondaryButtonTint: UIColor {
-    DesignSystemColor.interactive08.color
+    LegacyDesignSystemColor.interactive08.color
   }
 }