feat(crepe): add --crepe-base-font-size theme variable - #2432
Merged
Merged
Conversation
Introduce a single `--crepe-base-font-size` custom property (default 16px) so the whole editor's font size can be scaled in one line instead of overriding every hardcoded rule. The base is anchored on `.milkdown`; content headings/paragraphs use `em` ratios with unitless line-heights, and all UI chrome font sizes use `calc(var(--crepe-base-font-size, 16px) * ratio)` so they track the base independently of local context. Default rendering is unchanged. Closes #2315
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@milkdown/components
@milkdown/core
@milkdown/crepe
@milkdown/ctx
@milkdown/exception
@milkdown/kit
@milkdown/prose
@milkdown/transformer
@milkdown/utils
@milkdown/react
@milkdown/vue
@milkdown/plugin-automd
@milkdown/plugin-block
@milkdown/plugin-clipboard
@milkdown/plugin-collab
@milkdown/plugin-cursor
@milkdown/plugin-diff
@milkdown/plugin-emoji
@milkdown/plugin-highlight
@milkdown/plugin-history
@milkdown/plugin-indent
@milkdown/plugin-listener
@milkdown/plugin-prism
@milkdown/plugin-slash
@milkdown/plugin-streaming
@milkdown/plugin-tooltip
@milkdown/plugin-trailing
@milkdown/plugin-upload
@milkdown/preset-commonmark
@milkdown/preset-gfm
@milkdown/theme-nord
commit: |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Crepe theme CSS custom property, --crepe-base-font-size (default 16px), intended to let consumers scale Crepe’s typography/UI fonts without individually overriding many font-size rules.
Changes:
- Introduces
--crepe-base-font-size: 16pxin each built-in Crepe theme’s.milkdownvariable block. - Anchors the editor’s base font size via
font-size: var(--crepe-base-font-size, 16px)and converts heading/body typography inreset.csstoem+ unitlessline-height. - Replaces hard-coded UI
font-sizevalues across common theme CSS withcalc(var(--crepe-base-font-size, 16px) * <ratio>)and documents the new variable indocs/api/crepe.md.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/crepe/src/theme/nord/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/nord-dark/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/frame/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/frame-dark/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/crepe/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/crepe-dark/style.css | Declares --crepe-base-font-size in theme variables. |
| packages/crepe/src/theme/common/reset.css | Sets the editor base font-size and converts headings/paragraphs to em sizing. |
| packages/crepe/src/theme/common/top-bar.css | Switches top-bar font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/table.css | Switches table UI font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/link-tooltip.css | Switches tooltip/link editor font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/image-block.css | Switches image block font sizing to base-driven variable/calc. |
| packages/crepe/src/theme/common/diff.css | Switches diff UI font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/code-mirror.css | Switches code-mirror UI font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/block-edit.css | Switches slash menu/block edit UI font sizing to base-driven calc(...). |
| packages/crepe/src/theme/common/ai.css | Switches AI panel UI font sizing to base-driven calc(...). |
| docs/api/crepe.md | Documents overriding theme variables, including --crepe-base-font-size. |
Comments suppressed due to low confidence (1)
packages/crepe/src/theme/common/code-mirror.css:168
line-height: 16pxdoesn’t scale with the new base-drivenfont-size. With larger--crepe-base-font-sizevalues, the text can become taller than 16px and may clip inside the control. Consider expressing line-height relative to the base as well (or as a unitless multiplier) to keep the original proportions.
background: var(--crepe-color-surface-low);
color: var(--crepe-color-on-surface-variant);
border-radius: 4px;
font-size: calc(var(--crepe-base-font-size, 16px) * 0.75);
font-weight: 600;
line-height: 16px;
margin-bottom: 8px;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| border-radius: 4px; | ||
| font-size: 12px; | ||
| font-size: calc(var(--crepe-base-font-size, 16px) * 0.75); | ||
| line-height: 16px; |
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
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.
Summary
Closes #2315.
Crepe's font sizes were hardcoded in px across the theme (
p= 16px,h1–h6= 42/36/32/28/24/18px, plus 11–16px in tables, code blocks, tooltips, menus, etc.). Anyone who wanted a different base size — e.g. 14px to match the rest of their app — had to override every rule by hand.This adds a single
--crepe-base-font-sizecustom property (default16px) that scales the whole editor in one line:How it works:
.milkdown(next to the existingfont-family: var(--crepe-font-default)), and declared in every theme so it's discoverable alongside the other--crepe-font-*variables.reset.cssh1–h6,p) usesemratios of the base with unitless line-heights, so leading scales with the font.calc(var(--crepe-base-font-size, 16px) * <ratio>)rather thanem.emwould be wrong here because it resolves against local context: the.ai-instructionpanel sets a font-size its children override (soemwould compound), and.milkdown-diff-controlsrender inline inside headings of varying size (soemwould balloon).calc(base * ratio)is context-independent and reproduces the current pixels exactly at the 16px default.Default rendering is unchanged — this is purely additive.
How did you test this change?
pnpm --filter=@milkdown/crepe build:theme(PostCSS) passes.Ran the
crepestory (e2e) and measured computedfont-sizeon injected content + chrome at three base values. At the default the values are byte-identical tomain; changing the variable scales everything proportionally:--crepe-base-font-size: 14px: 20pxNo
emcompounding (verified the.ai-instructionsubtree and inline diff controls resolve directly from the base).