Skip to content

feat: support Logseq 2.0 while keeping 0.10 compatibility - #79

Open
fmauNeko wants to merge 1 commit into
catppuccin:mainfrom
fmauNeko:feat/logseq-2.0-support
Open

fmauNeko wants to merge 1 commit into
catppuccin:mainfrom
fmauNeko:feat/logseq-2.0-support

Conversation

@fmauNeko

Copy link
Copy Markdown

Closes #75

Problem

Logseq resolves every themed colour through a three step chain, both in its stylesheets and in the Tailwind utilities it generates:

var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)))

This theme only ever defined the --ls-* layer and reset --lx-* to initial. That was enough for 0.10, but 2.0 routes far more of its chrome through the --lx-*, shadcn and Radix tokens, and several steps have no --ls-* fallback at all:

  • --lx-gray-08--lx-gray-12 fall straight through to --rx-gray-*
  • every -alpha step falls through to --rx-*-alpha
  • --lx-accent-01 / --lx-accent-12 fall back to --rx-gray-01 — a malformed token with no var() wrapper, so it is simply invalid
  • --lx-accent-*-alpha has no fallback whatsoever

Those steps rendered stock Radix grey and blue on top of a Catppuccin background, which is what #75 describes.

Fix

A single stylesheet still covers both versions — no separate 2.0 build.

File Change
_shui-vars.scss (new) Defines the shadcn HSL tokens (--background, --foreground, --primary, --card, --popover, --muted, --secondary, --accent, --destructive, --border, --input, --ring) and the --rx-* scales. shui.css opens with html * { border-color: hsl(var(--border)) }, so an unthemed --border tinted every border in the app.
_lx-vars.scss Real --lx-gray-01..12 and --lx-accent-01..10 ramps plus alpha variants, instead of initial.
_utils.scss HSL triplets are now space separated. Logseq uses the slash alpha form hsl(var(--primary) / .4), which the comma form cannot parse.
_custom.scss The accent button fill is restricted to the as-classic / as-solid variants.
_v2.scss (new) 2.0-only elements: quote nodes, Radix task checkboxes, block tags, property keys, table/card views, and .text-warning. Inert on 0.10.
ctp-oled.scss Blacks out the -hsl twins so the shadcn surfaces follow OLED.
index.js Publishes --ctp-accent-hsl alongside --ctp-accent so accent switching reaches the HSL consumers.

Two subtleties worth flagging for review:

  • Specificity. Logseq defines the grey ramp at html[data-color=logseq][data-theme=light] (0,2,1). A plain :root[data-color=…] is only (0,2,0) and loses in light mode, so :root is doubled to reach (0,3,0) rather than relying on stylesheet order.
  • --lx-accent-11 / -12 are explicitly reset to initial. Logseq reads them as var(--lx-accent-11, var(--ls-link-text-color, …)) for links but var(--lx-accent-11, var(--ls-tag-text-color, …)) for tags. Defining them collapses both roles onto one colour and loses the multi-colour "Full palette" look. Simply not declaring them is not enough, because colors.css assigns --lx-accent-11: var(--rx-logseq-11).

Issue checklist

Every item reported in #75:

  • Toolbar buttons with ui__button (blue background, invisible SVG icons) — 2.0 renders the whole header toolbar as ghost buttons, and the old blanket .ui__button rule painted each one a solid accent block with a contrasting label colour that vanished once the fill was removed. Now scoped to the solid variants. This was latent on 0.10 too.
  • Dialog overlay backgrounds
  • Toggle switches
  • Active tab buttons in plugin settings
  • Primary buttons with bg-primary
  • Select/combobox borders and focus rings
  • Dialog links and buttons
  • Input fields in dialogs
  • Radio buttons and checkboxes

This replaces the !important workaround in the issue, and applies across all five flavours rather than hardcoding Mocha values.

Testing

Driven against the real 2.0.1 and 0.10.15 desktop apps over CDP, in throwaway profiles:

  • sidebar, dropdown menus, command palette, settings, rendered content (headings, links, tags, code blocks, tables, quotes, task markers, priorities), whiteboards (0.10 only), light mode, and OLED
  • token resolution diffed between the two versions against each one's real compiled stylesheet — identical on every shared surface, and no consumed token resolves to a non-Catppuccin value

The remaining unthemed Radix hues belong to Logseq's named accent colours, which the README already documents as unsupported.

Notes

  • Whiteboards were removed in 2.0, so the CtpWhiteboard setting is now labelled 0.10 only. _whiteboard.scss is kept for 0.10.
  • Also fixes a pre-existing bug where --ctp-blockquote-line had no fallback, so with no accent selected the declaration was invalid and quote bars fell back to currentColor.
  • Version bumped to 0.7.0.

Logseq resolves themed colours through a three step chain, both in its
stylesheets and in the generated Tailwind utilities:

    var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)))

The theme only defined the `--ls-*` layer and reset `--lx-*` to `initial`.
That was enough for 0.10, but 2.0 routes far more of its chrome through the
`--lx-*`, shadcn and Radix tokens, and several steps have no `--ls-*` fallback
at all: `--lx-gray-08`..`12`, every `-alpha` step, and `--lx-accent-01`/`-12`
(whose fallback `--rx-gray-01` is malformed CSS). Those rendered stock Radix
grey and blue on top of a Catppuccin background.

A single stylesheet still covers both versions.

* _lx-vars: define the real `--lx-gray-01..12` and `--lx-accent-01..10` ramps
  plus alpha variants. Needs a doubled `:root` to out-specify Logseq's own
  `html[data-color=logseq][data-theme=light]` rule, which would otherwise win
  in light mode. `--lx-accent-11`/`-12` are explicitly reset to `initial` so
  links, refs and tags keep their distinct palette colours -- not declaring
  them is not enough, since colors.css assigns them.
* _shui-vars: new. Defines the shadcn HSL tokens and the `--rx-*` scales.
  `shui.css` opens with `html * { border-color: hsl(var(--border)) }`, so an
  unthemed `--border` tinted every border in the app.
* _utils: emit HSL triplets space separated. Logseq uses the slash alpha form
  `hsl(var(--primary) / .4)`, which the comma form cannot parse.
* _custom: restrict the accent button fill to the `as-classic`/`as-solid`
  variants. 2.0 renders the whole header toolbar as ghost buttons, so the
  previous blanket `.ui__button` rule painted every toolbar icon a solid
  accent block. Also latent on 0.10.
* _v2: new. Covers 2.0-only elements (quote nodes, Radix task checkboxes,
  block tags, property keys, table and card views) and `.text-warning`, which
  2.0 rewrote onto literal Tailwind swatches. Inert on 0.10.
* ctp-oled: black out the `-hsl` twins so the shadcn surfaces follow OLED.
* index.js: publish `--ctp-accent-hsl` alongside `--ctp-accent` so accent
  switching reaches the HSL consumers.
* _ctp-vars: give `--ctp-blockquote-line` a fallback; without an accent
  selected the declaration was invalid and quote bars fell back to
  currentColor.

Verified by driving the Logseq 2.0.1 and 0.10.15 desktop apps over CDP:
sidebar, dropdowns, command palette, settings, rendered content, whiteboards
(0.10), light mode and OLED. Token resolution was diffed between both
versions and matches on every shared surface.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Logseq 2.0 UI elements not styled (shadcn/ui components)

1 participant