chore: release v0.24.3

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.24.3] - 2026-04-26
+
+### Added
+- Design tokens: `--blur-2xs: blur(2px)` added to the blur scale — fills the gap below `--blur-xs` (4px), used for subtle overlay blurs
+- Design tokens: `--module-reminders: #0E7490` (Cyan-700, WCAG AA) added for the reminders feature; dark mode variant `#22D3EE` (Cyan-400)
+
+### Fixed
+- Design tokens: hardcoded `blur(16px)`, `blur(2px)`, and `blur(12px)` in `layout.css` replaced with `var(--blur-md)`, `var(--blur-2xs)`, and `var(--blur-sm)` — `prefers-reduced-transparency` now correctly disables all backdrop-filter effects including bottom nav, more-sheet backdrop, and sticky headers
+- Accessibility: `layout.css` now has a `prefers-reduced-transparency` block for `.nav-bottom`, `.more-backdrop`, and `.sticky-header` — these three elements previously kept their backdrop-filter active even when the user requested reduced transparency
+- Reminders: reminder bell icon in toasts now uses `var(--module-reminders)` instead of the generic `var(--color-accent)`
+
 ## [0.24.2] - 2026-04-26
 
 ### Fixed

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "oikos",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "oikos",
-      "version": "0.24.2",
+      "version": "0.24.3",
       "license": "MIT",
       "dependencies": {
         "bcrypt": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oikos",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
   "main": "server/index.js",
   "type": "module",

public/styles/layout.css

@@ -142,8 +142,8 @@
   display: flex;
   flex-direction: column;
   z-index: var(--z-nav);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: var(--blur-md) saturate(180%);
+  -webkit-backdrop-filter: var(--blur-md) saturate(180%);
 }
 
 /* ── Items-Reihe ── */
@@ -171,8 +171,8 @@
   inset: 0;
   background-color: var(--color-overlay);
   z-index: calc(var(--z-nav) + 1);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: var(--blur-2xs);
+  -webkit-backdrop-filter: var(--blur-2xs);
 }
 
 .more-backdrop--visible {
@@ -1583,8 +1583,8 @@
   top: 0;
   z-index: var(--z-sticky);
   background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
   padding-bottom: var(--space-3);
   margin-bottom: var(--space-4);
 }
@@ -1906,6 +1906,31 @@
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
 }
 
+/* --------------------------------------------------------
+ * Reduced Transparency — layout.css Fallbacks
+ * glass.css deckt Glass-Komponenten ab; diese drei Elemente
+ * nutzen backdrop-filter außerhalb von @supports und brauchen
+ * eigene Fallbacks.
+ * -------------------------------------------------------- */
+@media (prefers-reduced-transparency: reduce) {
+  .nav-bottom {
+    background-color: var(--color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .more-backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .sticky-header {
+    background-color: var(--color-bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 /* --------------------------------------------------------
  * Print-Styles
  * -------------------------------------------------------- */

public/styles/reminders.css

@@ -37,7 +37,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  color: var(--color-accent);
+  color: var(--module-reminders);
 }
 
 .toast__reminder-text {

public/styles/tokens.css

@@ -172,6 +172,8 @@
   --module-budget:     var(--_module-budget);      /* Teal-700 - Finanzen, Stabilität */
   --_module-settings:   #6E7781;
   --module-settings:    var(--_module-settings);   /* Grau - Konfiguration */
+  --_module-reminders:  #0E7490;
+  --module-reminders:   var(--_module-reminders);  /* Cyan-700 - Erinnerungen, 6.3:1 auf weiß — WCAG AA */
 
   /* --------------------------------------------------------
    * 5. Farben - Mahlzeit-Typen
@@ -405,6 +407,7 @@
   --glass-tint-strength:  var(--_glass-tint-strength);
 
   /* b) Blur-Stufen */
+  --blur-2xs: blur(2px);
   --blur-xs:  blur(4px);
   --blur-sm:  blur(8px);
   --blur-md:  blur(16px);
@@ -526,6 +529,7 @@
     --_module-contacts:  #60A5FA;
     --_module-budget:      #2DD4BF;
     --_module-settings:    #94A3B8;
+    --_module-reminders:   #22D3EE;   /* Cyan-400 */
 
     --_meal-breakfast:       #F59E0B;
     --_meal-breakfast-light: #332400;
@@ -629,6 +633,7 @@
     --_module-contacts:  #60A5FA;
     --_module-budget:      #2DD4BF;   /* Teal-400 */
     --_module-settings:    #94A3B8;
+    --_module-reminders:   #22D3EE;   /* Cyan-400 */
 
     /* Mahlzeit-Typ */
     --_meal-breakfast:       #F59E0B;
@@ -692,6 +697,7 @@
     --glass-highlight:        transparent;
     --glass-highlight-subtle: transparent;
     --glass-tint-strength: 0%;
+    --blur-2xs: blur(0px);
     --blur-xs:  blur(0px);
     --blur-sm:  blur(0px);
     --blur-md:  blur(0px);
@@ -716,6 +722,7 @@
     --glass-border-subtle: var(--color-text-secondary);
     --glass-highlight:        transparent;
     --glass-highlight-subtle: transparent;
+    --blur-2xs: blur(0px);
     --blur-xs:  blur(0px);
     --blur-sm:  blur(0px);
     --blur-md:  blur(0px);