tuix-paper
The surface primitive for background, elevation and corner radius.
tuix-paper is the card behind everything else. It owns the surface colour so
light and dark stay consistent; put content in the default slot. It adds no
padding of its own.
Elevation
In light mode the surface is white and the elevation is a shadow; in dark mode there is no shadow and the elevation is a lighter surface. Toggle the theme in the sidebar to see both.
| Value | Attribute | Light shadow | Dark background |
|---|---|---|---|
PaperElevation.VARIANT_0 | 0 | none | #121212 |
PaperElevation.VARIANT_1 | 1 | 0 1px 4px | rgb(23 23 26) |
PaperElevation.VARIANT_2 | 2 | 0 2px 8px | rgb(26 26 31) |
PaperElevation.VARIANT_3 | 3 | 0 4px 16px | rgb(29 29 36) |
PaperElevation.VARIANT_4 | 4 | 0 7px 24px | rgb(33 33 40) |
The shadow colour is Palette.SHADOW (rgba(66, 79, 101, 0.16)).
Border radius
BorderRadiusPaper is a convenience, not a constraint: the value is applied to
border-radius exactly as given, so the attribute takes any CSS value:
border-radius="12px" and border-radius="50%" both work in plain HTML. The
property is typed with the enum, though, so in TypeScript (including the
React wrapper's borderRadius prop) only the four members below compile.
| Value | Attribute |
|---|---|
BorderRadiusPaper.NONE | 0px |
BorderRadiusPaper.SOFT | 4px |
BorderRadiusPaper.MEDIUM | 10px |
BorderRadiusPaper.STRONG | 20px |
API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
elevation | elevation | PaperElevation | 1 | Shadow depth in light mode, surface colour in dark mode |
borderRadius | border-radius | BorderRadiusPaper | 0px | Corner radius; the attribute takes any CSS value |
dark | dark | boolean | false | Dark palette |
Slots
| Slot | Content |
|---|---|
| default | The card content. tuix-paper adds no padding, so the content carries its own |
Notes
tuix-toast and tuix-modal are built on tuix-paper at elevation 4 with a
4px radius, which is the house style for anything floating.