Copying some `styleOptions` to CSS variables

Is your feature request related to a problem?

(This is not related to idiosyncratic styling.)

Copying some styleOptions to CSS variables --webchat__color--accent will enable us to use CSS media queries, which will make it easy to implement dark theme.

We should also consider a customization story for overriding certain CSS variables in a specific component. For example, modifying --webchat__padding--regular for suggested actions.

We should not put runtime style options, such as sendTimeout, in CSS variables. styleOptions (or JSON) is still the best way to put variables read by JavaScript. This is because JavaScript will not receive any events when CSS variables changed. However, when styleOptions changes, React will re-render us.

Describe the suggestion or request in detail

For naming, let's follow CSS BEM with hyphen naming. CSS BEM does not have naming system for CSS variables. However, we could use this format --namespace__value-type--modifier.

--webchat__color--accent: rgb(0, 99, 177);
--webchat__padding--regular: 10px;

When converting from JavaScript to CSS, make sure numbers have "px" appended.

{
  '--webchat__padding--regular': paddingRegular + 'px'
}

Describe alternatives you have considered

No response

Additional context

CSS variables is not supported in IE11. We tried a polyfill. However, it requires a different variable name, for example, -webchat__color--accent, instead of --webchat__color--accent.

Because -xyz is not a CSS-compliant way to specify CSS variables, we should not use the polyfill.

As IE11 population is diminishing, it should be okay to let Web Chat looks ugly on IE11. In the future we need to go back on this decision, we may be able to use a programmatic way to inject CSS variables into our emotion stylesheet and enable this only for IE11.

The limitation would be the resulting stylesheet will not change when media queries change.

No files or tests are named. Start by locating the handling of styleOptions and the Emotion stylesheet, then identify which styling values should become CSS variables and how component-level overrides are represented. Done means the selected values are exposed with the specified names, numeric values receive px, and runtime options remain outside CSS variables.