From 309e49037bcedf0c48a0db7f973e5d9c73a15da9 Mon Sep 17 00:00:00 2001 From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com> Date: Sun, 19 Jan 2025 14:06:36 +1100 Subject: [PATCH] Ideal button --- .../kotlin/xyz/ksharma/krail/KrailNavHost.kt | 2 + .../planner/ui/alerts/CollapsibleAlert.kt | 46 ++- .../trip/planner/ui/components/JourneyCard.kt | 19 +- .../trip/planner/ui/components/LegView.kt | 54 ++- .../planner/ui/components/SearchStopRow.kt | 6 +- .../DateTimeSelectorScreen.kt | 115 +++---- .../planner/ui/savedtrips/SavedTripsScreen.kt | 4 +- .../planner/ui/settings/SettingsScreen.kt | 6 +- .../ui/themeselection/ThemeSelectionScreen.kt | 24 +- .../planner/ui/timetable/TimeTableScreen.kt | 10 +- .../ui/timetable/TimeTableViewModel.kt | 12 +- .../ksharma/krail/taj/CompositionLocals.kt | 4 +- .../ksharma/krail/taj/components/Button.kt | 311 +++++++++++++++--- .../ksharma/krail/taj/components/Divider.kt | 6 +- .../krail/taj/components/RoundIconButton.kt | 8 +- .../xyz/ksharma/krail/taj/components/Text.kt | 32 +- .../ksharma/krail/taj/components/TitleBar.kt | 4 +- .../krail/taj/theme/KrailTypography.kt | 12 +- 18 files changed, 449 insertions(+), 226 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt b/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt index b12fefec..f44bcb1a 100644 --- a/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt +++ b/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt @@ -19,6 +19,7 @@ import kotlinx.serialization.Serializable import org.koin.compose.viewmodel.koinViewModel import xyz.ksharma.krail.splash.SplashScreen import xyz.ksharma.krail.splash.SplashViewModel +import xyz.ksharma.krail.taj.LocalTextColor import xyz.ksharma.krail.taj.LocalThemeColor import xyz.ksharma.krail.taj.LocalThemeContentColor import xyz.ksharma.krail.taj.theme.KrailTheme @@ -55,6 +56,7 @@ fun KrailNavHost(modifier: Modifier = Modifier) { CompositionLocalProvider( LocalThemeColor provides themeColorHexCode, LocalThemeContentColor provides themeContentColorHexCode, + LocalTextColor provides KrailTheme.colors.onSurface, ) { NavHost( navController = navController, diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt index b8459d6f..86725144 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ButtonColors import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue @@ -21,13 +22,16 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp +import org.jetbrains.compose.ui.tooling.preview.Preview import xyz.ksharma.krail.taj.LocalThemeColor +import xyz.ksharma.krail.taj.components.Button +import xyz.ksharma.krail.taj.components.ButtonDefaults import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.taj.theme.getForegroundColor import xyz.ksharma.krail.taj.toAdaptiveSize +import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha import xyz.ksharma.krail.trip.planner.ui.state.TransportMode import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlert @@ -107,21 +111,28 @@ fun CollapsibleAlert( ) } } else { - Box( - modifier = Modifier - .padding(start = 12.dp + 24.dp.toAdaptiveSize(), bottom = 12.dp) - .background( - color = getForegroundColor(backgroundColor), - shape = RoundedCornerShape(50), - ) - .padding(horizontal = 16.dp, vertical = 2.dp), - contentAlignment = Alignment.Center, - ) { - Text( - text = "Read More", - style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), - color = getForegroundColor(getForegroundColor(backgroundColor)), + + val buttonBackgroundColor by remember { + mutableStateOf(getForegroundColor(backgroundColor)) + } + val buttonContentColor by remember(buttonBackgroundColor) { + mutableStateOf(getForegroundColor(buttonBackgroundColor)) + } + Button( + colors = ButtonColors( + containerColor = buttonBackgroundColor, + contentColor = buttonContentColor, + disabledContainerColor = buttonBackgroundColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = buttonContentColor.copy(alpha = DisabledContentAlpha), + ), + onClick = onClick, + dimensions = ButtonDefaults.extraSmallButtonSize(), + modifier = Modifier.padding( + start = 12.dp + 24.dp.toAdaptiveSize(), + bottom = 8.dp ) + ) { + Text(text = "Read More") } } } @@ -129,8 +140,7 @@ fun CollapsibleAlert( // region Previews - -//@Preview(fontScale = 2f) +@Preview @Composable private fun PreviewCollapsibleAlertCollapsed() { KrailTheme { @@ -149,7 +159,7 @@ private fun PreviewCollapsibleAlertCollapsed() { } } - +@Preview @Composable private fun PreviewCollapsibleAlertExpanded() { KrailTheme { diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt index 73dc41f4..2e10f2f4 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt @@ -51,7 +51,7 @@ import krail.feature.trip_planner.ui.generated.resources.ic_walk import org.jetbrains.compose.resources.painterResource import xyz.ksharma.krail.taj.LocalContentAlpha import xyz.ksharma.krail.taj.components.AlertButton -import xyz.ksharma.krail.taj.components.ButtonSize +import xyz.ksharma.krail.taj.components.ButtonDefaults import xyz.ksharma.krail.taj.components.SeparatorIcon import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.theme.KrailTheme @@ -236,14 +236,17 @@ fun ExpandedJourneyCardContent( ) { if (totalUniqueServiceAlerts > 0) { AlertButton( - label = if (totalUniqueServiceAlerts > 1) { - "$totalUniqueServiceAlerts Alerts" - } else { - "$totalUniqueServiceAlerts Alert" - }, - size = ButtonSize.COMPACT, + dimensions = ButtonDefaults.smallButtonSize(), onClick = onAlertClick, - ) + ) { + Text( + text = if (totalUniqueServiceAlerts > 1) { + "$totalUniqueServiceAlerts Alerts" + } else { + "$totalUniqueServiceAlerts Alert" + }, + ) + } } TextWithIcon( diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt index ccf0c347..f5a8b811 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow @@ -17,6 +16,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ButtonColors import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue @@ -31,7 +31,6 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.semantics.Role -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -42,10 +41,14 @@ import krail.feature.trip_planner.ui.generated.resources.Res import krail.feature.trip_planner.ui.generated.resources.ic_a11y import krail.feature.trip_planner.ui.generated.resources.ic_clock import org.jetbrains.compose.resources.painterResource +import org.jetbrains.compose.ui.tooling.preview.Preview import xyz.ksharma.krail.taj.LocalContentAlpha +import xyz.ksharma.krail.taj.components.Button +import xyz.ksharma.krail.taj.components.ButtonDefaults import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.taj.toAdaptiveDecorativeIconSize +import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha import xyz.ksharma.krail.trip.planner.ui.state.TransportMode import xyz.ksharma.krail.trip.planner.ui.state.TransportModeLine import xyz.ksharma.krail.trip.planner.ui.state.timetable.TimeTableState @@ -128,6 +131,10 @@ fun LegView( StopsRow( stops = "$stopsCount stops", line = transportModeLine, + onClick = { + showIntermediateStops = !showIntermediateStops + onClick(showIntermediateStops) + }, ) } else { TransportModeInfo( @@ -275,27 +282,33 @@ private fun StopInfo( @OptIn(ExperimentalLayoutApi::class) @Composable -private fun StopsRow(stops: String, line: TransportModeLine, modifier: Modifier = Modifier) { +private fun StopsRow( + stops: String, + line: TransportModeLine, + modifier: Modifier = Modifier, + onClick: () -> Unit, +) { FlowRow( modifier = modifier, horizontalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(4.dp), ) { - Box( - modifier = Modifier - .background( - color = line.transportMode.colorCode.hexToComposeColor(), - shape = RoundedCornerShape(50), - ) - .padding(horizontal = 20.dp, vertical = 2.dp), - contentAlignment = Alignment.Center, + val buttonContainerColor by remember { + mutableStateOf(line.transportMode.colorCode.hexToComposeColor()) + } + Button( + colors = ButtonColors( + containerColor = buttonContainerColor, + contentColor = Color.White, + disabledContainerColor = buttonContainerColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = Color.White.copy(alpha = DisabledContentAlpha), + ), + onClick = onClick, + dimensions = ButtonDefaults.smallButtonSize(), ) { - Text( - text = stops, - style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), - color = Color.White, - ) + Text(text = stops) } + TransportModeInfo( letter = line.transportMode.name.first(), backgroundColor = line.transportMode.colorCode.hexToComposeColor(), @@ -308,6 +321,7 @@ private fun StopsRow(stops: String, line: TransportModeLine, modifier: Modifier // region Previews +@Preview @Composable private fun PreviewLegView() { KrailTheme { @@ -341,6 +355,7 @@ private fun PreviewLegView() { } } +@Preview @Composable private fun PreviewLegViewTwoStops() { KrailTheme { @@ -369,6 +384,7 @@ private fun PreviewLegViewTwoStops() { } } +@Preview @Composable private fun PreviewLegViewMetro() { KrailTheme { @@ -397,6 +413,7 @@ private fun PreviewLegViewMetro() { } } +@Preview @Composable private fun PreviewLegViewFerry() { KrailTheme { @@ -425,6 +442,7 @@ private fun PreviewLegViewFerry() { } } +@Preview @Composable private fun PreviewLegViewLightRail() { KrailTheme { @@ -453,6 +471,7 @@ private fun PreviewLegViewLightRail() { } } +@Preview @Composable private fun PreviewStopsRow() { KrailTheme { @@ -462,10 +481,12 @@ private fun PreviewStopsRow() { transportMode = TransportMode.Bus(), lineName = "700", ), + onClick = {}, ) } } +@Preview @Composable private fun PreviewProminentStopInfo() { KrailTheme { @@ -479,6 +500,7 @@ private fun PreviewProminentStopInfo() { } } +@Preview @Composable private fun PreviewRouteSummary() { KrailTheme { diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt index 0a5e37f7..1f6c429a 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt @@ -24,7 +24,7 @@ import krail.feature.trip_planner.ui.generated.resources.Res import krail.feature.trip_planner.ui.generated.resources.ic_reverse import krail.feature.trip_planner.ui.generated.resources.ic_search import org.jetbrains.compose.resources.painterResource -import xyz.ksharma.krail.taj.LocalOnContentColor +import xyz.ksharma.krail.taj.LocalContentColor import xyz.ksharma.krail.taj.LocalThemeColor import xyz.ksharma.krail.taj.components.RoundIconButton import xyz.ksharma.krail.taj.components.Text @@ -93,7 +93,7 @@ fun SearchStopRow( Image( painter = painterResource(Res.drawable.ic_reverse), contentDescription = "Reverse", - colorFilter = ColorFilter.tint(LocalOnContentColor.current), + colorFilter = ColorFilter.tint(LocalContentColor.current), modifier = Modifier.size(24.dp), ) }, @@ -105,7 +105,7 @@ fun SearchStopRow( Image( painter = painterResource(Res.drawable.ic_search), contentDescription = "Search", - colorFilter = ColorFilter.tint(LocalOnContentColor.current), + colorFilter = ColorFilter.tint(LocalContentColor.current), modifier = Modifier.size(24.dp), ) }, diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt index 10419efe..48858875 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt @@ -1,16 +1,12 @@ package xyz.ksharma.krail.trip.planner.ui.datetimeselector import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.rememberTimePickerState import androidx.compose.runtime.Composable @@ -22,9 +18,6 @@ import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.semantics.Role -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import kotlinx.datetime.Clock import kotlinx.datetime.DateTimeUnit @@ -38,11 +31,13 @@ import xyz.ksharma.krail.core.datetime.incrementDateByOneDay import xyz.ksharma.krail.core.datetime.rememberCurrentDateTime import xyz.ksharma.krail.core.datetime.toReadableDate import xyz.ksharma.krail.taj.LocalThemeColor +import xyz.ksharma.krail.taj.components.Button +import xyz.ksharma.krail.taj.components.ButtonDefaults import xyz.ksharma.krail.taj.components.Text +import xyz.ksharma.krail.taj.components.TextButton import xyz.ksharma.krail.taj.components.TitleBar import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor -import xyz.ksharma.krail.trip.planner.ui.components.themeContentColor import xyz.ksharma.krail.trip.planner.ui.state.datetimeselector.DateTimeSelectionItem import xyz.ksharma.krail.trip.planner.ui.state.datetimeselector.JourneyTimeOptions @@ -117,28 +112,23 @@ fun DateTimeSelectorScreen( TitleBar(title = { Text(text = "Plan your trip") }, onNavActionClick = onBackClick, actions = { - Text( - text = "Reset", - style = KrailTheme.typography.bodyLarge, - modifier = modifier - .clickable( - role = Role.Button, - interactionSource = remember { MutableInteractionSource() }, - indication = null, - onClick = { - val now: LocalDateTime = - Clock.System.now() - .toLocalDateTime(TimeZone.currentSystemDefault()) - selectedDateStr = now.date.toString() - timePickerState.hour = now.time.hour - timePickerState.minute = now.time.minute - journeyTimeOption = JourneyTimeOptions.LEAVE - reset = true - onResetClick() - }, - ) - .padding(horizontal = 16.dp, vertical = 10.dp) - ) + + TextButton( + onClick = { + val now: LocalDateTime = + Clock.System.now() + .toLocalDateTime(TimeZone.currentSystemDefault()) + selectedDateStr = now.date.toString() + timePickerState.hour = now.time.hour + timePickerState.minute = now.time.minute + journeyTimeOption = JourneyTimeOptions.LEAVE + reset = true + onResetClick() + }, + dimensions = ButtonDefaults.mediumButtonSize(), + ) { + Text("Reset") + } }) LazyColumn( @@ -184,44 +174,35 @@ fun DateTimeSelectorScreen( } item { - Text( - text = if (reset) { - "Leave Now" - } else { - DateTimeSelectionItem( - option = journeyTimeOption, - hour = timePickerState.hour, - minute = timePickerState.minute, - date = selectedDate, - ).toDateTimeText() - }, - textAlign = TextAlign.Center, - color = themeContentColor(), - style = KrailTheme.typography.titleMedium, - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 24.dp, vertical = 16.dp) - .clip(RoundedCornerShape(50)) - .background(color = themeColor) - .clickable( - role = Role.Button, - interactionSource = remember { MutableInteractionSource() }, - indication = null, - onClick = { - onDateTimeSelected( - if (reset) null - else { - DateTimeSelectionItem( - option = journeyTimeOption, - hour = timePickerState.hour, - minute = timePickerState.minute, - date = selectedDate, - ) - } + + Button( + onClick = { + onDateTimeSelected( + if (reset) null + else { + DateTimeSelectionItem( + option = journeyTimeOption, + hour = timePickerState.hour, + minute = timePickerState.minute, + date = selectedDate, ) - }, - ).padding(vertical = 10.dp, horizontal = 12.dp) - ) + } + ) + }, + dimensions = ButtonDefaults.largeButtonSize(), + modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp), + ) { + Text( + text = if (reset) "Leave Now" else { + DateTimeSelectionItem( + option = journeyTimeOption, + hour = timePickerState.hour, + minute = timePickerState.minute, + date = selectedDate, + ).toDateTimeText() + }, + ) + } } } } diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt index 2956ef2f..3eb2e65e 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt @@ -32,7 +32,7 @@ import xyz.ksharma.krail.trip.planner.ui.state.searchstop.model.StopItem import krail.feature.trip_planner.ui.generated.resources.Res import krail.feature.trip_planner.ui.generated.resources.ic_settings import org.jetbrains.compose.resources.painterResource -import xyz.ksharma.krail.taj.LocalOnContentColor +import xyz.ksharma.krail.taj.LocalContentColor import xyz.ksharma.krail.taj.components.RoundIconButton @Composable @@ -81,7 +81,7 @@ fun SavedTripsScreen( Image( painter = painterResource(Res.drawable.ic_settings), contentDescription = "Settings", - colorFilter = ColorFilter.tint(LocalOnContentColor.current), + colorFilter = ColorFilter.tint(LocalContentColor.current), modifier = Modifier.size(24.dp), ) } diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt index 69f90080..d2b3491d 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/settings/SettingsScreen.kt @@ -10,13 +10,10 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember @@ -27,8 +24,8 @@ import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.dp import krail.feature.trip_planner.ui.generated.resources.Res -import krail.feature.trip_planner.ui.generated.resources.ic_paint import krail.feature.trip_planner.ui.generated.resources.ic_dev +import krail.feature.trip_planner.ui.generated.resources.ic_paint import org.jetbrains.compose.resources.painterResource import xyz.ksharma.krail.taj.LocalThemeColor import xyz.ksharma.krail.taj.components.Divider @@ -36,7 +33,6 @@ import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.components.TitleBar import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor -import xyz.ksharma.krail.trip.planner.ui.timetable.ActionButton @Composable fun SettingsScreen( diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt index f627f544..714b0921 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt @@ -1,10 +1,8 @@ package xyz.ksharma.krail.trip.planner.ui.themeselection import androidx.compose.animation.animateColorAsState -import androidx.compose.animation.core.FastOutSlowInEasing import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.tween -import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource @@ -22,8 +20,7 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material3.ButtonColors import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -34,7 +31,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.semantics.Role import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -46,11 +42,11 @@ import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.components.TitleBar import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.taj.theme.getForegroundColor +import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor import xyz.ksharma.krail.trip.planner.ui.components.transportModeBackgroundColor import xyz.ksharma.krail.trip.planner.ui.state.TransportMode import xyz.ksharma.krail.trip.planner.ui.state.TransportModeSortOrder -import xyz.ksharma.krail.trip.planner.ui.timetable.ActionButton private val TransportMode.tagLine: String get() { @@ -92,7 +88,7 @@ fun ThemeSelectionScreen( Column { TitleBar( - onNavActionClick= onBackClick, + onNavActionClick = onBackClick, title = {}, modifier = Modifier.fillMaxWidth(), ) @@ -137,15 +133,21 @@ fun ThemeSelectionScreen( .padding(bottom = 10.dp) ) { Button( - label = "Let's #KRAIL", - themeColor = buttonBackgroundColor, + colors = ButtonColors( + containerColor = buttonBackgroundColor, + contentColor = getForegroundColor(buttonBackgroundColor), + disabledContainerColor = buttonBackgroundColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = getForegroundColor(buttonBackgroundColor).copy(alpha = DisabledContentAlpha), + ), onClick = { selectedProductClass?.let { productClass -> transportModeSelected(productClass) } }, - modifier = Modifier.padding(vertical = 10.dp), - ) + modifier = Modifier.padding(horizontal = 24.dp, vertical = 10.dp), + ) { + Text(text = "Let's #KRAIL") + } } } } diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt index 573ccf8c..b077ff9e 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt @@ -43,7 +43,9 @@ import krail.feature.trip_planner.ui.generated.resources.ic_reverse import krail.feature.trip_planner.ui.generated.resources.ic_star import krail.feature.trip_planner.ui.generated.resources.ic_star_filled import org.jetbrains.compose.resources.painterResource +import xyz.ksharma.krail.core.log.log import xyz.ksharma.krail.taj.LocalThemeColor +import xyz.ksharma.krail.taj.components.ButtonDefaults import xyz.ksharma.krail.taj.components.SubtleButton import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.components.TitleBar @@ -159,10 +161,14 @@ fun TimeTableScreen( item { SubtleButton( - label = dateTimeSelectionItem?.toDateTimeText() ?: "Plan your trip", onClick = dateTimeSelectorClicked, + dimensions = ButtonDefaults.mediumButtonSize(), modifier = Modifier.padding(horizontal = 12.dp), - ) + ) { + Text( + text = dateTimeSelectionItem?.toDateTimeText() ?: "Plan your trip", + ) + } } item { diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt index 7614b72c..cd9e966b 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt @@ -32,6 +32,7 @@ import xyz.ksharma.krail.core.datetime.DateTimeHelper.toGenericFormattedTimeStri import xyz.ksharma.krail.core.datetime.DateTimeHelper.toHHMM import xyz.ksharma.krail.core.datetime.DateTimeHelper.utcToLocalDateTimeAEST import xyz.ksharma.krail.core.log.log +import xyz.ksharma.krail.core.log.logError import xyz.ksharma.krail.sandook.Sandook import xyz.ksharma.krail.sandook.SelectServiceAlertsByJourneyId import xyz.ksharma.krail.trip.planner.network.api.model.TripResponse @@ -410,10 +411,13 @@ class TimeTableViewModel( runCatching { _uiState.value.journeyList.find { it.journeyId == journeyId }?.let { journey -> getAlertsFromJourney(journey) - }.orEmpty() - }.getOrElse { emptyList() } + } + }.getOrElse { + logError("Error while fetching alerts for journey: $journeyId", it) + emptyList() + } } - if (alerts.isNotEmpty()) { + if (alerts?.isNotEmpty() == true) { analytics.track( AnalyticsEvent.JourneyAlertClickEvent( fromStopId = tripInfo?.fromStopId ?: "NA", @@ -421,7 +425,7 @@ class TimeTableViewModel( ), ) } - onResult(alerts) + onResult(alerts ?: emptyList()) } } diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/CompositionLocals.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/CompositionLocals.kt index 1be538b5..86a08889 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/CompositionLocals.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/CompositionLocals.kt @@ -13,5 +13,5 @@ val LocalContentAlpha = compositionLocalOf { 1f } val LocalThemeColor = compositionLocalOf { mutableStateOf(unspecifiedColor) } val LocalThemeContentColor = compositionLocalOf { mutableStateOf(unspecifiedColor) } -internal val LocalContentColor = compositionLocalOf { Color.Unspecified } -val LocalOnContentColor = compositionLocalOf { Color.Unspecified } +internal val LocalContainerColor = compositionLocalOf { Color.Unspecified } +val LocalContentColor = compositionLocalOf { Color.Unspecified } diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt index 8b82bcf1..ac2bbf04 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt @@ -6,25 +6,32 @@ import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ButtonColors import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.Immutable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.Role -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import xyz.ksharma.krail.taj.LocalContentAlpha +import xyz.ksharma.krail.taj.LocalContainerColor import xyz.ksharma.krail.taj.LocalContentColor -import xyz.ksharma.krail.taj.LocalOnContentColor +import xyz.ksharma.krail.taj.LocalTextColor import xyz.ksharma.krail.taj.LocalTextStyle import xyz.ksharma.krail.taj.LocalThemeColor import xyz.ksharma.krail.taj.hexToComposeColor @@ -43,7 +50,7 @@ import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.EnabledContentAlpha * @param enabled Whether the button is enabled or not. Defaults to true. * @param onClick The callback to be invoked when the button is clicked. */ -@Composable +/*@Composable fun Button( label: String, modifier: Modifier = Modifier, @@ -67,20 +74,20 @@ fun Button( CompositionLocalProvider( LocalContentAlpha provides contentAlphaProvider, LocalTextStyle provides KrailTheme.typography.titleMedium, - LocalContentColor provides contentColor, - LocalOnContentColor provides onContentColor, + LocalContainerColor provides contentColor, + LocalContentColor provides onContentColor, + LocalTextColor provides onContentColor, ) { val contentAlpha = LocalContentAlpha.current Text( text = label, textAlign = TextAlign.Center, - color = LocalOnContentColor.current.copy(alpha = contentAlpha), - style = LocalTextStyle.current, modifier = modifier.fillMaxWidth() .padding(horizontal = 24.dp) // TODO - tokens for padding .clip(RoundedCornerShape(50)) - .background(color = LocalContentColor.current.copy(alpha = contentAlpha)).clickable( + .background(color = LocalContainerColor.current.copy(alpha = contentAlpha)) + .clickable( role = Role.Button, interactionSource = remember { MutableInteractionSource() }, enabled = enabled, @@ -89,106 +96,302 @@ fun Button( ).padding(10.dp), // TODO - tokens for padding ) } +}*/ + +@Composable +fun Button( + onClick: () -> Unit, + modifier: Modifier = Modifier, + colors: ButtonColors = ButtonDefaults.buttonColors(), + dimensions: ButtonDimensions = ButtonDefaults.largeButtonSize(), + enabled: Boolean = true, + content: @Composable () -> Unit, +) { + val contentAlphaProvider = + rememberSaveable(enabled) { if (enabled) EnabledContentAlpha else DisabledContentAlpha } + + CompositionLocalProvider( + LocalContentAlpha provides contentAlphaProvider, + LocalContainerColor provides colors.containerColor, + LocalTextStyle provides buttonTextStyle(dimensions), + LocalTextColor provides colors.contentColor, + ) { + Box( + modifier = modifier + .then( + when (dimensions) { + ButtonDefaults.largeButtonSize() -> Modifier.fillMaxWidth() + else -> Modifier + } + ) + .clickable( + role = Role.Button, + interactionSource = remember { MutableInteractionSource() }, + enabled = enabled, + indication = null, + onClick = onClick, + ) + .heightIn(dimensions.height) + .background( + color = LocalContainerColor.current.copy(alpha = LocalContentAlpha.current), + shape = dimensions.shape, + ) + .padding(dimensions.padding), + contentAlignment = Alignment.Center, + ) { + content() + } + } } + @Composable fun SubtleButton( - label: String, + onClick: () -> Unit, modifier: Modifier = Modifier, - size: ButtonSize = ButtonSize.DEFAULT, + dimensions: ButtonDimensions = ButtonDefaults.largeButtonSize(), enabled: Boolean = true, - onClick: () -> Unit = {}, + content: @Composable () -> Unit, ) { val contentAlphaProvider = rememberSaveable(enabled) { if (enabled) EnabledContentAlpha else DisabledContentAlpha } - val themeColor by LocalThemeColor.current - val contentColor by rememberSaveable(themeColor) { mutableStateOf(themeColor) } - CompositionLocalProvider( LocalContentAlpha provides contentAlphaProvider, - LocalTextStyle provides KrailTheme.typography.titleMedium, - LocalContentColor provides contentColor.hexToComposeColor(), - LocalOnContentColor provides getForegroundColor(contentColor.hexToComposeColor()), + LocalTextStyle provides buttonTextStyle(dimensions), + LocalContainerColor provides ButtonDefaults.subtleButtonColors().containerColor, + LocalTextColor provides ButtonDefaults.subtleButtonColors().contentColor, ) { - val contentAlpha = LocalContentAlpha.current - - Text( - text = label, - style = when (size) { - ButtonSize.DEFAULT -> KrailTheme.typography.bodyLarge - ButtonSize.COMPACT -> KrailTheme.typography.bodyMedium - }, - color = LocalOnContentColor.current.copy(alpha = contentAlpha), + Box( modifier = modifier + .then( + when (dimensions) { + ButtonDefaults.largeButtonSize() -> Modifier.fillMaxWidth() + else -> Modifier + } + ) .clickable( role = Role.Button, interactionSource = remember { MutableInteractionSource() }, + enabled = enabled, indication = null, onClick = onClick, ) + .heightIn(dimensions.height) .background( - color = themeBackgroundColor(), - shape = RoundedCornerShape(50), + color = LocalContainerColor.current, + shape = dimensions.shape, ) - .padding( - horizontal = 12.dp, vertical = when (size) { - ButtonSize.DEFAULT -> 6.dp - ButtonSize.COMPACT -> 4.dp + .padding(dimensions.padding), + contentAlignment = Alignment.Center, + ) { + content() + } + } +} + +@Composable +fun TextButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + dimensions: ButtonDimensions = ButtonDefaults.smallButtonSize(), + enabled: Boolean = true, + content: @Composable () -> Unit, +) { + val contentAlphaProvider = + rememberSaveable(enabled) { if (enabled) EnabledContentAlpha else DisabledContentAlpha } + + CompositionLocalProvider( + LocalContentAlpha provides contentAlphaProvider, + LocalTextStyle provides buttonTextStyle(dimensions), + LocalContainerColor provides ButtonDefaults.textButtonColors().containerColor, + LocalContentColor provides ButtonDefaults.textButtonColors().contentColor, + LocalTextColor provides ButtonDefaults.textButtonColors().contentColor, + ) { + Box( + modifier = modifier + .then( + when (dimensions) { + ButtonDefaults.largeButtonSize() -> Modifier.fillMaxWidth() + else -> Modifier } ) - ) + .clickable( + role = Role.Button, + interactionSource = remember { MutableInteractionSource() }, + enabled = enabled, + indication = null, + onClick = onClick, + ) + .heightIn(dimensions.height) + .background( + color = Color.Transparent, + shape = dimensions.shape, + ) + .padding(dimensions.padding), + contentAlignment = Alignment.Center, + ) { + content() + } } } @Composable fun AlertButton( - label: String, + onClick: () -> Unit, modifier: Modifier = Modifier, - size: ButtonSize = ButtonSize.COMPACT, + dimensions: ButtonDimensions = ButtonDefaults.smallButtonSize(), enabled: Boolean = true, - onClick: () -> Unit = {}, + content: @Composable () -> Unit, ) { val contentAlphaProvider = rememberSaveable(enabled) { if (enabled) EnabledContentAlpha else DisabledContentAlpha } - val backgroundColor = KrailTheme.colors.alert - val contentColor by remember(backgroundColor) { mutableStateOf(backgroundColor) } - CompositionLocalProvider( LocalContentAlpha provides contentAlphaProvider, - LocalTextStyle provides KrailTheme.typography.titleSmall, - LocalContentColor provides contentColor, - LocalOnContentColor provides getForegroundColor(contentColor), + LocalTextStyle provides buttonTextStyle(dimensions), + LocalContainerColor provides ButtonDefaults.alertButtonColors().containerColor, + LocalTextColor provides ButtonDefaults.alertButtonColors().contentColor, ) { - val contentAlpha = LocalContentAlpha.current - - Text( - text = label, - style = LocalTextStyle.current, - color = LocalOnContentColor.current.copy(alpha = contentAlpha), + Box( modifier = modifier + .then( + when (dimensions) { + ButtonDefaults.largeButtonSize() -> Modifier.fillMaxWidth() + else -> Modifier + } + ) .clickable( role = Role.Button, interactionSource = remember { MutableInteractionSource() }, + enabled = enabled, indication = null, onClick = onClick, ) + .heightIn(dimensions.height) .background( - color = contentColor, - shape = RoundedCornerShape(50), - ) - .padding( - horizontal = 12.dp, vertical = 2.dp + color = LocalContainerColor.current.copy(alpha = LocalContentAlpha.current), + shape = dimensions.shape, ) - ) + .padding(dimensions.padding), + contentAlignment = Alignment.Center, + ) { + content() + } } } +@Composable +private fun buttonTextStyle(dimensions: ButtonDimensions) = + when (dimensions) { + ButtonDefaults.extraSmallButtonSize() -> KrailTheme.typography.bodySmall + ButtonDefaults.smallButtonSize() -> KrailTheme.typography.titleSmall + ButtonDefaults.mediumButtonSize() -> KrailTheme.typography.bodyMedium + ButtonDefaults.largeButtonSize() -> KrailTheme.typography.titleLarge + else -> KrailTheme.typography.titleSmall + } + enum class ButtonSize { DEFAULT, COMPACT } +object ButtonDefaults { + + @Composable + fun textButtonColors(): ButtonColors { + val hexThemeColor: String by LocalThemeColor.current + val themeColor: Color by remember(hexThemeColor) { + mutableStateOf(hexThemeColor.hexToComposeColor()) + } + return ButtonColors( + containerColor = Color.Transparent, + contentColor = themeColor, + disabledContainerColor = Color.Transparent, + disabledContentColor = themeColor.copy(alpha = DisabledContentAlpha), + ) + } + + @Composable + fun alertButtonColors(): ButtonColors { + val containerColor = KrailTheme.colors.alert + + return ButtonColors( + containerColor = containerColor, + contentColor = getForegroundColor(containerColor), + disabledContainerColor = containerColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = getForegroundColor(containerColor) + .copy(alpha = DisabledContentAlpha), + ) + } + + @Composable + fun subtleButtonColors(): ButtonColors { + val containerColor = themeBackgroundColor() + val contentColor: Color by remember { mutableStateOf(getForegroundColor(containerColor)) } + + return ButtonColors( + containerColor = containerColor, + contentColor = contentColor, + disabledContainerColor = containerColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = contentColor.copy(alpha = DisabledContentAlpha), + ) + } + + @Composable + fun buttonColors(): ButtonColors { + val hexThemeColor: String by LocalThemeColor.current + val hexContainerColor: String by rememberSaveable(hexThemeColor) { + mutableStateOf(hexThemeColor) + } + val containerColor: Color by remember(hexContainerColor) { + mutableStateOf(hexContainerColor.hexToComposeColor()) + } + val contentColor: Color by remember { mutableStateOf(getForegroundColor(containerColor)) } + + return ButtonColors( + containerColor = containerColor, + contentColor = contentColor, + disabledContainerColor = containerColor.copy(alpha = DisabledContentAlpha), + disabledContentColor = contentColor.copy(alpha = DisabledContentAlpha), + ) + } + + fun extraSmallButtonSize(): ButtonDimensions { + return ButtonDimensions( + height = 18.dp, + padding = PaddingValues(vertical = 2.dp, horizontal = 8.dp), + ) + } + + fun smallButtonSize(): ButtonDimensions { + return ButtonDimensions( + height = 20.dp, + padding = PaddingValues(vertical = 4.dp, horizontal = 10.dp), + ) + } + + fun mediumButtonSize(): ButtonDimensions { + return ButtonDimensions( + height = 28.dp, + padding = PaddingValues(vertical = 6.dp, horizontal = 12.dp), + ) + } + + fun largeButtonSize(): ButtonDimensions { + return ButtonDimensions( + height = 32.dp, + padding = PaddingValues(vertical = 10.dp, horizontal = 16.dp), + ) + } +} + +@Immutable +data class ButtonDimensions( + val height: Dp, + val padding: PaddingValues, + val shape: RoundedCornerShape = RoundedCornerShape(50), +) + /** TODO * Button * Kind diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Divider.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Divider.kt index d1ab971e..4c27a274 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Divider.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Divider.kt @@ -13,7 +13,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp -import xyz.ksharma.krail.taj.LocalContentColor +import xyz.ksharma.krail.taj.LocalContainerColor import xyz.ksharma.krail.taj.theme.KrailTheme @Composable @@ -22,7 +22,7 @@ fun Divider( type: DividerType = DividerType.HORIZONTAL, color: Color? = null, ) { - CompositionLocalProvider(LocalContentColor provides KrailTheme.colors.onSurface.copy(alpha = 0.2f)) { + CompositionLocalProvider(LocalContainerColor provides KrailTheme.colors.onSurface.copy(alpha = 0.2f)) { Box( modifier = modifier .then( @@ -38,7 +38,7 @@ fun Divider( .width(1.dp) }, ) - .background(color = color ?: LocalContentColor.current), + .background(color = color ?: LocalContainerColor.current), ) } } diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/RoundIconButton.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/RoundIconButton.kt index b9545cef..3405dc71 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/RoundIconButton.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/RoundIconButton.kt @@ -12,8 +12,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.Role +import xyz.ksharma.krail.taj.LocalContainerColor import xyz.ksharma.krail.taj.LocalContentColor -import xyz.ksharma.krail.taj.LocalOnContentColor import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.taj.tokens.ButtonTokens.RoundButtonSize @@ -35,14 +35,14 @@ fun RoundIconButton( content: @Composable () -> Unit = {}, ) { CompositionLocalProvider( - LocalContentColor provides KrailTheme.colors.surface, - LocalOnContentColor provides KrailTheme.colors.onSurface, + LocalContainerColor provides KrailTheme.colors.surface, + LocalContentColor provides KrailTheme.colors.onSurface, ) { Box( modifier = modifier .size(RoundButtonSize) // TODO - token "SearchButtonHeight" .clip(CircleShape) - .background(color = color ?: LocalContentColor.current) + .background(color = color ?: LocalContainerColor.current) .clickable( role = Role.Button, onClickLabel = onClickLabel, diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Text.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Text.kt index 1709f38f..65204aeb 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Text.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Text.kt @@ -4,7 +4,6 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.text.BasicText import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.AnnotatedString @@ -56,24 +55,19 @@ fun Text( onTextLayout: ((TextLayoutResult) -> Unit)? = null, ) { val contentAlpha = LocalContentAlpha.current - CompositionLocalProvider( - LocalTextColor provides KrailTheme.colors.onSurface, // default color for text - LocalTextStyle provides KrailTheme.typography.body, // default style for text - ) { - BasicText( - text = text, - style = style.merge( - color = color?.copy(alpha = contentAlpha) - ?: LocalTextColor.current.copy(alpha = contentAlpha), - textAlign = textAlign, - fontFamily = fontFamily, - ), - maxLines = maxLines, - overflow = overflow, - modifier = modifier, - onTextLayout = onTextLayout, - ) - } + BasicText( + text = text, + style = style.merge( + color = color?.copy(alpha = contentAlpha) + ?: LocalTextColor.current.copy(alpha = contentAlpha), + textAlign = textAlign, + fontFamily = fontFamily, + ), + maxLines = maxLines, + overflow = overflow, + modifier = modifier, + onTextLayout = onTextLayout, + ) } // region Previews diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt index e9172d1a..c57c7770 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/TitleBar.kt @@ -25,7 +25,7 @@ import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.semantics import androidx.compose.ui.unit.dp -import xyz.ksharma.krail.taj.LocalContentColor +import xyz.ksharma.krail.taj.LocalContainerColor import xyz.ksharma.krail.taj.LocalTextColor import xyz.ksharma.krail.taj.LocalTextStyle import xyz.ksharma.krail.taj.theme.KrailTheme @@ -69,7 +69,7 @@ fun TitleBar( horizontalArrangement = Arrangement.spacedBy(8.dp), ) { CompositionLocalProvider( - LocalContentColor provides KrailTheme.colors.onSurface, + LocalContainerColor provides KrailTheme.colors.onSurface, ) { actions() } diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/theme/KrailTypography.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/theme/KrailTypography.kt index 2d6c462a..d4077c63 100644 --- a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/theme/KrailTypography.kt +++ b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/theme/KrailTypography.kt @@ -154,22 +154,22 @@ internal val krailTypography = KrailTypography( titleLarge = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, - fontSize = 22.sp, - lineHeight = 30.sp, + fontSize = 18.sp, + lineHeight = 24.sp, letterSpacing = 0.15.sp, ), titleMedium = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, - fontSize = 20.sp, - lineHeight = 28.sp, + fontSize = 16.sp, + lineHeight = 20.sp, letterSpacing = 0.15.sp, ), titleSmall = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, - fontSize = 18.sp, - lineHeight = 24.sp, + fontSize = 14.sp, + lineHeight = 18.sp, letterSpacing = 0.15.sp, ), emoji = TextStyle(