Paper@beaket/paper

Styling

The editor ships its own visual tokens via a CodeMirror theme scoped to .cm-editor, so it works standalone — no CSS file to import.

CSS variables

Every token resolves through var(--beaket-paper-X, …). Set any of them on:root or any ancestor of the editor and it follows — no !important, no specificity fights:

.my-editor-wrapper {
  --beaket-paper-accent: #0c6bae;     /* links, focus, selection tint */
  --beaket-paper-fg: #232a35;         /* body text + caret */
  --beaket-paper-bg: #fffefc;         /* writing surface (default #fff) */
  --beaket-paper-font: Georgia, serif;
  --beaket-paper-font-size: 16.5px;
  --beaket-paper-measure: 42rem;      /* max line width; default none = full width */
  --beaket-paper-word-break: keep-all; /* Korean: break at spaces, not mid-word; default normal */
}

Note — letter-spacing is intentionally not exposed: negative spacing breaks mixed-script CJK, so it is fixed at 0 (a CJK-first guard).

Color tokens

Color tokens are named by role. Each one bridges to the @beaket/ui semantic token of the same role:

TokenBridges toUsed for
--beaket-paper-fg--color-fgBody text, caret, checked checkbox
--beaket-paper-fg-muted--color-fg-mutedBlockquotes, list markers, footnote numbers, menu hints
--beaket-paper-fg-subtle--color-fg-subtleSyntax markers, image placeholders, table hints
--beaket-paper-bg--color-bg-inputThe writing surface
--beaket-paper-bg-raised--color-bg-raisedInline code and code blocks
--beaket-paper-bg-overlay--color-bg-overlayMenus, popovers, copy buttons
--beaket-paper-bg-hover--color-bg-hoverHovered menu items and table cells
--beaket-paper-bg-active--color-bg-activeTable row and column grips (active)
--beaket-paper-border-subtle--color-border-subtleInline code and button outlines
--beaket-paper-border--color-borderMenus, tables, rules, images
--beaket-paper-border-strong--color-border-strongUnchecked checkbox
--beaket-paper-accent--color-accent-solidLinks, focus, selection tint
--beaket-paper-shadow--shadow-offset-overlayOverlay shadow

The code-syntax colors (--beaket-paper-syntax-*) and typography (-font, -font-size, -line-height, -measure,-word-break) are the editor's own and have no bridge.

The earlier names — ink, steel, muted, canvas,surface, paper, frost, chrome,platinum, silver, slate — still work as deprecated aliases through 0.x and are removed at 1.0.

Design-token bridge

Inside a @beaket/ui app the editor inherits the theme automatically — including dark mode — with no setup. Each color token resolves three tiers deep:var(--beaket-paper-ROLE, var(--color-ROLE, default)) — your explicit override first, then the host's semantic token of the same role, then a built-in default.

Dark mode

The editor follows the OS prefers-color-scheme automatically — no setup, no class to toggle. Every token carries a dark-aware default, so body text, surfaces, and the code-syntax ramp all flip together.

Theming still wins in both modes: a token you set on :root or an ancestor —--beaket-paper-* directly, or the host's --color-* palette through the bridge — applies to light and dark alike. To diverge per scheme, set your overrides inside your own@media (prefers-color-scheme: dark) block.

Escape hatches

For anything the variables don't cover:

← Back to overview