# Styling

> Tokens, hooks, and your site's CSS.

## Your CSS wins

`core.css` is in `@layer humanonlyweb-writer`, so anything you write overrides it. It styles the editor's Markdown source and gives the editor and rendered content one type scale: a heading is the same size in both.

Style rendered content (`[data-part="writer-content"]`) as your site's prose. The editor's previews use the same wrapper, so they pick it up too.

## Tokens

Set them on any ancestor; the editor and content both follow.

| Token                                                        | Default                   | Description                                                                         |
| ------------------------------------------------------------ | ------------------------- | ----------------------------------------------------------------------------------- |
| `--writer-h1` … `--writer-h6`                                | The browser's             | Heading sizes.                                                                      |
| `--writer-heading-weight`                                    | `bold`                    |                                                                                     |
| `--writer-code-font`, `--writer-code-size`                   | `ui-monospace`, `0.875em` | Inline and block code.                                                              |
| `--writer-quote-indent`                                      | `1em`                     | Quotes.                                                                             |
| `--writer-quote-border-width`, `--writer-quote-border-color` | `3px`, text at 25%        |                                                                                     |
| `--writer-block-inset`, `--writer-block-background`          | `0.75em`, text at 4%      | An open block's padding and background: match your blocks' and the text won't jump. |

```css
:root {
  --writer-h2: 1.6rem;
  --writer-code-font: "JetBrains Mono", monospace;
  --writer-block-inset: 1.25rem;
  --writer-block-background: #fbf6e3;
}
```

If your prose CSS sets heading sizes directly, set these to the same values, or the editor won't match.

## Hooks

| Selector                                                                                                                                                                  | Description                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `[data-part="writer-editor"]`                                                                                                                                             | Editor root: `[data-mode]`, `[data-ready]`, `[data-readonly]`.                                   |
| `[data-part="writer-fallback"]`                                                                                                                                           | What shows before CodeMirror loads.                                                              |
| `[data-part="writer-host"] .cm-editor`                                                                                                                                    | CodeMirror.                                                                                      |
| `[data-part="writer-content"]`                                                                                                                                            | Rendered content, on the page and in the editor's previews.                                      |
| `.cm-md-preview`, `.cm-md-block-open`, `.cm-md-block-fence`                                                                                                               | Rendered blocks, and the lines of a block open for editing.                                      |
| `[data-part="writer-image"]`, `.cm-md-image-frame`, `.cm-md-image-caption`, `.cm-md-image-alt`                                                                            | Image cards: `[data-selected]`; the frame `[data-empty]`, `[data-uploading]`, `[data-dropping]`. |
| `.cm-md-bullet`, `.cm-md-task`, `.cm-md-quote-line`, `.cm-md-hr`                                                                                                          | Live preview's stand-ins for list, task, quote and rule syntax.                                  |
| `.cm-md-h1`…`.cm-md-h6`, `.cm-md-codeblock`, `.cm-md-strong`, `.cm-md-em`, `.cm-md-strike`, `.cm-md-code`, `.cm-md-link`, `.cm-md-quote`, `.cm-md-mark`, `.cm-md-comment` | Markdown source.                                                                                 |
| `[data-part="writer-toolbar"]`, `[data-part="writer-toolbar-item"][data-command]`                                                                                         | Toolbar and buttons: `[aria-pressed]`, `[aria-disabled]`.                                        |