Search code examples
fast-ui

Is there a way to set the fillColor using an HTML attribute? (Fluent UI Web Components)

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);
Solution

  • Not currently.

    This is tracked at https://github.com/microsoft/fast/issues/5286. There's some underlying infrastructure work happening now that should make this easier to solve soon.

    There is also a component that does this in the Color Explorer at https://github.com/microsoft/fast/blob/5ba576ffb833ec7d705175608394860888963721/sites/fast-color-explorer/app/components/layer-background/index.ts.

    For now use either the code you posted or incorporate the layer component above. Note that we'll be reworking the layering system to be more flexible soon. That work will take place in the adaptive-ui package.