bollwerkadmin/bollwerk
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

style: Beton & Stahl Theme - höhere Kontraste, stahlblaue Surfaces

Browse source
This commit is contained in:
Jens Reinemann 2026-05-18 12:08:06 +02:00
parent 8459705bb1
commit 09e01dff00
2 changed files with 63 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/src/main/java/de/bollwerk/app/ui/settings/SettingsScreen.kt
View file

@ -7,6 +7,7 @@ import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
@ -26,6 +28,7 @@ import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
@ -300,7 +303,18 @@ internal fun SettingsScreen(
Spacer(modifier = Modifier.height(12.dp))
if (uiState.isLoggedIn) {
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
shape = RoundedCornerShape(12.dp)
),
colors = CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh
)
) {
Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) {
Text(
text = "Angemeldet als: ${uiState.loggedInUsername}",
@ -542,7 +556,18 @@ internal fun SettingsScreen(
private fun SyncStatusCard(
uiState: SettingsUiState
) {
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
shape = RoundedCornerShape(12.dp)
),
colors = CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh
)
) {
Column(modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)) {
Row(
modifier = Modifier.fillMaxWidth(),

71
app/src/main/java/de/bollwerk/app/ui/theme/Color.kt
View file

@ -3,65 +3,66 @@ package de.bollwerk.app.ui.theme
import androidx.compose.ui.graphics.Color
/**
* Material 3 color tokens aligned with Admin-UI palette.
* Material 3 color tokens – "Mars trifft Beton & Stahl"
*
* 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)
* Palette-Konzept:
* - Primär-Akzent: #C1440E (Mars-Rost, Eisenoxid)
* - Text: #EAD0B0 (Marstaub auf Beton)
* - Hintergrund: #101218 (Betonkeller, dunkel-kühl)
* - Surfaces: blaugrau gestaffelt (Stahlkonsistenz)
* - Ränder: #4E5E70 (sichtbares Stahl-Blaugrau)
* - Sekundärtext: #94A8B8 (Stahlgrau, deutlich lesbarer als Warmtan)
*/
// Primary – burnt orange accent (Admin: button.primary, border-bottom, h2::before)
// Primary – Mars-Rost (Eisenoxid, burnt orange)
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 – 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)
// Secondary – Stahl-Grau (industrielle Beschriftungen)
val md_theme_dark_secondary = Color(0xFFAAB8C4)
val md_theme_dark_onSecondary = Color(0xFF1C2430)
val md_theme_dark_secondaryContainer = Color(0xFF2A3240)
val md_theme_dark_onSecondaryContainer = Color(0xFFD8E2E8)
// Tertiary – gold/amber (Admin: inv-badge color)
// Tertiary – Gold/Amber (Mars-Canyon im Abendlicht)
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 – kept slightly warm for readability
// Error – leicht warm für Lesbarkeit
val md_theme_dark_error = Color(0xFFFFB4AB)
val md_theme_dark_onError = Color(0xFF690005)
val md_theme_dark_errorContainer = Color(0xFF8B1A1A)
val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
// 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)
// Background & Surface (Betonbunker, Marsstaub auf Stahl)
val md_theme_dark_background = Color(0xFF101218)
val md_theme_dark_onBackground = Color(0xFFEAD0B0)
val md_theme_dark_surface = Color(0xFF14181E)
val md_theme_dark_onSurface = Color(0xFFEAD0B0)
// 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)
// Surface Variant & Outline (Stahlbewehrung, sichtbare Ränder)
val md_theme_dark_surfaceVariant = Color(0xFF252E3C)
val md_theme_dark_onSurfaceVariant = Color(0xFF94A8B8) // Stahlgrau statt Warmtan → viel mehr Kontrast
val md_theme_dark_outline = Color(0xFF4E5E70) // Sichtbare Stahlränder
val md_theme_dark_outlineVariant = Color(0xFF263040) // Subtile Strukturkanten
// Inverse
val md_theme_dark_inverseSurface = Color(0xFFE8D5B0)
val md_theme_dark_inverseOnSurface = Color(0xFF2E2B22)
val md_theme_dark_inverseSurface = Color(0xFFE8D0B0)
val md_theme_dark_inverseOnSurface = Color(0xFF262E38)
val md_theme_dark_inversePrimary = Color(0xFFC1440E)
// Scrim
val md_theme_dark_scrim = Color(0xFF000000)
// 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)
// Surface containers (Beton auf verschiedenen Elevationen – deutlich gestaffelt)
val md_theme_dark_surfaceDim = Color(0xFF0C0E14)
val md_theme_dark_surfaceBright = Color(0xFF283240)
val md_theme_dark_surfaceContainerLowest = Color(0xFF09090F)
val md_theme_dark_surfaceContainerLow = Color(0xFF1C2230) // ElevatedCard: klar sichtbar auf bg
val md_theme_dark_surfaceContainer = Color(0xFF1E2838)
val md_theme_dark_surfaceContainerHigh = Color(0xFF253040)
val md_theme_dark_surfaceContainerHighest = Color(0xFF2C3848)