feat: provides access to the CSS variable created by CSSCustomProprty…

…Behaviors (#3256)

* adds access to css custom property from behavior and replaces where appropriate

* update msft components

* update documentation

* update API documentation

* add property name field

* add missing behaviors

* move var and property name to constructor

* update api report

* removing unused property

* mark bind and unbind as internal APIs

* update API report

packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts

@@ -4,14 +4,15 @@ import {
     focusVisible,
     forcedColorsStylesheetBehavior,
 } from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     neutralDividerRestBehavior,
     neutralFocusBehavior,
     neutralForegroundActiveBehavior,
     neutralForegroundFocusBehavior,
+    neutralForegroundHoverBehavior,
     neutralForegroundRestBehavior,
 } from "../../styles/";
-import { SystemColors } from "@microsoft/fast-web-utilities";
 import { heightNumber } from "../../styles/size";
 
 export const AccordionItemStyles = css`
@@ -21,7 +22,9 @@ export const AccordionItemStyles = css`
         flex-direction: column;
         font-size: var(--type-ramp-minus-1-font-size);
         line-height: var(--type-ramp-minus-1-line-height);
-        border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
+        border-bottom: calc(var(--outline-width) * 1px) solid ${
+            neutralDividerRestBehavior.var
+        };
     }
     
     .region {
@@ -46,16 +49,16 @@ export const AccordionItemStyles = css`
         padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
         text-align: left;
         height: calc(${heightNumber} * 1px);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
     }
 
     .button:hover {
-        color: var(--neutral-foreground-hover);
+        color: ${neutralForegroundHoverBehavior.var};
     }
 
     .button:active {
-        color: var(--neutral-foreground-active);
+        color: ${neutralForegroundActiveBehavior.var};
     }
 
     .button::before {
@@ -71,9 +74,9 @@ export const AccordionItemStyles = css`
 
     .button:${focusVisible}::before {
         outline: none;
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-focus);
+        border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var};
         box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px)
