Elevation

Shadow tokens for visual elevation and inset state rings.

Overview

Copy link

Elevation 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 Scale

Copy link

Each level adds stronger offset and spread. Shadow color adapts to dark mode automatically via light-dark().

Token	Preview
--shadow-low
--shadow-med
--shadow-high
--shadow-inset-hover
--shadow-inset-selected
--shadow-inset-success
--shadow-inset-warning
--shadow-inset-error

Usage

Copy link

Applying elevation

tsx
import {shadowVars} from '@astryxdesign/core';
const styles = stylex.create({
  dropdown: {
    boxShadow: shadowVars['--shadow-med'],
  },
  dialog: {
    boxShadow: shadowVars['--shadow-high'],
  },
  inputFocused: {
    boxShadow: shadowVars['--shadow-inset-selected'],
  },
});

Best Practices

Copy link

Guidance	Practices
Do	Match elevation to interaction context: low for tooltips, med for dropdowns, high for dialogs.
Do	Use inset shadows for input focus/selection states; they compose better than outlines.
Don't	Stack multiple elevation levels on the same element.
Don't	Use elevation shadows for decorative borders. Use --color-border tokens instead.