clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-06-01 19:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(text-picker): clearer themed states for alignment toggle group

Browse Source 
The three alignment buttons (left / center / right) were rendered via
shadcn's button variants `:outline` (inactive) / `:secondary` (active).
In OG dark, both variants resolve through neutral-gray `--secondary` /
`--accent` chains and end up almost indistinguishable — no clear
"this is selected" signal.

Override per-state inside `.text-picker-alignment` with themed chains:
- Inactive: transparent bg, --ls-border-color border, --ls-primary-text-color glyph
- Hover: @apply bg-gray-03 lift + --ls-secondary-text-color glyph
- Active (selected, has `.as-secondary` class): @apply !bg-gray-04
  with --lx-accent-09 border, matching the subtle-bg + accent-outline
  pattern used for tile selections in icon/asset pickers

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-21 22:32:22 +02:00
parent 640ceeda8f
commit 82788debf9
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1465,6 +1465,30 @@
.ui__button {
@apply !w-8 !h-8;
/* shadcn's :secondary / :outline variants resolve to neutral-gray
backgrounds in OG, making selected vs unselected almost
indistinguishable. Override per-state with themed chains. */
border: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) !important;
background-color: transparent !important;
color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))) !important;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
&:hover {
/* Themed tertiary teal lift in OG. */
@apply bg-gray-03 !important;
color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))) !important;
}
}
/* Active (selected) alignment — shadcn's button injects an
`as-secondary` class for `:variant :secondary`. Override with the
same subtle-bg + accent-outline pattern used for tile selections
in icon/asset pickers, so the active button reads as clearly
chosen without overwhelming the icon glyph. */
.ui__button.as-secondary {
@apply !bg-gray-04;
border-color: var(--lx-accent-09) !important;
color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))) !important;
}
}