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.

Claro already has designs for the blue color, so you can you them for the implementation if you want: https://www.figma.com/design/OqWgzAluHtsOd5uwm1lubFeH/%F0%9F%92%A7-Drupa...

The blue one is targeted to "Status" messages, where the system is informing of something beyond the warning/error/"succeed" type of message. That's why the icon is an "i": it's giving information. Using a bell for it seems more as a "notification" that you have to read, tied to other UI patterns we don't use here.

On the other side, why do you want a gray message? What is its purpose? Which kind of information will it try to communicate? If it's just a communication, why can't it be blue? As a Claro maintainer, I'd love to see this backed with a need instead of opening the floor to any kind of color for messages.

Also, to approve any UI work it would be good to see the messages working with the while interface, not a small piece of it.

Thanks!

Hi Chrina,

Thats interesting that you already have designs for the blue colour notifications

The additional colour suggestions were completely arbitrary.

In this example we have the following:

MESSAGE_WARNING => warning -amber
MESSAGE_ERROR => error - red

MESSAGE_INFORMATIONAL => ?
MESSAGE_NOTICE => ?

So I decided to come up with the following:

.color-notice {
  color: var(--messages--notice-color);
  background-color: var(--messages--notice-color-bg);
}
.color-info {
  color: var(--messages--info-color);
  background-color: var(--messages--info-color-bg);
}

which map to:

--messages--notice-color: #1a59b7;
--messages--notice-color-bg: #edf8fd;
--messages--info-color: #5aba26;
--messages--info-color-bg: #ebfeee;

From what I can seem, the actual implementation uses green as the status message, not blue.