Apply an unelevated card style to stats cards

[renanferrari]

Fixes #11468

This PR creates a new unelevated card style and applies it to the stats cards.

Phone (Light)	Phone (Dark)

Tablet (Light)	Tablet (Dark)

To test

Open the stats screen on a tablet and make sure it looks like the provided mockup (in the linked issue). Test on both light and dark modes.

---

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APK here.

[iamthomasbishop]

@renanferrari @mattmiklic in dark theme, do you think the cards should be elevated to 1dp, similar to what’s shown in this example on the Material guidelines? Or are we assuming the cards are on surface level (0dp)?

[planarvoid]

Looks great! Good job 👍 Feel free to merge this PR once you address @iamthomasbishop question

[planarvoid]

good catch 👍

[osullivanchris]

@iamthomasbishop @mattmiklic this looks fine to me! But just curious if we go away from cards and elevation would we consider going away from boxes too? If I was designing this page from scratch with no page background colour, I would probably do it with horizontal lines dividing the blocks of content, but not specifically put borders around the boxes, if that makes sense? Its a little bit more work so it could be a later step to be considered.

Here's a quick hack

[renanferrari]

Or are we assuming the cards are on surface level (0dp)?

Hi @iamthomasbishop 👋 Yes, in this case we're assuming the cards are on surface level.

If I was designing this page from scratch with no page background colour, I would probably do it with horizontal lines dividing the blocks of content, but not specifically put borders around the boxes, if that makes sense? Its a little bit more work so it could be a later step to be considered.

Thank you for your input on this, @osullivanchris! From a development perspective, both options (with and without boxes) are quite simple to achieve, but having the same look on both phones and tablets is even simpler, which is the main reason I leaned towards the option presented here. @mattmiklic and @SylvesterWilmott also considered these options and they may have some thoughts to share about them, from a design perspective.

@planarvoid Thanks a lot for the review! 🙇‍♂️

[mattmiklic]

Or are we assuming the cards are on surface level (0dp)?

if we go away from cards and elevation would we consider going away from boxes too

What's seen above is consistent with the Material Design rules for outlined cards. This felt like the most appropriate treatment for this usage, where there are many cards together on the same screen. Outlined cards have 0 elevation. So this is still a standard card treatment, just one that has a little bit more subtle visual style than elevated cards.

Re: @osullivanchris's mockup; that works for single-column views and it's consistent with how we use cards in the Reader and the Blog Posts screen. But since Stats includes a two-column view (on tablets, or on a phone when in landscape) this feels like the better approach to me.

[iamthomasbishop]

What's seen above is consistent with the Material Design rules for outlined cards.

That makes sense, thanks @mattmiklic !

[osullivanchris]

Yep sounds good to me too!