openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Liquid Glass Phase 4 - vibrancy, module tint, deeper glass penetration

Browse Source 
Dashboard widgets, task cards, note items, meal slots, form inputs,
toolbars, and FAB actions now use semi-transparent glass backgrounds
with backdrop-filter blur. Each surface gets a subtle module accent
color tint via color-mix gradient overlay. App background uses a
radial accent gradient for ambient vibrancy.

New tokens: --glass-bg-card, --glass-bg-input, --glass-bg-toolbar,
--glass-tint-strength with full dark mode and accessibility overrides.
This commit is contained in:
Ulas
2026-04-14 07:35:59 +02:00
parent 3bc926d766
commit 6f532e45ec
7 changed files with 356 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/tokens.css
+28
View File
@@ -278,6 +278,15 @@
--glass-border: rgba(255, 255, 255, 0.60);
--glass-border-subtle: rgba(255, 255, 255, 0.35);
/* a2) Glass-Hintergründe: Vibrancy-Stufe (transparenter, mehr Durchschein) */
--glass-bg-card: rgba(255, 255, 255, 0.52);
--glass-bg-card-hover: rgba(255, 255, 255, 0.65);
--glass-bg-input: rgba(255, 255, 255, 0.48);
--glass-bg-toolbar: rgba(255, 255, 255, 0.58);
/* a3) Tint: Modul-Akzentfarbe als subtile Glass-Tonung */
--glass-tint-strength: 6%;
/* b) Blur-Stufen */
--blur-xs: blur(4px);
--blur-sm: blur(8px);
@@ -412,6 +421,13 @@
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.08);
--glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07);
--glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
/* Vibrancy - Dark Mode */
--glass-bg-card: rgba(38, 38, 36, 0.50);
--glass-bg-card-hover: rgba(48, 48, 46, 0.62);
--glass-bg-input: rgba(34, 34, 32, 0.45);
--glass-bg-toolbar: rgba(40, 40, 38, 0.55);
--glass-tint-strength: 8%;
}
}
@@ -503,6 +519,13 @@
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.08);
--glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07);
--glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
/* Vibrancy - Dark Mode */
--glass-bg-card: rgba(38, 38, 36, 0.50);
--glass-bg-card-hover: rgba(48, 48, 46, 0.62);
--glass-bg-input: rgba(34, 34, 32, 0.45);
--glass-bg-toolbar: rgba(40, 40, 38, 0.55);
--glass-tint-strength: 8%;
}
/* ================================================================
@@ -514,10 +537,15 @@
--glass-bg: var(--color-surface);
--glass-bg-hover: var(--color-surface-2);
--glass-bg-elevated: var(--color-surface);
--glass-bg-card: var(--color-surface);
--glass-bg-card-hover: var(--color-surface-2);
--glass-bg-input: var(--color-surface);
--glass-bg-toolbar: var(--color-surface);
--glass-border: var(--color-border);
--glass-border-subtle: var(--color-border-subtle);
--glass-highlight: transparent;
--glass-highlight-subtle: transparent;
--glass-tint-strength: 0%;
--blur-xs: blur(0px);
--blur-sm: blur(0px);
--blur-md: blur(0px);