From 5d95ad8d2ae2807aaa867b45a94f8cae923a7cdd Mon Sep 17 00:00:00 2001 From: Ulas Kalayci Date: Sun, 26 Apr 2026 08:42:04 +0200 Subject: [PATCH] chore: release v0.24.3 --- CHANGELOG.md | 11 +++++++++++ package-lock.json | 4 ++-- package.json | 2 +- public/styles/layout.css | 37 +++++++++++++++++++++++++++++++------ public/styles/reminders.css | 2 +- public/styles/tokens.css | 19 +++++++++++++------ 6 files changed, 59 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 193364f..c04ca29 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 885de36..97f781d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d93a3a6..047b9ee 100644 --- a/package.json +++ b/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", diff --git a/public/styles/layout.css b/public/styles/layout.css index 4337808..33949d7 100755 --- a/public/styles/layout.css +++ b/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 * -------------------------------------------------------- */ diff --git a/public/styles/reminders.css b/public/styles/reminders.css index a7f6cf2..f9e0d50 100644 --- a/public/styles/reminders.css +++ b/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 { diff --git a/public/styles/tokens.css b/public/styles/tokens.css index fbcd122..bc41fad 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -170,8 +170,10 @@ --module-contacts: var(--_module-contacts); /* Kräftiges Blau - Kontakte */ --_module-budget: #0F766E; --module-budget: var(--_module-budget); /* Teal-700 - Finanzen, Stabilität */ - --_module-settings: #6E7781; - --module-settings: var(--_module-settings); /* Grau - Konfiguration */ + --_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); @@ -524,8 +527,9 @@ --_module-shopping: #F472B6; --_module-notes: #FCD34D; --_module-contacts: #60A5FA; - --_module-budget: #2DD4BF; - --_module-settings: #94A3B8; + --_module-budget: #2DD4BF; + --_module-settings: #94A3B8; + --_module-reminders: #22D3EE; /* Cyan-400 */ --_meal-breakfast: #F59E0B; --_meal-breakfast-light: #332400; @@ -627,8 +631,9 @@ --_module-shopping: #F472B6; /* Pink-400 */ --_module-notes: #FCD34D; --_module-contacts: #60A5FA; - --_module-budget: #2DD4BF; /* Teal-400 */ - --_module-settings: #94A3B8; + --_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);