@atlaskit/tokens
Advanced tools
Package description
@atlaskit/tokens is a design token library provided by Atlassian. It allows developers to use a consistent set of design tokens across their applications, ensuring a unified design language. The package provides tokens for colors, spacing, typography, and other design elements, making it easier to maintain and scale design systems.
Color Tokens
This feature allows you to use predefined color tokens in your application. The `token` function retrieves the value of a specified token, ensuring consistency across your design.
import { token } from '@atlaskit/tokens';
const primaryColor = token('color.background.brand.bold', '#0052CC');
console.log(primaryColor); // Outputs: #0052CCSpacing Tokens
This feature provides spacing tokens that can be used to maintain consistent spacing throughout your application. The `token` function retrieves the value of a specified spacing token.
import { token } from '@atlaskit/tokens';
const spacing = token('space.100', '8px');
console.log(spacing); // Outputs: 8pxTypography Tokens
This feature offers typography tokens for consistent font sizes, line heights, and other typographic properties. The `token` function retrieves the value of a specified typography token.
import { token } from '@atlaskit/tokens';
const fontSize = token('font.size.200', '14px');
console.log(fontSize); // Outputs: 14pxStyled System is a collection of utility functions for building design systems with React. It provides a set of design tokens and utilities for spacing, color, typography, and layout. Compared to @atlaskit/tokens, Styled System offers more flexibility and customization options but requires more setup and configuration.
Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. It provides a set of design tokens and utilities for styling components. Theme UI is similar to @atlaskit/tokens in that it promotes a consistent design language, but it also includes additional features like theming and CSS-in-JS support.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. It includes a set of design tokens for colors, spacing, typography, and more. While Tailwind CSS offers a different approach compared to @atlaskit/tokens, it also aims to provide a consistent design language through its utility classes.
Readme
⚠️ This package is under development and comes with no semver guarantees, your app will break if you use this directly.
Tokens are a single source of truth to name and store Atlassian design decisions.
yarn add @atlaskit/tokens
Before continuing ensure the CSS themes are installed, depending on your bundler configuration may differ.
import '@atlaskit/tokens/css/atlassian-light.css';
import '@atlaskit/tokens/css/atlassian-dark.css';
Use the token function to get a CSS variable for the named token.
import { token } from '@atlaskit/tokens';
token('color.background.default');
Change the global theme during runtime.
import { setGlobalTheme } from '@atlaskit/tokens';
setGlobalTheme('light');
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"]
}
Currently the plugin supports one option, shouldUseAutoFallback. When enabled, the plugin will fetch the token's value in the default
Atlassian theme (currently atlassian-light) and use it as the fallback value.
This is useful for cases where tokens are in use, but token definitions aren't present in the top-level page CSS.
FAQs
Unknown package
The npm package @atlaskit/tokens receives a total of 161,681 weekly downloads. As such, @atlaskit/tokens popularity was classified as popular.
We found that @atlaskit/tokens demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.