Adopt Compound Colours (#1086)

* Delete deprecated font tokens.

* Migrate from primaryContent to textPrimary/iconPrimary.

* Migrate from links to textLinkExternal.

* Migrate from secondaryContent to textSecondary/iconSecondary.

* Migrate from accent to textActionPrimary.

- Some uses changed to textPrimary or iconPrimary as necessary.
- Some manual tints removed now that that Sentry is fixed.

* Migrate alert to textCriticalPrimary/iconCriticalPrimary.

* Migrate from brand to textActionAccent/iconAccentTertiary.

* Migrate from background to bgCanvasDefault or text/iconOnSolidPrimary

* Migrate system to bgSubtleSecondary.

* Remove ElementUIColors and obsolete migrated colours.

* Migrate tertiaryContent/quaternaryContent/quinaryContent to Compound.

* Migrate bubblesYou/bubblesNotYou to use Compound.

* Update Compound.

DesignKit/Package.swift

@@ -12,7 +12,7 @@ let package = Package(
         .library(name: "DesignKit", targets: ["DesignKit"])
     ],
     dependencies: [
-        .package(url: "https://github.com/vector-im/compound-ios.git", revision: "aaa43409ca09130cb9e9a0fe02c803c65aa42aed"),
+        .package(url: "https://github.com/vector-im/compound-ios.git", revision: "d59c317362beba940baa43d6aacdd357e208048d"),
         .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")
     ],

DesignKit/Sources/Buttons/ElementActionButtonStyle.swift

@@ -23,7 +23,7 @@ public extension ButtonStyle where Self == ElementActionButtonStyle {
     /// - Parameter size: The control size to use. Defaults to regular.
     /// - Parameter color: The color of the button's background. Defaults to the accent color.
     static func elementAction(_ size: ElementControlSize = .regular,
-                              color: Color = .element.accent) -> ElementActionButtonStyle {
+                              color: Color = .compound.textActionPrimary) -> ElementActionButtonStyle {
         ElementActionButtonStyle(size: size, color: color)
     }
 }
@@ -40,12 +40,11 @@ public struct ElementActionButtonStyle: ButtonStyle {
     private var maxWidth: CGFloat? { size == .xLarge ? .infinity : nil }
     
     private var fontColor: Color {
-        // Always white unless disabled with a dark theme.
+        Color.compound.textOnSolidPrimary
-        Color.element.systemPrimaryBackground
             .opacity(colorScheme == .dark && !isEnabled ? 0.3 : 1.0)
     }
     
-    public init(size: ElementControlSize = .regular, color: Color = .element.accent) {
+    public init(size: ElementControlSize = .regular, color: Color = .compound.textActionPrimary) {
         self.size = size
         self.color = color
     }
@@ -80,12 +79,12 @@ public struct ElementActionButtonStyle_Previews: PreviewProvider {
             
             Button { /* preview */ } label: {
                 Text("Clear BG")
-                    .foregroundColor(.element.alert)
+                    .foregroundColor(.compound.textCriticalPrimary)
             }
             .buttonStyle(ElementActionButtonStyle(color: .clear))
             
             Button("Red BG") { /* preview */ }
-                .buttonStyle(ElementActionButtonStyle(color: .element.alert))
+                .buttonStyle(ElementActionButtonStyle(color: .compound.textCriticalPrimary))
         }
         .padding()
     }

DesignKit/Sources/Buttons/ElementCapsuleButtonStyle.swift

@@ -47,15 +47,15 @@ public struct ElementCapsuleButtonStyle: ButtonStyle {
     var background: some View {
         if isProminent {
             Capsule()
-                .foregroundColor(Color.element.accent)
+                .foregroundColor(Color.compound.textActionPrimary)
         } else {
             Capsule()
-                .stroke(Color.element.accent)
+                .stroke(Color.compound.textActionPrimary)
         }
     }
     
     var fontColor: Color {
-        isProminent ? .element.systemPrimaryBackground : .element.systemPrimaryLabel
+        isProminent ? .compound.textOnSolidPrimary : .compound.textPrimary
     }
 }
 

DesignKit/Sources/Buttons/ElementGhostButtonStyle.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import DesignTokens
 import SwiftUI
 
@@ -22,7 +23,7 @@ public extension ButtonStyle where Self == ElementGhostButtonStyle {
     /// - Parameter size: The control size to use. Defaults to `regular`.
     /// - Parameter color: The color of the label and border. Defaults to the accent color.
     static func elementGhost(_ size: ElementControlSize = .regular,
-                             color: Color = .element.primaryContent) -> ElementGhostButtonStyle {
+                             color: Color = .compound.textActionAccent) -> ElementGhostButtonStyle {
         ElementGhostButtonStyle(size: size, color: color)
     }
 }
@@ -36,7 +37,7 @@ public struct ElementGhostButtonStyle: ButtonStyle {
     private var verticalPadding: CGFloat { size == .xLarge ? 12 : 4 }
     private var maxWidth: CGFloat? { size == .xLarge ? .infinity : nil }
     
-    public init(size: ElementControlSize = .regular, color: Color = .element.primaryContent) {
+    public init(size: ElementControlSize = .regular, color: Color = .compound.textActionAccent) {
         self.size = size
         self.color = color
     }
@@ -75,13 +76,13 @@ public struct ElementGhostButtonStyle_Previews: PreviewProvider {
                 .disabled(true)
             
             Button("Red BG") { /* preview */ }
-                .buttonStyle(ElementGhostButtonStyle(color: .element.alert))
+                .buttonStyle(ElementGhostButtonStyle(color: .compound.textCriticalPrimary))
             
             Button { /* preview */ } label: {
                 Text("Custom")
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.iconInfoPrimary)
             }
-            .buttonStyle(ElementGhostButtonStyle(color: .element.quaternaryContent))
+            .buttonStyle(ElementGhostButtonStyle(color: .compound.borderInfoSubtle))
         }
         .padding()
     }

DesignKit/Sources/Colors/ElementColors.swift

@@ -27,22 +27,32 @@ public extension Color {
 public struct ElementColors {
     // MARK: - Legacy Compound
     
-    private let compound = DesignTokens.CompoundColors()
+    private let colors = DesignTokens.CompoundColors()
     
-    public var accent: Color { systemPrimaryLabel }
+    @available(swift, obsoleted: 5.0, message: "Use textActionPrimary from Compound.")
-    public var alert: Color { compound.alert }
+    public var accent: Color { colors.primaryContent }
-    public var links: Color { compound.links }
+    @available(swift, obsoleted: 5.0, message: "Use textCriticalPrimary/iconCriticalPrimary from Compound.")
-    public var primaryContent: Color { compound.primaryContent }
+    public var alert: Color { colors.alert }
-    public var secondaryContent: Color { compound.secondaryContent }
+    @available(swift, obsoleted: 5.0, message: "Use textLinkExternal from Compound.")
-    public var tertiaryContent: Color { compound.tertiaryContent }
+    public var links: Color { colors.links }
-    public var quaternaryContent: Color { compound.quaternaryContent }
+    @available(swift, obsoleted: 5.0, message: "Use textPrimary/iconPrimary from Compound.")
-    public var quinaryContent: Color { compound.quinaryContent }
+    public var primaryContent: Color { colors.primaryContent }
-    public var system: Color { compound.system }
+    @available(swift, obsoleted: 5.0, message: "Use textSecondary/iconSecondary from Compound.")
-    public var background: Color { compound.background }
+    public var secondaryContent: Color { colors.secondaryContent }
-    // Should be the accent color
+    @available(swift, obsoleted: 5.0, message: "Use iconTertiary form Compound for icons. For text use textSecondary. For borders and backgrounds check with Design.")
-    public var brand: Color { compound.accent }
+    public var tertiaryContent: Color { colors.tertiaryContent }
+    @available(swift, obsoleted: 5.0, message: "Use iconQuaternary from Compound for icons. For text, borders and backgrounds check with Design.")
+    public var quaternaryContent: Color { colors.quaternaryContent }
+    @available(swift, obsoleted: 5.0, message: "Check with Design for the tokens to use from Compound.")
+    public var quinaryContent: Color { colors.quinaryContent }
+    @available(swift, obsoleted: 5.0, message: "Use bgSubtleSecondary from Compound.")
+    public var system: Color { colors.system }
+    @available(swift, obsoleted: 5.0, message: "Use bgCanvasDefault from Compound for backgrounds. For text or icons use textOnSolidPrimary/iconOnSolidPrimary.")
+    public var background: Color { colors.background }
+    @available(swift, obsoleted: 5.0, message: "Use textActionAccent/iconAccentTertiary from Compound.")
+    public var brand: Color { colors.accent }
     
-    public var contentAndAvatars: [Color] { compound.contentAndAvatars }
+    public var contentAndAvatars: [Color] { colors.contentAndAvatars }
     
     public func avatarBackground(for contentId: String) -> Color {
         let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
@@ -51,31 +61,12 @@ public struct ElementColors {
     
     // MARK: - Temp
     
-    public var systemPrimaryLabel: Color { .primary }
-    public var systemPrimaryBackground: Color { Color(.systemBackground) }
-    public var systemGray4: Color { Color(.systemGray4) }
-    public var systemGray6: Color { Color(.systemGray6) }
-    
-    public var bubblesYou: Color {
-        Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
-        })
-    }
-    
-    public var bubblesNotYou: Color {
-        Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .systemGray6 : .element.system
-        })
-    }
-    
     /// The colour to use on the background of a Form or grouped List.
     ///
     /// This colour is a special case as it uses `system` in light mode and `background` in dark mode.
     public var formBackground: Color {
         Color(UIColor { collection in
-            collection.userInterfaceStyle == .light ? .element.system : .element.background
+            collection.userInterfaceStyle == .light ? UIColor(.compound.bgSubtleSecondary) : UIColor(.compound.bgCanvasDefault)
         })
     }
     
@@ -84,42 +75,11 @@ public struct ElementColors {
     /// This colour is a special case as it uses `background` in light mode and `system` in dark mode.
     public var formRowBackground: Color {
         Color(UIColor { collection in
-            collection.userInterfaceStyle == .light ? .element.background : .element.system
+            collection.userInterfaceStyle == .light ? UIColor(.compound.bgCanvasDefault) : UIColor(.compound.bgSubtleSecondary)
         })
     }
 }
 
-// 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 = DesignTokens.CompoundUIColors()
-    
-    public var accent: UIColor { .label }
-    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 }
-
-    public func avatarBackground(for contentId: String) -> UIColor {
-        let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
-        return contentAndAvatars[colorIndex % contentAndAvatars.count]
-    }
-}
-
 private extension String {
     /// Calculates a numeric hash same as Element Web
     /// See original function here https://github.com/matrix-org/matrix-react-sdk/blob/321dd49db4fbe360fc2ff109ac117305c955b061/src/utils/FormattingUtils.js#L47

DesignKit/Sources/Fonts/ElementBaseFonts.swift

@@ -1,99 +0,0 @@
-//
-// 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 SwiftUI
-
-/// Fonts at  https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
-@objcMembers
-public class ElementBaseFonts {
-    // MARK: - Types
-    
-    /// A wrapper to provide both a `UIFont` and a SwiftUI `Font` in the same type.
-    /// The need for this comes from `Font` not adapting for dynamic type until the app
-    /// is restarted (or working at all in Xcode Previews) when initialised from a `UIFont`
-    /// (even if that font was created with the appropriate metrics).
-    public struct SharedFont {
-        public let uiFont: UIFont
-        public let font: Font
-    }
-    
-    // MARK: - Private
-    
-    /// Returns an instance of the font associated with the text style and scaled appropriately for the content size category defined in the trait collection.
-    /// Keep this method private method at the moment and create a DesignKit.Fonts.TextStyle if needed.
-    private func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection? = nil) -> UIFont {
-        UIFont.preferredFont(forTextStyle: textStyle, compatibleWith: traitCollection)
-    }
-}
-
-// MARK: - Fonts protocol
-
-public extension ElementBaseFonts {
-    var largeTitle: SharedFont {
-        let uiFont = font(forTextStyle: .largeTitle)
-        return SharedFont(uiFont: uiFont, font: .largeTitle)
-    }
-            
-    var title1: SharedFont {
-        let uiFont = font(forTextStyle: .title1)
-        return SharedFont(uiFont: uiFont, font: .title)
-    }
-    
-    var title2: SharedFont {
-        let uiFont = font(forTextStyle: .title2)
-        return SharedFont(uiFont: uiFont, font: .title2)
-    }
-    
-    var title3: SharedFont {
-        let uiFont = font(forTextStyle: .title3)
-        return SharedFont(uiFont: uiFont, font: .title3)
-    }
-    
-    var headline: SharedFont {
-        let uiFont = font(forTextStyle: .headline)
-        return SharedFont(uiFont: uiFont, font: .headline)
-    }
-    
-    var body: SharedFont {
-        let uiFont = font(forTextStyle: .body)
-        return SharedFont(uiFont: uiFont, font: .body)
-    }
-    
-    var callout: SharedFont {
-        let uiFont = font(forTextStyle: .callout)
-        return SharedFont(uiFont: uiFont, font: .callout)
-    }
-    
-    var subheadline: SharedFont {
-        let uiFont = font(forTextStyle: .subheadline)
-        return SharedFont(uiFont: uiFont, font: .subheadline)
-    }
-    
-    var footnote: SharedFont {
-        let uiFont = font(forTextStyle: .footnote)
-        return SharedFont(uiFont: uiFont, font: .footnote)
-    }
-    
-    var caption1: SharedFont {
-        let uiFont = font(forTextStyle: .caption1)
-        return SharedFont(uiFont: uiFont, font: .caption)
-    }
-    
-    var caption2: SharedFont {
-        let uiFont = font(forTextStyle: .caption2)
-        return SharedFont(uiFont: uiFont, font: .caption2)
-    }
-}

DesignKit/Sources/Fonts/ElementFonts.swift

