Aviary tokens are foundational design primitives used in our Aviary Design System.
Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX
Add the following dependency to your package.json file:
"dependencies": {
"aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#main",
}Since this repository does not have an NPM Package associated with it, upgrading is done manually using Git tags and GitHub releases
In order to target a new release, simply specify the release number after the Git repository within package.json:
"dependencies": {
"aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#0.2",
}You can also target a specific branch for testing, using in the same format:
"dependencies": {
"aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#my-branch",
}- Determine which platform/language you are targeting
We currently support two platforms:
- Typescript (for React/React Native projects)
- SCSS (For projects that do not use CSS-in-JS)
- Import the package for use:
For React projects:
import { typography } from "aviary-tokens";For SCSS projects:
You can import from the base scss folder to include all of the variables for use in your project
@import "aviary-tokens/dist/tokens/scss";- Use the tokens!
import { typography } from "aviary-tokens";
export const myStyles = css`
font-size: ${typography.h1FontSize};
font-weight: ${typography.weightBold};
`;Our Design tokens in Figma: Foundations
Pull requests are welcome. See the contribution guidelines for more information.