RM3 / Branding refresh / Tags / Inverse dark background

[orion-cengage]

Purpose: Update the styling of the tags for the new branding.

inVision: https://cengage.invisionapp.com/share/HD12CG83X8RN

Prerequisites:

• Color palette in place
• Work Sans available

AC

• If still necessary, change font on tags from Open Sans to Work Sans

1.0 Default

• Container update
  -- Background = neutral-500
• Icon / Text label
  -- Color = neutral-100
• Dismiss button
  -- Color = neutral-100, opacity 0.75

2.0 High Contrast

• Container update
  -- Background = neutral-100
• Icon / Text label
  -- Color = neutral-700
• Dismiss button
  -- Color = neutral-700, opacity 0.75

3.0 Low Contrast

• Container update
  -- Background = transparent
  -- Border = 1px solid neutral-100, opacity 0.50
• Icon / Text label
  -- Color = tertiary-500
• Dismiss button
  -- Color = tertiary-500, opacity 0.75

4.0 Primary Color

• Container update
  -- Background = tertiary-500
• Icon / Text label
  -- Color = primary-600
• Dismiss button
  -- Color = primary-600, opacity 0.75

5.0 Disabled for solid tags (default, high contrast, primary)

• Container
  -- Background = neutral-100, opacity 0.30
• Icon / Text label
  -- Color = neutral-100, opacity 0.40
• Dismiss button
  -- Color = neutral-100, opacity 0.40

6.0 Disabled for outlined tag (low contrast)

• Container
  -- Background = transparent
  -- Border = 1px solid neutral-100, opacity 0.20
• Icon / Text label
  -- Color = neutral-100, opacity 0.30
• Dismiss button
  -- Color = neutral-100, opacity 0.30