@@ -1,74 +0,0 @@
-//
-// 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 SwiftUI
-
-public extension Font {
-    /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
-    @available(*, deprecated, renamed: "compound")
-    static let element = ElementFonts(values: ElementBaseFonts())
-}
-
-/// Struct for holding fonts for use in SwiftUI.
-public struct ElementFonts: Fonts {
-    public let largeTitle: Font
-    public let largeTitleBold: Font
-    public let title1: Font
-    public let title1Bold: Font
-    public let title2: Font
-    public let title2Bold: Font
-    public let title3: Font
-    public let title3Bold: Font
-    public let headline: Font
-    public let headlineBold: Font
-    public let body: Font
-    public let bodyBold: Font
-    public let callout: Font
-    public let calloutBold: Font
-    public let subheadline: Font
-    public let subheadlineBold: Font
-    public let footnote: Font
-    public let footnoteBold: Font
-    public let caption1: Font
-    public let caption1Bold: Font
-    public let caption2: Font
-    public let caption2Bold: Font
-    
-    public init(values: ElementBaseFonts) {
-        largeTitle = values.largeTitle.font
-        largeTitleBold = values.largeTitle.font.bold()
-        title1 = values.title1.font
-        title1Bold = values.title1.font.bold()
-        title2 = values.title2.font
-        title2Bold = values.title2.font.bold()
-        title3 = values.title3.font
-        title3Bold = values.title3.font.bold()
-        headline = values.headline.font
-        headlineBold = values.headline.font.bold()
-        body = values.body.font
-        bodyBold = values.body.font.bold()
-        callout = values.callout.font
-        calloutBold = values.callout.font.bold()
-        subheadline = values.subheadline.font
-        subheadlineBold = values.subheadline.font.bold()
-        footnote = values.footnote.font
-        footnoteBold = values.footnote.font.bold()
-        caption1 = values.caption1.font
-        caption1Bold = values.caption1.font.bold()
-        caption2 = values.caption2.font
-        caption2Bold = values.caption2.font.bold()
-    }
-}

DesignKit/Sources/Fonts/ElementUIFonts.swift

@@ -1,74 +0,0 @@
-//
-// 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
-
-public extension UIFont {
-    /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
-    @available(*, deprecated, message: "Not yet available in compound.")
-    @objc static let element = ElementUIFonts(values: ElementBaseFonts())
-}
-
-/// ObjC class for holding fonts for use in UIKit.
-@objcMembers public class ElementUIFonts: NSObject, Fonts {
-    public let largeTitle: UIFont
-    public let largeTitleBold: UIFont
-    public let title1: UIFont
-    public let title1Bold: UIFont
-    public let title2: UIFont
-    public let title2Bold: UIFont
-    public let title3: UIFont
-    public let title3Bold: UIFont
-    public let headline: UIFont
-    public let headlineBold: UIFont
-    public let body: UIFont
-    public let bodyBold: UIFont
-    public let callout: UIFont
-    public let calloutBold: UIFont
-    public let subheadline: UIFont
-    public let subheadlineBold: UIFont
-    public let footnote: UIFont
-    public let footnoteBold: UIFont
-    public let caption1: UIFont
-    public let caption1Bold: UIFont
-    public let caption2: UIFont
-    public let caption2Bold: UIFont
-    
-    public init(values: ElementBaseFonts) {
-        largeTitle = values.largeTitle.uiFont
-        largeTitleBold = values.largeTitle.uiFont.bold
-        title1 = values.title1.uiFont
-        title1Bold = values.title1.uiFont.bold
-        title2 = values.title2.uiFont
-        title2Bold = values.title2.uiFont.bold
-        title3 = values.title3.uiFont
-        title3Bold = values.title3.uiFont.bold
-        headline = values.headline.uiFont
-        headlineBold = values.headline.uiFont.bold
-        body = values.body.uiFont
-        bodyBold = values.body.uiFont.bold
-        callout = values.callout.uiFont
-        calloutBold = values.callout.uiFont.bold
-        subheadline = values.subheadline.uiFont
-        subheadlineBold = values.subheadline.uiFont.bold
-        footnote = values.footnote.uiFont
-        footnoteBold = values.footnote.uiFont.bold
-        caption1 = values.caption1.uiFont
-        caption1Bold = values.caption1.uiFont.bold
-        caption2 = values.caption2.uiFont
-        caption2Bold = values.caption2.uiFont.bold
-    }
-}

DesignKit/Sources/Fonts/Fonts.swift

@@ -1,90 +0,0 @@
-//
-// 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 Foundation
-
-/// Describe fonts used in the application.
-/// Font names are based on Element typography  https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0 which is based on Apple font text styles (UIFont.TextStyle): https://developer.apple.com/documentation/uikit/uifonttextstyle
-/// Create a custom TextStyle enum (like DesignKit.Fonts.TextStyle) is also a possibility
-public protocol Fonts {
-    associatedtype FontType
-    
-    /// The font for large titles.
-    var largeTitle: FontType { get }
-    
-    /// `largeTitle` with a Bold weight.
-    var largeTitleBold: FontType { get }
-    
-    /// The font for first-level hierarchical headings.
-    var title1: FontType { get }
-        
-    /// `title1` with a Bold weight.
-    var title1Bold: FontType { get }
-    
-    /// The font for second-level hierarchical headings.
-    var title2: FontType { get }
-    
-    /// `title2` with a Bold weight.
-    var title2Bold: FontType { get }
-    
-    /// The font for third-level hierarchical headings.
-    var title3: FontType { get }
-    
-    /// `title3` with a Bold weight.
-    var title3Bold: FontType { get }
-    
-    /// The font for headings.
-    var headline: FontType { get }
-    
-    /// `headline` with a Bold weight.
-    var headlineBold: FontType { get }
-    
-    /// The font for body text.
-    var body: FontType { get }
-    
-    /// `body` with a Bold weight.
-    var bodyBold: FontType { get }
-    
-    /// The font for callouts.
-    var callout: FontType { get }
-    
-    /// `callout` with a Bold weight.
-    var calloutBold: FontType { get }
-    
-    /// The font for subheadings.
-    var subheadline: FontType { get }
-    
-    /// `subheadline` with a Bold weight.
-    var subheadlineBold: FontType { get }
-    
-    /// The font for footnotes.
-    var footnote: FontType { get }
-    
-    /// `footnote` with a Bold weight.
-    var footnoteBold: FontType { get }
-    
-    /// The font for standard captions.
-    var caption1: FontType { get }
-
-    /// `caption1` with a Bold weight.
-    var caption1Bold: FontType { get }
-    
-    /// The font for alternate captions.
-    var caption2: FontType { get }
-    
-    /// `caption2` with a Bold weight.
-    var caption2Bold: FontType { get }
-}

DesignKit/Sources/Fonts/UIFont.swift

@@ -1,56 +0,0 @@
-//
-// 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
-
-public extension UIFont {
-    // MARK: - Convenient methods
-    
-    /// Update current font with a SymbolicTraits
-    func withTraits(_ traits: UIFontDescriptor.SymbolicTraits) -> UIFont {
-        guard let descriptor = fontDescriptor.withSymbolicTraits(traits) else {
-            return self
-        }
-        
-        // Size 0 means keep the size as it is
-        return UIFont(descriptor: descriptor, size: 0)
-    }
-    
-    /// Update current font with a given Weight
-    func withWeight(weight: Weight) -> UIFont {
-        // Add the font weight to the descriptor
-        let weightedFontDescriptor = fontDescriptor.addingAttributes([
-            UIFontDescriptor.AttributeName.traits: [
-                UIFontDescriptor.TraitKey.weight: weight
-            ]
-        ])
-        return UIFont(descriptor: weightedFontDescriptor, size: 0)
-    }
-    
-    // MARK: - Shortcuts
-    
-    var bold: UIFont {
-        withTraits(.traitBold)
-    }
-    
-    var semiBold: UIFont {
-        withWeight(weight: .semibold)
-    }
-
-    var italic: UIFont {
-        withTraits(.traitItalic)
-    }
-}

DesignKit/Sources/TextFields/ElementTextFieldStyle.swift

@@ -57,8 +57,7 @@ public struct ElementTextFieldStyle: TextFieldStyle {
     
     /// The color of the text field's border.
     private var borderColor: Color {
-        guard !isError else { return .element.alert }
+        isError ? .compound.textCriticalPrimary : .compound._borderTextFieldFocused
-        return isFocused ? .element.tertiaryContent : .element.quinaryContent
     }
     
     /// The width of the text field's border.
@@ -67,39 +66,32 @@ public struct ElementTextFieldStyle: TextFieldStyle {
     }
     
     private var accentColor: Color {
-        isError ? .element.alert : .element.brand
+        isError ? .compound.textCriticalPrimary : .compound.iconAccentTertiary
     }
     
     /// The color of the text inside the text field.
     private var textColor: Color {
-        if colorScheme == .dark {
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
-            return isEnabled ? .element.primaryContent : .element.tertiaryContent
-        } else {
-            return isEnabled ? .element.primaryContent : .element.quaternaryContent
-        }
     }
     
     /// The color of the text field's background.
     private var backgroundColor: Color {
-        if !isEnabled, colorScheme == .dark {
+        .compound.bgSubtleSecondary.opacity(isEnabled ? 1 : 0.5)
-            return .element.quinaryContent
-        }
-        return .element.system
     }
     
     /// The color of the placeholder text inside the text field.
     private var placeholderColor: Color {
-        .element.tertiaryContent
+        .compound.textPlaceholder
     }
     
     /// The color of the label above the text field.
     private var labelColor: Color {
-        isEnabled ? .element.primaryContent : .element.quaternaryContent
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
     }
     
     /// The color of the footer label below the text field.
     private var footerColor: Color {
-        isError ? .element.alert : .element.tertiaryContent
+        isError ? .compound.textCriticalPrimary : .compound.textSecondary
     }
     
     /// Creates the text field style configured as required.
@@ -147,7 +139,7 @@ public struct ElementTextFieldStyle: TextFieldStyle {
                 }
  
             footerText
-                .tint(.element.links)
+                .tint(.compound.textLinkExternal)
                 .font(.compound.bodyXS)
                 .foregroundColor(footerColor)
                 .padding(.horizontal, 16)

ElementX.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 54;
+	objectVersion = 51;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -184,7 +184,6 @@
 		4A618590DEB72C4F186BFED4 /* UserSessionFlowCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = C99FDEEB71173C4C6FA2734C /* UserSessionFlowCoordinator.swift */; };
 		4A85928E27D4C1A548A06EE9 /* StartChatScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 052B2F924572AFD70B5F500E /* StartChatScreenViewModel.swift */; };
 		4AAA8606FBA290E23D15422E /* AvatarHeaderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC743C7A85E3171BCBF0A653 /* AvatarHeaderView.swift */; };
-		4B16ABA1CCC957C7E919BDCE /* MapTiler.swift in Sources */ = {isa = PBXBuildFile; fileRef = 08ADEE79933CF1F3E6626920 /* MapTiler.swift */; };
 		4B978C09567387EF4366BD7A /* MediaLoaderTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3EF1AC723C2609C7705569CA /* MediaLoaderTests.swift */; };
 		4BB282209EA82015D0DF8F89 /* NavigationStackCoordinatorTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9C698E30698EC59302A8EEBD /* NavigationStackCoordinatorTests.swift */; };
 		4C5A638DAA8AF64565BA4866 /* EncryptedRoomTimelineItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5351EBD7A0B9610548E4B7B2 /* EncryptedRoomTimelineItem.swift */; };
@@ -199,6 +198,7 @@
 		501304F26B52DF7024011B6C /* EmojiMartJSONLoaderTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9BF9E3E6A23180EC05F06460 /* EmojiMartJSONLoaderTests.swift */; };
 		50C90117FE25390BFBD40173 /* RustTracing.swift in Sources */ = {isa = PBXBuildFile; fileRef = 542D4F49FABA056DEEEB3400 /* RustTracing.swift */; };
 		5100F53E6884A15F9BA07CC3 /* AttributedStringTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CA26F55123E36B50DB0B3A /* AttributedStringTests.swift */; };
+		516534FC5C893D57F169D5A8 /* MapTilerGeocoding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33720F7AD25E85E4A84669E8 /* MapTilerGeocoding.swift */; };
 		518C93DC6516D3D018DE065F /* UNNotificationRequest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 49E751D7EDB6043238111D90 /* UNNotificationRequest.swift */; };
 		520EEDAFBC778AB0B41F2F53 /* ClientMock.swift in Sources */ = {isa = PBXBuildFile; fileRef = ADE6170EFE6A161B0A68AB61 /* ClientMock.swift */; };
 		5375902175B2FEA2949D7D74 /* LoginScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4CDDDDD9FE1A699D23A5E096 /* LoginScreen.swift */; };
@@ -303,6 +303,7 @@
 		7A0A0929556792FB19B812C5 /* SessionVerificationScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84816E0D2F34E368BF64FA60 /* SessionVerificationScreen.swift */; };
 		7A642EE5F1ADC5D520F21924 /* MediaProviderProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 85EB16E7FE59A947CA441531 /* MediaProviderProtocol.swift */; };
 		7A71AEF419904209BB8C2833 /* UserAgentBuilder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1F2529D434C750ED78ADF1ED /* UserAgentBuilder.swift */; };
+		7ABAB3A1D52B86FACF2F74CF /* MapTilerGeoCodingServiceProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = C23B3FAD8B23C421BC0D1B1E /* MapTilerGeoCodingServiceProtocol.swift */; };
 		7AEC56ADEFC5A7198A17412F /* InviteUsersScreenUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = ADB35E2DB4EFE8E6F3959629 /* InviteUsersScreenUITests.swift */; };
 		7BB31E67648CF32D2AB5E502 /* RoomScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9CE3C90E487B255B735D73C8 /* RoomScreenViewModel.swift */; };
 		7C1A7B594B2F8143F0DD0005 /* ElementXAttributeScope.swift in Sources */ = {isa = PBXBuildFile; fileRef = C024C151639C4E1B91FCC68B /* ElementXAttributeScope.swift */; };
@@ -366,6 +367,7 @@
 		8E650379587C31D7912ED67B /* UNNotification+Creator.swift in Sources */ = {isa = PBXBuildFile; fileRef = DC0AEA686E425F86F6BA0404 /* UNNotification+Creator.swift */; };
 		8EF63DDDC1B54F122070B04D /* ReadMarkerRoomTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6311F21F911E23BE4DF51B4 /* ReadMarkerRoomTimelineView.swift */; };
 		8F2FAA98457750D9D664136F /* PostHog in Frameworks */ = {isa = PBXBuildFile; productRef = 4278261E147DB2DE5CFB7FC5 /* PostHog */; };
+		90733645AE76FB33DAD28C2B /* URLSession.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE40D4A5DD857AC16EED945A /* URLSession.swift */; };
 		90DF83A6A347F7EE7EDE89EE /* AttributedStringBuilderTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AF25E364AE85090A70AE4644 /* AttributedStringBuilderTests.swift */; };
 		90EB25D13AE6EEF034BDE9D2 /* Assets.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71D52BAA5BADB06E5E8C295D /* Assets.swift */; };
 		91ABC91758A6E4A5FAA2E9C4 /* ReadReceipt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 314F1C79850BE46E8ABEAFCB /* ReadReceipt.swift */; };
