element-hq / element-hq/compound

Add missing semantic colors / find semantic alternative.

Open
#337 1 comment 1 reaction 0 assignees View on GitHub
A-Design-Tokens
Dominant language
MDX
Stars
24
Forks
7
PR merge metrics
No merged PRs in 30d

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|Image|
|messageFromOtherBackground|LightColorTokens.colorGray300|DarkColorTokens.colorGray400|Background of the bubble, message from other users|Image|
|progressIndicatorTrackColor|LightColorTokens.colorAlphaGray500|DarkColorTokens.colorAlphaGray500|Track color of the progress indicator|
|iconSuccessPrimaryBackground|LightColorTokens.colorGreen300|DarkColorTokens.colorGreen300|Background of formatting option, when selected|Image|
|bgSubtleTertiary|LightColorTokens.colorGray100|DarkColorTokens.colorGray100|Background for code or quoted text in the timeline|
|temporaryColorBgSpecial|Color(0xFFE4E8F0)|Color(0xFF3A4048)|Background of big icon|ImageImage|
|pinDigitBg|LightColorTokens.colorGray300|DarkColorTokens.colorGray400|Background for the pin code digit|Image|
|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|Image|
|badgeNeutralContentColor|LightColorTokens.colorGray1100|DarkColorTokens.colorGray1100|Text/icon for neutral badge|Image|
|badgeNegativeBackgroundColor|LightColorTokens.colorAlphaRed300|DarkColorTokens.colorAlphaRed300|Background for negative badge|Image|
|badgeNegativeContentColor|LightColorTokens.colorRed1100|DarkColorTokens.colorRed1100|Text/icon for negative badge|Image|
|pinnedMessageBannerIndicator|LightColorTokens.colorAlphaGray600|DarkColorTokens.colorAlphaGray600|Color of not selected pinned message|Image|
|pinnedMessageBannerBorder|LightColorTokens.colorAlphaGray400|DarkColorTokens.colorAlphaGray400|Horizontal divider for pinned message banner|Image|

# DOD

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.