Qeetrix

Elevation

Shadow roles for every surface, in the light and the dark theme.

Elevation is the role a surface plays, and the shadow is the value it renders with: a component picks raised, overlay or modal, never a shadow number, so the whole ladder can be retuned in one place. In the dark theme the shadows are deeper, and surfaces also step up in lightness as they rise (see the surface roles in Colour).

Each role is shown on a light and on a dark surface.

flat

--qx-elevation-flat—

inset

--qx-elevation-insetshadow-inset-subtle

raised

--qx-elevation-raisedshadow-rest

hover

--qx-elevation-hovershadow-hover

overlay

--qx-elevation-overlayshadow-popover

modal

--qx-elevation-modalshadow-modal

subtle

--qx-elevation-subtle—

low

--qx-elevation-low—

Tailwind's own shadow scale, shadow-2xs to shadow-xl, is remapped onto the same ladder, so a generic shadow-md in product code is a Qeetrix shadow too.