feat(Chatbot): applied glass and felt tokens

[thatblindgeye]

Closes #823

Just to note:

• in Figma the "Overlay" verbiage equates to the "default" display mode in chatbot code
• in Figma the "inline docked" verbiage equates to the "docked" display mode in chatbot code, and
• in Figma the "inline default" verbiage equates to the "drawer" display mode in chatbot code

[patternfly-build]

Preview: https://chatbot-pr-chatbot-849.surge.sh

A11y report: https://chatbot-pr-chatbot-849-a11y.surge.sh

[thatblindgeye]

MessageBar hover and clicked states should turn to color--hover/clicked (remove "control")

[mcoker]

I see we're using --pf-t--global--box-shadow--md for the box shadow on some glass styled boxes. We do have a glass box-shadow token (--pf-t--global--box-shadow--glass--default) if that's the intent for those. It resolves to --md, but if design ever decided to update the default glass container box-shadow, using the glass token would get that update where using --md wouldn't. Though up to design if that's the intent of these particular shadows, or if they should be fixed at --md

In a handful of spots, we're setting the background of a thing, then writing a glass theme selector and setting that background to a glass token. Most/all of the glass tokens (like --pf-t--global--background--color--glass--primary--default) have a value of initial in non-glass themes, which means you can probably write the style with 1 selector without needing to write the .pf-m-glass selector like below. In glass theme, --pf-t--global--background--color--glass--primary--default will be applied. In non-glass theme, the fallback will be applied.

background-color: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--floating--secondary--default));

And just a couple of random things. I see there is a style setting a drawer to use the floating background color - that should be the default style for a drawer. And there was at least one instance of a menu using the glass background color, which looked odd because I didn't think we were ever using transparency for something that overlays content.

[mcoker]

We do have a glass box-shadow token (--pf-t--global--box-shadow--glass--default) if that's the intent here. It resolves to --md, but if design ever decided to update the default glass container box-shadow, using the glass token would get that update where using --md wouldn't. Though up to design if that's the intent of this shadow, or if it should be fixed at --md

[mcoker]

same comment here about the glass box shadow token

[mcoker]

--pf-t--global--background--color--glass--primary--default has a value of initial in non-glass themes, which means you can probably use a fallback here like this since initial triggers the next fallback to be used.

Suggested change

	.pf-chatbot:not(.pf-chatbot--default) {
	.pf-chatbot__content {
	background-color: var(--pf-t--global--background--color--secondary--default);
	@at-root :where(.pf-v6-theme-glass) & {
	background-color: var(--pf-t--global--background--color--glass--primary--default);
	}
	}
	}
	.pf-chatbot:not(.pf-chatbot--default) {
	.pf-chatbot__content {
	background-color: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--secondary--default));
	}
	}

[mcoker]

You will want to make sure this doesn't cause an issue on mobile, but assuming it's good, you should be able to do this with a single rule using a fallback.

[mcoker]

Same, could use a fallback.

[rebeccaalpert]

I saw some visual issues, but the code looks good. So happy to drop some of the custom stuff.

Divider breaks on glass:

Modals break on glass:

History examples look bad in docs in glass (fine in ChatBot):

We need to ask Kayla about the colors for the file chips:

[rebeccaalpert]

Opening #852 for docs issue.

[rebeccaalpert]

The new color breaks it for the default view:

May want to scope it for glass.

[github-actions]

🎉 This PR is included in version 6.7.0-prerelease.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