From ace3317721ad8ec9d635f13fa2ff562deca7be0d Mon Sep 17 00:00:00 2001
From: scheinriese <futurized@icloud.com>
Date: Thu, 21 May 2026 14:04:20 +0200
Subject: [PATCH] fix(icon): theme topbar separator + drop accent focus on
 search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related tweaks to the picker topbar/search chrome:

1. The horizontal separators (`.icon-picker-separator` between tabs and
   search input, and `.search-section`/`.asset-picker-search` bottom
   border) were raw `var(--lx-gray-N, var(--rx-gray-N))` — neutral gray
   in OG, out of theme. Inject `--ls-border-color` as the middle step
   (#0e5263 in OG, a themed teal that matches the picker hue).

2. Drop the `:focus-within { border-bottom-color: var(--lx-accent-09) }`
   accent on `.search-section` and `.asset-picker-search`. The search
   input has no validation state to communicate, and the search icon
   already brightens on focus (opacity-50 → opacity-75). The blue
   accent line was redundant chrome.

Radix themes unaffected (--lx-gray-N still wins step 1).

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

diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css
index 62246c2dae..1650d1d3cf 100644
--- a/src/main/frontend/components/icon.css
+++ b/src/main/frontend/components/icon.css
@@ -28,9 +28,11 @@
     overflow-y: hidden !important;
   }
 
-  /* More visible separator like combobox */
+  /* Themed separator. `--ls-border-color` is OG's themed border (#0e5263,
+     a one-shade-lighter teal that matches the picker hue). Radix themes
+     still pick up --lx-gray-05 at step 1. */
   .icon-picker-separator {
-    background-color: var(--lx-gray-05, var(--rx-gray-05)) !important;
+    background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) !important;
   }
 
   /* Topbar wrapper for easier inspection */
@@ -47,15 +49,11 @@
        falling back to `--ls-tertiary-background-color`. Raw
        `var(--lx-gray-03)` would be invalid in OG → transparent. */
     @apply bg-gray-03;
-    border-bottom: 1px solid var(--lx-gray-06, var(--rx-gray-06));
-
-    /* Focus-within tell: the borderless input has no focus ring of its
-       own, so the section's existing bottom-border lights up the
-       theme accent when the input is focused. Themed, accessible,
-       and preserves the edge-to-edge feel. */
-    &:focus-within {
-      border-bottom-color: var(--lx-accent-09);
-    }
+    /* Themed bottom border (--ls-border-color middle step for OG). The
+       search input has no validation state to communicate, so the
+       border doesn't change on focus — the search icon's opacity
+       change provides enough active-state feedback. */
+    border-bottom: 1px solid var(--lx-gray-06, var(--ls-border-color, var(--rx-gray-06)));
   }
 
   /* Icon-picker-specific tab bar look (gray backdrop, right-side actions slot).
@@ -955,13 +953,10 @@
   /* Tailwind utility for the proper themed fallback chain (see icon
      picker .search-section comment). */
   @apply bg-gray-03;
-  /* Grey line at bottom of header section, matching icon picker */
-  border-bottom: 1px solid var(--lx-gray-06, var(--rx-gray-06));
-
-  /* Focus-within accent (see icon picker .search-section). */
-  &:focus-within {
-    border-bottom-color: var(--lx-accent-09);
-  }
+  /* Themed bottom border (matches icon picker — `--ls-border-color`
+     middle step for OG). No focus accent: search icon opacity is the
+     active-state signal. */
+  border-bottom: 1px solid var(--lx-gray-06, var(--ls-border-color, var(--rx-gray-06)));
 
   .search-input {
     @apply relative flex-1 px-2;