Inset

import ui/theme.qwe use theme_cssuse ui/inset.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view InsetDemoBox(label: str, class: str, size = "md", axis: str = "both") =    <div style="border: 1px dashed var(--ui-strong); border-radius: var(--ui-radius-sm)">        <Inset size={size} axis={axis} class={class}>            <div style="padding: 10px; background: var(--ui-accent-soft); color: var(--ui-accent); border-radius: var(--ui-radius-sm); font-size: 13px; text-align: center">{label}</div>        </Inset>    </div>view InsetDemo() =    <Grid columns={2}>        <InsetDemoBox label="md: 16px all round" class="inset-demo-md"/>        <InsetDemoBox label="xl: 40px all round" class="inset-demo-xl" size="xl"/>        <InsetDemoBox label="lg, axis x: 24px at the sides only" class="inset-demo-x" size="lg" axis="x"/>        <InsetDemoBox label="top sm, bottom xl" class="inset-demo-map" size={{ top: "sm", bottom: "xl" }}/>    </Grid>

// Inset: room around what it holds, in the kit's sizes, on every side or only// across or down. For padding a card's custom body, a drawer's content, a cell.////   <Inset> <p>Breathing room on every side.</p> </Inset>//   <Inset size="lg" axis="x"> ... </Inset>//   <Inset size={{ top: "sm", bottom: "xl" }}> ... </Inset>//// size: "xs" (4px), "sm" (8px), "md" (16px, the default), "lg" (24px), "xl" (40px)// or a number of pixels; or a map of { top, right, bottom, left } with a size each// (sides left out get none). axis: "both" (default), "x" (left and right only) or// "y" (top and bottom only). The whole room is kept when it is narrow, so give a// phone a smaller size yourself if it needs one.import ui/theme.qwe use ui_clslet inset_css = css`.ui-inset { min-width: 0; padding: var(--ui-inset-t, 0) var(--ui-inset-r, 0) var(--ui-inset-b, 0) var(--ui-inset-l, 0); }.ui-inset > :first-child { margin-top: 0; }.ui-inset > :last-child { margin-bottom: 0; }`fn inset_px(size) -> str =    match size {        int as n => `${n}px`        float as n => `${n}px`        "xs" => "4px"        "sm" => "8px"        "lg" => "24px"        "xl" => "40px"        "none" => "0"        null => "0"        _ => "16px"    }view Inset(size = "md", axis: str = "both", class: str? = null, children) {    style global inset_css    let sides = match size {        map as m => { t: get(m, "top"), r: get(m, "right"), b: get(m, "bottom"), l: get(m, "left") }        _ => { t: axis != "x" ? size : null, r: axis != "y" ? size : null, b: axis != "x" ? size : null, l: axis != "y" ? size : null }    }    <div class={ui_cls(["ui-inset", class])}         style={`--ui-inset-t: ${inset_px(sides.t)}; --ui-inset-r: ${inset_px(sides.r)}; --ui-inset-b: ${inset_px(sides.b)}; --ui-inset-l: ${inset_px(sides.l)}`}>        {children}    </div>}