グローバルスタイル

Global には、タグで要素を選ぶルール、小さなリセット、ページが読み込むフォントが入ります。

タグごとのルール

Global::rule はセレクタに当てはまるすべての要素にスタイルを追加します。セレクタにはタグで選ぶ Element、Selector::Root、Selector::Everything を使えます。これらのルールは El::css のクラスより前の base のカスケードレイヤーに入るので、要素自身のスタイルがこれらのルールを上書きします。ルールのスタイルにある条件は、クラスの場合と同じようにセレクタに対して適用されます。

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"));

Global::preflight() で作った Global には、最初から小さなリセットが入っています。このリセットは、すべての要素の大きさを border-box で測り、既定のマージンを消し、フォームのコントロールにページのフォントを使わせ、画像や動画を枠に収まるまで縮めます。
FontFace::new(family, url(..)) はフォントを @font-face として読み込みます。可変フォントには weights を、イタリック体には italic を使います。family() は font-family に渡す値を返します。
Page::global はルールをページに追加します。後からもう一度呼ぶと、前のルールに追加されます。hypersig_ui::global() は、このようにして組み立てた Global です。