From a4cfbbbe4a3caf07213bf83b2856920b5f0c8076 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 09:35:06 -0700
Subject: [PATCH 01/11] adds access to css custom property from behavior and
 replaces where appropriate

---
 .../fast-components/docs/api-report.md        |   3 -
 .../accordion-item/accordion-item.styles.ts   |  14 +-
 .../src/accordion/accordion.styles.ts         |  12 +-
 .../src/accordion/fixtures/base.html          |   2 +-
 .../src/anchor/anchor.styles.ts               |  43 +-----
 .../fast-components/src/badge/badge.styles.ts |   2 +-
 .../src/button/button.styles.ts               |  40 ------
 .../fast-components/src/card/card.styles.ts   |   4 +-
 .../src/checkbox/checkbox.styles.ts           |  40 +++---
 .../src/divider/divider.styles.ts             |   3 +-
 .../src/flipper/flipper.styles.ts             |  30 +++--
 .../src/menu-item/menu-item.styles.ts         |  32 ++---
 .../fast-components/src/menu/menu.styles.ts   |   2 +-
 .../progress-ring/progress-ring.styles.ts     |  10 +-
 .../src/progress/progress/progress.styles.ts  |  12 +-
 .../src/radio-group/fixtures/base.html        |  16 +--
 .../fast-components/src/radio/radio.styles.ts |  40 +++---
 .../src/slider-label/slider-label.styles.ts   |   6 +-
 .../src/slider/fixtures/base.html             |   4 +-
 .../src/slider/slider.styles.ts               |  14 +-
 .../src/styles/patterns/button.ts             | 125 ++++++++++++------
 .../src/switch/switch.styles.ts               |  42 +++---
 .../src/tabs/tab/tab.styles.ts                |  38 +++---
 .../fast-components/src/tabs/tabs.styles.ts   |   6 +-
 .../src/text-area/text-area.styles.ts         |  26 ++--
 .../src/text-field/text-field.styles.ts       |  30 ++---
 .../fast-components/temp/api-report.md        |   3 -
 .../fast-foundation/docs/api-report.md        |  11 +-
 .../src/custom-properties/behavior.ts         | 112 +++++++++++-----
 29 files changed, 378 insertions(+), 344 deletions(-)

diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
index 9cc4d730a2a..e7d2409a6a5 100644
--- a/packages/web-components/fast-components/docs/api-report.md
+++ b/packages/web-components/fast-components/docs/api-report.md
@@ -181,7 +181,6 @@ export class FASTCheckbox extends Checkbox {
 //
 // @public (undocumented)
 export class FASTDesignSystemProvider extends DesignSystemProvider implements FASTDesignSystem {
-    // (undocumented)
     accentBaseColor: string;
     // (undocumented)
     accentFillActiveDelta: number;
@@ -201,7 +200,6 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     accentForegroundHoverDelta: number;
     // (undocumented)
     accentForegroundRestDelta: number;
-    // (undocumented)
     accentPalette: string[];
     backgroundColor: string;
     // (undocumented)
@@ -274,7 +272,6 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     neutralOutlineHoverDelta: number;
     // (undocumented)
     neutralOutlineRestDelta: number;
-    // (undocumented)
     neutralPalette: string[];
     // (undocumented)
     outlineWidth: number;
diff --git a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts
index 371c03ea72b..4d804029e2f 100644
--- a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/fast-components/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/recipes";
-import { SystemColors } from "@microsoft/fast-web-utilities";
 import { heightNumber } from "../../styles/size";
 
 export const AccordionItemStyles = css`
@@ -46,16 +47,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 +72,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 {
@@ -124,6 +125,7 @@ export const AccordionItemStyles = css`
     neutralDividerRestBehavior,
     neutralForegroundActiveBehavior,
     neutralForegroundFocusBehavior,
+    neutralForegroundHoverBehavior,
     neutralForegroundRestBehavior,
     neutralFocusBehavior,
     forcedColorsStylesheetBehavior(
diff --git a/packages/web-components/fast-components/src/accordion/accordion.styles.ts b/packages/web-components/fast-components/src/accordion/accordion.styles.ts
index 2b03070c2e1..2529f9ec9dc 100644
--- a/packages/web-components/fast-components/src/accordion/accordion.styles.ts
+++ b/packages/web-components/fast-components/src/accordion/accordion.styles.ts
@@ -1,7 +1,6 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
 import {
-    accentFillRestBehavior,
     neutralDividerRestBehavior,
     neutralForegroundRestBehavior,
 } from "../styles/recipes";
@@ -13,11 +12,8 @@ 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,
-    neutralDividerRestBehavior,
-    neutralForegroundRestBehavior
-);
+`.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior);
diff --git a/packages/web-components/fast-components/src/accordion/fixtures/base.html b/packages/web-components/fast-components/src/accordion/fixtures/base.html
index 3b85ca61cad..f7f6eac0017 100644
--- a/packages/web-components/fast-components/src/accordion/fixtures/base.html
+++ b/packages/web-components/fast-components/src/accordion/fixtures/base.html
@@ -1,7 +1,7 @@
 <fast-design-system-provider use-defaults>
     <style>
         .icon {
-            stroke: var(--accent-fill-rest);
+            stroke: ${accentFillRestBehavior.var};
         }
 
         fast-accordion-item.disabled::part(button) {
diff --git a/packages/web-components/fast-components/src/anchor/anchor.styles.ts b/packages/web-components/fast-components/src/anchor/anchor.styles.ts
index eece27e4e3a..df00d069371 100644
--- a/packages/web-components/fast-components/src/anchor/anchor.styles.ts
+++ b/packages/web-components/fast-components/src/anchor/anchor.styles.ts
@@ -1,29 +1,9 @@
 import { css } from "@microsoft/fast-element";
 import {
     AccentButtonStyles,
-    accentFillActiveBehavior,
-    accentFillHoverBehavior,
-    accentFillRestBehavior,
-    accentForegroundActiveBehavior,
-    accentForegroundCutRestBehavior,
-    accentForegroundHoverBehavior,
-    accentForegroundRestBehavior,
     BaseButtonStyles,
     HypertextStyles,
     LightweightButtonStyles,
-    neutralFillActiveBehavior,
-    neutralFillFocusBehavior,
-    neutralFillHoverBehavior,
-    neutralFillRestBehavior,
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
-    neutralFillStealthRestBehavior,
-    neutralFocusBehavior,
-    neutralFocusInnerAccentBehavior,
-    neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
-    neutralOutlineRestBehavior,
     OutlineButtonStyles,
     StealthButtonStyles,
 } from "../styles/index";
@@ -35,25 +15,4 @@ export const AnchorStyles = css`
     ${LightweightButtonStyles}
     ${OutlineButtonStyles}
     ${StealthButtonStyles}
-`.withBehaviors(
-    accentFillActiveBehavior,
-    accentFillHoverBehavior,
-    accentFillRestBehavior,
-    accentForegroundActiveBehavior,
-    accentForegroundCutRestBehavior,
-    accentForegroundHoverBehavior,
-    accentForegroundRestBehavior,
-    neutralFillActiveBehavior,
-    neutralFillFocusBehavior,
-    neutralFillHoverBehavior,
-    neutralFillRestBehavior,
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
-    neutralFillStealthRestBehavior,
-    neutralFocusBehavior,
-    neutralFocusInnerAccentBehavior,
-    neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
-    neutralOutlineRestBehavior
-);
+`;
diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts
index 54ab0e476f6..d95f65f3e3b 100644
--- a/packages/web-components/fast-components/src/badge/badge.styles.ts
+++ b/packages/web-components/fast-components/src/badge/badge.styles.ts
@@ -13,7 +13,7 @@ export const BadgeStyles = css`
     .badge {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
         font-weight: 600;
     }
 
diff --git a/packages/web-components/fast-components/src/button/button.styles.ts b/packages/web-components/fast-components/src/button/button.styles.ts
index 26eaee34c45..f7596fbdf4a 100644
--- a/packages/web-components/fast-components/src/button/button.styles.ts
+++ b/packages/web-components/fast-components/src/button/button.styles.ts
@@ -7,29 +7,9 @@ import {
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     AccentButtonStyles,
-    accentFillActiveBehavior,
-    accentFillHoverBehavior,
-    accentFillRestBehavior,
-    accentForegroundActiveBehavior,
-    accentForegroundCutRestBehavior,
-    accentForegroundHoverBehavior,
-    accentForegroundRestBehavior,
     BaseButtonStyles,
     HypertextStyles,
     LightweightButtonStyles,
-    neutralFillActiveBehavior,
-    neutralFillFocusBehavior,
-    neutralFillHoverBehavior,
-    neutralFillRestBehavior,
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
-    neutralFillStealthRestBehavior,
-    neutralFocusBehavior,
-    neutralFocusInnerAccentBehavior,
-    neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
-    neutralOutlineRestBehavior,
     OutlineButtonStyles,
     StealthButtonStyles,
 } from "../styles/index";
@@ -42,26 +22,6 @@ export const ButtonStyles = css`
     ${OutlineButtonStyles}
     ${StealthButtonStyles}
 `.withBehaviors(
-    accentFillActiveBehavior,
-    accentFillHoverBehavior,
-    accentFillRestBehavior,
-    accentForegroundActiveBehavior,
-    accentForegroundCutRestBehavior,
-    accentForegroundHoverBehavior,
-    accentForegroundRestBehavior,
-    neutralFillActiveBehavior,
-    neutralFillFocusBehavior,
-    neutralFillHoverBehavior,
-    neutralFillRestBehavior,
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
-    neutralFillStealthRestBehavior,
-    neutralFocusBehavior,
-    neutralFocusInnerAccentBehavior,
-    neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
-    neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(
         css`
             :host(.disabled),
diff --git a/packages/web-components/fast-components/src/card/card.styles.ts b/packages/web-components/fast-components/src/card/card.styles.ts
index 81130b1ac9a..d1b97b30a71 100644
--- a/packages/web-components/fast-components/src/card/card.styles.ts
+++ b/packages/web-components/fast-components/src/card/card.styles.ts
@@ -11,9 +11,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(--corner-radius) * 1px);
         ${elevation};
         border: calc(var(--outline-width) * 1px) solid transparent;
     }
