Properties and values

Each property method takes its own value type, which has the property's keywords and accepts values in the units the property allows.

Typed values

Where a property accepts one keyword or one value of a type in value, that value is typed. display takes a Display, whose variants are its keywords. width takes a Width, which converts from a length or a percentage.

use hypersig::style::Style;
use hypersig::style::value::{
    AlignItems, Color, Display, FontFamily, FontWeight, LineHeight, deg, ms, pct, px, quoted, rem,
    url,
};

let style = Style::new()
    // Keywords are enum variants of the property's own type.
    .display(Display::Flex)
    .align_items(AlignItems::Center)
    .font_family(FontFamily::SystemUi)
    .font_weight(FontWeight::Number(600.0))
    .line_height(LineHeight::Number(1.5))
    // Lengths, percentages, times, and angles have constructors.
    .width(pct(50))
    .padding(rem(1))
    .border_width(px(1))
    .transition_duration(ms(150))
    .rotate(deg(3))
    // Colors are named, hex, RGB, or mixed.
    .color(Color::CRIMSON)
    .background_color(Color::hex(0x00fa_fafa).mix(&Color::WHITE, 50))
    .border_color(Color::rgb(228, 228, 231))
    .background_image(url("/paper.png"))
    .content(quoted("→"));

Value	Written
Length	`px(1)`, `rem(1.5)`, and the other units
Percentage	`pct(50)`
Time and angle	`ms(150)`, `secs(1)`, `deg(90)`, `turn(0.5)`
Color	`Color::CRIMSON` and the other named colors, `Color::hex`, `Color::rgb`, `opacity`, `mix`, `Color::CURRENT_COLOR`, `Color::TRANSPARENT`
Text and URLs	`quoted("→")` escapes the text, and `url("/a.png")` writes `url("...")`
Every property	`keyword(Property::Color, CssWideKeyword::Inherit)` for `inherit`, `initial`, `unset`, `revert`, and `revert-layer`

What does not compile

A misspelled property has no method, a misspelled keyword has no variant, and a value of the wrong type has no conversion:

use hypersig::style::Style;
use hypersig::style::value::Color;

// error[E0277]: the trait bound `hypersig::hypersig_style::value::Width:
//     From<hypersig::hypersig_style::value::Color>` is not satisfied
let style = Style::new().width(Color::CRIMSON);

Ranges are not checked, so a negative width compiles and the browser ignores the declaration. A value with several parts, such as margin: 0 auto, is written with raw, which Unchecked values covers.