Styling

Stylesheets

Import @nulib/clover/styles.css once, and @nulib/clover/templates.css for Document and Gallery. Their rules sit in @layer clover, so your own CSS wins without a fight over specificity. Without them, every part still renders a plain, usable layout.

import "@nulib/clover/styles.css";

The web components carry their styles: each element adds its own to the document once, first in <head>, so your rules still win, and the custom properties below reach the elements as they reach the React parts.

Font sizes and spacing

Clover sets no font and no font size. Every size it draws, a space, a line of text, a control, is a step from your page’s 1rem: the root’s font size, 16px unless your page or your reader’s browser sets another. Change it, and all of Clover changes with it, in proportion:

html {
  font-size: 112.5%;
}

Clover is built on the golden ratio . Rather than fixed steps of 5, 10 or 20 pixels, each space is φ, about 1.618, times the one before it, all of them from your 1rem. The same scale sets the margins, the paddings, the gaps and the sizes of text, so the more closely two things belong together, the closer they sit, and the order of what matters reads at a glance. Each step is a custom property you can set, and everything that takes it follows.

Here is everything of Clover’s that your page’s 1rem sizes. Type, step or drag 1rem where the table gives it, and every size follows, and the Viewer over it too:

Which step a space takes follows how closely the things on either side of it belong together. A region, such as the header and thumbnail strip, the information panel, or the picture in the Body at home, keeps --clover-inset (l) between its edge and its content. Inside it, each level is a step less: its parts m apart, what is within a part s, and a label over its value xs.

Text keeps your page’s size, or takes one of four a small step either side of it: --clover-text-xs (0.764rem) for a badge, --clover-text-s (0.854rem) for secondary text, --clover-text-m (1.146rem) for a section’s heading, and --clover-text-l (1.236rem) for a layout’s title. Every round control is --clover-control, a 1rem icon with s of space on every side (2.236rem).

So one property makes a layout tighter or roomier, and the rest follows:

.my-layout {
  --clover-inset: var(--clover-space-m);
}

The Body takes its height from --clover-body-height (60vh, or its template’s own):

.my-layout {
  --clover-body-height: 70vh;
}

The picture fills the Body edge to edge at home; --clover-canvas-inset keeps a margin around it instead. The Canvas’s controls sit --clover-canvas-controls-inset in from its edges, the region’s inset by default, so they line up with the parts around the Body.

Colors

Clover’s colors are custom properties (--clover-color-accent and the rest): set one on any ancestor and it cascades.

.my-layout {
  --clover-color-accent: #4e2a84;
  --clover-color-secondary: #fafafa;
}

The round controls have two colors of their own, a dark fill (--clover-color-control) and white glyphs (--clover-color-control-glyph), and keep them in a dark mode: they sit over a Canvas’s images, so they do not swap with the page’s text and background colors. Text in the accent (links, Read more, the selected item’s label) is --clover-color-accent-text, the accent itself unless you set it: a dark mode can keep the accent for rings and fills and give its text a lighter one.

Classes and states

A part is one of the components a layout is built from: the Body<clover-body> that draws the view, the Items<clover-items> that list the views, a Label<clover-label>, the Panel<clover-panel>, and the rest (Composing). Each names itself with one clover-* class on its root and says what it is doing in data-* attributes, for your own CSS to select. A few:

.clover-items[data-layout="grid"] {
  --clover-items-size: 12rem;
}

Lists in Markdown text

Since your CSS wins, a reset that takes the markers off every list (ul, ol { list-style: none; padding: 0 }, as Tailwind’s and many themes’ do) takes them off a Markdown body’s lists too: its bullets, its indent, and the numbers its author gave. Safari’s VoiceOver then stops reading them as lists. Put them back for Clover’s text:

:is(.clover-annotations-body, .clover-value) ul {
  list-style: disc;
  padding-inline-start: var(--clover-space-l);
}
 
:is(.clover-annotations-body, .clover-value) ol {
  list-style: decimal;
  padding-inline-start: var(--clover-space-l);
}

Colors and contrast

Clover’s default colors meet WCAG 2.2 AA (open gaps are listed in ACCESSIBILITY.md ). The colors you set are yours to keep accessible: tick through these when you set them, and again with a dark mode’s. Names drop --clover-color-.

• Text is 4.5:1 on its ground: primary, primary-muted and accent-text on secondary, and on secondary-muted.
• The search field’s placeholder, primary 65% into secondary, is 4.5:1 on secondary.
• Rings, and the marks that show a state, are 3:1: accent against secondary.
• The round controls’ glyphs are 4.5:1 on their fill: control-glyph on control, and on accent, which fills them under the pointer.
• Over a picture, primary and secondary are 9:1 apart, so one of the two keeps 3:1 against any picture.
• A dark mode passes every check above with its own values.

Do

• Set --clover-color-secondary to your page’s background. Most parts paint no ground of their own, so Clover’s text sits on your page.
• Size your page in rem or %, never in pixels on its root, so your reader’s own text size reaches Clover too.
• Give a dark mode a lighter accent-text for links and labels, and keep the accent for rings and fills.
• Keep a second sign beside the accent when you restyle a state, as Clover does: a bold label, an underline, a second ring.
• Measure what your page really shows, and never round a ratio up: 4.49:1 fails.

Don’t

• Don’t let the accent alone mark a state: color is never the only sign (WCAG 1.4.1).
• Don’t swap control and control-glyph for a dark mode. The round controls sit over pictures, and keep a dark fill and white glyphs in both.
• Don’t take the markers off Clover’s lists with a reset, or put them back.
• Don’t bring back the Body’s motion for a reader who prefers less: Clover turns it off for them, and a rule of yours outside @media (prefers-reduced-motion: no-preference) would turn it on again.
• Don’t set a --clover-* property that Variables does not list: Clover sets those itself as it runs, to hold its state.

Every pair

The pairs Clover draws, where it draws them, the ratio each needs, and what the defaults measure. Text needs 4.5:1 (1.4.3); rings, edges and glyphs that show a control or its state need 3:1 (1.4.11).

Variables

Every custom property a page can set, with its default. Set the colors, the media player’s, the sizes and spaces, and the shapes on any ancestor: they cascade. Set those a part declares for itself on its class, where your CSS still wins over Clover’s layer: .clover-canvas for the Body’s, .clover-items for Items’.

Colors

The media player

On the transport’s dark scrim, in every theme.

Sizes and spaces

Shape and motion

The Body

On .clover-canvas, but for --clover-body-height, which you can set on Body or on any element that contains it. Clover sets the controls’ durations to 0s for a reader who prefers reduced motion: set yours inside @media (prefers-reduced-motion: no-preference).

Items, Summary, Logo, Map and Search

Items’ are set on .clover-items; the Summary’s, the Logo’s, the Map’s and Search’s on them or on any element that contains them.

Templates