![]() That's because the recipes are still drawing from their palette, and setting the fillColor does not change the palette. The fillColor token is used by most color recipes only as a reference for the luminance (or brightness) context. The scenario above works because the neutral layer recipe colors come from the neutral palette. The details: Avoid setting this to a fixed color value. Important: This token is easy to misuse and we're evaluating a more elegant solution for this common use case: Ĭonst layer = document.getElementById('m圜ardContainer') įtValueFor(layer, neutralLayer2) The default value is neutralLayer1.Įx: Set to neutralLayer2 for a 'lower' container, like beneath a Card or Accordion. fillColor: Sets a value that may be applied to an element's styles and used as context for child color recipes.When you adjust baseLayerLuminance as above, you're actually adjusting the neutralLayer* recipe colors. The second most common need for manually applying color is to define layers. You could set it to any value 0 (black) to 1 (white) depending on your needs. This is a decimal value, and the LightMode and DarkMode constants represent the standard points for light and dark mode. baseLayerLuminance: Set to StandardLuminance.DarkMode to switch into dark mode.The most common need for setting a token is to switch between light and dark mode. The following Design Tokens can be used to configure components stylistically. ![]() This is possible through the extensive use of Design Tokens and an adaptive color system. The Fluent UI Web Components are designed to be stylistically flexible, allowing dramatic changes to visual design with minimal code changes. ![]()
0 Comments
Leave a Reply. |