Adopt new decorative colour tokens to align with Web. (#59)

element-hq · Feb 9, 2024 · 98bd0ed · 98bd0ed
1 parent 3cd06d8
commit 98bd0ed
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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__