-            var(--neutral-focus);
+            ${neutralFocusBehavior.var};
     }
 
     :host(.expanded) .region {
@@ -125,6 +128,7 @@ export const AccordionItemStyles = css`
     neutralForegroundActiveBehavior,
     neutralForegroundFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralForegroundHoverBehavior,
     neutralFocusBehavior,
     forcedColorsStylesheetBehavior(
         css`

packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts

@@ -13,8 +13,9 @@ export const AccordionStyles = css`
         font-family: var(--body-font);
         font-size: var(--type-ramp-minus-1-font-size);
         line-height: var(--type-ramp-minus-1-line-height);
-        color: var(--neutral-foreground-rest);
-        border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        border-top: calc(var(--outline-width) * 1px) solid
+            ${neutralDividerRestBehavior.var};
     }
 `.withBehaviors(
     accentFillRestBehavior,

packages/web-components/fast-components-msft/src/badge/badge.styles.ts

@@ -22,18 +22,18 @@ export const BadgeStyles = css`
 
     :host(.lightweight) {
         background: transparent;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         font-weight: 600;
     }
 
     :host(.accent) {
-        background: var(--accent-fill-rest);
-        color: var(--accent-foreground-cut-rest);
+        background: ${accentFillRestBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.neutral) {
-        background: var(--neutral-fill-rest);
-        color: var(--neutral-foreground-rest);
+        background: ${neutralFillRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
     }
 `.withBehaviors(
     accentFillRestBehavior,

packages/web-components/fast-components-msft/src/card/card.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
 import { elevation } from "../styles";
-
+import { neutralLayerCardBehavior } from "../styles/index";
 export const CardStyles = css`
     ${display("block")} :host {
         --elevation: 4;
@@ -10,9 +10,9 @@ export const CardStyles = css`
         height: var(--card-height, 100%);
         width: var(--card-width, 100%);
         box-sizing: border-box;
-        background: var(--neutral-layer-card);
+        background: ${neutralLayerCardBehavior.var};
         border-radius: calc(var(--elevated-corner-radius) * 1px);
         ${elevation};
         border: calc(var(--outline-width) * 1px) solid transparent;
     }
-`;
+`.withBehaviors(neutralLayerCardBehavior);

packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts

@@ -37,8 +37,8 @@ export const CheckboxStyles = css`
         height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
         box-sizing: border-box;
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
-        background: var(--neutral-fill-input-rest);
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
+        background: ${neutralFillInputRestBehavior.var};
         outline: none;
         cursor: pointer;
     }
@@ -50,7 +50,7 @@ export const CheckboxStyles = css`
 
     .label {
         font-family: var(--body-font);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         ${
             /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ ""
         } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
@@ -64,14 +64,14 @@ export const CheckboxStyles = css`
         width: 100%;
         height: 100%;
         display: block;
-        fill: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
         opacity: 0;
         pointer-events: none;
     }
 
     .indeterminate-indicator {
         border-radius: calc(var(--corner-radius) * 1px);
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         position: absolute;
         top: 25%;
         right: 25%;
@@ -81,18 +81,20 @@ export const CheckboxStyles = css`
     }
 
     :host(:enabled) .control:hover {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     :host(:enabled) .control:active {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--neutral-outline-active);
+        background: ${neutralFillInputActiveBehavior.var};
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
-        border-color: var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
+        border-color: ${neutralFocusBehavior.var};
     }
 
     :host(.disabled) .label,

packages/web-components/fast-components-msft/src/divider/divider.styles.ts

@@ -8,6 +8,7 @@ export const DividerStyles = css`
         height: 0;
         margin: calc(var(--design-unit) * 1px) 0;
         border: none;
-        border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
+        border-top: calc(var(--outline-width) * 1px) solid
+            ${neutralDividerRestBehavior.var};
     }
 `.withBehaviors(neutralDividerRestBehavior);

packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts

@@ -26,8 +26,8 @@ export const FlipperStyles = css`
         align-items: center;
         margin: 0;
         position: relative;
-        fill: var(--neutral-foreground-rest);
-        color: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
         background: transparent;
         border: none;
         outline: none;
@@ -37,8 +37,8 @@ export const FlipperStyles = css`
     :host::before {
         content: "";
         opacity: 0.8;
-        background: var(--neutral-fill-stealth-rest);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        background: ${neutralFillStealthRestBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
         border-radius: 50%;
         position: absolute;
         top: 0;
@@ -64,22 +64,22 @@ export const FlipperStyles = css`
     }
 
     :host(:hover)::before {
-        background: var(--neutral-fill-stealth-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillStealthHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     :host(:${focusVisible}) {
         outline: none;
     }
 
     :host(:${focusVisible})::before {
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
-        border-color: var(--neutral-focus);
+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
+        border-color: ${neutralFocusBehavior.var};
     }
 
     :host(:active)::before {
-        background: var(--neutral-fill-stealth-active);
-        border-color: var(--neutral-outline-active);
+        background: ${neutralFillStealthActiveBehavior.var};
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 
     :host::-moz-focus-inner {

packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts

@@ -23,13 +23,13 @@ export const ProgressRingStyles = css`
     }
 
     .background {
-        stroke: var(--neutral-fill-rest);
+        stroke: ${neutralFillRestBehavior.var};
         fill: none;
         stroke-width: 2px;
     }
 
     .determinate {
-        stroke: var(--accent-fill-rest);
+        stroke: ${accentFillRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -39,7 +39,7 @@ export const ProgressRingStyles = css`
     }
 
     .indeterminate-indicator-1 {
-        stroke: var(--accent-fill-rest);
+        stroke: ${accentFillRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -51,11 +51,11 @@ export const ProgressRingStyles = css`
 
     :host(.paused) .indeterminate-indicator-1 {
         animation-play-state: paused;
-        stroke: var(--neutral-fill-rest);
+        stroke: ${neutralFillRestBehavior.var};
     }
 
     :host(.paused) .determinate {
-        stroke: var(--neutral-foreground-hint);
+        stroke: ${neutralForegroundHintBehavior.var};
     }
 
     @keyframes spin-infinite {

packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts

@@ -16,7 +16,7 @@ export const ProgressStyles = css`
     }
 
     .progress {
-        background-color: var(--neutral-fill-rest);
+        background-color: ${neutralFillRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         width: 100%;
         height: 100%;
@@ -26,7 +26,7 @@ export const ProgressStyles = css`
     }
 
     .determinate {
-        background-color: var(--accent-fill-rest);
+        background-color: ${accentFillRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         height: 100%;
         transition: all 0.2s ease-in-out;
@@ -46,7 +46,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: var(--accent-fill-rest);
+        background-color: ${accentFillRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 40%;
@@ -57,7 +57,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: var(--accent-fill-rest);
+        background-color: ${accentFillRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 60%;
@@ -66,11 +66,11 @@ export const ProgressStyles = css`
 
     :host(.paused) .indeterminate-indicator-1, :host(.paused) .indeterminate-indicator-2 {
         animation-play-state: paused;
-        background-color: var(--neutral-fill-rest);
+        background-color: ${neutralFillRestBehavior.var};
     }
 
     :host(.paused) .determinate {
-        background-color: var(--neutral-foreground-hint);
+        background-color: ${neutralForegroundHintBehavior.var};
     }
 
     @keyframes indeterminate-1 {