[Compound] Integrate compound tokens (#586)

* Added tokens.

* Apply color to MaterialTheme, also add typography.

* Map colors to the right ones in the themes.

* Create and improve previews of some components

* More preview improvements

* Add `tertiary` and `onTertiary` colors, remove some unused ones.

* Fix usage of deleted color token

* Fix bug in Switch previews

* Create a separate `:libraries:theme` module to keep everything related to colors, typography and Compound in general.

* Fix `DatePickerPreview`

* Add missing Compound generated files by fixing their package name

* Move `ElementTheme` to the `:libraries:theme` module, make some variables internal.

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

app/src/main/kotlin/io/element/android/x/MainActivity.kt

@@ -33,7 +33,7 @@ import com.bumble.appyx.core.integrationpoint.NodeComponentActivity
 import com.bumble.appyx.core.plugin.NodeReadyObserver
 import io.element.android.libraries.architecture.bindings
 import io.element.android.libraries.core.log.logger.LoggerTag
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.utils.LocalSnackbarDispatcher
 import io.element.android.x.di.AppBindings
 import timber.log.Timber

features/analytics/api/src/main/kotlin/io/element/android/features/analytics/api/preferences/AnalyticsPreferencesView.kt

@@ -27,11 +27,11 @@ import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.features.analytics.api.AnalyticsOptInEvents
-import io.element.android.libraries.designsystem.LinkColor
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceSwitch
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.theme.LinkColor
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable

features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt

@@ -55,7 +55,7 @@ import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text

features/location/api/src/main/kotlin/io/element/android/features/location/api/MapView.kt

@@ -50,9 +50,9 @@ import com.mapbox.mapboxsdk.plugins.annotation.SymbolOptions
 import io.element.android.features.location.api.internal.buildTileServerUrl
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.theme.ElementTheme
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
 import timber.log.Timber

features/location/api/src/main/kotlin/io/element/android/features/location/api/StaticMapView.kt

@@ -36,10 +36,10 @@ import coil.compose.rememberAsyncImagePainter
 import coil.request.ImageRequest
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.features.location.api.internal.StaticMapPlaceholder
 import io.element.android.features.location.api.internal.buildStaticMapsApiUrl
+import io.element.android.libraries.theme.ElementTheme
 import timber.log.Timber
 
 /**

features/location/api/src/main/kotlin/io/element/android/features/location/api/internal/StaticMapPlaceholder.kt

@@ -35,11 +35,11 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.features.location.api.R
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/LoginFlowNode.kt

@@ -45,7 +45,7 @@ import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.architecture.inputs
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.di.AppScope
 import io.element.android.libraries.matrix.api.auth.OidcDetails
 import kotlinx.parcelize.Parcelize

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewNode.kt

@@ -27,7 +27,7 @@ import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
-import io.element.android.libraries.designsystem.theme.ForcedDarkElementTheme
+import io.element.android.libraries.theme.ForcedDarkElementTheme
 import io.element.android.libraries.di.RoomScope
 
 @ContributesNode(RoomScope::class)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt

@@ -63,7 +63,6 @@ import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeImage
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
 import io.element.android.libraries.designsystem.R
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
@@ -242,7 +241,7 @@ fun MediaFileView(
                     fontSize = 16.sp,
                     overflow = TextOverflow.Ellipsis,
                     textAlign = TextAlign.Center,
-                    color = ElementTheme.colors.gray1400
+                    color = MaterialTheme.colorScheme.primary
                 )
                 Spacer(modifier = Modifier.height(4.dp))
                 Text(
@@ -250,7 +249,7 @@ fun MediaFileView(
                     fontSize = 14.sp,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
-                    color = ElementTheme.colors.gray1400
+                    color = MaterialTheme.colorScheme.primary
                 )
             }
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/viewer/MediaViewerNode.kt

@@ -27,7 +27,7 @@ import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.messages.impl.media.local.MediaInfo
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.inputs
-import io.element.android.libraries.designsystem.theme.ForcedDarkElementTheme
+import io.element.android.libraries.theme.ForcedDarkElementTheme
 import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.matrix.api.media.MediaSource
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageEventBubble.kt

@@ -41,7 +41,7 @@ import io.element.android.features.messages.impl.timeline.model.bubble.BubbleSta
 import io.element.android.libraries.core.extensions.to01
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessageStateEventContainer.kt

@@ -33,7 +33,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 
 private val CORNER_RADIUS = 8.dp

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt

@@ -40,7 +40,6 @@ import io.element.android.libraries.core.bool.orFalse
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.timeline.item.event.EventSendState
@@ -55,7 +54,7 @@ fun TimelineEventTimestampView(
     val formattedTime = event.sentTime
     val hasMessageSendingFailed = event.sendState is EventSendState.SendingFailed
     val isMessageEdited = (event.content as? TimelineItemTextBasedContent)?.isEdited.orFalse()
-    val tint = if (hasMessageSendingFailed) ElementTheme.colors.textActionCritical else null
+    val tint = if (hasMessageSendingFailed) MaterialTheme.colorScheme.error else null
     Row(
         modifier = Modifier
             .clickable(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -55,7 +55,7 @@ import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.components.EqualWidthColumn
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.UserId

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt

@@ -33,10 +33,10 @@ import androidx.core.text.util.LinkifyCompat
 import io.element.android.features.messages.impl.timeline.components.html.HtmlDocument
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContentProvider
-import io.element.android.libraries.designsystem.LinkColor
 import io.element.android.libraries.designsystem.components.ClickableLinkText
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.theme.LinkColor
 
 @Composable
 fun TimelineItemTextView(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt

@@ -38,7 +38,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 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

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt

@@ -47,7 +47,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.google.accompanist.flowlayout.FlowRow
-import io.element.android.libraries.designsystem.LinkColor
 import io.element.android.libraries.designsystem.components.ClickableLinkText
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@@ -55,6 +54,7 @@ import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
+import io.element.android.libraries.theme.LinkColor
 import kotlinx.collections.immutable.persistentMapOf
 import org.jsoup.nodes.Document
 import org.jsoup.nodes.Element

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/retrysendmenu/RetrySendMessageMenu.kt

@@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -37,7 +38,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.features.messages.impl.R
 import kotlinx.coroutines.launch
@@ -129,7 +129,7 @@ private fun ColumnScope.RetrySendMenuContents(
         headlineContent = {
             Text(stringResource(R.string.screen_room_retry_send_menu_remove_action))
         },
-        colors = ListItemDefaults.colors(headlineColor = LocalColors.current.textActionCritical),
+        colors = ListItemDefaults.colors(headlineColor = MaterialTheme.colorScheme.error),
         modifier = Modifier.clickable {
             coroutineScope.launch {
                 sheetState.hide()

features/networkmonitor/api/src/main/kotlin/io/element/android/features/networkmonitor/api/ui/ConnectivityIndicatorView.kt

@@ -48,7 +48,6 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
@@ -83,7 +82,7 @@ private fun Indicator(modifier: Modifier = Modifier) {
     Row(
         modifier
             .fillMaxWidth()
-            .background(LocalColors.current.gray400)
+            .background(MaterialTheme.colorScheme.secondaryContainer)
             .statusBarsPadding()
             .padding(vertical = 6.dp),
         horizontalArrangement = Arrangement.Center,

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -70,7 +70,6 @@ import io.element.android.libraries.designsystem.components.preferences.Preferen
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.LargeHeightPreview
-import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -315,7 +314,7 @@ internal fun OtherActionsSection(onLeaveRoom: () -> Unit, modifier: Modifier = M
         PreferenceText(
             title = stringResource(R.string.screen_room_details_leave_room_title),
             icon = ImageVector.vectorResource(R.drawable.ic_door_open),
-            tintColor = LocalColors.current.textActionCritical,
+            tintColor = MaterialTheme.colorScheme.error,
             onClick = onLeaveRoom,
         )
     }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/blockuser/BlockUserSection.kt

@@ -18,6 +18,7 @@ package io.element.android.features.roomdetails.impl.blockuser
 
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Block
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -27,7 +28,6 @@ import io.element.android.features.roomdetails.impl.R
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceText
-import io.element.android.libraries.designsystem.theme.LocalColors
 
 @Composable
 internal fun BlockUserSection(state: RoomMemberDetailsState, modifier: Modifier = Modifier) {
@@ -42,7 +42,7 @@ internal fun BlockUserSection(state: RoomMemberDetailsState, modifier: Modifier
             PreferenceText(
                 title = stringResource(R.string.screen_dm_details_block_user),
                 icon = Icons.Outlined.Block,
-                tintColor = LocalColors.current.textActionCritical,
+                tintColor = MaterialTheme.colorScheme.error,
                 onClick = { state.eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = true)) },
             )
         }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/edit/RoomDetailsEditView.kt

@@ -68,7 +68,6 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.CenterAlignedTopAppBar
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -237,7 +236,7 @@ private fun EditableAvatarView(
                     modifier = Modifier
                         .align(Alignment.BottomEnd)
                         .clip(CircleShape)
-                        .background(LocalColors.current.gray1400)
+                        .background(MaterialTheme.colorScheme.primary)
                         .size(24.dp),
                     contentAlignment = Alignment.Center,
                 ) {

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListContextMenu.kt

@@ -36,7 +36,6 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -102,7 +101,7 @@ private fun RoomListModalBottomSheetContent(
             headlineContent = {
                 Text(
                     text = stringResource(id = CommonStrings.action_leave_room),
-                    color = ElementTheme.colors.textActionCritical,
+                    color = MaterialTheme.colorScheme.error,
                 )
             },
             modifier = Modifier.clickable { onLeaveRoomClicked(contextMenu.roomId) },
@@ -111,7 +110,7 @@ private fun RoomListModalBottomSheetContent(
                     resourceId = VectorIcons.DoorOpen,
                     contentDescription = stringResource(id = CommonStrings.action_leave_room),
                     modifier = Modifier.size(20.dp),
-                    tint = ElementTheme.colors.textActionCritical,
+                    tint = MaterialTheme.colorScheme.error,
                 )
             }
         )

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt

@@ -61,7 +61,7 @@ import io.element.android.libraries.core.extensions.orEmpty
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.roomListPlaceHolder
 import io.element.android.libraries.designsystem.theme.roomListRoomMessage

libraries/designsystem/build.gradle.kts

@@ -28,9 +28,9 @@ android {
     }
 
     dependencies {
+        api(projects.libraries.theme)
         // Should not be there, but this is a POC
         implementation(libs.coil.compose)
-        implementation(libs.accompanist.systemui)
         implementation(libs.vanniktech.blurhash)
         implementation(projects.libraries.uiStrings)
 

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

@@ -35,7 +35,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Icon
 
 /**

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

@@ -32,12 +32,12 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
-import io.element.android.libraries.designsystem.AvatarGradientEnd
-import io.element.android.libraries.designsystem.AvatarGradientStart
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.preview.debugPlaceholderAvatar
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.AvatarGradientEnd
+import io.element.android.libraries.theme.AvatarGradientStart
 import timber.log.Timber
 
 @Composable

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/ElementPreview.kt

@@ -28,7 +28,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 
 @Composable

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/PreviewGroup.kt

@@ -21,10 +21,12 @@ object PreviewGroup {
     const val Avatars = "Avatars"
     const val BottomSheets = "Bottom Sheets"
     const val Buttons = "Buttons"
+    const val DateTimePickers = "DateTime pickers"
     const val Dialogs = "Dialogs"
     const val Dividers = "Dividers"
     const val FABs = "Floating Action Buttons"
     const val Icons = "Icons"
+    const val Menus = "Menus"
     const val Preferences = "Preferences"
     const val Progress = "Progress Indicators"
     const val Search = "Search views"

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/AnnotatedStrings.kt

@@ -31,7 +31,7 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
-import io.element.android.libraries.designsystem.LinkColor
+import io.element.android.libraries.theme.LinkColor
 
 fun String.toAnnotatedString(): AnnotatedString = buildAnnotatedString {
     append(this@toAnnotatedString)

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

@@ -20,11 +20,13 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.SystemGrey4Dark
-import io.element.android.libraries.designsystem.SystemGrey6Light
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.previews.ColorListPreview
+import io.element.android.libraries.theme.ElementColors
+import io.element.android.libraries.theme.ElementTheme
+import io.element.android.libraries.theme.SystemGrey4Dark
+import io.element.android.libraries.theme.SystemGrey6Light
+import io.element.android.libraries.theme.previews.ColorListPreview
 import kotlinx.collections.immutable.persistentMapOf
 
 /**

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

@@ -1,93 +0,0 @@
-/*
- * Copyright (c) 2023 New Vector Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package io.element.android.libraries.designsystem.theme
-
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.Azure
-import io.element.android.libraries.designsystem.Black_800
-import io.element.android.libraries.designsystem.Black_950
-import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
-import io.element.android.libraries.designsystem.DarkGrey
-import io.element.android.libraries.designsystem.Compound_Gray_1400_Dark
-import io.element.android.libraries.designsystem.Gray_300
-import io.element.android.libraries.designsystem.Gray_400
-import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
-import io.element.android.libraries.designsystem.Compound_Gray_800_Dark
-import io.element.android.libraries.designsystem.Gray_450
-import io.element.android.libraries.designsystem.SystemGrey5Dark
-import io.element.android.libraries.designsystem.SystemGrey6Dark
-import io.element.android.libraries.designsystem.TextColorCriticalDark
-import io.element.android.libraries.designsystem.theme.previews.ColorsSchemePreview
-
-fun elementColorsDark() = ElementColors(
-    messageFromMeBackground = SystemGrey5Dark,
-    messageFromOtherBackground = SystemGrey6Dark,
-    messageHighlightedBackground = Azure,
-    quaternary = Gray_400,
-    quinary = Gray_450,
-    gray300 = Compound_Gray_300_Dark,
-    gray400 = Compound_Gray_400_Dark,
-    gray1400 = Compound_Gray_1400_Dark,
-    textActionCritical = TextColorCriticalDark,
-    accentColor = Color(0xFF0DBD8B),
-    placeholder = Compound_Gray_800_Dark,
-    isLight = false,
-)
-
-// TODO Lots of colors are missing
-val materialColorSchemeDark = darkColorScheme(
-    primary = Color.White,
-    onPrimary = Color.Black,
-    // TODO primaryContainer = ColorDarkTokens.PrimaryContainer,
-    // TODO onPrimaryContainer = ColorDarkTokens.OnPrimaryContainer,
-    // TODO inversePrimary = ColorDarkTokens.InversePrimary,
-    secondary = DarkGrey,
-    // TODO onSecondary = ColorDarkTokens.OnSecondary,
-    // TODO secondaryContainer = ColorDarkTokens.SecondaryContainer,
-    // TODO onSecondaryContainer = ColorDarkTokens.OnSecondaryContainer,
-    tertiary = Gray_300,
-    // TODO onTertiary = ColorDarkTokens.OnTertiary,
-    // TODO tertiaryContainer = ColorDarkTokens.TertiaryContainer,
-    // TODO onTertiaryContainer = ColorDarkTokens.OnTertiaryContainer,
-    background = Black_800,
-    onBackground = Color.White,
-    surface = Black_800,
-    onSurface = Color.White,
-    surfaceVariant = Black_950,
-    onSurfaceVariant = Gray_300,
-    // TODO surfaceTint = primary,
-    // TODO inverseSurface = ColorDarkTokens.InverseSurface,
-    // TODO inverseOnSurface = ColorDarkTokens.InverseOnSurface,
-    // TODO error = ColorDarkTokens.Error,
-    // TODO onError = ColorDarkTokens.OnError,
-    // TODO errorContainer = ColorDarkTokens.ErrorContainer,
-    // TODO onErrorContainer = ColorDarkTokens.OnErrorContainer,
-    // TODO outline = ColorDarkTokens.Outline,
-    outlineVariant = Gray_450,
-    // TODO scrim = ColorDarkTokens.Scrim,
-)
-
-@Preview
-@Composable
-fun ColorsSchemePreviewDark() = ColorsSchemePreview(
-    Color.White,
-    Color.Black,
-    materialColorSchemeDark,
-)

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

@@ -1,93 +0,0 @@
-/*
- * Copyright (c) 2023 New Vector Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package io.element.android.libraries.designsystem.theme
-
-import androidx.compose.material3.lightColorScheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
-import io.element.android.libraries.designsystem.Azure
-import io.element.android.libraries.designsystem.Black_900
-import io.element.android.libraries.designsystem.Compound_Gray_300_Light
-import io.element.android.libraries.designsystem.Compound_Gray_400_Light
-import io.element.android.libraries.designsystem.Compound_Gray_800_Light
-import io.element.android.libraries.designsystem.Gray_100
-import io.element.android.libraries.designsystem.Compound_Gray_1400_Light
-import io.element.android.libraries.designsystem.Gray_150
-import io.element.android.libraries.designsystem.Gray_200
-import io.element.android.libraries.designsystem.Gray_25
-import io.element.android.libraries.designsystem.Gray_50
-import io.element.android.libraries.designsystem.SystemGrey5Light
-import io.element.android.libraries.designsystem.SystemGrey6Light
-import io.element.android.libraries.designsystem.TextColorCriticalLight
-import io.element.android.libraries.designsystem.theme.previews.ColorsSchemePreview
-
-fun elementColorsLight() = ElementColors(
-    messageFromMeBackground = SystemGrey5Light,
-    messageFromOtherBackground = SystemGrey6Light,
-    messageHighlightedBackground = Azure,
-    quaternary = Gray_100,
-    quinary = Gray_50,
-    gray300 = Compound_Gray_300_Light,
-    gray400 = Compound_Gray_400_Light,
-    gray1400 = Compound_Gray_1400_Light,
-    textActionCritical = TextColorCriticalLight,
-    accentColor = Color(0xFF0DBD8B),
-    placeholder = Compound_Gray_800_Light,
-    isLight = true,
-)
-
-// TODO Lots of colors are missing
-val materialColorSchemeLight = lightColorScheme(
-    primary = Black_900,
-    onPrimary = Color.White,
-    // TODO primaryContainer = ColorLightTokens.PrimaryContainer,
-    // TODO onPrimaryContainer = ColorLightTokens.OnPrimaryContainer,
-    // TODO inversePrimary = ColorLightTokens.InversePrimary,
-    secondary = Gray_200,
-    // TODO onSecondary = ColorLightTokens.OnSecondary,
-    // TODO secondaryContainer = ColorLightTokens.SecondaryContainer,
-    // TODO onSecondaryContainer = ColorLightTokens.OnSecondaryContainer,
-    tertiary = Gray_150,
-    // TODO onTertiary = ColorLightTokens.OnTertiary,
-    // TODO tertiaryContainer = ColorLightTokens.TertiaryContainer,
-    // TODO onTertiaryContainer = ColorLightTokens.OnTertiaryContainer,
-    background = Color.White,
-    onBackground = Color.Black,
-    surface = Color.White,
-    onSurface = Color.Black,
-    surfaceVariant = Gray_25,
-    onSurfaceVariant = Gray_200,
-    // TODO surfaceTint = primary,
-    // TODO inverseSurface = ColorLightTokens.InverseSurface,
-    // TODO inverseOnSurface = ColorLightTokens.InverseOnSurface,
-    // TODO error = ColorLightTokens.Error,
-    // TODO onError = ColorLightTokens.OnError,
-    // TODO errorContainer = ColorLightTokens.ErrorContainer,
-    // TODO onErrorContainer = ColorLightTokens.OnErrorContainer,
-    // TODO outline = ColorLightTokens.Outline,
-    outlineVariant = Gray_50,
-    // TODO scrim = ColorLightTokens.Scrim,
-)
-
-@Preview
-@Composable
-fun ColorsSchemePreviewLight() = ColorsSchemePreview(
-    Color.Black,
-    Color.White,
-    materialColorSchemeLight,
-)

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

@@ -17,6 +17,7 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Row
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.IconButtonDefaults
@@ -52,7 +53,12 @@ internal fun IconButtonPreview() =
 
 @Composable
 private fun ContentToPreview() {
-    IconButton(onClick = {}) {
+    Row {
-        Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+        IconButton(onClick = {}) {
+            Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+        }
+        IconButton(enabled = false, onClick = {}) {
+            Icon(imageVector = Icons.Filled.Close, contentDescription = "")
+        }
     }
 }

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

@@ -102,7 +102,6 @@ private fun ContentToPreview() {
             sheetState = SheetState(
                 skipPartiallyExpanded = true,
                 initialValue = SheetValue.Expanded,
-                skipHiddenState = true,
             ),
         ) {
             Text(

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

@@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
@@ -79,7 +80,7 @@ internal fun OutlinedButtonsPreview() = ElementThemedPreview { ContentToPreview(
 
 @Composable
 private fun ContentToPreview() {
-    Column {
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
         OutlinedButton(onClick = {}, enabled = true) {
             Text(text = "Click me! - Enabled")
         }

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

@@ -55,5 +55,7 @@ private fun ContentToPreview() {
     Column {
         RadioButton(selected = false, onClick = {})
         RadioButton(selected = true, onClick = {})
+        RadioButton(selected = false, enabled = false, onClick = {})
+        RadioButton(selected = true, enabled = false, onClick = {})
     }
 }

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

@@ -46,7 +46,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @OptIn(ExperimentalMaterial3Api::class)

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

@@ -21,7 +21,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
@@ -59,8 +62,10 @@ internal fun SlidersPreview() = ElementThemedPreview { ContentToPreview() }
 
 @Composable
 private fun ContentToPreview() {
+    var value by remember { mutableStateOf(0.33f) }
     Column {
-        Slider(onValueChange = {}, value = 0.33f, enabled = true)
+        Slider(onValueChange = { value = it }, value = value, enabled = true)
-        Slider(onValueChange = {}, value = 0.33f, enabled = false)
+        Slider(steps = 10, onValueChange = { value = it }, value = value, enabled = true)
+        Slider(onValueChange = { value = it }, value = value, enabled = false)
     }
 }

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

@@ -47,7 +47,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.utils.toHrf
+import io.element.android.libraries.theme.utils.toHrf
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/previews/DatePickerPreview.kt

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.components.previews
+
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.components.dialogs.AlertDialogContent
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.PreviewGroup
+
+@Preview(group = PreviewGroup.DateTimePickers)
+@Composable
+internal fun DatePickerPreviewLight() {
+    ElementPreviewLight { ContentToPreview() }
+}
+
+@Preview(group = PreviewGroup.DateTimePickers)
+@Composable
+internal fun DatePickerPreviewDark() {
+    ElementPreviewDark { ContentToPreview() }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun ContentToPreview() {
+    val state = rememberDatePickerState(
+        initialSelectedDateMillis = 1672578000000L,
+    )
+    AlertDialogContent(
+        buttons = { /*TODO*/ },
+        icon = { /*TODO*/ },
+        title = { /*TODO*/ },
+        text = { DatePicker(state = state, showModeToggle = true) },
+        shape = AlertDialogDefaults.shape,
+        containerColor = AlertDialogDefaults.containerColor,
+        tonalElevation = AlertDialogDefaults.TonalElevation,
+        buttonContentColor = MaterialTheme.colorScheme.primary,
+        iconContentColor = AlertDialogDefaults.iconContentColor,
+        titleContentColor = AlertDialogDefaults.titleContentColor,
+        textContentColor = AlertDialogDefaults.textContentColor,
+    )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/previews/MenuPreview.kt

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.components.previews
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowRight
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@Preview(group = PreviewGroup.Menus)
+@Composable
+internal fun MenuPreview() {
+    ElementThemedPreview {
+        var isExpanded by remember { mutableStateOf(false) }
+        Button(onClick = { isExpanded = !isExpanded }) {
+            Text("Toggle")
+        }
+        DropdownMenu(expanded = isExpanded, onDismissRequest = { isExpanded = false }) {
+            for (i in 0..5) {
+                val leadingIcon: @Composable (() -> Unit)? = if (i in 2..3) {
+                    @Composable {
+                        Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
+                    }
+                } else {
+                    null
+                }
+
+                val trailingIcon: @Composable (() -> Unit)? = if (i in 3..4) {
+                    @Composable {
+                        Icon(Icons.Filled.ArrowRight, contentDescription = "Favorite")
+                    }
+                } else {
+                    null
+                }
+                DropdownMenuItem(
+                    text = { Text(text = "Item $i") },
+                    onClick = { isExpanded = false },
+                    leadingIcon = leadingIcon,
+                    trailingIcon = trailingIcon,
+                )
+            }
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/previews/SwitchPreview.kt

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.components.previews
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Check
+import androidx.compose.material3.Switch
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+@Preview(group = PreviewGroup.Toggles)
+@Composable
+internal fun SwitchPreview() {
+    ElementThemedPreview {
+        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            var checked by remember { mutableStateOf(false) }
+            Switch(checked = checked, onCheckedChange = { checked = !checked })
+            Switch(checked = checked, onCheckedChange = { checked = !checked }, thumbContent = {
+                Icon(imageVector = Icons.Outlined.Check, contentDescription = null)
+            })
+            Switch(checked = checked, enabled = false, onCheckedChange = { checked = !checked })
+            Switch(checked = checked, enabled = false, onCheckedChange = { checked = !checked }, thumbContent = {
+                Icon(imageVector = Icons.Outlined.Check, contentDescription = null)
+            })
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/previews/TimePickerPreview.kt

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.theme.components.previews
+
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.TimePickerLayoutType
+import androidx.compose.material3.rememberTimePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.components.dialogs.AlertDialogContent
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.ElementThemedPreview
+import io.element.android.libraries.designsystem.preview.PreviewGroup
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(widthDp = 600, group = PreviewGroup.DateTimePickers)
+@Composable
+internal fun TimePickerHorizontalPreview() {
+    ElementThemedPreview {
+        AlertDialogContent(
+            buttons = { /*TODO*/ },
+            icon = { /*TODO*/ },
+            title = { /*TODO*/ },
+            text = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Horizontal) },
+            shape = AlertDialogDefaults.shape,
+            containerColor = AlertDialogDefaults.containerColor,
+            tonalElevation = AlertDialogDefaults.TonalElevation,
+            buttonContentColor = MaterialTheme.colorScheme.primary,
+            iconContentColor = AlertDialogDefaults.iconContentColor,
+            titleContentColor = AlertDialogDefaults.titleContentColor,
+            textContentColor = AlertDialogDefaults.textContentColor,
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(group = PreviewGroup.DateTimePickers)
+@Composable
+internal fun TimePickerVerticalPreviewLight() {
+    ElementPreviewLight {
+        AlertDialogContent(
+            buttons = { /*TODO*/ },
+            icon = { /*TODO*/ },
+            title = { /*TODO*/ },
+            text = { TimePicker(state = rememberTimePickerState(), layoutType = TimePickerLayoutType.Vertical) },
+            shape = AlertDialogDefaults.shape,
+            containerColor = AlertDialogDefaults.containerColor,
+            tonalElevation = AlertDialogDefaults.TonalElevation,
+            buttonContentColor = MaterialTheme.colorScheme.primary,
+            iconContentColor = AlertDialogDefaults.iconContentColor,
+            titleContentColor = AlertDialogDefaults.titleContentColor,
+            textContentColor = AlertDialogDefaults.textContentColor,
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(group = PreviewGroup.DateTimePickers)
+@Composable
+internal fun TimePickerVerticalPreviewDark() {
+    val pickerState = rememberTimePickerState(
+        initialHour = 12,
+        initialMinute = 0,
+    )
+    ElementPreviewDark {
+        AlertDialogContent(
+            buttons = { /*TODO*/ },
+            icon = { /*TODO*/ },
+            title = { /*TODO*/ },
+            text = { TimePicker(state = pickerState, layoutType = TimePickerLayoutType.Vertical) },
+            shape = AlertDialogDefaults.shape,
+            containerColor = AlertDialogDefaults.containerColor,
+            tonalElevation = AlertDialogDefaults.TonalElevation,
+            buttonContentColor = MaterialTheme.colorScheme.primary,
+            iconContentColor = AlertDialogDefaults.iconContentColor,
+            titleContentColor = AlertDialogDefaults.titleContentColor,
+            textContentColor = AlertDialogDefaults.textContentColor,
+        )
+    }
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnsavedAvatar.kt

@@ -39,7 +39,7 @@ import coil.request.ImageRequest
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.Icon
 
 /**

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -70,7 +70,7 @@ import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.modifiers.applyIf
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.theme.LocalColors
 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

libraries/theme/README.md

@@ -0,0 +1,13 @@
+# Theme Module
+
+This module contains the theme tokens for the application, including those auto-generated from [Compound](https://github.com/vector-im/compound-design-tokens) and its mappings.
+
+## Usage
+
+The module contains public tokens and color schemes that are later used in `MaterialTheme` and added to `ElementTheme` for use in the application.
+
+## Adding new tokens
+
+All new tokens **should** come from Compound and added to the `compound.generated` package. To map the literal tokens to the semantic ones, you'll have to update both `compoundColorsLight` and `compoundColorsDark` in `CompoundColors.kt`.
+
+As we're still migrating to using Compound tokens, it's possible that you might need to add some tokens manually. In that case, you should add them to `LegacyColors.kt` and map them later in `ElementColors.kt` so they can be used in light and dark themes. However, keep in mind this is just a temporary step, as those tokens should either be added later to Compound or replaced by Compound tokens in the future.

libraries/theme/build.gradle.kts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+plugins {
+    id("io.element.android-compose-library")
+    alias(libs.plugins.ksp)
+}
+
+android {
+    namespace = "io.element.android.libraries.theme"
+
+    dependencies {
+        ksp(libs.showkase.processor)
+        kspTest(libs.showkase.processor)
+
+        implementation(libs.accompanist.systemui)
+    }
+}

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementColors.kt

@@ -14,14 +14,27 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.theme
+package io.element.android.libraries.theme
 
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.graphics.Color
+import io.element.android.libraries.theme.compound.generated.internal.DarkDesignTokens
+import io.element.android.libraries.theme.compound.generated.internal.LightDesignTokens
+import io.element.android.libraries.theme.compound.generated.SemanticColors
 
+/**
+ * Element color palette.
+ *
+ * ## IMPORTANT!
+ * **We should not add any new colors here, all new colors should come from [SemanticColors] instead.**
+ *
+ * If a design needs you to add a different color here, talk to some designer first, as they'll probably be using
+ * the legacy color palette.
+ */
+@Deprecated("Use SemanticColors instead")
 @Stable
 class ElementColors(
     messageFromMeBackground: Color,
@@ -30,9 +43,6 @@ class ElementColors(
     quaternary: Color,
     quinary: Color,
     gray300: Color,
-    gray400: Color,
-    gray1400: Color,
-    textActionCritical: Color,
     accentColor: Color,
     placeholder: Color,
     isLight: Boolean
@@ -50,16 +60,7 @@ class ElementColors(
     var quinary by mutableStateOf(quinary)
         private set
 
-    var gray300 by mutableStateOf(gray400)
+    var gray300 by mutableStateOf(gray300)
-        private set
-
-    var gray400 by mutableStateOf(gray400)
-        private set
-
-    var gray1400 by mutableStateOf(gray1400)
-        private set
-
-    var textActionCritical by mutableStateOf(textActionCritical)
         private set
 
     var accentColor by mutableStateOf(accentColor)
@@ -78,9 +79,6 @@ class ElementColors(
         quaternary: Color = this.quaternary,
         quinary: Color = this.quinary,
         gray300: Color = this.gray300,
-        gray400: Color = this.gray400,
-        gray1400: Color = this.gray1400,
-        textActionCritical: Color = this.textActionCritical,
         accentColor: Color = this.accentColor,
         placeholder: Color = this.placeholder,
         isLight: Boolean = this.isLight,
@@ -91,9 +89,6 @@ class ElementColors(
         quaternary = quaternary,
         quinary = quinary,
         gray300 = gray300,
-        gray400 = gray400,
-        gray1400 = gray1400,
-        textActionCritical = textActionCritical,
         accentColor = accentColor,
         placeholder = placeholder,
         isLight = isLight,
@@ -106,11 +101,32 @@ class ElementColors(
         quaternary = other.quaternary
         quinary = other.quinary
         gray300 = other.gray300
-        gray400 = other.gray400
-        gray1400 = other.gray1400
-        textActionCritical = other.textActionCritical
         accentColor = other.accentColor
         placeholder = other.placeholder
         isLight = other.isLight
     }
 }
+
+internal fun elementColorsLight() = ElementColors(
+    messageFromMeBackground = SystemGrey5Light,
+    messageFromOtherBackground = SystemGrey6Light,
+    messageHighlightedBackground = Azure,
+    quaternary = Gray_100,
+    quinary = Gray_50,
+    gray300 = LightDesignTokens.colorGray300,
+    accentColor = ElementGreen,
+    placeholder = LightDesignTokens.colorGray800,
+    isLight = true,
+)
+
+internal fun elementColorsDark() = ElementColors(
+    messageFromMeBackground = SystemGrey5Dark,
+    messageFromOtherBackground = SystemGrey6Dark,
+    messageHighlightedBackground = Azure,
+    quaternary = Gray_400,
+    quinary = Gray_450,
+    gray300 = DarkDesignTokens.colorGray300,
+    accentColor = ElementGreen,
+    placeholder = DarkDesignTokens.colorGray800,
+    isLight = false,
+)

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/ElementTheme.kt

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.theme
+package io.element.android.libraries.theme
 
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Typography
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
@@ -33,33 +34,71 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import com.google.accompanist.systemuicontroller.SystemUiController
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import io.element.android.libraries.theme.compound.compoundColorsDark
+import io.element.android.libraries.theme.compound.compoundColorsLight
+import io.element.android.libraries.theme.compound.compoundTypography
+import io.element.android.libraries.theme.compound.generated.SemanticColors
 
 /**
  * Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace
  */
 object ElementTheme {
+    /**
+     * The current [ElementColors] provided by [ElementTheme]. Usage of these colors is discouraged.
+     */
     val colors: ElementColors
         @Composable
         @ReadOnlyComposable
         get() = LocalColors.current
+
+    /**
+     * The current [SemanticColors] provided by [ElementTheme].
+     * These come from Compound and are the recommended colors to use for custom components.
+     */
+    val compoundColors: SemanticColors
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalCompoundColors.current
+
+    /**
+     * The current Material 3 [ColorScheme] provided by [ElementTheme], coming from [MaterialTheme].
+     */
+    val materialColors: ColorScheme
+        @Composable
+        @ReadOnlyComposable
+        get() = MaterialTheme.colorScheme
+
+    /**
+     * Material 3 [Typography] tokens.
+     */
+    val typography: Typography
+        @Composable
+        @ReadOnlyComposable
+        get() = MaterialTheme.typography
 }
 
 /* Global variables (application level) */
 val LocalColors = staticCompositionLocalOf { elementColorsLight() }
+val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLight }
 
 @Composable
 fun ElementTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     dynamicColor: Boolean = false, /* true to enable MaterialYou */
     colors: ElementColors = if (darkTheme) elementColorsDark() else elementColorsLight(),
+    compoundColors: SemanticColors = if (darkTheme) compoundColorsDark else compoundColorsLight,
     materialLightColors: ColorScheme = materialColorSchemeLight,
     materialDarkColors: ColorScheme = materialColorSchemeDark,
+    typography: Typography = compoundTypography,
     content: @Composable () -> Unit,
 ) {
     val systemUiController = rememberSystemUiController()
     val currentColor = remember(darkTheme) {
         colors.copy()
     }.apply { updateColorsFrom(colors) }
+    val currentCompoundColor = remember(darkTheme) {
+        compoundColors.copy()
+    }.apply { updateColorsFrom(compoundColors) }
     val colorScheme = when {
         dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
             val context = LocalContext.current
@@ -73,10 +112,11 @@ fun ElementTheme(
     }
     CompositionLocalProvider(
         LocalColors provides currentColor,
+        LocalCompoundColors provides currentCompoundColor,
     ) {
         MaterialTheme(
             colorScheme = colorScheme,
-            // TODO typography =
+            typography = typography,
             content = content
         )
     }

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/LegacyColors.kt

@@ -14,11 +14,18 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem
+package io.element.android.libraries.theme
 
 import androidx.compose.ui.graphics.Color
 import com.airbnb.android.showkase.annotation.ShowkaseColor
 
+// =================================================================================================
+// IMPORTANT!
+// We should not be adding any new colors here. This file is only for legacy colors.
+// In fact, we should try to remove any references to these colors as we
+// iterate through the designs. All new colors should come from Compound's Design Tokens.
+// =================================================================================================
+
 @ShowkaseColor(name = "LightGrey", group = "Material Design")
 val LightGrey = Color(0x993C3C43)
 
@@ -69,19 +76,3 @@ val ElementOrange = Color(0xFFD9B072)
 val Vermilion = Color(0xFFFF5B55)
 
 val LinkColor = Color(0xFF0086E6)
-
-// Compound colors
-
-val TextColorCriticalLight = Color(0xFFD51928)
-val TextColorCriticalDark = Color(0xfffd3e3c)
-
-val Compound_Gray_300_Light = Color(0xFFF0F2F5)
-val Compound_Gray_300_Dark = Color(0xFF1D1F24)
-val Compound_Gray_400_Light = Color(0xFFE1E6EC)
-val Compound_Gray_400_Dark = Color(0xFF26282D)
-
-val Compound_Gray_800_Light = Color(0xFF818A95)
-val Compound_Gray_800_Dark = Color(0xFF656C76)
-
-val Compound_Gray_1400_Light = Color(0xFF1B1D22)
-val Compound_Gray_1400_Dark = Color(0xFFEBEEF2)

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/MaterialThemeColors.kt

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.theme
+
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.theme.compound.generated.internal.DarkDesignTokens
+import io.element.android.libraries.theme.compound.generated.internal.LightDesignTokens
+import io.element.android.libraries.theme.previews.ColorsSchemePreview
+
+internal val materialColorSchemeLight = lightColorScheme(
+    primary = LightDesignTokens.colorGray1400,
+    onPrimary = LightDesignTokens.colorThemeBg,
+    primaryContainer = LightDesignTokens.colorThemeBg,
+    onPrimaryContainer = LightDesignTokens.colorGray1400,
+    inversePrimary = LightDesignTokens.colorThemeBg,
+    secondary = LightDesignTokens.colorGray900,
+    onSecondary = LightDesignTokens.colorThemeBg,
+    secondaryContainer = LightDesignTokens.colorGray400,
+    onSecondaryContainer = LightDesignTokens.colorGray1400,
+    tertiary = LightDesignTokens.colorGray900,
+    onTertiary = LightDesignTokens.colorThemeBg,
+    tertiaryContainer = LightDesignTokens.colorGray1400,
+    onTertiaryContainer = LightDesignTokens.colorThemeBg,
+    background = LightDesignTokens.colorThemeBg,
+    onBackground = LightDesignTokens.colorGray1400,
+    surface = LightDesignTokens.colorThemeBg,
+    onSurface = LightDesignTokens.colorGray1400,
+    surfaceVariant = LightDesignTokens.colorGray400,
+    onSurfaceVariant = LightDesignTokens.colorGray1400,
+    surfaceTint = LightDesignTokens.colorGray1000,
+    inverseSurface = LightDesignTokens.colorGray1300,
+    inverseOnSurface = LightDesignTokens.colorThemeBg,
+    error = LightDesignTokens.colorRed900,
+    onError = LightDesignTokens.colorThemeBg,
+    errorContainer = LightDesignTokens.colorRed400,
+    onErrorContainer = LightDesignTokens.colorRed900,
+    outline = LightDesignTokens.colorGray800,
+    outlineVariant = LightDesignTokens.colorAlphaGray400,
+    scrim = LightDesignTokens.colorGray1400,
+)
+
+internal val materialColorSchemeDark = darkColorScheme(
+    primary = DarkDesignTokens.colorGray1400,
+    onPrimary = DarkDesignTokens.colorThemeBg,
+    primaryContainer = DarkDesignTokens.colorThemeBg,
+    onPrimaryContainer = DarkDesignTokens.colorGray1400,
+    inversePrimary = DarkDesignTokens.colorThemeBg,
+    secondary = DarkDesignTokens.colorGray900,
+    onSecondary = DarkDesignTokens.colorThemeBg,
+    secondaryContainer = DarkDesignTokens.colorGray400,
+    onSecondaryContainer = DarkDesignTokens.colorGray1400,
+    tertiary = DarkDesignTokens.colorGray900,
+    onTertiary = DarkDesignTokens.colorThemeBg,
+    tertiaryContainer = DarkDesignTokens.colorGray1400,
+    onTertiaryContainer = DarkDesignTokens.colorThemeBg,
+    background = DarkDesignTokens.colorThemeBg,
+    onBackground = DarkDesignTokens.colorGray1400,
+    surface = DarkDesignTokens.colorThemeBg,
+    onSurface = DarkDesignTokens.colorGray1400,
+    surfaceVariant = DarkDesignTokens.colorGray400,
+    onSurfaceVariant = DarkDesignTokens.colorGray1400,
+    surfaceTint = DarkDesignTokens.colorGray1000,
+    inverseSurface = DarkDesignTokens.colorGray1300,
+    inverseOnSurface = DarkDesignTokens.colorThemeBg,
+    error = DarkDesignTokens.colorRed900,
+    onError = DarkDesignTokens.colorThemeBg,
+    errorContainer = DarkDesignTokens.colorRed400,
+    onErrorContainer = DarkDesignTokens.colorRed900,
+    outline = DarkDesignTokens.colorGray800,
+    outlineVariant = DarkDesignTokens.colorAlphaGray400,
+    scrim = DarkDesignTokens.colorGray300,
+)
+
+@Preview
+@Composable
+fun ColorsSchemePreviewLight() = ColorsSchemePreview(
+    Color.Black,
+    Color.White,
+    materialColorSchemeLight,
+)
+
+@Preview
+@Composable
+fun ColorsSchemePreviewDark() = ColorsSchemePreview(
+    Color.White,
+    Color.Black,
+    materialColorSchemeDark,
+)

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/CompoundColors.kt

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.theme.compound
+
+import io.element.android.libraries.theme.compound.generated.internal.DarkDesignTokens
+import io.element.android.libraries.theme.compound.generated.internal.LightDesignTokens
+import io.element.android.libraries.theme.compound.generated.SemanticColors
+
+internal val compoundColorsLight = SemanticColors(
+    textPrimary = LightDesignTokens.colorGray1400,
+    textSecondary = LightDesignTokens.colorGray900,
+    textPlaceholder = LightDesignTokens.colorGray800,
+    textDisabled = LightDesignTokens.colorGray800,
+    textActionPrimary = LightDesignTokens.colorGray1400,
+    textActionAccent = LightDesignTokens.colorGreen900,
+    textLinkExternal = LightDesignTokens.colorBlue900,
+    textCriticalPrimary = LightDesignTokens.colorRed900,
+    textSuccessPrimary = LightDesignTokens.colorGreen900,
+    textInfoPrimary = LightDesignTokens.colorBlue900,
+    textOnSolidPrimary = LightDesignTokens.colorThemeBg,
+    bgSubtlePrimary = LightDesignTokens.colorGray400,
+    bgSubtleSecondary = LightDesignTokens.colorBgSubtleSecondaryLevel0,
+    bgCanvasDefault = LightDesignTokens.colorBgCanvasDefaultLevel1,
+    bgCanvasDisabled = LightDesignTokens.colorGray200,
+    bgActionPrimaryRest = LightDesignTokens.colorGray1400,
+    bgActionPrimaryHovered = LightDesignTokens.colorGray1200,
+    bgActionPrimaryPressed = LightDesignTokens.colorGray1100,
+    bgActionPrimaryDisabled = LightDesignTokens.colorGray700,
+    bgActionSecondaryRest = LightDesignTokens.colorThemeBg,
+    bgActionSecondaryHovered = LightDesignTokens.colorAlphaGray200,
+    bgActionSecondaryPressed = LightDesignTokens.colorAlphaGray300,
+    bgCriticalPrimary = LightDesignTokens.colorRed900,
+    bgCriticalHovered = LightDesignTokens.colorRed1000,
+    bgCriticalSubtle = LightDesignTokens.colorRed200,
+    bgCriticalSubtleHovered = LightDesignTokens.colorRed300,
+    bgSuccessSubtle = LightDesignTokens.colorGreen200,
+    bgInfoSubtle = LightDesignTokens.colorBlue200,
+    borderDisabled = LightDesignTokens.colorGray500,
+    borderFocused = LightDesignTokens.colorBlue900,
+    borderInteractivePrimary = LightDesignTokens.colorGray800,
+    borderInteractiveSecondary = LightDesignTokens.colorGray600,
+    borderInteractiveHovered = LightDesignTokens.colorGray1100,
+    borderCriticalPrimary = LightDesignTokens.colorRed900,
+    borderCriticalHovered = LightDesignTokens.colorRed1000,
+    borderCriticalSubtle = LightDesignTokens.colorRed500,
+    borderSuccessSubtle = LightDesignTokens.colorGreen500,
+    borderInfoSubtle = LightDesignTokens.colorBlue500,
+    iconPrimary = LightDesignTokens.colorGray1400,
+    iconSecondary = LightDesignTokens.colorGray900,
+    iconTertiary = LightDesignTokens.colorGray800,
+    iconQuaternary = LightDesignTokens.colorGray700,
+    iconDisabled = LightDesignTokens.colorGray700,
+    iconPrimaryAlpha = LightDesignTokens.colorAlphaGray1400,
+    iconSecondaryAlpha = LightDesignTokens.colorAlphaGray900,
+    iconTertiaryAlpha = LightDesignTokens.colorAlphaGray800,
+    iconQuaternaryAlpha = LightDesignTokens.colorAlphaGray700,
+    iconAccentTertiary = LightDesignTokens.colorGreen800,
+    iconCriticalPrimary = LightDesignTokens.colorRed900,
+    iconSuccessPrimary = LightDesignTokens.colorGreen900,
+    iconInfoPrimary = LightDesignTokens.colorBlue900,
+    iconOnSolidPrimary = LightDesignTokens.colorThemeBg,
+    isLight = true,
+)
+
+internal val compoundColorsDark = SemanticColors(
+    textPrimary = DarkDesignTokens.colorGray1400,
+    textSecondary = DarkDesignTokens.colorGray900,
+    textPlaceholder = DarkDesignTokens.colorGray800,
+    textDisabled = DarkDesignTokens.colorGray800,
+    textActionPrimary = DarkDesignTokens.colorGray1400,
+    textActionAccent = DarkDesignTokens.colorGreen900,
+    textLinkExternal = DarkDesignTokens.colorBlue900,
+    textCriticalPrimary = DarkDesignTokens.colorRed900,
+    textSuccessPrimary = DarkDesignTokens.colorGreen900,
+    textInfoPrimary = DarkDesignTokens.colorBlue900,
+    textOnSolidPrimary = DarkDesignTokens.colorThemeBg,
+    bgSubtlePrimary = DarkDesignTokens.colorGray400,
+    bgSubtleSecondary = DarkDesignTokens.colorBgSubtleSecondaryLevel0,
+    bgCanvasDefault = DarkDesignTokens.colorBgCanvasDefaultLevel1,
+    bgCanvasDisabled = DarkDesignTokens.colorGray200,
+    bgActionPrimaryRest = DarkDesignTokens.colorGray1400,
+    bgActionPrimaryHovered = DarkDesignTokens.colorGray1200,
+    bgActionPrimaryPressed = DarkDesignTokens.colorGray1100,
+    bgActionPrimaryDisabled = DarkDesignTokens.colorGray700,
+    bgActionSecondaryRest = DarkDesignTokens.colorThemeBg,
+    bgActionSecondaryHovered = DarkDesignTokens.colorAlphaGray200,
+    bgActionSecondaryPressed = DarkDesignTokens.colorAlphaGray300,
+    bgCriticalPrimary = DarkDesignTokens.colorRed900,
+    bgCriticalHovered = DarkDesignTokens.colorRed1000,
+    bgCriticalSubtle = DarkDesignTokens.colorRed200,
+    bgCriticalSubtleHovered = DarkDesignTokens.colorRed300,
+    bgSuccessSubtle = DarkDesignTokens.colorGreen200,
+    bgInfoSubtle = DarkDesignTokens.colorBlue200,
+    borderDisabled = DarkDesignTokens.colorGray500,
+    borderFocused = DarkDesignTokens.colorBlue900,
+    borderInteractivePrimary = DarkDesignTokens.colorGray800,
+    borderInteractiveSecondary = DarkDesignTokens.colorGray600,
+    borderInteractiveHovered = DarkDesignTokens.colorGray1100,
+    borderCriticalPrimary = DarkDesignTokens.colorRed900,
+    borderCriticalHovered = DarkDesignTokens.colorRed1000,
+    borderCriticalSubtle = DarkDesignTokens.colorRed500,
+    borderSuccessSubtle = DarkDesignTokens.colorGreen500,
+    borderInfoSubtle = DarkDesignTokens.colorBlue500,
+    iconPrimary = DarkDesignTokens.colorGray1400,
+    iconSecondary = DarkDesignTokens.colorGray900,
+    iconTertiary = DarkDesignTokens.colorGray800,
+    iconQuaternary = DarkDesignTokens.colorGray700,
+    iconDisabled = DarkDesignTokens.colorGray700,
+    iconPrimaryAlpha = DarkDesignTokens.colorAlphaGray1400,
+    iconSecondaryAlpha = DarkDesignTokens.colorAlphaGray900,
+    iconTertiaryAlpha = DarkDesignTokens.colorAlphaGray800,
+    iconQuaternaryAlpha = DarkDesignTokens.colorAlphaGray700,
+    iconAccentTertiary = DarkDesignTokens.colorGreen800,
+    iconCriticalPrimary = DarkDesignTokens.colorRed900,
+    iconSuccessPrimary = DarkDesignTokens.colorGreen900,
+    iconInfoPrimary = DarkDesignTokens.colorBlue900,
+    iconOnSolidPrimary = DarkDesignTokens.colorThemeBg,
+    isLight = false,
+)

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/CompoundTypography.kt

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.theme.compound
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+import io.element.android.libraries.theme.compound.generated.TypographyTokens
+import com.airbnb.android.showkase.annotation.ShowkaseTypography
+
+// 32px (Material) vs 34px, it's the closest one
+@ShowkaseTypography(name = "M3 Headline Large", group = "Compound")
+internal val compoundHeadingXlRegular = TypographyTokens.fontHeadingXlRegular
+
+// both are 28px
+@ShowkaseTypography(name = "M3 Headline Medium", group = "Compound")
+internal val compoundHeadingLgRegular = TypographyTokens.fontHeadingLgRegular
+
+// These are the default M3 values, but we're setting them manually so an update in M3 doesn't break our designs
+@ShowkaseTypography(name = "M3 Headline Small", group = "Compound")
+internal val defaultHeadlineSmall = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    lineHeight = 32.sp,
+    fontSize = 24.sp,
+    letterSpacing = 0.em,
+)
+
+// 22px (Material) vs 20px, it's the closest one
+@ShowkaseTypography(name = "M3 Title Large", group = "Compound")
+internal val compoundHeadingMdRegular = TypographyTokens.fontHeadingMdRegular
+
+// 16px both
+@ShowkaseTypography(name = "M3 Title Medium", group = "Compound")
+internal val compoundBodyLgMedium = TypographyTokens.fontBodyLgMedium
+
+// 14px both
+@ShowkaseTypography(name = "M3 Title Small", group = "Compound")
+internal val compoundBodyMdMedium = TypographyTokens.fontBodyMdMedium
+
+// 16px both
+@ShowkaseTypography(name = "M3 Body Large", group = "Compound")
+internal val compoundBodyLgRegular = TypographyTokens.fontBodyLgRegular
+
+// 14px both
+@ShowkaseTypography(name = "M3 Body Medium", group = "Compound")
+internal val compoundBodyMdRegular = TypographyTokens.fontBodyMdRegular
+
+// 12px both
+@ShowkaseTypography(name = "M3 Body Small", group = "Compound")
+internal val compoundBodySmRegular = TypographyTokens.fontBodySmRegular
+
+// 14px both, Title Small uses the same token so we have to declare it twice
+@ShowkaseTypography(name = "M3 Label Large", group = "Compound")
+internal val compoundBodyMdMedium_LabelLarge = TypographyTokens.fontBodyMdMedium
+
+// 12px both
+@ShowkaseTypography(name = "M3 Label Medium", group = "Compound")
+internal val compoundBodySmMedium = TypographyTokens.fontBodySmMedium
+
+// 11px both
+@ShowkaseTypography(name = "M3 Label Small", group = "Compound")
+internal val compoundBodyXsMedium = TypographyTokens.fontBodyXsMedium
+
+internal val compoundTypography = Typography(
+    // displayLarge = , 57px (Material) size. We have no equivalent
+    // displayMedium = , 45px (Material) size. We have no equivalent
+    // displaySmall = , 36px (Material) size. We have no equivalent
+    headlineLarge = compoundHeadingXlRegular,
+    headlineMedium = compoundHeadingLgRegular,
+    headlineSmall = defaultHeadlineSmall,
+    titleLarge = compoundHeadingMdRegular,
+    titleMedium = compoundBodyLgMedium,
+    titleSmall = compoundBodyMdMedium,
+    bodyLarge = compoundBodyLgRegular,
+    bodyMedium = compoundBodyMdRegular,
+    bodySmall = compoundBodySmRegular,
+    labelLarge = compoundBodyMdMedium_LabelLarge,
+    labelMedium = compoundBodySmMedium,
+    labelSmall = compoundBodyXsMedium,
+)

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/DO_NOT_MODIFY.txt

@@ -0,0 +1 @@
+Files inside this package are generated automatically from the Compound project (https://github.com/vector-im/compound-design-tokens) and will be batch-replaced when new tokens are generated.

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/SemanticColors.kt

@@ -0,0 +1,421 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:Suppress("all")
+package io.element.android.libraries.theme.compound.generated
+
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.Color
+
+
+
+// Do not edit directly
+// Generated on Tue, 27 Jun 2023 11:49:05 GMT
+
+
+
+
+
+/**
+  * This class holds all the semantic tokens of the Compound theme.
+  */
+@Stable
+class SemanticColors(
+    bgActionPrimaryDisabled: Color,
+    bgActionPrimaryHovered: Color,
+    bgActionPrimaryPressed: Color,
+    bgActionPrimaryRest: Color,
+    bgActionSecondaryHovered: Color,
+    bgActionSecondaryPressed: Color,
+    bgActionSecondaryRest: Color,
+    bgCanvasDefault: Color,
+    bgCanvasDisabled: Color,
+    bgCriticalHovered: Color,
+    bgCriticalPrimary: Color,
+    bgCriticalSubtle: Color,
+    bgCriticalSubtleHovered: Color,
+    bgInfoSubtle: Color,
+    bgSubtlePrimary: Color,
+    bgSubtleSecondary: Color,
+    bgSuccessSubtle: Color,
+    borderCriticalHovered: Color,
+    borderCriticalPrimary: Color,
+    borderCriticalSubtle: Color,
+    borderDisabled: Color,
+    borderFocused: Color,
+    borderInfoSubtle: Color,
+    borderInteractiveHovered: Color,
+    borderInteractivePrimary: Color,
+    borderInteractiveSecondary: Color,
+    borderSuccessSubtle: Color,
+    iconAccentTertiary: Color,
+    iconCriticalPrimary: Color,
+    iconDisabled: Color,
+    iconInfoPrimary: Color,
+    iconOnSolidPrimary: Color,
+    iconPrimary: Color,
+    iconPrimaryAlpha: Color,
+    iconQuaternary: Color,
+    iconQuaternaryAlpha: Color,
+    iconSecondary: Color,
+    iconSecondaryAlpha: Color,
+    iconSuccessPrimary: Color,
+    iconTertiary: Color,
+    iconTertiaryAlpha: Color,
+    textActionAccent: Color,
+    textActionPrimary: Color,
+    textCriticalPrimary: Color,
+    textDisabled: Color,
+    textInfoPrimary: Color,
+    textLinkExternal: Color,
+    textOnSolidPrimary: Color,
+    textPlaceholder: Color,
+    textPrimary: Color,
+    textSecondary: Color,
+    textSuccessPrimary: Color,
+    isLight: Boolean,
+) {
+    var isLight by mutableStateOf(isLight)
+        private set
+    /** Background colour for primary actions. State: Disabled. */
+    var bgActionPrimaryDisabled by mutableStateOf(bgActionPrimaryDisabled)
+        private set
+    /** Background colour for primary actions. State: Hover. */
+    var bgActionPrimaryHovered by mutableStateOf(bgActionPrimaryHovered)
+        private set
+    /** Background colour for primary actions. State: Pressed. */
+    var bgActionPrimaryPressed by mutableStateOf(bgActionPrimaryPressed)
+        private set
+    /** Background colour for primary actions. State: Rest. */
+    var bgActionPrimaryRest by mutableStateOf(bgActionPrimaryRest)
+        private set
+    /** Background colour for secondary actions. State: Hover. */
+    var bgActionSecondaryHovered by mutableStateOf(bgActionSecondaryHovered)
+        private set
+    /** Background colour for secondary actions. State: Pressed. */
+    var bgActionSecondaryPressed by mutableStateOf(bgActionSecondaryPressed)
+        private set
+    /** Background colour for secondary actions. State: Rest. */
+    var bgActionSecondaryRest by mutableStateOf(bgActionSecondaryRest)
+        private set
+    /** Default global background for the user interface.
+Elevation: Default (Level 0) */
+    var bgCanvasDefault by mutableStateOf(bgCanvasDefault)
+        private set
+    /** Default background for disabled elements. There's no minimum contrast requirement. */
+    var bgCanvasDisabled by mutableStateOf(bgCanvasDisabled)
+        private set
+    /** High-contrast background color for critical state. State: Hover. */
+    var bgCriticalHovered by mutableStateOf(bgCriticalHovered)
+        private set
+    /** High-contrast background color for critical state. State: Rest. */
+    var bgCriticalPrimary by mutableStateOf(bgCriticalPrimary)
+        private set
+    /** Default subtle critical surfaces. State: Rest. */
+    var bgCriticalSubtle by mutableStateOf(bgCriticalSubtle)
+        private set
+    /** Default subtle critical surfaces. State: Hover. */
+    var bgCriticalSubtleHovered by mutableStateOf(bgCriticalSubtleHovered)
+        private set
+    /** Subtle background colour for informational elements. State: Rest. */
+    var bgInfoSubtle by mutableStateOf(bgInfoSubtle)
+        private set
+    /** Medium contrast surfaces.
+Elevation: Default (Level 2). */
+    var bgSubtlePrimary by mutableStateOf(bgSubtlePrimary)
+        private set
+    /** Low contrast surfaces.
+Elevation: Default (Level 1). */
+    var bgSubtleSecondary by mutableStateOf(bgSubtleSecondary)
+        private set
+    /** Subtle background colour for success state elements. State: Rest. */
+    var bgSuccessSubtle by mutableStateOf(bgSuccessSubtle)
+        private set
+    /** High-contrast border for critical state. State: Hover. */
+    var borderCriticalHovered by mutableStateOf(borderCriticalHovered)
+        private set
+    /** High-contrast border for critical state. State: Rest. */
+    var borderCriticalPrimary by mutableStateOf(borderCriticalPrimary)
+        private set
+    /** Subtle border colour for critical state elements. */
+    var borderCriticalSubtle by mutableStateOf(borderCriticalSubtle)
+        private set
+    /** Used for borders of disabled elements. There's no minimum contrast requirement. */
+    var borderDisabled by mutableStateOf(borderDisabled)
+        private set
+    /** Used for the focus state outline. */
+    var borderFocused by mutableStateOf(borderFocused)
+        private set
+    /** Subtle border colour for informational elements. */
+    var borderInfoSubtle by mutableStateOf(borderInfoSubtle)
+        private set
+    /** Default contrast for accessible interactive element borders. State: Hover. */
+    var borderInteractiveHovered by mutableStateOf(borderInteractiveHovered)
+        private set
+    /** Default contrast for accessible interactive element borders. State: Rest. */
+    var borderInteractivePrimary by mutableStateOf(borderInteractivePrimary)
+        private set
+    /** ⚠️ Lowest contrast for non-accessible interactive element borders, <3:1. Only use for non-essential borders. Do not rely exclusively on them. State: Rest. */
+    var borderInteractiveSecondary by mutableStateOf(borderInteractiveSecondary)
+        private set
+    /** Subtle border colour for success state elements. */
+    var borderSuccessSubtle by mutableStateOf(borderSuccessSubtle)
+        private set
+    /** Lowest contrast accessible accent icons. */
+    var iconAccentTertiary by mutableStateOf(iconAccentTertiary)
+        private set
+    /** High-contrast icon for critical state. State: Rest. */
+    var iconCriticalPrimary by mutableStateOf(iconCriticalPrimary)
+        private set
+    /** Use for icons in disabled elements. There's no minimum contrast requirement. */
+    var iconDisabled by mutableStateOf(iconDisabled)
+        private set
+    /** High-contrast icon for informational elements. */
+    var iconInfoPrimary by mutableStateOf(iconInfoPrimary)
+        private set
+    /** Highest contrast icon color on top of high-contrast solid backgrounds like primary, accent, or destructive actions. */
+    var iconOnSolidPrimary by mutableStateOf(iconOnSolidPrimary)
+        private set
+    /** Highest contrast icons. */
+    var iconPrimary by mutableStateOf(iconPrimary)
+        private set
+    /** Translucent version of primary icon. Refer to it for intended use. */
+    var iconPrimaryAlpha by mutableStateOf(iconPrimaryAlpha)
+        private set
+    /** ⚠️ Lowest contrast non-accessible icons, <3:1. Only use for non-essential icons. Do not rely exclusively on them. */
+    var iconQuaternary by mutableStateOf(iconQuaternary)
+        private set
+    /** Translucent version of quaternary icon. Refer to it for intended use. */
+    var iconQuaternaryAlpha by mutableStateOf(iconQuaternaryAlpha)
+        private set
+    /** Lower contrast icons. */
+    var iconSecondary by mutableStateOf(iconSecondary)
+        private set
+    /** Translucent version of secondary icon. Refer to it for intended use. */
+    var iconSecondaryAlpha by mutableStateOf(iconSecondaryAlpha)
+        private set
+    /** High-contrast icon for success state elements. */
+    var iconSuccessPrimary by mutableStateOf(iconSuccessPrimary)
+        private set
+    /** Lowest contrast accessible icons. */
+    var iconTertiary by mutableStateOf(iconTertiary)
+        private set
+    /** Translucent version of tertiary icon. Refer to it for intended use. */
+    var iconTertiaryAlpha by mutableStateOf(iconTertiaryAlpha)
+        private set
+    /** Accent text colour for plain actions. */
+    var textActionAccent by mutableStateOf(textActionAccent)
+        private set
+    /** Default text colour for plain actions. */
+    var textActionPrimary by mutableStateOf(textActionPrimary)
+        private set
+    /** Text colour for destructive plain actions. */
+    var textCriticalPrimary by mutableStateOf(textCriticalPrimary)
+        private set
+    /** Use for regular text in disabled elements. There's no minimum contrast requirement. */
+    var textDisabled by mutableStateOf(textDisabled)
+        private set
+    /** Accent text colour for informational elements. */
+    var textInfoPrimary by mutableStateOf(textInfoPrimary)
+        private set
+    /** Text colour for external links. */
+    var textLinkExternal by mutableStateOf(textLinkExternal)
+        private set
+    /** For use as text color on top of high-contrast solid backgrounds like primary, accent, or destructive actions. */
+    var textOnSolidPrimary by mutableStateOf(textOnSolidPrimary)
+        private set
+    /** Use for placeholder text. Placeholder text should be non-essential. Do not rely exclusively on it. */
+    var textPlaceholder by mutableStateOf(textPlaceholder)
+        private set
+    /** Highest contrast text. */
+    var textPrimary by mutableStateOf(textPrimary)
+        private set
+    /** Lowest contrast text. */
+    var textSecondary by mutableStateOf(textSecondary)
+        private set
+    /** Accent text colour for success state elements. */
+    var textSuccessPrimary by mutableStateOf(textSuccessPrimary)
+        private set
+
+    fun copy(
+        bgActionPrimaryDisabled: Color = this.bgActionPrimaryDisabled,
+        bgActionPrimaryHovered: Color = this.bgActionPrimaryHovered,
+        bgActionPrimaryPressed: Color = this.bgActionPrimaryPressed,
+        bgActionPrimaryRest: Color = this.bgActionPrimaryRest,
+        bgActionSecondaryHovered: Color = this.bgActionSecondaryHovered,
+        bgActionSecondaryPressed: Color = this.bgActionSecondaryPressed,
+        bgActionSecondaryRest: Color = this.bgActionSecondaryRest,
+        bgCanvasDefault: Color = this.bgCanvasDefault,
+        bgCanvasDisabled: Color = this.bgCanvasDisabled,
+        bgCriticalHovered: Color = this.bgCriticalHovered,
+        bgCriticalPrimary: Color = this.bgCriticalPrimary,
+        bgCriticalSubtle: Color = this.bgCriticalSubtle,
+        bgCriticalSubtleHovered: Color = this.bgCriticalSubtleHovered,
+        bgInfoSubtle: Color = this.bgInfoSubtle,
+        bgSubtlePrimary: Color = this.bgSubtlePrimary,
+        bgSubtleSecondary: Color = this.bgSubtleSecondary,
+        bgSuccessSubtle: Color = this.bgSuccessSubtle,
+        borderCriticalHovered: Color = this.borderCriticalHovered,
+        borderCriticalPrimary: Color = this.borderCriticalPrimary,
+        borderCriticalSubtle: Color = this.borderCriticalSubtle,
+        borderDisabled: Color = this.borderDisabled,
+        borderFocused: Color = this.borderFocused,
+        borderInfoSubtle: Color = this.borderInfoSubtle,
+        borderInteractiveHovered: Color = this.borderInteractiveHovered,
+        borderInteractivePrimary: Color = this.borderInteractivePrimary,
+        borderInteractiveSecondary: Color = this.borderInteractiveSecondary,
+        borderSuccessSubtle: Color = this.borderSuccessSubtle,
+        iconAccentTertiary: Color = this.iconAccentTertiary,
+        iconCriticalPrimary: Color = this.iconCriticalPrimary,
+        iconDisabled: Color = this.iconDisabled,
+        iconInfoPrimary: Color = this.iconInfoPrimary,
+        iconOnSolidPrimary: Color = this.iconOnSolidPrimary,
+        iconPrimary: Color = this.iconPrimary,
+        iconPrimaryAlpha: Color = this.iconPrimaryAlpha,
+        iconQuaternary: Color = this.iconQuaternary,
+        iconQuaternaryAlpha: Color = this.iconQuaternaryAlpha,
+        iconSecondary: Color = this.iconSecondary,
+        iconSecondaryAlpha: Color = this.iconSecondaryAlpha,
+        iconSuccessPrimary: Color = this.iconSuccessPrimary,
+        iconTertiary: Color = this.iconTertiary,
+        iconTertiaryAlpha: Color = this.iconTertiaryAlpha,
+        textActionAccent: Color = this.textActionAccent,
+        textActionPrimary: Color = this.textActionPrimary,
+        textCriticalPrimary: Color = this.textCriticalPrimary,
+        textDisabled: Color = this.textDisabled,
+        textInfoPrimary: Color = this.textInfoPrimary,
+        textLinkExternal: Color = this.textLinkExternal,
+        textOnSolidPrimary: Color = this.textOnSolidPrimary,
+        textPlaceholder: Color = this.textPlaceholder,
+        textPrimary: Color = this.textPrimary,
+        textSecondary: Color = this.textSecondary,
+        textSuccessPrimary: Color = this.textSuccessPrimary,
+        isLight: Boolean = this.isLight,
+    ) = SemanticColors(
+        bgActionPrimaryDisabled = bgActionPrimaryDisabled,
+        bgActionPrimaryHovered = bgActionPrimaryHovered,
+        bgActionPrimaryPressed = bgActionPrimaryPressed,
+        bgActionPrimaryRest = bgActionPrimaryRest,
+        bgActionSecondaryHovered = bgActionSecondaryHovered,
+        bgActionSecondaryPressed = bgActionSecondaryPressed,
+        bgActionSecondaryRest = bgActionSecondaryRest,
+        bgCanvasDefault = bgCanvasDefault,
+        bgCanvasDisabled = bgCanvasDisabled,
+        bgCriticalHovered = bgCriticalHovered,
+        bgCriticalPrimary = bgCriticalPrimary,
+        bgCriticalSubtle = bgCriticalSubtle,
+        bgCriticalSubtleHovered = bgCriticalSubtleHovered,
+        bgInfoSubtle = bgInfoSubtle,
+        bgSubtlePrimary = bgSubtlePrimary,
+        bgSubtleSecondary = bgSubtleSecondary,
+        bgSuccessSubtle = bgSuccessSubtle,
+        borderCriticalHovered = borderCriticalHovered,
+        borderCriticalPrimary = borderCriticalPrimary,
+        borderCriticalSubtle = borderCriticalSubtle,
+        borderDisabled = borderDisabled,
+        borderFocused = borderFocused,
+        borderInfoSubtle = borderInfoSubtle,
+        borderInteractiveHovered = borderInteractiveHovered,
+        borderInteractivePrimary = borderInteractivePrimary,
+        borderInteractiveSecondary = borderInteractiveSecondary,
+        borderSuccessSubtle = borderSuccessSubtle,
+        iconAccentTertiary = iconAccentTertiary,
+        iconCriticalPrimary = iconCriticalPrimary,
+        iconDisabled = iconDisabled,
+        iconInfoPrimary = iconInfoPrimary,
+        iconOnSolidPrimary = iconOnSolidPrimary,
+        iconPrimary = iconPrimary,
+        iconPrimaryAlpha = iconPrimaryAlpha,
+        iconQuaternary = iconQuaternary,
+        iconQuaternaryAlpha = iconQuaternaryAlpha,
+        iconSecondary = iconSecondary,
+        iconSecondaryAlpha = iconSecondaryAlpha,
+        iconSuccessPrimary = iconSuccessPrimary,
+        iconTertiary = iconTertiary,
+        iconTertiaryAlpha = iconTertiaryAlpha,
+        textActionAccent = textActionAccent,
+        textActionPrimary = textActionPrimary,
+        textCriticalPrimary = textCriticalPrimary,
+        textDisabled = textDisabled,
+        textInfoPrimary = textInfoPrimary,
+        textLinkExternal = textLinkExternal,
+        textOnSolidPrimary = textOnSolidPrimary,
+        textPlaceholder = textPlaceholder,
+        textPrimary = textPrimary,
+        textSecondary = textSecondary,
+        textSuccessPrimary = textSuccessPrimary,
+        isLight = isLight,
+    )
+
+    fun updateColorsFrom(other: SemanticColors) {
+        bgActionPrimaryDisabled = other.bgActionPrimaryDisabled
+        bgActionPrimaryHovered = other.bgActionPrimaryHovered
+        bgActionPrimaryPressed = other.bgActionPrimaryPressed
+        bgActionPrimaryRest = other.bgActionPrimaryRest
+        bgActionSecondaryHovered = other.bgActionSecondaryHovered
+        bgActionSecondaryPressed = other.bgActionSecondaryPressed
+        bgActionSecondaryRest = other.bgActionSecondaryRest
+        bgCanvasDefault = other.bgCanvasDefault
+        bgCanvasDisabled = other.bgCanvasDisabled
+        bgCriticalHovered = other.bgCriticalHovered
+        bgCriticalPrimary = other.bgCriticalPrimary
+        bgCriticalSubtle = other.bgCriticalSubtle
+        bgCriticalSubtleHovered = other.bgCriticalSubtleHovered
+        bgInfoSubtle = other.bgInfoSubtle
+        bgSubtlePrimary = other.bgSubtlePrimary
+        bgSubtleSecondary = other.bgSubtleSecondary
+        bgSuccessSubtle = other.bgSuccessSubtle
+        borderCriticalHovered = other.borderCriticalHovered
+        borderCriticalPrimary = other.borderCriticalPrimary
+        borderCriticalSubtle = other.borderCriticalSubtle
+        borderDisabled = other.borderDisabled
+        borderFocused = other.borderFocused
+        borderInfoSubtle = other.borderInfoSubtle
+        borderInteractiveHovered = other.borderInteractiveHovered
+        borderInteractivePrimary = other.borderInteractivePrimary
+        borderInteractiveSecondary = other.borderInteractiveSecondary
+        borderSuccessSubtle = other.borderSuccessSubtle
+        iconAccentTertiary = other.iconAccentTertiary
+        iconCriticalPrimary = other.iconCriticalPrimary
+        iconDisabled = other.iconDisabled
+        iconInfoPrimary = other.iconInfoPrimary
+        iconOnSolidPrimary = other.iconOnSolidPrimary
+        iconPrimary = other.iconPrimary
+        iconPrimaryAlpha = other.iconPrimaryAlpha
+        iconQuaternary = other.iconQuaternary
+        iconQuaternaryAlpha = other.iconQuaternaryAlpha
+        iconSecondary = other.iconSecondary
+        iconSecondaryAlpha = other.iconSecondaryAlpha
+        iconSuccessPrimary = other.iconSuccessPrimary
+        iconTertiary = other.iconTertiary
+        iconTertiaryAlpha = other.iconTertiaryAlpha
+        textActionAccent = other.textActionAccent
+        textActionPrimary = other.textActionPrimary
+        textCriticalPrimary = other.textCriticalPrimary
+        textDisabled = other.textDisabled
+        textInfoPrimary = other.textInfoPrimary
+        textLinkExternal = other.textLinkExternal
+        textOnSolidPrimary = other.textOnSolidPrimary
+        textPlaceholder = other.textPlaceholder
+        textPrimary = other.textPrimary
+        textSecondary = other.textSecondary
+        textSuccessPrimary = other.textSuccessPrimary
+        isLight = other.isLight
+    }
+}

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/TypographyTokens.kt

@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Do not edit directly
+// Generated on Tue, 27 Jun 2023 13:31:52 GMT
+
+
+
+@file:Suppress("all")
+package io.element.android.libraries.theme.compound.generated
+
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+
+object TypographyTokens {
+    val fontBodyLgMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        lineHeight = 22.sp,
+        fontSize = 16.sp,
+        letterSpacing = 0.015629999999999998.em,
+    )
+    val fontBodyLgRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 22.sp,
+        fontSize = 16.sp,
+        letterSpacing = 0.015629999999999998.em,
+    )
+    val fontBodyMdMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        lineHeight = 20.sp,
+        fontSize = 14.sp,
+        letterSpacing = 0.01786.em,
+    )
+    val fontBodyMdRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 20.sp,
+        fontSize = 14.sp,
+        letterSpacing = 0.01786.em,
+    )
+    val fontBodySmMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        lineHeight = 17.sp,
+        fontSize = 12.sp,
+        letterSpacing = 0.03333.em,
+    )
+    val fontBodySmRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 17.sp,
+        fontSize = 12.sp,
+        letterSpacing = 0.03333.em,
+    )
+    val fontBodyXsMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        lineHeight = 15.sp,
+        fontSize = 11.sp,
+        letterSpacing = 0.04545.em,
+    )
+    val fontBodyXsRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 15.sp,
+        fontSize = 11.sp,
+        letterSpacing = 0.04545.em,
+    )
+    val fontHeadingLgBold = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W700,
+        lineHeight = 34.sp,
+        fontSize = 28.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingLgRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 34.sp,
+        fontSize = 28.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingMdBold = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W700,
+        lineHeight = 27.sp,
+        fontSize = 22.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingMdRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 27.sp,
+        fontSize = 22.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingSmMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        lineHeight = 25.sp,
+        fontSize = 20.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingSmRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 25.sp,
+        fontSize = 20.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingXlBold = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W700,
+        lineHeight = 41.sp,
+        fontSize = 34.sp,
+        letterSpacing = 0.em,
+    )
+    val fontHeadingXlRegular = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W400,
+        lineHeight = 41.sp,
+        fontSize = 34.sp,
+        letterSpacing = 0.em,
+    )
+}

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/internal/DarkDesignTokens.kt

@@ -0,0 +1,335 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@file:Suppress("all")
+package io.element.android.libraries.theme.compound.generated.internal
+
+import androidx.compose.ui.graphics.Color
+
+internal object DarkDesignTokens {
+  val colorAlphaPink1400 = Color(0xffffebef)
+  val colorAlphaPink1300 = Color(0xffffd1db)
+  val colorAlphaPink1200 = Color(0xffffadc0)
+  val colorAlphaPink1100 = Color(0xfffe86a4)
+  val colorAlphaPink1000 = Color(0xfaff6691)
+  val colorAlphaPink900 = Color(0xf5fe4382)
+  val colorAlphaPink800 = Color(0xccfe1b79)
+  val colorAlphaPink700 = Color(0x94fd1277)
+  val colorAlphaPink600 = Color(0x75fb0473)
+  val colorAlphaPink500 = Color(0xff6b0036)
+  val colorAlphaPink400 = Color(0xff570024)
+  val colorAlphaPink300 = Color(0xff470019)
+  val colorAlphaPink200 = Color(0xff3d0012)
+  val colorAlphaPink100 = Color(0xff38000f)
+  val colorAlphaFuchsia1400 = Color(0xfafdecfe)
+  val colorAlphaFuchsia1300 = Color(0xf2fde0ff)
+  val colorAlphaFuchsia1200 = Color(0xe8fac3fe)
+  val colorAlphaFuchsia1100 = Color(0xdbfaa4fe)
+  val colorAlphaFuchsia1000 = Color(0xd4f790fe)
+  val colorAlphaFuchsia900 = Color(0xccf172fd)
+  val colorAlphaFuchsia800 = Color(0xb5eb44fd)
+  val colorAlphaFuchsia700 = Color(0x8ad82ffe)
+  val colorAlphaFuchsia600 = Color(0x70d21fff)
+  val colorAlphaFuchsia500 = Color(0x61ca0aff)
+  val colorAlphaFuchsia400 = Color(0xff45005c)
+  val colorAlphaFuchsia300 = Color(0xff36004d)
+  val colorAlphaFuchsia200 = Color(0xff2d0042)
+  val colorAlphaFuchsia100 = Color(0xff28003d)
+  val colorAlphaPurple1400 = Color(0xffeeebff)
+  val colorAlphaPurple1300 = Color(0xffdfdbff)
+  val colorAlphaPurple1200 = Color(0xffc7bdff)
+  val colorAlphaPurple1100 = Color(0xffab9afe)
+  val colorAlphaPurple1000 = Color(0xfca28bfe)
+  val colorAlphaPurple900 = Color(0xfa9271fe)
+  val colorAlphaPurple800 = Color(0xeb7f4dff)
+  val colorAlphaPurple700 = Color(0xc2712bfd)
+  val colorAlphaPurple600 = Color(0xab690dfd)
+  val colorAlphaPurple500 = Color(0xff3d009e)
+  val colorAlphaPurple400 = Color(0xff2d0080)
+  val colorAlphaPurple300 = Color(0xff22006b)
+  val colorAlphaPurple200 = Color(0xff1d005c)
+  val colorAlphaPurple100 = Color(0xff1a0057)
+  val colorAlphaBlue1400 = Color(0xffe6effe)
+  val colorAlphaBlue1300 = Color(0xfccde1fe)
+  val colorAlphaBlue1200 = Color(0xf7a3c8ff)
+  val colorAlphaBlue1100 = Color(0xf57cb2fd)
+  val colorAlphaBlue1000 = Color(0xf062a0fe)
+  val colorAlphaBlue900 = Color(0xeb4491fd)
+  val colorAlphaBlue800 = Color(0xd61077fe)
+  val colorAlphaBlue700 = Color(0xa30665fe)
+  val colorAlphaBlue600 = Color(0x87015afe)
+  val colorAlphaBlue500 = Color(0xa1003cbd)
+  val colorAlphaBlue400 = Color(0xff001e70)
+  val colorAlphaBlue300 = Color(0xff001366)
+  val colorAlphaBlue200 = Color(0xff00095c)
+  val colorAlphaBlue100 = Color(0xff00055c)
+  val colorAlphaCyan1400 = Color(0xf5e1fbfe)
+  val colorAlphaCyan1300 = Color(0xebc9f7fd)
+  val colorAlphaCyan1200 = Color(0xd98af1ff)
+  val colorAlphaCyan1100 = Color(0xc926e7fd)
+  val colorAlphaCyan1000 = Color(0xe000bfe0)
+  val colorAlphaCyan900 = Color(0xff0091bd)
+  val colorAlphaCyan800 = Color(0xe0007ebd)
+  val colorAlphaCyan700 = Color(0xff00538a)
+  val colorAlphaCyan600 = Color(0xff003f75)
+  val colorAlphaCyan500 = Color(0xff003366)
+  val colorAlphaCyan400 = Color(0xff00265c)
+  val colorAlphaCyan300 = Color(0xff001b4d)
+  val colorAlphaCyan200 = Color(0xff001447)
+  val colorAlphaCyan100 = Color(0xff001142)
+  val colorAlphaGreen1400 = Color(0xf5e2fdf1)
+  val colorAlphaGreen1300 = Color(0xe8c4fde2)
+  val colorAlphaGreen1200 = Color(0xd486fdce)
+  val colorAlphaGreen1100 = Color(0xbd26fdbc)
+  val colorAlphaGreen1000 = Color(0xa61bfebd)
+  val colorAlphaGreen900 = Color(0x9412fdbe)
+  val colorAlphaGreen800 = Color(0xff007a62)
+  val colorAlphaGreen700 = Color(0xff005c45)
+  val colorAlphaGreen600 = Color(0xff004732)
+  val colorAlphaGreen500 = Color(0xff003d29)
+  val colorAlphaGreen400 = Color(0xff002e1b)
+  val colorAlphaGreen300 = Color(0xff002412)
+  val colorAlphaGreen200 = Color(0xff001f0e)
+  val colorAlphaGreen100 = Color(0xff001f0c)
+  val colorAlphaLime1400 = Color(0xf7e1fdd8)
+  val colorAlphaLime1300 = Color(0xebc3ffad)
+  val colorAlphaLime1200 = Color(0xd68dff5c)
+  val colorAlphaLime1100 = Color(0xbd71fd35)
+  val colorAlphaLime1000 = Color(0xa860fc2c)
+  val colorAlphaLime900 = Color(0x9454fd26)
+  val colorAlphaLime800 = Color(0x732dfd0d)
+  val colorAlphaLime700 = Color(0xff005c00)
+  val colorAlphaLime600 = Color(0xff004d00)
+  val colorAlphaLime500 = Color(0xff003d00)
+  val colorAlphaLime400 = Color(0xff002e00)
+  val colorAlphaLime300 = Color(0xff002900)
+  val colorAlphaLime200 = Color(0xff001f00)
+  val colorAlphaLime100 = Color(0xff001a00)
+  val colorAlphaYellow1400 = Color(0xffffedb3)
+  val colorAlphaYellow1300 = Color(0xfffeda58)
+  val colorAlphaYellow1200 = Color(0xf0fdc50d)
+  val colorAlphaYellow1100 = Color(0xffdba100)
+  val colorAlphaYellow1000 = Color(0xffcc8b00)
+  val colorAlphaYellow900 = Color(0xffbd7b00)
+  val colorAlphaYellow800 = Color(0xff9e5c00)
+  val colorAlphaYellow700 = Color(0xeb854200)
+  val colorAlphaYellow600 = Color(0xde753300)
+  val colorAlphaYellow500 = Color(0xff5c2300)
+  val colorAlphaYellow400 = Color(0xff4d1400)
+  val colorAlphaYellow300 = Color(0xff420900)
+  val colorAlphaYellow200 = Color(0xff380300)
+  val colorAlphaYellow100 = Color(0xff380000)
+  val colorAlphaOrange1400 = Color(0xffffeadb)
+  val colorAlphaOrange1300 = Color(0xffffd4b8)
+  val colorAlphaOrange1200 = Color(0xfcfdb781)
+  val colorAlphaOrange1100 = Color(0xf7fd953f)
+  val colorAlphaOrange1000 = Color(0xebfe8310)
+  val colorAlphaOrange900 = Color(0xd9fe740b)
+  val colorAlphaOrange800 = Color(0xb5ff5900)
+  val colorAlphaOrange700 = Color(0xbdc72800)
+  val colorAlphaOrange600 = Color(0xff850400)
+  val colorAlphaOrange500 = Color(0xff700000)
+  val colorAlphaOrange400 = Color(0xff570000)
+  val colorAlphaOrange300 = Color(0xff470000)
+  val colorAlphaOrange200 = Color(0xff3d0000)
+  val colorAlphaOrange100 = Color(0xff380000)
+  val colorAlphaRed1400 = Color(0xffffe8e5)
+  val colorAlphaRed1300 = Color(0xffffd3cc)
+  val colorAlphaRed1200 = Color(0xffffaea3)
+  val colorAlphaRed1100 = Color(0xffff857a)
+  val colorAlphaRed1000 = Color(0xffff645c)
+  val colorAlphaRed900 = Color(0xfffd3d3a)
+  val colorAlphaRed800 = Color(0xcffe2530)
+  val colorAlphaRed700 = Color(0x99fe0b24)
+  val colorAlphaRed600 = Color(0xff850009)
+  val colorAlphaRed500 = Color(0xff700000)
+  val colorAlphaRed400 = Color(0xff5c0000)
+  val colorAlphaRed300 = Color(0xff470000)
+  val colorAlphaRed200 = Color(0xff3d0000)
+  val colorAlphaRed100 = Color(0xff380000)
+  val colorAlphaGray1400 = Color(0xf2f6f9fe)
+  val colorAlphaGray1300 = Color(0xe3f2f7fd)
+  val colorAlphaGray1200 = Color(0xc9edf4fc)
+  val colorAlphaGray1100 = Color(0xade7f0fe)
+  val colorAlphaGray1000 = Color(0x9ce1eefe)
+  val colorAlphaGray900 = Color(0x8ae1effe)
+  val colorAlphaGray800 = Color(0x69e0edff)
+  val colorAlphaGray700 = Color(0x45e7f1fd)
+  val colorAlphaGray600 = Color(0x33eceff8)
+  val colorAlphaGray500 = Color(0x26f4f7fa)
+  val colorAlphaGray400 = Color(0x1aede7f4)
+  val colorAlphaGray300 = Color(0x0fe9dbf0)
+  val colorAlphaGray200 = Color(0x0ad9c3df)
+  val colorAlphaGray100 = Color(0x05d8dbdf)
+  val colorPink1400 = Color(0xffffe8ed)
+  val colorPink1300 = Color(0xffffd2dc)
+  val colorPink1200 = Color(0xffffabbe)
+  val colorPink1100 = Color(0xfffe84a2)
+  val colorPink1000 = Color(0xfffa658f)
+  val colorPink900 = Color(0xfff4427d)
+  val colorPink800 = Color(0xffce1865)
+  val colorPink700 = Color(0xff99114f)
+  val colorPink600 = Color(0xff7c0c41)
+  val colorPink500 = Color(0xff6d0036)
+  val colorPink400 = Color(0xff550024)
+  val colorPink300 = Color(0xff450018)
+  val colorPink200 = Color(0xff3c0012)
+  val colorPink100 = Color(0xff37000f)
+  val colorFuchsia1400 = Color(0xfff8e9f9)
+  val colorFuchsia1300 = Color(0xfff1d4f3)
+  val colorFuchsia1200 = Color(0xffe5b1e9)
+  val colorFuchsia1100 = Color(0xffd991de)
+  val colorFuchsia1000 = Color(0xffcf78d7)
+  val colorFuchsia900 = Color(0xffc560cf)
+  val colorFuchsia800 = Color(0xffaa36ba)
+  val colorFuchsia700 = Color(0xff7d2394)
+  val colorFuchsia600 = Color(0xff65177d)
+  val colorFuchsia500 = Color(0xff560f6f)
+  val colorFuchsia400 = Color(0xff46005e)
+  val colorFuchsia300 = Color(0xff37004e)
+  val colorFuchsia200 = Color(0xff2e0044)
+  val colorFuchsia100 = Color(0xff28003d)
+  val colorPurple1400 = Color(0xffeeebff)
+  val colorPurple1300 = Color(0xffdedaff)
+  val colorPurple1200 = Color(0xffc4baff)
+  val colorPurple1100 = Color(0xffad9cfe)
+  val colorPurple1000 = Color(0xff9e87fc)
+  val colorPurple900 = Color(0xff9171f9)
+  val colorPurple800 = Color(0xff7849ec)
+  val colorPurple700 = Color(0xff5a27c6)
+  val colorPurple600 = Color(0xff4a0db1)
+  val colorPurple500 = Color(0xff3d009e)
+  val colorPurple400 = Color(0xff2c0080)
+  val colorPurple300 = Color(0xff22006a)
+  val colorPurple200 = Color(0xff1c005a)
+  val colorPurple100 = Color(0xff1a0055)
+  val colorBlue1400 = Color(0xffe4eefe)
+  val colorBlue1300 = Color(0xffcbdffc)
+  val colorBlue1200 = Color(0xffa1c4f8)
+  val colorBlue1100 = Color(0xff7aacf4)
+  val colorBlue1000 = Color(0xff5e99f0)
+  val colorBlue900 = Color(0xff4187eb)
+  val colorBlue800 = Color(0xff0e67d9)
+  val colorBlue700 = Color(0xff0b49ab)
+  val colorBlue600 = Color(0xff083891)
+  val colorBlue500 = Color(0xff062d80)
+  val colorBlue400 = Color(0xff001e6f)
+  val colorBlue300 = Color(0xff001264)
+  val colorBlue200 = Color(0xff00095d)
+  val colorBlue100 = Color(0xff00055a)
+  val colorCyan1400 = Color(0xffdbf2f5)
+  val colorCyan1300 = Color(0xffb8e5eb)
+  val colorCyan1200 = Color(0xff78d0dc)
+  val colorCyan1100 = Color(0xff21bacd)
+  val colorCyan1000 = Color(0xff02a7c6)
+  val colorCyan900 = Color(0xff0093be)
+  val colorCyan800 = Color(0xff0271aa)
+  val colorCyan700 = Color(0xff005188)
+  val colorCyan600 = Color(0xff003f75)
+  val colorCyan500 = Color(0xff003468)
+  val colorCyan400 = Color(0xff002559)
+  val colorCyan300 = Color(0xff001b4e)
+  val colorCyan200 = Color(0xff001448)
+  val colorCyan100 = Color(0xff001144)
+  val colorGreen1400 = Color(0xffd9f4e7)
+  val colorGreen1300 = Color(0xffb5e8d1)
+  val colorGreen1200 = Color(0xff72d5ae)
+  val colorGreen1100 = Color(0xff1fc090)
+  val colorGreen1000 = Color(0xff17ac84)
+  val colorGreen900 = Color(0xff129a78)
+  val colorGreen800 = Color(0xff007a62)
+  val colorGreen700 = Color(0xff005a43)
+  val colorGreen600 = Color(0xff004832)
+  val colorGreen500 = Color(0xff003d29)
+  val colorGreen400 = Color(0xff002e1b)
+  val colorGreen300 = Color(0xff002513)
+  val colorGreen200 = Color(0xff001f0e)
+  val colorGreen100 = Color(0xff001c0b)
+  val colorLime1400 = Color(0xffdaf6d0)
+  val colorLime1300 = Color(0xffb6eca3)
+  val colorLime1200 = Color(0xff77d94f)
+  val colorLime1100 = Color(0xff56c02c)
+  val colorLime1000 = Color(0xff47ad26)
+  val colorLime900 = Color(0xff389b20)
+  val colorLime800 = Color(0xff1d7c13)
+  val colorLime700 = Color(0xff005c00)
+  val colorLime600 = Color(0xff004a00)
+  val colorLime500 = Color(0xff003e00)
+  val colorLime400 = Color(0xff003000)
+  val colorLime300 = Color(0xff002600)
+  val colorLime200 = Color(0xff002000)
+  val colorLime100 = Color(0xff001b00)
+  val colorYellow1400 = Color(0xffffedb1)
+  val colorYellow1300 = Color(0xfffedb58)
+  val colorYellow1200 = Color(0xffefbb0b)
+  val colorYellow1100 = Color(0xffdb9f00)
+  val colorYellow1000 = Color(0xffcc8c00)
+  val colorYellow900 = Color(0xffbc7a00)
+  val colorYellow800 = Color(0xff9d5b00)
+  val colorYellow700 = Color(0xff7c3e02)
+  val colorYellow600 = Color(0xff682e03)
+  val colorYellow500 = Color(0xff5c2400)
+  val colorYellow400 = Color(0xff4c1400)
+  val colorYellow300 = Color(0xff410900)
+  val colorYellow200 = Color(0xff3a0300)
+  val colorYellow100 = Color(0xff360000)
+  val colorOrange1400 = Color(0xffffeadb)
+  val colorOrange1300 = Color(0xffffd5b9)
+  val colorOrange1200 = Color(0xfffbb37e)
+  val colorOrange1100 = Color(0xfff6913d)
+  val colorOrange1000 = Color(0xffeb7a12)
+  val colorOrange900 = Color(0xffda670d)
+  val colorOrange800 = Color(0xffb94607)
+  val colorOrange700 = Color(0xff972206)
+  val colorOrange600 = Color(0xff830500)
+  val colorOrange500 = Color(0xff710000)
+  val colorOrange400 = Color(0xff580000)
+  val colorOrange300 = Color(0xff470000)
+  val colorOrange200 = Color(0xff3c0000)
+  val colorOrange100 = Color(0xff380000)
+  val colorRed1400 = Color(0xffffe9e6)
+  val colorRed1300 = Color(0xffffd4cd)
+  val colorRed1200 = Color(0xffffaea4)
+  val colorRed1100 = Color(0xffff877c)
+  val colorRed1000 = Color(0xffff665d)
+  val colorRed900 = Color(0xfffd3e3c)
+  val colorRed800 = Color(0xffd1212a)
+  val colorRed700 = Color(0xff9f0d1e)
+  val colorRed600 = Color(0xff830009)
+  val colorRed500 = Color(0xff710000)
+  val colorRed400 = Color(0xff590000)
+  val colorRed300 = Color(0xff470000)
+  val colorRed200 = Color(0xff3e0000)
+  val colorRed100 = Color(0xff370000)
+  val colorGray1400 = Color(0xffebeef2)
+  val colorGray1300 = Color(0xffd9dee4)
+  val colorGray1200 = Color(0xffbdc3cc)
+  val colorGray1100 = Color(0xffa3aab4)
+  val colorGray1000 = Color(0xff9199a4)
+  val colorGray900 = Color(0xff808994)
+  val colorGray800 = Color(0xff656c76)
+  val colorGray700 = Color(0xff4a4f55)
+  val colorGray600 = Color(0xff3c3f44)
+  val colorGray500 = Color(0xff323539)
+  val colorGray400 = Color(0xff26282d)
+  val colorGray300 = Color(0xff1d1f24)
+  val colorGray200 = Color(0xff181a1f)
+  val colorGray100 = Color(0xff14171b)
+  val colorThemeBg = Color(0xff101317)
+  val colorBgSubtleSecondaryLevel0 = colorThemeBg
+  val colorBgCanvasDefaultLevel1 = colorGray300
+}

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/compound/generated/internal/LightDesignTokens.kt

@@ -0,0 +1,335 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@file:Suppress("all")
+package io.element.android.libraries.theme.compound.generated.internal;
+
+import androidx.compose.ui.graphics.Color
+
+internal object LightDesignTokens {
+  val colorAlphaPink1400 = Color(0xff420017)
+  val colorAlphaPink1300 = Color(0xff61002c)
+  val colorAlphaPink1200 = Color(0xfa79013d)
+  val colorAlphaPink1100 = Color(0xf79e004c)
+  val colorAlphaPink1000 = Color(0xf7b60256)
+  val colorAlphaPink900 = Color(0xf5cf025e)
+  val colorAlphaPink800 = Color(0xbff50052)
+  val colorAlphaPink700 = Color(0x78ff0040)
+  val colorAlphaPink600 = Color(0x54ff053f)
+  val colorAlphaPink500 = Color(0x3dff0037)
+  val colorAlphaPink400 = Color(0x21ff0037)
+  val colorAlphaPink300 = Color(0x14ff1447)
+  val colorAlphaPink200 = Color(0x0aff0537)
+  val colorAlphaPink100 = Color(0x05ff0537)
+  val colorAlphaFuchsia1400 = Color(0xff34004d)
+  val colorAlphaFuchsia1300 = Color(0xff4d0066)
+  val colorAlphaFuchsia1200 = Color(0xed5d0279)
+  val colorAlphaFuchsia1100 = Color(0xe073038c)
+  val colorAlphaFuchsia1000 = Color(0xd6820198)
+  val colorAlphaFuchsia900 = Color(0xcc9900ad)
+  val colorAlphaFuchsia800 = Color(0xa3ab03ba)
+  val colorAlphaFuchsia700 = Color(0x6eaa04b9)
+  val colorAlphaFuchsia600 = Color(0x4fb207bb)
+  val colorAlphaFuchsia500 = Color(0x3bb407c0)
+  val colorAlphaFuchsia400 = Color(0x21bd09c3)
+  val colorAlphaFuchsia300 = Color(0x12b60cc6)
+  val colorAlphaFuchsia200 = Color(0x0ab505cc)
+  val colorAlphaFuchsia100 = Color(0x05cc05cc)
+  val colorAlphaPurple1400 = Color(0xff200066)
+  val colorAlphaPurple1300 = Color(0xff34008f)
+  val colorAlphaPurple1200 = Color(0xfc4a02b6)
+  val colorAlphaPurple1100 = Color(0xdb4303c4)
+  val colorAlphaPurple1000 = Color(0xc94502d4)
+  val colorAlphaPurple900 = Color(0xba4902ed)
+  val colorAlphaPurple800 = Color(0x8f3b01f9)
+  val colorAlphaPurple700 = Color(0x613305ff)
+  val colorAlphaPurple600 = Color(0x452b05ff)
+  val colorAlphaPurple500 = Color(0x332605ff)
+  val colorAlphaPurple400 = Color(0x1f2f0fff)
+  val colorAlphaPurple300 = Color(0x12381aff)
+  val colorAlphaPurple200 = Color(0x0a5338ff)
+  val colorAlphaPurple100 = Color(0x053838ff)
+  val colorAlphaBlue1400 = Color(0xff000e66)
+  val colorAlphaBlue1300 = Color(0xff012579)
+  val colorAlphaBlue1200 = Color(0xfc013693)
+  val colorAlphaBlue1100 = Color(0xfa0148b2)
+  val colorAlphaBlue1000 = Color(0xfc0256c5)
+  val colorAlphaBlue900 = Color(0xfc0165df)
+  val colorAlphaBlue800 = Color(0xbf0062eb)
+  val colorAlphaBlue700 = Color(0x820264ed)
+  val colorAlphaBlue600 = Color(0x5e0663ef)
+  val colorAlphaBlue500 = Color(0x47096cf6)
+  val colorAlphaBlue400 = Color(0x290b6af9)
+  val colorAlphaBlue300 = Color(0x170a70ff)
+  val colorAlphaBlue200 = Color(0x0d2474ff)
+  val colorAlphaBlue100 = Color(0x08389cff)
+  val colorAlphaCyan1400 = Color(0xff001a52)
+  val colorAlphaCyan1300 = Color(0xff002c61)
+  val colorAlphaCyan1200 = Color(0xff003f75)
+  val colorAlphaCyan1100 = Color(0xff00568f)
+  val colorAlphaCyan1000 = Color(0xff00649e)
+  val colorAlphaCyan900 = Color(0xff0074ad)
+  val colorAlphaCyan800 = Color(0xff0095c2)
+  val colorAlphaCyan700 = Color(0xeb01b7cb)
+  val colorAlphaCyan600 = Color(0x8a01aac1)
+  val colorAlphaCyan500 = Color(0x6605abbd)
+  val colorAlphaCyan400 = Color(0x3800aabd)
+  val colorAlphaCyan300 = Color(0x1c00a8c2)
+  val colorAlphaCyan200 = Color(0x0f16abbb)
+  val colorAlphaCyan100 = Color(0x0816bbbb)
+  val colorAlphaGreen1400 = Color(0xff002411)
+  val colorAlphaGreen1300 = Color(0xff00331f)
+  val colorAlphaGreen1200 = Color(0xff004732)
+  val colorAlphaGreen1100 = Color(0xff005c45)
+  val colorAlphaGreen1000 = Color(0xff006b52)
+  val colorAlphaGreen900 = Color(0xff007a62)
+  val colorAlphaGreen800 = Color(0xff009975)
+  val colorAlphaGreen700 = Color(0xf501c18a)
+  val colorAlphaGreen600 = Color(0x8f01b76e)
+  val colorAlphaGreen500 = Color(0x6904b96a)
+  val colorAlphaGreen400 = Color(0x3b07b661)
+  val colorAlphaGreen300 = Color(0x1c00b85c)
+  val colorAlphaGreen200 = Color(0x0f16bb69)
+  val colorAlphaGreen100 = Color(0x0816bb79)
+  val colorAlphaLime1400 = Color(0xff002400)
+  val colorAlphaLime1300 = Color(0xff003800)
+  val colorAlphaLime1200 = Color(0xff004d00)
+  val colorAlphaLime1100 = Color(0xff006100)
+  val colorAlphaLime1000 = Color(0xff007000)
+  val colorAlphaLime900 = Color(0xf5107902)
+  val colorAlphaLime800 = Color(0xe8209301)
+  val colorAlphaLime700 = Color(0xdb39bd00)
+  val colorAlphaLime600 = Color(0xb540ce03)
+  val colorAlphaLime500 = Color(0x8237ca02)
+  val colorAlphaLime400 = Color(0x473ace09)
+  val colorAlphaLime300 = Color(0x262ecf02)
+  val colorAlphaLime200 = Color(0x1238d40c)
+  val colorAlphaLime100 = Color(0x0a4fcd1d)
+  val colorAlphaYellow1400 = Color(0xff420700)
+  val colorAlphaYellow1300 = Color(0xff571b00)
+  val colorAlphaYellow1200 = Color(0xff6b2e00)
+  val colorAlphaYellow1100 = Color(0xff804000)
+  val colorAlphaYellow1000 = Color(0xff8f4c00)
+  val colorAlphaYellow900 = Color(0xff9e5a00)
+  val colorAlphaYellow800 = Color(0xffbd7b00)
+  val colorAlphaYellow700 = Color(0xffe0a500)
+  val colorAlphaYellow600 = Color(0xfff0bc00)
+  val colorAlphaYellow500 = Color(0xfffacc00)
+  val colorAlphaYellow400 = Color(0x7dffc905)
+  val colorAlphaYellow300 = Color(0x40ffc905)
+  val colorAlphaYellow200 = Color(0x21ffc70f)
+  val colorAlphaYellow100 = Color(0x0fffcd05)
+  val colorAlphaOrange1400 = Color(0xff470000)
+  val colorAlphaOrange1300 = Color(0xff610000)
+  val colorAlphaOrange1200 = Color(0xff850000)
+  val colorAlphaOrange1100 = Color(0xff992100)
+  val colorAlphaOrange1000 = Color(0xffad3400)
+  val colorAlphaOrange900 = Color(0xffbd4500)
+  val colorAlphaOrange800 = Color(0xffdb6600)
+  val colorAlphaOrange700 = Color(0xbff56e00)
+  val colorAlphaOrange600 = Color(0x85fc6f03)
+  val colorAlphaOrange500 = Color(0x5eff6a00)
+  val colorAlphaOrange400 = Color(0x38ff6d05)
+  val colorAlphaOrange300 = Color(0x1cff6c0a)
+  val colorAlphaOrange200 = Color(0x12ff7d1a)
+  val colorAlphaOrange100 = Color(0x0aff8138)
+  val colorAlphaRed1400 = Color(0xff470000)
+  val colorAlphaRed1300 = Color(0xff610000)
+  val colorAlphaRed1200 = Color(0xff850007)
+  val colorAlphaRed1100 = Color(0xfca2011c)
+  val colorAlphaRed1000 = Color(0xf2bb0217)
+  val colorAlphaRed900 = Color(0xe8cf0213)
+  val colorAlphaRed800 = Color(0xc4ff0505)
+  val colorAlphaRed700 = Color(0x80ff1a05)
+  val colorAlphaRed600 = Color(0x5cff2205)
+  val colorAlphaRed500 = Color(0x45ff2605)
+  val colorAlphaRed400 = Color(0x26ff2b0a)
+  val colorAlphaRed300 = Color(0x14ff3814)
+  val colorAlphaRed200 = Color(0x0aff391f)
+  val colorAlphaRed100 = Color(0x08ff5938)
+  val colorAlphaGray1400 = Color(0xe6020408)
+  val colorAlphaGray1300 = Color(0xd603050c)
+  val colorAlphaGray1200 = Color(0xc402070d)
+  val colorAlphaGray1100 = Color(0xb5030b16)
+  val colorAlphaGray1000 = Color(0xa8030c1b)
+  val colorAlphaGray900 = Color(0x9c031021)
+  val colorAlphaGray800 = Color(0x8003152b)
+  val colorAlphaGray700 = Color(0x59011532)
+  val colorAlphaGray600 = Color(0x42011d3c)
+  val colorAlphaGray500 = Color(0x33052448)
+  val colorAlphaGray400 = Color(0x1f052e61)
+  val colorAlphaGray300 = Color(0x0f052657)
+  val colorAlphaGray200 = Color(0x0a366881)
+  val colorAlphaGray100 = Color(0x0536699b)
+  val colorPink1400 = Color(0xff430017)
+  val colorPink1300 = Color(0xff5f002b)
+  val colorPink1200 = Color(0xff7e0642)
+  val colorPink1100 = Color(0xff9f0850)
+  val colorPink1000 = Color(0xffb80a5b)
+  val colorPink900 = Color(0xffd20c65)
+  val colorPink800 = Color(0xfff7407d)
+  val colorPink700 = Color(0xffff88a6)
+  val colorPink600 = Color(0xffffadc0)
+  val colorPink500 = Color(0xffffc2cf)
+  val colorPink400 = Color(0xffffdee5)
+  val colorPink300 = Color(0xffffecf0)
+  val colorPink200 = Color(0xfffff5f7)
+  val colorPink100 = Color(0xfffffafb)
+  val colorFuchsia1400 = Color(0xff34004c)
+  val colorFuchsia1300 = Color(0xff4e0068)
+  val colorFuchsia1200 = Color(0xff671481)
+  val colorFuchsia1100 = Color(0xff822198)
+  val colorFuchsia1000 = Color(0xff972aaa)
+  val colorFuchsia900 = Color(0xffad33bd)
+  val colorFuchsia800 = Color(0xffc85ed1)
+  val colorFuchsia700 = Color(0xffdb93e1)
+  val colorFuchsia600 = Color(0xffe7b2ea)
+  val colorFuchsia500 = Color(0xffedc6f0)
+  val colorFuchsia400 = Color(0xfff6dff7)
+  val colorFuchsia300 = Color(0xfffaeefb)
+  val colorFuchsia200 = Color(0xfffcf5fd)
+  val colorFuchsia100 = Color(0xfffefafe)
+  val colorPurple1400 = Color(0xff200066)
+  val colorPurple1300 = Color(0xff33008d)
+  val colorPurple1200 = Color(0xff4c05b5)
+  val colorPurple1100 = Color(0xff5d26cd)
+  val colorPurple1000 = Color(0xff6b37de)
+  val colorPurple900 = Color(0xff7a47f1)
+  val colorPurple800 = Color(0xff9271fd)
+  val colorPurple700 = Color(0xffb1a0ff)
+  val colorPurple600 = Color(0xffc5bbff)
+  val colorPurple500 = Color(0xffd4cdff)
+  val colorPurple400 = Color(0xffe6e2ff)
+  val colorPurple300 = Color(0xfff1efff)
+  val colorPurple200 = Color(0xfff8f7ff)
+  val colorPurple100 = Color(0xfffbfbff)
+  val colorBlue1400 = Color(0xff000e65)
+  val colorBlue1300 = Color(0xff012478)
+  val colorBlue1200 = Color(0xff043894)
+  val colorBlue1100 = Color(0xff064ab1)
+  val colorBlue1000 = Color(0xff0558c7)
+  val colorBlue900 = Color(0xff0467dd)
+  val colorBlue800 = Color(0xff4088ee)
+  val colorBlue700 = Color(0xff7eaff6)
+  val colorBlue600 = Color(0xffa3c6fa)
+  val colorBlue500 = Color(0xffbad5fc)
+  val colorBlue400 = Color(0xffd8e7fe)
+  val colorBlue300 = Color(0xffe9f2ff)
+  val colorBlue200 = Color(0xfff4f8ff)
+  val colorBlue100 = Color(0xfff9fcff)
+  val colorCyan1400 = Color(0xff00194f)
+  val colorCyan1300 = Color(0xff002b61)
+  val colorCyan1200 = Color(0xff004077)
+  val colorCyan1100 = Color(0xff00548c)
+  val colorCyan1000 = Color(0xff00629c)
+  val colorCyan900 = Color(0xff0072ac)
+  val colorCyan800 = Color(0xff0094c0)
+  val colorCyan700 = Color(0xff15becf)
+  val colorCyan600 = Color(0xff76d1dd)
+  val colorCyan500 = Color(0xff9bdde5)
+  val colorCyan400 = Color(0xffc7ecf0)
+  val colorCyan300 = Color(0xffe3f5f8)
+  val colorCyan200 = Color(0xfff1fafb)
+  val colorCyan100 = Color(0xfff8fdfd)
+  val colorGreen1400 = Color(0xff002311)
+  val colorGreen1300 = Color(0xff003420)
+  val colorGreen1200 = Color(0xff004933)
+  val colorGreen1100 = Color(0xff005c45)
+  val colorGreen1000 = Color(0xff006b52)
+  val colorGreen900 = Color(0xff007a61)
+  val colorGreen800 = Color(0xff009b78)
+  val colorGreen700 = Color(0xff0bc491)
+  val colorGreen600 = Color(0xff71d7ae)
+  val colorGreen500 = Color(0xff98e1c1)
+  val colorGreen400 = Color(0xffc6eedb)
+  val colorGreen300 = Color(0xffe3f7ed)
+  val colorGreen200 = Color(0xfff1fbf6)
+  val colorGreen100 = Color(0xfff8fdfb)
+  val colorLime1400 = Color(0xff002400)
+  val colorLime1300 = Color(0xff003600)
+  val colorLime1200 = Color(0xff004b00)
+  val colorLime1100 = Color(0xff005f00)
+  val colorLime1000 = Color(0xff006e00)
+  val colorLime900 = Color(0xff197d0c)
+  val colorLime800 = Color(0xff359d18)
+  val colorLime700 = Color(0xff54c424)
+  val colorLime600 = Color(0xff76db4c)
+  val colorLime500 = Color(0xff99e57e)
+  val colorLime400 = Color(0xffc8f1ba)
+  val colorLime300 = Color(0xffe0f8d9)
+  val colorLime200 = Color(0xfff1fcee)
+  val colorLime100 = Color(0xfff8fdf6)
+  val colorYellow1400 = Color(0xff410600)
+  val colorYellow1300 = Color(0xff541a00)
+  val colorYellow1200 = Color(0xff692e00)
+  val colorYellow1100 = Color(0xff803f00)
+  val colorYellow1000 = Color(0xff8f4d00)
+  val colorYellow900 = Color(0xff9f5b00)
+  val colorYellow800 = Color(0xffbe7a00)
+  val colorYellow700 = Color(0xffdea200)
+  val colorYellow600 = Color(0xfff1bd00)
+  val colorYellow500 = Color(0xfffbce00)
+  val colorYellow400 = Color(0xffffe484)
+  val colorYellow300 = Color(0xfffff2c1)
+  val colorYellow200 = Color(0xfffff8e0)
+  val colorYellow100 = Color(0xfffffcf0)
+  val colorOrange1400 = Color(0xff450000)
+  val colorOrange1300 = Color(0xff620000)
+  val colorOrange1200 = Color(0xff850000)
+  val colorOrange1100 = Color(0xff9b2200)
+  val colorOrange1000 = Color(0xffac3300)
+  val colorOrange900 = Color(0xffbc4500)
+  val colorOrange800 = Color(0xffdc6700)
+  val colorOrange700 = Color(0xfff89440)
+  val colorOrange600 = Color(0xfffdb37c)
+  val colorOrange500 = Color(0xffffc8a1)
+  val colorOrange400 = Color(0xffffdfc8)
+  val colorOrange300 = Color(0xffffefe4)
+  val colorOrange200 = Color(0xfffff6ef)
+  val colorOrange100 = Color(0xfffffaf7)
+  val colorRed1400 = Color(0xff450000)
+  val colorRed1300 = Color(0xff620000)
+  val colorRed1200 = Color(0xff850006)
+  val colorRed1100 = Color(0xffa4041d)
+  val colorRed1000 = Color(0xffbc0f22)
+  val colorRed900 = Color(0xffd51928)
+  val colorRed800 = Color(0xffff3d3d)
+  val colorRed700 = Color(0xffff8c81)
+  val colorRed600 = Color(0xffffafa5)
+  val colorRed500 = Color(0xffffc5bc)
+  val colorRed400 = Color(0xffffdfda)
+  val colorRed300 = Color(0xffffefec)
+  val colorRed200 = Color(0xfffff7f6)
+  val colorRed100 = Color(0xfffffaf9)
+  val colorGray1400 = Color(0xff1b1d22)
+  val colorGray1300 = Color(0xff2b2d32)
+  val colorGray1200 = Color(0xff3c4045)
+  val colorGray1100 = Color(0xff4c5158)
+  val colorGray1000 = Color(0xff595e67)
+  val colorGray900 = Color(0xff656d77)
+  val colorGray800 = Color(0xff818a95)
+  val colorGray700 = Color(0xffa6adb7)
+  val colorGray600 = Color(0xffbdc4cc)
+  val colorGray500 = Color(0xffcdd3da)
+  val colorGray400 = Color(0xffe1e6ec)
+  val colorGray300 = Color(0xfff0f2f5)
+  val colorGray200 = Color(0xfff7f9fa)
+  val colorGray100 = Color(0xfffbfcfd)
+  val colorThemeBg = Color(0xffffffff)
+  val colorBgSubtleSecondaryLevel0 = colorGray300
+  val colorBgCanvasDefaultLevel1 = colorThemeBg
+}

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/previews/ColorListPreview.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.theme.previews
+package io.element.android.libraries.theme.previews
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -28,7 +28,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableMap
 
 @Composable
-internal fun ColorListPreview(
+fun ColorListPreview(
     backgroundColor: Color,
     foregroundColor: Color,
     colors: ImmutableMap<String, Color>,

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/previews/ColorPreview.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.theme.previews
+package io.element.android.libraries.theme.previews
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -23,17 +23,17 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.utils.toHrf
-import io.element.android.libraries.designsystem.utils.toHrf
 
 @Composable
-internal fun ColorPreview(
+fun ColorPreview(
     backgroundColor: Color,
     foregroundColor: Color,
     name: String, color: Color,

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/previews/ColorsSchemePreview.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.theme.previews
+package io.element.android.libraries.theme.previews
 
 import androidx.compose.material3.ColorScheme
 import androidx.compose.runtime.Composable

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/showkase/ThemeShowkaseRootModule.kt

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2022 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.theme.showkase
+
+import com.airbnb.android.showkase.annotation.ShowkaseRoot
+import com.airbnb.android.showkase.annotation.ShowkaseRootModule
+
+@ShowkaseRoot
+class ThemeShowkaseRootModule : ShowkaseRootModule

libraries/theme/src/main/kotlin/io/element/android/libraries/theme/utils/Colors.kt

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.utils
+package io.element.android.libraries.theme.utils
 
 import androidx.compose.ui.graphics.Color
 
 /**
  * Convert color to Human Readable Format.
  */
-internal fun Color.toHrf(): String {
+fun Color.toHrf(): String {
     return "0x" + value.toString(16).take(8).uppercase()
 }

libraries/theme/src/main/res/drawable/ic_chat.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M2.98 16.3l-1.45 4.95a0.94 0.94 0 0 0 0.25 1 0.94 0.94 0 0 0 1 0.25l4.95-1.45a10.23 10.23 0 0 0 2.1 0.71c0.71 0.16 1.45 0.24 2.2 0.24a9.74 9.74 0 0 0 3.9-0.79 10.1 10.1 0 0 0 3.17-2.14c0.9-0.9 1.61-1.95 2.14-3.17a9.74 9.74 0 0 0 0.79-3.9 9.74 9.74 0 0 0-0.8-3.9 10.1 10.1 0 0 0-2.13-3.17c-0.9-0.9-1.96-1.62-3.17-2.14A9.74 9.74 0 0 0 12.03 2a9.74 9.74 0 0 0-3.9 0.79 10.1 10.1 0 0 0-3.18 2.13c-0.9 0.9-1.61 1.96-2.14 3.18A9.74 9.74 0 0 0 2.03 12a10.18 10.18 0 0 0 0.95 4.3Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_check.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M9.55 17.57c-0.13 0-0.26-0.02-0.38-0.06a0.88 0.88 0 0 1-0.32-0.21L4.55 13c-0.18-0.18-0.27-0.42-0.26-0.71 0-0.3 0.1-0.53 0.28-0.71a0.95 0.95 0 0 1 0.7-0.28 0.95 0.95 0 0 1 0.7 0.28l3.58 3.57 8.47-8.47c0.19-0.19 0.42-0.28 0.72-0.28 0.29 0 0.53 0.1 0.71 0.28 0.18 0.18 0.28 0.42 0.28 0.7 0 0.3-0.1 0.54-0.28 0.72l-9.2 9.2c-0.1 0.1-0.2 0.17-0.33 0.21a1.1 1.1 0 0 1-0.37 0.06Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_check_circle.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M10.6 13.8l-2.15-2.15a0.95 0.95 0 0 0-0.7-0.28 0.95 0.95 0 0 0-0.7 0.28 0.95 0.95 0 0 0-0.28 0.7 0.95 0.95 0 0 0 0.28 0.7L9.9 15.9c0.2 0.2 0.43 0.3 0.7 0.3 0.27 0 0.5-0.1 0.7-0.3l5.65-5.65a0.95 0.95 0 0 0 0.28-0.7 0.95 0.95 0 0 0-0.28-0.7 0.95 0.95 0 0 0-0.7-0.28 0.95 0.95 0 0 0-0.7 0.28L10.6 13.8ZM12 22a9.74 9.74 0 0 1-3.9-0.79 10.1 10.1 0 0 1-3.17-2.14c-0.9-0.9-1.62-1.95-2.14-3.17A9.74 9.74 0 0 1 2 12a9.74 9.74 0 0 1 0.79-3.9 10.1 10.1 0 0 1 2.14-3.17c0.9-0.9 1.95-1.62 3.17-2.14A9.74 9.74 0 0 1 12 2a9.74 9.74 0 0 1 3.9 0.79 10.1 10.1 0 0 1 3.17 2.14c0.9 0.9 1.62 1.95 2.14 3.17A9.74 9.74 0 0 1 22 12a9.74 9.74 0 0 1-0.79 3.9 10.1 10.1 0 0 1-2.14 3.17c-0.9 0.9-1.95 1.62-3.17 2.14A9.74 9.74 0 0 1 12 22Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_chevron.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M12 14.95c-0.13 0-0.26-0.02-0.38-0.06a0.88 0.88 0 0 1-0.32-0.22l-4.63-4.62a0.9 0.9 0 0 1-0.26-0.69 0.98 0.98 0 0 1 0.29-0.68 0.95 0.95 0 0 1 0.7-0.28 0.95 0.95 0 0 1 0.7 0.28l3.9 3.9 3.92-3.93a0.9 0.9 0 0 1 0.7-0.26 0.98 0.98 0 0 1 0.68 0.29 0.95 0.95 0 0 1 0.28 0.7 0.95 0.95 0 0 1-0.28 0.7l-4.6 4.6c-0.1 0.1-0.2 0.17-0.32 0.2A1.1 1.1 0 0 1 12 14.96Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_close.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M12 13.4l-4.9 4.9a0.95 0.95 0 0 1-0.7 0.28 0.95 0.95 0 0 1-0.7-0.28 0.95 0.95 0 0 1-0.28-0.7 0.95 0.95 0 0 1 0.28-0.7l4.9-4.9-4.9-4.9a0.95 0.95 0 0 1-0.28-0.7 0.95 0.95 0 0 1 0.28-0.7 0.95 0.95 0 0 1 0.7-0.27 0.95 0.95 0 0 1 0.7 0.27l4.9 4.9 4.9-4.9a0.95 0.95 0 0 1 0.7-0.27 0.95 0.95 0 0 1 0.7 0.27 0.95 0.95 0 0 1 0.27 0.7 0.95 0.95 0 0 1-0.27 0.7L13.4 12l4.9 4.9a0.95 0.95 0 0 1 0.28 0.7 0.95 0.95 0 0 1-0.28 0.7 0.95 0.95 0 0 1-0.7 0.27 0.95 0.95 0 0 1-0.7-0.27L12 13.4Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_computer.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M4 18c-0.55 0-1.02-0.2-1.41-0.59A1.93 1.93 0 0 1 2 16V5c0-0.55 0.2-1.02 0.59-1.41A1.93 1.93 0 0 1 4 3h16c0.55 0 1.02 0.2 1.41 0.59C21.81 3.98 22 4.45 22 5v11c0 0.55-0.2 1.02-0.59 1.41A1.93 1.93 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a0.97 0.97 0 0 1-0.71-0.29A0.97 0.97 0 0 1 1 20c0-0.28 0.1-0.52 0.29-0.71A0.97 0.97 0 0 1 2 19h20c0.28 0 0.52 0.1 0.71 0.29C22.91 19.48 23 19.72 23 20s-0.1 0.52-0.29 0.71A0.97 0.97 0 0 1 22 21H2Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_delete.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M7 21c-0.55 0-1.02-0.2-1.41-0.59A1.93 1.93 0 0 1 5 19V6a0.97 0.97 0 0 1-0.71-0.29A0.97 0.97 0 0 1 4 5c0-0.28 0.1-0.52 0.29-0.71A0.97 0.97 0 0 1 5 4h4a0.97 0.97 0 0 1 0.29-0.71A0.97 0.97 0 0 1 10 3h4a0.97 0.97 0 0 1 0.71 0.29A0.97 0.97 0 0 1 15 4h4a0.97 0.97 0 0 1 0.71 0.29C19.91 4.48 20 4.72 20 5s-0.1 0.52-0.29 0.71A0.97 0.97 0 0 1 19 6v13c0 0.55-0.2 1.02-0.59 1.41A1.93 1.93 0 0 1 17 21H7Zm2-5c0 0.28 0.1 0.52 0.29 0.71C9.48 16.91 9.72 17 10 17s0.52-0.1 0.71-0.29A0.97 0.97 0 0 0 11 16V9a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 10 8a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 9 9v7Zm4 0c0 0.28 0.1 0.52 0.29 0.71C13.48 16.91 13.72 17 14 17s0.52-0.1 0.71-0.29A0.97 0.97 0 0 0 15 16V9a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 14 8a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 13 9v7Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_error.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M12 17a0.97 0.97 0 0 0 0.71-0.29A0.97 0.97 0 0 0 13 16a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 12 15a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 11 16c0 0.28 0.1 0.52 0.29 0.71C11.48 16.91 11.72 17 12 17Zm0-4c0.28 0 0.52-0.1 0.71-0.29A0.97 0.97 0 0 0 13 12V8a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 12 7a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 11 8v4c0 0.28 0.1 0.52 0.29 0.71C11.48 12.91 11.72 13 12 13Zm0 9a9.74 9.74 0 0 1-3.9-0.79 10.1 10.1 0 0 1-3.17-2.14c-0.9-0.9-1.62-1.95-2.14-3.17A9.74 9.74 0 0 1 2 12a9.74 9.74 0 0 1 0.79-3.9 10.1 10.1 0 0 1 2.14-3.17c0.9-0.9 1.95-1.62 3.17-2.14A9.74 9.74 0 0 1 12 2a9.74 9.74 0 0 1 3.9 0.79 10.1 10.1 0 0 1 3.17 2.14c0.9 0.9 1.62 1.95 2.14 3.17A9.74 9.74 0 0 1 22 12a9.74 9.74 0 0 1-0.79 3.9 10.1 10.1 0 0 1-2.14 3.17c-0.9 0.9-1.95 1.62-3.17 2.14A9.74 9.74 0 0 1 12 22Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_info.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M12 17a0.97 0.97 0 0 0 0.71-0.29A0.97 0.97 0 0 0 13 16v-4a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 12 11a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 11 12v4c0 0.28 0.1 0.52 0.29 0.71C11.48 16.91 11.72 17 12 17Zm0-8c0.28 0 0.52-0.1 0.71-0.29A0.97 0.97 0 0 0 13 8a0.97 0.97 0 0 0-0.29-0.71A0.97 0.97 0 0 0 12 7a0.97 0.97 0 0 0-0.71 0.29A0.97 0.97 0 0 0 11 8c0 0.28 0.1 0.52 0.29 0.71C11.48 8.91 11.72 9 12 9Zm0 13a9.74 9.74 0 0 1-3.9-0.79 10.1 10.1 0 0 1-3.17-2.14c-0.9-0.9-1.62-1.95-2.14-3.17A9.74 9.74 0 0 1 2 12a9.74 9.74 0 0 1 0.79-3.9 10.1 10.1 0 0 1 2.14-3.17c0.9-0.9 1.95-1.62 3.17-2.14A9.74 9.74 0 0 1 12 2a9.74 9.74 0 0 1 3.9 0.79 10.1 10.1 0 0 1 3.17 2.14c0.9 0.9 1.62 1.95 2.14 3.17A9.74 9.74 0 0 1 22 12a9.74 9.74 0 0 1-0.79 3.9 10.1 10.1 0 0 1-2.14 3.17c-0.9 0.9-1.95 1.62-3.17 2.14A9.74 9.74 0 0 1 12 22Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_lock.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M6 22c-0.55 0-1.02-0.2-1.41-0.59A1.93 1.93 0 0 1 4 20V10c0-0.55 0.2-1.02 0.59-1.41A1.93 1.93 0 0 1 6 8h1V6c0-1.38 0.49-2.56 1.46-3.54C9.44 1.5 10.62 1 12 1s2.56 0.49 3.54 1.46C16.5 3.44 17 4.62 17 6v2h1c0.55 0 1.02 0.2 1.41 0.59C19.81 8.98 20 9.45 20 10v10c0 0.55-0.2 1.02-0.59 1.41A1.93 1.93 0 0 1 18 22H6ZM9 8h6V6c0-0.83-0.3-1.54-0.88-2.13A2.9 2.9 0 0 0 12 3c-0.83 0-1.54 0.3-2.13 0.88A2.9 2.9 0 0 0 9 6v2Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_mobile.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M7 23c-0.55 0-1.02-0.2-1.41-0.59A1.93 1.93 0 0 1 5 21V3c0-0.55 0.2-1.02 0.59-1.41A1.93 1.93 0 0 1 7 1h10c0.55 0 1.02 0.2 1.41 0.59C18.81 1.98 19 2.45 19 3v18c0 0.55-0.2 1.02-0.59 1.41A1.93 1.93 0 0 1 17 23H7Zm0-5h10V6H7v12Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_thread.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M5 5.25a0.75 0.75 0 0 0 0 1.5h8a0.75 0.75 0 0 0 0-1.5H5Zm0 3a0.75 0.75 0 0 0 0 1.5h4a0.75 0.75 0 1 0 0-1.5H5Z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:fillType="evenOdd"
+        android:pathData="M3 0.25A2.75 2.75 0 0 0 0.25 3v14a0.75 0.75 0 0 0 1.2 0.6L4.92 15c0.21-0.16 0.48-0.25 0.75-0.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 0.25H3ZM1.75 3c0-0.69 0.56-1.25 1.25-1.25h12c0.69 0 1.25 0.56 1.25 1.25v9c0 0.69-0.56 1.25-1.25 1.25H5.67a2.75 2.75 0 0 0-1.65 0.55l-2.27 1.7V3Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_user.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:strokeColor="#FF000000"
+        android:strokeWidth="0.03"
+        android:pathData="M5.84 17.1v0.02l0.02-0.01a10.42 10.42 0 0 1 2.84-1.54 9.72 9.72 0 0 1 3.3-0.56c1.15 0 2.25 0.19 3.3 0.56a10.42 10.42 0 0 1 2.84 1.54h0.01 0.01a7.74 7.74 0 0 0 1.36-2.33 7.85 7.85 0 0 0 0.5-2.78c0-2.22-0.79-4.11-2.35-5.67-1.56-1.56-3.45-2.34-5.67-2.34-2.22 0-4.11 0.78-5.67 2.34C4.77 7.89 3.99 9.78 3.99 12c0 0.98 0.16 1.91 0.49 2.78 0.32 0.87 0.78 1.64 1.36 2.33ZM12 13c-0.98 0-1.8-0.34-2.48-1.01-0.67-0.67-1-1.5-1-2.48s0.33-1.8 1-2.48c0.67-0.67 1.5-1 2.48-1s1.8 0.33 2.48 1c0.67 0.67 1 1.5 1 2.48s-0.33 1.8-1 2.48c-0.67 0.67-1.5 1-2.48 1Zm0 9a9.72 9.72 0 0 1-3.9-0.79 10.09 10.09 0 0 1-3.17-2.13A10.09 10.09 0 0 1 2.8 15.9 9.72 9.72 0 0 1 2 12c0-1.38 0.27-2.68 0.79-3.9a10.09 10.09 0 0 1 2.13-3.17A10.09 10.09 0 0 1 8.1 2.8 9.72 9.72 0 0 1 12 2c1.38 0 2.68 0.27 3.9 0.79a10.09 10.09 0 0 1 3.17 2.13c0.9 0.9 1.6 1.96 2.13 3.17A9.72 9.72 0 0 1 22 12a9.73 9.73 0 0 1-0.79 3.9 10.09 10.09 0 0 1-2.13 3.17 10.09 10.09 0 0 1-3.17 2.13A9.72 9.72 0 0 1 12 22Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_visibility_invisible.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M19.3 16.5l-3.2-3.2c0.13-0.28 0.23-0.57 0.3-0.86 0.07-0.3 0.1-0.6 0.1-0.94 0-1.25-0.44-2.31-1.31-3.19C14.3 7.44 13.25 7 12 7a4.2 4.2 0 0 0-0.94 0.1 4.24 4.24 0 0 0-0.86 0.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.38 0 4.53 0.63 6.42 1.89 1.9 1.26 3.33 2.9 4.28 4.91 0.05 0.08 0.08 0.19 0.1 0.31s0.03 0.26 0.03 0.39a1.97 1.97 0 0 1-0.13 0.7 11.49 11.49 0 0 1-1.44 2.38 10.47 10.47 0 0 1-1.96 1.92Zm-0.2 5.4l-3.5-3.45c-0.58 0.18-1.17 0.32-1.76 0.41-0.6 0.1-1.2 0.14-1.84 0.14-2.38 0-4.53-0.63-6.42-1.89-1.9-1.26-3.33-2.9-4.28-4.91a0.81 0.81 0 0 1-0.1-0.31 2.93 2.93 0 0 1 0-0.77 0.8 0.8 0 0 1 0.1-0.3c0.35-0.75 0.77-1.44 1.25-2.07A13.3 13.3 0 0 1 4.15 7L2.07 4.9A0.93 0.93 0 0 1 1.8 4.21c0-0.27 0.1-0.51 0.3-0.71a0.95 0.95 0 0 1 0.7-0.28 0.95 0.95 0 0 1 0.7 0.28l17 17c0.18 0.18 0.28 0.41 0.29 0.69a0.93 0.93 0 0 1-0.29 0.71 0.95 0.95 0 0 1-0.7 0.28 0.95 0.95 0 0 1-0.7-0.28ZM12 16a4.9 4.9 0 0 0 0.51-0.03c0.16-0.01 0.33-0.05 0.52-0.1l-5.4-5.4c-0.05 0.19-0.09 0.36-0.1 0.52A4.81 4.81 0 0 0 7.5 11.5c0 1.25 0.44 2.31 1.31 3.19C9.7 15.56 10.75 16 12 16Zm2.65-4.15l-3-3c0.95-0.15 1.73 0.12 2.33 0.8 0.6 0.68 0.82 1.42 0.67 2.2Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_visibility_visible.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M12 16c1.25 0 2.31-0.44 3.19-1.31 0.87-0.88 1.31-1.94 1.31-3.19s-0.44-2.31-1.31-3.19C14.3 7.44 13.25 7 12 7S9.69 7.44 8.81 8.31C7.94 9.2 7.5 10.25 7.5 11.5s0.44 2.31 1.31 3.19C9.7 15.56 10.75 16 12 16Zm0-1.8c-0.75 0-1.39-0.26-1.91-0.79A2.6 2.6 0 0 1 9.3 11.5c0-0.75 0.26-1.39 0.79-1.91A2.6 2.6 0 0 1 12 8.8c0.75 0 1.39 0.26 1.91 0.79 0.53 0.52 0.79 1.16 0.79 1.91s-0.26 1.39-0.79 1.91A2.6 2.6 0 0 1 12 14.2Zm0 4.8c-2.32 0-4.43-0.61-6.35-1.84-1.92-1.22-3.37-2.88-4.35-4.96a0.81 0.81 0 0 1-0.1-0.31 2.93 2.93 0 0 1 0-0.78 0.81 0.81 0 0 1 0.1-0.31c0.98-2.08 2.43-3.74 4.35-4.96C7.57 4.6 9.68 4 12 4c2.32 0 4.43 0.61 6.35 1.84 1.92 1.22 3.37 2.88 4.35 4.96 0.05 0.08 0.08 0.19 0.1 0.31a2.92 2.92 0 0 1 0 0.78 0.81 0.81 0 0 1-0.1 0.31c-0.98 2.08-2.43 3.74-4.35 4.96C16.43 18.4 14.32 19 12 19Z"/>
+</vector>

libraries/theme/src/main/res/drawable/ic_web_browser.xml

@@ -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:fillColor="#FF000000"
+        android:pathData="M4 20c-0.55 0-1.02-0.2-1.41-0.59A1.93 1.93 0 0 1 2 18V6c0-0.55 0.2-1.02 0.59-1.41A1.93 1.93 0 0 1 4 4h16c0.55 0 1.02 0.2 1.41 0.59C21.81 4.98 22 5.45 22 6v12c0 0.55-0.2 1.02-0.59 1.41A1.93 1.93 0 0 1 20 20H4Zm0-2h16V8H4v10Z"/>
+</vector>

samples/minimal/src/main/kotlin/io/element/android/samples/minimal/MainActivity.kt

@@ -26,7 +26,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.core.view.WindowCompat
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.matrix.api.auth.MatrixAuthenticationService
 import io.element.android.libraries.matrix.impl.auth.RustMatrixAuthenticationService
 import io.element.android.libraries.sessionstorage.impl.memory.InMemorySessionStore

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/ScreenshotTest.kt

@@ -38,7 +38,7 @@ import com.airbnb.android.showkase.models.Showkase
 import com.android.ide.common.rendering.api.SessionParams
 import com.google.testing.junit.testparameterinjector.TestParameter
 import com.google.testing.junit.testparameterinjector.TestParameterInjector
-import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.designsystem.utils.LocalSnackbarDispatcher
 import io.element.android.libraries.designsystem.utils.SnackbarDispatcher
 import org.junit.Rule

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Body Large,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e32421c7814394247655f198ae6466f3011478ab30019d15cb951be40e6b70ec
+size 8190

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Body Medium,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92811ffa031d8d61593e9040214ca45056a02d81f2de76c46c57606de05dcbb4
+size 8041

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Body Small,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6b3c972ef288022f40478133fa66c822d051e39b427d1f2cfd3434417c0f885f
+size 7229

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Headline Large,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:43eb2e8c816159ee75836569f8b3264acd5d0561fec70f5645e72c37604d6af3
+size 12480

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Headline Medium,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:06a9e835c3c349bddaae22024457c66bbed7e425dbd289bba728c2c9cc8a1b91
+size 11763

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Headline Small,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b285f487ae95f4bf599da529ef4cc13b861717722ea9349324446ab8ba6d0e4e
+size 9973

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Label Large,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2b47ee31afffe2a6d12ddc3404f73662bb416d0299e170c8832db69e4fd22cfe
+size 7630

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Label Medium,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd0708db595e85815a474c9c67f12e826e24527a37bd19eb29d2a2e25480d935
+size 7416

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Label Small,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1a99561c83e130159a788ef0b3966407d9762afd98f6039622a24b1db80361b
+size 6783

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Title Large,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3193b06fff17f1d0489569233578a71935f2d515748fe8aff22395f1ba39a847
+size 8646

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Title Medium,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f37c0b5b314d68e49c0137d7142460ff9aba5a6301a447f45f77b813fb4d1b3b
+size 8005

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Compound_M3 Title Small,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:058960a1b5b76cd6af96adf44cdba466ed4241632aa1ba700d6034159209ba21
+size 7242

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_Body Large,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:77dcd8feab45cb713f3ee6cdc8ad86189e73176e0eff88494a2cb109431ddb33
+oid sha256:b890e242878fde4f516b0cd7e18a27144c8f45751e78b9e4b71df25f960d3c23
-size 7097
+size 7346

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_Body1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e60a495255bf6048af20f1cd7365caf6ca6f5d9e97bbf1519ce469f3cccec958
+oid sha256:8d9439b1152f64883f840c3d6dc24860dfc60443b664f8cc1f13e61e2107468e
-size 6064
+size 6178

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_BodySmall,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3025338830e0e20781a727ef61751be208d2c633e271f42fe91dbf89df43dbf5
+oid sha256:998406b633aee537e05c16a0bcdf99f2ca6eb0c10be56e47e628bc5fe28f7cf4
-size 6681
+size 6911

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_H1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c68a348292da117047095d945c7b3fa764e4894fbc25354a88607af33378b90
+oid sha256:0e7194a4ec66200dd15b366b0164014c555011e588a57f16977520cfdad847e2
-size 4775
+size 4803

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_Headline Large,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8960ee49f84a98f0c309ea2d3cc208bfdf493c8843066830ee228e0c3b25634
+oid sha256:1e2bd1ad9eeadd3f38bfc5dcf5757f34ab0e6d5fb6eb16797fac8ff4f852317f
-size 9695
+size 10221

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[Typo_Element_Headline Medium,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dcfab4f43c1a796c9166116285353c4351182db3d5417f657c8a48e9798c6e87
+oid sha256:2582d7170cd8f73bd17a99330eaedbc99b0da499a6b4b83dd51d06a5634d7d7c
-size 9589
+size 10113