feat(ui): change clock font and use tabular numbers

Closes: #98
This commit is contained in:
Nishant Mishra
2025-10-31 10:33:43 +05:30
parent 32fbefd3a0
commit c380116299
7 changed files with 51 additions and 32 deletions

View File

@@ -52,7 +52,6 @@ import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density
@@ -65,7 +64,7 @@ import androidx.core.view.WindowInsetsCompat
import androidx.core.view.WindowInsetsControllerCompat
import androidx.navigation3.ui.LocalNavAnimatedContentScope
import kotlinx.coroutines.delay
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock
import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.ui.timerScreen.TimerScreen
import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerMode
@@ -249,10 +248,10 @@ fun SharedTransitionScope.AlwaysOnDisplay(
Text(
text = timerState.timeStr,
style = TextStyle(
fontFamily = openRundeClock,
fontWeight = FontWeight.Bold,
fontFamily = interClock,
fontSize = 56.sp,
letterSpacing = (-2).sp
letterSpacing = (-2).sp,
fontFeatureSettings = "tnum"
),
textAlign = TextAlign.Center,
color = onSurface,

View File

@@ -34,13 +34,12 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock
import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.CustomColors.listItemColors
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@@ -61,8 +60,7 @@ fun MinuteInputField(
imeAction = imeAction
),
textStyle = TextStyle(
fontFamily = openRundeClock,
fontWeight = FontWeight.Bold,
fontFamily = interClock,
fontSize = 57.sp,
letterSpacing = (-2).sp,
color = colorScheme.onSurfaceVariant,

View File

@@ -1,8 +1,18 @@
/*
* Copyright (c) 2025 Nishant Mishra
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
* This file is part of Tomato - a minimalist pomodoro timer for Android.
*
* Tomato is free software: you can redistribute it and/or modify it under the terms of the GNU
* General Public License as published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Tomato is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with Tomato.
* If not, see <https://www.gnu.org/licenses/>.
*/
package org.nsh07.pomodoro.ui.statsScreen
@@ -65,7 +75,7 @@ import org.nsh07.pomodoro.BuildConfig
import org.nsh07.pomodoro.R
import org.nsh07.pomodoro.data.Stat
import org.nsh07.pomodoro.ui.statsScreen.viewModel.StatsViewModel
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock
import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar
import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.utils.millisecondsToHoursMinutes
@@ -209,7 +219,7 @@ fun StatsScreen(
millisecondsToHoursMinutes(todayStat?.totalFocusTime() ?: 0)
},
style = typography.displaySmall,
fontFamily = openRundeClock,
fontFamily = interClock,
color = colorScheme.onPrimaryContainer,
maxLines = 1,
autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -236,7 +246,7 @@ fun StatsScreen(
millisecondsToHoursMinutes(todayStat?.breakTime ?: 0)
},
style = typography.displaySmall,
fontFamily = openRundeClock,
fontFamily = interClock,
color = colorScheme.onTertiaryContainer,
maxLines = 1,
autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -270,7 +280,7 @@ fun StatsScreen(
}
),
style = typography.displaySmall,
fontFamily = openRundeClock
fontFamily = interClock
)
Text(
stringResource(R.string.focus_per_day_avg),
@@ -346,7 +356,7 @@ fun StatsScreen(
}
),
style = typography.displaySmall,
fontFamily = openRundeClock
fontFamily = interClock
)
Text(
text = stringResource(R.string.focus_per_day_avg),
@@ -423,7 +433,7 @@ fun StatsScreen(
}
),
style = typography.displaySmall,
fontFamily = openRundeClock
fontFamily = interClock
)
Text(
text = stringResource(R.string.focus_per_day_avg),

View File

@@ -1,8 +1,18 @@
/*
* Copyright (c) 2025 Nishant Mishra
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
* This file is part of Tomato - a minimalist pomodoro timer for Android.
*
* Tomato is free software: you can redistribute it and/or modify it under the terms of the GNU
* General Public License as published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Tomato is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with Tomato.
* If not, see <https://www.gnu.org/licenses/>.
*/
package org.nsh07.pomodoro.ui.theme
@@ -12,6 +22,7 @@ import androidx.compose.ui.text.ExperimentalTextApi
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontVariation
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
@@ -48,12 +59,17 @@ val Typography = Typography(
)
)
@OptIn(ExperimentalTextApi::class)
object AppFonts {
val openRundeClock = FontFamily(
Font(R.font.open_runde_bold_clock_only, FontWeight.Bold)
val interClock = FontFamily(
Font(
R.font.inter_variable, variationSettings = FontVariation.Settings(
FontWeight.Bold,
FontStyle.Italic
)
)
)
@OptIn(ExperimentalTextApi::class)
val robotoFlexTopBar = FontFamily(
Font(
R.font.roboto_flex_variable,
@@ -73,7 +89,6 @@ object AppFonts {
)
)
@OptIn(ExperimentalTextApi::class)
val robotoFlexHeadline = FontFamily(
Font(
R.font.roboto_flex_variable,
@@ -85,7 +100,6 @@ object AppFonts {
)
)
@OptIn(ExperimentalTextApi::class)
val robotoFlexTitle = FontFamily(
Font(
R.font.roboto_flex_variable,

View File

@@ -87,7 +87,6 @@ import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
@@ -95,7 +94,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation3.ui.LocalNavAnimatedContentScope
import org.nsh07.pomodoro.R
import org.nsh07.pomodoro.ui.theme.AppFonts.openRundeClock
import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar
import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.ui.timerScreen.viewModel.TimerAction
@@ -283,10 +282,10 @@ fun SharedTransitionScope.TimerScreen(
Text(
text = timerState.timeStr,
style = TextStyle(
fontFamily = openRundeClock,
fontWeight = FontWeight.Bold,
fontFamily = interClock,
fontSize = 72.sp,
letterSpacing = (-2).sp
letterSpacing = (-2).sp,
fontFeatureSettings = "tnum"
),
textAlign = TextAlign.Center,
maxLines = 1,
@@ -308,7 +307,7 @@ fun SharedTransitionScope.TimerScreen(
timerState.currentFocusCount,
timerState.totalFocusCount
),
fontFamily = openRundeClock,
fontFamily = interClock,
style = typography.titleLarge,
color = colorScheme.outline
)
@@ -498,8 +497,7 @@ fun SharedTransitionScope.TimerScreen(
Text(
it,
style = TextStyle(
fontFamily = openRundeClock,
fontWeight = FontWeight.Bold,
fontFamily = interClock,
fontSize = 22.sp,
lineHeight = 28.sp,
color = if (timerState.nextTimerMode == TimerMode.FOCUS) colorScheme.primary else colorScheme.tertiary,

Binary file not shown.