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; }