Skip to content

style: premium code block design with brand orange accent - #29

Merged
quiet-node merged 2 commits into
mainfrom
worktree-crispy-foraging-badger
Apr 5, 2026
Merged

style: premium code block design with brand orange accent#29
quiet-node merged 2 commits into
mainfrom
worktree-crispy-foraging-badger

Conversation

@quiet-node

Copy link
Copy Markdown
Owner

Summary

  • Force github-dark Shiki theme to prevent white code block backgrounds (the default dual theme resolves to github-light with no .dark root class on the document)
  • Override Streamdown code block CSS: brand-orange border (22% opacity) + subtle double-ring glow, transparent inner body, hairline orange separator above code
  • Fix copy button alignment by overriding Streamdown's sticky/-mt-10 layout trick (broken in Tauri's WebKit) with position: absolute anchored to the header row via :has()
  • Restore dragDropEnabled: false in tauri.conf.json lost during worktree divergence

Test Plan

  • Code blocks render with dark background and brand-orange border
  • Language label (e.g. "python") and copy button appear on the same header row
  • Hairline orange separator visible between header and code body
  • No white backgrounds or white borders in code blocks
  • bun run test:all:coverage — 100% coverage maintained
  • bun run validate-build — zero warnings, zero errors

🤖 Generated with Claude Code

quiet-node and others added 2 commits April 5, 2026 02:01
- Force github-dark Shiki theme to prevent white code block backgrounds
  (the default dual theme resolves to github-light with no .dark root class)
- Brand-orange border (22% opacity) + subtle double-ring glow on code blocks
- Fix bg-background (undefined → white) by making code-block-body transparent
- Fix copy button alignment: override Streamdown's sticky/-mt-10 trick (broken
  in Tauri's WebKit) with position:absolute anchored to the header row via :has()
- Muted orange language label with hairline brand separator above code body
- Proper left padding on header label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
main landed this setting before the worktree was created; restoring it
to keep the worktree in sync with main before merge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
@quiet-node
quiet-node merged commit 9abf65b into main Apr 5, 2026
0 of 3 checks passed
@quiet-node
quiet-node deleted the worktree-crispy-foraging-badger branch April 5, 2026 07:28
quiet-node added a commit that referenced this pull request Apr 10, 2026
* style: premium code block design with brand orange accent

- Force github-dark Shiki theme to prevent white code block backgrounds
  (the default dual theme resolves to github-light with no .dark root class)
- Brand-orange border (22% opacity) + subtle double-ring glow on code blocks
- Fix bg-background (undefined → white) by making code-block-body transparent
- Fix copy button alignment: override Streamdown's sticky/-mt-10 trick (broken
  in Tauri's WebKit) with position:absolute anchored to the header row via :has()
- Muted orange language label with hairline brand separator above code body
- Proper left padding on header label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

* fix: restore dragDropEnabled: false dropped during worktree divergence

main landed this setting before the worktree was created; restoring it
to keep the worktree in sync with main before merge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

---------

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
quiet-node added a commit that referenced this pull request Apr 10, 2026
* style: premium code block design with brand orange accent

- Force github-dark Shiki theme to prevent white code block backgrounds
  (the default dual theme resolves to github-light with no .dark root class)
- Brand-orange border (22% opacity) + subtle double-ring glow on code blocks
- Fix bg-background (undefined → white) by making code-block-body transparent
- Fix copy button alignment: override Streamdown's sticky/-mt-10 trick (broken
  in Tauri's WebKit) with position:absolute anchored to the header row via :has()
- Muted orange language label with hairline brand separator above code body
- Proper left padding on header label

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

* fix: restore dragDropEnabled: false dropped during worktree divergence

main landed this setting before the worktree was created; restoring it
to keep the worktree in sync with main before merge.

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

---------

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
quiet-node added a commit that referenced this pull request Apr 11, 2026
* style: premium code block design with brand orange accent

- Force github-dark Shiki theme to prevent white code block backgrounds
  (the default dual theme resolves to github-light with no .dark root class)
- Brand-orange border (22% opacity) + subtle double-ring glow on code blocks
- Fix bg-background (undefined → white) by making code-block-body transparent
- Fix copy button alignment: override Streamdown's sticky/-mt-10 trick (broken
  in Tauri's WebKit) with position:absolute anchored to the header row via :has()
- Muted orange language label with hairline brand separator above code body
- Proper left padding on header label

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

* fix: restore dragDropEnabled: false dropped during worktree divergence

main landed this setting before the worktree was created; restoring it
to keep the worktree in sync with main before merge.

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

---------

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
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