Documentation
Brio

Print

Printer-friendly styling for pages. It sets the scheme to light, flattens ink, and keeps the content together. Only used when @media is print.

Examples

Viewing Print Mode

print.css creates a paper-like output for use when printing a page. It automatically, forces light-scheme color mode, flattens various types, keeps content together, and shows link URLs if requested (see below).

Try Ctrl+P or whatever your browser uses to view the print preview.

Link URLs on paper

When print.css is active, and content sits within a container that has the print-show-hrefs class, each link shows its URL in parentheses when printed.

Read the documentation or jump straight to the quick start. On screen this is an ordinary paragraph; on paper each link carries its URL in parentheses, which is why the class sits on doc-style pages and not in the defaults. 

<main class="print-show-hrefs">
        <p>
            Read the
            <a href="https://example.com/docs">documentation</a>
            or jump straight to the <a href="https://example.com/quickstart">quick start</a>. On
            screen this is an ordinary paragraph; on paper each link carries its URL in parentheses,
            which is why the class sits on doc-style pages and not in the defaults.
        </p>
    </main>

Source comments

Print -- paper-ready output for brio pages (extra).

Opt-in by design: this file is part of the brio-extras aggregator
(or its own standalone bundle from the prod build's extras/
directory), never a core import. Everything lives inside
@media print, so on-screen rendering is untouched, and the rules
sit in the utilities layer so they override component defaults
without specificity conflicts.

What it does:

  - Forces the light scheme. The palette stops are light-dark(), so
    re-pointing color-scheme flips every color token at once;
    printers do not honor prefers-color-scheme, and without this a
    dark-mode page prints as a solid black sheet. The non-color
    state-shift anchors get the same re-point.
  - Collapses elevation at the token level: the shadow COLOR tokens
    turn transparent, which flattens every shadow in the system in
    one place rather than per component. Borders stay.
  - Flattens ink-heavy fills whose text stays legible on paper:
    alerts, badges, cards, tables (striping included), code blocks,
    inputs. A flattened alert or badge keeps its colored text and
    border, so the state survives in grayscale. Buttons keep their
    fills on purpose: their text color is tuned to the fill, and
    flattening it would strand light text on white paper.
  - Hides chrome with no meaning on paper (navbar, subnavbar,
    sidebar, drawer, popover, dropdown, toast, tooltip, dismiss
    triggers, the sidebar-toggle). Open <dialog> content stays
    visible deliberately; some apps print modals.
  - Paginates content politely: table headers repeat on each
    printed page, cards and table rows do not split across pages,
    and @page carries a 2cm margin.
  - Muted text stays gray, preserving the visual hierarchy; text
    keeps the light-mode semantic tokens rather than literal black.

Markup:
  Nothing is required -- load the stylesheet and print. One opt-in:

  <main class="print-show-hrefs">...</main>

  appends each link's URL after its text (anchor-only links
    excluded). Useful on doc-style pages; noisy on UI pages, which
    is why it is a class instead of a default.

Deferred until asked (see ROADMAP.md): a tint opt-out for consumers
who want colored fills on paper. Flattening is the ink-friendly
default and nobody has asked yet.

Reference

Source: src/css/extras/print.css

print