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

textAlign: 'center'
  }),
  help: css({
    listStyleType: 'none',
    marginTop: 40,
    paddingLeft: 0,
    '> li': {
      paddingBottom: 10
    }
  }),
  minimalHelp: css({
    color: '#000000',
    margin: '10px 0 0 0'
  }),
  minimalHelpDarkMode: css({
    color: colors.negative.text
  }),
  description: css({
    marginBottom: 20
  })
}

const checkCode = ({ value = '', shouldValidate, t }) => {
  const payload = value.replace(/[^0-9]/g, '').slice(0, CODE_LENGTH)

  return {
    code: value.replace(/[^0-9\s]/g, ''), // Allow digits and spaces
    payload,
    error:
      (payload.length === 0 && t('Auth/CodeAuthorization/code/missing')) ||
      (payload.length < CODE_LENGTH &&
        t('Auth/CodeAuthorization/code/tooShort')),

onSearchClick,
  footer = true,
  pullable,
  dark
}) => (
  
    <div>
      {/* body growing only needed when rendering a footer */}
      <div>
        {dark &amp;&amp; (
          </div></div>

const { backButton, renderSecondaryNav } = this.state

    // If onPrimaryNavExpandedChange is defined, expanded state management is delegated
    // up to the higher-order component. Otherwise it's managed inside the component.
    const expanded = !!(onPrimaryNavExpandedChange
      ? primaryNavExpanded
      : this.state.expanded)
    const secondaryVisible = showSecondary && !expanded
    const dark = this.props.dark && !expanded

    const opaque = this.state.opaque || expanded
    const barStyle = opaque ? merge(styles.bar, styles.barOpaque) : styles.bar

    const bgStyle = opaque
      ? {
          backgroundColor: dark ? colors.negative.primaryBg : '#fff'
        }
      : undefined
    const hrColor = dark ? colors.negative.containerBg : colors.divider
    const hrColorStyle = {
      color: hrColor,
      backgroundColor: hrColor
    }
    const textFill = dark ? colors.negative.text : colors.text
    const logoFill = dark ? colors.logoDark || '#fff' : colors.logo || '#000'

    const toggleExpanded = () => {
      if (onPrimaryNavExpandedChange) {
        onPrimaryNavExpandedChange(!expanded)
      } else {
        this.setState({ expanded: !expanded })
      }

nav,
  cover,
  inNativeApp,
  inNativeIOSApp,
  onPrimaryNavExpandedChange,
  primaryNavExpanded,
  secondaryNav,
  showSecondary,
  formatColor,
  headerAudioPlayer,
  onSearchClick,
  footer = true,
  pullable,
  dark
}) => (
  
    <div>
      {/* body growing only needed when rendering a footer */}
      <div>
        {dark &amp;&amp; (
          </div></div>

import { css } from 'glamor'
import {
  fontStyles,
  mediaQueries,
  Editorial,
  colors
} from '@project-r/styleguide'

const styles = {
  p: css({
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    },
    color: colors.negative.text,
    margin: 0
  })
}

export const P = ({ children, ...props }) => (
  <p>
    {children}
  </p>
)

export const A = ({ children, ...props }) =&gt; (
  
    {children}
  
)

twitterImage
        twitterTitle
        prepublication
        lastPublishedAt
      }
    }
  }
`

const styles = {
  prepublicationNotice: css({
    backgroundColor: colors.social,
    padding: 15
  }),
  more: css({
    backgroundColor: colors.negative.containerBg,
    color: colors.negative.text,
    textAlign: 'center',
    padding: '20px 0'
  })
}

const Front = ({
  data,
  fetchMore,
  data: { front },
  t,
  renderBefore,
  renderAfter,
  containerStyle,
  extractId,
  serverContext,

}) => (
  <div>
    <div style="{">
      <h3 style="{{">
        {slug ? (
          
            <a style="{{">
              {name}
            </a>
          
        ) : (
          <span>{name}</span>
        )}{' '}
        <span>
          {credentials &amp;&amp; credentials[0] &amp;&amp; credentials[0].description}
        </span>
      </h3>
      {video ? (
        </div></div>

*   Wir müssen bis Ende März 19’000 Verlegerinnen an Bord haben. Das ist zwar nur ein wenig mehr als heute – aber das Ziel ist trotzdem alles andere als trivial: Wir müssen neue Verlegerinnen dazugewinnen, aber auch jene ersetzen, die uns in den nächsten Monaten verlassen.

*   Wir brauchen bis Ende März 2,2 Millionen Franken an Investoren­geldern, Spenden und Förder­beiträgen. Davon haben wir 535’000 Franken bereits erhalten.

Dafür brauchen wir Sie. An Bord. Und an Deck.

${(shouldBuyProlong || (!me || !me.activeMembership)) && (
  
    
      {shouldBuyProlong
        ? isReactivating
          ? 'Jetzt zurückkehren'
          : 'Jetzt verlängern'
        : 'Mitglied werden'}
    
  
)}

## Ohne Sie können wir nicht wachsen

Wir brauchen Reichweite. Die können wir uns jedoch weder kaufen (zu teuer) noch allein mit Journalismus erarbeiten.

Wir setzen also auf unsere wichtigste Ressource: Sie. Sie – und Ihr Adressbuch, Ihr Netzwerk, Ihre Begeisterung, Ihre Skepsis. 

Bis Ende März werden wir eine Kampagne machen müssen, in der Sie als Multiplikatoren, Botschafterinnen, Komplizen – nennen Sie es, wie Sie wollen – eine Hauptrolle spielen.

':hover': plainStyle
    },
    fontFamily: fontFamilies.sansSerifRegular,
    padding: 0,
    position: 'absolute',
    textAlign: 'left',
    top: 0,
    whiteSpace: 'nowrap',
    width: `calc(100vw - ${3 * HEADER_HEIGHT_MOBILE}px)`,
    [mediaQueries.mUp]: {
      width: `calc(100vw - ${3 * HEADER_HEIGHT}px)`
    }
  }),
  menu: css({
    backgroundColor: colors.negative.primaryBg,
    color: colors.negative.text,
    fontFamily: fontFamilies.sansSerifRegular,
    position: 'fixed',
    visibility: 'hidden',
    whiteSpace: 'normal',
    opacity: 0,
    overflow: 'auto',
    WebkitOverflowScrolling: 'touch',
    transition: 'opacity 0.2s ease-in-out, visibility 0s linear 0.2s',
    '&[aria-expanded=true]': {
      opacity: 1,
      visibility: 'visible',
      transition: 'opacity 0.2s ease-in-out'
    },
    display: 'flex',
    boxSizing: 'border-box',
    top: HEADER_HEIGHT_MOBILE,

/>
    )

    return (
      <div style="{{">
        <center>
          
            {lead} {body}
          
          {cta}
        </center>
      </div>
    )
  }
)