@@ -510,6 +512,7 @@
 		BD782053BE4C3D2F0BDE5699 /* ServiceLocator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 57F95CADD0A5DBD76B990FCB /* ServiceLocator.swift */; };
 		BDA68E8D95B2B24B28825B8B /* LoginScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3C368CAB3063EF275357ECD4 /* LoginScreenViewModel.swift */; };
 		BDED6DA7AD1E76018C424143 /* LegalInformationScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0C34667458773B02AB5FB0B2 /* LegalInformationScreenViewModel.swift */; };
+		BEA646DF302711A753F0D420 /* MapTilerStyleBuilderProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 225EFCA26877E75CDFE7F48D /* MapTilerStyleBuilderProtocol.swift */; };
 		BF675964C9159F718589C36A /* AnalyticsSettingsScreenUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 16037EE9E9A52AF37B7818E3 /* AnalyticsSettingsScreenUITests.swift */; };
 		C051475DFF4C8EBDDF4DC8E4 /* StartChatScreenModels.swift in Sources */ = {isa = PBXBuildFile; fileRef = B99E13633862847D8B7E2815 /* StartChatScreenModels.swift */; };
 		C08AAE7563E0722C9383F51C /* RoomMembersListScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B8E176484A89BAC389D4076 /* RoomMembersListScreen.swift */; };
@@ -554,15 +557,12 @@
 		CD6A72B65D3B6076F4045C30 /* PHGPostHogConfiguration.swift in Sources */ = {isa = PBXBuildFile; fileRef = A6B891A6DA826E2461DBB40F /* PHGPostHogConfiguration.swift */; };
 		CE1694C7BB93C3311524EF28 /* Untranslated.strings in Resources */ = {isa = PBXBuildFile; fileRef = D2F7194F440375338F8E2487 /* Untranslated.strings */; };
 		CE7148E80F09B7305E026AC6 /* OnboardingViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = C1198B925F4A88DA74083662 /* OnboardingViewModel.swift */; };
-		CE9152222A3B4B7000EDC949 /* MapTilerGeoCodingServiceProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE9152212A3B4B7000EDC949 /* MapTilerGeoCodingServiceProtocol.swift */; };
-		CE9152242A3B4B9200EDC949 /* MapTilerStyleBuilderProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE9152232A3B4B9200EDC949 /* MapTilerStyleBuilderProtocol.swift */; };
 		CE9530A4CA661E090635C2F2 /* NotificationItemProxy.swift in Sources */ = {isa = PBXBuildFile; fileRef = 25F7FE40EF7490A7E09D7BE6 /* NotificationItemProxy.swift */; };
-		CEB59FDC2A39D1A000E6B2DF /* MapTilerGeocoding.swift in Sources */ = {isa = PBXBuildFile; fileRef = CEB59FDB2A39D1A000E6B2DF /* MapTilerGeocoding.swift */; };
 		CEB8FB1269DE20536608B957 /* LoginMode.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B41FABA2B0AEF4389986495 /* LoginMode.swift */; };
-		CED722AD2A3B0E7B000F10C8 /* URLSession.swift in Sources */ = {isa = PBXBuildFile; fileRef = CED722AC2A3B0E7B000F10C8 /* URLSession.swift */; };
 		CF4044A8EED5C41BC0ED6ABE /* SoftLogoutScreenViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = D316BB02636AF2174F2580E6 /* SoftLogoutScreenViewModelProtocol.swift */; };
 		CF82143AA4A4F7BD11D22946 /* RoomTimelineViewProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = ACB6C5E4950B6C9842F35A38 /* RoomTimelineViewProvider.swift */; };
 		D02AA6208C7ACB9BE6332394 /* UNNotificationContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = BE148A4FFEE853C5A281500C /* UNNotificationContent.swift */; };
+		D181AC8FF236B7F91C0A8C28 /* MapTiler.swift in Sources */ = {isa = PBXBuildFile; fileRef = 23AA3F4B285570805CB0CCDD /* MapTiler.swift */; };
 		D25D26ACF2F1263092678C84 /* FormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4F1DFE6E746539F33042D3A9 /* FormSection.swift */; };
 		D2A15D03F81342A09340BD56 /* AnalyticsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = FEFEEE93B82937B2E86F92EB /* AnalyticsScreen.swift */; };
 		D2D70B5DB1A5E4AF0CD88330 /* target.yml in Resources */ = {isa = PBXBuildFile; fileRef = 033DB41C51865A2E83174E87 /* target.yml */; };
@@ -752,7 +752,6 @@
 		07E65E613F057697A1A0BC03 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
 		086B997409328F091EBA43CE /* RoomScreenUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomScreenUITests.swift; sourceTree = "<group>"; };
 		086C19086DD16E9B38E25954 /* ReportContentViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReportContentViewModelTests.swift; sourceTree = "<group>"; };
-		08ADEE79933CF1F3E6626920 /* MapTiler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTiler.swift; sourceTree = "<group>"; };
 		095AED4CF56DFF3EB7BB84C8 /* RoomTimelineProviderProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomTimelineProviderProtocol.swift; sourceTree = "<group>"; };
 		0960A7F5C1B0B6679BDF26F9 /* ElementToggleStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ElementToggleStyle.swift; sourceTree = "<group>"; };
 		099F2D36C141D845A445B1E6 /* EmojiProviderTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmojiProviderTests.swift; sourceTree = "<group>"; };
@@ -782,7 +781,7 @@
 		1222DB76B917EB8A55365BA5 /* target.yml */ = {isa = PBXFileReference; lastKnownFileType = text.yaml; path = target.yml; sourceTree = "<group>"; };
 		127A57D053CE8C87B5EFB089 /* Consumable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Consumable.swift; sourceTree = "<group>"; };
 		127C8472672A5BA09EF1ACF8 /* CurrentValuePublisher.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CurrentValuePublisher.swift; sourceTree = "<group>"; };
-		1304D9191300873EADA52D6E /* IntegrationTests.xctestplan */ = {isa = PBXFileReference; lastKnownFileType = text; path = IntegrationTests.xctestplan; sourceTree = "<group>"; };
+		1304D9191300873EADA52D6E /* IntegrationTests.xctestplan */ = {isa = PBXFileReference; path = IntegrationTests.xctestplan; sourceTree = "<group>"; };
 		130ED565A078F7E0B59D9D25 /* UNTextInputNotificationResponse+Creator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UNTextInputNotificationResponse+Creator.swift"; sourceTree = "<group>"; };
 		13802897C7AFA360EA74C0B0 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.stringsdict; name = en; path = en.lproj/Localizable.stringsdict; sourceTree = "<group>"; };
 		1423AB065857FA546444DB15 /* NotificationManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationManager.swift; sourceTree = "<group>"; };
@@ -818,8 +817,10 @@
 		2141693488CE5446BB391964 /* Date.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Date.swift; sourceTree = "<group>"; };
 		216F0DDC98F2A2C162D09C28 /* FileRoomTimelineItemContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FileRoomTimelineItemContent.swift; sourceTree = "<group>"; };
 		218AB05B4E3889731959C5F1 /* EventBasedTimelineItemProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EventBasedTimelineItemProtocol.swift; sourceTree = "<group>"; };
+		225EFCA26877E75CDFE7F48D /* MapTilerStyleBuilderProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerStyleBuilderProtocol.swift; sourceTree = "<group>"; };
 		22730A30C50AC2E3D5BA8642 /* InviteUsersScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InviteUsersScreenViewModelProtocol.swift; sourceTree = "<group>"; };
 		227AC5D71A4CE43512062243 /* URL.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = URL.swift; sourceTree = "<group>"; };
+		23AA3F4B285570805CB0CCDD /* MapTiler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTiler.swift; sourceTree = "<group>"; };
 		24227FF9A2797F6EA7F69CDD /* HomeScreenInvitesButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreenInvitesButton.swift; sourceTree = "<group>"; };
 		248649EBA5BC33DB93698734 /* SessionVerificationControllerProxyMock.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SessionVerificationControllerProxyMock.swift; sourceTree = "<group>"; };
 		24DEE0682C95F897B6C7CB0D /* ServerConfirmationScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerConfirmationScreenViewModel.swift; sourceTree = "<group>"; };
@@ -852,6 +853,7 @@
 		32B5E17028C02DFA7DDA3931 /* RoomMemberProxyProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomMemberProxyProtocol.swift; sourceTree = "<group>"; };
 		32C5DAA1773F57653BF1C4F9 /* SoftLogoutViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoftLogoutViewModelTests.swift; sourceTree = "<group>"; };
 		33649299575BADC34924ABC6 /* InvitesScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InvitesScreenCoordinator.swift; sourceTree = "<group>"; };
+		33720F7AD25E85E4A84669E8 /* MapTilerGeocoding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerGeocoding.swift; sourceTree = "<group>"; };
 		33E49C5C6F802B4D94CA78D1 /* ro */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = ro; path = ro.lproj/Localizable.strings; sourceTree = "<group>"; };
 		340179A0FC1AD4AEDA7FC134 /* CreateRoomViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreateRoomViewModelProtocol.swift; sourceTree = "<group>"; };
 		342BEBC3C5FC3F9943C41C4C /* TemplateScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TemplateScreenViewModelProtocol.swift; sourceTree = "<group>"; };
@@ -901,7 +903,7 @@
 		47111410B6E659A697D472B5 /* RoomProxyProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomProxyProtocol.swift; sourceTree = "<group>"; };
 		471EB7D96AFEA8D787659686 /* EmoteRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmoteRoomTimelineView.swift; sourceTree = "<group>"; };
 		47873756E45B46683D97DC32 /* LegalInformationScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LegalInformationScreenModels.swift; sourceTree = "<group>"; };
-		478BE8591BD13E908EF70C0C /* DesignKit */ = {isa = PBXFileReference; lastKnownFileType = folder; path = DesignKit; sourceTree = SOURCE_ROOT; };
+		478BE8591BD13E908EF70C0C /* DesignKit */ = {isa = PBXFileReference; lastKnownFileType = folder; name = DesignKit; path = DesignKit; sourceTree = SOURCE_ROOT; };
 		4798B3B7A1E8AE3901CEE8C6 /* FramePreferenceKey.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FramePreferenceKey.swift; sourceTree = "<group>"; };
 		47EBB5D698CE9A25BB553A2D /* Strings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Strings.swift; sourceTree = "<group>"; };
 		47F29139BC2A804CE5E0757E /* MediaUploadPreviewScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MediaUploadPreviewScreenViewModel.swift; sourceTree = "<group>"; };
@@ -1058,7 +1060,7 @@
 		8D6094DEAAEB388E1AE118C6 /* MockRoomTimelineProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockRoomTimelineProvider.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; lastKnownFileType = text; path = UITests.xctestplan; sourceTree = "<group>"; };
+		8E088F2A1B9EC529D3221931 /* UITests.xctestplan */ = {isa = PBXFileReference; path = UITests.xctestplan; sourceTree = "<group>"; };
 		8E1BBA73B611EDEEA6E20E05 /* InvitesScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InvitesScreenModels.swift; sourceTree = "<group>"; };
 		8EC57A32ABC80D774CC663DB /* SettingsScreenUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsScreenUITests.swift; sourceTree = "<group>"; };
 		8F61A0DD8243B395499C99A2 /* InvitesScreenUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InvitesScreenUITests.swift; sourceTree = "<group>"; };
@@ -1144,6 +1146,7 @@
 		ADD9E0FFA29EAACFF3AB9732 /* SessionVerificationScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SessionVerificationScreenViewModel.swift; sourceTree = "<group>"; };
 		ADE6170EFE6A161B0A68AB61 /* ClientMock.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ClientMock.swift; sourceTree = "<group>"; };
 		AE203026B9AD3DB412439866 /* MediaUploadingPreprocessorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MediaUploadingPreprocessorTests.swift; sourceTree = "<group>"; };
+		AE40D4A5DD857AC16EED945A /* URLSession.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = URLSession.swift; sourceTree = "<group>"; };
 		AE52983FAFB4E0998C00EE8A /* CancellableTask.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CancellableTask.swift; sourceTree = "<group>"; };
 		AE5DDBEBBA17973ED4638823 /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.stringsdict; name = de; path = de.lproj/Localizable.stringsdict; sourceTree = "<group>"; };
 		AEEAFB646E583655652C3D04 /* RoomStateEventStringBuilderTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomStateEventStringBuilderTests.swift; sourceTree = "<group>"; };
@@ -1160,7 +1163,7 @@
 		B43456E73F8A2D52B69B9FB9 /* TemplateScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TemplateScreenViewModel.swift; sourceTree = "<group>"; };
 		B590BD4507D4F0A377FDE01A /* LoadableAvatarImage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadableAvatarImage.swift; sourceTree = "<group>"; };
 		B5B243E7818E5E9F6A4EDC7A /* NoticeRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoticeRoomTimelineView.swift; sourceTree = "<group>"; };
-		B61C339A2FDDBD067FF6635C /* ConfettiScene.scn */ = {isa = PBXFileReference; lastKnownFileType = file.bplist; path = ConfettiScene.scn; sourceTree = "<group>"; };
+		B61C339A2FDDBD067FF6635C /* ConfettiScene.scn */ = {isa = PBXFileReference; path = ConfettiScene.scn; sourceTree = "<group>"; };
 		B6311F21F911E23BE4DF51B4 /* ReadMarkerRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReadMarkerRoomTimelineView.swift; sourceTree = "<group>"; };
 		B6E89E530A8E92EC44301CA1 /* Bundle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bundle.swift; sourceTree = "<group>"; };
 		B7AE92E7BFF71797BDE1D261 /* MapTilerStyleBuilder.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerStyleBuilder.swift; sourceTree = "<group>"; };
@@ -1192,6 +1195,7 @@
 		C1198B925F4A88DA74083662 /* OnboardingViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingViewModel.swift; sourceTree = "<group>"; };
 		C14D83B2B7CD5501A0089EFC /* LayoutDirection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LayoutDirection.swift; sourceTree = "<group>"; };
 		C15E0017717EAE3A1D02D005 /* StaticLocationScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StaticLocationScreenCoordinator.swift; sourceTree = "<group>"; };
+		C23B3FAD8B23C421BC0D1B1E /* MapTilerGeoCodingServiceProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerGeoCodingServiceProtocol.swift; sourceTree = "<group>"; };
 		C2886615BEBAE33A0AA4D5F8 /* RoomScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomScreenModels.swift; sourceTree = "<group>"; };
 		C2E9B841EE4878283ECDB554 /* InviteUsersScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InviteUsersScreen.swift; sourceTree = "<group>"; };
 		C2F079B5DBD0D85FEA687AAE /* SDKGeneratedMocks.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SDKGeneratedMocks.swift; sourceTree = "<group>"; };
@@ -1228,12 +1232,8 @@
 		CD469F7513574341181F7EAA /* ServerSelectionScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerSelectionScreen.swift; sourceTree = "<group>"; };
 		CD6B0C4639E066915B5E6463 /* target.yml */ = {isa = PBXFileReference; lastKnownFileType = text.yaml; path = target.yml; sourceTree = "<group>"; };
 		CDB3227C7A74B734924942E9 /* RoomSummaryProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomSummaryProvider.swift; sourceTree = "<group>"; };
-		CE9152212A3B4B7000EDC949 /* MapTilerGeoCodingServiceProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerGeoCodingServiceProtocol.swift; sourceTree = "<group>"; };
-		CE9152232A3B4B9200EDC949 /* MapTilerStyleBuilderProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerStyleBuilderProtocol.swift; sourceTree = "<group>"; };
-		CEB59FDB2A39D1A000E6B2DF /* MapTilerGeocoding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapTilerGeocoding.swift; sourceTree = "<group>"; };
-		CED722AC2A3B0E7B000F10C8 /* URLSession.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = URLSession.swift; sourceTree = "<group>"; };
 		CEE0E6043EFCF6FD2A341861 /* TimelineReplyView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineReplyView.swift; sourceTree = "<group>"; };
-		CEE41494C837AA403A06A5D9 /* UnitTests.xctestplan */ = {isa = PBXFileReference; lastKnownFileType = text; path = UnitTests.xctestplan; sourceTree = "<group>"; };
+		CEE41494C837AA403A06A5D9 /* UnitTests.xctestplan */ = {isa = PBXFileReference; path = UnitTests.xctestplan; sourceTree = "<group>"; };
 		CF48AF076424DBC1615C74AD /* AuthenticationServiceProxy.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthenticationServiceProxy.swift; sourceTree = "<group>"; };
 		D06A27D9C70E0DCC1E199163 /* OnboardingBackgroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingBackgroundView.swift; sourceTree = "<group>"; };
 		D071F86CD47582B9196C9D16 /* UserDiscoverySection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserDiscoverySection.swift; sourceTree = "<group>"; };
@@ -1300,7 +1300,7 @@
 		ECF79FB25E2D4BD6F50CE7C9 /* RoomMembersListScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomMembersListScreenViewModel.swift; sourceTree = "<group>"; };
 		ED044D00F2176681CC02CD54 /* HomeScreenRoomCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreenRoomCell.swift; sourceTree = "<group>"; };
 		ED1D792EB82506A19A72C8DE /* RoomTimelineItemProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomTimelineItemProtocol.swift; sourceTree = "<group>"; };
-		ED482057AE39D5C6D9C5F3D8 /* message.caf */ = {isa = PBXFileReference; lastKnownFileType = file; path = message.caf; sourceTree = "<group>"; };
+		ED482057AE39D5C6D9C5F3D8 /* message.caf */ = {isa = PBXFileReference; path = message.caf; sourceTree = "<group>"; };
 		ED983D4DCA5AFA6E1ED96099 /* StateRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StateRoomTimelineView.swift; sourceTree = "<group>"; };
 		EDAA4472821985BF868CC21C /* ServerSelectionViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerSelectionViewModelTests.swift; sourceTree = "<group>"; };
 		EE378083653EF0C9B5E9D580 /* EmoteRoomTimelineItemContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmoteRoomTimelineItemContent.swift; sourceTree = "<group>"; };
@@ -1916,7 +1916,7 @@
 				4E2245243369B99216C7D84E /* ImageCache.swift */,
 				C14D83B2B7CD5501A0089EFC /* LayoutDirection.swift */,
 				2AFEF3AC64B1358083F76B8B /* List.swift */,