-`;
+`.withBehaviors(neutralLayerCardBehavior);
diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
index 67802139175..49e7c6b104a 100644
--- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
@@ -42,15 +42,15 @@ 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;
     }
 
     .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);
@@ -69,14 +69,14 @@ export const CheckboxStyles = css`
         width: 100%;
         height: 100%;
         display: block;
-        fill: var(--accent-foreground-cut-rest);
+        fill: ${accentForegroundCutRestBehavior.var};
         opacity: 0;
         pointer-events: none;
     }
 
     .indeterminate-indicator {
         border-radius: calc(var(--corner-radius) * 1px);
-        background: var(--accent-foreground-cut-rest);
+        background: ${accentForegroundCutRestBehavior.var};
         position: absolute;
         top: 25%;
         right: 25%;
@@ -86,37 +86,41 @@ 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(.checked) .control {
-        background: var(--accent-fill-rest);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
     }
 
     :host(.checked:enabled) .control:hover {
-        background: var(--accent-fill-hover);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillHoverBehavior.var};
     }
 
     :host(.checked:enabled) .control:active {
-        background: var(--accent-fill-active);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};
     }
 
     :host(.checked:${focusVisible}:enabled) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
         border-color: transparent;
     }
 
diff --git a/packages/web-components/fast-components/src/divider/divider.styles.ts b/packages/web-components/fast-components/src/divider/divider.styles.ts
index f35604b562e..6b3e2e2818a 100644
--- a/packages/web-components/fast-components/src/divider/divider.styles.ts
+++ b/packages/web-components/fast-components/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);
diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
index f5d30c94945..5958c32d44e 100644
--- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts
+++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
@@ -27,8 +27,8 @@ export const FlipperStyles = css`
         align-items: center;
         margin: 0;
         position: relative;
-        fill: var(--accent-foreground-cut-rest);
-        color: var(--accent-foreground-cut-rest);
+        fill: ${accentForegroundCutRestBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
         background: transparent;
         outline: none;
         border: none;
@@ -37,8 +37,8 @@ export const FlipperStyles = css`
 
     :host::before {
         content: "";
-        background: var(--accent-fill-rest);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
         border-radius: 50%;
         position: absolute;
         top: 0;
@@ -61,25 +61,25 @@ export const FlipperStyles = css`
     :host(.disabled) {
         opacity: var(--disabled-opacity);
         cursor: ${disabledCursor};
-        fill: var(--neutral-foreground-rest);
-        color: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
     }
 
     :host(.disabled)::before,
     :host(.disabled:hover)::before,
     :host(.disabled:active)::before {
-        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};
     }
 
     :host(:hover)::before {
-        background: var(--accent-fill-hover);
-        border-color: var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     :host(:active)::before {
-        background: var(--accent-fill-active);
-        border-color: var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
+        border-color: ${accentFillActiveBehavior.var};
     }
 
     :host(:${focusVisible}) {
@@ -87,8 +87,10 @@ export const FlipperStyles = css`
     }
 
     :host(:${focusVisible})::before {
-        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent);
-        border-color: var(--neutral-focus);
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${
+            neutralFocusInnerAccentBehavior.var
+        };
+        border-color: ${neutralFocusBehavior.var};
     }
 
     :host::-moz-focus-inner {
diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts
index 4f73f0f5e7e..b5c0e0f35d7 100644
--- a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts
@@ -30,8 +30,8 @@ export const MenuItemStyles = css`
         margin: 0 calc(var(--design-unit) * 1px);
         white-space: nowrap;
         overflow: hidden;
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -40,20 +40,22 @@ export const MenuItemStyles = css`
     }
 
     :host(:${focusVisible}) {
-        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent);
-        border-color: var(--neutral-focus);
-        background: var(--accent-fill-hover);
-        color: var(--accent-foreground-cut-rest);
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${
+            neutralFocusInnerAccentBehavior.var
+        };
+        border-color: ${neutralFocusBehavior.var};
+        background: ${accentFillHoverBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(:hover) {
-        background: var(--accent-fill-hover);
-        color: var(--accent-foreground-cut-rest);
+        background: ${accentFillHoverBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(:active) {
-        background: var(--accent-fill-active);
-        color: var(--accent-foreground-cut-rest);
+        background: ${accentFillActiveBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.disabled) {
@@ -62,15 +64,15 @@ export const MenuItemStyles = css`
     }
 
     :host(.disabled:hover) {
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-stealth-rest)
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillStealthRestBehavior.var}
     }
 
     :host(.disabled:hover) .start,
     :host(.disabled:hover) .end,
     :host(.disabled:hover)::slotted(svg) {
-        fill: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .content {
@@ -96,7 +98,7 @@ export const MenuItemStyles = css`
     :host(:active) .start,
     :host(:active) .end,
     :host(:active)::slotted(svg) {
-        fill: var(--accent-foreground-cut-rest);
+        fill: ${accentForegroundCutRestBehavior.var};
     }
 `.withBehaviors(
     accentFillActiveBehavior,
diff --git a/packages/web-components/fast-components/src/menu/menu.styles.ts b/packages/web-components/fast-components/src/menu/menu.styles.ts
index 9bf62c933df..ab8e04932f3 100644
--- a/packages/web-components/fast-components/src/menu/menu.styles.ts
+++ b/packages/web-components/fast-components/src/menu/menu.styles.ts
@@ -9,7 +9,7 @@ import {
 export const MenuStyles = css`
     ${display("block")} :host {
         --elevation: 11;
-        background: var(--neutral-layer-floating);
+        background: ${neutralLayerFloatingBehavior.var};
         border: calc(var(--outline-width) * 1px) solid transparent;
         border-radius: var(--elevated-corner-radius);
         ${elevation} margin: 0;
diff --git a/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts
index f3b749d7157..6ebf654fe07 100644
--- a/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts
+++ b/packages/web-components/fast-components/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 {
diff --git a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components/src/progress/progress/progress.styles.ts
index 535959cec29..23a9f9d003a 100644
--- a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts
+++ b/packages/web-components/fast-components/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 {
diff --git a/packages/web-components/fast-components/src/radio-group/fixtures/base.html b/packages/web-components/fast-components/src/radio-group/fixtures/base.html
index ffba205bbe2..d77e395f094 100644
--- a/packages/web-components/fast-components/src/radio-group/fixtures/base.html
+++ b/packages/web-components/fast-components/src/radio-group/fixtures/base.html
@@ -4,7 +4,7 @@ <h1>Radio Group</h1>
     <h4>Defaults</h4>
     <div>
         <fast-radio-group name="numbers">
-            <label style="color: var(--neutral-foreground-rest);" slot="label">Numbers</label>
+            <label style="color: ${neutralForegroundRestBehavior.var};" slot="label">Numbers</label>
             <fast-radio value="one">One</fast-radio>
             <fast-radio value="two">Two</fast-radio>
         </fast-radio-group>
@@ -12,7 +12,7 @@ <h4>Defaults</h4>
 
     <div>
         <fast-radio-group orientation="vertical" name="trees">
-            <label style="color: var(--neutral-foreground-rest);" slot="label">Trees</label>
+            <label style="color: ${neutralForegroundRestBehavior.var};" slot="label">Trees</label>
             <fast-radio value="fir">Fir</fast-radio>
             <fast-radio value="juniper">Juniper</fast-radio>
             <fast-radio value="hemlock">Hemlock</fast-radio>
@@ -22,18 +22,18 @@ <h4>Defaults</h4>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
         <fast-radio-group name="players">
-            <label style="color: var(--neutral-foreground-rest);" slot="label">Best basketball players</label>
+            <label style="color: ${neutralForegroundRestBehavior.var};" slot="label">Best basketball players</label>
             <fast-radio value="airjordan">Michael Jordan</fast-radio>
         </fast-radio-group>
     </div>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
-        <label style="color: var(--neutral-foreground-rest);">Single radio (no group)</label>
+        <label style="color: ${neutralForegroundRestBehavior.var};">Single radio (no group)</label>
         <fast-radio value="single-life">Single life</fast-radio>
     </div>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
-        <label style="color: var(--neutral-foreground-rest);" id="label1">Outside label</label>
+        <label style="color: ${neutralForegroundRestBehavior.var};" id="label1">Outside label</label>
         <fast-radio-group required="true" aria-labelledby="label1" name="fruits">
             <fast-radio value="apples">Apples</fast-radio>
             <fast-radio value="oranges">Oranges</fast-radio>
@@ -60,7 +60,7 @@ <h4>Defaults</h4>
     </div>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
-        <label style="color: var(--neutral-foreground-rest);" id="label2">Disabled radio group</label>
+        <label style="color: ${neutralForegroundRestBehavior.var};" id="label2">Disabled radio group</label>
         <fast-radio-group disabled aria-labelledby="label2" name="cars">
             <fast-radio value="lambo">Lamborghini</fast-radio>
             <fast-radio value="ferari">Ferari</fast-radio>
@@ -68,7 +68,7 @@ <h4>Defaults</h4>
     </div>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
-        <label style="color: var(--neutral-foreground-rest);" id="label3">readonly radio group</label>
+        <label style="color: ${neutralForegroundRestBehavior.var};" id="label3">readonly radio group</label>
         <fast-radio-group readonly aria-labelledby="label3" name="office">
             <fast-radio value="word">Word</fast-radio>
             <fast-radio value="excel">Excel</fast-radio>
@@ -76,7 +76,7 @@ <h4>Defaults</h4>
     </div>
 
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
-        <label style="color: var(--neutral-foreground-rest);" id="label4">Preset selected-value</label>
+        <label style="color: ${neutralForegroundRestBehavior.var};" id="label4">Preset selected-value</label>
         <fast-radio-group value="maverick" aria-labelledby="label4" name="best-pilot">
             <fast-radio value="ice-man">Ice Man</fast-radio>
             <fast-radio value="maverick">Maverick</fast-radio>
diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts
index a4c5e5cd161..7b1670b300c 100644
--- a/packages/web-components/fast-components/src/radio/radio.styles.ts
+++ b/packages/web-components/fast-components/src/radio/radio.styles.ts
@@ -45,15 +45,15 @@ export const RadioStyles = 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;
     }
 
     .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);
@@ -77,44 +77,48 @@ export const RadioStyles = css`
         border-radius: calc(var(--corner-radius) * 1px);
         display: inline-block;
         flex-shrink: 0;
-        background: var(--accent-foreground-cut-rest);
-        fill: var(--accent-foreground-cut-rest);
+        background: ${accentForegroundCutRestBehavior.var};
+        fill: ${accentForegroundCutRestBehavior.var};
         opacity: 0;
         pointer-events: none;
     }
 
     :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(.checked) .control {
-        background: var(--accent-fill-rest);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
     }
 
     :host(.checked:enabled) .control:hover {
-        background: var(--accent-fill-hover);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillHoverBehavior.var};
     }
 
     :host(.checked:enabled) .control:active {
-        background: var(--accent-fill-active);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};
     }
 
     :host(.checked:${focusVisible}:enabled) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
         border-color: transparent;
     }
 
