Introduce notice class for notices that are on a white background

[paulwilde]

The notice that is used to notify a user that a theme update is available seems like a nice use for notices on white backgrounds.

This patch does the following:

• Introduce .notice-alt which adds a light background to the notice and makes the notice work better on a white background. This works with all 4 notice colours (success, warning, error, info). I've attached a screenshot which shows all different variations.
• Introduce .notice-large which adds padding to the notice.
• Introduce .notice-title which styles the title used on the theme notice so that it aligns nicely.
• Removes all the .theme-update-message CSS that styles the notice on the theme modal popup. We're opting for reusable OOP CSS here.
• Moves .error a and .updated a into the same section as the Notifications styles to keep things organised.
• Added .notice-alt to the plugin modal notices as they are on a white background.

Here's a screenshot of the plugin modal with the before and after notice:

Here's a screenshot of the theme modal with the before and after notice (I opted for orange as it's more of a warning than an error):

And lastly here's a screenshot of all possible sizes and variations of the new class:

[hugobaeta]

@paulwilde - This would be a great opportunity to introduce the new auxiliary hues from the Design Handbook - ​https://make.wordpress.org/design/handbook/foundations/colors/#auxiliary-hues

I added 90% tints to each hue on my codepen so you have the correct tint for this: ​http://codepen.io/hugobaeta/full/RNOzoV/

Let me know if this makes sense and if you need more assistance :)

[paulwilde]

Makes sense, hugobaeta.

I changed the border-left and background colours to match the codepen you linked. See my attached screenshot for the changes in colours. They seem a little too muddy, but maybe that's just me. Maybe 95% would be better?

I also updated the border-left colour for the notification on the login screen and removed some duplicated and unnecessary styling whilst I was at it. I see no reason why margin-left: 0 is there, but I left it there just to be sure not to break anything.

[paulwilde]

For a bit of real-world context, here's what they now look like inside the plugin modal:

[melchoyce]

Are the rounded corners on the borders here intentional? They don't really fit with the overall design, especially on the left border.

One other suggestion: what if the remaining borders were slightly tinted instead of grey? The grey kind of clashes against the colored backgrounds.

[paulwilde]

Replying to melchoyce:

Are the rounded corners on the borders here intentional? They don't really fit with the overall design, especially on the left border.

I basically copied the same style that was used on the theme update notification. I figured that the notification on that screen was rounded for a specific reason, so kept it like that.

I've attached a patch that removes the border-radius and removes the border. I tried with a tinted border and it did not look good. I don't think the border is really necessary with the background colour now being darker than the original patch.

[hugobaeta]

Replying to paulwilde:

They seem a little too muddy, but maybe that's just me. Maybe 95% would be better?

I agree, there are two colors that look particularly muddy: the red and green. Let me go over that codepen and tweak it a bit, and add even lighter tints for the rest. I'll ping you here when I'm done.

What @melchoyce said is what I was gonna mention as well, particularly the gray border felt out of place. Either use another tint or nothing at all.

[paulwilde]

@hugobaeta Any progress on those new colours?

[paulwilde]

Any chance of this making 4.4?

[hugobaeta]

Here's a review of the colors: (​experiment on this codepen)

The most visible change is the green, I completely redid the green in the palettes, the one there before was way too muddy in comparison to the other accent hues.

What do you think?

[melchoyce]

The update looks great on white!

[samuelsidler]

@paulwilde: Want to work on an updated patch (with the new colors)? I think this has a very good chance of making 4.4. :)

[paulwilde]

@sam - Yep, I'll get an updated patch up asap.

New colours look great btw.

[paulwilde]

Attached a refreshed patch including the colours from @hugobaeta's codepen.

I've also attached some screenshots that include the before/after notices for the plugin and theme modal.

The theme modal notice goes from an error colour to a warning colour. An update notice is a warning, not an error.

[samuelsidler]

This looks good to me.

@melchoyce: Everything good on the design front?

@helen: This ready for commit?

[helen]

I'm good with this, if we find more buried instances we've overlooked we can grab those as they come. Looks really good, awesome work everybody :)

[helen]

In 34365:

Notices: Add styles for use against white backgrounds.

These colored backgrounds can be accessed by adding the .notice-alt class to a notice.

There is also now a large version when using the .notice-large class, and a .notice-title class that is appropriate for headline text within a large notice.

props paulwilde, hugobaeta, melchoyce.
fixes #32244.

[paulwilde]

Found another instance of white-notice-on-white-background syndrome. Patch attached.

I've added some specificity due to not wanting to adjust the styling of the notice in the sidebar (media-modal-alt).

Also I believe I'm correct in saying that I cannot change the markup (and JS...) to inherit the notice-* markup due to this also being UI that can be exposed on the front-end.

[helen]

Replying to paulwilde:

Also I believe I'm correct in saying that I cannot change the markup (and JS...) to inherit the notice-* markup due to this also being UI that can be exposed on the front-end.

Yep :)

[helen]

In 34990:

Notices: Update one more instance of white-on-white.

Because the media modal can be used on the front-end, the CSS needs to be added here rather than using the notice classes.

props paulwilde.
fixes #32244.