Update card pattern to support color themes

[jmuzina]

Done

Updates the card component to use new color theme variables & thus support theming.

Note that the image used in the header example was changed as the old one is not friendly to all themes (dark text becomes impossible to read on dark theme)

Fixes WD-11865

QA

• Review card docs & verify cards appear as expected.
• Review all card examples and verify they look as expected in all color themes.
  • Default
  • Content bleed
  • Header
  • Highlighted
  • Image
  • Overlay
• Review 4.13.0 release notes

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

Default light:

Default dark:

Default paper:

Content bleed light:

Content bleed dark:

Content bleed paper:

Header light:

Header dark:

Header paper:

Highlighted light:

Highlighted dark:

Highlighted paper:

Image light:

Image dark:

Image paper:

Overlay light:

Overlay dark:

Overlay paper:

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

FYI, this causes changes to some other examples that used card; the card section of the example now uses the theme of the example, rather than always being light theme.

• Input on Paper
• Search box on Paper

I initially thought this was a Percy bug (and opened #5114 ) but this is expected :)

[jmuzina]

@lyubomir-popov Please give a design review when you have the time!

[lyubomir-popov]

Nothing looks broken to me, so +1. Iwonder whether we need all this though - the closest we come to cards in the rebranded pages are these two examples, and both have no borders or shadows, just the indent.

Maybe it's time to deprecate all other versions of the card - unless they are used in products:

[bartaz]

We "need" this just for the sake of consistency. Current cards would break on dark theme (components used in them would use white text). So we need them to at least be not broken, and use theme colours instead of hardcoded ones.

So it's just a minimal work to achieve that.

But overall at some point we should do a review of Vanilla components and properly identify the ones we want to deprecate.

[bartaz]

It seems that border around card is still hardcoded into a single colour, because it's extended out of %vf-is-bordered that is using $border that is not themed.

[jmuzina]

It seems that border around card is still hardcoded into a single colour, because it's extended out of %vf-is-bordered that is using $border that is not themed.

@bartaz I've revised this to use 1px solid $colors--theme--border-default

[bartaz]

It seems that border around card is still hardcoded into a single colour, because it's extended out of %vf-is-bordered that is using $border that is not themed.

@bartaz I've revised this to use 1px solid $colors--theme--border-default

Thanks, but it would be good to update the %vf-is-bordered to be themed as well, as this may fix any other places that use these borders consistently (and that's what we eventually need anyway).

Or, to be specific, the $border variable should be updated to use themed colour, which would hopefully mean all the places where it is used are updated all together.

[jmuzina]

update the %vf-is-bordered to be themed as well, as this may fix any other places that use these borders consistently (and that's what we eventually need anyway).

@bartaz Done! Let's see what Percy thinks about this, hopefully many things get fixed

[bartaz]

update the %vf-is-bordered to be themed as well, as this may fix any other places that use these borders consistently (and that's what we eventually need anyway).

@bartaz Done! Let's see what Percy thinks about this, hopefully many things get fixed

If the colour change is subtle it may not even notice ;)

[jmuzina]

update the %vf-is-bordered to be themed as well, as this may fix any other places that use these borders consistently (and that's what we eventually need anyway).

@bartaz Done! Let's see what Percy thinks about this, hopefully many things get fixed

If the colour change is subtle it may not even notice ;)
@bartaz
Percy build is looking good!

[bartaz]

Why the image change?

[jmuzina]

@bartaz Updated image looks better on dark theme as it has no dark text
Before (dark theme):

After (dark theme):

Although, the plus icon here is still kind of hard to see in dark theme. Is this the kind of thing that we care about changing now that we're updating components to support theming?

[bartaz]

Keep the border thickness as it was before, just update the colour, please.