diff --git a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts
index 7710db36f2e..37408a7dd74 100644
--- a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts
+++ b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts
@@ -9,8 +9,8 @@ import {
 
 export const SliderLabelStyles = css`
     ${display("block")} :host {
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
     }
     .root {
         position: absolute;
@@ -55,7 +55,7 @@ export const SliderLabelStyles = css`
     .mark {
         width: calc((var(--design-unit) / 4) * 1px);
         height: calc(${heightNumber} * 0.25 * 1px);
-        background: var(--neutral-outline-rest);
+        background: ${neutralOutlineRestBehavior.var};
         justify-self: center;
     }
     :host(.vertical) .mark {
diff --git a/packages/web-components/fast-components/src/slider/fixtures/base.html b/packages/web-components/fast-components/src/slider/fixtures/base.html
index 98b65ea991d..082f2699f48 100644
--- a/packages/web-components/fast-components/src/slider/fixtures/base.html
+++ b/packages/web-components/fast-components/src/slider/fixtures/base.html
@@ -112,7 +112,7 @@ <h4>Min value greater than 0</h4>
         <!-- Text Labels -->
         <h4>Text labels</h4>
         <div style="display: flex; flex-direction: column; height:min-content">
-            <label for="slider1" style="margin-left: 8px; color: var(--neutral-foreground-rest);">Temperature:</label>
+            <label for="slider1" style="margin-left: 8px; color: ${neutralForegroundRestBehavior.var};">Temperature:</label>
             <fast-slider
                 id="slider1"
                 min="0"
@@ -135,7 +135,7 @@ <h4>Text labels</h4>
         <!-- Custom labels (rtl) -->
         <h4>Custom labels (rtl)</h4>
         <div style="display: flex; flex-direction: column; align-items: flex-start; height:min-content">
-            <label for="rtl-slider" style="margin-left: 8px; color: var(--neutral-foreground-rest);">rtl support</label>
+            <label for="rtl-slider" style="margin-left: 8px; color: ${neutralForegroundRestBehavior.var};">rtl support</label>
             <div dir="rtl" style="width: 100%;">
                 <fast-slider
                     id="rtl-slider"
diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts
index bbdb1d32c81..ee3e59e78b3 100644
--- a/packages/web-components/fast-components/src/slider/slider.styles.ts
+++ b/packages/web-components/fast-components/src/slider/slider.styles.ts
@@ -59,22 +59,22 @@ export const SliderStyles = css`
         height: calc(var(--thumb-size) * 1px);
         width: calc(var(--thumb-size) * 1px);
         transition: "all 0.2s ease";
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
     }
     .thumb-cursor {
         border: none;
         width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
     }
     .thumb-cursor:hover {
-        background: var(--neutral-foreground-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralForegroundHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
     .thumb-cursor:active {
-        background: var(--neutral-foreground-active);
+        background: ${neutralForegroundActiveBehavior.var};
     }
     :host(.horizontal) .thumb-container {
         transform: translateX(calc(var(--thumb-translate) * 1px));
@@ -101,7 +101,7 @@ export const SliderStyles = css`
         height: 100%;
     }
     .track {
-        background: var(--neutral-outline-rest);
+        background: ${neutralOutlineRestBehavior.var};
         position: absolute;
         border-radius: calc(var(--corner-radius) * 1px);
     }
diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts
index 4e53f3af8b1..ba8570de265 100644
--- a/packages/web-components/fast-components/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components/src/styles/patterns/button.ts
@@ -1,6 +1,24 @@
 import { css } from "@microsoft/fast-element";
 import { display, focusVisible } from "@microsoft/fast-foundation";
 import { heightNumber } from "../size";
+import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    neutralFillActiveBehavior,
+    neutralFillHoverBehavior,
+    neutralFillRestBehavior,
+    neutralFocusInnerAccentBehavior,
+    neutralForegroundRestBehavior,
+    accentForegroundRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundActiveBehavior,
+    neutralFocusBehavior,
+    neutralFillStealthRestBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthActiveBehavior,
+} from "../recipes";
 
 export const BaseButtonStyles = css`
     ${display("inline-block")} :host {
@@ -24,23 +42,25 @@ export const BaseButtonStyles = css`
         text-decoration: none;
         cursor: pointer;
         border-radius: calc(var(--corner-radius) * 1px);
-        background-color: var(--neutral-fill-rest);
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        background-color: ${neutralFillRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid transparent;
     }
 
     .control:hover {
-        background-color: var(--neutral-fill-hover);
+        background-color: ${neutralFillHoverBehavior.var};
     }
 
     .control:active {
-        background-color: var(--neutral-fill-active);
+        background-color: ${neutralFillActiveBehavior.var};
     }
 
     .control:${focusVisible} {
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-focus);
-        box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) 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) ${
+            neutralFocusBehavior.var
+        };
     }
 
     .control::-moz-focus-inner {
@@ -68,26 +88,37 @@ export const BaseButtonStyles = css`
     .end {
         margin-inline-start: 11px;
     }
-`;
+`.withBehaviors(
+    neutralFillRestBehavior,
+    neutralForegroundRestBehavior,
+    neutralFillHoverBehavior,
+    neutralFillActiveBehavior
+);
 
 export const AccentButtonStyles = css`
     :host(.accent) .control {
-        background: var(--accent-fill-rest);
-        color: var(--accent-foreground-cut-rest);  
+        background: ${accentFillRestBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.accent) .control:hover {
-        background: var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
     }
 
     :host(.accent) .control:active {
-        background: var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var}${accentFillActiveBehavior.var};
     }
 
     :host(.accent) .control:${focusVisible} {
-        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent);
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    accentFillHoverBehavior,
+    accentFillActiveBehavior,
+    neutralFocusInnerAccentBehavior
+);
 
 export const HypertextStyles = css`
     :host(.hypertext) .control {
@@ -104,19 +135,24 @@ export const HypertextStyles = css`
     :host(.hypertext) .control:link,
     :host(.hypertext) .control:visited {
         background: transparent;
-        color: var(--accent-foreground-rest);
-        border-bottom: calc(var(--outline-width) * 1px) solid var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
+        border-bottom: calc(var(--outline-width) * 1px) solid ${accentForegroundRestBehavior.var};
     }
     :host(.hypertext) .control:hover {
-        border-bottom-color: var(--accent-foreground-hover);
+        border-bottom-color: ${accentForegroundHoverBehavior.var};
     }
     :host(.hypertext) .control:active {
-        border-bottom-color: var(--accent-foreground-active);
+        border-bottom-color: ${accentForegroundActiveBehavior.var};
     }
     :host(.hypertext) .control:${focusVisible} {
-        border-bottom: calc(var(--focus-outline-width) * 1px) solid var(--neutral-focus);
+        border-bottom: calc(var(--focus-outline-width) * 1px) solid ${neutralFocusBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentForegroundRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundActiveBehavior,
+    neutralFocusBehavior
+);
 
 export const LightweightButtonStyles = css`
     :host(.lightweight) .control {
@@ -125,15 +161,15 @@ export const LightweightButtonStyles = css`
         box-shadow: none;
         border-radius: 0;
         background: transparent;
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
     }
 
     :host(.lightweight) .control:hover {
-        color: var(--accent-foreground-hover);
+        color: ${accentForegroundHoverBehavior.var};
     }
 
     :host(.lightweight) .control:active {
-        color: var(--accent-foreground-active);
+        color: ${accentForegroundActiveBehavior.var};
     }
 
     :host(.lightweight) .content {
@@ -150,49 +186,64 @@ export const LightweightButtonStyles = css`
     }
 
     :host(.lightweight) .control:hover .content::before {
-        background: var(--accent-foreground-hover);
+        background: ${accentForegroundHoverBehavior.var};
     }
 
     :host(.lightweight) .control:active .content::before {
-        background: var(--accent-foreground-active);
+        background: ${accentForegroundActiveBehavior.var};
     }
 
     :host(.lightweight) .control:${focusVisible} .content::before {
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         height: calc(var(--focus-outline-width) * 1px);
     }
-`;
+`.withBehaviors(
+    accentForegroundRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundActiveBehavior,
+    accentForegroundHoverBehavior,
+    neutralForegroundRestBehavior
+);
 
 export const OutlineButtonStyles = css`
     :host(.outline) .control {
         background: transparent;
-        border-color: var(--accent-fill-rest);
+        border-color: ${accentFillRestBehavior.var};
     }
 
     :host(.outline) .control:hover {
-        border-color: var(--accent-fill-hover);
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     :host(.outline) .control:active {
-        border-color: var(--accent-fill-active);
+        border-color: ${accentFillActiveBehavior.var};
     }
 
     :host(.outline) .control:${focusVisible} {
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-focus);
-        box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) 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) ${neutralFocusBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentFillRestBehavior,
+    accentFillHoverBehavior,
+    accentFillActiveBehavior,
+    neutralFocusBehavior
+);
 
 export const StealthButtonStyles = css`
     :host(.stealth) .control {
-        background: var(--neutral-fill-stealth-rest);
+        background: ${neutralFillStealthRestBehavior.var};
     }
 
     :host(.stealth) .control:hover {
-        background: var(--neutral-fill-stealth-hover);
+        background: ${neutralFillStealthHoverBehavior.var};
     }
 
     :host(.stealth) .control:active {
-        background: var(--neutral-fill-stealth-active);
+        background: ${neutralFillStealthActiveBehavior.var};
     }
-`;
+`.withBehaviors(
+    neutralFillStealthRestBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthActiveBehavior
+);
diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts
index 957fb3df75a..e2514cf2042 100644
--- a/packages/web-components/fast-components/src/switch/switch.styles.ts
+++ b/packages/web-components/fast-components/src/switch/switch.styles.ts
@@ -57,25 +57,27 @@ export const SwitchStyles = css`
         box-sizing: border-box;
         width: calc(${heightNumber} * 1px);
         height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
