From e0418f031463cb22237a45ae1c0e3e3bad45af5c Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 21 May 2026 15:43:18 +0200 Subject: [PATCH] fix(asset-picker): deepen customize-zone resting + theme hover lift MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two related tweaks after user feedback that the banner color was "not distinct enough" and hover revealed neutral gray: 1. Resting state: was color-mix(secondary 90%, black) — only ~2% darker than the picker bg. Drop to 80% (20% black) so the banner is visibly recessed against the picker, while still distinct from the page bg behind the popover. The chain is still based on the themed `--ls-secondary-background-color`, so OG gets a teal-tinted dark band rather than a neutral black. 2. Hover state: was raw `var(--lx-gray-03, var(--rx-gray-03))` — neutral gray in OG. Switch to @apply bg-gray-03 which chains through `--ls-tertiary-background-color`. Hover now LIFTS the banner from its recessed dark state up to the topbar's tertiary teal — a clear interactive cue across themes. Also the .banner-edit hover-state color gains the `--ls-secondary-text-color` middle step (matches the rest of the picker text-theming work). Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index 86beb19afa..0b4a473785 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -2168,17 +2168,16 @@ The expanded-state gradient (`::before`) layers on top — its peak opacity is capped at 0.55 so this veil still reads through under the gradient. */ - /* Resting state: a SLIGHTLY-DARKER-THAN-PICKER band so it reads as - "tucked into" without bleeding into the page bg behind the popover - (a problem in OG, where `--lx-gray-01` chains to `--ls-primary-bg` - — the same color the page itself uses, making the banner look - like a hole punched through the picker). color-mix darkens the - picker's secondary-bg by 10% with black, giving a recessed-but- - still-distinct color in every theme. Hover lifts via `:has()` - below. */ + /* Resting state: a recessed band, ~20% darker than the picker bg. + We can't use `--lx-gray-01` directly because in OG it chains to + `--ls-primary-bg` — the same color the page itself uses — making + the banner look like a hole punched through the picker. color-mix + darkens the picker's secondary-bg by 20% with black, giving a + clearly recessed band that's still distinct from page bg in every + theme. Hover lifts via `:has()` below. */ background-color: color-mix( in srgb, - var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 90%, + var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 80%, black ); transition: background-color 120ms cubic-bezier(0.32, 0.72, 0, 1); @@ -2251,12 +2250,15 @@ hover fires off the actual click target, not off ambient hovers of the rail-wrap or the avatar tile. */ .avatar-customize-zone:has(.cb-row-trigger:hover) { - background-color: var(--lx-gray-03, var(--rx-gray-03)); + /* Hover LIFTS the banner from its recessed resting state up to the + tertiary-teal level (same shade as the topbar above) — clear + "interactive" cue. Tailwind chain handles theming in OG. */ + @apply bg-gray-03; } /* Brighten the Edit label when the row is hovered. */ .avatar-customize-zone:has(.cb-row-trigger:hover) .banner-edit { - color: var(--lx-gray-12, var(--rx-gray-12)); + color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))); } /* Gradient lives on a pseudo-element so opacity can crossfade independently