Component Variables
CSS variables for the editor, images, mathematics, and other components.
Editor
| Variable | Default | Description |
|---|---|---|
--editu-editor-min-height | 350px | Minimum editor height |
--editu-editor-padding | var(--editu-spacing-6) | Editor content padding |
--editu-editor-font-family | var(--editu-font-sans) | Editor font family |
--editu-editor-font-size | var(--editu-font-size-base) | Editor font size |
--editu-editor-line-height | var(--editu-line-height-relaxed) | Editor line height |
Image
| Variable | Default | Description |
|---|---|---|
--editu-image-border-radius | var(--editu-radius-lg) | Image border radius |
--editu-image-outline-color | var(--editu-primary) | Selected image outline |
--editu-image-outline-width | 2px | Outline width |
Image Resize Handle
| Variable | Default | Description |
|---|---|---|
--editu-resize-handle-color | var(--editu-primary) | Resize handle color |
--editu-resize-handle-color-hover | var(--editu-primary-hover) | Resize handle hover |
--editu-resize-handle-width | 8px | Handle width |
--editu-resize-handle-height | 48px | Handle height |
--editu-resize-tooltip-bg | var(--editu-foreground) | Tooltip background |
--editu-resize-tooltip-color | var(--editu-background) | Tooltip text |
Mathematics
| Variable | Default | Description |
|---|---|---|
--editu-math-block-bg | var(--editu-background-secondary) | Block math background |
--editu-math-block-hover-bg | var(--editu-background-tertiary) | Block math hover |
--editu-math-block-selected-bg | var(--editu-primary-bg) | Block math selected |
--editu-math-inline-bg | transparent | Inline math background |
--editu-math-inline-hover-bg | var(--editu-background-secondary) | Inline math hover |
--editu-math-inline-selected-bg | var(--editu-primary-bg) | Inline math selected |
--editu-math-editing-bg | var(--editu-background-tertiary) | Editing state bg |
--editu-math-preview-bg | var(--editu-background-secondary) | Preview background |
Code Block
See Color Variables for code block color tokens.
| Variable | Description |
|---|---|
--editu-code-block-bg | Background color |
--editu-code-block-text | Text color |
--editu-code-block-border | Border color |
--editu-code-block-toolbar-bg | Toolbar background |
--editu-code-block-gutter-bg | Line number gutter |
--editu-code-block-line-number-color | Line numbers |
--editu-code-block-language-color | Language indicator |
--editu-code-block-placeholder | Placeholder text |
--editu-code-block-button-color | Button text |
--editu-code-block-button-border | Button border |
--editu-code-block-button-hover-bg | Button hover bg |
--editu-code-block-button-hover-color | Button hover text |
--editu-code-block-input-bg | Input background |
--editu-code-block-input-border | Input border |
--editu-code-block-input-focus-bg | Input focus bg |
Usage Example
css
:root {
/* Larger editor */
--editu-editor-min-height: 500px;
--editu-editor-padding: 2rem;
/* Rounded images */
--editu-image-border-radius: 1rem;
/* Custom math styling */
--editu-math-block-bg: oklch(0.95 0.01 250);
}