# concentricRadius

> The radius a surface takes to stay concentric with rows set `padding` in from its 1px edge: the rows' own radius plus the padding and that edge.

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

The radius a surface takes to stay concentric with rows set `padding` in
from its 1px edge: the rows' own radius plus the padding and that edge.

## Signature

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

Returns: A CSS length.

## Parameters

| 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`. |

## Examples

```tsx
concentricRadius(surfacePadding(1))
```

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

## Used with it

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

### SHADOW_RING

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.

#### Signature

```ts
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))"
```

### SURFACE_PADDING

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.

#### Signature

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