From ecd4453b714dcc09e9e82cbbab2fff6e056037c1 Mon Sep 17 00:00:00 2001 From: Ulas Kalayci Date: Mon, 20 Apr 2026 11:02:00 +0200 Subject: [PATCH] chore: release v0.20.31 Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- public/styles/layout.css | 22 +++++++++++++--------- public/styles/tokens.css | 20 ++++++++++++++++++++ 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b88b460..4dd00eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.20.31] - 2026-04-20 + +### Fixed +- Toast success/warning/danger now use dark text in dark mode — previously white text on vivid lime/amber/pink backgrounds had contrast ratios of ~1.3–1.5:1 (unreadable); now 13–15:1 (WCAG AAA) +- List stagger animation tapers naturally (35→30→25→22→18→15→12→9→7ms steps) and covers 9 items before capping, replacing the abrupt constant 175ms from item 6 onward + ## [0.20.30] - 2026-04-20 ### Changed diff --git a/package-lock.json b/package-lock.json index b80e2d3..ffa1932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oikos", - "version": "0.20.30", + "version": "0.20.31", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oikos", - "version": "0.20.30", + "version": "0.20.31", "license": "MIT", "dependencies": { "bcrypt": "^6.0.0", diff --git a/package.json b/package.json index 7f629ed..a16584c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.20.30", + "version": "0.20.31", "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 b5312c5..884ca7b 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -1629,9 +1629,9 @@ opacity: 1; } -.toast--success { background-color: var(--color-success); color: var(--color-text-on-accent); } -.toast--danger { background-color: var(--color-danger); color: var(--color-text-on-accent); } -.toast--warning { background-color: var(--color-warning); color: var(--color-text-on-accent); } +.toast--success { background-color: var(--color-success); color: var(--toast-success-text); } +.toast--danger { background-color: var(--color-danger); color: var(--toast-danger-text); } +.toast--warning { background-color: var(--color-warning); color: var(--toast-warning-text); } @keyframes toast-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } @@ -1847,12 +1847,16 @@ animation: list-item-in 0.2s var(--ease-out) both; } -.list-stagger > *:nth-child(1) { animation-delay: 0ms; } -.list-stagger > *:nth-child(2) { animation-delay: 35ms; } -.list-stagger > *:nth-child(3) { animation-delay: 70ms; } -.list-stagger > *:nth-child(4) { animation-delay: 105ms; } -.list-stagger > *:nth-child(5) { animation-delay: 140ms; } -.list-stagger > *:nth-child(n+6) { animation-delay: 175ms; } +.list-stagger > *:nth-child(1) { animation-delay: 0ms; } +.list-stagger > *:nth-child(2) { animation-delay: 35ms; } +.list-stagger > *:nth-child(3) { animation-delay: 65ms; } +.list-stagger > *:nth-child(4) { animation-delay: 90ms; } +.list-stagger > *:nth-child(5) { animation-delay: 112ms; } +.list-stagger > *:nth-child(6) { animation-delay: 130ms; } +.list-stagger > *:nth-child(7) { animation-delay: 145ms; } +.list-stagger > *:nth-child(8) { animation-delay: 157ms; } +.list-stagger > *:nth-child(9) { animation-delay: 166ms; } +.list-stagger > *:nth-child(n+10) { animation-delay: 173ms; } /* -------------------------------------------------------- * Swipe Affordance Hint diff --git a/public/styles/tokens.css b/public/styles/tokens.css index 2fc3026..9a5ef3d 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -130,6 +130,16 @@ --_color-info-light: #DDF4FF; --color-info-light: var(--_color-info-light); + /* Toast-Textfarben: weiß auf dunklen semantischen Bg (light mode). + * Dark mode überschreibt auf dunkel, weil --color-success/warning/danger + * dort vivid/hell sind und weißen Text unleserlich machen würden. */ + --_toast-success-text: var(--color-text-on-accent); + --toast-success-text: var(--_toast-success-text); + --_toast-warning-text: var(--color-text-on-accent); + --toast-warning-text: var(--_toast-warning-text); + --_toast-danger-text: var(--color-text-on-accent); + --toast-danger-text: var(--_toast-danger-text); + /* -------------------------------------------------------- * 4. Farben - Modul-Akzente * Jedes Modul hat eine eigene dezente Akzentfarbe. @@ -475,6 +485,11 @@ --_color-danger-light: #3D1C1A; --_color-info-light: #1A2D40; + /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */ + --_toast-success-text: #062010; /* 13.6:1 auf #4ADE80 */ + --_toast-warning-text: #291400; /* 13.1:1 auf #F59E0B */ + --_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */ + --_module-dashboard: #818CF8; --_module-tasks: #4ADE80; --_module-calendar: #A78BFA; @@ -570,6 +585,11 @@ --_color-danger-light: #3D1C1A; --_color-info-light: #1A2D40; + /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */ + --_toast-success-text: #062010; /* 13.6:1 auf #4ADE80 */ + --_toast-warning-text: #291400; /* 13.1:1 auf #F59E0B */ + --_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */ + /* Modul-Akzente (Entflechtung Meals/Shopping spiegelt Light-Mode) */ --_module-dashboard: #818CF8; /* Indigo-400 */ --_module-tasks: #4ADE80;