Design tokens are the single source of truth to name and store design decisions.
Tokens are a single source of truth to name and store Atlassian design decisions.
``sh`
yarn add @atlaskit/tokens
A babel plugin to optimise performance and support fallbacks for Design System tokens.
It replaces any calls to the @atlaskit/tokens token() function with the CSS value the function
would return (i.e. var(--token-name) or variations with fallbacks).
If there’s no fallback, the plugin (optionally) finds the token’s value from the default Atlassian
theme, and sets it as the fallback.
If there is a fallback defined in code, it’s inserted into the style (expressions are inserted using
template strings).
Add the plugin to your babel configuration:
`
{
"plugins": [
["@atlaskit/tokens/babel-plugin", { "shouldUseAutoFallback": true }]
]
}
Currently the plugin supports one option, shouldUseAutoFallback. When not disabled, the pluginatlassian-light`) and use it
will fetch the token's value in the default Atlassian theme (currently
as the fallback value.
This is useful for cases where tokens are in use, but token definitions aren't guaranteed to be
present in the top-level page CSS.