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
@@ -27,14 +27,14 @@ struct AuthenticationIconImage: View {
image
.resizable()
.renderingMode(.template)
.foregroundColor(.element.secondaryContent)
.foregroundColor(.compound.iconSecondary)
.aspectRatio(contentMode: .fit)
.accessibilityHidden(true)
.padding(insets)
.frame(width: 70, height: 70)
.background {
RoundedRectangle(cornerRadius: 14)
.fill(Color.element.quinaryContent)
.fill(Color.compound.bgSubtleSecondary)
}
}
}
@@ -45,7 +45,7 @@ struct LoginScreen: View {
.padding(.horizontal, 16)
.padding(.bottom, 16)
}
.background(Color.element.background.ignoresSafeArea())
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.alert(item: $context.alertInfo)
}
@@ -58,7 +58,7 @@ struct LoginScreen: View {
Text(L10n.screenLoginTitleWithHomeserver(context.viewState.homeserver.address))
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
}
.padding(.horizontal, 16)
}
@@ -68,14 +68,14 @@ struct LoginScreen: View {
VStack(alignment: .leading, spacing: 0) {
Text(L10n.screenLoginFormHeader)
.font(.compound.bodySM)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.padding(.horizontal, 16)
.padding(.bottom, 8)
TextField(L10n.commonUsername,
text: $context.username,
// Prompt colour fixes a flicker that occurs before the text field style introspects the field.
prompt: Text(L10n.commonUsername).foregroundColor(.element.tertiaryContent))
prompt: Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder))
.focused($isUsernameFocused)
.textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
.disableAutocorrection(true)
@@ -89,7 +89,7 @@ struct LoginScreen: View {
SecureField(L10n.commonPassword,
text: $context.password,
// Prompt colour fixes a flicker that occurs before the text field style introspects the field.
prompt: Text(L10n.commonPassword).foregroundColor(.element.tertiaryContent))
prompt: Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder))
.focused($isPasswordFocused)
.textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
.textContentType(.password)
@@ -112,7 +112,7 @@ struct LoginScreen: View {
Text(L10n.screenLoginErrorUnsupportedAuthentication)
.font(.body)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.frame(maxWidth: .infinity)
.accessibilityIdentifier(A11yIdentifiers.loginScreen.unsupportedServer)
}
@@ -26,7 +26,7 @@ struct ServerConfirmationScreen: View {
buttons
}
.background()
.environment(\.backgroundStyle, AnyShapeStyle(Color.element.background))
.environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
.introspectViewController { viewController in
guard let window = viewController.view.window else { return }
context.send(viewAction: .updateWindow(window))
@@ -42,13 +42,13 @@ struct ServerConfirmationScreen: View {
Text(context.viewState.title)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.fixedSize(horizontal: false, vertical: true)
Text(context.viewState.message)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
.foregroundColor(.element.tertiaryContent)
.foregroundColor(.compound.textPrimary)
}
.padding(.horizontal, 16)
}
@@ -31,7 +31,7 @@ struct ServerSelectionScreen: View {
.readableFrame()
.padding(.horizontal, 16)
}
.background(Color.element.background.ignoresSafeArea())
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.toolbar { toolbar }
.alert(item: $context.alertInfo)
.interactiveDismissDisabled()
@@ -46,12 +46,12 @@ struct ServerSelectionScreen: View {
Text(L10n.commonSelectYourServer)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
Text(L10n.screenChangeServerSubtitle)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
.foregroundColor(.element.tertiaryContent)
.foregroundColor(.compound.textSecondary)
}
.padding(.horizontal, 16)
}
@@ -47,7 +47,7 @@ struct SoftLogoutScreen: View {
.padding(.horizontal, 16)
.padding(.bottom, 16)
}
.background(Color.element.background.ignoresSafeArea())
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.alert(item: $context.alertInfo)
.introspectViewController { viewController in
guard let window = viewController.view.window else { return }
@@ -61,20 +61,20 @@ struct SoftLogoutScreen: View {
Text(UntranslatedL10n.softLogoutSigninTitle)
.font(.compound.headingMDBold)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.title)
Text(UntranslatedL10n.softLogoutSigninNotice(context.viewState.credentials.homeserverName, context.viewState.credentials.userDisplayName, context.viewState.credentials.userId))
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.message)
if context.viewState.showRecoverEncryptionKeysMessage {
Text(UntranslatedL10n.softLogoutSigninE2eWarningNotice)
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
}
}
}
@@ -120,7 +120,7 @@ struct SoftLogoutScreen: View {
Text(L10n.screenLoginErrorUnsupportedAuthentication)
.font(.body)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.frame(maxWidth: .infinity)
}
@@ -130,20 +130,20 @@ struct SoftLogoutScreen: View {
Text(UntranslatedL10n.softLogoutClearDataTitle)
.font(.compound.headingMDBold)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataTitle)
Text(UntranslatedL10n.softLogoutClearDataNotice)
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.foregroundColor(.compound.textPrimary)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataMessage)
.padding(.bottom, 12)
Button(action: clearData) {
Text(UntranslatedL10n.softLogoutClearDataSubmit)
}
.buttonStyle(.elementAction(.xLarge, color: .element.alert))
.buttonStyle(.elementAction(.xLarge, color: .compound.textCriticalPrimary))
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearData)
.alert(UntranslatedL10n.softLogoutClearDataDialogTitle,
isPresented: $showingClearDataConfirmation) {