/* * PrintDeal — Design-Tokens, übernommen aus dem Android-Theme: * app/src/main/java/com/antongebauer/filamentfinder/ui/theme/Color.kt (alle Farbwerte) * app/src/main/java/com/antongebauer/filamentfinder/ui/theme/Theme.kt (Rollenzuordnung hell/dunkel) * app/src/main/java/com/antongebauer/filamentfinder/ui/theme/Abstand.kt (4/8/12/16-dp-Raster) * app/src/main/java/com/antongebauer/filamentfinder/ui/theme/Type.kt (M3-Standardskala, Fettdruck nur preisProKg) * * Wie in der App besetzen die Markenfarben (Indigo/Cyan/Rosé aus dem PrintDeal-Logo) * ausschließlich die Akzentrollen; die Flächen bleiben neutral, damit der Preis pro * Kilogramm seine Sonderstellung behält. Hell- und Dunkelwerte sind getrennt gewählt, * nicht auseinander abgeleitet. * * Der Dunkelmodus wird über das Attribut data-theme="dunkel" am -Element * geschaltet (Systemeinstellung als Startwert, manuell umschaltbar — js/app.js). */ :root { /* --- Akzentrollen (LightColorScheme aus Theme.kt) --- */ --primary: #4F46E5; /* IndigoDunkel */ --on-primary: #FFFFFF; /* SurfaceContainerLowestLight */ --primary-container: #E0E7FF; /* IndigoContainerHell */ --on-primary-container: #312E81; /* IndigoTief */ --secondary: #0E7490; /* CyanDunkel */ --on-secondary: #FFFFFF; --secondary-container: #CFFAFE; /* CyanContainerHell */ --on-secondary-container: #164E63; /* CyanTief */ --tertiary: #BE123C; /* RoseDunkel */ --on-tertiary: #FFFFFF; --tertiary-container: #FFE4E6; /* RoseContainerHell */ --on-tertiary-container: #881337; /* RoseTief */ /* --- Fehlerrollen (M3-Standard hell) --- */ --error: #B3261E; --on-error: #FFFFFF; --error-container: #F9DEDC; --on-error-container: #410E0B; /* --- Neutrale Flächen (Color.kt, Hellmodus) --- */ --background: #FAFAFC; /* SurfaceLight */ --on-background: #1A1C20; /* OnSurfaceLight */ --surface: #FAFAFC; --on-surface: #1A1C20; --surface-variant: #E3E4E9; --on-surface-variant: #45474E; --outline: #76787F; --outline-variant: #C6C7CE; --surface-container-lowest: #FFFFFF; --surface-container-low: #F4F4F8; --surface-container: #EEEFF3; --surface-container-high: #E8E9EE; --surface-container-highest: #E2E3E9; --inverse-surface: #2F3136; --inverse-on-surface: #F0F1F5; /* --- Statusgrün (dokumentierte Ausnahme: M3 kennt keine Grün-Rolle) --- */ --gruen-container: #C6ECCB; /* GruenContainerHell */ --gruen-inhalt: #10461F; /* GruenTief */ /* --- Ampelskala der Kennwert-Balken (hell) --- */ --balken-gruen: #2E7D32; --balken-gelb: #B58900; --balken-rot: #C62828; /* --- Sterne der positiven Kennwerte (hell) --- */ --stern-gelb: #B58900; /* --- Warnstufen-Signalfarbe des Kachel-Warnsymbols --- Orange für „erhöhte Anforderungen". Bewusst von der Fehlerrolle getrennt; das Android-Theme kennt kein Orange (vgl. --ladekreis), daher eigener Wert. Die Hardware-Warnung nutzt weiterhin die theme-abhängige Fehlerrolle --error. */ --warnung-erhoeht: #B45309; /* --- Drucker-Illustration (printer_light.xml) --- */ --schema-kontur: #2A2A2A; /* --- Ladeoverlay --- Der Schleier ist in beiden Themes dunkel. Der Kreisindikator ist laut Website-Vorgabe orangefarben; das Android-Theme definiert kein Orange (die App nutzt dort IndigoHell #818CF8), daher hier ein eigener Wert. */ --ladekreis: #FB923C; --schleier: rgba(0, 0, 0, 0.4); /* --- Abstände (Abstand.kt, 4-dp-Raster) --- */ --abstand-xs: 4px; /* extraKlein */ --abstand-s: 8px; /* klein */ --abstand-m: 12px; /* mittel */ --abstand-l: 16px; /* gross */ /* --- Radien (M3-Standard-Formen, wie CardDefaults.shape) --- */ --radius-s: 8px; /* shapes.small */ --radius-m: 12px; /* shapes.medium — Kartenecke (KARTEN_ECKE in FilamentCard.kt) */ --radius-l: 16px; /* shapes.large */ --radius-pille: 999px; /* --- Typografie: Material-3-Standardskala (Type.kt: unverändert) --- */ --schrift: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; --display-medium: 2.8125rem; /* 45sp — preisProKg Detailseite */ --headline-large: 2rem; /* 32sp */ --headline-medium: 1.75rem; /* 28sp */ --headline-small: 1.5rem; /* 24sp — preisProKg Karte */ --title-large: 1.375rem; /* 22sp */ --title-medium: 1rem; /* 16sp, Gewicht 500 */ --title-small: 0.875rem; /* 14sp, Gewicht 500 */ --body-large: 1rem; /* 16sp */ --body-medium: 0.875rem; /* 14sp */ --body-small: 0.75rem; /* 12sp */ --label-large: 0.875rem; /* 14sp, Gewicht 500 */ --label-medium: 0.75rem; /* 12sp, Gewicht 500 */ --label-small: 0.6875rem; /* 11sp, Gewicht 500 */ /* --- Erhebung (Ersatz für Compose-Elevation 2dp) --- */ --schatten-karte: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --schatten-schwebend: 0 4px 16px rgba(0, 0, 0, 0.18); color-scheme: light; } /* Dunkles Farbschema (DarkColorScheme aus Theme.kt; Grundton passend zur Bühne der Start-Animation). */ :root[data-theme="dunkel"] { --primary: #818CF8; /* IndigoHell — Wortmarke „Print" */ --on-primary: #312E81; /* IndigoTief */ --primary-container: #3730A3; /* IndigoContainerDunkel */ --on-primary-container: #E0E7FF; /* IndigoContainerHell */ --secondary: #22D3EE; /* Cyan (Logoton) */ --on-secondary: #164E63; /* CyanTief */ --secondary-container: #155E75; /* CyanContainerDunkel */ --on-secondary-container: #CFFAFE; --tertiary: #FB7185; /* Rose — Wortmarke „Deal" */ --on-tertiary: #881337; /* RoseTief */ --tertiary-container: #9F1239; /* RoseContainerDunkel */ --on-tertiary-container: #FFE4E6; --error: #F2B8B5; --on-error: #601410; --error-container: #8C1D18; --on-error-container: #F9DEDC; --background: #0F1115; /* SurfaceDark */ --on-background: #E3E6EA; --surface: #0F1115; --on-surface: #E3E6EA; --surface-variant: #2A2F37; --on-surface-variant: #C2C7CF; --outline: #8C929B; --outline-variant: #3D434B; --surface-container-lowest: #0A0C10; --surface-container-low: #14171C; --surface-container: #181B21; --surface-container-high: #22262D; --surface-container-highest: #2C3138; --inverse-surface: #E3E6EA; /* inverseSurface = OnSurfaceDark */ --inverse-on-surface: #14171C; --gruen-container: #1E4B2E; /* GruenContainerDunkel */ --gruen-inhalt: #A9E5B4; /* GruenHell */ --balken-gruen: #66BB6A; --balken-gelb: #FFD54F; --balken-rot: #EF5350; --stern-gelb: #FFD54F; --warnung-erhoeht: #FDBA74; --schema-kontur: #E8E8E8; /* printer_dark.xml */ --schatten-karte: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-schwebend: 0 4px 16px rgba(0, 0, 0, 0.55); color-scheme: dark; }