🚀 Better color roles management

* Primary color for high emphasis components
* Secondary color as main filling color
* Tertiary color for specific components
This commit is contained in:
Acclorite 2025-03-04 19:46:43 +02:00
parent d76474254e
commit 6430fc4e51
26 changed files with 57 additions and 39 deletions

View file

@ -38,14 +38,14 @@ fun AboutBadgeItem(
modifier = Modifier.size(22.dp),
painter = painterResource(id = badge.drawable),
contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.tertiary
)
} else if (badge.imageVector != null && badge.drawable == null) {
Icon(
modifier = Modifier.size(22.dp),
imageVector = badge.imageVector,
contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.tertiary
)
}
}

View file

@ -48,7 +48,7 @@ fun LazyItemScope.BookInfoChangeCoverBottomSheetItem(
imageVector = icon,
contentDescription = null,
modifier = Modifier.size(24.dp),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.secondary
)
Spacer(modifier = Modifier.width(16.dp))
Column(

View file

@ -75,7 +75,7 @@ fun BrowseGridFileItem(file: SelectableFile, hasSelectedItems: Boolean) {
modifier = Modifier
.fillMaxWidth(0.3f)
.aspectRatio(1f),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.secondary
)
DefaultTransition(

View file

@ -77,7 +77,7 @@ fun RowScope.BrowseListFileItem(file: SelectableFile) {
contentDescription = stringResource(id = R.string.file_icon_content_desc),
modifier = Modifier
.size(22.dp),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.secondary
)
}
Spacer(modifier = Modifier.width(12.dp))

View file

@ -48,7 +48,7 @@ fun CircularCheckbox(
CircleShape
)
.background(
if (selected) MaterialTheme.colorScheme.primary else Color.Transparent,
if (selected) MaterialTheme.colorScheme.secondary else Color.Transparent,
shape = CircleShape
)
.padding(4.dp)

View file

@ -42,7 +42,7 @@ fun SelectableDialogItem(
onClick = null,
modifier = Modifier.size(24.dp),
colors = RadioButtonDefaults.colors(
selectedColor = MaterialTheme.colorScheme.primary,
selectedColor = MaterialTheme.colorScheme.secondary,
unselectedColor = MaterialTheme.colorScheme.onSurface
)
)

View file

@ -56,7 +56,7 @@ fun EmptyPlaceholder(
painter = icon,
contentDescription = message,
modifier = Modifier.size(150.dp),
tint = MaterialTheme.colorScheme.primary
tint = MaterialTheme.colorScheme.secondary
)
Spacer(modifier = Modifier.height(4.dp))
StyledText(
@ -76,7 +76,7 @@ fun EmptyPlaceholder(
StyledText(
text = actionTitle,
style = MaterialTheme.typography.labelLarge.copy(
color = MaterialTheme.colorScheme.primary
color = MaterialTheme.colorScheme.secondary
)
)
}

View file

@ -76,7 +76,7 @@ fun ErrorPlaceholder(
StyledText(
text = actionTitle,
style = MaterialTheme.typography.labelLarge.copy(
color = MaterialTheme.colorScheme.primary
color = MaterialTheme.colorScheme.secondary
)
)
}

View file

@ -117,7 +117,10 @@ fun SliderWithTitle(
},
steps = toValue - fromValue - 1,
colors = SliderDefaults.colors(
activeTickColor = MaterialTheme.colorScheme.onPrimary,
activeTrackColor = MaterialTheme.colorScheme.secondary,
thumbColor = MaterialTheme.colorScheme.secondary,
inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
activeTickColor = MaterialTheme.colorScheme.onSecondary,
inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant
)
)
@ -205,7 +208,10 @@ fun SliderWithTitle(
}
},
colors = SliderDefaults.colors(
activeTickColor = MaterialTheme.colorScheme.onPrimary,
activeTrackColor = MaterialTheme.colorScheme.secondary,
thumbColor = MaterialTheme.colorScheme.secondary,
inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
activeTickColor = MaterialTheme.colorScheme.onSecondary,
inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant
)
)

View file

@ -80,7 +80,7 @@ fun SwitchWithTitle(
checked = selected,
onCheckedChange = null,
colors = SwitchDefaults.colors(
checkedThumbColor = MaterialTheme.colorScheme.primary,
checkedThumbColor = MaterialTheme.colorScheme.secondary,
checkedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
)
)

View file

