RM3 / Branding refresh / Alerts / Light background

[orion-cengage]

Purpose: Updated alerts for new branding refresh. This includes colors, typography, and border-radius.

inVision (2 screens): https://cengage.invisionapp.com/share/V812AZZSKSUH

Prerequisites:

• Color palette in place
• Work Sans available

AC

• Common attributes
  -- font = Work Sans
  -- border-radius = 8px

• Info alert
  -- Background = info 100
  -- Border = info 500
  -- Text/icon = info 500
  --

• Danger alert
  -- Background = danger 100
  -- Border = danger 500
  -- Text/icon = danger 500
  --

• Warning alert
  -- Background = warning 100
  -- Border = warning 500
  -- Text/icon = warning 500
  --

• Success alert
  -- Background = success 100
  -- Border = success 500
  -- Text/icon = success 500
  --

• Bring back icon on small alerts.
  -- Currently we hide the icon when the viewport is 600px and below. We're not going to do that anymore.
  -- Icon will change from 24px on regular size alert to 20px on small alert.
  -- Space to the left of the icon is 8px, and the space between the icon and the text is also 8px.
  --

• Banner alert specifics
  -- The border on the banner alert is only on the bottom
  --

• Toast alert specifics
  -- The box shadow needs to made a little stronger than before.
  --- box-shadow: 0 2px 8px 0 rgba(0,0,0,0.4);
  ---