[Paper] Support outlined Card / Paper

The Material spec states that cards on the desktop have 0dp elevation, and should be outlined instead of being delimited using their shadow. I think this variant should be supported.

This has been mentioned in an unrelated issue, but seems to not have been brought back up.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

There should be a way to get an outlined Card or Paper with 0dp elevation. This could either take the form of <Card variant="outlined"> (issues - should this automatically set elevation to 0? Should it work with elevation not 0?) or by automatically adopting the style when <Card elevation={0}> is used (issues - does this mean you cannot have a no-outline no-shadow Card?)

I’m not sure whether determining in some global fashion whether we are on “desktop” or not is feasible and whether it should change the default elevation of the card - my instinct is that it should not.

Current Behavior 😯

Currently a Card or Paper with no elevation is flat with no outline or shadow and there is no outlined variant.

Examples 🌈

Material spec states under the “Resting elevation and environment” heading that

The resting elevations on mobile are designed to provide visual cues, like shadows, to indicate when components are interactive. In contrast, resting elevations on desktop are shallower because other cues, like hover states, communicate when a component is interactive. For example, cards at 0dp elevation on desktop are outlined with a stroke.

and the second image in that section illustrates this.

The styles implemented in material-components-web could be an inspiration for this, but it basically boils down to applying a border correctly and making sure this does not impact spacing (e.g. in the Material docs example, the outline seamlessly merges into the media block at the top of the card).

Context 🔦

I am writing a desktop-only web app using a dense Material design and when there are lots of components on the screen, a flat outlined style is easier to look at and use.

[netochaves]

Working on this.

[oliviertassinari]

The advantage I see with the border approach is how popular it is, hence simpler to override. You have a border-color attribute and the option to compound the border with a box shadow at the same time. From my perspective, the image problem is not the most common use case. What should we optimize for?