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/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.element.systemPrimaryBackground
+        Color.compound.textOnSolidPrimary
             .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()
     }