Add missing semantic colors / find semantic alternative.

[bmarty]

Context

Element X Android is using color directly from the token and not from Semantic colors because they do not exist, or we did not find a match when implementing the screens.

The colors are defined here https://github.com/element-hq/element-x-android/blob/develop/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt#L40, but the table below lists the colors, their value and their usage.

Table of alias (Android)

Name	Light	Dark	Usage	screenshot
messageFromMeBackground	LightColorTokens.colorGray400	DarkColorTokens.colorGray500	Background of the bubble, message from the current user
messageFromOtherBackground	LightColorTokens.colorGray300	DarkColorTokens.colorGray400	Background of the bubble, message from other users
progressIndicatorTrackColor	LightColorTokens.colorAlphaGray500	DarkColorTokens.colorAlphaGray500	Track color of the progress indicator
iconSuccessPrimaryBackground	LightColorTokens.colorGreen300	DarkColorTokens.colorGreen300	Background of formatting option, when selected
bgSubtleTertiary	LightColorTokens.colorGray100	DarkColorTokens.colorGray100	Background for code or quoted text in the timeline
temporaryColorBgSpecial	Color(0xFFE4E8F0)	Color(0xFF3A4048)	Background of big icon
pinDigitBg	LightColorTokens.colorGray300	DarkColorTokens.colorGray400	Background for the pin code digit
currentUserMentionPillText	LightColorTokens.colorGreen1100	DarkColorTokens.colorGreen1100	Text in pills
currentUserMentionPillBackground	Color(0x3b07b661)	Color(0xff003d29)	Background for pills
mentionPillBackground	Color(0x1f052e61)	Color(0x26f4f7fa)	Background for pills
bigCheckmarkBorderColor	LightColorTokens.colorGray400	DarkColorTokens.colorGray400	Used in BigCheckmark, but this component is not used, we should remove it?
highlightedMessageBackgroundColor	LightColorTokens.colorGreen300	DarkColorTokens.colorGreen300	Background for higlighted message gradient (note: for Element Pro we use textActionAccent.copy(alpha = 0.125f)
badgeNeutralBackgroundColor	LightColorTokens.colorAlphaGray300	DarkColorTokens.colorAlphaGray300	Background for neutral badge
badgeNeutralContentColor	LightColorTokens.colorGray1100	DarkColorTokens.colorGray1100	Text/icon for neutral badge
badgeNegativeBackgroundColor	LightColorTokens.colorAlphaRed300	DarkColorTokens.colorAlphaRed300	Background for negative badge
badgeNegativeContentColor	LightColorTokens.colorRed1100	DarkColorTokens.colorRed1100	Text/icon for negative badge
pinnedMessageBannerIndicator	LightColorTokens.colorAlphaGray600	DarkColorTokens.colorAlphaGray600	Color of not selected pinned message
pinnedMessageBannerBorder	LightColorTokens.colorAlphaGray400	DarkColorTokens.colorAlphaGray400	Horizontal divider for pinned message banner

DOD

All the colors above are removed from the codebase and are replaced by Semantic colors, either new or existing ones.

[pixlwave]

iOS

The iOS tokens are here: https://github.com/element-hq/compound-ios/blob/9ce46954f0e795f3448e9abe1422d2981688e7c3/Sources/Compound/Colors/CompoundColors.swift#L74-L118

Name	Light	Dark	Usage	screenshot
_borderTextFieldFocused	gray500	gray500	Border of text fields on the authentication screen
_bgBubbleIncoming	gray300	gray400	Background of the bubble, message from other users user
_bgBubbleOutgoing	gray400	gray500	Background of the bubble, message from current user
_bgBubbleHighlighted	green300	green300	Background for higlighted message gradient
_bgCodeBlock	gray100	gray100	Background for code in the timeline
_borderInteractiveSecondaryAlpha	alphaGray600	alphaGray600	List row separator
_bgSubtleSecondaryAlpha	alphaGray300	alphaGray300	List row icon background / Search field background
_bgCriticalSubtleAlpha	alphaRed300	alphaRed300	List row icon background (destructive)	I can't remember if this is actually a used style or shouldn't be a possible row configuration.
_bgEmptyItemAlpha	alphaGray500	alphaGray500	Poll progress view empty colour
_bgAccentSelected	green300	green300	Rich text editor selected button background (we use iconSuccessPrimary for the icon)
_bgPill	alphaGray400	alphaGray500	Background for pills
_bgOwnPill	alphaGreen400	alphaGreen500	Background for pills that mention you
_textOwnPill	green1100	green1100	Text for pills that mention you
gradientSuperButton	blue900 → green1100	blue900 → green1100	The super button gradient