Explore the use of CSS custom properties for sustainability

Is your feature request related to a problem?

As we improve our branding/styling story, more style options need to be added.

Omnichannel team would like to style message and attachment differently, and more. We should explore how to use CSS custom properties to improve styling with sustainability in mind.

Describe the suggestion or request in detail

For example, to style attachment, we could consider:

--webchat__border-radius--attachment-card: 4px;
--webchat__border-radius--message-bubble: 8px;

--webchat__box-shadow--attachment-card: 0 0 10px rgba(0, 0, 0, 0.05);
--webchat__box-shadow--message-bubble: none;

Notes: we should use the term "bubble" to describe the message, and "card" to describe any attachments.

Also consider registering the CSS property for better typing and native error detection.

Describe alternatives you have considered

Adding to style options directly:

• More efforts for TypeScript and stuff around JavaScript
  • Today, background vs. backgroundColor is not strongly enforced too
• Designers or developers are more used to styling using CSS
  • We should guide how they style through CSS, e.g. they should only modify CSS custom properties but not margin directly
• We can apply style to specific group of a UI type
  • With CSS custom properties, developers can apply background color to "activities from bot" intuitively, done via .webchat__activity--from-bot: { --webchat__background-color--activity: Red; }
  • Today, they need to specify bubbleFromBotBackground and bubbleFromUserBackground in styleOptions separately

Additional context

Related to AzDO #3653454.

No source files or tests are named. Start by reviewing the existing styling and styleOptions approach, then read the related AzDO work item and evaluate the proposed CSS custom-property naming, scoping, and registration. Done means an agreed design and implementation scope for the styling approach.