Elevation

Overview

Wave provides a set of elevation values to maintain standardized surface hierarchy between components. Elevation tokens are sets of shadow values that express z-axis distance between surfaces, giving the illusion of elevation. The effect of the elevation is defined by the intensity and depth of the shadow.

Tokens#

Usage#

Customizing elevation#

When using shadows on a colored background, colored shadows can often look more natural than the default gray-based shadows, which tend to appear washed-out.

• ​
  --shadow-color CSS variable makes it possible to tint elevation of an element.
• ​
  --shadow-intensity CSS variable makes it possible to control the intensity/strength of an element's elevation.

To customize a shadow color or shadow intensity on a specific instance, use the raw elevation value directly from the theme:

import { theme } from '@volue/wave-react';

const Component = styled('div', padding, {
  '--shadow-color': '191, 74%, 4%',
  boxShadow: theme.shadows.elevationL.value
});