Redesign editor with the Shell & Paper identity#2
Merged
Conversation
Introduce a dark shell + warm paper palette with a single rust accent, a print-shop typeface trio (Fraunces, Hanken Grotesk, IBM Plex Mono), and the crop-mark and impression-animation primitives. Replaces the previous generic neutral + teal scheme.
Move the wrap/prefix/insert transforms and applyEdit into one module so the toolbar buttons and the editor's keyboard shortcuts share them.
useExport encapsulates the PDF export flow, surfaces a success/error status for the toast, and toggles a transient pressing flag on the store so the preview sheet can play its impression animation.
Use the shared editing primitives, group buttons, add shortcut hints, and restyle for the dark shell.
Frame the document on a warm canvas as a white sheet with rust crop-mark corners, and play the impression animation on export.
Serif wordmark with a print registration mark, the rust Export action wired to useExport with a result toast and global export shortcuts, and dark-surface document controls and settings popover.
Dark composing surface in IBM Plex Mono with caret accent, in-editor keyboard shortcuts, a desktop Focus mode that hides the preview, and a status rail showing word count and reading time.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Revamps the editor's visual design from a generic neutral + teal scheme into a distinctive "Shell & Paper" identity, and adds several interactivity/usability features. No changes to the PDF pipeline — the preview still renders through github-markdown-css so it continues to exactly match the exported PDF.
Design
A typesetting bench for plain text: the source→print duality is made the spine of the layout.
#b5552f, used only on the export action, wordmark.sh, registration mark, crop marks, caret, and focus ring.Interactivity & usability
aria-pressedtoggles,prefers-reduced-motionrespected.Verification
npm run lintandnpm run buildpass.Commits
Nine small, focused commits (tokens/fonts → shared primitives → export hook → toolbar → preview → header/controls → editor → copy → screenshot).