style: App-UI an Admin-Bereich angleichen (#92)

- 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)
This commit is contained in:
Jens Reinemann 2026-05-17 16:51:46 +02:00
parent 077d16f056
commit 0fb1ebbdca
3 changed files with 91 additions and 41 deletions

View file

@ -3,61 +3,65 @@ package de.krisenvorrat.app.ui.theme
import androidx.compose.ui.graphics.Color 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. * Admin design reference colors:
* Dark theme is the primary usage. * - Primary accent: #C1440E (burnt orange)
* - Text: #E8D5B0 (warm beige)
* - Background: #16140F (dark chocolate brown)
* - Borders: #4A3F2F (dark olive-brown)
* - Labels: #A89070 (muted tan)
*/ */
// Primary // Primary burnt orange accent (Admin: button.primary, border-bottom, h2::before)
val md_theme_dark_primary = Color(0xFFA1D395) val md_theme_dark_primary = Color(0xFFE8875A)
val md_theme_dark_onPrimary = Color(0xFF0B3900) val md_theme_dark_onPrimary = Color(0xFF3A1100)
val md_theme_dark_primaryContainer = Color(0xFF1E5110) val md_theme_dark_primaryContainer = Color(0xFF5C2000)
val md_theme_dark_onPrimaryContainer = Color(0xFFBCEFAF) val md_theme_dark_onPrimaryContainer = Color(0xFFFFBB9A)
// Secondary // Secondary warm tan (Admin: labels, secondary text)
val md_theme_dark_secondary = Color(0xFFBBCBB2) val md_theme_dark_secondary = Color(0xFFD4BFA8)
val md_theme_dark_onSecondary = Color(0xFF273422) val md_theme_dark_onSecondary = Color(0xFF382C1E)
val md_theme_dark_secondaryContainer = Color(0xFF3D4B37) val md_theme_dark_secondaryContainer = Color(0xFF4A3F2F)
val md_theme_dark_onSecondaryContainer = Color(0xFFD7E8CD) val md_theme_dark_onSecondaryContainer = Color(0xFFE8D5B0)
// Tertiary // Tertiary gold/amber (Admin: inv-badge color)
val md_theme_dark_tertiary = Color(0xFFA0D0CB) val md_theme_dark_tertiary = Color(0xFFD4B060)
val md_theme_dark_onTertiary = Color(0xFF003735) val md_theme_dark_onTertiary = Color(0xFF3A2E10)
val md_theme_dark_tertiaryContainer = Color(0xFF1E4E4C) val md_theme_dark_tertiaryContainer = Color(0xFF4A3A14)
val md_theme_dark_onTertiaryContainer = Color(0xFFBBECE7) 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_error = Color(0xFFFFB4AB)
val md_theme_dark_onError = Color(0xFF690005) 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) val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
// Background & Surface // Background & Surface (Admin: body #16140F, header #1A1815)
val md_theme_dark_background = Color(0xFF1A1C18) val md_theme_dark_background = Color(0xFF16140F)
val md_theme_dark_onBackground = Color(0xFFE2E3DC) val md_theme_dark_onBackground = Color(0xFFE8D5B0)
val md_theme_dark_surface = Color(0xFF1A1C18) val md_theme_dark_surface = Color(0xFF1A1815)
val md_theme_dark_onSurface = Color(0xFFE2E3DC) val md_theme_dark_onSurface = Color(0xFFE8D5B0)
// Surface Variant & Outline // Surface Variant & Outline (Admin: borders #4A3F2F, footer #6B5B3E)
val md_theme_dark_surfaceVariant = Color(0xFF424940) val md_theme_dark_surfaceVariant = Color(0xFF3A3428)
val md_theme_dark_onSurfaceVariant = Color(0xFFC2C9BD) val md_theme_dark_onSurfaceVariant = Color(0xFFA89070)
val md_theme_dark_outline = Color(0xFF8C9388) val md_theme_dark_outline = Color(0xFF6B5B3E)
val md_theme_dark_outlineVariant = Color(0xFF424940) val md_theme_dark_outlineVariant = Color(0xFF4A3F2F)
// Inverse // Inverse
val md_theme_dark_inverseSurface = Color(0xFFE2E3DC) val md_theme_dark_inverseSurface = Color(0xFFE8D5B0)
val md_theme_dark_inverseOnSurface = Color(0xFF2F312C) val md_theme_dark_inverseOnSurface = Color(0xFF2E2B22)
val md_theme_dark_inversePrimary = Color(0xFF336B25) val md_theme_dark_inversePrimary = Color(0xFFC1440E)
// Scrim // Scrim
val md_theme_dark_scrim = Color(0xFF000000) val md_theme_dark_scrim = Color(0xFF000000)
// Surface containers // Surface containers (Admin tonal progression: #16140F → #1A1815 → #1E1C17 → #242119 → #2E2B22 → #3A3428)
val md_theme_dark_surfaceDim = Color(0xFF1A1C18) val md_theme_dark_surfaceDim = Color(0xFF14120D)
val md_theme_dark_surfaceBright = Color(0xFF404F3D) val md_theme_dark_surfaceBright = Color(0xFF3A3428)
val md_theme_dark_surfaceContainerLowest = Color(0xFF0F120D) val md_theme_dark_surfaceContainerLowest = Color(0xFF110F0A)
val md_theme_dark_surfaceContainerLow = Color(0xFF222520) val md_theme_dark_surfaceContainerLow = Color(0xFF1E1C17)
val md_theme_dark_surfaceContainer = Color(0xFF262924) val md_theme_dark_surfaceContainer = Color(0xFF242119)
val md_theme_dark_surfaceContainerHigh = Color(0xFF31342E) val md_theme_dark_surfaceContainerHigh = Color(0xFF2E2B22)
val md_theme_dark_surfaceContainerHighest = Color(0xFF3C3F39) val md_theme_dark_surfaceContainerHighest = Color(0xFF3A3428)

View file

@ -67,6 +67,7 @@ fun KrisenvorratTheme(
MaterialTheme( MaterialTheme(
colorScheme = colorScheme, colorScheme = colorScheme,
typography = KrisenvorratTypography,
content = content content = content
) )
} }

View file

@ -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,
)