feat(card): v2 card style updates

[annawen1]

Related Ticket(s)

Closes #10329

Description

Updates default Card to v2 styles

NOTE: when switching video variation in storybook, you may need to refresh the browser for the video duration to load properly

See design specs for details

Changelog

New

• {{new thing}}

Changed

• {{changed thing}}

Removed

• {{removed thing}}

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10903/index.html

Built with commit: 929d1a7e371222a08316aa29f7dcdb6b872f1d51

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10903/index.html

Built with commit: 929d1a7e371222a08316aa29f7dcdb6b872f1d51

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10903/index.html

Built with commit: 929d1a7e371222a08316aa29f7dcdb6b872f1d51

[oliviaflory]

@annawen1 looking good! A few things:

Interactive states

• Hover: Can you double check the hover color for the card is $layer-hover-01
  It looks a bit dark compared to the specs (right side of the screen shot)

• Focus: Slight shift in icon position when you tab into card
  

CTA Types

• Video: No text color change on hover for the video time stamp
  Keep text color at $text-primary

Themes

• Tags are not following dark theme when I change the Theme setting in Storybook
  Tags are currently set to the white or g10 theme, they should follow the correct theme colors for Gray 90 or Gray 100

Storybook (not sure how much control you have other these things?)

• Storybook errors out when I try to add body copy to the Card. (Spacing looks correct for the brief moment I can see it though!)
  

• Storybook holds onto displaying the video time stamp when I select CTA type Video, then choose another PDF, Blog. I have to refresh the page to get the time stamp to go away.
  

[annawen1]

@oliviaflory I created another ticket to capture the Storybook issues: [Component] Card v2 - Storybook #10920

[oliviaflory]

Thanks @annawen1 LGTM!