relief

namespace · packages/mixins/src/theme/tokens.ts:346

const relief = { soft, hard, bevel }

How controls stand off the page, as token sets over tokens: a button's resting shadow (raised), the one it takes held or on (pressed), and a field's well (field). The shipped scales are flat. soft lifts buttons a hair and sinks fields a hair; hard drops solid offset copies, as hardShadows does for surfaces; bevel draws lit and shaded edges, the raised and sunken chrome of a 1990s desktop. shadow-strength fades each.

Members

soft: Readonly<{ shadow: { raised: string; pressed: string; field: string } }>

hard: Readonly<{ shadow: { raised: string; pressed: string; field: string } }>

bevel: Readonly<{ shadow: { raised: string; pressed: string; field: string } }>