How to use the @theme-ui/color.alpha function in @theme-ui/color

code: {
      fontFamily: 'monospace',
      fontSize: 'inherit'
    },
    table: {
      width: '100%',
      overflow: 'auto',
      borderCollapse: 'collapse',
      borderSpacing: 0
    },
    tr: {
      borderTop: '1px solid gray'
    },
    th: {
      border: '1px solid',
      borderColor: alpha('text', 0.25),
      p: '0.25em 0.5em'
    },
    td: {
      border: '1px solid',
      borderColor: alpha('text', 0.25),
      p: '0.25em 0.5em'
    }
  },
  layout: {
    global: {
      html: {
        boxSizing: 'border-box',
        fontSize: 0
      },
      [['*', '*:after', '*:before']]: {
        boxSizing: 'inherit'

width: '2.5rem',
    background: 'transparent',
    color: 'inherit',
    border: 0,
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  Title: {
    variant: 'linkStyles.nav',
    display: 'block',
    pr: '2.5rem',
    ':hover': {
      variant: 'linkStyles.nav.:hover',
      bg: alpha('primary', 0.05)
    }
  }
}

function ToggleableItemTitle({ id, item, isActive, isExpanded, toggleItem }) {
  return item.link ? (
    <span>
      
        {item.title}
      

      </span>

{open ? 'Close' : 'Open'} Sidebar
      

      {open && (
        
          <div role="presentation">
        
      )}
    
  )
}
</div>