How to use the @theme-ui/presets.deep.colors function in @theme-ui/presets

const animationTransitions = ({isMobile, items}) =>
  useTransition(items, null, {
    from: {
      opacity: 0,
      height: 0,
      innerHeight: 0,
      transform: 'perspective(600px) rotateX(0deg)',
      color: deep.colors.background
    },
    enter: [
      {
        opacity: 1,
        height: isMobile ? 40 : 80,
        innerHeight: isMobile ? 40 : 80,
        lineHeight: isMobile ? 40 : 80,
        color: deep.colors.primary
      }
    ],
    // leave: [{color: '#282828a8'}, {innerHeight: 0}, {opacity: 0, height: 0}],
    update: [{color: deep.colors.secondary}]
  });

const animationTransitions = ({isMobile, items}) =>
  useTransition(items, null, {
    from: {
      opacity: 0,
      height: 0,
      innerHeight: 0,
      transform: 'perspective(600px) rotateX(0deg)',
      color: deep.colors.background
    },
    enter: [
      {
        opacity: 1,
        height: isMobile ? 40 : 80,
        innerHeight: isMobile ? 40 : 80,
        lineHeight: isMobile ? 40 : 80,
        color: deep.colors.primary
      }
    ],
    // leave: [{color: '#282828a8'}, {innerHeight: 0}, {opacity: 0, height: 0}],
    update: [{color: deep.colors.secondary}]
  });

const Reset = () =>
  React.createElement(Global, {
    styles: {
      body: {
        margin: '0',
        backgroundColor: deep.colors.background
      },
      a: {textDecoration: 'none', color: deep.colors.primary, fontWeight: 'bold', fontSize: 20}
    }
  });

const Reset = () =>
  React.createElement(Global, {
    styles: {
      body: {
        margin: '0',
        backgroundColor: deep.colors.background
      },
      a: {textDecoration: 'none', color: deep.colors.primary, fontWeight: 'bold', fontSize: 20}
    }
  });