From 2e054a6cc481798d4a17399cd12078d668145885 Mon Sep 17 00:00:00 2001 From: Ulas Kalayci Date: Sun, 26 Apr 2026 08:49:05 +0200 Subject: [PATCH] chore: release v0.24.4 --- CHANGELOG.md | 8 +++++++ package-lock.json | 4 ++-- package.json | 2 +- public/styles/layout.css | 46 ++++++++++++++++++++++++++++++++++++++++ public/styles/tokens.css | 2 +- 5 files changed, 58 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c04ca29..024a8a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.24.4] - 2026-04-26 + +### Added +- Accessibility: `layout.css` now has a `@media (prefers-contrast: more)` block — ghost and secondary buttons get explicit borders, cards lose decorative shadows, form inputs get a 2px border, focus rings become thicker (3px, 4px offset), and active nav items get an underline as a colour-independent indicator + +### Fixed +- Design tokens: corrected `--sidebar-width-expanded` comment from `1280px+` to `1440px+` to match the actual breakpoint in `layout.css` + ## [0.24.3] - 2026-04-26 ### Added diff --git a/package-lock.json b/package-lock.json index 97f781d..0daf68e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oikos", - "version": "0.24.3", + "version": "0.24.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oikos", - "version": "0.24.3", + "version": "0.24.4", "license": "MIT", "dependencies": { "bcrypt": "^6.0.0", diff --git a/package.json b/package.json index 047b9ee..0913f12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.24.3", + "version": "0.24.4", "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 33949d7..87faf07 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -2025,6 +2025,52 @@ button svg { pointer-events: none; } /* Textarea: vertikale Größenänderung ist nutzbar */ textarea.input { resize: vertical; } +/* -------------------------------------------------------- + * High Contrast (prefers-contrast: more) + * Tokens in tokens.css stellen bereits opake Glass-Werte bereit. + * Hier kommen komponentenspezifische Korrekturen hinzu. + * -------------------------------------------------------- */ +@media (prefers-contrast: more) { + /* Fokus: dicker und weiter versetzt */ + :focus-visible { + outline-width: 3px; + outline-offset: 4px; + } + + /* Ghost- und Secondary-Buttons: explizite Umrandung */ + .btn--ghost, + .btn--secondary { + border: 1.5px solid currentColor; + } + + .btn--ghost:hover { + background-color: var(--color-surface-3); + } + + /* Karten: Schatten entfernen, Border verstärken */ + .card { + box-shadow: none; + border: 1px solid var(--color-border); + } + + .card--flat { + border-color: var(--color-text-secondary); + } + + /* Formulareingaben: kräftigere Border */ + .input, + .form-input { + border-color: var(--color-text-primary); + border-width: 2px; + } + + /* Aktiver Nav-Eintrag: zusätzliche Unterstreichung als farb-unabhängiger Indikator */ + .nav-item[aria-current="page"] { + text-decoration: underline; + text-underline-offset: 3px; + } +} + /* -------------------------------------------------------- * Windows High Contrast / Forced Colors * -------------------------------------------------------- */ diff --git a/public/styles/tokens.css b/public/styles/tokens.css index bc41fad..358d655 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -324,7 +324,7 @@ --nav-height-mobile: 56px; --nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */ --sidebar-width: 56px; /* collapsed icon-only (1024–1279px) */ - --sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */ + --sidebar-width-expanded: 220px; /* full sidebar (1440px+), max 240px laut Spec */ --content-max-width: 1280px; --content-max-width-narrow: 720px; --cal-hour-height: 56px;