<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 component elevation.
--rs-shadow-raised --rs-shadow-overlay /* Usage */ .element { box-shadow: var(--rs-shadow-raised); }
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 adjust the element's background color to communicate 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-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-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-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-radius-medium)", width: 80, height: 80, boxShadow: "var(--rs-shadow-overlay)", }} /> </View> </Theme> </View>