This section goes into further detail on how the Design System can be used. It will use FAST Frame Design System in the examples but none are specific to FAST Frame; use these features with your own Design System if you're not using FAST Frame.
Setting Design System Properties
Example: Setting a Design System value by property assignment
or with FAST Element's property bindings:
Example: Setting a Design System value by HTML attribute
It is a good idea to have a DesignSystemProvider with the
use-defaults attribute wrapping all of the app UI to ensure all properties used by descendent components are defined. This is especially important if the Design System properties reflect to CSS custom properties because the CSS custom properties are only created when the value is set.
use-defaults at the page root
use-defaults can also be used in conjunction with explicit Design System property attribute assignment. If both
use-defaults and an attribute setting a Design System property exist, the explicit attribute assignment takes priority.
use-defaults with attribute assignment
Composing Design System Providers
Remember from the overview that the Design System values are inherited and propagate down the DOM tree. This can be used to scope regions of a page with Design System changes.
CSS Custom Properties
Many Design System properties are intended to be consumed directly in CSS. When a Design System property is configured to emit a CSS custom property, the CSS custom property can be used in CSS for any descendent of the DesignSystemProvider.
Example: Using CSS Custom Properties
CSS Custom Property Registry
There are some things that CSS just can't do: advanced math, complex data structures, and conditionals are simply not possible with CSS today.
Example: Register a CSS custom property that is a function of the Design System
The above API is especially useful when defining a component stylesheet; individual stylesheets can declare dependencies on CSS custom properties that are functions of the element instance's Design System through with the CSSCustomPropertyBehavior. This is how the FAST Frame Color Recipes are constructed.
Example: creating a recipe dependency