How to use the color.primary function in color

.attr('transform', `translate(-30,${d3.mean(state.y.range())})
          rotate(-90)`)
        .text(this.props.yAxisLabel)
        .style('font-size', 14)
        .attr('text-anchor', 'middle')
    
    stage.append('g').attr('class', 'x-ticks')
      .call(updateTicks, 'x', state.x, state.y, state.x.ticks())
    stage.append('g').attr('class', 'y-ticks')
      .call(updateTicks, 'y', state.x, state.y, state.y.ticks())
      

    // Add trend line.
    if (this.props.showRegressionLine)
      stage.append('line').attr('class', 'line-ols')
        .style('stroke', color.primary)

    // Add error lines.
    if (this.props.showErrorLines)
      stage.append('g').attr('class', 'error-lines')
        .selectAll('line').data(this.state.errors)
        .enter().append('line')
          .style('stroke', this.props.colorAccessor)
          .style('stroke-width', 2)
          .style('stroke-dasharray', '2, 2')

    // Add error squares.
    if (this.props.showErrorSquares)
      stage.append('g').attr('class', 'error-squares')
        .selectAll('rect').data(this.state.errors).enter().append('rect')
        .style('pointer-events', 'none')
        .style('fill', (d, i) => {

render() {
    return <svg height="{310}" width="{310}">
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
      </g>
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
      </g>
      <g transform="translate(160, 160)">
        <text fill="{color.primary}" transform="translate(-20, -60)">
          Beta 1 - The y-intercept of the regression line.
        </text>
        <text fill="{color.secondary}" transform="translate(-20, 60)">
          Beta 2 - The slope of the regression line.
        </text>
        <text transform="{`translate(${0},">
          <tspan>{d3.format('.2f')(this.props.betas[0])}</tspan>
          <tspan> + </tspan></text></g></svg>

betas={[betas[0], betas[2]]}
          mode='point'
          xAxisLabel='x2'
          yAxisLabel=''
          showErrorSquares={false}
          showErrorLines={false}
          showRegressionLine={true}
          points={this.state.points}
          locationAccessor={this._locationAccessorX2Y}
          onDragNob={this._onDragPointX2Y}
          style={{float: 'left'}} />
        
        <div style="{{clear:'both'}}">
      
      <section style="{{padding:">
        <p>
          By playing with the dots, you can see that, when there are multiple variables involved, the true relationships can be very counterintuitive. That's why we have statistics: to make us unsure about things.
        </p>
        <p>
          Below, see if you can choose the betas to minimize the sum of squared errors.
        </p>
        <p>
          There are many other prediction techniques much more complicated than OLS, like logistic regression, weighted least-squares regression, robust regression and the growing family of non-parametric methods. 
        </p></section></div>

render() {
    return <svg height="{310}" width="{310}">
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
      </g>
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
      </g>
      <g transform="translate(160, 160)">
        <text fill="{color.primary}" transform="translate(-20, -60)">
          Beta 1 - The y-intercept of the regression line.
        </text>
        </g></svg>

render() {
    return <svg height="{310}" width="{310}">
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
      </g>
      <g>
        <circle style="{{fill:" r="{25}"></circle>
        <line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
      </g>
      <g transform="translate(160, 160)">
        <text fill="{color.primary}" transform="translate(-20, -60)">
          Beta 1 - The y-intercept of the regression line.
        </text>
        </g></svg>

getDefaultProps() {
    return {
      width: 500,
      height: 400,
      errorSquareColor: color.primary,
      regressionPlaneColor: color.secondary,
      pointSize: 0.015,
      valueAccessor: d => d.value,
      colorAccessor: d => d.color,
      locationAccessor: d => d.point,
      onDragPoint: () => undefined,
      regressionNob: null,
      showPointNobs: true,
      betas: null,
    }
  },
  getInitialState() {

render() {
    var {width, height} = this.props
    return <svg>
      <g style="{{cursor:" transform="{`translate(${this.state.point})`}">
        <circle fill="rgba(0, 0, 0, 0.1)" r="{20}"></circle>
        <circle fill="{color.primary}" r="{4}"></circle>
      </g>
    </svg>
  }
})