Update styling for v6

[jessiehuff]

Closes #299

preview docs: https://qs-design-update-docs.surge.sh/extensions/quick-starts
preview demo: https://qs-design-update.surge.sh/

[andrew-ronaldson]

Not sure if there have been conversations about this yet but we have a blue header in Figma for the drawer.

[nicolethoen]

@andrew-ronaldson I don't think it's made it to core/react yet. I can link to any issues that get created in a quickstarts follow up issue to make sure we use it once it exists.

[andrew-ronaldson]

Could we make this drawer header in quickstarts using tokens if I put it together?

[nicolethoen]

@andrew-ronaldson I took a stab at identifying appropriate tokens to get it running. I updated the preview links at the top of this PR. LMK what you think! :)

[andrew-ronaldson]

Looks good but we'll need a follow up issue for some bugs. Adding here but I'll put them in another issue if they can't be addressed for Beta. @lboehling do you have any other thoughts on this?

The cards don't seem to have a hover or clicked state applied.

The quickstart header needs a bit more padding, please

Looks like the step titles are using var(--pf-t--global--font--family--heading) but in Figma it is

font-family: var(--pf-t--global--font--family--body);
font-weight: var(---pf-t--global--font--weight--body--bold);
font-size: var(--pf-t--global--font--size--body--large);

[andrew-ronaldson]

A thing of beauty! Thanks @nicolethoen

[github-actions]

🎉 This PR is included in version 6.0.0-alpha.3 🎉

The release is available on:

• GitHub release
• npm package (@alpha dist-tag)

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 6.0.0-prerelease.1 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