ElevationShadow tokens for visual elevation and inset state rings.
OverviewElevation tokens create depth through box-shadow. Three levels (low, med, high) establish a visual hierarchy for floating elements. Inset shadows provide focus and selection rings for interactive components.
Elevation ScaleEach level adds stronger offset and spread. Shadow color adapts to dark mode automatically via light-dark().
TokenPreview
--shadow-low
--shadow-med
--shadow-high
--shadow-inset-hover
--shadow-inset-selected
--shadow-inset-success
--shadow-inset-warning
--shadow-inset-error
Usage
Applying elevation
tsx
import {shadowVars} from '@xds/core';
​
const styles = stylex.create({
  dropdown: {
    boxShadow: shadowVars['--shadow-med'],
  },
  dialog: {
    boxShadow: shadowVars['--shadow-high'],
  },
  inputFocused: {
    boxShadow: shadowVars['--shadow-inset-selected'],
  },
});
Best Practices
GuidancePractices
DoMatch elevation to interaction context: low for tooltips, med for dropdowns, high for dialogs.
DoUse inset shadows for input focus/selection states — they compose better than outlines.
Don'tStack multiple elevation levels on the same element.
Don'tUse elevation shadows for decorative borders — use --color-border tokens instead.