Explain DesignToken does not work with volatile bindings (microsoft#5151

)

* force non-volatile binding and update docs to explain that DesignToken does not support volatile bindings

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

change/@microsoft-fast-foundation-7ce173bf-8b3d-421d-b51c-5d8decc92f9c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "force non-volatile binding and update docs to explain that DesignToken does not support volatile bindings",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/design-token/design-token.ts

@@ -361,7 +361,7 @@ class DesignTokenBindingObserver<T> {
         public readonly token: DesignTokenImpl<T>,
         public readonly node: DesignTokenNode
     ) {
-        this.observer = Observable.binding(source, this);
+        this.observer = Observable.binding(source, this, false);
 
         // This is a little bit hacky because it's using internal APIs of BindingObserverImpl.
         // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this

sites/website/src/docs/design-systems/design-tokens.md

@@ -205,7 +205,8 @@ specialColor.setValueFor(target, () => themeManager.theme === "blue" ? "#0000FF"
 themeManager.theme = "red"; // Forces the derived tokens to re-evaluate and CSS custom properties to update if applicable
 ```
 
-
+> Note: *volatile* token values that conditionally access DesignTokens or other observable properties are currently not supported by DesignToken. If you need to use conditionals,
+ensure all DesignTokens or observable properties are accessed outside of conditional blocks. See (Observables and State)[/docs/fast-element/observables-and-state#observable-features] for more information.
 ## Aliasing Design Tokens
 
 In some design systems, Design Tokens may have complex hierarchies with tokens referencing other tokens. This can be accomplished by setting a Design Token to another Design Token.