How to use the @artsy/reaction/dist/Assets/Colors.purpleRegular function in @artsy/reaction

className="ProgressBar__bar"
        color={color}
        progress={progress}
      />
    
  )
}

ProgressBar.propTypes = {
  color: PropTypes.string,
  cover: PropTypes.bool,
  progress: PropTypes.number,
}

ProgressBar.defaultProps = {
  color: colors.purpleRegular,
}

export const ProgressContainer = styled.div`
  width: 100%;
  background-color: white;
  ${props =>
    props.cover &&
    `
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;

  color: ${props => props.color ? props.color : colors.purpleRegular};
  cursor: pointer;

className='ProgressBar__bar'
        color={color}
        progress={progress}
      />
    
  )
}

ProgressBar.propTypes = {
  color: PropTypes.string,
  cover: PropTypes.bool,
  progress: PropTypes.number
}

ProgressBar.defaultProps = {
  color: colors.purpleRegular
}

const ProgressContainer = styled.div`
  width: 100%;
  background-color: white;
  ${(props) => props.cover && `
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 3;
    background: rgba(255,255,255,.75);