From 7d29bca3197d8499d8dee81373735bf58d08a42a Mon Sep 17 00:00:00 2001
From: Doug <douglase@element.io>
Date: Fri, 27 May 2022 20:42:44 +0100
Subject: [PATCH] Fixup missing colours and use resolved colours in UIKit.

Fix the confetti colour when using DesignKit.
Pin swift packages.
Fix UI tests target.
---
 .gitignore                                    |  8 +-
 .../xcshareddata/xcschemes/Riot.xcscheme      |  2 +-
 .../xcshareddata/swiftpm/Package.resolved     | 50 ++++++++++
 .../Theme/ElementUIColorsResolved.swift       | 91 +++++++++++++++++++
 Riot/Managers/Theme/ThemeV2.swift             | 22 +----
 Riot/Managers/Theme/Themes/DarkTheme.swift    |  2 +-
 Riot/Managers/Theme/Themes/DefaultTheme.swift |  2 +-
 .../SwiftUI/VectorHostingController.swift     |  3 +
 .../Common/EffectsScene/EffectsScene.swift    |  5 +-
 .../Common/EffectsScene/EffectsView.swift     |  6 ++
 .../Modules/Common/Theme/ThemeSwiftUI.swift   | 11 ++-
 .../Common/Util/BorderedInputFieldStyle.swift |  2 +-
 .../Common/Util/ClearViewModifier.swift       |  2 +-
 .../Common/Util/MultilineTextField.swift      |  2 +-
 .../Modules/Common/Util/OptionButton.swift    |  2 +-
 .../Modules/Common/Util/SearchBar.swift       |  6 +-
 .../Util/SecondaryActionButtonStyle.swift     |  2 +-
 .../Modules/Common/Util/WaitOverlay.swift     |  2 +-
 .../OnboardingSplashScreenPageIndicator.swift |  2 +-
 .../View/RoomAccessTypeChooserRow.swift       |  2 +-
 ...RestrictedAccessSpaceChooserSelector.swift |  4 +-
 .../View/TimelinePollAnswerOptionButton.swift |  4 +-
 .../View/FormInputFieldStyle.swift            |  2 +-
 .../View/MatrixItemChooser.swift              |  2 +-
 .../View/MatrixItemChooserSectionHeader.swift |  2 +-
 .../SpaceSettings/View/SpaceSettings.swift    |  2 +-
 .../View/SpaceSettingsOptionListItem.swift    |  2 +-
 RiotSwiftUI/targetUITests.yml                 |  1 +
 changelog.d/6276.change                       |  1 +
 project.yml                                   |  2 +-
 30 files changed, 195 insertions(+), 51 deletions(-)
 create mode 100644 Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved
 create mode 100644 Riot/Managers/Theme/ElementUIColorsResolved.swift
 create mode 100644 changelog.d/6276.change

diff --git a/.gitignore b/.gitignore
index 695d4cd61..2530cc0a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,8 +30,14 @@ vendor/
 Pods/
 
 ## Ignore project files as we generate them with xcodegen (https://github.com/yonaskolb/XcodeGen)
+# Plus ridiculous workaround to unignore the Package.resolved file for SwiftPM.
 *.xcodeproj
