<Theme colorMode="light"> <View backgroundColor="neutral-faded" padding={8} borderRadius="large" width="300px"> <Card elevated> <View gap={2} direction="row" align="center"> <Avatar initials="R" color="primary" /> <View.Item grow> <Text variant="body-3" weight="bold">Reshaped</Text> <Text color="neutral-faded">10,873 followers</Text> </View.Item> </View> </Card> </View> </Theme>
Reshaped supports two shadow tokens that demonstrate the level of elevation of the component.
--rs-shadow-raised --rs-shadow-overlay /* Usage */ .element { box-shadow: var(--rs-shadow-raised); }
Raised shadow is used to elevate the elements that initially don't have any elevation, for example, in elevated Card. Overlay shadow is used for elements that are displayed on top of other elements, like in DropdownMenu.
Shadows are usually used with background-elevation-raised and background-elevation-overlay color tokens. Since shadows are less prominent in dark mode, these color tokens will adjust the element's background color to communicate the elevation to the user.
<View direction="row" gap={4}> <Theme colorMode="light"> <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}> <div style={{ backgroundColor: "var(--rs-color-background-elevation-raised)", border: "1px solid var(--rs-color-border-neutral-faded)", borderRadius: "var(--rs-unit-radius-medium)", width: 80, height: 80, boxShadow: "var(--rs-shadow-raised)", }} /> <div style={{ backgroundColor: "var(--rs-color-background-elevation-overlay)", border: "1px solid var(--rs-color-border-neutral-faded)", borderRadius: "var(--rs-unit-radius-medium)", width: 80, height: 80, boxShadow: "var(--rs-shadow-overlay)", }} /> </View> </Theme> <Theme colorMode="dark"> <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}> <div style={{ backgroundColor: "var(--rs-color-background-elevation-raised)", border: "1px solid var(--rs-color-border-neutral-faded)", borderRadius: "var(--rs-unit-radius-medium)", width: 80, height: 80, boxShadow: "var(--rs-shadow-raised)", }} /> <div style={{ backgroundColor: "var(--rs-color-background-elevation-overlay)", border: "1px solid var(--rs-color-border-neutral-faded)", borderRadius: "var(--rs-unit-radius-medium)", width: 80, height: 80, boxShadow: "var(--rs-shadow-overlay)", }} /> </View> </Theme> </View>