Updated pill colours

Author: weiran

DesignSystem/Sources/DesignSystem/Components/PostDisplayView.swift

@@ -19,6 +19,7 @@ public struct PostDisplayView: View {
     let onBookmarkTap: (() async -> Bool)?
     let onCommentsTap: (() -> Void)?
 
+    @Environment(\.colorScheme) private var colorScheme
     @State private var isSubmittingUpvote = false
     @State private var isSubmittingBookmark = false
     @State private var displayedScore: Int
@@ -127,11 +128,10 @@ public struct PostDisplayView: View {
         let canInteract = canVote && !isUpvoted && !isLoading
         // Avoid keeping a disabled Button so the upvoted state retains the bright tint
         let (backgroundColor, textColor): (Color, Color) = {
-            if isUpvoted {
-                return (AppColors.upvotedColor.opacity(0.2), AppColors.upvotedColor)
-            } else {
-                return (Color.secondary.opacity(0.1), .secondary)
-            }
+            let style = AppColors.PillStyle.upvote(isActive: isUpvoted)
+            let background = AppColors.pillBackground(for: style, colorScheme: colorScheme)
+            let foreground = AppColors.pillForeground(for: style, colorScheme: colorScheme)
+            return (background, foreground)
         }()
         let iconName = isUpvoted ? "arrow.up.circle.fill" : "arrow.up"
         let accessibilityLabel: String
@@ -159,8 +159,9 @@ public struct PostDisplayView: View {
     }
 
     private var commentsPill: some View {
-        let commentTextColor: Color = .secondary
-        let commentBackgroundColor = Color.secondary.opacity(0.1)
+        let style = AppColors.PillStyle.comments
+        let commentTextColor = AppColors.pillForeground(for: style, colorScheme: colorScheme)
+        let commentBackgroundColor = AppColors.pillBackground(for: style, colorScheme: colorScheme)
         // Brighter styling keeps the comments count from reading as a disabled control
         return pillView(
             iconName: "message",
@@ -177,13 +178,9 @@ public struct PostDisplayView: View {
 
     private var bookmarkPill: some View {
         let isBookmarked = displayedBookmarked
-        let backgroundColor: Color = {
-            if isBookmarked {
-                return AppColors.appTintColor.opacity(0.1)
-            }
-            return Color.secondary.opacity(0.1)
-        }()
-        let textColor: Color = isBookmarked ? AppColors.appTintColor : .secondary
+        let style = AppColors.PillStyle.bookmark(isSaved: isBookmarked)
+        let backgroundColor = AppColors.pillBackground(for: style, colorScheme: colorScheme)
+        let textColor = AppColors.pillForeground(for: style, colorScheme: colorScheme)
         let iconName = isBookmarked ? "bookmark.fill" : "bookmark"
         let accessibilityLabel = isBookmarked ? "Remove bookmark" : "Save for later"
         let accessibilityHint = isBookmarked

DesignSystem/Sources/DesignSystem/Theme/AppColors.swift

@@ -36,6 +36,71 @@ public enum AppColors {
     public static func separator(for colorScheme: ColorScheme) -> Color {
         Color(.separator).opacity(colorScheme == .dark ? 0.6 : 0.3)
     }
+
+    public static func pillBackground(for style: PillStyle, colorScheme: ColorScheme) -> Color {
+        switch style {
+        case .upvote(isActive: true):
+            return pillAccentBackground(for: upvotedColor, colorScheme: colorScheme)
+        case .upvote(isActive: false):
+            return pillNeutralBackground(for: colorScheme)
+        case .bookmark(isSaved: true):
+            return pillAccentBackground(for: appTintColor, colorScheme: colorScheme)
+        case .bookmark(isSaved: false):
+            return pillNeutralBackground(for: colorScheme)
+        case .comments:
+            return pillNeutralBackground(for: colorScheme)
+        }
+    }
+
+    public static func pillForeground(for style: PillStyle, colorScheme: ColorScheme) -> Color {
+        switch style {
+        case .upvote(isActive: true):
+            return upvotedColor
+        case .upvote(isActive: false):
+            return pillNeutralForeground(for: colorScheme)
+        case .bookmark(isSaved: true):
+            return appTintColor
+        case .bookmark(isSaved: false):
+            return pillNeutralForeground(for: colorScheme)
+        case .comments:
+            return pillNeutralForeground(for: colorScheme)
+        }
+    }
+
+    public enum PillStyle: Sendable {
+        case upvote(isActive: Bool)
+        case bookmark(isSaved: Bool)
+        case comments
+    }
+
+    private static func pillNeutralBackground(for colorScheme: ColorScheme) -> Color {
+        switch colorScheme {
+        case .light:
+            return Color.secondary.opacity(0.14)
+        case .dark:
+            return Color.secondary.opacity(0.1)
+        @unknown default:
+            return Color.secondary.opacity(0.1)
+        }
+    }
+
+    private static func pillAccentBackground(for baseColor: Color, colorScheme: ColorScheme) -> Color {
+        switch colorScheme {
+        case .light, .dark:
+            return baseColor.opacity(0.2)
+        @unknown default:
+            return baseColor.opacity(0.2)
+        }
+    }
+
+    private static func pillNeutralForeground(for colorScheme: ColorScheme) -> Color {
+        switch colorScheme {
+        case .light, .dark:
+            return Color.secondary
+        @unknown default:
+            return Color.secondary
+        }
+    }
 }
 
 public enum AppGradients {

DesignSystem/Tests/DesignSystemTests/AppColorsTests.swift

@@ -113,6 +113,44 @@ struct AppColorsTests {
         #expect(unfocusedLight.approximatelyEquals(expectedLight))
         #expect(unfocusedDark.approximatelyEquals(expectedDark))
     }
+
+    @Test("Pill colour tokens reuse accent and neutral palettes")
+    func pillColourSemantics() {
+        let lightAccentBackground = resolvedColor(
+            AppColors.pillBackground(for: .upvote(isActive: true), colorScheme: .light),
+            style: .light
+        )
+        let expectedAccentBackground = resolvedColor(AppColors.upvotedColor.opacity(0.2), style: .light)
+        #expect(lightAccentBackground.approximatelyEquals(expectedAccentBackground, tolerance: 0.01))
+
+        let lightNeutralBackground = resolvedColor(
+            AppColors.pillBackground(for: .comments, colorScheme: .light),
+            style: .light
+        )
+        let expectedNeutralBackground = resolvedColor(Color.secondary.opacity(0.1), style: .light)
+        #expect(lightNeutralBackground.approximatelyEquals(expectedNeutralBackground, tolerance: 0.01))
+
+        let lightAccentForeground = resolvedColor(
+            AppColors.pillForeground(for: .bookmark(isSaved: true), colorScheme: .light),
+            style: .light
+        )
+        let expectedAccentForeground = resolvedColor(AppColors.appTintColor, style: .light)
+        #expect(lightAccentForeground.approximatelyEquals(expectedAccentForeground))
+
+        let lightNeutralForeground = resolvedColor(
+            AppColors.pillForeground(for: .upvote(isActive: false), colorScheme: .light),
+            style: .light
+        )
+        let expectedNeutralForeground = resolvedColor(Color.secondary, style: .light)
+        #expect(lightNeutralForeground.approximatelyEquals(expectedNeutralForeground))
+
+        let darkNeutralBackground = resolvedColor(
+            AppColors.pillBackground(for: .comments, colorScheme: .dark),
+            style: .dark
+        )
+        let expectedDarkNeutralBackground = resolvedColor(Color.secondary.opacity(0.1), style: .dark)
+        #expect(darkNeutralBackground.approximatelyEquals(expectedDarkNeutralBackground, tolerance: 0.01))
+    }
 }
 
 // MARK: - Test Helpers