DesignKit: Update design tokens and create ElementColors locally. (#186)

* Use latest design tokens and create Element colors
* Keep the old colours and add system… ones.

DesignKit/Sources/Colors/ElementColors.swift

@@ -0,0 +1,141 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import DesignTokens
+import SwiftUI
+
+// MARK: SwiftUI
+
+public extension Color {
+    static let element = ElementColors()
+}
+
+public struct ElementColors {
+    // MARK: - Compound
+    
+    private let compound = CompoundColors()
+    
+    public var accent: Color { systemPrimaryLabel }
+    public var alert: Color { compound.alert }
+    public var links: Color { compound.links }
+    public var primaryContent: Color { compound.primaryContent }
+    public var secondaryContent: Color { compound.secondaryContent }
+    public var tertiaryContent: Color { compound.tertiaryContent }
+    public var quaternaryContent: Color { compound.quaternaryContent }
+    public var quinaryContent: Color { compound.quinaryContent }
+    public var system: Color { compound.system }
+    public var background: Color { compound.background }
+    
+    public var contentAndAvatars: [Color] { compound.contentAndAvatars }
+    
+    // MARK: - System
+    
+    public var systemPrimaryLabel: Color { .primary }
+    public var systemSecondaryLabel: Color { .secondary }
+    public var systemTertiaryLabel: Color { Color(.tertiaryLabel) }
+    public var systemQuaternaryLabel: Color { Color(.quaternaryLabel) }
+    
+    public var systemPrimaryBackground: Color { Color(.systemBackground) }
+    public var systemSecondaryBackground: Color { Color(.secondarySystemBackground) }
+    
+    public var systemGray: Color { Color(.systemGray) }
+    public var systemGray2: Color { Color(.systemGray2) }
+    public var systemGray3: Color { Color(.systemGray3) }
+    public var systemGray4: Color { Color(.systemGray4) }
+    public var systemGray5: Color { Color(.systemGray5) }
+    public var systemGray6: Color { Color(.systemGray6) }
+    
+    // MARK: - Temp
+    
+    private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) }
+    
+    public var tempActionBackground: Color {
+        Color(UIColor { collection in
+            collection.userInterfaceStyle == .light ? tempActionBlack : .white
+        })
+    }
+    
+    public var tempActionForeground: Color {
+        Color(UIColor { collection in
+            collection.userInterfaceStyle == .light ? .white : tempActionBlack
+        })
+    }
+    
+    public var tempActionBackgroundTint: Color { tempActionBackground.opacity(0.2) }
+    public var tempActionForegroundTint: Color { tempActionForeground.opacity(0.2) }
+}
+
+// MARK: UIKit
+
+public extension UIColor {
+    /// The colors from Compound, as dynamic colors that automatically update for light and dark mode.
+    static let element = ElementUIColors()
+}
+
+@objcMembers public class ElementUIColors: NSObject {
+    // MARK: - Compound
+    
+    private let compound = CompoundUIColors()
+    
+    public var accent: UIColor { systemPrimaryLabel }
+    public var alert: UIColor { compound.alert }
+    public var links: UIColor { compound.links }
+    public var primaryContent: UIColor { compound.primaryContent }
+    public var secondaryContent: UIColor { compound.secondaryContent }
+    public var tertiaryContent: UIColor { compound.tertiaryContent }
+    public var quaternaryContent: UIColor { compound.quaternaryContent }
+    public var quinaryContent: UIColor { compound.quinaryContent }
+    public var system: UIColor { compound.system }
+    public var background: UIColor { compound.background }
+    
+    public var contentAndAvatars: [UIColor] { compound.contentAndAvatars }
+    
+    // MARK: - System
+    
+    public var systemPrimaryLabel: UIColor { .label }
+    public var systemSecondaryLabel: UIColor { .secondaryLabel }
+    public var systemTertiaryLabel: UIColor { .tertiaryLabel }
+    public var systemQuaternaryLabel: UIColor { .quaternaryLabel }
+    
+    public var systemPrimaryBackground: UIColor { .systemBackground }
+    public var systemSecondaryBackground: UIColor { .secondarySystemBackground }
+    
+    public var systemGray: UIColor { .systemGray }
+    public var systemGray2: UIColor { .systemGray2 }
+    public var systemGray3: UIColor { .systemGray3 }
+    public var systemGray4: UIColor { .systemGray4 }
+    public var systemGray5: UIColor { .systemGray5 }
+    public var systemGray6: UIColor { .systemGray6 }
+    
+    // MARK: - Temp
+    
+    private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) }
+    
+    public var tempActionBackground: UIColor {
+        UIColor { collection in
+            collection.userInterfaceStyle == .light ? self.tempActionBlack : .white
+        }
+    }
+    
+    public var tempActionForeground: UIColor {
+        UIColor { collection in
+            collection.userInterfaceStyle == .light ? .white : self.tempActionBlack
+        }
+    }
+    
+    public var tempActionBackgroundTint: UIColor { tempActionBackground.withAlphaComponent(0.2) }
+    public var tempActionForegroundTint: UIColor { tempActionForeground.withAlphaComponent(0.2) }
+}

ElementX.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 51;
+	objectVersion = 52;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -610,7 +610,7 @@
 		8C37FB986891D90BEAA93EAE /* UserSessionStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserSessionStore.swift; sourceTree = "<group>"; };
 		8D8169443E5AC5FF71BFB3DB /* cs */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = cs; path = cs.lproj/Localizable.strings; sourceTree = "<group>"; };
 		8DC2C9E0E15C79BBDA80F0A2 /* TimelineStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineStyle.swift; sourceTree = "<group>"; };
-		8E088F2A1B9EC529D3221931 /* UITests.xctestplan */ = {isa = PBXFileReference; path = UITests.xctestplan; sourceTree = "<group>"; };
+		8E088F2A1B9EC529D3221931 /* UITests.xctestplan */ = {isa = PBXFileReference; lastKnownFileType = text; path = UITests.xctestplan; sourceTree = "<group>"; };
 		9010EE0CC913D095887EF36E /* OIDCService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OIDCService.swift; sourceTree = "<group>"; };
 		90733775209F4D4D366A268F /* RootRouterType.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RootRouterType.swift; sourceTree = "<group>"; };
 		92B61C243325DC76D3086494 /* EventBriefFactoryProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EventBriefFactoryProtocol.swift; sourceTree = "<group>"; };

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -32,8 +32,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/element-design-tokens.git",
       "state" : {
-        "revision" : "02ba42d9ec02f90370a6cfc35a68d7312696636c",
+        "revision" : "63e40f10b336c136d6d05f7967e4565e37d3d760",
-        "version" : "0.0.2"
+        "version" : "0.0.3"
       }
     },
     {

Package.swift

@@ -10,7 +10,7 @@ let package = Package(
         .library(name: "DesignKit", targets: ["DesignKit"])
     ],
     dependencies: [
-        .package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.2"),
+        .package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.3"),
         .package(url: "https://github.com/siteline/SwiftUI-Introspect.git", from: "0.1.4")
     ],
     targets: [

changelog.d/pr-186.change

@@ -0,0 +1 @@
+DesignKit: Update design tokens and add system colours to a local copy of ElementColors.