Remove DesignKit package (#1886)

- Move button styles to Compound
- Rename text style to AuthenticationTextStyle as its only in the auth flow.
- Add the brand colour locally for now until its included in Compound.

* Update snapshots.

---------

Co-authored-by: Stefan Ceriu <stefan.ceriu@gmail.com>

ElementX/Sources/Generated/Assets.swift

@@ -27,6 +27,7 @@ internal enum Asset {
   internal enum Colors {
     internal static let accentColor = ColorAsset(name: "colors/accent-color")
     internal static let backgroundColor = ColorAsset(name: "colors/background-color")
+    internal static let brandColor = ColorAsset(name: "colors/brand-color")
     internal static let grabber = ColorAsset(name: "colors/grabber")
   }
   internal enum Images {

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

@@ -149,7 +149,7 @@ struct FullscreenDialog_Previews: PreviewProvider, TestablePreview {
                 Text("Continue")
                     .font(.compound.bodyLGSemibold)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             
             Button { } label: {
                 Text("More options")

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

@@ -14,10 +14,8 @@
 // limitations under the License.
 //
 
-import SwiftUI
-
 import Compound
-import DesignKit
+import SwiftUI
 
 struct PlaceholderAvatarImage: View {
     @Environment(\.redactionReasons) private var redactionReasons

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

@@ -92,7 +92,7 @@ struct AnalyticsPromptScreen: View {
                 Text(L10n.actionOk)
                     .font(.compound.bodyLGSemibold)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.enable)
             
             Button { context.send(viewAction: .disable) } label: {

ElementX/Sources/Screens/AppLockScreen/View/AppLockScreen.swift

@@ -17,11 +17,6 @@
 import Compound
 import SwiftUI
 
-// Move this to Compound.
-extension ShapeStyle where Self == Color {
-    static var compound: CompoundColors { Self.compound }
-}
-
 // This implementation is only for development purposes.
 
 struct AppLockScreen: View {
@@ -43,7 +38,7 @@ struct AppLockScreen: View {
             Button(UntranslatedL10n.commonUnlock) {
                 context.send(viewAction: .submitPINCode("0000"))
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
         }
     }
 }

ElementX/Sources/Screens/Authentication/AuthenticationTextFieldStyle.swift

@@ -0,0 +1,176 @@
+//
+// 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 Compound
+import SwiftUI
+import SwiftUIIntrospect
+
+public extension TextFieldStyle where Self == AuthenticationTextFieldStyle {
+    static func authentication(labelText: String? = nil,
+                               footerText: String? = nil,
+                               isError: Bool = false,
+                               accessibilityIdentifier: String? = nil) -> AuthenticationTextFieldStyle {
+        AuthenticationTextFieldStyle(labelText: labelText.map(Text.init),
+                                     footerText: footerText.map(Text.init),
+                                     isError: isError,
+                                     accessibilityIdentifier: accessibilityIdentifier)
+    }
+    
+    @_disfavoredOverload
+    static func authentication(labelText: Text? = nil,
+                               footerText: Text? = nil,
+                               isError: Bool = false,
+                               accessibilityIdentifier: String? = nil) -> AuthenticationTextFieldStyle {
+        AuthenticationTextFieldStyle(labelText: labelText,
+                                     footerText: footerText,
+                                     isError: isError,
+                                     accessibilityIdentifier: accessibilityIdentifier)
+    }
+}
+
+/// The text field style used in authentication screens.
+public struct AuthenticationTextFieldStyle: TextFieldStyle {
+    @Environment(\.isEnabled) private var isEnabled
+    @Environment(\.colorScheme) private var colorScheme
+    
+    @FocusState private var isFocused: Bool
+    public let labelText: Text?
+    public let footerText: Text?
+    public let isError: Bool
+    public let accessibilityIdentifier: String?
+    
+    /// The color of the text field's border.
+    private var borderColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound._borderTextFieldFocused
+    }
+    
+    /// The width of the text field's border.
+    private var borderWidth: CGFloat {
+        isFocused || isError ? 1.0 : 0
+    }
+    
+    private var accentColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound.iconAccentTertiary
+    }
+    
+    /// The color of the text inside the text field.
+    private var textColor: Color {
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
+    }
+    
+    /// The color of the text field's background.
+    private var backgroundColor: Color {
+        .compound.bgSubtleSecondary.opacity(isEnabled ? 1 : 0.5)
+    }
+    
+    /// The color of the placeholder text inside the text field.
+    private var placeholderColor: UIColor {
+        .compound.textPlaceholder
+    }
+    
+    /// The color of the label above the text field.
+    private var labelColor: Color {
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
+    }
+    
+    /// The color of the footer label below the text field.
+    private var footerColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound.textSecondary
+    }
+    
+    /// Creates the text field style configured as required.
+    /// - Parameters:
+    ///   - labelText: The text shown in the label above the field.
+    ///   - footerText: The text shown in the footer label below the field.
+    ///   - isError: Whether or not the text field is currently in the error state.
+    public init(labelText: Text? = nil, footerText: Text? = nil, isError: Bool = false, accessibilityIdentifier: String? = nil) {
+        self.labelText = labelText
+        self.footerText = footerText
+        self.isError = isError
+        self.accessibilityIdentifier = accessibilityIdentifier
+    }
+    
+    public func _body(configuration: TextField<_Label>) -> some View {
+        let rectangle = RoundedRectangle(cornerRadius: 14.0)
+        
+        return VStack(alignment: .leading, spacing: 8) {
+            labelText
+                .font(.compound.bodySM)
+                .foregroundColor(labelColor)
+                .padding(.horizontal, 16)
+            
+            configuration
+                .focused($isFocused)
+                .font(.compound.bodyLG)
+                .foregroundColor(textColor)
+                .accentColor(accentColor)
+                .padding(.leading, 16.0)
+                .padding([.vertical, .trailing], 11.0)
+                .background {
+                    ZStack {
+                        backgroundColor
+                            .clipShape(rectangle)
+                        rectangle
+                            .stroke(borderColor, lineWidth: borderWidth)
+                    }
+                    .onTapGesture { isFocused = true } // Set focus with taps outside of the text field
+                }
+                .introspect(.textField, on: .supportedVersions) { textField in
+                    textField.clearButtonMode = .whileEditing
+                    textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder ?? "",
+                                                                         attributes: [NSAttributedString.Key.foregroundColor: placeholderColor])
+                    textField.accessibilityIdentifier = accessibilityIdentifier
+                }
+ 
+            footerText
+                .tint(.compound.textLinkExternal)
+                .font(.compound.bodyXS)
+                .foregroundColor(footerColor)
+                .padding(.horizontal, 16)
+        }
+    }
+}
+
+struct ElementTextFieldStyle_Previews: PreviewProvider {
+    public static var previews: some View {
+        ScrollView {
+            VStack(spacing: 20) {
+                // Plain text field.
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication())
+                    .disabled(true)
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication(isError: true))
+                
+                // Text field with labels
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication(labelText: "Label", footerText: "Footer"))
+                TextField("Placeholder", text: .constant("Input text"))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer"))
+                TextField("Placeholder", text: .constant("Bad text"))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer", isError: true))
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer"))
+                    .disabled(true)
+            }
+            .padding()
+        }
+    }
+}

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

