In addition to the "informational" message bar imlemented in Bug 1838222 we need to add support for "warning", "success," and "critical" variants. This task will involve updating the message bar icon and colors based on the variant. We will also need to make sure each variant is documented in Storybook and tested.

There will likely be work here to ensure we're using design tokens as needed - in order for this work to be considered complete we need to remove all references to --in-content-* CSS variables and the link to in-content/common-shared.css from moz-message-bar.css.

There are also some style changes being made to the existing message bar in Bug 1840687. When working on the styles here we should see if we need to pull in those changes.

The different types/variants of the message bar are documented in Figma here: https://www.figma.com/file/zd3B9UyknB2XNZNdrYLm2W/Outreachy?type=design&node-id=59-1921&mode=design&t=ZYS4e6pAbAlXGvun-4

This bug will involve making a number of changes to our different design tokens related CSS files. The different base level tokens should be added to design-tokens-shared.css. Application level tokens should also be defined there, and given specific values in design-tokens-brand.css and design-tokens-system.css. Component level tokens that reference application level tokens can be defined in moz-message-bar.css.

As part of the work here we'll also want to check the spacing, border, etc. values against the Figma designs to ensure everything matches.

Depends on D182912

Depends on D183780

Backed out for bc failures on browser_parsable_css.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/b648e162a48c2fee407bab69ee1d9112f5836272
Log link: https://treeherder.mozilla.org/logviewer?job_id=424686154&repo=autoland&lineNumber=4495

https://hg.mozilla.org/mozilla-central/rev/2db5e6bf35ee
https://hg.mozilla.org/mozilla-central/rev/b603b7c634de
https://hg.mozilla.org/mozilla-central/rev/0bc4fd9d278a
https://hg.mozilla.org/mozilla-central/rev/c15d430012a2