feat: provides access to the CSS variable created by CSSCustomProprtyBehaviors

[nicholasrice]

Description

Adds a var field to CSSCustomPropertyBehaviors to provide the CSS Custom Property formatted as a CSS variable. This allows the string to be interpolated into stylesheets.

Also integrates the interpolation into stylesheets.

Question:
I waffled between CSSCustomPropertyBehavior.var and CSSCustomPropertyBehavior.css. I want to keep the property concise to benefit from minification processes but wasn't sure which felt more intuitive. If anyone prefers one or the other (or something else) please let me know, I'm not married to CSSCustomPropertyBehavior.var.

Motivation & context

Primary changes are in packages/web-components/fast-foundation/src/custom-properties/behavior.ts

Issue type checklist

• Chore: A change that does not impact distributed packages.
• Bug fix: A change that fixes an issue, link to the issue above.
• New feature: A change that adds functionality.

Is this a breaking change?

• This change causes current functionality to break.

Adding or modifying component(s) in @microsoft/fast-components checklist

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

Process & policy checklist

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

[EisenbergEffect]

Out fo curiosity, did you run the build for the components before and after and notice a reduction in the minified size?

Also, I like var over css. That seems more descriptive.

[nicholasrice]

@EisenbergEffect looks like a 3.244kb reduction in the fast-components.min.js file

[EisenbergEffect]

@nicholasrice Nice!