Sulkta-Coop/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ElementTheme + MaterialTheme3

Browse source
This commit is contained in:
Benoit Marty 2023-02-03 10:15:30 +01:00 • committed by Benoit Marty
parent 47186c6af1
commit bbe10382b0
52 changed files with 202 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

12
features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt
View file

@ -31,6 +31,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
@ -50,7 +51,6 @@ import io.element.android.libraries.designsystem.components.VectorIcon
import io.element.android.libraries.designsystem.components.form.textFieldState
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.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@ -86,7 +86,7 @@ fun ChangeServerView(
.size(width = 81.dp, height = 73.dp)
.align(Alignment.CenterHorizontally)
.background(
color = ElementTheme.colors.surfaceVariant,
color = MaterialTheme.colorScheme.surfaceVariant,
shape = RoundedCornerShape(32.dp)
)
) {
@ -108,7 +108,7 @@ fun ChangeServerView(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
Text(
text = "A server is a home for all your data.\n" +
@ -119,7 +119,7 @@ fun ChangeServerView(
.padding(top = 16.dp),
textAlign = TextAlign.Center,
fontSize = 16.sp,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
)
var homeserverFieldState by textFieldState(stateValue = state.homeserver)
OutlinedTextField(
@ -150,8 +150,8 @@ fun ChangeServerView(
state.homeserver,
state.changeServerAction.error
),
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}

7
features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt
View file

@ -30,6 +30,7 @@ import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -98,7 +99,7 @@ fun LoginRootScreen(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Form
Column(
@ -189,8 +190,8 @@ fun LoginRootScreen(
if (state.loggedInState is LoggedInState.ErrorLoggingIn) {
Text(
text = loginError(state.formState, state.loggedInState.failure),
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}

3
features/messages/build.gradle.kts
View file

@ -47,7 +47,4 @@ dependencies {
testImplementation(libs.test.junit)
androidTestImplementation(libs.test.junitext)
ksp(libs.showkase.processor)
// Not for components, but other classes.
implementation("androidx.compose.material3:material3")
}

6
features/messages/src/main/kotlin/io/element/android/features/messages/actionlist/ActionListView.kt
View file

@ -32,6 +32,7 @@ import androidx.compose.material.LocalContentColor
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
@ -42,7 +43,6 @@ import androidx.compose.ui.unit.dp
import io.element.android.features.messages.actionlist.model.TimelineItemAction
import io.element.android.features.messages.timeline.model.TimelineItem
import io.element.android.libraries.designsystem.components.VectorIcon
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheetLayout
import kotlinx.coroutines.flow.filter
import kotlinx.coroutines.launch
@ -115,13 +115,13 @@ private fun SheetContent(
text = {
Text(
text = action.title,
color = if (action.destructive) ElementTheme.colors.error else Color.Unspecified,
color = if (action.destructive) MaterialTheme.colorScheme.error else Color.Unspecified,
)
},
icon = {
VectorIcon(
resourceId = action.icon,
tint = if (action.destructive) ElementTheme.colors.error else LocalContentColor.current,
tint = if (action.destructive) MaterialTheme.colorScheme.error else LocalContentColor.current,
)
}
)

9
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt
View file

@ -39,6 +39,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
@ -269,7 +270,7 @@ private fun MessageSenderInformation(
}
Text(
text = sender,
style = ElementTheme.typography.titleMedium,
style = MaterialTheme.typography.titleMedium,
modifier = Modifier
.alignBy(LastBaseline)
)
@ -328,8 +329,8 @@ internal fun BoxScope.TimelineScrollHelper(
modifier = Modifier
.align(Alignment.BottomCenter)
.size(40.dp),
containerColor = ElementTheme.colors.surfaceVariant,
contentColor = ElementTheme.colors.onSurfaceVariant
containerColor = MaterialTheme.colorScheme.surfaceVariant,
contentColor = MaterialTheme.colorScheme.onSurfaceVariant
) {
Icon(Icons.Default.ArrowDownward, "")
}
@ -347,7 +348,7 @@ internal fun TimelineLoadingMoreIndicator() {
) {
CircularProgressIndicator(
strokeWidth = 2.dp,
color = ElementTheme.colors.primary
color = MaterialTheme.colorScheme.primary
)
}
}

7
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemImageView.kt
View file

@ -14,14 +14,12 @@
* limitations under the License.
*/
@file:OptIn(ExperimentalFoundationApi::class)
package io.element.android.features.messages.timeline.components
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
@ -33,7 +31,6 @@ import androidx.compose.ui.platform.LocalContext
import coil.compose.AsyncImage
import coil.request.ImageRequest
import io.element.android.features.messages.timeline.model.content.TimelineItemImageContent
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun TimelineItemImageView(
@ -60,7 +57,7 @@ fun TimelineItemImageView(
AsyncImage(
model = model,
contentDescription = null,
placeholder = ColorPainter(ElementTheme.colors.surfaceVariant),
placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
contentScale = ContentScale.Crop,
onSuccess = { isLoading.value = false },
)

6
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemInformativeView.kt
View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -32,7 +33,6 @@ 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.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
@ -49,14 +49,14 @@ fun TimelineItemInformativeView(
) {
Icon(
imageVector = icon,
tint = ElementTheme.colors.secondary,
tint = MaterialTheme.colorScheme.secondary,
contentDescription = iconDescription,
modifier = Modifier.size(16.dp)
)
Spacer(modifier = Modifier.width(4.dp))
Text(
fontStyle = FontStyle.Italic,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
text = text
)

8
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemReactionsView.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -31,7 +32,6 @@ import androidx.compose.ui.unit.sp
import com.google.accompanist.flowlayout.FlowRow
import io.element.android.features.messages.timeline.model.AggregatedReaction
import io.element.android.features.messages.timeline.model.TimelineItemReactions
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
@ -56,8 +56,8 @@ fun TimelineItemReactionsView(
fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
Surface(
modifier = modifier,
color = ElementTheme.colors.surfaceVariant,
border = BorderStroke(2.dp, ElementTheme.colors.background),
color = MaterialTheme.colorScheme.surfaceVariant,
border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
shape = RoundedCornerShape(corner = CornerSize(12.dp)),
) {
Row(
@ -66,7 +66,7 @@ fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Mo
) {
Text(text = reaction.key, fontSize = 12.sp)
Spacer(modifier = Modifier.width(4.dp))
Text(text = reaction.count, color = ElementTheme.colors.secondary, fontSize = 12.sp)
Text(text = reaction.count, color = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
}
}
}

38
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/html/HtmlDocument.kt
View file

@ -25,7 +25,9 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
@ -45,8 +47,6 @@ 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.theme.ElementColors
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.permalink.PermalinkData
@ -214,7 +214,7 @@ private fun HtmlInline(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineElement(element, ElementTheme.colors)
appendInlineElement(element, MaterialTheme.colorScheme)
}
HtmlText(
text = styledText,
@ -232,7 +232,7 @@ private fun HtmlPreformatted(
) {
val isCode = pre.firstElementChild()?.normalName() == "code"
val backgroundColor =
if (isCode) ElementTheme.colors.codeBackground() else Color.Unspecified
if (isCode) MaterialTheme.colorScheme.codeBackground() else Color.Unspecified
Box(
modifier
.background(color = backgroundColor)
@ -255,7 +255,7 @@ private fun HtmlParagraph(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineChildrenElements(paragraph.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(paragraph.childNodes(), MaterialTheme.colorScheme)
}
HtmlText(
text = styledText, onClick = onTextClicked,
@ -272,7 +272,7 @@ private fun HtmlBlockquote(
onTextClicked: () -> Unit = {},
onTextLongClicked: () -> Unit = {},
) {
val color = ElementTheme.colors.onBackground
val color = MaterialTheme.colorScheme.onBackground
Box(
modifier = modifier
.drawBehind {
@ -287,7 +287,7 @@ private fun HtmlBlockquote(
) {
val text = buildAnnotatedString {
withStyle(style = SpanStyle(fontStyle = FontStyle.Italic)) {
appendInlineChildrenElements(blockquote.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(blockquote.childNodes(), MaterialTheme.colorScheme)
}
}
HtmlText(
@ -306,19 +306,19 @@ private fun HtmlHeading(
onTextLongClicked: () -> Unit = {},
) {
val style = when (heading.normalName()) {
"h1" -> ElementTheme.typography.headlineLarge.copy(fontSize = 30.sp)
"h2" -> ElementTheme.typography.headlineLarge.copy(fontSize = 26.sp)
"h3" -> ElementTheme.typography.headlineMedium.copy(fontSize = 22.sp)
"h4" -> ElementTheme.typography.headlineMedium.copy(fontSize = 18.sp)
"h5" -> ElementTheme.typography.headlineSmall.copy(fontSize = 14.sp)
"h6" -> ElementTheme.typography.headlineSmall.copy(fontSize = 12.sp)
"h1" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 30.sp)
"h2" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 26.sp)
"h3" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 22.sp)
"h4" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 18.sp)
"h5" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 14.sp)
"h6" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 12.sp)
else -> {
return
}
}
Box(modifier) {
val text = buildAnnotatedString {
appendInlineChildrenElements(heading.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(heading.childNodes(), MaterialTheme.colorScheme)
}
HtmlText(
text = text,
@ -344,7 +344,7 @@ private fun HtmlMxReply(
modifier = modifier
.padding(bottom = 4.dp)
.offset(x = -(8.dp)),
color = ElementTheme.colors.background,
color = MaterialTheme.colorScheme.background,
shape = shape,
) {
val text = buildAnnotatedString {
@ -354,7 +354,7 @@ private fun HtmlMxReply(
withStyle(
style = SpanStyle(
fontSize = 12.sp,
color = ElementTheme.colors.secondary
color = MaterialTheme.colorScheme.secondary
)
) {
append(blockquoteNode.text())
@ -462,13 +462,13 @@ private fun HtmlListItems(
}
}
private fun ElementColors.codeBackground(): Color {
private fun ColorScheme.codeBackground(): Color {
return background.copy(alpha = 0.3f)
}
private fun AnnotatedString.Builder.appendInlineChildrenElements(
childNodes: List<Node>,
colors: ElementColors
colors: ColorScheme
) {
for (node in childNodes) {
when (node) {
@ -482,7 +482,7 @@ private fun AnnotatedString.Builder.appendInlineChildrenElements(
}
}
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ElementColors) {
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ColorScheme) {
when (element.normalName()) {
"br" -> {
append('\n')

6
features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt
View file

@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
@ -49,7 +50,6 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.components.form.textFieldState
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.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@ -97,7 +97,7 @@ fun BugReportView(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Form
Text(
@ -106,7 +106,7 @@ fun BugReportView(
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 16.dp),
fontSize = 16.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
var descriptionFieldState by textFieldState(
stateValue = state.formState.description

3
features/roomlist/build.gradle.kts
View file

@ -54,7 +54,4 @@ dependencies {
androidTestImplementation(libs.test.junitext)
ksp(libs.showkase.processor)
// Not for components, but other classes.
implementation("androidx.compose.material3:material3")
}

8
features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomListTopBar.kt
View file

@ -27,6 +27,7 @@ import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -45,7 +46,6 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.form.textFieldState
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.IconButton
import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
@ -130,7 +130,7 @@ fun SearchRoomListTopBar(
placeholder = {
Text(
text = "Search",
color = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium)
color = MaterialTheme.colorScheme.onBackground.copy(alpha = ContentAlpha.medium)
)
},
singleLine = true,
@ -144,7 +144,7 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.Close,
contentDescription = "clear",
tint = ElementTheme.colors.onBackground
tint = MaterialTheme.colorScheme.onBackground
)
}
}
@ -160,7 +160,7 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "close",
tint = ElementTheme.colors.onBackground
tint = MaterialTheme.colorScheme.onBackground
)
}
},

17
features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomSummaryRow.kt
View file

@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
@ -103,7 +104,7 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = CircleShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
)
)
Column(
@ -117,12 +118,12 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
text = room.name,
color = ElementTheme.colors.roomListRoomName,
color = MaterialTheme.roomListRoomName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
@ -131,10 +132,10 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
text = room.lastMessage?.toString().orEmpty(),
color = ElementTheme.colors.roomListRoomMessage,
color = MaterialTheme.roomListRoomMessage(),
fontSize = 14.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis
@ -149,15 +150,15 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
fontSize = 12.sp,
text = room.timestamp ?: "",
color = ElementTheme.colors.roomListRoomMessageDate,
color = MaterialTheme.roomListRoomMessageDate(),
)
Spacer(Modifier.size(4.dp))
val unreadIndicatorColor =
if (room.hasUnread) ElementTheme.colors.roomListUnreadIndicator else Color.Transparent
if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
Box(
modifier = Modifier
.size(12.dp)

5
features/template/src/main/kotlin/io/element/android/features/template/TemplateView.kt
View file

@ -17,13 +17,14 @@
package io.element.android.features.template
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
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.Text
@Composable
fun TemplateView(
@ -33,7 +34,7 @@ fun TemplateView(
Box(modifier, contentAlignment = Alignment.Center) {
Text(
"Template feature view",
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
}
}

3
libraries/designsystem/build.gradle.kts
View file

@ -31,8 +31,5 @@ android {
implementation(projects.libraries.elementresources)
implementation(projects.libraries.uiStrings)
ksp(libs.showkase.processor)
// This is the only module to have a (temporary) dependence to material3.
implementation("androidx.compose.material3:material3")
}
}

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ColorUtil.kt
View file

@ -16,15 +16,15 @@
package io.element.android.libraries.designsystem
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun Boolean.toEnabledColor(): Color {
return if (this) {
ElementTheme.colors.primary
MaterialTheme.colorScheme.primary
} else {
ElementTheme.colors.primary.copy(alpha = 0.40f)
MaterialTheme.colorScheme.primary.copy(alpha = 0.40f)
}
}

4
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
View file

@ -21,6 +21,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
@ -31,7 +32,6 @@ import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Text
import kotlinx.collections.immutable.ImmutableMap
import kotlinx.collections.immutable.persistentMapOf
@ -85,6 +85,6 @@ fun ClickableLinkText(
layoutResult.value = it
},
inlineContent = inlineContent,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
}

4
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/LabelledCheckbox.kt
View file

@ -18,13 +18,13 @@ package io.element.android.libraries.designsystem.components
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
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.Checkbox
import io.element.android.libraries.designsystem.theme.components.Text
@ -47,7 +47,7 @@ fun LabelledCheckbox(
)
Text(
text = text,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
}
}

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt
View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -31,7 +32,6 @@ import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
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.Text
@ -50,19 +50,19 @@ fun ProgressDialog(
modifier = modifier
.fillMaxWidth()
.background(
color = ElementTheme.colors.surfaceVariant,
color = MaterialTheme.colorScheme.surfaceVariant,
shape = RoundedCornerShape(8.dp)
)
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
CircularProgressIndicator(
modifier = Modifier.padding(16.dp),
color = ElementTheme.colors.onSurfaceVariant
color = MaterialTheme.colorScheme.onSurfaceVariant
)
if (!text.isNullOrBlank()) {
Text(
text = text,
color = ElementTheme.colors.onSurfaceVariant,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.padding(16.dp)
)
}

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ConfirmationDialog.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.AlertDialogDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@ -33,7 +34,6 @@ 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.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.ui.strings.R as StringR
@ -51,10 +51,10 @@ fun ConfirmationDialog(
onThirdButtonClicked: () -> Unit = {},
onDismiss: () -> Unit = {},
shape: Shape = AlertDialogDefaults.shape,
containerColor: Color = ElementTheme.colors.surfaceVariant,
iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
textContentColor: Color = ElementTheme.colors.onSurfaceVariant,
containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
textContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
) {
AlertDialog(

10
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt
View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.AlertDialogDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@ -32,7 +33,6 @@ 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.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.ui.strings.R as StringR
@ -45,10 +45,10 @@ fun ErrorDialog(
submitText: String = stringResource(id = StringR.string.ok),
onDismiss: () -> Unit = {},
shape: Shape = AlertDialogDefaults.shape,
containerColor: Color = ElementTheme.colors.surfaceVariant,
iconContentColor: Color = ElementTheme.colors.onSurfaceVariant,
titleContentColor: Color = ElementTheme.colors.onSurfaceVariant,
textContentColor: Color = ElementTheme.colors.onSurfaceVariant,
containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
iconContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
titleContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
textContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
) {
AlertDialog(

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceCategory.kt
View file

@ -23,13 +23,13 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
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.designsystem.theme.components.Divider
import io.element.android.libraries.designsystem.theme.components.Text
@ -45,12 +45,12 @@ fun PreferenceCategory(
) {
Divider(
modifier = Modifier.padding(horizontal = 16.dp),
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
thickness = 1.dp
)
Text(
modifier = Modifier.padding(top = 8.dp, start = 56.dp),
style = ElementTheme.typography.titleSmall,
style = MaterialTheme.typography.titleSmall,
text = title
)
content()

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSlide.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -31,7 +32,6 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
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.Slider
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.toEnabledColor
@ -63,14 +63,14 @@ fun PreferenceSlide(
) {
Text(
modifier = Modifier.fillMaxWidth(),
style = ElementTheme.typography.bodyLarge,
style = MaterialTheme.typography.bodyLarge,
color = enabled.toEnabledColor(),
text = title
)
summary?.let {
Text(
modifier = Modifier.fillMaxWidth(),
style = ElementTheme.typography.bodyMedium,
style = MaterialTheme.typography.bodyMedium,
color = enabled.toEnabledColor(),
text = summary
)

3
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceSwitch.kt
View file

@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Announcement
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -63,7 +64,7 @@ fun PreferenceSwitch(
)
Text(
modifier = Modifier.weight(1f),
style = ElementTheme.typography.bodyLarge,
style = MaterialTheme.typography.bodyLarge,
color = enabled.toEnabledColor(),
text = title
)

6
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
View file

@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BugReport
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -32,7 +33,6 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.components.preferences.components.PreferenceIcon
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.Text
@Composable
@ -58,9 +58,9 @@ fun PreferenceText(
modifier = Modifier
.weight(1f)
.padding(end = preferencePaddingEnd),
style = ElementTheme.typography.bodyLarge,
style = MaterialTheme.typography.bodyLarge,
text = title,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
}
}

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

@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.preview
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.element.android.libraries.designsystem.theme.ElementTheme
@ -54,7 +55,7 @@ private fun ElementPreview(
) {
ElementTheme(darkTheme = darkTheme) {
if (showBackground) {
Box(modifier = Modifier.background(ElementTheme.colors.background)) {
Box(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
content()
}
} else {

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

@ -16,14 +16,25 @@
package io.element.android.libraries.designsystem.theme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import io.element.android.libraries.designsystem.SystemGrey4Dark
import io.element.android.libraries.designsystem.SystemGrey6Light
/**
* Room list
*/
val ElementColors.roomListRoomName get() = primary
val ElementColors.roomListRoomMessage get() = secondary
val ElementColors.roomListRoomMessageDate get() = secondary
val ElementColors.roomListUnreadIndicator get() = primary
val ElementColors.roomListPlaceHolder get() = if (isLight) SystemGrey6Light else SystemGrey4Dark
@Composable
fun MaterialTheme.roomListRoomName() = colorScheme.primary
@Composable
fun MaterialTheme.roomListRoomMessage() = colorScheme.secondary
@Composable
fun MaterialTheme.roomListRoomMessageDate() = colorScheme.secondary
@Composable
fun MaterialTheme.roomListUnreadIndicator() = colorScheme.primary
@Composable
fun ElementColors.roomListPlaceHolder() = if (isLight) SystemGrey6Light else SystemGrey4Dark

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

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.theme
import androidx.compose.material3.darkColorScheme
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.designsystem.Azure
import io.element.android.libraries.designsystem.DarkGrey
@ -23,24 +24,13 @@ import io.element.android.libraries.designsystem.SystemGrey5Dark
import io.element.android.libraries.designsystem.SystemGrey6Dark
fun elementColorsDark() = ElementColors(
primary = Color.White,
onPrimary = Color.Black,
secondary = DarkGrey,
text = Color.White,
background = Color.Black,
onBackground = Color.White,
surfaceVariant = SystemGrey5Dark,
onSurfaceVariant = Color.White,
messageFromMeBackground = SystemGrey5Dark,
messageFromOtherBackground = SystemGrey6Dark,
messageHighlightedBackground = Azure,
success = Color.Green,
error = Color.Red,
isLight = false,
)
/*
private val DarkColorScheme = darkColorScheme(
val materialColorSchemeDark = darkColorScheme(
primary = Color.White,
secondary = DarkGrey,
tertiary = Color.White,
@ -50,4 +40,3 @@ private val DarkColorScheme = darkColorScheme(
surfaceVariant = SystemGrey5Dark,
onSurface = Color.White,
)
*/

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

@ -16,6 +16,7 @@
package io.element.android.libraries.designsystem.theme
import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.designsystem.Azure
import io.element.android.libraries.designsystem.LightGrey
@ -23,24 +24,13 @@ import io.element.android.libraries.designsystem.SystemGrey5Light
import io.element.android.libraries.designsystem.SystemGrey6Light
fun elementColorsLight() = ElementColors(
primary = Color.Black,
onPrimary = Color.White,
secondary = LightGrey,
text = Color.Black,
background = Color.White,
onBackground = Color.Black,
surfaceVariant = SystemGrey5Light,
onSurfaceVariant = Color.Black,
messageFromMeBackground = SystemGrey5Light,
messageFromOtherBackground = SystemGrey6Light,
messageHighlightedBackground = Azure,
success = Color.Green,
error = Color.Red,
isLight = true,
)
/*
private val LightColorScheme = lightColorScheme(
val materialColorSchemeLight = lightColorScheme(
primary = Color.Black,
secondary = LightGrey,
tertiary = Color.Black,
@ -50,5 +40,4 @@ private val LightColorScheme = lightColorScheme(
surfaceVariant = SystemGrey5Light,
onSurface = Color.Black,
onSurfaceVariant = Color.Black,
*/
)

40
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ContentColor.kt
View file

@ -1,40 +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.LocalContentColor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.takeOrElse
@Composable
@ReadOnlyComposable
fun elementContentColorFor(backgroundColor: Color): Color {
return ElementTheme.colors.elementContentColorFor(backgroundColor).takeOrElse {
LocalContentColor.current
}
}
fun ElementColors.elementContentColorFor(backgroundColor: Color): Color {
return when (backgroundColor) {
primary -> onPrimary
surfaceVariant -> onSurfaceVariant
background -> onBackground
else -> Color.Unspecified
}
}

60
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt
View file

@ -22,41 +22,11 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
class ElementColors(
primary: Color,
onPrimary: Color,
secondary: Color,
text: Color,
background: Color,
onBackground: Color,
surfaceVariant: Color,
onSurfaceVariant: Color,
messageFromMeBackground: Color,
messageFromOtherBackground: Color,
messageHighlightedBackground: Color,
success: Color,
error: Color,
isLight: Boolean,
) {
var primary by mutableStateOf(primary)
private set
var onPrimary by mutableStateOf(onPrimary)
private set
var secondary by mutableStateOf(secondary)
private set
var text by mutableStateOf(text)
private set
var success by mutableStateOf(success)
private set
var error by mutableStateOf(error)
private set
var background by mutableStateOf(background)
private set
var onBackground by mutableStateOf(onBackground)
private set
var surfaceVariant by mutableStateOf(surfaceVariant)
private set
var onSurfaceVariant by mutableStateOf(onSurfaceVariant)
private set
var messageFromMeBackground by mutableStateOf(messageFromMeBackground)
private set
var messageFromOtherBackground by mutableStateOf(messageFromOtherBackground)
@ -68,51 +38,21 @@ class ElementColors(
private set
fun copy(
primary: Color = this.primary,
onPrimary: Color = this.onPrimary,
secondary: Color = this.secondary,
text: Color = this.text,
background: Color = this.background,
onBackground: Color = this.onBackground,
surfaceVariant: Color = this.surfaceVariant,
onSurfaceVariant: Color = this.onSurfaceVariant,
messageFromMeBackground: Color = this.messageFromMeBackground,
messageFromOtherBackground: Color = this.messageFromOtherBackground,
messageHighlightedBackground: Color = this.messageHighlightedBackground,
success: Color = this.success,
error: Color = this.error,
isLight: Boolean = this.isLight,
) = ElementColors(
primary = primary,
onPrimary = onPrimary,
secondary = secondary,
text = text,
background = background,
onBackground = onBackground,
surfaceVariant = surfaceVariant,
onSurfaceVariant = onSurfaceVariant,
messageFromMeBackground = messageFromMeBackground,
messageFromOtherBackground = messageFromOtherBackground,
messageHighlightedBackground = messageHighlightedBackground,
success = success,
error = error,
isLight = isLight,
)
fun updateColorsFrom(other: ElementColors) {
primary = other.primary
onPrimary = other.onPrimary
secondary = other.secondary
text = other.text
success = other.success
background = other.background
onBackground = other.onBackground
surfaceVariant = other.surfaceVariant
onSurfaceVariant = other.onSurfaceVariant
messageFromMeBackground = other.messageFromMeBackground
messageFromOtherBackground = other.messageFromOtherBackground
messageHighlightedBackground = other.messageHighlightedBackground
error = other.error
isLight = other.isLight
}
}

27
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementSpaces.kt
View file

@ -1,27 +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.ui.unit.Dp
import androidx.compose.ui.unit.dp
data class ElementSpaces(
val small: Dp = 4.dp,
val medium: Dp = 8.dp,
val large: Dp = 16.dp,
val extraLarge: Dp = 40.dp,
)

47
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTheme.kt
View file

@ -17,7 +17,8 @@
package io.element.android.libraries.designsystem.theme
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.ProvideTextStyle
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ReadOnlyComposable
@ -35,50 +36,42 @@ object ElementTheme {
@Composable
@ReadOnlyComposable
get() = LocalColors.current
val typography: ElementTypography
@Composable
@ReadOnlyComposable
get() = LocalTypography.current
val spaces: ElementSpaces
@Composable
@ReadOnlyComposable
get() = LocalSpaces.current
}
/* Global variables (application level) */
val LocalSpaces = staticCompositionLocalOf { ElementSpaces() }
val LocalColors = staticCompositionLocalOf { elementColorsLight() }
val LocalTypography = staticCompositionLocalOf { ElementTypography() }
@Composable
fun ElementTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
lightColors: ElementColors = elementColorsLight(),
darkColors: ElementColors = elementColorsDark(),
typography: ElementTypography = ElementTheme.typography,
spaces: ElementSpaces = ElementTheme.spaces,
materialLightColors: ColorScheme = materialColorSchemeLight,
materialDarkColors: ColorScheme = materialColorSchemeDark,
content: @Composable () -> Unit,
) {
val systemUiController = rememberSystemUiController()
val useDarkIcons = !darkTheme
val currentColor = remember { if (darkTheme) darkColors else lightColors }
SideEffect {
systemUiController.setStatusBarColor(
color = currentColor.background
)
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons
)
}
val rememberedColors = remember { currentColor.copy() }.apply { updateColorsFrom(currentColor) }
CompositionLocalProvider(
LocalColors provides rememberedColors,
LocalSpaces provides spaces,
LocalTypography provides typography,
) {
ProvideTextStyle(typography.body1, content = content)
MaterialTheme(
colorScheme = if (darkTheme) materialDarkColors else materialLightColors
) {
val bgColor = MaterialTheme.colorScheme.background
SideEffect {
systemUiController.setStatusBarColor(
color = bgColor
)
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons
)
}
content()
}
}
}

15
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTypography.kt
View file

@ -22,6 +22,9 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.airbnb.android.showkase.annotation.ShowkaseTypography
/**
* TODO Provide the typo to Material3 theme.
*/
@ShowkaseTypography(name = "H1", group = "Element")
val h1Default: TextStyle = TextStyle(
fontFamily = FontFamily.SansSerif,
@ -104,15 +107,3 @@ val titleMediumDefault: TextStyle = TextStyle(
letterSpacing = 0.5.sp
)
data class ElementTypography(
val h1: TextStyle = h1Default,
val body1: TextStyle = body1Default,
val bodySmall: TextStyle = bodySmallDefault,
val bodyMedium: TextStyle = bodyMediumDefault,
val bodyLarge: TextStyle = bodyLargeDefault,
val headlineSmall: TextStyle = headlineSmallDefault,
val headlineMedium: TextStyle = headlineMediumDefault,
val headlineLarge: TextStyle = headlineLargeDefault,
val titleSmall: TextStyle = titleSmallDefault,
val titleMedium: TextStyle = titleMediumDefault,
)

49
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt
View file

@ -16,55 +16,46 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material.ContentAlpha
import androidx.compose.material.ProvideTextStyle
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ButtonElevation
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
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.elementContentColorFor
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
containerColor: Color = ElementTheme.colors.primary,
shape: Shape = ButtonDefaults.shape,
colors: ButtonColors = ButtonDefaults.buttonColors(),
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
border: BorderStroke? = null,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable RowScope.() -> Unit
) {
androidx.compose.material3.Button(
colors = ButtonDefaults.buttonColors(
containerColor = containerColor,
contentColor = elementContentColorFor(backgroundColor = containerColor),
disabledContainerColor = containerColor
.copy(alpha = 0.12f)
.compositeOver(containerColor),
disabledContentColor = elementContentColorFor(backgroundColor = containerColor)
.copy(alpha = ContentAlpha.disabled)
),
// TODO shape = ButtonShape,
// TODO elevation = ButtonDefaults.elevation(
// defaultElevation = ElementTheme.elevation.default,
// pressedElevation = ElementTheme.elevation.pressed
// /* disabledElevation = 0.dp */
// ),
onClick = onClick,
modifier = modifier,
enabled = enabled,
content = {
ProvideTextStyle(
value = ElementTheme.typography.body1
) {
content()
}
}
shape = shape,
colors = colors,
elevation = elevation,
border = border,
contentPadding = contentPadding,
interactionSource = interactionSource,
content = content,
)
}

13
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Checkbox.kt
View file

@ -23,11 +23,9 @@ import androidx.compose.material3.CheckboxDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun Checkbox(
@ -35,16 +33,7 @@ fun Checkbox(
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
enabled: Boolean = true,
colors: CheckboxColors = CheckboxDefaults.colors(
checkedColor = ElementTheme.colors.primary,
uncheckedColor = Color.Gray, // TODO ElementTheme.colors.
checkmarkColor = Color.Gray, // TODO ElementTheme.colors.
disabledCheckedColor = Color.Gray // TODO ElementTheme.colors.
.copy(alpha = 0.2F),
disabledUncheckedColor = Color.Gray // TODO ElementTheme.colors.
.copy(alpha = 0.2F),
disabledIndeterminateColor = Color.Gray // TODO ElementTheme.colors.
),
colors: CheckboxColors = CheckboxDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {
androidx.compose.material3.Checkbox(

3
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt
View file

@ -21,7 +21,6 @@ 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
@Composable
fun CircularProgressIndicator(
@ -41,7 +40,7 @@ fun CircularProgressIndicator(
@Composable
fun CircularProgressIndicator(
modifier: Modifier = Modifier,
color: Color = ElementTheme.colors.primary,
color: Color = ProgressIndicatorDefaults.circularColor,
strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
) {
androidx.compose.material3.CircularProgressIndicator(

3
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Divider.kt
View file

@ -24,13 +24,12 @@ 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
@Composable
fun Divider(
modifier: Modifier = Modifier,
thickness: Dp = DividerDefaults.Thickness,
color: Color = ElementTheme.colors.onBackground,
color: Color = DividerDefaults.color,
) {
androidx.compose.material3.Divider(
modifier = modifier,

9
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt
View file

@ -24,7 +24,6 @@ import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.element.android.libraries.designsystem.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -34,13 +33,7 @@ fun MediumTopAppBar(
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(
containerColor = ElementTheme.colors.background,
scrolledContainerColor = ElementTheme.colors.background,
navigationIconContentColor = ElementTheme.colors.onBackground,
titleContentColor = ElementTheme.colors.onBackground,
actionIconContentColor = ElementTheme.colors.onBackground,
),
colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
androidx.compose.material3.MediumTopAppBar(

9
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt
View file

@ -22,14 +22,13 @@ import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalBottomSheetDefaults
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.contentColorFor
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.elementContentColorFor
@OptIn(ExperimentalMaterialApi::class)
@Composable
@ -39,9 +38,9 @@ fun ModalBottomSheetLayout(
sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden),
sheetShape: Shape = MaterialTheme.shapes.large,
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
sheetBackgroundColor: Color = ElementTheme.colors.surfaceVariant,
sheetContentColor: Color = elementContentColorFor(sheetBackgroundColor),
scrimColor: Color = ElementTheme.colors.onSurfaceVariant.copy(alpha = 0.32f),
sheetBackgroundColor: Color = MaterialTheme.colors.surface,
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
content: @Composable () -> Unit = {}
) {
androidx.compose.material.ModalBottomSheetLayout(

37
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/OutlinedTextField.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.TextFieldColors
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@ -35,7 +36,6 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.ElementGreen
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -59,6 +59,7 @@ fun OutlinedTextField(
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = TextFieldDefaults.outlinedShape,
colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
) {
androidx.compose.material3.OutlinedTextField(
value = value,
@ -80,39 +81,7 @@ fun OutlinedTextField(
maxLines = maxLines,
interactionSource = interactionSource,
shape = shape,
colors = TextFieldDefaults.outlinedTextFieldColors(
textColor = ElementTheme.colors.primary,
disabledTextColor = ElementTheme.colors.primary.copy(alpha = 0.38f),
containerColor = Color.Transparent,
cursorColor = ElementTheme.colors.primary,
errorCursorColor = ElementTheme.colors.error,
selectionColors = TextSelectionColors(
handleColor = ElementGreen,
backgroundColor = ElementGreen.copy(alpha = 0.4f)
),
focusedBorderColor = ElementTheme.colors.primary,
unfocusedBorderColor = ElementTheme.colors.secondary,
disabledBorderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
errorBorderColor = ElementTheme.colors.error,
focusedLeadingIconColor = ElementTheme.colors.primary,
unfocusedLeadingIconColor = ElementTheme.colors.secondary,
disabledLeadingIconColor = ElementTheme.colors.secondary.copy(0.12f),
errorLeadingIconColor = ElementTheme.colors.error,
focusedTrailingIconColor = ElementTheme.colors.primary,
unfocusedTrailingIconColor = ElementTheme.colors.secondary,
disabledTrailingIconColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
errorTrailingIconColor = ElementTheme.colors.error,
focusedLabelColor = ElementTheme.colors.primary,
unfocusedLabelColor = ElementTheme.colors.secondary,
disabledLabelColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
errorLabelColor = ElementTheme.colors.error,
placeholderColor = ElementTheme.colors.secondary,
disabledPlaceholderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f),
focusedSupportingTextColor = ElementTheme.colors.primary,
unfocusedSupportingTextColor = ElementTheme.colors.secondary,
disabledSupportingTextColor = ElementTheme.colors.primary.copy(alpha = 0.12f),
errorSupportingTextColor = ElementTheme.colors.error,
),
colors = colors,
)
}

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Scaffold.kt
View file

@ -20,12 +20,12 @@ import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ScaffoldDefaults
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.elementContentColorFor
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -36,8 +36,8 @@ fun Scaffold(
snackbarHost: @Composable () -> Unit = {},
floatingActionButton: @Composable () -> Unit = {},
floatingActionButtonPosition: FabPosition = FabPosition.End,
containerColor: Color = ElementTheme.colors.background,
contentColor: Color = elementContentColorFor(containerColor),
containerColor: Color = MaterialTheme.colorScheme.background,
contentColor: Color = contentColorFor(containerColor),
contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
content: @Composable (PaddingValues) -> Unit
) {

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

@ -18,6 +18,7 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SliderColors
import androidx.compose.material3.SliderDefaults
import androidx.compose.runtime.Composable
@ -26,7 +27,6 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun Slider(
@ -38,18 +38,7 @@ fun Slider(
/*@IntRange(from = 0)*/
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
colors: SliderColors = SliderDefaults.colors(
thumbColor = ElementTheme.colors.primary,
activeTrackColor = ElementTheme.colors.primary,
activeTickColor = ElementTheme.colors.primary,
inactiveTrackColor = ElementTheme.colors.primary,
inactiveTickColor = ElementTheme.colors.primary,
disabledThumbColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
disabledActiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
disabledActiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
disabledInactiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
disabledInactiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
),
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {
androidx.compose.material3.Slider(

8
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt
View file

@ -17,6 +17,8 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.BorderStroke
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@ -24,15 +26,13 @@ import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.elementContentColorFor
@Composable
fun Surface(
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
color: Color = ElementTheme.colors.surfaceVariant,
contentColor: Color = elementContentColorFor(color),
color: Color = MaterialTheme.colorScheme.surface,
contentColor: Color = contentColorFor(color),
tonalElevation: Dp = 0.dp,
shadowElevation: Dp = 0.dp,
border: BorderStroke? = null,

12
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt
View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.ContentAlpha
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.TextFieldColors
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@ -30,7 +31,6 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.VisualTransformation
import io.element.android.libraries.designsystem.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -54,6 +54,7 @@ fun TextField(
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = TextFieldDefaults.filledShape,
colors: TextFieldColors = TextFieldDefaults.textFieldColors()
) {
androidx.compose.material3.TextField(
value = value,
@ -75,13 +76,6 @@ fun TextField(
maxLines = maxLines,
interactionSource = interactionSource,
shape = shape,
colors = TextFieldDefaults.textFieldColors(
textColor = ElementTheme.colors.onBackground,
containerColor = Color.Transparent,
cursorColor = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium),
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
colors = colors,
)
}

9
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt
View file

@ -24,7 +24,6 @@ import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.element.android.libraries.designsystem.theme.ElementTheme
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -34,13 +33,7 @@ fun TopAppBar(
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = ElementTheme.colors.background,
scrolledContainerColor = ElementTheme.colors.background,
navigationIconContentColor = ElementTheme.colors.onBackground,
titleContentColor = ElementTheme.colors.onBackground,
actionIconContentColor = ElementTheme.colors.onBackground,
),
colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
androidx.compose.material3.TopAppBar(

6
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserHeader.kt
View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -36,7 +37,6 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
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.Text
import io.element.android.libraries.matrix.core.UserId
import io.element.android.libraries.matrix.ui.model.MatrixUser
@ -67,14 +67,14 @@ fun MatrixUserHeader(
text = matrixUser.getBestName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Id
if (matrixUser.username.isNullOrEmpty().not()) {
Spacer(modifier = Modifier.height(4.dp))
Text(
text = matrixUser.id.value,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis

6
libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt
View file

@ -23,6 +23,7 @@ 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.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -35,7 +36,6 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
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.Text
import io.element.android.libraries.matrix.core.UserId
import io.element.android.libraries.matrix.ui.model.MatrixUser
@ -71,13 +71,13 @@ fun MatrixUserRow(
text = matrixUser.getBestName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Id
if (matrixUser.username.isNullOrEmpty().not()) {
Text(
text = matrixUser.id.value,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis

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

@ -21,6 +21,7 @@ import android.net.Uri
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -34,7 +35,6 @@ import androidx.core.view.isInvisible
import androidx.core.view.isVisible
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.Text
import io.element.android.libraries.ui.strings.R as StringR
@ -127,7 +127,7 @@ private fun FakeComposer(
textAlign = TextAlign.Center,
text = "Composer Preview",
fontSize = 20.sp,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
)
}
}

1
plugins/src/main/kotlin/extension/DependencyHandleScope.kt
View file

@ -38,6 +38,7 @@ fun DependencyHandlerScope.composeDependencies() {
androidTestImplementation(composeBom)
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.material:material")
implementation("androidx.compose.material3:material3")
implementation("androidx.compose.material:material-icons-extended")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.activity:activity-compose:1.6.1")

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

@ -24,6 +24,7 @@ import androidx.activity.OnBackPressedDispatcherOwner
import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
@ -74,7 +75,6 @@ class ScreenshotTest {
@TestParameter(valuesProvider = PreviewProvider::class) componentTestPreview: TestPreview,
@TestParameter baseDeviceConfig: BaseDeviceConfig,
@TestParameter(value = ["1.0"/*, "1.5"*/]) fontScale: Float,
@TestParameter(value = ["light", "dark"]) theme: String,
@TestParameter(value = ["en" /*"fr", "de", "ru"*/]) localeStr: String,
) {
paparazzi.unsafeUpdateConfig(
@ -100,8 +100,8 @@ class ScreenshotTest {
override fun getOnBackPressedDispatcher() = OnBackPressedDispatcher()
}
) {
ElementTheme(darkTheme = (theme == "dark")) {
Box(modifier = Modifier.background(ElementTheme.colors.background)) {
ElementTheme {
Box(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
componentTestPreview.Content()
}
}

4
tests/uitests/src/test/kotlin/io/element/android/tests/uitests/TypographyTestPreview.kt
View file

@ -19,11 +19,11 @@ package io.element.android.tests.uitests
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicText
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.airbnb.android.showkase.models.ShowkaseBrowserTypography
import com.airbnb.android.showkase.ui.padding4x
import io.element.android.libraries.designsystem.theme.ElementTheme
import java.util.Locale
class TypographyTestPreview(
@ -39,7 +39,7 @@ class TypographyTestPreview(
.fillMaxWidth()
.padding(padding4x),
style = showkaseBrowserTypography.textStyle.copy(
color = ElementTheme.colors.onBackground
color = MaterialTheme.colorScheme.onBackground
)
)
}