From 38e5a7a330cd786d66c24cd949fd16bc9ed14a67 Mon Sep 17 00:00:00 2001 From: Ulas Kalayci Date: Fri, 24 Apr 2026 09:02:56 +0200 Subject: [PATCH] chore: release v0.23.16 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- public/styles/dashboard.css | 2 +- public/styles/glass.css | 15 +++++++-------- public/styles/layout.css | 2 +- public/styles/reminders.css | 2 +- public/styles/tokens.css | 12 ++++++++++++ 8 files changed, 31 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 727643e..80e02e8 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.23.16] - 2026-04-24 + +### Changed +- Design tokens: replaced all remaining hardcoded color and size values in `layout.css`, `glass.css`, `dashboard.css`, and `reminders.css` with CSS custom properties +- Design tokens: added `--text-2xs`, `--color-overlay-glass`, `--color-backdrop-glass`, `--glass-border-overlay`, `--glass-highlight-mid`, `--glass-inset-bottom-base`, `--glass-inset-bottom-hover`, `--glass-inset-thumb`, and `--glass-inset-input` to `tokens.css` + ## [0.23.15] - 2026-04-24 ### Fixed diff --git a/package-lock.json b/package-lock.json index 5d52930..4235aea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oikos", - "version": "0.23.15", + "version": "0.23.16", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oikos", - "version": "0.23.15", + "version": "0.23.16", "license": "MIT", "dependencies": { "bcrypt": "^6.0.0", diff --git a/package.json b/package.json index 52056be..806b999 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.23.15", + "version": "0.23.16", "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/dashboard.css b/public/styles/dashboard.css index fb3ad88..9f4977e 100644 --- a/public/styles/dashboard.css +++ b/public/styles/dashboard.css @@ -1102,7 +1102,7 @@ .widget-customize-btn:hover, .widget-customize-btn:focus-visible { background: var(--color-glass-hover); - outline: 2px solid rgba(255, 255, 255, 0.5); + outline: 2px solid var(--glass-highlight-mid); outline-offset: 2px; } diff --git a/public/styles/glass.css b/public/styles/glass.css index 7955ce4..4153a59 100644 --- a/public/styles/glass.css +++ b/public/styles/glass.css @@ -90,7 +90,7 @@ /* Blur nur wenn unterstützt */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .modal-overlay { - background-color: rgba(0, 0, 0, 0.30); + background-color: var(--color-overlay-glass); backdrop-filter: var(--blur-xs) saturate(120%); -webkit-backdrop-filter: var(--blur-xs) saturate(120%); } @@ -151,14 +151,14 @@ box-shadow: var(--shadow-lg), var(--glass-inset-elevated), - inset 0 -1px 0 rgba(0, 0, 0, 0.12); + var(--glass-inset-bottom-base); } .fab:hover { box-shadow: var(--shadow-lg), var(--glass-inset-strong), - inset 0 -1px 0 rgba(0, 0, 0, 0.16); + var(--glass-inset-bottom-hover); } /* ================================================================ @@ -226,7 +226,7 @@ textarea.form-input { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent), - inset 0 1px 2px rgba(0, 0, 0, 0.04); + var(--glass-inset-input); } /* ================================================================ @@ -242,7 +242,7 @@ textarea.form-input { background-color: color-mix(in srgb, var(--neutral-800) 90%, transparent); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); - border: 1px solid rgba(255, 255, 255, 0.10); + border: 1px solid var(--glass-border-overlay); } } @@ -282,8 +282,7 @@ textarea.form-input { .toggle__track::after { box-shadow: var(--shadow-sm), - inset 0 1px 0 rgba(255, 255, 255, 0.90), - inset 0 -1px 0 rgba(0, 0, 0, 0.08); + var(--glass-inset-thumb); } .toggle input:checked + .toggle__track::after { @@ -297,7 +296,7 @@ textarea.form-input { .fab-backdrop--visible { backdrop-filter: var(--blur-xs); -webkit-backdrop-filter: var(--blur-xs); - background: rgba(0, 0, 0, 0.18); + background: var(--color-backdrop-glass); } } diff --git a/public/styles/layout.css b/public/styles/layout.css index f428a97..ee5890a 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -169,7 +169,7 @@ display: none; position: fixed; inset: 0; - background-color: rgba(0, 0, 0, 0.4); + background-color: var(--color-overlay); z-index: calc(var(--z-nav) + 1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); diff --git a/public/styles/reminders.css b/public/styles/reminders.css index 5523fbe..6038df7 100644 --- a/public/styles/reminders.css +++ b/public/styles/reminders.css @@ -18,7 +18,7 @@ border-radius: var(--radius-full, 9999px); background: var(--color-priority-urgent); color: var(--color-text-on-accent); - font-size: 10px; + font-size: var(--text-2xs); font-weight: 700; line-height: 16px; text-align: center; diff --git a/public/styles/tokens.css b/public/styles/tokens.css index d834e16..cb733a6 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -220,7 +220,9 @@ --color-overlay: var(--_color-overlay); --_color-overlay-light: rgba(0, 0, 0, 0.2); --color-overlay-light: var(--_color-overlay-light); + --color-overlay-glass: rgba(0, 0, 0, 0.30); /* Glass-Modal-Overlay (zwischen overlay-light und overlay) */ --color-backdrop-fab: rgba(0, 0, 0, 0.25); + --color-backdrop-glass: rgba(0, 0, 0, 0.18); /* Subtiler FAB-Backdrop hinter Glass */ /* Glass-Overlays (fuer Elemente auf farbigen Hintergruenden) */ --color-glass: rgba(255, 255, 255, 0.18); @@ -262,6 +264,7 @@ --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Size-Skala */ + --text-2xs: 0.625rem; /* 10px - Sehr kleine Badges (z.B. Erinnerungs-Zähler) */ --text-xs: 0.75rem; /* 12px - Minimum, Captions, Badges, Nav-Labels */ --text-sm: 0.8125rem; /* 13px - Small/Secondary */ --text-base: 0.9375rem; /* 15px - Body (Desktop) */ @@ -380,6 +383,7 @@ --glass-border: var(--_glass-border); --_glass-border-subtle: rgba(255, 255, 255, 0.35); --glass-border-subtle: var(--_glass-border-subtle); + --glass-border-overlay: rgba(255, 255, 255, 0.10); /* immer-dunkle Surfaces (Toasts, Overlays) */ /* a2) Glass-Hintergründe: Vibrancy-Stufe (transparenter, mehr Durchschein) */ --_glass-bg-card: rgba(255, 255, 255, 0.52); @@ -412,6 +416,7 @@ --glass-highlight: var(--_glass-highlight); --_glass-highlight-subtle: rgba(255, 255, 255, 0.35); --glass-highlight-subtle: var(--_glass-highlight-subtle); + --glass-highlight-mid: rgba(255, 255, 255, 0.50); /* Mittlere Stärke für Outlines auf dunklen Surfaces */ /* d2) Inset-Specular: Oberrand-Sheen für Glass-Elemente (volle inset-Kurzform) */ --glass-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.18); @@ -420,6 +425,13 @@ --glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28); --glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.32); + /* d3) Dark-Inset-Specular: Unterrand-Schatten (komplementär zu den White-Insets oben) */ + --glass-inset-bottom-base: inset 0 -1px 0 rgba(0, 0, 0, 0.12); + --glass-inset-bottom-hover: inset 0 -1px 0 rgba(0, 0, 0, 0.16); + --glass-inset-thumb: inset 0 1px 0 rgba(255, 255, 255, 0.90), + inset 0 -1px 0 rgba(0, 0, 0, 0.08); + --glass-inset-input: inset 0 1px 2px rgba(0, 0, 0, 0.04); + /* e) Glass-Schatten */ --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.55); --glass-shadow-sm: var(--_glass-shadow-sm);