Pin DesignKit version and use contantAndAvatars array.

Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -5,8 +5,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/element-design-tokens.git",
       "state" : {
-        "revision" : "4aafdc25ca0e322c0de930d4ec86121f5503023e",
+        "revision" : "02ba42d9ec02f90370a6cfc35a68d7312696636c",
-        "version" : "0.0.1"
+        "version" : "0.0.2"
       }
     },
     {
@@ -14,8 +14,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/element-x-ios",
       "state" : {
-        "branch" : "develop",
+        "revision" : "0a199ee61126feb8c8a462200cb4749d6eb3ba77",
-        "revision" : "272fc5000bfe6e15a0f0ea669ef3088c7d163ce7"
+        "version" : "1.0.1-202207011447"
       }
     },
     {

Riot/Managers/Theme/ElementUIColorsResolved.swift

@@ -63,16 +63,7 @@ extension UIColor {
         self.system = dynamicColors.system.resolvedColor(with: traitCollection)
         self.background = dynamicColors.background.resolvedColor(with: traitCollection)
         
-        self.namesAndAvatars = [
+        self.namesAndAvatars = dynamicColors.contentAndAvatars
-            dynamicColors.globalAzure.resolvedColor(with: traitCollection),
-            dynamicColors.globalGrape.resolvedColor(with: traitCollection),
-            dynamicColors.globalVerde.resolvedColor(with: traitCollection),
-            dynamicColors.globalPolly.resolvedColor(with: traitCollection),
-            dynamicColors.globalMelon.resolvedColor(with: traitCollection),
-            dynamicColors.globalAqua.resolvedColor(with: traitCollection),
-            dynamicColors.globalPrune.resolvedColor(with: traitCollection),
-            dynamicColors.globalKiwi.resolvedColor(with: traitCollection)
-        ]
         
         // Legacy colours
         self.quarterlyContent = dynamicColors.quaternaryContent.resolvedColor(with: traitCollection)

RiotSwiftUI/Modules/Common/Avatar/View/AvatarImage.swift

@@ -49,7 +49,7 @@ struct AvatarImage: View {
                 mxContentUri: mxContentUri,
                 matrixItemId: matrixItemId,
                 displayName: displayName,
-                colorCount: theme.colors.namesAndAvatars.count,
+                colorCount: theme.colors.contentAndAvatars.count,
                 avatarSize: size
             )
         }

RiotSwiftUI/Modules/Common/Avatar/View/PlaceholderAvatarImage.swift

@@ -36,7 +36,7 @@ struct PlaceholderAvatarImage: View {
     
     var body: some View {
         ZStack {
-            theme.colors.namesAndAvatars[colorIndex]
+            theme.colors.contentAndAvatars[colorIndex]
             
             Text(String(firstCharacter))
                 .padding(4)

RiotSwiftUI/Modules/Common/Avatar/View/SpaceAvatarImage.swift

@@ -38,7 +38,7 @@ struct SpaceAvatarImage: View {
                     .padding(10)
                     .frame(width: CGFloat(size.rawValue), height: CGFloat(size.rawValue))
                     .foregroundColor(.white)
-                    .background(theme.colors.namesAndAvatars[colorIndex])
+                    .background(theme.colors.contentAndAvatars[colorIndex])
                     .clipShape(RoundedRectangle(cornerRadius: 8))
                     // Make the text resizable (i.e. Make it large and then allow it to scale down)
                     .font(.system(size: 200))
@@ -55,7 +55,7 @@ struct SpaceAvatarImage: View {
                 mxContentUri: mxContentUri,
                 matrixItemId: matrixItemId,
                 displayName: value,
-                colorCount: theme.colors.namesAndAvatars.count,
+                colorCount: theme.colors.contentAndAvatars.count,
                 avatarSize: size
             )
         })
@@ -65,7 +65,7 @@ struct SpaceAvatarImage: View {
                 mxContentUri: mxContentUri,
                 matrixItemId: matrixItemId,
                 displayName: displayName,
-                colorCount: theme.colors.namesAndAvatars.count,
+                colorCount: theme.colors.contentAndAvatars.count,
                 avatarSize: size
             )
         }

RiotSwiftUI/Modules/Common/EffectsScene/EffectsScene.swift

@@ -31,7 +31,7 @@ class EffectsScene: SCNScene {
     static func confetti(with theme: ThemeSwiftUI) -> EffectsScene? {
         guard let scene = EffectsScene(named: Constants.confettiSceneName) else { return nil }
         
-        let colors: [[Float]] = theme.colors.namesAndAvatars.compactMap { $0.floatComponents }
+        let colors: [[Float]] = theme.colors.contentAndAvatars.compactMap { $0.floatComponents }
         
         if let particles = scene.rootNode.childNode(withName: Constants.particlesNodeName, recursively: false)?.particleSystems?.first {
             // The particles need a non-zero color variation for the handler to affect the color

RiotSwiftUI/Modules/Common/Theme/ThemeSwiftUI.swift

@@ -36,24 +36,11 @@ public protocol ThemeSwiftUIType {
     /// may contain more design components in future, like icons, audio files etc.
 }
 
+// MARK: - Legacy Colors
+
 public extension ElementColors {
-    // MARK: - Legacy
     var legacyTile: Color {
         let dynamicColor = UIColor { $0.userInterfaceStyle == .light ? .elementLight.tile : .elementDark.tile }
         return Color(dynamicColor)
     }
-    
-    // TODO: Generate in DesignTokens repo.
-    var namesAndAvatars: [Color] {
-        [
-            globalAzure,
-            globalGrape,
-            globalVerde,
-            globalPolly,
-            globalMelon,
-            globalAqua,
-            globalPrune,
-            globalKiwi
-        ]
-    }
 }

RiotSwiftUI/Modules/Common/Theme/ThemeUsersColorsExtension.swift

@@ -23,7 +23,7 @@ extension ThemeSwiftUI {
     /// - Parameter userId: The user id used to hash.
     /// - Returns: The SwiftUI color for the associated userId.
     func userColor(for userId: String) -> Color {
-        let senderNameColorIndex = Int(userId.vc_hashCode % Int32(colors.namesAndAvatars.count))
+        let senderNameColorIndex = Int(userId.vc_hashCode % Int32(colors.contentAndAvatars.count))
-        return colors.namesAndAvatars[senderNameColorIndex]
+        return colors.contentAndAvatars[senderNameColorIndex]
     }
 }

RiotSwiftUI/Modules/Onboarding/Avatar/Coordinator/OnboardingAvatarCoordinator.swift

@@ -72,7 +72,7 @@ final class OnboardingAvatarCoordinator: Coordinator, Presentable {
         self.parameters = parameters
         let viewModel = OnboardingAvatarViewModel(userId: parameters.userSession.userId,
                                                   displayName: parameters.userSession.account.userDisplayName,
-                                                  avatarColorCount: DefaultThemeSwiftUI().colors.namesAndAvatars.count)
+                                                  avatarColorCount: DefaultThemeSwiftUI().colors.contentAndAvatars.count)
         viewModel.updateAvatarImage(with: parameters.avatar)
         
         let view = OnboardingAvatarScreen(viewModel: viewModel.context)

RiotSwiftUI/Modules/Onboarding/Avatar/MockOnboardingAvatarScreenState.swift

@@ -44,7 +44,7 @@ enum MockOnboardingAvatarScreenState: MockScreenState, CaseIterable {
     
     /// Generate the view struct for the screen state.
     var screenView: ([Any], AnyView)  {
-        let avatarColorCount = DefaultThemeSwiftUI().colors.namesAndAvatars.count
+        let avatarColorCount = DefaultThemeSwiftUI().colors.contentAndAvatars.count
         let viewModel: OnboardingAvatarViewModel
         switch self {
         case .placeholderAvatar(let userId, let displayName):

changelog.d/pr-6275.api

@@ -0,0 +1 @@
+Replace DesignKit framework with [DesignKit package](https://github.com/vector-im/element-x-ios/tree/develop/DesignKit/Sources). Colours are now generated in the [DesignTokens repo](https://github.com/vector-im/element-design-tokens) to be shared across all of our apps.

project.yml

@@ -41,7 +41,7 @@ include:
 packages:
   DesignKit:
     url: https://github.com/vector-im/element-x-ios
-    branch: develop
+    exactVersion: 1.0.1-202207011447
   Mapbox:
     url: https://github.com/maplibre/maplibre-gl-native-distribution
     minVersion: 5.12.2