color
border-inline-start-width
Applies a border to a single edge only, for a divider between two adjacent elements (e.g.
import { borderEdge } from "@sdxc/u/color";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.borderEdge("inline-start", { width: 1, style: "solid" }) | css({ borderInlineStartWidth: "1px", borderInlineStartStyle: "solid" }) |
u.borderEdge("block-end", { color: "brand", width: 2 }) | css({ borderBlockEndColor: "var(--ui-brand-border)", borderBlockEndWidth: "2px", borderBlockEndStyle: "solid" }) |
u.borderEdge("inline-start", { width: 2, noStyleDefault: true }) | css({ borderInlineStartWidth: "2px" }) |
u.borderEdge("right", { width: 1, style: "solid", color: "neutral" }) | css({ borderRightWidth: "1px", borderRightStyle: "solid", borderRightColor: "var(--ui-neutral-border)" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.borderEdge("inline-start", { width: 1, style: "solid" })Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.borderEdge("inline-start", { width: 1, style: "solid" }))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.borderEdge("inline-start", { width: 1, style: "solid" }))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-brand-border |
--ui-neutral-border |
Signature
u.borderEdge(edge: BorderEdge, options?: BorderEdgeOptions)