clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-28 22:49:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(icon): theme Custom tab tiles + apply user icon color to text preview

Browse Source 
Five issues in the Custom tab fixed in one pass.

1. Hover bg of the 48x48 tile preview (`.custom-tab-item-preview:hover`)
   was raw var(--lx-gray-05, var(--rx-gray-05)) — neutral gray in OG.
   Inject --ls-border-color middle step (matches the regular grid's
   hover, also updated earlier this session).

2. Keyboard-highlighted preview bg used bright var(--lx-accent-04),
   swamping content. Replace with the same color-mix-diluted quaternary
   teal used by the regular grid's ghost/highlighted tiles. Accent-09
   outline still carries the "I am selected" signal.

3. Tile labels ("Text", "Avatar", "Image") used raw gray-11/12 — neutral
   in OG. Add --ls-primary-text-color and --ls-secondary-text-color
   middle steps for label resting/hover respectively (matches the rest
   of the picker text-theming work this session).

4. Image tile's dashed border was raw var(--rx-gray-08) — neutral. Use
   the lx-gray-08 / --ls-border-color / rx-gray-08 chain. Same chain
   applied to the image-placeholder branch in the `icon` fn (cljs:691)
   so the page-icon's `Pick an image` preview matches.

5. Text tile preview wasn't picking up the user's selected color — the
   `icon` fn only wraps its output in .ls-icon-color-wrap when
   `:color?` is truthy, and the Custom-tab text branch was calling it
   without that opt. Pass `:color? true` so the SVG's
   `fill: currentColor` resolves to the chosen color (verified live:
   green preset now shows on the WO preview).

Avatar and Image tile color application unchanged — those paths use
explicit bg/color inline styles, not the currentColor wrapper.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-21 14:31:04 +02:00
parent 9a36f996f7
commit 63c7236f74
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -697,7 +697,9 @@
:justify-content "center"
:width (str size "px")
:height (str size "px")
:border "1px dashed var(--rx-gray-08)"
;; Themed dashed border (matches Custom-tab image
;; tile — see custom-tab-cp image branch).
:border "1px dashed var(--lx-gray-08, var(--ls-border-color, var(--rx-gray-08)))"
:border-radius "5px"
:background "var(--rx-gray-03-alpha)"
:color "var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11)))"}}
@@ -2595,7 +2597,11 @@
#(reset! *view :text-picker))
:on-mouse-over (fn [] (some-> on-tile-hover! (apply [text-item])))}
[:div.custom-tab-item-preview {:aria-hidden "true"}
(icon text-item {:size 32})]
;; `:color? true` wraps the SVG in `.ls-icon-color-wrap` so the
;; text-tile preview picks up the user's selected color via
;; `currentColor` (avatar and image previews use other paths,
;; but text icons rely on this wrapper to colorize their fill).
(icon text-item {:size 32 :color? true})]
[:span.custom-tab-item-label (t :icon.mode/text)]])
;; Avatar option. In page-icon context: commits the synthesized initials
@@ -2641,7 +2647,9 @@
[:span.image-tile-placeholder
{:style {:width 32
:height 32
:border "1px dashed var(--rx-gray-08)"
;; Themed dashed border via `--ls-border-color` middle
;; step (matches the ghost-highlight outline pattern).
:border "1px dashed var(--lx-gray-08, var(--ls-border-color, var(--rx-gray-08)))"
:border-radius "3px"
:display "flex"
:align-items "center"

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

@@ -681,7 +681,9 @@
transition: background-color 150ms, outline-color 150ms;
&:hover {
background-color: var(--lx-gray-05, var(--rx-gray-05));
/* Themed hover bg via `--ls-border-color` middle step (matches the
regular icon grid's hover; see icon.css:&:hover above). */
background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
}
}
@@ -695,7 +697,15 @@
}
.cp__emoji-icon-picker button.custom-tab-item.is-highlighted .custom-tab-item-preview {
background-color: var(--lx-accent-04);
/* Subtle themed bg (same color-mix as the ghost-highlight in the
regular grid) so line-icons inside the preview remain readable
regardless of the user's icon-color preset. Outline carries the
"I am selected" signal. */
background-color: color-mix(
in srgb,
var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04))) 50%,
transparent
);
outline: 2px solid var(--lx-accent-09);
outline-offset: -2px;
}
@@ -706,12 +716,15 @@
.custom-tab-item-label {
@apply text-xs;
color: var(--lx-gray-11, var(--rx-gray-11));
/* Themed via `--ls-primary-text-color` middle step (matches section
headers and tab labels). */
color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11)));
transition: color 150ms;
}
.custom-tab-item:hover .custom-tab-item-label {
color: var(--lx-gray-12, var(--rx-gray-12));
/* Brighter on hover via `--ls-secondary-text-color` middle step. */
color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12)));
}
/* Shared drag overlay hint — used by both icon picker and asset picker */