-				08ADEE79933CF1F3E6626920 /* MapTiler.swift */,
+				23AA3F4B285570805CB0CCDD /* MapTiler.swift */,
 				F72EFC8C634469F9262659C7 /* NSItemProvider.swift */,
 				95BAC0F6C9644336E9567EE6 /* NSRegularExpresion.swift */,
 				7310D8DFE01AF45F0689C3AA /* Publisher.swift */,
@@ -1927,7 +1927,7 @@
 				287FC98AF2664EAD79C0D902 /* UIDevice.swift */,
 				BE148A4FFEE853C5A281500C /* UNNotificationContent.swift */,
 				227AC5D71A4CE43512062243 /* URL.swift */,
-				CED722AC2A3B0E7B000F10C8 /* URLSession.swift */,
+				AE40D4A5DD857AC16EED945A /* URLSession.swift */,
 				897DF5E9A70CE05A632FC8AF /* UTType.swift */,
 				E992D7B8BE54B2AB454613AF /* XCUIElement.swift */,
 				A7F55D1B2A3B639A009D8E93 /* ConfirmationDialog.swift */,
@@ -2978,10 +2978,10 @@
 				622D09D4ECE759189009AEAF /* MapLibreMapView.swift */,
 				B81B6170DB690013CEB646F4 /* MapLibreModels.swift */,
 				E062C1750EFC8627DE4CAB8E /* MapTilerAuthorization.swift */,
+				33720F7AD25E85E4A84669E8 /* MapTilerGeocoding.swift */,
+				C23B3FAD8B23C421BC0D1B1E /* MapTilerGeoCodingServiceProtocol.swift */,
 				B7AE92E7BFF71797BDE1D261 /* MapTilerStyleBuilder.swift */,
-				CE9152232A3B4B9200EDC949 /* MapTilerStyleBuilderProtocol.swift */,
+				225EFCA26877E75CDFE7F48D /* MapTilerStyleBuilderProtocol.swift */,
-				CEB59FDB2A39D1A000E6B2DF /* MapTilerGeocoding.swift */,
-				CE9152212A3B4B7000EDC949 /* MapTilerGeoCodingServiceProtocol.swift */,
 			);
 			path = MapLibre;
 			sourceTree = "<group>";
@@ -3879,7 +3879,6 @@
 				3ED2725734568F6B8CC87544 /* AttributedStringBuilder.swift in Sources */,
 				A6DEC1ADEC8FEEC206A0FA37 /* AttributedStringBuilderProtocol.swift in Sources */,
 				F8E725D42023ECA091349245 /* AudioRoomTimelineItem.swift in Sources */,
-				CE9152242A3B4B9200EDC949 /* MapTilerStyleBuilderProtocol.swift in Sources */,
 				88F348E2CB14FF71CBBB665D /* AudioRoomTimelineItemContent.swift in Sources */,
 				E62EC30B39354A391E32A126 /* AudioRoomTimelineView.swift in Sources */,
 				EA65360A0EC026DD83AC0CF5 /* AuthenticationCoordinator.swift in Sources */,
@@ -3960,7 +3959,6 @@
 				02D8DF8EB7537EB4E9019DDB /* EventBasedTimelineItemProtocol.swift in Sources */,
 				63E46D18B91D08E15FC04125 /* ExpiringTaskRunner.swift in Sources */,
 				5F06AD3C66884CE793AE6119 /* FileManager.swift in Sources */,
-				CED722AD2A3B0E7B000F10C8 /* URLSession.swift in Sources */,
 				661A664C6EDF856B05519206 /* FilePreviewScreen.swift in Sources */,
 				B5BD05558DC2C3091905E14A /* FilePreviewScreenCoordinator.swift in Sources */,
 				A6F713461DB62AC06293E7B7 /* FilePreviewScreenModels.swift in Sources */,
@@ -4029,9 +4027,12 @@
 				B66757D0254843162595B25D /* MXLogger.swift in Sources */,
 				C1D0AB8222D7BAFC9AF9C8C0 /* MapLibreMapView.swift in Sources */,
 				C9BE065FA7D4E77E4C61CB69 /* MapLibreModels.swift in Sources */,
-				4B16ABA1CCC957C7E919BDCE /* MapTiler.swift in Sources */,
+				D181AC8FF236B7F91C0A8C28 /* MapTiler.swift in Sources */,
 				FCDA202B246F75BA28E10C5F /* MapTilerAuthorization.swift in Sources */,
+				7ABAB3A1D52B86FACF2F74CF /* MapTilerGeoCodingServiceProtocol.swift in Sources */,
+				516534FC5C893D57F169D5A8 /* MapTilerGeocoding.swift in Sources */,
 				14343C2F9AD2BFEA92CA28FF /* MapTilerStyleBuilder.swift in Sources */,
+				BEA646DF302711A753F0D420 /* MapTilerStyleBuilderProtocol.swift in Sources */,
 				67C05C50AD734283374605E3 /* MatrixEntityRegex.swift in Sources */,
 				8658F5034EAD7357CE7F9AC7 /* MatrixUserShareLink.swift in Sources */,
 				BCC864190651B3A3CF51E4DF /* MediaFileHandleProxy.swift in Sources */,
@@ -4063,7 +4064,6 @@
 				EA01A06EEDFEF4AE7652E5F3 /* NSRegularExpresion.swift in Sources */,
 				FA2BBAE9FC5E2E9F960C0980 /* NavigationCoordinators.swift in Sources */,
 				71C1347F23868324A4F43940 /* NavigationModule.swift in Sources */,
-				CEB59FDC2A39D1A000E6B2DF /* MapTilerGeocoding.swift in Sources */,
 				B5E455C9689EA600EDB3E9E0 /* NavigationRootCoordinator.swift in Sources */,
 				C6136E848E55D2C86BF760F5 /* NetworkMonitor.swift in Sources */,
 				0C58A846F61949B1D545D661 /* NoticeRoomTimelineItem.swift in Sources */,
@@ -4261,6 +4261,7 @@
 				706289B086B0A6B0C211763F /* UITestsSignalling.swift in Sources */,
 				D02AA6208C7ACB9BE6332394 /* UNNotificationContent.swift in Sources */,
 				071A017E415AD378F2961B11 /* URL.swift in Sources */,
+				90733645AE76FB33DAD28C2B /* URLSession.swift in Sources */,
 				18867F4F1C8991EEC56EA932 /* UTType.swift in Sources */,
 				84226AD2E1F1FBC965F3B09E /* UnitTestsAppCoordinator.swift in Sources */,
 				34C752A73717C691582DC6C7 /* UnsupportedRoomTimelineItem.swift in Sources */,
@@ -4278,7 +4279,6 @@
 				F7BC744FFA7FE248FAE7F570 /* UserIndicatorToastView.swift in Sources */,
 				E3291AD16D7A5CB14781819C /* UserNotificationCenterProtocol.swift in Sources */,
 				40B79D20A873620F7F128A2C /* UserPreference.swift in Sources */,
-				CE9152222A3B4B7000EDC949 /* MapTilerGeoCodingServiceProtocol.swift in Sources */,
 				80DEA2A4B20F9E279EAE6B2B /* UserProfile+Mock.swift in Sources */,
 				F94000E3D91B11C527DA8807 /* UserProfileCell.swift in Sources */,
 				E21FE4C5B614F311C0955859 /* UserProfileProxy.swift in Sources */,
@@ -4960,7 +4960,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = aaa43409ca09130cb9e9a0fe02c803c65aa42aed;
+				revision = d59c317362beba940baa43d6aacdd357e208048d;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

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

