How to use the @project-r/styleguide.colors.error function in @project-r/styleguide

<div>
                    <p>
                      {userHasSubmitted
                        ? t.elements('questionnaire/thankyou', {
                            metaLink: (
                              
                                <a>{t('questionnaire/thankyou/metaText')}</a>
                              
                            )
                          })
                        : t('questionnaire/ended')}
                    </p>
                  </div>
                  {showResults &amp;&amp; (
                    &lt;&gt;
                      <p style="{{">
                        Diese Resultate werden{' '}
                        nur intern{' '}
                        angezeigt.
                      </p>
                      
                    
                  )}
                
              )
            }

            // handle questions
            const questionCount = questions.filter(Boolean).length
            const userAnswerCount = questions
              .map(q =&gt; q.userAnswer)
              .filter(Boolean).length

invalid={info => (
              <span style="{{">{value}</span>
            )}
          /&gt;

<div>
        
        <br>
        {t('profile/edit/updating')}
      </div>
    )
  }

  const errorMessages = Object.keys(state.errors)
    .map(key =&gt; state.errors[key])
    .filter(Boolean)

  return (
    <div>
      {!!state.showErrors &amp;&amp; errorMessages.length &gt; 0 &amp;&amp; (
        <div style="{{">
          {t('profile/edit/errors')}
          <br>
          <ul>
            {errorMessages.map((error, i) =&gt; (
              <li>{error}</li>
            ))}
          </ul>
        </div>
      )}
      {!!state.error &amp;&amp; (
        <div style="{{">
          {state.error}
        </div>
      )}
      </div>

{FRONTEND_BASE_URL.replace(/https?:\/\/(www\.)?/, '')}
                  {schema.getPath
                    ? schema.getPath({
                        ...meta,
                        publishDate: designatedPublishDate
                      })
                    : `/${meta.slug}`}
                

                <br>
                <br>

                {hasErrors &amp;&amp; (
                  <span>
                    
                      {t('publish/validation/hasErrors')}
                    
                    <ul style="{{">
                      {errors.map((error, i) =&gt; (
                        <li>
                          
                            {error}
                          
                        </li>
                      ))}
                    </ul>
                    <br>
                    <br>
                  </span>
                )}
                {warnings.length &gt; 0 &amp;&amp; (

/>

                <br>
                <br>
                <br>
                {updating ? (
                  <div style="{{">
                    
                    <br>
                    {t('Account/Update/updating')}
                  </div>
                ) : (
                  <div>
                    {!!this.state.showErrors &amp;&amp;
                    errorMessages.length &gt; 0 &amp;&amp; (
                      <div style="{{">
                        {t('Account/submit/error/title')}
                        <br>
                        <ul>
                          {errorMessages.map((error, i) =&gt; (
                            <li>{error}</li>
                          ))}
                        </ul>
                      </div>
                    )}
                    {!!this.state.error &amp;&amp; (
                      <div style="{{">
                        {this.state.error}
                      </div>
                    )}
                    <div style="{{">
                      </div></div>

zIndex: 10,
    position: 'sticky',
    padding: '10px 0',
    borderBottom: `0.5px solid ${colors.divider}`,
    display: 'flex',
    minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,
    background: colors.primaryBg,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
    textAlign: 'center',
    marginBottom: 30
  }),
  progressIcon: css({
    marginLeft: 5,
    marginTop: 3,
    minHeight: 30

{
                  this.setState(FieldSet.utils.mergeFields(fields))
                }}
              />
            
            {error && (
              <div>
                
              </div>
            )}
            {!isValid &amp;&amp; (
              <div style="{{">
                {vt('info/candidacy/missingFields')}
                <ul>
                  {Object.keys(errors).map(
                    k =&gt; !!errors[k] &amp;&amp; <li>{errors[k]}</li>
                  )}
                </ul>
              </div>
            )}
            <div>
              <button disabled="{!isValid}">
                {updating ? (
                  
                ) : (
                  t('Account/Update/submit')
                )}
              </button></div>

value={values.email}
          onChange={(_, value, shouldValidate) => {
            this.handleEmail(value, shouldValidate, t)
          }} />
        <br>
         {
            this.handleVoucherCode(value, shouldValidate, t)
          }} /&gt;
        <br>
        <br>
        {!!this.state.showErrors &amp;&amp; errorMessages.length &gt; 0 &amp;&amp; (
          <div style="{{color:">
            {t('memberships/claim/error/title')}<br>
            <ul>
              {errorMessages.map((error, i) =&gt; (
                <li>{error}</li>
              ))}
            </ul>
          </div>
        )}
         {
            this.setState(() =&gt; ({legal: checked}))
          }}&gt;

onChange={(fields) => {
                  this.setState(FieldSet.utils.mergeFields(fields))
                }} />
              <br>
              <br>
              <br>
              {updating ? (
                <div style="{{textAlign:">
                  
                  <br>
                  {t('merci/updateMe/updating')}
                </div>
              ) : (
                <div>
                  {!!this.state.showErrors &amp;&amp; errorMessages.length &gt; 0 &amp;&amp; (
                    <div style="{{color:">
                      {t('pledge/submit/error/title')}<br>
                      <ul>
                        {errorMessages.map((error, i) =&gt; (
                          <li>{error}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                  {!!this.state.error &amp;&amp; (
                    <div style="{{color:">
                      {this.state.error}
                    </div>
                  )}
                  <div style="{{opacity:">
                    <button> {
                      if (errorMessages.length) {</button></div></div>

const showSignIn = this.state.showSignIn && !me

        const pkg = query.package
          ? crowdfunding.packages.find(
              pkg => pkg.name === query.package.toUpperCase()
            )
          : null
        const userPrice = !!query.userPrice

        return (
          <div>
            <h1>{t('pledge/title')}</h1>

            {!!receiveError &amp;&amp; (
              <p style="{{color:">
                
              </p>
            )}

            <div style="{{marginBottom:">
              {pkg ? (
                 {</div></div>