Add glass UI with backdrop blur and fix primary button colors

Apply glassmorphism to sidebar, cards, tables, modals, dropdowns,
and dialogs with semi-transparent backgrounds, backdrop-blur, and
white/15 borders. Add subtle gradient body background for the blur
to work against. Add dedicated btn-primary color tokens so primary
buttons stay bold in dark mode instead of using the brightened text
palette. Use shadow-sm to avoid heavy halos in light mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 03:30:00 +02:00
parent 7e15eb7c7a
commit 9c8e4ae558
10 changed files with 36 additions and 13 deletions

View File

@@ -36,6 +36,10 @@
--color-header-from: rgb(74, 61, 255);
--color-header-to: rgb(118, 117, 255);
/* Button colors (fixed, always bold) */
--color-btn-primary: rgb(74, 61, 255);
--color-btn-primary-hover: rgb(51, 22, 255);
/* Status badge text */
--color-status-yellow: rgb(113, 63, 18);
--color-status-green: rgb(20, 83, 45);
@@ -93,6 +97,10 @@
--color-header-from: rgb(51, 22, 255);
--color-header-to: rgb(74, 61, 255);
/* Button colors (slightly brighter in dark for contrast) */
--color-btn-primary: rgb(88, 75, 255);
--color-btn-primary-hover: rgb(74, 61, 255);
/* Primary adjustments for dark mode */
--color-primary-50: rgba(167, 170, 255, 0.15);
--color-primary-100: rgba(167, 170, 255, 0.25);