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.
This commit is contained in:
Doug
2023-06-16 10:49:13 +01:00
committed by GitHub
parent ac41704821
commit de0213abb2
80 changed files with 274 additions and 723 deletions
@@ -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)
}
}
@@ -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
@@ -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)
}
}
@@ -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)
}
}
@@ -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)
}
}
@@ -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)
@@ -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 {
@@ -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)
}
}
@@ -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)
@@ -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)
.background(reaction.isHighlighted ? Color.element.accent.opacity(0.1) : .element.system, in: backgroundShape)
.strokeBorder(reaction.isHighlighted ? Color.compound.textSecondary : .compound.bgCanvasDefault, lineWidth: 2)
.background(reaction.isHighlighted ? Color.compound.textPrimary.opacity(0.1) : .compound.bgSubtleSecondary, in: backgroundShape)
)
.accessibilityElement(children: .combine)
}
@@ -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)
}
}
}
@@ -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)
@@ -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)
@@ -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)
}
@@ -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)
@@ -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)
}
}
@@ -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)
@@ -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)
@@ -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)
@@ -21,8 +21,8 @@ struct SeparatorRoomTimelineView: View {
var body: some View {
Text(timelineItem.text)
.font(.compound.bodySM)
.foregroundColor(.element.secondaryContent)
.font(.compound.bodySMSemibold)
.foregroundColor(.compound.textSecondary)
.frame(maxWidth: .infinity)
.padding(.horizontal, 36.0)
.padding(.vertical, 8.0)
@@ -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)
@@ -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)
@@ -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)
}
@@ -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)
@@ -90,7 +90,7 @@ struct TimelineItemDebugView: View {
Text(text)
.font(.compound.bodyXS.monospaced())
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
}
.frame(maxWidth: .infinity)
}
@@ -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
}
@@ -29,8 +29,8 @@ struct TimelineSenderAvatarView: View {
contentID: timelineItem.sender.id,
avatarSize: .user(on: .timeline),
imageProvider: context.imageProvider)
.overlay(
Circle().stroke(Color.element.background, lineWidth: 3)
)
.overlay {
Circle().stroke(Color.compound.bgCanvasDefault, lineWidth: 3)
}
}
}
@@ -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