-        background: var(--neutral-fill-input-rest);
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
     }
 
     :host(:enabled) .switch:hover {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
         cursor: pointer;
     }
 
     :host(:enabled) .switch:active {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--neutral-outline-active);
+        background: ${neutralFillInputActiveBehavior.var};
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 
     :host(:${focusVisible}) .switch {
-        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};
     }
 
     .checked-indicator {
@@ -84,20 +86,20 @@ export const SwitchStyles = css`
         left: 5px;
         right: calc(((${heightNumber} / 2) + 1) * 1px);
         bottom: 5px;
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         transition: all 0.2s ease-in-out;
     }
 
     .status-message {
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
     }
 
     .label {
-        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 */ ""
@@ -120,26 +122,28 @@ export const SwitchStyles = css`
     :host(.checked) .checked-indicator {
         left: calc(((${heightNumber} / 2) + 1) * 1px);
         right: 5px;
-        background: var(--accent-foreground-cut-rest);
+        background: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.checked) .switch {
-        background: var(--accent-fill-rest);
-        border-color: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
+        border-color: ${accentFillRestBehavior.var};
     }
 
     :host(.checked:enabled) .switch:hover {
-        background: var(--accent-fill-hover);
-        border-color: var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     :host(.checked:enabled) .switch:active {
-        background: var(--accent-fill-active);
-        border-color: var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
+        border-color: ${accentFillActiveBehavior.var};
     }
 
     :host(.checked:${focusVisible}:enabled) .switch {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
         border-color: transparent;
     }
 
diff --git a/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts b/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts
index 162935e3099..2769c1ca5ef 100644
--- a/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts
+++ b/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts
@@ -31,8 +31,8 @@ export const TabStyles = css`
         line-height: var(--type-ramp-base-line-height);
         height: calc(${heightNumber} * 1px);
         padding: calc(var(--design-unit) * 5px) calc(var(--design-unit) * 4px);
-        color: var(--neutral-foreground-hint);
-        fill: var(--neutral-foreground-hint);
+        color: ${neutralForegroundHintBehavior.var};
+        fill: ${neutralForegroundHintBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         border: calc(var(--outline-width) * 1px) solid transparent;
         align-items: center;
@@ -41,38 +41,38 @@ export const TabStyles = css`
     }
 
     :host(:hover) {
-        color: var(--neutral-foreground-hover);
-        fill: var(--neutral-foreground-hover);
+        color: ${neutralForegroundHoverBehavior.var};
+        fill: ${neutralForegroundHoverBehavior.var};
     }
 
     :host(:active) {
-        color: var(--neutral-foreground-active);
-        fill: var(--neutral-foreground-active);
+        color: ${neutralForegroundActiveBehavior.var};
+        fill: ${neutralForegroundActiveBehavior.var};
     }
 
     :host([aria-selected="true"]) {
-        background: var(--neutral-fill-rest);
-        color: var(--accent-foreground-rest);
-        fill: var(--accent-fill-rest);
+        background: ${neutralFillRestBehavior.var};
+        color: ${accentForegroundRestBehavior.var};
+        fill: ${accentFillRestBehavior.var};
     }
 
     :host([aria-selected="true"]:hover) {
-        background: var(--neutral-fill-hover);
-        color: var(--accent-foreground-hover);
-        fill: var(--accent-fill-hover);
+        background: ${neutralFillHoverBehavior.var};
+        color: ${accentForegroundHoverBehavior.var};
+        fill: ${accentFillHoverBehavior.var};
     }
 
     :host([aria-selected="true"]:active) {
-        background: var(--neutral-fill-active);
-        color: var(--accent-foreground-active);
-        fill: var(--accent-fill-active);
+        background: ${neutralFillActiveBehavior.var};
+        color: ${accentForegroundActiveBehavior.var};
+        fill: ${accentFillActiveBehavior.var};
     }
 
     :host(:${focusVisible}) {
         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(:focus) {
@@ -89,11 +89,11 @@ export const TabStyles = css`
     }
 
     :host(.vertical:hover) {
-        color: var(--neutral-foreground-hover);
+        color: ${neutralForegroundHoverBehavior.var};
     }
 
     :host(.vertical:active) {
-        color: var(--neutral-foreground-active);
+        color: ${neutralForegroundActiveBehavior.var};
     }
 
     :host(.vertical:hover[aria-selected="true"]) {
diff --git a/packages/web-components/fast-components/src/tabs/tabs.styles.ts b/packages/web-components/fast-components/src/tabs/tabs.styles.ts
index a653612ca4b..eb5405b2bfa 100644
--- a/packages/web-components/fast-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/fast-components/src/tabs/tabs.styles.ts
@@ -13,7 +13,7 @@ export const TabsStyles = css`
         font-family: var(--body-font);
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         grid-template-columns: auto 1fr auto;
         grid-template-rows: auto 1fr;
     }
@@ -43,7 +43,7 @@ export const TabsStyles = css`
         width: 100%;
         height: 5px;
         justify-self: center;
-        background: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
         margin-top: 10px;
         border-radius: calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px) 0
             0;
@@ -97,7 +97,7 @@ export const TabsStyles = css`
         height: 100%;
         margin-inline-end: 10px;
         align-self: center;
-        background: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
         margin-top: 0;
         border-radius: 0 calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px)
             0;
diff --git a/packages/web-components/fast-components/src/text-area/text-area.styles.ts b/packages/web-components/fast-components/src/text-area/text-area.styles.ts
index 02c554c3091..71d5ac4cb06 100644
--- a/packages/web-components/fast-components/src/text-area/text-area.styles.ts
+++ b/packages/web-components/fast-components/src/text-area/text-area.styles.ts
@@ -30,10 +30,10 @@ export const TextAreaStyles = css`
     .control {
         box-sizing: border-box;
         position: relative;
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-input-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
         height: calc(${heightNumber} * 2px);
         font: inherit;
         font-size: var(--type-ramp-base-font-size);
@@ -44,13 +44,13 @@ export const TextAreaStyles = css`
     }
 
     .control:hover:enabled {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--accent-fill-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     .control:active:enabled {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--accent-fill-active);
+        background: ${neutralFillInputActiveBehavior.var};
+        border-color: ${accentFillActiveBehavior.var};
     }
 
     .control:hover,
@@ -61,16 +61,16 @@ export const TextAreaStyles = css`
     }
 
     :host(:focus-within) .control {
-        border-color: var(--neutral-focus);
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        border-color: ${neutralFocusBehavior.var};
+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
     :host(.filled) .control {
-        background: var(--neutral-fill-rest);
+        background: ${neutralFillRestBehavior.var};
     }
 
     :host(.filled:hover:not([disabled])) .control {
-        background: var(--neutral-fill-hover);
+        background: ${neutralFillHoverBehavior.var};
     }
 
     :host(.resize-both) .control {
@@ -87,7 +87,7 @@ export const TextAreaStyles = css`
 
     .label {
         display: block;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -109,7 +109,7 @@ export const TextAreaStyles = css`
         opacity: var(--disabled-opacity);
     }
     :host([disabled]) .control {
-        border-color: var(--neutral-outline-rest);
+        border-color: ${neutralOutlineRestBehavior.var};
     }
  `.withBehaviors(
     accentFillActiveBehavior,
diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
index c983a065a4a..741d96c704f 100644
--- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
@@ -32,10 +32,10 @@ export const TextFieldStyles = css`
         position: relative;
         display: flex;
         flex-direction: row;
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-input-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
         height: calc(${heightNumber} * 1px);
     }
 
@@ -50,7 +50,7 @@ export const TextFieldStyles = css`
         padding: 0 calc(var(--design-unit) * 2px + 1px);
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
     }
 
     .control:hover,
@@ -62,7 +62,7 @@ export const TextFieldStyles = css`
 
     .label {
         display: block;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -82,7 +82,7 @@ export const TextFieldStyles = css`
         } width: 16px;
         height: 16px;
         margin: auto;
