Surface
Semantic surface with role padding and an inherited focus-ring offset.@gemologic/sheen · surfacesPlayground
<Surface variant="raised" padding="md" bordered={false} elevated={false} padding="none" variant="base"><Input label="Name" /></Surface>Variant matrix
Surface composition
variant: base
variant: subtle
variant: raised
variant: inset
padding: none
padding: xs
padding: sm
padding: md
padding: lg
padding: xl
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Surface.tsx- Tokens
--sheen-color-bg-raised--sheen-color-border--sheen-color-focus-ring-offset
Accessibility
Role: generic surfaceKeyboard: No component-owned keysDo
- Use role tokens and preserve the surrounding keyboard order.
Do not
- Do not add structural borders or shadows merely as decoration.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "base" | "subtle" | "raised" | "inset" | undefined | base | Semantic surface fill; also establishes the focus-ring offset for descendants. |
padding | Spacing | none | Role-based padding; none leaves spacing to the composition. |
bordered | boolean | false | Adds a structural border, not an interactive-control boundary. |
elevated | boolean | false | Opt-in raised shadow. Keep elevation sparse. |