clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-29 06:59:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(asset-picker): theme license pill + share separator with icon picker

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-21 15:33:27 +02:00
parent 7512070919
commit 868a9fb100
2 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/frontend/components/icon.cljs
View File

@@ -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"})

29
src/main/frontend/components/icon.css
View File

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