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 #3838420d | 0px 0px 0px 1px #f0f0f514 | Use as the default level of elevation. | ||
| BoxShadows.Surface.Flat.Hover | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc | 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 #3838420d | 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 #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc | 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 #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc | Use for raised surfaces. | ||
| BoxShadows.Surface.Raised.Hover | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc | Use when a user's pointer is over an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Active | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc | Use when the user is pressing an interactive raised surface. | ||
| BoxShadows.Surface.Raised.Drag | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc | 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 #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc | Use for floating surfaces. | ||
| BoxShadows.Surface.Floating.Hover | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 6px 14px -2px #3838423d | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 10px 8px #16161dcc | Use when a user's pointer is over an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Active | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc | Use when the user is pressing an interactive floating surface. | ||
| BoxShadows.Surface.Floating.Drag | 0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252 | 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc | 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 #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fff | inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1b1b22 | Use for emphasized neutral button and input in rest state. | ||
| BoxShadows.Field.Neutral.Emphasized.Hover | inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #eff0f2 | inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #292931 | Use for emphasized neutral button and input in hover state. | ||
| BoxShadows.Field.Neutral.Emphasized.Active | inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #eaeaed | inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #34343b | 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 #3838391f | inset 0px 0px 0px 1px #ffffff4d, inset 0px 1px 0px #ffffff8c, 0px 1px 1px -1px #0b0b121f | Use for accentuated neutral button. | ||
| BoxShadows.Field.Neutral.Disabled | inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #0b0b121f | 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 #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #dde8fc | inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1c2d4d | Use for emphasized primary button in rest state. | ||
| BoxShadows.Field.Primary.Emphasized.Hover | inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #d1e1fd | inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1d315a | Use for emphasized primary button in hover state. | ||
| BoxShadows.Field.Primary.Emphasized.Active | inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #c3d8ff | inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1d3667 | 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 #0017ae33, inset 0px -1px 0px #0017ae4d, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #dcedff26, inset 0px 1px 0px #dcedff40, 0px 1px 1px -1px #0b0b121f | Use for accentuated primary button. | ||
| BoxShadows.Field.Primary.Disabled | inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #0b0b121f | 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 #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #e2f2e8 | inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1e3b2d | Use for emphasized success button in rest state. | ||
| BoxShadows.Field.Success.Emphasized.Hover | inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #d8efe2 | inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #1f4332 | Use for emphasized success button in hover state. | ||
| BoxShadows.Field.Success.Emphasized.Active | inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #cdecda | inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #204c38 | 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 #00422226, inset 0px -1px 0px #0042224d, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #b7f8d633, inset 0px 1px 0px #b7f8d640, 0px 1px 1px -1px #0b0b121f | Use for accentuated success button. | ||
| BoxShadows.Field.Success.Disabled | inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #0b0b121f | 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 #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fdf3dd | inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #45391d | Use for emphasized warning button in rest state. | ||
| BoxShadows.Field.Warning.Emphasized.Hover | inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fdefd1 | inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #52431f | Use for emphasized warning button in hover state. | ||
| BoxShadows.Field.Warning.Emphasized.Active | inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fdebc2 | inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #5e4c20 | 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 #4c34001a, inset 0px -1px 0px #4c340033, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ffedc040, inset 0px 1px 0px #ffedc073, 0px 1px 1px -1px #0b0b121f | Use for accentuated warning button. | ||
| BoxShadows.Field.Warning.Disabled | inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #0b0b121f | 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 #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fbe1df | inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #482220 | Use for emphasized critical button and input in rest state. | ||
| BoxShadows.Field.Critical.Emphasized.Hover | inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fbd6d4 | inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #532322 | Use for emphasized critical button and input in hover state. | ||
| BoxShadows.Field.Critical.Emphasized.Active | inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838391f, inset 0px 0px 0px 1px #fbcbc7 | inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #0b0b1280, inset 0px 0px 0px 1px #5e2423 | 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 #80000c33, inset 0px -1px 0px #80000c4d, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ffe4e133, inset 0px 1px 0px #ffe4e140, 0px 1px 1px -1px #0b0b121f | Use for accentuated critical button. | ||
| BoxShadows.Field.Critical.Disabled | inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838391f | inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #0b0b121f | Use for disabled critical button and input. | ||