Elevation

Surface components like Card and Panel have an elevation prop out of the box, while the underlying tokens can be used as an element's box-shadow for custom surfaces. Elevation can be used in three ways:

1. To dimensionally represent a surface's position in an interface. Surfaces stacked higher (such as modals) have a greater elevation. Each surface creates a new elevation context within it. This means it's acceptable to place a level 0 elevation card within a level 3 elevation panel.
2. To place greater emphasis on a surface. A card with a level 1 elevation will have greater visual emphasis than the default level 0.
3. To express tactility: a surface can traverse to a greater elevation on hover to show that it can be picked up and dragged around.

Editable example
() => {
  const panelStyle = { width: 128, height: 128, display: "grid", placeContent: "center", position: "relative" };

  return (
    <>
      <Panel elevation={0} style={panelStyle}><Text secondary>Level 0</Text></Panel>
      <Panel elevation={1} style={panelStyle}><Text secondary>Level 1</Text></Panel>
      <Panel elevation={2} style={panelStyle}><Text secondary>Level 2</Text></Panel>
      <Panel elevation={3} style={panelStyle}><Text secondary>Level 3</Text></Panel>
    </>
  );
}
() => {
  const panelStyle = { width: 128, height: 128, display: "grid", placeContent: "center", position: "relative" };

  return (
    <>
      <Panel elevation={0} style={panelStyle}><Text secondary>Level 0</Text></Panel>
      <Panel elevation={1} style={panelStyle}><Text secondary>Level 1</Text></Panel>
      <Panel elevation={2} style={panelStyle}><Text secondary>Level 2</Text></Panel>
      <Panel elevation={3} style={panelStyle}><Text secondary>Level 3</Text></Panel>
    </>
  );
}

Tokens

Colors

For surfaces and components that sit directly on top of surfaces there are a series of color tokens. A component that sits directly on a surface is something like a tertiary button that doesn't have its own background color, so therefore derives its interaction states from surface color tokens.

Border radius

All surfaces share a common border radius.

Shadow elevations

When not using a surface component the underlying elevation shadow tokens can be used directly.