Add missing semantic colors / find semantic alternative. #337
Description
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.