From 4f06d1fc8f8a32ed5968a594dec2f9d92a72a968 Mon Sep 17 00:00:00 2001 From: Miguel Palhas Date: Sun, 13 Sep 2026 02:42:51 +0100 Subject: [PATCH] feat(maestro): translate web OKLCH tokens to Material 3 color scheme Maps bg/surface/ink/muted/faint/accent/live/danger/warn from web/src/styles.css to background/surface/onSurface/onSurfaceVariant/ outline/primary/tertiary/error/secondary, for both dark (default) and light Material 3 schemes. Drops the redundant statusBarColor override in themes.xml now that MainActivity's enableEdgeToEdge() owns it. --- .../java/pt/naps/maestro/ui/theme/Color.kt | 47 ++++++++++++-- .../java/pt/naps/maestro/ui/theme/Theme.kt | 65 +++++++++++++++++-- android/app/src/main/res/values/themes.xml | 9 ++- 3 files changed, 106 insertions(+), 15 deletions(-) diff --git a/android/app/src/main/java/pt/naps/maestro/ui/theme/Color.kt b/android/app/src/main/java/pt/naps/maestro/ui/theme/Color.kt index 2ca04aa..611aa7a 100644 --- a/android/app/src/main/java/pt/naps/maestro/ui/theme/Color.kt +++ b/android/app/src/main/java/pt/naps/maestro/ui/theme/Color.kt @@ -2,10 +2,45 @@ package pt.naps.maestro.ui.theme import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) +/** Palette translated from the web SPA's OKLCH design tokens + * (web/src/styles.css) into sRGB. Dark is the default theme; Light is opt-in. + * Semantic mapping (see docs referenced from issue #271): + * bg -> background, surface* -> surface layers, ink -> onBackground/onSurface, + * muted -> onSurfaceVariant, faint -> outline, accent -> primary, + * live -> tertiary, danger -> error, warn -> secondary. */ -val Purple40 = Color(0xFF6650a4) -val PurpleGrey40 = Color(0xFF625b71) -val Pink40 = Color(0xFF7D5260) +// ---- Dark theme (default) ---- +val DarkBg = Color(0xFF0E1012) +val DarkSurface = Color(0xFF16181B) +val DarkSurface2 = Color(0xFF1E2125) +val DarkSurface3 = Color(0xFF272B2F) +val DarkBorder = Color(0xFF2E3136) +val DarkBorderStrong = Color(0xFF42474D) +val DarkInk = Color(0xFFEBEDEF) +val DarkMuted = Color(0xFFA1A5AA) +val DarkFaint = Color(0xFF777B7F) +val DarkAccent = Color(0xFFE2E5E8) +val DarkAccentStrong = Color(0xFFF4F5F7) +val DarkAccentInk = Color(0xFF13161C) +val DarkLive = Color(0xFF65EA92) +val DarkDanger = Color(0xFFFF6F69) +val DarkWarn = Color(0xFFEEBC4A) +val DarkTermBg = Color(0xFF0B0C0F) + +// ---- Light theme ---- +val LightBg = Color(0xFFF9FAFB) +val LightSurface = Color(0xFFFFFFFF) +val LightSurface2 = Color(0xFFF2F3F5) +val LightSurface3 = Color(0xFFE6E8EA) +val LightBorder = Color(0xFFD9DBDF) +val LightBorderStrong = Color(0xFFC1C4C9) +val LightInk = Color(0xFF20242A) +val LightMuted = Color(0xFF565B62) +val LightFaint = Color(0xFF81878D) +val LightAccent = Color(0xFF23272B) +val LightAccentStrong = Color(0xFF13161B) +val LightAccentInk = Color(0xFFF9FAFB) +val LightLive = Color(0xFF069A4A) +val LightDanger = Color(0xFFD01D21) +val LightWarn = Color(0xFFC78200) +val LightTermBg = Color(0xFF0B0F14) diff --git a/android/app/src/main/java/pt/naps/maestro/ui/theme/Theme.kt b/android/app/src/main/java/pt/naps/maestro/ui/theme/Theme.kt index f16f918..259d8e2 100644 --- a/android/app/src/main/java/pt/naps/maestro/ui/theme/Theme.kt +++ b/android/app/src/main/java/pt/naps/maestro/ui/theme/Theme.kt @@ -10,18 +10,71 @@ import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.ui.platform.LocalContext +/** Dark scheme (default), translated from the web SPA's dark token set + * (web/src/styles.css) — see Color.kt for the token -> role mapping. */ private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, + background = DarkBg, + onBackground = DarkInk, + surface = DarkSurface, + onSurface = DarkInk, + surfaceVariant = DarkSurface2, + onSurfaceVariant = DarkMuted, + outline = DarkFaint, + outlineVariant = DarkBorder, + surfaceTint = DarkAccent, + primary = DarkAccent, + onPrimary = DarkAccentInk, + primaryContainer = DarkSurface3, + onPrimaryContainer = DarkInk, + secondary = DarkWarn, + onSecondary = DarkAccentInk, + secondaryContainer = DarkSurface3, + onSecondaryContainer = DarkInk, + tertiary = DarkLive, + onTertiary = DarkAccentInk, + tertiaryContainer = DarkSurface3, + onTertiaryContainer = DarkInk, + error = DarkDanger, + onError = DarkAccentInk, + errorContainer = DarkSurface3, + onErrorContainer = DarkDanger, ) +/** Light scheme, opt-in. */ private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40, + background = LightBg, + onBackground = LightInk, + surface = LightSurface, + onSurface = LightInk, + surfaceVariant = LightSurface2, + onSurfaceVariant = LightMuted, + outline = LightFaint, + outlineVariant = LightBorder, + surfaceTint = LightAccent, + primary = LightAccent, + onPrimary = LightAccentInk, + primaryContainer = LightSurface3, + onPrimaryContainer = LightInk, + secondary = LightWarn, + onSecondary = LightAccentInk, + secondaryContainer = LightSurface3, + onSecondaryContainer = LightInk, + tertiary = LightLive, + onTertiary = LightAccentInk, + tertiaryContainer = LightSurface3, + onTertiaryContainer = LightInk, + error = LightDanger, + onError = LightAccentInk, + errorContainer = LightSurface3, + onErrorContainer = LightDanger, ) +/** Dark is the product default (docs/DESIGN.md); light is opt-in, and dynamic + * color (Material You, API 31+) is opt-in on top of that. Edge-to-edge itself + * is enabled once in MainActivity#onCreate — [enableEdgeToEdge] draws content + * behind transparent system bars for whichever scheme resolves here, and the + * default `SystemBarStyle.auto` picks light/dark bar icons from this theme's + * [darkTheme] flag, not the system setting. */ @Composable fun MaestroTheme( darkTheme: Boolean = true, diff --git a/android/app/src/main/res/values/themes.xml b/android/app/src/main/res/values/themes.xml index 52ad7a1..d6107e9 100644 --- a/android/app/src/main/res/values/themes.xml +++ b/android/app/src/main/res/values/themes.xml @@ -1,6 +1,9 @@ - +