(deprecated) Get from theme utils
A group of functions used to retrieve token values from theme or component props.
The following functions
getMotionFromTheme share the same annotation, therefore we will generalize them as
the getter function.
Also, since those functions are used in the same way, we will use only
getColorFromTheme to build our Syntax and Example sections.
Tokens are the foundation of every design system. The visual representation of every component is formed by combining multiple tokens into presets and group of presets later stored into component defaults object. The provided functions, specified above, are used to retrieve the token values from the correspodning getter sections.
defaultTokenwill be used as a fallback.
customPropas the property. This argument also have higher precedence and if set, will always override
(string, string) -> props -> string
Returns a CSS value as a string if valid attributes are received. Returns an empty string if invalid attributes or no attributes are provided.
This is the most basic example. Here
Paragraph component will include the color value for token:
blue020 found in the theme.
Although we pass
color as a prop to
Paragraph, the end result will be color set to
blue020 value, since our getter function doesnt set
Same code snippet, but we also pass
color as the second argument to our getter function.
Now the applied color will result to
blue050 value, because prop tokens have higher precedence.
If for some reason the token value can't be resolved from the theme, the
defaultToken = 'blue020' will be used as a fallback.
You can use non-token value.
You also can use non-token value as
customProp like example bellow: