ratatui-style 0.2.0

A CSS cascade engine for ratatui — selectors, specificity, inheritance, pseudo-states, and data-driven styling.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//! L0 — Value types only.
//!
//! Build a [`CssStyle`] by hand and from JSON, then project it onto native
//! ratatui `Style` / `Block`. No cascade, no stylesheet — just the building
//! blocks.
//!
//! ```sh
//! cargo run -p ratatui-style --example 01_values
//! ```

use ratatui::style::Style;

use ratatui_style::CssStyle;

fn show(label: &str, s: Style) {
    println!(
        "  {label:28} fg={:<14?} bg={:<14?} modifiers={:?}",
        s.fg, s.bg, s.add_modifier
    );
}

fn main() {
    // --- 1. Builder (Rust-side) -------------------------------------------
    println!("== builder ==");
    let primary = CssStyle::new()
        .color("#ffffff")
        .background("blue")
        .bold()
        .italic()
        .underline();
    show("primary button", primary.to_style());

    let danger = CssStyle::new()
        .color("white")
        .background("#c0392b")
        .bold();
    show("danger button", danger.to_style());

    // --- 2. From JSON (data-driven / server-supplied) ---------------------
    println!("\n== from JSON ==");
    let json = r##"{
        "color": "#00d4ff",
        "background-color": "#1e1e2e",
        "font-weight": "bold",
        "text-decoration": "underline",
        "border": "rounded #444",
        "padding": "1 2"
    }"##;
    let card: CssStyle = serde_json::from_str(json).expect("parse JSON");

    let style = card.to_style();
    show("card decoration", style);

    let block = card.to_block();
    println!("\n  card block (ratatui): {block:?}");

    // Apply padding to a 40x10 area and show the shrunk inner rect.
    let area = ratatui::layout::Rect::new(0, 0, 40, 10);
    let after_padding = block.inner(area);
    println!("  area {area:?} -> inner (padding 1 2) {after_padding:?}");
}