[ @sdxc/u/color ]
borderEdge
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)" }) |
Examples
Basic example
Use borderEdge with an edge and an object to draw a border on one side of an element only:
Release notes
<h3 mix={[borderEdge("block-end", { color: "brand.strong", width: 2 }), pbe(2), ...]}>
Release notes
</h3>Logical edges
Name a logical edge, block-start, inline-end, block-end or inline-start, so the border follows the writing mode:
<div mix={[...]}>
<div mix={[borderEdge("block-start", { color: "brand.strong", width: 4 }), ...]}>
block-start
</div>
<div mix={[borderEdge("inline-end", { color: "brand.strong", width: 4 }), ...]}>
inline-end
</div>
<div mix={[borderEdge("block-end", { color: "brand.strong", width: 4 }), ...]}>
block-end
</div>
<div mix={[borderEdge("inline-start", { color: "brand.strong", width: 4 }), ...]}>
inline-start
</div>
</div>Dividers between items
Draw a border on the edges an item shares with its neighbours to divide items that sit in one frame:
<div
mix={[
inlineFlex(),
border({ color: "neutral.strong", width: 1 }),
rounded("md"),
overflow("hidden"),
]}
>
<button type="button" mix={[border("none"), ...]}>
−
</button>
<span
mix={[
borderEdge("inline-start", { color: "neutral.strong", width: 1 }),
borderEdge("inline-end", { color: "neutral.strong", width: 1 }),
...,
]}
>
12
</span>
<button type="button" mix={[border("none"), ...]}>
+
</button>
</div>Physical edges
Name left, right, top or bottom to pin the border to that side whatever the writing direction; here the block is right-to-left:
left
inline-start
<div dir="rtl" mix={[...]}>
<p mix={[borderEdge("left", { color: "brand.strong", width: 4 }), pis(3), ...]}>
left
</p>
<p
mix={[
borderEdge("inline-start", { color: "brand.strong", width: 4 }),
pis(3),
...,
]}
>
inline-start
</p>
</div>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 your theme
Customizing colors
Define a palette as --ui-color-{name}-{50..950} and map a tone onto it with the --ui-{tone}-* variables, the way theme.css maps the built-in ones:
:root {
--ui-color-info-50: oklch(0.97 0.02 230);
--ui-color-info-200: oklch(0.88 0.06 230);
--ui-color-info-500: oklch(0.62 0.16 230);
--ui-color-info-600: oklch(0.52 0.18 230);
--ui-color-info-900: oklch(0.3 0.1 230);
--ui-info-bg-tint: var(--ui-color-info-50);
--ui-info-bg-solid: var(--ui-color-info-600);
--ui-info-fg: var(--ui-color-info-600);
--ui-info-fg-muted: var(--ui-color-info-500);
--ui-info-fg-emphasis: var(--ui-color-info-900);
--ui-info-fg-on-solid: white;
--ui-info-border: var(--ui-color-info-200);
--ui-info-border-strong: var(--ui-color-info-600);
--ui-info-ring: var(--ui-color-info-500);
}declare module "@sdxc/u" {
interface ColorPalettes {
info: true;
}
interface SemanticTones {
info: true;
}
}The new name is then accepted wherever the scale is:
bg("info")Signature
u.borderEdge(edge: BorderEdge, options?: BorderEdgeOptions)