From 0c582a9aa58509dcd278b17967eb0036e4c808e7 Mon Sep 17 00:00:00 2001 From: Danilo Lemes Date: Sun, 15 Dec 2024 14:16:04 +0000 Subject: [PATCH 01/15] wip design system --- .idea/compiler.xml | 2 + core/designsystem/build.gradle.kts | 9 + .../core/designsystem/ColorScheme.kt | 182 ++++++++++++++++++ .../core/designsystem/Primitives.kt | 99 ++++++++++ .../app/cleanmeter/core/designsystem/Theme.kt | 12 ++ settings.gradle.kts | 3 +- target/desktop/build.gradle.kts | 1 + .../cleanmeter/target/desktop/ComposeApp.kt | 1 + .../target/desktop/model/OverlaySettings.kt | 1 + .../cleanmeter/target/desktop/ui/AppTheme.kt | 10 +- .../desktop/ui/components/UpdateToast.kt | 2 +- .../target/desktop/ui/overlay/Overlay.kt | 2 +- .../target/desktop/ui/settings/Settings.kt | 9 +- .../desktop/ui/settings/SettingsViewModel.kt | 9 + .../desktop/ui/settings/SettingsWindow.kt | 2 + .../desktop/ui/settings/tabs/AppSettingsUi.kt | 35 +++- 16 files changed, 360 insertions(+), 19 deletions(-) create mode 100644 core/designsystem/build.gradle.kts create mode 100644 core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt create mode 100644 core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt create mode 100644 core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt diff --git a/.idea/compiler.xml b/.idea/compiler.xml index c32b392..8cf9595 100644 --- a/.idea/compiler.xml +++ b/.idea/compiler.xml @@ -2,6 +2,8 @@ + + diff --git a/core/designsystem/build.gradle.kts b/core/designsystem/build.gradle.kts new file mode 100644 index 0000000..38c4671 --- /dev/null +++ b/core/designsystem/build.gradle.kts @@ -0,0 +1,9 @@ +plugins { + kotlin("jvm") + alias(libs.plugins.jetbrainsCompose) + alias(libs.plugins.compose.compiler) +} + +dependencies { + implementation(compose.desktop.currentOs) +} \ No newline at end of file diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt new file mode 100644 index 0000000..7cb9969 --- /dev/null +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt @@ -0,0 +1,182 @@ +package app.cleanmeter.core.designsystem + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color + +@Immutable +data class ColorScheme( + val background: Background, + val text: Text, + val border: Border, + val icon: Icon, +) { + @Immutable + data class Background( + val surface: Color, + val surfaceRaised: Color, + val surfaceOverlay: Color, + val surfaceSunken: Color, + val surfaceSunkenSubtle: Color, + + val brand: Color, + val brandSubtler: Color, + val brandHover: Color, + val brandActive: Color, + + val success: Color, + val successSubtler: Color, + val successHover: Color, + val successActive: Color, + + val warning: Color, + val warningSubtler: Color, + val warningHover: Color, + val warningActive: Color, + + val danger: Color, + val dangerSubtler: Color, + val dangerHover: Color, + val dangerActive: Color, + ) + + @Immutable + data class Text( + val heading: Color, + val subHeading: Color, + + val paragraph1: Color, + val paragraph2: Color, + + val disabled: Color, + val disabledLighter: Color, + + val inverse: Color, + val inverseSubtler: Color, + + val success: Color, + val danger: Color, + val warning: Color, + ) + + @Immutable + data class Border( + val subtler: Color, + val inverse: Color, + val subtle: Color, + val bold: Color, + val bolder: Color, + + val brand: Color, + val brandSubtle: Color, + + val success: Color, + val successDarker: Color, + val danger: Color, + val warning: Color, + ) + + @Immutable + data class Icon( + val bolder: Color, + val bolderHover: Color, + val bolderActive: Color, + val bold: Color, + val boldHover: Color, + val boldActive: Color, + + val subtler: Color, + val subtlerHover: Color, + val subtlerActive: Color, + val subtle: Color, + val subtleHover: Color, + val subtleActive: Color, + + val disabled: Color, + val inverse: Color, + val inverseHover: Color, + val inverseActive: Color, + + val success: Color, + val danger: Color, + val warning: Color, + ) +} + +internal val defaultColorScheme = ColorScheme( + background = ColorScheme.Background( + surface = Primitives.Gray.Gray100, + surfaceRaised = Primitives.Plain.White, + surfaceOverlay = Primitives.Plain.White, + surfaceSunken = Primitives.Gray.Gray300, + surfaceSunkenSubtle = Primitives.Gray.Gray50, + brand = Primitives.Gray.Gray950, + brandSubtler = Primitives.Gray.Gray900, + brandHover = Primitives.Gray.Gray500, + brandActive = Primitives.Gray.Gray600, + success = Primitives.Green.Green700, + successSubtler = Primitives.Green.Green50, + successHover = Primitives.Green.Green500, + successActive = Primitives.Green.Green600, + warning = Primitives.Yellow.Yellow700, + warningSubtler = Primitives.Yellow.Yellow50, + warningHover = Primitives.Yellow.Yellow300, + warningActive = Primitives.Yellow.Yellow400, + danger = Primitives.Red.Red700, + dangerSubtler = Primitives.Red.Red50, + dangerHover = Primitives.Red.Red500, + dangerActive = Primitives.Red.Red600, + ), + text = ColorScheme.Text( + heading = Primitives.Gray.Gray950, + subHeading = Primitives.Gray.Gray800, + paragraph1 = Primitives.Gray.Gray600, + paragraph2 = Primitives.Gray.Gray500, + disabled = Primitives.Gray.Gray400, + disabledLighter = Primitives.Gray.Gray300, + inverse = Primitives.Plain.White, + inverseSubtler = Primitives.Gray.Gray50, + success = Primitives.Green.Green900, + danger = Primitives.Red.Red900, + warning = Primitives.Yellow.Yellow900 + ), + border = ColorScheme.Border( + subtler = Primitives.Gray.Gray100, + inverse = Primitives.Plain.White, + subtle = Primitives.Gray.Gray200, + bold = Primitives.Gray.Gray300.copy(alpha = 0.5f), + bolder = Primitives.Gray.Gray300, + brand = Primitives.Gray.Gray950, + brandSubtle = Primitives.Gray.Gray950.copy(alpha = 0.1f), + success = Primitives.Green.Green600, + successDarker = Primitives.Green.Green700, + danger = Primitives.Red.Red600, + warning = Primitives.Yellow.Yellow600, + ), + icon = ColorScheme.Icon( + bolder = Primitives.Gray.Gray950, + bolderHover = Primitives.Gray.Gray500, + bolderActive = Primitives.Gray.Gray600, + bold = Primitives.Gray.Gray800, + boldHover = Primitives.Gray.Gray500, + boldActive = Primitives.Gray.Gray600, + subtler = Primitives.Gray.Gray600, + subtlerHover = Primitives.Gray.Gray400, + subtlerActive = Primitives.Gray.Gray500, + subtle = Primitives.Gray.Gray500, + subtleHover = Primitives.Gray.Gray300, + subtleActive = Primitives.Gray.Gray400, + disabled = Primitives.Gray.Gray400, + inverse = Primitives.Plain.White, + inverseHover = Primitives.Gray.Gray50, + inverseActive = Primitives.Gray.Gray200, + success = Primitives.Green.Green500, + danger = Primitives.Red.Red500, + warning = Primitives.Yellow.Yellow300, + ) +) + +internal val darkColorScheme = defaultColorScheme.copy( + background = defaultColorScheme.background.copy( + surface = Primitives.Gray.Gray800 + ), +) \ No newline at end of file diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt new file mode 100644 index 0000000..8b4f087 --- /dev/null +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt @@ -0,0 +1,99 @@ +package app.cleanmeter.core.designsystem + +import androidx.compose.ui.graphics.Color + +object Primitives { + object Gray { + val Gray25 = Color(0xFFFAFAFA) + val Gray50 = Color(0xFFFAFAFA) + val Gray100 = Color(0xFFF0F1F1) + val Gray200 = Color(0xFFFAFAFA) + val Gray300 = Color(0xFFFAFAFA) + val Gray400 = Color(0xFFFAFAFA) + val Gray500 = Color(0xFFFAFAFA) + val Gray600 = Color(0xFFFAFAFA) + val Gray700 = Color(0xFFFAFAFA) + val Gray800 = Color(0xFF1F242F) + val Gray900 = Color(0xFFFAFAFA) + val Gray950 = Color(0xFFFAFAFA) + } + + object Red { + val Red25 = Color(0xFFFAFAFA) + val Red50 = Color(0xFFFAFAFA) + val Red100 = Color(0xFFFAFAFA) + val Red200 = Color(0xFFFAFAFA) + val Red300 = Color(0xFFFAFAFA) + val Red400 = Color(0xFFFAFAFA) + val Red500 = Color(0xFFFAFAFA) + val Red600 = Color(0xFFFAFAFA) + val Red700 = Color(0xFFFAFAFA) + val Red800 = Color(0xFFFAFAFA) + val Red900 = Color(0xFFFAFAFA) + val Red950 = Color(0xFFFAFAFA) + } + + object Yellow { + val Yellow25 = Color(0xFFFAFAFA) + val Yellow50 = Color(0xFFFAFAFA) + val Yellow100 = Color(0xFFFAFAFA) + val Yellow200 = Color(0xFFFAFAFA) + val Yellow300 = Color(0xFFFAFAFA) + val Yellow400 = Color(0xFFFAFAFA) + val Yellow500 = Color(0xFFFAFAFA) + val Yellow600 = Color(0xFFFAFAFA) + val Yellow700 = Color(0xFFFAFAFA) + val Yellow800 = Color(0xFFFAFAFA) + val Yellow900 = Color(0xFFFAFAFA) + val Yellow950 = Color(0xFFFAFAFA) + } + + object Green { + val Green25 = Color(0xFFFAFAFA) + val Green50 = Color(0xFFFAFAFA) + val Green100 = Color(0xFFFAFAFA) + val Green200 = Color(0xFFFAFAFA) + val Green300 = Color(0xFFFAFAFA) + val Green400 = Color(0xFFFAFAFA) + val Green500 = Color(0xFFFAFAFA) + val Green600 = Color(0xFFFAFAFA) + val Green700 = Color(0xFFFAFAFA) + val Green800 = Color(0xFFFAFAFA) + val Green900 = Color(0xFFFAFAFA) + val Green950 = Color(0xFFFAFAFA) + } + + object Emerald { + val Emerald25 = Color(0xFFFAFAFA) + val Emerald50 = Color(0xFFFAFAFA) + val Emerald100 = Color(0xFFFAFAFA) + val Emerald200 = Color(0xFFFAFAFA) + val Emerald300 = Color(0xFFFAFAFA) + val Emerald400 = Color(0xFFFAFAFA) + val Emerald500 = Color(0xFFFAFAFA) + val Emerald600 = Color(0xFFFAFAFA) + val Emerald700 = Color(0xFFFAFAFA) + val Emerald800 = Color(0xFFFAFAFA) + val Emerald900 = Color(0xFFFAFAFA) + val Emerald950 = Color(0xFFFAFAFA) + } + + object Purple { + val Purple25 = Color(0xFFFAFAFA) + val Purple50 = Color(0xFFFAFAFA) + val Purple100 = Color(0xFFFAFAFA) + val Purple200 = Color(0xFFFAFAFA) + val Purple300 = Color(0xFFFAFAFA) + val Purple400 = Color(0xFFFAFAFA) + val Purple500 = Color(0xFFFAFAFA) + val Purple600 = Color(0xFFFAFAFA) + val Purple700 = Color(0xFFFAFAFA) + val Purple800 = Color(0xFFFAFAFA) + val Purple900 = Color(0xFFFAFAFA) + val Purple950 = Color(0xFFFAFAFA) + } + + object Plain { + val White = Color(0xFFFFFFFF) + } +} \ No newline at end of file diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt new file mode 100644 index 0000000..240b158 --- /dev/null +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt @@ -0,0 +1,12 @@ +package app.cleanmeter.core.designsystem + +import androidx.compose.runtime.staticCompositionLocalOf +import app.cleanmeter.core.designsystem.Theme.Light + +object Theme { + + val Light: ColorScheme = defaultColorScheme + val Dark: ColorScheme = darkColorScheme +} + +public val LocalColorScheme = staticCompositionLocalOf { Light } \ No newline at end of file diff --git a/settings.gradle.kts b/settings.gradle.kts index 5691ce8..bd32a86 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -40,5 +40,6 @@ include( "core:common", "core:native", "core:updater", - "target:desktop" + "core:designsystem", + "target:desktop", ) diff --git a/target/desktop/build.gradle.kts b/target/desktop/build.gradle.kts index 9b7d737..a3b4f25 100644 --- a/target/desktop/build.gradle.kts +++ b/target/desktop/build.gradle.kts @@ -42,6 +42,7 @@ dependencies { implementation(projects.core.common) implementation(projects.core.native) implementation(projects.core.updater) + implementation(projects.core.designsystem) } sourceSets { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt index 332d0f2..2a1fcaa 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt @@ -36,6 +36,7 @@ fun composeApp() = application { ) SettingsWindow( + isDarkTheme = state.overlaySettings.isDarkTheme, getOverlayPosition = { overlayPosition }, onApplicationExit = { if (!ApplicationParams.isAutostart) { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt index a36c647..4dc93a0 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt @@ -5,6 +5,7 @@ import kotlinx.serialization.Serializable @Serializable data class OverlaySettings( + val isDarkTheme: Boolean = false, val isHorizontal: Boolean = true, val positionIndex: Int = 0, val selectedDisplayIndex: Int = 0, diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt index e0ebb61..48f28cf 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt @@ -9,6 +9,8 @@ import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.platform.Font import androidx.compose.ui.unit.LayoutDirection +import app.cleanmeter.core.designsystem.LocalColorScheme +import app.cleanmeter.core.designsystem.Theme val fontFamily = FontFamily( Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin), @@ -23,12 +25,14 @@ val fontFamily = FontFamily( ) @Composable -fun AppTheme(content: @Composable () -> Unit) { +fun AppTheme(isDarkTheme: Boolean, content: @Composable () -> Unit) { MaterialTheme( typography = Typography(defaultFontFamily = fontFamily), ) { - CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { - content() + CompositionLocalProvider(LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light) { + CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { + content() + } } } } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt index 72bbd87..d23fcb4 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt @@ -237,7 +237,7 @@ private fun IconProgress(state: UpdateState) { @Preview @Composable private fun UpdateToastPreview() { - AppTheme { + AppTheme(false) { Box(modifier = Modifier.fillMaxSize().padding(8.dp)) { UpdateToast() } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt index 79e14a2..a98688b 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt @@ -14,7 +14,7 @@ import app.cleanmeter.target.desktop.ui.AppTheme fun Overlay( data: HardwareMonitorData?, overlaySettings: OverlaySettings, -) = AppTheme { +) = AppTheme(false) { if ( listOf( overlaySettings.sensors.framerate, diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt index 1b5a54f..eb30c0d 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt @@ -27,6 +27,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel import app.cleanmeter.core.common.hardwaremonitor.cpuReadings import app.cleanmeter.core.common.hardwaremonitor.gpuReadings import app.cleanmeter.core.common.hardwaremonitor.networkReadings +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.AppTheme import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray @@ -42,15 +43,15 @@ import app.cleanmeter.updater.UpdateState @Composable fun WindowScope.Settings( + isDarkTheme: Boolean, viewModel: SettingsViewModel = viewModel(), onCloseRequest: () -> Unit, onMinimizeRequest: () -> Unit, getOverlayPosition: () -> IntOffset -) = AppTheme { +) = AppTheme(isDarkTheme) { val settingsState by viewModel.state.collectAsState(SettingsState()) val updaterState by AutoUpdater.state.collectAsState() - if (settingsState.overlaySettings == null) { return@AppTheme } @@ -58,7 +59,7 @@ fun WindowScope.Settings( Column( modifier = Modifier .fillMaxSize() - .background(BackgroundOffWhite, RoundedCornerShape(12.dp)) + .background(LocalColorScheme.current.background.surface, RoundedCornerShape(12.dp)) ) { WindowDraggableArea { TopBar(onCloseRequest = onCloseRequest, onMinimizeRequest = onMinimizeRequest) @@ -138,7 +139,7 @@ private fun TabContent( onOverlayCustomPositionEnable = { viewModel.onEvent(SettingsEvent.OverlayCustomPositionEnable(it)) }, ) - 2 -> AppSettingsUi() + 2 -> AppSettingsUi(overlaySettings = settingsState.overlaySettings!!, onEvent = viewModel::onEvent) 3 -> HelpSettingsUi() else -> Unit } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt index cb17b89..0bc2f35 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt @@ -30,6 +30,7 @@ sealed class SettingsEvent { data class OverlayOrientationSelect(val isHorizontal: Boolean) : SettingsEvent() data class OverlayOpacityChange(val opacity: Float) : SettingsEvent() data class OverlayGraphChange(val progressType: OverlaySettings.ProgressType) : SettingsEvent() + data class DarkThemeToggle(val isEnabled: Boolean) : SettingsEvent() } class SettingsViewModel : ViewModel() { @@ -73,6 +74,14 @@ class SettingsViewModel : ViewModel() { is SettingsEvent.OverlayOrientationSelect -> onOverlayOrientationSelect(event.isHorizontal, this) is SettingsEvent.OverlayOpacityChange -> onOverlayOpacityChange(event.opacity, this) is SettingsEvent.OverlayGraphChange -> onOverlayGraphChange(event.progressType, this) + is SettingsEvent.DarkThemeToggle -> onDarkModeToggle(event.isEnabled, this) + } + } + + private fun onDarkModeToggle(enabled: Boolean, settingsState: SettingsState) { + with(settingsState) { + val newSettings = overlaySettings?.copy(isDarkTheme = enabled) + OverlaySettingsRepository.setOverlaySettings(newSettings) } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt index 451de85..644cc46 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt @@ -19,6 +19,7 @@ import com.github.kwhat.jnativehook.GlobalScreen @Composable fun ApplicationScope.SettingsWindow( + isDarkTheme: Boolean, getOverlayPosition: () -> IntOffset, onApplicationExit: () -> Unit, ) { @@ -45,6 +46,7 @@ fun ApplicationScope.SettingsWindow( transparent = true, ) { Settings( + isDarkTheme = isDarkTheme, onCloseRequest = { isVisible = false }, onMinimizeRequest = { state.isMinimized = true }, getOverlayPosition = getOverlayPosition diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt index f1f89ef..71fdfda 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt @@ -2,7 +2,13 @@ package app.cleanmeter.target.desktop.ui.settings.tabs import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.TooltipArea +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material.Icon import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AdminPanelSettings @@ -11,25 +17,24 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.unit.dp -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import app.cleanmeter.core.os.win32.WinRegistry import app.cleanmeter.target.desktop.data.PREFERENCE_START_MINIMIZED import app.cleanmeter.target.desktop.data.PreferencesRepository +import app.cleanmeter.target.desktop.model.OverlaySettings import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel import app.cleanmeter.target.desktop.ui.components.Label import app.cleanmeter.target.desktop.ui.components.Section import app.cleanmeter.target.desktop.ui.settings.FooterUi -import app.cleanmeter.core.os.win32.WinRegistry +import app.cleanmeter.target.desktop.ui.settings.SettingsEvent @Composable -fun AppSettingsUi() = Box(modifier = Modifier.fillMaxSize().padding(top = 20.dp)) { +fun AppSettingsUi( + overlaySettings: OverlaySettings, + onEvent: (SettingsEvent) -> Unit +) = Box(modifier = Modifier.fillMaxSize().padding(top = 20.dp)) { Column( modifier = Modifier.verticalScroll(rememberScrollState()), verticalArrangement = Arrangement.spacedBy(16.dp) @@ -42,6 +47,7 @@ fun AppSettingsUi() = Box(modifier = Modifier.fillMaxSize().padding(top = 20.dp) ) { startWithWindowsCheckbox() startMinimizedCheckbox() + darkThemeCheckbox(overlaySettings = overlaySettings, onEvent = onEvent) } } } @@ -86,3 +92,14 @@ private fun startMinimizedCheckbox() { }, ) } + +@Composable +private fun darkThemeCheckbox(overlaySettings: OverlaySettings, onEvent: (SettingsEvent) -> Unit) { + CheckboxWithLabel( + label = "Dark Theme", + checked = overlaySettings.isDarkTheme, + onCheckedChange = { value -> + onEvent(SettingsEvent.DarkThemeToggle(value)) + }, + ) +} From 92b60d07a6ff2779e6b4b8fe28f674122b8817ae Mon Sep 17 00:00:00 2001 From: Danilo Lemes Date: Sun, 15 Dec 2024 17:31:17 +0000 Subject: [PATCH 02/15] make texts use Typography class --- .../app/cleanmeter/core/designsystem/Theme.kt | 4 +- .../core/designsystem/Typography.kt | 150 ++++++++++++++++++ .../src/main/resources/font/inter_black.ttf | Bin .../src/main/resources/font/inter_bold.ttf | Bin .../main/resources/font/inter_extrabold.ttf | Bin .../main/resources/font/inter_extralight.ttf | Bin .../src/main/resources/font/inter_light.ttf | Bin .../src/main/resources/font/inter_medium.ttf | Bin .../src/main/resources/font/inter_regular.ttf | Bin .../main/resources/font/inter_semibold.ttf | Bin .../src/main/resources/font/inter_thin.ttf | Bin .../cleanmeter/target/desktop/ui/AppTheme.kt | 31 +--- .../ui/components/CheckboxWithLabel.kt | 8 +- .../desktop/ui/components/DropdownMenu.kt | 8 +- .../components/KeyboardShortcutInfoLabel.kt | 4 +- .../target/desktop/ui/components/Label.kt | 16 -- .../target/desktop/ui/components/Pill.kt | 8 +- .../desktop/ui/components/ProgressUnit.kt | 9 +- .../components/SensorReadingDropdownMenu.kt | 13 +- .../desktop/ui/components/SettingsTab.kt | 4 +- .../target/desktop/ui/components/StyleCard.kt | 10 +- .../target/desktop/ui/components/Text.kt | 18 +++ .../target/desktop/ui/components/Title.kt | 20 --- .../target/desktop/ui/components/TopBar.kt | 22 +-- .../{ => section}/CheckboxSection.kt | 27 +--- .../{ => section}/CollapsibleSection.kt | 12 +- .../{ => section}/DropdownSection.kt | 13 +- .../ui/components/{ => section}/Section.kt | 13 +- .../components/{ => section}/ToggleSection.kt | 13 +- .../target/desktop/ui/settings/Footer.kt | 29 ++-- .../desktop/ui/settings/tabs/AppSettingsUi.kt | 18 ++- .../ui/settings/tabs/HelpSettingsUi.kt | 48 ++---- .../ui/settings/tabs/OverlaySettingsUi.kt | 6 +- .../ui/settings/tabs/style/GraphType.kt | 2 +- .../desktop/ui/settings/tabs/style/Opacity.kt | 2 +- .../ui/settings/tabs/style/Orientation.kt | 2 +- .../ui/settings/tabs/style/Position.kt | 21 +-- 37 files changed, 295 insertions(+), 236 deletions(-) create mode 100644 core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt rename {target/desktop => core/designsystem}/src/main/resources/font/inter_black.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_bold.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_extrabold.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_extralight.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_light.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_medium.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_regular.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_semibold.ttf (100%) rename {target/desktop => core/designsystem}/src/main/resources/font/inter_thin.ttf (100%) delete mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt create mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt delete mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => section}/CheckboxSection.kt (80%) rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => section}/CollapsibleSection.kt (90%) rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => section}/DropdownSection.kt (83%) rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => section}/Section.kt (81%) rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => section}/ToggleSection.kt (84%) diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt index 240b158..2e28fd5 100644 --- a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt @@ -7,6 +7,8 @@ object Theme { val Light: ColorScheme = defaultColorScheme val Dark: ColorScheme = darkColorScheme + val Typography = Typography() } -public val LocalColorScheme = staticCompositionLocalOf { Light } \ No newline at end of file +val LocalColorScheme = staticCompositionLocalOf { Light } +val LocalTypography = staticCompositionLocalOf { Theme.Typography } diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt new file mode 100644 index 0000000..1a2a0a3 --- /dev/null +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt @@ -0,0 +1,150 @@ +package app.cleanmeter.core.designsystem + +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.platform.Font +import androidx.compose.ui.unit.sp + +class Typography { + + /** + * fontSize = 16.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Medium, + */ + val titleM: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 16.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Medium, + ) + + /** + * fontSize = 16.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Medium, + */ + val titleMMedium: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 16.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Medium, + ) + + /** + * fontSize = 14.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Normal, + */ + val labelL: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 14.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Normal, + ) + + /** + * fontSize = 14.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Thin, + */ + val labelLThin: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 14.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Thin, + ) + + /** + * fontSize = 14.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Medium, + */ + val labelLMedium: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 14.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Medium, + ) + + /** + * fontSize = 14.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.SemiBold, + */ + val labelLSemiBold: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 14.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.SemiBold, + ) + + /** + * fontSize = 13.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Normal, + */ + val labelM: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 13.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Normal, + ) + + /** + * fontSize = 13.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.SemiBold, + */ + val labelMSemiBold: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 13.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.SemiBold, + ) + + /** + * fontSize = 12.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Normal, + */ + val labelS: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 12.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Normal, + ) + + /** + * fontSize = 10.sp, + * lineHeight = 0.sp, + * fontWeight = FontWeight.Normal, + */ + val bodyM: TextStyle + @Composable get() = defaultTextStyle.copy( + fontSize = 10.sp, + lineHeight = 0.sp, + fontWeight = FontWeight.Normal, + ) + + private val fontFamily = FontFamily( + Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin), + Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight), + Font(resource = "font/inter_light.ttf", weight = FontWeight.Light), + Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal), + Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium), + Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold), + Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold), + Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold), + Font(resource = "font/inter_black.ttf", weight = FontWeight.Black), + ) + + private val defaultTextStyle: TextStyle + @Composable get() = TextStyle( + fontFamily = fontFamily, + fontWeight = FontWeight.Normal, + color = LocalColorScheme.current.text.paragraph1 + ) +} \ No newline at end of file diff --git a/target/desktop/src/main/resources/font/inter_black.ttf b/core/designsystem/src/main/resources/font/inter_black.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_black.ttf rename to core/designsystem/src/main/resources/font/inter_black.ttf diff --git a/target/desktop/src/main/resources/font/inter_bold.ttf b/core/designsystem/src/main/resources/font/inter_bold.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_bold.ttf rename to core/designsystem/src/main/resources/font/inter_bold.ttf diff --git a/target/desktop/src/main/resources/font/inter_extrabold.ttf b/core/designsystem/src/main/resources/font/inter_extrabold.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_extrabold.ttf rename to core/designsystem/src/main/resources/font/inter_extrabold.ttf diff --git a/target/desktop/src/main/resources/font/inter_extralight.ttf b/core/designsystem/src/main/resources/font/inter_extralight.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_extralight.ttf rename to core/designsystem/src/main/resources/font/inter_extralight.ttf diff --git a/target/desktop/src/main/resources/font/inter_light.ttf b/core/designsystem/src/main/resources/font/inter_light.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_light.ttf rename to core/designsystem/src/main/resources/font/inter_light.ttf diff --git a/target/desktop/src/main/resources/font/inter_medium.ttf b/core/designsystem/src/main/resources/font/inter_medium.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_medium.ttf rename to core/designsystem/src/main/resources/font/inter_medium.ttf diff --git a/target/desktop/src/main/resources/font/inter_regular.ttf b/core/designsystem/src/main/resources/font/inter_regular.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_regular.ttf rename to core/designsystem/src/main/resources/font/inter_regular.ttf diff --git a/target/desktop/src/main/resources/font/inter_semibold.ttf b/core/designsystem/src/main/resources/font/inter_semibold.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_semibold.ttf rename to core/designsystem/src/main/resources/font/inter_semibold.ttf diff --git a/target/desktop/src/main/resources/font/inter_thin.ttf b/core/designsystem/src/main/resources/font/inter_thin.ttf similarity index 100% rename from target/desktop/src/main/resources/font/inter_thin.ttf rename to core/designsystem/src/main/resources/font/inter_thin.ttf diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt index 48f28cf..e0ce0a7 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt @@ -1,38 +1,23 @@ package app.cleanmeter.target.desktop.ui import androidx.compose.material.MaterialTheme -import androidx.compose.material.Typography import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.platform.LocalLayoutDirection -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.platform.Font import androidx.compose.ui.unit.LayoutDirection import app.cleanmeter.core.designsystem.LocalColorScheme +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.core.designsystem.Theme -val fontFamily = FontFamily( - Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin), - Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight), - Font(resource = "font/inter_light.ttf", weight = FontWeight.Light), - Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal), - Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium), - Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold), - Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold), - Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold), - Font(resource = "font/inter_black.ttf", weight = FontWeight.Black), -) - @Composable fun AppTheme(isDarkTheme: Boolean, content: @Composable () -> Unit) { - MaterialTheme( - typography = Typography(defaultFontFamily = fontFamily), - ) { - CompositionLocalProvider(LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light) { - CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { - content() - } + MaterialTheme { + CompositionLocalProvider( + LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light, + LocalTypography provides Theme.Typography, + LocalLayoutDirection provides LayoutDirection.Ltr + ) { + content() } } } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt index f552bdc..cd2ed72 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray @Composable @@ -36,11 +37,10 @@ fun CheckboxWithLabel( Text( text = label, - fontSize = 14.sp, + style = LocalTypography.current.labelL.copy( + letterSpacing = 0.14.sp, + ), color = DarkGray, - lineHeight = 0.sp, - fontWeight = FontWeight(550), - letterSpacing = 0.14.sp ) trailingItem?.invoke() diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt index 9fdc1c5..1cdde3b 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt @@ -26,7 +26,9 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray +import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray @OptIn(ExperimentalMaterialApi::class) @@ -91,7 +93,11 @@ fun DropdownMenu( onValueChanged(index) }, modifier = Modifier.fillMaxWidth() ) { - Text(text = item) + Text( + text = item, + style = LocalTypography.current.labelLMedium, + color = DarkGray, + ) } } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt index 57aef83..459d509 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.BorderGray @Composable @@ -39,8 +40,7 @@ internal fun KeyboardShortcutInfoLabel() { Text( text = "Hot key for showing/hiding the overlay", color = Color.DarkGray, - fontSize = 14.sp, - fontWeight = FontWeight(600), + style = LocalTypography.current.labelLSemiBold, modifier = Modifier.padding(bottom = 2.5.dp), ) } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt deleted file mode 100644 index b53fcdd..0000000 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt +++ /dev/null @@ -1,16 +0,0 @@ -package app.cleanmeter.target.desktop.ui.components - -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.unit.sp - -@Composable -fun Label( - text: String, - style: TextStyle = MaterialTheme.typography.subtitle2.copy(lineHeight = 0.sp), -) = Text( - text = text, - style = style -) diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt index 86a676b..30812be 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.OffWhite import app.cleanmeter.target.desktop.ui.overlay.conditional @@ -48,11 +49,10 @@ fun Pill( ) { Text( text = title, - fontSize = 10.sp, + style = LocalTypography.current.bodyM.copy( + letterSpacing = 1.sp, + ), color = OffWhite, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, - letterSpacing = 1.sp ) content() diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt index a08dba0..6003891 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt @@ -8,15 +8,14 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography @Composable fun ProgressUnit(unit: String) { Text( text = unit, - fontSize = 10.sp, + style = LocalTypography.current.bodyM, color = Color.White, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, modifier = Modifier.padding(bottom = 1.dp) ) } @@ -25,9 +24,7 @@ fun ProgressUnit(unit: String) { fun ProgressLabel(label: String) { Text( text = label, - fontSize = 16.sp, + style = LocalTypography.current.titleM, color = Color.White, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt index a7faf7c..4c70f41 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt @@ -53,6 +53,7 @@ import androidx.compose.ui.window.Popup import androidx.compose.ui.window.PopupPositionProvider import androidx.compose.ui.window.PopupProperties import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray @@ -202,11 +203,8 @@ fun SensorReadingDropdownMenu( ) { Text( text = dropdownLabel(item), + style = LocalTypography.current.labelLMedium, color = DarkGray, - fontSize = 14.sp, - fontWeight = FontWeight(550), - lineHeight = 0.sp, - modifier = Modifier ) if (index == selectedIndex) { @@ -257,10 +255,8 @@ private fun Header( ) { Text( text = "Select $label sensor", - fontSize = 13.sp, + style = LocalTypography.current.labelMSemiBold, color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, textAlign = TextAlign.Center, ) @@ -298,8 +294,7 @@ private fun Header( BasicTextField( value = filter, - textStyle = TextStyle( - fontSize = 12.sp, + textStyle = LocalTypography.current.labelS.copy( lineHeight = 2.sp, textAlign = TextAlign.Start, ), diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt index 1b71869..4e67dda 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt @@ -21,6 +21,7 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray @@ -59,9 +60,8 @@ internal fun SettingsTab( ) Text( text = label, - fontWeight = FontWeight.Medium, + style = LocalTypography.current.titleM, color = if (selected) Color.White else MutedGray, - fontSize = 16.sp, ) } } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt index 9064312..1f65a04 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray @@ -59,12 +60,11 @@ internal fun StyleCard( } else { Text( text = label, - fontSize = 14.sp, + style = LocalTypography.current.labelLMedium.copy( + letterSpacing = 0.14.sp + ), color = DarkGray, - lineHeight = 0.sp, - fontWeight = FontWeight(550), - letterSpacing = 0.14.sp, - modifier = Modifier.align(Alignment.CenterStart) + modifier = Modifier.align(Alignment.CenterStart), ) } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt new file mode 100644 index 0000000..5455352 --- /dev/null +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt @@ -0,0 +1,18 @@ +package app.cleanmeter.target.desktop.ui.components + +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography +import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray + +@Composable +internal fun SectionTitle(title: String) { + Text( + text = title, + style = LocalTypography.current.labelMSemiBold.copy( + letterSpacing = 1.sp, + ), + color = MutedGray, + ) +} \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt deleted file mode 100644 index 3accb9a..0000000 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt +++ /dev/null @@ -1,20 +0,0 @@ -package app.cleanmeter.target.desktop.ui.components - -import androidx.compose.foundation.layout.padding -import androidx.compose.material.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp - -@Composable -fun Title(text: String) = Text( - modifier = Modifier.padding(bottom = 8.dp), - text = text, - style = TextStyle( - fontSize = 18.sp, - fontWeight = FontWeight.Medium - ) -) diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt index e323ad3..be2fb61 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt @@ -24,6 +24,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray @@ -58,8 +59,8 @@ internal fun TopBar( ) Text( text = "Clean Meter", - fontWeight = FontWeight.Medium, - fontSize = 16.sp + style = LocalTypography.current.titleMMedium, + color = DarkGray ) } @@ -70,14 +71,15 @@ internal fun TopBar( colorFilter = ColorFilter.tint(MutedGray), modifier = Modifier.clickable { onMinimizeRequest() } ) - TooltipArea({ - Text( - text = "Closing will minimize to the Tray", - fontWeight = FontWeight.Medium, - color = DarkGray, - fontSize = 14.sp - ) - }) { + TooltipArea( + delayMillis = 0, + tooltip = { + Text( + text = "Closing will minimize to the Tray", + style = LocalTypography.current.labelM, + color = DarkGray, + ) + }) { Image( imageVector = Icons.Rounded.Close, contentDescription = "Close", diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt similarity index 80% rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt index 735c6da..77f9a23 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt @@ -1,4 +1,4 @@ -package app.cleanmeter.target.desktop.ui.components +package app.cleanmeter.target.desktop.ui.components.section import androidx.compose.animation.animateContentSize import androidx.compose.foundation.background @@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue @@ -16,10 +15,10 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray +import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel +import app.cleanmeter.target.desktop.ui.components.SectionTitle +import app.cleanmeter.target.desktop.ui.components.Toggle import app.cleanmeter.target.desktop.ui.settings.CheckboxSectionOption @Composable @@ -38,14 +37,7 @@ fun CheckboxSection( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) + SectionTitle(title = title) Toggle( checked = isAnySelected, onCheckedChange = onSwitchToggle @@ -82,14 +74,7 @@ fun CustomBodyCheckboxSection( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) + SectionTitle(title = title) Toggle( checked = isAnySelected, onCheckedChange = onSwitchToggle diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt similarity index 90% rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt index 414e8fa..46d5da7 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt @@ -1,4 +1,4 @@ -package app.cleanmeter.target.desktop.ui.components +package app.cleanmeter.target.desktop.ui.components.section import androidx.compose.animation.animateContentSize import androidx.compose.foundation.background @@ -31,6 +31,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray +import app.cleanmeter.target.desktop.ui.components.SectionTitle @Composable fun CollapsibleSection( @@ -57,14 +58,7 @@ fun CollapsibleSection( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) + SectionTitle(title = title) IconButton(onClick = { expanded = !expanded }, modifier = Modifier.clearAndSetSemantics { }.height(20.dp)) { Icon( imageVector = Icons.Rounded.ChevronRight, diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt similarity index 83% rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt index 2aa77c0..2af431a 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt @@ -1,4 +1,4 @@ -package app.cleanmeter.target.desktop.ui.components +package app.cleanmeter.target.desktop.ui.components.section import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement @@ -16,6 +16,8 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray +import app.cleanmeter.target.desktop.ui.components.DropdownMenu +import app.cleanmeter.target.desktop.ui.components.SectionTitle @Composable fun DropdownSection( @@ -32,14 +34,7 @@ fun DropdownSection( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) + SectionTitle(title = title) } DropdownMenu( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt similarity index 81% rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt index cb6daf1..2cec026 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt @@ -1,4 +1,4 @@ -package app.cleanmeter.target.desktop.ui.components +package app.cleanmeter.target.desktop.ui.components.section import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement @@ -16,6 +16,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray +import app.cleanmeter.target.desktop.ui.components.SectionTitle @Composable fun Section( @@ -31,15 +32,7 @@ fun Section( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) - + SectionTitle(title = title) } content() diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt similarity index 84% rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt index 5115fd2..4e10785 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt @@ -1,4 +1,4 @@ -package app.cleanmeter.target.desktop.ui.components +package app.cleanmeter.target.desktop.ui.components.section import androidx.compose.animation.animateContentSize import androidx.compose.foundation.background @@ -17,6 +17,8 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray +import app.cleanmeter.target.desktop.ui.components.SectionTitle +import app.cleanmeter.target.desktop.ui.components.Toggle @Composable fun ToggleSection( @@ -33,14 +35,7 @@ fun ToggleSection( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - Text( - text = title, - fontSize = 13.sp, - color = MutedGray, - lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, - letterSpacing = 1.sp - ) + SectionTitle(title = title) Toggle( checked = isEnabled, onCheckedChange = onSwitchToggle diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt index 6aa9733..e85a61c 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt @@ -35,7 +35,9 @@ import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.BorderGray +import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray @Composable @@ -80,11 +82,8 @@ fun FooterUi(modifier: Modifier = Modifier) { ClickableText( text = text, - style = TextStyle( - fontSize = 12.sp, + style = LocalTypography.current.labelS.copy( color = LabelGray, - lineHeight = 0.sp, - fontWeight = FontWeight(450), letterSpacing = 0.14.sp, ), onClick = { offset -> @@ -106,11 +105,10 @@ fun FooterUi(modifier: Modifier = Modifier) { Text( text = "Version ${System.getProperty("jpackage.app-version")}", - fontSize = 12.sp, - color = LabelGray, - lineHeight = 0.sp, - fontWeight = FontWeight(450), - letterSpacing = 0.14.sp, + style = LocalTypography.current.labelS.copy( + color = LabelGray, + letterSpacing = 0.14.sp, + ) ) } } @@ -142,8 +140,7 @@ private fun Github(uriHandler: UriHandler) { Text( text = "Check the latest build", color = Color.DarkGray, - fontSize = 14.sp, - fontWeight = FontWeight(600), + style = LocalTypography.current.labelLSemiBold, ) } Icon(Icons.Rounded.ChevronRight, "") @@ -174,9 +171,8 @@ private fun RowScope.Donate(uriHandler: UriHandler) { Image(painterResource("icons/ko-fi.png"), "") Text( text = "Like the work? Support us!", - color = Color.DarkGray, - fontSize = 14.sp, - fontWeight = FontWeight(600), + color = DarkGray, + style = LocalTypography.current.labelLSemiBold, ) } Image(Icons.Rounded.ChevronRight, "") @@ -207,9 +203,8 @@ private fun RowScope.Discord(uriHandler: UriHandler) { Image(painterResource("icons/discord.png"), "") Text( text = "Join the discord server!", - color = Color.DarkGray, - fontSize = 14.sp, - fontWeight = FontWeight(600), + color = DarkGray, + style = LocalTypography.current.labelLSemiBold, ) } Image(Icons.Rounded.ChevronRight, "") diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt index 71fdfda..54fe886 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.Icon +import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AdminPanelSettings import androidx.compose.runtime.Composable @@ -20,13 +21,14 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.core.os.win32.WinRegistry import app.cleanmeter.target.desktop.data.PREFERENCE_START_MINIMIZED import app.cleanmeter.target.desktop.data.PreferencesRepository import app.cleanmeter.target.desktop.model.OverlaySettings +import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel -import app.cleanmeter.target.desktop.ui.components.Label -import app.cleanmeter.target.desktop.ui.components.Section +import app.cleanmeter.target.desktop.ui.components.section.Section import app.cleanmeter.target.desktop.ui.settings.FooterUi import app.cleanmeter.target.desktop.ui.settings.SettingsEvent @@ -72,9 +74,15 @@ private fun startWithWindowsCheckbox() { } } ) { - TooltipArea({ - Label(text = "Admin rights needed") - }) { + TooltipArea( + delayMillis = 0, + tooltip = { + Text( + text = "Admin rights needed", + style = LocalTypography.current.labelM, + color = DarkGray, + ) + }) { Icon(imageVector = Icons.Filled.AdminPanelSettings, null) } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt index 92ce2ba..ed2ff8f 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt @@ -22,18 +22,17 @@ import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.ParagraphStyle import androidx.compose.ui.text.SpanStyle -import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.buildAnnotatedString -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.text.style.TextIndent import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray -import app.cleanmeter.target.desktop.ui.components.CollapsibleSection +import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection @Composable internal fun HelpSettingsUi() { @@ -66,7 +65,10 @@ internal fun HelpSettingsUi() { "The sensors look wrong" to buildAnnotatedString { append("Try setting up each sensor via the Stats tab") }, "Neither sensors dropdown or the overlay are showing up" to buildAnnotatedString { append("You need to have ") - pushStringAnnotation("click", "https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-8.0.11-windows-x64-installer") + pushStringAnnotation( + "click", + "https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-8.0.11-windows-x64-installer" + ) withStyle(SpanStyle(textDecoration = TextDecoration.Underline)) { append(".NET Core Framework") } @@ -120,11 +122,8 @@ private fun BulletList( } } }, - style = TextStyle( - fontSize = 14.sp, - color = DarkGray, - fontWeight = FontWeight(500) - ) + style = LocalTypography.current.labelLMedium, + color = DarkGray, ) } @@ -140,24 +139,16 @@ private fun StyledNumberedList( ) { Text( text = "${index + 1}", - style = TextStyle( - fontSize = 14.sp, - color = Color.White, - fontWeight = FontWeight.Thin, - lineHeight = 0.sp, - textAlign = TextAlign.Center - ), + style = LocalTypography.current.labelLThin, + textAlign = TextAlign.Center, + color = Color.White, modifier = Modifier.align(Alignment.Center).padding(bottom = 2.dp) ) } Text( text = item, - style = TextStyle( - fontSize = 14.sp, - color = DarkGray, - fontWeight = FontWeight.Medium, - lineHeight = 0.sp, - ) + style = LocalTypography.current.labelLMedium, + color = DarkGray, ) } } @@ -179,22 +170,15 @@ private fun FrequentlyAskedQuestions( append(" ") append(pair.first) }, - style = TextStyle( - fontSize = 14.sp, - color = DarkGray, - fontWeight = FontWeight(500), - lineHeight = 0.sp - ) + style = LocalTypography.current.labelLMedium, + color = DarkGray, ) Row { Spacer(modifier = Modifier.width(16.dp)) ClickableText( text = pair.second, - style = TextStyle( - fontSize = 14.sp, + style = LocalTypography.current.labelL.copy( color = LabelGray, - fontWeight = FontWeight(400), - lineHeight = 0.sp ), onClick = { offset -> pair.second.getStringAnnotations("click", offset, offset).firstOrNull()?.let { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt index 64881f9..63793cf 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt @@ -18,10 +18,10 @@ import androidx.compose.ui.unit.sp import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData import app.cleanmeter.target.desktop.model.OverlaySettings import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray -import app.cleanmeter.target.desktop.ui.components.CheckboxSection +import app.cleanmeter.target.desktop.ui.components.section.CheckboxSection import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel -import app.cleanmeter.target.desktop.ui.components.CustomBodyCheckboxSection -import app.cleanmeter.target.desktop.ui.components.DropdownSection +import app.cleanmeter.target.desktop.ui.components.section.CustomBodyCheckboxSection +import app.cleanmeter.target.desktop.ui.components.section.DropdownSection import app.cleanmeter.target.desktop.ui.components.KeyboardShortcutInfoLabel import app.cleanmeter.target.desktop.ui.components.SensorReadingDropdownMenu import app.cleanmeter.target.desktop.ui.settings.CheckboxSectionOption diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt index 8208cae..895086d 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt @@ -10,7 +10,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import app.cleanmeter.target.desktop.model.OverlaySettings import app.cleanmeter.target.desktop.ui.components.StyleCard -import app.cleanmeter.target.desktop.ui.components.ToggleSection +import app.cleanmeter.target.desktop.ui.components.section.ToggleSection @Composable internal fun GraphType( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt index 555a102..3907ada 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt @@ -19,7 +19,7 @@ import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray -import app.cleanmeter.target.desktop.ui.components.CollapsibleSection +import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection import app.cleanmeter.target.desktop.ui.components.SliderThumb import app.cleanmeter.target.desktop.ui.components.coercedValueAsFraction import app.cleanmeter.target.desktop.ui.components.drawTrack diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt index 6b848df..acf4f49 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt @@ -9,7 +9,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import app.cleanmeter.target.desktop.model.OverlaySettings -import app.cleanmeter.target.desktop.ui.components.CollapsibleSection +import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection import app.cleanmeter.target.desktop.ui.components.StyleCard @Composable diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt index 99b499d..dd26690 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt @@ -22,17 +22,16 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.model.OverlaySettings import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray -import app.cleanmeter.target.desktop.ui.components.CollapsibleSection +import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection import app.cleanmeter.target.desktop.ui.components.StyleCard import app.cleanmeter.target.desktop.ui.components.Toggle @@ -188,17 +187,13 @@ internal fun Position( Column { Text( text = "Use custom position", - fontSize = 13.sp, + style = LocalTypography.current.labelM, color = DarkGray, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) Text( text = "Unlock to move around the overlay, lock it again to fix it's position.", - fontSize = 12.sp, + style = LocalTypography.current.labelS, color = LabelGray, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) } } @@ -225,10 +220,8 @@ internal fun Position( ) { Text( text = "Locked", - fontSize = 13.sp, + style = LocalTypography.current.labelM, color = if (!overlaySettings.isPositionLocked) AlmostVisibleGray else DarkGray, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) Toggle( customSize = true, @@ -249,10 +242,8 @@ internal fun Position( ) Text( text = "Unlocked", - fontSize = 13.sp, + style = LocalTypography.current.labelM, color = if (!overlaySettings.isPositionLocked) DarkGray else AlmostVisibleGray, - lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) } } From c16532624953189419eae1a3430319b790c4d6f7 Mon Sep 17 00:00:00 2001 From: Danilo Lemes Date: Sun, 15 Dec 2024 19:20:35 +0000 Subject: [PATCH 03/15] wip start using correct colors --- .../core/designsystem/ColorScheme.kt | 10 +- .../core/designsystem/Primitives.kt | 149 +++++++++--------- .../target/desktop/ui/ColorTokens.kt | 3 +- .../target/desktop/ui/components/Pill.kt | 4 +- .../components/SensorReadingDropdownMenu.kt | 7 +- .../desktop/ui/components/SettingsTab.kt | 21 +-- .../target/desktop/ui/components/StyleCard.kt | 1 - .../ui/components/section/CheckboxSection.kt | 11 +- .../components/section/CollapsibleSection.kt | 3 +- .../ui/components/section/DropdownSection.kt | 5 +- .../desktop/ui/components/section/Section.kt | 5 +- .../ui/components/section/ToggleSection.kt | 6 +- .../target/desktop/ui/settings/Settings.kt | 3 +- .../desktop/ui/settings/tabs/style/Opacity.kt | 5 +- 14 files changed, 130 insertions(+), 103 deletions(-) diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt index 7cb9969..a309142 100644 --- a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt @@ -105,8 +105,8 @@ data class ColorScheme( internal val defaultColorScheme = ColorScheme( background = ColorScheme.Background( surface = Primitives.Gray.Gray100, - surfaceRaised = Primitives.Plain.White, - surfaceOverlay = Primitives.Plain.White, + surfaceRaised = Primitives.Plain.PlainWhite, + surfaceOverlay = Primitives.Plain.PlainWhite, surfaceSunken = Primitives.Gray.Gray300, surfaceSunkenSubtle = Primitives.Gray.Gray50, brand = Primitives.Gray.Gray950, @@ -133,7 +133,7 @@ internal val defaultColorScheme = ColorScheme( paragraph2 = Primitives.Gray.Gray500, disabled = Primitives.Gray.Gray400, disabledLighter = Primitives.Gray.Gray300, - inverse = Primitives.Plain.White, + inverse = Primitives.Plain.PlainWhite, inverseSubtler = Primitives.Gray.Gray50, success = Primitives.Green.Green900, danger = Primitives.Red.Red900, @@ -141,7 +141,7 @@ internal val defaultColorScheme = ColorScheme( ), border = ColorScheme.Border( subtler = Primitives.Gray.Gray100, - inverse = Primitives.Plain.White, + inverse = Primitives.Plain.PlainWhite, subtle = Primitives.Gray.Gray200, bold = Primitives.Gray.Gray300.copy(alpha = 0.5f), bolder = Primitives.Gray.Gray300, @@ -166,7 +166,7 @@ internal val defaultColorScheme = ColorScheme( subtleHover = Primitives.Gray.Gray300, subtleActive = Primitives.Gray.Gray400, disabled = Primitives.Gray.Gray400, - inverse = Primitives.Plain.White, + inverse = Primitives.Plain.PlainWhite, inverseHover = Primitives.Gray.Gray50, inverseActive = Primitives.Gray.Gray200, success = Primitives.Green.Green500, diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt index 8b4f087..a5b5c99 100644 --- a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt @@ -4,96 +4,99 @@ import androidx.compose.ui.graphics.Color object Primitives { object Gray { - val Gray25 = Color(0xFFFAFAFA) - val Gray50 = Color(0xFFFAFAFA) - val Gray100 = Color(0xFFF0F1F1) - val Gray200 = Color(0xFFFAFAFA) - val Gray300 = Color(0xFFFAFAFA) - val Gray400 = Color(0xFFFAFAFA) - val Gray500 = Color(0xFFFAFAFA) - val Gray600 = Color(0xFFFAFAFA) - val Gray700 = Color(0xFFFAFAFA) - val Gray800 = Color(0xFF1F242F) - val Gray900 = Color(0xFFFAFAFA) - val Gray950 = Color(0xFFFAFAFA) + val Gray25 = Color(0xFFfafafa) + val Gray50 = Color(0xFFf5f5f6) + val Gray100 = Color(0xFFf0f1f1) + val Gray200 = Color(0xFFececed) + val Gray300 = Color(0xFFcecfd2) + val Gray400 = Color(0xFF94969c) + val Gray500 = Color(0xFF85888e) + val Gray600 = Color(0xFF61646c) + val Gray700 = Color(0xFF333741) + val Gray800 = Color(0xFF1f242f) + val Gray900 = Color(0xFF161b26) + val Gray950 = Color(0xFF0c111d) + } object Red { - val Red25 = Color(0xFFFAFAFA) - val Red50 = Color(0xFFFAFAFA) - val Red100 = Color(0xFFFAFAFA) - val Red200 = Color(0xFFFAFAFA) - val Red300 = Color(0xFFFAFAFA) - val Red400 = Color(0xFFFAFAFA) - val Red500 = Color(0xFFFAFAFA) - val Red600 = Color(0xFFFAFAFA) - val Red700 = Color(0xFFFAFAFA) - val Red800 = Color(0xFFFAFAFA) - val Red900 = Color(0xFFFAFAFA) - val Red950 = Color(0xFFFAFAFA) + val Red25 = Color(0xFFfffbfa) + val Red50 = Color(0xFFfef3f2) + val Red100 = Color(0xFFfee4e2) + val Red200 = Color(0xFFfecdca) + val Red300 = Color(0xFFfda29b) + val Red400 = Color(0xFFf97066) + val Red500 = Color(0xFFf04438) + val Red600 = Color(0xFFd92d20) + val Red700 = Color(0xFFb42318) + val Red800 = Color(0xFF912018) + val Red900 = Color(0xFF7a271a) + val Red950 = Color(0xFF55160c) + } object Yellow { - val Yellow25 = Color(0xFFFAFAFA) - val Yellow50 = Color(0xFFFAFAFA) - val Yellow100 = Color(0xFFFAFAFA) - val Yellow200 = Color(0xFFFAFAFA) - val Yellow300 = Color(0xFFFAFAFA) - val Yellow400 = Color(0xFFFAFAFA) - val Yellow500 = Color(0xFFFAFAFA) - val Yellow600 = Color(0xFFFAFAFA) - val Yellow700 = Color(0xFFFAFAFA) - val Yellow800 = Color(0xFFFAFAFA) - val Yellow900 = Color(0xFFFAFAFA) - val Yellow950 = Color(0xFFFAFAFA) + val Yellow25 = Color(0xFFfffcf5) + val Yellow50 = Color(0xFFfffaeb) + val Yellow100 = Color(0xFFfef0c7) + val Yellow200 = Color(0xFFfedf89) + val Yellow300 = Color(0xFFfec84b) + val Yellow400 = Color(0xFFfdb022) + val Yellow500 = Color(0xFFf79009) + val Yellow600 = Color(0xFFdc6803) + val Yellow700 = Color(0xFFb54708) + val Yellow800 = Color(0xFF93370d) + val Yellow900 = Color(0xFF7a2e0e) + val Yellow950 = Color(0xFF4e1d09) } object Green { - val Green25 = Color(0xFFFAFAFA) - val Green50 = Color(0xFFFAFAFA) - val Green100 = Color(0xFFFAFAFA) - val Green200 = Color(0xFFFAFAFA) - val Green300 = Color(0xFFFAFAFA) - val Green400 = Color(0xFFFAFAFA) - val Green500 = Color(0xFFFAFAFA) - val Green600 = Color(0xFFFAFAFA) - val Green700 = Color(0xFFFAFAFA) - val Green800 = Color(0xFFFAFAFA) - val Green900 = Color(0xFFFAFAFA) - val Green950 = Color(0xFFFAFAFA) + val Green25 = Color(0xFFf6fef9) + val Green50 = Color(0xFFecfdf3) + val Green100 = Color(0xFFdcfae6) + val Green200 = Color(0xFFabefc6) + val Green300 = Color(0xFF75e0a7) + val Green400 = Color(0xFF47cd89) + val Green500 = Color(0xFF17b26a) + val Green600 = Color(0xFF079455) + val Green700 = Color(0xFF067647) + val Green800 = Color(0xFF085d3a) + val Green900 = Color(0xFF074d31) + val Green950 = Color(0xFF053321) + } object Emerald { - val Emerald25 = Color(0xFFFAFAFA) - val Emerald50 = Color(0xFFFAFAFA) - val Emerald100 = Color(0xFFFAFAFA) - val Emerald200 = Color(0xFFFAFAFA) - val Emerald300 = Color(0xFFFAFAFA) - val Emerald400 = Color(0xFFFAFAFA) - val Emerald500 = Color(0xFFFAFAFA) - val Emerald600 = Color(0xFFFAFAFA) - val Emerald700 = Color(0xFFFAFAFA) - val Emerald800 = Color(0xFFFAFAFA) - val Emerald900 = Color(0xFFFAFAFA) - val Emerald950 = Color(0xFFFAFAFA) + val Emerald25 = Color(0xFFf6fefc) + val Emerald50 = Color(0xFFf0fdf9) + val Emerald100 = Color(0xFFccfbef) + val Emerald200 = Color(0xFF99f6e0) + val Emerald300 = Color(0xFF5fe9d0) + val Emerald400 = Color(0xFF2ed3b7) + val Emerald500 = Color(0xFF15b79e) + val Emerald600 = Color(0xFF0e9384) + val Emerald700 = Color(0xFF107569) + val Emerald800 = Color(0xFF125d56) + val Emerald900 = Color(0xFF134e48) + val Emerald950 = Color(0xFF0a2926) } object Purple { - val Purple25 = Color(0xFFFAFAFA) - val Purple50 = Color(0xFFFAFAFA) - val Purple100 = Color(0xFFFAFAFA) - val Purple200 = Color(0xFFFAFAFA) - val Purple300 = Color(0xFFFAFAFA) - val Purple400 = Color(0xFFFAFAFA) - val Purple500 = Color(0xFFFAFAFA) - val Purple600 = Color(0xFFFAFAFA) - val Purple700 = Color(0xFFFAFAFA) - val Purple800 = Color(0xFFFAFAFA) - val Purple900 = Color(0xFFFAFAFA) - val Purple950 = Color(0xFFFAFAFA) + val Purple25 = Color(0xFFfbfaff) + val Purple50 = Color(0xFFf5f3ff) + val Purple100 = Color(0xFFece9fe) + val Purple200 = Color(0xFFddd6fe) + val Purple300 = Color(0xFFc3b5fd) + val Purple400 = Color(0xFFa48afb) + val Purple500 = Color(0xFF875bf7) + val Purple600 = Color(0xFF7839ee) + val Purple700 = Color(0xFF6927da) + val Purple800 = Color(0xFF5720b7) + val Purple900 = Color(0xFF491c96) + val Purple950 = Color(0xFF2e125e) } object Plain { - val White = Color(0xFFFFFFFF) + val PlainWhite = Color(0xFFffffff) } } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt index 98d5e3a..f1e15a0 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt @@ -11,9 +11,10 @@ object ColorTokens { val ClearGray = Color(0x11d3d3d3) val OffWhite = Color(0xffc0c0c0) - val BackgroundOffWhite = Color(0xffF0F1F1) val BarelyVisibleGray = Color(0x0C111D1A) + val AlmostVisibleGray = Color(0xFFCECFD2) + val BorderGray = Color(0x80CECFD2) val LabelGray = Color(0xFF94969C) val DarkGray = Color(0xFF0C111D) diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt index 30812be..3705d28 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt @@ -36,7 +36,9 @@ fun Pill( .conditional( predicate = isHorizontal, ifTrue = { - fillMaxHeight().widthIn(min = minWidth).background(Color.Black.copy(alpha = 0.3f), CircleShape) + fillMaxHeight() + .widthIn(min = minWidth) + .background(Color.Black.copy(alpha = 0.3f), CircleShape) }, ifFalse = { background( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt index 4c70f41..1af1c56 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt @@ -53,6 +53,7 @@ import androidx.compose.ui.window.Popup import androidx.compose.ui.window.PopupPositionProvider import androidx.compose.ui.window.PopupProperties import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray @@ -87,10 +88,10 @@ fun SensorReadingDropdownMenu( modifier = Modifier .padding(start = 12.dp, top = 16.dp) .fillMaxWidth() - .background(BarelyVisibleGray, RoundedCornerShape(8.dp)) + .background(LocalColorScheme.current.background.surfaceSunkenSubtle, RoundedCornerShape(8.dp)) .padding(16.dp) - .border(1.dp, AlmostVisibleGray, RoundedCornerShape(8.dp)) - .background(Color.White) + .border(1.dp, LocalColorScheme.current.border.bolder, RoundedCornerShape(8.dp)) + .background(LocalColorScheme.current.background.surfaceRaised) .padding(12.dp) ) { Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt index 4e67dda..54d92b9 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt @@ -21,6 +21,7 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.core.designsystem.LocalTypography import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray @@ -36,15 +37,15 @@ internal fun SettingsTab( ) = Tab( selected = selected, onClick = onClick, - selectedContentColor = DarkGray, - unselectedContentColor = MutedGray, + selectedContentColor = LocalColorScheme.current.background.brand, + unselectedContentColor = LocalColorScheme.current.background.surfaceRaised, modifier = modifier .fillMaxHeight() .background( color = if (selected) DarkGray else Color.White, shape = RoundedCornerShape(50) ) - .border(2.dp, BarelyVisibleGray, RoundedCornerShape(50)) + .border(2.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(50)) .padding(horizontal = 16.dp), ) { Row( @@ -56,12 +57,14 @@ internal fun SettingsTab( painter = icon, contentDescription = "logo", modifier = Modifier.size(16.dp), - colorFilter = ColorFilter.tint(if (selected) Color.White else MutedGray), - ) - Text( - text = label, - style = LocalTypography.current.titleM, - color = if (selected) Color.White else MutedGray, + colorFilter = ColorFilter.tint(if (selected) LocalColorScheme.current.icon.inverse else LocalColorScheme.current.icon.bolderActive), ) + if (label.isNotEmpty()) { + Text( + text = label, + style = LocalTypography.current.titleM, + color = if (selected) LocalColorScheme.current.text.inverse else LocalColorScheme.current.text.paragraph1, + ) + } } } \ No newline at end of file diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt index 1f65a04..faa6132 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt @@ -15,7 +15,6 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.cleanmeter.core.designsystem.LocalTypography diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt index 77f9a23..311acc4 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel import app.cleanmeter.target.desktop.ui.components.SectionTitle import app.cleanmeter.target.desktop.ui.components.Toggle @@ -28,7 +29,10 @@ fun CheckboxSection( onOptionToggle: (CheckboxSectionOption) -> Unit, onSwitchToggle: (Boolean) -> Unit, ) = Column( - modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp), + modifier = Modifier + .animateContentSize() + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { val isAnySelected by remember(options) { derivedStateOf { options.any { it.isSelected } } } @@ -64,7 +68,10 @@ fun CustomBodyCheckboxSection( onSwitchToggle: (Boolean) -> Unit, body: @Composable (List) -> Unit, ) = Column( - modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp), + modifier = Modifier + .animateContentSize() + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { val isAnySelected by remember(options) { derivedStateOf { options.any { it.isSelected } } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt index 46d5da7..1731bb9 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt @@ -30,6 +30,7 @@ import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray import app.cleanmeter.target.desktop.ui.components.SectionTitle @@ -43,7 +44,7 @@ fun CollapsibleSection( Column( modifier = Modifier .animateContentSize() - .background(Color.White, RoundedCornerShape(12.dp)) + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt index 2af431a..0a80f81 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt @@ -15,6 +15,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray import app.cleanmeter.target.desktop.ui.components.DropdownMenu import app.cleanmeter.target.desktop.ui.components.SectionTitle @@ -26,7 +27,9 @@ fun DropdownSection( onValueChanged: (Int) -> Unit, selectedIndex: Int, ) = Column( - modifier = Modifier.background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp), + modifier = Modifier + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { Row( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt index 2cec026..8978419 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt @@ -15,6 +15,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray import app.cleanmeter.target.desktop.ui.components.SectionTitle @@ -24,7 +25,9 @@ fun Section( modifier: Modifier = Modifier, content: @Composable () -> Unit ) = Column( - modifier = modifier.background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp), + modifier = modifier + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { Row( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt index 4e10785..a490b20 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray import app.cleanmeter.target.desktop.ui.components.SectionTitle import app.cleanmeter.target.desktop.ui.components.Toggle @@ -27,7 +28,10 @@ fun ToggleSection( onSwitchToggle: (Boolean) -> Unit, content: @Composable () -> Unit ) = Column( - modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp), + modifier = Modifier + .animateContentSize() + .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp)) + .padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp) ) { Row( diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt index eb30c0d..202f529 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt @@ -29,7 +29,6 @@ import app.cleanmeter.core.common.hardwaremonitor.gpuReadings import app.cleanmeter.core.common.hardwaremonitor.networkReadings import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.ui.AppTheme -import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.components.SettingsTab import app.cleanmeter.target.desktop.ui.components.TopBar @@ -184,7 +183,7 @@ private fun TabRow(selectedTabIndex: Int, onTabIndexChange: (Int) -> Unit) { onClick = { onTabIndexChange(3) }, label = "", icon = painterResource("icons/help.svg"), - modifier = Modifier.weight(0.1f).padding(start = 4.dp), + modifier = Modifier.weight(0.1f), ) } } diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt index 3907ada..a653803 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt @@ -14,9 +14,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp +import app.cleanmeter.core.designsystem.LocalColorScheme import app.cleanmeter.target.desktop.model.OverlaySettings import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray -import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection @@ -32,6 +32,7 @@ internal fun Opacity( ) { CollapsibleSection(title = "OPACITY") { Column { + val surfaceColor = LocalColorScheme.current.background.surface Slider( value = overlaySettings.opacity, onValueChange = { @@ -48,7 +49,7 @@ internal fun Opacity( FloatArray(sliderState.steps + 2) { it.toFloat() / (sliderState.steps + 1) }, 0f, sliderState.coercedValueAsFraction, - BackgroundOffWhite, + surfaceColor, DarkGray, AlmostVisibleGray, Color.White, From 312e288fb0b41e392af9cbe74e46a1475c1ceb2c Mon Sep 17 00:00:00 2001 From: Danilo Lemes Date: Sun, 15 Dec 2024 20:20:47 +0000 Subject: [PATCH 04/15] compose desktop typography shenanigans --- .../core/designsystem/Typography.kt | 52 +++++++++++-------- .../cleanmeter/target/desktop/ServerMain.kt | 2 + .../ui/components/CheckboxWithLabel.kt | 2 +- 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt index 1a2a0a3..1ce413d 100644 --- a/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt +++ b/core/designsystem/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt @@ -18,7 +18,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 16.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Medium, + fontFamily = fontFamilyMedium, ) /** @@ -30,7 +30,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 16.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Medium, + fontFamily = fontFamilyMedium, ) /** @@ -42,7 +42,6 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 14.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) /** @@ -54,7 +53,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 14.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Thin, + fontFamily = fontFamilyThin, ) /** @@ -66,7 +65,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 14.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Medium, + fontFamily = fontFamilyMedium, ) /** @@ -78,7 +77,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 14.sp, lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, + fontFamily = fontFamilySemiBold, ) /** @@ -90,7 +89,6 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 13.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) /** @@ -102,7 +100,7 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 13.sp, lineHeight = 0.sp, - fontWeight = FontWeight.SemiBold, + fontFamily = fontFamilySemiBold ) /** @@ -114,7 +112,6 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 12.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) /** @@ -126,24 +123,37 @@ class Typography { @Composable get() = defaultTextStyle.copy( fontSize = 10.sp, lineHeight = 0.sp, - fontWeight = FontWeight.Normal, ) - private val fontFamily = FontFamily( - Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin), - Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight), - Font(resource = "font/inter_light.ttf", weight = FontWeight.Light), - Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal), - Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium), - Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold), - Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold), - Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold), - Font(resource = "font/inter_black.ttf", weight = FontWeight.Black), +// Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin), +// Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight), +// Font(resource = "font/inter_light.ttf", weight = FontWeight.Light), +// Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal), +// Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium), +// Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold), +// Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold), +// Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold), +// Font(resource = "font/inter_black.ttf", weight = FontWeight.Black), + + private val fontFamilyThin = FontFamily( + Font(resource = "font/inter_thin.ttf", weight = FontWeight.Normal), + ) + + private val fontFamilyNormal = FontFamily( + Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal) + ) + + private val fontFamilyMedium = FontFamily( + Font(resource = "font/inter_medium.ttf", weight = FontWeight.Normal), + ) + + private val fontFamilySemiBold = FontFamily( + Font(resource = "font/inter_semibold.ttf", weight = FontWeight.Normal), ) private val defaultTextStyle: TextStyle @Composable get() = TextStyle( - fontFamily = fontFamily, + fontFamily = fontFamilyNormal, fontWeight = FontWeight.Normal, color = LocalColorScheme.current.text.paragraph1 ) diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt index 33c7d96..2380088 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt @@ -8,6 +8,8 @@ import app.cleanmeter.core.os.win32.WindowsService fun main(vararg args: String) = singleInstance(args) { + System.setProperty("awt.useSystemAAFontSettings","on"); + System.setProperty("swing.aatext", "true"); WindowsService.tryElevateProcess(ApplicationParams.isAutostart) if (isDev()) { diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt index cd2ed72..f1f9f62 100644 --- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt +++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt @@ -37,7 +37,7 @@ fun CheckboxWithLabel( Text( text = label, - style = LocalTypography.current.labelL.copy( + style = LocalTypography.current.labelLMedium.copy( letterSpacing = 0.14.sp, ), color = DarkGray, From 2ffb7ae8e432a3247f2b6e920d6eceb9b6c84099 Mon Sep 17 00:00:00 2001 From: Danilo Lemes Date: Tue, 17 Dec 2024 21:18:47 +0000 Subject: [PATCH 05/15] more design system migrations --- .idea/codeStyles/Project.xml | 1 + .../ui/components/CheckboxWithLabel.kt | 10 +- .../components/KeyboardShortcutInfoLabel.kt | 11 +- .../components/SensorReadingDropdownMenu.kt | 311 ---------------- .../desktop/ui/components/SettingsTab.kt | 87 +++-- .../target/desktop/ui/components/Text.kt | 4 +- .../target/desktop/ui/components/TopBar.kt | 35 +- .../components/{ => dropdown}/DropdownMenu.kt | 2 +- .../dropdown/SensorReadingDropdownMenu.kt | 338 ++++++++++++++++++ .../ui/components/section/CheckboxSection.kt | 18 +- .../components/section/CollapsibleSection.kt | 19 +- .../ui/components/section/DropdownSection.kt | 20 +- .../desktop/ui/components/section/Section.kt | 19 +- .../ui/components/section/SectionBody.kt | 24 ++ .../ui/components/section/ToggleSection.kt | 20 +- .../ui/settings/tabs/OverlaySettingsUi.kt | 5 +- 16 files changed, 468 insertions(+), 456 deletions(-) delete mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt rename target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/{ => dropdown}/DropdownMenu.kt (98%) create mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/SensorReadingDropdownMenu.kt create mode 100644 target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/SectionBody.kt diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml index 8b20969..4bff0a1 100644 --- a/.idea/codeStyles/Project.xml +++ b/.idea/codeStyles/Project.xml @@ -1,5 +1,6 @@ +