Custom utility properties that extend Panda CSS with Pindoba-specific functionality.
Hover the button: pdbT: "400ms" eases the lift with the system curve. Pass a literal duration; there are no duration tokens.
Backdrop blur over a translucent panel: none,sm and xl.
A 2px ring at a 1px offset in the focusRing token, shown here permanently; in components put it under_focusVisible or a selected-state selector.
---
// The three custom utilities from the preset (packages/panda-preset/src/utilities),
// each applied to a pindoba component through `passThrough` so the demo stays
// the same code a consumer would write. Styles go through `css.raw()` so Panda
// extracts them.
import Button from "@pindoba/astro-button";
import Panel from "@pindoba/astro-panel";
import Input from "@pindoba/astro-input";
import { css } from "@pindoba/styled-system/css";
const BLURS = ["none", "sm", "xl"] as const;
const stack = css({ display: "flex", flexDirection: "column", gap: "lg" });
const title = css({
fontSize: "md",
fontWeight: "bold",
color: "neutral.text.bold",
});
const code = css({
fontFamily: "mono",
fontSize: "xs",
color: "neutral.text.muted",
});
const hint = css({ fontSize: "sm", color: "neutral.text" });
const row = css({
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "md",
});
const stage = css({
position: "relative",
overflow: "hidden",
padding: "md",
borderRadius: "lg",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "neutral.border.muted",
});
const blurGrid = css({
position: "relative",
display: "grid",
gridTemplateColumns: { base: "1fr", sm: "repeat(3, minmax(0, 1fr))" },
gap: "sm",
});
const backdrop =
"position:absolute;inset:0;background:" +
"radial-gradient(circle at 20% 50%, var(--colors-chart-1) 0 26%, transparent 27%)," +
"radial-gradient(circle at 55% 40%, var(--colors-chart-3) 0 24%, transparent 25%)," +
"radial-gradient(circle at 85% 60%, var(--colors-chart-2) 0 22%, transparent 23%)," +
"var(--colors-neutral-surface-peak)";
const slowLift = {
root: {
style: css.raw({
pdbT: "400ms",
_hover: { transform: "translateY(-4px)" },
}),
},
};
const ring = { root: { style: css.raw({ pdbO: true }) } };
---
<div class={stack}>
<section class={css({ display: "flex", flexDirection: "column", gap: "sm" })}>
<h3 class={title}>
pindobaTransition <span class={code}>pdbT</span>
</h3>
<p class={hint}>
Hover the button: <code class={code}>pdbT: "400ms"</code> eases the lift
with the system curve. Pass a literal duration; there are no duration
tokens.
</p>
<div class={row}>
<Button emphasis="primary" passThrough={slowLift}>
Hover me
</Button>
<Button emphasis="secondary" passThrough={slowLift}>
And me
</Button>
</div>
</section>
<section class={css({ display: "flex", flexDirection: "column", gap: "sm" })}>
<h3 class={title}>
translucent <span class={code}>trslct</span>
</h3>
<p class={hint}>
Backdrop blur over a translucent panel: <code class={code}>none</code>,
<code class={code}>sm</code> and <code class={code}>xl</code>.
</p>
<div class={stage}>
<div style={backdrop} aria-hidden="true"></div>
<div class={blurGrid}>
{BLURS.map((blur) => (
<Panel
background="surface.peak"
emphasis="secondary"
tone="neutral"
translucent
border="muted"
radius="md"
padding="md"
passThrough={{ root: { style: css.raw({ trslct: blur }) } }}
>
<span
class={css({
fontFamily: "mono",
fontSize: "sm",
color: "panel.text.bold",
})}
>
trslct: "{blur}"
</span>
</Panel>
))}
</div>
</div>
</section>
<section class={css({ display: "flex", flexDirection: "column", gap: "sm" })}>
<h3 class={title}>
pindobaOutline <span class={code}>pdbO</span>
</h3>
<p class={hint}>
A 2px ring at a 1px offset in the <code class={code}>focusRing</code>{" "}
token, shown here permanently; in components put it under
<code class={code}>_focusVisible</code> or a selected-state selector.
</p>
<div class={row}>
<Button emphasis="secondary" passThrough={ring}>
Outlined
</Button>
<Input
aria-label="Outlined input"
value="Outlined input"
passThrough={{ root: ring.root }}
/>
</div>
</section>
</div>Shorthand: pdbT. Transitions all properties over the duration you give it, with a custom cubic-bezier easing curve (0.770, 0.000, 0.175, 1.000, an ease-in-out-quart feel). The preset has no duration tokens, so pass a literal such as "200ms". See Motion & Focus to try it.
import { css } from "@pindoba/styled-system/css";
<button
className={css({
pdbT: "200ms",
backgroundColor: "primary.surface.peak",
_hover: { backgroundColor: "primary.surface.base" },
})}
>
Smooth hover
</button>;Shorthand: trslct. Applies backdrop-filter: blur(<token>) saturate(150%) brightness(100%). Accepts the blur tokens none, 2xs, xs, sm, md, lg and xl — the larger blur tokens (2xl–5xl) exist but are not accepted here.
<nav
className={css({
trslct: "md",
backgroundColor: "neutral.surface.peak",
})}
>
Glass navigation
</nav>Shorthand: pdbO. Adds a 2px solid outline with a 1px offset, position: relative and z-index: 1 so the ring is never clipped by a sibling. The color is the focusRing semantic token, which owns the mode flip (near-black in light mode, near-white in dark mode). Useful for focus indicators and selection states.
<button className={css({
_focusVisible: { pdbO: true },
})}>
Accessible focus ring
</button>
<div className={css({
"&[aria-selected=true]": { pdbO: true },
})}>
Selectable item
</div>The concentric corner for a box inset by <spacing> inside a <radius> box: innerRadius: "<radius>.<spacing>" sets border-radius to max(radii.2xs, radius − spacing). It is computed on the element, so it follows a data-density or data-radius scope, and only the pairs you use produce CSS. Inside a Panel tree prefer radius="inner", which recurses — see Border radius.
<div className={css({ borderRadius: "lg", padding: "md" })}>
<div className={css({ innerRadius: "lg.md" })}>Concentric corner</div>
</div>pdbT for interactive elements to ensure consistent easing across the systempdbO for focus states — it reads the focusRing token, so it respects light/dark modes automaticallycolorPalette.text.bold / .text / .text.muted) — never fade text with opacitypdbT, trslct, pdbO) for brevity in component styles