How to use the @codesandbox/common/lib/theme.secondary function in @codesandbox/common

render() {
    // TODO: Put the Monaco editor back here. It was removed because I wasn't able to use the Monaco editor separately yet
    // without interfering with VSCode instance. The solution will be to create a separate build for Monaco and
    // load that one, but the question is whether we can make it use different paths (vs/ -> monaco/) so it doesn't
    // collide with VSCode
    return (
      
        
          
        
        
          
            <div>
          
        
      
    );
  }
}</div>

<span style="{{" id="progress-text">
                    Deploying...
                  </span>
                  <span id="deploy-text" style="{{">
                    https://csb-921ywn9qrw-emlplxhibt.now.sh/
                  </span>
                  <progress id="progress">
                </progress>
              
            
          
        
      
    );
  }
}

border-color: ${props => {
    if (props.type === 'error') return theme.red.darken(0.2)();
    if (props.type === 'warning') return theme.primary.darken(0.2);
    if (props.type === 'success') return theme.green();
    return theme.secondary();
  }};

if (process.env.NODE_ENV === 'production') {
            routeDebugger(
              `Sending '${location.pathname + location.search}' to analytics.`
            );
            if (!DNT) {
              trackPageview();
            }
          }
          return null;
        }}
      />
      
      
        <content>
          </content>

render() {
    const { docs } = this.props;

    const activeStyle = {
      color: theme.secondary(),
      fontWeight: 700,
    };

    return (
      
        <ul>
          {docs.map(({ node }) =&gt; (
            
              </ul>

<div style="{{">
          
          <title>{config.title}</title>
        </div>
        <button tabindex="{-1}" style="{{" type="button"> this.props.openText()}
        &gt;
          Open file in editor
        </button>
        
          {config.description}{' '}

y: 40,
          ease: Power2.easeOut,
        },
        '-=0.6'
      )
      .to(
        '#addition-cube',
        0.2,
        {
          y: -40,
        },
        '-=0.2'
      )
      .to('.main-cube-side', 0.7, {
        backgroundColor: Theme.secondary.clearer(0.2)(),
        boxShadow: `0px 0px 150px ${Theme.secondary()}`,
        ease: Power2.easeInOut,
      })
      .to(
        '#deploy-container',
        0.6,
        {
          width: '100%',
          ease: Power2.easeInOut,
        },
        'step3'
      )
      .to(this.cube, 1.2, {
        y: this.verticalSteps[3] - cubeY + 40,
        scale: 0.5,
        ease: Power2.easeInOut,
      })

render() {
    return (
      
        
          
        
        
          
        
      
    );
  }

return connectDropTarget(
      connectDragSource(
        <div>
          
            
              
                {toToggle ? (
                   0 ? 1 : 0 }}</div>

action: () => {
          this.setState({ creatingDirectory: true, open: true });
          return true;
        },
      });
    }

    return connectDropTarget(
      connectDragSource(
        <div>
          
            </div>