Use ElementTheme instead of MaterialTheme

This commit is contained in:
Benoit Marty 2025-01-31 18:22:29 +01:00
parent 4f5155c314
commit 07d4778ae5
59 changed files with 156 additions and 187 deletions

View file

@ -7,24 +7,24 @@
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.compound.theme.ElementTheme
@Composable
fun Boolean.toEnabledColor(): Color {
return if (this) {
MaterialTheme.colorScheme.primary
ElementTheme.colors.textPrimary
} else {
MaterialTheme.colorScheme.primary.copy(alpha = 0.40f)
ElementTheme.colors.textDisabled
}
}
@Composable
fun Boolean.toSecondaryEnabledColor(): Color {
return if (this) {
MaterialTheme.colorScheme.secondary
ElementTheme.colors.textSecondary
} else {
MaterialTheme.colorScheme.secondary.copy(alpha = 0.40f)
ElementTheme.colors.textDisabled
}
}

View file

@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -45,7 +44,7 @@ fun RoundedIconAtom(
size: RoundedIconAtomSize = RoundedIconAtomSize.Big,
resourceId: Int? = null,
imageVector: ImageVector? = null,
tint: Color = MaterialTheme.colorScheme.secondary,
tint: Color = ElementTheme.colors.iconSecondary,
backgroundTint: Color = ElementTheme.colors.temporaryColorBgSpecial,
) {
Box(

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
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
@ -51,7 +50,7 @@ fun IconTitleSubtitleMolecule(
.fillMaxWidth(),
textAlign = TextAlign.Center,
style = ElementTheme.typography.fontHeadingMdBold,
color = MaterialTheme.colorScheme.primary,
color = ElementTheme.colors.textPrimary,
)
if (subTitle != null) {
Spacer(Modifier.height(8.dp))
@ -60,7 +59,7 @@ fun IconTitleSubtitleMolecule(
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = ElementTheme.typography.fontBodyMdRegular,
color = MaterialTheme.colorScheme.secondary,
color = ElementTheme.colors.textSecondary,
)
}
}

View file

@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.movableContentOf
import androidx.compose.runtime.remember
@ -46,7 +45,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
fun HeaderFooterPage(
modifier: Modifier = Modifier,
paddingValues: PaddingValues = PaddingValues(20.dp),
containerColor: Color = MaterialTheme.colorScheme.background,
containerColor: Color = ElementTheme.colors.bgCanvasDefault,
isScrollable: Boolean = false,
background: @Composable () -> Unit = {},
topBar: @Composable () -> Unit = {},

View file

@ -9,13 +9,13 @@ package io.element.android.libraries.designsystem.background
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.center
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RadialGradientShader
import androidx.compose.ui.graphics.ShaderBrush
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -25,7 +25,7 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@Composable
fun LightGradientBackground(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colorScheme.background,
backgroundColor: Color = ElementTheme.colors.bgCanvasDefault,
firstColor: Color = Color(0x1E0DBD8B),
secondColor: Color = Color(0x001273EB),
ratio: Float = 642 / 775f,

View file

@ -9,11 +9,11 @@ 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.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.theme.components.Checkbox
@ -38,7 +38,7 @@ fun LabelledCheckbox(
)
Text(
text = text,
color = MaterialTheme.colorScheme.primary,
color = ElementTheme.colors.textPrimary,
)
}
}

View file

@ -26,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
@ -64,13 +65,13 @@ fun ProgressDialog(
when (type) {
is ProgressDialogType.Indeterminate -> {
CircularProgressIndicator(
color = MaterialTheme.colorScheme.primary
color = ElementTheme.colors.iconPrimary
)
}
is ProgressDialogType.Determinate -> {
CircularProgressIndicator(
progress = { type.progress },
color = MaterialTheme.colorScheme.primary
color = ElementTheme.colors.iconPrimary
)
}
}
@ -93,7 +94,7 @@ private fun ProgressDialogContent(
onCancelClick: () -> Unit = {},
progressIndicator: @Composable () -> Unit = {
CircularProgressIndicator(
color = MaterialTheme.colorScheme.primary
color = ElementTheme.colors.iconPrimary
)
}
) {
@ -114,7 +115,7 @@ private fun ProgressDialogContent(
Spacer(modifier = Modifier.height(22.dp))
Text(
text = text,
color = MaterialTheme.colorScheme.primary,
color = ElementTheme.colors.textPrimary,
)
}
if (showCancelButton) {

View file

@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@ -58,17 +57,16 @@ fun MainActionButton(
.widthIn(min = 76.dp, max = 96.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
val tintColor = if (enabled) LocalContentColor.current else MaterialTheme.colorScheme.secondary
Icon(
imageVector = imageVector,
contentDescription = contentDescription,
tint = tintColor,
tint = if (enabled) LocalContentColor.current else ElementTheme.colors.iconDisabled,
)
Spacer(modifier = Modifier.height(14.dp))
Text(
title,
style = ElementTheme.typography.fontBodyMdMedium.copy(hyphens = Hyphens.Auto),
color = tintColor,
color = if (enabled) LocalContentColor.current else ElementTheme.colors.textDisabled,
overflow = TextOverflow.Visible,
textAlign = TextAlign.Center,
)

View file

@ -159,7 +159,7 @@ internal fun SimpleAlertDialogContent(
// most cases, TextButtons should be used for dismiss and confirm buttons.
// TextButtons will not consume this provided content color value, and will used their
// own defined or default colors.
buttonContentColor = MaterialTheme.colorScheme.primary,
buttonContentColor = ElementTheme.colors.textPrimary,
applyPaddingToContents = applyPaddingToContents,
)
}

View file

@ -10,10 +10,10 @@ 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.compound.theme.ElementTheme
import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@ -48,7 +48,7 @@ private fun ContentToPreview() {
shape = AlertDialogDefaults.shape,
containerColor = AlertDialogDefaults.containerColor,
tonalElevation = AlertDialogDefaults.TonalElevation,
buttonContentColor = MaterialTheme.colorScheme.primary,
buttonContentColor = ElementTheme.colors.textPrimary,
iconContentColor = AlertDialogDefaults.iconContentColor,
titleContentColor = AlertDialogDefaults.titleContentColor,
textContentColor = AlertDialogDefaults.textContentColor,

View file

@ -9,12 +9,12 @@ 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.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
@ -35,7 +35,7 @@ internal fun TimePickerHorizontalPreview() {
shape = AlertDialogDefaults.shape,
containerColor = AlertDialogDefaults.containerColor,
tonalElevation = AlertDialogDefaults.TonalElevation,
buttonContentColor = MaterialTheme.colorScheme.primary,
buttonContentColor = ElementTheme.colors.textPrimary,
iconContentColor = AlertDialogDefaults.iconContentColor,
titleContentColor = AlertDialogDefaults.titleContentColor,
textContentColor = AlertDialogDefaults.textContentColor,
@ -57,7 +57,7 @@ internal fun TimePickerVerticalLightPreview() {
shape = AlertDialogDefaults.shape,
containerColor = AlertDialogDefaults.containerColor,
tonalElevation = AlertDialogDefaults.TonalElevation,
buttonContentColor = MaterialTheme.colorScheme.primary,
buttonContentColor = ElementTheme.colors.textPrimary,
iconContentColor = AlertDialogDefaults.iconContentColor,
titleContentColor = AlertDialogDefaults.titleContentColor,
textContentColor = AlertDialogDefaults.textContentColor,
@ -83,7 +83,7 @@ internal fun TimePickerVerticalDarkPreview() {
shape = AlertDialogDefaults.shape,
containerColor = AlertDialogDefaults.containerColor,
tonalElevation = AlertDialogDefaults.TonalElevation,
buttonContentColor = MaterialTheme.colorScheme.primary,
buttonContentColor = ElementTheme.colors.textPrimary,
iconContentColor = AlertDialogDefaults.iconContentColor,
titleContentColor = AlertDialogDefaults.titleContentColor,
textContentColor = AlertDialogDefaults.textContentColor,