@@ -76,7 +76,7 @@ struct LoginScreen: View {
                 Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder)
             }
             .focused($isUsernameFocused)
-            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
+            .textFieldStyle(.authentication(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
             .disableAutocorrection(true)
             .textContentType(.username)
             .autocapitalization(.none)
@@ -89,7 +89,7 @@ struct LoginScreen: View {
                 Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder)
             }
             .focused($isPasswordFocused)
-            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
+            .textFieldStyle(.authentication(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
             .textContentType(.password)
             .submitLabel(.done)
             .onSubmit(submit)
@@ -99,7 +99,7 @@ struct LoginScreen: View {
             Button(action: submit) {
                 Text(L10n.actionContinue)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .disabled(!context.viewState.canSubmit)
             .accessibilityIdentifier(A11yIdentifiers.loginScreen.continue)
         }

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

@@ -58,7 +58,7 @@ struct ServerConfirmationScreen: View {
             Button { context.send(viewAction: .confirm) } label: {
                 Text(L10n.actionContinue)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.serverConfirmationScreen.continue)
             
             Button { context.send(viewAction: .changeServer) } label: {

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

@@ -60,10 +60,10 @@ struct ServerSelectionScreen: View {
     var serverForm: some View {
         VStack(alignment: .leading, spacing: 24) {
             TextField(L10n.commonServerUrl, text: $context.homeserverAddress)
-                .textFieldStyle(.elementInput(labelText: Text(L10n.screenChangeServerFormHeader),
-                                              footerText: Text(context.viewState.footerMessage),
-                                              isError: context.viewState.isShowingFooterError,
-                                              accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
+                .textFieldStyle(.authentication(labelText: Text(L10n.screenChangeServerFormHeader),
+                                                footerText: Text(context.viewState.footerMessage),
+                                                isError: context.viewState.isShowingFooterError,
+                                                accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
                 .keyboardType(.URL)
                 .autocapitalization(.none)
                 .disableAutocorrection(true)
@@ -74,7 +74,7 @@ struct ServerSelectionScreen: View {
             Button(action: submit) {
                 Text(context.viewState.buttonTitle)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .disabled(context.viewState.hasValidationError)
             .accessibilityIdentifier(A11yIdentifiers.changeServerScreen.continue)
         }

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

@@ -83,7 +83,7 @@ struct SoftLogoutScreen: View {
         VStack(spacing: 14) {
             SecureField(L10n.commonPassword, text: $context.password)
                 .focused($isPasswordFocused)
-                .textFieldStyle(.elementInput())
+                .textFieldStyle(.authentication())
                 .textContentType(.password)
                 .submitLabel(.done)
                 .onSubmit(submit)
@@ -100,7 +100,7 @@ struct SoftLogoutScreen: View {
             Button(action: submit) {
                 Text(L10n.actionNext)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .disabled(!context.viewState.canSubmit)
             .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.next)
         }
@@ -111,7 +111,7 @@ struct SoftLogoutScreen: View {
         Button { context.send(viewAction: .continueWithOIDC) } label: {
             Text(L10n.actionContinue)
         }
-        .buttonStyle(.elementAction(.xLarge))
+        .buttonStyle(.compound(.primary))
     }
 
     /// Text shown if neither password or OIDC login is supported.
@@ -139,10 +139,10 @@ struct SoftLogoutScreen: View {
                 .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataMessage)
                 .padding(.bottom, 12)
 
-            Button(action: clearData) {
+            Button(role: .destructive, action: clearData) {
                 Text(UntranslatedL10n.softLogoutClearDataSubmit)
             }
-            .buttonStyle(.elementAction(.xLarge, color: .compound.textCriticalPrimary))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearData)
             .alert(UntranslatedL10n.softLogoutClearDataDialogTitle,
                    isPresented: $showingClearDataConfirmation) {

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

@@ -32,7 +32,7 @@ struct WaitlistScreen: View {
     /// The main content of the view to be shown in a scroll view.
     var content: some View {
         VStack(spacing: 16) {
-            Text(context.viewState.title.tinting(".", color: .element.brand))
+            Text(context.viewState.title.tinting(".", color: Asset.Colors.brandColor.swiftUIColor))
                 .font(.compound.headingXLBold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textPrimary)
@@ -52,7 +52,7 @@ struct WaitlistScreen: View {
             Button { context.send(viewAction: .continue(userSession)) } label: {
                 Text(L10n.actionContinue)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
         }
     }
     

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -111,7 +111,7 @@ struct ComposerToolbar: View {
             submitButtonImage
                 .symbolVariant(.fill)
                 .font(.compound.bodyLG)
-                .foregroundColor(context.viewState.sendButtonDisabled ? .compound.iconDisabled : .global.white)
+                .foregroundColor(context.viewState.sendButtonDisabled ? .compound.iconDisabled : .white)
                 .background {
                     Circle()
                         .foregroundColor(context.viewState.sendButtonDisabled ? .clear : .compound.iconAccentTertiary)

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

@@ -92,7 +92,7 @@ struct CreateRoomScreen: View {
                         .focused($focus, equals: .name)
                         .accessibilityIdentifier(A11yIdentifiers.createRoomScreen.roomName)
                         .padding(EdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16))
-                        .background(Color.element.formRowBackground)
+                        .background(Color.compound.bgCanvasDefaultLevel1)
                         .clipShape(RoundedRectangle(cornerRadius: 8))
                 }
             }
@@ -188,7 +188,7 @@ struct CreateRoomScreen: View {
                 .padding(.top, 40)
         }
         .listRowSeparatorTint(.compound.borderDisabled)
-        .listRowBackground(Color.element.formRowBackground)
+        .listRowBackground(Color.compound.bgCanvasDefaultLevel1)
     }
     
     private var createButton: some View {

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

@@ -232,7 +232,7 @@ struct HomeScreen: View {
                 context.send(viewAction: .verifySession)
             }
             .frame(maxWidth: .infinity)
-            .buttonStyle(.elementCapsuleProminent)
+            .buttonStyle(.compound(.primary, size: .medium))
             .accessibilityIdentifier(A11yIdentifiers.homeScreen.verificationBannerContinue)
         }
         .padding(16)

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

@@ -105,11 +105,11 @@ struct InvitesScreenCell: View {
     private var buttons: some View {
         HStack(spacing: 12) {
             Button(L10n.actionDecline, action: declineAction)
-                .buttonStyle(.elementCapsule)
+                .buttonStyle(.compound(.secondary, size: .medium))
                 .accessibilityIdentifier(A11yIdentifiers.invitesScreen.decline)
             
             Button(L10n.actionAccept, action: acceptAction)
-                .buttonStyle(.elementCapsuleProminent)
+                .buttonStyle(.compound(.primary, size: .medium))
                 .accessibilityIdentifier(A11yIdentifiers.invitesScreen.accept)
         }
     }

ElementX/Sources/Screens/MigrationScreen/View/MigrationScreen.swift

@@ -34,7 +34,7 @@ struct MigrationScreen: View {
                 .tint(.compound.iconPrimary)
                 .padding(.bottom, 4)
             
-            Text(L10n.screenMigrationTitle.tinting(".", color: .element.brand))
+            Text(L10n.screenMigrationTitle.tinting(".", color: Asset.Colors.brandColor.swiftUIColor))
                 .font(.compound.headingXLBold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.compound.textPrimary)

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

@@ -14,7 +14,6 @@
 // limitations under the License.
 //
 
-import DesignKit
 import SwiftUI
 
 /// The screen shown at the beginning of the onboarding flow.
@@ -87,7 +86,7 @@ struct OnboardingScreen: View {
             Button { context.send(viewAction: .login) } label: {
                 Text(L10n.actionContinue)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.onboardingScreen.signIn)
         }
         .padding(.horizontal, verticalSizeClass == .compact ? 128 : 24)

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

@@ -55,7 +55,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
                 if let replyDetails = messageTimelineItem.replyDetails {
                     HStack(spacing: 4.0) {
                         Rectangle()
-                            .foregroundColor(.global.melon)
+                            .foregroundColor(.compound.iconTertiary)
                             .frame(width: 4.0)
                         TimelineReplyView(placement: .timeline, timelineItemReplyDetails: replyDetails)
                     }

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

@@ -130,20 +130,20 @@ struct SessionVerificationScreen: View {
             Button(L10n.actionStartVerification) {
                 context.send(viewAction: .requestVerification)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.requestVerification)
         
         case .cancelled:
             Button(L10n.actionRetry) {
                 context.send(viewAction: .restart)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             
         case .verificationRequestAccepted:
             Button(L10n.actionStart) {
                 context.send(viewAction: .startSasVerification)
             }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
             .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.startSasVerification)
         
         case .showingChallenge:
@@ -151,7 +151,7 @@ struct SessionVerificationScreen: View {
                 Button { context.send(viewAction: .accept) } label: {
                     Label(L10n.screenSessionVerificationTheyMatch, systemImage: "checkmark")
                 }
-                .buttonStyle(.elementAction(.xLarge))
+                .buttonStyle(.compound(.primary))
                 .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.acceptChallenge)
                 
                 Button(L10n.screenSessionVerificationTheyDontMatch) {
@@ -170,7 +170,7 @@ struct SessionVerificationScreen: View {
                         Label(L10n.screenSessionVerificationTheyMatch, systemImage: "checkmark")
                     }
                 }
-                .buttonStyle(.elementAction(.xLarge))
+                .buttonStyle(.compound(.primary))
                 .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.acceptChallenge)
                 .disabled(true)
 

ElementX/Sources/Screens/Settings/NotificationSettingsScreen/View/NotificationSettingsScreen.swift

@@ -169,7 +169,7 @@ struct NotificationSettingsScreen: View {
                     } label: {
                         Text(L10n.actionContinue)
                     }
-                    .buttonStyle(.elementCapsuleProminent)
+                    .buttonStyle(.compound(.primary, size: .medium))
                     .disabled(context.viewState.fixingConfigurationMismatch)
                     .accessibilityIdentifier(A11yIdentifiers.notificationSettingsScreen.fixMismatchConfiguration)
                 }

ElementX/Sources/Screens/WelcomeScreenScreen/View/WelcomeScreen.swift

@@ -92,7 +92,7 @@ struct WelcomeScreen: View {
         } label: {
             Text(context.viewState.buttonTitle)
         }
-        .buttonStyle(.elementAction(.xLarge))
+        .buttonStyle(.compound(.primary))
         .accessibilityIdentifier(A11yIdentifiers.welcomeScreen.letsGo)
     }
 }