-        fill: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .before-content {
@@ -94,26 +94,26 @@ export const TextFieldStyles = css`
     }
 
     :host(:hover:not(.disabled)) .root {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--accent-fill-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     :host(:active:not(.disabled)) .root {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--accent-fill-active);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${accentFillActiveBehavior.var};
     }
 
     :host(:focus-within:not(.disabled)) .root {
-        border-color: var(--neutral-focus);
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        border-color: ${neutralFocusBehavior.var};
+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
     :host(.filled) .root {
-        background: var(--neutral-fill-rest);
+        background: ${neutralFillRestBehavior.var};
     }
 
     :host(.filled:hover:not(.disabled)) .root {
-        background: var(--neutral-fill-hover);
+        background: ${neutralFillHoverBehavior.var};
     }
 
     :host(.disabled) .label,
@@ -128,7 +128,7 @@ export const TextFieldStyles = css`
     }
 
     :host([disabled]) .control {
-        border-color: var(--neutral-outline-rest);
+        border-color: ${neutralOutlineRestBehavior.var};
     }
 `.withBehaviors(
     accentFillActiveBehavior,
diff --git a/packages/web-components/fast-components/temp/api-report.md b/packages/web-components/fast-components/temp/api-report.md
index 9cc4d730a2a..e7d2409a6a5 100644
--- a/packages/web-components/fast-components/temp/api-report.md
+++ b/packages/web-components/fast-components/temp/api-report.md
@@ -181,7 +181,6 @@ export class FASTCheckbox extends Checkbox {
 //
 // @public (undocumented)
 export class FASTDesignSystemProvider extends DesignSystemProvider implements FASTDesignSystem {
-    // (undocumented)
     accentBaseColor: string;
     // (undocumented)
     accentFillActiveDelta: number;
@@ -201,7 +200,6 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     accentForegroundHoverDelta: number;
     // (undocumented)
     accentForegroundRestDelta: number;
-    // (undocumented)
     accentPalette: string[];
     backgroundColor: string;
     // (undocumented)
@@ -274,7 +272,6 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     neutralOutlineHoverDelta: number;
     // (undocumented)
     neutralOutlineRestDelta: number;
-    // (undocumented)
     neutralPalette: string[];
     // (undocumented)
     outlineWidth: number;
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 730d45d76fb..6a7c01a0ca2 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -192,8 +192,15 @@ export const CheckboxTemplate: import("@microsoft/fast-element").ViewTemplate<Ch
 // @public
 export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null;
 
-// @public (undocumented)
-export type CSSCustomPropertyBehavior = Behavior & CSSCustomPropertyDefinition;
+// @public
+export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDefinition {
+    constructor(name: string, value: CSSCustomPropertyDefinition["value"], host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
+    bind(source: typeof FASTElement & HTMLElement): void;
+    readonly name: CSSCustomPropertyDefinition["name"];
+    unbind(source: typeof FASTElement & HTMLElement): void;
+    readonly value: CSSCustomPropertyDefinition["value"];
+    get var(): string;
+    }
 
 // @public
 export function cssCustomPropertyBehaviorFactory(name: string, value: string | ((...arg: any[]) => string), host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null): CSSCustomPropertyBehavior;
diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index b7e3f80d88d..f0cc5b9da0f 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -18,8 +18,86 @@ export interface CSSCustomPropertyTarget {
     disconnectedCSSCustomPropertyRegistry: CSSCustomPropertyDefinition[] | void;
 }
 
-export type CSSCustomPropertyBehavior = Behavior & CSSCustomPropertyDefinition;
+/**
+ * A Behavior that, when bound, will register itself with the nearest
+ * CSSCustomPropertyTarget
+ */
+export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDefinition {
+    /**
+     * The name of the CSS Custom Property behavior.
+     */
+    public readonly name: CSSCustomPropertyDefinition["name"];
+
+    /**
+     * The value or function that will resolve the value of
+     * the CSS Custom Property.
+     */
+    public readonly value: CSSCustomPropertyDefinition["value"];
+    constructor(
+        name: string,
+        value: CSSCustomPropertyDefinition["value"],
+        host: (
+            source: typeof FASTElement & HTMLElement
+        ) => Partial<CSSCustomPropertyTarget> | null
+    ) {
+        this.name = name;
+        this.value = value;
+        this.host = host;
+    }
+
+    private host: (
+        source: typeof FASTElement & HTMLElement
+    ) => Partial<CSSCustomPropertyTarget> | null;
+
+    private _var: string;
+    /**
+     * Return the CSS Custom Property formatted
+     * as a CSS variable.
+     */
+    public get var() {
+        if (this._var === void 0) {
+            this._var = `var(--${this.name})`;
+        }
+
+        return this._var;
+    }
+
+    /**
+     * Binds the behavior to a source element
+     * @param source The source element being bound
+     */
+    bind(source: typeof FASTElement & HTMLElement): void {
+        const target = this.host(source);
+
+        if (target !== null) {
+            if (typeof target.registerCSSCustomProperty === "function") {
+                target.registerCSSCustomProperty(this);
+            } else {
+                // There is potential for the custom property host element to not be
+                // constructed when this is run. We handle that case by accumulating
+                // the behaviors in a normal array. Behaviors associated this way will
+                // get registered when the host is connected
+                if (!Array.isArray(target.disconnectedCSSCustomPropertyRegistry)) {
+                    target.disconnectedCSSCustomPropertyRegistry = [];
+                }
+
+                target.disconnectedCSSCustomPropertyRegistry.push(this);
+            }
+        }
+    }
+
+    /**
+     * Unbinds the behavior from the source element.
+     * @param source The source element being unbound
+     */
+    unbind(source: typeof FASTElement & HTMLElement): void {
+        const target = this.host(source);
 
+        if (target !== null && typeof target.unregisterCSSCustomProperty === "function") {
+            target.unregisterCSSCustomProperty(this);
+        }
+    }
+}
 /**
  * Create a CSS Custom Property behavior.
  * @param name The name of the CSS custom property
@@ -33,35 +111,5 @@ export function cssCustomPropertyBehaviorFactory(
         source: typeof FASTElement & HTMLElement
     ) => Partial<CSSCustomPropertyTarget> | null
 ): CSSCustomPropertyBehavior {
-    return Object.freeze({
-        name,
-        value,
-        host,
-        bind(source: typeof FASTElement): void {
-            const target = this.host(source);
-
-            if (target !== null) {
-                if (typeof target.registerCSSCustomProperty === "function") {
-                    target.registerCSSCustomProperty(this);
-                } else {
-                    // There is potential for the custom property host element to not be
-                    // constructed when this is run. We handle that case by accumulating
-                    // the behaviors in a normal array. Behaviors associated this way will
-                    // get registered when the host is connected
-                    if (!Array.isArray(target.disconnectedCSSCustomPropertyRegistry)) {
-                        target.disconnectedCSSCustomPropertyRegistry = [];
-                    }
-
-                    target.disconnectedCSSCustomPropertyRegistry.push(this);
-                }
-            }
-        },
-        unbind(source: typeof FASTElement): void {
-            const target = this.host(source);
-
-            if (target !== null) {
-                target.unregisterCSSCustomProperty(this);
-            }
-        },
-    });
+    return new CSSCustomPropertyBehavior(name, value, host);
 }

From 23d8955ea73418954773a118f1345c6e0d30ddc5 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 10:10:15 -0700
Subject: [PATCH 02/11] update msft components

---
 .../accordion-item/accordion-item.styles.ts   | 14 +++--
 .../src/accordion/accordion.styles.ts         |  5 +-
 .../src/badge/badge.styles.ts                 | 10 ++--
 .../src/card/card.styles.ts                   |  2 +-
 .../src/checkbox/checkbox.styles.ts           | 24 ++++----
 .../src/divider/divider.styles.ts             |  3 +-
 .../src/flipper/flipper.styles.ts             | 20 +++----
 .../progress-ring/progress-ring.styles.ts     | 10 ++--
 .../src/progress/progress/progress.styles.ts  | 12 ++--
 .../src/radio/radio.styles.ts                 | 24 ++++----
 .../src/slider-label/slider-label.styles.ts   |  2 +-
 .../src/slider/slider.styles.ts               | 14 +++--
 .../src/styles/patterns/button.ts             | 60 ++++++++++---------
 .../src/switch/switch.styles.ts               | 36 ++++++-----
 .../src/tabs/tab/tab.styles.ts                | 14 ++---
 .../src/tabs/tabs.styles.ts                   |  6 +-
 .../src/text-area/text-area.styles.ts         | 20 +++----
 .../src/text-field/text-field.styles.ts       | 24 ++++----
 18 files changed, 158 insertions(+), 142 deletions(-)

diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts
index 4ace01f827f..396bf21f094 100644
--- a/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts
@@ -21,7 +21,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 +48,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 +73,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 {
diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts b/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts
index 9b4b1748ad5..bb38dcf488b 100644
--- a/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts
+++ b/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,
diff --git a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
index 540d422214b..d3beca1dc40 100644
--- a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
+++ b/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,
diff --git a/packages/web-components/fast-components-msft/src/card/card.styles.ts b/packages/web-components/fast-components-msft/src/card/card.styles.ts
index 20fed905a73..e49e1796011 100644
--- a/packages/web-components/fast-components-msft/src/card/card.styles.ts
+++ b/packages/web-components/fast-components-msft/src/card/card.styles.ts
@@ -10,7 +10,7 @@ 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;
diff --git a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts
index e5f0546be7a..c3b4a644c8f 100644
--- a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts
+++ b/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,
diff --git a/packages/web-components/fast-components-msft/src/divider/divider.styles.ts b/packages/web-components/fast-components-msft/src/divider/divider.styles.ts
index 17948e1d11e..b81fe3905f2 100644
--- a/packages/web-components/fast-components-msft/src/divider/divider.styles.ts
+++ b/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);
diff --git a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
index 0753bf04fe9..d1aaa34a7b5 100644
--- a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
+++ b/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,8 +64,8 @@ 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}) {
@@ -73,13 +73,13 @@ export const FlipperStyles = css`
     }
 
     :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 {
diff --git a/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts
index 420d16baaab..365d9ebbcc4 100644
--- a/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts
+++ b/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 {
diff --git a/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts
index 5769f80049f..5030c9bd39a 100644
--- a/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts
+++ b/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 {
diff --git a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
index 9e13d46ff2e..4614c7025c8 100644
--- a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
+++ b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
@@ -41,8 +41,8 @@ export const RadioStyles = css`
         height: calc(var(--input-size) * 1px);
         box-sizing: border-box;
         border-radius: 50%;
-        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;
     }
@@ -54,7 +54,7 @@ export const RadioStyles = 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);
@@ -73,25 +73,27 @@ export const RadioStyles = css`
         border-radius: 50%;
         display: inline-block;
         flex-shrink: 0;
-        background: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
         opacity: 0;
         pointer-events: none;
     }
 
     :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,
diff --git a/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts b/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts
index 77f17de094e..9809941bfdc 100644
--- a/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts
+++ b/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts
@@ -45,7 +45,7 @@ export const SliderLabelStyles = css`
     .mark {
         width: calc((var(--design-unit) / 2) * 1px);
         height: calc(${heightNumber} * 0.25 * 1px);
-        background: var(--neutral-outline-rest);
+        background: ${neutralOutlineRestBehavior.var};
         justify-self: center;
     }
     :host(.vertical) .mark {
diff --git a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts
index bcea4b97615..31e960ce743 100644
--- a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts
+++ b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts
@@ -48,7 +48,9 @@ export const SliderStyles = css`
         grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
     }
     :host(:${focusVisible}) .thumb-cursor {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
     }
     .thumb-container {
         position: absolute;
@@ -60,15 +62,15 @@ export const SliderStyles = css`
         border: none;
         width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         border-radius: 50%;
     }
     .thumb-cursor:hover {
-        background: var(--neutral-foreground-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralForegroundHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
     .thumb-cursor:active {
-        background: var(--neutral-foreground-active);
+        background: ${neutralForegroundActiveBehavior.var};
     }
     :host(.horizontal) .thumb-container {
         transform: translateX(calc(var(--thumb-translate) * 1px));
@@ -95,7 +97,7 @@ export const SliderStyles = css`
         height: 100%;
     }
     .track {
-        background: var(--neutral-outline-rest);
+        background: ${neutralOutlineRestBehavior.var};
         position: absolute;
     }
     :host(.vertical) {
diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
index 7681d517128..2f8ef4d7d1b 100644
--- a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
@@ -24,23 +24,25 @@ export const BaseButtonStyles = css`
         text-decoration: none;
         cursor: pointer;
         border-radius: calc(var(--corner-radius) * 1px);
-        background-color: var(--neutral-fill-rest);
-        color: var(--neutral-foreground-rest);
-        fill: var(--neutral-foreground-rest);
+        background-color: ${neutralFillRestBehavior.var};
+        color: ${neutralForegroundRestBehavior.var};
+        fill: ${neutralForegroundRestBehavior.var};
         border: calc(var(--outline-width) * 1px) solid transparent;
     }
 
     .control:hover {
-        background-color: var(--neutral-fill-hover);
+        background-color: ${neutralFillHoverBehavior.var};
     }
 
     .control:active {
-        background-color: var(--neutral-fill-active);
+        background-color: ${neutralFillActiveBehavior.var};
     }
 
     .control:${focusVisible} {
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-focus);
-        box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) 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) ${
+            neutralFocusBehavior.var
+        };
     }
 
     .control::-moz-focus-inner {
@@ -72,20 +74,20 @@ export const BaseButtonStyles = css`
 
 export const AccentButtonStyles = css`
     :host(.accent) .control {
-        background: var(--accent-fill-rest);
-        color: var(--accent-foreground-cut-rest);  
+        background: ${accentFillRestBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};  
     }
 
     :host(.accent) .control:hover {
-        background: var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
     }
 
     :host(.accent) .control:active {
-        background: var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
     }
 
     :host(.accent) .control:${focusVisible} {
-        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent);
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
     }
 `;
 
@@ -106,20 +108,20 @@ export const HypertextStyles = css`
     :host(.hypertext) .control:link,
     :host(.hypertext) .control:visited {
         background: transparent;
-        color: var(--accent-foreground-rest);
-        border-bottom: calc(var(--outline-width) * 1px) solid var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
+        border-bottom: calc(var(--outline-width) * 1px) solid ${accentForegroundRestBehavior.var};
     }
 
     :host(.hypertext) .control:hover {
-        border-bottom-color: var(--accent-foreground-hover);
+        border-bottom-color: ${accentForegroundHoverBehavior.var};
     }
 
     :host(.hypertext) .control:active {
-        border-bottom-color: var(--accent-foreground-active);
+        border-bottom-color: ${accentForegroundActiveBehavior.var};
     }
 
     :host(.hypertext) .control:${focusVisible} {
-        border-bottom: calc(var(--focus-outline-width) * 1px) solid var(--neutral-focus);
+        border-bottom: calc(var(--focus-outline-width) * 1px) solid ${neutralFocusBehavior.var};
     }
 `;
 
@@ -130,15 +132,15 @@ export const LightweightButtonStyles = css`
         box-shadow: none;
         border-radius: 0;
         background: transparent;
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
     }
 
     :host(.lightweight) .control:hover {
-        color: var(--accent-foreground-hover);
+        color: ${accentForegroundHoverBehavior.var};
     }
 
     :host(.lightweight) .control:active {
-        color: var(--accent-foreground-active);
+        color: ${accentForegroundActiveBehavior.var};
     }
 
     :host(.lightweight) .content {
@@ -155,15 +157,15 @@ export const LightweightButtonStyles = css`
     }
 
     :host(.lightweight) .control:hover .content::before {
-        background: var(--accent-foreground-hover);
+        background: ${accentForegroundHoverBehavior.var};
     }
 
     :host(.lightweight) .control:active .content::before {
-        background: var(--accent-foreground-active);
+        background: ${accentForegroundActiveBehavior.var};
     }
 
     :host(.lightweight) .control:${focusVisible} .content::before {
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         height: calc(var(--focus-outline-width) * 1px);
     }
 `;
@@ -171,28 +173,28 @@ export const LightweightButtonStyles = css`
 export const OutlineButtonStyles = css`
     :host(.outline) .control {
         background: transparent;
-        border-color: var(--neutral-outline-rest);
+        border-color: ${neutralOutlineRestBehavior.var};
     }
 
     :host(.outline) .control:hover {
-        border-color: var(--neutral-outline-hover);
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     :host(.outline) .control:active {
-        border-color: var(--neutral-outline-active);
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 `;
 
 export const StealthButtonStyles = css`
     :host(.stealth) .control {
-        background: var(--neutral-fill-stealth-rest);
+        background: ${neutralFillStealthRestBehavior.var};
     }
 
     :host(.stealth) .control:hover {
-        background: var(--neutral-fill-stealth-hover);
+        background: ${neutralFillStealthHoverBehavior.var};
     }
 
     :host(.stealth) .control:active {
-        background: var(--neutral-fill-stealth-active);
+        background: ${neutralFillStealthActiveBehavior.var};
     }
 `;
diff --git a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts
index f44057a123e..88c1c9a3a23 100644
--- a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts
+++ b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts
@@ -57,25 +57,27 @@ export const SwitchStyles = css`
         box-sizing: border-box;
         width: calc(((${heightNumber} / 2) + var(--design-unit)) * 2px);
         height: calc(((${heightNumber} / 2) + var(--design-unit)) * 1px);
-        background: var(--neutral-fill-input-rest);
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(${heightNumber} * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
     }
 
     :host(:enabled) .switch:hover {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
         cursor: pointer;
     }
 
     :host(:enabled) .switch:active {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--neutral-outline-active);
+        background: ${neutralFillInputActiveBehavior.var};
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 
     :host(:${focusVisible}) .switch {
-        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};
     }
 
     .checked-indicator {
@@ -84,13 +86,13 @@ export const SwitchStyles = css`
         width: calc((${heightNumber} - (var(--design-unit) * 5.5)) * 1px);
         top: calc(var(--design-unit) * 1px);
         left: calc(var(--design-unit) * 1px);
-        background: var(--neutral-foreground-rest);
+        background: ${neutralForegroundRestBehavior.var};
         border-radius: 50%;
         transition: all 0.2s ease-in-out;
     }
 
     .status-message {
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -102,7 +104,7 @@ export const SwitchStyles = css`
     }
 
     .label {
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
     }
@@ -115,23 +117,25 @@ export const SwitchStyles = css`
 
     :host(.checked) .checked-indicator {
         left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px);
-        background: var(--accent-foreground-cut-rest);
+        background: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.checked) .switch {
-        background: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
     }
 
     :host(.checked:enabled) .switch:hover {
-        background: var(--accent-fill-hover);
+        background: ${accentFillHoverBehavior.var};
     }
 
     :host(.checked:enabled) .switch:active {
-        background: var(--accent-fill-active);
+        background: ${accentFillActiveBehavior.var};
     }
 
     :host(.checked:${focusVisible}:enabled) .switch {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${
+            neutralFocusBehavior.var
+        };
         border-color: transparent;
     }
 
