To better visualize how this works, the FAST team built an application specifically for exploring the system. Recipes are currently used for color values, but they are not limited to that and their usage will be expanded soon. For instance, accentFill relies on accentFillRestDelta, accentFillHoverDelta, accentFillActiveDelta, and accentFillFocusDelta. What follows is a list of the algorithms, which function on like-named values. The current base recipes are closely related to their algorithm, but that's a convention and not a requirement. Just as you can bake different types of cookies with different combinations of sugar, butter, flour, and salt, you can produce different design system treatments by altering recipe values (measurements) or algorithms (instructions). Recipes are a combination of an algorithm and input values that produce a desired result. To accomplish these goals, the web components make heavy use of algorithmic colors called Recipes. Perceptually uniform UI across background colors.Easily swap from light mode to dark, or anywhere in-between.Ensure text meets WCAG contrast requirements.The design tokens are built around an adaptive color system that provides some unique advantages: There are no contrast requirements for a disabled control. Careful with values that are too high as the control may no longer look disabled. disabledOpacity: The opacity of disabled controls.focusStrokeWidth: Controls with width of the stroke of a component that has a stroke when it has document focus.strokeWidth: Controls the width of the stroke of a component that has a stroke.direction: The primary document direction (LTR or RTL).Used to calculate height and spacing sizes for controls. designUnit: The unit size of the design grid.baseHorizontalSpacingMultiplier (future): This value, multiplied by designUnit, sets the internal horizontal padding of most controls.baseHeightMultiplier: This value, multiplied by designUnit, sets the base height of most controls.Ex: Set to 1 to increase control size or -1 to decrease. density (in process): A modifier used with sizing tokens baseHeightMultiplier and baseHorizontalSpacingMultiplier.Ex: Increase to 20px for very round cards. layerCornerRadius: Sets the corner radius used layers like cards, flyouts, and dialogs.Ex: Increase to 6px for slightly rounder buttons and text fields. controlCornerRadius: Sets the corner radius used by controls with backplates.Here are the common sizing tokens you may want to adjust: For instance, if the type should be larger overall, increase the size of the entire type ramp instead of restyling a component to use "Plus 1" instead of "base". The tokens should be used and adjusted relatively. These tokens and values represent the default Fluent type ramp. Note that this does not import fonts, so they must either be web standard, assumed to be installed, or imported at the top of your app. bodyFont: Used to specify the font string to apply to components.accentBaseColor: Set to a custom swatch to use for color recipes for accent buttons, checkboxes, etc.neutralBaseColor: Set to a custom swatch to use for color recipes for layers and other neutral components.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. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |