generated from knso/webklar-preview-template
App-Design-Politur: Papier-Look, Kacheln, Ampel-Streifen, großer Titel
- Theme: warmer Papier-Hintergrund (#FAF7F0) wie die Webseite, Inhalte als weiße Karten mit dezentem Schatten + warmem Rand; Marker-Gelb als Akzentfarbe für die Kernaussage - Home: iOS-Großtitel (kollabiert beim Scrollen), Hero-Button mit Schatten, Kachel-Navigation statt halbbreiter Text-Buttons (behebt Umbruch "Einstellunge/n"), Abschnitts-Label, Brief-Karten mit Ampel-Farbstreifen links, freundlicher Leerzustand - Analyse: Kernaussage als Textmarker-Karte (Markenzeichen), Frist/ Termin-Karte in Ampel-Tönung mit Farbstreifen, einheitliche Karten - Ampel-Banner: Streifen-Look statt Vollrahmen - Layout-Fix: Home als FlatList-Wurzel mit automatischem Inset (vorher verdeckte der große Titel die Kopf-Buttons) Barrierefreiheit unverändert: Schriftgrößen, Touch-Targets, Kontraste. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
21
src/theme.ts
21
src/theme.ts
@@ -5,14 +5,18 @@
|
||||
* - Große Touch-Targets (min. 56px Höhe)
|
||||
*/
|
||||
export const farben = {
|
||||
// Grundfarben
|
||||
hintergrund: '#FFFFFF',
|
||||
flaeche: '#F2F5F9',
|
||||
// Grundfarben — warmer Papier-Ton als Markenzeichen (wie die Webseite):
|
||||
// Inhalte liegen als weiße "Blätter" auf Papier
|
||||
hintergrund: '#FAF7F0',
|
||||
flaeche: '#FFFFFF',
|
||||
primaer: '#1A365D', // dunkles, ruhiges Blau
|
||||
primaerText: '#FFFFFF',
|
||||
text: '#1A202C',
|
||||
textSekundaer: '#4A5568',
|
||||
rand: '#CBD5E0',
|
||||
rand: '#E4DECF',
|
||||
// Akzent: Textmarker-Gelb (sparsam einsetzen — nur für DIE Kernaussage)
|
||||
markerHintergrund: '#FFF6D2',
|
||||
markerRand: '#EBDD9A',
|
||||
|
||||
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar)
|
||||
ampelRot: '#C0392B',
|
||||
@@ -43,3 +47,12 @@ export const abstand = {
|
||||
|
||||
/** Mindesthöhe für alle interaktiven Elemente (Barrierefreiheit). */
|
||||
export const TOUCH_TARGET = 56;
|
||||
|
||||
/** Dezenter Schatten, damit weiße Karten sich vom Papier-Grund abheben. */
|
||||
export const kartenSchatten = {
|
||||
shadowColor: '#1A202C',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.07,
|
||||
shadowRadius: 6,
|
||||
elevation: 2,
|
||||
} as const;
|
||||
|
||||
Reference in New Issue
Block a user