-*.xcworkspace
+*.xcworkspace/*
+!Riot.xcworkspace/xcshareddata
+Riot.xcworkspace/xcshareddata/*
+!Riot.xcworkspace/xcshareddata/swiftpm/
+Riot.xcworkspace/xcshareddata/swiftpm/*
+!Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved
 
 # Fastlane
 fastlane/report.xml
diff --git a/Riot.xcodeproj/xcshareddata/xcschemes/Riot.xcscheme b/Riot.xcodeproj/xcshareddata/xcschemes/Riot.xcscheme
index a9bea1d96..f973b344c 100644
--- a/Riot.xcodeproj/xcshareddata/xcschemes/Riot.xcscheme
+++ b/Riot.xcodeproj/xcshareddata/xcschemes/Riot.xcscheme
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
    LastUpgradeVersion = "1200"
-   version = "1.3">
+   version = "1.7">
    <BuildAction
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES"
diff --git a/Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved b/Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved
new file mode 100644
index 000000000..d586862d6
--- /dev/null
+++ b/Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -0,0 +1,50 @@
+{
+  "pins" : [
+    {
+      "identity" : "element-design-tokens",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/element-design-tokens.git",
+      "state" : {
+        "revision" : "4aafdc25ca0e322c0de930d4ec86121f5503023e",
+        "version" : "0.0.1"
+      }
+    },
+    {
+      "identity" : "element-x-ios",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/element-x-ios",
+      "state" : {
+        "branch" : "develop",
+        "revision" : "272fc5000bfe6e15a0f0ea669ef3088c7d163ce7"
+      }
+    },
+    {
+      "identity" : "maplibre-gl-native-distribution",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
+      "state" : {
+        "revision" : "d761956e81e74d8bdbfba31e0ec3a75616190658",
+        "version" : "5.12.2"
+      }
+    },
+    {
+      "identity" : "swift-collections",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/apple/swift-collections",
+      "state" : {
+        "revision" : "48254824bb4248676bf7ce56014ff57b142b77eb",
+        "version" : "1.0.2"
+      }
+    },
+    {
+      "identity" : "swiftui-introspect",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/siteline/SwiftUI-Introspect.git",
+      "state" : {
+        "revision" : "f2616860a41f9d9932da412a8978fec79c06fe24",
+        "version" : "0.1.4"
+      }
+    }
+  ],
+  "version" : 2
+}
diff --git a/Riot/Managers/Theme/ElementUIColorsResolved.swift b/Riot/Managers/Theme/ElementUIColorsResolved.swift
new file mode 100644
index 000000000..65c6531a8
--- /dev/null
+++ b/Riot/Managers/Theme/ElementUIColorsResolved.swift
@@ -0,0 +1,91 @@
+// 
+// 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 UIKit
+import DesignTokens
+
+extension UIColor {
+    /// The colors from DesignKit, resolved for light mode only.
+    static let elementLight = ElementUIColorsResolved(dynamicColors: element, userInterfaceStyle: .light)
+    /// The colors from DesignKit, resolved for dark mode only.
+    static let elementDark = ElementUIColorsResolved(dynamicColors: element, userInterfaceStyle: .dark)
+}
+
+/// The dynamic colors from DesignKit, resolved to light or dark mode for use in the UIKit themes.
+///
+/// As Element doesn't (currently) update the app's `UIUserInterfaceStyle` when selecting
+/// a custom theme, the dynamic colors provided by DesignKit need resolving for each theme to
+/// prevent them from respecting the interface style and rendering in the wrong style.
+@objcMembers public class ElementUIColorsResolved: NSObject {
+    // MARK: Compound
+    public let accent: UIColor
+    public let alert: UIColor
+    public let primaryContent: UIColor
+    public let secondaryContent: UIColor
+    public let tertiaryContent: UIColor
+    public let quaternaryContent: UIColor
+    public let quinaryContent: UIColor
+    public let system: UIColor
+    public let background: UIColor
+    
+    public let namesAndAvatars: [UIColor]
+    
+    // MARK: Legacy
+    public let quarterlyContent: UIColor
+    public let navigation: UIColor
+    public let tile: UIColor
+    public let separator: UIColor
+    
+    // MARK: Setup
+    public init(dynamicColors: ElementUIColors, userInterfaceStyle: UIUserInterfaceStyle) {
+        let traitCollection = UITraitCollection(userInterfaceStyle: userInterfaceStyle)
+        
+        self.accent = dynamicColors.accent.resolvedColor(with: traitCollection)
+        self.alert = dynamicColors.alert.resolvedColor(with: traitCollection)
+        self.primaryContent = dynamicColors.primaryContent.resolvedColor(with: traitCollection)
+        self.secondaryContent = dynamicColors.secondaryContent.resolvedColor(with: traitCollection)
+        self.tertiaryContent = dynamicColors.tertiaryContent.resolvedColor(with: traitCollection)
+        self.quaternaryContent = dynamicColors.quaternaryContent.resolvedColor(with: traitCollection)
+        self.quinaryContent = dynamicColors.quinaryContent.resolvedColor(with: traitCollection)
+        self.system = dynamicColors.system.resolvedColor(with: traitCollection)
+        self.background = dynamicColors.background.resolvedColor(with: traitCollection)
+        
+        self.namesAndAvatars = [
+            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)
+        self.navigation = dynamicColors.system.resolvedColor(with: traitCollection)
+        
+        if userInterfaceStyle == .light {
+            self.tile = UIColor(rgb: 0xF3F8FD)
+            self.separator = dynamicColors.quinaryContent.resolvedColor(with: traitCollection)
+        } else {
+            self.tile = dynamicColors.quinaryContent.resolvedColor(with: traitCollection)
+            self.separator = dynamicColors.system.resolvedColor(with: traitCollection)
+        }
+        
+        super.init()
+    }
+}
diff --git a/Riot/Managers/Theme/ThemeV2.swift b/Riot/Managers/Theme/ThemeV2.swift
index 1dff3cf19..56a97a93a 100644
--- a/Riot/Managers/Theme/ThemeV2.swift
+++ b/Riot/Managers/Theme/ThemeV2.swift
@@ -22,30 +22,10 @@ import DesignTokens
 @objc public protocol ThemeV2 {
     
     /// Colors object
-    var colors: ElementUIColors { get }
+    var colors: ElementUIColorsResolved { get }
     
     /// Fonts object
     var fonts: ElementUIFonts { get }
     
     /// may contain more design components in future, like icons, audio files etc.
 }
-
-#warning("Temporary missing colors")
-public extension ElementUIColors {
-    var quarterlyContent: UIColor { quaternaryContent }
-    var navigation: UIColor { system }
-    var tile: UIColor { system }
-    var separator: UIColor { system }
-    var namesAndAvatars: [UIColor] {
-        [
-            globalAzure,
-            globalGrape,
-            globalVerde,
-            globalPolly,
-            globalMelon,
-            globalAqua,
-            globalPrune,
-            globalKiwi
-        ]
-    }
-}
diff --git a/Riot/Managers/Theme/Themes/DarkTheme.swift b/Riot/Managers/Theme/Themes/DarkTheme.swift
index 4facd084c..388105356 100644
--- a/Riot/Managers/Theme/Themes/DarkTheme.swift
+++ b/Riot/Managers/Theme/Themes/DarkTheme.swift
@@ -182,7 +182,7 @@ class DarkTheme: NSObject, Theme {
     }
     
     // MARK: - Theme v2
-    var colors = UIColor.element
+    var colors = UIColor.elementDark
     
     var fonts = UIFont.element
     
diff --git a/Riot/Managers/Theme/Themes/DefaultTheme.swift b/Riot/Managers/Theme/Themes/DefaultTheme.swift
index 6145b76a3..7ec7101c8 100644
--- a/Riot/Managers/Theme/Themes/DefaultTheme.swift
+++ b/Riot/Managers/Theme/Themes/DefaultTheme.swift
@@ -186,7 +186,7 @@ class DefaultTheme: NSObject, Theme {
     }
     
     // MARK: - Theme v2
-    var colors = UIColor.element
+    var colors = UIColor.elementLight
     
     var fonts = UIFont.element
 }
diff --git a/Riot/Modules/Common/SwiftUI/VectorHostingController.swift b/Riot/Modules/Common/SwiftUI/VectorHostingController.swift
index 7a6ccaf7a..9b6860fb7 100644
--- a/Riot/Modules/Common/SwiftUI/VectorHostingController.swift
+++ b/Riot/Modules/Common/SwiftUI/VectorHostingController.swift
@@ -127,6 +127,9 @@ class VectorHostingController: UIHostingController<AnyView> {
     }
     
     private func update(theme: Theme) {
+        // Ensure dynamic colors are shown correctly when the theme is the opposite appearance to the system.
+        overrideUserInterfaceStyle = theme.userInterfaceStyle
+        
         if let navigationBar = self.navigationController?.navigationBar {
             theme.applyStyle(onNavigationBar: navigationBar, withModernScrollEdgeAppearance: enableNavigationBarScrollEdgeAppearance)
         }
diff --git a/RiotSwiftUI/Modules/Common/EffectsScene/EffectsScene.swift b/RiotSwiftUI/Modules/Common/EffectsScene/EffectsScene.swift
index 67ef9bc7c..38eb5db11 100644
--- a/RiotSwiftUI/Modules/Common/EffectsScene/EffectsScene.swift
+++ b/RiotSwiftUI/Modules/Common/EffectsScene/EffectsScene.swift
@@ -65,9 +65,12 @@ fileprivate extension Color {
     ///
     /// SceneKit works in a colorspace with a linear gamma, which is why this conversion is necessary.
     var floatComponents: [Float]? {
+        // Get the CGColor from a UIColor as it is nil on Color when loaded from an asset catalog.
+        let cgColor = UIColor(self).cgColor
+        
         guard
             let colorSpace = CGColorSpace(name: CGColorSpace.extendedLinearSRGB),
-            let linearColor = cgColor?.converted(to: colorSpace, intent: .defaultIntent, options: nil),
+            let linearColor = cgColor.converted(to: colorSpace, intent: .defaultIntent, options: nil),
             let components = linearColor.components
         else { return nil }
         
diff --git a/RiotSwiftUI/Modules/Common/EffectsScene/EffectsView.swift b/RiotSwiftUI/Modules/Common/EffectsScene/EffectsView.swift
index 2422a2ef5..4ab2c5746 100644
--- a/RiotSwiftUI/Modules/Common/EffectsScene/EffectsView.swift
+++ b/RiotSwiftUI/Modules/Common/EffectsScene/EffectsView.swift
@@ -59,3 +59,9 @@ struct EffectsView: UIViewRepresentable {
         }
     }
 }
+
+struct EffectsView_Previews: PreviewProvider {
+    static var previews: some View {
+        EffectsView(effect: .confetti)
+    }
+}
diff --git a/RiotSwiftUI/Modules/Common/Theme/ThemeSwiftUI.swift b/RiotSwiftUI/Modules/Common/Theme/ThemeSwiftUI.swift
index e0ff5bdc1..90d9a4852 100644
--- a/RiotSwiftUI/Modules/Common/Theme/ThemeSwiftUI.swift
+++ b/RiotSwiftUI/Modules/Common/Theme/ThemeSwiftUI.swift
@@ -36,11 +36,14 @@ public protocol ThemeSwiftUIType {
     /// may contain more design components in future, like icons, audio files etc.
 }
 
-#warning("Temporary missing colors")
 public extension ElementColors {
-    var quarterlyContent: Color { quaternaryContent }
-    var navigation: Color { system }
-    var tile: Color { system }
+    // 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,
diff --git a/RiotSwiftUI/Modules/Common/Util/BorderedInputFieldStyle.swift b/RiotSwiftUI/Modules/Common/Util/BorderedInputFieldStyle.swift
index fe75aa300..2615efa47 100644
--- a/RiotSwiftUI/Modules/Common/Util/BorderedInputFieldStyle.swift
+++ b/RiotSwiftUI/Modules/Common/Util/BorderedInputFieldStyle.swift
@@ -50,7 +50,7 @@ struct BorderedInputFieldStyle: TextFieldStyle {
         if (theme.identifier == ThemeIdentifier.dark) {
             return (isEnabled ? theme.colors.primaryContent : theme.colors.tertiaryContent)
         } else {
-            return (isEnabled ? theme.colors.primaryContent : theme.colors.quarterlyContent)
+            return (isEnabled ? theme.colors.primaryContent : theme.colors.quaternaryContent)
         }
     }
     
diff --git a/RiotSwiftUI/Modules/Common/Util/ClearViewModifier.swift b/RiotSwiftUI/Modules/Common/Util/ClearViewModifier.swift
index 7eb67d39c..6ab0832ac 100644
--- a/RiotSwiftUI/Modules/Common/Util/ClearViewModifier.swift
+++ b/RiotSwiftUI/Modules/Common/Util/ClearViewModifier.swift
@@ -47,7 +47,7 @@ struct ClearViewModifier: ViewModifier {
                 }) {
                     Image(systemName: "xmark.circle.fill")
                         .renderingMode(.template)
-                        .foregroundColor(theme.colors.quarterlyContent)
+                        .foregroundColor(theme.colors.quaternaryContent)
                 }
                 .padding(.top, alignment == .top ? 8 : 0)
                 .padding(.bottom, alignment == .bottom ? 8 : 0)
diff --git a/RiotSwiftUI/Modules/Common/Util/MultilineTextField.swift b/RiotSwiftUI/Modules/Common/Util/MultilineTextField.swift
index c447d7c7b..a03c4b21b 100644
--- a/RiotSwiftUI/Modules/Common/Util/MultilineTextField.swift
+++ b/RiotSwiftUI/Modules/Common/Util/MultilineTextField.swift
@@ -56,7 +56,7 @@ struct MultilineTextField: View {
             return theme.colors.accent
         }
         
-        return theme.colors.quarterlyContent
+        return theme.colors.quaternaryContent
     }
     
     private var borderWidth: CGFloat {
diff --git a/RiotSwiftUI/Modules/Common/Util/OptionButton.swift b/RiotSwiftUI/Modules/Common/Util/OptionButton.swift
index 17e54bbda..428ecf09c 100644
--- a/RiotSwiftUI/Modules/Common/Util/OptionButton.swift
+++ b/RiotSwiftUI/Modules/Common/Util/OptionButton.swift
@@ -55,7 +55,7 @@ struct OptionButton: View {
                     }
                 }
                 Spacer()
-                Image(systemName: "chevron.right").font(.system(size: 16, weight: .regular)).foregroundColor(theme.colors.quarterlyContent)
+                Image(systemName: "chevron.right").font(.system(size: 16, weight: .regular)).foregroundColor(theme.colors.quaternaryContent)
             }
             .padding(EdgeInsets(top: 15, leading: 16, bottom: 15, trailing: 16))
             .background(theme.colors.quinaryContent)
diff --git a/RiotSwiftUI/Modules/Common/Util/SearchBar.swift b/RiotSwiftUI/Modules/Common/Util/SearchBar.swift
index 4edaa2e5c..3901ea65a 100644
--- a/RiotSwiftUI/Modules/Common/Util/SearchBar.swift
+++ b/RiotSwiftUI/Modules/Common/Util/SearchBar.swift
@@ -38,7 +38,7 @@ struct SearchBar: View {
             }
             .padding(8)
             .padding(.horizontal, 25)
-            .background(theme.colors.navigation)
+            .background(theme.colors.system)
             .cornerRadius(8)
             .padding(.leading)
             .padding(.trailing, isEditing ? 8 : 16)
@@ -46,7 +46,7 @@ struct SearchBar: View {
                 HStack {
                     Image(systemName: "magnifyingglass")
                         .renderingMode(.template)
-                        .foregroundColor(theme.colors.quarterlyContent)
+                        .foregroundColor(theme.colors.quaternaryContent)
                         .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
              
                     if isEditing && !text.isEmpty {
@@ -55,7 +55,7 @@ struct SearchBar: View {
                         }) {
                             Image(systemName: "multiply.circle.fill")
                                 .renderingMode(.template)
-                                .foregroundColor(theme.colors.quarterlyContent)
+                                .foregroundColor(theme.colors.quaternaryContent)
                         }
                     }
                 }
diff --git a/RiotSwiftUI/Modules/Common/Util/SecondaryActionButtonStyle.swift b/RiotSwiftUI/Modules/Common/Util/SecondaryActionButtonStyle.swift
index 8f0eb6aac..a20eba58e 100644
--- a/RiotSwiftUI/Modules/Common/Util/SecondaryActionButtonStyle.swift
+++ b/RiotSwiftUI/Modules/Common/Util/SecondaryActionButtonStyle.swift
@@ -68,7 +68,7 @@ struct SecondaryActionButtonStyle_Previews: PreviewProvider {
                 Text("Custom")
                     .foregroundColor(theme.colors.secondaryContent)
             }
-            .buttonStyle(SecondaryActionButtonStyle(customColor: theme.colors.quarterlyContent))
+            .buttonStyle(SecondaryActionButtonStyle(customColor: theme.colors.quaternaryContent))
         }
         .padding()
     }
diff --git a/RiotSwiftUI/Modules/Common/Util/WaitOverlay.swift b/RiotSwiftUI/Modules/Common/Util/WaitOverlay.swift
index 60f7315bb..4abada5e5 100644
--- a/RiotSwiftUI/Modules/Common/Util/WaitOverlay.swift
+++ b/RiotSwiftUI/Modules/Common/Util/WaitOverlay.swift
@@ -89,7 +89,7 @@ struct WaitOverlay: ViewModifier {
                     }
                     .padding(12)
                     .background(RoundedRectangle(cornerRadius: 8, style: .continuous)
-                                    .fill(theme.colors.navigation.opacity(0.9)))
+                                    .fill(theme.colors.system.opacity(0.9)))
                 }
                 .edgesIgnoringSafeArea(.all)
                 .transition(.opacity)
diff --git a/RiotSwiftUI/Modules/Onboarding/SplashScreen/View/OnboardingSplashScreenPageIndicator.swift b/RiotSwiftUI/Modules/Onboarding/SplashScreen/View/OnboardingSplashScreenPageIndicator.swift
index 63e8507a0..f2306eaf4 100644
--- a/RiotSwiftUI/Modules/Onboarding/SplashScreen/View/OnboardingSplashScreenPageIndicator.swift
+++ b/RiotSwiftUI/Modules/Onboarding/SplashScreen/View/OnboardingSplashScreenPageIndicator.swift
@@ -47,7 +47,7 @@ struct OnboardingSplashScreenPageIndicator: View {
             ForEach(0..<pageCount) { index in
                 Circle()
                     .frame(width: 8, height: 8)
-                    .foregroundColor(index == pageIndex ? .accentColor : theme.colors.quarterlyContent)
+                    .foregroundColor(index == pageIndex ? .accentColor : theme.colors.quaternaryContent)
             }
         }
     }
diff --git a/RiotSwiftUI/Modules/Room/RoomAccess/RoomAccessTypeChooser/View/RoomAccessTypeChooserRow.swift b/RiotSwiftUI/Modules/Room/RoomAccess/RoomAccessTypeChooser/View/RoomAccessTypeChooserRow.swift
index a38cd0efe..899025c92 100644
--- a/RiotSwiftUI/Modules/Room/RoomAccess/RoomAccessTypeChooser/View/RoomAccessTypeChooserRow.swift
+++ b/RiotSwiftUI/Modules/Room/RoomAccess/RoomAccessTypeChooser/View/RoomAccessTypeChooserRow.swift
@@ -45,7 +45,7 @@ struct RoomAccessTypeChooserRow: View {
                 Spacer()
                 Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                     .renderingMode(.template)
-                    .foregroundColor(isSelected ? theme.colors.accent : theme.colors.quarterlyContent)
+                    .foregroundColor(isSelected ? theme.colors.accent : theme.colors.quaternaryContent)
             }
             if let badgeText = badgeText {
                 Text(badgeText)
diff --git a/RiotSwiftUI/Modules/Room/RoomAccess/RoomRestrictedAccessSpaceChooser/View/RoomRestrictedAccessSpaceChooserSelector.swift b/RiotSwiftUI/Modules/Room/RoomAccess/RoomRestrictedAccessSpaceChooser/View/RoomRestrictedAccessSpaceChooserSelector.swift
index 3b52c9e41..625500bd4 100644
--- a/RiotSwiftUI/Modules/Room/RoomAccess/RoomRestrictedAccessSpaceChooser/View/RoomRestrictedAccessSpaceChooserSelector.swift
+++ b/RiotSwiftUI/Modules/Room/RoomAccess/RoomRestrictedAccessSpaceChooser/View/RoomRestrictedAccessSpaceChooserSelector.swift
@@ -37,7 +37,7 @@ struct RoomRestrictedAccessSpaceChooserSelector: View {
                     Button(VectorL10n.cancel) {
                         viewModel.send(viewAction: .cancel)
                     }
-                    .foregroundColor(viewModel.viewState.loading ? theme.colors.quarterlyContent : theme.colors.accent)
+                    .foregroundColor(viewModel.viewState.loading ? theme.colors.quaternaryContent : theme.colors.accent)
                     .opacity(viewModel.viewState.loading ? 0.7 : 1)
                     .disabled(viewModel.viewState.loading)
                 }
@@ -45,7 +45,7 @@ struct RoomRestrictedAccessSpaceChooserSelector: View {
                     Button(VectorL10n.done) {
                         viewModel.send(viewAction: .done)
                     }
-                    .foregroundColor(viewModel.viewState.selectedItemIds.isEmpty || viewModel.viewState.loading ? theme.colors.quarterlyContent : theme.colors.accent)
+                    .foregroundColor(viewModel.viewState.selectedItemIds.isEmpty || viewModel.viewState.loading ? theme.colors.quaternaryContent : theme.colors.accent)
                     .opacity(viewModel.viewState.selectedItemIds.isEmpty || viewModel.viewState.loading ? 0.7 : 1)
                     .disabled(viewModel.viewState.selectedItemIds.isEmpty || viewModel.viewState.loading)
                 }
diff --git a/RiotSwiftUI/Modules/Room/TimelinePoll/View/TimelinePollAnswerOptionButton.swift b/RiotSwiftUI/Modules/Room/TimelinePoll/View/TimelinePollAnswerOptionButton.swift
index 5a3498aa9..a7ac3d534 100644
--- a/RiotSwiftUI/Modules/Room/TimelinePoll/View/TimelinePollAnswerOptionButton.swift
+++ b/RiotSwiftUI/Modules/Room/TimelinePoll/View/TimelinePollAnswerOptionButton.swift
@@ -89,10 +89,10 @@ struct TimelinePollAnswerOptionButton: View {
     
     var progressViewAccentColor: Color {
         guard !poll.closed else {
-            return (answerOption.winner ? theme.colors.accent : theme.colors.quarterlyContent)
+            return (answerOption.winner ? theme.colors.accent : theme.colors.quaternaryContent)
         }
         
-        return answerOption.selected ? theme.colors.accent : theme.colors.quarterlyContent
+        return answerOption.selected ? theme.colors.accent : theme.colors.quaternaryContent
     }
 }
 
diff --git a/RiotSwiftUI/Modules/Settings/Notifications/View/FormInputFieldStyle.swift b/RiotSwiftUI/Modules/Settings/Notifications/View/FormInputFieldStyle.swift
index 3b35cd396..beca8dcb5 100644
--- a/RiotSwiftUI/Modules/Settings/Notifications/View/FormInputFieldStyle.swift
+++ b/RiotSwiftUI/Modules/Settings/Notifications/View/FormInputFieldStyle.swift
@@ -25,7 +25,7 @@ struct FormInputFieldStyle: TextFieldStyle {
     
     private var textColor: Color {
         if !isEnabled {
-            return theme.colors.quarterlyContent
+            return theme.colors.quaternaryContent
         }
         return theme.colors.primaryContent
     }
diff --git a/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooser.swift b/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooser.swift
index eeb7743d3..2759038d4 100644
--- a/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooser.swift
+++ b/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooser.swift
@@ -144,7 +144,7 @@ struct MatrixItemChooser: View {
         }
         .padding(.vertical, 4)
         .padding(.horizontal)
-        .background(theme.colors.tile)
+        .background(theme.colors.legacyTile)
     }
 }
 
diff --git a/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooserSectionHeader.swift b/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooserSectionHeader.swift
index 632403587..a32578c5d 100644
--- a/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooserSectionHeader.swift
+++ b/RiotSwiftUI/Modules/Spaces/MatrixItemChooser/View/MatrixItemChooserSectionHeader.swift
@@ -52,7 +52,7 @@ struct MatrixItemChooserSectionHeader: View {
                 .frame(maxWidth: .infinity, alignment: .leading)
                 .padding(.vertical, 8)
                 .padding(.horizontal)
-                .background(theme.colors.navigation)
+                .background(theme.colors.system)
                 .cornerRadius(8)
             }
         }
diff --git a/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettings.swift b/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettings.swift
index 42d8f71b3..23f37bb37 100644
--- a/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettings.swift
+++ b/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettings.swift
@@ -39,7 +39,7 @@ struct SpaceSettings: View {
                     .padding(.bottom, 32)
             }
         }
-        .background(theme.colors.navigation.ignoresSafeArea())
+        .background(theme.colors.system.ignoresSafeArea())
         .waitOverlay(show: viewModel.viewState.isLoading, allowUserInteraction: false)
         .ignoresSafeArea(.container, edges: .bottom)
         .frame(maxHeight: .infinity)
diff --git a/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettingsOptionListItem.swift b/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettingsOptionListItem.swift
index 6287ab24d..18bef0d8f 100644
--- a/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettingsOptionListItem.swift
+++ b/RiotSwiftUI/Modules/Spaces/SpaceSettings/SpaceSettings/View/SpaceSettingsOptionListItem.swift
@@ -67,7 +67,7 @@ struct SpaceSettingsOptionListItem: View {
                 Image(systemName: "chevron.right")
                     .renderingMode(.template)
                     .font(.system(size: 16, weight: .regular))
-                    .foregroundColor(theme.colors.quarterlyContent)
+                    .foregroundColor(theme.colors.quaternaryContent)
             }
             .opacity(isEnabled ? 1 : 0.5)
         }
diff --git a/RiotSwiftUI/targetUITests.yml b/RiotSwiftUI/targetUITests.yml
index 6bf4196a4..01060192f 100644
--- a/RiotSwiftUI/targetUITests.yml
+++ b/RiotSwiftUI/targetUITests.yml
@@ -32,6 +32,7 @@ targets:
 
     dependencies:
     - target: RiotSwiftUI
+    - package: DesignKit
 
     settings:
       base:
diff --git a/changelog.d/6276.change b/changelog.d/6276.change
new file mode 100644
index 000000000..ebab74708
--- /dev/null
+++ b/changelog.d/6276.change
@@ -0,0 +1 @@
+DesignKit: Replace the local DesignKit target with the shared Swift package from ElementX.
diff --git a/project.yml b/project.yml
index e06807c8d..bc215b2c9 100644
--- a/project.yml
+++ b/project.yml
@@ -41,7 +41,7 @@ include:
 packages:
   DesignKit:
     url: https://github.com/vector-im/element-x-ios
-    branch: doug/designkit
+    branch: develop
   Mapbox:
     url: https://github.com/maplibre/maplibre-gl-native-distribution
     minVersion: 5.12.2