Styling

TypeScript
import '@localix/flowdown/styles.css'

One stylesheet, about 4 KB compressed, with no framework behind it. Every rule is scoped to the .flowdown element the renderer draws, so it touches nothing else on the page.

Light and dark

The colours are written with CSS light-dark(), so the renderer follows the colour scheme of the page around it:

Your page hasThe Markdown is
color-scheme: dark on an ancestordark
a .dark class or data-theme="dark" on an ancestordark
:root { color-scheme: light dark }the reader's system setting
nothinglight

A page with no dark mode stays light even on a dark system, as the rest of the page does. To pin one block, give it a class and set color-scheme on it, or wrap it in an element with data-theme:

TSX
<Markdown className="preview">{text}</Markdown>

<div data-theme="dark">
  <Markdown>{text}</Markdown>
</div>
CSS
.preview { color-scheme: dark; }

Tokens

Every colour, font and radius is a custom property. Set them on .flowdown, or on any ancestor, to match your design system:

CSS
.flowdown {
  --fd-fg: var(--foreground);
  --fd-bg: var(--background);
  --fd-border: var(--border);
  --fd-link: var(--primary);
  --fd-radius: var(--radius);
}

The defaults sit at zero specificity, so any rule that sets a token wins. A token you set once holds in both themes; to give each theme its own value, use light-dark() as well.

TokenUsed for
--fd-fgBody text; panels are mixed from it.
--fd-fg-softSecondary text: a step's body, a quote.
--fd-fg-faintAnnotations: a step's "when", a tree comment, a code language.
--fd-bgThe ground the Markdown sits on; diagrams mix their fills over it.
--fd-bg-solidWhat shows through a translucent --fd-bg (a glass panel); white when unset. Set it when your ground has alpha, or a dark glass panel draws light diagrams.
--fd-border, --fd-border-subtle, --fd-border-strongTable rules, tab underlines, tree guides.
--fd-veil, --fd-veil-strongPanels: callouts, stats, code blocks. Mixed from --fd-fg.
--fd-linkLinks.
--fd-focusFocus rings on tabs, tree rows, the copy button.

Body text uses the font of the page around it.

Restyling an element

Every element the dialect adds has a class. Restyle one with a selector that starts at .flowdown, as the package's own rules do:

CSS
.flowdown .fd-step-title { font-size: 1.05rem; }
.flowdown .fd-tab[aria-selected='true'] { color: var(--brand); }
FormClasses
Every form.fd-form; a titled form has .fd-steps-title, .fd-tabs-title, .fd-stats-title or .fd-sources-title above it
Callout.fd-callout[data-callout="warning"], .fd-callout-icon, .fd-callout-title, .fd-callout-body
Steps.fd-steps, .fd-step-head, .fd-step-title, .fd-step-meta, .fd-step-body
Tabs.fd-tabs, .fd-tab-list, .fd-tab, .fd-tab-panel
Stats.fd-stats, .fd-stat, .fd-stat-value, .fd-stat-label
Pros and cons.fd-verdicts, .fd-verdict[data-verdict="pros"], .fd-verdict-title, .fd-verdict-list
Folded section.fd-details and its summary (a <details> written as HTML takes the same rules)
Sources.fd-sources, .fd-source, .fd-source-title, .fd-source-host, .fd-source-note
File tree.fd-tree, .fd-tree-row, .fd-tree-name, .fd-tree-comment
Diagram.fd-diagram, .fd-diagram-canvas; its toolbar .fd-diagram-actions of .fd-diagram-action buttons; the viewer dialog.fd-diagram-viewer, .fd-diagram-viewer-bar, .fd-diagram-stage, .fd-diagram-viewer-canvas
Code block.fd-code, .fd-code-bar, .fd-code-title, .fd-code-language (absent when the fence names none), .fd-code-download, .fd-code-copy

The root carries data-streaming while a reply streams, and data-caret while its caret shows.

The stylesheet is not in a cascade layer on purpose: a page's own reset for button or ul, in no layer, would then win over the tabs and the lists. To replace an element outright rather than restyle it, see Components.

Without the stylesheet

You can leave styles.css out and style the classes yourself; the markup is the same. The tabs and the tree still work, since their behaviour is in the components, but nothing lays out the forms: steps are a plain list, stats a list of bold values.