[ @sdxc/ui/styles ]

surfacePadding

The padding surfaceInset applies for a given number of --ui-surface-padding steps.

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

Signature

surfacePadding(scale: number): string

Returns a CSS length.

Parameter	Type	Description
`scale`	`number`	Multiple of `--ui-surface-padding`.

surfacePadding(1) // "var(--ui-surface-padding, 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)"