Use colors from compound for badges (#4545)

* Use badge color from Compound and remove temporary aliases

* Use color instead of a copy of it.

* Update screenshots

---------

Co-authored-by: ElementBot <[email protected]>

Author: bmarty

app/src/main/res/values/colors.xml

@@ -5,8 +5,8 @@
   ~ Please see LICENSE files in the repository root for full details.
   -->
 <resources>
-    <!-- Must be equal to DarkDesignTokens.colorThemeBg -->
+    <!-- Must be equal to DarkColorTokens.colorThemeBg -->
     <color name="splashscreen_bg_dark">#FF101317</color>
-    <!-- Must be equal to LightDesignTokens.colorThemeBg -->
+    <!-- Must be equal to LightColorTokens.colorThemeBg -->
     <color name="splashscreen_bg_light">#FFFFFFFF</color>
 </resources>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/MatrixBadgeAtom.kt

@@ -14,14 +14,10 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.Badge
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.badgeInfoBackgroundColor
-import io.element.android.libraries.designsystem.theme.badgeInfoContentColor
 import io.element.android.libraries.designsystem.theme.badgeNegativeBackgroundColor
 import io.element.android.libraries.designsystem.theme.badgeNegativeContentColor
 import io.element.android.libraries.designsystem.theme.badgeNeutralBackgroundColor
 import io.element.android.libraries.designsystem.theme.badgeNeutralContentColor
-import io.element.android.libraries.designsystem.theme.badgePositiveBackgroundColor
-import io.element.android.libraries.designsystem.theme.badgePositiveContentColor
 
 object MatrixBadgeAtom {
     data class MatrixBadgeData(
@@ -42,22 +38,22 @@ object MatrixBadgeAtom {
         data: MatrixBadgeData,
     ) {
         val backgroundColor = when (data.type) {
-            Type.Positive -> ElementTheme.colors.badgePositiveBackgroundColor
+            Type.Positive -> ElementTheme.colors.bgBadgeAccent
             Type.Neutral -> ElementTheme.colors.badgeNeutralBackgroundColor
             Type.Negative -> ElementTheme.colors.badgeNegativeBackgroundColor
-            Type.Info -> ElementTheme.colors.badgeInfoBackgroundColor
+            Type.Info -> ElementTheme.colors.bgBadgeInfo
         }
         val textColor = when (data.type) {
-            Type.Positive -> ElementTheme.colors.badgePositiveContentColor
+            Type.Positive -> ElementTheme.colors.textBadgeAccent
             Type.Neutral -> ElementTheme.colors.badgeNeutralContentColor
             Type.Negative -> ElementTheme.colors.badgeNegativeContentColor
-            Type.Info -> ElementTheme.colors.badgeInfoContentColor
+            Type.Info -> ElementTheme.colors.textBadgeInfo
         }
         val iconColor = when (data.type) {
-            Type.Positive -> ElementTheme.colors.iconSuccessPrimary
+            Type.Positive -> ElementTheme.colors.textBadgeAccent
             Type.Neutral -> ElementTheme.colors.iconSecondary
             Type.Negative -> ElementTheme.colors.iconCriticalPrimary
-            Type.Info -> ElementTheme.colors.iconInfoPrimary
+            Type.Info -> ElementTheme.colors.textBadgeInfo
         }
         Badge(
             text = data.text,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/Badge.kt

@@ -25,8 +25,6 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.badgePositiveBackgroundColor
-import io.element.android.libraries.designsystem.theme.badgePositiveContentColor
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -76,9 +74,9 @@ internal fun BadgePreview() {
         Badge(
             text = "Trusted",
             icon = CompoundIcons.Verified(),
-            backgroundColor = ElementTheme.colors.badgePositiveBackgroundColor,
-            textColor = ElementTheme.colors.badgePositiveContentColor,
-            iconColor = ElementTheme.colors.iconSuccessPrimary,
+            backgroundColor = ElementTheme.colors.bgBadgeAccent,
+            textColor = ElementTheme.colors.textBadgeAccent,
+            iconColor = ElementTheme.colors.textBadgeAccent,
         )
     }
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -38,77 +38,42 @@ val SemanticColors.placeholderBackground
     get() = bgSubtleSecondary
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.messageFromMeBackground
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGray400
-        Color(0xFFE1E6EC)
-    } else {
-        // We want DarkDesignTokens.colorGray500
-        Color(0xFF323539)
-    }
+    get() = if (isLight) LightColorTokens.colorGray400 else DarkColorTokens.colorGray500
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.messageFromOtherBackground
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGray300
-        Color(0xFFF0F2F5)
-    } else {
-        // We want DarkDesignTokens.colorGray400
-        Color(0xFF26282D)
-    }
+    get() = if (isLight) LightColorTokens.colorGray300 else DarkColorTokens.colorGray400
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.progressIndicatorTrackColor
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorAlphaGray500
-        Color(0x33052448)
-    } else {
-        // We want DarkDesignTokens.colorAlphaGray500
-        Color(0x25F4F7FA)
-    }
+    get() = if (isLight) LightColorTokens.colorAlphaGray500 else DarkColorTokens.colorAlphaGray500
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.iconSuccessPrimaryBackground
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGreen300
-        Color(0xffe3f7ed)
-    } else {
-        // We want DarkDesignTokens.colorGreen300
-        Color(0xff002513)
-    }
+    get() = if (isLight) LightColorTokens.colorGreen300 else DarkColorTokens.colorGreen300
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.bgSubtleTertiary
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGray100
-        Color(0xfffbfcfd)
-    } else {
-        // We want DarkDesignTokens.colorGray100
-        Color(0xff14171b)
-    }
+    get() = if (isLight) LightColorTokens.colorGray100 else DarkColorTokens.colorGray100
 
 // Temporary color, which is not in the token right now
 val SemanticColors.temporaryColorBgSpecial
     get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)
 
 // This color is not present in Semantic color, so put hard-coded value for now
