BoxShadows
Box shadows are used to create the impression of elements being elevated above the background.
import BoxShadows from '@dynatrace/strato-design-tokens/box-shadows';
BoxShadows.Surface.Flat
Surfaces are flat by default and do not have any shadow.
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Surface.Flat.Rest | none | none | Use as the default level of elevation. | ||
| BoxShadows.Surface.Flat.Hover | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 4px 8px -2px #2c2d4d12 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 4px 8px #111223cc | Use as the default level of elevation when a user's pointer is over an interactive surface. | ||
| BoxShadows.Surface.Flat.Active | none | none | Use as the default level of elevation when the user is pressing an interactive surface. | ||
| BoxShadows.Surface.Flat.Drag | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 7px 17px -2px #2c2d4d52 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 13px 8px #111223cc | Use as the default level of elevation when moving a surface, on drag-and-drop interaction. | ||
BoxShadows.Surface.Raised
Raised surfaces have a subtle shadow, and are used to draw attention to an element.
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Surface.Raised.Rest | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 4px 8px -2px #2c2d4d12 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 4px 8px #111223cc | Use for raised surfaces. | ||
| BoxShadows.Surface.Raised.Hover | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 5px 11px -2px #2c2d4d29 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 7px 8px #111223cc | Use when a user's pointer is over an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Active | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 4px 8px -2px #2c2d4d12 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 4px 8px #111223cc | Use when the user is pressing an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Drag | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 7px 17px -2px #2c2d4d52 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 13px 8px #111223cc | Use when moving a raised surface, on drag-and-drop interaction. | ||
BoxShadows.Surface.Floating
Floating surfaces have a noticeable shadow, and are used in elements that overlay other content.
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Surface.Floating.Rest | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 5px 11px -2px #2c2d4d29 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 7px 8px #111223cc | Use for floating surfaces. | ||
| BoxShadows.Surface.Floating.Hover | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 6px 14px -2px #2c2d4d3d | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 10px 8px #111223cc | Use when a user's pointer is over an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Active | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 5px 11px -2px #2c2d4d29 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 7px 8px #111223cc | Use when the user is pressing an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Drag | 0px 0px 0px 1px #2c2d4d08, 0px 1px 2px #2c2d4d0d, 0px 7px 17px -2px #2c2d4d52 | 0px 0px 0px 1px #f0f0f51f, 0px 1px 2px #111223, 0px 13px 8px #111223cc | Use when moving a floating surface, on drag-and-drop interaction. | ||
Still have questions?
Find answers in the Dynatrace Community