diff --git a/CHANGELOG.md b/CHANGELOG.md index 19826e8..e6247eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,18 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V ## [Unreleased] +## [0.12.0] - 2026-10-30 + +### Added +- Neues Theme **Terrakotta**: warmes Cremepapier für Notizen, sandfarbene Seitenleiste, tintendunkle Schrift, gebrannter Terrakotta-Akzent mit Salbeigrün und weiche Ecken; Code-Hervorhebung in Erdtönen. + +### Removed +- Theme „High Contrast“. Wer es aktiv hatte, bekommt automatisch „MindSift Dark“. + +### Changed +- Themes: Ob ein Theme hell ist (helle Code-Farben, kein Dunkelmodus), richtet sich nach seiner Hintergrundfarbe statt nur nach „Light“. +- Kopfzeile am Handy: Such-Knopf und Profilbild sind gleich große Kreise. + ## [0.11.1] - 2026-10-30 ### Changed @@ -290,7 +302,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V - Geteilte Listen (Einkaufs-, Pack- und Checklisten) mit `#Kategorie`-Gruppierung, Mengenangaben und Echtzeit-Abhaken. - Benutzer-, Gruppen- und Admin-Verwaltung (Ersteinrichtungs-Assistent, Einladungscodes, Profilbilder, persönliche API-Keys & Webhook-Ingest `/api/v1/webhooks/ingest`, JSON-Datenexport) sowie CSS-Theme-Engine mit 4 Themes (`Dark`, `Light`, `High Contrast`, `Soft`) und PWA-Unterstützung. -[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.1...dev +[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.12.0...dev +[0.12.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.1...v0.12.0 [0.11.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.0...v0.11.1 [0.11.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.10.0...v0.11.0 [0.10.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.9.0...v0.10.0 diff --git a/Doku/theming.md b/Doku/theming.md index c4161c4..f1d18de 100644 --- a/Doku/theming.md +++ b/Doku/theming.md @@ -80,7 +80,7 @@ Jede Theme-Datei gliedert sich in sechs exakt definierte Bereiche: | :--- | :--- | :--- | :--- | | `dark` | [`theme-dark.css`](../frontend/src/themes/theme-dark.css) | Standard Dark Slate / Monochrom | Streng eckig (`0px` Cards, `2px` Buttons) | | `light` | [`theme-light.css`](../frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalistisch | Modern dezent (`4px` Cards, `4px` Buttons) | -| `high-contrast` | [`theme-high-contrast.css`](../frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit AAA-Kontrast | Streng eckig (`0px`, kräftige Rahmen) | +| `terracotta` | [`theme-terracotta.css`](../frontend/src/themes/theme-terracotta.css) | Warmes Cremepapier, Tinte, Terrakotta-Akzent, eigene Code-Farben in Erdtönen | Weich (`12px`) | | `soft` | [`theme-soft.css`](../frontend/src/themes/theme-soft.css) | Warmes Soft Slate mit Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) | | `polarized` | [`theme-polarized.css`](../frontend/src/themes/theme-polarized.css) | Tiefdunkles Obsidian mit elektrischem Grün/Türkis | Streng eckig (`0px` Cards, `2px` Buttons) | | `suri` | [`theme-suri.css`](../frontend/src/themes/theme-suri.css) | Warmes Mitternachts-Pflaume mit samtiger Orchidee | Weich gerundet (`10px` Cards, `6px` Buttons) | diff --git a/README.md b/README.md index 66fb122..ab8bf8e 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ Technik dahinter: [Doku/modules/collaboration.md](Doku/modules/collaboration.md) * Geführte Ersteinrichtung, Rollen *Admin* und *Mitglied*, Einladungscodes, optional offene Registrierung. * Gruppen mit Gruppen-Admins für Freigaben. * Admin-Bereich: Benutzer, Einladungen, Instanzname, SMTP, Freigabe-Modus. -* Sechs Themes (Dark, Light, High-Contrast, Soft, Polarized, Suri) plus Theme-Manager für eigene CSS-Themes, installierbar als PWA. Die App startet auch ohne Netz mit dem zuletzt geladenen Stand; offline erfasste Gedanken und abgehakte Aufgaben oder Listeneinträge werden nachgereicht, sobald die Verbindung wieder da ist. +* Sechs Themes (Dark, Light, Terrakotta, Soft, Polarized, Suri) plus Theme-Manager für eigene CSS-Themes, installierbar als PWA. Die App startet auch ohne Netz mit dem zuletzt geladenen Stand; offline erfasste Gedanken und abgehakte Aufgaben oder Listeneinträge werden nachgereicht, sobald die Verbindung wieder da ist. ### 🔌 Integrationen diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 21a6e2d..615a271 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,12 +1,12 @@ { "name": "mindsift-frontend", - "version": "0.11.1", + "version": "0.12.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mindsift-frontend", - "version": "0.11.1", + "version": "0.12.0", "license": "Unlicense", "dependencies": { "@fontsource-variable/inter": "5.3.0", diff --git a/frontend/package.json b/frontend/package.json index 8bd2c5f..c612a8f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "mindsift-frontend", "private": true, - "version": "0.11.1", + "version": "0.12.0", "license": "Unlicense", "type": "module", "scripts": { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 74fa278..9d20764 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -864,11 +864,14 @@ export const App: React.FC = () => { triggerHaptic(10); setShowCommandPalette(true); }} - className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main bg-panel border border-border transition-transform active:scale-95 cursor-pointer" + className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main transition-transform active:scale-95 cursor-pointer" title="Globale Suche" aria-label="Globale Suche öffnen" > - + {/* Same visible size as the avatar next to it; the 44px button stays the touch target */} + + + diff --git a/frontend/src/index.css b/frontend/src/index.css index 0c9de86..e7b1186 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -11,7 +11,7 @@ @import './themes/theme-dark.css'; @import './themes/theme-light.css'; -@import './themes/theme-high-contrast.css'; +@import './themes/theme-terracotta.css'; @import './themes/theme-soft.css'; @import './themes/theme-polarized.css'; @import './themes/theme-suri.css'; @@ -426,7 +426,7 @@ body { --code-variable: #9cdcfe; } - :root:not(.dark), + :root:not(.dark):not([data-theme="terracotta"]), :root[data-theme="light"] { --code-keyword: #0000ff; --code-string: #a31515; diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts index 697a9f4..cfd96a6 100644 --- a/frontend/src/lib/theme.ts +++ b/frontend/src/lib/theme.ts @@ -47,15 +47,15 @@ export const AVAILABLE_THEMES: ThemeOption[] = [ isRounded: false, }, { - id: 'high-contrast', - name: 'High Contrast (Scharf)', - subtitle: 'Tiefschwarz (#000) & weiße Konturen', - file: 'src/themes/theme-high-contrast.css', - previewBg: '#000000', - previewPanel: '#09090b', - previewAccent: '#38bdf8', - previewText: '#ffffff', - isRounded: false, + id: 'terracotta', + name: 'Terrakotta (Warmes Papier)', + subtitle: 'Cremepapier, Tinte & gebrannte Terrakotta (12px)', + file: 'src/themes/theme-terracotta.css', + previewBg: '#efe6d8', + previewPanel: '#fbf6ee', + previewAccent: '#c2410c', + previewText: '#2b2118', + isRounded: true, }, { id: 'soft', @@ -152,7 +152,10 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void { const root = document.documentElement; const attr = customCss !== null ? themeAttribute(customCss) : themeId; root.setAttribute('data-theme', attr); - const light = customCss !== null ? isLightColor(readCssVar(customCss, 'bg-app')) : themeId === 'light'; + const light = + customCss !== null + ? isLightColor(readCssVar(customCss, 'bg-app')) + : isLightColor(AVAILABLE_THEMES.find((t) => t.id === themeId)?.previewBg); root.classList.toggle('dark', !light); syncThemeColorMeta(); } diff --git a/frontend/src/themes/theme-high-contrast.css b/frontend/src/themes/theme-high-contrast.css deleted file mode 100644 index 21b5cc3..0000000 --- a/frontend/src/themes/theme-high-contrast.css +++ /dev/null @@ -1,66 +0,0 @@ -/* ========================================================================== - MINDSIFT THEME: HIGH CONTRAST (Maximaler Kontrast & Schärfe) - Alle Farben, Kontraste und Rundungen zentral in einer einzigen Datei. - ========================================================================== */ - -:root[data-theme="high-contrast"] { - /* --- 1. AKZENTFARBE --- */ - --accent-primary: #38bdf8; - --accent-hover: #7dd3fc; - --accent-dim: rgba(56, 189, 248, 0.22); - --accent-border: #38bdf8; - --text-on-accent: #000000; - - /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */ - --bg-app: #000000; - --bg-panel: #09090b; - --bg-panel-elevated: #18181b; - --bg-panel-hover: #27272a; - --bg-input: #000000; - --bg-overlay: rgba(0, 0, 0, 0.88); - --bg-code: #000000; - - /* --- 3. TEXT & KONTRASTE --- */ - --text-main: #ffffff; - --text-muted: #e4e4e7; - --text-faint: #a1a1aa; - - /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */ - --border-color: rgba(255, 255, 255, 0.38); - --border-subtle: rgba(255, 255, 255, 0.20); - --border-strong: #ffffff; - --shadow-panel: 0 0 0 1px #ffffff; - --scrollbar-thumb: rgba(255, 255, 255, 0.45); - --scrollbar-thumb-hover: #ffffff; - - /* --- 5. STATUS- & SIGNALFARBEN --- */ - --color-success: #4ade80; - --bg-success: rgba(74, 222, 128, 0.20); - --border-success: #4ade80; - - --color-danger: #f87171; - --bg-danger: rgba(248, 113, 113, 0.20); - --border-danger: #f87171; - - --color-warning: #fbbf24; - --bg-warning: rgba(251, 191, 36, 0.20); - --border-warning: #fbbf24; - - /* --- 6. RUNDUNGEN (Geometrie: Komplett scharfkantig) --- */ - --radius-card: 0px; - --radius-btn: 0px; - --radius-input: 0px; - --radius-checkbox: 0px; - --radius-pill: 0px; - - /* --- 7. CODE-SYNTAX-HIGHLIGHTING (VS Code Dark+) --- */ - --code-keyword: #569cd6; - --code-string: #ce9178; - --code-number: #b5cea8; - --code-comment: #6a9955; - --code-property: #9cdcfe; - --code-function: #dcdcaa; - --code-type: #4ec9b0; - --code-punctuation: #ffffff; - --code-variable: #9cdcfe; -} diff --git a/frontend/src/themes/theme-terracotta.css b/frontend/src/themes/theme-terracotta.css new file mode 100644 index 0000000..b0153c5 --- /dev/null +++ b/frontend/src/themes/theme-terracotta.css @@ -0,0 +1,69 @@ +/* ========================================================================== + MINDSIFT THEME: TERRAKOTTA (Warmes Papier & Tinte) + Cremefarbenes Notizpapier, sandfarbene Seitenleiste, tintendunkle Schrift, + gebrannter Terrakotta-Akzent mit Salbeigrün und weiche Ecken. + ========================================================================== */ + +:root[data-theme="terracotta"] { + /* --- 1. AKZENTFARBE (Gebrannte Terrakotta) --- */ + --accent-primary: #c2410c; + --accent-hover: #9a3412; + --accent-dim: rgba(194, 65, 12, 0.10); + --accent-border: rgba(194, 65, 12, 0.34); + --text-on-accent: #fffaf3; + + /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Papier, Sand, Leinen) --- */ + --bg-app: #efe6d8; + --bg-panel: #fbf6ee; + --bg-panel-elevated: #eadfcd; + --bg-panel-hover: #e0d2bb; + --bg-input: #fffbf5; + --bg-overlay: rgba(46, 33, 22, 0.45); + --bg-code: #f1e8da; + --bg-editor: #fdf9f2; + --bg-sidebar: #f2eadc; + + /* --- 3. TEXT & KONTRASTE (Tinte) --- */ + --text-main: #2b2118; + --text-muted: #5c4b3c; + --text-faint: #8a7764; + + /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */ + --border-color: rgba(92, 64, 40, 0.18); + --border-subtle: rgba(92, 64, 40, 0.09); + --border-strong: rgba(92, 64, 40, 0.32); + --shadow-panel: 0 10px 28px rgba(74, 50, 28, 0.10); + --scrollbar-thumb: rgba(92, 64, 40, 0.22); + --scrollbar-thumb-hover: rgba(92, 64, 40, 0.38); + + /* --- 5. STATUS- & SIGNALFARBEN (Salbei, Ziegel, Ocker) --- */ + --color-success: #4d7c4f; + --bg-success: rgba(77, 124, 79, 0.12); + --border-success: rgba(77, 124, 79, 0.36); + + --color-danger: #b42318; + --bg-danger: rgba(180, 35, 24, 0.09); + --border-danger: rgba(180, 35, 24, 0.34); + + --color-warning: #a16207; + --bg-warning: rgba(161, 98, 7, 0.11); + --border-warning: rgba(161, 98, 7, 0.34); + + /* --- 6. RUNDUNGEN (Weich wie Papierkarten) --- */ + --radius-card: 12px; + --radius-btn: 8px; + --radius-input: 8px; + --radius-checkbox: 4px; + --radius-pill: 9999px; + + /* --- 7. CODE-SYNTAX-HIGHLIGHTING (warme Erdtöne, gut lesbar auf Papier) --- */ + --code-keyword: #9a3412; + --code-string: #4d7c4f; + --code-number: #b45309; + --code-comment: #8a7764; + --code-property: #7c2d12; + --code-function: #6b4f9e; + --code-type: #0f766e; + --code-punctuation: #5c4b3c; + --code-variable: #7c2d12; +}