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().
TokenValue
--shadow-low
0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))
--shadow-med
0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))
--shadow-high
0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3))
--shadow-inset-hover
inset 0px 0px 0px 2px rgba(1, 113, 227, 0.3)
--shadow-inset-selected
inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)
--shadow-inset-success
inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)
--shadow-inset-warning
inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)
--shadow-inset-error
inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)
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.