letro/letro-android
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Merge pull request #6459 from element-hq/feature/bma/iterateOnBadgeColors

Browse Source 
Sync compound tokens https://github.com/element-hq/compound-design-tokens/releases/tag/v8.0.0
This commit is contained in:
Benoit Marty
2026-03-25 14:28:15 +01:00
committed by GitHub
parent 358959f561 ad3dac80f3
commit 24f897917f
91 changed files with 244 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
libraries/compound/screenshots/Compound Icons - Dark.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Icons - Light.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Icons - Rtl.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Semantic Colors - Dark HC.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Semantic Colors - Dark.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Semantic Colors - Light HC.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Semantic Colors - Light.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Vector Icons - Dark.png LFS
View File

Binary file not shown.

BIN
libraries/compound/screenshots/Compound Vector Icons - Light.png LFS
View File

Binary file not shown.

1
libraries/compound/src/main/kotlin/io/element/android/compound/previews/SemanticColorsPreview.kt
View File

@@ -122,6 +122,7 @@ private fun getSemanticColors(): ImmutableMap<String, Color> {
"bgBadgeAccent" to bgBadgeAccent,
"bgBadgeDefault" to bgBadgeDefault,
"bgBadgeInfo" to bgBadgeInfo,
"bgBadgePrimary" to bgBadgePrimary,
"bgCanvasDefault" to bgCanvasDefault,
"bgCanvasDefaultLevel1" to bgCanvasDefaultLevel1,
"bgCanvasDisabled" to bgCanvasDisabled,

10
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/CompoundIcons.kt
View File

@@ -148,6 +148,9 @@ object CompoundIcons {
@Composable fun Delete(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_delete)
}
@Composable fun DevicePasskey(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_device_passkey)
}
@Composable fun Devices(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_devices)
}
@@ -226,6 +229,9 @@ object CompoundIcons {
@Composable fun Filter(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_filter)
}
@Composable fun Folder(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_folder)
}
@Composable fun Forward(): ImageVector {
return ImageVector.vectorResource(R.drawable.ic_compound_forward)
}
@@ -738,6 +744,7 @@ object CompoundIcons {
Copy(),
DarkMode(),
Delete(),
DevicePasskey(),
Devices(),
DialPad(),
Document(),
@@ -764,6 +771,7 @@ object CompoundIcons {
FileError(),
Files(),
Filter(),
Folder(),
Forward(),
FullScreen(),
Grid(),
@@ -965,6 +973,7 @@ object CompoundIcons {
R.drawable.ic_compound_copy,
R.drawable.ic_compound_dark_mode,
R.drawable.ic_compound_delete,
R.drawable.ic_compound_device_passkey,
R.drawable.ic_compound_devices,
R.drawable.ic_compound_dial_pad,
R.drawable.ic_compound_document,
@@ -991,6 +1000,7 @@ object CompoundIcons {
R.drawable.ic_compound_file_error,
R.drawable.ic_compound_files,
R.drawable.ic_compound_filter,
R.drawable.ic_compound_folder,
R.drawable.ic_compound_forward,
R.drawable.ic_compound_full_screen,
R.drawable.ic_compound_grid,

6
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColors.kt
View File

@@ -49,12 +49,12 @@ data class SemanticColors(
val bgActionTertiaryRest: Color,
/** Background colour for tertiary actions. State: Selected */
val bgActionTertiarySelected: Color,
/** Badge accent background colour */
val bgBadgeAccent: Color,
/** Badge default background colour */
val bgBadgeCritical: Color,
val bgBadgeDefault: Color,
/** Badge info background colour */
val bgBadgeInfo: Color,
val bgBadgePrimary: Color,
val bgBadgeSecondary: Color,
/** Default global background for the user interface. Elevation: Default (Level 0) */
val bgCanvasDefault: Color,
/** Default global background for the user interface. Elevation: Level 1. */

9
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColorsDark.kt
View File

@@ -37,9 +37,12 @@ val compoundColorsDark = SemanticColors(
bgActionTertiaryHovered = DarkColorTokens.colorGray300,
bgActionTertiaryRest = DarkColorTokens.colorThemeBg,
bgActionTertiarySelected = DarkColorTokens.colorGray400,
bgBadgeAccent = DarkColorTokens.colorAlphaGreen500,
bgBadgeDefault = DarkColorTokens.colorAlphaGray500,
bgBadgeInfo = DarkColorTokens.colorAlphaBlue500,
bgBadgeAccent = DarkColorTokens.colorGreen400,
bgBadgeCritical = DarkColorTokens.colorRed300,
bgBadgeDefault = DarkColorTokens.colorThemeBg,
bgBadgeInfo = DarkColorTokens.colorBlue400,
bgBadgePrimary = DarkColorTokens.colorGray1400,
bgBadgeSecondary = DarkColorTokens.colorGray400,
bgCanvasDefault = DarkColorTokens.colorThemeBg,
bgCanvasDefaultLevel1 = DarkColorTokens.colorGray300,
bgCanvasDisabled = DarkColorTokens.colorGray200,

9
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColorsDarkHc.kt
View File

@@ -37,9 +37,12 @@ val compoundColorsHcDark = SemanticColors(
bgActionTertiaryHovered = DarkHcColorTokens.colorGray300,
bgActionTertiaryRest = DarkHcColorTokens.colorThemeBg,
bgActionTertiarySelected = DarkHcColorTokens.colorGray400,
bgBadgeAccent = DarkHcColorTokens.colorAlphaGreen500,
bgBadgeDefault = DarkHcColorTokens.colorAlphaGray500,
bgBadgeInfo = DarkHcColorTokens.colorAlphaBlue500,
bgBadgeAccent = DarkHcColorTokens.colorGreen400,
bgBadgeCritical = DarkHcColorTokens.colorRed300,
bgBadgeDefault = DarkHcColorTokens.colorThemeBg,
bgBadgeInfo = DarkHcColorTokens.colorBlue400,
bgBadgePrimary = DarkHcColorTokens.colorGray1400,
bgBadgeSecondary = DarkHcColorTokens.colorGray400,
bgCanvasDefault = DarkHcColorTokens.colorThemeBg,
bgCanvasDefaultLevel1 = DarkHcColorTokens.colorGray300,
bgCanvasDisabled = DarkHcColorTokens.colorGray200,

9
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColorsLight.kt
View File

@@ -37,9 +37,12 @@ val compoundColorsLight = SemanticColors(
bgActionTertiaryHovered = LightColorTokens.colorGray300,
bgActionTertiaryRest = LightColorTokens.colorThemeBg,
bgActionTertiarySelected = LightColorTokens.colorGray400,
bgBadgeAccent = LightColorTokens.colorAlphaGreen400,
bgBadgeDefault = LightColorTokens.colorAlphaGray400,
bgBadgeInfo = LightColorTokens.colorAlphaBlue400,
bgBadgeAccent = LightColorTokens.colorGreen400,
bgBadgeCritical = LightColorTokens.colorRed300,
bgBadgeDefault = LightColorTokens.colorThemeBg,
bgBadgeInfo = LightColorTokens.colorBlue400,
bgBadgePrimary = LightColorTokens.colorGray1400,
bgBadgeSecondary = LightColorTokens.colorGray400,
bgCanvasDefault = LightColorTokens.colorThemeBg,
bgCanvasDefaultLevel1 = LightColorTokens.colorThemeBg,
bgCanvasDisabled = LightColorTokens.colorGray200,

9
libraries/compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColorsLightHc.kt
View File

@@ -37,9 +37,12 @@ val compoundColorsHcLight = SemanticColors(
bgActionTertiaryHovered = LightHcColorTokens.colorGray300,
bgActionTertiaryRest = LightHcColorTokens.colorThemeBg,
bgActionTertiarySelected = LightHcColorTokens.colorGray400,
bgBadgeAccent = LightHcColorTokens.colorAlphaGreen400,
bgBadgeDefault = LightHcColorTokens.colorAlphaGray400,
bgBadgeInfo = LightHcColorTokens.colorAlphaBlue400,
bgBadgeAccent = LightHcColorTokens.colorGreen400,
bgBadgeCritical = LightHcColorTokens.colorRed300,
bgBadgeDefault = LightHcColorTokens.colorThemeBg,
bgBadgeInfo = LightHcColorTokens.colorBlue400,
bgBadgePrimary = LightHcColorTokens.colorGray1400,
bgBadgeSecondary = LightHcColorTokens.colorGray400,
bgCanvasDefault = LightHcColorTokens.colorThemeBg,
bgCanvasDefaultLevel1 = LightHcColorTokens.colorThemeBg,
bgCanvasDisabled = LightHcColorTokens.colorGray200,

9
libraries/compound/src/main/res/drawable/ic_compound_ai.xml Normal file
View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M9.5,2 L11,6.5 15.5,8 11,9.5 9.5,14 8,9.5 3.5,8 8,6.5zM19,11 L20,14 23,15 20,16 19,19 18,16 15,15 18,14zM12,17 L12.75,19.25L15,20l-2.25,0.75L12,23l-0.75,-2.25L9,20l2.25,-0.75z"
android:fillColor="#FF000000"/>
</vector>

13
libraries/compound/src/main/res/drawable/ic_compound_device_passkey.xml Normal file
View File

@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M19.5,9.385q1.458,0 2.48,1.021Q23,11.426 23,12.885q0,1.122 -0.642,2.027a3.4,3.4 0,0 1,-1.691 1.269v0.204l0.758,0.759q0.088,0.087 0.124,0.189a0.7,0.7 0,0 1,0.036 0.219q0,0.116 -0.036,0.218a0.5,0.5 0,0 1,-0.124 0.19l-0.758,0.759 0.802,1.02a0.6,0.6 0,0 1,0.11 0.197,0.5 0.5,0 0,1 0.02,0.226 0.57,0.57 0,0 1,-0.204 0.38l-1.501,1.313a0.62,0.62 0,0 1,-0.409 0.145,0.5 0.5,0 0,1 -0.212,-0.044 0.6,0.6 0,0 1,-0.167 -0.116l-0.598,-0.599a0.58,0.58 0,0 1,-0.175 -0.423v-4.637a3.54,3.54 0,0 1,-1.875 -1.553A3.36,3.36 0,0 1,16 12.885q0,-1.458 1.02,-2.479 1.022,-1.02 2.48,-1.021m0,2.334q-0.481,0 -0.824,0.343a1.12,1.12 0,0 0,-0.343 0.823q0,0.48 0.343,0.824 0.342,0.343 0.824,0.343t0.824,-0.343q0.343,-0.342 0.343,-0.824 0,-0.48 -0.343,-0.823a1.12,1.12 0,0 0,-0.824 -0.343"
android:fillColor="#FF000000"
android:fillType="evenOdd"/>
<path
android:pathData="M11,13.125q1.532,0 3.025,0.298a5.25,5.25 0,0 0,1.054 2.737q0.542,0.714 1.254,1.217v3.441q0,0.092 0.007,0.182H3.125q-0.478,0 -0.802,-0.323A1.1,1.1 0,0 1,2 19.875V17.85q0,-0.957 0.492,-1.758A3.3,3.3 0,0 1,3.8 14.869a16.7,16.7 0,0 1,3.544 -1.309A15.5,15.5 0,0 1,11 13.125M11,3q1.857,0 3.178,1.322Q15.5,5.644 15.5,7.5t-1.322,3.178T11,12t-3.178,-1.322T6.5,7.5t1.322,-3.178T11,3"
android:fillColor="#FF000000"/>
</vector>

9
libraries/compound/src/main/res/drawable/ic_compound_folder.xml Normal file
View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M4,20q-0.824,0 -1.412,-0.587A1.93,1.93 0,0 1,2 18L2,6q0,-0.824 0.587,-1.412A1.93,1.93 0,0 1,4 4h6l2,2h8q0.824,0 1.413,0.588Q22,7.175 22,8v10q0,0.824 -0.587,1.413A1.93,1.93 0,0 1,20 20zM4,18h16L20,8h-8.825l-2,-2L4,6z"
android:fillColor="#FF000000"/>
</vector>

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

@@ -8,14 +8,19 @@
package io.element.android.libraries.designsystem.atomic.atoms
import androidx.compose.foundation.BorderStroke
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
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
/**
* https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1960-491
*/
object MatrixBadgeAtom {
data class MatrixBadgeData(
val text: String,
@@ -40,6 +45,12 @@ object MatrixBadgeAtom {
Type.Negative -> ElementTheme.colors.bgCriticalSubtle
Type.Info -> ElementTheme.colors.bgBadgeInfo
}
val borderStroke = when (data.type) {
Type.Positive -> null
Type.Neutral -> BorderStroke(1.dp, ElementTheme.colors.borderInteractiveSecondary)
Type.Negative -> null
Type.Info -> null
}
val textColor = when (data.type) {
Type.Positive -> ElementTheme.colors.textBadgeAccent
Type.Neutral -> ElementTheme.colors.textPrimary
@@ -58,6 +69,7 @@ object MatrixBadgeAtom {
backgroundColor = backgroundColor,
iconColor = iconColor,
textColor = textColor,
borderStroke = borderStroke,
)
}
}

4
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/mentions/MentionSpan.kt
View File

@@ -55,14 +55,14 @@ class MentionSpan(
backgroundColor = when (type) {
is MentionType.User -> if (isCurrentUser) mentionSpanTheme.currentUserBackgroundColor else mentionSpanTheme.otherBackgroundColor
is MentionType.Everyone -> mentionSpanTheme.currentUserBackgroundColor
is MentionType.Everyone -> mentionSpanTheme.otherBackgroundColor
is MentionType.Room -> mentionSpanTheme.otherBackgroundColor
is MentionType.Message -> mentionSpanTheme.otherBackgroundColor
}
textColor = when (type) {
is MentionType.User -> if (isCurrentUser) mentionSpanTheme.currentUserTextColor else mentionSpanTheme.otherTextColor
is MentionType.Everyone -> mentionSpanTheme.currentUserTextColor
is MentionType.Everyone -> mentionSpanTheme.otherTextColor
is MentionType.Room -> mentionSpanTheme.otherTextColor
is MentionType.Message -> mentionSpanTheme.otherTextColor
}

13
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/mentions/MentionSpanTheme.kt
View File

@@ -54,6 +54,7 @@ import kotlinx.collections.immutable.persistentListOf
* To make this work, you need to:
* 1. Call [MentionSpanTheme.updateStyles] so the colors and sizes are computed.
* 2. Use either [MentionSpanTheme.updateMentionStyles] or [MentionSpan.updateTheme] to update the styles of the mention spans.
* https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3236-11203
*/
@Stable
@SingleIn(SessionScope::class)
@@ -61,10 +62,14 @@ class MentionSpanTheme(val currentUserId: UserId) {
@Inject
constructor(matrixClient: MatrixClient) : this(matrixClient.sessionId)
internal var currentUserTextColor: Int = 0
internal var currentUserTextColor: Int = Color.BLACK
private set
internal var currentUserBackgroundColor: Int = Color.WHITE
internal var otherTextColor: Int = 0
private set
internal var otherTextColor: Int = Color.BLACK
private set
internal var otherBackgroundColor: Int = Color.WHITE
private set
private val paddingValues = PaddingValues(start = 4.dp, end = 6.dp)
internal val paddingValuesPx = mutableStateOf(0 to 0)
@@ -78,8 +83,8 @@ class MentionSpanTheme(val currentUserId: UserId) {
fun updateStyles() {
currentUserTextColor = ElementTheme.colors.textBadgeAccent.toArgb()
currentUserBackgroundColor = ElementTheme.colors.bgBadgeAccent.toArgb()
otherTextColor = ElementTheme.colors.textPrimary.toArgb()
otherBackgroundColor = ElementTheme.colors.bgBadgeDefault.toArgb()
otherTextColor = ElementTheme.colors.textOnSolidPrimary.toArgb()
otherBackgroundColor = ElementTheme.colors.bgBadgePrimary.toArgb()
typeface.value = ElementTheme.typography.fontBodyLgMedium.rememberTypeface().value
val density = LocalDensity.current