Layer

Foundations · src/components/Layer/Layer.tsx

One step of depth. The system's only expression of depth, measured in CIE L* off rendered pixels rather than chosen by eye.

Nest it and each child steps down on its own, so a panel does not have to know where it sits. The cap at 2 is deliberate and warns instead of failing: a fourth stratum usually means the content wants restructuring, not another shade, and crashing a page over it would be worse than the flaw.

Import

import { Layer } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
depth	number	Force a depth instead of taking one from the parent. 0 base, 1 raised, 2 sunken. Anything above 2 is held at 2 and warned about.
as	keyof React.JSX.IntrinsicElements	The element to render. section or article when the layer is also a document landmark.
id	string
className	string
children	React.ReactNode

Exported beside it

LayerContext, LAYER_MEANS