Update and enable the new bloom style on the home screen. (#4291)

* Update Compound

* Adopt the new accent colour (and gradient) tokens.
This commit is contained in:
Doug
2025-07-07 11:23:03 +01:00
committed by GitHub
parent cca1e12b45
commit 030a9bfbef
139 changed files with 335 additions and 470 deletions
+2 -2
View File
@@ -15,11 +15,11 @@ struct PillView: View {
let didChangeText: () -> Void
var textColor: Color {
context.viewState.isOwnMention ? .compound._textOwnPill : .compound.textPrimary
context.viewState.isOwnMention ? .compound.textBadgeAccent : .compound.textPrimary
}
var backgroundColor: Color {
context.viewState.isOwnMention ? .compound._bgOwnPill : .compound._bgPill
context.viewState.isOwnMention ? .compound.bgBadgeAccent : .compound.bgBadgeDefault
}
var body: some View {
@@ -134,19 +134,19 @@ struct AvatarHeaderView<Footer: View>: View {
case .encrypted(true):
BadgeLabel(title: L10n.screenRoomDetailsBadgeEncrypted,
icon: \.lockSolid,
isHighlighted: true)
style: .accent)
case .encrypted(false):
BadgeLabel(title: L10n.screenRoomDetailsBadgeNotEncrypted,
icon: \.lockOff,
isHighlighted: false)
style: .info)
case .public:
BadgeLabel(title: L10n.screenRoomDetailsBadgePublic,
icon: \.public,
isHighlighted: false)
style: .info)
case .verified:
BadgeLabel(title: L10n.commonVerified,
icon: \.verified,
isHighlighted: true)
style: .accent)
}
}
}
@@ -9,46 +9,64 @@ import Compound
import SwiftUI
struct BadgeLabel: View {
enum Style {
case accent
case info
case `default`
}
let title: String
let icon: KeyPath<CompoundIcons, Image>
let isHighlighted: Bool
let style: Style
var body: some View {
Label(title,
icon: icon,
iconSize: .xSmall,
relativeTo: .compound.bodySM)
.labelStyle(BadgeLabelStyle(isHighlighted: isHighlighted))
}
}
private struct BadgeLabelStyle: LabelStyle {
let isHighlighted: Bool
var titleColor: Color {
isHighlighted ? .compound.textBadgeAccent : .compound.textBadgeInfo
.labelStyle(LabelStyle(style: style))
}
var iconColor: Color {
isHighlighted ? .compound.iconSuccessPrimary : .compound.iconInfoPrimary
}
var backgroundColor: Color {
isHighlighted ? .compound.bgBadgeAccent : .compound.bgBadgeInfo
}
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 4) {
configuration.icon
.foregroundStyle(iconColor)
configuration.title
.foregroundStyle(titleColor)
private struct LabelStyle: SwiftUI.LabelStyle {
let style: Style
var titleColor: Color {
switch style {
case .accent: .compound.textBadgeAccent
case .info: .compound.textBadgeInfo
case .default: .compound.textPrimary
}
}
var iconColor: Color {
switch style {
case .accent: .compound.iconAccentPrimary
case .info: .compound.iconInfoPrimary
case .default: .compound.iconPrimary
}
}
var backgroundColor: Color {
switch style {
case .accent: .compound.bgBadgeAccent
case .info: .compound.bgBadgeInfo
case .default: .compound.bgBadgeDefault
}
}
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 4) {
configuration.icon
.foregroundStyle(iconColor)
configuration.title
.foregroundStyle(titleColor)
}
.font(.compound.bodySM)
.padding(.leading, 8)
.padding(.trailing, 12)
.padding(.vertical, 4)
.background(Capsule().fill(backgroundColor))
}
.font(.compound.bodySM)
.padding(.leading, 8)
.padding(.trailing, 12)
.padding(.vertical, 4)
.background(Capsule().fill(backgroundColor))
}
}
@@ -57,10 +75,13 @@ struct BadgeLabel_Previews: PreviewProvider, TestablePreview {
VStack(spacing: 10) {
BadgeLabel(title: "Encrypted",
icon: \.lockSolid,
isHighlighted: true)
style: .accent)
BadgeLabel(title: "Not encrypted",
icon: \.lockSolid,
isHighlighted: false)
style: .info)
BadgeLabel(title: "1234",
icon: \.userProfile,
style: .default)
}
}
}
@@ -8,28 +8,29 @@
import Compound
import SwiftUI
extension View {
func highlight(gradient: Gradient, borderColor: Color, backgroundColor: Color = .clear) -> some View {
modifier(HorizontalHighlightGradient(gradient: gradient, borderColor: borderColor, backgroundColor: backgroundColor))
}
}
struct HorizontalHighlightGradient: ViewModifier {
let gradient: Gradient
let borderColor: Color
let primaryColor: Color
let secondaryColor: Color
let backgroundColor: Color
func body(content: Content) -> some View {
ZStack(alignment: .top) {
VStack(spacing: 0) {
borderColor
.frame(height: 1)
LinearGradient(colors: [primaryColor, secondaryColor],
LinearGradient(gradient: gradient,
startPoint: .top,
endPoint: .bottom)
.background(backgroundColor)
}
content
.layoutPriority(1)
}
}
}
extension View {
func highlight(borderColor: Color, primaryColor: Color, secondaryColor: Color) -> some View {
modifier(HorizontalHighlightGradient(borderColor: borderColor, primaryColor: primaryColor, secondaryColor: secondaryColor))
}
}