Theming

Copy Markdown View Source

Every color, space, radius and font of the pickers comes from an --erabi-* custom property. The defaults have no specificity, so a value set on :root, on an ancestor or on .erabi itself wins:

:root {
  --erabi-accent: #0f766e;
  --erabi-radius: 4px;
  --erabi-row-height: 2rem;
}

The defaults are Kotoba's, Koyomi's and Jumon's own, so that a page with them looks like one thing.

The properties

Type--erabi-font, --erabi-font-size, --erabi-small, --erabi-line-height
Colors--erabi-text, --erabi-muted, --erabi-background, --erabi-surface, --erabi-border, --erabi-border-hover, --erabi-accent, --erabi-accent-text, --erabi-invalid, --erabi-active, --erabi-match
Shape--erabi-radius, --erabi-inner-radius, --erabi-chip-radius, --erabi-field-height, --erabi-row-height, --erabi-space, --erabi-icon-size, --erabi-avatar-size, --erabi-agent-radius
Depth and motion--erabi-shadow, --erabi-transition, --erabi-focus-ring
The palette--erabi-{color}-surface and --erabi-{color}-text for gray, brown, orange, yellow, green, blue, purple, pink and red

--erabi-row-height is the height of every row of a list: a long list draws only the rows on screen, by that height.

Dark

The defaults are light, and dark under data-theme="dark" (the attribute of Phoenix's themes) or the class dark. Each color of the palette has its dark pair.

The palette

A palette color of your own keeps the contrast of its pair: the chip's text on its surface at 4.5:1 at least (the built-in pairs are 6.8:1 and more).

Sumi

erabi-sumi.css, after erabi.css, maps every property to the Sumi tokens of the page (its daisyUI themes, or the short --sumi-* names), or to Sumi's own palette when the page has none.

Touch

On a coarse pointer, fields and rows are taller (2.75rem). On a phone, popups are sheets from the bottom of the screen (.erabi-sheet, its head .erabi-sheet-head, its dimmed page .erabi-sheet::backdrop); see the Pickers guide.

Classes

.erabi (and .erabi-select, .erabi-multi_select, ...), .erabi-field, .erabi-chip (data-color), .erabi-avatar (data-kind), .erabi-popup, .erabi-list, .erabi-option (.erabi-active, aria-selected), .erabi-heading, .erabi-hint, .erabi-badge, .erabi-match.