Add support for additional coloured notices

Attached current colour pallete

Current message styles in web/core/themes/claro/css/components/messages.pcss.css

we also have respective foreground colours in web/core/themes/claro/css/theme/colors.pcss.css:

.color-success {
  color: #325e1c;
  background-color: #f3faef;
}
.color-warning {
  color: #734c00;
  background-color: #fdf8ed;
}
.color-error {
  color: #a51b00;
  background-color: #fcf4f2;
}

screenshot of respective text styles, success, warning, error

We can see each notice currently has an svg icon that work with a header e.g.

<div class="messages messages--status">
  <div class="messages__header">
    <h2 id="x" class="messages__title">
      A simple "status" alert—check it out!
    </h2>
  </div>
  <p>A simple "status" alert—check it out!</p>
</div>

added new icons and colours - screenshot

Adding new patch with new text colours and icons, wile also updating notices

updated styles for notifications including use of messages__content

This would need approval from the Claro maintainers, so tagging. (It would also need to be a merge request rather than a patch, but best to wait to make sure the subsystem maintainers are on board first.) Thanks!

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

Mithun S → made their first commit to this issue’s fork.

Created a MR for the issue out of the patch. Please review.