diff --git a/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts
index c1b9cec0580..d79115095c8 100644
--- a/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts
+++ b/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts
@@ -25,7 +25,7 @@ export const TabStyles = css`
         line-height: 18px;
         height: calc(${heightNumber} * 1px);
         padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         border: calc(var(--outline-width) * 1px) solid transparent;
         align-items: center;
@@ -38,18 +38,18 @@ export const TabStyles = css`
     }
 
     :host(:hover) {
-        color: var(--neutral-foreground-hover);
+        color: ${neutralForegroundHoverBehavior.var};
     }
 
     :host(:active) {
-        color: var(--neutral-foreground-active);
+        color: ${neutralForegroundActiveBehavior.var};
     }
 
     :host(:${focusVisible}) {
         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(:focus) {
@@ -66,11 +66,11 @@ export const TabStyles = css`
     }
 
     :host(.vertical:hover) {
-        color: var(--neutral-foreground-hover);
+        color: ${neutralForegroundHoverBehavior.var};
     }
 
     :host(.vertical:active) {
-        color: var(--neutral-foreground-active);
+        color: ${neutralForegroundActiveBehavior.var};
     }
 
     :host(.vertical:hover[aria-selected="true"]) {
diff --git a/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts
index 837eb37ca6e..36579fe0b8c 100644
--- a/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts
+++ b/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts
@@ -9,7 +9,7 @@ export const TabsStyles = css`
         font-family: var(--body-font);
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         grid-template-columns: auto 1fr auto;
         grid-template-rows: auto 1fr;
     }
@@ -38,7 +38,7 @@ export const TabsStyles = css`
         height: 3px;
         border-radius: calc(var(--corner-radius) * 1px);
         justify-self: center;
-        background: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
     }
 
     .activeIndicatorTransition {
@@ -86,7 +86,7 @@ export const TabsStyles = css`
         height: 20px;
         border-radius: calc(var(--corner-radius) * 1px);
         align-self: center;
-        background: var(--accent-fill-rest);
+        background: ${accentFillRestBehavior.var};
     }
 
     :host(.vertical) .activeIndicatorTransition {
diff --git a/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts
index 19840937e11..0730061bee6 100644
--- a/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts
+++ b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts
@@ -27,10 +27,10 @@ export const TextAreaStyles = css`
     .control {
         box-sizing: border-box;
         position: relative;
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-input-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
         height: calc(${heightNumber} * 2px);
         font: inherit;
         font-size: var(--type-ramp-base-font-size);
@@ -41,8 +41,8 @@ export const TextAreaStyles = css`
     }
 
     .control:hover:enabled {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     .control:hover,
@@ -53,17 +53,17 @@ export const TextAreaStyles = css`
     }
 
     :host(:focus-within) .control {
-        border-color: var(--neutral-focus);
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        border-color: ${neutralFocusBehavior.var};
+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
     :host(.filled) .control {
-        background: var(--neutral-fill-rest);
+        background: ${neutralFillRestBehavior.var};
         border-color: transparent;
     }
 
     :host(.filled:hover:not([disabled])) .control {
-        background: var(--neutral-fill-hover);
+        background: ${neutralFillHoverBehavior.var};
         border-color: transparent;
     }
 
@@ -86,7 +86,7 @@ export const TextAreaStyles = css`
 
     .label {
         display: block;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         $font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
diff --git a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts
index 70544695f6c..a86ba44796a 100644
--- a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts
+++ b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts
@@ -30,10 +30,10 @@ export const TextFieldStyles = css`
         position: relative;
         display: flex;
         flex-direction: row;
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-input-rest);
+        color: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
         height: calc(${heightNumber} * 1px);
     }
 
@@ -46,7 +46,7 @@ export const TextFieldStyles = css`
         margin-bottom: auto;
         border: none;
         padding: 0 calc(var(--design-unit) * 2px + 1px);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
     }
@@ -65,7 +65,7 @@ export const TextFieldStyles = css`
 
     .label {
         display: block;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -80,7 +80,7 @@ export const TextFieldStyles = css`
         } width: 16px;
         height: 16px;
         margin: auto;
