typed_css.rs

#![feature(track_caller)]
use seed::{*, prelude::*};

use seed_hooks::*;
use seed_hooks::style::*;
use seed_hooks::style::measures::px;

//  Model, Msg, Update, init(), and start()
//  ---------------------------------------
struct Model {}


#[derive(Clone)]
enum Msg {
}

fn update(_msg: Msg, _model: &mut Model, _: &mut impl Orders<Msg>) {
}

fn init(_url: Url, _orders: &mut impl Orders<Msg>) -> Model {
    Model {}
}


#[wasm_bindgen(start)]
pub fn start() {
    App::start("app", init, update, view);
}

// Theme Definition Here
// ---------------------

#[derive(Hash,PartialEq, Eq, Clone)]
enum Color {
    Primary,
    DarkPrimary,
    Secondary,
    DarkSecondary,
    Highlight,
}
impl ColorTheme for Color{} // Allows you to use Color as a color theme

#[derive(Hash,PartialEq, Eq, Clone)]
enum Space {
    Small,
    Medium,
    Large,
}
impl SpaceTheme for Space{} // Allows you to use Space as a space (padding/margin etc) theme

#[derive(Hash,PartialEq, Eq, Clone)]
enum Size {
    Small,
    Medium,
    Large,
}

impl SizeTheme for Size{} // Allows you to use Size as a Size Theme (width/height etc) 

fn my_theme() -> AnyTheme {
    AnyTheme::new()
    .set(Color::Primary, CssColor::Hsl(200.0,70.0,80.0))
    .set(Color::Secondary, hsl(300,60,50)) // or use the hsl shortcut
    .set(Color::Highlight, hsl(310,70,85))
    .set(Color::DarkPrimary, hsl(200,70,35))
    .set(Color::DarkSecondary, hsl(300,60,20))
    .set(Size::Small, CssSize::Length(ExactLength{value:ordered_float::NotNan::new(4.0).unwrap(), unit:seed_hooks::style::measures::Unit::Px}))  
    .set(Size::Medium, px(16).into()) // or use the px shortcut
    .set(Size::Large, px(24).into())
    .set(Space::Small, px(4).into())
    .set(Space::Medium, px(8).into())
    .set(Space::Large, px(24).into())
}

//  View code here!
//  ---------------

#[topo::nested]
fn view(_model: &Model) -> impl IntoNodes<Msg> {
    use_theme( my_theme(), ||
        p![
            themed_button(),
            shorter_styles_button(),
        ]
    )
}

#[topo::nested]
fn themed_button() -> Node<Msg>{

    let counter = use_state(||0);

    button![
        S.background_color(Color::Primary).color(Color::Secondary)
            .border_radius(px(3))
            .padding_left(Space::Large).padding_right(Space::Large)
            .padding_top(Space::Medium).padding_bottom(Space::Medium)
            .border_color(Color::Highlight)
            .border_width(px(2))
            .outline(CssOutline::Outline(CssOutlineWidth::Length(px(0)),CssOutlineStyle::None,CssColor::Hex(0xfff))), // or use outline_none()
        S.hover()
            .background_color(Color::DarkPrimary).color(Color::DarkSecondary)
            .border_width(px(4))
            .outline(CssOutline::Outline(CssOutlineWidth::Inherit,CssOutlineStyle::None,CssColor::Inherit)),// or use outline_none()

        "Clicked ", counter, " times",
        
        counter.on_click(|c| *c += 1)
    ]
}

#[topo::nested]
fn shorter_styles_button() -> Node<Msg>{

    let counter = use_state(||0);

    button![
        S.bg_color(Color::Primary).color(Color::Secondary)
            .radius(px(3))
            .px(Space::Large)
            .py(Space::Medium)
            .border_color(Color::Highlight)
            .bw(px(2))
            .outline_none(),
        S.hover()
            .background_color(Color::DarkPrimary).color(Color::DarkSecondary)
            .bw(px(4))
            .outline_none(),
        
        "Clicked ", counter, " times",
        
         counter.on_click(|c| *c += 1)
    ]
}