Global styles

A Global holds rules that select elements by tag, a small reset, and the fonts the page loads.

Rules by tag

Global::rule adds a style to every element a selector matches. The selector can be an Element, which selects by tag, Selector::Root, or Selector::Everything. The rules are in the base cascade layer, before the classes of El::css, so an element's own style overrides them. Conditions in a rule's style apply to the selector as they do to a class.

use hypersig::html::p;
use hypersig::style::value::{Color, FontFamily, LineHeight, url};
use hypersig::style::{Element, FontFace, Global, Media, PseudoClass, Selector, Style};
use hypersig::{Page, Signals};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Blog {
    title: String,
}

let inter = FontFace::new("Inter", url("/fonts/inter.woff2")).weights(100, 900);
let family = inter.family();

let global = Global::preflight()
    .font(inter)
    .rule(Selector::Root, Style::new().on(Media::Dark, Style::new().color(Color::WHITE)))
    .rule(
        Element::Body,
        Style::new().font_family(family).line_height(LineHeight::Number(1.6)),
    )
    .rule(
        Element::A,
        Style::new()
            .color(Color::hex(0x0025_63eb))
            .on(PseudoClass::Hover, Style::new().color(Color::hex(0x001d_4ed8))),
    )
    .rule(Element::Code, Style::new().font_family(FontFamily::Monospace));

let html = Page::new("Blog", Blog { title: String::new() })
    .global(global)
    .child(p().text("Hello"))
    .render();
assert!(html.contains("@font-face"));

A Global made with Global::preflight() starts with a small reset. The reset sizes every element with border-box, removes default margins, makes form controls use the page's font, and shrinks images and videos to fit their box.
FontFace::new(family, url(..)) loads a font as @font-face, with weights for a variable font and italic for an italic face. family() returns the value font-family takes.
Page::global adds the rules to the page. A later call adds to the earlier rules. hypersig_ui::global() is a Global built this way.