👻 Shadows

theme.textShadows#

const theme = makeTheme({
  textShadows: {
    onImage: {
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 5,
      textShadowColor: '#00000099',
    },
  },
})

And in your component, you can reference that shadow with the textShadow field:

theme.shadows#

The theme.shadows is a bit different with Dripsy than theme-ui, since React Native doesn't share the web's shadow API.

const theme = makeTheme({
  shadows: {
    md: {
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
  },
})

In your component, you can use the boxShadow property (to reference shadow variants):

sx shadows#

As of v3, you also get textShadow* and shadow* properties in the sx prop: