Elevation

Elevation tokens and styles are used to give elements the appearance of being raised off the page. This adds a sense of depth to the UI and gives users cues for how to interact with elements on the page.

box-shadow: 0 0 4px 0 rgb(0 0 0 / 0.04)

Used for cards and details (collapsible card), combined with gray 300 border

ts-shadow-x-small

--ts-shadow-x-small

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)

Used for inputs, selects, dropdowns, with gray 400 border

ts-shadow-small

--ts-shadow-small

box-shadow: 0 8px 10px -6px rgb(0 0 0 / 0.1)

Used for toast alerts

ts-shadow-medium

--ts-shadow-medium

box-shadow: 0 4px 6px -4px rgb(0 0 0 / 0.1),

                    0 10px 15px -3px

                    rgb(0 0 0 / 0.1)

Used for dropdown and select menu panels

ts-shadow-large

--ts-shadow-large

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)

Used for dialogs (modals)

ts-shadow-x-large

--ts-shadow-x-large