🚀 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), modifier = Modifier.size(22.dp),
painter = painterResource(id = badge.drawable), painter = painterResource(id = badge.drawable),
contentDescription = stringResource(id = badge.contentDescription), contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary tint = MaterialTheme.colorScheme.tertiary
) )
} else if (badge.imageVector != null && badge.drawable == null) { } else if (badge.imageVector != null && badge.drawable == null) {
Icon( Icon(
modifier = Modifier.size(22.dp), modifier = Modifier.size(22.dp),
imageVector = badge.imageVector, imageVector = badge.imageVector,
contentDescription = stringResource(id = badge.contentDescription), contentDescription = stringResource(id = badge.contentDescription),
tint = MaterialTheme.colorScheme.primary tint = MaterialTheme.colorScheme.tertiary
) )
} }
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -76,7 +76,7 @@ fun ErrorPlaceholder(
StyledText( StyledText(
text = actionTitle, text = actionTitle,
style = MaterialTheme.typography.labelLarge.copy( 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, steps = toValue - fromValue - 1,
colors = SliderDefaults.colors( 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 inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant
) )
) )
@ -205,7 +208,10 @@ fun SliderWithTitle(
} }
}, },
colors = SliderDefaults.colors( 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 inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant
) )
) )

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -155,7 +155,7 @@ private fun AppThemeOptionItem(
contentDescription = stringResource(id = R.string.selected_content_desc), contentDescription = stringResource(id = R.string.selected_content_desc),
modifier = Modifier modifier = Modifier
.size(26.dp), .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.LazyListScope
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Checkbox import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -65,6 +66,10 @@ private fun BrowseFilterOptionItem(
) { ) {
Checkbox( Checkbox(
checked = isSelected, checked = isSelected,
colors = CheckboxDefaults.colors(
checkedColor = MaterialTheme.colorScheme.secondary,
checkmarkColor = MaterialTheme.colorScheme.onSecondary
),
onCheckedChange = { onClick() } onCheckedChange = { onClick() }
) )
Spacer(modifier = Modifier.width(14.dp)) Spacer(modifier = Modifier.width(14.dp))

View file

@ -82,7 +82,7 @@ private fun BrowseSortOptionItem(
contentDescription = stringResource(id = R.string.sort_order_content_desc), contentDescription = stringResource(id = R.string.sort_order_content_desc),
modifier = Modifier modifier = Modifier
.size(28.dp), .size(28.dp),
tint = if (isSelected) MaterialTheme.colorScheme.primary tint = if (isSelected) MaterialTheme.colorScheme.secondary
else Color.Transparent else Color.Transparent
) )
Spacer(modifier = Modifier.width(24.dp)) 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.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextButton import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -45,6 +46,9 @@ fun StartDoneBottomBar(
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
shape = RoundedCornerShape(100), shape = RoundedCornerShape(100),
contentPadding = ButtonDefaults.ContentPadding, contentPadding = ButtonDefaults.ContentPadding,
colors = ButtonDefaults.textButtonColors(
contentColor = MaterialTheme.colorScheme.secondary
),
onClick = { onClick = {
navigateToBrowse() navigateToBrowse()
} }

View file

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

View file

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

View file

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

View file

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