When using Fluent UI Web Components from the CDN, I have learned it is possible to provide some values to the adaptive color system as attributes on the <fluent-design-system-provider>
element. For example: <fluent-design-system-provider base-layer-luminance=".15">
Question: Is there a similar way to set the fillColor of elements within HTML so as to have the appropriate design token values recalculated for the child elements?
For example, I am looking to do something like this:
<div id="myCardContainer" fill-color="neutralLayer2">
<fluent-button appearance="accent">Hello</fluent-button>
</div>
...and have the styles of the <div>
's child element(s) recalculated in the same way as if I had used the JavaScript method:
const layer = document.getElementById('myCardContainer');
fillColor.setValueFor(layer, neutralLayer2);