From cfeb8a36383e432b25767e7e55404ecfafdc6fb3 Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 21 May 2026 14:07:31 +0200 Subject: [PATCH] fix(icon): theme search empty-state via --ls-primary-text-color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "No results found" empty state rendered neutral grays in OG (container/icon at rx-gray-08, title at rx-gray-10, subtitle at rx-gray-08) on top of a teal picker background — out of theme. Inject `--ls-primary-text-color` (#a4b5b6 muted teal-gray in OG) as the themed middle step across all three rules. Layer visual hierarchy via per-child opacity (cannot set on the container — would multiply into children and flatten the contrast): - icon: opacity 0.5 (decorative aid, most muted) - title: opacity 1 (most prominent line) - subtitle: opacity 0.7 (themed but slightly muted) Radix themes unaffected (--lx-gray-N still wins step 1). Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index 1650d1d3cf..f53e2fc0cf 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -89,16 +89,28 @@ .search-empty-state { @apply flex-1 flex flex-col items-center justify-center gap-1.5 select-none; min-height: 160px; - color: var(--lx-gray-08, var(--rx-gray-08)); + /* Container `color` propagates via `currentColor` into the SVG + search-off icon. Themed via `--ls-primary-text-color` middle + step (#a4b5b6 muted teal-gray in OG). Opacity is applied per + child below for visual hierarchy. */ + color: var(--lx-gray-08, var(--ls-primary-text-color, var(--rx-gray-08))); + + /* Icon: most muted (decorative aid). */ + .ui__icon { + opacity: 0.5; + } .title { @apply text-sm font-medium; - color: var(--lx-gray-10, var(--rx-gray-10)); + /* Title: themed and at full opacity — the prominent line. */ + color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10))); } .subtitle { @apply text-xs; - color: var(--lx-gray-08, var(--rx-gray-08)); + /* Subtitle: themed but muted slightly. */ + color: var(--lx-gray-08, var(--ls-primary-text-color, var(--rx-gray-08))); + opacity: 0.7; } }