From e7c2c514536fa4e2ac3447f30466be09d444f367 Mon Sep 17 00:00:00 2001
From: scheinriese <futurized@icloud.com>
Date: Thu, 21 May 2026 16:15:04 +0200
Subject: [PATCH] fix(asset-picker): make banner recess mode-aware (subtle in
 light, strong in dark)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous `color-mix(picker-bg 65%, black)` worked great in dark mode
but rendered the light-mode banner as muddy mid-gray — the same 35%
black blend that produces a clear recess on dark teal kills text
contrast against a near-white bg, making "Letters, rectangle" almost
illegible.

Split the recipe by mode:
- Default (light): mix(picker-bg 95%, black) — subtle 5% darkening
- html.dark override: mix(picker-bg 65%, black) — stronger 35% for visible recess on dark bgs

Both branches use the same Tailwind-style chain so OG and Radix themes
adapt cleanly. Hover state (still @apply bg-gray-03) is mode-agnostic
via the Tailwind utility, so no separate override needed there.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/main/frontend/components/icon.css | 30 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css
index 65109330ad..e8f452f631 100644
--- a/src/main/frontend/components/icon.css
+++ b/src/main/frontend/components/icon.css
@@ -2175,16 +2175,18 @@
      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 clearly recessed band, ~35% 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 35% with black,
-     giving a noticeably recessed band that's still distinct from page
-     bg in every theme. Hover lifts via `:has()` below. */
+  /* Resting state: recessed band relative to 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 bg with black; the mix amount differs by mode
+     because the same percentage reads very differently in light vs
+     dark themes (35% black on a near-white bg becomes a mid-gray that
+     kills text contrast, while 5% black on a near-black bg is invisible).
+     Default (light mode) gets a subtle darkening; `html.dark` ramps up. */
   background-color: color-mix(
     in srgb,
-    var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 65%,
+    var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 95%,
     black
   );
   transition: background-color 120ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -2206,6 +2208,18 @@
   --avatar-size: 20px;
 }
 
+/* Dark-mode override: same color-mix recipe but with much more black
+   so the recessed effect is actually visible on a dark picker bg.
+   In light mode this would render as muddy mid-gray and kill text
+   contrast (see the parent rule's comment), hence the per-mode split. */
+html.dark .avatar-customize-zone {
+  background-color: color-mix(
+    in srgb,
+    var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02))) 65%,
+    black
+  );
+}
+
 .avatar-customize-zone[data-expanded="true"] {
   --avatar-size: 56px;
 }