grateful-journal/liquidglass.md

Liquid Glass Theme Implementation

Overview

Replaces solid white/dark card surfaces with a unified glassmorphism effect using CSS backdrop-filter. No library needed — pure CSS. Works identically on both light and dark themes with only variable overrides per theme.

---

1. src/index.css changes

:root — replace --card-bg-opacity + --color-surface with:

--glass-bg: rgba(255, 255, 255, 0.55);
--glass-blur: blur(18px) saturate(160%);
--glass-border: 1px solid rgba(255, 255, 255, 0.5);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
--color-surface: var(--glass-bg);

[data-theme="dark"] — replace --color-surface: rgb(26 26 26 / ...) with:

--glass-bg: rgba(255, 255, 255, 0.07);
--glass-border: 1px solid rgba(255, 255, 255, 0.12);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--color-surface: var(--glass-bg);

--glass-blur is NOT redeclared in dark — it inherits the same blur from :root.

---

2. src/App.css additions

Add this block BEFORE the SHARED PAGE SHELL section (~line 403):

/* ============================
   LIQUID GLASS – applied to all card/surface elements
   ============================ */
.journal-card,
.calendar-card,
.entry-card,
.entry-modal,
.confirm-modal,
.settings-profile,
.settings-card,
.settings-tutorial-btn,
.settings-clear-btn,
.settings-signout-btn,
.bottom-nav,
.lp__form {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

Remove individual box-shadow from these classes (glass rule handles it):

• .journal-card — remove box-shadow: 0 2px 12px rgba(0,0,0,0.07)
• .calendar-card — remove box-shadow: 0 2px 10px rgba(0,0,0,0.06)
• .entry-card — remove box-shadow: 0 2px 6px rgba(0,0,0,0.05)
• .settings-profile — remove box-shadow: 0 2px 10px rgba(0,0,0,0.06)
• .settings-card — remove box-shadow: 0 2px 10px rgba(0,0,0,0.06)

---

3. src/App.css dark mode cleanup

Remove entire block (now redundant — glass vars handle background + shadow):

/* -- Cards & surfaces -- */
[data-theme="dark"] .journal-card,
[data-theme="dark"] .calendar-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-profile,
[data-theme="dark"] .entry-card {
    background: var(--color-surface);
    border-color: rgba(74, 222, 128, 0.12);
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(74, 222, 128, 0.06);
}

Collapse settings buttons dark overrides to color-only:

/* -- Settings buttons -- */
[data-theme="dark"] .settings-clear-btn { color: #f87171; }
[data-theme="dark"] .settings-signout-btn { color: #9ca3af; }
[data-theme="dark"] .settings-signout-btn:hover { color: #d1d5db; }

Remove the full blocks that were setting background: var(--color-surface) and box-shadow for .settings-tutorial-btn, .settings-clear-btn, .settings-signout-btn.

Entry modal dark override — keep only the border accent:

[data-theme="dark"] .entry-modal {
    border-top-color: #4ade80;
}

Remove the background and box-shadow lines.

Remove entirely:

[data-theme="dark"] .delete-confirm-modal { background: var(--color-surface); }
[data-theme="dark"] .confirm-modal { background: var(--color-surface); box-shadow: ...; }

History search button — keep only color:

[data-theme="dark"] .history-search-btn { color: #7a8a7a; }

Remove background and border-color lines.

---

Tuning

Variable	What it controls
--glass-bg opacity	How transparent the cards are (0.55 = light, 0.07 = dark)
--glass-blur value	How much the background blurs through
--glass-border opacity	Strength of the frosted edge highlight

To make glass more/less opaque: change the alpha in --glass-bg in :root / [data-theme="dark"].