Design review for first public TestFlight (#492)

* 430 - Design review for first public TestFlight

DesignKit/Sources/Buttons/ElementActionButtonStyle.swift

@@ -56,13 +56,14 @@ public struct ElementActionButtonStyle: ButtonStyle {
             .frame(maxWidth: maxWidth)
             .foregroundColor(fontColor)
             .font(.element.bodyBold)
-            .background(color.opacity(backgroundOpacity(when: configuration.isPressed)))
-            .cornerRadius(cornerRadius)
+            .background(Capsule()
+                .fill(color)
+                .opacity(backgroundOpacity(when: configuration.isPressed)))
     }
     
     private func backgroundOpacity(when isPressed: Bool) -> CGFloat {
-        guard isEnabled else { return 0.3 }
-        return isPressed ? 0.6 : 1.0
+        guard isEnabled else { return colorScheme == .dark ? 0.2 : 0.1 }
+        return isPressed ? 0.3 : 1.0
     }
 }
 

DesignKit/Sources/Buttons/ElementGhostButtonStyle.swift

@@ -22,7 +22,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.accent) -> ElementGhostButtonStyle {
+                             color: Color = .element.primaryContent) -> ElementGhostButtonStyle {
         ElementGhostButtonStyle(size: size, color: color)
     }
 }
@@ -36,7 +36,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.accent) {
+    public init(size: ElementControlSize = .regular, color: Color = .element.primaryContent) {
         self.size = size
         self.color = color
     }
@@ -47,19 +47,19 @@ public struct ElementGhostButtonStyle: ButtonStyle {
             .padding(.vertical, verticalPadding)
             .frame(maxWidth: maxWidth)
             .foregroundColor(color)
-            .font(.element.body)
+            .font(.element.footnoteBold)
             .background(border)
             .opacity(opacity(when: configuration.isPressed))
     }
     
     private var border: some View {
-        RoundedRectangle(cornerRadius: 8)
+        Capsule()
             .strokeBorder()
             .foregroundColor(color)
     }
     
     private func opacity(when isPressed: Bool) -> CGFloat {
-        guard isEnabled else { return 0.6 }
+        guard isEnabled else { return 0.5 }
         return isPressed ? 0.6 : 1.0
     }
 }

DesignKit/Sources/Colors/ElementColors.swift

@@ -38,6 +38,8 @@ public struct ElementColors {
     public var quinaryContent: Color { compound.quinaryContent }
     public var system: Color { compound.system }
     public var background: Color { compound.background }
+    // Should be the accent color
+    public var brand: Color { compound.accent }
     
     public var contentAndAvatars: [Color] { compound.contentAndAvatars }
     

DesignKit/Sources/TextFields/ElementTextFieldStyle.swift

@@ -42,16 +42,16 @@ public struct ElementTextFieldStyle: TextFieldStyle {
     /// The color of the text field's border.
     private var borderColor: Color {
         guard !isError else { return .element.alert }
-        return isFocused ? .element.accent : .element.quinaryContent
+        return isFocused ? .element.tertiaryContent : .element.quinaryContent
     }
     
     /// The width of the text field's border.
     private var borderWidth: CGFloat {
-        isFocused || isError ? 2.0 : 1.5
+        isFocused || isError ? 1.0 : 0
     }
     
     private var accentColor: Color {
-        isError ? .element.alert : .element.accent
+        isError ? .element.alert : .element.brand
     }
     
     /// The color of the text inside the text field.
@@ -68,7 +68,7 @@ public struct ElementTextFieldStyle: TextFieldStyle {
         if !isEnabled, colorScheme == .dark {
             return .element.quinaryContent
         }
-        return .element.background
+        return .element.system
     }
     
     /// The color of the placeholder text inside the text field.
@@ -78,8 +78,7 @@ public struct ElementTextFieldStyle: TextFieldStyle {
     
     /// The color of the label above the text field.
     private var labelColor: Color {
-        guard colorScheme == .light else { return .element.tertiaryContent }
-        return isEnabled ? .element.primaryContent : .element.quaternaryContent
+        isEnabled ? .element.primaryContent : .element.quaternaryContent
     }
     
     /// The color of the footer label below the text field.
@@ -99,13 +98,14 @@ public struct ElementTextFieldStyle: TextFieldStyle {
     }
     
     public func _body(configuration: TextField<_Label>) -> some View {
-        let rectangle = RoundedRectangle(cornerRadius: 8.0)
+        let rectangle = RoundedRectangle(cornerRadius: 14.0)
         
         return VStack(alignment: .leading, spacing: 8) {
             if let labelText {
                 Text(labelText)
-                    .font(.element.subheadline)
+                    .font(.element.footnote)
                     .foregroundColor(labelColor)
+                    .padding(.horizontal, 16)
             }
             
             configuration
@@ -113,8 +113,8 @@ public struct ElementTextFieldStyle: TextFieldStyle {
                 .font(.element.callout)
                 .foregroundColor(textColor)
                 .accentColor(accentColor)
-                .padding(.vertical, 12.0)
-                .padding(.horizontal, 8.0)
+                .padding(.leading, 16.0)
+                .padding([.vertical, .trailing], 11.0)
                 .background {
                     ZStack {
                         backgroundColor
@@ -132,8 +132,9 @@ public struct ElementTextFieldStyle: TextFieldStyle {
             
             if let footerText {
                 Text(footerText)
-                    .font(.element.footnote)
+                    .font(.element.caption1)
                     .foregroundColor(footerColor)
+                    .padding(.horizontal, 16)
             }
         }
     }