Skip to content

Commit

Permalink
Adopt new decorative colour tokens to align with Web. (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixlwave
pixlwave committed Feb 9, 2024
1 parent 3cd06d8 commit 98bd0ed
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 32 deletions.
34 changes: 15 additions & 19 deletions Sources/Compound/Colors/CompoundColors.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand All @@ -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)
}
}
6 changes: 3 additions & 3 deletions Sources/Compound/List/ListRow.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { })
}
Expand Down
4 changes: 2 additions & 2 deletions Sources/Compound/List/ListRowLabel.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
14 changes: 7 additions & 7 deletions Tests/CompoundTests/AvatarColorsTests.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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])
}
}
}
2 changes: 1 addition & 1 deletion Tests/CompoundTests/__Snapshots__
Submodule __Snapshots__ updated 1 files
+2 −2 PreviewTests/test_listRowLabel.1.png

0 comments on commit 98bd0ed

Please sign in to comment.