No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Drop shadow

Drop shadow tokens may be used for box shadows or drop shadows in CSS. Using box-shadow is often preferable to using filter: drop-shadow(), but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if box-shadow is already being used for a different purpose, such as a focus outline, filter: drop-shadow() may be used. Note that in cases where filter: drop-shadow() is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed.

The opacity values in dark shadow colors are 3x the light values.

These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows.

Emphasized Default

This shadow is used to provide emphasis to containers within a page.

box-shadow

box-shadow:
  var(--spectrum-drop-shadow-emphasized-default-x)
  var(--spectrum-drop-shadow-emphasized-default-y)
  var(--spectrum-drop-shadow-emphasized-default-blur)
  var(--spectrum-drop-shadow-emphasized-default-color);

filter: drop-shadow()

filter: drop-shadow(
  var(--spectrum-drop-shadow-emphasized-default-x)
  var(--spectrum-drop-shadow-emphasized-default-y)
  calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2)
  var(--spectrum-drop-shadow-emphasized-default-color)
);

Emphasized Hover

If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.

box-shadow

box-shadow:
  var(--spectrum-drop-shadow-emphasized-hover-x)
  var(--spectrum-drop-shadow-emphasized-hover-y)
  var(--spectrum-drop-shadow-emphasized-hover-blur)
  var(--spectrum-drop-shadow-emphasized-hover-color);

filter: drop-shadow()

filter: drop-shadow(
  var(--spectrum-drop-shadow-emphasized-hover-x)
  var(--spectrum-drop-shadow-emphasized-hover-y)
  calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2)
  var(--spectrum-drop-shadow-emphasized-hover-color)
);

Elevated

Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.

box-shadow

box-shadow:
  var(--spectrum-drop-shadow-elevated-x)
  var(--spectrum-drop-shadow-elevated-y)
  var(--spectrum-drop-shadow-elevated-blur)
  var(--spectrum-drop-shadow-elevated-color);

filter: drop-shadow()

filter: drop-shadow(
  var(--spectrum-drop-shadow-elevated-x)
  var(--spectrum-drop-shadow-elevated-y)
  calc(var(--spectrum-drop-shadow-elevated-blur) / 2)
  var(--spectrum-drop-shadow-elevated-color)
);