CSS-in-JS with Emotion.js

Alert variations

Information alert heading!

This is an information message.

Error alert heading!

This is an error message.

Warning alert heading!

This is a warning message.

Success alert heading!

This is a success message.

Design token JSON object

{
  "color": {
    "background": {
      "info": "#3232FF",
      "error": "#DE2B2B",
      "warning": "#F2E800",
      "success": "#82B90D"
    },
    "text": {
      "info": "#FFFFFF",
      "error": "#FFFFFF",
      "warning": "#000000",
      "success": "#FFFFFF"
    }
  },
  "icon": {
    "info": "ⓘ",
    "error": "☠️",
    "warning": "⚠",
    "success": "🎉"
  }
}

Emotion styles


  // base
  css={css({
    background: tokens.alert.color.background[type],
    borderRadius: 3,
    boxShadow: "0 0px 8px #251f1f",
    color: tokens.alert.color.text[type],
    fontFamily: "'Roboto', sans-serif",
    maxWidth: 500,
    padding: 16,
    textAlign: 'left',
  })}
  // icon
  css={css({
    display: 'inline-block',
    fontSize: 56,
    height: 56,
    lineHeight: 1,
    width: 56,
    '::before': {
      display: 'block',
      content: 'tokens.alert.icon[type]',
    }
  })}

JSX


  <Alert
    heading="Warning alert heading!"
    message="This is a warning message."
    type="warning"
  />

Markup with Emotion.js class names


  <div role="alert" class="css-1itqnal-Alert">
    <div class="css-tyhk5z-Alert">
      <div class="css-fgpnb8-Alert">
        <span class="css-89yjzw-Alert"></span>
      </div>
      <div>
        <div class="css-2gy4mc-Alert">
          Warning alert heading!
        </div>
        <div class="css-1sm67l8-Alert">
          This is a warning message.
        </div>
      </div>
    </div>
  </div>