diff --git a/CHANGELOG.md b/CHANGELOG.md index 113f4cc..0048cd9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.19.2] - 2026-04-14 + +### Improved +- Accessibility: FAB focus ring now uses a double-ring pattern (inner `--color-bg`, outer `--color-accent`) visible on any background - previously hardcoded `#fff` was invisible on light backgrounds +- Accessibility: added `forced-colors` media query fallback for Windows High Contrast Mode (buttons, cards, modals, active nav items) +- Design tokens: extracted `--color-accent-secondary`, `--content-max-width-narrow`, `--cal-hour-height` - eliminates last hardcoded values in layout, settings, and calendar CSS +- Dark mode: Apple sync logo in settings now uses semantic tokens (`--color-text-primary` / `--color-bg`) instead of fixed neutrals that didn't invert correctly +- Sidebar logo gradient now references `--color-accent-secondary` token instead of hardcoded `#7C5CFC` + ## [0.19.1] - 2026-04-14 ### Fixed diff --git a/package.json b/package.json index e82a045..81b93b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.19.1", + "version": "0.19.2", "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/calendar.css b/public/styles/calendar.css index cb4a1dc..cfb8108 100644 --- a/public/styles/calendar.css +++ b/public/styles/calendar.css @@ -288,7 +288,7 @@ .week-view__body { display: flex; - min-height: calc(24 * 56px); /* 24h × 56px pro Stunde */ + min-height: calc(24 * var(--cal-hour-height)); /* 24h × 56px pro Stunde */ position: relative; } @@ -299,7 +299,7 @@ } .week-view__time-slot { - height: 56px; + height: var(--cal-hour-height); padding-right: var(--space-2); display: flex; align-items: flex-start; @@ -415,7 +415,7 @@ .day-view__body { display: flex; - min-height: calc(24 * 56px); + min-height: calc(24 * var(--cal-hour-height)); position: relative; } diff --git a/public/styles/layout.css b/public/styles/layout.css index d40b73e..0fcf55f 100644 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -253,8 +253,9 @@ } .page-fab:focus-visible { - outline: 2px solid #fff; + outline: 2px solid var(--color-bg); outline-offset: 2px; + box-shadow: 0 0 0 4px var(--color-accent); } /* Desktop: FAB Position anpassen (keine Bottom-Nav) und etwas kleiner */ @@ -333,7 +334,7 @@ width: var(--target-sm); height: var(--target-sm); border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--color-accent) 0%, #7C5CFC 100%); + background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%); color: var(--color-text-on-accent); font-size: var(--text-sm); font-weight: var(--font-weight-bold); @@ -942,8 +943,9 @@ } .fab:focus-visible { - outline: 2px solid #fff; + outline: 2px solid var(--color-bg); outline-offset: 2px; + box-shadow: 0 0 0 4px var(--color-accent); } @media (min-width: 1024px) { @@ -1739,3 +1741,15 @@ font-size: var(--text-sm); border-radius: 0 0 var(--radius-sm) 0; } + +/* -------------------------------------------------------- + * Windows High Contrast / Forced Colors + * -------------------------------------------------------- */ +@media (forced-colors: active) { + .btn, + .page-fab, + .fab { border: 1px solid ButtonText; } + .card { border: 1px solid CanvasText; } + .modal-panel { border: 2px solid CanvasText; } + .nav-item[aria-current="page"] { border-bottom: 2px solid Highlight; } +} diff --git a/public/styles/settings.css b/public/styles/settings.css index c624f1c..b66fecd 100644 --- a/public/styles/settings.css +++ b/public/styles/settings.css @@ -14,7 +14,7 @@ -------------------------------------------------------- */ .settings-page { - max-width: 720px; + max-width: var(--content-max-width-narrow); margin: 0 auto; } @@ -250,8 +250,8 @@ } .settings-sync-logo--apple { - background: var(--neutral-900); - color: var(--neutral-50); + background: var(--color-text-primary); + color: var(--color-bg); } .settings-sync-info__name { diff --git a/public/styles/tokens.css b/public/styles/tokens.css index fa79211..2720df5 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -64,6 +64,7 @@ --color-accent-hover: #1D4ED8; --color-accent-active: #1E40AF; --color-accent-deep: #1E5CB3; /* Tiefer Akzent für Gradienten, Wetter-Widget */ + --color-accent-secondary: #7C5CFC; /* Sekundärer Akzent für Logo-Gradient */ --color-accent-light: #EFF6FF; --color-accent-subtle: #DBEAFE; --color-btn-primary: #2554C7; /* WCAG AA: 6.62:1 auf weiß (weißer Text) */ @@ -223,6 +224,8 @@ --sidebar-width: 56px; /* collapsed icon-only (1024–1279px) */ --sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */ --content-max-width: 1280px; + --content-max-width-narrow: 720px; + --cal-hour-height: 56px; /* -------------------------------------------------------- * 13. Sidebar @@ -362,6 +365,8 @@ --color-btn-primary: #3B82F6; --color-btn-primary-hover: #2563EB; + --color-accent-secondary: #A78BFA; + /* Semantische Farben - Dark Mode */ --color-success: #4ADE80; --color-warning: #F59E0B; @@ -463,6 +468,7 @@ --color-accent-subtle: #1E3050; --color-btn-primary: #3B82F6; --color-btn-primary-hover: #2563EB; + --color-accent-secondary: #A78BFA; /* Semantische Farben - Dark Mode */ --color-success: #4ADE80;