WIP — fix(skins): Liquid light contrast pass (Mood Radio + About + scan)#278
Closed
InstaZDLL wants to merge 2 commits into
Closed
WIP — fix(skins): Liquid light contrast pass (Mood Radio + About + scan)#278InstaZDLL wants to merge 2 commits into
InstaZDLL wants to merge 2 commits into
Conversation
Two related regressions reported on the Liquid light skin after v1.5.0: 1. **Mood Radio cards still pale** — the previous fix (#275) bumped the `::before` opacity from 0.55 to 0.95, but the gradient itself uses `rgb(X Y Z / 0.55)` per stop, and the two alphas multiply (0.55 × 0.95 = 0.52, basically the original). Bump the gradient internal alphas to 1.0 in light mode so the 5 cards become saturated colored surfaces that the hardcoded white text actually reads on. Dark mode keeps the original translucent gradients — the dark page makes them pop on its own. 2. **About hero invisible** — `AboutView` ships the hero with `<div className="... bg-linear-to-br from-zinc-900 ... text-white">`. The dark gradient body is the design intent (white text on dark block, Studio works perfectly). In Liquid light the surrounding aurora bleeds through and inherited `text-white` propagates down to every text child → invisible. Remap `.text-white` to `--liq-ink` in light mode, excluding elements that ALSO carry a saturated colored bg (emerald pills, mood tiles, etc.) where the white is intentional. The exclusion chain matches the colors already used by intentional-white components across the app. Both ship under `:not(.dark)` so dark Liquid stays unchanged.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
…iquid light) User reports the Mood Radio tiles flicker — sometimes saturated as designed, sometimes pale-white again. Investigation pointed at the ::before pseudo route being fragile against three runtime races: 1. **Theme/skin re-application on profile load** — ThemeContext reads the active profile's DB row on mount + on every profile switch (ThemeContext.tsx:111), which calls applyTheme() and toggles the `.dark` class. During the gap between cached-theme apply and DB-theme apply, `:not(.dark)` can stop matching and the ::before-based rule falls back to the 0.55-alpha gradient. 2. **View transitions on theme toggle** — setThemeId triggers `document.startViewTransition` which snapshots the paint for ~300ms. If the snapshot caught a state where my rule wasn't matching, the tile stays pale until the transition tears down. 3. **240ms opacity transition on ::before** — the pseudo has a transition: opacity, so even when the rule matches again the tiles fade back in slowly, giving a "blinks white" impression. Fix: paint the saturated gradient directly on the tile element (background-image, !important) instead of via the pseudo, and display: none the ::before in light mode so the two layers don't double-stack. Element-level paint isn't subject to z-index/stacking gymnastics, isn't affected by the transition on the pseudo, and survives the .dark flips during profile load. Dark mode keeps the existing ::before route unchanged — there it works because the dark page makes the translucent gradient pop on its own.
Owner
Author
|
Closing — the ::before/:not(.dark) approach has runtime races (theme/skin re-application on profile load, view-transition snapshots, opacity transition flicker). Starting over with a cleaner approach when we have bandwidth. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptoms (Liquid light skin, after v1.5.0 ship)
First-pass attempt (cherry-picked from debc42f)
Why this isn't enough yet
User-tested in the live app and reported:
Next iterations to try
Test plan