@ -15,8 +15,8 @@ import my.nanihadesuka.compose.ScrollbarSettings
@Composable
fun Constants.providePrimaryScrollbar(canSelect: Boolean = true) = ScrollbarSettings(
thumbUnselectedColor = MaterialTheme.colorScheme.primary,
thumbSelectedColor = MaterialTheme.colorScheme.primary.copy(0.8f),
thumbUnselectedColor = MaterialTheme.colorScheme.secondary,
thumbSelectedColor = MaterialTheme.colorScheme.secondary.copy(0.8f),
hideDelayMillis = 2000,
durationAnimationMillis = 300,
selectionMode = if (canSelect) ScrollbarSelectionMode.Thumb else ScrollbarSelectionMode.Disabled,

View file

@ -68,10 +68,10 @@ fun CreditItem(
text = it.asString(),
modifier = Modifier
.clip(CircleShape)
.background(MaterialTheme.colorScheme.primary)
.background(MaterialTheme.colorScheme.secondary)
.padding(vertical = 4.dp, horizontal = 8.dp),
style = MaterialTheme.typography.bodySmall.copy(
color = MaterialTheme.colorScheme.onPrimary,
color = MaterialTheme.colorScheme.onSecondary,
),
maxLines = 1
)

View file

@ -50,9 +50,9 @@ fun LazyGridItemScope.LibraryItem(
navigateToBookInfo: () -> Unit,
navigateToReader: () -> Unit
) {
val backgroundColor = if (book.selected) MaterialTheme.colorScheme.primary
val backgroundColor = if (book.selected) MaterialTheme.colorScheme.secondary
else Color.Transparent
val fontColor = if (book.selected) MaterialTheme.colorScheme.onPrimary
val fontColor = if (book.selected) MaterialTheme.colorScheme.onSecondary
else MaterialTheme.colorScheme.onSurface
val progress = rememberSaveable(book.data.progress) {
@ -115,11 +115,11 @@ fun LazyGridItemScope.LibraryItem(
modifier = Modifier
.padding(6.dp)
.clip(MaterialTheme.shapes.small)
.background(MaterialTheme.colorScheme.primary, MaterialTheme.shapes.small)
.background(MaterialTheme.colorScheme.secondary, MaterialTheme.shapes.small)
.padding(horizontal = 8.dp, vertical = 4.dp),
style = MaterialTheme.typography.bodySmall.copy(
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onPrimary,
color = MaterialTheme.colorScheme.onSecondary,
)
)
@ -131,10 +131,8 @@ fun LazyGridItemScope.LibraryItem(
.size(32.dp),
shape = MaterialTheme.shapes.medium,
colors = IconButtonDefaults.iconButtonColors(
containerColor = MaterialTheme.colorScheme.primaryContainer
.copy(0.9f),
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.onPrimaryContainer
.copy(0.9f)
)
) {
Icon(

View file

@ -8,7 +8,7 @@ package ua.acclorite.book_story.presentation.library
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.DriveFileMove
import androidx.compose.material.icons.outlined.MoveUp
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
@ -52,7 +52,7 @@ fun LibraryMoveDialog(
Dialog(
title = stringResource(id = R.string.move_books),
icon = Icons.AutoMirrored.Outlined.DriveFileMove,
icon = Icons.Outlined.MoveUp,
description = stringResource(
id = R.string.move_books_description,
selectedItemsCount

View file

@ -18,10 +18,10 @@ import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.outlined.DriveFileMove
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.material.icons.outlined.MoveUp
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
@ -169,7 +169,7 @@ fun LibraryTopBar(
},
contentActions = {
IconButton(
icon = Icons.AutoMirrored.Outlined.DriveFileMove,
icon = Icons.Outlined.MoveUp,
contentDescription = R.string.move_books_content_desc,
enabled = !isLoading && !isRefreshing,
disableOnClick = false,

View file

@ -47,12 +47,12 @@ fun LazyItemScope.LicenseInfoItem(
showed.value = !showed.value
}
.background(
MaterialTheme.colorScheme.primary,
MaterialTheme.colorScheme.secondary,
RoundedCornerShape(100)
)
.padding(vertical = 6.dp, horizontal = 12.dp),
style = MaterialTheme.typography.titleSmall.copy(
color = MaterialTheme.colorScheme.onPrimary,
color = MaterialTheme.colorScheme.onSecondary,
),
maxLines = 1
)

View file

@ -101,10 +101,13 @@ fun LicensesItem(
text = it.name,
modifier = Modifier
.clip(RoundedCornerShape(100))
.background(MaterialTheme.colorScheme.primary, RoundedCornerShape(100))
.background(
MaterialTheme.colorScheme.secondary,
RoundedCornerShape(100)
)
.padding(vertical = 4.dp, horizontal = 8.dp),
style = MaterialTheme.typography.bodySmall.copy(
color = MaterialTheme.colorScheme.onPrimary
color = MaterialTheme.colorScheme.onSecondary
),
maxLines = 1
)

View file

@ -102,7 +102,7 @@ fun ReaderBottomBar(
icon = Icons.AutoMirrored.Default.ArrowBack,
contentDescription = R.string.checkpoint_back_content_desc,
modifier = Modifier.size(24.dp),
color = MaterialTheme.colorScheme.primary,
color = MaterialTheme.colorScheme.secondary,
disableOnClick = false
) {
restoreCheckpoint(ReaderEvent.OnRestoreCheckpoint)
@ -134,7 +134,7 @@ fun ReaderBottomBar(
icon = Icons.AutoMirrored.Default.ArrowForward,
contentDescription = R.string.checkpoint_forward_content_desc,
modifier = Modifier.size(24.dp),
color = MaterialTheme.colorScheme.primary,
color = MaterialTheme.colorScheme.secondary,
disableOnClick = false
) {
restoreCheckpoint(ReaderEvent.OnRestoreCheckpoint)

View file

@ -155,7 +155,7 @@ private fun AppThemeOptionItem(
contentDescription = stringResource(id = R.string.selected_content_desc),
modifier = Modifier
.size(26.dp),
tint = colorScheme.primary
tint = colorScheme.secondary
)
}

View file

@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -65,6 +66,10 @@ private fun BrowseFilterOptionItem(
) {
Checkbox(
checked = isSelected,
colors = CheckboxDefaults.colors(
checkedColor = MaterialTheme.colorScheme.secondary,
checkmarkColor = MaterialTheme.colorScheme.onSecondary
),
onCheckedChange = { onClick() }
)
Spacer(modifier = Modifier.width(14.dp))

View file

@ -82,7 +82,7 @@ private fun BrowseSortOptionItem(
contentDescription = stringResource(id = R.string.sort_order_content_desc),
modifier = Modifier
.size(28.dp),
tint = if (isSelected) MaterialTheme.colorScheme.primary
tint = if (isSelected) MaterialTheme.colorScheme.secondary
else Color.Transparent
)
Spacer(modifier = Modifier.width(24.dp))

View file

@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -45,6 +46,9 @@ fun StartDoneBottomBar(
modifier = Modifier.weight(1f),
shape = RoundedCornerShape(100),
contentPadding = ButtonDefaults.ContentPadding,
colors = ButtonDefaults.textButtonColors(
contentColor = MaterialTheme.colorScheme.secondary
),
onClick = {
navigateToBrowse()
}

View file

@ -44,7 +44,7 @@ fun StartDoneLayout(
Icon(
painter = painterResource(id = R.drawable.start_done),
contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
tint = MaterialTheme.colorScheme.secondary,
modifier = Modifier.size(190.dp)
)
Spacer(modifier = Modifier.height(16.dp))

View file

@ -9,6 +9,7 @@
package ua.acclorite.book_story.presentation.start
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.res.stringResource
import ua.acclorite.book_story.R
import ua.acclorite.book_story.presentation.settings.appearance.theme_preferences.ThemePreferencesSubcategory
@ -16,6 +17,7 @@ import ua.acclorite.book_story.presentation.settings.appearance.theme_preference
fun LazyListScope.StartSettingsLayoutAppearance() {
ThemePreferencesSubcategory(
title = { stringResource(id = R.string.start_theme_preferences) },
titleColor = { MaterialTheme.colorScheme.secondary },
showDivider = false
)
}

View file

@ -30,7 +30,7 @@ fun LazyListScope.StartSettingsLayoutGeneral(
Spacer(modifier = Modifier.height(16.dp))
SettingsSubcategoryTitle(
title = stringResource(id = R.string.start_language_preferences),
color = MaterialTheme.colorScheme.primary
color = MaterialTheme.colorScheme.secondary
)
Spacer(modifier = Modifier.height(12.dp))
}

View file

@ -27,7 +27,7 @@ fun LazyListScope.StartSettingsLayoutScan() {
item {
SettingsSubcategoryTitle(
title = stringResource(id = R.string.start_scan_preferences),
color = MaterialTheme.colorScheme.primary
color = MaterialTheme.colorScheme.secondary
)
}