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.

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)
         }