import { Meta } from "@storybook/addon-docs"; # Shadows Shadows are used to cast shadows from interface elements, creating elevation between content. ## Using color tokens

TipColors are defined as CSS Custom properties, to use them, use: var(--primary-500) as the CSS property value.

``` box-shadow: var(--shadow-md); text-shadow: var(--shadow-sm); ``` ---

Shadows

--shadow-none

--shadow-sm

--shadow-base

--shadow-md

--shadow-lg

--shadow-xl

--shadow-2xl

Inset Shadows

--shadow-inner-sm

--shadow-inner-base

--shadow-inner-md

--shadow-inner-lg

--shadow-inner-xl

--shadow-inner-2xl

Inherit (experimental)

Inherit shadows will inherit the color of the element and use that as the shadow color. Example: ``` .element { box-shadow: var(--shadow-inherit-md); color: var(--primary-200); } ```

--shadow-inherit-sm

with --neutral-100

--shadow-inherit-base

with --neutral-100

--shadow-inherit-md

with --neutral-200

--shadow-inherit-lg

with --primary-100

--shadow-inherit-xl

with --primary-200

--shadow-inherit-2xl

with --primary-300

--shadow-inherit-inner

with --secondary-300