@@ -11,9 +11,9 @@
     {
       "identity" : "compound-ios",
       "kind" : "remoteSourceControl",
-      "location" : "https://github.com/vector-im/compound-ios",
+      "location" : "https://github.com/vector-im/compound-ios.git",
       "state" : {
-        "revision" : "aaa43409ca09130cb9e9a0fe02c803c65aa42aed"
+        "revision" : "d59c317362beba940baa43d6aacdd357e208048d"
       }
     },
     {

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilder.swift

@@ -112,7 +112,7 @@ struct AttributedStringBuilder: AttributedStringBuilderProtocol {
         attributedString.enumerateAttribute(.backgroundColor, in: .init(location: 0, length: attributedString.length), options: []) { value, range, _ in
             if let value = value as? UIColor,
                value == temporaryCodeBlockMarkingColor {
-                attributedString.addAttribute(.backgroundColor, value: UIColor.element.quinaryContent as Any, range: range)
+                attributedString.addAttribute(.backgroundColor, value: UIColor(.compound._bgCodeBlock) as Any, range: range)
             }
         }
     }

ElementX/Sources/Other/MapLibre/LocationAnnotation.swift

@@ -73,7 +73,7 @@ class LocationAnnotationView: MGLUserLocationAnnotationView {
     private func addUserView() {
         guard let pinView = UIHostingController(rootView: Image(systemName: "circle.fill")
             .resizable()
-            .foregroundColor(.element.accent)).view else {
+            .foregroundColor(.compound.iconPrimary)).view else {
             return
         }
         
@@ -83,7 +83,7 @@ class LocationAnnotationView: MGLUserLocationAnnotationView {
     private func addPinView() {
         guard let pinView = UIHostingController(rootView: Image(systemName: "mappin")
             .resizable()
-            .foregroundColor(.element.accent)).view else {
+            .foregroundColor(.compound.iconPrimary)).view else {
             return
         }
         

ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift

@@ -45,13 +45,13 @@ struct FormRowAccessory: View {
         case .navigationLink:
             Image(systemName: "chevron.forward")
                 .font(.compound.bodyMD.bold())
-                .foregroundColor(.element.quaternaryContent)
+                .foregroundColor(.compound.iconQuaternary)
         case .progressView:
             ProgressView()
         case .selection(let isSelected):
             Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                 .font(.compound.bodyLG)
-                .foregroundColor(isSelected && isEnabled ? .element.primaryContent : .element.tertiaryContent)
+                .foregroundColor(isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
         }
     }
     
@@ -87,14 +87,14 @@ struct FormButtonStyle: PrimitiveButtonStyle {
             HStack {
                 configuration.label
                     .labelStyle(FormRowLabelStyle(role: configuration.role))
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
                 accessory
             }
             .contentShape(Rectangle())
             .padding(FormRow.insets) // Re-apply the normal insets using padding.
-            .background(configuration.isPressed ? Color.element.quinaryContent : .clear)
+            .background(configuration.isPressed ? Color.compound.bgSubtlePrimary : .clear)
         }
     }
 }
@@ -109,15 +109,15 @@ struct FormActionButtonStyle: ButtonStyle {
         VStack {
             configuration.label
                 .buttonStyle(.plain)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .frame(width: menuIconSize, height: menuIconSize)
                 .background {
                     RoundedRectangle(cornerRadius: 16)
-                        .fill(configuration.isPressed ? Color.element.quinaryContent : .element.formRowBackground)
+                        .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .element.formRowBackground)
                 }
             
             Text(title)
-                .foregroundColor(.element.secondaryContent)
+                .foregroundColor(.compound.textSecondary)
                 .font(.compound.bodyMD)
         }
     }

ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift

@@ -24,15 +24,15 @@ struct FormRowLabelStyle: LabelStyle {
 
     private var titleColor: Color {
         if role == .destructive {
-            return .element.alert
+            return .compound.textCriticalPrimary
         } else {
-            return .element.primaryContent
+            return .compound.textPrimary
         }
     }
 
     private var iconBackgroundColor: Color {
         if role == .destructive {
-            return .element.alert.opacity(0.1)
+            return .compound.textCriticalPrimary.opacity(0.1)
         } else {
             return .element.formBackground
         }
@@ -40,9 +40,9 @@ struct FormRowLabelStyle: LabelStyle {
 
     private var iconForegroundColor: Color {
         if role == .destructive {
-            return .element.alert
+            return .compound.textCriticalPrimary
         } else {
-            return .element.secondaryContent
+            return .compound.iconSecondary
         }
     }
 

ElementX/Sources/Other/SwiftUI/Form Styles/FormSection.swift

@@ -25,7 +25,7 @@ extension View {
     
     /// Applies a standard style for form header text.
     func formSectionHeader() -> some View {
-        foregroundColor(.element.secondaryContent)
+        foregroundColor(.compound.textSecondary)
             .font(.compound.bodyXS)
     }
     

ElementX/Sources/Other/SwiftUI/Layout/FullscreenDialog.swift

@@ -115,7 +115,7 @@ struct FullscreenDialog_Previews: PreviewProvider {
             buttons
         }
         .background()
-        .environment(\.backgroundStyle, AnyShapeStyle(Color.element.background))
+        .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
     }
     
     private static var content: some View {

ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift

@@ -34,13 +34,13 @@ struct AvatarHeaderView<Footer: View>: View {
                                 imageProvider: imageProvider)
 
             Text(name ?? id)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .font(.compound.headingLGBold)
                 .multilineTextAlignment(.center)
 
             if let subtitle {
                 Text(subtitle)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.textSecondary)
                     .font(.compound.bodyLG)
                     .multilineTextAlignment(.center)
             }

ElementX/Sources/Other/SwiftUI/Views/ElementToggleStyle.swift

@@ -23,7 +23,7 @@ struct ElementToggleStyle: ToggleStyle {
             Image(systemName: configuration.isOn ? "checkmark.square.fill" : "square")
                 .font(.title3.weight(.regular))
                 .imageScale(.large)
-                .foregroundColor(.element.accent)
+                .foregroundColor(.compound.textActionPrimary)
         }
         .buttonStyle(.plain)
     }

ElementX/Sources/Other/SwiftUI/Views/LoadableAvatarImage.swift

@@ -38,7 +38,7 @@ struct LoadableAvatarImage: View {
     var body: some View {
         avatar
             .frame(width: frameSize, height: frameSize)
-            .background(Color.element.background)
+            .background(Color.compound.bgCanvasDefault)
             .clipShape(Circle())
     }
     

ElementX/Sources/Other/SwiftUI/Views/PlaceholderAvatarImage.swift

@@ -49,11 +49,11 @@ struct PlaceholderAvatarImage: View {
 
     private var bgColor: Color {
         if redactionReasons == .placeholder {
-            return .element.systemGray4
+            return Color(.systemGray4) // matches the default text redaction
         }
 
         guard let contentID else {
-            return .element.accent
+            return .compound.iconPrimary
         }
 
         return .element.avatarBackground(for: contentID)

ElementX/Sources/Other/SwiftUI/Views/UserProfileCell.swift

@@ -22,6 +22,16 @@ struct UserProfileCell: View {
     let membership: MembershipState?
     let imageProvider: ImageProviderProtocol?
     
+    private var subtitle: String? {
+        if let membershipText = membership?.localizedDescription {
+            return membershipText
+        } else if user.displayName != nil {
+            return user.userID
+        } else {
+            return nil
+        }
+    }
+    
     var body: some View {
         HStack(spacing: 16) {
             LoadableAvatarImage(url: user.avatarURL,
@@ -34,9 +44,13 @@ struct UserProfileCell: View {
             VStack(alignment: .leading, spacing: 0) {
                 Text(user.displayName ?? user.userID)
                     .font(.compound.headingSM)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
                 
-                subtitleContent
+                if let subtitle {
+                    Text(subtitle)
+                        .font(.compound.bodyMD)
+                        .foregroundColor(.compound.textSecondary)
+                }
                 
                 warningContent
                     .padding(.top, 2)
@@ -47,19 +61,6 @@ struct UserProfileCell: View {
     
     // MARK: - Private
     
-    @ViewBuilder
-    private var subtitleContent: some View {
-        if let membershipText = membership?.localizedDescription {
-            Text(membershipText)
-                .font(.compound.bodyMD)
-                .foregroundColor(.element.tertiaryContent)
-        } else if user.displayName != nil {
-            Text(user.userID)
-                .font(.compound.bodyMD)
-                .foregroundColor(.element.tertiaryContent)
-        }
-    }
-    
     @ViewBuilder
     private var warningContent: some View {
         if !user.isVerified, membership == nil {
@@ -68,7 +69,7 @@ struct UserProfileCell: View {
                     .foregroundColor(.compound.textCriticalPrimary)
                 
                 Text(L10n.commonInviteUnknownProfile)
-                    .foregroundColor(.element.tertiaryContent)
+                    .foregroundColor(.compound.textSecondary)
             }
             .font(.compound.bodyXS)
         }

ElementX/Sources/Other/UserIndicator/UserIndicatorModalView.swift

@@ -36,13 +36,13 @@ struct UserIndicatorModalView: View {
                     }
                     Text(indicator.title)
                         .font(.compound.bodyLG)
-                        .foregroundColor(.element.primaryContent)
+                        .foregroundColor(.compound.textPrimary)
                 }
             }
             .padding()
             .frame(minWidth: 150.0)
             .fixedSize(horizontal: true, vertical: false)
-            .background(Color.element.quinaryContent)
+            .background(Color.compound.bgSubtlePrimary)
             .clipShape(RoundedCornerShape(radius: 12.0, corners: .allCorners))
             .shadow(color: .black.opacity(0.1), radius: 10.0, y: 4.0)
             .onReceive(indicator.progressPublisher) { progress in

ElementX/Sources/Other/UserIndicator/UserIndicatorToastView.swift

@@ -26,13 +26,13 @@ struct UserIndicatorToastView: View {
             }
             Text(indicator.title)
                 .font(.compound.bodySM)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
         }
         .id(indicator.id)
         .padding(.horizontal, 12.0)
         .padding(.vertical, 10.0)
         .frame(minWidth: 150.0)
-        .background(Color.element.background)
+        .background(Color.compound.bgSubtlePrimary)
         .clipShape(RoundedCornerShape(radius: 24.0, corners: .allCorners))
         .shadow(color: .black.opacity(0.25), radius: 10.0, y: 4.0)
         .transition(toastTransition)

ElementX/Sources/Screens/AnalyticsPromptScreen/View/AnalyticsPromptScreen.swift

@@ -27,7 +27,7 @@ struct AnalyticsPromptScreen: View {
             buttons
         }
         .background()
-        .environment(\.backgroundStyle, AnyShapeStyle(Color.element.background))
+        .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
         .navigationBarHidden(true)
         .navigationBarBackButtonHidden(true)
     }
@@ -41,18 +41,18 @@ struct AnalyticsPromptScreen: View {
             Text(L10n.screenAnalyticsPromptTitle(InfoPlistReader.main.bundleDisplayName))
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .padding(.bottom, 2)
                 .accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.title)
             
             Text(context.viewState.strings.optInContent)
                 .font(.compound.bodyLG)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.secondaryContent)
+                .foregroundColor(.compound.textSecondary)
-                .tint(.element.links)
+                .tint(.compound.textLinkExternal)
             
             Divider()
-                .background(Color.element.quinaryContent)
+                .overlay { Color.compound._borderRowSeparator }
                 .padding(.vertical, 20)
             
             checkmarkList
@@ -68,7 +68,7 @@ struct AnalyticsPromptScreen: View {
         }
         .fixedSize(horizontal: false, vertical: true)
         .font(.compound.bodyLG)
-        .foregroundColor(.element.secondaryContent)
+        .foregroundColor(.compound.textSecondary)
         .frame(maxWidth: .infinity)
     }
     

ElementX/Sources/Screens/AnalyticsPromptScreen/View/AnalyticsPromptScreenCheckmarkItem.swift

@@ -30,7 +30,7 @@ struct AnalyticsPromptScreenCheckmarkItem: View {
     var body: some View {
         Label { Text(attributedString) } icon: {
             Image(systemName: "checkmark.circle")
-                .foregroundColor(.element.accent)
+                .foregroundColor(.compound.iconPrimary)
         }
     }
 }

ElementX/Sources/Screens/Authentication/AuthenticationIconImage.swift

@@ -27,14 +27,14 @@ struct AuthenticationIconImage: View {
         image
             .resizable()
             .renderingMode(.template)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.iconSecondary)
             .aspectRatio(contentMode: .fit)
             .accessibilityHidden(true)
             .padding(insets)
             .frame(width: 70, height: 70)
             .background {
                 RoundedRectangle(cornerRadius: 14)
-                    .fill(Color.element.quinaryContent)
+                    .fill(Color.compound.bgSubtleSecondary)
             }
     }
 }

ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift

@@ -45,7 +45,7 @@ struct LoginScreen: View {
             .padding(.horizontal, 16)
             .padding(.bottom, 16)
         }
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .alert(item: $context.alertInfo)
     }
     
@@ -58,7 +58,7 @@ struct LoginScreen: View {
             Text(L10n.screenLoginTitleWithHomeserver(context.viewState.homeserver.address))
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
         }
         .padding(.horizontal, 16)
     }
@@ -68,14 +68,14 @@ struct LoginScreen: View {
         VStack(alignment: .leading, spacing: 0) {
             Text(L10n.screenLoginFormHeader)
                 .font(.compound.bodySM)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .padding(.horizontal, 16)
                 .padding(.bottom, 8)
             
             TextField(L10n.commonUsername,
                       text: $context.username,
                       // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
-                      prompt: Text(L10n.commonUsername).foregroundColor(.element.tertiaryContent))
+                      prompt: Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder))
                 .focused($isUsernameFocused)
                 .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
                 .disableAutocorrection(true)
@@ -89,7 +89,7 @@ struct LoginScreen: View {
             SecureField(L10n.commonPassword,
                         text: $context.password,
                         // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
-                        prompt: Text(L10n.commonPassword).foregroundColor(.element.tertiaryContent))
+                        prompt: Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder))
                 .focused($isPasswordFocused)
                 .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
                 .textContentType(.password)
@@ -112,7 +112,7 @@ struct LoginScreen: View {
         Text(L10n.screenLoginErrorUnsupportedAuthentication)
             .font(.body)
             .multilineTextAlignment(.center)
-            .foregroundColor(.element.primaryContent)
+            .foregroundColor(.compound.textPrimary)
             .frame(maxWidth: .infinity)
             .accessibilityIdentifier(A11yIdentifiers.loginScreen.unsupportedServer)
     }

ElementX/Sources/Screens/Authentication/ServerConfirmationScreen/View/ServerConfirmationScreen.swift

@@ -26,7 +26,7 @@ struct ServerConfirmationScreen: View {
             buttons
         }
         .background()
-        .environment(\.backgroundStyle, AnyShapeStyle(Color.element.background))
+        .environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
         .introspectViewController { viewController in
             guard let window = viewController.view.window else { return }
             context.send(viewAction: .updateWindow(window))
@@ -42,13 +42,13 @@ struct ServerConfirmationScreen: View {
             Text(context.viewState.title)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .fixedSize(horizontal: false, vertical: true)
             
             Text(context.viewState.message)
                 .font(.compound.bodyMD)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.tertiaryContent)
+                .foregroundColor(.compound.textPrimary)
         }
         .padding(.horizontal, 16)
     }

ElementX/Sources/Screens/Authentication/ServerSelectionScreen/View/ServerSelectionScreen.swift

@@ -31,7 +31,7 @@ struct ServerSelectionScreen: View {
             .readableFrame()
             .padding(.horizontal, 16)
         }
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .toolbar { toolbar }
         .alert(item: $context.alertInfo)
         .interactiveDismissDisabled()
@@ -46,12 +46,12 @@ struct ServerSelectionScreen: View {
             Text(L10n.commonSelectYourServer)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
             
             Text(L10n.screenChangeServerSubtitle)
                 .font(.compound.bodyMD)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.tertiaryContent)
+                .foregroundColor(.compound.textSecondary)
         }
         .padding(.horizontal, 16)
     }

ElementX/Sources/Screens/Authentication/SoftLogoutScreen/View/SoftLogoutScreen.swift

@@ -47,7 +47,7 @@ struct SoftLogoutScreen: View {
             .padding(.horizontal, 16)
             .padding(.bottom, 16)
         }
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .alert(item: $context.alertInfo)
         .introspectViewController { viewController in
             guard let window = viewController.view.window else { return }
@@ -61,20 +61,20 @@ struct SoftLogoutScreen: View {
             Text(UntranslatedL10n.softLogoutSigninTitle)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.leading)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.title)
 
             Text(UntranslatedL10n.softLogoutSigninNotice(context.viewState.credentials.homeserverName, context.viewState.credentials.userDisplayName, context.viewState.credentials.userId))
                 .font(.compound.bodyLG)
                 .multilineTextAlignment(.leading)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.message)
 
             if context.viewState.showRecoverEncryptionKeysMessage {
                 Text(UntranslatedL10n.softLogoutSigninE2eWarningNotice)
                     .font(.compound.bodyLG)
                     .multilineTextAlignment(.leading)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
             }
         }
     }