-        fill: var(--neutral-foreground-rest);
+        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .before-content {
@@ -92,22 +92,22 @@ export const TextFieldStyles = css`
     }
 
     :host(:hover:not(.disabled)) .root {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutral-outline-hover);
+        background: ${neutralFillInputHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     :host(:focus-within:not(.disabled)) .root {
-        border-color: var(--neutral-focus);
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        border-color: ${neutralFocusBehavior.var};
+        box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
     }
 
     :host(.filled) .root {
-        background: var(--neutral-fill-rest);
+        background: ${neutralFillRestBehavior.var};
         border-color: transparent;
     }
 
     :host(.filled:hover:not(.disabled)) .root {
-        background: var(--neutral-fill-hover);
+        background: ${neutralFillHoverBehavior.var};
         border-color: transparent;
     }
 

From 56d578609894607cf035a8cc7e5f30d6552b4de8 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 10:44:19 -0700
Subject: [PATCH 03/11] update documentation

---
 packages/web-components/fast-components/docs/guide/color.doc.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/fast-components/docs/guide/color.doc.md b/packages/web-components/fast-components/docs/guide/color.doc.md
index eac61892413..f5559e09127 100644
--- a/packages/web-components/fast-components/docs/guide/color.doc.md
+++ b/packages/web-components/fast-components/docs/guide/color.doc.md
@@ -85,7 +85,7 @@ import { neutralFillRestBehavior } from "@microsoft/fast-components";
 
 const styles = css`
     :host {
-        background: var(--neutral-fill-rest);
+        background: ${neutralFillRestBehavior.var};
     }
 `.withBehaviors(
     neutralFillRestBehavior

From dba51dac4a0410219ff62c1085708e4f3fb909bb Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 10:50:53 -0700
Subject: [PATCH 04/11] update API documentation

---
 .../src/custom-properties/behavior.ts         | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index f0cc5b9da0f..440164d7314 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -34,8 +34,29 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
      */
     public readonly value: CSSCustomPropertyDefinition["value"];
     constructor(
+        /**
+         * The name of the custom property.
+         * @remarks
+         * When written as a custom property, the "--" required
+         * by CSS custom properties will be prepended to this value.
+         */
         name: string,
+
+        /**
+         * The value of the custom property or a function that
+         * resolves the value.
+         * @remarks
+         * When a resolver is provided, the resolver will be invoked
+         * by the element returned from the host argument.
+         */
         value: CSSCustomPropertyDefinition["value"],
+
+        /**
+         * The element that registers the behavior.
+         * @remarks
+         * This element should also be responsible for resolving
+         * and function value.
+         */
         host: (
             source: typeof FASTElement & HTMLElement
         ) => Partial<CSSCustomPropertyTarget> | null

From 4a40b43faeffb5cb39393ab15795fcf6f39e7d27 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 10:56:49 -0700
Subject: [PATCH 05/11] add property name field

---
 .../src/custom-properties/behavior.ts             | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index 440164d7314..c39b1835f5e 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -70,6 +70,19 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
         source: typeof FASTElement & HTMLElement
     ) => Partial<CSSCustomPropertyTarget> | null;
 
+    private _propertyName: string;
+    /**
+     * The name of the CSSCustomPropertyBehavior formatted
+     * as a CSS custom property.
+     */
+    public get propertyName() {
+        if (this._propertyName === void 0) {
+            this._propertyName = `--${this.name}`;
+        }
+
+        return this._propertyName;
+    }
+
     private _var: string;
     /**
      * Return the CSS Custom Property formatted
@@ -77,7 +90,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
      */
     public get var() {
         if (this._var === void 0) {
-            this._var = `var(--${this.name})`;
+            this._var = `var(${this.propertyName})`;
         }
 
         return this._var;

From ecaddc868a16ea323638f9d209cd1e950c9672b4 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 11:26:09 -0700
Subject: [PATCH 06/11] add missing behaviors

---
 .../accordion-item/accordion-item.styles.ts   |  4 +-
 .../src/card/card.styles.ts                   |  4 +-
 .../src/radio/radio.styles.ts                 |  2 +
 .../src/styles/patterns/button.ts             | 83 +++++++++++++++----
 .../fast-components/src/card/card.styles.ts   |  3 +-
 .../src/styles/patterns/button.ts             | 14 ++--
 6 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts
index 396bf21f094..3e82ff7bf22 100644
--- a/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/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`
@@ -127,6 +128,7 @@ export const AccordionItemStyles = css`
     neutralForegroundActiveBehavior,
     neutralForegroundFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralForegroundHoverBehavior,
     neutralFocusBehavior,
     forcedColorsStylesheetBehavior(
         css`
diff --git a/packages/web-components/fast-components-msft/src/card/card.styles.ts b/packages/web-components/fast-components-msft/src/card/card.styles.ts
index e49e1796011..cd8e0bad1b4 100644
--- a/packages/web-components/fast-components-msft/src/card/card.styles.ts
+++ b/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;
@@ -15,4 +15,4 @@ export const CardStyles = css`
         ${elevation};
         border: calc(var(--outline-width) * 1px) solid transparent;
     }
-`;
+`.withBehaviors(neutralLayerCardBehavior);
diff --git a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
index 4614c7025c8..eca96a24cad 100644
--- a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
+++ b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
@@ -9,6 +9,7 @@ import {
 import {
     heightNumber,
     neutralFillActiveBehavior,
+    neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
     neutralFocusBehavior,
@@ -119,6 +120,7 @@ export const RadioStyles = css`
     neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
+    neutralFillInputActiveBehavior,
     forcedColorsStylesheetBehavior(
         css`
             .control {
diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
index 2f8ef4d7d1b..9ef592d9e83 100644
--- a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
@@ -1,6 +1,24 @@
 import { css } from "@microsoft/fast-element";
 import { display, focusVisible } from "@microsoft/fast-foundation";
 import { heightNumber } from "../size";
+import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundActiveBehavior,
+    accentForegroundCutRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundRestBehavior,
+    neutralFillActiveBehavior,
+    neutralFillHoverBehavior,
+    neutralFillRestBehavior,
+    neutralFillStealthActiveBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
+    neutralFocusBehavior,
+    neutralFocusInnerAccentBehavior,
+    neutralForegroundRestBehavior,
+} from "../index";
 
 export const BaseButtonStyles = css`
     ${display("inline-block")} :host {
@@ -16,7 +34,7 @@ export const BaseButtonStyles = css`
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
+        padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
         height: calc(${heightNumber} * 1px);
         min-width: calc(${heightNumber} * 1px);
         white-space: nowrap;
@@ -70,12 +88,17 @@ export const BaseButtonStyles = css`
     .end {
         margin-inline-start: 11px;
     }
-`;
+`.withBehaviors(
+    neutralFillRestBehavior,
+    neutralForegroundRestBehavior,
+    neutralFillHoverBehavior,
+    neutralFillActiveBehavior
+);
 
 export const AccentButtonStyles = css`
     :host(.accent) .control {
         background: ${accentFillRestBehavior.var};
-        color: ${accentForegroundCutRestBehavior.var};  
+        color: ${accentForegroundCutRestBehavior.var};
     }
 
     :host(.accent) .control:hover {
@@ -83,13 +106,19 @@ export const AccentButtonStyles = css`
     }
 
     :host(.accent) .control:active {
-        background: ${accentFillActiveBehavior.var};
+        background: ${accentFillActiveBehavior.var}${accentFillActiveBehavior.var};
     }
 
     :host(.accent) .control:${focusVisible} {
         box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    accentFillHoverBehavior,
+    accentFillActiveBehavior,
+    neutralFocusInnerAccentBehavior
+);
 
 export const HypertextStyles = css`
     :host(.hypertext) .control {
@@ -99,31 +128,31 @@ export const HypertextStyles = css`
         box-shadow: none;
         border-radius: 0;
     }
-
     :host a.control:not(:link) {
         background-color: transparent;
         cursor: default;
     }
-
     :host(.hypertext) .control:link,
     :host(.hypertext) .control:visited {
         background: transparent;
         color: ${accentForegroundRestBehavior.var};
         border-bottom: calc(var(--outline-width) * 1px) solid ${accentForegroundRestBehavior.var};
     }
-
     :host(.hypertext) .control:hover {
         border-bottom-color: ${accentForegroundHoverBehavior.var};
     }
-
     :host(.hypertext) .control:active {
         border-bottom-color: ${accentForegroundActiveBehavior.var};
     }
-
     :host(.hypertext) .control:${focusVisible} {
         border-bottom: calc(var(--focus-outline-width) * 1px) solid ${neutralFocusBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentForegroundRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundActiveBehavior,
+    neutralFocusBehavior
+);
 
 export const LightweightButtonStyles = css`
     :host(.lightweight) .control {
@@ -168,22 +197,38 @@ export const LightweightButtonStyles = css`
         background: ${neutralForegroundRestBehavior.var};
         height: calc(var(--focus-outline-width) * 1px);
     }
-`;
+`.withBehaviors(
+    accentForegroundRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundActiveBehavior,
+    accentForegroundHoverBehavior,
+    neutralForegroundRestBehavior
+);
 
 export const OutlineButtonStyles = css`
     :host(.outline) .control {
         background: transparent;
-        border-color: ${neutralOutlineRestBehavior.var};
+        border-color: ${accentFillRestBehavior.var};
     }
 
     :host(.outline) .control:hover {
-        border-color: ${neutralOutlineHoverBehavior.var};
+        border-color: ${accentFillHoverBehavior.var};
     }
 
     :host(.outline) .control:active {
-        border-color: ${neutralOutlineActiveBehavior.var};
+        border-color: ${accentFillActiveBehavior.var};
+    }
+
+    :host(.outline) .control:${focusVisible} {
+        border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var});
+        box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
     }
-`;
+`.withBehaviors(
+    accentFillRestBehavior,
+    accentFillHoverBehavior,
+    accentFillActiveBehavior,
+    neutralFocusBehavior
+);
 
 export const StealthButtonStyles = css`
     :host(.stealth) .control {
@@ -197,4 +242,8 @@ export const StealthButtonStyles = css`
     :host(.stealth) .control:active {
         background: ${neutralFillStealthActiveBehavior.var};
     }
-`;
+`.withBehaviors(
+    neutralFillStealthRestBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthActiveBehavior
+);
diff --git a/packages/web-components/fast-components/src/card/card.styles.ts b/packages/web-components/fast-components/src/card/card.styles.ts
index d1b97b30a71..8e75f46a5c9 100644
--- a/packages/web-components/fast-components/src/card/card.styles.ts
+++ b/packages/web-components/fast-components/src/card/card.styles.ts
@@ -1,6 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
-import { SystemColors } from "@microsoft/fast-web-utilities";
+import { display } from "@microsoft/fast-foundation";
 import { elevation, neutralLayerCardBehavior } from "../styles/index";
 
 export const CardStyles = css`
diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts
index ba8570de265..2dd28ccd0a2 100644
--- a/packages/web-components/fast-components/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components/src/styles/patterns/button.ts
@@ -5,19 +5,19 @@ import {
     accentFillActiveBehavior,
     accentFillHoverBehavior,
     accentFillRestBehavior,
+    accentForegroundActiveBehavior,
     accentForegroundCutRestBehavior,
+    accentForegroundHoverBehavior,
+    accentForegroundRestBehavior,
     neutralFillActiveBehavior,
     neutralFillHoverBehavior,
     neutralFillRestBehavior,
+    neutralFillStealthActiveBehavior,
+    neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
+    neutralFocusBehavior,
     neutralFocusInnerAccentBehavior,
     neutralForegroundRestBehavior,
-    accentForegroundRestBehavior,
-    accentForegroundHoverBehavior,
-    accentForegroundActiveBehavior,
-    neutralFocusBehavior,
-    neutralFillStealthRestBehavior,
-    neutralFillStealthHoverBehavior,
-    neutralFillStealthActiveBehavior,
 } from "../recipes";
 
 export const BaseButtonStyles = css`

From 736c32294ee0bf0f3c1d2d2ead57aab25851676e Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 12:05:40 -0700
Subject: [PATCH 07/11] move var and property name to constructor

---
 .../src/custom-properties/behavior.ts         | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index c39b1835f5e..5e66f539c4c 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -33,6 +33,20 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
      * the CSS Custom Property.
      */
     public readonly value: CSSCustomPropertyDefinition["value"];
+
+    private _propertyName: string;
+    /**
+     * The name of the CSSCustomPropertyBehavior formatted
+     * as a CSS custom property.
+     */
+    public readonly propertyName: string;
+
+    /**
+     * Return the CSS Custom Property formatted
+     * as a CSS variable.
+     */
+    public readonly var: string;
+
     constructor(
         /**
          * The name of the custom property.
@@ -64,38 +78,14 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
         this.name = name;
         this.value = value;
         this.host = host;
+        this.propertyName = `--${name}`;
+        this.var = `var(${this.propertyName})`;
     }
 
     private host: (
         source: typeof FASTElement & HTMLElement
     ) => Partial<CSSCustomPropertyTarget> | null;
 
-    private _propertyName: string;
-    /**
-     * The name of the CSSCustomPropertyBehavior formatted
-     * as a CSS custom property.
-     */
-    public get propertyName() {
-        if (this._propertyName === void 0) {
-            this._propertyName = `--${this.name}`;
-        }
-
-        return this._propertyName;
-    }
-
-    private _var: string;
-    /**
-     * Return the CSS Custom Property formatted
-     * as a CSS variable.
-     */
-    public get var() {
-        if (this._var === void 0) {
-            this._var = `var(${this.propertyName})`;
-        }
-
-        return this._var;
-    }
-
     /**
      * Binds the behavior to a source element
      * @param source The source element being bound

From f91c3c8070da508a7f630191f6bbdde739338def Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 12:09:00 -0700
Subject: [PATCH 08/11] update api report

---
 .../web-components/fast-foundation/docs/api-report.md  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 6a7c01a0ca2..31115c42a35 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -194,13 +194,17 @@ export function composedParent<T extends HTMLElement>(element: T): HTMLElement |
 
 // @public
 export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDefinition {
-    constructor(name: string, value: CSSCustomPropertyDefinition["value"], host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
+    constructor(
+    name: string,
+    value: CSSCustomPropertyDefinition["value"],
+    host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
     bind(source: typeof FASTElement & HTMLElement): void;
     readonly name: CSSCustomPropertyDefinition["name"];
+    readonly propertyName: string;
     unbind(source: typeof FASTElement & HTMLElement): void;
     readonly value: CSSCustomPropertyDefinition["value"];
-    get var(): string;
-    }
+    readonly var: string;
+}
 
 // @public
 export function cssCustomPropertyBehaviorFactory(name: string, value: string | ((...arg: any[]) => string), host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null): CSSCustomPropertyBehavior;

From ecba16c783dcaeebd32212761d3a1b3ed0f5917c Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 12:19:32 -0700
Subject: [PATCH 09/11] removing unused property

---
 .../fast-foundation/docs/api-report.md           | 16 ++++++++--------
 .../src/custom-properties/behavior.ts            |  1 -
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 31115c42a35..060d81f332f 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -365,7 +365,7 @@ export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }, ((this: MediaQueryList) => void)[] | ((this: MediaQueryList) => void)>;
     sheet: ElementStyles;
     constructListener(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
@@ -374,7 +374,7 @@ export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }, sheet: ElementStyles): MediaQueryListListener;
     bind(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
         from<TBase extends {
@@ -382,7 +382,7 @@ export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }): void;
     unbind(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
         from<TBase extends {
@@ -390,7 +390,7 @@ export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }): void;
 }>;
 
@@ -409,7 +409,7 @@ export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList): (she
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }, ((this: MediaQueryList) => void)[] | ((this: MediaQueryList) => void)>;
     sheet: ElementStyles;
     constructListener(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
@@ -418,7 +418,7 @@ export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList): (she
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }, sheet: ElementStyles): MediaQueryListListener;
     bind(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
         from<TBase extends {
@@ -426,7 +426,7 @@ export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList): (she
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }): void;
     unbind(this: MatchMediaStyleSheetBehavior, source: (new () => HTMLElement & FASTElement) & {
         from<TBase extends {
@@ -434,7 +434,7 @@ export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList): (she
             prototype: HTMLElement;
         }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
         define<TType extends Function>(Type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition | undefined): TType;
-        getDefinition: <T extends Function>(Type: T) => import("@microsoft/fast-element").FASTElementDefinition | undefined;
+        getDefinition<T extends Function>(Type: T): import("@microsoft/fast-element").FASTElementDefinition | undefined;
     }): void;
 }>;
 
diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index 5e66f539c4c..0ec0de8cda1 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -34,7 +34,6 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
      */
     public readonly value: CSSCustomPropertyDefinition["value"];
 
-    private _propertyName: string;
     /**
      * The name of the CSSCustomPropertyBehavior formatted
      * as a CSS custom property.

From fd3989b94f84555fe0aeebcb6cf1b7928cfeb8f3 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 12:30:18 -0700
Subject: [PATCH 10/11] mark bind and unbind as internal APIs

---
 .../fast-foundation/src/custom-properties/behavior.ts           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index 0ec0de8cda1..9eff0ccd454 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -88,6 +88,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
     /**
      * Binds the behavior to a source element
      * @param source The source element being bound
+     * @internal
      */
     bind(source: typeof FASTElement & HTMLElement): void {
         const target = this.host(source);
@@ -112,6 +113,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
     /**
      * Unbinds the behavior from the source element.
      * @param source The source element being unbound
+     * @internal
      */
     unbind(source: typeof FASTElement & HTMLElement): void {
         const target = this.host(source);

From 842af03df5101ec332dc0e30fec7c7d05e55d947 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholas.rice119@gmail.com>
Date: Tue, 9 Jun 2020 12:39:14 -0700
Subject: [PATCH 11/11] update API report

---
 packages/web-components/fast-foundation/docs/api-report.md      | 2 ++
 .../fast-foundation/src/custom-properties/behavior.ts           | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 060d81f332f..9ca40bab470 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -198,9 +198,11 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
     name: string,
     value: CSSCustomPropertyDefinition["value"],
     host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
+    // @internal
     bind(source: typeof FASTElement & HTMLElement): void;
     readonly name: CSSCustomPropertyDefinition["name"];
     readonly propertyName: string;
+    // @internal
     unbind(source: typeof FASTElement & HTMLElement): void;
     readonly value: CSSCustomPropertyDefinition["value"];
     readonly var: string;
diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
index 9eff0ccd454..2e8ee909107 100644
--- a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
+++ b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -123,6 +123,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
         }
     }
 }
+
 /**
  * Create a CSS Custom Property behavior.
  * @param name The name of the CSS custom property