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/ts";For SCSS projects:
TODO: Verify this part lol
@import "aviary-tokens/scss";- Use the tokens!
TODO: Fill our/fix up once we're using
import { typography } from "aviary-tokens/ts";
export const myStyles = css`
font-size: ${typography.h1.fontSize};
`;Our Design tokens in Figma: Foundations
TODO: Fix this up and add CONTRIBUTING.md
Pull requests are welcome. See the contribution guidelines for more information.