@@ -120,7 +120,7 @@ struct SoftLogoutScreen: View {
         Text(L10n.screenLoginErrorUnsupportedAuthentication)
             .font(.body)
             .multilineTextAlignment(.center)
-            .foregroundColor(.element.primaryContent)
+            .foregroundColor(.compound.textPrimary)
             .frame(maxWidth: .infinity)
     }
 
@@ -130,20 +130,20 @@ struct SoftLogoutScreen: View {
             Text(UntranslatedL10n.softLogoutClearDataTitle)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.leading)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataTitle)
 
             Text(UntranslatedL10n.softLogoutClearDataNotice)
                 .font(.compound.bodyLG)
                 .multilineTextAlignment(.leading)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataMessage)
                 .padding(.bottom, 12)
 
             Button(action: clearData) {
                 Text(UntranslatedL10n.softLogoutClearDataSubmit)
             }
-            .buttonStyle(.elementAction(.xLarge, color: .element.alert))
+            .buttonStyle(.elementAction(.xLarge, color: .compound.textCriticalPrimary))
             .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearData)
             .alert(UntranslatedL10n.softLogoutClearDataDialogTitle,
                    isPresented: $showingClearDataConfirmation) {

ElementX/Sources/Screens/CreateRoom/View/CreateRoomScreen.swift

@@ -87,7 +87,7 @@ struct CreateRoomScreen: View {
                         .formSectionHeader()
                     TextField(L10n.screenCreateRoomRoomNameLabel,
                               text: $context.roomName,
-                              prompt: Text(L10n.commonRoomNamePlaceholder),
+                              prompt: Text(L10n.commonRoomNamePlaceholder).foregroundColor(.compound.textPlaceholder),
                               axis: .horizontal)
                         .focused($focus, equals: .name)
                         .accessibilityIdentifier(A11yIdentifiers.createRoomScreen.roomName)
@@ -105,9 +105,9 @@ struct CreateRoomScreen: View {
     private var cameraImage: some View {
         Image(systemName: "camera")
             .font(.system(size: 28, weight: .semibold))
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.iconSecondary)
             .frame(width: roomIconSize, height: roomIconSize)
-            .background(Color.element.quinaryContent)
+            .background(Color.compound.bgSubtlePrimary)
             .clipShape(Circle())
     }
     
@@ -115,7 +115,7 @@ struct CreateRoomScreen: View {
         Section {
             TextField(L10n.screenCreateRoomTopicLabel,
                       text: $context.roomTopic,
-                      prompt: Text(L10n.commonTopicPlaceholder),
+                      prompt: Text(L10n.commonTopicPlaceholder).foregroundColor(.compound.textPlaceholder),
                       axis: .vertical)
                 .focused($focus, equals: .topic)
                 .accessibilityIdentifier(A11yIdentifiers.createRoomScreen.roomTopic)
@@ -158,7 +158,7 @@ struct CreateRoomScreen: View {
                             .font(.compound.bodyLG)
                         Text(L10n.screenCreateRoomPrivateOptionDescription)
                             .font(.compound.bodyXS)
-                            .foregroundColor(.element.tertiaryContent)
+                            .foregroundColor(.compound.textSecondary)
                     }
                 } icon: {
                     Image(systemName: "lock.shield")
@@ -172,7 +172,7 @@ struct CreateRoomScreen: View {
                             .font(.compound.bodyLG)
                         Text(L10n.screenCreateRoomPublicOptionDescription)
                             .font(.compound.bodyXS)
-                            .foregroundColor(.element.tertiaryContent)
+                            .foregroundColor(.compound.textSecondary)
                     }
                 } icon: {
                     Image(systemName: "exclamationmark.shield")
@@ -187,7 +187,7 @@ struct CreateRoomScreen: View {
                 .formSectionHeader()
                 .padding(.top, 40)
         }
-        .listRowSeparatorTint(.element.quinaryContent)
+        .listRowSeparatorTint(.compound._borderRowSeparator)
         .listRowBackground(Color.element.formRowBackground)
     }
     

ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreenHeaderView.swift

@@ -23,7 +23,7 @@ struct EmojiPickerScreenHeaderView: View {
         HStack {
             Text(title)
                 .font(.compound.bodyMD.bold())
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .frame(maxWidth: .infinity, alignment: .leading)
         }
     }

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -123,7 +123,7 @@ struct HomeScreen: View {
         .navigationTitle(L10n.screenRoomlistMainSpaceTitle)
         .toolbar(showingBottomToolbar ? .automatic : .hidden, for: .bottomBar)
         .toolbar { toolbar }
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .track(screen: .home)
     }
     
@@ -195,7 +195,7 @@ struct HomeScreen: View {
                 HStack(spacing: 16) {
                     Text(L10n.sessionVerificationBannerTitle)
                         .font(.compound.bodyLGSemibold)
-                        .foregroundColor(.element.systemPrimaryLabel)
+                        .foregroundColor(.compound.textPrimary)
                     
                     Spacer()
                     
@@ -203,13 +203,13 @@ struct HomeScreen: View {
                         context.send(viewAction: .skipSessionVerification)
                     } label: {
                         Image(systemName: "xmark")
-                            .foregroundColor(.element.secondaryContent)
+                            .foregroundColor(.compound.iconSecondary)
                             .frame(width: 12, height: 12)
                     }
                 }
                 Text(L10n.sessionVerificationBannerMessage)
                     .font(.compound.bodyMD)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.textSecondary)
             }
             
             Button(L10n.actionContinue) {
@@ -220,7 +220,7 @@ struct HomeScreen: View {
             .accessibilityIdentifier(A11yIdentifiers.homeScreen.verificationBannerContinue)
         }
         .padding(16)
-        .background(Color.element.system)
+        .background(Color.compound.bgSubtleSecondary)
         .cornerRadius(14)
         .padding(.horizontal, 16)
     }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenInvitesButton.swift

@@ -27,7 +27,7 @@ struct HomeScreenInvitesButton: View {
         Button(action: action) {
             HStack(spacing: 8) {
                 Text(title)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
                     .font(.compound.bodyMD)
                 
                 if hasBadge {
@@ -43,7 +43,7 @@ struct HomeScreenInvitesButton: View {
     private var badge: some View {
         Circle()
             .frame(width: badgeSize, height: badgeSize)
-            .foregroundColor(.element.brand)
+            .foregroundColor(.compound.iconAccentTertiary)
     }
 }
 

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -39,7 +39,7 @@ struct HomeScreenRoomCell: View {
                     .padding(.vertical, verticalInsets)
                     .overlay(alignment: .bottom) {
                         Rectangle()
-                            .fill(Color.element.quinaryContent)
+                            .fill(Color.compound._borderRowSeparator)
                             .frame(height: 1 / UIScreen.main.scale)
                             .padding(.trailing, -horizontalInsets)
                     }
@@ -86,14 +86,14 @@ struct HomeScreenRoomCell: View {
         HStack(alignment: .top, spacing: 16) {
             Text(room.name)
                 .font(.compound.bodyLGSemibold)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .lineLimit(1)
                 .frame(maxWidth: .infinity, alignment: .leading)
             
             if let timestamp = room.timestamp {
                 Text(timestamp)
                     .font(.compound.bodySM)
-                    .foregroundColor(room.hasUnreads ? .element.brand : .element.tertiaryContent)
+                    .foregroundColor(room.hasUnreads ? .compound.textActionAccent : .compound.textSecondary)
             }
         }
     }
@@ -116,7 +116,7 @@ struct HomeScreenRoomCell: View {
             if room.hasUnreads {
                 Circle()
                     .frame(width: 12, height: 12)
-                    .foregroundColor(.element.brand)
+                    .foregroundColor(.compound.iconAccentTertiary)
                     .padding(.leading, 12)
             } else {
                 // Force extra padding between last message text and the right border of the screen if there is no unread dot
@@ -149,7 +149,7 @@ struct HomeScreenRoomCellButtonStyle: ButtonStyle {
     
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .background(configuration.isPressed || isSelected ? Color.element.system : .clear)
+            .background(configuration.isPressed || isSelected ? Color.compound.bgSubtleSecondary : .clear)
             .contentShape(Rectangle())
     }
 }
@@ -157,7 +157,7 @@ struct HomeScreenRoomCellButtonStyle: ButtonStyle {
 private extension View {
     func lastMessageFormatting() -> some View {
         font(.compound.bodyMD)
-            .foregroundColor(.element.tertiaryContent)
+            .foregroundColor(.compound.textSecondary)
             .lineLimit(2)
             .multilineTextAlignment(.leading)
     }

ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift

@@ -66,7 +66,7 @@ struct InviteUsersScreen: View {
     private var noResultsContent: some View {
         Text(L10n.commonNoResults)
             .font(.compound.bodyLG)
-            .foregroundColor(.element.tertiaryContent)
+            .foregroundColor(.compound.textSecondary)
             .frame(maxWidth: .infinity)
             .listRowBackground(Color.clear)
             .accessibilityIdentifier(A11yIdentifiers.startChatScreen.searchNoResults)
@@ -148,7 +148,6 @@ struct InviteUsersScreen_Previews: PreviewProvider {
     static var previews: some View {
         NavigationView {
             InviteUsersScreen(context: viewModel.context)
-                .tint(.element.accent)
         }
     }
 }

ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreenSelectedItem.swift

@@ -29,7 +29,7 @@ struct InviteUsersScreenSelectedItem: View {
             
             Text(user.displayName ?? user.userID)
                 .font(.compound.bodyMD)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .lineLimit(1)
         }
     }
@@ -48,7 +48,7 @@ struct InviteUsersScreenSelectedItem: View {
                         .resizable()
                         .frame(width: buttonSize, height: buttonSize)
                         .symbolRenderingMode(.palette)
-                        .foregroundStyle(Color.element.systemPrimaryBackground, Color.element.primaryContent)
+                        .foregroundStyle(Color.compound.iconOnSolidPrimary, Color.compound.iconPrimary)
                 }
             }
     }

ElementX/Sources/Screens/InvitesScreen/View/InvitesScreen.swift

@@ -34,7 +34,7 @@ struct InvitesScreen: View {
                 noInvitesContent
             }
         }
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .navigationTitle(L10n.actionInvitesList)
         .alert(item: $context.alertInfo)
     }
@@ -44,7 +44,7 @@ struct InvitesScreen: View {
     private var noInvitesContent: some View {
         Text(L10n.screenInvitesEmptyList)
             .font(.compound.bodyLG)
-            .foregroundColor(.element.tertiaryContent)
+            .foregroundColor(.compound.textSecondary)
             .frame(maxWidth: .infinity)
             .listRowBackground(Color.clear)
             .accessibilityIdentifier(A11yIdentifiers.invitesScreen.noInvites)

ElementX/Sources/Screens/InvitesScreen/View/InvitesScreenCell.swift

@@ -90,7 +90,7 @@ struct InvitesScreenCell: View {
         VStack(alignment: .leading) {
             Text(title)
                 .font(.compound.bodyLGSemibold)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .lineLimit(2)
             
             if let subtitle {
@@ -116,7 +116,7 @@ struct InvitesScreenCell: View {
     
     private var separator: some View {
         Rectangle()
-            .fill(Color.element.quinaryContent)
+            .fill(Color.compound._borderRowSeparator)
             .frame(height: 1 / UIScreen.main.scale)
     }
     
@@ -156,7 +156,7 @@ struct InvitesScreenCell: View {
     private var badge: some View {
         Circle()
             .frame(width: badgeSize, height: badgeSize)
-            .foregroundColor(.element.brand)
+            .foregroundColor(.compound.iconAccentTertiary)
     }
 }
 

ElementX/Sources/Screens/OnboardingScreen/View/OnboardingScreen.swift

@@ -72,11 +72,11 @@ struct OnboardingScreen: View {
                 
                 Text(L10n.screenOnboardingWelcomeTitle)
                     .font(.compound.headingLGBold)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
                     .multilineTextAlignment(.center)
                 Text(L10n.screenOnboardingWelcomeSubtitle(InfoPlistReader.main.bundleDisplayName))
                     .font(.compound.bodyLG)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.textSecondary)
                     .multilineTextAlignment(.center)
             }
             .padding()

ElementX/Sources/Screens/RoomDetailsEditScreen/View/RoomDetailsEditScreen.swift

@@ -92,7 +92,7 @@ struct RoomDetailsEditScreen: View {
                       axis: .horizontal)
                 .focused($focus, equals: .name)
                 .font(.compound.bodyLG)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .disabled(!canEditName)
                 .listRowBackground(canEditName ? nil : Color.clear)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
@@ -113,7 +113,7 @@ struct RoomDetailsEditScreen: View {
                       axis: .vertical)
                 .focused($focus, equals: .topic)
                 .font(.compound.bodyLG)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .disabled(!canEditTopic)
                 .listRowBackground(canEditTopic ? nil : Color.clear)
                 .lineLimit(3, reservesSpace: true)

ElementX/Sources/Screens/RoomDetailsScreen/View/RoomDetailsScreen.swift

@@ -110,7 +110,7 @@ struct RoomDetailsScreen: View {
             Section {
                 if let topic = context.viewState.topic, !topic.isEmpty {
                     Text(topic)
-                        .foregroundColor(.element.secondaryContent)
+                        .foregroundColor(.compound.textSecondary)
                         .font(.compound.bodySM)
                         .lineLimit(3)
                 } else {
@@ -118,7 +118,7 @@ struct RoomDetailsScreen: View {
                         context.send(viewAction: .processTapAddTopic)
                     } label: {
                         Text(L10n.screenRoomDetailsAddTopicTitle)
-                            .foregroundColor(.element.primaryContent)
+                            .foregroundColor(.compound.textPrimary)
                             .font(.compound.bodyLG)
                     }
                     .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.addTopic)
@@ -138,7 +138,7 @@ struct RoomDetailsScreen: View {
             } label: {
                 LabeledContent {
                     Text(String(context.viewState.joinedMembersCount))
-                        .foregroundColor(.element.tertiaryContent)
+                        .foregroundColor(.compound.textSecondary)
                         .font(.compound.bodyLG)
                 } label: {
                     Label(L10n.commonPeople, systemImage: "person")
@@ -155,9 +155,10 @@ struct RoomDetailsScreen: View {
                 .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.invite)
             }
         }
-        .listRowSeparatorTint(.element.quinaryContent)
+        .listRowSeparatorTint(.compound._borderRowSeparator)
         .buttonStyle(FormButtonStyle(accessory: .navigationLink))
-        .foregroundColor(.element.primaryContent)
+        .formSectionStyle()
+        .foregroundColor(.compound.textPrimary)
     }
 
     @ViewBuilder
@@ -168,7 +169,7 @@ struct RoomDetailsScreen: View {
                     VStack(alignment: .leading, spacing: 2) {
                         Text(L10n.screenRoomDetailsEncryptionEnabledTitle)
                         Text(L10n.screenRoomDetailsEncryptionEnabledSubtitle)
-                            .foregroundColor(.element.secondaryContent)
+                            .foregroundColor(.compound.textSecondary)
                             .font(.compound.bodySM)
                     }
                 } icon: {

ElementX/Sources/Screens/RoomMemberListScreen/View/RoomMembersListScreen.swift

@@ -31,7 +31,7 @@ struct RoomMembersListScreen: View {
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
         .compoundSearchField()
-        .background(Color.element.background.ignoresSafeArea())
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .navigationTitle(L10n.commonPeople)
         .alert(item: $context.alertInfo)
         .toolbar {
@@ -51,7 +51,7 @@ struct RoomMembersListScreen: View {
         } header: {
             if !data.isEmpty {
                 Text(sectionTitle)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.textSecondary)
                     .font(.compound.bodyLG)
                     .padding(.vertical, 12)
             }

ElementX/Sources/Screens/RoomMemberListScreen/View/RoomMembersListScreenMemberCell.swift

@@ -36,7 +36,7 @@ struct RoomMembersListScreenMemberCell: View {
 
                 Text(member.name ?? "")
                     .font(.compound.bodyMDSemibold)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
                     .lineLimit(1)
 
                 Spacer()

ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift

@@ -42,7 +42,7 @@ struct MessageComposer: View {
                                          maxHeight: 300,
                                          enterKeyHandler: sendAction,
                                          pasteHandler: pasteAction)
-                    .tint(.element.brand)
+                    .tint(.compound.iconAccentTertiary)
                     .padding(.vertical, 10)
                 
                 Button {
@@ -51,10 +51,10 @@ struct MessageComposer: View {
                     submitButtonImage
                         .symbolVariant(.fill)
                         .font(.compound.bodyLG)
-                        .foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white)
+                        .foregroundColor(sendingDisabled ? .compound.iconDisabled : .global.white)
                         .background {
                             Circle()
-                                .foregroundColor(sendingDisabled ? .clear : .element.brand)
+                                .foregroundColor(sendingDisabled ? .clear : .compound.iconAccentTertiary)
                         }
                 }
                 .disabled(sendingDisabled)
@@ -67,9 +67,9 @@ struct MessageComposer: View {
         .background {
             ZStack {
                 roundedRectangle
-                    .fill(Color.element.system)
+                    .fill(Color.compound.bgSubtleSecondary)
                 roundedRectangle
-                    .stroke(Color.element.quinaryContent, lineWidth: 1)
+                    .stroke(Color.compound._borderTextFieldFocused, lineWidth: 1)
                     .opacity(focused ? 1 : 0)
             }
         }
@@ -126,7 +126,7 @@ private struct MessageComposerReplyHeader: View {
         TimelineReplyView(placement: .composer, timelineItemReplyDetails: replyDetails)
             .frame(maxWidth: .infinity, alignment: .leading)
             .padding(4.0)
-            .background(Color.element.background)
+            .background(Color.compound.bgCanvasDefault)
             .cornerRadius(13.0)
             .padding([.trailing, .vertical], 8.0)
             .padding([.leading], -4.0)
@@ -134,7 +134,7 @@ private struct MessageComposerReplyHeader: View {
                 Button(action: action) {
                     Image(systemName: "xmark")
                         .font(.caption2.weight(.medium))
-                        .foregroundColor(.element.tertiaryContent)
+                        .foregroundColor(.compound.iconTertiary)
                         .padding(16.0)
                 }
             }
@@ -152,7 +152,7 @@ private struct MessageComposerEditHeader: View {
             Button(action: action) {
                 Image(systemName: "xmark")
                     .font(.caption2.weight(.medium))
-                    .foregroundColor(.element.tertiaryContent)
+                    .foregroundColor(.compound.iconTertiary)
                     .padding(12.0)
             }
         }
@@ -166,7 +166,7 @@ private struct MessageComposerHeaderLabelStyle: LabelStyle {
             configuration.title
         }
         .font(.compound.bodySM)
-        .foregroundColor(.element.secondaryContent)
+        .foregroundColor(.compound.textSecondary)
         .lineLimit(1)
     }
 }

ElementX/Sources/Screens/RoomScreen/View/MessageComposerTextField.swift

@@ -29,14 +29,6 @@ struct MessageComposerTextField: View {
     let enterKeyHandler: EnterKeyHandler
     let pasteHandler: PasteHandler
     
-    private var showingPlaceholder: Bool {
-        text.isEmpty
-    }
-    
-    private var placeholderColor: Color {
-        .element.secondaryContent
-    }
-    
     var body: some View {
         UITextViewWrapper(text: $text,
                           focused: $focused,
@@ -50,9 +42,9 @@ struct MessageComposerTextField: View {
     
     @ViewBuilder
     private var placeholderView: some View {
-        if showingPlaceholder {
+        if text.isEmpty {
             Text(placeholder)
-                .foregroundColor(placeholderColor)
+                .foregroundColor(.compound.textPlaceholder)
                 .accessibilityHidden(true)
         }
     }
@@ -77,7 +69,7 @@ private struct UITextViewWrapper: UIViewRepresentable {
         textView.isMultiline = $isMultiline
         textView.delegate = context.coordinator
         textView.elementDelegate = context.coordinator
-        textView.textColor = .element.primaryContent
+        textView.textColor = UIColor(.compound.textPrimary)
         textView.isEditable = true
         textView.font = font
         textView.isSelectable = true

ElementX/Sources/Screens/RoomScreen/View/Replies/TimelineReplyView.swift

@@ -105,7 +105,7 @@ struct TimelineReplyView: View {
             HStack {
                 iconView
                     .frame(width: imageContainerSize, height: imageContainerSize)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.iconPrimary)
                     .background(Color.compound.bgSubtlePrimary)
                     .cornerRadius(icon?.cornerRadii ?? 0.0, corners: .allCorners)
                 
@@ -121,7 +121,7 @@ struct TimelineReplyView: View {
                     Text(formattedBody ?? AttributedString(plainBody))
                         .font(.compound.bodyMD)
                         .foregroundColor(.compound.textPlaceholder)
-                        .tint(.element.links)
+                        .tint(.compound.textLinkExternal)
                         .lineLimit(2)
                 }
             }

ElementX/Sources/Screens/RoomScreen/View/RoomAttachmentPicker.swift

@@ -28,7 +28,7 @@ struct RoomAttachmentPicker: View {
         } label: {
             Image(systemName: "plus.circle.fill")
                 .font(.compound.headingLG)
-                .foregroundColor(.element.accent)
+                .foregroundColor(.compound.textActionPrimary)
         }
         .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPicker)
         .popover(isPresented: $showAttachmentPopover) {
@@ -64,9 +64,9 @@ struct RoomAttachmentPicker: View {
                         }
                 }
             }
+            .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .presentationDetents([.height(sheetContentHeight)])
             .presentationDragIndicator(.visible)
-            .tint(.element.accent)
         }
     }
     

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -23,7 +23,7 @@ struct RoomScreen: View {
     
     var body: some View {
         timeline
-            .background(Color.element.background.ignoresSafeArea()) // Kills the toolbar translucency.
+            .background(Color.compound.bgCanvasDefault.ignoresSafeArea()) // Kills the toolbar translucency.
             .safeAreaInset(edge: .bottom, spacing: 0) {
                 HStack(spacing: 4.0) {
                     RoomAttachmentPicker(context: context)
@@ -101,12 +101,12 @@ struct RoomScreen: View {
             Image(systemName: "chevron.down")
                 .font(.compound.bodyLG)
                 .fontWeight(.semibold)
-                .foregroundColor(.element.secondaryContent)
+                .foregroundColor(.compound.iconSecondary)
                 .padding(13)
                 .offset(y: 1)
                 .background {
                     Circle()
-                        .fill(Color.element.background)
+                        .fill(Color.compound.iconOnSolidPrimary)
                         // Intentionally using system primary colour to get white/black.
                         .shadow(color: .primary.opacity(0.33), radius: 2.0)
                 }
@@ -122,9 +122,9 @@ struct RoomScreen: View {
         if context.viewState.showLoading {
             ProgressView()
                 .progressViewStyle(.circular)
-                .tint(.element.primaryContent)
+                .tint(.compound.textPrimary)
                 .padding(16)
-                .background(Color.element.quinaryContent)
+                .background(.ultraThickMaterial)
                 .cornerRadius(8)
         }
     }

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -79,7 +79,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                         .accessibilityHidden(true)
                     Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                         .font(.compound.bodySMSemibold)
-                        .foregroundColor(.element.primaryContent)
+                        .foregroundColor(.compound.textPrimary)
                         .lineLimit(1)
                         .padding(.vertical, senderNameVerticalPadding)
                 }
@@ -138,7 +138,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
         } else {
             contentWithTimestamp
                 .bubbleStyle(inset: true,
-                             color: timelineItem.isOutgoing ? .element.bubblesYou : .element.bubblesNotYou,
+                             color: timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming,
                              cornerRadius: cornerRadius,
                              corners: roundedCorners)
         }
@@ -177,7 +177,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
             localizedSendInfo
                 .padding(.horizontal, 4)
                 .padding(.vertical, 2)
-                .background(Color.element.system)
+                .background(Color.compound.bgSubtleSecondary)
                 .cornerRadius(10)
                 .padding(.trailing, 4)
                 .padding(.bottom, 4)
@@ -201,7 +201,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
             }
         }
         .font(.compound.bodyXS)
-        .foregroundColor(timelineItem.properties.deliveryStatus == .sendingFailed ? .element.alert : .element.secondaryContent)
+        .foregroundColor(timelineItem.properties.deliveryStatus == .sendingFailed ? .compound.textCriticalPrimary : .compound.textSecondary)
         .padding(.bottom, isMediaType ? 0 : -4)
     }
     
@@ -217,7 +217,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                     .fixedSize(horizontal: false, vertical: true)
                     .padding(4.0)
                     .frame(maxWidth: .infinity, alignment: .leading)
-                    .background(Color.element.background)
+                    .background(Color.compound.bgCanvasDefault)
                     .cornerRadius(8)
                     .layoutPriority(TimelineBubbleLayout.Priority.visibleQuote)
                 

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift

@@ -89,7 +89,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
                     TimelineSenderAvatarView(timelineItem: timelineItem)
                     Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                         .font(.subheadline)
-                        .foregroundColor(.element.primaryContent)
+                        .foregroundColor(.compound.textPrimary)
                         .fontWeight(.semibold)
                         .lineLimit(1)
                 }
@@ -98,7 +98,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
                 }
                 Spacer()
                 Text(timelineItem.timestamp)
-                    .foregroundColor(Color.element.tertiaryContent)
+                    .foregroundColor(.compound.textSecondary)
                     .font(.compound.bodyXS)
             }
             .padding(.top, 16)
@@ -111,7 +111,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
             if timelineItem.properties.isEdited {
                 Text(L10n.commonEditedSuffix)
                     .font(.compound.bodySM)
-                    .foregroundColor(.element.tertiaryContent)
+                    .foregroundColor(.compound.textSecondary)
             }
             
             if !timelineItem.properties.reactions.isEmpty {

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineDeliveryStatusView.swift

@@ -35,7 +35,7 @@ struct TimelineDeliveryStatusView: View {
     var body: some View {
         Image(systemName: systemImageName)
             .resizable()
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.iconSecondary)
             .frame(width: 16.0, height: 16.0)
     }
 }

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineItemStatusView.swift

@@ -67,7 +67,7 @@ struct TimelineItemStatusView: View {
             if style == .plain {
                 Image(systemName: "exclamationmark.circle.fill")
                     .resizable()
-                    .foregroundColor(.element.alert)
+                    .foregroundColor(.compound.iconCriticalPrimary)
                     .frame(width: 16, height: 16)
                     .onTapGesture {
                         context.sendFailedConfirmationDialogInfo = .init(transactionID: timelineItem.properties.transactionID)

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineReactionsView.swift

@@ -46,14 +46,14 @@ struct TimelineReactionButton: View {
                 .font(.compound.bodyMD)
             Text(String(reaction.count))
                 .font(.compound.bodyMD)
-                .foregroundColor(.element.secondaryContent)
+                .foregroundColor(.compound.textSecondary)
         }
         .padding(.vertical, 6)
         .padding(.horizontal, 8)
         .background(
             backgroundShape
-                .strokeBorder(reaction.isHighlighted ? Color.element.secondaryContent : .element.background, lineWidth: 2)
+                .strokeBorder(reaction.isHighlighted ? Color.compound.textSecondary : .compound.bgCanvasDefault, lineWidth: 2)
-                .background(reaction.isHighlighted ? Color.element.accent.opacity(0.1) : .element.system, in: backgroundShape)
+                .background(reaction.isHighlighted ? Color.compound.textPrimary.opacity(0.1) : .compound.bgSubtleSecondary, in: backgroundShape)
         )
         .accessibilityElement(children: .combine)
     }

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineReadReceiptsView.swift

@@ -32,10 +32,10 @@ struct TimelineReadReceiptsView: View {
                                         contentID: receipt.userID,
                                         avatarSize: .user(on: .readReceipt),
                                         imageProvider: context.imageProvider)
-                        .overlay(
+                        .overlay {
                             RoundedRectangle(cornerRadius: .infinity)
-                                .stroke(Color.element.background, lineWidth: 1)
+                                .stroke(Color.compound.bgCanvasDefault, lineWidth: 1)
-                        )
+                        }
                         .zIndex(Double(displayNumber - index))
                 }
             }
@@ -43,7 +43,7 @@ struct TimelineReadReceiptsView: View {
                 let remaining = timelineItem.properties.orderedReadReceipts.count - displayNumber
                 Text("+\(remaining)")
                     .font(.compound.bodySM)
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
             }
         }
     }

ElementX/Sources/Screens/RoomScreen/View/Timeline/AudioRoomTimelineView.swift

@@ -24,7 +24,7 @@ struct AudioRoomTimelineView: View {
         TimelineStyler(timelineItem: timelineItem) {
             HStack {
                 Image(systemName: "waveform")
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.iconPrimary)
                 FormattedBodyText(text: timelineItem.content.body)
             }
             .padding(.vertical, 12)

ElementX/Sources/Screens/RoomScreen/View/Timeline/CollapsibleRoomTimelineView.swift

@@ -61,7 +61,7 @@ private struct CollapsibleRoomTimelineItemDisclosureGroupStyle: DisclosureGroupS
             }
             .frame(maxWidth: .infinity)
             .font(.compound.bodySM)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.textSecondary)
             .padding(.horizontal, 36.0)
             .padding(.top, 20.0)
             .padding(.bottom, 12.0)

ElementX/Sources/Screens/RoomScreen/View/Timeline/EncryptedRoomTimelineView.swift

@@ -33,10 +33,10 @@ struct RoomTimelineViewLabelStyle: LabelStyle {
     func makeBody(configuration: Configuration) -> some View {
         HStack(alignment: .firstTextBaseline, spacing: 8) {
             configuration.icon
-                .foregroundColor(.element.secondaryContent)
+                .foregroundColor(.compound.iconSecondary)
             configuration.title
                 .font(.body)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
         }
         .padding(.horizontal, timelineStyle == .bubbles ? 4 : 0)
     }

ElementX/Sources/Screens/RoomScreen/View/Timeline/FileRoomTimelineView.swift

@@ -24,7 +24,7 @@ struct FileRoomTimelineView: View {
         TimelineStyler(timelineItem: timelineItem) {
             HStack {
                 Image(systemName: "doc.text.fill")
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.iconPrimary)
                 FormattedBodyText(text: timelineItem.content.body)
             }
             .padding(.vertical, 12)

ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift

@@ -42,10 +42,10 @@ struct FormattedBodyText: View {
     var body: some View {
         if timelineStyle == .bubbles {
             bubbleLayout
-                .tint(.element.links)
+                .tint(.compound.textLinkExternal)
         } else {
             plainLayout
-                .tint(.element.links)
+                .tint(.compound.textLinkExternal)
         }
     }
     
@@ -73,7 +73,7 @@ struct FormattedBodyText: View {
                     Text(component.attributedString)
                         .padding(.horizontal, timelineStyle == .bubbles ? 4 : 0)
                         .fixedSize(horizontal: false, vertical: true)
-                        .foregroundColor(.element.primaryContent)
+                        .foregroundColor(.compound.textPrimary)
                         .layoutPriority(TimelineBubbleLayout.Priority.regularText)
                 }
             }
@@ -102,14 +102,14 @@ struct FormattedBodyText: View {
                             .foregroundColor(Color.red)
                             .frame(width: 4.0)
                         Text(component.attributedString)
-                            .foregroundColor(.element.primaryContent)
+                            .foregroundColor(.compound.textPrimary)
                     }
                     .fixedSize(horizontal: false, vertical: true)
                 } else {
                     Text(component.attributedString)
                         .padding(.horizontal, timelineStyle == .bubbles ? 4 : 0)
                         .fixedSize(horizontal: false, vertical: true)
-                        .foregroundColor(.element.primaryContent)
+                        .foregroundColor(.compound.textPrimary)
                 }
             }
         }
@@ -184,7 +184,7 @@ private struct PreviewBubbleModifier: ViewModifier {
     func body(content: Content) -> some View {
         content
             .padding(timelineStyle == .bubbles ? 8 : 0)
-            .background(timelineStyle == .bubbles ? Color.element.systemGray6 : nil)
+            .background(timelineStyle == .bubbles ? Color.compound._bgBubbleOutgoing : nil)
             .cornerRadius(timelineStyle == .bubbles ? 12 : 0)
     }
 }

ElementX/Sources/Screens/RoomScreen/View/Timeline/ImageRoomTimelineView.swift

@@ -44,7 +44,7 @@ struct ImageRoomTimelineView: View {
     var placeholder: some View {
         ZStack {
             Rectangle()
-                .foregroundColor(.element.systemGray6)
+                .foregroundColor(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
                 .opacity(0.3)
             
             ProgressView(L10n.commonLoading)

ElementX/Sources/Screens/RoomScreen/View/Timeline/NoticeRoomTimelineView.swift

@@ -30,7 +30,7 @@ struct NoticeRoomTimelineView: View, TextBasedRoomTimelineViewProtocol {
             
             HStack(alignment: .firstTextBaseline, spacing: 6.0) {
                 Image(systemName: "info.bubble").padding(.top, 2.0)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.iconSecondary)
                 
                 if let attributedString = timelineItem.content.formattedBody {
                     FormattedBodyText(attributedString: attributedString, additionalWhitespacesCount: additionalWhitespaces)

ElementX/Sources/Screens/RoomScreen/View/Timeline/ReadMarkerRoomTimelineView.swift

@@ -25,10 +25,10 @@ struct ReadMarkerRoomTimelineView: View {
             Text(L10n.roomTimelineReadMarkerTitle)
                 .textCase(.uppercase)
                 .font(.compound.bodyXSSemibold)
-                .foregroundColor(.element.quaternaryContent)
+                .foregroundColor(.compound.textSecondary)
             Rectangle()
                 .frame(height: 0.5)
-                .foregroundColor(.element.quaternaryContent)
+                .foregroundColor(.compound.borderInteractivePrimary)
         }
         .padding(.horizontal, 20)
         .padding(.vertical, 16)

ElementX/Sources/Screens/RoomScreen/View/Timeline/SeparatorRoomTimelineView.swift

@@ -21,8 +21,8 @@ struct SeparatorRoomTimelineView: View {
     
     var body: some View {
         Text(timelineItem.text)
-            .font(.compound.bodySM)
+            .font(.compound.bodySMSemibold)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.textSecondary)
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 36.0)
             .padding(.vertical, 8.0)

ElementX/Sources/Screens/RoomScreen/View/Timeline/StateRoomTimelineView.swift

@@ -23,7 +23,7 @@ struct StateRoomTimelineView: View {
         Text(timelineItem.body)
             .font(.compound.bodySM)
             .multilineTextAlignment(.center)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.textSecondary)
             .frame(maxWidth: .infinity, alignment: .center)
             .padding(.horizontal, 36.0)
             .padding(.vertical, 8.0)

ElementX/Sources/Screens/RoomScreen/View/Timeline/StickerRoomTimelineView.swift

@@ -37,7 +37,7 @@ struct StickerRoomTimelineView: View {
     private var placeholder: some View {
         ZStack {
             Rectangle()
-                .foregroundColor(.element.systemGray6)
+                .foregroundColor(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
                 .opacity(0.3)
             
             ProgressView(L10n.commonLoading)

ElementX/Sources/Screens/RoomScreen/View/Timeline/TimelineStartRoomTimelineView.swift

@@ -22,7 +22,7 @@ struct TimelineStartRoomTimelineView: View {
     var body: some View {
         Text(title)
             .font(.compound.bodySM)
-            .foregroundColor(.element.secondaryContent)
+            .foregroundColor(.compound.textSecondary)
             .padding(.vertical, 24)
             .frame(maxWidth: .infinity)
     }

ElementX/Sources/Screens/RoomScreen/View/Timeline/VideoRoomTimelineView.swift

@@ -56,7 +56,7 @@ struct VideoRoomTimelineView: View {
     var placeholder: some View {
         ZStack {
             Rectangle()
-                .foregroundColor(.element.systemGray6)
+                .foregroundColor(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
                 .opacity(0.3)
             
             ProgressView(L10n.commonLoading)

ElementX/Sources/Screens/RoomScreen/View/TimelineItemDebugView.swift

@@ -90,7 +90,7 @@ struct TimelineItemDebugView: View {
                 
                 Text(text)
                     .font(.compound.bodyXS.monospaced())
-                    .foregroundColor(.element.primaryContent)
+                    .foregroundColor(.compound.textPrimary)
             }
             .frame(maxWidth: .infinity)
         }

ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift

@@ -86,9 +86,9 @@ public struct TimelineItemMenu: View {
                 }
             }
         }
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
         .presentationDetents([.medium, .large])
         .presentationDragIndicator(.visible)
-        .tint(.element.accent)
     }
     
     private var header: some View {
@@ -164,7 +164,7 @@ public struct TimelineItemMenu: View {
     
     private func reactionBackgroundColor(for emoji: String) -> Color {
         if item.properties.reactions.first(where: { $0.key == emoji }) != nil {
-            return .element.quinaryContent
+            return .compound._bgReactionButton
         } else {
             return .clear
         }

ElementX/Sources/Screens/RoomScreen/View/TimelineSenderAvatarView.swift

@@ -29,8 +29,8 @@ struct TimelineSenderAvatarView: View {
                             contentID: timelineItem.sender.id,
                             avatarSize: .user(on: .timeline),
                             imageProvider: context.imageProvider)
-            .overlay(
+            .overlay {
-                Circle().stroke(Color.element.background, lineWidth: 3)
+                Circle().stroke(Color.compound.bgCanvasDefault, lineWidth: 3)
-            )
+            }
     }
 }

ElementX/Sources/Screens/RoomScreen/View/TimelineTableViewController.swift

@@ -106,7 +106,7 @@ class TimelineTableViewController: UIViewController {
         tableView.separatorStyle = .none
         tableView.allowsSelection = false
         tableView.keyboardDismissMode = .onDrag
-        tableView.backgroundColor = .element.background
+        tableView.backgroundColor = UIColor(.compound.bgCanvasDefault)
         view.addSubview(tableView)
         
         // Prevents XCUITest from invoking the diffable dataSource's cellProvider

ElementX/Sources/Screens/SessionVerificationScreen/View/SessionVerificationScreen.swift

@@ -33,7 +33,7 @@ struct SessionVerificationScreen: View {
                 .navigationBarTitleDisplayMode(.inline)
                 .toolbar { toolbarContent }
             }
-            .background(Color.element.background.ignoresSafeArea())
+            .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .safeAreaInset(edge: .bottom) { actionButtons.padding() }
         }
         .interactiveDismissDisabled() // Make sure dismissal goes through the state machine(s).
@@ -77,14 +77,14 @@ struct SessionVerificationScreen: View {
             Text(context.viewState.title ?? "")
                 .font(.title2.bold())
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .padding(.bottom, 8)
                 .accessibilityIdentifier(context.viewState.titleAccessibilityIdentifier)
 
             Text(context.viewState.message)
                 .font(.subheadline)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.tertiaryContent)
+                .foregroundColor(.compound.textSecondary)
         }
     }
     
@@ -99,7 +99,7 @@ struct SessionVerificationScreen: View {
                 .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.emojiWrapper)
         case .requestingVerification:
             ProgressView()
-                .tint(.element.secondaryContent)
+                .tint(.compound.textSecondary)
                 .scaleEffect(2)
         default:
             // In All other cases, we just want an empty view
@@ -166,7 +166,7 @@ struct SessionVerificationScreen: View {
                 Button { context.send(viewAction: .accept) } label: {
                     HStack(spacing: 16) {
                         ProgressView()
-                            .tint(.element.background)
+                            .tint(.compound.textOnSolidPrimary)
                         Label(L10n.screenSessionVerificationTheyMatch, systemImage: "checkmark")
                     }
                 }
@@ -193,7 +193,6 @@ struct SessionVerificationScreen: View {
             Button(L10n.actionCancel) {
                 context.send(viewAction: .close)
             }
-            .foregroundColor(.element.accent)
             .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.close)
         }
     }
@@ -207,7 +206,7 @@ struct SessionVerificationScreen: View {
                     .font(.compound.headingXLBold)
                 Text(emoji.description)
                     .font(.compound.bodyMD)
-                    .foregroundColor(.element.secondaryContent)
+                    .foregroundColor(.compound.textSecondary)
             }
             .padding(8.0)
         }
@@ -221,7 +220,7 @@ struct SessionVerificationScreen: View {
                 .resizable()
                 .font(.compound.bodyLG.weight(.light))
                 .scaledToFit()
-                .foregroundColor(.element.accent)
+                .foregroundColor(.compound.iconPrimary)
                 .frame(width: 100, height: 100)
         }
     }

ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift

@@ -111,7 +111,7 @@ struct StartChatScreen: View {
     private var noResultsContent: some View {
         Text(L10n.commonNoResults)
             .font(.compound.bodyLG)
-            .foregroundColor(.element.tertiaryContent)
+            .foregroundColor(.compound.textSecondary)
             .frame(maxWidth: .infinity)
             .listRowBackground(Color.clear)
             .accessibilityIdentifier(A11yIdentifiers.startChatScreen.searchNoResults)
@@ -147,7 +147,6 @@ struct StartChatScreen_Previews: PreviewProvider {
     static var previews: some View {
         NavigationView {
             StartChatScreen(context: viewModel.context)
-                .tint(.element.accent)
         }
     }
 }

Tools/Scripts/Templates/SimpleScreenExample/ElementX/View/TemplateScreen.swift

@@ -20,7 +20,7 @@ struct TemplateScreen: View {
     @Environment(\.colorScheme) private var colorScheme
     
     var counterColor: Color {
-        colorScheme == .light ? .element.secondaryContent : .element.tertiaryContent
+        colorScheme == .light ? .compound.textSecondary : .compound.textInfoPrimary
     }
     
     @ObservedObject var context: TemplateScreenViewModel.Context
@@ -37,7 +37,7 @@ struct TemplateScreen: View {
                 .padding(.horizontal)
                 .padding(.vertical)
                 .readableFrame()
-                .background(Color.element.system)
+                .background(Color.compound.bgSubtleSecondary)
         }
     }
     
@@ -47,7 +47,7 @@ struct TemplateScreen: View {
             Text(context.viewState.promptType.title)
                 .font(.compound.headingMDBold)
                 .multilineTextAlignment(.center)
-                .foregroundColor(.element.primaryContent)
+                .foregroundColor(.compound.textPrimary)
                 .accessibilityIdentifier("title")
             
             Image(systemName: context.viewState.promptType.imageSystemName)

changelog.d/732.change

@@ -0,0 +1 @@
+Migrate all colour tokens to use Compound and deprecate DesignKit tokens.

project.yml

@@ -53,7 +53,7 @@ packages:
     minorVersion: 5.13.0
   Compound:
     url: https://github.com/vector-im/compound-ios
-    revision: aaa43409ca09130cb9e9a0fe02c803c65aa42aed
+    revision: d59c317362beba940baa43d6aacdd357e208048d
     # path: ../compound-ios
   Algorithms:
     url: https://github.com/apple/swift-algorithms