UNPKG

@atlaskit/tokens

Version:

Design tokens are the single source of truth to name and store design decisions.

27 lines (26 loc) 1.12 kB
import tokens, { type CSSTokenMap } from './artifacts/token-names'; type Tokens = typeof tokens; /** * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token. * This should be used to implement design decisions throughout your application. * * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted. * * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`). * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app. * * @example * ``` * <div * css={{ * backgroundColor: token('elevation.surface.raised', N0), * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`), * padding: token('spacing.scale.100', '8px'), * fontWeight: token('font.weight.regular', '400'), * }} * /> * ``` * */ declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T]; export default token;