From 0fb1ebbdcaa6a8e4dadb1aec1a8042130d00b227 Mon Sep 17 00:00:00 2001 From: Jens Reinemann Date: Sun, 17 May 2026 16:51:46 +0200 Subject: [PATCH] style: App-UI an Admin-Bereich angleichen (#92) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Color.kt: Farbpalette von Olivgrün auf Admin-Palette umgestellt (burnt orange #C1440E primary, warm beige #E8D5B0 text, dark brown #16140F background, tan #A89070 labels) - Type.kt: Neue Typography mit Monospace für Headings/Titles/Labels (analog Admin Share Tech Mono), system-ui für Body - Theme.kt: KrisenvorratTypography eingebunden - Dark Mode vollständig spezifiziert, Admin-konsistent - Alle bestehenden Screens profitieren automatisch via MaterialTheme - Build ✅, alle Tests grün (70 tasks) --- .../de/krisenvorrat/app/ui/theme/Color.kt | 86 ++++++++++--------- .../de/krisenvorrat/app/ui/theme/Theme.kt | 1 + .../java/de/krisenvorrat/app/ui/theme/Type.kt | 45 ++++++++++ 3 files changed, 91 insertions(+), 41 deletions(-) create mode 100644 app/src/main/java/de/krisenvorrat/app/ui/theme/Type.kt diff --git a/app/src/main/java/de/krisenvorrat/app/ui/theme/Color.kt b/app/src/main/java/de/krisenvorrat/app/ui/theme/Color.kt index 2f5c971..f9f7858 100644 --- a/app/src/main/java/de/krisenvorrat/app/ui/theme/Color.kt +++ b/app/src/main/java/de/krisenvorrat/app/ui/theme/Color.kt @@ -3,61 +3,65 @@ package de.krisenvorrat.app.ui.theme import androidx.compose.ui.graphics.Color /** - * Material 3 color tokens generated from seed color #4A6741 (Olivgrün/Militärgrün). + * Material 3 color tokens aligned with Admin-UI palette. * - * Generated using Material Theme Builder tonal palette algorithm. - * Dark theme is the primary usage. + * Admin design reference colors: + * - Primary accent: #C1440E (burnt orange) + * - Text: #E8D5B0 (warm beige) + * - Background: #16140F (dark chocolate brown) + * - Borders: #4A3F2F (dark olive-brown) + * - Labels: #A89070 (muted tan) */ -// Primary -val md_theme_dark_primary = Color(0xFFA1D395) -val md_theme_dark_onPrimary = Color(0xFF0B3900) -val md_theme_dark_primaryContainer = Color(0xFF1E5110) -val md_theme_dark_onPrimaryContainer = Color(0xFFBCEFAF) +// Primary – burnt orange accent (Admin: button.primary, border-bottom, h2::before) +val md_theme_dark_primary = Color(0xFFE8875A) +val md_theme_dark_onPrimary = Color(0xFF3A1100) +val md_theme_dark_primaryContainer = Color(0xFF5C2000) +val md_theme_dark_onPrimaryContainer = Color(0xFFFFBB9A) -// Secondary -val md_theme_dark_secondary = Color(0xFFBBCBB2) -val md_theme_dark_onSecondary = Color(0xFF273422) -val md_theme_dark_secondaryContainer = Color(0xFF3D4B37) -val md_theme_dark_onSecondaryContainer = Color(0xFFD7E8CD) +// Secondary – warm tan (Admin: labels, secondary text) +val md_theme_dark_secondary = Color(0xFFD4BFA8) +val md_theme_dark_onSecondary = Color(0xFF382C1E) +val md_theme_dark_secondaryContainer = Color(0xFF4A3F2F) +val md_theme_dark_onSecondaryContainer = Color(0xFFE8D5B0) -// Tertiary -val md_theme_dark_tertiary = Color(0xFFA0D0CB) -val md_theme_dark_onTertiary = Color(0xFF003735) -val md_theme_dark_tertiaryContainer = Color(0xFF1E4E4C) -val md_theme_dark_onTertiaryContainer = Color(0xFFBBECE7) +// Tertiary – gold/amber (Admin: inv-badge color) +val md_theme_dark_tertiary = Color(0xFFD4B060) +val md_theme_dark_onTertiary = Color(0xFF3A2E10) +val md_theme_dark_tertiaryContainer = Color(0xFF4A3A14) +val md_theme_dark_onTertiaryContainer = Color(0xFFF0D888) -// Error +// Error – kept slightly warm for readability val md_theme_dark_error = Color(0xFFFFB4AB) val md_theme_dark_onError = Color(0xFF690005) -val md_theme_dark_errorContainer = Color(0xFF93000A) +val md_theme_dark_errorContainer = Color(0xFF8B1A1A) val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) -// Background & Surface -val md_theme_dark_background = Color(0xFF1A1C18) -val md_theme_dark_onBackground = Color(0xFFE2E3DC) -val md_theme_dark_surface = Color(0xFF1A1C18) -val md_theme_dark_onSurface = Color(0xFFE2E3DC) +// Background & Surface (Admin: body #16140F, header #1A1815) +val md_theme_dark_background = Color(0xFF16140F) +val md_theme_dark_onBackground = Color(0xFFE8D5B0) +val md_theme_dark_surface = Color(0xFF1A1815) +val md_theme_dark_onSurface = Color(0xFFE8D5B0) -// Surface Variant & Outline -val md_theme_dark_surfaceVariant = Color(0xFF424940) -val md_theme_dark_onSurfaceVariant = Color(0xFFC2C9BD) -val md_theme_dark_outline = Color(0xFF8C9388) -val md_theme_dark_outlineVariant = Color(0xFF424940) +// Surface Variant & Outline (Admin: borders #4A3F2F, footer #6B5B3E) +val md_theme_dark_surfaceVariant = Color(0xFF3A3428) +val md_theme_dark_onSurfaceVariant = Color(0xFFA89070) +val md_theme_dark_outline = Color(0xFF6B5B3E) +val md_theme_dark_outlineVariant = Color(0xFF4A3F2F) // Inverse -val md_theme_dark_inverseSurface = Color(0xFFE2E3DC) -val md_theme_dark_inverseOnSurface = Color(0xFF2F312C) -val md_theme_dark_inversePrimary = Color(0xFF336B25) +val md_theme_dark_inverseSurface = Color(0xFFE8D5B0) +val md_theme_dark_inverseOnSurface = Color(0xFF2E2B22) +val md_theme_dark_inversePrimary = Color(0xFFC1440E) // Scrim val md_theme_dark_scrim = Color(0xFF000000) -// Surface containers -val md_theme_dark_surfaceDim = Color(0xFF1A1C18) -val md_theme_dark_surfaceBright = Color(0xFF404F3D) -val md_theme_dark_surfaceContainerLowest = Color(0xFF0F120D) -val md_theme_dark_surfaceContainerLow = Color(0xFF222520) -val md_theme_dark_surfaceContainer = Color(0xFF262924) -val md_theme_dark_surfaceContainerHigh = Color(0xFF31342E) -val md_theme_dark_surfaceContainerHighest = Color(0xFF3C3F39) +// Surface containers (Admin tonal progression: #16140F → #1A1815 → #1E1C17 → #242119 → #2E2B22 → #3A3428) +val md_theme_dark_surfaceDim = Color(0xFF14120D) +val md_theme_dark_surfaceBright = Color(0xFF3A3428) +val md_theme_dark_surfaceContainerLowest = Color(0xFF110F0A) +val md_theme_dark_surfaceContainerLow = Color(0xFF1E1C17) +val md_theme_dark_surfaceContainer = Color(0xFF242119) +val md_theme_dark_surfaceContainerHigh = Color(0xFF2E2B22) +val md_theme_dark_surfaceContainerHighest = Color(0xFF3A3428) diff --git a/app/src/main/java/de/krisenvorrat/app/ui/theme/Theme.kt b/app/src/main/java/de/krisenvorrat/app/ui/theme/Theme.kt index 8337c40..389cf7c 100644 --- a/app/src/main/java/de/krisenvorrat/app/ui/theme/Theme.kt +++ b/app/src/main/java/de/krisenvorrat/app/ui/theme/Theme.kt @@ -67,6 +67,7 @@ fun KrisenvorratTheme( MaterialTheme( colorScheme = colorScheme, + typography = KrisenvorratTypography, content = content ) } diff --git a/app/src/main/java/de/krisenvorrat/app/ui/theme/Type.kt b/app/src/main/java/de/krisenvorrat/app/ui/theme/Type.kt new file mode 100644 index 0000000..9206ac6 --- /dev/null +++ b/app/src/main/java/de/krisenvorrat/app/ui/theme/Type.kt @@ -0,0 +1,45 @@ +package de.krisenvorrat.app.ui.theme + +import androidx.compose.material3.Typography +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.unit.sp + +/** + * Typography aligned with Admin-UI: monospace headings (Share Tech Mono style), + * system sans-serif for body text. + */ +val KrisenvorratTypography = Typography( + displayLarge = Typography().displayLarge.copy(fontFamily = FontFamily.Monospace), + displayMedium = Typography().displayMedium.copy(fontFamily = FontFamily.Monospace), + displaySmall = Typography().displaySmall.copy(fontFamily = FontFamily.Monospace), + headlineLarge = Typography().headlineLarge.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + headlineMedium = Typography().headlineMedium.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + headlineSmall = Typography().headlineSmall.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + titleLarge = Typography().titleLarge.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + titleMedium = Typography().titleMedium.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + titleSmall = Typography().titleSmall.copy( + fontFamily = FontFamily.Monospace, + letterSpacing = 0.5.sp + ), + labelLarge = Typography().labelLarge.copy(fontFamily = FontFamily.Monospace), + labelMedium = Typography().labelMedium.copy(fontFamily = FontFamily.Monospace), + labelSmall = Typography().labelSmall.copy(fontFamily = FontFamily.Monospace), + bodyLarge = Typography().bodyLarge, + bodyMedium = Typography().bodyMedium, + bodySmall = Typography().bodySmall, +)