feat(ui): fine-tune colors (#899)
* fix(ui): migrate feed page to surface container * fix: remove tonal elevation for feed list * fix(ui): add fixed color roles
This commit is contained in:
junkfood
GitHub
parent
368ed14801
commit
e55f2c976a
@ -52,7 +52,7 @@ fun FeedItem(
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp)
|
||||
.clip(if (isEnded()) ShapeBottom32 else RectangleShape)
|
||||
.background(MaterialTheme.colorScheme.secondary.copy(alpha = alpha))
|
||||
.background(MaterialTheme.colorScheme.surfaceContainerLow)
|
||||
.combinedClickable(
|
||||
onClick = {
|
||||
onClick()
|
||||
@ -88,9 +88,7 @@ fun FeedItem(
|
||||
}
|
||||
if ((feed.important ?: 0) != 0) {
|
||||
Badge(
|
||||
containerColor = MaterialTheme.colorScheme.surfaceTint.copy(
|
||||
alpha = badgeAlpha
|
||||
),
|
||||
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
|
||||
contentColor = MaterialTheme.colorScheme.outline,
|
||||
content = {
|
||||
Text(
|
||||
|
||||
@ -210,7 +210,7 @@ fun FeedsPage(
|
||||
|
||||
RYScaffold(
|
||||
topBarTonalElevation = topBarTonalElevation.value.dp,
|
||||
containerTonalElevation = groupListTonalElevation.value.dp,
|
||||
// containerTonalElevation = groupListTonalElevation.value.dp,
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
modifier = Modifier.clickable(
|
||||
|
||||
@ -51,7 +51,7 @@ fun GroupItem(
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp)
|
||||
.clip(if (isExpanded() && !roundedBottomCorner()) ShapeTop32 else Shape32)
|
||||
.background(MaterialTheme.colorScheme.secondary.copy(alpha = alpha))
|
||||
.background(MaterialTheme.colorScheme.surfaceContainerLow)
|
||||
.combinedClickable(
|
||||
onClick = {
|
||||
groupOnClick()
|
||||
@ -84,7 +84,7 @@ fun GroupItem(
|
||||
.padding(end = 20.dp)
|
||||
.size(24.dp)
|
||||
.clip(CircleShape)
|
||||
.background(MaterialTheme.colorScheme.surfaceTint.copy(alpha = indicatorAlpha))
|
||||
.background(MaterialTheme.colorScheme.surfaceContainerHigh)
|
||||
.clickable { onExpanded() },
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
|
||||
@ -33,6 +33,8 @@ import me.ash.reader.R
|
||||
import me.ash.reader.domain.model.account.Account
|
||||
import me.ash.reader.ui.component.base.RYDialog
|
||||
import me.ash.reader.ui.ext.currentAccountId
|
||||
import me.ash.reader.ui.theme.palette.FixedColorRoles
|
||||
import me.ash.reader.ui.theme.palette.LocalFixedColorRoles
|
||||
import me.ash.reader.ui.theme.palette.alwaysLight
|
||||
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
@ -75,20 +77,21 @@ fun AccountsTab(
|
||||
}
|
||||
.padding(8.dp),
|
||||
) {
|
||||
val selected = account.id == context.currentAccountId
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(52.dp)
|
||||
.clip(CircleShape)
|
||||
.background(
|
||||
if (account.id == context.currentAccountId) {
|
||||
MaterialTheme.colorScheme.primaryContainer alwaysLight true
|
||||
if (selected) {
|
||||
LocalFixedColorRoles.current.primaryFixed
|
||||
} else {
|
||||
MaterialTheme.colorScheme.surfaceDim alwaysLight true
|
||||
MaterialTheme.colorScheme.surfaceContainerHighest
|
||||
}
|
||||
),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
AccountTypeIcon(account = account)
|
||||
AccountTypeIcon(account = account, selected = selected)
|
||||
}
|
||||
Text(
|
||||
modifier = Modifier
|
||||
@ -125,15 +128,19 @@ fun AccountsTab(
|
||||
@Composable
|
||||
fun AccountTypeIcon(
|
||||
account: Account,
|
||||
selected: Boolean
|
||||
) {
|
||||
val icon = account.type.toIcon().takeIf { it is ImageVector }?.let { it as ImageVector }
|
||||
val iconPainter = account.type.toIcon().takeIf { it is Painter }?.let { it as Painter }
|
||||
val contentColor =
|
||||
if (selected) LocalFixedColorRoles.current.onPrimaryFixed else MaterialTheme.colorScheme.onSurfaceVariant
|
||||
|
||||
if (icon != null) {
|
||||
Icon(
|
||||
modifier = Modifier.size(24.dp),
|
||||
imageVector = icon,
|
||||
contentDescription = account.name,
|
||||
tint = MaterialTheme.colorScheme.onSurface alwaysLight true
|
||||
tint = contentColor
|
||||
)
|
||||
} else {
|
||||
iconPainter?.let {
|
||||
@ -141,7 +148,7 @@ fun AccountTypeIcon(
|
||||
modifier = Modifier.size(24.dp),
|
||||
painter = it,
|
||||
contentDescription = account.name,
|
||||
tint = MaterialTheme.colorScheme.onSurface alwaysLight true
|
||||
tint = contentColor
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,9 +62,7 @@ fun FeedsPagePreview(
|
||||
modifier = Modifier
|
||||
.animateContentSize()
|
||||
.background(
|
||||
color = MaterialTheme.colorScheme.surfaceColorAtElevation(
|
||||
groupListTonalElevation.value.dp
|
||||
) onDark MaterialTheme.colorScheme.surface,
|
||||
color = MaterialTheme.colorScheme.surface,
|
||||
shape = RoundedCornerShape(24.dp)
|
||||
)
|
||||
) {
|
||||
|
||||
@ -123,7 +123,7 @@ fun FeedsPageStylePage(
|
||||
(!groupListExpand).put(context, scope)
|
||||
}
|
||||
}
|
||||
SettingItem(
|
||||
/* SettingItem(
|
||||
title = stringResource(R.string.tonal_elevation),
|
||||
desc = "${groupListTonalElevation.value}dp",
|
||||
onClick = {
|
||||
@ -131,7 +131,7 @@ fun FeedsPageStylePage(
|
||||
},
|
||||
) {}
|
||||
Tips(text = stringResource(R.string.tips_group_list_tonal_elevation))
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
Spacer(modifier = Modifier.height(24.dp))*/
|
||||
}
|
||||
|
||||
// Filter Bar
|
||||
@ -242,7 +242,7 @@ fun FeedsPageStylePage(
|
||||
topBarTonalElevationDialogVisible = false
|
||||
}
|
||||
|
||||
RadioDialog(
|
||||
/* RadioDialog(
|
||||
visible = groupListTonalElevationDialogVisible,
|
||||
title = stringResource(R.string.tonal_elevation),
|
||||
options = FeedsGroupListTonalElevationPreference.values.map {
|
||||
@ -255,5 +255,5 @@ fun FeedsPageStylePage(
|
||||
}
|
||||
) {
|
||||
groupListTonalElevationDialogVisible = false
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
@ -11,6 +11,8 @@ import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.platform.LocalView
|
||||
import me.ash.reader.infrastructure.preference.LocalBasicFonts
|
||||
import me.ash.reader.infrastructure.preference.LocalThemeIndex
|
||||
import me.ash.reader.ui.theme.palette.FixedColorRoles
|
||||
import me.ash.reader.ui.theme.palette.LocalFixedColorRoles
|
||||
import me.ash.reader.ui.theme.palette.LocalTonalPalettes
|
||||
import me.ash.reader.ui.theme.palette.TonalPalettes
|
||||
import me.ash.reader.ui.theme.palette.core.ProvideZcamViewingConditions
|
||||
@ -59,15 +61,21 @@ fun AppTheme(
|
||||
LocalTonalPalettes provides tonalPalettes.apply { Preparing() },
|
||||
LocalTextStyle provides LocalTextStyle.current.applyTextDirection()
|
||||
) {
|
||||
MaterialTheme(
|
||||
colorScheme =
|
||||
if (useDarkTheme) dynamicDarkColorScheme()
|
||||
else dynamicLightColorScheme(),
|
||||
typography = LocalBasicFonts.current.asTypography(LocalContext.current)
|
||||
.applyTextDirection(),
|
||||
shapes = Shapes,
|
||||
content = content,
|
||||
)
|
||||
val lightColors = dynamicLightColorScheme()
|
||||
val darkColors = dynamicDarkColorScheme()
|
||||
CompositionLocalProvider(
|
||||
LocalFixedColorRoles provides FixedColorRoles.fromColorSchemes(
|
||||
lightColors, darkColors
|
||||
)
|
||||
) {
|
||||
MaterialTheme(
|
||||
colorScheme = if (useDarkTheme) darkColors else lightColors,
|
||||
typography = LocalBasicFonts.current.asTypography(LocalContext.current)
|
||||
.applyTextDirection(),
|
||||
shapes = Shapes,
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,10 +89,10 @@ fun dynamicDarkColorScheme(): ColorScheme {
|
||||
).run {
|
||||
if (useAmoledDarkTheme) copy(
|
||||
surface = Color.Black,
|
||||
surfaceContainerHighest = surfaceContainerLowest,
|
||||
surfaceContainerHigh = palettes neutral 3,
|
||||
surfaceContainer = palettes neutral 2,
|
||||
surfaceContainerLow = palettes neutral 1,
|
||||
surfaceContainerHighest = palettes neutral 8,
|
||||
surfaceContainerHigh = palettes neutral 6,
|
||||
surfaceContainer = palettes neutral 4,
|
||||
surfaceContainerLow = palettes neutral 4,
|
||||
surfaceContainerLowest = Color.Black,
|
||||
) else this
|
||||
}
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
package me.ash.reader.ui.theme.palette
|
||||
|
||||
import androidx.compose.material3.ColorScheme
|
||||
import androidx.compose.material3.darkColorScheme
|
||||
import androidx.compose.material3.lightColorScheme
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.Stable
|
||||
import androidx.compose.runtime.staticCompositionLocalOf
|
||||
import androidx.compose.ui.graphics.Color
|
||||
|
||||
val LocalFixedColorRoles = staticCompositionLocalOf {
|
||||
FixedColorRoles.fromColorSchemes(
|
||||
lightColors = lightColorScheme(),
|
||||
darkColors = darkColorScheme(),
|
||||
)
|
||||
}
|
||||
|
||||
@Immutable
|
||||
data class FixedColorRoles(
|
||||
val primaryFixed: Color,
|
||||
val primaryFixedDim: Color,
|
||||
val onPrimaryFixed: Color,
|
||||
val onPrimaryFixedVariant: Color,
|
||||
val secondaryFixed: Color,
|
||||
val secondaryFixedDim: Color,
|
||||
val onSecondaryFixed: Color,
|
||||
val onSecondaryFixedVariant: Color,
|
||||
val tertiaryFixed: Color,
|
||||
val tertiaryFixedDim: Color,
|
||||
val onTertiaryFixed: Color,
|
||||
val onTertiaryFixedVariant: Color,
|
||||
) {
|
||||
companion object {
|
||||
internal val unspecified =
|
||||
FixedColorRoles(
|
||||
primaryFixed = Color.Unspecified,
|
||||
primaryFixedDim = Color.Unspecified,
|
||||
onPrimaryFixed = Color.Unspecified,
|
||||
onPrimaryFixedVariant = Color.Unspecified,
|
||||
secondaryFixed = Color.Unspecified,
|
||||
secondaryFixedDim = Color.Unspecified,
|
||||
onSecondaryFixed = Color.Unspecified,
|
||||
onSecondaryFixedVariant = Color.Unspecified,
|
||||
tertiaryFixed = Color.Unspecified,
|
||||
tertiaryFixedDim = Color.Unspecified,
|
||||
onTertiaryFixed = Color.Unspecified,
|
||||
onTertiaryFixedVariant = Color.Unspecified,
|
||||
)
|
||||
|
||||
@Stable
|
||||
internal fun fromColorSchemes(
|
||||
lightColors: ColorScheme,
|
||||
darkColors: ColorScheme,
|
||||
): FixedColorRoles {
|
||||
return FixedColorRoles(
|
||||
primaryFixed = lightColors.primaryContainer,
|
||||
onPrimaryFixed = lightColors.onPrimaryContainer,
|
||||
onPrimaryFixedVariant = darkColors.primaryContainer,
|
||||
secondaryFixed = lightColors.secondaryContainer,
|
||||
onSecondaryFixed = lightColors.onSecondaryContainer,
|
||||
onSecondaryFixedVariant = darkColors.secondaryContainer,
|
||||
tertiaryFixed = lightColors.tertiaryContainer,
|
||||
onTertiaryFixed = lightColors.onTertiaryContainer,
|
||||
onTertiaryFixedVariant = darkColors.tertiaryContainer,
|
||||
primaryFixedDim = darkColors.primary,
|
||||
secondaryFixedDim = darkColors.secondary,
|
||||
tertiaryFixedDim = darkColors.tertiary,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user