+@OptIn(CoreColorToken::class)
 val SemanticColors.pinDigitBg
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGray300
-        Color(0xFFF0F2F5)
-    } else {
-        // We want DarkDesignTokens.colorGray400
-        Color(0xFF26282D)
-    }
+    get() = if (isLight) LightColorTokens.colorGray300 else DarkColorTokens.colorGray400
 
+@OptIn(CoreColorToken::class)
 val SemanticColors.currentUserMentionPillText
-    get() = if (isLight) {
-        // We want LightDesignTokens.colorGreen1100
-        Color(0xff005c45)
-    } else {
-        // We want DarkDesignTokens.colorGreen1100
-        Color(0xff1fc090)
-    }
+    get() = if (isLight) LightColorTokens.colorGreen1100 else DarkColorTokens.colorGreen1100
 
 val SemanticColors.currentUserMentionPillBackground
     get() = if (isLight) {
@@ -141,14 +106,6 @@ val SemanticColors.highlightedMessageBackgroundColor
 
 // Badge colors
 
-@OptIn(CoreColorToken::class)
-val SemanticColors.badgePositiveBackgroundColor
-    get() = if (isLight) LightColorTokens.colorAlphaGreen300 else DarkColorTokens.colorAlphaGreen300
-
-@OptIn(CoreColorToken::class)
-val SemanticColors.badgePositiveContentColor
-    get() = if (isLight) LightColorTokens.colorGreen1100 else DarkColorTokens.colorGreen1100
-
 @OptIn(CoreColorToken::class)
 val SemanticColors.badgeNeutralBackgroundColor
     get() = if (isLight) LightColorTokens.colorAlphaGray300 else DarkColorTokens.colorAlphaGray300
@@ -165,14 +122,6 @@ val SemanticColors.badgeNegativeBackgroundColor
 val SemanticColors.badgeNegativeContentColor
     get() = if (isLight) LightColorTokens.colorRed1100 else DarkColorTokens.colorRed1100
 
-@OptIn(CoreColorToken::class)
-val SemanticColors.badgeInfoBackgroundColor
-    get() = if (isLight) LightColorTokens.colorAlphaBlue300 else DarkColorTokens.colorAlphaBlue300
-
-@OptIn(CoreColorToken::class)
-val SemanticColors.badgeInfoContentColor
-    get() = if (isLight) LightColorTokens.colorBlue1100 else DarkColorTokens.colorBlue1100
-
 @OptIn(CoreColorToken::class)
 val SemanticColors.pinnedMessageBannerIndicator
     get() = if (isLight) LightColorTokens.colorAlphaGray600 else DarkColorTokens.colorAlphaGray600