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 | 0px 0px 0px 1px #2d2e4e0d | 0px 0px 0px 1px #f0f0f514 | Use as the default level of elevation. | ||
| BoxShadows.Surface.Flat.Hover | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 4px 8px #112c | Use as the default level of elevation when a user's pointer is over an interactive surface. | ||
| BoxShadows.Surface.Flat.Active | 0px 0px 0px 1px #2d2e4e0d | 0px 0px 0px 1px #f0f0f514 | Use as the default level of elevation when the user is pressing an interactive surface. | ||
| BoxShadows.Surface.Flat.Drag | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 13px 8px #112c | 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 #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 4px 8px #112c | Use for raised surfaces. | ||
| BoxShadows.Surface.Raised.Hover | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 7px 8px #112c | Use when a user's pointer is over an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Active | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 4px 8px #112c | Use when the user is pressing an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Drag | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 13px 8px #112c | 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 #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 7px 8px #112c | Use for floating surfaces. | ||
| BoxShadows.Surface.Floating.Hover | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 10px 8px #112c | Use when a user's pointer is over an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Active | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 7px 8px #112c | Use when the user is pressing an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Drag | 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 13px 8px #112c | Use when moving a floating surface, on drag-and-drop interaction. | ||
BoxShadows.Field.Neutral.Emphasized
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Neutral.Emphasized.Rest | inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff | inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #112 | Use for emphasized neutral button and input in rest state. | ||
| BoxShadows.Field.Neutral.Emphasized.Hover | inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4 | inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #3b3b52 | Use for emphasized neutral button and input in hover state. | ||
| BoxShadows.Field.Neutral.Emphasized.Active | inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc | inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #44445c | Use for emphasized neutral button and input in active state. | ||
BoxShadows.Field.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Neutral.Accent | inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ffffff4d, inset 0px -1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f | Use for accentuated neutral button. | ||
| BoxShadows.Field.Neutral.Disabled | inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f | Use for disabled neutral button and input. | ||
BoxShadows.Field.Primary.Emphasized
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Primary.Emphasized.Rest | inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7 | inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #313150 | Use for emphasized primary button in rest state. | ||
| BoxShadows.Field.Primary.Emphasized.Hover | inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6 | inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #39395d | Use for emphasized primary button in hover state. | ||
| BoxShadows.Field.Primary.Emphasized.Active | inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4 | inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #42426a | Use for emphasized primary button in active state. | ||
BoxShadows.Field.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Primary.Accent | inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #eef1ff26, inset 0px -1px 0px #eef1ff40, 0px 1px 1px -1px #f0f0f51f | Use for accentuated primary button. | ||
| BoxShadows.Field.Primary.Disabled | inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f | Use for disabled primary button. | ||
BoxShadows.Field.Success.Emphasized
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Success.Emphasized.Rest | inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6 | inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #273644 | Use for emphasized success button in rest state. | ||
| BoxShadows.Field.Success.Emphasized.Hover | inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd | inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #2b404c | Use for emphasized success button in hover state. | ||
| BoxShadows.Field.Success.Emphasized.Active | inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3 | inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #304a54 | Use for emphasized success button in active state. | ||
BoxShadows.Field.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Success.Accent | inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #aafef533, inset 0px -1px 0px #aafef540, 0px 1px 1px -1px #f0f0f51f | Use for accentuated success button. | ||
| BoxShadows.Field.Success.Disabled | inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f | Use for disabled success button. | ||
BoxShadows.Field.Warning.Emphasized
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Warning.Emphasized.Rest | inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5 | inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #403537 | Use for emphasized warning button in rest state. | ||
| BoxShadows.Field.Warning.Emphasized.Hover | inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb | inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #4e3e39 | Use for emphasized warning button in hover state. | ||
| BoxShadows.Field.Warning.Emphasized.Active | inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0 | inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #5d483c | Use for emphasized warning button in active state. | ||
BoxShadows.Field.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Warning.Accent | inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ffecc340, inset 0px -1px 0px #ffecc373, 0px 1px 1px -1px #f0f0f51f | Use for accentuated warning button. | ||
| BoxShadows.Field.Warning.Disabled | inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f | Use for disabled warning button. | ||
BoxShadows.Field.Critical.Emphasized
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Critical.Emphasized.Rest | inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1 | inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #3c2131 | Use for emphasized critical button and input in rest state. | ||
| BoxShadows.Field.Critical.Emphasized.Hover | inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5 | inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #482332 | Use for emphasized critical button and input in hover state. | ||
| BoxShadows.Field.Critical.Emphasized.Active | inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9 | inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #542433 | Use for emphasized critical button and input in active state. | ||
BoxShadows.Field.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| BoxShadows.Field.Critical.Accent | inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ffeceb33, inset 0px -1px 0px #ffeceb40, 0px 1px 1px -1px #f0f0f51f | Use for accentuated critical button. | ||
| BoxShadows.Field.Critical.Disabled | inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f | inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f | Use for disabled critical button and input. | ||