From 868a9fb1004e7d2806ddafd452545ced5bc08d1e Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 21 May 2026 15:33:27 +0200 Subject: [PATCH] fix(asset-picker): theme license pill + share separator with icon picker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two follow-up tweaks after the asset-picker chrome theming pass: 1. `.license-badge` (the "Free for any use" pill in the web-image hover preview card) used raw var(--lx-gray-04) for bg — invalid in OG, making the pill background completely transparent. Switch to @apply bg-gray-04 for the themed chain. Color also gains the --ls-primary-text-color middle step. The same raw-var pattern was present on `.web-images-error` — fixed in the same pass. 2. The shui/separator between the asset-picker's tabrow and search input used the shadcn default `bg-border opacity-50`, which rendered washed-out teal in OG (~#003947 at 50% alpha). Apply the `icon-picker-separator` class so it picks up the same themed --ls-border-color (#0e5263, full opacity) as the icon picker. To make this work across both pickers, `.icon-picker-separator` is moved out of the `.cp__emoji-icon-picker` parent block to top-level (now shared with `.asset-picker`). Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/icon.cljs | 6 +++++- src/main/frontend/components/icon.css | 29 ++++++++++++++++---------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/main/frontend/components/icon.cljs b/src/main/frontend/components/icon.cljs index f3515b0c72..eecc5cc659 100644 --- a/src/main/frontend/components/icon.cljs +++ b/src/main/frontend/components/icon.cljs @@ -4021,7 +4021,11 @@ {:on-select #(reset-and-call :remove-entirely)} (shui/tabler-icon "trash" {:size 14 :class "mr-2 opacity-80"}) (t :icon/remove-entirely))))))]] - (shui/separator {:class "my-0 opacity-50"}) + ;; Reuse icon-picker-separator class so the divider gets the same + ;; themed treatment as the icon picker's (lx-gray-05 → + ;; --ls-border-color middle step → themed teal in OG instead of + ;; the shadcn default's washed-out bg-border at 50% opacity). + (shui/separator {:class "my-0 icon-picker-separator"}) [:div.asset-picker-search [:div.search-input (shui/tabler-icon "search" {:size 16 :class "ls-icon-search"}) diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index c340e0d923..86beb19afa 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -1,3 +1,13 @@ +/* Themed picker separator — shared between icon picker and asset + picker. `--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. Unscoped so it can be used + inside both `.cp__emoji-icon-picker` and `.asset-picker` (the + latter applies it via `(shui/separator {:class "icon-picker-separator"})`). */ +.icon-picker-separator { + background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) !important; +} + .cp__emoji-icon-picker { --ls-color-icon-preset: "inherit"; @@ -28,13 +38,6 @@ overflow-y: hidden !important; } - /* 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(--ls-border-color, var(--rx-gray-05))) !important; - } - /* Topbar wrapper for easier inspection */ .icon-picker-topbar { @apply flex-shrink-0; @@ -1694,8 +1697,11 @@ .license-badge { @apply text-xs px-2 py-0.5 rounded mt-1 self-start; - background-color: var(--lx-gray-04); - color: var(--lx-gray-11); + /* Tailwind utility for the full themed chain — raw + var(--lx-gray-04) was invalid in OG (where the var is unset), + making the pill background transparent. */ + @apply bg-gray-04; + color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))); } } } @@ -1706,8 +1712,9 @@ .web-images-error { @apply flex items-center gap-2 px-3 py-2; font-size: 12px; - color: var(--lx-gray-11); - background-color: var(--lx-gray-03); + color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))); + /* Tailwind utility for themed chain. */ + @apply bg-gray-03; border-radius: 4px; margin: 0 8px; }