@microsoft/fast-foundation > DesignSystemProvider

DesignSystemProvider class

A element to provide Design System values to consumers via CSS custom properties and to resolve recipe values.

export declare class DesignSystemProvider extends FASTElement implements CSSCustomPropertyTarget, DesignSystemConsumer


(constructor)()Constructs a new instance of the DesignSystemProvider class


designSystem{}The design-system object. This is "observable" but will notify on object mutation instead of object assignment
disconnectedCSSCustomPropertyRegistryCSSCustomPropertyDefinition[]Allows CSSCustomPropertyDefinitions to register on this element *before* the constructor has run and the registration APIs exist. This can manifest when the DOM is parsed (and custom element tags exist in the DOM) before the script defining the custom elements is parsed, and when the elements using the CSSCustomPropertyBehaviors are defined before this DesignSystemProvider.
disconnectedRegistryArray<(provider: DesignSystemProvider) => void> | voidAllows arbitrary registration to the provider before the constructor runs. When the constructor runs, all registration functions in the disconnectedRegistry will be invoked with the provider instance.
isDesignSystemProvider(not declared)Allows other components to identify this as a provider. Using instanceof DesignSystemProvider did not seem to work.
providerDesignSystemProvider | nullThe parent provider the the DesignSystemProvider instance.
tagNamesstaticstring[]Read all tag-names that are associated to design-system-providers
useDefaultsbooleanApplies the default design-system values to the instance where properties are not explicitly assigned. This is generally used to set the root design system context.


evaluate(definition)Evaluates a CSSCustomPropertyDefinition with the current design system.
findProvider(el)staticFinds the closest design-system-provider to an element.
isDesignSystemProvider(el)staticDetermines if an element is a DesignSystemProvider
registerCSSCustomProperty(behavior)Register a CSSCustomPropertyDefinition with the DeignSystemProvider. Registering a CSSCustomPropertyDefinition will create the CSS custom property.
registerTagName(tagName)staticRegisters a tag-name to be associated with the design-system-provider class. All tag-names for DesignSystemProvider elements must be registered for proper property resolution.
unregisterCSSCustomProperty(behavior)Unregister a CSSCustomPropertyDefinition from the DeignSystemProvider. If all registrations of the definition are unregistered, the CSS custom property will be removed.