Typeset

GradeTested

Typeset is a stylesheet, not a React component. Add the typeset class to a container and the headings, paragraphs, lists, tables and code inside it are styled from Cadence tokens.

It follows shadcn/typeset and keeps its class names and variables, so what you know about one applies to the other. What Cadence changes lists the differences.

UsageCopy Anchor Link

Import the stylesheet after the Cadence styles:

@import "tailwindcss";
@import "@cadence-clinical/ui/styles.css";
@import "@cadence-clinical/ui/typeset.css";

If you install from the shadcn registry, add the item instead. It imports the same stylesheet from @cadence-clinical/tokens:

pnpm dlx shadcn@latest add @cadence/typeset

Then wrap the content:

<article className="typeset">
  <Markdown>{content}</Markdown>
</article>

Markdown stands for whichever renderer you use. Typeset styles the HTML it produces.

There is no Text componentCopy Anchor Link

Cadence has no Text or Heading component. Text is styled in one of two places:

• Interface text belongs to the component part that shows it, such as a card's title or a field's label. The part sets its own size, weight and colour.
• Content you do not write element by element goes in a Typeset container. That covers rendered markdown, patient information and the body of a clinical note.

PresetsCopy Anchor Link

A preset is a second class on the container. It changes the size and rhythm, and nothing else.

VariablesCopy Anchor Link

Set a variable on the container to tune one place, or define your own preset class that sets several.

<article className="typeset [--typeset-flow:1.75em]">...</article>

Override one elementCopy Anchor Link

Typeset's selectors have no specificity and sit in the components layer, so a Tailwind utility on an element wins without !important:

<div className="typeset">
  <p className="mt-0 font-semibold">...</p>
</div>

Leave a component aloneCopy Anchor Link

Add not-typeset, or the data-not-typeset attribute, to a component inside the container. Typeset styles nothing inside it.

<div className="typeset">
  <p>Styled by Typeset.</p>
  <Button className="not-typeset">Untouched</Button>
</div>

Wide tablesCopy Anchor Link

A table shrinks to fit its container and its headings wrap. A table that still does not fit makes the page scroll sideways, so wrap it in typeset-scroll. Give the wrapper a role, a label and tabIndex={0}, so it can be scrolled from the keyboard:

<div className="typeset-scroll" role="region" aria-labelledby="clinic-times" tabIndex={0}>
  <table>...</table>
</div>

With a markdown renderer, do this where the renderer lets you replace the table element.

Content that arrives in piecesCopy Anchor Link

Appending content never restyles content that is already on screen, which makes Typeset safe for streamed text. Space only flows forward, from the top of each block, and no rule depends on an element being the last one.

What Cadence changesCopy Anchor Link

Typeset is adapted from shadcn/typeset under the MIT licence. Four things differ:

• Nothing changes the case of text. shadcn sets its smallest heading in capitals. Mixed-case lettering, also known as Tall Man lettering, tells look-alike medicine names apart by selective capitalisation, and a capitalised heading would erase it.
• Colour comes from Cadence tokens, so each pairing is contrast-tested. Links use the accent's text role and are always underlined. Highlighted text is tinted with the accent, because a yellow highlight sits on the warning hue.
• In a definition list the term is muted and the value is not. Clinical screens put a label in dt and the patient's data in dd.
• A small heading and a definition term look the same. An h5 over a paragraph and a dt over its dd are both a label above a block, and content arrives marked up either way. They share one style, and what follows each sits the same distance below.
• A table heading may wrap, so a table is less likely to be wider than a phone.

AccessibilityCopy Anchor Link

• Text, links and muted text use token pairings that hold at least 4.5:1, and 7:1 when the user asks for more contrast.
• A link is underlined, so it is never shown by colour alone.
• Content reflows at 320px. Text wraps, including a long unbroken identifier, and nothing is truncated.
• When printed, a table, quotation or figure stays in one piece and a heading stays with the text below it.