[ @sdxc/ui/styles ]

concentricRadius

The radius a surface takes to stay concentric with rows set padding in from its 1px edge.

import { concentricRadius } from "@sdxc/ui/styles";

Signature

concentricRadius(padding: string, rowRadius?: string): string

Returns a CSS length.

Parameter	Type	Description
`padding`	`string`	The gap between the surface edge and its rows.
`rowRadius?`	`string`	The radius the rows round their corners with. Defaults to `--ui-radius-md`.

concentricRadius(surfacePadding(1))

concentricRadius(surfacePadding(1), "var(--ui-radius-sm, 0.25rem)")

The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.

Constant

The hairline ring plus soft lift an elevated surface draws its edge with, read from the theme's --ui-shadow-ring; the fallback is its light value.

const SHADOW_RING = "var(--ui-shadow-ring, 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04))"

Constant

The gap between a floating surface's edge and the rounded rows it stacks, one source for both the padding and the radius derived from it.

const SURFACE_PADDING = "var(--ui-surface-padding, 0.25rem)"