# Elevation

## Overview

Vera 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

<ElevationsTable data={elevationTokens} />

## Usage

```jsx
<Flex
  css={{ backgroundColor: '$backgroundNeutralSubtle', padding: '$spacingM' }}
>
  <Box
    css={{
      boxShadow: '$elevationS',
      backgroundColor: '$backgroundNeutralMinimal',
      padding: '$spacingM',
      borderRadius: '$m',
      aspectRatio: '1'
    }}
  >
    Hello world
  </Box>
</Flex>
```

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://github.com/Volue/vera/tree/next/design-primitives/design-elevation"
      title="See elevation tokens repo"
      actionIcon="arrowRight"
    />
  </GridItem>
</Grid>

## 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:

```jsx
import { theme } from '@gemini-suite/vera-react';

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

<Callout variant="important">

`{ boxShadow: '$elevationS' }` syntax will not work with the custom CSS variables on the instance, because it resolves elevation key to the global CSS variable.

</Callout>