From 98bd0ed412c29bd5b3762b673ca5720b6fb9d713 Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Fri, 9 Feb 2024 08:47:48 +0000 Subject: [PATCH] Adopt new decorative colour tokens to align with Web. (#59) --- Sources/Compound/Colors/CompoundColors.swift | 34 +++++++++----------- Sources/Compound/List/ListRow.swift | 6 ++-- Sources/Compound/List/ListRowLabel.swift | 4 +-- Tests/CompoundTests/AvatarColorsTests.swift | 14 ++++---- Tests/CompoundTests/__Snapshots__ | 2 +- 5 files changed, 28 insertions(+), 32 deletions(-) diff --git a/Sources/Compound/Colors/CompoundColors.swift b/Sources/Compound/Colors/CompoundColors.swift index e0268cc..38b9785 100644 --- a/Sources/Compound/Colors/CompoundColors.swift +++ b/Sources/Compound/Colors/CompoundColors.swift @@ -97,24 +97,20 @@ public struct CompoundColors { public let bgSubtleSecondaryLevel0 = Color(UIColor { $0.isLight ? UIColor(compound.colorGray300) : UIColor(compound.colorThemeBg) }) public let bgCanvasDefaultLevel1 = Color(UIColor { $0.isLight ? UIColor(compound.colorThemeBg) : UIColor(compound.colorGray300) }) - // MARK: - Avatar Colors - // Used to determine the background color and the foreground color of an avatar. - - // Order matches the one from web - // https://github.com/element-hq/compound-web/blob/5dda11aa9733462fb8422968181275bc3e9b35e3/src/components/Avatar/Avatar.module.css#L64 - internal let avatarColors: [AvatarColor] = [ - .init(background: compound.colorBlue300, foreground: compound.colorBlue1200), - .init(background: compound.colorFuchsia300, foreground: compound.colorFuchsia1200), - .init(background: compound.colorGreen300, foreground: compound.colorGreen1200), - .init(background: compound.colorPink300, foreground: compound.colorPink1200), - .init(background: compound.colorOrange300, foreground: compound.colorOrange1200), - .init(background: compound.colorCyan300, foreground: compound.colorCyan1200), - .init(background: compound.colorPurple300, foreground: compound.colorPurple1200), - .init(background: compound.colorLime300, foreground: compound.colorLime1200) + // MARK: - Decorative Colors + // Used to determine the background and text colors of avatars, usernames etc. + internal let decorativeColors: [DecorativeColor] = [ + // TODO: Use decorative colours + .init(background: compound.colorBgDecorative1, text: compound.colorTextDecorative1), + .init(background: compound.colorBgDecorative2, text: compound.colorTextDecorative2), + .init(background: compound.colorBgDecorative3, text: compound.colorTextDecorative3), + .init(background: compound.colorBgDecorative4, text: compound.colorTextDecorative4), + .init(background: compound.colorBgDecorative5, text: compound.colorTextDecorative5), + .init(background: compound.colorBgDecorative6, text: compound.colorTextDecorative6), ] - public func avatarColor(for contentID: String) -> AvatarColor { - avatarColors[contentID.hashCode] + public func decorativeColor(for contentID: String) -> DecorativeColor { + decorativeColors[contentID.hashCode] } // MARK: - Awaiting Semantic Tokens @@ -165,9 +161,9 @@ private extension UITraitCollection { var isLight: Bool { userInterfaceStyle == .light } } -public struct AvatarColor: Equatable { +public struct DecorativeColor: Equatable { public let background: Color - public let foreground: Color + public let text: Color } private extension String { @@ -177,6 +173,6 @@ private extension String { let characterCodeSum = self.reduce(0) { sum, character in sum + Int(character.unicodeScalars.first?.value ?? 0) } - return (characterCodeSum % Color.compound.avatarColors.count) + return (characterCodeSum % Color.compound.decorativeColors.count) } } diff --git a/Sources/Compound/List/ListRow.swift b/Sources/Compound/List/ListRow.swift index 78ca000..ece6e9a 100644 --- a/Sources/Compound/List/ListRow.swift +++ b/Sources/Compound/List/ListRow.swift @@ -388,15 +388,15 @@ public struct ListRow_Previews: PreviewProvider, PrefireProvider { Section { ListRow(label: .avatar(title: "Alice", description: "@alice:element.io", - icon: Circle().foregroundStyle(.compound.avatarColors[0].background)), + icon: Circle().foregroundStyle(.compound.decorativeColors[0].background)), kind: .multiSelection(isSelected: true) { }) ListRow(label: .avatar(title: "Bob", description: "@bob:element.io", - icon: Circle().foregroundStyle(.compound.avatarColors[1].background)), + icon: Circle().foregroundStyle(.compound.decorativeColors[1].background)), kind: .multiSelection(isSelected: false) { }) ListRow(label: .avatar(title: "@charlie:fake.com", description: "This user can't be found, so the invite may not be received.", - icon: Circle().foregroundStyle(.compound.avatarColors[2].background), + icon: Circle().foregroundStyle(.compound.decorativeColors[2].background), role: .error), kind: .button { }) } diff --git a/Sources/Compound/List/ListRowLabel.swift b/Sources/Compound/List/ListRowLabel.swift index 6eca2be..e37dc4a 100644 --- a/Sources/Compound/List/ListRowLabel.swift +++ b/Sources/Compound/List/ListRowLabel.swift @@ -342,10 +342,10 @@ struct ListRowLabel_Previews: PreviewProvider, PrefireProvider { Section { ListRowLabel.avatar(title: "Alice", description: "@alice:example.com", - icon: Circle().foregroundStyle(.compound.avatarColors[0].background)) + icon: Circle().foregroundStyle(.compound.decorativeColors[0].background)) ListRowLabel.avatar(title: "@bob:idontexist.com", description: "This user can't be found, so the invite may not be received.", - icon: Circle().foregroundStyle(.compound.avatarColors[0].background), + icon: Circle().foregroundStyle(.compound.decorativeColors[0].background), role: .error) } .listRowInsets(EdgeInsets()) diff --git a/Tests/CompoundTests/AvatarColorsTests.swift b/Tests/CompoundTests/AvatarColorsTests.swift index b461bce..8a70890 100644 --- a/Tests/CompoundTests/AvatarColorsTests.swift +++ b/Tests/CompoundTests/AvatarColorsTests.swift @@ -11,7 +11,7 @@ import Foundation import SwiftUI import XCTest -final class AvatarColorsTests: XCTestCase { +final class DecorativeColorsTests: XCTestCase { struct TestCase { let input: String private let webOutput: Int @@ -29,18 +29,18 @@ final class AvatarColorsTests: XCTestCase { func testAvatarColorHash() { // Match the tests with the web ones for consistency between the two platforms - // https://github.com/element-hq/compound-web/blob/5dda11aa9733462fb8422968181275bc3e9b35e3/src/components/Avatar/Avatar.test.tsx#L62 + // https://github.com/element-hq/compound-web/blob/4608dc807c9c904874eac67ff22be3213f4a261d/src/components/Avatar/Avatar.test.tsx#L62 let testCases: [TestCase] = [ - .init(input: "@bob:example.org", webOutput: 8), + .init(input: "@bob:example.org", webOutput: 4), .init(input: "@alice:example.org", webOutput: 3), .init(input: "@charlie:example.org", webOutput: 5), - .init(input: "@dan:example.org", webOutput: 8), - .init(input: "@elena:example.org", webOutput: 2), - .init(input: "@fanny:example.org", webOutput: 1) + .init(input: "@dan:example.org", webOutput: 4), + .init(input: "@elena:example.org", webOutput: 4), + .init(input: "@fanny:example.org", webOutput: 3) ] for testCase in testCases { - XCTAssertEqual(Color.compound.avatarColor(for: testCase.input), Color.compound.avatarColors[testCase.output]) + XCTAssertEqual(Color.compound.decorativeColor(for: testCase.input), Color.compound.decorativeColors[testCase.output]) } } } diff --git a/Tests/CompoundTests/__Snapshots__ b/Tests/CompoundTests/__Snapshots__ index 4df7474..f35fca2 160000 --- a/Tests/CompoundTests/__Snapshots__ +++ b/Tests/CompoundTests/__Snapshots__ @@ -1 +1 @@ -Subproject commit 4df7474f048774f0ff07b12e1d21382e8fead2bd +Subproject commit f35fca2e9f2f2ef4f3238e2f8c96b440c8c421b6