Skip to content

fix(sheet): code block bg follows --card instead of theme-locked var#144

Merged
winlp4ever merged 1 commit into
mainfrom
fix/sheet-code-block-bg
Jun 21, 2026
Merged

fix(sheet): code block bg follows --card instead of theme-locked var#144
winlp4ever merged 1 commit into
mainfrom
fix/sheet-code-block-bg

Conversation

@winlp4ever

@winlp4ever winlp4ever commented Jun 21, 2026

Copy link
Copy Markdown
Contributor

Summary

Sheet code blocks were still leaking the old per-theme bg color through. PR #140 pinned `.shiki` (the inner highlighted layer) to `var(--card)`, but the parent wrapper `.code-block-body` was still painting a separate per-theme variable `--code-block-bg` (rose-pine #191724, tokyo-night #1a1b26, monokai #272822, etc.). When the Shiki `

` was shorter than the wrapper — empty block, short snippet, or the ~80ms pre-Shiki-load window — the leftover band at the bottom showed the theme-locked color instead of the card surface.

The fix

editor.css:265 — `.code-block-body` background now reads `var(--card)`. Parent + child share one source of truth, no more leaks.

`--code-block-bg` had exactly one reader (grep-verified before the change), so its 16 per-theme declarations across index.css are dead code after the rename — deleted in the same pass.

Diff shape

`+6 / -22` across 2 files:

  • editor.css — 1-line background swap + comment block updated to reflect the new contract ("wrapper matches --card so child + parent align")
  • index.css — 16 `--code-block-bg: #...;` lines deleted across the theme blocks (parchment, matcha, noir, catppuccin light/dark, tokyo-night, gruvbox light/dark, monokai-pro light/dark, rose-pine dawn/main, and the system default pair)

Test plan

  • `npm run type-check` clean
  • `npm test --run` — 320/320 green
  • Empty Tiptap code block in a sheet (the reported case) — fully card-colored top to bottom, no stripe at the bottom
  • Short code block (1-2 lines) — gap below Shiki layer is now card, not theme-locked
  • Long code block — unchanged (Shiki fills the parent)
  • Theme cycle across all 6 app themes × light/dark — code block bg tracks `--card` everywhere
  • Streamdown code blocks in assistant messages — sanity check, expect no regression (Streamdown's own wrapper has no bg rule)

The Tiptap code block wrapper (.code-block-body) painted a separate per-
theme `--code-block-bg` (rose-pine, tokyo-night, monokai, etc.), while
the .shiki layer inside already paints --card after PR #140. On short or
empty code blocks the Shiki <pre> didn't fill the parent's full height
so the leftover band leaked the theme-locked color through.

Switch the wrapper to var(--card) so parent + child share one source of
truth. --code-block-bg had this single reader, so its 16 per-theme
declarations across index.css become dead code — deleted in the same
pass.
@winlp4ever winlp4ever merged commit 69763e5 into main Jun 21, 2026
3 checks passed
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.

1 participant